Modèle HTML CSS de formulaire de connexion et d'inscription

1,384 Metehan

Ouvrir dans l'éditeur Publiez votre code

Modèle HTML CSS de formulaire de connexion et d'inscription

Recommandé

20 October 2023

Astuce de capture de la souris avec JS

31 March 2024

Carrousel de cartes JavaScript

23 January 2026

Metehan

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Andev Web - Giriş & Kayıt</title>
    
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        /* Genel Stil Sıfırlama ve Temel Ayarlar */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

:root {
            --primary-color: #ffffff;
            --text-color: #f0f0f0;
            --accent-color: #ff9a9e;
            --dark-color: #271930;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: var(--dark-color); /* Video yüklenemezse görünecek renk */
            padding: 20px;
            overflow: hidden;
        }

/* Arka Plan Videosu */
        #background-video {
            position: fixed;
            right: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -100;
            object-fit: cover; /* Videonun ekranı kaplamasını sağlar */
            filter: brightness(0.7); /* Videoyu biraz karartarak formu öne çıkarır */
        }

/* Ana Form Konteyneri */
        .wrapper {
            position: relative;
            width: 420px;
            background: rgba(0, 0, 0, 0.25);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 40px;
            color: var(--text-color);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
            overflow: hidden; /* Animasyonlar için */
            transition: height 0.4s ease-in-out;
        }

/* Formlar arası geçiş için yükseklik ayarı */
        .wrapper.active {
            height: 580px;
        }
        
        .wrapper.login-active {
             height: 540px;
        }

/* Form Başlığı */
        h2 {
            font-size: 2.2rem;
            text-align: center;
            margin-bottom: 20px;
            font-weight: 600;
            color: var(--primary-color);
        }

/* Giriş ve Kayıt Formları */
        .form-container {
            position: absolute;
            width: calc(100% - 80px); /* Padding'i hesaba kat */
            transition: transform 0.5s ease-in-out;
        }

.login-form {
            transform: translateX(0);
        }

.register-form {
            transform: translateX(450px);
        }

.wrapper.active .login-form {
            transform: translateX(-450px);
        }

.wrapper.active .register-form {
            transform: translateX(0);
        }

/* Input Alanları */
        .input-box {
            position: relative;
            width: 100%;
            height: 50px;
            margin: 30px 0;
        }

.input-box .icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.7);
        }

.input-box input {
            width: 100%;
            height: 100%;
            background: transparent;
            border: none;
            outline: none;
            border-bottom: 2px solid rgba(255, 255, 255, 0.3);
            font-size: 1rem;
            color: var(--primary-color);
            padding-left: 50px;
            transition: border-color 0.3s;
        }

.input-box input:focus,
        .input-box input:valid {
            border-bottom-color: var(--accent-color);
        }

.input-box label {
            position: absolute;
            top: 50%;
            left: 50px;
            transform: translateY(-50%);
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.7);
            pointer-events: none;
            transition: 0.3s ease;
        }

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

/* "Beni Hatırla" ve "Şifremi Unuttum" */
        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
            margin: -15px 0 15px;
        }

.remember-forgot label input {
            accent-color: var(--accent-color);
            margin-right: 5px;
        }

.remember-forgot a, .form-footer a {
            color: var(--accent-color);
            text-decoration: none;
        }

.remember-forgot a:hover, .form-footer a:hover {
            text-decoration: underline;
        }

/* Ana Buton */
        .btn {
            width: 100%;
            height: 50px;
            background: var(--dark-color);
            border: none;
            outline: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 1.1rem;
            color: var(--primary-color);
            font-weight: 600;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

.btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: var(--primary-color);
            color: var(--dark-color);
        }

/* Form Alt Bilgisi (Kayıt/Giriş Linki) */
        .form-footer {
            font-size: 0.9rem;
            text-align: center;
            margin-top: 25px;
        }

/* Sosyal Medya ve Parmak İzi Girişi */
        .social-login {
            text-align: center;
            margin-top: 30px;
        }

.social-login p {
            font-size: 0.9rem;
            margin-bottom: 15px;
        }

.social-icons {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

.social-icons a, .fingerprint-icon {
            width: 50px;
            height: 50px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            color: var(--primary-color);
            text-decoration: none;
            transition: all 0.3s ease;
        }

.social-icons a:hover, .fingerprint-icon:hover {
            background: var(--accent-color);
            border-color: var(--accent-color);
            color: var(--dark-color);
            transform: translateY(-5px);
        }
        
        .fingerprint-icon {
            cursor: pointer;
        }

/* Parmak İzi Modal */
        .fingerprint-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(5px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

.fingerprint-modal.active {
            opacity: 1;
            pointer-events: auto;
        }

.modal-content {
            background: var(--dark-color);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            color: var(--primary-color);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
            transform: scale(0.7);
            transition: transform 0.3s ease;
        }

.fingerprint-modal.active .modal-content {
            transform: scale(1);
        }

.modal-content i {
            font-size: 5rem;
            color: var(--accent-color);
            margin-bottom: 20px;
        }
        
        .modal-content i.scanning {
            animation: scan 1.5s infinite linear;
        }

.modal-content p {
            font-size: 1.2rem;
        }
        
        @keyframes scan {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.7; }
        }

/* Mobil Cihazlar için Duyarlılık */
        @media (max-width: 460px) {
            .wrapper {
                width: 100%;
                height: 100vh;
                border-radius: 0;
                padding: 20px;
            }
            .form-container {
                width: calc(100% - 40px);
            }
            h2 {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>

<video autoplay muted loop id="background-video">
        
        <source src="https://cdn.pixabay.com/video/2023/09/13/179831-864137934.mp4" type="video/mp4">
        Tarayıcınız video etiketini desteklemiyor.
    </video>

<div class="wrapper login-active">
        
        <div class="form-container login-form">
            <form action="#">
                <h2>Giriş Yap</h2>
                <div class="input-box">
                    <span class="icon"><i class="fa-solid fa-envelope"></i></span>
                    <input type="email" required>
                    <label>E-posta</label>
                </div>
                <div class="input-box">
                    <span class="icon"><i class="fa-solid fa-lock"></i></span>
                    <input type="password" required>
                    <label>Şifre</label>
                </div>
                <div class="remember-forgot">
                    <label><input type="checkbox"> Beni Hatırla</label>
                    <a href="#">Şifremi Unuttum</a>
                </div>
                <button type="submit" class="btn">Giriş Yap</button>
                <div class="social-login">
                    <p>Veya şununla devam et:</p>
                    <div class="social-icons">
                        <div class="fingerprint-icon" id="fingerprintBtn">
                            <i class="fa-solid fa-fingerprint"></i>
                        </div>
                        <a href="#"><i class="fa-brands fa-google"></i></a>
                        <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
                        <a href="#"><i class="fa-brands fa-twitter"></i></a>
                    </div>
                </div>
                <div class="form-footer">
                    <p>Hesabın yok mu? <a href="#" class="register-link">Kayıt Ol</a></p>
                </div>
            </form>
        </div>

<div class="form-container register-form">
            <form action="#">
                <h2>Kayıt Ol</h2>
                <div class="input-box">
                    <span class="icon"><i class="fa-solid fa-user"></i></span>
                    <input type="text" required>
                    <label>Kullanıcı Adı</label>
                </div>
                <div class="input-box">
                    <span class="icon"><i class="fa-solid fa-envelope"></i></span>
                    <input type="email" required>
                    <label>E-posta</label>
                </div>
                <div class="input-box">
                    <span class="icon"><i class="fa-solid fa-lock"></i></span>
                    <input type="password" required>
                    <label>Şifre</label>
                </div>
                <button type="submit" class="btn">Kayıt Ol</button>
                <div class="form-footer">
                    <p>Zaten bir hesabın var mı? <a href="#" class="login-link">Giriş Yap</a></p>
                </div>
            </form>
        </div>
    </div>

<div class="fingerprint-modal" id="fingerprintModal">
        <div class="modal-content">
            <i id="modalIcon" class="fa-solid fa-fingerprint"></i>
            <p id="modalText">Doğrulama için parmağınızı yerleştirin</p>
        </div>
    </div>

// Giriş formuna geçiş
        loginLink.addEventListener('click', (e) => {
            e.preventDefault();
            wrapper.classList.remove('active');
            wrapper.classList.add('login-active');
        });

// --- Parmak İzi Simülasyonu ---
        const fingerprintBtn = document.getElementById('fingerprintBtn');
        const modal = document.getElementById('fingerprintModal');
        const modalIcon = document.getElementById('modalIcon');
        const modalText = document.getElementById('modalText');

fingerprintBtn.addEventListener('click', () => {
            // WebAuthn API'nin tarayıcı tarafından desteklenip desteklenmediğini kontrol et
            if (window.PublicKeyCredential) {
                // Modalı göster ve tarama animasyonunu başlat
                modalText.textContent = 'Doğrulama için parmağınızı yerleştirin';
                modalIcon.className = 'fa-solid fa-fingerprint scanning';
                modal.classList.add('active');

// Simülasyon: 2.5 saniye sonra sonucu göster
                setTimeout(() => {
                    // Gerçek bir uygulamada burada WebAuthn API çağrısı olurdu.
                    // Biz burada başarılı bir kimlik doğrulama simülasyonu yapıyoruz.
                    modalIcon.classList.remove('scanning');
                    modalIcon.className = 'fa-solid fa-circle-check';
                    modalText.textContent = 'Kimlik Doğrulandı!';

// 1.5 saniye sonra modalı kapat
                    setTimeout(() => {
                        modal.classList.remove('active');
                        // İsteğe bağlı: Giriş formunu doldur veya otomatik giriş yap
                        // document.querySelector('.login-form input[type="email"]').value = "user@example.com";
                        // document.querySelector('.login-form input[type="password"]').value = "";
                    }, 1500);

}, 2500);

} else {
                // Tarayıcı desteklemiyorsa veya güvenli bir bağlam (HTTPS) yoksa
                alert('Bu tarayıcı parmak izi ile girişi desteklemiyor veya güvenli bir bağlantı (HTTPS) üzerinde değilsiniz.');
            }
        });
        
        // Modal dışına tıklandığında kapat
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                modal.classList.remove('active');
            }
        });

</script>

</body>
</html>

CSS