Edit index.html

templates/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Test de Force de Mot de Passe</title>
     <style>
+        /* Style général */
         body {
             font-family: Arial, sans-serif;
             background-color: #f4f4f4;
@@ -14,6 +15,7 @@
             height: 100vh;
             margin: 0;
         }
+
         .container {
             background: white;
             padding: 20px;
@@ -21,35 +23,44 @@
             box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
             text-align: center;
             width: 350px;
+            box-sizing: border-box; /* S'assurer que la largeur ne dépasse pas */
         }
+
         h1 {
             color: #333;
         }
+
         label {
             font-size: 16px;
             font-weight: bold;
             display: block;
             margin-bottom: 5px;
         }
+
         .input-container {
             position: relative;
             width: 100%;
         }
+
+        /* Ajout de box-sizing */
         input {
             width: 100%;
             padding: 10px;
-            padding-right: 40px;
+            padding-right: 40px; /* Laisser de l'espace pour l'icône */
             margin: 10px 0;
             border: 1px solid #ccc;
             border-radius: 5px;
             font-size: 16px;
+            box-sizing: border-box; /* Important pour que les bordures et le padding ne fassent pas dépasser l'élément */
             transition: all 0.3s;
         }
+
         input:focus {
             border-color: #007bff;
             box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.5);
             outline: none;
         }
+
         .toggle-password {
             position: absolute;
             right: 10px;
@@ -59,6 +70,7 @@
             color: #555;
             font-size: 18px;
         }
+
         button {
             background-color: #007bff;
             color: white;
@@ -68,10 +80,13 @@
             cursor: pointer;
             font-size: 16px;
             width: 100%;
+            box-sizing: border-box; /* S'assurer que le bouton reste bien dans le conteneur */
         }
+
         button:hover {
             background-color: #0056b3;
         }
+
         .result {
             margin-top: 15px;
             font-size: 18px;