templates/front/connexion.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr" class="h-100">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
  8.     <title>Connexion</title>
  9.     <style>
  11.         @font-face {
  12.             font-family: 'Goldman';
  13.             font-style: normal;
  14.             font-weight: 400;
  15.             src: local('Goldman'), url('https://fonts.cdnfonts.com/s/46601/Goldman-Regular.woff') format('woff');
  16.         }
  17.         @font-face {
  18.             font-family: 'Goldman';
  19.             font-style: normal;
  20.             font-weight: 700;
  21.             src: local('Goldman'), url('https://fonts.cdnfonts.com/s/46601/Goldman-Bold.woff') format('woff');
  22.         }
  23.         @font-face {
  24.             font-family: 'Nunito';
  25.             font-style: normal;
  26.             font-weight: 400;
  27.             src: local('Nunito'), url('https://fonts.cdnfonts.com/s/15604/Nunito-Regular.woff') format('woff');
  28.         }
  29.         @font-face {
  30.             font-family: 'Nunito';
  31.             font-style: normal;
  32.             font-weight: 700;
  33.             src: local('Nunito'), url('https://fonts.cdnfonts.com/s/15604/Nunito-Bold.woff') format('woff');
  34.         }
  36.         .h-100vh {
  37.             min-height: 100vh;
  38.         }
  40.         #diapo1 {
  41.             background-image: url("images/front/3Page-DS-login-img-left-side.jpg");
  42.         }
  44.         #diapo2 {
  45.             background-image: url("images/front/3Page-DS-login-img-right-side.jpg");
  46.         }
  48.         #diapo1, #diapo2 {
  49.             background-size: 100% 100%;
  50.         }
  52.         .Rectangle-32 {
  53.             border-radius: 40px;
  54.             border: solid 2px #065285;
  55.             background-color: #bfd119;
  56.             width: 60%;
  57.             max-width: 410px;
  58.         }
  60.         label.required {
  61.             padding: 0;
  62.         }
  64.         input[type=text], input[type=password] {
  65.             border: solid 1px #065285;
  66.             border-radius: unset;
  67.         }
  69.         label.required {
  70.             font-size: 23px;
  71.             font-weight: bold;
  72.             color: #06003b;
  73.         }
  75.         .connectBtn {
  76.             background-color: #065285;
  77.             color: #c0d119;
  78.             font-family: Nunito;
  79.             font-size: 23px;
  80.             border-radius: 17px;
  81.             font-weight: bold;
  82.         }
  83.         
  84.     </style>
  85. </head>
  86. <body class="h-100vh">
  88.     <div class="container-fluid">
  89.         <div class="row h-100vh row-cols-1 row-cols-md-2">
  90.             <div id="diapo1" class="col h-100vh">&nbsp;</div>
  91.             <div id="diapo2" class="col h-100vh position-relative">
  92.                 <div class="Rectangle-32 position-absolute top-50 start-50 translate-middle text-white p-5">
  93.                     {% for message in app.flashes('adios') %}
  94.                         <div class="alert alert-success">
  95.                             {{ message }}
  96.                         </div>
  97.                     {% endfor %}
  98.                     
  99.     
  100.                     {% if error %}
  101.                     <div class="alert alert-danger">
  102.                         {{error.messageKey | trans(error.messagedata, 'security')}}
  103.                     </div>
  104.                     {% endif %}
  106.                     <form method="POST">
  107.                         <div class="row m-0 mb-3">
  108.                             <label class="required col-12 col-sm">Login 
  109.                                 <input type="text" required name="_username" class="form-control" value="{{lastUserName}}">
  110.                             </label>
  111.                         </div>
  112.                         <div class="row m-0 mb-3">
  113.                             <label class="required col-12 col-sm">Password 
  114.                                 <input type="password" required name="_password" class="form-control">
  115.                             </label>
  116.                         </div>
  117.                         <div class="m-0 mt-5 px-4">
  118.                             <input type="submit" class="btn connectBtn text-break w-100 py-2" value="Connexion">
  119.                         </div>
  120.                     </form>
  121.                 </div>
  122.             </div>
  123.         </div>
  124.     </div>
  126.     <!-- Option 1: Bootstrap Bundle with Popper -->
  127.     <!-- Option 2: Separate Popper and Bootstrap JS -->
  128.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"></script>
  130. </body>
  131. </html>