var/cache/dev/twig/84/84bb0ccf4e71a0637706afe4cb4858b5.php line 45

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\CoreExtension;
  7. use Twig\Extension\SandboxExtension;
  8. use Twig\Markup;
  9. use Twig\Sandbox\SecurityError;
  10. use Twig\Sandbox\SecurityNotAllowedTagError;
  11. use Twig\Sandbox\SecurityNotAllowedFilterError;
  12. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  13. use Twig\Source;
  14. use Twig\Template;
  15. use Twig\TemplateWrapper;
  17. /* Parent/LoginParent.html.twig */
  18. class __TwigTemplate_37bb9239606940e257554a0bc0386491 extends Template
  19. {
  20.     private Source $source;
  21.     /**
  22.      * @var array<string, Template>
  23.      */
  24.     private array $macros = [];
  26.     public function __construct(Environment $env)
  27.     {
  28.         parent::__construct($env);
  30.         $this->source = $this->getSourceContext();
  32.         $this->blocks = [
  33.             'LinksCss' => [$this, 'block_LinksCss'],
  34.             'Content' => [$this, 'block_Content'],
  35.             'javascript' => [$this, 'block_javascript'],
  36.         ];
  37.     }
  39.     protected function doGetParent(array $context): bool|string|Template|TemplateWrapper
  40.     {
  41.         // line 1
  42.         return "/Accueil/layoutAccueilParents.html.twig";
  43.     }
  45.     protected function doDisplay(array $context, array $blocks = []): iterable
  46.     {
  47.         $macros = $this->macros;
  48.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  49.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Parent/LoginParent.html.twig"));
  51.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  52.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Parent/LoginParent.html.twig"));
  54.         $this->parent = $this->load("/Accueil/layoutAccueilParents.html.twig", 1);
  55.         yield from $this->parent->unwrap()->yield($context, array_merge($this->blocks, $blocks));
  56.         
  57.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  59.         
  60.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  62.     }
  64.     // line 2
  65.     /**
  66.      * @return iterable<null|scalar|\Stringable>
  67.      */
  68.     public function block_LinksCss(array $context, array $blocks = []): iterable
  69.     {
  70.         $macros = $this->macros;
  71.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  72.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "LinksCss"));
  74.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  75.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "LinksCss"));
  77.         // line 3
  78.         yield "    ";
  79.         yield from $this->yieldParentBlock("LinksCss", $context, $blocks);
  80.         yield "
  82.     <link rel=\"stylesheet\" href=\"";
  83.         // line 5
  84.         yield "/css/Parent/css/login.css";
  85.         yield "\" >
  86.     <link rel=\"stylesheet\" href=\"";
  87.         // line 6
  88.         yield "/css/Parent/css/premiercnx.css";
  89.         yield "\">
  90.     <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css\">
  91.      <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css\">
  93.  <link href=\"";
  94.         // line 10
  95.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("css/bootstrap-social.css"), "html", null, true);
  96.         yield "\" type=\"text/css\" rel=\"stylesheet\" >
  97.  <link rel=\"stylesheet\" href=\"";
  98.         // line 11
  99.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("css/splide.min.css"), "html", null, true);
  100.         yield "\">
  102. <style>
  103.     .titleProdbienvenu {
  104.     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  105. }
  107. /* Style pour le bouton de retour en haut */
  108. .scroll-top-btn {
  109.     position: fixed;
  110.     bottom: 20px;
  111.     right: 20px;
  112.     width: 40px;
  113.     height: 40px;
  114.     border-radius: 50%;
  115.     background-color:#f09e7a;
  116.     color: white;
  117.     border: none;
  118.     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  119.     z-index: 1000;
  120.     display: none;
  121.     cursor: pointer;
  122.     transition: all 0.3s ease;
  123. }
  125. .scroll-top-btn:hover {
  126.     background-color: #e8865e;
  127.     transform: translateY(-3px);
  128. }
  130. /* Styles pour le loader d'inscription */
  131. .register-loader {
  132.     position: fixed;
  133.     top: 0;
  134.     left: 0;
  135.     width: 100%;
  136.     height: 100%;
  137.     background-color: rgba(255, 255, 255, 0.9);
  138.     z-index: 9999;
  139.     display: none;
  140.     justify-content: center;
  141.     align-items: center;
  142. }
  144. .loader-content {
  145.     text-align: center;
  146.     background-color: white;
  147.     padding: 30px;
  148.     border-radius: 10px;
  149.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  150.     max-width: 350px;
  151.     width: 90%;
  152. }
  154. .loader-message {
  155.     margin-top: 20px;
  156.     font-size: 18px;
  157.     font-weight: bold;
  158.     color: #41a2aa;
  159. }
  161. .loader-submessage {
  162.     margin-top: 10px;
  163.     font-size: 14px;
  164.     color: #666;
  165. }
  167. .spinner-border {
  168.     width: 3rem;
  169.     height: 3rem;
  170.     color: #f09e7a !important;
  171. }
  173. /* Styles pour le modal de confirmation */
  174. .modal {
  175.     display: flex;
  176.     align-items: center;
  177.     justify-content: center;
  178. }
  180. .modal-dialog {
  181.     margin: 0 auto;
  182.     max-width: 500px;
  183.     width: 90%;
  184. }
  186. .modal-content {
  187.     border-radius: 10px;
  188.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  189.     margin: 0 auto;
  190. }
  192. .modal-body {
  193.     padding: 30px 20px;
  194. }
  196. .modal-footer {
  197.     justify-content: center;
  198.     padding: 15px;
  199. }
  201. .circleModal {
  202.     background-color: #f09e7a;
  203.     color: white;
  204.     border: none;
  205.     border-radius: 5px;
  206.     padding: 10px 30px;
  207.     font-weight: bold;
  208.     transition: all 0.3s ease;
  209. }
  211. .circleModal:hover {
  212.     background-color: #e8865e;
  213.     transform: translateY(-2px);
  214. }
  216. /* Animation pour le passage au champ suivant */
  217. .field-complete {
  218.     transition: all 0.3s ease;
  219.     border-color: #41a2aa !important;
  220.     box-shadow: 0 0 5px rgba(65, 162, 170, 0.5) !important;
  221.     transform: translateY(-2px);
  222. }
  224. .form-control:focus {
  225.     border-color: #f09e7a !important;
  226.     box-shadow: 0 0 6px rgba(240, 158, 122, 0.5) !important;
  227.     transition: all 0.3s ease;
  228. }
  230. /* Position for password toggle icons */
  231. .position-relative {
  232.     position: relative;
  233.     display: block;
  234.     width: 100%;
  235. }
  237. .field-icon {
  238.     position: absolute;
  239.     right: 10px;
  240.     top: 50%;
  241.     transform: translateY(-50%);
  242.     z-index: 10;
  243.     cursor: pointer;
  244.     color: #41a2aa;
  245.     font-size: 14px;
  246.     pointer-events: auto;
  247. }
  249. .field-icon:hover {
  250.     color: #f09e7a;
  251. }
  253. /* Adjust input padding to make room for the icon */
  254. input[type=\"password\"] {
  255.     padding-right: 40px;
  256. }
  258. /* Updated styles for login forms */
  259. .form-section {
  260.     background-color: #fff;
  261.     padding: 25px;
  262.     border-radius: 8px;
  263.     box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  264.     margin-bottom: 20px;
  265.     height: 100%;
  266. }
  268. .soutitle {
  269.     color: #333;
  270.     font-size: 24px;
  271.     font-weight: bold;
  272.     margin-bottom: 15px;
  273.     text-align: center;
  274. }
  276. .description2 {
  277.     color: #666;
  278.     text-align: center;
  279.     margin-bottom: 20px;
  280.     font-size: 14px;
  281.     line-height: 1.5;
  282. }
  284. .form-control {
  285.     border-radius: 4px;
  286.     padding: 12px 15px;
  287.     margin-bottom: 15px;
  288.     border: 1px solid #ddd;
  289.     transition: all 0.3s ease;
  290. }
  292. .form-control:focus {
  293.     border-color: #41a2aa !important;
  294. }
  296. .logButton {
  297.     width: 100%;
  298.     padding: 12px;
  299.     border-radius: 5px;
  300.     font-weight: bold;
  301.     font-size: 16px;
  302.     margin-top: 10px;
  303.     transition: all 0.3s ease;
  304.     border: none;
  305. }
  307. .logButton:hover {
  308.     transform: translateY(-2px);
  309.     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  310. }
  312. .logButtonSocial {
  313.     display: flex;
  314.     align-items: center;
  315.     justify-content: center;
  316.     width: 100%;
  317.     padding: 12px;
  318.     border-radius: 5px;
  319.     font-weight: bold;
  320.     margin-top: 15px;
  321.     text-decoration: none;
  322.     transition: all 0.3s ease;
  323. }
  325. .logButtonSocial:hover {
  326.     transform: translateY(-2px);
  327.     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  328.     text-decoration: none;
  329. }
  331. .logButtonSocial img {
  332.     margin-right: 10px;
  333.     height: 20px;
  334. }
  336. .ou-container {
  337.     position: relative;
  338.     height: 100%;
  339.     display: flex;
  340.     align-items: center;
  341.     justify-content: center;
  342.     min-height: 400px;
  343. }
  345. .ou-line {
  346.     position: absolute;
  347.     width: 1px;
  348.     height: 80%;
  349.     background-color: #ddd;
  350.     left: 50%;
  351.     transform: translateX(-50%);
  352. }
  354. .ou-text {
  355.     background-color: white;
  356.     padding: 10px;
  357.     position: relative;
  358.     z-index: 1;
  359.     color: #666;
  360.     font-weight: bold;
  361. }
  363. /* Desktop layout - both forms visible side by side */
  364. @media screen and (min-width: 1025px) {
  365.     #connexionDiv, #inscriptionDiv {
  366.         display: block !important;
  367.     }
  368.     
  369.     .circleCree {
  370.         display: none !important;
  371.     }
  372.     
  373.     .ou-container {
  374.         display: flex !important;
  375.     }
  376.     
  377.     /* Ensure proper column widths */
  378.     .col-lg-5 {
  379.         flex: 0 0 41.666667%;
  380.         max-width: 41.666667%;
  381.     }
  382.     
  383.     .col-lg-1 {
  384.         flex: 0 0 8.333333%;
  385.         max-width: 8.333333%;
  386.     }
  387. }
  389. /* Tablet and mobile - one form at a time */
  390. @media screen and (max-width: 1024px) {
  391.     #connexionDiv, #inscriptionDiv {
  392.         width: 100% !important;
  393.         margin: 0 auto !important;
  394.         float: none !important;
  395.     }
  396.     
  397.     /* Initially hide the connection form */
  398.     #connexionDiv {
  399.         display: none;
  400.     }
  401.     
  402.     /* Make the inscription form visible */
  403.     #inscriptionDiv {
  404.         display: block;
  405.     }
  406.     
  407.     /* Hide the OR separator */
  408.     .ou-container {
  409.         display: none !important;
  410.     }
  411.     
  412.     /* Make the toggle buttons visible */
  413.     .circleCree {
  414.         display: block !important;
  415.         width: 100% !important;
  416.         margin: 15px auto !important;
  417.         padding: 10px !important;
  418.         background-color: #41a2aa !important;
  419.         color: white !important;
  420.         border-radius: 5px !important;
  421.         border: none !important;
  422.         cursor: pointer !important;
  423.         text-align: center !important;
  424.         font-weight: bold !important;
  425.     }
  426.     
  427.     /* Full width columns on mobile */
  428.     .col-md-5, .col-sm-5 {
  429.         width: 100% !important;
  430.         max-width: 100% !important;
  431.         flex: 0 0 100% !important;
  432.     }
  433.     
  434.     /* Hide the middle column with the separator */
  435.     .col-md-1.col-sm-1.col-lg-1.col-xs-1 {
  436.         display: none !important;
  437.     }
  438. }
  440. /* Forgot password link styling */
  441. .description a {
  442.     color: #f09e7a;
  443.     text-decoration: none;
  444.     font-weight: bold;
  445. }
  447. .description a:hover {
  448.     text-decoration: underline;
  449. }
  451. /* Button container styling */
  452. .button-container {
  453.     margin-top: 15px;
  454.     margin-bottom: 15px;
  455. }
  457. /* Social login buttons styling */
  458. .mobilesocial {
  459.     margin-top: 10px;
  460. }
  462. </style>
  463. ";
  464.         
  465.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  467.         
  468.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  470.         yield from [];
  471.     }
  473.     // line 377
  474.     /**
  475.      * @return iterable<null|scalar|\Stringable>
  476.      */
  477.     public function block_Content(array $context, array $blocks = []): iterable
  478.     {
  479.         $macros = $this->macros;
  480.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  481.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Content"));
  483.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  484.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "Content"));
  486.         // line 378
  487.         yield "
  488.   <!-- Bouton pour remonter en haut de la page -->
  489.   <button id=\"scrollTopBtn\" class=\"scroll-top-btn\" title=\"Retour en haut\">
  490.     <i class=\"bi bi-arrow-up\"></i>
  491.   </button>
  493.   <!-- Loader pour l'inscription -->
  494.   <div id=\"registerLoader\" class=\"register-loader\">
  495.     <div class=\"loader-content\">
  496.       <div class=\"spinner-border text-primary\" role=\"status\">
  497.         <span class=\"sr-only\">Chargement...</span>
  498.                 </div>
  499.       <p class=\"loader-message\">Création de votre compte en cours...</p>
  500.       <p class=\"loader-submessage\">Nous préparons votre espace parent 5sur5sejour, merci de patienter.</p>
  501.                         </div>
  502.                     </div>
  504.   <!-- Modal de confirmation -->
  505.   <div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\" style=\"display: none;\">
  506.       <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">
  507.     <div class=\"modal-content\" style=\"border-radius: 10px;\">
  508.       <div class=\"modal-header border-0\">
  509.         <button onclick=\"location.reload();\" type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Fermer\" style=\"margin-left: auto;\">
  510.           <img src=\"";
  511.         // line 401
  512.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("images/Groupe_526.svg"), "html", null, true);
  513.         yield "\" alt=\"Fermer\">
  514.         </button>
  515.       </div>
  516.       <div class=\"modal-body text-center\">
  517.         <!-- Logo -->
  518.         <img class=\"imageLogo2\" src=\"";
  519.         // line 406
  520.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("Accueil/imagesAccueil/logoHeader.svg"), "html", null, true);
  521.         yield "\" alt=\"Logo 5sur5séjour\" style=\"max-height: 60px; margin-bottom: 20px;\">
  523.         <!-- Titre -->
  524.         <h4 class=\"modal-title font-weight-bold mb-3\" id=\"modalInscriptionLabel\">🎉 Bienvenue sur 5sur5séjour !</h4>
  526.         <!-- Texte -->
  527.         <p style=\"font-size: 16px; line-height: 1.5; margin-bottom: 15px;\">
  528.   Votre compte parent est presque prêt ! Encore une étape pour accéder à l'espace du séjour de votre enfant.
  529.         </p>
  531.         <p style=\"font-size: 15px; line-height: 1.5; margin-bottom: 15px;\">
  532.   📩 Un e-mail vous a été envoyé pour <strong>activer votre compte parent</strong> en toute sécurité.
  533.         </p>
  535.         <!-- Bouton -->
  536.         <div class=\"mt-4\">
  537.           <button onclick=\"location.reload();\" class=\"btn btn-primary\" style=\"background-color: #41a2aa; border: none; padding: 12px 30px; font-weight: bold; border-radius: 8px; font-size: 16px;\">
  538.             ✅ Compris, je vais consulter mes e-mails
  539.           </button>
  540.         </div>
  541.       </div>
  542.     </div>
  543.   </div>
  544.     </div>
  547.     <div class=\"splide no-padding no-margin\" id=\"imageSlider\" style=\"background:white\">
  548.         <div class=\"splide__track\">
  549.             <ul class=\"splide__list\">
  550.                 <!-- Slide 1 -->
  551.                 <li class=\"splide__slide\">
  552.                     <div class=\"slider-content\">
  553.                         <div class=\"namePRD\" style=\"display: block;\">
  554.                             <h4 class=\"titleProdbienvenu titleProdbienvenu1\" style=\"color: #41a2aa\">Offrez des souvenirs inoubliables à votre enfant </h4>
  555.                             <h4 class=\"titleProdbienvenu titleProdbienvenu2\" style=\"color:#F09E7A\">avec des cadeaux personnalisés en toute simplicité !</h4>
  556.                           </div>
  557.                         <img src=\"";
  558.         // line 442
  559.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/3.png"), "html", null, true);
  560.         yield "\" class=\"imgslider\" alt=\"Image 2\" />
  561.                     </div>
  562.                 </li>
  563.                 <!-- Slide 2 -->
  564.                 <li class=\"splide__slide\">
  565.                     <div class=\"slider-content\">
  566.                         <div class=\"namePRD\" style=\"display: block;\">
  567.                             <h4 class=\"titleProdbienvenu titleProdbienvenu1\" style=\"color:#F09E7A\">Restez connecté au séjour de votre enfant 24h/24  </h4>
  568.                             <h4 class=\"titleProdbienvenu titleProdbienvenu2\" style=\"color:#41a2aa\">grâce à des photos partagées en toute sécurité !</h4>
  569.                           </div>
  570.                         <img src=\"";
  571.         // line 452
  572.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/2.png"), "html", null, true);
  573.         yield "\" class=\"imgslider\" alt=\"Image 1\" />
  574.                     </div>
  575.                 </li>
  576.                 <!-- Slide 3 -->
  577.                 <li class=\"splide__slide\">
  578.                     <div class=\"slider-content\">
  579.                         <div class=\"namePRD\" style=\"display: block;\">
  580.                             <h4 class=\"titleProdbienvenu titleProdbienvenu1\" style=\"color: #41a2aa\">Accéder à une boite vocale en illimitée</h4>
  581.                             <h4 class=\"titleProdbienvenu titleProdbienvenu2\" style=\"color:#F09E7A\">Pour écouter les messages laissés par les enfants et les accompagnateurs</h4>
  582.                           </div>
  583.                         <img src=\"";
  584.         // line 462
  585.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/1.png"), "html", null, true);
  586.         yield "\" class=\"imgslider\" alt=\"Image 2\" />
  587.                     </div>
  588.                 </li>
  589.             </ul>
  590.         </div>
  591.     </div>
  593.     <div class='row no-margin' style=\"padding-top:4%\">
  595.         <div class=\"col-lg-1 col-md-1 col-sm-1 col-xs-1 no-padding SeparateurLeftAccom\"></div>
  596.         <div class=\"col-md-10 col-sm-10 col-lg-10 col-xs-12 \" >
  597.          
  598.         <!-- Bouton caché qui déclenche le modal de confirmation -->
  599.         <button type=\"button\" id=\"showOkInscription\" class=\"d-none\" data-toggle=\"modal\" data-target=\"#exampleModal\">
  600.         En savoir plus
  601.         </button>
  603.             <div class=\"row no-margin\" style='margin-right: auto;margin-top:15px' id=\"formSection\">
  605.                 <!-- Inscription Form -->
  606.                 <div class=\"col-md-5 col-sm-12 col-lg-5 Inscription\" id='inscriptionDiv'>
  607.                     <form class=\"form-section\" id=\"create\" onsubmit=\"return false;\">
  608.                         <div class=\"soutitle\"> Créer un compte   </div>
  609.                     <div class=\"description2\" style=\"padding-top:0px\"> Vous vous connectez pour la 1ère fois et n'avez pas
  610.                         <br> de compte Parent(s) « 5 sur 5 séjour » </div>
  611.                         <button type=\"button\" align=\"center\" class=\"circleCree\" onclick=\"AffichDivConnexion();\">Vous avez déjà un compte Parent(s) ? </button>
  613.                         <div class=\"form-group\">
  614.                             <input type=\"text\" class=\"form-control\" id=\"nomparent\" placeholder=\"NOM * \" >
  615.                             <input type=\"text\" class=\"form-control\" id=\"prenomparent\" placeholder=\"PRENOM *\">
  616.                             <input type=\"text\" autocomplete=\"off\" class=\"form-control\" id=\"mail\" placeholder=\"ADRESSE MAIL\" required data-toggle=\"tooltip\" data-placement=\"right\" title=\"\">
  617.                             <div class=\"position-relative\">
  618.                             <input type=\"password\" autocomplete=\"off\" name=\"password\" id=\"Passworduser\" value=\"\" class=\"form-control\" placeholder=\"MOT DE PASSE  * \">
  619.                                 <i class=\"bi bi-eye field-icon toggle-password\" toggle=\"#Passworduser\"></i>
  620.                             </div>
  621.                             <div class=\"position-relative\">
  622.                             <input type=\"password\" autocomplete=\"off\" name=\"password\" id=\"Passworduser2\" class=\"form-control\" placeholder=\"CONFIRMER VOTRE MOT DE PASSE\">
  623.                                 <i class=\"bi bi-eye field-icon toggle-password\" toggle=\"#Passworduser2\"></i>
  624.                             </div>
  625.                             
  626.                             <p style=\"display: none; color:red; font-weight: bold; margin-top: 10px;\" id=\"eroor\">Cet email est déjà utilisé. <a href=\"";
  627.         // line 502
  628.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("forgotPassparent");
  629.         yield "\" style=\"color:#f09e7a; text-decoration: underline;\">Mot de passe oublié ?</a></p>
  631.                             <input type=\"text\" class=\"form-control\" id=\"num\" name=\"numero de téléphone\" placeholder=\"NUMERO DE TELEPHONE PORTABLE * \">
  632.                                
  633.   
  634.                             <div class=\"row no-margin \">
  635.                                 <div class=\"souTITRE\">Souhaitez-vous être averti lorsque l'organisateur dépose des images ou des messages du séjour ?</div>
  636.                             </div>
  637.                             <br>
  638.                             <div class=\"row no-margin\">
  639.                                 <div class=\"box-1\" id=\"smsToggle\">
  640.                                     <input type='checkbox' name=\"sms\" id=\"smsInput\" />
  641.                                     <span class=\"toogle\"> </span>
  642.                                 </div>
  643.                                 <span class=\"sms\"> Par SMS </span>
  645.                                 <div class=\"box-1\">
  646.                                     <input type='checkbox' name=\"mail\" id=\"mailInput\" />
  647.                                     <span class=\"toogle\" > </span>
  648.                                 </div>
  649.                                 <span class=\"mail\"> Par Mail </span>
  650.                             </div>
  651.                         </div>
  652.                         <div class=\"notification\" id=\"notification\" style=\"display: none;\">L'adresse e-mail est incorrecte.</div>
  653.                         <div class=\"button-container\">
  654.                         <button type=\"button\" onclick=\"cp();\" class=\"logButton\" style=\"color:#fff;border: 1px solid #f09e7a; position: relative; background-color: #f09e7a;margin-top:-5%;\" id=\"submitBtn\">     
  655.             S'inscrire
  656.           </button></div>
  658.           <div class=\"button-container mobilesocial\">
  659.             <a href=\"";
  660.         // line 532
  661.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_google_start");
  662.         yield "\" style=\"color:#fff;background-color:#4F86EC;\" class=\"logButtonSocial\" onclick=\"_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google']);\">
  663.          <img src=\"";
  664.         // line 533
  665.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-google.png"), "html", null, true);
  666.         yield "\" >Continuer avec Google
  667.        </a>
  668.                        
  669.      </div>
  670.      <div class=\"mobilesocial\">                  
  671.                     <a href=\"";
  672.         // line 538
  673.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_facebook_start");
  674.         yield "\" class=\"logButtonSocial\" style=\"color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)\" >
  675.                      <img src=\"";
  676.         // line 539
  677.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-facebook.png"), "html", null, true);
  678.         yield "\" > Continuer avec Facebook
  679.        </a>
  680.            </div>        
  681.         </form>
  682.                 </div>
  684.                 <!-- OR Separator -->
  685.                 <div class=\"col-md-1 col-sm-1 col-lg-1 col-xs-1\">
  686.                     <div class=\"ou-container\">
  687.                         <div class=\"ou-line\"></div>
  688.                         <div class=\"ou-text\">OU</div>
  689.                     </div>
  690.                 </div>
  692.                 <!-- Connexion Form -->
  693.                 <div class=\"col-md-5 col-sm-12 col-lg-5 connexion\" id='connexionDiv'>
  694.                     <div class=\"form-section\">
  695.                         <div class=\"soutitle\"> Se connecter </div>
  696.                         <div class=\"description2\" style=\"padding-top:0px\">Vous avez déja un compte Parent(s) « 5 sur 5 séjour » </div>
  697.                         <button type=\"button\" align=\"center\" class=\"circleCree\" onclick=\"AffichDivInscri();\">Créer un compte ? </button>
  699.                         <form method=\"post\" action=\"";
  700.         // line 560
  701.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("app_back_Parent");
  702.         yield "\" id=\"login-form\">
  703.                             ";
  704.         // line 561
  705.         if ((($tmp = (isset($context["error"]) || array_key_exists("error", $context) ? $context["error"] : (function () { throw new RuntimeError('Variable "error" does not exist.', 561, $this->source); })())) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  706.             // line 562
  707.             yield "                                <div class=\"alert alert-danger\">";
  708.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\TranslationExtension']->trans(CoreExtension::getAttribute($this->env, $this->source, (isset($context["error"]) || array_key_exists("error", $context) ? $context["error"] : (function () { throw new RuntimeError('Variable "error" does not exist.', 562, $this->source); })()), "messageKey", [], "any", false, false, false, 562), CoreExtension::getAttribute($this->env, $this->source, (isset($context["error"]) || array_key_exists("error", $context) ? $context["error"] : (function () { throw new RuntimeError('Variable "error" does not exist.', 562, $this->source); })()), "messageData", [], "any", false, false, false, 562), "security"), "html", null, true);
  709.             yield "</div>
  710.                                 <script>
  711.                                     document.addEventListener('DOMContentLoaded', function() {
  712.                                         Swal.fire({
  713.                                             icon: 'error',
  714.                                             title: 'Erreur de connexion',
  715.                                             text: 'Identifiant ou mot de passe incorrect.',
  716.                                             confirmButtonColor: '#41a2aa'
  717.                                         });
  718.                                     });
  719.                                 </script>
  720.                             ";
  721.         }
  722.         // line 574
  723.         yield "                            <div class=\"form-group\">
  724.                                 <input type=\"text\" name=\"email\" id=\"inputEmail\" value=\"";
  725.         // line 575
  726.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape((isset($context["last_username"]) || array_key_exists("last_username", $context) ? $context["last_username"] : (function () { throw new RuntimeError('Variable "last_username" does not exist.', 575, $this->source); })()), "html", null, true);
  727.         yield "\" class=\"form-control\" placeholder=\"Mon identifiant * \" required>
  728.                                 <div class=\"position-relative\">
  729.                                     <input type=\"password\" name=\"password\" id=\"inputPassword\" class=\"form-control\" placeholder=\"Mon mot de passe *\" required>
  730.                                     <span toggle=\"#inputPassword\" class=\"bi bi-eye field-icon toggle-password\"></span>
  731.                                 </div>
  732.                                 
  733.                                 <input type=\"hidden\" name=\"_csrf_token\" value=\"";
  734.         // line 581
  735.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->env->getRuntime('Symfony\Component\Form\FormRenderer')->renderCsrfToken("authenticate"), "html", null, true);
  736.         yield "\">
  737.                                 <div class=\"button-container\">
  738.                                     <button type=\"submit\" class=\"logButton\" style=\"color:#fff;background-color:#41a2aa;border-color:rgba(0,0,0,0.2)\" id=\"login-button\">
  739.              Se connecter 
  740.           </button>
  741.         
  742.                             </div>
  744.                               
  745.                             <div class=\"description\"> <a id=\"mdpobli\" href=\"";
  746.         // line 590
  747.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("forgotPassparent");
  748.         yield "\" style=\"color:#f09e7a ; display: block\">Vous avez oublié votre mot de passe ? </a> </div>
  750.                             <div class=\"button-container\">
  751.                <a href=\"";
  752.         // line 593
  753.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_google_start");
  754.         yield "\" style=\"color:#fff;background-color:#4F86EC;\" class=\"logButtonSocial\" onclick=\"_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google']);\">
  755.             <img src=\"";
  756.         // line 594
  757.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-google.png"), "html", null, true);
  758.         yield "\" >Continuer avec Google
  759.           </a>
  760.                           
  761.         </div>
  762.         <div class=\"button-c\" style=\"display: flex; justify-content: center; align-items: center;\">                  
  763.                        <a href=\"";
  764.         // line 599
  765.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_facebook_start");
  766.         yield "\" class=\"logButtonSocial\" style=\"color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)\" >
  767.                         <img src=\"";
  768.         // line 600
  769.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("/images/icons-facebook.png"), "html", null, true);
  770.         yield "\" > Continuer avec Facebook
  771.           </a>
  772.               </div>        
  773.                                 <br>
  774.                                 <br>
  775.                             </div>
  776.                         </form>
  777.                     
  778.                     </div>
  779.                 </div>
  781.         </div>
  782.       
  783.     </div>
  784.   <div class=\"col-md-3\" style=\"margin-top: 21%;display:none\">
  785.    <a href=\"";
  786.         // line 615
  787.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_google_start");
  788.         yield "\" style=\"color:#fff;background-color:#4F86EC;border-color:rgba(0,0,0,0.2)\" class=\"btn btn-block btn-social btn-google\" onclick=\"_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google']);\">
  789.             <span class=\"fa fa-google\"></span> S'inscrire avec Google
  790.           </a>
  791.           
  792.                           
  793.                                 <br>
  794.                                    <br>
  795.                        <a href=\"";
  796.         // line 622
  797.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("connect_facebook_start");
  798.         yield "\" class=\"btn btn-block btn-social btn-facebook\" style=\"color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)\" >
  799.             <span class=\"fa fa-facebook\"></span> S'inscrire avec Facebook
  800.           </a></div>
  801.             </div>
  802. ";
  803.         
  804.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  806.         
  807.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  809.         yield from [];
  810.     }
  812.     // line 629
  813.     /**
  814.      * @return iterable<null|scalar|\Stringable>
  815.      */
  816.     public function block_javascript(array $context, array $blocks = []): iterable
  817.     {
  818.         $macros = $this->macros;
  819.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  820.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  822.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  823.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  825.         // line 630
  826.         yield "    ";
  827.         yield from $this->yieldParentBlock("javascript", $context, $blocks);
  828.         yield "
  829.   <script src=\"";
  830.         // line 631
  831.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("js/splide.min.js"), "html", null, true);
  832.         yield "\"></script>
  833.   <script src=\"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js\"></script>
  834.     
  835.     <script>
  836.         document.addEventListener('DOMContentLoaded', function () {
  837.     // S'assurer que le modal est caché au chargement de la page
  838.     \$('#exampleModal').modal('hide');
  839.     \$('#exampleModal').removeClass('show');
  840.     \$('#exampleModal').attr('aria-hidden', 'true');
  841.     \$('body').removeClass('modal-open');
  842.     \$('.modal-backdrop').remove();
  843.     
  844.     // Basic form validation before submission
  845.     const loginForm = document.getElementById('login-form');
  846.     if (loginForm) {
  847.         loginForm.addEventListener('submit', function(e) {
  848.             const email = document.getElementById('inputEmail').value.trim();
  849.             const password = document.getElementById('inputPassword').value;
  850.             
  851.             if (!email || !password) {
  852.                 e.preventDefault();
  853.                 Swal.fire({
  854.                     icon: 'warning',
  855.                     title: 'Champs requis',
  856.                     text: 'Veuillez remplir tous les champs pour vous connecter.',
  857.                     confirmButtonColor: '#41a2aa'
  858.                 });
  859.                 return false;
  860.             }
  861.             // If validation passes, form will submit normally to Symfony
  862.         });
  863.     }
  864.     
  865.     // Gestion du bouton de retour en haut
  866.     const scrollTopBtn = document.getElementById('scrollTopBtn');
  867.     
  868.     window.addEventListener('scroll', function() {
  869.         if (window.pageYOffset > 300) {
  870.             scrollTopBtn.style.display = 'block';
  871.         } else {
  872.             scrollTopBtn.style.display = 'none';
  873.         }
  874.     });
  875.     
  876.     scrollTopBtn.addEventListener('click', function() {
  877.         window.scrollTo({
  878.             top: 0,
  879.             behavior: 'smooth'
  880.         });
  881.     });
  882.     
  883.     // Initialisation du carrousel Splide
  884.     if (typeof Splide !== 'undefined') {
  885.         var splide = new Splide('#imageSlider', {
  886.             type: 'loop',
  887.             perPage: 1,
  888.             autoplay: true,
  889.             interval: 6000,
  890.             pauseOnHover: false,
  891.             pauseOnFocus: false,
  892.             pagination: false,
  893.             arrows: false  
  894.         });
  895.         splide.mount();
  896.     }
  898.     // Auto-scroll vers les formulaires après 5 secondes
  899.     setTimeout(function() {
  900.         scrollToFormSection();
  901.     }, 5000);
  903.     // Configuration du modal de confirmation
  904.     \$('#exampleModal').modal({
  905.         backdrop: 'static',
  906.         keyboard: false,
  907.         show: false
  908.     });
  909.     
  910.     \$('#exampleModal').on('show.bs.modal', function () {
  911.         \$(this).css('display', 'flex');
  912.         \$(this).css('align-items', 'center');
  913.         \$(this).find('.modal-dialog').css({
  914.             'display': 'flex',
  915.             'align-items': 'center',
  916.             'margin': '0 auto',
  917.             'max-height': '90vh'
  918.         });
  919.     });
  921.     function scrollToFormSection() {
  922.         const formSection = document.getElementById('formSection');
  923.         if (formSection) {
  924.             const formPosition = formSection.getBoundingClientRect().top + window.scrollY;
  925.             const headerOffset = 50;
  926.             const scrollPosition = formPosition - headerOffset;
  927.             
  928.             window.scrollTo({
  929.                 top: scrollPosition,
  930.                 behavior: 'smooth'
  931.             });
  932.         }
  933.     }
  934.     
  935.     // Handle responsive form display
  936.     handleResponsiveFormDisplay();
  937.     
  938.     // Configuration pour le passage automatique au champ suivant
  939.     setupAutoNextField();
  940.     
  941.     // Ajouter la validation en temps réel pour tous les champs
  942.     setupRealtimeValidation();
  943. });
  945.         function cp() {
  946.            \$('#registerLoader').css('display', 'flex');
  947.            
  948.            var loaderTimeout = setTimeout(function() {
  949.                \$('#registerLoader').css('display', 'none');
  950.                \$(\"#showOkInscription\").trigger('click');
  951.            }, 3000);
  952.           
  953.             var nomparent = \"\";
  954.             var prenomparent = \"\";
  955.             var mail = \"\";
  956.             var num = \"5555\";
  957.             var confirmpassword = \$('#Passworduser2').val();
  958.             var parent_register = \"";
  959.         // line 757
  960.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("parent_register");
  961.         yield "\";
  962.             var Passworduser = \"\";
  963.             \$testDeCreation = false;
  964.             \$testDeCreation2 = false;
  965.             \$testDeCreation3 = false;
  966.             \$testDeCreation4 = false;
  967.             \$testDeCreation5 = false;
  968.             
  969.             if (\$('#nomparent').val() == \"\") {
  970.                 \$('#nomparent').addClass('is-invalid');
  971.                 \$('#nomparent').removeClass('is-valid');
  972.                 \$('#nomparent').css('border', '1px solid red');
  973.                 \$testDeCreation = false;
  974.             } else {
  975.                 \$('#nomparent').removeClass('is-invalid');
  976.                 \$('#nomparent').addClass('is-valid');
  977.                 \$('#nomparent').css('border', '1px solid green');
  978.                nomparent = \$('#nomparent').val();
  979.                 \$testDeCreation = true;
  980.             }
  982.             if (\$('#prenomparent').val() == \"\") {
  983.                 \$('#prenomparent').addClass('is-invalid');
  984.                 \$('#prenomparent').removeClass('is-valid');
  985.                 \$('#prenomparent').css('border', '1px solid red');
  986.                 \$testDeCreation1 = false;
  987.             } else {
  988.                 \$('#prenomparent').removeClass('is-invalid');
  989.                 \$('#prenomparent').addClass('is-valid');
  990.                 \$('#prenomparent').css('border', '1px solid green');
  991.                prenomparent = \$('#prenomparent').val();
  992.                 \$testDeCreation1 = true;
  993.             }
  995.             if (\$('#num').val() == \"\") {
  996.                 \$('#num ').addClass('is-invalid');
  997.                 \$('#num').removeClass('is-valid');
  998.                 \$('#num').css('border', '1px solid red');
  999.                 \$testDeCreation2 = false;
  1000.             } else {
  1001.                 \$('#num').removeClass('is-invalid');
  1002.                 \$('#num').addClass('is-valid');
  1003.                 \$('#num').css('border', '1px solid green');
  1004.                num = \$('#num').val();
  1005.                 \$testDeCreation2 = true;
  1006.             }
  1008.             if (\$('#mail').val() == \"\") {
  1009.                 \$('#mail').addClass('is-invalid');
  1010.                 \$('#mail').removeClass('is-valid');
  1011.                 \$('#mail').css('border', '1px solid red');
  1012.                 \$testDeCreation3 = false;
  1013.             } else {
  1014.                 \$('#mail').removeClass('is-invalid');
  1015.                 \$('#mail').addClass('is-valid');
  1016.                 \$('#mail').css('border', '1px solid green');
  1017.                 mail = \$('#mail').val();
  1018.                 \$testDeCreation3 = true;
  1019.             }
  1021.             if (\$('#Passworduser').val() == \"\") {
  1022.                 \$('#Passworduser').addClass('is-invalid');
  1023.                 \$('#Passworduser').removeClass('is-valid');
  1024.                 \$('#Passworduser').css('border', '1px solid red');
  1025.                 \$testDeCreation4 = false;
  1026.             } else {
  1027.                 \$('#Passworduser').removeClass('is-invalid');
  1028.                 \$('#Passworduser').addClass('is-valid');
  1029.                 \$('#Passworduser').css('border', '1px solid green');
  1030.                 Passworduser = \$('#Passworduser').val();
  1031.                 \$testDeCreation4 = true;
  1032.             }
  1033.             
  1034.             var sms = 0; var mailnotif = 0;
  1035.             if (\$(\"#smsInput\").is(':checked')) {
  1036.                 var sms = 1;
  1037.             }
  1038.             if (\$(\"#mailInput\").is(':checked')){
  1039.                 var mailnotif = 1;
  1040.             }
  1041.            
  1042.             \$_data = {
  1043.                 'nomparent': nomparent,
  1044.                 'prenomparent': prenomparent,
  1045.                 'mailprent': mail,
  1046.                 'numtel': num,
  1047.                 'passwordparent': Passworduser,
  1048.                 'confirmpassword':confirmpassword,
  1049.                 'sms': sms,
  1050.                 'mailnotif': mailnotif
  1051.             }
  1052.             
  1053.             if (\$testDeCreation && \$testDeCreation1 && \$testDeCreation2 && \$testDeCreation3 && \$testDeCreation4 ) {
  1054.                 \$.ajax({
  1055.                     type: \"POST\",
  1056.                     url: parent_register,
  1057.                     data: \$_data,
  1058.                     success: function (\$response) {
  1059.                         \$('#registerLoader').css('display', 'none');
  1060.                         clearTimeout(loaderTimeout);
  1061.                         
  1062.                         if (\$response == 'eror') {
  1063.                             \$('#mail').css('border-color', 'red');
  1064.                             \$('#eroor').css('display', 'block');
  1065.                             Swal.fire({
  1066.                                 icon: 'error',
  1067.                                 title: 'Email déjà utilisé',
  1068.                                 text: 'Cette adresse email est déjà associée à un compte.',
  1069.                                 footer: '<a href=\"";
  1070.         // line 865
  1071.         yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("forgotPassparent");
  1072.         yield "\" style=\"color:#f09e7a;\">Mot de passe oublié ?</a>',
  1073.                                 showCancelButton: true,
  1074.                                 confirmButtonText: 'Se connecter',
  1075.                                 cancelButtonText: 'Modifier',
  1076.                                 confirmButtonColor: '#41a2aa',
  1077.                                 cancelButtonColor: '#f09e7a',
  1078.                                 position: 'center'
  1079.                             }).then((result) => {
  1080.                                 if (result.isConfirmed) {
  1081.                                     AffichDivConnexion();
  1082.                                     \$('#inputEmail').val(\$('#mail').val());
  1083.                                     \$('#inputPassword').focus();
  1084.                                 }
  1085.                             });
  1086.                         }
  1087.                         else if(\$response == 'erorpasswordconfirm') {
  1088.                               \$('#Passworduser2').css('border-color', 'red');
  1089.                                 Swal.fire({
  1090.                                 icon: 'error',
  1091.                                 title: 'Oups..!',
  1092.                                 text: 'Les mots de passe ne se correspondent pas.',
  1093.                                 footer: '',
  1094.                                 position: 'center'
  1095.                             })
  1096.                         }
  1097.                          else {
  1098.                             \$(\"#showOkInscription\").trigger('click');
  1099.                             resetForm();
  1100.                             
  1101.                             \$('#exampleModal').on('shown.bs.modal', function () {
  1102.                                 \$(this).find('.modal-dialog').css({
  1103.                                     'margin-top': function () {
  1104.                                         return (\$(window).height() - \$(this).height()) / 2;
  1105.                                     }
  1106.                                 });
  1107.                             });
  1108.                               var windowWidth = document.documentElement.clientWidth;
  1109.                                 if (windowWidth <= 560) {
  1110.                                     setTimeout(function(){
  1111.                                    location.reload();
  1112.                               },500);
  1113.                            }
  1114.                         }
  1115.                     },
  1116.                     error: function() {
  1117.                         \$('#registerLoader').css('display', 'none');
  1118.                         clearTimeout(loaderTimeout);
  1119.                         
  1120.                         Swal.fire({
  1121.                             icon: 'error',
  1122.                             title: 'Erreur de connexion',
  1123.                             text: 'Un problème est survenu lors de l\\'inscription. Veuillez réessayer.',
  1124.                             confirmButtonColor: '#f09e7a',
  1125.                             position: 'center'
  1126.                         });
  1127.                     }
  1128.                 })
  1129.             } else {
  1130.                 \$('#registerLoader').css('display', 'none');
  1131.                 clearTimeout(loaderTimeout);
  1132.             }
  1133.         }
  1135.         function AffichDivConnexion() {
  1136.             \$(\"#inscriptionDiv\").css(\"display\", \"none\");
  1137.             \$(\"#connexionDiv\").css(\"display\", \"block\");
  1138.         }
  1140.         function AffichDivInscri() {
  1141.             \$(\"#inscriptionDiv\").css(\"display\", \"block\");
  1142.             \$(\"#connexionDiv\").css(\"display\", \"none\");
  1143.         }
  1145.         function handleResponsiveFormDisplay() {
  1146.             var windowWidth = \$(window).width();
  1147.             
  1148.             if (windowWidth <= 1024) {
  1149.                 if (\$(\"#inscriptionDiv\").is(':visible')) {
  1150.                     \$(\"#connexionDiv\").css(\"display\", \"none\");
  1151.                 } else {
  1152.                     \$(\"#inscriptionDiv\").css(\"display\", \"none\");
  1153.                     \$(\"#connexionDiv\").css(\"display\", \"block\");
  1154.                 }
  1155.                 \$(\".circleCree\").css(\"display\", \"block\");
  1156.             } else {
  1157.                 \$(\"#connexionDiv\").css(\"display\", \"block\");
  1158.                 \$(\"#inscriptionDiv\").css(\"display\", \"block\");
  1159.                 \$(\".circleCree\").css(\"display\", \"none\");
  1160.             }
  1161.         }
  1163.         \$(window).resize(function() {
  1164.             handleResponsiveFormDisplay();
  1165.         });
  1167.         function setupAutoNextField() {
  1168.             const formFields = [
  1169.                 'nomparent',
  1170.                 'prenomparent',
  1171.                 'mail',
  1172.                 'Passworduser',
  1173.                 'Passworduser2',
  1174.                 'num'
  1175.             ];
  1176.             
  1177.             formFields.forEach((field, index) => {
  1178.                 if (index < formFields.length - 1) {
  1179.                     const \$currentField = \$('#' + field);
  1180.                     let typingTimer;
  1181.                     const doneTypingInterval = 1500;
  1182.                     
  1183.                     \$currentField.on('input', function() {
  1184.                         clearTimeout(typingTimer);
  1185.                         
  1186.                         if (event && event.data === ' ' && isFieldValid(field, \$(this).val().trim())) {
  1187.                             event.preventDefault();
  1188.                             \$('#' + formFields[index + 1]).focus();
  1189.                             return;
  1190.                         }
  1191.                         
  1192.                         if (\$(this).val()) {
  1193.                             typingTimer = setTimeout(function() {
  1194.                                 if (isFieldValid(field, \$currentField.val().trim())) {
  1195.                                     \$('#' + formFields[index + 1]).focus();
  1196.                                 }
  1197.                             }, doneTypingInterval);
  1198.                         }
  1199.                     });
  1200.                     
  1201.                     \$currentField.on('keydown', function(e) {
  1202.                         clearTimeout(typingTimer);
  1203.                         
  1204.                         if (e.key === ' ' && isFieldValid(field, \$(this).val().trim())) {
  1205.                             e.preventDefault();
  1206.                             \$('#' + formFields[index + 1]).focus();
  1207.                             return;
  1208.                         }
  1209.                         
  1210.                         if (e.key === 'Tab' && !e.shiftKey) {
  1211.                             return true;
  1212.                         }
  1213.                         
  1214.                         if (e.key === 'Enter') {
  1215.                             e.preventDefault();
  1216.                             \$('#' + formFields[index + 1]).focus();
  1217.                         }
  1218.                     });
  1219.                     
  1220.                     \$currentField.on('blur', function() {
  1221.                         clearTimeout(typingTimer);
  1222.                     });
  1223.                 }
  1224.             });
  1225.             
  1226.             \$('#' + formFields[formFields.length - 1]).on('keydown', function(e) {
  1227.                 if (e.key === 'Enter') {
  1228.                     e.preventDefault();
  1229.                     cp();
  1230.                 }
  1231.             });
  1232.         }
  1234.         function isFieldValid(fieldId, value) {
  1235.             switch(fieldId) {
  1236.                 case 'mail':
  1237.                     const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}\$/;
  1238.                     return emailRegex.test(value);
  1239.                 case 'Passworduser':
  1240.                     return value.length >= 6;
  1241.                 case 'Passworduser2':
  1242.                     return value === \$('#Passworduser').val() && value.length >= 6;
  1243.                 case 'num':
  1244.                     const phoneRegex = /^[0-9]{8,}\$/;
  1245.                     return phoneRegex.test(value.replace(/\\s+/g, ''));
  1246.                 case 'nomparent':
  1247.                 case 'prenomparent':
  1248.                     const nameRegex = /^[A-Za-zÀ-ÖØ-öø-ÿ\\s'-]{2,}\$/;
  1249.                     return nameRegex.test(value);
  1250.                 default:
  1251.                     return value.length >= 2;
  1252.             }
  1253.         }
  1255.         function hideshow() {
  1256.             document.getElementById(\"btnn\").disabled = true;
  1257.             \$(\"#btnn\").css(\"background-color\", \"#ecf0f1\");
  1258.             \$(\"#mdpobli\").css(\"display\", \"none\");
  1259.             \$(\"#mdpoblier\").css(\"display\", \"block\");
  1260.         }
  1261.     </script>
  1262.    
  1264.    <script>
  1265.     \$(\".toggle-password\").click(function() {
  1266.         \$(this).toggleClass(\"bi-eye bi-eye-slash\");
  1267.         var input = \$(\$(this).attr(\"toggle\"));
  1268.         if (input.attr(\"type\") == \"password\") {
  1269.           input.attr(\"type\", \"text\");
  1270.         } else {
  1271.           input.attr(\"type\", \"password\");
  1272.         }
  1273.     });
  1275.     \$(document).ready(function(){
  1276.         \$('[data-toggle=\"tooltip\"]').tooltip({
  1277.             trigger: 'manual',
  1278.             html: true,
  1279.             template: '<div class=\"tooltip\" role=\"tooltip\"><div class=\"arrow\"></div><div class=\"tooltip-inner\"></div></div>'
  1280.         });
  1282.         function validateEmail(email) {
  1283.             const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}\$/;
  1284.             return re.test(String(email).toLowerCase());
  1285.         }
  1287.         \$('#mail').on('input', function() {
  1288.             var emailInput = \$(this);
  1289.             if (validateEmail(emailInput.val())) {
  1290.                 emailInput.removeClass('is-invalid');
  1291.                 emailInput.addClass('is-valid');
  1292.                 emailInput.tooltip('dispose');
  1293.                 \$('#notification').hide();
  1294.                 \$('#submitBtn').prop('disabled', false);
  1295.             } else {
  1296.                 emailInput.removeClass('is-valid');
  1297.                 emailInput.addClass('is-invalid');
  1298.                 
  1299.                 if (emailInput.val().length > 3) {
  1300.                     emailInput.attr('data-original-title', 'Votre adresse mail est incorrecte. Exemple: nom@domaine.com').tooltip('show');
  1301.                     if (emailInput.val().length > 0) {
  1302.                         \$('#notification').show();
  1303.                     }
  1304.                 } else {
  1305.                     \$('#notification').hide();
  1306.                 }
  1307.                 \$('#submitBtn').prop('disabled', false);
  1308.             }
  1309.         });
  1310.     });
  1311. </script>
  1312. <script>
  1313. function setupRealtimeValidation() {
  1314.     const formFields = [
  1315.         'nomparent',
  1316.         'prenomparent',
  1317.         'mail',
  1318.         'Passworduser',
  1319.         'Passworduser2',
  1320.         'num'
  1321.     ];
  1322.     
  1323.     formFields.forEach(field => {
  1324.         \$('#' + field).on('input', function() {
  1325.             const value = \$(this).val();
  1326.             
  1327.             if (value.length === 0) {
  1328.                 \$(this).removeClass('is-valid is-invalid');
  1329.                 \$(this).css('border', '1px solid #ced4da');
  1330.                 return;
  1331.             }
  1332.             
  1333.             if (isFieldValid(field, value)) {
  1334.                 \$(this).removeClass('is-invalid').addClass('is-valid');
  1335.                 \$(this).css('border', '1px solid #28a745');
  1336.             } else {
  1337.                 \$(this).removeClass('is-valid').addClass('is-invalid');
  1338.                 \$(this).css('border', '1px solid #dc3545');
  1339.             }
  1340.         });
  1341.     });
  1342. }
  1344. function resetForm() {
  1345.     \$('#nomparent').css('border','1px solid #41a2aa');
  1346.     \$('#nomparent').removeClass('is-valid'); 
  1347.     \$('#nomparent').removeClass('is-invalid'); 
  1348.     \$('#nomparent').val(''); 
  1349.     \$('#prenomparent').css('border','1px solid #41a2aa');
  1350.     \$('#prenomparent').removeClass('is-valid'); 
  1351.     \$('#prenomparent').removeClass('is-invalid'); 
  1352.     \$('#prenomparent').val(''); 
  1353.     \$('#mail').css('border','1px solid #41a2aa');
  1354.     \$('#mail').removeClass('is-valid'); 
  1355.     \$('#mail').removeClass('is-invalid'); 
  1356.     \$('#mail').val(''); 
  1357.     \$('#eroor').css('display','none');
  1358.     \$('#num').css('border','1px solid #41a2aa');
  1359.     \$('#num').removeClass('is-valid'); 
  1360.     \$('#num').removeClass('is-invalid'); 
  1361.     \$('#num').val(''); 
  1362.     \$('#Passworduser').css('border','1px solid #41a2aa');
  1363.     \$('#Passworduser').removeClass('is-valid'); 
  1364.     \$('#Passworduser').removeClass('is-invalid');
  1365.     \$('#Passworduser').val('');  
  1366.     \$('#Passworduser2').css('border','1px solid #41a2aa');
  1367.     \$('#Passworduser2').removeClass('is-valid'); 
  1368.     \$('#Passworduser2').removeClass('is-invalid'); 
  1369.     \$('#Passworduser2').val(''); 
  1370.     \$(\"#smsInput\").prop(\"checked\",false);
  1371.     \$(\"#mailInput\").prop(\"checked\",false);
  1372. }
  1373. </script>
  1374. ";
  1375.         
  1376.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  1378.         
  1379.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  1381.         yield from [];
  1382.     }
  1384.     /**
  1385.      * @codeCoverageIgnore
  1386.      */
  1387.     public function getTemplateName(): string
  1388.     {
  1389.         return "Parent/LoginParent.html.twig";
  1390.     }
  1392.     /**
  1393.      * @codeCoverageIgnore
  1394.      */
  1395.     public function isTraitable(): bool
  1396.     {
  1397.         return false;
  1398.     }
  1400.     /**
  1401.      * @codeCoverageIgnore
  1402.      */
  1403.     public function getDebugInfo(): array
  1404.     {
  1405.         return array (  1071 => 865,  960 => 757,  831 => 631,  826 => 630,  813 => 629,  797 => 622,  787 => 615,  769 => 600,  765 => 599,  757 => 594,  753 => 593,  747 => 590,  735 => 581,  726 => 575,  723 => 574,  707 => 562,  705 => 561,  701 => 560,  677 => 539,  673 => 538,  665 => 533,  661 => 532,  628 => 502,  585 => 462,  572 => 452,  559 => 442,  520 => 406,  512 => 401,  487 => 378,  474 => 377,  99 => 11,  95 => 10,  88 => 6,  84 => 5,  78 => 3,  65 => 2,  42 => 1,);
  1406.     }
  1408.     public function getSourceContext(): Source
  1409.     {
  1410.         return new Source("{% extends '/Accueil/layoutAccueilParents.html.twig' %}
  1411. {% block LinksCss %}
  1412.     {{ parent() }}
  1414.     <link rel=\"stylesheet\" href=\"{{'/css/Parent/css/login.css'}}\" >
  1415.     <link rel=\"stylesheet\" href=\"{{'/css/Parent/css/premiercnx.css'}}\">
  1416.     <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css\">
  1417.      <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css\">
  1419.  <link href=\"{{ asset ('css/bootstrap-social.css')}}\" type=\"text/css\" rel=\"stylesheet\" >
  1420.  <link rel=\"stylesheet\" href=\"{{ asset('css/splide.min.css') }}\">
  1422. <style>
  1423.     .titleProdbienvenu {
  1424.     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  1425. }
  1427. /* Style pour le bouton de retour en haut */
  1428. .scroll-top-btn {
  1429.     position: fixed;
  1430.     bottom: 20px;
  1431.     right: 20px;
  1432.     width: 40px;
  1433.     height: 40px;
  1434.     border-radius: 50%;
  1435.     background-color:#f09e7a;
  1436.     color: white;
  1437.     border: none;
  1438.     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  1439.     z-index: 1000;
  1440.     display: none;
  1441.     cursor: pointer;
  1442.     transition: all 0.3s ease;
  1443. }
  1445. .scroll-top-btn:hover {
  1446.     background-color: #e8865e;
  1447.     transform: translateY(-3px);
  1448. }
  1450. /* Styles pour le loader d'inscription */
  1451. .register-loader {
  1452.     position: fixed;
  1453.     top: 0;
  1454.     left: 0;
  1455.     width: 100%;
  1456.     height: 100%;
  1457.     background-color: rgba(255, 255, 255, 0.9);
  1458.     z-index: 9999;
  1459.     display: none;
  1460.     justify-content: center;
  1461.     align-items: center;
  1462. }
  1464. .loader-content {
  1465.     text-align: center;
  1466.     background-color: white;
  1467.     padding: 30px;
  1468.     border-radius: 10px;
  1469.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  1470.     max-width: 350px;
  1471.     width: 90%;
  1472. }
  1474. .loader-message {
  1475.     margin-top: 20px;
  1476.     font-size: 18px;
  1477.     font-weight: bold;
  1478.     color: #41a2aa;
  1479. }
  1481. .loader-submessage {
  1482.     margin-top: 10px;
  1483.     font-size: 14px;
  1484.     color: #666;
  1485. }
  1487. .spinner-border {
  1488.     width: 3rem;
  1489.     height: 3rem;
  1490.     color: #f09e7a !important;
  1491. }
  1493. /* Styles pour le modal de confirmation */
  1494. .modal {
  1495.     display: flex;
  1496.     align-items: center;
  1497.     justify-content: center;
  1498. }
  1500. .modal-dialog {
  1501.     margin: 0 auto;
  1502.     max-width: 500px;
  1503.     width: 90%;
  1504. }
  1506. .modal-content {
  1507.     border-radius: 10px;
  1508.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  1509.     margin: 0 auto;
  1510. }
  1512. .modal-body {
  1513.     padding: 30px 20px;
  1514. }
  1516. .modal-footer {
  1517.     justify-content: center;
  1518.     padding: 15px;
  1519. }
  1521. .circleModal {
  1522.     background-color: #f09e7a;
  1523.     color: white;
  1524.     border: none;
  1525.     border-radius: 5px;
  1526.     padding: 10px 30px;
  1527.     font-weight: bold;
  1528.     transition: all 0.3s ease;
  1529. }
  1531. .circleModal:hover {
  1532.     background-color: #e8865e;
  1533.     transform: translateY(-2px);
  1534. }
  1536. /* Animation pour le passage au champ suivant */
  1537. .field-complete {
  1538.     transition: all 0.3s ease;
  1539.     border-color: #41a2aa !important;
  1540.     box-shadow: 0 0 5px rgba(65, 162, 170, 0.5) !important;
  1541.     transform: translateY(-2px);
  1542. }
  1544. .form-control:focus {
  1545.     border-color: #f09e7a !important;
  1546.     box-shadow: 0 0 6px rgba(240, 158, 122, 0.5) !important;
  1547.     transition: all 0.3s ease;
  1548. }
  1550. /* Position for password toggle icons */
  1551. .position-relative {
  1552.     position: relative;
  1553.     display: block;
  1554.     width: 100%;
  1555. }
  1557. .field-icon {
  1558.     position: absolute;
  1559.     right: 10px;
  1560.     top: 50%;
  1561.     transform: translateY(-50%);
  1562.     z-index: 10;
  1563.     cursor: pointer;
  1564.     color: #41a2aa;
  1565.     font-size: 14px;
  1566.     pointer-events: auto;
  1567. }
  1569. .field-icon:hover {
  1570.     color: #f09e7a;
  1571. }
  1573. /* Adjust input padding to make room for the icon */
  1574. input[type=\"password\"] {
  1575.     padding-right: 40px;
  1576. }
  1578. /* Updated styles for login forms */
  1579. .form-section {
  1580.     background-color: #fff;
  1581.     padding: 25px;
  1582.     border-radius: 8px;
  1583.     box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  1584.     margin-bottom: 20px;
  1585.     height: 100%;
  1586. }
  1588. .soutitle {
  1589.     color: #333;
  1590.     font-size: 24px;
  1591.     font-weight: bold;
  1592.     margin-bottom: 15px;
  1593.     text-align: center;
  1594. }
  1596. .description2 {
  1597.     color: #666;
  1598.     text-align: center;
  1599.     margin-bottom: 20px;
  1600.     font-size: 14px;
  1601.     line-height: 1.5;
  1602. }
  1604. .form-control {
  1605.     border-radius: 4px;
  1606.     padding: 12px 15px;
  1607.     margin-bottom: 15px;
  1608.     border: 1px solid #ddd;
  1609.     transition: all 0.3s ease;
  1610. }
  1612. .form-control:focus {
  1613.     border-color: #41a2aa !important;
  1614. }
  1616. .logButton {
  1617.     width: 100%;
  1618.     padding: 12px;
  1619.     border-radius: 5px;
  1620.     font-weight: bold;
  1621.     font-size: 16px;
  1622.     margin-top: 10px;
  1623.     transition: all 0.3s ease;
  1624.     border: none;
  1625. }
  1627. .logButton:hover {
  1628.     transform: translateY(-2px);
  1629.     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  1630. }
  1632. .logButtonSocial {
  1633.     display: flex;
  1634.     align-items: center;
  1635.     justify-content: center;
  1636.     width: 100%;
  1637.     padding: 12px;
  1638.     border-radius: 5px;
  1639.     font-weight: bold;
  1640.     margin-top: 15px;
  1641.     text-decoration: none;
  1642.     transition: all 0.3s ease;
  1643. }
  1645. .logButtonSocial:hover {
  1646.     transform: translateY(-2px);
  1647.     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  1648.     text-decoration: none;
  1649. }
  1651. .logButtonSocial img {
  1652.     margin-right: 10px;
  1653.     height: 20px;
  1654. }
  1656. .ou-container {
  1657.     position: relative;
  1658.     height: 100%;
  1659.     display: flex;
  1660.     align-items: center;
  1661.     justify-content: center;
  1662.     min-height: 400px;
  1663. }
  1665. .ou-line {
  1666.     position: absolute;
  1667.     width: 1px;
  1668.     height: 80%;
  1669.     background-color: #ddd;
  1670.     left: 50%;
  1671.     transform: translateX(-50%);
  1672. }
  1674. .ou-text {
  1675.     background-color: white;
  1676.     padding: 10px;
  1677.     position: relative;
  1678.     z-index: 1;
  1679.     color: #666;
  1680.     font-weight: bold;
  1681. }
  1683. /* Desktop layout - both forms visible side by side */
  1684. @media screen and (min-width: 1025px) {
  1685.     #connexionDiv, #inscriptionDiv {
  1686.         display: block !important;
  1687.     }
  1688.     
  1689.     .circleCree {
  1690.         display: none !important;
  1691.     }
  1692.     
  1693.     .ou-container {
  1694.         display: flex !important;
  1695.     }
  1696.     
  1697.     /* Ensure proper column widths */
  1698.     .col-lg-5 {
  1699.         flex: 0 0 41.666667%;
  1700.         max-width: 41.666667%;
  1701.     }
  1702.     
  1703.     .col-lg-1 {
  1704.         flex: 0 0 8.333333%;
  1705.         max-width: 8.333333%;
  1706.     }
  1707. }
  1709. /* Tablet and mobile - one form at a time */
  1710. @media screen and (max-width: 1024px) {
  1711.     #connexionDiv, #inscriptionDiv {
  1712.         width: 100% !important;
  1713.         margin: 0 auto !important;
  1714.         float: none !important;
  1715.     }
  1716.     
  1717.     /* Initially hide the connection form */
  1718.     #connexionDiv {
  1719.         display: none;
  1720.     }
  1721.     
  1722.     /* Make the inscription form visible */
  1723.     #inscriptionDiv {
  1724.         display: block;
  1725.     }
  1726.     
  1727.     /* Hide the OR separator */
  1728.     .ou-container {
  1729.         display: none !important;
  1730.     }
  1731.     
  1732.     /* Make the toggle buttons visible */
  1733.     .circleCree {
  1734.         display: block !important;
  1735.         width: 100% !important;
  1736.         margin: 15px auto !important;
  1737.         padding: 10px !important;
  1738.         background-color: #41a2aa !important;
  1739.         color: white !important;
  1740.         border-radius: 5px !important;
  1741.         border: none !important;
  1742.         cursor: pointer !important;
  1743.         text-align: center !important;
  1744.         font-weight: bold !important;
  1745.     }
  1746.     
  1747.     /* Full width columns on mobile */
  1748.     .col-md-5, .col-sm-5 {
  1749.         width: 100% !important;
  1750.         max-width: 100% !important;
  1751.         flex: 0 0 100% !important;
  1752.     }
  1753.     
  1754.     /* Hide the middle column with the separator */
  1755.     .col-md-1.col-sm-1.col-lg-1.col-xs-1 {
  1756.         display: none !important;
  1757.     }
  1758. }
  1760. /* Forgot password link styling */
  1761. .description a {
  1762.     color: #f09e7a;
  1763.     text-decoration: none;
  1764.     font-weight: bold;
  1765. }
  1767. .description a:hover {
  1768.     text-decoration: underline;
  1769. }
  1771. /* Button container styling */
  1772. .button-container {
  1773.     margin-top: 15px;
  1774.     margin-bottom: 15px;
  1775. }
  1777. /* Social login buttons styling */
  1778. .mobilesocial {
  1779.     margin-top: 10px;
  1780. }
  1782. </style>
  1783. {% endblock %}
  1786. {% block Content %}
  1788.   <!-- Bouton pour remonter en haut de la page -->
  1789.   <button id=\"scrollTopBtn\" class=\"scroll-top-btn\" title=\"Retour en haut\">
  1790.     <i class=\"bi bi-arrow-up\"></i>
  1791.   </button>
  1793.   <!-- Loader pour l'inscription -->
  1794.   <div id=\"registerLoader\" class=\"register-loader\">
  1795.     <div class=\"loader-content\">
  1796.       <div class=\"spinner-border text-primary\" role=\"status\">
  1797.         <span class=\"sr-only\">Chargement...</span>
  1798.                 </div>
  1799.       <p class=\"loader-message\">Création de votre compte en cours...</p>
  1800.       <p class=\"loader-submessage\">Nous préparons votre espace parent 5sur5sejour, merci de patienter.</p>
  1801.                         </div>
  1802.                     </div>
  1804.   <!-- Modal de confirmation -->
  1805.   <div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\" style=\"display: none;\">
  1806.       <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">
  1807.     <div class=\"modal-content\" style=\"border-radius: 10px;\">
  1808.       <div class=\"modal-header border-0\">
  1809.         <button onclick=\"location.reload();\" type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Fermer\" style=\"margin-left: auto;\">
  1810.           <img src=\"{{ asset('images/Groupe_526.svg') }}\" alt=\"Fermer\">
  1811.         </button>
  1812.       </div>
  1813.       <div class=\"modal-body text-center\">
  1814.         <!-- Logo -->
  1815.         <img class=\"imageLogo2\" src=\"{{ asset('Accueil/imagesAccueil/logoHeader.svg') }}\" alt=\"Logo 5sur5séjour\" style=\"max-height: 60px; margin-bottom: 20px;\">
  1817.         <!-- Titre -->
  1818.         <h4 class=\"modal-title font-weight-bold mb-3\" id=\"modalInscriptionLabel\">🎉 Bienvenue sur 5sur5séjour !</h4>
  1820.         <!-- Texte -->
  1821.         <p style=\"font-size: 16px; line-height: 1.5; margin-bottom: 15px;\">
  1822.   Votre compte parent est presque prêt ! Encore une étape pour accéder à l'espace du séjour de votre enfant.
  1823.         </p>
  1825.         <p style=\"font-size: 15px; line-height: 1.5; margin-bottom: 15px;\">
  1826.   📩 Un e-mail vous a été envoyé pour <strong>activer votre compte parent</strong> en toute sécurité.
  1827.         </p>
  1829.         <!-- Bouton -->
  1830.         <div class=\"mt-4\">
  1831.           <button onclick=\"location.reload();\" class=\"btn btn-primary\" style=\"background-color: #41a2aa; border: none; padding: 12px 30px; font-weight: bold; border-radius: 8px; font-size: 16px;\">
  1832.             ✅ Compris, je vais consulter mes e-mails
  1833.           </button>
  1834.         </div>
  1835.       </div>
  1836.     </div>
  1837.   </div>
  1838.     </div>
  1841.     <div class=\"splide no-padding no-margin\" id=\"imageSlider\" style=\"background:white\">
  1842.         <div class=\"splide__track\">
  1843.             <ul class=\"splide__list\">
  1844.                 <!-- Slide 1 -->
  1845.                 <li class=\"splide__slide\">
  1846.                     <div class=\"slider-content\">
  1847.                         <div class=\"namePRD\" style=\"display: block;\">
  1848.                             <h4 class=\"titleProdbienvenu titleProdbienvenu1\" style=\"color: #41a2aa\">Offrez des souvenirs inoubliables à votre enfant </h4>
  1849.                             <h4 class=\"titleProdbienvenu titleProdbienvenu2\" style=\"color:#F09E7A\">avec des cadeaux personnalisés en toute simplicité !</h4>
  1850.                           </div>
  1851.                         <img src=\"{{ asset('/images/3.png') }}\" class=\"imgslider\" alt=\"Image 2\" />
  1852.                     </div>
  1853.                 </li>
  1854.                 <!-- Slide 2 -->
  1855.                 <li class=\"splide__slide\">
  1856.                     <div class=\"slider-content\">
  1857.                         <div class=\"namePRD\" style=\"display: block;\">
  1858.                             <h4 class=\"titleProdbienvenu titleProdbienvenu1\" style=\"color:#F09E7A\">Restez connecté au séjour de votre enfant 24h/24  </h4>
  1859.                             <h4 class=\"titleProdbienvenu titleProdbienvenu2\" style=\"color:#41a2aa\">grâce à des photos partagées en toute sécurité !</h4>
  1860.                           </div>
  1861.                         <img src=\"{{ asset('/images/2.png') }}\" class=\"imgslider\" alt=\"Image 1\" />
  1862.                     </div>
  1863.                 </li>
  1864.                 <!-- Slide 3 -->
  1865.                 <li class=\"splide__slide\">
  1866.                     <div class=\"slider-content\">
  1867.                         <div class=\"namePRD\" style=\"display: block;\">
  1868.                             <h4 class=\"titleProdbienvenu titleProdbienvenu1\" style=\"color: #41a2aa\">Accéder à une boite vocale en illimitée</h4>
  1869.                             <h4 class=\"titleProdbienvenu titleProdbienvenu2\" style=\"color:#F09E7A\">Pour écouter les messages laissés par les enfants et les accompagnateurs</h4>
  1870.                           </div>
  1871.                         <img src=\"{{ asset('/images/1.png') }}\" class=\"imgslider\" alt=\"Image 2\" />
  1872.                     </div>
  1873.                 </li>
  1874.             </ul>
  1875.         </div>
  1876.     </div>
  1878.     <div class='row no-margin' style=\"padding-top:4%\">
  1880.         <div class=\"col-lg-1 col-md-1 col-sm-1 col-xs-1 no-padding SeparateurLeftAccom\"></div>
  1881.         <div class=\"col-md-10 col-sm-10 col-lg-10 col-xs-12 \" >
  1882.          
  1883.         <!-- Bouton caché qui déclenche le modal de confirmation -->
  1884.         <button type=\"button\" id=\"showOkInscription\" class=\"d-none\" data-toggle=\"modal\" data-target=\"#exampleModal\">
  1885.         En savoir plus
  1886.         </button>
  1888.             <div class=\"row no-margin\" style='margin-right: auto;margin-top:15px' id=\"formSection\">
  1890.                 <!-- Inscription Form -->
  1891.                 <div class=\"col-md-5 col-sm-12 col-lg-5 Inscription\" id='inscriptionDiv'>
  1892.                     <form class=\"form-section\" id=\"create\" onsubmit=\"return false;\">
  1893.                         <div class=\"soutitle\"> Créer un compte   </div>
  1894.                     <div class=\"description2\" style=\"padding-top:0px\"> Vous vous connectez pour la 1ère fois et n'avez pas
  1895.                         <br> de compte Parent(s) « 5 sur 5 séjour » </div>
  1896.                         <button type=\"button\" align=\"center\" class=\"circleCree\" onclick=\"AffichDivConnexion();\">Vous avez déjà un compte Parent(s) ? </button>
  1898.                         <div class=\"form-group\">
  1899.                             <input type=\"text\" class=\"form-control\" id=\"nomparent\" placeholder=\"NOM * \" >
  1900.                             <input type=\"text\" class=\"form-control\" id=\"prenomparent\" placeholder=\"PRENOM *\">
  1901.                             <input type=\"text\" autocomplete=\"off\" class=\"form-control\" id=\"mail\" placeholder=\"ADRESSE MAIL\" required data-toggle=\"tooltip\" data-placement=\"right\" title=\"\">
  1902.                             <div class=\"position-relative\">
  1903.                             <input type=\"password\" autocomplete=\"off\" name=\"password\" id=\"Passworduser\" value=\"\" class=\"form-control\" placeholder=\"MOT DE PASSE  * \">
  1904.                                 <i class=\"bi bi-eye field-icon toggle-password\" toggle=\"#Passworduser\"></i>
  1905.                             </div>
  1906.                             <div class=\"position-relative\">
  1907.                             <input type=\"password\" autocomplete=\"off\" name=\"password\" id=\"Passworduser2\" class=\"form-control\" placeholder=\"CONFIRMER VOTRE MOT DE PASSE\">
  1908.                                 <i class=\"bi bi-eye field-icon toggle-password\" toggle=\"#Passworduser2\"></i>
  1909.                             </div>
  1910.                             
  1911.                             <p style=\"display: none; color:red; font-weight: bold; margin-top: 10px;\" id=\"eroor\">Cet email est déjà utilisé. <a href=\"{{ path(\"forgotPassparent\") }}\" style=\"color:#f09e7a; text-decoration: underline;\">Mot de passe oublié ?</a></p>
  1913.                             <input type=\"text\" class=\"form-control\" id=\"num\" name=\"numero de téléphone\" placeholder=\"NUMERO DE TELEPHONE PORTABLE * \">
  1914.                                
  1915.   
  1916.                             <div class=\"row no-margin \">
  1917.                                 <div class=\"souTITRE\">Souhaitez-vous être averti lorsque l'organisateur dépose des images ou des messages du séjour ?</div>
  1918.                             </div>
  1919.                             <br>
  1920.                             <div class=\"row no-margin\">
  1921.                                 <div class=\"box-1\" id=\"smsToggle\">
  1922.                                     <input type='checkbox' name=\"sms\" id=\"smsInput\" />
  1923.                                     <span class=\"toogle\"> </span>
  1924.                                 </div>
  1925.                                 <span class=\"sms\"> Par SMS </span>
  1927.                                 <div class=\"box-1\">
  1928.                                     <input type='checkbox' name=\"mail\" id=\"mailInput\" />
  1929.                                     <span class=\"toogle\" > </span>
  1930.                                 </div>
  1931.                                 <span class=\"mail\"> Par Mail </span>
  1932.                             </div>
  1933.                         </div>
  1934.                         <div class=\"notification\" id=\"notification\" style=\"display: none;\">L'adresse e-mail est incorrecte.</div>
  1935.                         <div class=\"button-container\">
  1936.                         <button type=\"button\" onclick=\"cp();\" class=\"logButton\" style=\"color:#fff;border: 1px solid #f09e7a; position: relative; background-color: #f09e7a;margin-top:-5%;\" id=\"submitBtn\">     
  1937.             S'inscrire
  1938.           </button></div>
  1940.           <div class=\"button-container mobilesocial\">
  1941.             <a href=\"{{ path('connect_google_start') }}\" style=\"color:#fff;background-color:#4F86EC;\" class=\"logButtonSocial\" onclick=\"_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google']);\">
  1942.          <img src=\"{{ asset('/images/icons-google.png') }}\" >Continuer avec Google
  1943.        </a>
  1944.                        
  1945.      </div>
  1946.      <div class=\"mobilesocial\">                  
  1947.                     <a href=\"{{ path('connect_facebook_start') }}\" class=\"logButtonSocial\" style=\"color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)\" >
  1948.                      <img src=\"{{ asset('/images/icons-facebook.png') }}\" > Continuer avec Facebook
  1949.        </a>
  1950.            </div>        
  1951.         </form>
  1952.                 </div>
  1954.                 <!-- OR Separator -->
  1955.                 <div class=\"col-md-1 col-sm-1 col-lg-1 col-xs-1\">
  1956.                     <div class=\"ou-container\">
  1957.                         <div class=\"ou-line\"></div>
  1958.                         <div class=\"ou-text\">OU</div>
  1959.                     </div>
  1960.                 </div>
  1962.                 <!-- Connexion Form -->
  1963.                 <div class=\"col-md-5 col-sm-12 col-lg-5 connexion\" id='connexionDiv'>
  1964.                     <div class=\"form-section\">
  1965.                         <div class=\"soutitle\"> Se connecter </div>
  1966.                         <div class=\"description2\" style=\"padding-top:0px\">Vous avez déja un compte Parent(s) « 5 sur 5 séjour » </div>
  1967.                         <button type=\"button\" align=\"center\" class=\"circleCree\" onclick=\"AffichDivInscri();\">Créer un compte ? </button>
  1969.                         <form method=\"post\" action=\"{{ path('app_back_Parent') }}\" id=\"login-form\">
  1970.                             {% if error %}
  1971.                                 <div class=\"alert alert-danger\">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
  1972.                                 <script>
  1973.                                     document.addEventListener('DOMContentLoaded', function() {
  1974.                                         Swal.fire({
  1975.                                             icon: 'error',
  1976.                                             title: 'Erreur de connexion',
  1977.                                             text: 'Identifiant ou mot de passe incorrect.',
  1978.                                             confirmButtonColor: '#41a2aa'
  1979.                                         });
  1980.                                     });
  1981.                                 </script>
  1982.                             {% endif %}
  1983.                             <div class=\"form-group\">
  1984.                                 <input type=\"text\" name=\"email\" id=\"inputEmail\" value=\"{{ last_username }}\" class=\"form-control\" placeholder=\"Mon identifiant * \" required>
  1985.                                 <div class=\"position-relative\">
  1986.                                     <input type=\"password\" name=\"password\" id=\"inputPassword\" class=\"form-control\" placeholder=\"Mon mot de passe *\" required>
  1987.                                     <span toggle=\"#inputPassword\" class=\"bi bi-eye field-icon toggle-password\"></span>
  1988.                                 </div>
  1989.                                 
  1990.                                 <input type=\"hidden\" name=\"_csrf_token\" value=\"{{ csrf_token('authenticate') }}\">
  1991.                                 <div class=\"button-container\">
  1992.                                     <button type=\"submit\" class=\"logButton\" style=\"color:#fff;background-color:#41a2aa;border-color:rgba(0,0,0,0.2)\" id=\"login-button\">
  1993.              Se connecter 
  1994.           </button>
  1995.         
  1996.                             </div>
  1998.                               
  1999.                             <div class=\"description\"> <a id=\"mdpobli\" href=\"{{ path(\"forgotPassparent\") }}\" style=\"color:#f09e7a ; display: block\">Vous avez oublié votre mot de passe ? </a> </div>
  2001.                             <div class=\"button-container\">
  2002.                <a href=\"{{ path('connect_google_start') }}\" style=\"color:#fff;background-color:#4F86EC;\" class=\"logButtonSocial\" onclick=\"_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google']);\">
  2003.             <img src=\"{{ asset('/images/icons-google.png') }}\" >Continuer avec Google
  2004.           </a>
  2005.                           
  2006.         </div>
  2007.         <div class=\"button-c\" style=\"display: flex; justify-content: center; align-items: center;\">                  
  2008.                        <a href=\"{{ path('connect_facebook_start') }}\" class=\"logButtonSocial\" style=\"color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)\" >
  2009.                         <img src=\"{{ asset('/images/icons-facebook.png') }}\" > Continuer avec Facebook
  2010.           </a>
  2011.               </div>        
  2012.                                 <br>
  2013.                                 <br>
  2014.                             </div>
  2015.                         </form>
  2016.                     
  2017.                     </div>
  2018.                 </div>
  2020.         </div>
  2021.       
  2022.     </div>
  2023.   <div class=\"col-md-3\" style=\"margin-top: 21%;display:none\">
  2024.    <a href=\"{{ path('connect_google_start') }}\" style=\"color:#fff;background-color:#4F86EC;border-color:rgba(0,0,0,0.2)\" class=\"btn btn-block btn-social btn-google\" onclick=\"_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google']);\">
  2025.             <span class=\"fa fa-google\"></span> S'inscrire avec Google
  2026.           </a>
  2027.           
  2028.                           
  2029.                                 <br>
  2030.                                    <br>
  2031.                        <a href=\"{{ path('connect_facebook_start') }}\" class=\"btn btn-block btn-social btn-facebook\" style=\"color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)\" >
  2032.             <span class=\"fa fa-facebook\"></span> S'inscrire avec Facebook
  2033.           </a></div>
  2034.             </div>
  2035. {% endblock %}
  2038. {% block javascript %}
  2039.     {{ parent() }}
  2040.   <script src=\"{{ asset('js/splide.min.js') }}\"></script>
  2041.   <script src=\"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js\"></script>
  2042.     
  2043.     <script>
  2044.         document.addEventListener('DOMContentLoaded', function () {
  2045.     // S'assurer que le modal est caché au chargement de la page
  2046.     \$('#exampleModal').modal('hide');
  2047.     \$('#exampleModal').removeClass('show');
  2048.     \$('#exampleModal').attr('aria-hidden', 'true');
  2049.     \$('body').removeClass('modal-open');
  2050.     \$('.modal-backdrop').remove();
  2051.     
  2052.     // Basic form validation before submission
  2053.     const loginForm = document.getElementById('login-form');
  2054.     if (loginForm) {
  2055.         loginForm.addEventListener('submit', function(e) {
  2056.             const email = document.getElementById('inputEmail').value.trim();
  2057.             const password = document.getElementById('inputPassword').value;
  2058.             
  2059.             if (!email || !password) {
  2060.                 e.preventDefault();
  2061.                 Swal.fire({
  2062.                     icon: 'warning',
  2063.                     title: 'Champs requis',
  2064.                     text: 'Veuillez remplir tous les champs pour vous connecter.',
  2065.                     confirmButtonColor: '#41a2aa'
  2066.                 });
  2067.                 return false;
  2068.             }
  2069.             // If validation passes, form will submit normally to Symfony
  2070.         });
  2071.     }
  2072.     
  2073.     // Gestion du bouton de retour en haut
  2074.     const scrollTopBtn = document.getElementById('scrollTopBtn');
  2075.     
  2076.     window.addEventListener('scroll', function() {
  2077.         if (window.pageYOffset > 300) {
  2078.             scrollTopBtn.style.display = 'block';
  2079.         } else {
  2080.             scrollTopBtn.style.display = 'none';
  2081.         }
  2082.     });
  2083.     
  2084.     scrollTopBtn.addEventListener('click', function() {
  2085.         window.scrollTo({
  2086.             top: 0,
  2087.             behavior: 'smooth'
  2088.         });
  2089.     });
  2090.     
  2091.     // Initialisation du carrousel Splide
  2092.     if (typeof Splide !== 'undefined') {
  2093.         var splide = new Splide('#imageSlider', {
  2094.             type: 'loop',
  2095.             perPage: 1,
  2096.             autoplay: true,
  2097.             interval: 6000,
  2098.             pauseOnHover: false,
  2099.             pauseOnFocus: false,
  2100.             pagination: false,
  2101.             arrows: false  
  2102.         });
  2103.         splide.mount();
  2104.     }
  2106.     // Auto-scroll vers les formulaires après 5 secondes
  2107.     setTimeout(function() {
  2108.         scrollToFormSection();
  2109.     }, 5000);
  2111.     // Configuration du modal de confirmation
  2112.     \$('#exampleModal').modal({
  2113.         backdrop: 'static',
  2114.         keyboard: false,
  2115.         show: false
  2116.     });
  2117.     
  2118.     \$('#exampleModal').on('show.bs.modal', function () {
  2119.         \$(this).css('display', 'flex');
  2120.         \$(this).css('align-items', 'center');
  2121.         \$(this).find('.modal-dialog').css({
  2122.             'display': 'flex',
  2123.             'align-items': 'center',
  2124.             'margin': '0 auto',
  2125.             'max-height': '90vh'
  2126.         });
  2127.     });
  2129.     function scrollToFormSection() {
  2130.         const formSection = document.getElementById('formSection');
  2131.         if (formSection) {
  2132.             const formPosition = formSection.getBoundingClientRect().top + window.scrollY;
  2133.             const headerOffset = 50;
  2134.             const scrollPosition = formPosition - headerOffset;
  2135.             
  2136.             window.scrollTo({
  2137.                 top: scrollPosition,
  2138.                 behavior: 'smooth'
  2139.             });
  2140.         }
  2141.     }
  2142.     
  2143.     // Handle responsive form display
  2144.     handleResponsiveFormDisplay();
  2145.     
  2146.     // Configuration pour le passage automatique au champ suivant
  2147.     setupAutoNextField();
  2148.     
  2149.     // Ajouter la validation en temps réel pour tous les champs
  2150.     setupRealtimeValidation();
  2151. });
  2153.         function cp() {
  2154.            \$('#registerLoader').css('display', 'flex');
  2155.            
  2156.            var loaderTimeout = setTimeout(function() {
  2157.                \$('#registerLoader').css('display', 'none');
  2158.                \$(\"#showOkInscription\").trigger('click');
  2159.            }, 3000);
  2160.           
  2161.             var nomparent = \"\";
  2162.             var prenomparent = \"\";
  2163.             var mail = \"\";
  2164.             var num = \"5555\";
  2165.             var confirmpassword = \$('#Passworduser2').val();
  2166.             var parent_register = \"{{ path('parent_register') }}\";
  2167.             var Passworduser = \"\";
  2168.             \$testDeCreation = false;
  2169.             \$testDeCreation2 = false;
  2170.             \$testDeCreation3 = false;
  2171.             \$testDeCreation4 = false;
  2172.             \$testDeCreation5 = false;
  2173.             
  2174.             if (\$('#nomparent').val() == \"\") {
  2175.                 \$('#nomparent').addClass('is-invalid');
  2176.                 \$('#nomparent').removeClass('is-valid');
  2177.                 \$('#nomparent').css('border', '1px solid red');
  2178.                 \$testDeCreation = false;
  2179.             } else {
  2180.                 \$('#nomparent').removeClass('is-invalid');
  2181.                 \$('#nomparent').addClass('is-valid');
  2182.                 \$('#nomparent').css('border', '1px solid green');
  2183.                nomparent = \$('#nomparent').val();
  2184.                 \$testDeCreation = true;
  2185.             }
  2187.             if (\$('#prenomparent').val() == \"\") {
  2188.                 \$('#prenomparent').addClass('is-invalid');
  2189.                 \$('#prenomparent').removeClass('is-valid');
  2190.                 \$('#prenomparent').css('border', '1px solid red');
  2191.                 \$testDeCreation1 = false;
  2192.             } else {
  2193.                 \$('#prenomparent').removeClass('is-invalid');
  2194.                 \$('#prenomparent').addClass('is-valid');
  2195.                 \$('#prenomparent').css('border', '1px solid green');
  2196.                prenomparent = \$('#prenomparent').val();
  2197.                 \$testDeCreation1 = true;
  2198.             }
  2200.             if (\$('#num').val() == \"\") {
  2201.                 \$('#num ').addClass('is-invalid');
  2202.                 \$('#num').removeClass('is-valid');
  2203.                 \$('#num').css('border', '1px solid red');
  2204.                 \$testDeCreation2 = false;
  2205.             } else {
  2206.                 \$('#num').removeClass('is-invalid');
  2207.                 \$('#num').addClass('is-valid');
  2208.                 \$('#num').css('border', '1px solid green');
  2209.                num = \$('#num').val();
  2210.                 \$testDeCreation2 = true;
  2211.             }
  2213.             if (\$('#mail').val() == \"\") {
  2214.                 \$('#mail').addClass('is-invalid');
  2215.                 \$('#mail').removeClass('is-valid');
  2216.                 \$('#mail').css('border', '1px solid red');
  2217.                 \$testDeCreation3 = false;
  2218.             } else {
  2219.                 \$('#mail').removeClass('is-invalid');
  2220.                 \$('#mail').addClass('is-valid');
  2221.                 \$('#mail').css('border', '1px solid green');
  2222.                 mail = \$('#mail').val();
  2223.                 \$testDeCreation3 = true;
  2224.             }
  2226.             if (\$('#Passworduser').val() == \"\") {
  2227.                 \$('#Passworduser').addClass('is-invalid');
  2228.                 \$('#Passworduser').removeClass('is-valid');
  2229.                 \$('#Passworduser').css('border', '1px solid red');
  2230.                 \$testDeCreation4 = false;
  2231.             } else {
  2232.                 \$('#Passworduser').removeClass('is-invalid');
  2233.                 \$('#Passworduser').addClass('is-valid');
  2234.                 \$('#Passworduser').css('border', '1px solid green');
  2235.                 Passworduser = \$('#Passworduser').val();
  2236.                 \$testDeCreation4 = true;
  2237.             }
  2238.             
  2239.             var sms = 0; var mailnotif = 0;
  2240.             if (\$(\"#smsInput\").is(':checked')) {
  2241.                 var sms = 1;
  2242.             }
  2243.             if (\$(\"#mailInput\").is(':checked')){
  2244.                 var mailnotif = 1;
  2245.             }
  2246.            
  2247.             \$_data = {
  2248.                 'nomparent': nomparent,
  2249.                 'prenomparent': prenomparent,
  2250.                 'mailprent': mail,
  2251.                 'numtel': num,
  2252.                 'passwordparent': Passworduser,
  2253.                 'confirmpassword':confirmpassword,
  2254.                 'sms': sms,
  2255.                 'mailnotif': mailnotif
  2256.             }
  2257.             
  2258.             if (\$testDeCreation && \$testDeCreation1 && \$testDeCreation2 && \$testDeCreation3 && \$testDeCreation4 ) {
  2259.                 \$.ajax({
  2260.                     type: \"POST\",
  2261.                     url: parent_register,
  2262.                     data: \$_data,
  2263.                     success: function (\$response) {
  2264.                         \$('#registerLoader').css('display', 'none');
  2265.                         clearTimeout(loaderTimeout);
  2266.                         
  2267.                         if (\$response == 'eror') {
  2268.                             \$('#mail').css('border-color', 'red');
  2269.                             \$('#eroor').css('display', 'block');
  2270.                             Swal.fire({
  2271.                                 icon: 'error',
  2272.                                 title: 'Email déjà utilisé',
  2273.                                 text: 'Cette adresse email est déjà associée à un compte.',
  2274.                                 footer: '<a href=\"{{ path(\"forgotPassparent\") }}\" style=\"color:#f09e7a;\">Mot de passe oublié ?</a>',
  2275.                                 showCancelButton: true,
  2276.                                 confirmButtonText: 'Se connecter',
  2277.                                 cancelButtonText: 'Modifier',
  2278.                                 confirmButtonColor: '#41a2aa',
  2279.                                 cancelButtonColor: '#f09e7a',
  2280.                                 position: 'center'
  2281.                             }).then((result) => {
  2282.                                 if (result.isConfirmed) {
  2283.                                     AffichDivConnexion();
  2284.                                     \$('#inputEmail').val(\$('#mail').val());
  2285.                                     \$('#inputPassword').focus();
  2286.                                 }
  2287.                             });
  2288.                         }
  2289.                         else if(\$response == 'erorpasswordconfirm') {
  2290.                               \$('#Passworduser2').css('border-color', 'red');
  2291.                                 Swal.fire({
  2292.                                 icon: 'error',
  2293.                                 title: 'Oups..!',
  2294.                                 text: 'Les mots de passe ne se correspondent pas.',
  2295.                                 footer: '',
  2296.                                 position: 'center'
  2297.                             })
  2298.                         }
  2299.                          else {
  2300.                             \$(\"#showOkInscription\").trigger('click');
  2301.                             resetForm();
  2302.                             
  2303.                             \$('#exampleModal').on('shown.bs.modal', function () {
  2304.                                 \$(this).find('.modal-dialog').css({
  2305.                                     'margin-top': function () {
  2306.                                         return (\$(window).height() - \$(this).height()) / 2;
  2307.                                     }
  2308.                                 });
  2309.                             });
  2310.                               var windowWidth = document.documentElement.clientWidth;
  2311.                                 if (windowWidth <= 560) {
  2312.                                     setTimeout(function(){
  2313.                                    location.reload();
  2314.                               },500);
  2315.                            }
  2316.                         }
  2317.                     },
  2318.                     error: function() {
  2319.                         \$('#registerLoader').css('display', 'none');
  2320.                         clearTimeout(loaderTimeout);
  2321.                         
  2322.                         Swal.fire({
  2323.                             icon: 'error',
  2324.                             title: 'Erreur de connexion',
  2325.                             text: 'Un problème est survenu lors de l\\'inscription. Veuillez réessayer.',
  2326.                             confirmButtonColor: '#f09e7a',
  2327.                             position: 'center'
  2328.                         });
  2329.                     }
  2330.                 })
  2331.             } else {
  2332.                 \$('#registerLoader').css('display', 'none');
  2333.                 clearTimeout(loaderTimeout);
  2334.             }
  2335.         }
  2337.         function AffichDivConnexion() {
  2338.             \$(\"#inscriptionDiv\").css(\"display\", \"none\");
  2339.             \$(\"#connexionDiv\").css(\"display\", \"block\");
  2340.         }
  2342.         function AffichDivInscri() {
  2343.             \$(\"#inscriptionDiv\").css(\"display\", \"block\");
  2344.             \$(\"#connexionDiv\").css(\"display\", \"none\");
  2345.         }
  2347.         function handleResponsiveFormDisplay() {
  2348.             var windowWidth = \$(window).width();
  2349.             
  2350.             if (windowWidth <= 1024) {
  2351.                 if (\$(\"#inscriptionDiv\").is(':visible')) {
  2352.                     \$(\"#connexionDiv\").css(\"display\", \"none\");
  2353.                 } else {
  2354.                     \$(\"#inscriptionDiv\").css(\"display\", \"none\");
  2355.                     \$(\"#connexionDiv\").css(\"display\", \"block\");
  2356.                 }
  2357.                 \$(\".circleCree\").css(\"display\", \"block\");
  2358.             } else {
  2359.                 \$(\"#connexionDiv\").css(\"display\", \"block\");
  2360.                 \$(\"#inscriptionDiv\").css(\"display\", \"block\");
  2361.                 \$(\".circleCree\").css(\"display\", \"none\");
  2362.             }
  2363.         }
  2365.         \$(window).resize(function() {
  2366.             handleResponsiveFormDisplay();
  2367.         });
  2369.         function setupAutoNextField() {
  2370.             const formFields = [
  2371.                 'nomparent',
  2372.                 'prenomparent',
  2373.                 'mail',
  2374.                 'Passworduser',
  2375.                 'Passworduser2',
  2376.                 'num'
  2377.             ];
  2378.             
  2379.             formFields.forEach((field, index) => {
  2380.                 if (index < formFields.length - 1) {
  2381.                     const \$currentField = \$('#' + field);
  2382.                     let typingTimer;
  2383.                     const doneTypingInterval = 1500;
  2384.                     
  2385.                     \$currentField.on('input', function() {
  2386.                         clearTimeout(typingTimer);
  2387.                         
  2388.                         if (event && event.data === ' ' && isFieldValid(field, \$(this).val().trim())) {
  2389.                             event.preventDefault();
  2390.                             \$('#' + formFields[index + 1]).focus();
  2391.                             return;
  2392.                         }
  2393.                         
  2394.                         if (\$(this).val()) {
  2395.                             typingTimer = setTimeout(function() {
  2396.                                 if (isFieldValid(field, \$currentField.val().trim())) {
  2397.                                     \$('#' + formFields[index + 1]).focus();
  2398.                                 }
  2399.                             }, doneTypingInterval);
  2400.                         }
  2401.                     });
  2402.                     
  2403.                     \$currentField.on('keydown', function(e) {
  2404.                         clearTimeout(typingTimer);
  2405.                         
  2406.                         if (e.key === ' ' && isFieldValid(field, \$(this).val().trim())) {
  2407.                             e.preventDefault();
  2408.                             \$('#' + formFields[index + 1]).focus();
  2409.                             return;
  2410.                         }
  2411.                         
  2412.                         if (e.key === 'Tab' && !e.shiftKey) {
  2413.                             return true;
  2414.                         }
  2415.                         
  2416.                         if (e.key === 'Enter') {
  2417.                             e.preventDefault();
  2418.                             \$('#' + formFields[index + 1]).focus();
  2419.                         }
  2420.                     });
  2421.                     
  2422.                     \$currentField.on('blur', function() {
  2423.                         clearTimeout(typingTimer);
  2424.                     });
  2425.                 }
  2426.             });
  2427.             
  2428.             \$('#' + formFields[formFields.length - 1]).on('keydown', function(e) {
  2429.                 if (e.key === 'Enter') {
  2430.                     e.preventDefault();
  2431.                     cp();
  2432.                 }
  2433.             });
  2434.         }
  2436.         function isFieldValid(fieldId, value) {
  2437.             switch(fieldId) {
  2438.                 case 'mail':
  2439.                     const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}\$/;
  2440.                     return emailRegex.test(value);
  2441.                 case 'Passworduser':
  2442.                     return value.length >= 6;
  2443.                 case 'Passworduser2':
  2444.                     return value === \$('#Passworduser').val() && value.length >= 6;
  2445.                 case 'num':
  2446.                     const phoneRegex = /^[0-9]{8,}\$/;
  2447.                     return phoneRegex.test(value.replace(/\\s+/g, ''));
  2448.                 case 'nomparent':
  2449.                 case 'prenomparent':
  2450.                     const nameRegex = /^[A-Za-zÀ-ÖØ-öø-ÿ\\s'-]{2,}\$/;
  2451.                     return nameRegex.test(value);
  2452.                 default:
  2453.                     return value.length >= 2;
  2454.             }
  2455.         }
  2457.         function hideshow() {
  2458.             document.getElementById(\"btnn\").disabled = true;
  2459.             \$(\"#btnn\").css(\"background-color\", \"#ecf0f1\");
  2460.             \$(\"#mdpobli\").css(\"display\", \"none\");
  2461.             \$(\"#mdpoblier\").css(\"display\", \"block\");
  2462.         }
  2463.     </script>
  2464.    
  2466.    <script>
  2467.     \$(\".toggle-password\").click(function() {
  2468.         \$(this).toggleClass(\"bi-eye bi-eye-slash\");
  2469.         var input = \$(\$(this).attr(\"toggle\"));
  2470.         if (input.attr(\"type\") == \"password\") {
  2471.           input.attr(\"type\", \"text\");
  2472.         } else {
  2473.           input.attr(\"type\", \"password\");
  2474.         }
  2475.     });
  2477.     \$(document).ready(function(){
  2478.         \$('[data-toggle=\"tooltip\"]').tooltip({
  2479.             trigger: 'manual',
  2480.             html: true,
  2481.             template: '<div class=\"tooltip\" role=\"tooltip\"><div class=\"arrow\"></div><div class=\"tooltip-inner\"></div></div>'
  2482.         });
  2484.         function validateEmail(email) {
  2485.             const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}\$/;
  2486.             return re.test(String(email).toLowerCase());
  2487.         }
  2489.         \$('#mail').on('input', function() {
  2490.             var emailInput = \$(this);
  2491.             if (validateEmail(emailInput.val())) {
  2492.                 emailInput.removeClass('is-invalid');
  2493.                 emailInput.addClass('is-valid');
  2494.                 emailInput.tooltip('dispose');
  2495.                 \$('#notification').hide();
  2496.                 \$('#submitBtn').prop('disabled', false);
  2497.             } else {
  2498.                 emailInput.removeClass('is-valid');
  2499.                 emailInput.addClass('is-invalid');
  2500.                 
  2501.                 if (emailInput.val().length > 3) {
  2502.                     emailInput.attr('data-original-title', 'Votre adresse mail est incorrecte. Exemple: nom@domaine.com').tooltip('show');
  2503.                     if (emailInput.val().length > 0) {
  2504.                         \$('#notification').show();
  2505.                     }
  2506.                 } else {
  2507.                     \$('#notification').hide();
  2508.                 }
  2509.                 \$('#submitBtn').prop('disabled', false);
  2510.             }
  2511.         });
  2512.     });
  2513. </script>
  2514. <script>
  2515. function setupRealtimeValidation() {
  2516.     const formFields = [
  2517.         'nomparent',
  2518.         'prenomparent',
  2519.         'mail',
  2520.         'Passworduser',
  2521.         'Passworduser2',
  2522.         'num'
  2523.     ];
  2524.     
  2525.     formFields.forEach(field => {
  2526.         \$('#' + field).on('input', function() {
  2527.             const value = \$(this).val();
  2528.             
  2529.             if (value.length === 0) {
  2530.                 \$(this).removeClass('is-valid is-invalid');
  2531.                 \$(this).css('border', '1px solid #ced4da');
  2532.                 return;
  2533.             }
  2534.             
  2535.             if (isFieldValid(field, value)) {
  2536.                 \$(this).removeClass('is-invalid').addClass('is-valid');
  2537.                 \$(this).css('border', '1px solid #28a745');
  2538.             } else {
  2539.                 \$(this).removeClass('is-valid').addClass('is-invalid');
  2540.                 \$(this).css('border', '1px solid #dc3545');
  2541.             }
  2542.         });
  2543.     });
  2544. }
  2546. function resetForm() {
  2547.     \$('#nomparent').css('border','1px solid #41a2aa');
  2548.     \$('#nomparent').removeClass('is-valid'); 
  2549.     \$('#nomparent').removeClass('is-invalid'); 
  2550.     \$('#nomparent').val(''); 
  2551.     \$('#prenomparent').css('border','1px solid #41a2aa');
  2552.     \$('#prenomparent').removeClass('is-valid'); 
  2553.     \$('#prenomparent').removeClass('is-invalid'); 
  2554.     \$('#prenomparent').val(''); 
  2555.     \$('#mail').css('border','1px solid #41a2aa');
  2556.     \$('#mail').removeClass('is-valid'); 
  2557.     \$('#mail').removeClass('is-invalid'); 
  2558.     \$('#mail').val(''); 
  2559.     \$('#eroor').css('display','none');
  2560.     \$('#num').css('border','1px solid #41a2aa');
  2561.     \$('#num').removeClass('is-valid'); 
  2562.     \$('#num').removeClass('is-invalid'); 
  2563.     \$('#num').val(''); 
  2564.     \$('#Passworduser').css('border','1px solid #41a2aa');
  2565.     \$('#Passworduser').removeClass('is-valid'); 
  2566.     \$('#Passworduser').removeClass('is-invalid');
  2567.     \$('#Passworduser').val('');  
  2568.     \$('#Passworduser2').css('border','1px solid #41a2aa');
  2569.     \$('#Passworduser2').removeClass('is-valid'); 
  2570.     \$('#Passworduser2').removeClass('is-invalid'); 
  2571.     \$('#Passworduser2').val(''); 
  2572.     \$(\"#smsInput\").prop(\"checked\",false);
  2573.     \$(\"#mailInput\").prop(\"checked\",false);
  2574. }
  2575. </script>
  2576. {% endblock %}
  2577. ", "Parent/LoginParent.html.twig", "/var/www/5sur5sejour/templates/Parent/LoginParent.html.twig");
  2578.     }
  2579. }