templates/reservation/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  4.     {{ parent() }}
  5.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  7.     <style>
  8.         .form-input{
  9.             display: block;
  10.             background-color: #1E1E1E;
  11.             color: #999999;
  12.             font-size: 13px;
  13.             width: 100%;
  14.             padding: 0 18px;
  15.             border: 1px solid #4a4a4a;
  16.             -webkit-transition: all .3s;
  17.             -o-transition: all .3s;
  18.             transition: all .3s;
  19.             height: 45px;
  20.         }
  21.         .form-input:focus {
  22.             border-color: #ff4e00;
  23.         }
  25.         .item-wr {
  26.             padding: 0 7px 14px !important;
  27.             width: 50%;
  28.             margin: 0;
  29.         }
  31.         .row-input {
  32.             display: -webkit-box;
  33.             display: -webkit-flex;
  34.             display: -ms-flexbox;
  35.             display: flex;
  36.             -webkit-flex-wrap: wrap;
  37.             -ms-flex-wrap: wrap;
  38.             flex-wrap: wrap;
  39.             margin: 0 -7px !important;
  40.         }
  42.         @media screen and (max-width: 575px) {
  43.             .item-wr{
  44.                 width: 100%;
  45.             }
  46.         }
  47.     </style>
  49. {% endblock %}
  51. {% block javascripts %}
  52.     {{ parent() }}
  53.     <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  54.     <script>
  55.         document.addEventListener('DOMContentLoaded', function() {
  56.             flatpickr('.js-datetimepicker', {
  57.                 enableTime: true,
  58.                 dateFormat: "Y-m-d H:i",
  59.                 time_24hr: true // Option pour afficher le temps en format 24h
  60.             });
  61.         });
  62.     </script>
  63. {% endblock %}
  65. {% block body %}
  67.     <body>
  69.     <main>
  70.         <div class="container">
  71.             <div class="wrapper-breadcrumbs">
  72.                 <div id="breadcrumbs">
  73.                     <a href="{{ path('homepage') }}">Accueil</a> <i class="icon ion-android-arrow-forward separator"></i>
  74.                     <span class="breadcrumb-last">Reservation</span>
  75.                 </div>
  76.                 <div class="soc-icons">
  77.                     <a href="#"><i class="fa fa-twitter"></i></a>
  78.                     <a href="#"><i class="fa fa-facebook-f"></i></a>
  79.                     <a href="#"><i class="fa fa-instagram"></i></a>
  80.                 </div>
  81.             </div>
  82.         </div>
  83.         <div class="contact-entry container">
  84.             <div class="row">
  85.                 <div class="col-lg-12">
  86.                     <div class="post-content">
  87.                         <p>Cher(e) client, veuillez remplir le formulaire suivant pour effectuer une reservation sur nos prestations.  <br>
  88.                             L'un de nos opérateurs vous prendra en charge dans de brefs delais. <br><br>
  89.                             À très bientôt
  90.                         </p>
  91.                     </div>
  93.                     {{ form_start(form) }}
  94.                         {#<p class="form-message error">Message should not be empty</p>
  95.                         <p class="form-message success">Message sent saccessfuly</p>#}
  96.                         <div class="row-input">
  97.                             <div class="item-wr name">
  98.                                 {{ form_row(form.firstname) }}
  99.                             </div>
  100.                             <div class="item-wr">
  101.                                 {{ form_row(form.lastname) }}
  102.                             </div>
  103.                             <div class="item-wr">
  104.                                 {{ form_row(form.telephone) }}
  105.                             </div>
  106.                             <div class="item-wr">
  107.                                 {{ form_row(form.email) }}
  108.                             </div>
  109.                             <div class="item-wr">
  110.                                 {{ form_row(form.service) }}
  111.                             </div>
  112.                             <div class="item-wr" style="margin-top: 2rem">
  113.                                 {{ form_widget(form.reserved_at) }}
  114.                             </div>
  115.                             <div class="item-wr" style="width: 100% !important">
  116.                                 {{ form_row(form.observations) }}
  117.                             </div>
  118.                             <button type="submit" value="Send message" class="btn-classic">Reserver</button>
  120.                         </div>
  122.                     {{ form_end(form) }}
  123.                 </div>
  125.             </div>
  126.         </div>
  127.     </main>
  129.     </body>
  131. {% endblock %}