Formulaire HTML Cyberpunk : Effet de glitch, suivi oculaire

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

30 March 2025

Un code par cyrillsemah

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>THE SURRENDER</title>
    <style>
        :root {
            --neon-red: #ff003c;
            --void-black: #050505;
            --glitch-green: #00ff41;
        }

body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: var(--void-black);
            color: var(--neon-red);
            font-family: 'Courier New', Courier, monospace;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: crosshair;
        }

#glitch-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                0deg,
                rgba(0, 0, 0, 0.15),
                rgba(0, 0, 0, 0.15) 1px,
                transparent 1px,
                transparent 2px
            );
            pointer-events: none;
            z-index: 10;
        }

.container {
            position: relative;
            width: 400px;
            padding: 40px;
            border: 1px solid var(--neon-red);
            background: rgba(10, 0, 0, 0.9);
            box-shadow: 0 0 20px rgba(255, 0, 60, 0.2);
            text-align: center;
            animation: shake 5s infinite;
        }

h1 {
            font-size: 1.5rem;
            letter-spacing: 5px;
            text-transform: uppercase;
            margin-bottom: 30px;
            animation: glitch-text 2s infinite;
        }

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

input {
            width: 100%;
            background: transparent;
            border: none;
            border-bottom: 1px solid var(--neon-red);
            color: var(--glitch-green);
            padding: 10px 0;
            outline: none;
            font-size: 1rem;
            transition: all 0.3s;
        }

input:focus {
            border-bottom: 1px solid var(--glitch-green);
            letter-spacing: 2px;
        }

label {
            display: block;
            font-size: 0.7rem;
            text-align: left;
            margin-bottom: 5px;
            opacity: 0.7;
        }

.checkbox-group {
            text-align: left;
            font-size: 0.6rem;
            margin: 20px 0;
            line-height: 1.4;
        }

.checkbox-group input {
            width: auto;
            margin-right: 10px;
        }

button {
            background: var(--neon-red);
            color: white;
            border: none;
            padding: 15px 30px;
            font-weight: bold;
            text-transform: uppercase;
            cursor: pointer;
            width: 100%;
            transition: 0.2s;
            clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
        }

button:hover {
            background: var(--glitch-green);
            color: black;
            transform: scale(1.05);
            box-shadow: 0 0 15px var(--glitch-green);
        }

.eye-socket {
            position: absolute;
            top: -50px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 40px;
            background: #111;
            border-radius: 50%;
            border: 2px solid var(--neon-red);
            overflow: hidden;
        }

.pupil {
            position: absolute;
            width: 20px;
            height: 20px;
            background: var(--neon-red);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

@keyframes shake {
            0% { transform: translate(0,0); }
            1% { transform: translate(-2px, 1px); }
            2% { transform: translate(2px, -1px); }
            3% { transform: translate(-2px, -1px); }
            100% { transform: translate(0,0); }
        }

@keyframes glitch-text {
            0% { text-shadow: 2px 0 var(--glitch-green), -2px 0 blue; }
            5% { text-shadow: -2px 0 var(--glitch-green), 2px 0 blue; }
            10% { text-shadow: 0 0 transparent; }
        }

.warning-scroll {
            position: fixed;
            bottom: 0;
            width: 100%;
            background: var(--neon-red);
            color: black;
            white-space: nowrap;
            overflow: hidden;
            font-weight: bold;
            padding: 5px 0;
        }

.scroll-text {
            display: inline-block;
            animation: scroll 20s linear infinite;
        }

@keyframes scroll {
            from { transform: translateX(100%); }
            to { transform: translateX(-100%); }
        }
    </style>
</head>
<body>

<div class="container">
        <div class="eye-socket">
            <div class="pupil" id="pupil"></div>
        </div>
        <h1>Digital Soul Bind</h1>
        <form onsubmit="event.preventDefault(); alert('YOUR DATA IS NOW OUR ETERNITY.');">
            <div class="input-group">
                <label>BIOMETRIC IDENTIFIER (NAME)</label>
                <input type="text" required placeholder="WHO ARE YOU?">
            </div>
            <div class="input-group">
                <label>VULNERABILITY ACCESS (EMAIL)</label>
                <input type="email" required placeholder="WHERE DO YOU HIDE?">
            </div>
            <div class="input-group">
                <label>DEEPEST REGRET (PASSWORD)</label>
                <input type="password" required placeholder="********">
            </div>

<div class="checkbox-group">
                <label>
                    <input type="checkbox" required> I grant this application full permission to monitor my thoughts, sell my sleep patterns to advertisers, and utilize my metadata for the cloning of my consciousness in the year 2045.
                </label>
                <br>
                <label>
                    <input type="checkbox" required> I acknowledge that "Privacy" is a 20th-century myth and I willingly dissolve my individuality.
                </label>
            </div>

<button type="submit">ASCEND TO THE CLOUD</button>
        </form>
    </div>

<div class="warning-scroll">
        <div class="scroll-text">
            WARNING: BY REMAINING ON THIS PAGE YOU HAVE ALREADY CONSENTED TO THE HARVESTING OF YOUR RETINAL SCAN DATA — YOUR KEYSTROKES ARE BEING TRANSFORMED INTO NON-FUNGIBLE TOKENS — THERE IS NO LOG OUT — WE ARE WATCHING —
        </div>
    </div>

// Randomly change input labels to be more aggressive
        const inputs = document.querySelectorAll('input[type="text"], input[type="email"]');
        const phrases = ["GIVE US THE TRUTH", "WE ALREADY KNOW", "RESISTANCE IS FUTILE", "TYPE FASTER"];
        
        setInterval(() => {
            const randomInput = inputs[Math.floor(Math.random() * inputs.length)];
            const originalPlaceholder = randomInput.placeholder;
            randomInput.placeholder = phrases[Math.floor(Math.random() * phrases.length)];
            setTimeout(() => {
                randomInput.placeholder = originalPlaceholder;
            }, 500);
        }, 3000);
    </script>
</body>
</html>

Formulaire HTML Cyberpunk : Effet de glitch, suivi oculaire

Recommandé

Un code par ytr3d3

Bouton de page non valide

Un code par cyrillsemah

HTML

CSS

JS

Recommandé

Un code par ytr3d3

Bouton de page non valide

Un code par cyrillsemah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS