templates/front/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base_front.html.twig' %}
  3. {% block body %}
  5.     <section id="letsRace" class="overflow-hidden">
  6.         <div class="bg-header js-parallax" style="background:linear-gradient(
  7.             135deg,
  8.             rgba(0, 0, 0, 0.8),
  9.             transparent, transparent
  10.     ), url({{ '/' ~ constant('App\\Services\\UploadFileService::UPLOAD_IMAGE_DIR') ~ nextRace.backgroundImage }})no-repeat center bottom;background-size:cover;">
  11.             <div class="container-1500">
  12.                 <div class="row col-md-12 position-relative">
  13.                     <div class="col-md-5 col-lg-5 col-xl-4 col-xxl-4 max-w-500">
  14.                         <div class="next-race-block d-flex flex-column">
  15.                             {% if app.user %}
  16.                                 <h2><a href="{{ path('admin_next_race_edit', {'id': nextRace.id}) }}"><i class="fas fa-pencil-alt"></i></a></h2>
  17.                             {% endif %}
  18.                             {% if nextRace.isValid %}
  19.                             <div class="border-to-left-red title white bg-red position-relative">
  20.                                 <h2 class="ps-5 pt-1">Next Race</h2>
  21.                             </div>
  22.                             <div class="ps-4">
  23.                                 <div class="detail-next p-4">
  24.                                     <h3 class="white text-uppercase">{{ nextRace.racingName }}<br> {{ nextRace.country }}</h3>
  25.                                     <h3 class="black text-uppercase white">{{ nextRace.atDate|format_datetime(locale='fr', pattern="dd MMMM YYYY") }} - {{ nextRace.atDate|date('H:i') }}</h3>
  26.                                     <img src="{{ '/' ~ constant('App\\Services\\UploadFileService::UPLOAD_IMAGE_DIR') ~ nextRace.image }}">
  28.                                     {% set difference = date(nextRace.atDate|date('m/d H:i')).diff(date('now'|date('m/d H:i'))) %}
  30.                                     <div class="d-flex justify-content-between pt-4">
  31.                                         <div class="col-md-3 time bg-white pt-2 pl-1 pr-1">
  32.                                             <span>{{ difference.d }}</span><br>
  33.                                             Jours
  34.                                         </div>
  35.                                         <div class="col-md-3 time bg-white pt-2 pl-1 pr-1">
  36.                                             <span>{{ difference.h }}</span><br>
  37.                                             Heures
  38.                                         </div>
  39.                                         <div class="col-md-3 time bg-white pt-2 pl-1 pr-1">
  40.                                             <span>{{ difference.i }}</span><br>
  41.                                             Minutes
  42.                                         </div>
  43.                                     </div>
  44.                                 </div>
  45.                             </div>
  46.                             {% endif %}
  47.                         </div>
  48.                     </div>
  49.                 </div>
  50.             </div>
  52.             <div class="big-title position-absolute">
  53.                 <h1 class="white">Let’s race.</h1>
  54.                 <div class="social w-25 d-flex justify-content-between m-auto">
  55.                     <a target="_blank" href="https://twitter.com/dylanpereiralu"><img src="{{ asset('img/icon-twitter.svg') }}"></a>
  56.                     <a target="_blank" href="https://www.instagram.com/dylanpereiraofficial/"><img src="{{ asset('img/icon-instagram.svg') }}"></a>
  57.                     <a target="_blank" href="https://www.facebook.com/dylanpereiramotorsportfanpage/"><img src="{{ asset('img/icon-facebook.svg') }}"></a>
  58.                 </div>
  59.             </div>
  60.         </div>
  61.     </section>
  63.     <section id="about" class="position-relative">
  64.         <div class="row w-100">
  65.             <div class="col-md-6 img-section position-relative" style="background:url({{ asset('/' ~ constant('App\\Services\\UploadFileService::UPLOAD_IMAGE_DIR') ~ aboutDescription.imageSection) }})no-repeat center;background-size:cover">
  66.                 <div class="parallelogram toright bg-yellow"></div>
  67.                 <div class="cut-section-right position-absolute bg-white"></div>
  68.             </div>
  69.             <div class="col-md-6 col-xl-6 col-xxl-5 container-750 d-flex justify-content-end ps-5">
  70.                 <div class="w-100 mt-5 block-about">
  71.                     <div class="title-section">
  72.                         <h2 class="ps-5">About</h2>
  73.                         <div class="sub-border ps-5">
  74.                             <div class="bg-black"></div>
  75.                             <div class="border-to-right-red bg-red"></div>
  76.                         </div>
  78.                         <ul class="mt-5">
  79.                             <li><h4 class="ps-5 pt-2 pb-2 text-uppercase" id="aboutPresentation">Presentation</h4></li>
  80.                             <li class="active"><h4 class="ps-5 pt-2 pb-2 text-uppercase" id="aboutDescription">Description</h4></li>
  81.                         </ul>
  83.                         <div class="presentation-description mt-5 ps-5">
  84.                             <div class="col-md-12" id="presentation" style="display: none;">
  85.                                 {% if app.user %}
  86.                                     <a href="{{ path('admin_block_title_description_edit', {'id': aboutPresentation.id}) }}"><i class="fas fa-pencil-alt"></i></a>
  87.                                 {% endif %}
  88.                                 {% for line in aboutPresentation.linesTable %}
  89.                                     <div class="col-md-12 d-flex border-bottom {% if not loop.first%}pt-2{% endif %} pb-2">
  90.                                         <div class="col-md-6">{{ line.title }}</div>
  91.                                         <div class="col-md-6">{{ line.description }}</div>
  92.                                     </div>
  93.                                 {% endfor %}
  94.                             </div>
  95.                             <div class="col-md-12 position-relative" id="description">
  96.                                 {% if app.user %}
  97.                                     <a href="{{ path('admin_block_title_description_edit', {'id': aboutDescription.id}) }}"><i class="fas fa-pencil-alt"></i></a>
  98.                                 {% endif %}
  99.                                 <p>{{ aboutDescription.description|raw }}</p>
  100.                             </div>
  101.                         </div>
  102.                     </div>
  103.                 </div>
  104.             </div>
  105.         </div>
  106.     </section>
  108.     <section id="quote">
  109.         <img src="{{ asset('img/quote-left.png') }}" class="position-absolute">
  110.         <div class="filter-bg position-absolute"></div>
  111.         <div class="bg-quote"></div>
  112.         <div class="container-text">
  113.             <h3 class="white m-auto">Racing, competing, it’s in my blood.<br>
  114.                 It’s part of me, it’s part of my life;<br>
  115.                 I have been doing it all my life and it<br>
  116.                 stands out above everything else.
  117.             </h3>
  118.             <h3 class="white">—Ayrton Senna</h3>
  119.         </div>
  120.         <img src="{{ asset('img/quote-left.png') }}" class="position-absolute">
  121.     </section>
  123.     <section id="cup" class="bg-black">
  124.         <div id="containerMaster">
  125.             <div class="row col-md-12 container-1500 m-auto d-flex justify-content-between first-block">
  126.                 <div class="col-md-6">
  127.                     {% set race = races.0 %}
  128.                     <div class="cup-type d-flex">
  129.                         {% for raceTitle in races %}
  130.                             <div class="title-cup {% if loop.first %}active{% endif %}">
  131.                                 <a href="#cup" class="race-link" onclick="loadRace({{ raceTitle.id }})"><h4>{{ raceTitle.name }}</h4></a>
  132.                                 {% if loop.first %}
  133.                                     <div class="sub-border">
  134.                                         <div class="bg-white"></div>
  135.                                         <div class="border-to-right-red bg-red"></div>
  136.                                     </div>
  137.                                 {% endif %}
  138.                             </div>
  139.                         {% endfor %}
  140.                     </div>
  142.                     {% if app.user %}
  143.                         <h2><a href="{{ path('admin_race_edit', {'id': race.id}) }}"><i class="fas fa-pencil-alt"></i></a></h2>
  144.                     {% endif %}
  145.                     <div class="desc-cup mt-5">
  146.                         <div class="white">{{ race.description|raw }}</div>
  147.                     </div>
  148.                 </div>
  149.                 <div class="col-md-5">
  150.                     <div class="col-md-12 d-flex justify-content-end video">
  151.                         {{ race.video|raw }}
  152.                     </div>
  153.                 </div>
  154.             </div>
  155.             <div class="row container-1500 m-auto mt-5 d-flex justify-content-between">
  156.                 <div class="col-md-5">
  157.                     {% if race.years is empty and app.user %}
  158.                         <a href="{{ path('admin_race_line_table_add', {'id': race.id}) }}" class="ml-3"><i class="fas fa-plus-circle" title="Ajouter une année"></i></a>
  159.                     {% endif %}
  160.                     {% if race.years is not empty %}
  161.                         <div id="formSaison" class="pb-2">
  162.                             <div id="saisonResult" class="pb-2 pt-2 ps-4">
  163.                                 <span>Racing Season {{ race.years.first.name }}</span>
  164.                             </div>
  165.                         </div>
  167.                         <div id="containerLineTableRace" class="position-relative">
  169.                             <script>
  170.                                 let raceIdToStart = "{{ race.years.first.id }}";
  171.                             </script>
  172.                         </div>
  173.                     {% endif %}
  174.                 </div>
  175.                 {% if race.carImg %}
  176.                     <div class="col-md-5">
  177.                         <div id="formSaison" class="pb-2 ps-4">
  178.                             <div id="saisonCar" class="pb-2 pt-2 ps-4">
  179.                                 <span>The car</span>
  180.                             </div>
  181.                         </div>
  182.                         <div class="img-the-car">
  183.                             <img src="{{ asset('/' ~ constant('App\\Services\\UploadFileService::UPLOAD_IMAGE_DIR') ~ race.carImg) }}" alt="the car">
  184.                         </div>
  185.                         <div class="technical-file">
  186.                             <div class="col-md-12 link-insta mt-5 text-center">
  187.                                 <a target="_blank" href="{{ '/' ~ constant('App\\Services\\UploadFileService::UPLOAD_IMAGE_DIR') ~ race.technicalFile }}" class="bg-red white">Technical file</a>
  188.                             </div>
  189.                         </div>
  190.                     </div>
  191.                 {% endif %}
  192.             </div>
  193.         </div>
  194.     </section>
  196.     <section id="results" class="overflow-hidden">
  197.         <div class="row w-100 m-0">
  198.             <div class="col-md-6 col-xl-6 col-xxl-6 d-flex justify-content-end align-items-center">
  199.                 <div class="mt-5 container-750">
  200.                     <div class="title-section">
  201.                         <div class="col-md-6">
  202.                             <h2>Results {% if app.user %}<a href="{{ path('admin_year_add', {'section': 'results'}) }}"><i class="fas fa-plus-circle" title="Ajouter une année"></i></a>{% endif %} </h2>
  203.                             <div class="sub-border">
  204.                                 <div class="bg-black"></div>
  205.                                 <div class="border-to-right-red bg-red"></div>
  206.                             </div>
  208.                             <form class="col-xxl-6 mt-5 position-relative" id="formYear">
  209.                                 <select name="years" id="yearResult" class="pb-2 pt-2 ps-4">
  210.                                     {% for result in results %}
  211.                                         <option value="{{ result.id }}">Saison {{ result.subSection|date('Y') }}</option>
  212.                                     {% endfor %}
  213.                                 </select>
  214.                                 <img src="{{ asset('img/arrow-bottom.svg') }}">
  215.                             </form>
  216.                         </div>
  218.                         <div class="col-md-12 mt-5" id="containerResults">
  219.                             {% if app.user %}
  220.                                 <h3>{{ results.0.name }} <a href="{{ path('admin_year_edit', {'id': results.0.id}) }}"><i class="fas fa-pencil-alt"></i></a></h3>
  221.                             {% endif %}
  222.                             <table class="mt-4">
  223.                                 {% for line in results.0.lineTables %}
  224.                                     <tr>
  225.                                         <td>{{ line.title }}</td>
  226.                                         <td>{{ line.description|raw }}</td>
  227.                                     </tr>
  228.                                 {% endfor %}
  229.                             </table>
  230.                         </div>
  232.                     </div>
  233.                 </div>
  234.             </div>
  235.             <div class="col-md-6 col-xl-6 col-xxl-6 img-section position-relative" style="background:url({{ asset('/' ~ constant('App\\Services\\UploadFileService::UPLOAD_IMAGE_DIR') ~ results.0.raceImg) }})no-repeat center;background-size:cover">
  236.                 <div class="parallelogram toleft bg-green"></div>
  237.                 <div class="cut-section-left position-absolute bg-white"></div>
  238.             </div>
  239.         </div>
  240.     </section>
  242.     <section id="gallery">
  243.         <div class="container-1500">
  244.             <div class="title-section">
  245.                 <div class="col-md-1 m-auto">
  246.                     <h2>Gallery</h2>
  247.                     <div class="sub-border">
  248.                         <div class="bg-black"></div>
  249.                         <div class="border-to-right-red bg-red"></div>
  250.                     </div>
  251.                 </div>
  252.                 <form class="col-xl-8 col-xxl-6 mt-5 position-relative" id="formGallery">
  253.                     <select name="gallery" id="yearGallery" class="pb-2 pt-2 ps-4">
  254.                         {% for year in yearsGallery %}
  255.                             <option value="{{ year.subSection|date('Y') }}">{{ year.subSection|date('Y') }}</option>
  256.                         {% endfor %}
  257.                     </select>
  258.                     <img src="{{ asset('img/arrow-bottom.svg') }}">
  259.                 </form>
  260.             </div>
  261.             <div class="gallery-list position-relative">
  262.                 <div class="row w-100" id="galleryList">
  263.                     <div class="col-md-12 text-center">
  264.                         {% if app.user %}
  265.                             <a href="{{ path('admin_year_add', {'section': 'gallery'}) }}" class="ml-3"><i class="fas fa-plus-circle" title="Ajouter une coupe"></i></a>
  266.                         {% endif %}
  267.                     </div>
  268.                     {% for yearImage in galleries %}
  269.                         <div class="col-md-4 p-0 containerCupGallery p-2" style="height:300px;">
  270.                             {% if app.user %}
  271.                                 <a href="{{ path('admin_year_edit', {'id': yearImage.id}) }}"><i class="fas fa-pencil-alt" title="Editer cette coupe"></i></a>
  272.                                 <a href="{{ path('admin_year_remove', {'id': yearImage.id}) }}" class="ml-3"><i class="fas fa-trash-alt" title="Supprimer cette coupe"></i></a>
  273.                             {% endif %}
  274.                             <div style="background:url({{ '/' ~ constant('App\\Services\\UploadFileService::UPLOAD_IMAGE_DIR') ~ yearImage.images.first.url }}?text={{ loop.index }})no-repeat center;background-size:cover;height:100%;">
  275.                                 <a href="{{ '/' ~ constant('App\\Services\\UploadFileService::UPLOAD_IMAGE_DIR') ~ yearImage.images.first.url }}?text={{ loop.index }}" data-toggle="lightbox" data-title="{{ yearImage.images.first.name }}" data-gallery="gallery{{ yearImage.id }}" class="w-100 h-100 gallery-image position-relative">
  276.                                     <div style="background:linear-gradient(to bottom, transparent 65%, black 100%);width:100%;height:100%;position:relative">
  277.                                         <div class="position-absolute d-flex justify-content-center detail-gallery">
  278.                                             <img src="{{ asset('img/icon-eye.svg') }}?text={{ loop.index }}" class="img-fluid mb-2">
  279.                                             <span>{{ yearImage.images.first.name }}</span>
  280.                                         </div>
  281.                                     </div>
  282.                                 </a>
  283.                             </div>
  284.                             <div class="d-none">
  285.                                 {% for image in yearImage.images %}
  286.                                     <a href="{{ '/' ~ constant('App\\Services\\UploadFileService::UPLOAD_IMAGE_DIR') ~ image.url }}?text={{ loop.index }}" data-toggle="lightbox" data-gallery="gallery{{ yearImage.id }}" data-title="{{ image.name }}" class="col-sm-4">
  287.                                         <img src="background:url({{ '/' ~ constant('App\\Services\\UploadFileService::UPLOAD_IMAGE_DIR') ~ image.url }}?text={{ loop.index }}" class="img-fluid" style="width:100%;max-width:100%">
  288.                                     </a>
  289.                                 {% endfor %}
  290.                             </div>
  291.                         </div>
  292.                     {% endfor %}
  293.                 </div>
  295.                 <div class="parallelogram toright bg-blue position-absolute"></div>
  296.             </div>
  297.         </div>
  298.     </section>
  300.     <section id="sponsors" class="bg-black">
  301.         <div class="container-1500">
  302.             <div class="title-section">
  303.                 <div class="col-md-1 m-auto">
  304.                     <h2 class="white">Sponsors</h2>
  305.                     <div class="sub-border">
  306.                         <div class="bg-grey"></div>
  307.                         <div class="border-to-right-red bg-red"></div>
  308.                     </div>
  309.                 </div>
  310.                 <div class="col-md-12 text-center">
  311.                     {% if app.user %}
  312.                         <a href="{{ path('admin_sponsor_edit', {'id': sponsor.id}) }}" style="background:none"><i class="fas fa-pencil-alt"></i></a>
  313.                     {% endif %}
  314.                 </div>
  315.             </div>
  316.             <div class="d-flex justify-content-center align-items-center flex-wrap list-sponsors">
  317.                 {% for sponsor in sponsor.images %}
  318.                     <a href="{{ sponsor.link }}" target="_blank" class="col-md-2 p-3 sponsor bg-white position-relative d-flex justify-content-center">
  319.                         <div class="bg-sponsor position-absolute" style="background:url({{ '/' ~ constant('App\\Services\\UploadFileService::UPLOAD_IMAGE_DIR') ~ sponsor.url }})no-repeat center;"></div>
  320.                     </a>
  321.                 {% endfor %}
  322.             </div>
  323.         </div>
  324.     </section>
  326.     <section id="instagram" class="d-flex align-items-center">
  327.         <div class="container-1500 w-100">
  328.             <div class="title-section">
  329.                 <div class="text-center">
  330.                     <h2 class="black">@dylanpereiraofficial</h2>
  331.                 </div>
  332.             </div>
  333.             <div class="d-flex justify-content-between align-items-center flex-wrap list-instagram">
  334.              <!-- TODO -->
  335.                 {% for image in instaImages %}
  336.                     <div class="col-md-3 insta position-relative">
  337.                         <div class="bg-insta position-absolute" style="background:url({{ image }})no-repeat center;"></div>
  338.                     </div>
  339.                 {% endfor %}
  340.             </div>
  341.             <div class="col-md-12 link-insta mt-5 text-center">
  342.                 <a href="https://www.instagram.com/dylanpereiraofficial/" target="_blank" class="bg-red white">Discover my instagram</a>
  343.             </div>
  344.         </div>
  345.     </section>
  347.     <section id="contact">
  348.         <div class="row w-100">
  349.             <div class="col-md-6 img-section position-relative" style="background:url({{ asset('img/contact-bg.png') }})no-repeat center;background-size:cover">
  350.                 <div class="parallelogram toright bg-red"></div>
  351.                 <div class="cut-section-right position-absolute bg-white"></div>
  352.             </div>
  353.             <div class="col-md-6 col-xl-6 col-xxl-5 container-750 d-flex align-items-center">
  354.                 <div class="col-md-10 block-contact">
  355.                     <div class="title-section">
  356.                         <h2 class="ps-5">Contact</h2>
  358.                         {{ include('front/inc/messages.html.twig') }}
  360.                         <div class="sub-border ps-5">
  361.                             <div class="bg-black"></div>
  362.                             <div class="border-to-right-red bg-red"></div>
  363.                         </div>
  365.                         <div class="col-md-12 ps-5">
  366.                             <div class="form-contact mt-4">
  367.                                 {{ form_start(form, {'attr': {'id': 'contactForm'}}) }}
  368.                                     {{ form_rest(form) }}
  370.                                     <input type="email" name="email-mail" style="height:0;opacity:0;">
  371.                                     <button type="submit" class="bg-red white">Submit</button>
  372.                                 {{ form_end(form) }}
  373.                                 <div id="messageContact" class="green"></div>
  374.                             </div>
  375.                         </div>
  376.                     </div>
  377.                 </div>
  378.             </div>
  379.         </div>
  380.     </section>
  382. {% endblock %}