Webleb - Snippets de Código - Um código de Mete

HTML

<!DOCTYPE html>

<head>

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

<style>

* {

padding: 0;

margin: 0;

box-sizing: border-box;

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

}

:root {

--primary-color: #8b5a2b;

--secondary-color: #d8b596;

--accent-color: #a67c52;

--background-color: #f3eadf;

--form-bg-color: #ffffff;

--text-color: #333333;

--input-border: #ddd;

--button-hover: #6d462a;

--shadow-color: rgba(0, 0, 0, 0.15);

}

body {

background: linear-gradient(135deg, var(--background-color) 0%, #e6d0bc 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-color: var(--primary-color);

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(139, 90, 43, 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-color: var(--primary-color);

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-color: var(--button-hover);

transform: translateY(-2px);

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

}

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

}

/* Bear Character */

.bear-container {

position: relative;

width: 220px;

height: 220px;

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

}

/* Bear Face */

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

}

/* Ears */

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

}

/* Eyes */

.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 */

.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 */

.snout {

position: absolute;

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

height: 55px;

width: 70px;

border-radius: 50%;

top: 60px;

left: 45px;

}

/* Nose */

.nose {

background-color: black;

height: 14px;

width: 16px;

border-radius: 50%;

position: relative;

top: 15px;

left: 27px;

}

/* Mouth */

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

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

// Ayı 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!";

// Ayı 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 ayı 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>

Um código de Mete

Recomendado

Formulário de login HTML animado

Site de Portfólio de Desenvolvedor HTML

HTML

CSS

JS

Recomendado

Formulário de login HTML animado

Site de Portfólio de Desenvolvedor HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS