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>

Mete'nin bir kodu

Recommended

Animated Link Hover

Ethereum hover card

Portfolio Landing Page

HTML

CSS

JS

Recommended

Animated Link Hover

Ethereum hover card

Portfolio Landing Page

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS