Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Neon Cyber Login</title> | |
| <meta name="description" content="Cyberpunk-themed login form with glitch effects, scanline borders and matrix accents."> | |
| <meta name="author" content="Aigars Silkalns / Colorlib"> | |
| <link rel="canonical" href="https://puikinsh.github.io/login-forms/forms/neon-cyber/"> | |
| <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='48' fill='%236366f1'/><text x='50' y='68' font-size='60' text-anchor='middle' fill='white' font-family='system-ui,sans-serif'>L</text></svg>"> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:title" content="Neon Cyber Login Form"> | |
| <meta property="og:description" content="Cyberpunk-themed login form with glitch effects, scanline borders and matrix accents."> | |
| <meta property="og:url" content="https://puikinsh.github.io/login-forms/forms/neon-cyber/"> | |
| <meta property="og:image" content="https://puikinsh.github.io/login-forms/assets/screenshots/neon-cyber.png"> | |
| <meta name="twitter:card" content="summary_large_image"> | |
| <meta name="twitter:title" content="Neon Cyber Login Form"> | |
| <meta name="twitter:description" content="Cyberpunk-themed login form with glitch effects, scanline borders and matrix accents."> | |
| <meta name="twitter:image" content="https://puikinsh.github.io/login-forms/assets/screenshots/neon-cyber.png"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="cyber-grid"> | |
| <div class="grid-line grid-h-1"></div> | |
| <div class="grid-line grid-v-1"></div> | |
| <div class="grid-line grid-h-2"></div> | |
| <div class="grid-line grid-v-2"></div> | |
| <div class="grid-line grid-h-3"></div> | |
| <div class="cyber-glitch glitch-1"></div> | |
| <div class="cyber-glitch glitch-2"></div> | |
| </div> | |
| <div class="login-container"> | |
| <div class="cyber-terminal"> | |
| <div class="terminal-header"> | |
| <div class="terminal-buttons"> | |
| <div class="term-btn btn-red"></div> | |
| <div class="term-btn btn-yellow"></div> | |
| <div class="term-btn btn-green"></div> | |
| </div> | |
| <div class="terminal-title">NEURAL_INTERFACE.exe</div> | |
| </div> | |
| <div class="cyber-content"> | |
| <div class="neon-header"> | |
| <div class="cyber-logo"> | |
| <div class="logo-frame"> | |
| <div class="logo-core"> | |
| <svg width="40" height="40" viewBox="0 0 40 40" fill="none"> | |
| <path d="M20 4L36 12v16L20 36L4 28V12L20 4z" stroke="currentColor" stroke-width="2" fill="none"/> | |
| <circle cx="20" cy="20" r="6" stroke="currentColor" stroke-width="1.5"/> | |
| <path d="M14 14l12 12M26 14l-12 12" stroke="currentColor" stroke-width="1"/> | |
| </svg> | |
| </div> | |
| <div class="logo-scanner"></div> | |
| </div> | |
| <div class="neon-glow"></div> | |
| </div> | |
| <h1 class="cyber-title"> | |
| <span class="title-glitch" data-text="CYPHER_NET">CYPHER_NET</span> | |
| </h1> | |
| <p class="access-text">[ SECURE_TERMINAL_ACCESS ]</p> | |
| </div> | |
| <form class="neon-form" id="loginForm" novalidate> | |
| <div class="cyber-field"> | |
| <div class="field-frame"> | |
| <div class="field-border"></div> | |
| <input type="email" id="email" name="email" required autocomplete="email"> | |
| <label for="email">> EMAIL_ADDRESS</label> | |
| <div class="cyber-scanner"> | |
| <div class="scan-line"></div> | |
| </div> | |
| </div> | |
| <span class="cyber-error" id="emailError"></span> | |
| </div> | |
| <div class="cyber-field"> | |
| <div class="field-frame"> | |
| <div class="field-border"></div> | |
| <input type="password" id="password" name="password" required autocomplete="current-password"> | |
| <label for="password">> ACCESS_CODE</label> | |
| <button type="button" class="cyber-toggle" id="passwordToggle" aria-label="Toggle password visibility"> | |
| <div class="toggle-frame"> | |
| <svg class="eye-scan" width="18" height="18" viewBox="0 0 18 18" fill="none"> | |
| <path d="M9 3c-4 0-7 3-8 6 1 3 4 6 8 6s7-3 8-6c-1-3-4-6-8-6zm0 10a4 4 0 110-8 4 4 0 010 8zm0-6a2 2 0 100 4 2 2 0 000-4z" fill="currentColor"/> | |
| </svg> | |
| <svg class="eye-blocked" width="18" height="18" viewBox="0 0 18 18" fill="none"> | |
| <path d="M3 3l12 12M7 7a3 3 0 003 3m3-3C13 7 10 4 9 4c-1 0-3 1-4 2M9 14c4 0 7-3 8-6-1-1-2-2-3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| </div> | |
| </button> | |
| <div class="cyber-scanner"> | |
| <div class="scan-line"></div> | |
| </div> | |
| </div> | |
| <span class="cyber-error" id="passwordError"></span> | |
| </div> | |
| <div class="cyber-options"> | |
| <label class="neon-checkbox"> | |
| <input type="checkbox" id="remember" name="remember"> | |
| <span class="checkbox-matrix"> | |
| <div class="matrix-frame"></div> | |
| <svg width="10" height="8" viewBox="0 0 10 8" fill="none"> | |
| <path d="M1 4l2.5 2.5L9 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| </span> | |
| <span class="checkbox-text">MAINTAIN_SESSION</span> | |
| </label> | |
| <a href="#" class="cyber-link">RECOVER_ACCESS</a> | |
| </div> | |
| <button type="submit" class="neon-button"> | |
| <div class="btn-matrix"></div> | |
| <span class="btn-text">[ INITIALIZE_CONNECTION ]</span> | |
| <div class="btn-loader"> | |
| <div class="matrix-loader"> | |
| <div class="matrix-bar"></div> | |
| <div class="matrix-bar"></div> | |
| <div class="matrix-bar"></div> | |
| <div class="matrix-bar"></div> | |
| </div> | |
| </div> | |
| <div class="btn-glow"></div> | |
| </button> | |
| </form> | |
| <div class="cyber-divider"> | |
| <div class="divider-grid"></div> | |
| <span class="divider-text">[ ALT_PROTOCOLS ]</span> | |
| <div class="divider-grid"></div> | |
| </div> | |
| <div class="matrix-social"> | |
| <button type="button" class="social-matrix"> | |
| <div class="social-frame"></div> | |
| <svg width="16" height="16" viewBox="0 0 16 16" fill="#00ff41"> | |
| <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/> | |
| </svg> | |
| <span>GITHUB_NODE</span> | |
| <div class="social-glow"></div> | |
| </button> | |
| <button type="button" class="social-matrix"> | |
| <div class="social-frame"></div> | |
| <svg width="16" height="16" viewBox="0 0 16 16" fill="#ff0080"> | |
| <path d="M7.12 0c3.94 0 7.12 3.18 7.12 7.12s-3.18 7.12-7.12 7.12S0 11.06 0 7.12C0 3.18 3.18 0 7.12 0zm1.8 5.56c.36 0 .68.14.92.38.24.24.38.56.38.92v3.28c0 .36-.14.68-.38.92-.24.24-.56.38-.92.38H5.64c-.36 0-.68-.14-.92-.38-.24-.24-.38-.56-.38-.92V6.86c0-.36.14-.68.38-.92.24-.24.56-.38.92-.38h3.28z"/> | |
| </svg> | |
| <span>DISCORD_NET</span> | |
| <div class="social-glow"></div> | |
| </button> | |
| </div> | |
| <div class="matrix-signup"> | |
| <span class="signup-prefix">[ NEW_USER_DETECTED ]</span> | |
| <a href="#" class="matrix-link">CREATE_PROFILE</a> | |
| </div> | |
| <div class="cyber-success" id="successMessage"> | |
| <div class="success-matrix"> | |
| <div class="matrix-rings"> | |
| <div class="success-ring ring-1"></div> | |
| <div class="success-ring ring-2"></div> | |
| <div class="success-ring ring-3"></div> | |
| </div> | |
| <div class="success-core"> | |
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none"> | |
| <path d="M10 16l6 6 12-12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <h3 class="success-title">[ CONNECTION_ESTABLISHED ]</h3> | |
| <p class="success-desc">Accessing neural interface...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="../../shared/js/form-utils.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |