templates/numbers/detail.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block meta %}
  4.     <meta name="description"
  5.           content="Détail et signification du {{ number }}, {{ numberData['title'] }}. Découvrez l'influence des nombres sur votre vie en quelques minutes.">
  6. {% endblock %}
  7. {% block title %}Détail du nombre {{ number }}, {{ numberData['title'] }} · Logia{% endblock %}
  9. {% block stylesheets %}
  10.     {{ parent() }}
  11.     <link
  12.             rel="stylesheet"
  13.             href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
  14.     />
  16. {% endblock %}
  17. {% block body %}
  18.     <div class="bg-glow animated-glow">
  19.         <section id="hero-section"
  20.                  class="faded-black-transparent position-relative overflow-hidden">
  21.             <div class="bg-particles">
  22.                 <dotlottie-player src="https://lottie.host/eefac7be-0d95-4a21-ad60-21bb234ac075/W9Zk10fSKb.lottie"
  23.                                   background="transparent" speed="0.6" style="width: 100%;" loop
  24.                                   autoplay></dotlottie-player>
  25.             </div>
  27.             <div class="container">
  28.                 <div class="d-flex justify-content-center flex-column align-items-center">
  29.                     <h1 class="text-gold text-shadow-dark">Présentation du {{ number }}</h1>
  30.                     <div class="col-12 col-md-6 m-auto">
  31.                         <p class="text-beige text-center py-3 pb-5 fw-bold">
  32.                             Découvrez la signification et l'influence du {{ number }}
  33.                         </p>
  34.                     </div>
  35.                 </div>
  36.             </div>
  38.             <div class="position-absolute z-1">
  39.                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248.3 143.96" width="300px" height="300px">
  40.                     <defs>
  41.                         <clipPath id="number-clip">
  42.                             <path
  43.                                     id="initialSVG"
  44.                                     d="{{ numberData.svgPathValue }}"
  45.                             />
  47.                             <path d="M83.3,120.86c-19.55,0-19.55,0-19.55,19.54,0-19.54,0-19.54-19.54-19.54,9.56,0,14.44,0,16.94-2.29s2.6-7.27,2.6-17.25C63.75,120.86,63.75,120.86,83.3,120.86Z"/>
  48.                             <path d="M59.38,112.54c-7.33,0-7.33,0-7.33,7.32,0-7.32,0-7.32-7.32-7.32,3.66,0,5.49,0,6.41-.92s.91-2.74.91-6.41C52.05,112.54,52.05,112.54,59.38,112.54Z"/>
  49.                             <path d="M77.4,128.54c-4.32,0-4.32,0-4.32,4.32,0-4.32,0-4.32-4.33-4.32,4.33,0,4.33,0,4.33-4.33,0,2.62,0,3.65,1,4.06A10.14,10.14,0,0,0,77.4,128.54Z"/>
  50.                             <path d="M77.25,110.56c-2.1,0-3.18,0-3.74.5s-.59,1.6-.59,3.83c0-4.33,0-4.33-4.33-4.33,4.33,0,4.33,0,4.33-4.32C72.92,110.56,72.92,110.56,77.25,110.56Z"/>
  51.                             <path d="M260.69,270.26c-19.54,0-19.54,0-19.54,19.54,0-19.54,0-19.54-19.54-19.54,19.54,0,19.54,0,19.54-19.55,0,9.77,0,14.66,2.44,17.1S250.92,270.26,260.69,270.26Z"/>
  52.                             <path d="M260.69,244.31c-7.32,0-7.32,0-7.32,7.32,0-7.32,0-7.32-7.33-7.32,3.41,0,5.24,0,6.21-.74,1.12-.85,1.12-2.67,1.12-6.58C253.37,244.31,253.37,244.31,260.69,244.31Z"/>
  53.                             <path d="M262,260.83c-4.32,0-4.32,0-4.32,4.33,0-4.33,0-4.33-4.33-4.33,4.33,0,4.33,0,4.33-4.32,0,2.16,0,3.24.54,3.78S259.86,260.83,262,260.83Z"/>
  54.                             <path d="M252.25,281.56c-4.33,0-4.33,0-4.33,4.33,0-4.33,0-4.33-4.33-4.33,2.14,0,3.22,0,3.77-.52s.56-1.61.56-3.8C247.92,281.56,247.92,281.56,252.25,281.56Z"/>
  55.                             <path d="M261.94,93.46c0,19.54,0,19.54-19.55,19.54,19.55,0,19.55,0,19.55,19.55,0-19.55,0-19.55,19.54-19.55-9.35,0-14.23,0-16.77-2.14C261.94,108.53,261.94,103.66,261.94,93.46Z"/>
  56.                             <path d="M246.34,89.92c0-19.55,0-19.55,19.54-19.55-9.34,0-14.22,0-16.76-2.13-2.78-2.33-2.78-7.21-2.78-17.41,0,19.54,0,19.54-19.54,19.54C246.34,70.37,246.34,70.37,246.34,89.92Z"/>
  57.                             <path d="M239,95.61c0,2,0,3.13-.46,3.7s-1.59.62-3.86.62c4.32,0,4.32,0,4.32,4.33,0-4.33,0-4.33,4.33-4.33C239,99.93,239,99.93,239,95.61Z"/>
  58.                             <path d="M237.92,64.89c0-2.7,0-3.72,1.06-4.1a11.45,11.45,0,0,1,3.27-.23c-4.33,0-4.33,0-4.33-4.32,0,4.32,0,4.32-4.33,4.32C237.92,60.56,237.92,60.56,237.92,64.89Z"/>
  59.                             <path d="M271.92,84.89a11.45,11.45,0,0,1,.23-3.27c.38-1.06,1.39-1.06,4.1-1.06-4.33,0-4.33,0-4.33-4.32,0,4.32,0,4.32-4.33,4.32C271.92,80.56,271.92,80.56,271.92,84.89Z"/>
  60.                             <path d="M105.38,203.31c-7.33,0-7.33,0-7.33,7.32,0-7.32,0-7.32-7.32-7.32,3.32,0,5.14,0,6.13-.68,1.19-.83,1.19-2.64,1.19-6.64C98.05,203.31,98.05,203.31,105.38,203.31Z"/>
  61.                             <path d="M116.07,220.56c-13.15,0-13.15,0-13.15,13.16,0-13.16,0-13.16-13.15-13.16,6.42,0,9.7,0,11.38-1.52s1.77-4.89,1.77-11.63C102.92,220.56,102.92,220.56,116.07,220.56Z"/>
  63.                         </clipPath>
  64.                     </defs>
  65.                 </svg>
  66.             </div>
  68.             <div class="svg-number-container">
  69.                 <img class="unrestrained-img image-clipped {{ number in [11,22,33] ? "left-clip" : '' }} scaled opacity-25"
  70.                      style="
  71.                              position: absolute;
  72.                              left: 0;
  73.                              right: 0;
  74.                              margin-left: auto;
  75.                              margin-right: auto;
  76.                              width: 300px; /* Need a specific value to work */
  77.                              height: 300px; /* Need a specific value to work */
  78.                              filter: invert(1);
  79.                              clip-path: url(#number-clip);"
  80.                      src="{{ asset('build/images/bg-number-item.jpg') }}"
  81.                      alt="number image"/>
  82.                 {% if number in [11,22,33] %}
  83.                     <img class="unrestrained-img image-clipped scaled opacity-25 {{ number in [11,22,33] ? "right-clip" : '' }}"
  84.                          style="
  85.                      position: absolute;
  86.   left: 250px;
  87.   right: 0;
  88.   margin-left: auto;
  89.   margin-right: auto;
  90.   width: 300px; /* Need a specific value to work */
  91.   height: 300px; /* Need a specific value to work */
  92.                      filter: invert(1);
  93.                                  clip-path: url(#number-clip);"
  94.                          src="{{ asset('build/images/bg-number-item.jpg') }}"
  95.                          alt="number image"/>
  96.                 {% endif %}
  97.             </div>
  98.         </section>
  99.     </div>
  101.     <div class="bg-white">
  102.         <div>
  103.             {{ include('includes/_breadcrumbs.html.twig', {currentName: number, previousName: "Nombres", previousPath: path('numbers')}) }}
  104.             <div class="container">
  105.                 <div>
  106.                     <h2 class="text-deepblue">Le {{ number }} : {{ numberData['title'] }}</h2>
  107.                     <div class="text-justify">
  108.                         {{ numberData['content'] | raw }}
  109.                     </div>
  110.                 </div>
  111.             </div>
  112.         </div>
  113.         <div class="container pb-5">
  114.             <h2 class="text-deepblue">Interprétation</h2>
  115.             <p class="text-justify">
  116.                 La signification globale du {{ number }} reste fondamentalement la même. Son interprétation varie
  117.                 dans votre thème numérologique selon les contextes.
  118.             </p>
  120.             <div>
  121.                 <h4>Qualités que l'on retrouve souvent chez le {{ number }}</h4>
  123.                 {{ expressionNumbersData[number].qualities|raw }}
  124.             </div>
  125.             <div>
  126.                 <h4>Défauts que l'on retrouve souvent chez le {{ number }}</h4>
  128.                 {{ expressionNumbersData[number].defaults|raw }}
  129.             </div>
  130.         </div>
  131.     </div>
  132.     <div class="bg-glow animated-glow">
  133.         <section id="interested" class="faded-black-transparent position-relative overflow-hidden">
  134.             <div class="bg-particles">
  135.                 <dotlottie-player src="https://lottie.host/eefac7be-0d95-4a21-ad60-21bb234ac075/W9Zk10fSKb.lottie"
  136.                                   background="transparent" speed="0.6" style="width: 100%;" loop
  137.                                   autoplay></dotlottie-player>
  138.             </div>
  139.             <div class="container">
  140.                 <div class="d-flex justify-content-center flex-column text-center">
  141.                     <h3 class="text-gold text-shadow-dark mb-4">Curieux·se ?</h3>
  142.                     <div class="col-12 col-md-6 m-auto">
  143.                         <p class="fw-bold text-beige text-center pb-5">
  144.                             Découvrez à quel point le {{ number }} est présent dans votre thème et quelles sont
  145.                             ses
  146.                             influences
  147.                             sur votre
  148.                             vie.
  149.                         </p>
  150.                     </div>
  151.                     <div>
  152.                         <a href="{{ path('test') }}" class="text-decoration-none">
  153.                             <button type="button"
  154.                                     class="py-3 px-5 btn btn-gold rounded-pill text-beige fw-bold btn-hover-effect">
  155.                                 <span class="d-none d-sm-inline">Calculer mon thème</span>
  156.                                 <span class="d-inline d-sm-none">Mon thème</span>
  157.                             </button>
  158.                         </a>
  159.                     </div>
  160.                 </div>
  161.             </div>
  162.         </section>
  163.     </div>
  165.     <div>
  166.         <div class="container">
  167.             <section class="related-content pb-5">
  168.                 <h3 class="text-deepblue">Découvrez d'autres nombres</h3>
  169.                 <div>
  170.                     {{ include('includes/_related_content.html.twig') }}
  171.                 </div>
  172.             </section>
  173.         </div>
  174.     </div>
  175. {% endblock %}
  177.     {% block javascripts %}
  178.         {{ parent() }}
  179.         <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  181.         <script>
  182.             document.addEventListener('DOMContentLoaded', function () {
  183.                 const swiper = new Swiper('.swiper', {
  184.                     // Optional parameters
  185.                     direction: 'horizontal',
  186.                     loop: true,
  188.                     // If we need pagination
  189.                     pagination: {
  190.                         el: '.swiper-pagination',
  191.                     },
  193.                     // Navigation arrows
  194.                     navigation: {
  195.                         nextEl: '.swiper-button-next',
  196.                         prevEl: '.swiper-button-prev',
  197.                     },
  199.                     // And if we need scrollbar
  200.                     scrollbar: {
  201.                         el: '.swiper-scrollbar',
  202.                     },
  203.                 });
  204.             }, false);
  205.         </script>
  206.     {% endblock %}