Webleb - UI Elements - Mete'nin bir kodu

HTML

<!DOCTYPE html>

<head>

<title>Profesyonel Giriş & Kayıt | Andev Web</title>

<style>

/* Global ve Temel Ayarlar */

:root {

--primary-color: #8b5a2b; /* Ayı temasına uygun kahverengi */

--secondary-color: #d8b596; /* Açık kahve/krem tonu */

--accent-color: #a67c52; /* Vurgu için daha koyu kahve */

--background-color: #f3eadf; /* Açık arka plan */

--form-bg-color: #ffffff; /* Form kartı arka planı */

--text-color: #333333; /* Genel yazı rengi */

--input-border: #ddd; /* Input kenarlık */

--button-hover: #6d462a; /* Buton hover rengi */

--shadow-color: rgba(0, 0, 0, 0.15); /* Gölge rengi */

/* Altın temasından renkler - 3. koddan */

--gold-primary: #D4AF37;

--gold-light: #F5DE95;

--gold-dark: #966D20;

--black-matte: #1A1A1A;

--black-deep: #111111;

--black-light: #333333;

--white-soft: #F9F9F9;

--gold-gradient: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-primary) 50%, var(--gold-dark) 100%);

}

* {

padding: 0;

margin: 0;

box-sizing: border-box;

font-family: 'Montserrat', sans-serif; /* Montserrat genel font */

}

body {

background: linear-gradient(135deg, var(--background-color) 0%, #e6d0bc 100%);

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

color: var(--text-color);

}

/* Genel Konteyner */

.auth-container {

display: flex;

width: 850px;

max-width: 95%;

height: 580px; /* Yüksekliği biraz artırdık */

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

border-radius: 16px;

box-shadow: 0 15px 40px var(--shadow-color); /* Daha belirgin gölge */

overflow: hidden;

position: relative;

}

/* Ayı Yanı (Bear Side) */

.bear-side {

flex: 1;

background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%); /* Gradyan ekledik */

position: relative;

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

/* Form Yanı (Form Side) */

.form-side {

flex: 1.2;

padding: 40px;

display: flex;

flex-direction: column;

justify-content: center;

}

.auth-title {

font-size: 32px; /* Daha büyük başlık */

color: var(--primary-color);

margin-bottom: 25px; /* Boşluk artırıldı */

font-weight: 800; /* Daha kalın font */

text-align: center;

letter-spacing: 1px;

font-family: 'Playfair Display', serif; /* Özel font */

transition: all 0.3s ease;

}

/* Input Alanları */

.input-group {

margin-bottom: 22px; /* Boşluk ayarı */

position: relative;

}

.input-group label {

display: block;

margin-bottom: 8px;

color: var(--text-color);

font-weight: 500;

font-size: 15px;

}

.input-group input {

width: 100%;

padding: 14px 15px 14px 45px; /* Sol padding ikon için */

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

border-radius: 10px; /* Daha yuvarlak kenarlar */

font-size: 16px;

transition: all 0.3s ease;

color: var(--text-color);

background-color: var(--white-soft);

}

.input-group input::placeholder {

color: #999;

}

.input-group input:focus {

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

outline: none;

box-shadow: 0 0 0 3px rgba(139, 90, 43, 0.15);

}

.input-group i {

position: absolute;

left: 15px; /* İkonu sola hizala */

bottom: 14px;

color: #999;

transition: all 0.3s ease;

}

.input-group input:focus + i {

color: var(--primary-color);

}

/* Şifre Görünürlük İkonu */

.input-group .toggle-password {

right: 15px;

left: auto; /* Sağ tarafa sabitle */

cursor: pointer;

}

/* Seçenekler (Beni Hatırla, Şifremi Unuttum) */

.options {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 25px;

font-size: 14px;

}

.remember {

display: flex;

align-items: center;

color: var(--text-color);

}

.remember input {

margin-right: 8px;

accent-color: var(--primary-color); /* Checkbox rengi */

width: 16px;

height: 16px;

}

.forgot-password {

color: var(--accent-color);

text-decoration: none;

font-weight: 600;

transition: all 0.3s ease;

}

.forgot-password:hover {

text-decoration: underline;

color: var(--primary-color);

}

/* Butonlar */

.submit-button {

background: var(--primary-color); /* Gradyan yerine düz renk ve hoverda canlanma */

color: white;

border: none;

border-radius: 10px;

padding: 16px; /* Daha büyük buton */

font-size: 17px;

font-weight: 700;

cursor: pointer;

transition: all 0.3s ease;

width: 100%;

letter-spacing: 0.8px;

box-shadow: 0 5px 15px rgba(139, 90, 43, 0.2);

}

.submit-button:hover {

background-color: var(--button-hover);

transform: translateY(-3px); /* Daha belirgin kalkma efekti */

box-shadow: 0 8px 20px rgba(139, 90, 43, 0.4);

}

.submit-button:active {

transform: translateY(0);

box-shadow: 0 5px 15px rgba(139, 90, 43, 0.2);

}

/* Form Geçiş Bağlantısı */

.toggle-link {

text-align: center;

margin-top: 25px;

font-size: 15px;

color: var(--text-color);

}

.toggle-link a {

color: var(--accent-color);

font-weight: 700;

text-decoration: none;

cursor: pointer;

transition: all 0.3s ease;

}

.toggle-link a:hover {

text-decoration: underline;

color: var(--primary-color);

}

/* Ayı Karakteri - Mevcut stiller korunacak */

.bear-container {

position: relative;

width: 220px;

height: 220px;

transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

animation: float 3s ease-in-out infinite; /* Yüzme animasyonu */

}

.bear-face {

position: absolute;

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

height: 140px;

width: 160px;

border-radius: 70% 70% 60% 60%;

top: 20px;

left: 30px;

transition: all 0.4s ease;

}

.ear-l, .ear-r {

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

height: 50px;

width: 50px;

border-radius: 50%;

position: absolute;

top: -5px;

transition: all 0.4s ease;

}

.ear-l { left: 20px; }

.ear-r { right: 20px; }

.ear-l:before, .ear-r:before {

position: absolute;

content: "";

height: 30px;

width: 30px;

background-color: var(--secondary-color);

border-radius: 50%;

top: 10px;

}

.ear-l:before { left: 10px; }

.ear-r:before { right: 10px; }

.eye-l, .eye-r {

background-color: white;

height: 26px;

width: 24px;

border-radius: 50%;

position: absolute;

top: 40px;

transition: all 0.4s ease;

}

.eye-l { left: 40px; }

.eye-r { right: 40px; }

.eyeball-l, .eyeball-r {

background-color: black;

height: 12px;

width: 12px;

border-radius: 50%;

position: absolute;

top: 6px;

transition: all 0.2s ease;

}

.eyeball-l { left: 6px; }

.eyeball-r { right: 6px; }

.blush-l, .blush-r {

background-color: rgba(229, 161, 144, 0.7);

height: 15px;

width: 15px;

border-radius: 50%;

position: absolute;

top: 65px;

}

.blush-l { left: 25px; }

.blush-r { right: 25px; }

.snout {

position: absolute;

background-color: var(--secondary-color);

height: 55px;

width: 70px;

border-radius: 50%;

top: 60px;

left: 45px;

}

.nose {

background-color: black;

height: 14px;

width: 16px;

border-radius: 50%;

position: relative;

top: 15px;

left: 27px;

}

.mouth {

height: 10px;

width: 16px;

border-bottom: 3px solid black;

border-radius: 50%;

position: relative;

top: 20px;

left: 27px;

transition: all 0.4s ease;

}

.welcome-text {

position: absolute;

width: 100%;

text-align: center;

bottom: 40px;

color: white;

font-size: 24px;

font-weight: 700;

opacity: 0.9;

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

transition: all 0.6s ease;

}

/* Form Gizleme/Gösterimi */

.form-container {

width: 100%;

position: relative; /* İçindeki formlar için konumlandırma */

height: auto; /* İçeriğe göre ayarla */

}

.login-form, .register-form {

position: absolute; /* Üst üste binmeleri için */

width: 100%;

opacity: 0;

pointer-events: none; /* Etkileşimi engelle */

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

transform: translateX(20px); /* Hafif bir başlangıç kayması */

}

.login-form.active, .register-form.active {

opacity: 1;

pointer-events: all;

position: static; /* Aktif olduğunda akışa geri dön */

transform: translateX(0);

}

.hidden {

display: none !important; /* JS'deki hidden sınıfını override etmek için */

}

/* Sosyal Medya Giriş Alanı - 3. koddan esinlenildi */

.divider {

display: flex;

align-items: center;

margin: 25px 0;

color: rgba(0, 0, 0, 0.4);

font-size: 12px;

letter-spacing: 1px;

text-transform: uppercase;

font-weight: 600;

}

.divider::before, .divider::after {

content: '';

flex: 1;

height: 1px;

background: rgba(0, 0, 0, 0.1);

margin: 0 10px;

}

.social-login {

display: flex;

justify-content: center;

gap: 15px;

margin-bottom: 25px; /* Boşluk eklendi */

}

.social-btn {

width: 50px; /* Daha büyük ikonlar */

height: 50px;

border-radius: 50%; /* Yuvarlak ikonlar */

display: flex;

justify-content: center;

align-items: center;

color: var(--text-color);

font-size: 20px; /* İkon boyutu */

cursor: pointer;

transition: all 0.3s ease;

background: var(--white-soft);

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

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

}

.social-btn:hover {

transform: translateY(-3px);

background: var(--background-color);

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

color: var(--primary-color);

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

}

.social-btn .fab {

margin: 0; /* İç ikonların marjini sıfırla */

}

/* Şifre Gücü Göstergesi */

.password-strength {

height: 6px; /* Daha kalın bar */

margin-top: 10px;

border-radius: 4px;

transition: all 0.3s ease;

background-color: #eee;

}

.strength-weak { background-color: #ff4d4d; width: 30%; }

.strength-medium { background-color: #ffa700; width: 60%; }

.strength-strong { background-color: #2ecc71; width: 100%; }

.password-text {

font-size: 13px;

margin-top: 8px;

color: #666;

font-weight: 500;

}

/* Responsive Tasarım */

@media (max-width: 768px) {

.auth-container {

flex-direction: column;

height: auto;

min-height: 95vh;

width: 95%;

}

.bear-side {

height: 180px; /* Ayı alanı küçültüldü */

}

.bear-container {

transform: scale(0.7); /* Ayı küçültüldü */

top: -10px; /* Hafif yukarı taşı */

}

.form-side {

padding: 30px 20px;

}

.auth-title {

font-size: 26px;

margin-bottom: 20px;

}

.welcome-text {

font-size: 20px;

bottom: 25px;

}

@keyframes float {

0% { transform: translateY(0px); }

50% { transform: translateY(-10px); }

100% { transform: translateY(0px); }

}

@keyframes pulse {

0% { transform: scale(1); }

50% { transform: scale(1.02); } /* Daha hafif pulse */

100% { transform: scale(1); }

}

.submit-button:hover {

animation: pulse 1s infinite;

}

</style>

</head>

<body>

</div>

</div>

</div>

<div class="welcome-text" id="welcome-message">Hoş Geldiniz!</div>

</div>

<h1 class="auth-title">Hesabınıza Giriş Yapın</h1>

<label for="login-email">E-posta Adresi</label>

</div>

<label for="login-password">Şifre</label>

</div>

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

</div>

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

</div>

<button type="submit" class="submit-button">Giriş Yap</button>

<div class="divider">VEYA DEVAM ET</div>

</a>

</a>

</a>

</a>

</div>

</form>

Hesabınız yok mu? <a id="show-register">Hemen kaydolun</a>

</div>

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

<label for="register-fullname">Ad Soyad</label>

</div>

<label for="register-email">E-posta Adresi</label>

</div>

<label for="register-password">Şifre</label>

<div class="password-text" id="password-text">Şifre gücü: Henüz girilmedi</div>

</div>

<button type="submit" class="submit-button">Hesap Oluştur</button>

<div class="divider">VEYA KAYIT OL</div>

</a>

</a>

</a>

</a>

</div>

</form>

Zaten hesabınız var mı? <a id="show-login">Giriş yapın</a>

</div>

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

const loginFormContainer = document.getElementById("login-form-container");

const registerFormContainer = document.getElementById("register-form-container");

const showRegisterLink = document.getElementById("show-register");

const showLoginLink = document.getElementById("show-login");

const welcomeMessage = document.getElementById("welcome-message");

const bearFace = document.querySelector(".bear-face");

const mouth = document.querySelector(".mouth"); // Ayı ağzı için eleman

// Form değiştirme fonksiyonu

function switchForm(targetForm) {

if (targetForm === 'register') {

loginFormContainer.classList.remove("active");

loginFormContainer.classList.add("hidden");

registerFormContainer.classList.add("active");

registerFormContainer.classList.remove("hidden");

welcomeMessage.textContent = "Aramıza Katılın!";

// Ayı yüzünün stilini değiştir (kayıt için)

bearFace.style.transform = "translateY(-5px) rotate(5deg)";

setTimeout(() => {

bearFace.style.transform = "translateY(0) rotate(0deg)";

}, 600);

} else { // targetForm === 'login'

registerFormContainer.classList.remove("active");

registerFormContainer.classList.add("hidden");

loginFormContainer.classList.add("active");

loginFormContainer.classList.remove("hidden");

welcomeMessage.textContent = "Hoş Geldiniz!";

// Ayı yüzünün stilini değiştir (giriş için)

bearFace.style.transform = "translateY(-5px) rotate(-5deg)";

setTimeout(() => {

bearFace.style.transform = "translateY(0) rotate(0deg)";

}, 600);

}

showRegisterLink.addEventListener("click", function(e) {

e.preventDefault();

switchForm('register');

});

showLoginLink.addEventListener("click", function(e) {

e.preventDefault();

switchForm('login');

});

// Göz hareketlerini izleme

const authContainer = document.querySelector(".auth-container");

const eyeballL = document.querySelector(".eyeball-l");

const eyeballR = document.querySelector(".eyeball-r");

document.addEventListener("mousemove", (e) => {

const x = e.clientX;

const y = e.clientY;

const rect = authContainer.getBoundingClientRect();

// Ayı yüzünün yaklaşık merkezi

const bearCenterX = rect.left + rect.width / 3;

const bearCenterY = rect.top + rect.height / 2;

const maxMove = 6; // Göz hareketinin maksimum pikseli

const deltaX = x - bearCenterX;

const deltaY = y - bearCenterY;

// Mesafeyi normalize et ve maksimum hareket sınırını uygula

const moveX = Math.max(-1, Math.min(1, deltaX / 150)) * maxMove; // 150 ile bölerek hassasiyeti ayarla

const moveY = Math.max(-1, Math.min(1, deltaY / 150)) * maxMove;

eyeballL.style.transform = `translate(${moveX}px, ${moveY}px)`;

eyeballR.style.transform = `translate(${moveX}px, ${moveY}px)`;

});

// Şifre görünürlük kontrolü

const togglePasswordButtons = document.querySelectorAll(".toggle-password");

togglePasswordButtons.forEach(button => {

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

const passwordField = this.previousElementSibling;

if (passwordField.type === "password") {

passwordField.type = "text";

this.classList.remove("fa-eye-slash");

this.classList.add("fa-eye");

} else {

passwordField.type = "password";

this.classList.remove("fa-eye");

this.classList.add("fa-eye-slash");

}

});

// Şifre gücü kontrolü

const registerPassword = document.getElementById("register-password");

const passwordStrength = document.getElementById("password-strength");

const passwordText = document.getElementById("password-text");

if (registerPassword) {

registerPassword.addEventListener("input", function() {

const password = this.value;

let strength = 0;

if (password.length > 7) strength += 1; // Daha uzun şifreler

if (password.match(/[A-Z]/)) strength += 1;

if (password.match(/[0-9]/)) strength += 1;

if (password.match(/[^A-Za-z0-9]/)) strength += 1;

passwordStrength.className = "password-strength"; // Sınıfları sıfırla

if (password.length === 0) {

passwordStrength.style.width = "0";

passwordText.textContent = "Şifre gücü: Henüz girilmedi";

} else if (strength < 2) {

passwordStrength.classList.add("strength-weak");

passwordText.textContent = "Şifre gücü: Zayıf";

} else if (strength < 4) {

passwordStrength.classList.add("strength-medium");

passwordText.textContent = "Şifre gücü: Orta";

} else {

passwordStrength.classList.add("strength-strong");

passwordText.textContent = "Şifre gücü: Güçlü";

}

});

}

// Form gönderim olayları (simülasyon)

const loginSubmitForm = document.getElementById("login-form");

loginSubmitForm.addEventListener("submit", (e) => {

e.preventDefault();

const email = document.getElementById("login-email").value;

const password = document.getElementById("login-password").value;

const submitButton = loginSubmitForm.querySelector('.submit-button');

const originalButtonText = submitButton.textContent;

submitButton.textContent = 'Giriş Yapılıyor...';

submitButton.disabled = true;

if (email && password) {

// Giriş başarılı animasyonu: Ayı gülümsesin

bearFace.style.transition = "transform 0.5s ease";

bearFace.style.transform = "translateY(10px)";

mouth.style.transition = "all 0.5s ease";

mouth.style.height = "15px";

mouth.style.borderRadius = "50% 50% 0 0";

mouth.style.borderBottom = "none";

mouth.style.borderTop = "3px solid black";

setTimeout(() => {

alert("Giriş başarılı! Yönlendiriliyorsunuz...");

submitButton.textContent = 'Giriş Başarılı!';

setTimeout(() => {

submitButton.textContent = originalButtonText;

submitButton.disabled = false;

bearFace.style.transform = "translateY(0)";

mouth.style.height = "10px";

mouth.style.borderRadius = "50%";

mouth.style.borderTop = "none";

mouth.style.borderBottom = "3px solid black";

}, 1000);

}, 1500); // 1.5 saniye sonra başarılı mesajı

} else {

// Hata animasyonu: Ayı sallasın

const shakeDuration = 100;

bearFace.style.transition = "transform 0.1s ease";

bearFace.style.transform = "translateX(-5px)";

setTimeout(() => {

bearFace.style.transform = "translateX(5px)";

setTimeout(() => {

bearFace.style.transform = "translateX(-5px)";

setTimeout(() => {

bearFace.style.transform = "translateX(5px)";

setTimeout(() => {

bearFace.style.transform = "translateX(0)";

alert("Lütfen tüm alanları doldurun!");

submitButton.textContent = originalButtonText;

submitButton.disabled = false;

}, shakeDuration);

}

});

const registerSubmitForm = document.getElementById("register-form");

registerSubmitForm.addEventListener("submit", (e) => {

e.preventDefault();

const fullname = document.getElementById("register-fullname").value;

const email = document.getElementById("register-email").value;

const password = document.getElementById("register-password").value;

const submitButton = registerSubmitForm.querySelector('.submit-button');

const originalButtonText = submitButton.textContent;

submitButton.textContent = 'Kaydediliyor...';

submitButton.disabled = true;

if (fullname && email && password) {

// Başarılı kayıt animasyonu: Ayı şaşırsın ve sonra mutlu olsun

mouth.style.height = "15px";

mouth.style.width = "18px";

mouth.style.borderBottom = "3px solid black";

bearFace.style.transform = "translateY(-8px)";

setTimeout(() => {

// Mutlu ifade

mouth.style.height = "15px";

mouth.style.borderRadius = "50% 50% 0 0";

mouth.style.borderBottom = "none";

mouth.style.borderTop = "3px solid black";

setTimeout(() => {

alert("Kaydınız başarıyla oluşturuldu! Giriş sayfasına yönlendiriliyorsunuz...");

submitButton.textContent = 'Kayıt Başarılı!';

setTimeout(() => {

submitButton.textContent = originalButtonText;

submitButton.disabled = false;

switchForm('login'); // Otomatik olarak giriş formuna geç

// İfadeleri sıfırla

mouth.style.height = "10px";

mouth.style.width = "16px";

mouth.style.borderRadius = "50%";

mouth.style.borderTop = "none";

mouth.style.borderBottom = "3px solid black";

bearFace.style.transform = "translateY(0)";

}, 1000);

}, 800); // Ayı animasyonundan sonra mesaj

}, 300); // Şaşırma animasyonu süresi

} else {

// Hata animasyonu: Ayı sallasın

const shakeDuration = 100;

bearFace.style.transition = "transform 0.1s ease";

bearFace.style.transform = "translateX(-5px)";

setTimeout(() => {

bearFace.style.transform = "translateX(5px)";

setTimeout(() => {

bearFace.style.transform = "translateX(-5px)";

setTimeout(() => {

bearFace.style.transform = "translateX(5px)";

setTimeout(() => {

bearFace.style.transform = "translateX(0)";

alert("Lütfen tüm alanları doldurun!");

submitButton.textContent = originalButtonText;

submitButton.disabled = false;

}, shakeDuration);

}

});

// Input odaklanma animasyonu

const inputs = document.querySelectorAll("input");

inputs.forEach(input => {

input.addEventListener("focus", () => {

bearFace.style.transition = "transform 0.3s ease";

bearFace.style.transform = "translateY(-5px) scale(1.03)";

});

input.addEventListener("blur", () => {

bearFace.style.transition = "transform 0.3s ease";

bearFace.style.transform = "translateY(0) scale(1)";

});

</script>

</body>

</html>

CSS

JS

Mete'nin bir kodu

Recommended