Webleb - Extraits de Code - Un code de Mete

HTML

CSS

<!DOCTYPE html>

<head>

<title>MATRİX | Matrix Bear Login & Register</title>

<style>

/* Genel Sıfırlama ve Font */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Share Tech Mono', monospace; /* Matrix fontu */

}

/* Renk Paleti ve Arka Plan */

:root {

--matrix-green: #0f0;

--matrix-dark-green: #0a0;

--matrix-darkest-green: #020e02;

--matrix-background: linear-gradient(135deg, #041504, #072d07);

--matrix-accent: #072d07;

--input-bg-dark: rgba(0, 20, 0, 0.7);

--input-border-dark: #0a0;

--shadow-green: rgba(0, 255, 0, 0.2);

}

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: var(--matrix-background);

padding: 20px;

color: var(--matrix-green);

overflow: hidden; /* Matrix yağmuru için */

position: relative;

}

/* Matrix Yağmuru Efekti için Container */

.matrix-overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

z-index: 0; /* İçeriğin arkasında kalması için */

overflow: hidden;

background: linear-gradient(to bottom, rgba(0, 20, 0, 0.05), rgba(0, 10, 0, 0.1)); /* Hafif bir gradyan */

}

.code-column {

position: absolute;

top: -100px; /* Başlangıç dışarıda */

font-size: 12px;

color: var(--matrix-green);

text-shadow: 0 0 5px var(--matrix-green);

white-space: nowrap;

opacity: 0.7;

animation: codeRain linear infinite;

}

@keyframes codeRain {

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

100% { transform: translateY(calc(100vh + 100px)); } /* Tüm ekranı kaplasın */

}

/* Ana Kimlik Doğrulama Konteyneri */

.auth-container {

display: flex;

width: 900px; /* Biraz daha geniş */

min-height: 550px; /* Daha fazla alan */

border-radius: 20px;

overflow: hidden;

box-shadow: 0 10px 40px var(--shadow-green);

border: 1px solid var(--matrix-dark-green);

position: relative; /* Z-index için */

z-index: 1; /* Matrix yağmurunun üzerinde olması için */

background: rgba(2, 14, 2, 0.9); /* Yarı şeffaf koyu arka plan */

}

/* Ayı Yanı (Sol Taraf) */

.bear-side {

flex: 1;

background: linear-gradient(135deg, var(--matrix-accent), var(--matrix-darkest-green));

position: relative;

display: flex;

flex-direction: column; /* Dikey hizalama için */

align-items: center;

justify-content: center;

overflow: hidden;

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

border-right: 1px solid var(--matrix-dark-green);

}

.bear-side .logo-matrix {

position: absolute;

top: 30px;

left: 50%;

transform: translateX(-50%);

text-align: center;

z-index: 2;

}

.bear-side .logo-matrix h1 {

color: var(--matrix-green);

font-size: 38px;

letter-spacing: 3px;

font-weight: bold;

text-shadow: 0 0 8px var(--matrix-green), 0 0 15px var(--matrix-green);

margin-bottom: 5px;

}

.bear-side .logo-matrix p {

color: var(--matrix-dark-green);

font-size: 14px;

opacity: 0.8;

}

.welcome-text {

position: absolute;

width: 100%;

text-align: center;

bottom: 40px;

color: var(--matrix-green);

font-size: 24px;

font-weight: 700;

opacity: 0.9;

text-shadow: 0 0 5px var(--matrix-green);

transition: all 0.6s ease;

z-index: 2;

}

/* Ayı Karakteri Stil Ayarları (Matrix Temasına Uygun) */

.bear-container {

position: relative;

width: 220px;

height: 220px;

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

z-index: 2;

}

.bear-face {

background-color: var(--matrix-darkest-green); /* Koyu yeşil */

border: 2px solid var(--matrix-dark-green);

}

.ear-l, .ear-r {

background-color: var(--matrix-darkest-green);

border: 2px solid var(--matrix-dark-green);

}

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

background-color: rgba(0, 255, 0, 0.1); /* Hafif yeşil iç kısım */

}

.eye-l, .eye-r {

background-color: rgba(0, 255, 0, 0.2); /* Yarı şeffaf yeşil göz beyazı */

border: 1px solid var(--matrix-green);

}

.eyeball-l, .eyeball-r {

background-color: var(--matrix-green); /* Parlak yeşil gözbebekleri */

}

.blush-l, .blush-r {

background-color: rgba(0, 255, 0, 0.1); /* Hafif yeşil allık */

}

.snout {

background-color: var(--matrix-dark-green); /* Koyu yeşil burun */

border: 1px solid var(--matrix-green);

}

.nose {

background-color: var(--matrix-green); /* Parlak yeşil burun */

}

.mouth {

border-bottom: 3px solid var(--matrix-green); /* Yeşil ağız çizgisi */

}

/* Form Yanı (Sağ Taraf) */

.form-side {

flex: 1.2;

padding: 40px;

display: flex;

flex-direction: column;

justify-content: center;

background: rgba(0, 0, 0, 0.8); /* Matrix siyahı */

color: var(--matrix-green);

}

.auth-title {

font-size: 28px; /* Daha küçük başlık */

color: var(--matrix-green);

margin-bottom: 25px;

font-weight: bold;

text-align: center;

letter-spacing: 2px;

text-shadow: 0 0 5px var(--matrix-green);

}

/* Input Alanları */

.input-group {

margin-bottom: 20px;

position: relative;

}

.input-group label {

display: block;

margin-bottom: 8px;

color: var(--matrix-dark-green);

font-size: 14px;

}

.input-group input {

width: 100%;

padding: 12px 15px 12px 40px;

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

border-radius: 8px;

outline: none;

font-size: 16px;

transition: all 0.3s;

background-color: var(--input-bg-dark);

color: var(--matrix-green);

text-shadow: 0 0 2px var(--matrix-green);

}

.input-group input::placeholder {

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

}

.input-group input:focus {

border-color: var(--matrix-green);

box-shadow: 0 0 0 3px var(--shadow-green);

background-color: rgba(0, 30, 0, 0.8);

}

.input-group i {

position: absolute;

left: 15px;

top: 50%;

transform: translateY(-50%);

color: var(--matrix-dark-green);

transition: all 0.3s ease;

}

.input-group input:focus + i {

color: var(--matrix-green);

text-shadow: 0 0 5px var(--matrix-green);

}

.toggle-password { /* Sağ tarafta şifre ikonları */

right: 15px;

left: auto;

cursor: pointer;

}

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

.options {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 20px;

font-size: 14px;

}

.remember-me {

display: flex;

align-items: center;

color: var(--matrix-dark-green);

}

.remember-me input {

margin-right: 8px;

accent-color: var(--matrix-green);

width: 16px;

height: 16px;

}

.forgot-password {

color: var(--matrix-green);

text-decoration: none;

font-weight: bold;

transition: all 0.3s ease;

text-shadow: 0 0 2px var(--matrix-green);

}

.forgot-password:hover {

text-decoration: underline;

text-shadow: 0 0 8px var(--matrix-green);

}

/* Butonlar */

.submit-button {

width: 100%;

padding: 14px;

border: none;

background: var(--matrix-dark-green);

color: #000; /* Buton içi yazı rengi */

font-size: 18px;

font-weight: bold;

border-radius: 8px;

cursor: pointer;

transition: 0.3s;

margin-bottom: 20px;

text-transform: uppercase;

letter-spacing: 1px;

box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3);

border: 1px solid var(--matrix-green);

}

.submit-button:hover {

background: var(--matrix-green);

color: var(--matrix-darkest-green); /* Hoverda yazı rengi değişimi */

transform: translateY(-2px);

box-shadow: 0 6px 15px rgba(0, 255, 0, 0.4);

text-shadow: none;

}

.submit-button:active {

transform: translateY(0);

box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3);

}

/* Form Geçiş Linki */

.toggle-link {

text-align: center;

margin-top: 15px;

font-size: 14px;

color: var(--matrix-dark-green);

}

.toggle-link a {

color: var(--matrix-green);

text-decoration: none;

font-weight: bold;

text-shadow: 0 0 2px var(--matrix-green);

}

