WEBLEB
Início
Editor
Entrar
Pro
Português
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>Premium Login & Register</title> <style> /* --- Temel Ayarlar ve CSS Değişkenleri --- */ :root { --primary-color: #1a8f83; /* Turkuaz/Mint Yeşil */ --primary-dark: #12665d; --secondary-color: #f0fdfa; /* Açık Mint */ --text-color: #333; --text-muted: #666; --glass-bg: rgba(255, 255, 255, 0.65); /* Cam efekti arka plan */ --glass-border: rgba(255, 255, 255, 0.5); --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); --radius: 16px; --transition-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } body { height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; /* Arka plan CSS deseni (Leaves) */ background-color: #0f2027; background-image: radial-gradient(at 0% 0%, hsla(153,81%,25%,1) 0, transparent 50%), radial-gradient(at 100% 100%, hsla(153,81%,25%,1) 0, transparent 50%); position: relative; } /* Yaprak desenini oluşturmak için pseudo-elementler ve gradientler kullanıyoruz */ body::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="%231a8f83" fill-opacity="0.1" d="M50 0 C 20 20, 0 50, 0 100 L 100 100 C 80 60, 80 20, 50 0 Z" transform="rotate(45 50 50)"/><path fill="%2320b2aa" fill-opacity="0.1" d="M50 0 C 20 20, 0 50, 0 100 L 100 100 C 80 60, 80 20, 50 0 Z" transform="rotate(135 50 50)"/></svg>'); z-index: 0; pointer-events: none; } /* --- Glassmorphism Kartı --- */ .container { position: relative; width: 100%; max-width: 400px; min-height: 550px; background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--glass-shadow); padding: 2.5rem; z-index: 1; display: flex; flex-direction: column; overflow: hidden; transition: height 0.4s ease; } /* Form yapısı ve geçiş container'ı */ .forms-wrapper { position: relative; width: 100%; height: 100%; display: flex; } .form-content { width: 100%; transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.4s ease; opacity: 1; position: absolute; top: 0; left: 0; } /* Pasif form durumu (Animasyon için) */ .form-content.hidden { transform: translateX(120%); opacity: 0; pointer-events: none; } .form-content.active { transform: translateX(0); opacity: 1; pointer-events: all; } /* Başlıklar */ h2 { font-size: 2rem; color: #0d4c45; margin-bottom: 2rem; text-align: center; font-weight: 700; letter-spacing: -0.5px; } /* Input Grupları */ .input-group { position: relative; margin-bottom: 1.5rem; } .input-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--primary-dark); font-size: 1.1rem; pointer-events: none; } .input-group input { width: 100%; padding: 12px 15px 12px 45px; /* Icon alanı */ border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; background: rgba(255, 255, 255, 0.5); font-size: 1rem; color: var(--text-color); transition: all var(--transition-speed); outline: none; } .input-group input::placeholder { color: #888; } .input-group input:focus { border-color: var(--primary-color); background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 3px rgba(26, 143, 131, 0.1); } /* Checkbox ve Linkler */ .actions { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; margin-bottom: 1.5rem; color: var(--text-muted); } .remember-me { display: flex; align-items: center; cursor: pointer; } .remember-me input { margin-right: 8px; accent-color: var(--primary-color); } .forgot-pass { color: var(--primary-dark); text-decoration: none; font-weight: 500; transition: color 0.2s; } .forgot-pass:hover { color: var(--primary-color); } /* Butonlar */ .btn-submit { width: 100%; padding: 14px; border: none; border-radius: 50px; background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: white; font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 15px rgba(26, 143, 131, 0.3); margin-bottom: 1.5rem; } .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26, 143, 131, 0.4); } .btn-submit:active { transform: translateY(0); } /* Alt Kısımda Switch Linki */ .switch-link { text-align: center; font-size: 0.95rem; color: var(--text-muted); } .switch-link a { color: var(--primary-dark); text-decoration: none; font-weight: 700; cursor: pointer; } .switch-link a:hover { text-decoration: underline; } /* Hata Mesajı (Validation) */ .error-message { color: #d32f2f; font-size: 0.85rem; margin-top: -10px; margin-bottom: 10px; display: none; text-align: left; padding-left: 5px; } /* Responsive */ @media (max-width: 480px) { .container { width: 90%; padding: 2rem; } } </style> </head> <body> <div class="container"> <div class="forms-wrapper"> <!-- LOGIN FORM --> <div class="form-content active" id="loginForm"> <h2>Login</h2> <form id="formLogin"> <div class="input-group"> <!-- User Icon (SVG) --> <i> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> </i> <input type="text" id="loginUser" placeholder="Username" required> </div> <div class="input-group"> <!-- Lock Icon (SVG) --> <i> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> </i> <input type="password" id="loginPass" placeholder="Password" required> </div> <div class="actions"> <label class="remember-me"> <input type="checkbox"> Remember me </label> <a href="#" class="forgot-pass">Forgot Password?</a> </div> <button type="submit" class="btn-submit">Sign in</button> <div class="switch-link"> Don't have an account? <a onclick="toggleForms('register')">Register</a> </div> </form> </div> <!-- REGISTER FORM --> <div class="form-content hidden" id="registerForm"> <h2>Register</h2> <form id="formRegister"> <div class="input-group"> <i> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> </i> <input type="text" id="regUser" placeholder="Username" required> </div> <div class="input-group"> <!-- Mail Icon (SVG) --> <i> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg> </i> <input type="email" id="regEmail" placeholder="Email" required> </div> <div class="input-group"> <i> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> </i> <input type="password" id="regPass" placeholder="Password" required> </div> <div class="input-group"> <i> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> </i> <input type="password" id="regPassConfirm" placeholder="Confirm Password" required> <div class="error-message" id="passError">Passwords do not match</div> </div> <button type="submit" class="btn-submit">Create Account</button> <div class="switch-link"> Already have an account? <a onclick="toggleForms('login')">Login</a> </div> </form> </div> </div> </div> <script> // --- Form Geçiş Fonksiyonu --- function toggleForms(target) { const loginForm = document.getElementById('loginForm'); const registerForm = document.getElementById('registerForm'); const container = document.querySelector('.container'); // Basit geçiş mantığı: Sınıfları değiştirerek CSS animasyonlarını tetikle if (target === 'register') { loginForm.classList.remove('active'); loginForm.classList.add('hidden'); setTimeout(() => { registerForm.classList.remove('hidden'); registerForm.classList.add('active'); }, 100); // Hafif gecikme ile yumuşak geçiş } else { registerForm.classList.remove('active'); registerForm.classList.add('hidden'); setTimeout(() => { loginForm.classList.remove('hidden'); loginForm.classList.add('active'); }, 100); } } // --- Form Validasyonları --- const loginForm = document.getElementById('formLogin'); const registerForm = document.getElementById('formRegister'); // Login Validasyonu loginForm.addEventListener('submit', function(e) { e.preventDefault(); const user = document.getElementById('loginUser').value; const pass = document.getElementById('loginPass').value; if(user && pass) { // Simüle edilmiş başarılı giriş alert(`Welcome back, ${user}!`); } else { alert("Please fill in all fields."); } }); // Register Validasyonu registerForm.addEventListener('submit', function(e) { e.preventDefault(); const user = document.getElementById('regUser').value; const email = document.getElementById('regEmail').value; const pass = document.getElementById('regPass').value; const passConfirm = document.getElementById('regPassConfirm').value; const passError = document.getElementById('passError'); // Şifre eşleşme kontrolü if(pass !== passConfirm) { passError.style.display = 'block'; document.getElementById('regPassConfirm').style.borderColor = '#d32f2f'; return; } else { passError.style.display = 'none'; document.getElementById('regPassConfirm').style.borderColor = 'rgba(0,0,0,0.1)'; } if(user && email && pass) { // Simüle edilmiş başarılı kayıt alert(`Account created successfully for ${user}!`); toggleForms('login'); } else { alert("Please fill in all fields."); } }); // Input'a tıklandığında hata mesajını gizle document.getElementById('regPassConfirm').addEventListener('input', function() { document.getElementById('passError').style.display = 'none'; this.style.borderColor = 'rgba(0,0,0,0.1)'; }); </script> </body> </html>
<!-- Replace with your CSS Code (Leave empty if not needed) -->
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Open Advanced Editor
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>Premium Login & Register</title> <style> /* --- Temel Ayarlar ve CSS Değişkenleri --- */ :root { --primary-color: #1a8f83; /* Turkuaz/Mint Yeşil */ --primary-dark: #12665d; --secondary-color: #f0fdfa; /* Açık Mint */ --text-color: #333; --text-muted: #666; --glass-bg: rgba(255, 255, 255, 0.65); /* Cam efekti arka plan */ --glass-border: rgba(255, 255, 255, 0.5); --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); --radius: 16px; --transition-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } body { height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; /* Arka plan CSS deseni (Leaves) */ background-color: #0f2027; background-image: radial-gradient(at 0% 0%, hsla(153,81%,25%,1) 0, transparent 50%), radial-gradient(at 100% 100%, hsla(153,81%,25%,1) 0, transparent 50%); position: relative; } /* Yaprak desenini oluşturmak için pseudo-elementler ve gradientler kullanıyoruz */ body::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="%231a8f83" fill-opacity="0.1" d="M50 0 C 20 20, 0 50, 0 100 L 100 100 C 80 60, 80 20, 50 0 Z" transform="rotate(45 50 50)"/><path fill="%2320b2aa" fill-opacity="0.1" d="M50 0 C 20 20, 0 50, 0 100 L 100 100 C 80 60, 80 20, 50 0 Z" transform="rotate(135 50 50)"/></svg>'); z-index: 0; pointer-events: none; } /* --- Glassmorphism Kartı --- */ .container { position: relative; width: 100%; max-width: 400px; min-height: 550px; background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--glass-shadow); padding: 2.5rem; z-index: 1; display: flex; flex-direction: column; overflow: hidden; transition: height 0.4s ease; } /* Form yapısı ve geçiş container'ı */ .forms-wrapper { position: relative; width: 100%; height: 100%; display: flex; } .form-content { width: 100%; transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.4s ease; opacity: 1; position: absolute; top: 0; left: 0; } /* Pasif form durumu (Animasyon için) */ .form-content.hidden { transform: translateX(120%); opacity: 0; pointer-events: none; } .form-content.active { transform: translateX(0); opacity: 1; pointer-events: all; } /* Başlıklar */ h2 { font-size: 2rem; color: #0d4c45; margin-bottom: 2rem; text-align: center; font-weight: 700; letter-spacing: -0.5px; } /* Input Grupları */ .input-group { position: relative; margin-bottom: 1.5rem; } .input-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--primary-dark); font-size: 1.1rem; pointer-events: none; } .input-group input { width: 100%; padding: 12px 15px 12px 45px; /* Icon alanı */ border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; background: rgba(255, 255, 255, 0.5); font-size: 1rem; color: var(--text-color); transition: all var(--transition-speed); outline: none; } .input-group input::placeholder { color: #888; } .input-group input:focus { border-color: var(--primary-color); background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 3px rgba(26, 143, 131, 0.1); } /* Checkbox ve Linkler */ .actions { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; margin-bottom: 1.5rem; color: var(--text-muted); } .remember-me { display: flex; align-items: center; cursor: pointer; } .remember-me input { margin-right: 8px; accent-color: var(--primary-color); } .forgot-pass { color: var(--primary-dark); text-decoration: none; font-weight: 500; transition: color 0.2s; } .forgot-pass:hover { color: var(--primary-color); } /* Butonlar */ .btn-submit { width: 100%; padding: 14px; border: none; border-radius: 50px; background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: white; font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 15px rgba(26, 143, 131, 0.3); margin-bottom: 1.5rem; } .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26, 143, 131, 0.4); } .btn-submit:active { transform: translateY(0); } /* Alt Kısımda Switch Linki */ .switch-link { text-align: center; font-size: 0.95rem; color: var(--text-muted); } .switch-link a { color: var(--primary-dark); text-decoration: none; font-weight: 700; cursor: pointer; } .switch-link a:hover { text-decoration: underline; } /* Hata Mesajı (Validation) */ .error-message { color: #d32f2f; font-size: 0.85rem; margin-top: -10px; margin-bottom: 10px; display: none; text-align: left; padding-left: 5px; } /* Responsive */ @media (max-width: 480px) { .container { width: 90%; padding: 2rem; } } </style> </head> <body> <div class="container"> <div class="forms-wrapper"> <!-- LOGIN FORM --> <div class="form-content active" id="loginForm"> <h2>Login</h2> <form id="formLogin"> <div class="input-group"> <!-- User Icon (SVG) --> <i> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> </i> <input type="text" id="loginUser" placeholder="Username" required> </div> <div class="input-group"> <!-- Lock Icon (SVG) --> <i> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> </i> <input type="password" id="loginPass" placeholder="Password" required> </div> <div class="actions"> <label class="remember-me"> <input type="checkbox"> Remember me </label> <a href="#" class="forgot-pass">Forgot Password?</a> </div> <button type="submit" class="btn-submit">Sign in</button> <div class="switch-link"> Don't have an account? <a onclick="toggleForms('register')">Register</a> </div> </form> </div> <!-- REGISTER FORM --> <div class="form-content hidden" id="registerForm"> <h2>Register</h2> <form id="formRegister"> <div class="input-group"> <i> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg> </i> <input type="text" id="regUser" placeholder="Username" required> </div> <div class="input-group"> <!-- Mail Icon (SVG) --> <i> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg> </i> <input type="email" id="regEmail" placeholder="Email" required> </div> <div class="input-group"> <i> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> </i> <input type="password" id="regPass" placeholder="Password" required> </div> <div class="input-group"> <i> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> </i> <input type="password" id="regPassConfirm" placeholder="Confirm Password" required> <div class="error-message" id="passError">Passwords do not match</div> </div> <button type="submit" class="btn-submit">Create Account</button> <div class="switch-link"> Already have an account? <a onclick="toggleForms('login')">Login</a> </div> </form> </div> </div> </div> <script> // --- Form Geçiş Fonksiyonu --- function toggleForms(target) { const loginForm = document.getElementById('loginForm'); const registerForm = document.getElementById('registerForm'); const container = document.querySelector('.container'); // Basit geçiş mantığı: Sınıfları değiştirerek CSS animasyonlarını tetikle if (target === 'register') { loginForm.classList.remove('active'); loginForm.classList.add('hidden'); setTimeout(() => { registerForm.classList.remove('hidden'); registerForm.classList.add('active'); }, 100); // Hafif gecikme ile yumuşak geçiş } else { registerForm.classList.remove('active'); registerForm.classList.add('hidden'); setTimeout(() => { loginForm.classList.remove('hidden'); loginForm.classList.add('active'); }, 100); } } // --- Form Validasyonları --- const loginForm = document.getElementById('formLogin'); const registerForm = document.getElementById('formRegister'); // Login Validasyonu loginForm.addEventListener('submit', function(e) { e.preventDefault(); const user = document.getElementById('loginUser').value; const pass = document.getElementById('loginPass').value; if(user && pass) { // Simüle edilmiş başarılı giriş alert(`Welcome back, ${user}!`); } else { alert("Please fill in all fields."); } }); // Register Validasyonu registerForm.addEventListener('submit', function(e) { e.preventDefault(); const user = document.getElementById('regUser').value; const email = document.getElementById('regEmail').value; const pass = document.getElementById('regPass').value; const passConfirm = document.getElementById('regPassConfirm').value; const passError = document.getElementById('passError'); // Şifre eşleşme kontrolü if(pass !== passConfirm) { passError.style.display = 'block'; document.getElementById('regPassConfirm').style.borderColor = '#d32f2f'; return; } else { passError.style.display = 'none'; document.getElementById('regPassConfirm').style.borderColor = 'rgba(0,0,0,0.1)'; } if(user && email && pass) { // Simüle edilmiş başarılı kayıt alert(`Account created successfully for ${user}!`); toggleForms('login'); } else { alert("Please fill in all fields."); } }); // Input'a tıklandığında hata mesajını gizle document.getElementById('regPassConfirm').addEventListener('input', function() { document.getElementById('passError').style.display = 'none'; this.style.borderColor = 'rgba(0,0,0,0.1)'; }); </script> </body> </html>
<!-- Replace with your CSS Code (Leave empty if not needed) -->
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Validating your code, please wait...