Webleb - UI Elements - Mete'nin bir kodu

HTML

<!DOCTYPE html>

<head>

<title>Zenith - Modern Kimlik Doğrulama</title>

<style>

/* Tailwind CSS'i genişletmek için temel stil tanımlamaları */

:root {

/* İlham verici gündoğumu/mercan paleti */

--primary-gradient: linear-gradient(135deg, #FF9A8B 0%, #FF6A88 100%);

--primary-color: #FF6A88;

--primary-light: #ffebe6;

/* Arkaplan ve Kart Renkleri */

--body-bg: #fdfbfb;

--card-bg: #ffffff;

/* Metin Renkleri */

--text-primary: #2d3748; /* Tailwind gray-800 */

--text-secondary: #718096; /* Tailwind gray-500 */

/* Form Elemanları */

--input-bg: #f7fafc; /* Tailwind gray-100 */

--border-color: #e2e8f0; /* Tailwind gray-300 */

/* Diğer Renkler */

--success-green: #48bb78; /* Tailwind green-500 */

--info-blue: #4299e1; /* Tailwind blue-500 */

--shadow-color: rgba(45, 55, 72, 0.1);

--shadow-color-primary: rgba(255, 106, 136, 0.3);

}

/* HTML'in tamamı için Tailwind'in 'font-sans' yerine 'Poppins' kullan */

html {

font-family: 'Poppins', sans-serif;

}

body {

font-family: 'Poppins', sans-serif;

background-color: var(--body-bg);

/* Animasyonlu arkaplanı daha yumuşak bir geçişle değiştirdik */

background-image: radial-gradient(circle at 10% 20%, rgba(255, 154, 139, 0.1) 0%, transparent 50%),

radial-gradient(circle at 80% 90%, rgba(255, 106, 136, 0.1) 0%, transparent 50%);

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

padding: 1rem;

}

/* Ana Konteyner */

.auth-container {

width: 800px;

max-width: 95vw;

display: grid;

grid-template-columns: 1fr 1fr;

background: var(--card-bg);

border-radius: 24px; /* Daha yuvarlak köşeler */

box-shadow: 0 20px 40px var(--shadow-color);

overflow: hidden;

border: 1px solid var(--border-color);

}

/* Sol Taraf - Form Alanı */

.form-section {

padding: 50px 40px;

display: flex;

flex-direction: column;

justify-content: center;

position: relative;

}

/* Sağ Taraf - Görsel Alan */

.visual-section {

/* Statik bir renk yerine ilham verici bir görsel */

background: url('https://placehold.co/800x1200/ffebe6/FF6A88?text=Zenith&font=poppins') center center / cover;

/* Görselin üzerine metnin okunabilmesi için hafif bir overlay */

position: relative;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

text-align: center;

color: white;

padding: 40px;

}

.visual-section::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.1); /* Hafif karartma */

z-index: 1;

}

.visual-content {

position: relative;

z-index: 2;

}

.visual-icon {

font-size: 80px;

margin-bottom: 20px;

text-shadow: 0 4px 15px rgba(0,0,0,0.2);

}

.visual-title {

font-size: 28px;

font-weight: 700;

margin-bottom: 15px;

}

.visual-subtitle {

font-size: 16px;

opacity: 0.9;

line-height: 1.6;

}

/* Form Geçiş Seçenekleri */

.toggle-switch {

display: flex;

background: var(--input-bg);

border-radius: 12px;

padding: 4px;

border: 1px solid var(--border-color);

margin-bottom: 30px;

}

.toggle-option {

flex: 1;

padding: 12px 20px;

text-align: center;

border-radius: 8px;

cursor: pointer;

transition: all 0.3s ease;

color: var(--text-secondary);

font-weight: 500;

font-size: 14px;

}

.toggle-option.active {

background: var(--primary-gradient);

color: white;

box-shadow: 0 4px 12px var(--shadow-color-primary);

}

/* Form Başlıkları */

.form-title {

font-size: 32px;

font-weight: 700;

color: var(--text-primary);

margin-bottom: 8px;

text-align: center;

}

.form-subtitle {

color: var(--text-secondary);

margin-bottom: 30px;

font-size: 15px;

text-align: center;

line-height: 1.5;

}

/* Giriş Alanları */

.input-group {

margin-bottom: 20px;

position: relative;

}

.input-field {

width: 100%;

padding: 16px 20px 16px 50px;

background: var(--input-bg);

border: 2px solid var(--border-color);

border-radius: 12px;

color: var(--text-primary);

font-size: 16px;

transition: all 0.3s ease;

outline: none;

}

.input-field:focus {

border-color: var(--primary-color);

box-shadow: 0 0 0 3px rgba(255, 106, 136, 0.1);

background: white;

}

.input-field::placeholder {

color: var(--text-secondary);

}

.input-icon {

position: absolute;

left: 16px;

top: 50%;

transform: translateY(-50%);

color: var(--text-secondary);

font-size: 18px;

transition: color 0.3s ease;

}

.input-field:focus + .input-icon {

color: var(--primary-color);

}

/* Checkbox ve Seçenekler */

.form-options {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 25px;

font-size: 14px;

}

.checkbox-group {

display: flex;

align-items: center;

}

.checkbox {

width: 18px;

height: 18px;

margin-right: 8px;

accent-color: var(--primary-color);

}

.checkbox-label {

color: var(--text-secondary);

}

.forgot-link {

color: var(--primary-color);

text-decoration: none;

transition: opacity 0.3s ease;

font-weight: 500;

}

.forgot-link:hover {

opacity: 0.8;

}

/* Ana Buton */

.submit-btn {

width: 100%;

padding: 16px;

background: var(--primary-gradient);

border: none;

border-radius: 12px;

color: white;

font-size: 16px;

font-weight: 600;

cursor: pointer;

transition: all 0.3s ease;

margin-bottom: 25px;

display: flex;

align-items: center;

justify-content: center;

gap: 8px;

}

.submit-btn:hover {

transform: translateY(-2px);

box-shadow: 0 8px 25px var(--shadow-color-primary);

}

.submit-btn:disabled {

opacity: 0.7;

cursor: not-allowed;

transform: none;

}

/* Biyometrik Kimlik Doğrulama (Yeniden Stillendirildi) */

.biometric-section {

text-align: center;

margin: 25px 0;

padding: 20px 0;

border-top: 1px solid var(--border-color);

border-bottom: 1px solid var(--border-color);

}

.biometric-button {

width: 70px;

height: 70px;

border-radius: 50%;

background: var(--primary-gradient);

border: none;

cursor: pointer;

position: relative;

transition: all 0.3s ease;

box-shadow: 0 6px 20px var(--shadow-color-primary);

margin-bottom: 10px;

}

.biometric-button:hover {

transform: scale(1.05);

box-shadow: 0 8px 25px var(--shadow-color-primary);

}

.biometric-button.scanning {

animation: pulse 2s infinite;

}

@keyframes pulse {

0% { box-shadow: 0 0 0 0 rgba(255, 106, 136, 0.7); }

70% { box-shadow: 0 0 0 15px rgba(255, 106, 136, 0); }

100% { box-shadow: 0 0 0 0 rgba(255, 106, 136, 0); }

}

.biometric-icon {

font-size: 28px;

color: white;

}

.biometric-text {

color: var(--text-secondary);

font-size: 13px;

}

/* Sosyal Medya Girişi */

.social-section {

text-align: center;

}

.social-title {

color: var(--text-secondary);

margin-bottom: 20px;

font-size: 14px;

position: relative;

}

.social-title::before,

.social-title::after {

content: '';

position: absolute;

top: 50%;

width: 30%; /* Genişliği ayarlandı */

height: 1px;

background: var(--border-color);

}

.social-title::before { left: 0; }

.social-title::after { right: 0; }

.social-buttons {

display: flex;

gap: 15px;

justify-content: center;

}

.social-btn {

width: 45px;

height: 45px;

border-radius: 10px;

border: 2px solid var(--border-color);

background: transparent;

color: var(--text-secondary);

cursor: pointer;

transition: all 0.3s ease;

display: flex;

align-items: center;

justify-content: center;

font-size: 18px;

}

