mirror of
https://github.com/torproject/lego.git
synced 2024-11-23 01:29:45 +00:00
83 lines
3.7 KiB
HTML
83 lines
3.7 KiB
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>
|