templates/default/simulateur.html.twig line 1

Open in your IDE?
  1. {% extends "layout.html.twig" %}
  3. {#
  4.     {% use AppBundle/Helper/Apik %}
  5. #}
  8. {% block content %}
  9.     <!-- #main -->
  10.     <main id="main" role="main">
  12.         <div id="depreciation-table" uk-modal>
  13.             <div class="uk-modal-dialog uk-modal-body">
  15.                 <button class="uk-modal-close-default" type="button" uk-close></button>
  17.                 <div class="uk-text-center uk-margin-medium-bottom">
  18.                     <h2 class="uk-modal-title">{{"Recevoir le tableau d'amortissement"|trans}}</h2>
  19.                     <p class="text-hide-success">{{"Nous allons vous envoyer votre tableau d'amortissement par mail"|trans}}</p>
  20.                 </div>
  22.                 <div id="message-success">
  23.                     <div class="uk-alert-success" uk-alert>
  24.                         <p>{{"Le tableau d'amortissement vous a bien été envoyé par mail"|trans}}</p>
  25.                     </div>
  26.                 </div>
  28.                 <form id="app_calculator_send_mail" class="text-hide-success">
  29.                     <label class="uk-form-label" for="form-depreciation-email">{{"Entrez votre Email"|trans}}</label>
  30.                     <div class="uk-form-controls">
  31.                         <input class="uk-input" id="form-depreciation-email" name="app_loan_email" type="text" placeholder="{{'Email'|trans}}">
  32.                     </div>
  34.                     <div class="uk-margin-top">
  35.                         <label for="form-depreciation-gdpr"><input required id="form-depreciation-gdpr" class="uk-checkbox uk-margin-small-right" type="checkbox" name="form-depreciation-gdpr">{{ "contact.conscent"|trans }}</label>
  36.                     </div>
  37.                     <div class="uk-align-right">
  38.                         <button class="uk-button uk-margin-top" type="submit">Envoyer</button>
  39.                     </div>
  40.                 </form>
  42.             </div>
  43.         </div>
  45.         <div class="apk-{{ document.getProperty("services") }}">
  46.             {{ pimcore_areablock('contentTop') }}
  48.             <div class="apk-section-simulateur">
  49.                 <div class="uk-container apk-container-1200">
  51.                     <h1 class="uk-text-center uk-margin-medium-bottom">{{ pimcore_textarea("content-title",{ "nl2br" : true }) }}</h1>
  53.                     <div class="uk-child-width-1-2@m" uk-grid uk-height-match="target: .apk-container-height-match">
  54.                         
  55.                         <div>
  56.                             <div class="apk-container-height-match apk-estimation">
  57.                                 <h2>{{ "Estimation"|trans }}</h2>
  59.                                 <div class="uk-margin-bottom"><!-- Taux d’intérêt -->
  60.                                     <strong>{{"Formule de prêt hypothécaire :"|trans}}</strong>
  61.                                     <select id="app_loan_rate" class="uk-select uk-margin-small-top">
  62.                                         {% for config_rate in config_rates %}
  63.                                             <option value="{{ config_rate.id }}">{{ config_rate.name }}</option>
  64.                                         {% endfor %}
  65.                                     </select>
  66.                                 </div>
  68.                                 <div class="uk-margin-bottom"><!-- Montant -->
  69.                                     <div class="uk-margin-small-bottom" uk-grid>
  70.                                         <div class="uk-width-expand">
  71.                                             <strong>Montant</strong>
  72.                                         </div>
  73.                                         <div class="uk-width-auto">
  74.                                             <input id="app_loan_amount" class="uk-input" type="text" placeholder="350 000 €" aria-label="Input"><!-- la velur change en fonction du slider -->
  75.                                         </div>
  76.                                     </div>
  78.                                     <div id="sliderprice"></div>
  80.                                     <div class="uk-margin-small-top" uk-grid>
  81.                                         <div class="uk-width-expand">
  82.                                             <span>10 000€</span>
  83.                                         </div>
  84.                                         <div class="uk-width-auto">
  85.                                             <span>1 000 000€</span>
  86.                                         </div>
  87.                                     </div>
  88.                                 </div>
  90.                                 <div class="uk-margin-bottom"><!-- Durée du prêt -->
  91.                                     <div class="uk-margin-small-bottom" uk-grid>
  92.                                         <div class="uk-width-expand">
  93.                                             <strong>Durée du prêt</strong>
  94.                                         </div>
  95.                                         <div class="uk-width-auto">
  96.                                             <input id="app_loan_duration" class="uk-input" type="text" placeholder="20 ans" aria-label="Input"><!-- la velur change en fonction du slider -->
  97.                                         </div>
  98.                                     </div>
  100.                                     <div id="sliderduration"></div>
  102.                                     <div class="uk-margin-small-top" uk-grid>
  103.                                         <div class="uk-width-expand">
  104.                                             <span>10 ans</span>
  105.                                         </div>
  106.                                         <div class="uk-width-auto">
  107.                                             <span>30 ans</span>
  108.                                         </div>
  109.                                     </div>
  110.                                 </div>
  111.                             </div>
  112.                         </div>
  114.                         <div>
  115.                             <div class="apk-container-height-match apk-recapitulatif">
  116.                                 <h2 class="uk-text-center">{{ "Récapitulatif"|trans }}</h2>
  118.                                 <div class="apk-monthly-payment uk-text-center">
  119.                                     <p class="uk-margin-remove"><span id="app_loan_result_monthly_payment" class="uk-h3 price">0 €</span> /mois</p>
  120.                                 </div>
  122.                                 <div class="uk-margin-small-top" uk-grid>
  123.                                     <div class="uk-width-expand">
  124.                                         <p class="uk-margin-small-top uk-margin-small-bottom">Durée</p>
  125.                                         <p class="uk-margin-small-top uk-margin-small-bottom">Taux d’intérêt</p>
  126.                                         <p class="uk-margin-small-top uk-margin-small-bottom">Montant emprunté</p>
  127.                                         <p class="uk-margin-small-top uk-margin-small-bottom">Total intérêts</p>
  128.                                         <p class="uk-margin-small-top uk-margin-small-bottom">Total paiement</p>
  129.                                     </div>
  130.                                     <div class="uk-width-auto uk-text-right">
  131.                                         <p class="uk-margin-small-top uk-margin-small-bottom year" id="app_loan_result_duration">0 ans</p><!-- la velur change en fonction du slider -->
  132.                                         <p class="uk-margin-small-top uk-margin-small-bottom percent" id="app_loan_result_rate">0%</p><!-- la velur change en fonction du slider -->
  133.                                         <p class="uk-margin-small-top uk-margin-small-bottom price" id="app_loan_result_loan_amount">0 €</p><!-- la velur change en fonction du slider -->
  134.                                         <p class="uk-margin-small-top uk-margin-small-bottom price" id="app_loan_result_total_rate">0 €</p><!-- la velur change en fonction du slider -->
  135.                                         <p class="uk-margin-small-top uk-margin-small-bottom price" id="app_loan_result_total_amount">0 €</p><!-- la velur change en fonction du slider -->
  136.                                     </div>
  137.                                 </div>
  139.                                 <div class="uk-margin-top" uk-grid>
  140.                                     <div class="uk-width-expand">
  141.                                         <button uk-toggle="target: #depreciation-table" id="app_loan_open_modal" class="uk-button uk-button-primary" type="button" disabled>{{"Tableau d'amortissement"|trans}}</button>
  142.                                     </div>
  143.                                     <div class="uk-width-auto">
  144.                                         <a href="/{{ app.request.locale }}/contact" class="uk-button">{{"Prendre rendez-vous"|trans}}</a>
  145.                                     </div>
  146.                                 </div>
  147.                             </div>
  148.                         </div>
  150.                     </div>
  152.                 </div>
  153.             </div>
  155.             {{ pimcore_areablock('contentBottom') }}
  156.         </div>
  158.     </main><!-- end #main -->
  160. {% endblock %}
  163. {% block inlinescripts %}
  165.     <script src="{{ asset('static/js/pages/loan_simulator.js') }}" async type="module"></script>
  167. {% endblock %}