Spaces:

Tirvo
/

p0p

Running

File size: 11,920 Bytes

30c0228

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓</title>
    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'VT323', monospace;
        }

        body {
            min-height: 100vh;
            background: #000;
            color: #0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
        }

        .crt-effect::before {
            content: " ";
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
            z-index: 2;
            background-size: 100% 2px, 3px 100%;
            pointer-events: none;
        }

        .scanline {
            position: fixed;
            width: 100%;
            height: 4px;
            background: rgba(0, 255, 0, 0.1);
            animation: scan 4s linear infinite;
            box-shadow: 0 0 10px #0f0;
            z-index: 3;
        }

        .auth-container {
            background: rgba(0, 0, 0, 0.8);
            border: 3px solid #0f0;
            padding: 2rem;
            width: 90%;
            max-width: 500px;
            position: relative;
            box-shadow: 0 0 30px rgba(0, 255, 0, 0.3);
            z-index: 1;
            animation: pulse 3s infinite alternate;
        }

        .glitch-text {
            font-size: 2.5rem;
            text-align: center;
            text-shadow: 2px 2px #ff00ff;
            animation: glitch 2s infinite;
            margin-bottom: 2rem;
            letter-spacing: 2px;
        }

        .input-field {
            margin-bottom: 1.5rem;
            position: relative;
        }

        .input-field::before {
            content: ">";
            position: absolute;
            left: 5px;
            top: 50%;
            transform: translateY(-50%);
            color: #0f0;
            font-size: 1.2rem;
            z-index: 1;
        }

        .input-field input {
            width: 100%;
            padding: 12px 12px 12px 25px;
            background: rgba(0, 0, 0, 0.7);
            border: 1px solid #0f0;
            color: #0f0;
            font-size: 1.2rem;
            transition: all 0.3s;
            box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.2);
        }

        .input-field input:focus {
            outline: none;
            box-shadow: 0 0 15px rgba(0, 255, 0, 0.5), inset 0 0 10px rgba(0, 255, 0, 0.2);
            border-color: #0f0;
        }

        .auth-button {
            width: 100%;
            padding: 15px;
            background: #0f0;
            border: 2px solid #000;
            color: #000;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s;
            text-transform: uppercase;
            letter-spacing: 2px;
            position: relative;
            overflow: hidden;
        }

        .auth-button:hover {
            background: #0c0;
            box-shadow: 0 0 20px #0f0;
        }

        .auth-button::after {
            content: "";
            position: absolute;
            top: -50%;
            left: -60%;
            width: 20%;
            height: 200%;
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(30deg);
            transition: all 0.6s;
        }

        .auth-button:hover::after {
            left: 120%;
        }

        .console {
            margin-top: 2rem;
            border-top: 1px solid rgba(0, 255, 0, 0.3);
            padding-top: 1rem;
        }

        .terminal {
            height: 120px;
            overflow-y: auto;
            background: rgba(0, 0, 0, 0.7);
            padding: 10px;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            border: 1px solid rgba(0, 255, 0, 0.3);
            box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.1);
        }

        .terminal::-webkit-scrollbar {
            width: 5px;
        }

        .terminal::-webkit-scrollbar-track {
            background: #000;
        }

        .terminal::-webkit-scrollbar-thumb {
            background: #0f0;
        }

        @keyframes scan {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100vh); }
        }

        @keyframes glitch {
            0% { text-shadow: 2px 2px #ff00ff; transform: translateX(-1px); }
            25% { text-shadow: -2px 2px #00ffff; transform: translateX(1px); }
            50% { text-shadow: -2px -2px #ffff00; transform: translateX(-1px); }
            75% { text-shadow: 2px -2px #00ffff; transform: translateX(1px); }
            100% { text-shadow: 2px 2px #ff00ff; transform: translateX(-1px); }
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 20px rgba(0, 255, 0, 0.3); }
            100% { box-shadow: 0 0 40px rgba(0, 255, 0, 0.5); }
        }

        .matrix-code {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0.15;
            z-index: -1;
        }

        .access-denied {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 5rem;
            color: #f00;
            text-shadow: 0 0 20px #f00;
            display: none;
            z-index: 10;
            animation: flicker 0.5s infinite alternate;
        }

        @keyframes flicker {
            0% { opacity: 1; }
            100% { opacity: 0.7; }
        }

        @media (max-width: 600px) {
            .auth-container {
                padding: 1.5rem;
                width: 95%;
            }

            .glitch-text {
                font-size: 2rem;
            }

            .terminal {
                height: 100px;
            }
        }
    </style>
</head>
<body class="crt-effect">
<div class="scanline"></div>
<div class="matrix-code" id="matrix"></div>
<div class="access-denied" id="accessDenied">ACCESS DENIED</div>

<div class="auth-container">
    <div class="glitch-text" style="display: flex; justify-content: center; align-items: center;">▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓</div>
    <form id="loginForm">
        <div class="input-field">
            <input type="text" placeholder="[root@heaven ~]$" required autocomplete="off" id="username">
        </div>
        <div class="input-field">
            <input type="password" placeholder="[encryption key]" required id="password">
        </div>
        <button type="submit" class="auth-button">INITIATE SEQUENCE</button>
    </form>

    <div class="console">
        <div class="terminal" id="terminal">
            > Initializing security protocols...<br>
            > Firewall active: HEAVEN_ACC3SS<br>
            > Encryption: AES-256 TOR enabled<br>
            > Warning: Unauthorized access prohibited<br>
        </div>
    </div>
</div>

<script>
    // Matrix background effect
    function createMatrix() {
        const chars = "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン";
        const matrix = document.getElementById('matrix');
        const width = window.innerWidth;
        const columns = Math.floor(width / 20);

        for (let i = 0; i < columns; i++) {
            const column = document.createElement('div');
            column.style.position = 'absolute';
            column.style.left = i * 20 + 'px';
            column.style.top = Math.floor(Math.random() * -1000) + 'px';
            column.style.color = '#0f0';
            column.style.fontSize = '1.2rem';
            column.style.textShadow = '0 0 5px #0f0';
            matrix.appendChild(column);

            let y = 0;

            setInterval(() => {
                const text = chars[Math.floor(Math.random() * chars.length)];
                column.innerHTML = text + '<br>' + column.innerHTML;

                if (column.offsetHeight > window.innerHeight * 1.5) {
                    column.innerHTML = text;
                    column.style.top = Math.floor(Math.random() * -1000) + 'px';
                }

                column.style.top = parseInt(column.style.top) + 20 + 'px';
            }, 100 + Math.random() * 200);
        }
    }

    // Typing effect
    function typeEffect(element, text, speed = 50) {
        let i = 0;
        const timer = setInterval(() => {
            if (i < text.length) {
                element.innerHTML += text.charAt(i);
                i++;
            } else {
                clearInterval(timer);
            }
            element.scrollTop = element.scrollHeight;
        }, speed);
    }

    // Terminal effects
    document.getElementById('loginForm').addEventListener('submit', (e) => {
        e.preventDefault();
        const terminal = document.getElementById('terminal');
        const username = document.getElementById('username').value;
        const accessDenied = document.getElementById('accessDenied');

        // Clear previous inputs
        terminal.innerHTML += '<br>> Authenticating credentials...';

        setTimeout(() => {
            typeEffect(terminal, '<br>> Verifying username: ' + username, 30);

            setTimeout(() => {
                typeEffect(terminal, '<br>> Checking encryption key...', 30);

                setTimeout(() => {
                    typeEffect(terminal, '<br>> ERROR 0x7E: ACCESS DENIED', 30);

                    setTimeout(() => {
                        accessDenied.style.display = 'block';
                        document.body.style.animation = 'glitch 0.2s infinite';

                        setTimeout(() => {
                            accessDenied.style.display = 'none';
                            document.body.style.animation = '';
                            typeEffect(terminal, '<br>> Security alert triggered', 30);
                            typeEffect(terminal, '<br>> IP logged: ' + (Math.floor(Math.random() * 255) + 1) + '.' +
                                (Math.floor(Math.random() * 255)) + '.' +
                                (Math.floor(Math.random() * 255)) + '.' +
                                (Math.floor(Math.random() * 255)), 30);
                        }, 2000);
                    }, 1000);
                }, 1000);
            }, 1000);
        }, 1000);
    });

    // Initialize
    window.addEventListener('load', () => {
        createMatrix();
        const terminal = document.getElementById('terminal');
        terminal.scrollTop = terminal.scrollHeight;
    });
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Tirvo/p0p" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>