Modulo di accesso HTML con stile CSS Neon

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

10 February 2025

<!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>

Modulo di accesso HTML con stile CSS Neon

Consigliato

Un codice di bachir123

Diagramma di Venn animato

Un codice di ytr3d3

HTML

CSS

JS

Consigliato

Un codice di bachir123

Diagramma di Venn animato

Un codice di ytr3d3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS