WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NexShop - Giriş & Kayıt</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { primary: '#3B82F6', secondary: '#10B981', accent: '#8B5CF6', } } } } </script> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); body { font-family: 'Poppins', sans-serif; } .auth-container { min-height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('https://images.pexels.com/photos/18136911/pexels-photo-18136911/free-photo-of-doga-moda-kadin-sanat.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); background-size: cover; background-position: center; } .auth-card { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); } .form-input { transition: all 0.3s ease; } .form-input:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); } .social-btn { transition: all 0.3s ease; } .social-btn:hover { transform: translateY(-3px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .tab-button { transition: all 0.3s ease; } .tab-button.active { background: rgba(255, 255, 255, 0.2); } </style> </head> <body class="bg-gray-100"> <!-- Auth Container --> <div class="auth-container flex items-center justify-center p-4"> <div class="auth-card w-full max-w-md rounded-2xl overflow-hidden shadow-xl"> <!-- Tabs --> <div class="flex border-b border-white border-opacity-20"> <button id="login-tab" class="tab-button flex-1 py-4 text-white font-medium text-center active">Giriş Yap</button> <button id="register-tab" class="tab-button flex-1 py-4 text-white font-medium text-center">Kayıt Ol</button> </div> <!-- Login Form --> <form id="login-form" class="p-8 space-y-6"> <h2 class="text-2xl font-bold text-white text-center">Hesabınıza Giriş Yapın</h2> <div class="space-y-2"> <label class="block text-sm font-medium text-white">E-posta</label> <input type="email" placeholder="E-posta adresiniz" class="form-input w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 text-white placeholder-white placeholder-opacity-70 focus:outline-none"> </div> <div class="space-y-2"> <label class="block text-sm font-medium text-white">Şifre</label> <input type="password" placeholder="Şifreniz" class="form-input w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 text-white placeholder-white placeholder-opacity-70 focus:outline-none"> <a href="#" class="block text-right text-sm text-white text-opacity-80 hover:underline">Şifremi Unuttum</a> </div> <div class="flex items-center"> <input type="checkbox" id="remember" class="h-4 w-4 text-primary"> <label for="remember" class="ml-2 block text-sm text-white">Beni Hatırla</label> </div> <button type="submit" class="w-full bg-primary text-white py-3 rounded-lg font-semibold hover:bg-blue-600 transition">Giriş Yap</button> <div class="relative flex items-center justify-center"> <div class="border-t border-white border-opacity-20 w-full"></div> <span class="bg-transparent px-3 text-sm text-white text-opacity-80">veya</span> </div> <div class="grid grid-cols-3 gap-4"> <a href="#" class="social-btn bg-white text-gray-800 py-2 rounded-lg flex items-center justify-center"> <i class="fab fa-google text-red-500"></i> </a> <a href="#" class="social-btn bg-white text-gray-800 py-2 rounded-lg flex items-center justify-center"> <i class="fab fa-facebook-f text-blue-600"></i> </a> <a href="#" class="social-btn bg-white text-gray-800 py-2 rounded-lg flex items-center justify-center"> <i class="fab fa-apple text-gray-900"></i> </a> </div> </form> <!-- Register Form --> <form id="register-form" class="p-8 space-y-6 hidden"> <h2 class="text-2xl font-bold text-white text-center">Yeni Hesap Oluşturun</h2> <div class="grid grid-cols-2 gap-4"> <div class="space-y-2"> <label class="block text-sm font-medium text-white">Ad</label> <input type="text" placeholder="Adınız" class="form-input w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 text-white placeholder-white placeholder-opacity-70 focus:outline-none"> </div> <div class="space-y-2"> <label class="block text-sm font-medium text-white">Soyad</label> <input type="text" placeholder="Soyadınız" class="form-input w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 text-white placeholder-white placeholder-opacity-70 focus:outline-none"> </div> </div> <div class="space-y-2"> <label class="block text-sm font-medium text-white">E-posta</label> <input type="email" placeholder="E-posta adresiniz" class="form-input w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 text-white placeholder-white placeholder-opacity-70 focus:outline-none"> </div> <div class="space-y-2"> <label class="block text-sm font-medium text-white">Şifre</label> <input type="password" placeholder="Şifreniz" class="form-input w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 text-white placeholder-white placeholder-opacity-70 focus:outline-none"> </div> <div class="space-y-2"> <label class="block text-sm font-medium text-white">Şifre Tekrar</label> <input type="password" placeholder="Şifrenizi tekrar girin" class="form-input w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 text-white placeholder-white placeholder-opacity-70 focus:outline-none"> </div> <div class="flex items-center"> <input type="checkbox" id="terms" class="h-4 w-4 text-primary"> <label for="terms" class="ml-2 block text-sm text-white"> <a href="#" class="underline">Kullanım Koşulları</a> ve <a href="#" class="underline">Gizlilik Politikası</a>'nı okudum ve kabul ediyorum. </label> </div> <button type="submit" class="w-full bg-secondary text-white py-3 rounded-lg font-semibold hover:bg-green-600 transition">Kayıt Ol</button> <div class="relative flex items-center justify-center"> <div class="border-t border-white border-opacity-20 w-full"></div> <span class="bg-transparent px-3 text-sm text-white text-opacity-80">veya</span> </div> <div class="grid grid-cols-3 gap-4"> <a href="#" class="social-btn bg-white text-gray-800 py-2 rounded-lg flex items-center justify-center"> <i class="fab fa-google text-red-500"></i> </a> <a href="#" class="social-btn bg-white text-gray-800 py-2 rounded-lg flex items-center justify-center"> <i class="fab fa-facebook-f text-blue-600"></i> </a> <a href="#" class="social-btn bg-white text-gray-800 py-2 rounded-lg flex items-center justify-center"> <i class="fab fa-apple text-gray-900"></i> </a> </div> </form> </div> </div> <script> // Tab switching functionality const loginTab = document.getElementById('login-tab'); const registerTab = document.getElementById('register-tab'); const loginForm = document.getElementById('login-form'); const registerForm = document.getElementById('register-form'); loginTab.addEventListener('click', () => { loginTab.classList.add('active'); registerTab.classList.remove('active'); loginForm.classList.remove('hidden'); registerForm.classList.add('hidden'); }); registerTab.addEventListener('click', () => { registerTab.classList.add('active'); loginTab.classList.remove('active'); registerForm.classList.remove('hidden'); loginForm.classList.add('hidden'); }); // Form submission loginForm.addEventListener('submit', (e) => { e.preventDefault(); // Add your login logic here alert('Giriş işlemi başarılı!'); }); registerForm.addEventListener('submit', (e) => { e.preventDefault(); // Add your registration logic here alert('Kayıt işlemi başarılı!'); }); </script> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NexShop - Giriş & Kayıt</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { primary: '#3B82F6', secondary: '#10B981', accent: '#8B5CF6', } } } } </script> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); body { font-family: 'Poppins', sans-serif; } .auth-container { min-height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('https://images.pexels.com/photos/18136911/pexels-photo-18136911/free-photo-of-doga-moda-kadin-sanat.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); background-size: cover; background-position: center; } .auth-card { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); } .form-input { transition: all 0.3s ease; } .form-input:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); } .social-btn { transition: all 0.3s ease; } .social-btn:hover { transform: translateY(-3px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .tab-button { transition: all 0.3s ease; } .tab-button.active { background: rgba(255, 255, 255, 0.2); } </style> </head> <body class="bg-gray-100"> <!-- Auth Container --> <div class="auth-container flex items-center justify-center p-4"> <div class="auth-card w-full max-w-md rounded-2xl overflow-hidden shadow-xl"> <!-- Tabs --> <div class="flex border-b border-white border-opacity-20"> <button id="login-tab" class="tab-button flex-1 py-4 text-white font-medium text-center active">Giriş Yap</button> <button id="register-tab" class="tab-button flex-1 py-4 text-white font-medium text-center">Kayıt Ol</button> </div> <!-- Login Form --> <form id="login-form" class="p-8 space-y-6"> <h2 class="text-2xl font-bold text-white text-center">Hesabınıza Giriş Yapın</h2> <div class="space-y-2"> <label class="block text-sm font-medium text-white">E-posta</label> <input type="email" placeholder="E-posta adresiniz" class="form-input w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 text-white placeholder-white placeholder-opacity-70 focus:outline-none"> </div> <div class="space-y-2"> <label class="block text-sm font-medium text-white">Şifre</label> <input type="password" placeholder="Şifreniz" class="form-input w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 text-white placeholder-white placeholder-opacity-70 focus:outline-none"> <a href="#" class="block text-right text-sm text-white text-opacity-80 hover:underline">Şifremi Unuttum</a> </div> <div class="flex items-center"> <input type="checkbox" id="remember" class="h-4 w-4 text-primary"> <label for="remember" class="ml-2 block text-sm text-white">Beni Hatırla</label> </div> <button type="submit" class="w-full bg-primary text-white py-3 rounded-lg font-semibold hover:bg-blue-600 transition">Giriş Yap</button> <div class="relative flex items-center justify-center"> <div class="border-t border-white border-opacity-20 w-full"></div> <span class="bg-transparent px-3 text-sm text-white text-opacity-80">veya</span> </div> <div class="grid grid-cols-3 gap-4"> <a href="#" class="social-btn bg-white text-gray-800 py-2 rounded-lg flex items-center justify-center"> <i class="fab fa-google text-red-500"></i> </a> <a href="#" class="social-btn bg-white text-gray-800 py-2 rounded-lg flex items-center justify-center"> <i class="fab fa-facebook-f text-blue-600"></i> </a> <a href="#" class="social-btn bg-white text-gray-800 py-2 rounded-lg flex items-center justify-center"> <i class="fab fa-apple text-gray-900"></i> </a> </div> </form> <!-- Register Form --> <form id="register-form" class="p-8 space-y-6 hidden"> <h2 class="text-2xl font-bold text-white text-center">Yeni Hesap Oluşturun</h2> <div class="grid grid-cols-2 gap-4"> <div class="space-y-2"> <label class="block text-sm font-medium text-white">Ad</label> <input type="text" placeholder="Adınız" class="form-input w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 text-white placeholder-white placeholder-opacity-70 focus:outline-none"> </div> <div class="space-y-2"> <label class="block text-sm font-medium text-white">Soyad</label> <input type="text" placeholder="Soyadınız" class="form-input w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 text-white placeholder-white placeholder-opacity-70 focus:outline-none"> </div> </div> <div class="space-y-2"> <label class="block text-sm font-medium text-white">E-posta</label> <input type="email" placeholder="E-posta adresiniz" class="form-input w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 text-white placeholder-white placeholder-opacity-70 focus:outline-none"> </div> <div class="space-y-2"> <label class="block text-sm font-medium text-white">Şifre</label> <input type="password" placeholder="Şifreniz" class="form-input w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 text-white placeholder-white placeholder-opacity-70 focus:outline-none"> </div> <div class="space-y-2"> <label class="block text-sm font-medium text-white">Şifre Tekrar</label> <input type="password" placeholder="Şifrenizi tekrar girin" class="form-input w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 text-white placeholder-white placeholder-opacity-70 focus:outline-none"> </div> <div class="flex items-center"> <input type="checkbox" id="terms" class="h-4 w-4 text-primary"> <label for="terms" class="ml-2 block text-sm text-white"> <a href="#" class="underline">Kullanım Koşulları</a> ve <a href="#" class="underline">Gizlilik Politikası</a>'nı okudum ve kabul ediyorum. </label> </div> <button type="submit" class="w-full bg-secondary text-white py-3 rounded-lg font-semibold hover:bg-green-600 transition">Kayıt Ol</button> <div class="relative flex items-center justify-center"> <div class="border-t border-white border-opacity-20 w-full"></div> <span class="bg-transparent px-3 text-sm text-white text-opacity-80">veya</span> </div> <div class="grid grid-cols-3 gap-4"> <a href="#" class="social-btn bg-white text-gray-800 py-2 rounded-lg flex items-center justify-center"> <i class="fab fa-google text-red-500"></i> </a> <a href="#" class="social-btn bg-white text-gray-800 py-2 rounded-lg flex items-center justify-center"> <i class="fab fa-facebook-f text-blue-600"></i> </a> <a href="#" class="social-btn bg-white text-gray-800 py-2 rounded-lg flex items-center justify-center"> <i class="fab fa-apple text-gray-900"></i> </a> </div> </form> </div> </div> <script> // Tab switching functionality const loginTab = document.getElementById('login-tab'); const registerTab = document.getElementById('register-tab'); const loginForm = document.getElementById('login-form'); const registerForm = document.getElementById('register-form'); loginTab.addEventListener('click', () => { loginTab.classList.add('active'); registerTab.classList.remove('active'); loginForm.classList.remove('hidden'); registerForm.classList.add('hidden'); }); registerTab.addEventListener('click', () => { registerTab.classList.add('active'); loginTab.classList.remove('active'); registerForm.classList.remove('hidden'); loginForm.classList.add('hidden'); }); // Form submission loginForm.addEventListener('submit', (e) => { e.preventDefault(); // Add your login logic here alert('Giriş işlemi başarılı!'); }); registerForm.addEventListener('submit', (e) => { e.preventDefault(); // Add your registration logic here alert('Kayıt işlemi başarılı!'); }); </script> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */