WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ein Code von smartfunction263
1372
Metehan
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
28 November 2024
Ein Code von robustbug269
28 May 2025
Ein Code von toolify001
5 July 2025
Glassy Login- und Registrierungspanel von TheDoc
HTML
Copy
Giriş Sayfası
Giriş Yap
Giriş Yap
Google
Facebook
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background-attachment: fixed; } .login-container { width: 100%; max-width: 380px; background-color: white; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); padding: 40px; text-align: center; position: relative; overflow: hidden; margin: 20px; } .login-container::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, #5d3fd3, transparent); animation: rotate 4s linear infinite; z-index: 1; } .login-container::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: white; margin: 5px; border-radius: 15px; z-index: 2; } .login-content { position: relative; z-index: 3; } .login-logo { font-size: 2.5rem; font-weight: bold; color: #5d3fd3; margin-bottom: 30px; } .input-group { margin-bottom: 20px; } .input-group input { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 10px; outline: none; transition: all 0.3s ease; } .input-group input:focus { border-color: #5d3fd3; box-shadow: 0 0 10px rgba(93,63,211,0.2); } .login-btn { width: 100%; padding: 12px; background-color: #5d3fd3; color: white; border: none; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; } .login-btn:hover { background-color: #4a32a8; transform: translateY(-3px); } .error-message { color: #ff4757; margin-bottom: 15px; display: none; } .social-login { display: flex; justify-content: space-between; margin-top: 20px; } .social-btn { width: 45%; padding: 10px; border-radius: 8px; border: none; cursor: pointer; font-weight: bold; transition: transform 0.3s ease; } .social-btn:hover { transform: scale(1.05); } .google-btn { background-color: #fff; border: 1px solid #ddd; color: #333; } .facebook-btn { background-color: #3b5998; color: white; } @media (max-width: 480px) { .login-container { width: 90%; padding: 20px; } .login-logo { font-size: 2rem; } .social-login { flex-direction: column; } .social-btn { width: 100%; margin-bottom: 10px; } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
JS
Copy
function validateLogin(event) { event.preventDefault(); const username = document.getElementById('username'); const password = document.getElementById('password'); const errorMessage = document.getElementById('errorMessage'); const validUsername = 'kullanici'; const validPassword = 'sifre123'; if (username.value === validUsername && password.value === validPassword) { errorMessage.style.display = 'none'; // Rastgele bir e-ticaret sitesine yönlendirme const sites = [ 'https://www.trendyol.com', 'https://www.n11.com', 'https://www.hepsiburada.com', 'https://www.gittigidiyor.com' ]; const randomSite = sites[Math.floor(Math.random() * sites.length)]; setTimeout(() => { window.location.href = randomSite; }, 500); } else { errorMessage.textContent = 'Hatalı kullanıcı adı veya şifre!'; errorMessage.style.display = 'block'; } } document.getElementById('loginForm').addEventListener('submit', validateLogin);