templates/public/home.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/base.html.twig' %}
  3. {% block custom_js %}
  4.     <script>
  5.         $(document.body).click(function (e){
  6.             let email = $("#user_form_email_first").val();
  7.             console.log('clicked');
  8.             if((email.indexOf("gmail") >= 0) || (email.indexOf("mail") >= 0) || email.indexOf("yahoo") >= 0 || (emailAddress.indexOf("yandex") >= 0) || (emailAddress.indexOf("hotmail") >= 0) || (emailAddress.indexOf("outlook") >= 0) || (emailAddress.indexOf("aol") >= 0)) {
  9.                 $(".custom-error-message").removeClass("d-none");
  10.             }else{
  11.                 $(".custom-error-message").addClass("d-none");
  12.             }
  13.         });
  14.     </script>
  15. {% endblock %}
  18. {% block main %}
  19.     <body>
  20.         <!-- NAV BLOCK -->
  21.         <div class="d-flex justify-content-center">
  22.                 <div class="card-body  mt-4 p-1">
  23.                     <!-- NAV BLOCK END -->
  24.                     <!--BANNER -->
  25.                      <div class="px-5 border border-info" id="colorBouton" >
  27.                      <h5 class=" p-4 " >
  28.                         <strong>Pour découvrir tout l'univers Lunii rendez-vous sur : <a target="_blank" href="https://lunii.com" ><u>www.lunii.com</u></a></strong>.
  29.                         </br>
  30.                         <strong>Retrouvez toutes les explications pour utiliser votre code album sur <a target="_blank" href="https://lunii.com/fr-fr/code-album/" ><u>le site Lunii</u>.</a> </strong>
  31.                     </h5>
  32.                      </div>
  33.                    
  34.                         <div class="row d-lg-flex justify-content-center  pt-4">
  35.                          <div class="jumbotron-fluid px-5 pt-2" style='background-color: #F5F5F5'>
  36.                             <div class="d-flex justify-content-center">
  37.                                 <div class="sect sect--padding-top col-md-12 ">
  38.                                     <h1 class="text-center row__title  font-weight-bold mt-5"><strong>COMMENT PARTICIPER ?</strong></h1>
  39.                                    
  40.                                     <p class="row__sub  text-justify text-md-start mt-4">
  41.                                        
  42.                                             1/ Achetez simultanément entre le 02 mai 2022 et le 30 juin 2022 une « Fabrique à Histoires » et un « Album Audio Interactif » <br/> dans une de <a target="_blank" href="{{ asset('assets/documents/Liste-des-enseignes-participantes.pdf') }}"><u>nos enseignes partenaires</u></a> (offre non valable pour les achats réalisés sur le site www.lunii.com).
  43.                                         
  44.                                     </p>
  45.                                     <p class="row__sub  text-justify text-md-start mt-4">
  46.                                         {% trans %}
  47.                                             2/ Inscrivez-vous sur le site <a href="https://example.com"><u>www.operationslunii.fr</u></a>en remplissant le formulaire. Vous allez recevoir un email avec un lien, qui vous permet de déposer votre preuve d’achat et enregistrer votre participation, jusqu’au 31 juillet 2022.
  48.                                         {% endtrans %}
  49.                                     </p>
  50.                                     <p class="row__sub  text-justify text-md-start mt-4 mb-5">
  51.                                         {% trans %}
  52.                                             3/ Une fois votre participation validée par notre partenaire, vous recevrez votre remboursement dans un délai de 4 semaines maximum.
  53.                                         {% endtrans %}
  54.                                     </p>
  55.                                 </div>
  56.                                  </div>
  57.                             </div>
  58.                           
  59.                             <footer class="mt-5"><footer>
  60.                             <div class="col-lg-12 navbar d-flex justify-content-center d-none d-md-block">
  61.                             
  62.                                     <div class="sect sect--padding-top">
  63.                                         <h1 class="text-center row__title pt-4 font-weight-bold"><strong>JE DEMANDE MON REMBOURSEMENT</strong></h1>
  64.                                     </div>
  65.                             
  66.                             </div>
  67.                             {# {% if error %}
  68.                                 <div>{{ error.messageKey|trans(error.messageData, 'security') }}</div>
  69.                             {% endif %}#}
  70.                 
  71.                             <form class="needs-validation" novalidate action="{{ path('home')}}" method="post" id="formHome">
  72.                                 <div class="form-group ">
  73.                                     <p>
  74.                                         {# {% if form_errors(form.email.first)|length > 0 %}
  75.                                             <ul class="alert alert-danger" role="alert">Les champs d'email doivent correspondre.</ul>
  76.                                         {% endif %} #}
  77.                                     </p>
  78.                                     <p>
  79.                                         <ul class="alert alert-danger d-none custom-error-message" role="alert">Merci d'utiliser votre email professionnel (Ex. : jean@data-gest.fr)</ul>
  80.                                     </p>
  81.                                     <div>
  82.                                         {{ form_widget(form.civilite, {'attr': {'class': 'form-select col-md-6','id':'validationServer01',  'placeholder': 'Civilité *',  'required': true,}})}}
  83.                                     </div>
  84.                                 </div>
  85.                                 </br> 
  86.                                 <div class="row">
  87.                                     <div class="form-group col-md-6">
  88.                                         {{ form_widget(form.lastName, {'attr': {'class': 'form-control mb-4','id':'validationTooltip02',  'placeholder': 'Nom *', 'required': true,}})}}
  89.                                     </div>
  90.                                     <div class="form-group col-md-6">
  91.                                         {{ form_widget(form.firstName, {'attr': {'class': 'form-control','id':'validationTooltip03',  'placeholder': 'Prénom *', 'required': true,}})}}
  92.                                     </div>
  93.                                 </div>
  94.                                 <br>
  95.                                 <div class="row">
  96.                                     <div class="form-group ">
  97.                                         {{ form_widget(form.address, {'attr': {'class': 'form-control','id':'inputAddress',  'placeholder': 'Adresse *', 'required': true,}})}}
  98.                                     </div>
  99.                                 </div>
  100.                                 <br>
  101.                                 <div class="row">
  102.                                     <div class="form-group">
  103.                                         {{ form_widget(form.address2, {'attr': {'class': 'form-control','id':'inputAddress2',  'placeholder': 'Complément d\'adresse '}})}}
  104.                                     </div>
  105.                                 </div>
  106.                                 <br>
  107.                                 <div class="row">
  108.                                     <div class="form-group col-md-6">
  109.                                         {{ form_widget(form.postalCode, {'attr': {'class': 'form-control mb-4','id':'inputCodePostal',  'placeholder': 'Code postal *', 'required': true,}})}}
  110.                                     </div>
  111.                                     <div class="form-group col-md-6">
  112.                                         {{ form_widget(form.city, {'attr': {'class': 'form-control','id':'inputCity',  'placeholder': 'Ville *', 'required': true,}})}}
  113.                                     </div>
  114.                                 </div>
  115.                                 <br>
  116.                                 <div class="row">
  117.                                     <div class="form-group col-md-6">
  118.                                         {{ form_widget(form.email, {'attr': {'class': 'form-control mb-4','id':'inputEmail',  'placeholder': 'Email *', 'required': true,}})}}
  119.                                     </div>
  120.                                     <div class="form-group col-md-6">
  121.                                         {{ form_widget(form.phoneNumber, {'attr': {'class': 'form-control','id':'inputTelephone',  'placeholder': 'Téléphone '}})}}
  122.                                     </div>
  123.                                 </div>
  124.                                 <br>
  125.                                 <div class="form-check mt-4">
  126.                                     <input type="checkbox" class="form-check-input" id="exampleCheck1" required>
  127.                                     <label class="form-check-label d-flex justify-content-start" for="exampleCheck1">Je reconnais avoir pris connaissance et accepté&nbsp;<a class="is-valid" target="_blank" style="color: blue" href="{{ asset('assets/documents/reglement-odr-luni.pdf') }}"><u>le règlement</u></a> &nbsp;complet. *</label>
  128.                                 </div>
  129.                                 <br>
  130.                                 <div class="form-check ">
  131.                                     <input type="checkbox" class="form-check-input" id="exampleCheck2" >
  132.                                     <label class="form-check-label d-flex justify-content-start mb-3" for="exampleCheck2">J'accepte de recevoir les actualités et offres promotionnelles de la part de Lunii.</label>
  133.                                 </div>
  134.                                     <sup class="form-check-label d-flex justify-content-start" style="left : 25px" for="exampleCheck2">Vos données personnelles sont collectées par la Société Organisatrice pour la bonne gestion de cette opération.</sup>
  135.                                     <sup class="form-check-label d-flex justify-content-start mt-3"  style="left : 25px" for="exampleCheck2">Pour en savoir plus sur vos droits, consultez notre&nbsp; <a class="is-valid" target="_blank" style="color: blue"  href="{{ asset('assets/documents/LUNII_FR_6_Politique_de_confidentialite_Lunii.pdf') }}"><u>Politique de Confidentialité.</u></a> </sup>
  136.                               
  137.                                 <br>
  138.                                 
  139.                                 
  140.                             
  141.                                 {% if app.request.hasPreviousSession %}
  143.                                     <div class="messages">
  145.                                         {% for type, messages in app.flashes %}
  147.                                             {% for message in messages %}
  149.                                                 {# Bootstrap alert, see https://getbootstrap.com/docs/3.4/components/#alerts #}
  151.                                                 <div class="alert alert-dismissible alert-{{ type }}" role="alert">
  153.                                                     {# <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  155.                                                         <span aria-hidden="true">&times;</span>
  157.                                                     </button> #}
  159.                                                     {{ message|trans }}
  161.                                                 </div>
  163.                                             {% endfor %}
  165.                                         {% endfor %}
  167.                                     </div>
  169.                                 {% endif %}
  171.                                 {% if form is defined and form.vars is defined %}
  173.                                 {% set formErrors = form.vars.errors.form.getErrors(true) %}
  175.                                     {% if formErrors|length %}
  177.                                             <div class="alert alert-dismissible alert-danger" role="alert">
  179.                                                     {# <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  181.                                                         <span aria-hidden="true">&times;</span>
  183.                                                     </button> #}
  185.                                                 {% for error in formErrors %}
  187.                                                 <p>Vous devez remplir les formulaires avec une étoile</p>
  189.                                                 {% endfor %}
  191.                                                 </div>
  193.                                         {% endif %}
  195.                                 {% endif %}
  197.                                 
  199.                                 {% if error.messageKey is defined %}
  201.                                     <div class="alert alert-dismissible alert-danger" role="alert">
  203.                                                     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  205.                                                         <span aria-hidden="true">&times;</span>
  207.                                                     </button>
  209.                                                     {{ error.messageKey|trans(error.messageData, 'security') }}
  211.                                                 </div>
  213.     {% endif %}
  214.                             <div class="row pt-3 mt-5">
  215.                            {# <div class="form-group d-flex justify-content-center">
  216.                                 <p class="form-groupform-check-label  " for="exampleCheck2">* champs obligatoires</p>
  217.                             </div>#}
  218.                             <div class="text-center">
  219.                                 <button type="submit"  id="colorBouton" class="col-12 col-sm-12 col-md-5 col-lg-5 btn btn-custom py-3 text-dark mb-5">Valider</button>
  220.                             </div>
  221.                               <p class="form-groupform-check-label  " for="exampleCheck2">* champs obligatoires</p>
  222.                             </form>
  224.                         
  225.                             <script>
  226.                              // Example starter JavaScript for disabling form submissions if there are invalid fields
  227.                             (function() {
  228.                             'use strict';
  229.                             window.addEventListener('load', function() {
  230.                                 // Fetch all the forms we want to apply custom Bootstrap validation styles to
  231.                                 var forms = document.getElementsByClassName('needs-validation');
  232.                                 // Loop over them and prevent submission
  233.                                 var validation = Array.prototype.filter.call(forms, function(form) {
  234.                                 form.addEventListener('submit', function(event) {
  235.                                     if (form.checkValidity() === false) {
  236.                                     event.preventDefault();
  237.                                     event.stopPropagation();
  238.                                     }
  239.                                     form.classList.add('was-validated');
  240.                                 }, false);
  241.                                 });
  242.                             }, false);
  243.                             })(); 
  244.                             </script>
  245.                         </div>
  246.                         <!--BANNER END-->
  247.                     
  248.             </div>
  249.         </div>
  250.     </body>
  251.     {% endblock %}