templates/includes/_swiper_item.html.twig line 1

  1. {% set number = number ?? 1 %}
  2. <div class="swiper-item">
  3.     <a href="{{ path('number', {number: number}) }}">
  4.         <div class="card text-white position-relative">
  6.             <div class="position-absolute" style="z-index: -2;">
  7.                 <svg style="z-index: -2; position: relative;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248.3 143.96" width="300px" height="300px">
  8.                     <defs>
  9.                         <clipPath id="number-clip{{ number }}">
  10.                             <path
  11.                                     id="initialSVG{{ number }}"
  12.                                     d="{{ numbersData[number].svgPathValue }}"
  13.                             />
  15.                             <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"/>
  16.                             <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"/>
  17.                             <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"/>
  18.                             <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"/>
  19.                             <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"/>
  20.                             <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"/>
  21.                             <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"/>
  22.                             <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"/>
  23.                             <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"/>
  24.                             <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"/>
  25.                             <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"/>
  26.                             <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"/>
  27.                             <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"/>
  28.                             <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"/>
  29.                             <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"/>
  31.                         </clipPath>
  32.                     </defs>
  33.                 </svg>
  34.             </div>
  36.             <div class="svg-number-container">
  37.                 <img class="unrestrained-img image-clipped {{ number in [11,22,33] ? "left-clip in-card" : '' }} opacity-25"
  38.                      style="
  39.                              position: absolute;
  40.                              left: 0;
  41.                              right: 0;
  42.                              margin-left: auto;
  43.                              margin-right: auto;
  44.                              width: 300px; /* Need a specific value to work */
  45.                              height: 300px; /* Need a specific value to work */
  46.                              filter: invert(1);
  47.                              clip-path: url(#number-clip{{ number }});"
  48.                      src="{{ asset('build/images/bg-number-item.jpg') }}"
  49.                      alt="number image"/>
  50.                 {% if number in [11,22,33] %}
  51.                     <img class="unrestrained-img image-clipped opacity-25 {{ number in [11,22,33] ? "right-clip in-card" : '' }}"
  52.                          style="
  53.                                  position: absolute;
  54.                                  left: 250px;
  55.                                  right: 0;
  56.                                  margin-left: auto;
  57.                                  margin-right: auto;
  58.                                  width: 300px; /* Need a specific value to work */
  59.                                  height: 300px; /* Need a specific value to work */
  60.                                  filter: invert(1);
  61.                                  clip-path: url(#number-clip{{ number }});"
  62.                          src="{{ asset('build/images/bg-number-item.jpg') }}"
  63.                          alt="number image"/>
  64.                 {% endif %}
  65.             </div>
  67.             <div class="card-img-overlay d-flex flex-column z-1">
  69.                 <div class="card-body">
  70.                     <h4 class="card-title mt-0 ">
  71.                         {{ number }} - {{ numbersData[number]['name'] }}
  72.                     </h4>
  73.                     <dotlottie-player src="https://lottie.host/089ef651-02f5-4d96-a683-6c420c68d650/wq6Gk9Wvrs.lottie"
  74.                                       background="transparent" speed="1"
  75.                                       style="z-index: -1;transform: scale(3) rotate(90deg);position: absolute; width: 100%; height: 100%; top: 20px; left:20px;"
  76.                                       loop autoplay></dotlottie-player>
  78.                     <p class="fst-italic">
  79.                         {{ expressionNumbersData[number]['title']|capitalize }}
  80.                     </p>
  81.                     <div class="short-content">
  82.                         {{ numbersData[number]['shortContent']|raw }}
  83.                     </div>
  84.                     <p class="item-keywords small">
  85.                         {{ expressionNumbersData[number]['mainKeywords']|capitalize }}
  86.                     </p>
  87.                 </div>
  88.                 <div class="m-auto">
  89.                 </div>
  90.                 <div class="card-footer position-relative">
  91.                 </div>
  92.             </div>
  93.         </div>
  94.     </a>
  95. </div>