Spaces:
Sleeping
Sleeping
File size: 10,934 Bytes
6bf9e00 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 | <!DOCTYPE html>
<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> |