se connecter

665 0 Formulaires smhhkh1389 Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

14 September 2024

Curseur de survol

28 May 2026

Les bases des chauves

10 December 2025

Jeu de mémoire : Copier la séquence du processeur JavaScript

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NEXUS — Secure Access</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 /head>
<body>

<div class="bg-canvas">
    <div class="blob blob-1"></div>
    <div class="blob blob-2"></div>
    <div class="blob blob-3"></div>
    <div class="blob blob-4"></div>
    <div class="blob blob-5"></div>
    <div class="mesh-grid"></div>
    <div class="light-streak streak-1"></div>
    <div class="light-streak streak-2"></div>
    <div class="light-streak streak-3"></div>
    <canvas id="particles-canvas"></canvas>
  </div>
  <div class="cursor-glow" id="cursor-glow"></div>
  <div class="noise-overlay"></div>

<main class="main-container">
    <section class="login-card" id="login-card" aria-label="Login Form">

<header class="card-header">
        <div class="brand-icon">
          <svg viewBox="0 0 48 48" fill="none">
            <path d="M24 4L6 14v20l18 10 18-10V14L24 4z" stroke="url(#iconGrad)" stroke-width="2" fill="none"/>
            <path d="M24 4v40M6 14l18 10 18-10M6 34l18-10 18 10" stroke="url(#iconGrad)" stroke-width="1.5" opacity="0.5"/>
            <circle cx="24" cy="24" r="5" fill="url(#iconGrad)" opacity="0.8"/>
            <defs>
              <linearGradient id="iconGrad" x1="6" y1="4" x2="42" y2="44">
                <stop offset="0%" stop-color="#00e5ff"/>
                <stop offset="100%" stop-color="#8b5cf6"/>
              </linearGradient>
            </defs>
          </svg>
        </div>
        <h1 class="card-title">Welcome Back</h1>
        <p class="card-subtitle">Sign in to your Nexus account to continue</p>
      </header>

<form class="form-body" id="login-form" novalidate autocomplete="off">

<div class="input-group" id="email-group">
          <div class="input-wrapper">
            <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <rect x="2" y="4" width="20" height="16" rx="3"/>
              <path d="M2 7l10 6 10-6"/>
            </svg>
            <input
              type="email"
              class="input-field"
              id="email"
              name="email"
              placeholder="Email address"
              autocomplete="email"
              spellcheck="false"
            />
            <label class="floating-label" for="email">Email address</label>
          </div>
          <div class="error-message" id="email-error">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
              <circle cx="12" cy="12" r="10"/>
              <line x1="12" y1="8" x2="12" y2="12"/>
              <line x1="12" y1="16" x2="12.01" y2="16"/>
            </svg>
            <span></span>
          </div>
        </div>

<div class="input-group" id="password-group">
          <div class="input-wrapper">
            <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="11" width="18" height="11" rx="3"/>
              <path d="M7 11V7a5 5 0 0110 0v4"/>
            </svg>
            <input
              type="password"
              class="input-field"
              id="password"
              name="password"
              placeholder="Password"
              autocomplete="current-password"
            />
            <label class="floating-label" for="password">Password</label>
            <button type="button" class="password-toggle" id="toggle-password" aria-label="Toggle password visibility" tabindex="-1">
              <svg id="eye-open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                <circle cx="12" cy="12" r="3"/>
              </svg>
              <svg id="eye-closed" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="display:none;">
                <path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/>
                <line x1="1" y1="1" x2="23" y2="23"/>
              </svg>
            </button>
          </div>
          <div class="error-message" id="password-error">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
              <circle cx="12" cy="12" r="10"/>
              <line x1="12" y1="8" x2="12" y2="12"/>
              <line x1="12" y1="16" x2="12.01" y2="16"/>
            </svg>
            <span></span>
          </div>
          <div class="password-strength" id="password-strength">
            <div class="strength-bar" id="str-1"><div class="fill"></div></div>
            <div class="strength-bar" id="str-2"><div class="fill"></div></div>
            <div class="strength-bar" id="str-3"><div class="fill"></div></div>
            <div class="strength-bar" id="str-4"><div class="fill"></div></div>
          </div>
          <div class="strength-text" id="strength-text"></div>
        </div>

<div class="meta-row">
          <label class="checkbox-wrapper">
            <input type="checkbox" id="remember" name="remember" />
            <div class="custom-checkbox">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="20 6 9 17 4 12"/>
              </svg>
            </div>
            <span class="checkbox-label">Remember me</span>
          </label>
          <a href="#" class="forgot-link" onclick="event.preventDefault();">Forgot password?</a>
        </div>

<button type="submit" class="login-btn" id="login-btn">
          <span class="btn-content">
            <span>Sign In</span>
            <svg class="arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="5" y1="12" x2="19" y2="12"/>
              <polyline points="12 5 19 12 12 19"/>
            </svg>
          </span>
          <div class="btn-spinner">
            <div class="spinner"></div>
          </div>
          <div class="btn-success-icon">
            <svg class="success-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              <path d="M5 13l4 4L19 7"/>
            </svg>
          </div>
        </button>
      </form>

<div class="divider">
        <div class="divider-line"></div>
        <span class="divider-text">or</span>
        <div class="divider-line"></div>
      </div>

<div class="social-row">
        <button type="button" class="social-btn" aria-label="Sign in with Google">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" opacity="0.8"/>
            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" opacity="0.7"/>
            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" opacity="0.6"/>
            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" opacity="0.8"/>
          </svg>
        </button>
        <button type="button" class="social-btn" aria-label="Sign in with Apple">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
          </svg>
        </button>
        <button type="button" class="social-btn" aria-label="Sign in with GitHub">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
          </svg>
        </button>
      </div>

<footer class="card-footer">
        <p>Don't have an account? <a href="#" class="register-link" onclick="event.preventDefault();">Create one</a></p>
      </footer>

<div class="success-overlay" id="success-overlay">
        <div class="success-ring">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M5 13l4 4L19 7"/>
          </svg>
        </div>
        <div class="success-title">Welcome back!</div>
        <div class="success-subtitle">Redirecting to your dashboard...</div>
      </div>

</section>
  </main>

</body>
</html>

CSS

:root {
      --cyan: #00e5ff;
      --cyan-dim: #00e5ff44;
      --violet: #8b5cf6;
      --violet-dim: #8b5cf644;
      --turquoise: #2dd4bf;
      --blue: #3b82f6;
      --blue-glow: #3b82f640;
      --white: #f0f4ff;
      --white-dim: #f0f4ff22;
      --error: #f43f5e;
      --error-dim: #f43f5e33;
      --success: #10b981;
      --success-dim: #10b98133;
      --glass-bg: rgba(8, 12, 28, 0.55);
      --glass-border: rgba(255, 255, 255, 0.07);
      --glass-highlight: rgba(255, 255, 255, 0.04);
      --input-bg: rgba(255, 255, 255, 0.04);
      --input-border: rgba(255, 255, 255, 0.08);
      --input-focus: rgba(0, 229, 255, 0.25);
      --radius: 24px;
      --radius-sm: 14px;
      --radius-xs: 10px;
      --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: #050510;
      color: var(--white);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

/* ═══════════════════════════════════════════════
       ANIMATED BACKGROUND
       ═══════════════════════════════════════════════ */
    .bg-canvas {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
    }

/* Deep base gradient */
    .bg-canvas::before {
      content: '';
      position: absolute;
      inset: -20%;
      background:
        radial-gradient(ellipse 80% 60% at 20% 80%, rgba(59, 130, 246, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 80% 20%, rgba(139, 92, 246, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 90% 50% at 50% 50%, rgba(0, 229, 255, 0.04) 0%, transparent 70%),
        linear-gradient(180deg, #030308 0%, #0a0a1a 40%, #080818 100%);
      animation: bgShift 25s ease-in-out infinite alternate;
    }

@keyframes bgShift {
      0% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(-2%, 1%) scale(1.02); }
      66% { transform: translate(1%, -1%) scale(1.01); }
      100% { transform: translate(-1%, 2%) scale(1.03); }
    }

/* Floating blobs */
    .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0;
      animation: blobFloat linear infinite;
      will-change: transform, opacity;
      pointer-events: none;
    }

.blob-1 {
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(0, 229, 255, 0.18), transparent 70%);
      top: -10%; left: -5%;
      animation-duration: 22s;
      animation-delay: 0s;
    }
    .blob-2 {
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(139, 92, 246, 0.15), transparent 70%);
      bottom: -15%; right: -10%;
      animation-duration: 28s;
      animation-delay: -5s;
    }
    .blob-3 {
      width: 400px; height: 400px;
      background: radial-gradient(circle, rgba(45, 212, 191, 0.12), transparent 70%);
      top: 40%; left: 60%;
      animation-duration: 20s;
      animation-delay: -10s;
    }
    .blob-4 {
      width: 350px; height: 350px;
      background: radial-gradient(circle, rgba(59, 130, 246, 0.14), transparent 70%);
      top: 60%; left: 10%;
      animation-duration: 26s;
      animation-delay: -3s;
    }
    .blob-5 {
      width: 450px; height: 450px;
      background: radial-gradient(circle, rgba(0, 229, 255, 0.08), transparent 70%);
      top: 10%; right: 20%;
      animation-duration: 30s;
      animation-delay: -8s;
    }

@keyframes blobFloat {
      0%   { transform: translate(0, 0) scale(1); opacity: 0.6; }
      25%  { transform: translate(60px, -80px) scale(1.1); opacity: 0.8; }
      50%  { transform: translate(-40px, -120px) scale(0.95); opacity: 0.65; }
      75%  { transform: translate(80px, -40px) scale(1.05); opacity: 0.75; }
      100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    }

/* Grid mesh overlay */
    .mesh-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 20%, transparent 70%);
      -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 20%, transparent 70%);
      animation: meshPulse 8s ease-in-out infinite alternate;
    }

