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>

Metenin bir kodu

Recommended

CSS Loading Animation Snippet

Mete'nin bir kodu

Speech app

HTML

CSS

JS

Recommended

CSS Loading Animation Snippet

Mete'nin bir kodu

Speech app

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS