lego/templates/banner.html

<div class="banner">
  <input id="trigger" type="checkbox" title="Close banner" />
  <label for="trigger" class="banner-close text-white">
      <div class="d-flex h-100">
        <img src="{{ '/static/images/yec/x-dark.png'|asseturl }}" class="m-auto h-100 w-100 p-1 img-svg">
      </div>
  </label>
  <span class="eoy-sr-only text-black">Close banner</span>
  
  <div id="banner-header">
    <div class="banner-content">
      <div class="banner-content-spacer pt-5 h-100">
        <div class="banner-content-container d-flex px-3">
          <div id="banner-text-container" class="d-flex flex-column {{ bag('alternatives', this.alt, 'direction') }}">
            <div id="banner-text">
              <h1 class="yec-variant-browse">{{ _("You have a right to BROWSE without being watched.") }}</h1>
              <h1 class="yec-variant-search">{{ _("You have a right to SEARCH without being followed.") }}</h1>
              <h1 class="yec-variant-speak">{{ _("You have a right to SPEAK without uninvited listeners.") }}</h1>
              <p>{{ _("Join the thousands of Tor supporters building an internet powered by privacy.") }} 
                 {{ _("Make a donation today.") }}</p>
              <p><strong>{{ _("Through December 31, your gift will be matched 1:1, up to $300,000!") }}</strong></p>
            </div>
            <div id="yec-donate-button-container">
              <a class="btn" id="yec-donate-button" href="https://donate.torproject.org/">
                <span>{{ _("Donate now") }}</span>
                <img src="{{ '/static/images/yec/heart.png'|asseturl }}" class="donate-heart img-svg">
              </a>
            </div>
          </div>
          <div class="banner-main-graphics h-100">
            <img class="yec-illo yec-variant-browse img-svg" src="{{ '/static/images/yec/illo-yec-browse.png'|asseturl }}">
            <img class="yec-illo yec-variant-search img-svg" src="{{ '/static/images/yec/illo-yec-search.png'|asseturl }}">
            <img class="yec-illo yec-variant-speak img-svg" src="{{ '/static/images/yec/illo-yec-speak.png'|asseturl }}">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
/* persist banner close across pages in the same session/tab */
let trigger = document.querySelector(".banner #trigger");
trigger.addEventListener("change", () => {
    sessionStorage.setItem("bannerClosed", trigger.checked);
});
if (sessionStorage.getItem("bannerClosed")) {
    trigger.checked = sessionStorage.getItem("bannerClosed");
}
/* display a random variant of the banner */
/* not using jQuery because it's loaded later, and this is just faster */
const variants = ['browse', 'search', 'speak'];
const default_variant = 'browse';
const variant = variants[Math.floor(Math.random() * variants.length)]
const variant_elements =  document.querySelectorAll('h1.yec-variant-' + default_variant + ', img.yec-variant-' + default_variant);
if (variant == default_variant) {
    variant_elements.forEach((i) => {
        i.style.visibility = 'visible';
    });
} else {
    variant_elements.forEach((i) => {
        i.style.display = 'none';
    });
    document.querySelector('h1.yec-variant-' + variant).style.display = 'inline';
    document.querySelector('img.yec-variant-' + variant).style.display = 'block';
}
document.getElementById('yec-donate-button').classList.add('yec-variant-' + variant);
</script>

<noscript>
<!-- show the default variant -->
<style>
  #banner-header .banner-content h1.yec-variant-browse,
  #banner-header .banner-content img.yec-variant-browse {
    visibility: visible;
  }
  #yec-donate-button {
    background-color: var(--abouttor-yec-button-bg-color-browse);
    visibility: visible;
  }
</style>
</noscript>