@keyframes meshPulse {
      0% { opacity: 0.4; }
      100% { opacity: 0.8; }
    }

/* Light streaks */
    .light-streak {
      position: absolute;
      width: 200%;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(0, 229, 255, 0.15) 30%, rgba(139, 92, 246, 0.2) 50%, rgba(0, 229, 255, 0.15) 70%, transparent 100%);
      transform-origin: center;
      animation: streakMove linear infinite;
      pointer-events: none;
    }
    .streak-1 {
      top: 25%; left: -50%;
      transform: rotate(-15deg);
      animation-duration: 12s;
    }
    .streak-2 {
      top: 70%; left: -50%;
      transform: rotate(10deg);
      animation-duration: 16s;
      animation-delay: -4s;
      opacity: 0.5;
    }
    .streak-3 {
      top: 50%; left: -50%;
      transform: rotate(-5deg);
      animation-duration: 20s;
      animation-delay: -8s;
      opacity: 0.3;
    }

@keyframes streakMove {
      0%   { transform: translateX(-30%) rotate(-15deg); opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: 1; }
      100% { transform: translateX(30%) rotate(-15deg); opacity: 0; }
    }

/* Particles canvas */
    #particles-canvas {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

/* Mouse spotlight */
    .cursor-glow {
      position: fixed;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 229, 255, 0.06) 0%, rgba(139, 92, 246, 0.03) 30%, transparent 70%);
      pointer-events: none;
      z-index: 1;
      transform: translate(-50%, -50%);
      transition: opacity 0.3s ease;
      will-change: left, top;
    }

/* Noise overlay for texture */
    .noise-overlay {
      position: fixed;
      inset: 0;
      z-index: 2;
      opacity: 0.025;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 256px 256px;
    }

/* ═══════════════════════════════════════════════
       MAIN CONTAINER
       ═══════════════════════════════════════════════ */
    .main-container {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 24px;
    }

/* ═══════════════════════════════════════════════
       GLASS LOGIN CARD
       ═══════════════════════════════════════════════ */
    .login-card {
      position: relative;
      width: 100%;
      max-width: 460px;
      padding: 48px 40px 40px;
      background: var(--glass-bg);
      backdrop-filter: blur(40px) saturate(1.4);
      -webkit-backdrop-filter: blur(40px) saturate(1.4);
      border-radius: var(--radius);
      border: 1px solid var(--glass-border);
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
        0 25px 60px -12px rgba(0, 0, 0, 0.5),
        0 0 100px -20px rgba(0, 229, 255, 0.08),
        0 0 80px -30px rgba(139, 92, 246, 0.06);
      transform: translateY(0);
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow var(--transition);
      animation: cardEntrance 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      opacity: 0;
    }

@keyframes cardEntrance {
      0% {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
        filter: blur(8px);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

.login-card:hover {
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
        0 30px 70px -12px rgba(0, 0, 0, 0.55),
        0 0 120px -20px rgba(0, 229, 255, 0.1),
        0 0 100px -30px rgba(139, 92, 246, 0.08);
    }

/* Card top glow accent */
    .login-card::before {
      content: '';
      position: absolute;
      top: -1px;
      left: 40px;
      right: 40px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.5), rgba(139, 92, 246, 0.5), transparent);
      border-radius: 1px;
    }

/* Inner glow */
    .login-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 120px;
      background: linear-gradient(180deg, rgba(0, 229, 255, 0.03) 0%, transparent 100%);
      border-radius: var(--radius) var(--radius) 0 0;
      pointer-events: none;
    }

/* ═══════════════════════════════════════════════
       CARD HEADER
       ═══════════════════════════════════════════════ */
    .card-header {
      position: relative;
      z-index: 1;
      text-align: center;
      margin-bottom: 36px;
    }

.brand-icon {
      width: 52px;
      height: 52px;
      margin: 0 auto 20px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

.brand-icon svg {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.3));
    }

.brand-icon::after {
      content: '';
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 229, 255, 0.1), transparent 70%);
      animation: iconPulse 3s ease-in-out infinite;
    }

@keyframes iconPulse {
      0%, 100% { transform: scale(1); opacity: 0.5; }
      50% { transform: scale(1.15); opacity: 0.8; }
    }

.card-title {
      font-size: 26px;
      font-weight: 700;
      letter-spacing: -0.5px;
      background: linear-gradient(135deg, #ffffff 0%, #b8c5e8 50%, #ffffff 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 8px;
      line-height: 1.2;
    }

.card-subtitle {
      font-size: 13.5px;
      font-weight: 400;
      color: rgba(176, 190, 220, 0.6);
      letter-spacing: 0.2px;
      line-height: 1.5;
    }

/* ═══════════════════════════════════════════════
       FORM ELEMENTS
       ═══════════════════════════════════════════════ */
    .form-body {
      position: relative;
      z-index: 1;
    }

/* Input group */
    .input-group {
      position: relative;
      margin-bottom: 22px;
    }

.input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
    }

