Commit b21be4a2 authored by sajolida's avatar sajolida
Browse files

Add counter to donation banner (#16043)

parent dc6d9cdc
/* Position banner */
#donate-banner {
position: relative;
margin: 0 auto;
max-width: 986px;
padding: 0 2em;
......@@ -42,13 +43,44 @@ .donate-pt {
display: block !important;
/* Counter */
.counter {
position: absolute;
top: 50%;
transform: translateY(-50%); /* Align vertically */
right: 15px;
width: 200px;
font-weight: normal;
text-align: center;
.counter-progress {
margin-top: 4px;
height: 20px;
background: white;
border-radius: 4px;
box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
padding: 3px;
.counter-progress-bar {
height: 100%;
background: black;
/* Hide the number of days remaining when there is no JS to calculate them */
.counter-days {
display: none;
/* Style for 2018 */
#donate-banner {
background: yellow url(donate-banner/give-love.svg) no-repeat 3.5em;
background-size: 4.6em;
color: black;
padding: 1em 2em 1em 10.3em;
padding: 1em 14em 1em 10.3em;
font-size: 16px;
font-weight: bold;
document.addEventListener('DOMContentLoaded', function() {
var endOfCampaign = new Date("2019-01-15");
// Display days remaining when JS is enabled
var days = document.getElementsByClassName('counter-days');
for (let i = 0; i < days.length; i++) {
days[i].style.display = "block";
// Adjust the number of days remaining
var numberOfDays = document.getElementsByClassName('counter-number-of-days');
for (let i = 0; i < numberOfDays.length; i++) {
let now = new Date();
numberOfDays[i].textContent = Math.round((endOfCampaign-now)/24/60/60/1000);
......@@ -24,6 +24,7 @@
<script src="<TMPL_VAR BASEURL>lib/js/mirror-dispatcher.js" type="text/javascript"></script>
<script src="<TMPL_VAR BASEURL>donate-banner.js" type="text/javascript"></script>
......@@ -102,6 +103,26 @@
<!-- Faça uma doação para ajudar o Tails a continuar a existir! -->
<span class="second">Donate today to protect and sustain Tails!</span>
<div class="counter">
<div class="counter-amount donate-en">$XX&#8239;XXX out of $140&#8239;000</div>
<div class="counter-amount donate-es">XX&#8239;XXX€ de 120&#8239;000€</div>
<div class="counter-amount donate-de">XX&#8239;XXX€ von 120&#8239;000€</div>
<div class="counter-amount donate-fa">$XX&#8239;XXX out of $140&#8239;000</div>
<div class="counter-amount donate-fr">XX&#8239;XXX€ sur 120&#8239;000€</div>
<div class="counter-amount donate-it">XX&#8239;XXX€ out of 120&#8239;000€</div>
<div class="counter-amount donate-pt">XX&#8239;XXX€ out of 120&#8239;000€</div>
<div class="counter-progress">
<div class="counter-progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
<div class="donate-en"><div class="counter-days"><span class="counter-number-of-days"></span> days remaining</div></div>
<div class="donate-es"><div class="counter-days">Quedan <span class="counter-number-of-days"></span> días</div></div>
<div class="donate-de"><div class="counter-days">Noch <span class="counter-number-of-days"></span> Tage übrig</div></div>
<div class="donate-fa"><div class="counter-days"><span class="counter-number-of-days"></span> days remaining</div></div>
<div class="donate-fr"><div class="counter-days"><span class="counter-number-of-days"></span> jours restants</div></div>
<div class="donate-it"><div class="counter-days"><span class="counter-number-of-days"></span> days remaining</div></div>
<div class="donate-pt"><div class="counter-days"><span class="counter-number-of-days"></span> days remaining</div></div>
<TMPL_IF HTML5><article class="page"><TMPL_ELSE><div class="page"></TMPL_IF>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment