mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 03:45:49 +00:00
Merge pull request #2097 from XRPLF/add-token2049-banner
add Countdown Banner for token2049 for APEX region only
This commit is contained in:
Rome Reginelli
6
assets/css/devportal2022-v23.css
Normal file
6
assets/css/devportal2022-v23.css
Normal file
File diff suppressed because one or more lines are too long
@@ -29,6 +29,7 @@ $green-900: #145C35;
|
||||
$green-1000: #0A2E1B;
|
||||
$green: $green-500;
|
||||
$apex-2023-green: #00FF76;
|
||||
$token-2049-purple: #410bb9;
|
||||
|
||||
$blue-100: #E5F5FF;
|
||||
$blue-200: #B2E0FF;
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
/* sticky APEX banner */
|
||||
@keyframes pulsate {}
|
||||
@keyframes pulsate {
|
||||
}
|
||||
|
||||
.banner-container, html.light .banner-container {
|
||||
.banner-container,
|
||||
html.light .banner-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
@@ -10,7 +12,7 @@
|
||||
overflow: hidden;
|
||||
|
||||
height: 36px;
|
||||
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
height: 48px;
|
||||
}
|
||||
@@ -35,7 +37,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.d-xxl-block { // nonstandard-breakpoint for this banner only
|
||||
.d-xxl-block {
|
||||
// nonstandard-breakpoint for this banner only
|
||||
@media (min-width: 1400px) {
|
||||
display: block !important;
|
||||
}
|
||||
@@ -81,7 +84,7 @@
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $white;
|
||||
|
||||
|
||||
.apex-highlight {
|
||||
color: $apex-2023-green;
|
||||
}
|
||||
@@ -94,12 +97,156 @@
|
||||
border-color: $magenta;
|
||||
}
|
||||
}
|
||||
&:active, &:focus {
|
||||
// don't turn white on click
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: $accent-blue-90 !important;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.token-banner-container,
|
||||
html.light .token-banner-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: $accent-blue-90;
|
||||
color: $white;
|
||||
height: 48px;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
& > img {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
font-family: Work Sans;
|
||||
font-weight: 600;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.d-xxl-block {
|
||||
@media (min-width: 1400px) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.token-reg {
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
padding: 0 1rem;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
// Nonstandard "xxl" breakpoint again
|
||||
@media (min-width: 1400px) {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.token-highlight {
|
||||
color: $apex-2023-green;
|
||||
@include media-breakpoint-up(sm) {
|
||||
line-height: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.token-circled {
|
||||
padding: 0 1rem;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
transition: border-color 0.5s ease;
|
||||
|
||||
// xs breakpoint
|
||||
border: 2px solid $white;
|
||||
height: 36px;
|
||||
line-height: 32px;
|
||||
border-radius: 32px;
|
||||
font-size: 8px; // min legible font size
|
||||
margin-top: 6px;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
font-size: 2vw; // font scales up from here
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
border-width: 3px;
|
||||
height: 48px;
|
||||
line-height: 42px;
|
||||
border-radius: 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: $white;
|
||||
|
||||
.token-highlight {
|
||||
color: $apex-2023-green; /* Adjust as needed */
|
||||
}
|
||||
|
||||
.highlight-yellow {
|
||||
border-color: $yellow;
|
||||
}
|
||||
|
||||
.highlight-purple {
|
||||
border-color: $magenta;
|
||||
}
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: $accent-blue-90 !important;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.js-clock {
|
||||
padding-top: 3px;
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.clock-number {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-purple{
|
||||
@include media-breakpoint-down(lg) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.token-highlight{
|
||||
margin-right:10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* old "pencil banner" style, currently unused */
|
||||
.top-banner {
|
||||
@@ -156,8 +303,8 @@
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
position: sticky;
|
||||
width: 100%;
|
||||
position: sticky;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.right-sidebar,
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
"node-sass": "^7.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v22.css --output-style compressed",
|
||||
"build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v22.css --output-style compressed --source-map true",
|
||||
"build-css-watch-out": "node-sass --recursive --watch --include-path scss xrpl.scss ../out/assets/css/devportal2022-v22.css --output-style compressed --source-map true"
|
||||
"build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v23.css --output-style compressed",
|
||||
"build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v23.css --output-style compressed --source-map true",
|
||||
"build-css-watch-out": "node-sass --recursive --watch --include-path scss xrpl.scss ../out/assets/css/devportal2022-v23.css --output-style compressed --source-map true"
|
||||
},
|
||||
"dependencies": {
|
||||
"sass": "^1.26.10"
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
{% if target.lang=="ja" %}
|
||||
<link href="{{currentpage.prefix}}assets/css/fonts-ja.css" rel="stylesheet" />
|
||||
{% endif %}
|
||||
<link href="{{currentpage.prefix}}assets/css/devportal2022-v22.css" rel="stylesheet" />
|
||||
<link href="{{currentpage.prefix}}assets/css/devportal2022-v23.css" rel="stylesheet" />
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
|
||||
|
||||
|
||||
@@ -1,15 +1,116 @@
|
||||
<a href="https://www.apexdevsummit.com/" target="_blank" class="w-inline-block banner-container d-flex justify-content-center">
|
||||
<img src="assets/img/apex-texture-purple-diamond.svg" alt="" class="d-none d-xl-block" />
|
||||
<div class="apex-reg">{% trans %}Register for <span class="apex-highlight">APEX Dev Summit 2023</span>{% endtrans %}</div>
|
||||
<img src="assets/img/apex-texture-orange-diamond.svg" alt="" class="d-none d-md-block" />
|
||||
<img src="assets/img/apex-texture-red-diamond.svg" alt="" class="d-md-none"/>
|
||||
<div class="apex-circled highlight-yellow">{% trans %}Amsterdam{% endtrans %}</div>
|
||||
<img src="assets/img/apex-texture-green-diamond.svg" alt="" class="d-none d-md-block" />
|
||||
<img src="assets/img/apex-xrpl-logo.svg" alt="(XRPL)" class="d-none d-md-block" />
|
||||
<img src="assets/img/apex-texture-polkadots.svg" alt="" class="d-none d-xxl-block" />
|
||||
<div class="apex-circled d-none d-lg-block highlight-purple">{% trans %}Register Now{% endtrans %}</div>
|
||||
<img src="assets/img/apex-texture-yellow-grid.svg" alt="" class="d-none d-xl-block" />
|
||||
</a>
|
||||
|
||||
|
||||
<!-- Inline script to conditionally display the banner -->
|
||||
<script>
|
||||
// Get the user's location using the provided JavaScript code
|
||||
let userLocation = window.Osano.cm.countryCode;
|
||||
|
||||
// List of countries for which we want to serve the banner
|
||||
let targetCountries = ['sg', 'my', 'id', 'th', 'vn', 'hk', 'au'];
|
||||
|
||||
// Check if the user's location is in the list of target countries
|
||||
let isTargetCountry = targetCountries.includes(userLocation);
|
||||
|
||||
if (isTargetCountry) {
|
||||
// Define the banner HTML with the countdown timer
|
||||
let token2049bannerHTML = `
|
||||
<a href="https://www.token2049.com/" target="_blank" class="w-inline-block token-banner-container d-flex justify-content-center">
|
||||
<div id="js-clock" class="js-clock align-items-center d-none d-sm-inline-block">
|
||||
<div class="box">
|
||||
<div id="js-clock-days" class="clock-number">00</div>
|
||||
<div class="clock-label">Days</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div id="js-clock-hours" class="clock-number">00</div>
|
||||
<div class="clock-label">Hrs</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div id="js-clock-minutes" class="clock-number">00</div>
|
||||
<div class="clock-label">Min</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div id="js-clock-seconds" class="clock-number">00</div>
|
||||
<div class="clock-label">Sec</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="token-reg"> <span class="d-none d-lg-inline-block">{% trans %}Countdown to{% endtrans %}</span>
|
||||
<span class="d-inline-block">{% trans %}XRPL Zone {% endtrans %}</span>
|
||||
<span class="token-highlight d-inline-block">{% trans %}@Token2049{% endtrans %}</span></div>
|
||||
<div class="token-circled d-md-block highlight-yellow d-inline-block">{% trans %} Singapore{% endtrans %}</div>
|
||||
<div class="token-reg d-none d-md-inline-block"> {% trans %} 12 September 2023 {% endtrans %} </div>
|
||||
<div class="token-circled d-none d-lg-inline-block highlight-purple">{% trans %}Register Now{% endtrans %}</div>
|
||||
</a>
|
||||
`;
|
||||
|
||||
// Write the banner directly to the document
|
||||
document.write(token2049bannerHTML);
|
||||
|
||||
var deadline = '2023/09/13 08:00';
|
||||
|
||||
function pad(num, size) {
|
||||
var s = "0" + num;
|
||||
return s.substr(s.length - size);
|
||||
}
|
||||
|
||||
function parseDate(date) {
|
||||
const parsed = Date.parse(date);
|
||||
if (!isNaN(parsed)) return parsed
|
||||
return Date.parse(date.replace(/-/g, '/').replace(/[a-z]+/gi, ' '));
|
||||
}
|
||||
|
||||
function getTimeRemaining(endtime) {
|
||||
let total = parseDate(endtime) - Date.parse(new Date())
|
||||
let seconds = Math.floor((total / 1000) % 60)
|
||||
let minutes = Math.floor((total / 1000 / 60) % 60)
|
||||
let hours = Math.floor((total / (1000 * 60 * 60)) % 24)
|
||||
let days = Math.floor(total / (1000 * 60 * 60 * 24))
|
||||
|
||||
return { total, days, hours, minutes, seconds };
|
||||
}
|
||||
|
||||
function clock(id, endtime) {
|
||||
let days = document.getElementById(id + '-days')
|
||||
let hours = document.getElementById(id + '-hours')
|
||||
let minutes = document.getElementById(id + '-minutes')
|
||||
let seconds = document.getElementById(id + '-seconds')
|
||||
|
||||
var timeinterval = setInterval(function () {
|
||||
var time = getTimeRemaining(endtime);
|
||||
|
||||
if (time.total <= 0) {
|
||||
clearInterval(timeinterval);
|
||||
} else {
|
||||
days.innerHTML = '<span class=countdown-highlight>' + pad(time.days, 2) + '</span>';
|
||||
hours.innerHTML = pad(time.hours, 2);
|
||||
minutes.innerHTML = pad(time.minutes, 2);
|
||||
seconds.innerHTML = pad(time.seconds, 2);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
clock('js-clock', deadline);
|
||||
} else {
|
||||
let apexBanner = `
|
||||
<a href="https://www.apexdevsummit.com/" target="_blank" class="w-inline-block banner-container d-flex justify-content-center">
|
||||
<img src="assets/img/apex-texture-purple-diamond.svg" alt="" class="d-none d-xl-block" />
|
||||
<div class="apex-reg">{% trans %}Register for <span class="apex-highlight">APEX Dev Summit 2023</span>{% endtrans %}</div>
|
||||
<img src="assets/img/apex-texture-orange-diamond.svg" alt="" class="d-none d-md-block" />
|
||||
<img src="assets/img/apex-texture-red-diamond.svg" alt="" class="d-md-none"/>
|
||||
<div class="apex-circled highlight-yellow">{% trans %}Amsterdam{% endtrans %}</div>
|
||||
<img src="assets/img/apex-texture-green-diamond.svg" alt="" class="d-none d-md-block" />
|
||||
<img src="assets/img/apex-xrpl-logo.svg" alt="(XRPL)" class="d-none d-md-block" />
|
||||
<img src="assets/img/apex-texture-polkadots.svg" alt="" class="d-none d-xxl-block" />
|
||||
<div class="apex-circled d-none d-lg-block highlight-purple">{% trans %}Register Now{% endtrans %}</div>
|
||||
<img src="assets/img/apex-texture-yellow-grid.svg" alt="" class="d-none d-xl-block" />
|
||||
</a>`;
|
||||
|
||||
// Write the banner directly to the document
|
||||
document.write(apexBanner);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="top-nav navbar navbar-expand-lg navbar-dark fixed-top">
|
||||
<a href="{% if currentpage.prefix %}{{currentpage.prefix}}{% else %}/{% endif %}" class="navbar-brand"><img class="logo" height="40" alt="{{target.display_name}}" /></a>
|
||||
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#top-main-nav" aria-controls="navbarHolder" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
||||
Reference in New Issue
Block a user