initial commit

styles/_colors.scss

@@ -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;

styles/_top-banner.scss

@@ -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;
@@ -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;
     }
@@ -94,12 +97,118 @@
       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;
+  border-top: 5px solid $apex-2023-green;
+
+  height: 48px;
+
+  @include media-breakpoint-up(lg) {
+    height: 60px;
+  }
+
+  & > img {
+    height: 36px;
+
+    @include media-breakpoint-up(lg) {
+    }
+  }
+
+  & > 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: 3rem;
+    @include media-breakpoint-up(md) {
+      padding: 0 1rem;
+    }
+  }
+
+  .token-highlight {
+    color: $token-2049-purple;
+    @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;
+
+    border: 2px solid $white;
+    height: 36px;
+    border-radius: 32px;
+    font-size: 2vw;
+    margin-top: 2px;
+    line-height: 3rem;
+
+    @include media-breakpoint-up(lg) {
+      border-width: 3px;
+      height: 48px;
+      border-radius: 40px;
+      font-size: 16px;
+    }
+
+    @include media-breakpoint-up(xl) {
+      font-size: 19px;
+    }
+  }
+
+  &:hover {
+    text-decoration: none;
+    color: $white;
+
+    .token-highlight {
+      color: $token-2049-purple; /* 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 .box {
+    display: inline-block;
+    margin-right: 10px;
+    font-size: 14px;
+  }
+}
 
 /* old "pencil banner" style, currently unused */
 .top-banner {
@@ -156,8 +265,8 @@
 }
 
 .top-nav {
-    position: sticky;
-    width: 100%;
+  position: sticky;
+  width: 100%;
 }
 
 .right-sidebar,

template/component-top-nav.html.jinja

@@ -10,6 +10,120 @@
   <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', 'us'];
+
+    // 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 bannerHTML = `
+        <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 d-flex align-items-center">
+            <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">{% trans %}Countdown to XRPL Zone<span class="token-highlight"> @Token2049</span>{% endtrans %}</div>
+           <div class="token-circled d-lg-block highlight-purple">{% trans %} Singapore{% endtrans %}</div>
+           <div class="token-reg"> {% trans %} 12 September 2023 {% endtrans %} </div>
+        </a>
+      `;
+
+      // Write the banner directly to the document
+      document.write(bannerHTML);
+    }
+  </script>
+
+  <!-- Countdown timer script -->
+  <script>
+    (function () {
+      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);
+    })();
+  </script>
+
+  <!-- Clock CSS -->
+  <style>
+    .clock-number {
+      font-variant-numeric: tabular-nums;
+    }
+    .js-clock .box {
+      display: inline-block;
+      margin-right: 10px;
+    }
+    .js-clock .box:last-child {
+      margin-right: 0;
+    }
+  </style>
+
+
+
+
+
+
 <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">