Hacker-Themed Password Validator with Neon Glow | JavaScript, HTML & CSS.

<style>
body {
    font-family: 'Share Tech Mono', monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: black;
    color: #00ff00;
}
.container {
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px #00ff00;
}
.password-field {
    position: relative;
}
input {
    width: 100%;
    max-width: 90%;
    padding: 10px;
    border: 2px solid #00ff00;
    border-radius: 5px;
    outline: none;
    background: black;
    color: #00ff00;
    font-size: 16px;
    text-align: center;
    box-shadow: 0 0 15px #00ff00;
    transition: box-shadow 0.3s ease-in-out;
}
input:focus {
    box-shadow: 0 0 25px #00ff00;
}
.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #00ff00;
    transition: transform 0.3s ease-in-out;
}
.toggle-password:hover {
    transform: translateY(-50%) scale(1.2);
}
.criteria {
    list-style: none;
    padding: 0;
}
.criteria li {
    display: flex;
    align-items: center;
    margin: 5px 0;
}
.criteria i {
    margin-right: 8px;
    transition: color 0.3s ease-in-out;
}
.valid {
    color: #00ff00;
}
.invalid {
    color: #ff0000;
}
   
</style>

<scripte>

        const passwordInput = document.getElementById("password");
        const togglePassword = document.getElementById("togglePassword");
        const criteria = {
            length: document.getElementById("length"),
            uppercase: document.getElementById("uppercase"),
            lowercase: document.getElementById("lowercase"),
            number: document.getElementById("number"),
            symbol: document.getElementById("symbol")
        };

        passwordInput.addEventListener("input", () => {
            const value = passwordInput.value;
            criteria.length.className = value.length >= 8 ? "fa fa-check valid" : "fa fa-times invalid";
            criteria.uppercase.className = /[A-Z]/.test(value) ? "fa fa-check valid" : "fa fa-times invalid";
            criteria.lowercase.className = /[a-z]/.test(value) ? "fa fa-check valid" : "fa fa-times invalid";
            criteria.number.className = /[0-9]/.test(value) ? "fa fa-check valid" : "fa fa-times invalid";
            criteria.symbol.className = /[!@#$%^&*(),.?":{}|<>]/.test(value) ? "fa fa-check valid" : "fa fa-times invalid";
        });

        togglePassword.addEventListener("click", () => {
            if (passwordInput.type === "password") {
                passwordInput.type = "text";
                togglePassword.classList.remove("fa-eye");
                togglePassword.classList.add("fa-eye-slash");
            } else {
                passwordInput.type = "password";
                togglePassword.classList.remove("fa-eye-slash");
                togglePassword.classList.add("fa-eye");
            }
        });
 
</scripte?