Webleb - HTML UI Elements - Un codice di Metehan

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profesyonel Giriş & Üye Kayıt</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-gold: #FFD700;
            --leon-gold: #DAA520;
            --blood-red: #DC143C;
            --dark-red: #B22222;
            --bg-primary: #1a1a1a;
            --bg-secondary: #2d2d2d;
            --text-light: #ffffff;
            --text-muted: #cccccc;
            --shadow-gold: rgba(255, 215, 0, 0.3);
            --shadow-red: rgba(220, 20, 60, 0.3);
            --shadow-dark: rgba(0, 0, 0, 0.5);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

body {
            background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--text-light);
            overflow-x: hidden;
        }

@keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

.floating-particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

.particle {
            position: absolute;
            border-radius: 50%;
            opacity: 0.6;
            animation: float 8s infinite ease-in-out;
        }

.particle-1 {
            width: 4px;
            height: 4px;
            background: var(--primary-gold);
            top: 20%;
            left: 10%;
            animation-delay: 0s;
        }

.particle-2 {
            width: 6px;
            height: 6px;
            background: var(--blood-red);
            top: 60%;
            right: 15%;
            animation-delay: 2s;
        }

.particle-3 {
            width: 3px;
            height: 3px;
            background: var(--leon-gold);
            bottom: 30%;
            left: 20%;
            animation-delay: 4s;
        }

@keyframes float {
            0%, 100% { transform: translateY(0) translateX(0) scale(1); }
            33% { transform: translateY(-20px) translateX(10px) scale(1.2); }
            66% { transform: translateY(10px) translateX(-15px) scale(0.8); }
        }

.main-container {
            background: rgba(45, 45, 45, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 25px;
            padding: 40px;
            width: 100%;
            max-width: 450px;
            box-shadow: 
                0 20px 40px var(--shadow-dark),
                0 0 20px var(--shadow-gold),
                inset 0 1px 0 rgba(255, 215, 0, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.2);
            position: relative;
            z-index: 10;
            transform: perspective(1000px);
            transition: all 0.3s ease;
        }

.main-container:hover {
            transform: perspective(1000px) translateY(-5px);
            box-shadow: 
                0 25px 50px var(--shadow-dark),
                0 0 30px var(--shadow-gold),
                inset 0 1px 0 rgba(255, 215, 0, 0.2);
        }

.logo-section {
            text-align: center;
            margin-bottom: 30px;
        }

.logo {
            font-size: 2.5rem;
            font-weight: 700;
            background: linear-gradient(45deg, var(--primary-gold), var(--leon-gold), var(--blood-red));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 20px var(--shadow-gold);
            margin-bottom: 10px;
        }

.subtitle {
            color: var(--text-muted);
            font-size: 0.9rem;
            font-weight: 400;
        }

.tab-buttons {
            display: flex;
            margin-bottom: 30px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            padding: 5px;
            gap: 5px;
        }

.tab-btn {
            flex: 1;
            padding: 12px 20px;
            border: none;
            border-radius: 12px;
            background: transparent;
            color: var(--text-muted);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9rem;
        }

.tab-btn.active {
            background: linear-gradient(45deg, var(--primary-gold), var(--leon-gold));
            color: var(--bg-primary);
            box-shadow: 0 5px 15px var(--shadow-gold);
            transform: translateY(-2px);
        }

.tab-btn:hover:not(.active) {
            color: var(--primary-gold);
            background: rgba(255, 215, 0, 0.1);
        }

.form-container {
            position: relative;
            overflow: hidden;
        }

.form-panel {
            opacity: 0;
            transform: translateX(50px);
            transition: all 0.4s ease;
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
        }

.form-panel.active {
            opacity: 1;
            transform: translateX(0);
            position: relative;
        }

.form-group {
            margin-bottom: 20px;
            position: relative;
        }

.form-group label {
            display: block;
            margin-bottom: 8px;
            color: var(--text-light);
            font-weight: 500;
            font-size: 0.9rem;
        }

.input-wrapper {
            position: relative;
        }

.form-group input {
            width: 100%;
            padding: 15px 20px 15px 50px;
            background: rgba(0, 0, 0, 0.4);
            border: 2px solid rgba(255, 215, 0, 0.3);
            border-radius: 12px;
            color: var(--text-light);
            font-size: 1rem;
            outline: none;
            transition: all 0.3s ease;
        }

.form-group input::placeholder {
            color: var(--text-muted);
        }

.form-group input:focus {
            border-color: var(--primary-gold);
            box-shadow: 0 0 15px var(--shadow-gold);
            background: rgba(0, 0, 0, 0.6);
        }

.input-icon {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--leon-gold);
            font-size: 1.1rem;
            z-index: 5;
        }

.submit-btn {
            width: 100%;
            padding: 16px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(45deg, var(--blood-red), var(--dark-red));
            color: var(--text-light);
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 20px;
            position: relative;
            overflow: hidden;
        }

.submit-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s;
        }

.submit-btn:hover {
            background: linear-gradient(45deg, var(--dark-red), var(--blood-red));
            box-shadow: 0 8px 25px var(--shadow-red);
            transform: translateY(-3px);
        }

.submit-btn:hover::before {
            left: 100%;
        }

.submit-btn:active {
            transform: translateY(-1px);
        }

.message {
            text-align: center;
            margin-top: 15px;
            min-height: 20px;
            font-weight: 500;
            font-size: 0.9rem;
        }

.success {
            color: var(--primary-gold);
        }

.error {
            color: var(--blood-red);
        }

.divider {
            display: flex;
            align-items: center;
            margin: 30px 0;
        }

.divider::before,
        .divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(to right, transparent, var(--leon-gold), transparent);
        }

.divider span {
            padding: 0 20px;
            color: var(--text-muted);
            font-size: 0.9rem;
        }

.social-login {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
        }

.social-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.4);
            color: var(--text-light);
            font-size: 1.3rem;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

.social-btn:hover {
            transform: translateY(-5px) scale(1.1);
            border-color: var(--primary-gold);
            box-shadow: 0 8px 20px var(--shadow-gold);
        }

.social-btn.google:hover {
            background: #db4437;
            box-shadow: 0 8px 20px rgba(219, 68, 55, 0.4);
        }

.social-btn.facebook:hover {
            background: #4267B2;
            box-shadow: 0 8px 20px rgba(66, 103, 178, 0.4);
        }

.social-btn.twitter:hover {
            background: #1DA1F2;
            box-shadow: 0 8px 20px rgba(29, 161, 242, 0.4);
        }

.social-btn.linkedin:hover {
            background: #0077B5;
            box-shadow: 0 8px 20px rgba(0, 119, 181, 0.4);
        }

.social-btn.instagram:hover {
            background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
            box-shadow: 0 8px 20px rgba(225, 48, 108, 0.4);
        }

.forgot-password {
            text-align: center;
            margin-top: 20px;
        }

.forgot-password a {
            color: var(--leon-gold);
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }

.forgot-password a:hover {
            color: var(--primary-gold);
            text-decoration: underline;
        }

@media (max-width: 480px) {
            .main-container {
                margin: 20px;
                padding: 30px 25px;
            }

.logo {
                font-size: 2rem;
            }

.form-group input {
                padding: 12px 16px 12px 45px;
            }

.submit-btn {
                padding: 14px;
                font-size: 1rem;
            }

.social-login {
                gap: 12px;
            }

.social-btn {
                width: 45px;
                height: 45px;
                font-size: 1.1rem;
            }
        }

@keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }

.shake {
            animation: shake 0.5s ease-in-out;
        }
    </style>
</head>
<body>
    <div class="floating-particles">
        <div class="particle particle-1"></div>
        <div class="particle particle-2"></div>
        <div class="particle particle-3"></div>
    </div>

<div class="main-container">
        <div class="logo-section">
            <div class="logo">LOGO</div>
            <div class="subtitle">Profesyonel Platform</div>
        </div>

<div class="tab-buttons">
            <button class="tab-btn active" data-tab="login">
                <i class="fas fa-sign-in-alt"></i> Giriş Yap
            </button>
            <button class="tab-btn" data-tab="register">
                <i class="fas fa-user-plus"></i> Üye Ol
            </button>
        </div>

<div class="form-container">
            
            <div class="form-panel active" id="login-panel">
                <form id="login-form">
                    <div class="form-group">
                        <label for="login-email">E-posta</label>
                        <div class="input-wrapper">
                            <i class="fas fa-envelope input-icon"></i>
                            <input type="email" id="login-email" placeholder="E-posta adresinizi girin" required>
                        </div>
                    </div>

<div class="form-group">
                        <label for="login-password">Şifre</label>
                        <div class="input-wrapper">
                            <i class="fas fa-lock input-icon"></i>
                            <input type="password" id="login-password" placeholder="Şifrenizi girin" required>
                        </div>
                    </div>

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

<div class="forgot-password">
                        <a href="#" id="forgot-link">Şifremi Unuttum</a>
                    </div>
                </form>

<div class="form-panel" id="register-panel">
                <form id="register-form">
                    <div class="form-group">
                        <label for="register-name">Ad Soyad</label>
                        <div class="input-wrapper">
                            <i class="fas fa-user input-icon"></i>
                            <input type="text" id="register-name" placeholder="Ad ve soyadınızı girin" required>
                        </div>
                    </div>

<div class="form-group">
                        <label for="register-email">E-posta</label>
                        <div class="input-wrapper">
                            <i class="fas fa-envelope input-icon"></i>
                            <input type="email" id="register-email" placeholder="E-posta adresinizi girin" required>
                        </div>
                    </div>

<div class="form-group">
                        <label for="register-password">Şifre</label>
                        <div class="input-wrapper">
                            <i class="fas fa-lock input-icon"></i>
                            <input type="password" id="register-password" placeholder="Güçlü bir şifre oluşturun" required>
                        </div>
                    </div>

<div class="form-group">
                        <label for="register-confirm">Şifre Tekrar</label>
                        <div class="input-wrapper">
                            <i class="fas fa-lock input-icon"></i>
                            <input type="password" id="register-confirm" placeholder="Şifrenizi tekrar girin" required>
                        </div>
                    </div>

