Matrix Login Register Form HTML CSS

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MASTEX.net | Matrix Bear Login & Register</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
  <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>
  <div class="matrix-overlay" id="matrix-overlay"></div>

<div class="auth-container">
    <div class="bear-side">
      <div class="logo-matrix">
        <h1>MASTEX.net</h1>
        <p>Ajan Eğitimi Başlatılıyor...</p>
      </div>
      <div class="bear-container">
        <div class="bear-face">
          <div class="ear-l"></div>
          <div class="ear-r"></div>
          <div class="eye-l">
            <div class="eyeball-l"></div>
          </div>
          <div class="eye-r">
            <div class="eyeball-r"></div>
          </div>
          <div class="blush-l"></div>
          <div class="blush-r"></div>
          <div class="snout">
            <div class="nose"></div>
            <div class="mouth"></div>
          </div>
        </div>
      </div>
      <div class="welcome-text" id="welcome-message">Sisteme Giriş Yap</div>
    </div>

<div class="form-side">
        <div class="form-container-inner">
            <div class="login-form active" id="login-form-container">
                <h1 class="auth-title">Veri Akışına Katılın</h1>
                <form id="login-form">
                    <div class="input-group">
                        <label for="login-email">Kullanıcı Adı / E-posta</label>
                        <input type="text" id="login-email" placeholder="Kimlik bilgilerinizi girin" required />
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="input-group">
                        <label for="login-password">Şifre</label>
                        <input type="password" id="login-password" placeholder="Şifrenizi doğrulayın" required />
                        <i class="fas fa-eye-slash toggle-password"></i>
                    </div>
                    <div class="options">
                        <div class="remember-me">
                            <input type="checkbox" id="remember">
                            <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>

<div class="alternative-login">
                        <p>Veya Biyometrik Giriş</p>
                        <div class="social-buttons">
                            <div class="social-button" id="fingerprint-login-btn" title="Parmak İzi ile Giriş">
                                <i class="fas fa-fingerprint"></i>
                            </div>
                            <div class="social-button" title="Google ile Giriş Yap">
                                <i class="fab fa-google"></i>
                            </div>
                            <div class="social-button" title="Facebook ile Giriş Yap">
                                <i class="fab fa-facebook-f"></i>
                            </div>
                            <div class="social-button" title="Apple ile Giriş Yap">
                                <i class="fab fa-apple"></i>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="toggle-link">
                    Hesabınız yok mu? <a id="show-register">Yeni Profil Oluştur</a>
                </div>
            </div>

<div class="register-form" id="register-form-container">
                <h1 class="auth-title">Yeni Protokol Başlat</h1>
                <form id="register-form">
                    <div class="input-group">
                        <label for="register-fullname">Tam Ad</label>
                        <input type="text" id="register-fullname" placeholder="Adınızı ve soyadınızı girin" required />
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="input-group">
                        <label for="register-email">E-posta Adresi</label>
                        <input type="email" id="register-email" placeholder="Geçerli bir e-posta girin" required />
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="input-group">
                        <label for="register-password">Şifre</label>
                        <input type="password" id="register-password" placeholder="Güçlü bir şifre protokolü oluşturun" required />
                        <i class="fas fa-eye-slash toggle-password"></i>
                        <div class="password-strength" id="password-strength"></div>
                        <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>

<div class="alternative-login">
                        <p>Veya Alternatif Kayıt</p>
                        <div class="social-buttons">
                            <div class="social-button" title="Google ile Kayıt Ol">
                                <i class="fab fa-google"></i>
                            </div>
                            <div class="social-button" title="Facebook ile Kayıt Ol">
                                <i class="fab fa-facebook-f"></i>
                            </div>
                            <div class="social-button" title="Twitter ile Kayıt Ol">
                                <i class="fab fa-twitter"></i>
                            </div>
                            <div class="social-button" title="Apple ile Kayıt Ol">
                                <i class="fab fa-apple"></i>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="toggle-link">
                    Zaten bir profiliniz var mı? <a id="show-login">Giriş Yap</a>
                </div>
            </div>
        </div>
    </div>
  </div>

// 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);
              }, shakeDuration);
            }, shakeDuration);
          }, 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);
              }, shakeDuration);
            }, shakeDuration);
          }, 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>

Matrix Login Register Form HTML CSS

Recommended

Wheel Timeline - pure CSS

CSS Animation Container Example

Sign Up Form

HTML

CSS

JS

Recommended

Wheel Timeline - pure CSS

CSS Animation Container Example

Sign Up Form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS