themes/coceu/layouts/partials/hero.html

<section class="hero">
    <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>
            </a>
            {{ 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-03T24: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 -->