server/views/countdown.twig

{% extends "./base.twig" %}
{% block title %}Accueil{% endblock %}
{% block head %}
    <meta name="description" content="Découvrez la riche vie associative autour de Gaillon-Aubevoye grâce à au forum virtuel mit en place par l'Espace Condorcet" />
    <meta name="keywords" content="associations,condorcet,espace condorcet,gaillon,aubevoye,forum,virtuel,centre social,village des associations" />

    <meta property="og:title" content="Forum virtuel des associations 2020">
    <meta property="og:description" content="Découvrez la riche vie associative autour de Gaillon-Aubevoye grâce à au forum virtuel mit en place par l'Espace Condorcet">
    <meta property="og:image" content="/imgs/espace_condorcet_logo.jpg">

    <link rel="stylesheet" href="/styles/countdown.css" />
{% endblock %}
{% block content %}
  <div class="countdown" id="countdown">
    <div class="countdown-title-container">
      <h2 class="countdown-title">Soyez patient...</h2>
      <h5 class="countdown-subtitle">Le site ouvre le 4 septembre à midi, c'est à dire dans :</h5>
    </div>
    <div id="counter" class="counter">
      <div class="counter-component days">
        <span id="days"></span>
        <div class="label">Jours</div>
      </div>
      <span class="separator">:</span>
      <div class="counter-component hours">
        <span id="hours"></span>
        <div class="label">Heures</div>
      </div>
      <span class="separator">:</span>
      <div class="counter-component minutes">
        <span id="minutes"></span>
        <div class="label">Minutes</div>
      </div>
      <span class="separator">:</span>
      <div class="counter-component seconds">
        <span id="seconds"></span>
        <div class="label">Secondes</div>
      </div>
    </div>
  </div>
{% endblock %}
{% block scripts %}
  <script>
  let openDate = new Date(`{{ openDate }}`)
  </script>
  <script src="/scripts/countdown.js"></script>
{% endblock %}