Webleb - UI Elements - Metenin bir kodu

HTML

<!DOCTYPE html>

<head>

<title>Professional Lion Login & Registration</title>

<style>

* {

padding: 0;

margin: 0;

box-sizing: border-box;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

:root {

--primary-color: #dc143c;

--secondary-color: #ff6b6b;

--accent-color: #e74c3c;

--background-color: #ffe6e6;

--form-bg-color: #ffffff;

--text-color: #333333;

--input-border: #ddd;

--button-hover: #b71c1c;

--shadow-color: rgba(220, 20, 60, 0.25);

}

body {

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

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

}

.login-container {

display: flex;

width: 850px;

max-width: 95%;

height: 530px;

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

border-radius: 16px;

box-shadow: 0 10px 30px var(--shadow-color);

overflow: hidden;

position: relative;

}

.bear-side {

flex: 1;

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

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

flex: 1.2;

padding: 40px;

display: flex;

flex-direction: column;

justify-content: center;

}

.login-title {

font-size: 28px;

color: var(--primary-color);

margin-bottom: 20px;

font-weight: 700;

transition: all 0.3s ease;

}

.input-group {

margin-bottom: 20px;

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: 12px 15px;

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

border-radius: 8px;

font-size: 15px;

transition: all 0.3s ease;

}

.input-group input:focus {

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

outline: none;

box-shadow: 0 0 0 3px rgba(220, 20, 60, 0.1);

}

.input-group i {

position: absolute;

right: 15px;

bottom: 15px;

color: #999;

cursor: pointer;

}

.options {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 25px;

font-size: 14px;

}

.remember {

display: flex;

align-items: center;

}

.remember input {

margin-right: 8px;

}

.forgot-password {

color: var(--accent-color);

text-decoration: none;

font-weight: 500;

}

.forgot-password:hover {

text-decoration: underline;

}

.submit-button {

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

color: white;

border: none;

border-radius: 8px;

padding: 14px;

font-size: 16px;

font-weight: 600;

cursor: pointer;

transition: all 0.3s ease;

width: 100%;

}

.submit-button:hover {

background: linear-gradient(135deg, var(--button-hover) 0%, var(--primary-color) 100%);

transform: translateY(-2px);

box-shadow: 0 5px 15px rgba(220, 20, 60, 0.4);

}

.submit-button:active {

transform: translateY(0);

}

.toggle-link {

text-align: center;

margin-top: 25px;

font-size: 14px;

color: var(--text-color);

}

.toggle-link a {

color: var(--accent-color);

font-weight: 600;

text-decoration: none;

cursor: pointer;

}

.toggle-link a:hover {

text-decoration: underline;

}

/* Lion Character */

.bear-container {

position: relative;

width: 220px;

height: 220px;

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

}

/* Lion Face */

.bear-face {

position: absolute;

background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);

height: 140px;

width: 160px;

border-radius: 50% 50% 60% 60%;

top: 20px;

left: 30px;

transition: all 0.4s ease;

box-shadow: 0 5px 20px rgba(220, 20, 60, 0.3);

}

/* Lion Mane */

.mane {

position: absolute;

width: 200px;

height: 200px;

border-radius: 50%;

background: radial-gradient(circle, #ff6b6b 0%, #ff4444 50%, #cc0000 100%);

top: -10px;

left: 10px;

z-index: -1;

box-shadow: 0 0 30px rgba(255, 75, 75, 0.5);

}

.mane::before {

content: "";

position: absolute;

width: 100%;

height: 100%;

border-radius: 50%;

background: repeating-conic-gradient(

from 0deg,

#ff8888 0deg 10deg,

#ff4444 10deg 20deg,

#cc0000 20deg 30deg,

#ff6b6b 30deg 40deg

);

opacity: 0.7;

animation: rotate 20s linear infinite;

}

@keyframes rotate {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

/* Ears */

.ear-l, .ear-r {

background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);

height: 45px;

width: 45px;

border-radius: 50% 50% 20% 20%;

position: absolute;

top: 10px;

transition: all 0.4s ease;

box-shadow: 0 3px 10px rgba(220, 20, 60, 0.3);

}

.ear-l {

left: 25px;

}

.ear-r {

right: 25px;

}

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

position: absolute;

content: "";

height: 25px;

width: 25px;

background: linear-gradient(135deg, #ff8888 0%, #ff4444 100%);

border-radius: 50%;

top: 8px;

}

.ear-l:before {

left: 10px;

}

.ear-r:before {

right: 10px;

}

/* Eyes */

.eye-l, .eye-r {

background-color: white;

height: 28px;

width: 26px;

border-radius: 50%;

position: absolute;

top: 45px;

transition: all 0.4s ease;

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

}

.eye-l {

left: 38px;

}

.eye-r {

right: 38px;

}

.eyeball-l, .eyeball-r {

background: radial-gradient(circle, #000 0%, #333 100%);

height: 14px;

width: 14px;

border-radius: 50%;

position: absolute;

top: 7px;

transition: all 0.2s ease;

}

.eyeball-l {

left: 6px;

}

.eyeball-r {

right: 6px;

}

/* Lion Nose */

.snout {

position: absolute;

background: linear-gradient(135deg, #ff8888 0%, #ff6b6b 100%);

height: 45px;

width: 60px;

border-radius: 50% 50% 30% 30%;

top: 70px;

left: 50px;

box-shadow: 0 3px 10px rgba(220, 20, 60, 0.2);

}

/* Nose */

.nose {

background: linear-gradient(135deg, #000 0%, #333 100%);

height: 12px;

width: 14px;

border-radius: 50% 50% 30% 30%;

position: relative;

top: 12px;

left: 23px;

}

/* Mouth */

.mouth {

height: 10px;

width: 16px;

border-bottom: 3px solid #000;

border-radius: 50%;

position: relative;

top: 18px;

left: 22px;

transition: all 0.4s ease;

}

/* Whiskers */

.whiskers {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

}

.whisker {

position: absolute;

width: 30px;

height: 2px;

background: linear-gradient(90deg, transparent 0%, #000 50%, transparent 100%);

border-radius: 2px;

}

.whisker-1 {

top: 80px;

left: 10px;

transform: rotate(-10deg);

}

.whisker-2 {

top: 90px;

left: 5px;

transform: rotate(10deg);

}

.whisker-3 {

top: 80px;

right: 10px;

transform: rotate(10deg);

}

.whisker-4 {

top: 90px;

right: 5px;

transform: rotate(-10deg);

}

/* Welcome Message */

.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.3);

transition: all 0.6s ease;

}

/* Form Switching */

.form-container {

width: 100%;

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

}

.login-form, .register-form {

transition: opacity 0.3s ease;

}

.hidden {

display: none;

opacity: 0;

}

/* Responsive Design */

@media (max-width: 768px) {

.login-container {

flex-direction: column;

height: auto;

min-height: 90vh;

}

.bear-side {

height: 200px;

}

.bear-container {

transform: scale(0.8);

}

.form-side {

padding: 30px 20px;

}

.login-title {

margin-bottom: 20px;

font-size: 24px;

}

/* Animation */

@keyframes float {

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

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

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

}

.bear-container {

animation: float 3s ease-in-out infinite;

}

@keyframes pulse {

0% { transform: scale(1); }

50% { transform: scale(1.05); }

100% { transform: scale(1); }

}

.submit-button:hover {

animation: pulse 1s infinite;

}

/* Password strength indicator */

.password-strength {

height: 5px;

margin-top: 8px;

border-radius: 3px;

transition: all 0.3s ease;

background-color: #ddd;

}

.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: 12px;

margin-top: 5px;

color: #666;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

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

</div>

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

<label for="login-username">Kullanıcı Adı</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>

</form>

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

</div>

<h1 class="login-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-username">Kullanıcı Adı</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>

</form>

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

</div>

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

// Form değiştirme işlemleri

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

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

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

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

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

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

// Kayıt formuna geçiş

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

loginForm.classList.add("hidden");

registerForm.classList.remove("hidden");

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

// Aslan yüzünün stilini değiştir

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

setTimeout(() => {

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

}, 600);

});

// Giriş formuna geçiş

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

registerForm.classList.add("hidden");

loginForm.classList.remove("hidden");

welcomeMessage.textContent = "Hoş Geldiniz!";

// Aslan yüzünün stilini değiştir

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

setTimeout(() => {

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

}, 600);

});

// Göz hareketlerini izleme

const container = document.querySelector(".login-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 = container.getBoundingClientRect();

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

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

const maxMove = 4;

// Hesaplama: fare ile aslan yüzü arasındaki mesafe

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 / 100)) * maxMove;

const moveY = Math.max(-1, Math.min(1, deltaY / 100)) * 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");

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

const password = this.value;

let strength = 0;

if (password.length > 6) strength += 1;

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

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ü";

}

});

// Login Form gönderme olayı

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

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

e.preventDefault();

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

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

if (username && password) {

// Giriş animasyonu

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

const mouth = document.querySelector(".mouth");

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

// Başarılı giriş mesajı

setTimeout(() => {

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

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

setTimeout(() => {

mouth.style.height = "10px";

mouth.style.borderRadius = "50%";

mouth.style.borderTop = "none";

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

}, 500);

}, 800);

} else {

// Hata animasyonu

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

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)";

}, 100);

alert("Lütfen kullanıcı adı ve şifre alanlarını doldurun!");

}

});

// Kayıt formu gönderme olayı

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 username = document.getElementById("register-username").value;

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

if (fullname && email && username && password) {

// Başarılı kayıt animasyonu

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

const mouth = document.querySelector(".mouth");

// Şaşırma ifadesi

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...");

// Giriş formuna dön

registerForm.classList.add("hidden");

loginForm.classList.remove("hidden");

welcomeMessage.textContent = "Hoş Geldiniz!";

// İfadeleri sıfırla

setTimeout(() => {

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)";

}, 500);

}, 800);

}, 300);

} else {

// Hata animasyonu

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

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)";

}, 100);

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

}

});

// Input odaklanma animasyonu

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

inputs.forEach(input => {

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

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

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

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

});

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

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

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

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

});

</script>

</body>

</html>

CSS

JS