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>

CSS

JS

Mete'nin bir kodu

Recommended