Remove countdown from the main page
diff --git a/themes/coceu/layouts/partials/hero.html b/themes/coceu/layouts/partials/hero.html index 415c2f4..4d089f2 100644 --- a/themes/coceu/layouts/partials/hero.html +++ b/themes/coceu/layouts/partials/hero.html
@@ -1,12 +1,12 @@ <section class="hero"> - <div class="hero-middle"> + <div class="hero-middle"> <img src="/images/logo-h.svg" class="img-fluid mb-4 hero-logo"> <h3 class="hero-tagline text-center">Merge with the ASF <strong>EU</strong>niverse</h3> <h4 class="hero-meta text-center">June 3-5, 2024</h4> <h4 class="hero-meta text-center">Bratislava, Slovakia</h4> <div class="cta-container my-4 text-center"> - + {{ with .Site.Params.hero.cta1 }} <a id="hero-button1" href="{{ .link }}" target="_blank" class="mx-4"> <button id="button-hero1" class="btn text-white my-3 btn-rounded">{{ .text }}</button> @@ -14,127 +14,22 @@ {{ end }} {{ with .Site.Params.hero.cta2 }} - + <a id="hero-button2" href="{{ .link }}" target="_blank" class="mx-4"> <button id="button-hero2" class="btn text-white my-3 btn-rounded">{{ .text }}</button> </a> - + {{ end }} <br><br> <div class="text-center bg-box"> <h3>The ASF community welcomes you to Bratislava, Slovakia for 3 days of learning, sharing and networking.</h3> - + </div> <div id="speakers"></div> - + </div> - + </div> </section> - - <!-- Countdown --> - <div class="count-down mb-5"> - - <div class="circle-progress-wrap"> - <div class="circle-progress"> - <svg width="56" height="56"> - <circle cx="28" cy="28" r="26" stroke-width="3" stroke="#c8c8c87a" fill="none"></circle> - <circle id="circle2-weeks" cx="28" cy="28" r="26" stroke-width="2" stroke="#ffd200" fill="none" transform="matrix(0,-1,1,0,0, 56)" stroke-dasharray="70.79055446089001 92.57226352577925"></circle> - </svg> - <div class="count mt-2" id="count-weeks">26</div> - </div> - <div class="count-label count text-center mt-1">Weeks</div> - </div> - - <div class="circle-progress-wrap"> - <div class="circle-progress"> - <svg width="56" height="56"> - <circle cx="28" cy="28" r="26" stroke-width="3" stroke="#c8c8c87a" fill="none"></circle> - <circle id="circle2-days" cx="28" cy="28" r="26" stroke-width="2" stroke="#ffd200" fill="none" transform="matrix(0,-1,1,0,0, 56)" stroke-dasharray="0 163.36281798666926"></circle> - </svg> - <div class="count mt-2" id="count-days">0</div> - </div> - <div class="count-label count text-center mt-1">Days</div> - </div> - - <div class="circle-progress-wrap"> - <div class="circle-progress"> - <svg width="56" height="56"> - <circle cx="28" cy="28" r="26" stroke-width="3" stroke="#c8c8c87a" fill="none"></circle> - <circle id="circle2-hours" cx="28" cy="28" r="26" stroke-width="2" stroke="#ffd200" fill="none" transform="matrix(0,-1,1,0,0, 56)" stroke-dasharray="10.890854532444617 152.47196345422464"></circle> - </svg> - <div class="count mt-2" id="count-hours">4</div> - </div> - <div class="count-label count text-center mt-1">Hours</div> - </div> - - <div class="circle-progress-wrap"> - <div class="circle-progress"> - <svg width="56" height="56"> - <circle cx="28" cy="28" r="26" stroke-width="3" stroke="#c8c8c87a" fill="none"></circle> - <circle id="circle2-minutes" cx="28" cy="28" r="26" stroke-width="2" stroke="#ffd200" fill="none" transform="matrix(0,-1,1,0,0, 56)" stroke-dasharray="103.46311805822386 59.8996999284454"></circle> - </svg> - <div class="count mt-2" id="count-minutes">38</div> - </div> - <div class="count-label count text-center mt-1">Minutes</div> - </div> - - <div class="circle-progress-wrap"> - <div class="circle-progress"> - <svg width="56" height="56"> - <circle cx="28" cy="28" r="26" stroke-width="3" stroke="#c8c8c87a" fill="none"></circle> - <circle id="circle2-seconds" cx="28" cy="28" r="26" stroke-width="2" stroke="#ffd200" fill="none" transform="matrix(0,-1,1,0,0, 56)" stroke-dasharray="57.17698629533424 106.18583169133503"></circle> - </svg> - <div class="count mt-2" id="count-seconds">21</div> - </div> - <div class="count-label count text-center mt-1">Seconds</div> - </div> - - </div> - - <script> - const deadline = new Date('2024-06-03T09:00:00').getTime(); - - function animateBorder (ele, value) { - const circle = document.getElementById(`circle2-${ele}`); - document.getElementById(`count-${ele}`).innerHTML = value; - const percent = value / 60, perimeter = Math.PI * 2 * 26; - circle.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1- percent)); - } - - - - function updateCountdown () { - const now = new Date().getTime(); - const timeDiff = deadline - now; - - - if (timeDiff <= 0) { - clearInterval(countdownInterval); - return; - } - - const weeks = Math.floor(timeDiff / (1000 * 60 * 60 * 24 * 7)); - const days = Math.floor((timeDiff % (1000 * 60 * 60 * 24 * 7)) / (1000 * 60 * 60 * 24)); - const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); - const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60)); - const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000); - - - animateBorder('weeks', weeks); - animateBorder('days', days) - animateBorder('hours', hours) - animateBorder('minutes', minutes) - animateBorder('seconds', seconds) - } - - - const countdownInterval = setInterval(updateCountdown, 1000); - - </script> - - <!-- /Countdown --> - -