templates/_includes/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  4. {% block body %}
  5. {% include '_includes/header.html.twig' %}
  6.     <section class="banner_area" id="accueil">
  7.         <div class="booking_table d_flex align-items-center">
  8.             <div class="overlay bg-parallax" data-stellar-ratio="0.9" data-stellar-vertical-offset="0" data-background=""></div>
  9.             <div class="container">
  10.                 <div class="banner_content text-center">
  11.                     <h6>LOIN DE LA VIE MONOTONE</h6>
  12.                     <h2>Détends ton esprit</h2>
  14.                 </div>
  15.             </div>
  16.         </div>
  17.         {#<div class="hotel_booking_area position">
  18.             <div class="container">
  19.                 <div class="hotel_booking_table">
  20.                     <div class="col-md-3">
  21.                         <h2>Réservez <br> votre séjour</h2>
  22.                     </div>
  23.                     <div class="col-md-9">
  24.                         <div class="boking_table">
  25.                             <div class="row">
  26.                                 <div class="col-md-4">
  27.                                     <div class="book_tabel_item">
  28.                                         <div class="form-group">
  29.                                             <div class='input-group date' id='datetimepicker11'>
  30.                                                 <input type='text' class="form-control" placeholder="Arrival Date"/>
  31.                                                 <span class="input-group-addon">
  32.                                                         <i class="fa fa-calendar" aria-hidden="true"></i>
  33.                                                     </span>
  34.                                             </div>
  35.                                         </div>
  36.                                         <div class="form-group">
  37.                                             <div class='input-group date' id='datetimepicker1'>
  38.                                                 <input type='text' class="form-control" placeholder="Departure Date"/>
  39.                                                 <span class="input-group-addon">
  40.                                                         <i class="fa fa-calendar" aria-hidden="true"></i>
  41.                                                     </span>
  42.                                             </div>
  43.                                         </div>
  44.                                     </div>
  45.                                 </div>
  46.                                 <div class="col-md-4">
  47.                                     <div class="book_tabel_item">
  48.                                         <div class="input-group">
  49.                                             <select class="wide">
  50.                                                 <option data-display="Adult">Adult</option>
  51.                                                 <option value="1">Old</option>
  52.                                                 <option value="2">Younger</option>
  53.                                                 <option value="3">Potato</option>
  54.                                             </select>
  55.                                         </div>
  56.                                         <div class="input-group">
  57.                                             <select class="wide">
  58.                                                 <option data-display="Child">Child</option>
  59.                                                 <option value="1">Child</option>
  60.                                                 <option value="2">Baby</option>
  61.                                                 <option value="3">Child</option>
  62.                                             </select>
  63.                                         </div>
  64.                                     </div>
  65.                                 </div>
  66.                                 <div class="col-md-4">
  67.                                     <div class="book_tabel_item">
  68.                                         <div class="input-group">
  69.                                             <select class="wide">
  70.                                                 <option data-display="Child">Number of Rooms</option>
  71.                                                 <option value="1">Room 01</option>
  72.                                                 <option value="2">Room 02</option>
  73.                                                 <option value="3">Room 03</option>
  74.                                             </select>
  75.                                         </div>
  76.                                         <a class="book_now_btn button_hover" href="#">Reservez</a>
  77.                                     </div>
  78.                                 </div>
  79.                             </div>
  80.                         </div>
  81.                     </div>
  82.                 </div>
  83.             </div>
  84.         </div>#}
  85.     </section>
  86.     <!--================ Accomodation Area  =================-->
  87.     <section class="accomodation_area section_gap" id="chambre">
  88.         <div class="container">
  89.             <div class="section_title text-center">
  90.                 <h2 class="title_color">Florence | Quelques chambres</h2>
  91.                 {#<p>We all live in an age that belongs to the young at heart. Life that is becoming extremely fast, </p>#}
  92.             </div>
  93.             <div class="row mb_30">
  95.                 {% for data in data %}
  96.                     <div class="col-lg-3 col-sm-6">
  97.                         <div class="accomodation_item text-center">
  98.                             <div class="hotel_img">
  99.                                 <img width="270" height="263" src="{{ asset('uploads/images/' ~ data.image) }}" alt="">
  100.                                 <a href="#" class="btn theme_btn button_hover" data-toggle="modal" data-target="#staticBackdrop{{ data.id }}">Reserver</a>
  101.                             </div>
  102.                             <a href="#"><h4 class="sec_h4">{{ data.libelle | capitalize }}</h4></a>
  103.                             <h5>{{ data.prix|number_format(0, ',', ' ') }} XOF<small>/nuit</small></h5>
  104.                         </div>
  105.                     </div>
  107.                     <!-- Button trigger modal -->
  108.                         {# <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  109.                         Launch static backdrop modal
  110.                         </button> #}
  112.                         <!-- Modal -->
  113.                         <div class="modal fade" id="staticBackdrop{{ data.id }}" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  114.                             <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
  115.                                 <div class="modal-content">
  116.                                     <div class="modal-header bg-warning text-light">
  117.                                         <h5 class="modal-title" id="staticBackdropLabel">Réservation de {{ data.libelle | capitalize }}</h5>
  118.                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  119.                                         <span aria-hidden="true">&times;</span>
  120.                                         </button>
  121.                                     </div>
  122.                                     <form action="{{ path('app_api_test') }}" method="post">
  123.                                         <div class="modal-body">
  124.                                             <div class="row">
  125.                                                 <div class="col-md-6">
  126.                                                     <img src="{{ asset('uploads/images/' ~ data.image) }}" alt="" class="w-100 rounded border border-warning">
  127.                                                     <div class="form-group pt-3">
  128.                                                         <input type="text" id="prix{{ data.id }}" class="form-control" value="Prix : {{ data.prix|number_format(0, ',', ' ') }} XOF/nuit" readonly>
  129.                                                     </div>
  130.                                                     <div class="form-row border rounded border-warning">
  131.                                                         <div class="col-md-7">
  132.                                                             <div class="form-group">
  133.                                                                 <label for="debut{{ data.id }}">Date de reservation <span class="text-danger">*</span></label>
  134.                                                                 <input type="date" id="debut{{ data.id }}" class="form-control" name="debut" required>
  135.                                                             </div>
  136.                                                         </div>
  137.                                                         <div class="col">
  138.                                                             <div class="form-group">
  139.                                                                 <label for="nbre{{ data.id }}">Nombre de nuits <span class="text-danger">*</span></label>
  140.                                                                 <input type="number" min="1" step="1" value="1" id="prix{{ data.id }}" class="form-control" name="nbre" required>
  141.                                                             </div>
  142.                                                         </div>
  143.                                                     </div>
  145.                                                 </div>
  146.                                                 <div class="col-md-6 pl-0">
  147.                                                     <input type="hidden" class="form-control" name="id" value="{{ data.id }}">
  148.                                                     <h5 class="text-warning pb-0 text-center">Veuillez renseigner vos informations pour la reservation</h5>
  149.                                                     {# <hr class=""> #}
  150.                                                     <div class="rounded border border-warning px-2">
  151.                                                         <p class="text-center my-1"><span class="text-danger">(*)</span> Champs Obligatoires</p>
  152.                                                         <div class="form-group">
  153.                                                             <label for="nom{{ data.id }}">Nom <span class="text-danger">*</span></label>
  154.                                                             <input type="text" id="nom{{ data.id }}" name="nom" class="form-control" required>
  155.                                                         </div>
  156.                                                         <div class="form-group">
  157.                                                             <label for="prenoms{{ data.id }}">Prenoms <span class="text-danger">*</span></label>
  158.                                                             <input type="text" id="prenoms{{ data.id }}" name="prenoms" class="form-control" required>
  159.                                                         </div>
  160.                                                         <div class="form-group">
  161.                                                             <label for="email{{ data.id }}">Email <span class="text-danger">*</span></label>
  162.                                                             <input type="email" id="email{{ data.id }}" name="email" class="form-control" required>
  163.                                                         </div>
  164.                                                         <div class="form-group">
  165.                                                             <label for="contact{{ data.id }}">Contact</label>
  166.                                                             <input type="text" id="contact{{ data.id }}" name="contact" class="form-control">
  167.                                                         </div>
  168.                                                     </div>
  169.                                                 </div>
  170.                                             </div>
  171.                                         </div>
  172.                                         <div class="modal-footer">
  173.                                             <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler & Fermer</button>
  174.                                             <button type="submit" class="btn  theme_btn button_hover">Reserver</button>
  175.                                         </div>
  176.                                     </form>
  177.                                 </div>
  178.                             </div>
  179.                         </div>
  182.                 {% endfor %}
  184.             </div>
  185.         </div>
  186.     </section>
  187.     <!--================ Accomodation Area  =================-->
  188.     <div id="service"></div>
  189.     <!--================ Facilities Area  =================-->
  190.     <section class="facilities_area section_gap" >
  191.         <div class="overlay bg-parallax" data-stellar-ratio="0.8" data-stellar-vertical-offset="0" data-background="">
  192.         </div>
  193.         <div class="container">
  194.             <div class="section_title text-center">
  195.                 <h2 class="title_w">Florence | Nos services</h2>
  196.                 {#<p>Who are in extremely love with eco friendly system.</p>#}
  197.             </div>
  198.             <div class="row mb_30" >
  199.                 {% for service in services %}
  200.                 <div class="col-lg-4 col-md-6">
  201.                     <div class="facilities_item">
  202.                         <h4 class="sec_h4"><i class="lnr lnr-{{ service.icone }}"></i>{{ service.titre }}</h4>
  203.                         <p>{{ service.description  }}</p>
  204.                     </div>
  205.                 </div>
  206.                 {% endfor %}
  208.             </div>
  209.             <div id="resto"></div>
  210.         </div>
  211.     </section>
  213.     {#============================================#}
  214.     <br>
  216.     <div class="container" >
  217.         <div class="section_title text-center">
  218.             <h2 class="title_color">Florence | Quelques restos</h2>
  219.            {# <p>The French Revolution constituted for the conscience of the dominant aristocratic class a fall from </p>#}
  220.         </div>
  221.         <div class="row mb_30">
  222.             {% for resto in restos %}
  223.             <div class="col-lg-4 col-md-6"  >
  224.                 <div class="single-recent-blog-post">
  225.                     <div class="thumb">
  226.                         <img class="img-fluid" width="360" height="260"  src="{{ asset('uploads/images/' ~ resto.image) }}" alt="post">
  227.                     </div>
  228.                     <div class="details">
  229.                         <div class="tags">
  230.                             <a href="{{ asset('uploads/images/' ~ resto.fichier) }}" class="button_hover tag_btn" target="_blank">Télechargez le menu</a>
  231.                         </div>
  232.                         <a href="#"><h4 class="sec_h4">{{ resto.titre }}</h4></a>
  233.                         <p>{{ resto.description }}</p>
  234.                         {#<h6 class="date title_color">31st January,2018</h6>#}
  235.                     </div>
  236.                 </div>
  237.             </div>
  238.             {% endfor %}
  239.         </div>
  240.     </div>
  242.     <br>
  243.     <div id="salle"></div>
  244.     <section class="facilities_area section_gap" >
  245.         <div class="overlay bg-parallax" data-stellar-ratio="0.8" data-stellar-vertical-offset="0" data-background="">
  246.         </div>
  247.         <div class="container">
  248.             <div class="section_title text-center">
  249.                 <h2 class="title_w">Florence | Nos salles</h2>
  250.                 {#<p>Who are in extremely love with eco friendly system.</p>#}
  251.             </div>
  252.             <div class="row imageGallery1" id="gallery" >
  253.                 {% for salle in salles %}
  254.                     <div class="col-md-4 gallery_item" >
  255.                         <div class="gallery_img">
  256.                             <img width="360" height="260" src="{{ asset('uploads/images/' ~ salle.image) }}" alt="">
  257.                             <div class="hover">
  258.                                 <a class="light" href="{{ asset('uploads/images/' ~ salle.image) }}"><i class="fa fa-expand"></i></a>
  259.                             </div>
  260.                         </div>
  261.                         <div class="">
  262.                             {% for i in salle.elementSalles %}
  263.                                 -<a href="#" style="font-size: 18px;color: orange;font-weight: bold">{{ i.libelle  }}</a> <br>
  264.                             {% endfor %}
  265.                             {#-<a href="#" style="font-size: 18px;color: orange;font-weight: bold">uuu</a> <br>#}
  267.                         </div>
  270.                     </div>
  271.                 {% endfor %}
  272.             </div>
  274.         </div>
  275.     </section>
  277.     <section class="contact_area section_gap" id="contact">
  278.         <div class="container">
  279.             <div class="section_title text-center">
  280.                 <h2 class="title_color">Florence | Contact</h2>
  281.                 {#<p>Who are in extremely love with eco friendly system.</p>#}
  282.             </div>
  283.             <div class="row">
  284.                 <div class="col-md-3">
  285.                     <div class="contact_info">
  286.                         <div class="info_item">
  287.                             <i class="lnr lnr-home"></i>
  288.                             <h6>Côte D'ivoire, Yamoussokro</h6>
  289.                             <p></p>
  290.                         </div>
  291.                         <div class="info_item">
  292.                             <i class="lnr lnr-phone-handset"></i>
  293.                             <h6><a href="#">(+225)07-69-38-48-59/07-58-33-84-30</a></h6>
  294.                             <p></p>
  295.                         </div>
  296.                         <div class="info_item">
  297.                             <i class="lnr lnr-envelope"></i>
  298.                             <h6><a href="#">florencehotelfirenze@gmail.com</a></h6>
  299.                             <p></p>
  300.                         </div>
  301.                     </div>
  302.                 </div>
  303.                 <div class="col-md-9">
  304.                     <form class="row contact_form" action="https://technext.github.io/royal/contact_process.php" method="post" id="contactForm" novalidate="novalidate">
  305.                         <div class="col-md-6">
  306.                             <div class="form-group">
  307.                                 <input type="text" class="form-control" id="name" name="name" placeholder="Entrez votre nom">
  308.                             </div>
  309.                             <div class="form-group">
  310.                                 <input type="email" class="form-control" id="email" name="email" placeholder="Entrez votre adresse">
  311.                             </div>
  312.                             <div class="form-group">
  313.                                 <input type="text" class="form-control" id="subject" name="subject" placeholder="Objet">
  314.                             </div>
  315.                         </div>
  316.                         <div class="col-md-6">
  317.                             <div class="form-group">
  318.                                 <textarea class="form-control" name="message" id="message" rows="1" placeholder="Entrez votre message"></textarea>
  319.                             </div>
  320.                         </div>
  321.                         <div class="col-md-12 text-right">
  322.                             <button type="submit" value="submit" class="btn theme_btn button_hover">Soumettre</button>
  323.                         </div>
  324.                     </form>
  325.                 </div>
  326.             </div>
  327.         </div>
  328.     </section>
  331.     {% include '_includes/footer.html.twig' %}
  333. {% endblock %}
  335. {% block scripts %}
  336.     <script>
  337.     $(function(){
  338.         $('.btnReservation').on('click', function(){
  339.             
  340.         })
  341.     });
  342.     </script>
  343. {% endblock %}