Formulário de login e registro HTML CSS Autenticação biométrica

109 mignonn.dej

Abrir no Editor Publique Seu Código

Formulário de login e registro HTML CSS Autenticação biométrica

Recomendado

21 May 2025

Página de destino do portfólio

14 September 2024

Alternar Olho do Minion

10 July 2025

Efeito de foco de botão animado em CSS

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BioSecure - Modern Authentication</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

:root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --dark-bg: #0a0b1e;
            --card-bg: #1a1b2e;
            --input-bg: #16213e;
            --text-primary: #ffffff;
            --text-secondary: #a0a9c0;
            --accent-blue: #4f46e5;
            --success-green: #10b981;
            --border-color: #2d3748;
            --shadow-color: rgba(0, 0, 0, 0.3);
        }

body {
            font-family: 'Inter', sans-serif;
            background: var(--dark-bg);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow-x: hidden;
        }

/* Animasyonlu Arkaplan */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 40% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
            animation: backgroundFlow 15s ease-in-out infinite;
            z-index: -1;
        }

@keyframes backgroundFlow {
            0%, 100% { transform: scale(1) rotate(0deg); }
            50% { transform: scale(1.1) rotate(5deg); }
        }

/* Ana Konteyner */
        .auth-container {
            background: var(--card-bg);
            border-radius: 20px;
            box-shadow: 0 20px 40px var(--shadow-color);
            width: 800px;
            max-width: 90vw;
            display: grid;
            grid-template-columns: 1fr 1fr;
            overflow: hidden;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

/* Sol Taraf - Form Alanı */
        .form-section {
            padding: 50px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

/* Sağ Taraf - Görsel Alan */
        .visual-section {
            background: var(--primary-gradient);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            padding: 40px;
            position: relative;
            overflow: hidden;
        }

.visual-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
        }

@keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

.visual-content {
            position: relative;
            z-index: 2;
        }

.visual-icon {
            font-size: 80px;
            margin-bottom: 20px;
            animation: float 3s ease-in-out infinite;
        }

@keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

.visual-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 15px;
        }

.visual-subtitle {
            font-size: 16px;
            opacity: 0.9;
            line-height: 1.6;
        }

/* Form Geçiş Seçenekleri */
        .toggle-container {
            margin-bottom: 30px;
        }

.toggle-switch {
            display: flex;
            background: var(--input-bg);
            border-radius: 12px;
            padding: 4px;
            border: 1px solid var(--border-color);
        }

.toggle-option {
            flex: 1;
            padding: 12px 20px;
            text-align: center;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: var(--text-secondary);
            font-weight: 500;
            font-size: 14px;
        }

.toggle-option.active {
            background: var(--accent-blue);
            color: white;
            box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
        }

/* Form Başlıkları */
        .form-title {
            font-size: 32px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 8px;
            text-align: center;
        }

.form-subtitle {
            color: var(--text-secondary);
            margin-bottom: 30px;
            font-size: 15px;
            text-align: center;
            line-height: 1.5;
        }

/* Giriş Alanları */
        .input-group {
            margin-bottom: 20px;
            position: relative;
        }

.input-field {
            width: 100%;
            padding: 16px 20px 16px 50px;
            background: var(--input-bg);
            border: 2px solid transparent;
            border-radius: 12px;
            color: var(--text-primary);
            font-size: 16px;
            transition: all 0.3s ease;
            outline: none;
        }

.input-field:focus {
            border-color: var(--accent-blue);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }

.input-field::placeholder {
            color: var(--text-secondary);
        }

.input-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
            font-size: 18px;
            transition: color 0.3s ease;
        }

.input-field:focus + .input-icon {
            color: var(--accent-blue);
        }

/* Checkbox ve Seçenekler */
        .form-options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            font-size: 14px;
        }

.checkbox-group {
            display: flex;
            align-items: center;
        }

.checkbox {
            width: 18px;
            height: 18px;
            margin-right: 8px;
            accent-color: var(--accent-blue);
        }

.checkbox-label {
            color: var(--text-secondary);
        }

.forgot-link {
            color: var(--accent-blue);
            text-decoration: none;
            transition: opacity 0.3s ease;
        }

.forgot-link:hover {
            opacity: 0.8;
        }

/* Ana Buton */
        .submit-btn {
            width: 100%;
            padding: 16px;
            background: var(--primary-gradient);
            border: none;
            border-radius: 12px;
            color: white;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

.submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
        }

.submit-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            transform: none;
        }

/* Biyometrik Kimlik Doğrulama */
        .biometric-section {
            text-align: center;
            margin: 30px 0;
            padding: 20px 0;
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
        }

.biometric-button {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: var(--primary-gradient);
            border: none;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
            margin-bottom: 10px;
        }

.biometric-button:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
        }

.biometric-button.scanning {
            animation: pulse 2s infinite;
        }

@keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(102, 126, 234, 0); }
            100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
        }

.biometric-icon {
            font-size: 28px;
            color: white;
        }

.biometric-text {
            color: var(--text-secondary);
            font-size: 13px;
        }

/* Sosyal Medya Girişi */
        .social-section {
            text-align: center;
        }

.social-title {
            color: var(--text-secondary);
            margin-bottom: 20px;
            font-size: 14px;
            position: relative;
        }

.social-title::before,
        .social-title::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 60px;
            height: 1px;
            background: var(--border-color);
        }

.social-title::before { left: 0; }
        .social-title::after { right: 0; }

.social-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
        }

.social-btn {
            width: 45px;
            height: 45px;
            border-radius: 10px;
            border: 2px solid var(--border-color);
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

.social-btn:hover {
            border-color: var(--accent-blue);
            color: var(--accent-blue);
            transform: translateY(-2px);
        }

.social-btn.google:hover { border-color: #db4437; color: #db4437; }
        .social-btn.facebook:hover { border-color: #4267b2; color: #4267b2; }
        .social-btn.twitter:hover { border-color: #1da1f2; color: #1da1f2; }
        .social-btn.github:hover { border-color: #333; color: #333; }

/* Form Geçişleri */
        .form-content {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

.form-content.hidden {
            opacity: 0;
            transform: translateX(20px);
            position: absolute;
            pointer-events: none;
        }

/* Başarı Animasyonu */
        .success-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(26, 27, 46, 0.95);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            z-index: 100;
        }

.success-overlay.show {
            opacity: 1;
            pointer-events: all;
        }

.success-icon {
            font-size: 80px;
            color: var(--success-green);
            margin-bottom: 20px;
            animation: successPulse 0.6s ease-out;
        }

@keyframes successPulse {
            0% { transform: scale(0); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

.success-title {
            color: var(--success-green);
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 10px;
        }

.success-message {
            color: var(--text-secondary);
            font-size: 16px;
        }

/* Responsive Tasarım */
        @media (max-width: 768px) {
            .auth-container {
                grid-template-columns: 1fr;
                width: 100%;
                height: 100vh;
                border-radius: 0;
            }

.visual-section {
                order: -1;
                padding: 30px;
                min-height: 250px;
            }

.visual-icon {
                font-size: 60px;
            }

.visual-title {
                font-size: 24px;
            }

.form-section {
                padding: 30px 25px;
            }

.social-buttons {
                gap: 10px;
            }

.social-btn {
                width: 40px;
                height: 40px;
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
    <div class="auth-container">
        
        <div class="form-section">
            
            <div class="toggle-container">
                <div class="toggle-switch">
                    <div class="toggle-option active" data-form="login">Giriş Yap</div>
                    <div class="toggle-option" data-form="register">Kayıt Ol</div>
                </div>
            </div>

<div class="form-content" id="login-form">
                <h1 class="form-title">Tekrar Hoş Geldiniz</h1>
                <p class="form-subtitle">Hesabınıza güvenli bir şekilde giriş yapın</p>

<div class="form-options">
                        <div class="checkbox-group">
                            <input type="checkbox" id="remember" class="checkbox">
                            <label for="remember" class="checkbox-label">Beni hatırla</label>
                        </div>
                        <a href="#" class="forgot-link" id="forgot-password">Şifremi unuttum</a>
                    </div>

<button type="submit" class="submit-btn">
                        <i class="fas fa-sign-in-alt"></i>
                        Giriş Yap
                    </button>
                </form>

<div class="biometric-section">
                    <button class="biometric-button" id="biometric-login">
                        <i class="fas fa-fingerprint biometric-icon"></i>
                    </button>
                    <div class="biometric-text">Parmak izi ile hızlı giriş</div>
                </div>

<div class="social-section">
                    <div class="social-title">Sosyal medya ile giriş</div>
                    <div class="social-buttons">
                        <button class="social-btn google">
                            <i class="fab fa-google"></i>
                        </button>
                        <button class="social-btn facebook">
                            <i class="fab fa-facebook-f"></i>
                        </button>
                        <button class="social-btn twitter">
                            <i class="fab fa-twitter"></i>
                        </button>
                        <button class="social-btn github">
                            <i class="fab fa-github"></i>
                        </button>
                    </div>
                </div>
            </div>

<div class="form-content hidden" id="register-form">
                <h1 class="form-title">Hesap Oluşturun</h1>
                <p class="form-subtitle">Yeni hesabınızı oluşturun ve güvenli erişimin keyfini çıkarın</p>

<div class="form-options">
                        <div class="checkbox-group">
                            <input type="checkbox" id="terms" class="checkbox" required>
                            <label for="terms" class="checkbox-label">Kullanım koşullarını kabul ediyorum</label>
                        </div>
                    </div>

<button type="submit" class="submit-btn">
                        <i class="fas fa-user-plus"></i>
                        Hesap Oluştur
                    </button>
                </form>

<div class="biometric-section">
                    <button class="biometric-button" id="biometric-register">
                        <i class="fas fa-fingerprint biometric-icon"></i>
                    </button>
                    <div class="biometric-text">Parmak izi ile kayıt</div>
                </div>

<div class="social-section">
                    <div class="social-title">Sosyal medya ile kayıt</div>
                    <div class="social-buttons">
                        <button class="social-btn google">
                            <i class="fab fa-google"></i>
                        </button>
                        <button class="social-btn facebook">
                            <i class="fab fa-facebook-f"></i>
                        </button>
                        <button class="social-btn twitter">
                            <i class="fab fa-twitter"></i>
                        </button>
                        <button class="social-btn github">
                            <i class="fab fa-github"></i>
                        </button>
                    </div>
                </div>
            </div>

<div class="success-overlay" id="success-overlay">
                <div class="success-icon">
                    <i class="fas fa-check-circle"></i>
                </div>
                <h3 class="success-title">İşlem Başarılı!</h3>
                <p class="success-message">Yönlendiriliyorsunuz...</p>
            </div>
        </div>

<div class="visual-section">
            <div class="visual-content">
                <div class="visual-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h2 class="visual-title">Güvenli Kimlik Doğrulama</h2>
                <p class="visual-subtitle">
                    Biyometrik teknoloji ile hesabınızı koruyun.<br>
                    Parmak izi taraması ile hızlı ve güvenli erişim sağlayın.
                </p>
            </div>
        </div>
    </div>

toggleOptions.forEach(option => {
                option.addEventListener('click', () => {
                    toggleOptions.forEach(opt => opt.classList.remove('active'));
                    option.classList.add('active');

if (option.dataset.form === 'login') {
                        loginForm.classList.remove('hidden');
                        registerForm.classList.add('hidden');
                    } else {
                        loginForm.classList.add('hidden');
                        registerForm.classList.remove('hidden');
                    }
                });
            });

// Biyometrik doğrulama simülasyonu
            const biometricButtons = document.querySelectorAll('.biometric-button');
            
            biometricButtons.forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.add('scanning');
                    this.innerHTML = '<i class="fas fa-spinner fa-spin biometric-icon"></i>';
                    
                    setTimeout(() => {
                        this.classList.remove('scanning');
                        this.innerHTML = '<i class="fas fa-check biometric-icon"></i>';
                        showSuccessMessage();
                        
                        setTimeout(() => {
                            this.innerHTML = '<i class="fas fa-fingerprint biometric-icon"></i>';
                        }, 2000);
                    }, 3000);
                });
            });

// Form gönderimi
            const loginFormElement = document.getElementById('loginForm');
            const registerFormElement = document.getElementById('registerForm');

loginFormElement.addEventListener('submit', function(e) {
                e.preventDefault();
                handleFormSubmit(this, 'Giriş yapılıyor...');
            });

registerFormElement.addEventListener('submit', function(e) {
                e.preventDefault();
                handleFormSubmit(this, 'Hesap oluşturuluyor...');
            });

function handleFormSubmit(form, loadingText) {
                const submitBtn = form.querySelector('.submit-btn');
                const originalHTML = submitBtn.innerHTML;
                
                submitBtn.innerHTML = `<i class="fas fa-spinner fa-spin"></i> ${loadingText}`;
                submitBtn.disabled = true;

setTimeout(() => {
                    showSuccessMessage();
                    submitBtn.innerHTML = originalHTML;
                    submitBtn.disabled = false;
                }, 2000);
            }

// Sosyal medya butonları
            const socialButtons = document.querySelectorAll('.social-btn');
            
            socialButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    const originalClass = icon.className;
                    
                    icon.className = 'fas fa-spinner fa-spin';
                    
                    setTimeout(() => {
                        icon.className = originalClass;
                        showSuccessMessage();
                    }, 1500);
                });
            });

// Başarı mesajını göster
            function showSuccessMessage() {
                const successOverlay = document.getElementById('success-overlay');
                successOverlay.classList.add('show');
                
                setTimeout(() => {
                    successOverlay.classList.remove('show');
                }, 3000);
            }

// Şifremi unuttum
            document.getElementById('forgot-password').addEventListener('click', function(e) {
                e.preventDefault();
                alert('Şifre sıfırlama bağlantısı e-posta adresinize gönderildi!');
            });

// Input odaklanma efektleri
            const inputFields = document.querySelectorAll('.input-field');
            
            inputFields.forEach(input => {
                input.addEventListener('focus', function() {
                    this.parentElement.classList.add('focused');
                });
                
                input.addEventListener('blur', function() {
                    this.parentElement.classList.remove('focused');
                });
            });
        });
    </script>
</body>
</html>

Recomendado

Página de destino do portfólio

Alternar Olho do Minion

Efeito de foco de botão animado em CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS