Login tipo Matrix

Creditos a Itx Hanzla
    Código Fuente
    
  
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Hacker Style Login</title>
  <style>
    /* Basic reset */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html,body { height: 100%; font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial; }
    /* Full-screen canvas background for matrix rain */
    #matrix {
      position: fixed;
      inset: 0;
      z-index: 0;
      display: block;
      background: #000; /* fallback */
    }
    /* Centering container */
    .wrap {
      position: relative;
      z-index: 2;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      pointer-events: none; /* allow only form to be interactive */
    }
    /* Glassy login card */
    .login {
      pointer-events: auto;
      width: 360px;
      max-width: calc(100% - 40px);
      background: rgba(0, 0, 0, 0.55);
      border: 1px solid rgba(0,255,120,0.12);
      border-radius: 12px;
      padding: 28px;
      color: #b7ffcf;
      box-shadow: 0 10px 40px rgba(0,0,0,0.7), 0 0 30px rgba(0,255,120,0.05) inset;
      backdrop-filter: blur(6px) saturate(140%);
      text-align: center;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      justify-content: center;
      margin-bottom: 14px;
    }
    .logo .dot {
      width: 36px;
      height: 36px;
      border-radius: 6px;
      background: linear-gradient(135deg, rgba(0,255,120,0.95), rgba(0,160,90,0.8));
      box-shadow: 0 4px 18px rgba(0,255,120,0.14), 0 0 8px rgba(0,255,120,0.06);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #001;
      font-family: monospace;
      letter-spacing: 1px;
    }
    .title {
      font-weight: 700;
      font-size: 20px;
      letter-spacing: 1px;
      color: #aaffcf;
      text-shadow: 0 0 8px rgba(0,255,120,0.25);
    }
    .subtitle {
      font-size: 12px;
      color: #7fdfa3;
      margin-top: 4px;
      opacity: 0.9;
    }
    /* inputs */
    .field {
      margin-top: 16px;
      text-align: left;
    }
    label {
      display: block;
      font-size: 12px;
      color: #9ef7b8;
      margin-bottom: 6px;
    }
    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 12px 14px;
      border-radius: 8px;
      background: rgba(0,0,0,0.65);
      border: 1px solid rgba(0,255,120,0.08);
      color: #dfffe6;
      outline: none;
      font-size: 14px;
      box-shadow: 0 6px 18px rgba(0,255,120,0.02) inset;
      transition: transform .12s ease, box-shadow .12s ease;
    }
    input:focus {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(0,255,120,0.06), 0 0 12px rgba(0,255,120,0.06);
      border-color: rgba(0,255,120,0.28);
    }
    .controls {
      display:flex;
      gap:10px;
      align-items:center;
      margin-top: 14px;
    }
    .btn {
      flex: 1;
      padding: 11px 14px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      background: linear-gradient(90deg, rgba(0,255,120,0.12), rgba(0,255,120,0.06));
      color: #051;
      font-weight: 700;
      letter-spacing: .6px;
      text-transform: uppercase;
      box-shadow: 0 8px 24px rgba(0,255,120,0.04);
      transition: transform .12s ease, filter .12s ease;
    }
    .btn:hover { transform: translateY(-3px); filter:brightness(1.06); }
    .btn:active { transform: translateY(-1px) scale(.995); }
    .ghost {
      background: transparent;
      color: #9ef7b8;
      border: 1px solid rgba(160,255,160,0.06);
      font-weight: 600;
      text-transform: none;
    }
    .hint {
      margin-top: 12px;
      font-size: 12px;
      color: #85e6a8;
      opacity: 0.85;
    }
    /* small footer text */
    .small {
      margin-top: 12px;
      font-size: 11px;
      color: rgba(160,255,170,0.7);
      opacity: 0.9;
    }
    /* neon glow lines around card */
    .login::before, .login::after {
      content: "";
      position: absolute;
      pointer-events: none;
      inset: -2px;
      border-radius: 14px;
      z-index: 1;
      filter: blur(10px);
      opacity: 0.18;
      mix-blend-mode: screen;
    }
    .login::before { background: linear-gradient(120deg, rgba(0,255,120,0.14), transparent 40%); }
    .login::after  { background: linear-gradient(300deg, rgba(0,200,90,0.08), transparent 60%); }
    /* small responsive tweak */
    @media (max-width:420px) {
      .login { padding: 20px; width: 92%; }
      .logo .dot { width: 30px; height:30px; }
    }
    /* subtle flicker (hacker vibe) */
    @keyframes flicker {
      0% { opacity: 1; }
      4% { opacity: .85; }
      6% { opacity: .95; }
      8% { opacity: .8; }
      100% { opacity: 1; }
    }
    .title { animation: flicker 3s infinite; }
    /* tiny status bar (top) */
    .top-bar {
      position: fixed;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      font-size: 12px;
      color: #8fffbf;
      background: rgba(0,0,0,0.35);
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(0,255,120,0.06);
      backdrop-filter: blur(4px);
    }
    /* error message */
    .error {
      margin-top: 10px;
      color: #ff8b8b;
      font-size: 13px;
      background: rgba(255,0,0,0.03);
      padding: 8px 10px;
      border-radius: 8px;
      display: none;
    }
  </style>
</head>
<body>
  <!-- Canvas for matrix rain -->
  <canvas id="matrix"></canvas>
  <div class="top-bar" id="status">CONSOLE: <span id="console-msg">secure tunnel initialized</span></div>
  <div class="wrap">
    <div class="login" role="region" aria-label="Hacker style login form">
      <div class="logo">
        <div class="dot">01</div>
        <div>
          <div class="title">ACCESS PANEL</div>
          <div class="subtitle">authorized personnel only</div>
        </div>
      </div>
      <form id="loginForm" autocomplete="off" onsubmit="return false;">
        <div class="field">
          <label for="user">username</label>
          <input id="user" name="user" type="text" placeholder="root" autocomplete="username" required />
        </div>
        <div class="field">
          <label for="pass">password</label>
          <input id="pass" name="pass" type="password" placeholder="••••••••" autocomplete="current-password" required />
        </div>
        <div class="controls">
          <button class="btn" id="loginBtn" type="submit">LOGIN</button>
          <button class="btn ghost" id="demoBtn" type="button">DEMO</button>
        </div>
        <div class="hint">Tip: try <code>root / toor</code> as demo creds.</div>
        <div class="error" id="err">Invalid credentials.</div>
        <div class="small">Your connection is encrypted · session expires in 08:59</div>
      </form>
    </div>
  </div>
  <script>
    /* MATRIX RAIN ----
       Canvas based falling characters like Matrix.
       Adjustable density and speed.
    */
    const canvas = document.getElementById("matrix");
    const ctx = canvas.getContext("2d");
    let w = canvas.width = innerWidth;
    let h = canvas.height = innerHeight;
    // characters used in rain (hex + katakana vibe)
    const chars = ('01╳╲╱╳█▌▐░▒▓▮▯<>[]{}()/?\\|~!@#$%&*-+=;:abcdefghijklmnopqrstuvwxyz0123456789').split('');
    const fontSize = 14;
    const columns = Math.floor(w / fontSize);
    const drops = new Array(columns).fill(1);
    function resize() {
      w = canvas.width = innerWidth;
      h = canvas.height = innerHeight;
    }
    addEventListener('resize', () => {
      resize();
      // refill drops so column count matches
      drops.length = Math.floor(w / fontSize);
      for (let i = 0; i < drops.length; i++) if (!drops[i]) drops[i] = 1;
    });
    // draw loop
    function draw() {
      // translucent black to create trail effect
      ctx.fillStyle = 'rgba(0, 0, 0, 0.12)';
      ctx.fillRect(0, 0, w, h);
      ctx.fillStyle = '#8cffb0'; // greenish text
      ctx.font = fontSize + 'px monospace';
      for (let i = 0; i < drops.length; i++) {
        const text = chars[Math.floor(Math.random() * chars.length)];
        ctx.fillText(text, i * fontSize, drops[i] * fontSize);
        // randomize reset to give variation
        if (drops[i] * fontSize > h && Math.random() > 0.975) drops[i] = 0;
        drops[i]++;
      }
      requestAnimationFrame(draw);
    }
    draw();
    /* Small console messages rotating on top-bar */
    const status = document.getElementById('console-msg');
    const messages = [
      'secure tunnel initialized',
      'handshake complete',
      'packet filter active',
      'firewall bypass nominal',
      'auth keys rotated',
      'monitoring: green'
    ];
    let mi = 0;
    setInterval(()=>{
      mi = (mi + 1) % messages.length;
      status.textContent = messages[mi];
    }, 4200);
    /* Fake auth logic for demo purposes */
    const form = document.getElementById('loginForm');
    const err = document.getElementById('err');
    function showError(txt) {
      err.textContent = txt;
      err.style.display = 'block';
      setTimeout(()=> err.style.display = 'none', 3500);
    }
    document.getElementById('loginBtn').addEventListener('click', () => {
      const u = document.getElementById('user').value.trim();
      const p = document.getElementById('pass').value;
      // small validation
      if (!u || !p) {
        showError('Enter username and password.');
        return;
      }
      // demo "auth" — replace with real server call in production
      // allowed demo combo: root / toor ; admin / 123456
      const demoOK = (u === 'root' && p === 'toor') || (u === 'admin' && p === '123456');
      if (demoOK) {
        status.textContent = 'auth success · opening secure shell';
        // small success flash
        document.querySelector('.login').style.boxShadow = '0 18px 60px rgba(0,255,120,0.12), 0 0 40px rgba(0,255,120,0.06) inset';
        // show green blink then "redirect"
        setTimeout(()=> {
          status.textContent = 'redirecting...';
          // demonstration only: animate card out
          document.querySelector('.login').style.transform = 'translateY(-18px) scale(.98)';
          document.querySelector('.login').style.opacity = '0.0';
          // replace UI message (demo)
          setTimeout(()=> {
            document.body.innerHTML = '<pre style="color:#9ef7b8;background:#000;padding:20px;font-family:monospace;height:100vh;">ACCESS GRANTED\\nUser: '+u+'\\nSession: 0x'+Math.floor(Math.random()*1e8).toString(16)+'\\n---\\nWelcome.</pre>';
          }, 600);
        }, 700);
      } else {
        showError('Invalid credentials.');
        status.textContent = 'auth failed · logging attempt';
      }
    });
    // demo button autofills demo credentials
    document.getElementById('demoBtn').addEventListener('click', () => {
      document.getElementById('user').value = 'root';
      document.getElementById('pass').value = 'toor';
      // slight UI hint
      status.textContent = 'demo credentials filled';
    });
    // small keyboard shortcut: press Enter in password field to submit
    document.getElementById('pass').addEventListener('keydown', (e)=> {
      if (e.key === 'Enter') document.getElementById('loginBtn').click();
    });
    // reduce CPU by pausing animation if tab not visible
    let running = true;
    document.addEventListener('visibilitychange', () => {
      if (document.hidden) {
        running = false;
        // stop animation by filling black
        ctx.fillStyle = '#000';
        ctx.fillRect(0,0,w,h);
      } else {
        if (!running) { running = true; draw(); }
      }
    });
  </script>
</body>
</html>
Nos apoyas abriendo una pequeña publicidad 🙏
Header Ads Widget

Login tipo Matrix

Posted by: Administrador

Publicar un comentario

0 Comentarios

Sigueme

🎬 ¡Suscríbete a mi canal!

Redes Sociales

Herramientas de mano

Comentarios

Categorias

Recomendacion

LO MAS POPULAR

Video Popular

Tags

Seguidores

Visitas del mes pasado a la página

Menu Footer Widget

Header Ads Widget

Login tipo Matrix

Posted by: Administrador

Tal vez te interesen estas entradas

Publicar un comentario

0 Comentarios

Sigueme

🎬 ¡Suscríbete a mi canal!

Redes Sociales

Herramientas de mano

Comentarios

Categorias

Recomendacion

LO MAS POPULAR

TOP 5

Video Popular

Tags

Seguidores

Visitas del mes pasado a la página

Menu Footer Widget
