templates/simulation.html.twig line 1

Open in your IDE?
  1. {% extends 'layout.html.twig' %}
  3. {% block content %}
  4.     <div id="box-search">
  5.         <div class="thumbnail">
  6.             <img src="{{ asset('assets/img/bandeau-05-2023.jpg') }}" alt="Responsive image" class="img-fluid">
  7.             {#<div class="btn-bandeau">
  8.                 <a type="submit" class="btn btn-primary btn-lg btn-accueil" href="{{ path('diagnostique_gratuit') }}">Demandez
  9.                     votre
  10.                     diagnostique gratuit</a>
  11.             </div>#}
  12.         </div>
  13.     </div>
  14.     <div class="container-fluid mb-3">
  15.         <div class="title">
  16.             Simulez vos aides
  17.         </div>
  18.         <form id="simulation_mail" name="simulation_mail">
  19.             <div class="row">
  20.                 <div class="col-6">
  21.                     <fieldset class="border p-2">
  22.                         <legend class="w-auto">Votre logement</legend>
  23.                         <div class="col-12 mt-2">
  24.                             <label for="house-built">Construction de votre maison</label>
  25.                             <select id="house-built" name="house-built" class="form-control" required>
  26.                                 <option value=1>Moins de 2 ans</option>
  27.                                 <option value=2>Plus de 2 ans</option>
  28.                                 <option value=3>Plus de 15ans</option>
  29.                             </select>
  30.                         </div>
  31.                         <div class="col-12 mt-2">
  32.                             <label for="surface">Surface du logement</label>
  33.                             <input type="text" class="form-control" id="surface" name="surface" placeholder="En m²"
  34.                                    value="" required>
  35.                         </div>
  36.                         <div class="col-12 mt-2">
  37.                             <label for="heating-mode">Mode de chauffage</label>
  38.                             <select id="heating-mode" name="heating-mode" class=form-control required>
  39.                                 <option value=3>Bois</option>
  40.                                 <option value=4>Gaz de ville</option>
  41.                                 <option value=2>Fioul</option>
  42.                                 <option value=5>Gaz propane</option>
  43.                                 <option value=1>Électricité</option>
  44.                                 <option value=6>Pompe à chaleur</option>
  45.                             </select>
  46.                         </div>
  47.                         <div class="col-12 mt-2">
  48.                             <label for="department">Votre département</label>
  49.                             <select id="department" name="department" class="form-control" required>
  50.                                 <option value=16>Charente</option>
  51.                                 <option value=19>Corrèze</option>
  52.                                 <option value=23>Creuse</option>
  53.                                 <option value=24>Dordogne</option>
  54.                                 <option value=87>Haute-Vienne</option>
  55.                                 <option value=99>Autre</option>
  56.                             </select>
  57.                         </div>
  58.                         <div class="col-12 mt-2">
  59.                             <label for="project-type">Type de projet</label>
  60.                             <select id="project-type" name="project-type" class="form-control" required>
  61.                                 <option value="Isolation combles">Isolation de combles</option>
  62.                                 <option value="Isolation sols">Isolation de sols</option>
  63.                                 <option value="Inject styrene">Inject styrene</option>
  64.                                 <option value="Pompe à chaleur">Pompe à chaleur</option>
  65.                                 <option value="Autre">Autre</option>
  66.                             </select>
  67.                         </div>
  68.                         <div class="col-12 mt-2">
  69.                             <label for="comments">Commentaires</label>
  70.                             <input type="text" class="form-control" id="comments" name="comments" placeholder=""
  71.                                    value="">
  72.                         </div>
  73.                     </fieldset>
  74.                 </div>
  75.                 <div class="col-6">
  76.                     <fieldset class="border p-2">
  77.                         <legend class="w-auto">Vos coordonnées</legend>
  78.                         <div class="col-12 mt-2">
  79.                             <label for="name">Votre nom</label>
  80.                             <input type="text" class="form-control" id="name" name="name" placeholder="" value="" required>
  81.                         </div>
  82.                         <div class="col-12 mt-2">
  83.                             <label for="firstname">Votre prénom</label>
  84.                             <input type="text" class="form-control" id="firstname" name="firstname" placeholder=""
  85.                                    value="" required>
  86.                         </div>
  87.                         <div class="col-12 mt-2">
  88.                             <label for="postalCode">Votre code postal</label>
  89.                             <input type="text" class="form-control" id="postalCode" name="postalCode" placeholder=""
  90.                                    value="" required>
  91.                         </div>
  92.                         <div class="col-12 mt-2">
  93.                             <label for="city">Votre ville</label>
  94.                             <input type="text" class="form-control" id="city" name="city" placeholder="" value="" required>
  95.                         </div>
  96.                         <div class="col-12 mt-2">
  97.                             <label for="phone">Votre téléphone</label>
  98.                             <input type="tel" class="form-control" id="phone" name="phone" placeholder="" value="" required
  99.                                    pattern="[0-9]{10}" title="Veuillez respecter la casse suivante : 0606060606">
  100.                         </div>
  101.                         <div class="col-12 mt-2">
  102.                             <label for="email">Votre email</label>
  103.                             <input type="email" class="form-control" id="email" name="email" placeholder="" value="" required>
  104.                         </div>
  105.                     </fieldset>
  106.                 </div>
  107.                 <div class="col-6">
  108.                     <fieldset class="border p-2">
  109.                         <legend class="w-auto">Votre situation familiale</legend>
  110.                         <div class="col-12 mt-2">
  111.                             <label for="nbrefoyer">Nombre de personnes composant le ménage</label>
  112.                             <select id="nbrefoyer" name="nbrefoyer" onchange="catsel(this)" class="form-control" required>
  113.                                 <option disabled selected>Faites votre choix</option>
  114.                                 <option value=1>1</option>
  115.                                 <option value=2>2</option>
  116.                                 <option value=3>3</option>
  117.                                 <option value=4>4</option>
  118.                                 <option value=5>5</option>
  119.                                 <option value=6>6</option>
  120.                                 <option value=7>7</option>
  121.                                 <option value=8>8</option>
  122.                                 <option value=9>9</option>
  123.                             </select>
  124.                         </div>
  125.                     </fieldset>
  126.                 </div>
  127.                 <div class="col-6">
  128.                     <fieldset class="border p-2">
  129.                         <legend class="w-auto">Vos conditions de revenus</legend>
  130.                         <div class="col-12 mt-2">
  131.                             <label for="house-built">Revenus annuels par ménage*</label>
  132.                             <select class="form-control" id="revenu">
  133.                                 <option>Faites votre choix</option>
  134.                             </select>
  135.                         </div>
  136.                     </fieldset>
  137.                 </div>
  138.                 <p style="font-size: 0.7em">*Nombre de personnes composant le ménage nécessaire</p>
  139.             </div>
  140.             <div class="form-group col-md-12 col-sm-12 mt-4" style="text-align: center">
  141.                 <button id="valider" name="valider" class="btn btn-modif btn-large btn-success" type="submit" data-id="" style="background-color: #A0C621; border-color: #A0C621">Envoyer
  142.                 </button><br>
  143.                 <div class="lds-ring col-md-12 col-sm-12" id="lds-ring" hidden><div></div><div></div><div></div><div></div></div>
  144.                 <div class="text-center" id="done" hidden="">Vous pouvez bénéficier d'aides à votre isolement ! <br> Nous allons vous contacter d'ici peu, merci de votre confiance.</div>
  145.             </div>
  146.         </form>
  147.     </div>
  148. {% endblock %}
  150. {% block footer %}
  151.     {{ parent() }}
  152.     <script src="{{ asset('assets/js/simulation.js') }}"></script>
  153. {% endblock %}