.toggle-link a:hover {

text-decoration: underline;

text-shadow: 0 0 8px var(--matrix-green);

}

/* Form Gizleme/Gösterimi */

.form-container-inner { /* İçteki formları tutan div */

position: relative;

height: 100%; /* Parent'ı kadar yüksek olsun */

padding-top: 20px; /* Başlıklar için boşluk */

}

.login-form, .register-form {

position: absolute;

width: 100%;

opacity: 0;

pointer-events: none;

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

transform: translateX(20px);

top: 0; /* İç konteynerin üstüne hizala */

left: 0;

}

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

opacity: 1;

pointer-events: all;

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

transform: translateX(0);

}

/* Sosyal Medya Butonları */

.alternative-login {

text-align: center;

width: 100%;

}

.alternative-login p {

color: var(--matrix-dark-green);

margin: 15px 0;

position: relative;

text-transform: uppercase;

font-size: 12px;

}

.alternative-login p::before,

.alternative-login p::after {

content: "";

position: absolute;

top: 50%;

width: 30%;

height: 1px;

background-color: var(--matrix-darkest-green);

}

.alternative-login p::before { left: 0; }

.alternative-login p::after { right: 0; }

.social-buttons {

display: flex;

justify-content: center;

gap: 15px;

margin-top: 15px;

margin-bottom: 10px; /* Alttan boşluk */

}

.social-button {

display: flex;

align-items: center;

justify-content: center;

width: 45px; /* Daha büyük */

height: 45px;

border-radius: 50%;

background: rgba(0, 20, 0, 0.5); /* Hafif şeffaf */

transition: 0.3s;

cursor: pointer;

color: var(--matrix-green);

border: 1px solid var(--matrix-dark-green);

box-shadow: 0 0 8px rgba(0, 255, 0, 0.1);

font-size: 18px;

}

.social-button:hover {

background: var(--matrix-dark-green);

transform: translateY(-2px);

box-shadow: 0 0 15px var(--shadow-green);

color: var(--matrix-green);

}

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

.password-strength {

height: 6px;

margin-top: 10px;

border-radius: 4px;

transition: all 0.3s ease;

background-color: rgba(0, 255, 0, 0.1); /* Hafif yeşil */

}

.strength-weak { background-color: #ff4d4d; width: 30%; } /* Kırmızı */

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

.strength-strong { background-color: #2ecc71; width: 100%; } /* Parlak yeşil */

.password-text {

font-size: 13px;

margin-top: 8px;

color: var(--matrix-dark-green);

font-weight: 500;

}

/* Responsive Tasarım */

@media (max-width: 900px) {

.auth-container {

flex-direction: column;

width: 95%;

min-height: auto;

}

.bear-side {

height: 250px;

border-bottom: 1px solid var(--matrix-dark-green);

border-right: none;

}

.bear-container {

transform: scale(0.8) translateY(-10px);

}

.welcome-text {

font-size: 20px;

bottom: 20px;

}

.bear-side .logo-matrix {

top: 20px;

}

.form-side {

padding: 30px 20px;

}

.auth-title {

font-size: 24px;

}

@media (max-width: 500px) {

.form-side {

padding: 20px 15px;

}

.auth-title {

font-size: 22px;

margin-bottom: 20px;

}

.social-button {

width: 40px;

height: 40px;

font-size: 16px;

}

/* Animasyonlar (Önceki koddan) */

@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); }

100% { transform: scale(1); }

}

.submit-button:hover {

animation: pulse 1s infinite;

}

</style>

</head>

<body>

<h1>MATRİX</h1>

<p>Ajan Eğitimi Başlatılıyor...</p>

</div>

</div>

</div>

</div>

<div class="welcome-text" id="welcome-message">Sisteme Giriş Yap</div>

</div>

<h1 class="auth-title">Veri Akışına Katılın</h1>

<label for="login-email">Kullanıcı Adı / E-posta</label>

</div>

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

</div>

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

</div>

<a href="#" class="forgot-password">Şifreyi Unuttum?</a>

</div>

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

<p>Veya Biyometrik Giriş</p>

</div>

</div>

</div>

</div>

</form>

Hesabınız yok mu? <a id="show-register">Yeni Profil Oluştur</a>

</div>

<h1 class="auth-title">Yeni Protokol Başlat</h1>

</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">Profil Oluştur</button>

<p>Veya Alternatif Kayıt</p>

</div>

</div>

</div>

</div>

</form>

Zaten bir profiliniz var mı? <a id="show-login">Giriş Yap</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");

const matrixOverlay = document.getElementById('matrix-overlay');

const fingerprintLoginBtn = document.getElementById('fingerprint-login-btn');

// Form değiştirme fonksiyonu

function switchForm(targetForm) {

if (targetForm === 'register') {

loginFormContainer.classList.remove("active");

loginFormContainer.classList.add("hidden"); // Gizleme sınıfını ekle

registerFormContainer.classList.add("active");

registerFormContainer.classList.remove("hidden"); // Gizleme sınıfını kaldır

welcomeMessage.textContent = "Yeni Profil Oluştur";

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"); // Gizleme sınıfını ekle

loginFormContainer.classList.add("active");

loginFormContainer.classList.remove("hidden"); // Gizleme sınıfını kaldır

welcomeMessage.textContent = "Sisteme Giriş Yap";

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

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

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

const maxMove = 6;

const deltaX = x - bearCenterX;

const deltaY = y - bearCenterY;

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

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;

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

}

});

}

// 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 = 'Veri Akışı Başlatı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 var(--matrix-green)"; // Matrix yeşili ağız

setTimeout(() => {

alert("Erişim Sağlandı! Matrix'e Hoş Geldiniz...");

submitButton.textContent = 'Erişim 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 var(--matrix-green)"; // Matrix yeşili ağız

}, 1000);

}, 1500);

} 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("Hata: Kimlik Bilgileri Eksik!");

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 = 'Profil Oluşturuluyor...';

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 var(--matrix-green)";

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 var(--matrix-green)";

setTimeout(() => {

alert("Yeni Profil Başarıyla Oluşturuldu! Giriş Ekranına Yönlendiriliyorsunuz...");

submitButton.textContent = 'Profil Oluşturuldu!';

setTimeout(() => {

submitButton.textContent = originalButtonText;

submitButton.disabled = false;

switchForm('login');

mouth.style.height = "10px";

mouth.style.width = "16px";

mouth.style.borderRadius = "50%";

mouth.style.borderTop = "none";

mouth.style.borderBottom = "3px solid var(--matrix-green)";

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

}, 1000);

}, 800);

}, 300);

} 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("Hata: 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)";

});

// Matrix rain effect

function createMatrixRain() {

const characterSet = "01abcdefghijklmnoöprsştuüvyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+-=[]{}|;':\",./<>?`~ ";

const columns = Math.floor(matrixOverlay.offsetWidth / 12); // Her sütun 12px genişliğinde

for (let i = 0; i < columns; i++) {

const column = document.createElement('div');

column.className = 'code-column';

column.style.left = (i * 12) + 'px';

column.style.animationDuration = (3 + Math.random() * 7) + 's'; // 3-10 saniye arası

let columnContent = '';

const columnLength = 10 + Math.floor(Math.random() * 20); // 10-30 karakter

for (let j = 0; j < columnLength; j++) {

columnContent += characterSet.charAt(Math.floor(Math.random() * characterSet.length));

}

column.textContent = columnContent; // textContent kullan, <br> kullanma

matrixOverlay.appendChild(column);

// Her sütunu farklı bir başlangıç noktasına ayarla

column.style.animationDelay = `-${Math.random() * column.offsetHeight / (column.offsetHeight / parseFloat(column.style.animationDuration)) * 1000}ms`;

}

// Matrix effect'i DOM yüklendikten sonra başlat

createMatrixRain();

// Parmak izi giriş butonu (simülasyon)

fingerprintLoginBtn.addEventListener('click', function() {

this.style.transform = 'scale(0.9)'; // Basma efekti

setTimeout(() => {

this.style.transform = 'scale(1)';

alert('Biyometrik doğrulama başlatıldı. Lütfen parmağınızı sensöre koyun...');

// Gerçek bir uygulamada burada biyometrik API çağrılır

}, 200);

});

</script>

</body>

</html>

Validating your code, please wait...

HTML

CSS

<!DOCTYPE html>

<head>

<title>MATRİX | Matrix Bear Login & Register</title>

<style>

/* Genel Sıfırlama ve Font */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Share Tech Mono', monospace; /* Matrix fontu */

}

/* Renk Paleti ve Arka Plan */

:root {

--matrix-green: #0f0;

--matrix-dark-green: #0a0;

--matrix-darkest-green: #020e02;

--matrix-background: linear-gradient(135deg, #041504, #072d07);

--matrix-accent: #072d07;

--input-bg-dark: rgba(0, 20, 0, 0.7);

--input-border-dark: #0a0;

--shadow-green: rgba(0, 255, 0, 0.2);

}

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: var(--matrix-background);

padding: 20px;

color: var(--matrix-green);

overflow: hidden; /* Matrix yağmuru için */

position: relative;

}

/* Matrix Yağmuru Efekti için Container */

.matrix-overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

z-index: 0; /* İçeriğin arkasında kalması için */

overflow: hidden;

background: linear-gradient(to bottom, rgba(0, 20, 0, 0.05), rgba(0, 10, 0, 0.1)); /* Hafif bir gradyan */

}

.code-column {

position: absolute;

top: -100px; /* Başlangıç dışarıda */

font-size: 12px;

color: var(--matrix-green);

text-shadow: 0 0 5px var(--matrix-green);

white-space: nowrap;

opacity: 0.7;

animation: codeRain linear infinite;

}

@keyframes codeRain {

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

100% { transform: translateY(calc(100vh + 100px)); } /* Tüm ekranı kaplasın */

}

/* Ana Kimlik Doğrulama Konteyneri */

.auth-container {

display: flex;

width: 900px; /* Biraz daha geniş */

min-height: 550px; /* Daha fazla alan */

border-radius: 20px;

overflow: hidden;

box-shadow: 0 10px 40px var(--shadow-green);

border: 1px solid var(--matrix-dark-green);

position: relative; /* Z-index için */

z-index: 1; /* Matrix yağmurunun üzerinde olması için */

background: rgba(2, 14, 2, 0.9); /* Yarı şeffaf koyu arka plan */

}

/* Ayı Yanı (Sol Taraf) */

.bear-side {

flex: 1;

background: linear-gradient(135deg, var(--matrix-accent), var(--matrix-darkest-green));

position: relative;

display: flex;

flex-direction: column; /* Dikey hizalama için */

align-items: center;

justify-content: center;

overflow: hidden;

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

border-right: 1px solid var(--matrix-dark-green);

}

.bear-side .logo-matrix {

position: absolute;

top: 30px;

left: 50%;

transform: translateX(-50%);

text-align: center;

z-index: 2;

}

.bear-side .logo-matrix h1 {

color: var(--matrix-green);

font-size: 38px;

letter-spacing: 3px;

font-weight: bold;

text-shadow: 0 0 8px var(--matrix-green), 0 0 15px var(--matrix-green);

margin-bottom: 5px;

}

.bear-side .logo-matrix p {

color: var(--matrix-dark-green);

font-size: 14px;

opacity: 0.8;

}

.welcome-text {

position: absolute;

width: 100%;

text-align: center;

bottom: 40px;

color: var(--matrix-green);

font-size: 24px;

font-weight: 700;

opacity: 0.9;

text-shadow: 0 0 5px var(--matrix-green);

transition: all 0.6s ease;

z-index: 2;

}

/* Ayı Karakteri Stil Ayarları (Matrix Temasına Uygun) */

.bear-container {

position: relative;

width: 220px;

height: 220px;

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

z-index: 2;

}

.bear-face {

background-color: var(--matrix-darkest-green); /* Koyu yeşil */

border: 2px solid var(--matrix-dark-green);

}

.ear-l, .ear-r {

background-color: var(--matrix-darkest-green);

border: 2px solid var(--matrix-dark-green);

}

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

background-color: rgba(0, 255, 0, 0.1); /* Hafif yeşil iç kısım */

}

.eye-l, .eye-r {

background-color: rgba(0, 255, 0, 0.2); /* Yarı şeffaf yeşil göz beyazı */

border: 1px solid var(--matrix-green);

}

