Merge pull request XRPLF#2097 from XRPLF/add-token2049-banner

add Countdown Banner for token2049 for APEX region only
jonathanlei · Aug 31, 2023 · 31a068e · 31a068e
2 parents 9a1b002 + c2f904f
commit 31a068e
Show file tree

Hide file tree

Showing 6 changed files with 280 additions and 25 deletions.
diff --git a/assets/css/devportal2022-v23.css b/assets/css/devportal2022-v23.css
diff --git a/styles/_colors.scss b/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;

diff --git a/styles/_top-banner.scss b/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;
@@ -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,

diff --git a/styles/package.json b/styles/package.json
@@ -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"

diff --git a/template/base.html.jinja b/template/base.html.jinja
@@ -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" />
 

diff --git a/template/component-top-nav.html.jinja b/template/component-top-nav.html.jinja
@@ -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">