.input-icon {
      position: absolute;
      left: 16px;
      width: 18px;
      height: 18px;
      color: rgba(176, 190, 220, 0.35);
      transition: color var(--transition), transform var(--transition);
      pointer-events: none;
      z-index: 2;
    }

.input-field {
      width: 100%;
      height: 54px;
      padding: 16px 48px 0 48px;
      background: var(--input-bg);
      border: 1px solid var(--input-border);
      border-radius: var(--radius-sm);
      color: var(--white);
      font-family: 'Inter', sans-serif;
      font-size: 14.5px;
      font-weight: 400;
      outline: none;
      transition: all var(--transition);
      caret-color: var(--cyan);
      letter-spacing: 0.1px;
    }

.input-field::placeholder {
      color: transparent;
    }

.floating-label {
      position: absolute;
      left: 48px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      font-weight: 400;
      color: rgba(176, 190, 220, 0.4);
      pointer-events: none;
      transition: all var(--transition);
      transform-origin: left center;
      letter-spacing: 0.2px;
    }

/* Floating label active states */
    .input-field:focus ~ .floating-label,
    .input-field.has-value ~ .floating-label {
      top: 14px;
      transform: translateY(0) scale(0.78);
      color: var(--cyan);
      font-weight: 500;
      letter-spacing: 0.5px;
    }

.input-field:focus {
      background: rgba(0, 229, 255, 0.04);
      border-color: rgba(0, 229, 255, 0.25);
      box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.08), 0 0 30px -10px rgba(0, 229, 255, 0.12);
    }

.input-field:focus ~ .input-icon {
      color: var(--cyan);
      transform: scale(1.1);
    }

/* Validation states */
    .input-group.error .input-field {
      border-color: rgba(244, 63, 94, 0.4);
      background: rgba(244, 63, 94, 0.04);
      animation: inputShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
    }

.input-group.error .input-field:focus {
      box-shadow: 0 0 0 3px var(--error-dim), 0 0 30px -10px rgba(244, 63, 94, 0.15);
    }

.input-group.error .floating-label,
    .input-group.error .input-icon {
      color: var(--error) !important;
    }

.input-group.valid .input-field {
      border-color: rgba(16, 185, 129, 0.3);
    }

.input-group.valid .input-field:focus {
      box-shadow: 0 0 0 3px var(--success-dim), 0 0 30px -10px rgba(16, 185, 129, 0.12);
      background: rgba(16, 185, 129, 0.03);
    }

.input-group.valid .floating-label,
    .input-group.valid .input-icon {
      color: var(--success) !important;
    }

@keyframes inputShake {
      0%, 100% { transform: translateX(0); }
      15% { transform: translateX(-6px); }
      30% { transform: translateX(5px); }
      45% { transform: translateX(-4px); }
      60% { transform: translateX(3px); }
      75% { transform: translateX(-2px); }
      90% { transform: translateX(1px); }
    }

/* Error message */
    .error-message {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 8px;
      font-size: 12px;
      font-weight: 450;
      color: var(--error);
      opacity: 0;
      transform: translateY(-4px);
      transition: all var(--transition-fast);
      overflow: hidden;
      max-height: 0;
    }

.error-message.visible {
      opacity: 1;
      transform: translateY(0);
      max-height: 30px;
    }

.error-message svg {
      width: 13px;
      height: 13px;
      flex-shrink: 0;
    }

/* Password toggle */
    .password-toggle {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      color: rgba(176, 190, 220, 0.35);
      cursor: pointer;
      border-radius: 10px;
      transition: all var(--transition-fast);
      z-index: 2;
    }

.password-toggle:hover {
      color: rgba(176, 190, 220, 0.7);
      background: rgba(255, 255, 255, 0.05);
    }

.password-toggle svg {
      width: 18px;
      height: 18px;
      transition: transform var(--transition-spring);
    }

.password-toggle:active svg {
      transform: scale(0.85);
    }

/* ═══════════════════════════════════════════════
       PASSWORD STRENGTH
       ═══════════════════════════════════════════════ */
    .password-strength {
      display: flex;
      gap: 4px;
      margin-top: 10px;
      opacity: 0;
      transform: translateY(-4px);
      transition: all var(--transition);
    }

.password-strength.visible {
      opacity: 1;
      transform: translateY(0);
    }

.strength-bar {
      flex: 1;
      height: 3px;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.06);
      overflow: hidden;
      transition: all var(--transition);
    }

.strength-bar .fill {
      width: 0%;
      height: 100%;
      border-radius: 2px;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

.strength-bar.active .fill {
      width: 100%;
    }

.strength-weak .fill { background: var(--error); }
    .strength-fair .fill { background: #f59e0b; }
    .strength-good .fill { background: var(--cyan); }
    .strength-strong .fill { background: var(--success); }

.strength-text {
      font-size: 11px;
      font-weight: 500;
      margin-top: 6px;
      letter-spacing: 0.5px;
      transition: color var(--transition);
    }

/* ═══════════════════════════════════════════════
       META ROW (Remember / Forgot)
       ═══════════════════════════════════════════════ */
    .meta-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 28px;
      margin-top: 4px;
    }

/* Custom checkbox */
    .checkbox-wrapper {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      user-select: none;
    }

.checkbox-wrapper input {
      display: none;
    }

.custom-checkbox {
      width: 18px;
      height: 18px;
      border: 1.5px solid rgba(255, 255, 255, 0.12);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--transition);
      background: rgba(255, 255, 255, 0.03);
      flex-shrink: 0;
    }

.custom-checkbox svg {
      width: 11px;
      height: 11px;
      opacity: 0;
      transform: scale(0.5);
      transition: all var(--transition-spring);
      color: white;
    }

.checkbox-wrapper input:checked ~ .custom-checkbox {
      background: linear-gradient(135deg, var(--cyan), var(--violet));
      border-color: transparent;
      box-shadow: 0 0 12px rgba(0, 229, 255, 0.25);
    }

.checkbox-wrapper input:checked ~ .custom-checkbox svg {
      opacity: 1;
      transform: scale(1);
    }

.checkbox-label {
      font-size: 13px;
      font-weight: 400;
      color: rgba(176, 190, 220, 0.55);
      transition: color var(--transition);
    }

.checkbox-wrapper:hover .checkbox-label {
      color: rgba(176, 190, 220, 0.8);
    }

/* Forgot link */
    .forgot-link {
      font-size: 13px;
      font-weight: 500;
      color: var(--cyan);
      text-decoration: none;
      opacity: 0.7;
      transition: all var(--transition);
      position: relative;
    }

.forgot-link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0%;
      height: 1px;
      background: var(--cyan);
      transition: width var(--transition);
    }

.forgot-link:hover {
      opacity: 1;
    }

.forgot-link:hover::after {
      width: 100%;
    }

/* ═══════════════════════════════════════════════
       LOGIN BUTTON
       ═══════════════════════════════════════════════ */
    .login-btn {
      position: relative;
      width: 100%;
      height: 54px;
      border: none;
      border-radius: var(--radius-sm);
      background: linear-gradient(135deg, var(--cyan), var(--blue), var(--violet));
      background-size: 200% 200%;
      color: white;
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.5px;
      cursor: pointer;
      overflow: hidden;
      transition: all var(--transition);
      box-shadow: 0 4px 20px -4px rgba(0, 229, 255, 0.3), 0 0 40px -10px rgba(139, 92, 246, 0.2);
      animation: btnGradient 4s ease-in-out infinite;
    }

@keyframes btnGradient {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

.login-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px -4px rgba(0, 229, 255, 0.4), 0 0 60px -10px rgba(139, 92, 246, 0.3);
    }

.login-btn:active {
      transform: translateY(0) scale(0.985);
    }

/* Button shine effect */
    .login-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
      transition: left 0.6s ease;
    }

.login-btn:hover::before {
      left: 100%;
    }

/* Button ripple */
    .ripple {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      transform: scale(0);
      animation: rippleEffect 0.6s ease-out forwards;
      pointer-events: none;
    }

@keyframes rippleEffect {
      to {
        transform: scale(4);
        opacity: 0;
      }
    }

.btn-content {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all var(--transition);
    }

.btn-content .arrow {
      transition: transform var(--transition);
    }

.login-btn:hover .btn-content .arrow {
      transform: translateX(3px);
    }

/* Loading state */
    .login-btn.loading .btn-content {
      opacity: 0;
      transform: translateY(10px);
    }

.btn-spinner {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity var(--transition);
    }

.login-btn.loading .btn-spinner {
      opacity: 1;
    }

.spinner {
      width: 22px;
      height: 22px;
      border: 2.5px solid rgba(255, 255, 255, 0.25);
      border-top-color: white;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }

@keyframes spin {
      to { transform: rotate(360deg); }
    }

/* Success state */
    .login-btn.success {
      background: var(--success) !important;
      box-shadow: 0 4px 20px -4px rgba(16, 185, 129, 0.4) !important;
      animation: none;
    }

.btn-success-icon {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity var(--transition);
    }

.login-btn.success .btn-success-icon {
      opacity: 1;
    }

.login-btn.success .btn-spinner,
    .login-btn.success .btn-content {
      opacity: 0;
    }

.success-check {
      width: 28px;
      height: 28px;
      color: white;
    }

.success-check path {
      stroke-dasharray: 30;
      stroke-dashoffset: 30;
      animation: drawCheck 0.5s 0.1s ease forwards;
    }

@keyframes drawCheck {
      to { stroke-dashoffset: 0; }
    }

/* ═══════════════════════════════════════════════
       DIVIDER
       ═══════════════════════════════════════════════ */
    .divider {
      display: flex;
      align-items: center;
      gap: 16px;
      margin: 24px 0;
    }

.divider-line {
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    }

.divider-text {
      font-size: 12px;
      font-weight: 400;
      color: rgba(176, 190, 220, 0.3);
      letter-spacing: 1px;
      text-transform: uppercase;
    }

/* ═══════════════════════════════════════════════
       SOCIAL BUTTONS (optional visual)
       ═══════════════════════════════════════════════ */
    .social-row {
      display: flex;
      gap: 12px;
      margin-bottom: 24px;
    }

.social-btn {
      flex: 1;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: var(--radius-xs);
      cursor: pointer;
      transition: all var(--transition);
      color: rgba(176, 190, 220, 0.5);
    }

.social-btn:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.12);
      color: rgba(176, 190, 220, 0.9);
      transform: translateY(-1px);
    }

.social-btn:active {
      transform: translateY(0) scale(0.97);
    }

.social-btn svg {
      width: 20px;
      height: 20px;
    }

/* ═══════════════════════════════════════════════
       FOOTER
       ═══════════════════════════════════════════════ */
    .card-footer {
      text-align: center;
      margin-top: 0;
    }

.card-footer p {
      font-size: 13.5px;
      color: rgba(176, 190, 220, 0.4);
    }

.register-link {
      color: var(--cyan);
      text-decoration: none;
      font-weight: 600;
      transition: all var(--transition);
      position: relative;
    }

.register-link:hover {
      color: #5eead4;
      text-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
    }

/* ═══════════════════════════════════════════════
       SUCCESS OVERLAY
       ═══════════════════════════════════════════════ */
    .success-overlay {
      position: absolute;
      inset: 0;
      background: rgba(8, 12, 28, 0.92);
      backdrop-filter: blur(20px);
      border-radius: var(--radius);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 100;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease;
    }

.success-overlay.visible {
      opacity: 1;
      pointer-events: auto;
    }

.success-ring {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: 2px solid var(--success);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      box-shadow: 0 0 40px rgba(16, 185, 129, 0.2);
      animation: ringPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      transform: scale(0);
    }

@keyframes ringPop {
      to { transform: scale(1); }
    }

.success-ring svg {
      width: 36px;
      height: 36px;
      color: var(--success);
    }

.success-title {
      font-size: 20px;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 8px;
      animation: fadeUp 0.5s 0.2s ease forwards;
      opacity: 0;
      transform: translateY(10px);
    }

.success-subtitle {
      font-size: 13.5px;
      color: rgba(176, 190, 220, 0.5);
      animation: fadeUp 0.5s 0.35s ease forwards;
      opacity: 0;
      transform: translateY(10px);
    }

@keyframes fadeUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

/* ═══════════════════════════════════════════════
       RESPONSIVE
       ═══════════════════════════════════════════════ */
    @media (max-width: 520px) {
      .login-card {
        padding: 36px 24px 32px;
        border-radius: 20px;
        max-width: 100%;
      }

.card-title { font-size: 22px; }
      .card-subtitle { font-size: 13px; }
      .input-field { height: 50px; font-size: 14px; }
      .login-btn { height: 50px; font-size: 14px; }
      .social-btn { height: 42px; }

.blob {
        filter: blur(60px);
      }
      .blob-1 { width: 300px; height: 300px; }
      .blob-2 { width: 350px; height: 350px; }
      .blob-3, .blob-4, .blob-5 { display: none; }
    }

@media (max-height: 700px) {
      .login-card {
        padding: 30px 32px 28px;
      }
      .card-header { margin-bottom: 24px; }
      .input-group { margin-bottom: 16px; }
      .meta-row { margin-bottom: 20px; }
      .divider { margin: 18px 0; }
      .brand-icon { width: 40px; height: 40px; margin-bottom: 14px; }
    }

/* ═══════════════════════════════════════════════
       ACCESSIBILITY: FOCUS VISIBLE
       ═══════════════════════════════════════════════ */
    .input-field:focus-visible,
    .login-btn:focus-visible,
    .social-btn:focus-visible,
    .forgot-link:focus-visible,
    .register-link:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 2px;
    }

/* Selection color */
    ::selection {
      background: rgba(0, 229, 255, 0.2);
      color: white;
    }
  </style>

function resize() {
        width = canvas.width = window.innerWidth;
        height = canvas.height = window.innerHeight;
      }

class Particle {
        constructor() {
          this.reset();
        }

reset() {
          this.x = Math.random() * width;
          this.y = Math.random() * height;
          this.size = Math.random() * 1.8 + 0.3;
          this.speedX = (Math.random() - 0.5) * 0.3;
          this.speedY = (Math.random() - 0.5) * 0.3;
          this.opacity = Math.random() * 0.4 + 0.1;
          this.opacitySpeed = Math.random() * 0.003 + 0.001;
          this.opacityDir = 1;
          const colors = [
            [0, 229, 255],
            [139, 92, 246],
            [59, 130, 246],
            [45, 212, 191],
            [200, 210, 240]
          ];
          this.color = colors[Math.floor(Math.random() * colors.length)];
        }

update() {
          this.x += this.speedX;
          this.y += this.speedY;
          this.opacity += this.opacitySpeed * this.opacityDir;

if (this.opacity >= 0.5) this.opacityDir = -1;
          if (this.opacity <= 0.05) this.opacityDir = 1;

if (this.x < -10 || this.x > width + 10 || this.y < -10 || this.y > height + 10) {
            this.reset();
          }
        }

draw() {
          const [r, g, b] = this.color;
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${this.opacity})`;
          ctx.fill();

if (this.size > 1.2) {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size * 3, 0, Math.PI * 2);
            ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${this.opacity * 0.1})`;
            ctx.fill();
          }
        }
      }

function init() {
        resize();
        const count = Math.min(Math.floor((width * height) / 12000), 120);
        particles = Array.from({ length: count }, () => new Particle());
      }

function animate() {
        ctx.clearRect(0, 0, width, height);
        particles.forEach(p => {
          p.update();
          p.draw();
        });
        animationId = requestAnimationFrame(animate);
      }

function start() {
        init();
        animate();
        window.addEventListener('resize', () => {
          resize();
          const count = Math.min(Math.floor((width * height) / 12000), 120);
          while (particles.length < count) particles.push(new Particle());
          while (particles.length > count) particles.pop();
        });
      }

return { start };
    })();

/* ═══════════════════════════════════════════════
       CURSOR SPOTLIGHT & PARALLAX
       ═══════════════════════════════════════════════ */
    const CursorEffects = (() => {
      const glow = document.getElementById('cursor-glow');
      const card = document.getElementById('login-card');
      let mouseX = window.innerWidth / 2;
      let mouseY = window.innerHeight / 2;
      let currentX = mouseX;
      let currentY = mouseY;

function lerp(a, b, t) {
        return a + (b - a) * t;
      }

function handleMove(e) {
        mouseX = e.clientX;
        mouseY = e.clientY;
      }

function animate() {
        currentX = lerp(currentX, mouseX, 0.08);
        currentY = lerp(currentY, mouseY, 0.08);

glow.style.left = currentX + 'px';
        glow.style.top = currentY + 'px';

// Card parallax
        const rect = card.getBoundingClientRect();
        const cardCenterX = rect.left + rect.width / 2;
        const cardCenterY = rect.top + rect.height / 2;
        const deltaX = (mouseX - cardCenterX) / window.innerWidth;
        const deltaY = (mouseY - cardCenterY) / window.innerHeight;

card.style.transform = `perspective(1200px) rotateY(${deltaX * 2}deg) rotateX(${-deltaY * 2}deg)`;

requestAnimationFrame(animate);
      }

function init() {
        document.addEventListener('mousemove', handleMove);
        document.addEventListener('touchmove', (e) => {
          const t = e.touches[0];
          mouseX = t.clientX;
          mouseY = t.clientY;
        });
        animate();
      }

return { init };
    })();

/* ═══════════════════════════════════════════════
       FORM VALIDATION & INTERACTIONS
       ═══════════════════════════════════════════════ */
    const LoginForm = (() => {
      const form = document.getElementById('login-form');
      const emailInput = document.getElementById('email');
      const passwordInput = document.getElementById('password');
      const emailGroup = document.getElementById('email-group');
      const passwordGroup = document.getElementById('password-group');
      const emailError = document.getElementById('email-error');
      const passwordError = document.getElementById('password-error');
      const loginBtn = document.getElementById('login-btn');
      const toggleBtn = document.getElementById('toggle-password');
      const eyeOpen = document.getElementById('eye-open');
      const eyeClosed = document.getElementById('eye-closed');
      const strengthBars = document.querySelectorAll('.strength-bar');
      const strengthContainer = document.getElementById('password-strength');
      const strengthText = document.getElementById('strength-text');
      const successOverlay = document.getElementById('success-overlay');

let passwordVisible = false;
      let isSubmitting = false;

// Email validation
      function validateEmail(value) {
        if (!value.trim()) return 'Please enter your email address';
        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!regex.test(value)) return 'Please enter a valid email address';
        return '';
      }

// Password validation
      function validatePassword(value) {
        if (!value) return 'Please enter your password';
        if (value.length < 6) return 'Password must be at least 6 characters';
        return '';
      }

// Password strength
      function getStrength(value) {
        if (!value) return 0;
        let score = 0;
        if (value.length >= 6) score++;
        if (value.length >= 10) score++;
        if (/[A-Z]/.test(value) && /[a-z]/.test(value)) score++;
        if (/[0-9]/.test(value)) score++;
        if (/[^A-Za-z0-9]/.test(value)) score++;
        return Math.min(score, 4);
      }

function updateStrength(value) {
        const strength = getStrength(value);

if (value.length > 0) {
          strengthContainer.classList.add('visible');
        } else {
          strengthContainer.classList.remove('visible');
          strengthText.textContent = '';
          return;
        }

const labels = ['', 'Weak', 'Fair', 'Good', 'Strong'];
        const classes = ['', 'strength-weak', 'strength-fair', 'strength-good', 'strength-strong'];
        const colors = ['', 'var(--error)', '#f59e0b', 'var(--cyan)', 'var(--success)'];

strengthBars.forEach((bar, i) => {
          bar.className = 'strength-bar';
          if (i < strength) {
            bar.classList.add('active', classes[strength]);
          }
        });

strengthText.textContent = labels[strength] || '';
        strengthText.style.color = colors[strength] || '';
      }

// Show/hide error
      function showError(group, errorEl, message) {
        group.classList.remove('valid');
        group.classList.add('error');
        errorEl.querySelector('span').textContent = message;
        errorEl.classList.add('visible');
      }

function clearError(group, errorEl) {
        group.classList.remove('error');
        errorEl.classList.remove('visible');
      }

function showValid(group) {
        group.classList.remove('error');
        group.classList.add('valid');
      }

// Toggle password visibility
      function togglePassword() {
        passwordVisible = !passwordVisible;
        passwordInput.type = passwordVisible ? 'text' : 'password';
        eyeOpen.style.display = passwordVisible ? 'none' : 'block';
        eyeClosed.style.display = passwordVisible ? 'block' : 'none';
      }

// Ripple effect
      function createRipple(e, btn) {
        const rect = btn.getBoundingClientRect();
        const ripple = document.createElement('span');
        ripple.classList.add('ripple');
        const size = Math.max(rect.width, rect.height);
        ripple.style.width = ripple.style.height = size + 'px';
        ripple.style.left = (e.clientX - rect.left - size / 2) + 'px';
        ripple.style.top = (e.clientY - rect.top - size / 2) + 'px';
        btn.appendChild(ripple);
        ripple.addEventListener('animationend', () => ripple.remove());
      }

// Has-value class for floating label
      function updateHasValue(input) {
        if (input.value.trim()) {
          input.classList.add('has-value');
        } else {
          input.classList.remove('has-value');
        }
      }

// Real-time validation
      function handleEmailInput() {
        updateHasValue(emailInput);
        const error = validateEmail(emailInput.value);
        if (emailGroup.classList.contains('error')) {
          if (!error) {
            clearError(emailGroup, emailError);
            showValid(emailGroup);
          } else {
            showError(emailGroup, emailError, error);
          }
        } else if (emailInput.value.trim() && !error) {
          showValid(emailGroup);
        } else {
          emailGroup.classList.remove('valid');
        }
      }

// Email blur validation
      function handleEmailBlur() {
        if (!emailInput.value.trim()) return;
        const error = validateEmail(emailInput.value);
        if (error) {
          showError(emailGroup, emailError, error);
        } else {
          clearError(emailGroup, emailError);
          showValid(emailGroup);
        }
      }

// Submit
      async function handleSubmit(e) {
        e.preventDefault();
        if (isSubmitting) return;

const emailErr = validateEmail(emailInput.value);
        const passErr = validatePassword(passwordInput.value);

let hasError = false;

if (emailErr) {
          showError(emailGroup, emailError, emailErr);
          hasError = true;
        } else {
          clearError(emailGroup, emailError);
          showValid(emailGroup);
        }

if (passErr) {
          showError(passwordGroup, passwordError, passErr);
          hasError = true;
        } else {
          clearError(passwordGroup, passwordError);
          showValid(passwordGroup);
        }

if (hasError) return;

// Start loading
        isSubmitting = true;
        loginBtn.classList.add('loading');
        loginBtn.disabled = true;

// Simulate API call
        await new Promise(resolve => setTimeout(resolve, 2000));

// Success
        loginBtn.classList.remove('loading');
        loginBtn.classList.add('success');

await new Promise(resolve => setTimeout(resolve, 800));

// Show overlay
        successOverlay.classList.add('visible');

// Reset after delay
        setTimeout(() => {
          loginBtn.classList.remove('success');
          loginBtn.disabled = false;
          isSubmitting = false;
          successOverlay.classList.remove('visible');
          form.reset();
          emailInput.classList.remove('has-value');
          passwordInput.classList.remove('has-value');
          emailGroup.classList.remove('valid');
          passwordGroup.classList.remove('valid');
          strengthContainer.classList.remove('visible');
          strengthText.textContent = '';
          strengthBars.forEach(b => b.className = 'strength-bar');
        }, 3500);
      }

function init() {
        emailInput.addEventListener('input', handleEmailInput);
        passwordInput.addEventListener('input', handlePasswordInput);
        emailInput.addEventListener('blur', handleEmailBlur);
        toggleBtn.addEventListener('click', togglePassword);
        loginBtn.addEventListener('click', (e) => createRipple(e, loginBtn));
        form.addEventListener('submit', handleSubmit);

// Initial has-value check (for autofill)
        setTimeout(() => {
          updateHasValue(emailInput);
          updateHasValue(passwordInput);
        }, 100);
      }

return { init };
    })();

/* ═══════════════════════════════════════════════
       INITIALIZATION
       ═══════════════════════════════════════════════ */
    document.addEventListener('DOMContentLoaded', () => {
      ParticleSystem.start();
      CursorEffects.init();
      LoginForm.init();
    });
  </script>

Comments 0

…