Detalii Tehnice

Un sistem modern de Login și Înregistrare care utilizează efectul de sticlă mată (glassmorphism). Este complet responsiv și include logică de comutare între formulare fără reîncărcarea paginii, fiind optimizat pentru integrarea cu fluxuri de backend (PHP, Node.js, Python).

Acest sistem este conceput pentru a oferi o experiență de utilizator (UX) premium. Folosește variabile CSS pentru mentenanță ușoară și un script JavaScript minimalist pentru manipularea DOM-ului.

Mai jos găsești structura fragmentată pe limbaje:

Codul HTML

Acesta definește containerele pentru cele două stări. Asigură-te că păstrezi clasele .login-link și .register-link pentru ca scriptul de comutare să funcționeze.

Codul CSS

Stilizarea se bazează pe backdrop-filter pentru efectul de blur și tranziții pe proprietatea opacity.

Codul JavaScript

Logica de interfață care ascunde și afișe soul-ul de înregistrare sau login.

<div class="wrapper"> <div class="form-box login"> <h2>Bine ai revenit</h2> <form action="process_login.php" method="POST"> <div class="input-box"> <input type="email" name="email" required> <label>Email</label> <i class='bx bxs-envelope'></i> </div> <div class="input-box"> <input type="password" name="password" required> <label>Parolă</label> <i class='bx bxs-lock-alt'></i> </div> <button type="submit" class="btn">Autentificare</button> <div class="login-register"> <p>Membru nou? <a href="#" class="register-link">Creează un cont</a></p> </div> </form> </div>

<div class="form-box register" style="display:none; opacity: 0;">
    <h2>Cont Nou</h2>
    <form action="process_register.php" method="POST">
        <div class="input-box">
            <input type="text" name="username" required>
            <label>Nume Utilizator</label>
        </div>
        <div class="input-box">
            <input type="email" name="email" required>
            <label>Adresa Email</label>
        </div>
        <div class="input-box">
            <input type="password" name="password" required>
            <label>Parolă Sigură</label>
        </div>
        <button type="submit" class="btn">Înregistrare</button>
        <div class="login-register">
            <p>Ai deja cont? <a href="#" class="login-link">Înapoi la Login</a></p>
        </div>
    </form>
</div>


</div>

<style>
:root { --accent-color: #00d2ff; --glass-bg: rgba(255, 255, 255, 0.08); }

body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: radial-gradient(circle, #2c2c2c 0%, #000 100%); font-family: 'Inter', sans-serif; margin: 0; }

.wrapper { position: relative; width: 420px; background: var(--glass-bg); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; backdrop-filter: blur(20px); padding: 50px 40px; box-shadow: 0 25px 50px rgba(0,0,0,0.3); overflow: hidden; transition: height 0.3s ease; }

h2 { font-size: 2rem; color: #fff; text-align: center; margin-bottom: 20px; font-weight: 700; }

.input-box { position: relative; width: 100%; height: 55px; border-bottom: 1px solid rgba(255,255,255,0.3); margin: 25px 0; }

.input-box label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: 1rem; color: #ccc; pointer-events: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.input-box input:focus~label, .input-box input:valid~label { top: -2px; font-size: 0.85rem; color: var(--accent-color); }

.input-box input { width: 100%; height: 100%; background: transparent; border: none; outline: none; font-size: 1rem; color: #fff; }

.btn { width: 100%; height: 50px; background: var(--accent-color); border: none; border-radius: 12px; cursor: pointer; font-size: 1rem; color: #000; font-weight: 700; transition: transform 0.2s, box-shadow 0.2s; }

.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 210, 255, 0.4); }

.login-register { font-size: 0.9rem; color: #fff; text-align: center; margin: 25px 0 10px; }

.login-register p a { color: var(--accent-color); text-decoration: none; font-weight: 600; }

.login-register p a:hover { text-decoration: underline; }
</style>

<script>
const loginLink = document.querySelector('.register-link'); const registerLink = document.querySelector('.login-link'); const loginBox = document.querySelector('.form-box.login'); const registerBox = document.querySelector('.form-box.register');

loginLink.addEventListener('click', (e) => { e.preventDefault(); loginBox.style.opacity = '0'; setTimeout(() => { loginBox.style.display = 'none'; registerBox.style.display = 'block'; setTimeout(() => { registerBox.style.opacity = '1'; }, 50); }, 300); });

registerLink.addEventListener('click', (e) => { e.preventDefault(); registerBox.style.opacity = '0'; setTimeout(() => { registerBox.style.display = 'none'; loginBox.style.display = 'block'; setTimeout(() => { loginBox.style.opacity = '1'; }, 50); }, 300); });
</script>

Sistem de Autentificare Glassmorphism cu Tranziții Fluide

Detalii Tehnice

Ai Nevoie de Cod Personalizat?