templates/test/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block meta %}
  4.     <meta name="description"
  5.           content="Calculez votre thème numérologie gratuit avec l'application Logia. Découvrez l'influence des nombres sur votre vie en quelques minutes.">
  6. {% endblock %}
  7. {% block title %}Calcul de mon thème numérologique · Logia{% endblock %}
  9. {% block body %}
  11.     <section id="hero-section"
  12.              class="bg-glow animated-glow py-5 position-relative d-flex justify-content-center align-items-center">
  13.         <div class="bg-particles">
  14.         </div>
  15.         <div class="container py-5">
  16.             <div class="row">
  17.                 <div class="col col-lg-8 m-auto">
  18.                     <form class="glow-violet form-horizontal p-4 p-md-5 pt-1 pt-md-2" action="{{ path('testResults') }}"
  19.                           method="post">
  20.                         <h1 class="medium-title text-center pt-4 pb-3">Calculer mon thème</h1>
  21.                         <p>
  22.                             Il vous suffit de rentrer vos <span class="fw-bold">noms</span> et <span class="fw-bold">prénoms</span>
  23.                             ainsi que votre
  24.                             <span class="fw-bold">date de naissance</span>.
  25.                             Les calculs sont réalisés à partir de ces données et permettent de dresser <span
  26.                                     class="fw-bold">votre thème numérologique</span>.
  27.                         </p>
  28.                         <div class="pt-3 mt-5 mb-5">
  29.                             <div class="form-group">
  30.                                 <div class="row">
  31.                                     <div class="col-md-6">
  32.                                         <label for="firstnames" class="pb-3">Prénom(s) :</label>
  33.                                         <input required class="form-control" type="text" id="firstnames"
  34.                                                name="firstnames">
  35.                                     </div>
  36.                                     <div class="col-md-6">
  37.                                         <label for="names" class="pb-3">Nom(s) :</label>
  38.                                         <input required class="form-control" type="text" id="names" name="names">
  39.                                     </div>
  40.                                 </div>
  41.                                 <div class="mt-3">
  42.                                     <small class="fst-italic">Écrivez tous vos noms et prénoms.</small>
  43.                                 </div>
  44.                             </div>
  45.                             <div class="form-group mt-4">
  46.                                 <label for="birthdate" class="pb-3">Date de naissance :</label>
  47.                                 <input required class="form-control" type="date" id="birthdate" name="birthdate"
  48.                                        value="{{ "-20year"|date('Y-m-d') }}"
  49.                                        min="1923-01-01" max="{{ "now"|date('Y-m-d') }}">
  50.                             </div>
  51.                         </div>
  52.                         <div class="pt-4 d-flex justify-content-center">
  53.                             <button type="submit"
  54.                                     class="py-3 px-5 btn btn-gold rounded-pill text-beige fw-bold btn-hover-effect">
  55.                                 Calculer <span class="d-none d-sm-inline">mon thème</span>
  56.                             </button>
  57.                         </div>
  58.                     </form>
  59.                 </div>
  60.             </div>
  61.         </div>
  62.     </section>
  63.     <div id="loadingModal" class="modal fade bg-glow animated-glow-softer" style="z-index: 100000000000">
  64.         <!-- Modal content -->
  65.         <div class="modal-content modal-transition m-0 m-auto border-0 w-100 h-100 rounded-0 bg-particles opacity-100">
  66.             <span class="close">&times;</span>
  67.             <div class="m-auto p-3 d-flex justify-content-center align-items-center flex-column">
  68.                 <h3 class="m-0 fst-italic text-white">Calcul en cours</h3>
  70.                 <dotlottie-player src="https://lottie.host/eefac7be-0d95-4a21-ad60-21bb234ac075/W9Zk10fSKb.lottie"
  71.                                   background="transparent" speed="1" style="width: 100%; max-height: 425px" loop
  72.                                   autoplay></dotlottie-player>
  73.                 <p class="jsResponseText fst-italic text-white">Merci de patienter pendant que nous préparons votre thème
  74.                     numérologique...</p>
  75.             </div>
  76.         </div>
  77.     </div>
  78. {% endblock %}
  80. {% block javascripts %}
  81.     {{ parent() }}
  82.     <script>
  83.         document.addEventListener('DOMContentLoaded', function () {
  84.             // Get the modal
  85.             let modal = document.getElementById("loadingModal");
  87. // Get the button that opens the modal
  88.             let form = document.querySelector("form");
  90. // Get the <span> element that closes the modal
  91.             let span = document.getElementsByClassName("close")[0];
  93. // When the user clicks on the button, open the modal
  94.             form.onsubmit = function (e) {
  95.                 e.preventDefault();
  96.                 modal.style.display = "block";
  97.                 setTimeout(() => {
  98.                     modal.style.opacity = "1";
  99.                 }, 200)
  101.                 setTimeout(() =>
  102.                 {
  103.                     form.submit();
  104.                 }, 3000)
  105.             }
  107. // When the user clicks on <span> (x), close the modal
  108.             span.onclick = function () {
  109.                 modal.style.display = "none";
  110.                 setTimeout(() => {
  111.                     modal.style.opacity = "0";
  112.                 }, 300)
  113.             }
  115. // When the user clicks anywhere outside of the modal, close it
  116.             window.onclick = function (event) {
  117.                 if (event.target == modal) {
  118.                     modal.style.display = "none";
  119.                     setTimeout(() => {
  120.                         modal.style.opacity = "0";
  121.                     }, 300)
  122.                 }
  123.             }
  124.         }, false);
  125.     </script>
  126. {% endblock %}