templates/security/forgot_password.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Authentification</title>
  7. <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  8. <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  9. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  10. <style>
  11.     {# html, body {
  12.         background-color: rgb(122, 163, 185);
  13.     } #}
  14. html, body {
  15.     height: 100%;
  16.     margin: 0;
  17.     padding: 0;
  18. }
  20. body {
  21.     position: relative;
  22.         /*background: url('/img/bg2.png') no-repeat center center fixed;/*ancienne bgcanva3.png*/
  23.     background-size: cover;
  24. }
  26. body::before {
  27.     content: "";
  28.     position: absolute;
  29.     top: 0;
  30.     left: 0;
  31.     width: 100%;
  32.     height: 100%;
  33.     background-color: rgba(201, 239, 255, 0.5); /* Couche blanche semi-transparente */
  34.     z-index: -1;
  35. }
  37.     body {
  38.         font-family: "Poppins", sans-serif;
  39.         height: 100vh;
  40.     }
  42.     a {
  43.         color: #123c59;
  44.         display: inline-block;
  45.         text-decoration: none;
  46.         font-weight: 400;
  47.     }
  49.     h2 {
  50.         text-align: center;
  51.         font-size: 16px;
  52.         font-weight: 600;
  53.         text-transform: uppercase;
  54.         display: inline-block;
  55.         margin: 40px 8px 10px 8px;
  56.         color: #cccccc;
  57.     }
  59.     .wrapper {
  60.         display: flex;
  61.         align-items: center;
  62.         flex-direction: column;
  63.         justify-content: center;
  64.         width: 100%;
  65.         min-height: 100%;
  66.         padding: 20px;
  67.     }
  69.     #formContent {
  70.         border-radius: 10px;
  71.         background: #fff;
  72.         width: 90%;
  73.         max-width: 600px;
  74.         position: relative;
  75.         padding: 30px 30px 30px 30px;
  76.         box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  77.         text-align: center;
  78.     }
  80.     #formTitle {
  81.         background-color: #f6f6f6;
  82.         border-top: 1px solid #dce8f1;
  83.         padding: 25px;
  84.         text-align: center;
  85.         border-radius: 0 0 10px 10px;
  86.     }
  88.     input[type=button], input[type=submit], input[type=reset] {
  89.         background-color:#123c59;
  90.         border: none;
  91.         color: white;
  92.         padding: 15px 40px;
  93.         text-align: center;
  94.         text-decoration: none;
  95.         display: inline-block;
  96.         text-transform: uppercase;
  97.         font-size: 13px;
  98.         box-shadow: 0 10px 30px 0 rgba(95, 186, 233, 0.4);
  99.         border-radius: 5px;
  100.         margin: 5px 20px 40px 20px;
  101.         transition: all 0.3s ease-in-out;
  102.     }
  104.     input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
  105.         background-color:rgb(124, 168, 191);
  106.     }
  108.     input[type=text], input[type=password],input[type=email] {
  109.         background-color: #f6f6f6;
  110.         border: none;
  111.         color: #0d0d0d;
  112.         padding: 15px 32px;
  113.         text-align: center;
  114.         text-decoration: none;
  115.         display: inline-block;
  116.         font-size: 16px;
  117.         margin: 5px;
  118.         width: 85%;
  119.         border: 2px solid #f6f6f6;
  120.         transition: all 0.5s ease-in-out;
  121.         border-radius: 5px;
  122.     }
  124.     input[type=text]:focus, input[type=password]:focus {
  125.         background-color: #fff;
  126.         border-bottom: 2px solid rgb(124, 168, 191);
  127.     }
  129.     .fadeInDown {
  130.         animation: fadeInDown 1s both;
  131.     }
  133.     @keyframes fadeInDown {
  134.         0% {
  135.             opacity: 0;
  136.             transform: translate3d(0, -100%, 0);
  137.         }
  138.         100% {
  139.             opacity: 1;
  140.             transform: none;
  141.         }
  142.     }
  144.     *:focus {
  145.         outline: none;
  146.     }
  148.     @media only screen and (max-width: 767px) {
  149.         .logo {
  150.             font-size: 34px;
  151.         }
  152.     }
  153. .sinscrire {
  154.     text-transform: uppercase;
  155.     font-size: 12px;
  156.     border-radius: 15px;
  157.     transition: all 0.3s ease-in-out;
  158.     border: 1px solid #1ec6cc;
  159.     color: white;
  160.     padding: 10px 20px;
  161.     font-weight: bold;
  162.     background-image: linear-gradient(45deg, #1ec6cc, #123c59);
  163. }
  165. .sinscrire:hover {
  166.     background-image: linear-gradient(45deg, #123c59, #1ec6cc);
  167. }
  168.     .reset-title {
  169.         font-size: 1.5rem; /* taille lisible */
  170.         font-weight: 600;  /* semi-gras moderne */
  171.         color: #2c3e50; /* gris foncé élégant */
  172.         position: relative;
  173.         display: inline-block;
  174.         padding-bottom: 8px;
  175.     }
  177.     .reset-title::after {
  178.         content: "";
  179.         position: absolute;
  180.         left: 50%;
  181.         bottom: 0;
  182.         transform: translateX(-50%);
  183.         width: 60px;
  184.         height: 3px;
  185.         background: linear-gradient(90deg,#1eb6cc;, #123c59);
  186.         border-radius: 2px;
  187.     }
  188.         .logo-img{
  189.             margin-bottom:20px;
  190.             width:80%;
  191.         }
  192.         .logo-bar {
  193.             width: 100%;
  194.             padding: 5px 0;
  195.             gap: 8px; /* espace réduit entre les images */
  196.         }
  198.         .logo-mini {
  199.             height: 30px;  /* si tu veux garder 35px, laisse 35px */
  200.             width: auto;
  201.             margin: 0px 3px; /* TRÈS petit espace horizontal */
  202.             object-fit: contain;
  203.         }
  204.         /* Version mobile : 2 logos par ligne */
  205.         @media (max-width: 768px) {
  206.             .logo-bar {
  207.                 justify-content: center !important;
  208.             }
  209.             .logo-mini {
  210.                 flex: 1 1 40%;
  211.                 max-width: 60%;
  212.             }
  213.         }
  216.     </style>
  217. </head>
  218. <body>
  219.     <div class="wrapper fadeInDown">
  220.             <!-- LIGNE DES 5 LOGOS RESPONSIVE -->
  221.         <div class="logo-bar d-flex justify-content-center align-items-center flex-wrap mb-3">
  222.             <img src="/img/telecontact.png" class="logo-mini" alt="logo1">
  223.             <img src="/img/kompass.png" class="logo-mini" alt="logo2">
  224.             <img src="/img/medicalis.png" class="logo-mini" alt="logo3">
  225.             <img src="/img/sitecontact.png" class="logo-mini" alt="logo4">
  226.             <img src="/img/E-rdv.png" class="logo-mini" alt="logo5">
  227.         </div>
  229.         <div id="formContent">
  230.         <h3 class="text-center mb-4 reset-title">Recevez un lien de réinitialisation par email</h3>
  231.         <form method="post" action="{{ path('forgot_password') }}">
  232.             <div class="input-group mb-3">
  233.             <input type="email" name="email" placeholder="Votre email" required class="form-control mb-3">
  234.             </div>
  236.             <button type="submit" class="btn sinscrire w-25">Envoyer</button>
  238.             {% for message in app.flashes('success') %}
  239.                 <div class="alert alert-success mt-2">{{ message }}</div>
  240.             {% endfor %}
  241.             {% for message in app.flashes('error') %}
  242.                 <div class="alert alert-danger mt-2">{{ message }}</div>
  243.             {% endfor %}
  244.         </form>
  246.     </div>
  247. </div>
  248. </body>
  249. </html>