tabButtons.forEach(button => {
            button.addEventListener('click', () => {
                const targetTab = button.getAttribute('data-tab');
                
                // Aktif tab butonunu güncelle
                tabButtons.forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');

// Aktif formu göster
                formPanels.forEach(panel => {
                    panel.classList.remove('active');
                    if (panel.id === `${targetTab}-panel`) {
                        setTimeout(() => {
                            panel.classList.add('active');
                        }, 100);
                    }
                });

// Mesajları temizle
                document.getElementById('login-message').textContent = '';
                document.getElementById('register-message').textContent = '';
            });
        });

// Giriş formu işleme
        document.getElementById('login-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const email = document.getElementById('login-email').value;
            const password = document.getElementById('login-password').value;
            const messageEl = document.getElementById('login-message');

// Basit doğrulama (gerçek projede API çağrısı yapılır)
            if (email === 'admin@example.com' && password === '123456') {
                messageEl.textContent = 'Giriş başarılı! Yönlendiriliyorsunuz...';
                messageEl.className = 'message success';
                
                // Başarı animasyonu
                this.style.transform = 'scale(1.02)';
                setTimeout(() => {
                    this.style.transform = 'scale(1)';
                    // window.location.href = 'dashboard.html'; // Gerçek yönlendirme
                }, 300);
            } else {
                messageEl.textContent = 'E-posta veya şifre hatalı!';
                messageEl.className = 'message error';
                
                // Hata animasyonu
                this.classList.add('shake');
                setTimeout(() => this.classList.remove('shake'), 500);
            }
        });

// Kayıt formu işleme
        document.getElementById('register-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const name = document.getElementById('register-name').value;
            const email = document.getElementById('register-email').value;
            const password = document.getElementById('register-password').value;
            const confirmPassword = document.getElementById('register-confirm').value;
            const messageEl = document.getElementById('register-message');

// Şifre kontrolü
            if (password !== confirmPassword) {
                messageEl.textContent = 'Şifreler eşleşmiyor!';
                messageEl.className = 'message error';
                this.classList.add('shake');
                setTimeout(() => this.classList.remove('shake'), 500);
                return;
            }

// Şifre güçlülük kontrolü
            if (password.length < 6) {
                messageEl.textContent = 'Şifre en az 6 karakter olmalıdır!';
                messageEl.className = 'message error';
                this.classList.add('shake');
                setTimeout(() => this.classList.remove('shake'), 500);
                return;
            }

// Başarılı kayıt
            messageEl.textContent = 'Kayıt başarılı! Giriş yapabilirsiniz.';
            messageEl.className = 'message success';
            
            // Başarı animasyonu ve form temizleme
            this.style.transform = 'scale(1.02)';
            setTimeout(() => {
                this.style.transform = 'scale(1)';
                this.reset(); // Formu temizle
                
                // Giriş sekmesine geç
                setTimeout(() => {
                    document.querySelector('[data-tab="login"]').click();
                }, 1000);
            }, 300);
        });

// Sosyal medya butonları
        document.querySelectorAll('.social-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const platform = this.classList[1]; // google, facebook, etc.
                alert(`${platform.charAt(0).toUpperCase() + platform.slice(1)} ile giriş yapılıyor...`);
                
                // Gerçek projede OAuth entegrasyonu yapılır
                // window.location.href = `/auth/${platform}`;
            });
        });

// Şifremi unuttum linki
        document.getElementById('forgot-link').addEventListener('click', function(e) {
            e.preventDefault();
            alert('Şifre sıfırlama e-postası gönderildi!');
        });

// Dinamik parçacık ekleme
        function addRandomParticle() {
            const particle = document.createElement('div');
            particle.className = 'particle';
            particle.style.width = Math.random() * 5 + 2 + 'px';
            particle.style.height = particle.style.width;
            particle.style.background = [
                'var(--primary-gold)',
                'var(--leon-gold)',
                'var(--blood-red)'
            ][Math.floor(Math.random() * 3)];
            particle.style.left = Math.random() * 100 + '%';
            particle.style.top = Math.random() * 100 + '%';
            particle.style.opacity = Math.random() * 0.6 + 0.2;
            particle.style.animation = `float ${Math.random() * 5 + 5}s infinite ease-in-out`;
            particle.style.animationDelay = Math.random() * 3 + 's';
            
            document.querySelector('.floating-particles').appendChild(particle);
            
            // 10 saniye sonra parçacığı kaldır
            setTimeout(() => {
                if (particle.parentNode) {
                    particle.parentNode.removeChild(particle);
                }
            }, 10000);
        }

// Her 3 saniyede bir yeni parçacık ekle
        setInterval(addRandomParticle, 3000);

// Sayfa yüklendiğinde birkaç parçacık ekle
        for (let i = 0; i < 5; i++) {
            setTimeout(addRandomParticle, i * 500);
        }
    </script>
</body>
</html>

Validating your code, please wait...

HTML

CSS