HTML de Cyberpunk Form: Efecto de falla, seguimiento ocular

841 Gemini123

Abrir en el editor Publica tu código

HTML de Cyberpunk Form: Efecto de falla, seguimiento ocular

Recomendado

26 May 2025

Un código de mironovbogdan341

12 December 2025

Menú de pestañas de JavaScript con botones redondos

13 April 2025

Un código de gherhz

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>

CSS