A Code by Metehan

Open In Editor Publish Your Code

<!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>

A Code by Metehan

Recommended

animation loading

Escape Button

CodePen Home Premium Responsive Navbar

HTML

CSS

JS

Recommended

animation loading

Escape Button

CodePen Home Premium Responsive Navbar

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS