templates/actualites/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Calcul-Turf{% endblock %}
  5. {% block body %}
  6.     <main class="content-img">
  7.         <div class="container">
  8.             <div class="row">
  9.                 <div class="col-md-8 header-left" style="margin-top:30px!important;">
  10.                     <div class="w-100 p-2 pt-0 pb-0">
  11.                         <h1 class="text-white" >Gagnez au PMU avec nos pronostics 100% mathématiques</h1>
  12.                         <p class="text-white" >Turfiste débutant ou parieur confirmé, on vous accompagne et on vous propose les meilleurs pronostics grâce à notre connaissance des courses et à notre algorithme d'Intelligence Artificielle.
  13.                         </p>
  14.                         <a href="{{ path('app_offre_index') }}" class="btn btn-outline-light px-4 py-2 mt-2 rounded-pill">Abonnez-vous</a>
  15.                     </div>
  16.                 </div>
  17.                 {# caroussel #}
  18.                 <div class="col-md-4 header-right" style="margin-top:30px!important;">
  19.                     <div class="card-container w-100 h-100 mb-3">
  20.                         <div class="card">
  21.                             <div class="card-body">
  22.                                 <div id="myCarousel" class="carousel carousel-dark slide" data-bs-ride="carousel" class="">
  23.                                     <div class="carousel-title w-100">
  24.                                         <div class="bg-bet carousel-title-inner shadow text-center py-2 px-3">Les récents pronostics gagnants</div>
  25.                                     </div>
  26.                                     <div class="carousel-indicators position-absolute" style="top: 195px">
  27.                                         {# {% for slide_right in slides_right %}
  28.                                             <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="{{ (loop.index) - 1 }}" {% if (loop.first) %} class="active" aria-current="true" {% endif %} aria-label="Slide {{ loop.index }}"></button>
  29.                                         {% endfor %} #}
  30.                                     </div>
  31.                                     <div class="carousel-inner">
  32.                                         {# {% for slide_right in slides_right %}
  33.                                             <div class="carousel-item {% if (loop.first) %} active{% endif %}">
  34.                                                 <div class="slide-space"></div>
  35.                                                 <div class="container">
  36.                                                     <div class="carousel-caption w-100 px-0 mb-0 mt-0">
  37.                                                         <h5 class="text-muted text-center slide-heure">{{ slide_right.heure_depart|date('d/m/Y H:i') }}</h5>
  38.                                                         <h4 class="mb-2 text-bold slide-title">R{{ slide_right.num_reunion }}C{{ slide_right.num_ordre }}</h4>
  39.                                                         <p class="px-0 py-0 pt-1 mb-0 bg-light text-center">
  40.                                                             <label class="d-block mb-1">ARRIVEE</label>
  41.                                                             <label class="fs-slide text-bold mb-1">{{ slide_right.arrivee_1 }} - {{ slide_right.arrivee_2 }} - {{ slide_right.arrivee_3 }} - {{ slide_right.arrivee_4 }} - {{ slide_right.arrivee_5 }}</label>
  42.                                                             <label class="d-block mb-1">PRONOSTICS</label>
  43.                                                             <label class="fs-slide text-bold mb-1">{{ slide_right.premier }} - {{ slide_right.deuxieme }} - {{ slide_right.troisieme }} - {{ slide_right.quatrieme }} - {{ slide_right.cinquieme }} </label>
  44.                                                         </p>
  45.                                                     </div>
  46.                                                 </div>
  47.                                             </div>
  48.                                         {% endfor %} #}
  49.                                     </div>
  50.                                 </div>
  51.                             </div>
  52.                         </div>
  53.                     </div>
  54.                 </div>
  55.             </div>
  56.         </div>
  57.     </main>
  62. {% if idCourse is defined %}
  63. <section class="my-5">
  64.     <div class="container">
  65.         <div class="row">
  66.             <div class="col-md-6 mt-5 contents-right mb-4">
  67.                 <div class="rounded shadow p-3">
  68.                     <img src="/img/img-5.jpg" class="img-fluid rounded" alt="...">
  69.                 </div>
  70.             </div>
  71.             <div class="col-md-6 mt-5 mb-4">
  72.                 <div class="p-3">
  73.                     <h5 class="text-marron text-uppercase mb-2">Le Coup d'Œil du Jour</h5>
  74.                     <h2 class="text-bold mb-4">La course qui se démarque, issu d'une sélection minutieuse, pour les amateurs de 2 sur 4</h2>
  75.                     <div class="mt-1 text-justify">
  76.                         {% for result in results %}
  77.                             <div class="row mt-2 mb-2">
  78.                                 <div class="col-md-12">
  79.                                     <div class="p-3 bg-light border border-primary">
  80.                                         <div class="course-info mb-3">
  81.                                             <p class="font-weight-bold text-primary" style="white-space: nowrap;">Réunion R{{ result.num_reunion }}C{{ result.num_ordre }} : {{ result.libelle }}</p>
  82.                                             <p class="font-weight-bold">Pronostics : {{ result.premier }} – {{ result.deuxieme }} – {{ result.troisieme }} – {{ result.quatrieme }} </p>
  83.                                             {% if result.arrivee_1 > 0 %}
  84.                                             <p class="font-weight-bold">Arrivée finale : {{ result.arrivee_1 }} - {{ result.arrivee_2 }} - {{ result.arrivee_3 }} - {{ result.arrivee_4 }} - {{ result.arrivee_5 }}</p>
  85.                                             {% endif %}
  86.                                         </div>
  87.                                     </div>
  88.                                 </div>
  89.                             </div>
  90.                         {% endfor %}
  91.                     </div>
  92.                 </div>
  93.             </div>
  94.         </div>
  95.     </div>
  96. </section>
  97. {% endif %}
  101. {% if idCourse is defined %}
  102. <section class="my-5">
  103.     <div class="container">
  104.         <div class="row">
  105.             <div class="col-md-6 mt-5 contents-right mb-4">
  106.                 <div class="rounded shadow p-3">
  107.                     <img src="/img/img-6.jpg" class="img-fluid rounded" alt="...">
  108.                 </div>
  109.             </div>
  110.             <div class="col-md-6 mt-5 mb-4">
  111.                 <div class="p-3">
  112.                     <h5 class="text-marron text-uppercase mb-2">Résultat du coup d'oeil d'hier</h5>
  113.                     <h2 class="text-bold mb-4"></h2>
  114.                     <div class="mt-1 text-justify">
  115.                         {% for result in resultsHier %}
  116.                             <div class="row mt-2 mb-2">
  117.                                 <div class="col-md-12">
  118.                                     <div class="p-3 bg-light border border-primary">
  119.                                         <div class="course-info mb-3">
  120.                                             <p class="font-weight-bold text-primary" style="white-space: nowrap;">Réunion R{{ result.num_reunion }}C{{ result.num_ordre }} : {{ result.libelle }}</p>
  121.                                             <p class="font-weight-bold">Pronostics : {{ result.premier }} – {{ result.deuxieme }} – {{ result.troisieme }} – {{ result.quatrieme }} </p>
  122.                                             {% if result.arrivee_1 > 0 %}
  123.                                             <p class="font-weight-bold">Arrivée finale : {{ result.arrivee_1 }} - {{ result.arrivee_2 }} - {{ result.arrivee_3 }} - {{ result.arrivee_4 }} - {{ result.arrivee_5 }}</p>
  124.                                             {% endif %}
  125.                                         </div>
  126.                                     </div>
  127.                                 </div>
  128.                             </div>
  129.                         {% endfor %}
  130.                     </div>
  131.                 </div>
  132.             </div>
  133.         </div>
  134.     </div>
  135. </section>
  136. {% endif %}
  137. <!-- Section pour la vidéo sur l'abonnement Mobile Money -->
  138. <section class="my-5" id="videoAbonnementMM">
  139.     <div class="container" style="background-color: #8f6236;">
  140.         <div class="row">
  141.             <!-- Colonne de gauche pour la vidéo -->
  142.             <div class="col-md-6 mt-5 mb-4">
  143.                 <div class="rounded shadow p-3 d-flex justify-content-center">
  144.                     <video width="100%" height="auto" controls>
  145.                         <source src="video/calculturf-abonnementMM.mp4" type="video/mp4">
  146.                         Votre navigateur ne prend pas en charge la vidéo.
  147.                     </video>
  148.                 </div>
  149.             </div>
  150.             <!-- Colonne de droite pour le texte -->
  151.             <div class="col-md-6 mt-5 mb-4">
  152.                 <div class="p-3">
  153.                     <h5 class="text-marron text-uppercase mb-2">Abonnement Mobile Money</h5>
  154.                     <div class="text-justify">
  155.                         <p>Découvrez la simplicité et la sécurité de l'abonnement sur notre site.</p>
  156.                         <p>Notre vidéo explicative vous guide pas à pas dans le processus d'abonnement, vous montrant comment utiliser facilement Mobile Money.</p>
  157.                         <p>Apprenez comment Mobile Money protège vos informations et facilite les transactions, vous assurant une expérience d'abonnement sûre et sans tracas.</p>
  158.                         <p>Regardez maintenant pour lever toutes vos hésitations et rejoignez notre communauté en toute confiance !</p>
  159.                     </div>
  160.                 </div>
  161.             </div>
  162.         </div>
  163.     </div>
  164. </section>
  166. <!-- Section pour la vidéo sur l'explication et conseils sur les pronostics -->
  167. <section class="my-5" id="videoExplicationProno">
  168.     <div class="container" style="background-color: #8f6236;">
  169.         <div class="row">
  170.             <!-- Colonne de droite pour le texte -->
  171.             <div class="col-md-6 mt-5 mb-4">
  172.                 <div class="p-3">
  173.                     <h5 class="text-marron text-uppercase mb-2">Conseils de Pronostics</h5>
  174.                     <div class="text-justify">
  175.                         <p>Bienvenue dans notre dernière vidéo tutorielle sur Calcul-Turf.fr, où nous vous guidons à travers le monde fascinant des courses hippiques avec des conseils précis et efficaces pour faire vos paris.</p>
  176.                         <p>Apprenez à comprendre et à utiliser nos pronostics pour maximiser vos chances de victoire dans les paris sur les courses hippiques, que vous soyez fan du couplé, du tiercé, ou du quinté.</p>
  177.                         <p>Regardez notre vidéo et laissez-vous guider pas à pas dans l'univers du pari intelligent. Abonnez-vous pour recevoir régulièrement des conseils qui pourraient transformer vos paris en véritables gains.</p>
  178.                     </div>
  179.                 </div>
  180.             </div>
  181.             <!-- Colonne de gauche pour la vidéo -->
  182.             <div class="col-md-6 mt-5 mb-4">
  183.                 <div class="rounded shadow p-3 d-flex justify-content-center">
  184.                     <video width="100%" height="auto" controls>
  185.                         <source src="video/calculturf-explicationprono.mp4" type="video/mp4">
  186.                         Votre navigateur ne prend pas en charge la vidéo.
  187.                     </video>
  188.                 </div>
  189.             </div>
  190.         </div>
  191.     </div>
  192. </section>
  195. <section class="my-5" id="videoInscription"  >
  196.     <div class="container" style="background-color:  #8f6236 ;">
  197.         <div class="row">
  198.             <!-- Colonne de gauche pour le texte -->
  199.             <div class="col-md-6 mt-5 mb-4">
  200.                 <div class="p-3">
  201.                     <h5 class="text-marron text-uppercase mb-2">Média</h5>
  202.                     <div class="text-justify">
  203.                         <p>Découvrez la simplicité et la sécurité de l'abonnement sur notre site.</p>
  204.                         <p>Notre vidéo explicative vous guide pas à pas dans le processus d'abonnement, vous montrant comment utiliser facilement PayPal et votre carte bancaire.</p>
  205.                         <p>Apprenez comment PayPal protège vos informations et facilite les transactions, vous assurant une expérience d'abonnement sûre et sans tracas.</p>
  206.                         <p>Regardez maintenant pour lever toutes vos hésitations et rejoignez notre communauté en toute confiance !</p>
  209.                     </div>
  210.                 </div>
  211.             </div>
  213.             <!-- Colonne de droite pour la vidéo -->
  214.             <div class="col-md-6 mt-5 mb-4">
  215.                 <div class="rounded shadow p-3 d-flex justify-content-center">
  216.                     <video width="40%" height="50%" controls>
  217.                         <source src="video/calculturf-inscription.mp4" type="video/mp4">
  218.                         Votre navigateur ne prend pas en charge la vidéo.
  219.                     </video>
  220.                 </div>
  221.             </div>
  222.         </div>
  223.     </div>
  224. </section>
  226. <section class="my-5" id="videoPresentation">
  227.     <div class="container" style="background-color: #8f6236 ;">
  228.         <div class="row">
  229.             <!-- Colonne de gauche pour le texte -->
  230.             <div class="col-md-6 mt-5 mb-4">
  231.                 <div class="p-3">
  232.                     <h5 class="text-marron text-uppercase mb-2">Média</h5>
  233.                     <div class="text-justify">
  234.                         <p>une vidéo explicative de calcul-turf</p>
  237.                     </div>
  238.                 </div>
  239.             </div>
  241.             <!-- Colonne de droite pour la vidéo -->
  242.             <div class="col-md-6 mt-5 mb-4">
  243.                 <div class="rounded shadow p-3  d-flex justify-content-center">
  244.                     <video width="40%" height="50%" controls>
  245.                         <source src="video/calculturf-presentation.mp4" type="video/mp4">
  246.                         Votre navigateur ne prend pas en charge la vidéo.
  247.                     </video>
  248.                 </div>
  249.             </div>
  250.         </div>
  251.     </div>
  252. </section>
  254.     <script type="text/javascript" src="/js/scripts.js"></script>
  255. {% endblock %}