xrpl-dev-portal/template/component-top-nav.html.jinja

<!-- 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">
    <span class="navbar-toggler-icon"><div></div></span>
  </button>
  <div class="collapse navbar-collapse justify-content-between" id="top-main-nav">
    <ul class="nav navbar-nav" id="topnav-pages">
      {% macro dropdown(top_page) %}
      {% set printed_groupings = [] %}
      {% if top_page.children|selectattr('top_nav_omit', 'undefined_or_ne', True)|list|length %}
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="{% if "//" not in top_page.html %}{{currentpage.prefix}}{% endif %}{{top_page.html}}" id="topnav_{{slug(top_page.html)}}" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>{% if top_page.top_nav_name is defined %}{{top_page.top_nav_name}}{% else %}{{top_page.name}}{% endif %}</span></a>
        <div class="dropdown-menu" aria-labelledby="topnav_{{slug(top_page.html)}}" id="topnav_dd_{{slug(top_page.html)}}">
          {% if top_page.top_nav_hero_image is defined %}
          <a class="dropdown-item dropdown-hero" id="dropdown-hero-for-{{slug(top_page.name)}}" href="{% if "//" not in top_page.html %}{{currentpage.prefix}}{% endif %}{{top_page.html}}">
            <img id="{{top_page.top_nav_hero_image}}" alt="{{top_page.name}} icon" />
            <div class="dropdown-hero-text">
              <h4>{{top_page.name}}</h4>
              <p>{{top_page.top_nav_blurb|default(top_page.blurb)}}</p>
            </div>
          </a>
          {% elif top_page.top_nav_grouping is defined %}
          <div class="navcol col-for-{{slug(top_page.top_nav_grouping)}}">
            <h5 class="dropdown-item">{{top_page.top_nav_grouping}}</h5>
            {% set _ = printed_groupings.append(top_page.top_nav_grouping) %}
            <a class="dropdown-item {% if currentpage == top_page %} active{% endif %}" href="{% if "//" not in top_page.html %}{{currentpage.prefix}}{% endif %}{{top_page.html}}">{{top_page.name}}</a>
          {% endif %}
          {% set dropdownchildren = top_page.children|list %}
          {% for linkhtml in top_page.top_nav_shortcuts %}
            {% set _ = dropdownchildren.append(pages|selectattr("html", "defined_and_equalto", linkhtml)|first) %}
            {% if _ is not defined %}
              {% include "ERROR: Couldn't find page "+linkhtml+" from top_nav_shortcuts" %}
            {% endif %}
          {% endfor %}
          {% for link in dropdownchildren if not link.top_nav_omit %}
            {% if link.top_nav_grouping not in printed_groupings %}
            {% if printed_groupings %}
          </div><!--./col-->
            {% endif %}
            {% if link.top_nav_grouping is defined %}
          <div class="navcol col-for-{{slug(link.top_nav_grouping)}}">
            <h5 class="dropdown-item">{{link.top_nav_grouping}}</h5>
            {% else %}
          <div class="navcol col-for-ungrouped">
            {% endif %}
            {% set _ = printed_groupings.append(link.top_nav_grouping) %}
            {% endif %}
            <a class="dropdown-item{% if currentpage == link %} active{% endif %}{% if "//" in link.html %} external-link{% endif %}" href="{% if "//" not in link.html %}{{currentpage.prefix}}{% endif %}{{link.html}}"{% if "//" in link.html %} target="_blank"{% endif %}>{% if link.top_nav_name is defined %}{{link.top_nav_name}}{% else %}{{link.name}}{% endif %}</a>
          {% endfor %}
          </div><!--./col-->
        </div><!--/.dropdown-menu-->
      </li>
      {% elif not top_page.top_nav_omit %}
      <li class="nav-item">
        <a class="nav-link{% if "//" in top_page.html %} external-link{% endif %}" href="{% if "//" not in top_page.html %}{{currentpage.prefix}}{% endif %}{{top_page.html}}"{% if "//" in top_page.html %} target="_blank"{% endif %}><span>{{top_page.name}}</span></a>
      </li>
      {% endif %}
      {% endmacro %}

      {% for page in (pages|first).children %}
      {{ dropdown(page) }}
      {% endfor %}
    </ul><!-- /.navbar-nav -->

    <div class="nav-item search" id="topnav-search">
      <form class="navbar-form navbar-right" role="search">
        <div class="form-inline">
          <div class="input-group" id="topsearchboxcontainer">
            <label class="input-group-prepend" for="topsearchbox"><i class="fa fa-search input-group-text"></i><span class="sr-only">{% trans %}Search{% endtrans %}</span></label>
            <input id="topsearchbox" name="q" type="text" class="form-control searchinput" placeholder="{% trans %}Search site...{% endtrans %}">
          </div><!--/.input-group-->
        </div>
      </form>
    </div><!--/#topnav-search-->

    <div class="nav-item" id="topnav-language">
      <div class="dropdown">
        <a class="nav-link dropdown-toggle with-caret" id="language_selector_header_btn" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          {{(config.languages|selectattr('code', 'eq', target.lang)|first).display_name}}
          <span class="chevron"><span></span><span></span></span>
        </a>
        <div class="dropdown-menu smaller-dropdown" aria-labelledby="language_selector_header_btn">
          <hr />
          {% for lang in config.languages if lang.code != target.lang %}
          <a class="dropdown-item" href="{{lang.prefix}}{{currentpage.html}}">
            {{lang.display_name}}
          </a>
          <hr />
          {% endfor %}
        </div><!--/.dropdown-menu-->
      </div><!--/.dropdown-->
    </div><!--/.language-selector-->

    {% if target.light_theme_enabled %}
    <div class="nav-item" id="topnav-theme">
      <form class="form-inline">
        <div class="custom-control custom-theme-toggle form-inline-item" title="" data-toggle="tooltip" data-placement="left" data-original-title="Toggle Dark Mode">
          <input type="checkbox" class="custom-control-input" id="css-toggle-btn">
          <label class="custom-control-label" for="css-toggle-btn"><span class="d-lg-none">Light/Dark Theme</span></label>
        </div>
      </form>
    </div><!--/#topnav-theme-->
    {% endif %}
  </div><!--/#top-main-nav-->
</nav>