.social-btn:hover {

border-color: var(--primary-color);

color: var(--primary-color);

transform: translateY(-2px);

}

/* Form Geçişleri */

.form-content {

transition: opacity 0.3s ease, transform 0.3s ease;

}

.form-content.hidden {

/* 'display: none' yerine animasyon için bu yöntem daha iyi */

opacity: 0;

transform: scale(0.98);

position: absolute;

pointer-events: none;

/* Formların üst üste binmesini engellemek */

left: 40px;

right: 40px;

}

#register-form.hidden {

transform: scale(1.02); /* Hafif büyüme efekti */

}

/* Mesaj Overlay (alert() yerine) */

#message-overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(255, 255, 255, 0.95);

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

opacity: 0;

pointer-events: none;

transition: opacity 0.3s ease;

z-index: 100;

border-radius: 20px 0 0 20px; /* Sadece form tarafını kapla */

}

#message-overlay.show {

opacity: 1;

pointer-events: all;

}

#message-icon-wrapper {

font-size: 80px;

margin-bottom: 20px;

animation: messagePulse 0.6s ease-out;

}

#message-icon-wrapper.success { color: var(--success-green); }

#message-icon-wrapper.info { color: var(--info-blue); }

@keyframes messagePulse {

0% { transform: scale(0); }

50% { transform: scale(1.1); }

100% { transform: scale(1); }

}

#message-title {

font-size: 24px;

font-weight: 600;

margin-bottom: 10px;

}

#message-overlay.success #message-title { color: var(--success-green); }

#message-overlay.info #message-title { color: var(--info-blue); }

#message-text {

color: var(--text-secondary);

font-size: 16px;

}

/* Responsive Tasarım */

@media (max-width: 768px) {

.auth-container {

grid-template-columns: 1fr;

width: 100%;

height: 100%;

min-height: 100vh;

border-radius: 0;

}

.visual-section {

/* Mobilde görseli gizle, formu öne çıkar */

display: none;

}

.form-section {

padding: 30px 25px;

}

#message-overlay {

border-radius: 0;

}

.form-content.hidden {

left: 25px;

right: 25px;

}

</style>

</head>

<body>

<div class="toggle-option active" data-form="login">Giriş Yap</div>

<div class="toggle-option" data-form="register">Kayıt Ol</div>

</div>

<h1 class="form-title">Tekrar Hoş Geldiniz</h1>

<p class="form-subtitle">Hesabınıza güvenli bir şekilde giriş yapın</p>

</div>

</div>

<label for="remember" class="checkbox-label">Beni hatırla</label>

</div>

<a href="#" class="forgot-link" id="forgot-password">Şifremi unuttum</a>

</div>

Giriş Yap

</button>

</form>

</button>

<div class="biometric-text">Parmak izi ile hızlı giriş</div>

</div>

<div class="social-title">Veya sosyal medya ile giriş yap</div>

</button>

</button>

</button>

</div>

<h1 class="form-title">Hesap Oluşturun</h1>

<p class="form-subtitle">Yeni hesabınızı oluşturun ve güvenli erişimin keyfini çıkarın</p>

</div>

</div>

</div>

<label for="terms" class="checkbox-label">Kullanım koşullarını kabul ediyorum</label>

</div>

Hesap Oluştur

</button>

</form>

</button>

<div class="biometric-text">Parmak izi ile kayıt</div>

</div>

<div class="social-title">Veya sosyal medya ile kayıt ol</div>

</button>

</button>

</button>

</div>

</div>

<h3 id="message-title">İşlem Başarılı!</h3>

<p id="message-text">Yönlendiriliyorsunuz...</p>

</div>

</div>

<h2 class="visual-title">Yeniliğin Zirvesi</h2>

Geleceğin kimlik doğrulama teknolojisiyle tanışın.

<br>Hızlı, güvenli ve ilham verici.

</p>

</div>