.eyeball-l, .eyeball-r {

background-color: var(--matrix-green); /* Parlak yeşil gözbebekleri */

}

.blush-l, .blush-r {

background-color: rgba(0, 255, 0, 0.1); /* Hafif yeşil allık */

}

.snout {

background-color: var(--matrix-dark-green); /* Koyu yeşil burun */

border: 1px solid var(--matrix-green);

}

.nose {

background-color: var(--matrix-green); /* Parlak yeşil burun */

}

.mouth {

border-bottom: 3px solid var(--matrix-green); /* Yeşil ağız çizgisi */

}

/* Form Yanı (Sağ Taraf) */

.form-side {

flex: 1.2;

padding: 40px;

display: flex;

flex-direction: column;

justify-content: center;

background: rgba(0, 0, 0, 0.8); /* Matrix siyahı */

color: var(--matrix-green);

}

.auth-title {

font-size: 28px; /* Daha küçük başlık */

color: var(--matrix-green);

margin-bottom: 25px;

font-weight: bold;

text-align: center;

letter-spacing: 2px;

text-shadow: 0 0 5px var(--matrix-green);

}

/* Input Alanları */

.input-group {

margin-bottom: 20px;

position: relative;

}

.input-group label {

display: block;

margin-bottom: 8px;

color: var(--matrix-dark-green);

font-size: 14px;

}

.input-group input {

width: 100%;

padding: 12px 15px 12px 40px;

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

border-radius: 8px;

outline: none;

font-size: 16px;

transition: all 0.3s;

background-color: var(--input-bg-dark);

color: var(--matrix-green);

text-shadow: 0 0 2px var(--matrix-green);

}

.input-group input::placeholder {

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

}

.input-group input:focus {

border-color: var(--matrix-green);

box-shadow: 0 0 0 3px var(--shadow-green);

background-color: rgba(0, 30, 0, 0.8);

}

.input-group i {

position: absolute;

left: 15px;

top: 50%;

transform: translateY(-50%);

color: var(--matrix-dark-green);

transition: all 0.3s ease;

}

.input-group input:focus + i {

color: var(--matrix-green);

text-shadow: 0 0 5px var(--matrix-green);

}

.toggle-password { /* Sağ tarafta şifre ikonları */

right: 15px;

left: auto;

cursor: pointer;

}

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

.options {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 20px;

font-size: 14px;

}

.remember-me {

display: flex;

align-items: center;

color: var(--matrix-dark-green);

}

.remember-me input {

margin-right: 8px;

accent-color: var(--matrix-green);

width: 16px;

height: 16px;

}

.forgot-password {

color: var(--matrix-green);

text-decoration: none;

font-weight: bold;

transition: all 0.3s ease;

text-shadow: 0 0 2px var(--matrix-green);

}

.forgot-password:hover {

text-decoration: underline;

text-shadow: 0 0 8px var(--matrix-green);

}

/* Butonlar */

.submit-button {

width: 100%;

padding: 14px;

border: none;

background: var(--matrix-dark-green);

color: #000; /* Buton içi yazı rengi */

font-size: 18px;

font-weight: bold;

border-radius: 8px;

cursor: pointer;

transition: 0.3s;

margin-bottom: 20px;

text-transform: uppercase;

letter-spacing: 1px;

box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3);

border: 1px solid var(--matrix-green);

}

.submit-button:hover {

background: var(--matrix-green);

color: var(--matrix-darkest-green); /* Hoverda yazı rengi değişimi */

transform: translateY(-2px);

box-shadow: 0 6px 15px rgba(0, 255, 0, 0.4);

text-shadow: none;

}

.submit-button:active {

transform: translateY(0);

box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3);

}

/* Form Geçiş Linki */

.toggle-link {

text-align: center;

margin-top: 15px;

font-size: 14px;

color: var(--matrix-dark-green);

}

.toggle-link a {

color: var(--matrix-green);

text-decoration: none;

font-weight: bold;

text-shadow: 0 0 2px var(--matrix-green);

}

.toggle-link a:hover {

text-decoration: underline;

text-shadow: 0 0 8px var(--matrix-green);

}

/* Form Gizleme/Gösterimi */

.form-container-inner { /* İçteki formları tutan div */

position: relative;

height: 100%; /* Parent'ı kadar yüksek olsun */

padding-top: 20px; /* Başlıklar için boşluk */

}

.login-form, .register-form {

position: absolute;

width: 100%;

opacity: 0;

pointer-events: none;

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

transform: translateX(20px);

top: 0; /* İç konteynerin üstüne hizala */

left: 0;

}

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

opacity: 1;

pointer-events: all;

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

transform: translateX(0);

}

/* Sosyal Medya Butonları */

.alternative-login {

text-align: center;

width: 100%;

}

.alternative-login p {

color: var(--matrix-dark-green);

margin: 15px 0;

position: relative;

text-transform: uppercase;

font-size: 12px;

}

.alternative-login p::before,

.alternative-login p::after {

content: "";

position: absolute;

top: 50%;

width: 30%;

height: 1px;

background-color: var(--matrix-darkest-green);

}

.alternative-login p::before { left: 0; }

.alternative-login p::after { right: 0; }

.social-buttons {

display: flex;

justify-content: center;

gap: 15px;

margin-top: 15px;

margin-bottom: 10px; /* Alttan boşluk */

}

.social-button {

display: flex;

align-items: center;

justify-content: center;

width: 45px; /* Daha büyük */

height: 45px;

border-radius: 50%;

background: rgba(0, 20, 0, 0.5); /* Hafif şeffaf */

transition: 0.3s;

cursor: pointer;

color: var(--matrix-green);

border: 1px solid var(--matrix-dark-green);

box-shadow: 0 0 8px rgba(0, 255, 0, 0.1);

font-size: 18px;

}

.social-button:hover {

background: var(--matrix-dark-green);

transform: translateY(-2px);

box-shadow: 0 0 15px var(--shadow-green);

color: var(--matrix-green);

}

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

.password-strength {

height: 6px;

margin-top: 10px;

border-radius: 4px;

transition: all 0.3s ease;

background-color: rgba(0, 255, 0, 0.1); /* Hafif yeşil */

}

.strength-weak { background-color: #ff4d4d; width: 30%; } /* Kırmızı */

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

.strength-strong { background-color: #2ecc71; width: 100%; } /* Parlak yeşil */

.password-text {

font-size: 13px;

margin-top: 8px;

color: var(--matrix-dark-green);

font-weight: 500;

}

/* Responsive Tasarım */

@media (max-width: 900px) {

.auth-container {

flex-direction: column;

width: 95%;

min-height: auto;

}

.bear-side {

height: 250px;

border-bottom: 1px solid var(--matrix-dark-green);

border-right: none;

}

.bear-container {

transform: scale(0.8) translateY(-10px);

}

.welcome-text {

font-size: 20px;

bottom: 20px;

}

.bear-side .logo-matrix {

top: 20px;

}

.form-side {

padding: 30px 20px;

}

.auth-title {

font-size: 24px;

}

@media (max-width: 500px) {

.form-side {

padding: 20px 15px;

}

.auth-title {

font-size: 22px;

margin-bottom: 20px;

}

.social-button {

width: 40px;

height: 40px;

font-size: 16px;

}

/* Animasyonlar (Önceki koddan) */

@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); }

100% { transform: scale(1); }

}

.submit-button:hover {

animation: pulse 1s infinite;

}

</style>

</head>

<body>

<h1>MATRİX</h1>

<p>Ajan Eğitimi Başlatılıyor...</p>

</div>

</div>

</div>

</div>

<div class="welcome-text" id="welcome-message">Sisteme Giriş Yap</div>

</div>

<h1 class="auth-title">Veri Akışına Katılın</h1>

<label for="login-email">Kullanıcı Adı / E-posta</label>

</div>

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

</div>

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

</div>

<a href="#" class="forgot-password">Şifreyi Unuttum?</a>

</div>

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

<p>Veya Biyometrik Giriş</p>

</div>

</div>

</div>

</div>

</form>

Hesabınız yok mu? <a id="show-register">Yeni Profil Oluştur</a>

</div>

<h1 class="auth-title">Yeni Protokol Başlat</h1>

</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">Profil Oluştur</button>

<p>Veya Alternatif Kayıt</p>

</div>

</div>

</div>

</div>

</form>

Zaten bir profiliniz var mı? <a id="show-login">Giriş Yap</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");

const matrixOverlay = document.getElementById('matrix-overlay');

const fingerprintLoginBtn = document.getElementById('fingerprint-login-btn');

// Form değiştirme fonksiyonu

function switchForm(targetForm) {

if (targetForm === 'register') {

loginFormContainer.classList.remove("active");

loginFormContainer.classList.add("hidden"); // Gizleme sınıfını ekle

registerFormContainer.classList.add("active");

registerFormContainer.classList.remove("hidden"); // Gizleme sınıfını kaldır

welcomeMessage.textContent = "Yeni Profil Oluştur";

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"); // Gizleme sınıfını ekle

loginFormContainer.classList.add("active");

loginFormContainer.classList.remove("hidden"); // Gizleme sınıfını kaldır

welcomeMessage.textContent = "Sisteme Giriş Yap";

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

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

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

const maxMove = 6;

const deltaX = x - bearCenterX;

const deltaY = y - bearCenterY;

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

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;

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

}

});

}

// 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 = 'Veri Akışı Başlatı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 var(--matrix-green)"; // Matrix yeşili ağız

setTimeout(() => {

alert("Erişim Sağlandı! Matrix'e Hoş Geldiniz...");

submitButton.textContent = 'Erişim 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 var(--matrix-green)"; // Matrix yeşili ağız

}, 1000);

}, 1500);

} 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("Hata: Kimlik Bilgileri Eksik!");

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 = 'Profil Oluşturuluyor...';

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 var(--matrix-green)";

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 var(--matrix-green)";

setTimeout(() => {

alert("Yeni Profil Başarıyla Oluşturuldu! Giriş Ekranına Yönlendiriliyorsunuz...");

submitButton.textContent = 'Profil Oluşturuldu!';

setTimeout(() => {

submitButton.textContent = originalButtonText;

submitButton.disabled = false;

switchForm('login');

mouth.style.height = "10px";

mouth.style.width = "16px";

mouth.style.borderRadius = "50%";

mouth.style.borderTop = "none";

mouth.style.borderBottom = "3px solid var(--matrix-green)";

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

}, 1000);

}, 800);

}, 300);

} 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("Hata: 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)";

});

// Matrix rain effect

function createMatrixRain() {

const characterSet = "01abcdefghijklmnoöprsştuüvyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+-=[]{}|;':\",./<>?`~ ";

const columns = Math.floor(matrixOverlay.offsetWidth / 12); // Her sütun 12px genişliğinde

for (let i = 0; i < columns; i++) {

const column = document.createElement('div');

column.className = 'code-column';

column.style.left = (i * 12) + 'px';

column.style.animationDuration = (3 + Math.random() * 7) + 's'; // 3-10 saniye arası

let columnContent = '';

const columnLength = 10 + Math.floor(Math.random() * 20); // 10-30 karakter

for (let j = 0; j < columnLength; j++) {

columnContent += characterSet.charAt(Math.floor(Math.random() * characterSet.length));

}

column.textContent = columnContent; // textContent kullan, <br> kullanma

matrixOverlay.appendChild(column);

// Her sütunu farklı bir başlangıç noktasına ayarla

column.style.animationDelay = `-${Math.random() * column.offsetHeight / (column.offsetHeight / parseFloat(column.style.animationDuration)) * 1000}ms`;

}

// Matrix effect'i DOM yüklendikten sonra başlat

createMatrixRain();

// Parmak izi giriş butonu (simülasyon)

fingerprintLoginBtn.addEventListener('click', function() {

this.style.transform = 'scale(0.9)'; // Basma efekti

setTimeout(() => {

this.style.transform = 'scale(1)';

alert('Biyometrik doğrulama başlatıldı. Lütfen parmağınızı sensöre koyun...');

// Gerçek bir uygulamada burada biyometrik API çağrılır

}, 200);

});

</script>

</body>

</html>