Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

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

<h2>Login</h2>

<i>

</i>

</div>

<i>

</i>

</div>

<input type="checkbox"> Remember me

</label>

<a href="#" class="forgot-pass">Forgot Password?</a>

</div>

Don't have an account? <a onclick="toggleForms('register')">Register</a>

</div>

</form>

</div>

<h2>Register</h2>

<i>

</i>

</div>

<i>

</i>

</div>

<i>

</i>

</div>

<i>

</i>

<div class="error-message" id="passError">Passwords do not match</div>

</div>

<button type="submit" class="btn-submit">Create Account</button>

Already have an account? <a onclick="toggleForms('login')">Login</a>

</div>

</form>

</div>

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

CSS

JS

Metehan