document.addEventListener('DOMContentLoaded', function() {

// Gerekli DOM elementlerini seç

const toggleOptions = document.querySelectorAll('.toggle-option');

const loginForm = document.getElementById('login-form');

const registerForm = document.getElementById('register-form');

const loginFormElement = document.getElementById('loginForm');

const registerFormElement = document.getElementById('registerForm');

const biometricButtons = document.querySelectorAll('.biometric-button');

const socialButtons = document.querySelectorAll('.social-btn');

const forgotPasswordLink = document.getElementById('forgot-password');

// Mesajlaşma sistemi için elementler (alert() yerine)

const messageOverlay = document.getElementById('message-overlay');

const messageIcon = document.getElementById('message-icon-wrapper');

const messageTitle = document.getElementById('message-title');

const messageText = document.getElementById('message-text');

// Form geçiş işlevselliği

toggleOptions.forEach(option => {

option.addEventListener('click', () => {

toggleOptions.forEach(opt => opt.classList.remove('active'));

option.classList.add('active');

if (option.dataset.form === 'login') {

loginForm.classList.remove('hidden');

registerForm.classList.add('hidden');

} else {

loginForm.classList.add('hidden');

registerForm.classList.remove('hidden');

}

});

// Biyometrik doğrulama simülasyonu

biometricButtons.forEach(button => {

button.addEventListener('click', function() {

this.classList.add('scanning');

this.innerHTML = '<i class="fas fa-spinner fa-spin biometric-icon"></i>';

setTimeout(() => {

this.classList.remove('scanning');

this.innerHTML = '<i class="fas fa-check biometric-icon"></i>';

showOverlayMessage('Doğrulama Başarılı', 'Giriş yapılıyor...', 'success');

setTimeout(() => {

this.innerHTML = '<i class="fas fa-fingerprint biometric-icon"></i>';

}, 2000);

}, 3000);

});

// Form gönderimi

loginFormElement.addEventListener('submit', function(e) {

e.preventDefault();

handleFormSubmit(this, 'Giriş yapılıyor...');

});

registerFormElement.addEventListener('submit', function(e) {

e.preventDefault();

handleFormSubmit(this, 'Hesap oluşturuluyor...');

});

function handleFormSubmit(form, loadingText) {

const submitBtn = form.querySelector('.submit-btn');

const originalHTML = submitBtn.innerHTML;

submitBtn.innerHTML = `<i class="fas fa-spinner fa-spin"></i> ${loadingText}`;

submitBtn.disabled = true;

setTimeout(() => {

showOverlayMessage('İşlem Başarılı!', 'Yönlendiriliyorsunuz...', 'success');

submitBtn.innerHTML = originalHTML;

submitBtn.disabled = false;

}, 2000);

}

// Sosyal medya butonları simülasyonu

socialButtons.forEach(button => {

button.addEventListener('click', function() {

const icon = this.querySelector('i');

const originalClass = icon.className;

icon.className = 'fas fa-spinner fa-spin';

setTimeout(() => {

icon.className = originalClass;

showOverlayMessage('Bağlantı Başarılı', 'Giriş yapılıyor...', 'success');

}, 1500);

});

// Şifremi unuttum (alert() yerine overlay kullan)

forgotPasswordLink.addEventListener('click', function(e) {

e.preventDefault();

showOverlayMessage(

'Bağlantı Gönderildi',

'Şifre sıfırlama bağlantısı e-postanıza gönderildi.',

'info'

);

});

// alert() yerine geçecek genel amaçlı mesaj fonksiyonu

function showOverlayMessage(title, text, type = 'success') {

messageTitle.textContent = title;

messageText.textContent = text;

// İkonu ve renkleri ayarla

if (type === 'success') {

messageIcon.innerHTML = '<i class="fas fa-check-circle"></i>';

messageIcon.className = 'success';

messageOverlay.className = 'success';

} else if (type === 'info') {

messageIcon.innerHTML = '<i class="fas fa-info-circle"></i>';

messageIcon.className = 'info';

messageOverlay.className = 'info';

}

messageOverlay.classList.add('show');

setTimeout(() => {

messageOverlay.classList.remove('show');

}, 3000);

}

});

</script>

</body>

</html>

Mete'nin bir kodu

Recommended

HTML CSS Login Form Template

Among Us

Sidebar toggle

HTML

CSS

JS

Recommended

HTML CSS Login Form Template

Among Us

Sidebar toggle

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS