WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
senha
474
mambetov1237.b
Abrir no Editor
Publique Seu Código
Recomendado
30 June 2025
Formulário de inscrição em HTML com e-mail e senha
21 December 2024
login senha
5 July 2025
Painel de login moderno com borda animada e redefinição de senha do TheDoc
HTML
Copy
Document
Password Strength Checker
Strength:
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #121212; color: #ffff; } .container { text-align: center; background-color: #333; padding: 30px; border-radius: 15px; box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1); max-width: 400px; width: 100%; } h1 { font-size: 24px; margin-bottom: 20px; color: #fff; } input { width: 100%; padding: 12px; margin-bottom: 20px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; background-color: #222; color: #fff; } .Strength-bar-container { width: 100%; height: 10px; background-color: #444; border-radius: 5px; margin-top: 10px; } .Strength-bar { height: 100%; width: 0; border-radius: 5px; transition: width 0.3s ease; } .strength-message { font-weight: bold; margin-top: 10px; } .strength-weak { color: red; } .strength-medium { color: yellow; } .strength-strong { color: green; } .strength-none { color: white; }<!-- Replace with your HTML Code (Leave empty if not needed) -->
JS
Copy
const passwordInput = document.getElementById("passwordInput"); const strengthMessage = document.getElementById("strength"); const strengthBar = document.getElementById("strengthBar"); passwordInput.addEventListener("input", () => { const password = passwordInput.value; let strength = "weak"; let color = "#ff4d4d"; let width = "30%"; if ( password.length > 8 && /[A-Z]/.test(password) && /[0-9]/.test(password) && /[^A-Za-z0-9]/.test(password) ) { strength = "strong"; color = "#32cd32"; width = "1005"; } else if ( password.length > 5 && (/[A-Z]/.test(password) || /[^A-Za-z0-9]/.test(password)) ) { strength = "Medium"; color = "#ffa500"; width = "60%"; } strengthMessage.textContent = `Strength $(strength)`; strengthMessage.style.color = color; strengthBar.style.width = width; strengthBar.style.backgroundColor = color; });/* Replace with your JS Code (Leave empty if not needed) */