templates/default/concours-2023.html.twig line 1

Open in your IDE?
  1. {% extends "layout-no-menu.html.twig" %}
  3. {#
  4. {% use AppBundle/Helper/Apik %}
  5. #}
  8. {% block content %}
  10.     <!-- #main -->
  11.     <main id="main" role="main">
  13.         <div class="apk-concours-2023">
  15.             {% if editmode %}
  17.             <p>Image desktop</p>
  18.             {{ pimcore_image("banner-image") }}
  19.             <hr/>
  20.             <p>Image mobile</p>
  21.             {{ pimcore_image("banner-image-mobile") }}
  22.             <hr/>
  23.             <p>Image fond formulaire</p>
  24.             {{ pimcore_image("banner-image-form") }}
  25.             <hr/>
  27.             <p>Sous-titre</p>
  28.             <p>
  29.             {{ pimcore_textarea("content-text",{
  30.                 "nl2br" : true
  31.             }) }}
  32.             </p>
  34.             <p>Sous-titre gras</p>
  35.             <p>
  36.             {{ pimcore_textarea("content-text-2",{
  37.                 "nl2br" : true
  38.             }) }}
  39.             </p>
  41.             <p>Dates</p>
  42.             <p>
  43.             {{ pimcore_textarea("content-date",{
  44.                 "nl2br" : true
  45.             }) }}
  46.             </p>
  48.             <div class="uk-alert uk-alert-primary" uk-alert>
  49.                 <h2 class="uk-h2">Modal du réglement du concours</h2>
  50.                 {{ pimcore_wysiwyg('reglement') }}
  51.             </div>
  53.             {% else %}
  55.             <div id="modal-reglement-2023" class="uk-flex-top" uk-modal>
  56.                 <div class="uk-modal-dialog uk-margin-auto-vertical">
  57.                     <button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
  58.                     <div class="uk-modal-body" uk-overflow-auto>
  59.                         {{ pimcore_wysiwyg('reglement') }}
  60.                     </div>
  61.                     <div class="uk-modal-footer uk-text-right">
  62.                         <button class="uk-button uk-button-default uk-modal-close" type="button">{{ "Fermer"|trans }}</button>
  63.                     </div>
  64.                 </div>
  65.             </div>
  67.             <div class="apk-container-image uk-inline uk-visible@m">
  68.                 {{ pimcore_image("banner-image") }}
  71.                 {{ get_language_switcher_html(document, 'dropdown', 'code')|raw }}
  74.                 <div class="uk-position-center-left">
  75.                     <div class="apk-title">
  76.                         <h1>{{ "Concours !"|trans }}</h1>
  77.                     </div>
  78.                 </div>
  80.                 <div class="uk-position-top-right">
  81.                     <div class="apk-date">
  82.                         <p>{{ pimcore_textarea("content-date",{"nl2br" : true}) }}</p>
  83.                     </div>
  84.                 </div>
  86.                 <div class="uk-position-bottom-left">
  87.                     <p class="uk-margin-remove-bottom">{{ pimcore_textarea("content-text",{"nl2br" : true}) }}</p>
  88.                     <p class="uk-margin-remove-top"><strong>{{ pimcore_textarea("content-text-2",{"nl2br" : true}) }}</strong></p>
  89.                 </div>
  91.             </div>
  93.             <div class="apk-container-image uk-inline uk-hidden@m">
  95.                 {{ pimcore_image("banner-image-mobile") }}
  97.                 {{ get_language_switcher_html(document, 'dropdown', 'code')|raw }}
  99.                 <div class="uk-position-center-left">
  100.                     <div class="apk-title">
  101.                         <h1>{{ "Concours !"|trans }}</h1>
  102.                     </div>
  103.                 </div>
  104.                 <div class="uk-position-center-right">
  105.                     <div class="apk-date">
  106.                         <p>{{ pimcore_textarea("content-date",{"nl2br" : true}) }}</p>
  107.                     </div>
  108.                 </div>
  109.                 <div class="uk-position-bottom-left">
  110.                     <p class="uk-margin-remove-bottom">{{ pimcore_textarea("content-text",{"nl2br" : true}) }}</p>
  111.                     <p class="uk-margin-remove-top"><strong>{{ pimcore_textarea("content-text-2",{"nl2br" : true}) }}</strong></p>
  112.                 </div>
  114.             </div>
  116.             {% endif %}
  118.             <div class="uk-background-cover uk-panel uk-flex uk-flex-center uk-flex-middle apk-background-cover" style="background-image: url({{ pimcore_image("banner-image-form").thumbnail("full-background") }});">
  119.                 <div class="uk-container apk-container1400">
  121.                     {% if formStatus == 'robot' %}
  122.                         <div class="uk-alert-warning" uk-alert>
  123.                             <p>{{ "Une erreur recaptcha est survenue, merci de réessayer."|trans }}</p>
  124.                         </div>
  125.                     {% elseif formStatus == 'invalid' %}
  126.                         <div class="uk-alert-warning" uk-alert>
  127.                             <p>{{ "Vous n'avez pas remplis tout les champs, merci de réessayer."|trans }}</p>
  128.                         </div>
  129.                     {% elseif formStatus == 'alreadyPlayed' %}
  130.                         <div class="uk-alert-warning" uk-alert>
  131.                             <p>{{ "Vous avez déjà participé à ce concours"|trans }}</p>
  132.                         </div>
  133.                     {% elseif formStatus == 'not-filled' %}
  134.                         <div class="uk-alert-warning" uk-alert>
  135.                             <p>{{ "Veuillez remplir tout les champs"|trans }}</p>
  136.                         </div>
  137.                     {% endif %}
  140.                     {{ form_start(form,{'attr': {'id': '#concours2023', 'enctype' : 'multipart/form-data'}}) }}
  141.             
  142.                     <div class="apk-container-form">
  143.                         <h2>{{ "Question 1"|trans }}</h2>
  144.                         <label class="uk-form-label required apk-label-is-linked-to-field apk-label-color"
  145.                                 for="form-stacked-text"> {{ form_label(form.choixmultiple) }} </label>
  146.                         {{ form_widget(form.choixmultiple) }}
  147.                     </div>
  149.                     <div class="apk-container-form">
  150.                         <h2>{{ "Question 2"|trans }}</h2>
  151.                         <label class="apk-label-color">{{"Selon vous, combien de personnes rempliront ce formulaire ?*"|trans}}</label>
  152.                         </br>
  153.                         <label class="uk-form-label apk-label-color"
  154.                                 for="form-stacked-text"> {{ form_label(form.message) }} </label>
  155.                         {{ form_widget(form.message) }}
  156.                     </div>
  158.                     <div class="apk-container-form uk-margin-medium-bottom">
  159.                         <div class="uk-grid-small" uk-grid>
  160.                             <div class="uk-width-1-1">
  161.                                 <label class="uk-form-label"
  162.                                         for="form-stacked-text"> {{ form_label(form.lastname) }} </label>
  163.                                 {{ form_widget(form.lastname) }}
  164.                             </div>
  165.                             <div class="uk-width-1-1">
  166.                                 <label class="uk-form-label"
  167.                                         for="form-stacked-text"> {{ form_label(form.firstname) }} </label>
  168.                                 {{ form_widget(form.firstname) }}
  169.                             </div>
  170.                             <div class="uk-width-1-1">
  171.                                 <label class="uk-form-label" for="form-stacked-text"> {{ form_label(form.email) }} </label>
  172.                                 {{ form_widget(form.email) }}
  173.                             </div>
  174.                             <div class="uk-width-1-1">
  175.                                 <label class="uk-form-label" for="form-stacked-text"> {{ form_label(form.preuvePaiement) }} </label>
  176.                                 {{ form_widget(form.preuvePaiement) }}
  177.                             </div>
  178.                             <div class="uk-width-1-1">
  179.                                 {{ form_widget(form.gdpr) }}
  180.                                 <label for="concours2023_form_gdpr" id="accept-condition" class="uk-padding-remove">
  181.                                     {{ "J’accepte la politique de confidentialité, le traitement de mes données par Magnecaps"|trans }}
  182.                                 </label>
  183.                             </div>
  184.                             <div class="uk-margin-small-top uk-margin-small-bottom uk-width-1-1">
  185.                                 {{ form_widget(form.reglement) }}
  186.                                 <label for="concours2023_form_reglement" id="accept-reglement" class="uk-padding-remove">
  187.                                     {{ "J’accepte le règlement de ce concours"|trans }}
  188.                                     <a href="#modal-reglement-2023" uk-toggle>
  189.                                         <img uk-svg width="20" height="20" src="/static/img/pictos/information.svg" alt="reglement">
  190.                                     </a>
  191.                                 </label>
  192.                             </div>
  193.                             <div class="div-submit">
  194.                                 {{ form_widget(form.recaptcha) }}
  195.                                 {{ form_widget(form.submit) }}
  196.                             </div>
  197.                         </div>
  199.                         <p class="uk-margin-remove-bottom" style="font-size: 12px;">{{"*Champs obligatoires"|trans}}</p>
  201.                     </div>
  203.                     {{ form_end(form) }}
  205.                     {% if formStatus == 'success' %}
  207.                         <div id="success" uk-modal>
  208.                             <div class="uk-modal-dialog uk-modal-body apk-modal-sucess">
  209.                                 <div class="uk-inline uk-text-center">
  211.                                     <div class="uk-position-center-left apk-forme-left">
  212.                                         <img src="/static/img/bgs/formes-un.png" alt="">
  213.                                     </div>
  215.                                     <div class="uk-text-right uk-margin-right uk-margin-small-top">
  216.                                         <button class="uk-modal-close" type="button" aria-label="Close" uk-close></button>
  217.                                     </div>
  219.                                     <div class="uk-flex uk-flex-center uk-flex-middle uk-height-1-1">
  220.                                         <div class="apk-content-modal">
  221.                                             <h2>{{ "Merci pour votre participation !"|trans }}</h2>
  222.                                             <p><strong>{{ "Le tirage au sort aura lieu le 02/05/2023 et tous les gagnants seront avertis par e-mail."|trans }}</strong></p>
  223.                                             <p>{{ "D'ici là n'hésitez pas à nous suivre sur les réseaux sociaux !"|trans }}</p>
  224.                                             <div class="uk-flex uk-flex-center apk-logos-media">
  225.                                                 {% if document.property('facebookUrl') %} 
  226.                                                     <a href="{{ document.property('facebookUrl') }}" target="_blank"><img src="/static/img/pictos/Facebook-logo.png" alt=""></a>
  227.                                                 {% endif %}
  228.                                                 {% if document.property('instagramUrl') %} 
  229.                                                     <a href="{{ document.property('instagramUrl') }}" target="_blank"><img src="/static/img/pictos/Instagram-logo.png" alt=""></a>
  230.                                                 {% endif %}
  231.                                             </div>
  232.                                         </div>
  233.                                     </div>
  235.                                     <div class="uk-position-center-right apk-forme-right">
  236.                                         <img src="/static/img/bgs/formes-deux.png" alt="">
  237.                                     </div>
  239.                                 </div>
  240.                             </div>
  241.                         </div>
  243.                     {% endif %}
  244.                 </div>
  245.             </div>
  246.         </div>
  248.     </main><!-- end #main -->
  250.     {% do pimcore_head_link().appendStylesheet(asset('/static/framework/dropify/css/dropify.min.css')) %}
  251.     {% do pimcore_head_script().appendFile(asset('/static/framework/heic2any/heic2any.js')) %}
  252.     {% do pimcore_head_script().appendFile(asset('/static/framework/dropify/js/dropify.js')) %}
  254.     {% endblock %}
  256. {% block inlinescripts %}
  258.   {% set recaptchaKeyPublic = pimcore_website_config('recaptchaKeyPublic') %}
  260.   <script src="https://www.google.com/recaptcha/api.js?onload=onloadRecaptchaCallback&render={{ recaptchaKeyPublic }}"></script>
  262.   <script>
  264.     if($('#success').length) {
  265.       UIkit.modal($('#success')).show();
  266.       console.log('success');
  267.     }
  269.     
  270.     function onloadRecaptchaCallback(){
  271.         grecaptcha.ready(function() {
  272.             grecaptcha.execute('{{ recaptchaKeyPublic }}', {action: 'concours2023'}).then(function(token) {
  273.             //alert('recaptcha is loaded');
  274.             var recaptcha = document.getElementById('concours2023_form_recaptcha');
  275.             recaptcha.value = token;
  276.             });
  277.         });
  278.     }
  280.     setInterval(function () {
  281.         grecaptcha.ready(function() {
  282.         grecaptcha.execute('{{ recaptchaKeyPublic }}', {action: 'concours2023'}).then(function(token) {
  283.         //alert('recaptcha is loaded');
  284.         var recaptcha = document.getElementById('concours2023_form_recaptcha');
  285.         recaptcha.value = token;
  286.         });
  287.     });
  288.     }, 110 * 1000);
  290.   </script>
  292. {% endblock inlinescripts %}