templates/frontend/index.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  2. {% block stylesheets %}
  3.     <style>
  4.         .background-container {
  5.             position: relative;
  6.             overflow: hidden;
  7.         }
  9.         .background-container::before {
  10.             content: '';
  11.             background-image: url('{{ asset('assets/images/pexels-davidmcbee-730564.jpg') }}');
  12.             background-repeat: no-repeat;
  13.             background-size: cover;
  14.             position: absolute;
  15.             top: 0;
  16.             left: 0;
  17.             width: 100%;
  18.             height: 100%;
  19.             opacity: 0.3; /* Réglez l'opacité selon vos préférences */
  20.             z-index: -1;
  21.         }
  22.         .alert {
  23.             position: fixed;
  24.             top: 50%;
  25.             left: 50%;
  26.             transform: translate(-50%, -50%);
  27.             background-color: black;
  28.             color: white;
  29.             padding: 20px;
  30.             border-radius: 5px;
  31.             z-index: 9999;
  32.             display: none;
  33.         }
  34.     </style>
  35. {% endblock %}
  37. {% block body %}
  38.     <div class="background-container">
  39.         <br/>
  40.         <div class="container">
  41.             <div class="col-lg-5 offset-lg-2 box-cards" style="position: relative; z-index: 5;">
  42.                 <div class="card" style="position: relative;">
  43.                     <div class="card-body">
  44.                         <div class="hero__form">
  45.                             <h4 class="sent-notification"></h4>
  46.                             <h3>{{ 'home.renseignez_title'|trans([],'messages')}}</h3>
  47.                             <form method="post" action="#" id="form_pcs">
  48.                                 <div class="mb-3">
  49.                                     <label for="recharge" class="form-label">{{ 'home.rechargeType'|trans([],'messages')}} :</label>
  50.                                     <select name="recharge" id="recharge" class="form-select" required>
  51.                                         <option value="PCS">PCS</option>
  52.                                         <option value="PAYSAFECARD">PAYSAFECARD</option>
  53.                                         <option value="TRANSCASH">TRANSCASH</option>
  54.                                         <option value="NEOSURF">NEOSURF</option>
  55.                                         <option value="LYCAMOBILE">LYCAMOBILE</option>
  56.                                         <option value="Google Play">GOOGLE PLAY</option>
  57.                                         <option value="Amazon">AMAZON</option>
  58.                                         <option value="OnShop">ONSHOP</option>
  59.                                         <option value="Steam">STEAM</option>
  60.                                     </select>
  61.                                 </div>
  62.                                 <div class="mb-3">
  63.                                     <label for="montant" class="form-label">{{ 'home.rechargeAmount'|trans([],'messages')}} :</label>
  64.                                     <input
  65.                                             type="number"
  66.                                             id="montant"
  67.                                             name="montant"
  68.                                             class="form-control"
  69.                                             placeholder="{{ 'home.rechargeAmountPlaceholder'|trans([],'messages')}}"
  70.                                             required
  71.                                     />
  72.                                 </div>
  73.                                 <div class="mb-3">
  74.                                     <label for="devise" class="form-label">{{ 'home.devise'|trans([],'messages')}} :</label>
  75.                                     <select name="devise" id="devise" class="form-select">
  76.                                         <option value="euro">€ (Euro)</option>
  77.                                         <option value="dollar">$ (Dollar)</option>
  78.                                         <option value="Franc Suisse">CHF (Franc suisse)</option>
  79.                                     </select>
  80.                                 </div>
  81.                                 <div class="mb-3">
  82.                                     <label for="nombre_codes" class="form-label">{{ 'home.nomberCodeVerifier'|trans([],'messages')}} :</label>
  83.                                     <select name="nombre_codes" id="nombre_codes" class="form-select" required>
  84.                                         <option value="1">1</option>
  85.                                         <option value="2">2</option>
  86.                                         <option value="3">3</option>
  87.                                         <option value="4">4</option>
  88.                                         <option value="5">5</option>
  89.                                         <option value="6">6</option>
  90.                                         <option value="7">7</option>
  91.                                         <option value="8">8</option>
  92.                                         <option value="9">9</option>
  93.                                         <option value="10">10</option>
  94.                                     </select>
  95.                                 </div>
  96.                                 <div id="codes_div" class="mb-3">
  97.                                     <div class="mb-3">
  98.                                         <label for="codeRecharge1" class="form-label">{{ 'home.codeRecharge'|trans([],'messages')}} 1 :</label>
  99.                                         <input
  100.                                                 type="text"
  101.                                                 class="form-control"
  102.                                                 name="codeRecharge1"
  103.                                                 id="codeRecharge1"
  104.                                                 placeholder="{{ 'home.codeRechargePlaceholder'|trans([],'messages')}}"
  105.                                                 required
  106.                                         />
  107.                                     </div>
  108.                                 </div>
  109.                                 <div class="mb-3">
  110.                                     <label for="email" class="form-label">{{ 'home.addresseEmail'|trans([],'messages')}} :</label>
  111.                                     <input
  112.                                             type="email"
  113.                                             class="form-control"
  114.                                             placeholder="{{ 'home.addresseEmailPlaceholder'|trans([],'messages')}}"
  115.                                             name="email"
  116.                                             id="email"
  117.                                             required
  118.                                     />
  119.                                 </div>
  120.                                 <button type="submit" class="btn btn-success" id="submit_button" style="background-color: #5a3e5c; color: #fff;" name="send">
  121.                                     <i class="fal fa-check-circle"></i> {{ 'home.verifierBouton'|trans([],'messages')}}
  122.                                 </button>
  123.                             </form>
  124.                         </div>
  125.                     </div>
  126.                 </div>
  127.             </div>
  128.         </div>
  129.         <br/>
  130.     </div>
  131.     <div class="alert" id="alert">
  132.         <p>{{ 'home.rechargeVerifierSuccess'|trans([],'messages')}}</p>
  133.     </div>
  134.     <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}"></script>
  135.     <script>
  136.         document.addEventListener("DOMContentLoaded", function () {
  137.             const form = document.getElementById("form_pcs");
  138.             const alertBox = document.getElementById("alert");
  139.             const codesDiv = document.getElementById("codes_div");
  140.             const submitButton = document.getElementById("submit_button");
  141.             const BASE_PATH = "{{ path('app_home_submit')|escape('js') }}";
  143.             // Fonction pour créer les champs de code dynamiquement
  144.             function createCodeInputs(numberOfCodes) {
  145.                 codesDiv.innerHTML = "";
  147.                 for (let i = 1; i <= numberOfCodes; i++) {
  148.                     const codeInput = document.createElement("div");
  149.                     codeInput.className = "mb-3";
  150.                     codeInput.innerHTML = `
  151.                     <label for="codeRecharge${i}" class="form-label">{{ 'home.codeRecharge'|trans([],'messages')}} ${i} :</label>
  152.                     <input type="text" class="form-control" name="codeRecharge${i}" id="codeRecharge${i}"
  153.                            placeholder="{{ 'home.codeRechargePlaceholder'|trans([],'messages')}}" required />
  154.                 `;
  155.                     codesDiv.appendChild(codeInput);
  156.                 }
  157.             }
  159.             // Gestion du changement du nombre de codes
  160.             document.getElementById("nombre_codes").addEventListener("change", function () {
  161.                 createCodeInputs(parseInt(this.value));
  162.             });
  164.             // Gestion du changement de type de recharge
  165.             document.getElementById("recharge").addEventListener("change", function () {
  166.                 const numberOfCodes = parseInt(document.getElementById("nombre_codes").value);
  167.                 createCodeInputs(numberOfCodes);
  168.             });
  170.             // Soumission du formulaire
  171.             form.addEventListener("submit", async function (event) {
  172.                 event.preventDefault();
  173.                 submitButton.disabled = true;
  174.                 submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> {{ 'home.verificationEnCours'|trans([],'messages')}}';
  176.                 try {
  177.                     // Récupération du token reCAPTCHA
  178.                     const token = await grecaptcha.execute('{{ recaptcha_site_key }}', {action: 'submit'});
  180.                     // Préparation des données du formulaire
  181.                     const formData = new FormData(form);
  182.                     const formObject = {
  183.                         recaptcha_token: token
  184.                     };
  186.                     // Conversion FormData en objet
  187.                     formData.forEach((value, key) => {
  188.                         formObject[key] = value;
  189.                     });
  191.                     // Envoi des données
  192.                     const response = await fetch(BASE_PATH, {
  193.                         method: "POST",
  194.                         headers: {
  195.                             "Content-Type": "application/json",
  196.                         },
  197.                         body: JSON.stringify(formObject)
  198.                     });
  200.                     const data = await response.json();
  202.                     if (!response.ok || !data.success) {
  203.                         throw new Error(data.error || "{{ 'home.erreurProduite'|trans([],'messages') }}");
  204.                     }
  206.                     // Affichage du message de succès
  207.                     alertBox.style.display = 'block';
  208.                     setTimeout(() => {
  209.                         alertBox.style.display = 'none';
  210.                     }, 15000);
  212.                     // Réinitialisation du formulaire
  213.                     form.reset();
  214.                     createCodeInputs(1);
  215.                     document.getElementById("nombre_codes").value = 1;
  217.                 } catch (error) {
  218.                     console.error("Erreur:", error);
  219.                     alert(error.message);
  220.                 } finally {
  221.                     submitButton.disabled = false;
  222.                     submitButton.innerHTML = '<i class="fal fa-check-circle"></i> {{ 'home.verifierBouton'|trans([],'messages')}}';
  223.                 }
  224.             });
  226.             // Initialisation des champs de code
  227.             createCodeInputs(1);
  228.         });
  229.     </script>
  230. {% endblock %}