<div class="banner">
  <input id="trigger" type="checkbox" title="Close banner" />
  <label for="trigger" class="banner-close text-white">
    <button class="d-flex">
      <img src="{{ '/static/images/yec/x-light.png'|asseturl }}" class="img-svg" height="18" width="18">
    </button>
  </label>
  <span class="eoy-sr-only text-black">Close banner</span>
  <div id="banner-header">
    <div class="banner-content">
      <div class="banner-content-spacer d-flex justify-content-center">
        <div class="banner-content-container">
          <div class="banner-main-graphics">
            <img class="yec-illo img-svg" src="{{ '/static/images/yec/globe-chain-burst.png'|asseturl }}" alt="{{ _("A wireframe globe breaking out of chains") }}" role="img">
          </div>
          <div id="banner-text-container" class="d-flex flex-wrap {{ bag('alternatives', this.alt, 'direction') }}">
            <div id="banner-text">
              <h1 class="yec-variant-browse">{{ _('Free the internet') }}</h1>
              <p>{{ _("Support tools that break the chains of censorship and surveillance.") }} <strong>{{ _("Donate to the Tor Project today.") }}</strong></p>
            </div>
            <div id="yec-donate-button-container">
              <a class="btn" id="yec-donate-button" href="https://www.torproject.org/donate/donate-2025-banner-{{ this.alt }}">
                <span>{{ _("Donate now") }}</span>
                <img src="{{ '/static/images/yec/heart.png'|asseturl }}" class="donate-heart img-svg" alt="" role="img">
              </a>
            </div>
          </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");
}
</script>
