Modulo di accesso HTML con stile CSS Neon

387 Skyrreum

Apri nell'Editor Video Pubblica il Tuo Codice

Modulo di accesso HTML con stile CSS Neon

Consigliato

15 August 2025

Codice per tavoletta grafica HTML con Javascript

15 January 2026

Knight's Defense: codice sorgente del gioco HTML Canvas

26 April 2025

Un codice di Metehan

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>System Login</title>
    <style>
        :root {
            --neon-primary: #00ffff; /* Cyan */
            --neon-secondary: #ff00ff; /* Magenta */
            --dark-bg: #020216;
            --mid-bg: #05052a;
            --font-stack: 'Consolas', 'Monospace', sans-serif;
        }

body {
            background-color: var(--dark-bg);
            color: var(--neon-primary);
            font-family: var(--font-stack);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
            letter-spacing: 1.5px;
        }

/* Subtle background grid effect */
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(0deg, transparent 98%, rgba(0, 255, 255, 0.1) 100%),
                linear-gradient(90deg, transparent 98%, rgba(0, 255, 255, 0.1) 100%);
            background-size: 40px 40px;
            opacity: 0.3;
            pointer-events: none;
        }

.login-container {
            width: 380px;
            padding: 40px;
            background-color: var(--mid-bg);
            border: 2px solid var(--neon-primary);
            box-shadow: 
                0 0 15px var(--neon-primary), 
                0 0 30px rgba(0, 255, 255, 0.5);
            transition: all 0.5s ease;
            position: relative;
            z-index: 10;
        }
        
        .system-title {
            text-align: center;
            font-size: 1.5em;
            margin-bottom: 30px;
            text-shadow: 0 0 10px var(--neon-primary);
            color: var(--neon-primary);
            border-bottom: 1px solid rgba(0, 255, 255, 0.5);
            padding-bottom: 10px;
        }

.input-group {
            margin-bottom: 20px;
        }

label {
            display: block;
            margin-bottom: 8px;
            font-size: 0.9em;
            color: var(--neon-secondary);
            text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
        }

input {
            width: calc(100% - 20px);
            padding: 10px;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid var(--neon-primary);
            color: white;
            font-size: 1em;
            outline: none;
            box-shadow: inset 0 0 5px rgba(0, 255, 255, 0.3);
            transition: border 0.3s, box-shadow 0.3s;
        }

input:focus {
            border: 1px solid var(--neon-secondary);
            box-shadow: 0 0 15px var(--neon-secondary), inset 0 0 8px var(--neon-secondary);
        }

.login-button {
            width: 100%;
            padding: 15px;
            margin-top: 25px;
            background: var(--neon-primary);
            color: var(--dark-bg);
            border: none;
            cursor: pointer;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 1.1em;
            box-shadow: 0 0 20px var(--neon-primary);
            transition: background 0.3s, box-shadow 0.3s;
        }

.login-button:hover {
            background: #99ffff;
            box-shadow: 0 0 30px #99ffff;
        }

.status-message {
            text-align: center;
            margin-top: 30px;
            font-size: 0.8em;
            color: var(--neon-secondary);
            text-shadow: 0 0 5px var(--neon-secondary);
            animation: blink 1.5s infinite alternate;
        }
        
        @keyframes blink {
            from { opacity: 0.7; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>

<div class="login-container">
        <div class="system-title">
            ACCESS_FUTUR
        </div>
        <form class="login-form">
            <div class="input-group">
              <label for="id_matrix">Mail / Users:</label>
                <input type="text" id="id_matrix" required placeholder="Enter designation code">
            </div>
            <div class="input-group">
                <label for="auth_key">Password:</label>
                <input type="password" id="auth_key" required placeholder="Enter secure key">
            </div>
            <button type="submit" class="login-button">
                Log in
            </button>
            <div class="status-message">
                // SYSTEM STATUS: STANDBY_MODE [AWAITING INPUT]
            </div>
        </form>
    </div>

</body>
</html>

Consigliato

Codice per tavoletta grafica HTML con Javascript

Knight's Defense: codice sorgente del gioco HTML Canvas

Un codice di Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS