diff --git a/templates/index.html b/templates/index.html index ee1d71d4eabdcacc7268b6d5abba9c25c3ef8f9f..433f30c12d1759a161a00a0618f8abc777df8b16 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,4 +1,3 @@ - <!DOCTYPE html> <html lang="fr"> <head> @@ -29,14 +28,36 @@ label { font-size: 16px; font-weight: bold; + display: block; + margin-bottom: 5px; + } + .input-container { + position: relative; + width: 100%; } input { width: 100%; padding: 10px; + padding-right: 40px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; + 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; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + color: #555; + font-size: 18px; } button { background-color: #007bff; @@ -64,12 +85,26 @@ <h1>Testez la force de votre mot de passe 🔒</h1> <form method="POST"> <label for="password">Mot de passe :</label> - <input type="password" id="password" name="password" required> + <div class="input-container"> + <input type="password" id="password" name="password" required> + <span class="toggle-password" onclick="togglePassword()">👁️</span> + </div> <button type="submit">Tester</button> </form> <div class="result"> {{ result }} </div> </div> + + <script> + function togglePassword() { + var passwordInput = document.getElementById("password"); + if (passwordInput.type === "password") { + passwordInput.type = "text"; + } else { + passwordInput.type = "password"; + } + } + </script> </body> </html>