लॉगिन पृष्ठ HTML: फ़िंगरप्रिंट प्रमाणीकरण के साथ मैट्रिक्स थीम

अनुशंसित

14 June 2024

बायोमेट्रिक प्रमाणीकरण के साथ लॉगिन और पंजीकरण फ़ॉर्म

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MASTEX.net Login Page - Leon Matrix Theme</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Courier New', monospace;
    }

body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: linear-gradient(135deg, #041504, #072d07);
      padding: 20px;
      color: #0f0;
    }

.container {
      display: flex;
      width: 800px;
      min-height: 450px;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 255, 0, 0.2);
      border: 1px solid #0f0;
    }

.login-section {
      flex: 1;
      padding: 40px;
      background: #020e02;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #0f0;
    }

.logo {
      margin-bottom: 30px;
    }

.logo h1 {
      color: #0f0;
      font-size: 38px;
      letter-spacing: 2px;
      font-weight: bold;
      text-shadow: 0 0 5px #0f0, 0 0 10px #0f0;
    }

.logo p {
      color: #0c0;
      font-size: 14px;
      text-align: center;
      margin-top: 5px;
    }

.form-group {
      width: 100%;
      margin-bottom: 20px;
    }

.form-group label {
      display: block;
      margin-bottom: 8px;
      color: #0c0;
      font-size: 14px;
    }

.input-field {
      position: relative;
      width: 100%;
    }

.input-field i {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #0a0;
    }

.input-field input {
      width: 100%;
      padding: 12px 15px 12px 40px;
      border: 1px solid #0a0;
      border-radius: 8px;
      outline: none;
      font-size: 16px;
      transition: all 0.3s;
      background-color: rgba(0, 20, 0, 0.7);
      color: #0f0;
    }

.input-field input:focus {
      border-color: #0f0;
      box-shadow: 0 0 0 3px rgba(0, 255, 0, 0.2);
    }

.checkbox-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-bottom: 20px;
    }

.remember-me {
      display: flex;
      align-items: center;
      color: #0c0;
    }

.remember-me input {
      margin-right: 8px;
    }

.forgot-password {
      color: #0f0;
      text-decoration: none;
      font-size: 14px;
    }

.forgot-password:hover {
      text-decoration: underline;
      text-shadow: 0 0 5px #0f0;
    }

.login-button {
      width: 100%;
      padding: 12px;
      border: none;
      background: #0a0;
      color: #000;
      font-size: 18px;
      font-weight: bold;
      border-radius: 8px;
      cursor: pointer;
      transition: 0.3s;
      margin-bottom: 20px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

.login-button:hover {
      background: #0f0;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3);
    }

.login-button:active {
      transform: translateY(0);
    }

.alternative-login {
      text-align: center;
      width: 100%;
    }

.alternative-login p {
      color: #0a0;
      margin-bottom: 15px;
      position: relative;
    }

.alternative-login p::before,
    .alternative-login p::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 30%;
      height: 1px;
      background-color: #030;
    }

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

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

.social-buttons {
      display: flex;
      justify-content: center;
      gap: 15px;
    }

.social-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #031703;
      transition: 0.3s;
      cursor: pointer;
      color: #0f0;
      border: 1px solid #0a0;
    }

.social-button:hover {
      background: #052605;
      transform: translateY(-2px);
      box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
    }

.fingerprint-section {
      flex: 1;
      background: linear-gradient(135deg, #052605, #010801);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #0f0;
      padding: 40px;
      position: relative;
    }

/* Matrix Rain Effect */
    .fingerprint-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(0, 20, 0, 0.9), rgba(0, 10, 0, 0.95));
      opacity: 0.3;
    }

.fingerprint-title {
      text-align: center;
      margin-bottom: 30px;
      z-index: 1;
    }

.fingerprint-title h2 {
      font-size: 24px;
      margin-bottom: 10px;
      color: #0f0;
      text-shadow: 0 0 5px #0f0;
    }

.fingerprint-title p {
      font-size: 14px;
      opacity: 0.8;
    }

.fingerprint-box {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: rgba(0, 255, 0, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      cursor: pointer;
      margin-bottom: 30px;
      z-index: 1;
      border: 1px solid #0a0;
    }

.fingerprint-box::before {
      content: '';
      width: 120px;
      height: 120px;
      background: rgba(0, 255, 0, 0.08);
      border-radius: 50%;
      position: absolute;
      animation: pulse 2s infinite;
    }

@keyframes pulse {
      0% {
        transform: scale(1);
        opacity: 1;
      }
      100% {
        transform: scale(1.5);
        opacity: 0;
      }
    }

.fingerprint-icon {
      width: 80px;
      height: 80px;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%2300ff00" d="M256 64C150 64 64 150 64 256s86 192 192 192 192-86 192-192S362 64 256 64zM96 256c0-88.4 71.6-160 160-160 37.8 0 72.6 13.1 100.1 35.1-42.6 15.3-96.6 48.1-137.2 88.7-46.3 46.3-79.9 118.4-87.6 169-21.8-27.4-35.2-62.1-35.3-99.8zm128 144c-44.1 0-80-35.9-80-80 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 61.8 50.2 112 112 112 8.8 0 16-7.2 16-16s-7.2-16-16-16zm60.1-124.5c-1.8 0-3.5.5-5.1 1.5-10.3 6.4-21.7 9.9-33.6 9.9-35.2 0-64-28.8-64-64 0-17.3 7-33.4 19.5-45.5 4.7-4.6 5.4-11.5 2.3-16.7-.4-.8-.9-1.5-1.7-2.2-2.8-2.8-7.2-3.4-10.7-1.6-17.7 9.1-32.2 23.9-42.3 42.4-14.6 27-18.1 60.9-8.9 88.6 13.8 41.4 55.1 69.2 100.8 69.2 12.3 0 24.2-2.1 35.5-6.1 5.1-1.8 8.4-6.7 8.4-12.1 0-7.1-5.7-12.9-12.9-12.9z"/></svg>');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 1;
    }

.fingerprint-instruction {
      text-align: center;
      font-size: 14px;
      opacity: 0.9;
      z-index: 1;
    }

.signup-link {
      margin-top: 20px;
      text-align: center;
      z-index: 1;
    }

.signup-link a {
      color: #0f0;
      text-decoration: none;
      font-weight: bold;
    }

.signup-link a:hover {
      text-decoration: underline;
      text-shadow: 0 0 5px #0f0;
    }

/* Responsive Design */
    @media (max-width: 768px) {
      .container {
        flex-direction: column;
        width: 100%;
      }
      .fingerprint-section {
        padding: 30px;
      }
    }

/* Matrix code rain animation */
    .matrix-code {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

.code-column {
      position: absolute;
      top: -100px;
      font-size: 12px;
      color: #0f0;
      text-shadow: 0 0 5px #0f0;
      white-space: nowrap;
      opacity: 0.7;
      animation: codeRain linear infinite;
    }

@keyframes codeRain {
      0% {
        transform: translateY(-100px);
      }
      100% {
        transform: translateY(450px);
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="login-section">
      <div class="logo">
        <h1>MASTEX.net</h1>
        <p>Your Personal Security Portal</p>
      </div>
      <form id="login-form">
        <div class="form-group">
          <label for="username">Username</label>
          <div class="input-field">
            <i class="fas fa-user"></i>
            <input type="text" id="username" placeholder="Enter your username">
          </div>
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <div class="input-field">
            <i class="fas fa-lock"></i>
            <input type="password" id="password" placeholder="Enter your password">
          </div>
        </div>
        <div class="checkbox-container">
          <div class="remember-me">
            <input type="checkbox" id="remember">
            <label for="remember">Remember me</label>
          </div>
          <a href="#" class="forgot-password">Forgot Password?</a>
        </div>
        <button type="submit" class="login-button">Login</button>
        <div class="alternative-login">
          <p>Or login with</p>
          <div class="social-buttons">
            <div class="social-button">
              <i class="fab fa-google"></i>
            </div>
            <div class="social-button">
              <i class="fab fa-facebook-f"></i>
            </div>
            <div class="social-button">
              <i class="fab fa-apple"></i>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="fingerprint-section">
      <div class="matrix-code" id="matrix-code"></div>
      <div class="fingerprint-title">
        <h2>Biometric Login</h2>
        <p>Quick and secure access to your account</p>
      </div>
      <div class="fingerprint-box" id="fingerprint-login">
        <div class="fingerprint-icon"></div>
      </div>
      <div class="fingerprint-instruction">
        Touch the sensor to verify your identity
      </div>
      <div class="signup-link">
        <p>Don't have an account? <a href="#">Sign Up</a></p>
      </div>
    </div>
  </div>

लॉगिन पृष्ठ HTML: फ़िंगरप्रिंट प्रमाणीकरण के साथ मैट्रिक्स थीम

अनुशंसित

माउस के साथ आतिशबाजी

सीएसएस लॉगिन फॉर्म

बायोमेट्रिक प्रमाणीकरण के साथ लॉगिन और पंजीकरण फ़ॉर्म

HTML

CSS

JS

अनुशंसित

माउस के साथ आतिशबाजी

सीएसएस लॉगिन फॉर्म

बायोमेट्रिक प्रमाणीकरण के साथ लॉगिन और पंजीकरण फ़ॉर्म

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS