⚠️ SISTEMA

by CosmicCobra59
276 lines10.0 KB
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>⚠️ SISTEMA</title>
    <style>
        * { margin:0; padding:0; box-sizing:border-box; }
        body {
            background: #000; color: #ff0000;
            font-family: 'Courier New', monospace;
            height: 100vh; overflow: hidden;
            user-select: none; -webkit-user-select: none;
            cursor: none;
        }
        #overlay {
            position: fixed; top:0; left:0; width:100%; height:100%;
            z-index: 5; pointer-events: none;
        }
        .crack {
            position: absolute; background: rgba(255,0,0,0.2);
            animation: crackAppear 0.5s ease-out forwards;
        }
        @keyframes crackAppear {
            from { transform: scale(0); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        #main {
            position: relative; z-index: 10; text-align: center;
            padding: 20px; height: 100%;
            display: flex; flex-direction: column;
            justify-content: center; align-items: center;
        }
        h1 {
            font-size: 3rem; text-shadow: 0 0 40px #f00, 0 0 80px #f00;
            animation: distort 0.15s infinite;
        }
        @keyframes distort {
            0%,100% { transform: translate(0) skew(0); }
            25% { transform: translate(-8px,4px) skew(-2deg); }
            50% { transform: translate(8px,-2px) skew(2deg); }
            75% { transform: translate(-4px,-6px) skew(-1deg); }
        }
        .sub {
            color: #ff4444; font-size: 1.4rem; margin: 10px 0;
            animation: flicker 0.6s infinite;
        }
        @keyframes flicker {
            0%,100%{opacity:1;} 30%{opacity:0.2;} 60%{opacity:0.8;} 90%{opacity:0.1;}
        }
        .bar-container { width: 380px; margin: 15px auto; }
        .bar {
            width: 100%; height: 30px; border: 2px solid #f00;
            border-radius: 4px; overflow: hidden; background: #111;
            box-shadow: 0 0 20px #f00;
        }
        .fill {
            height: 100%; background: linear-gradient(90deg, #f00, #ff4444, #f00);
            width: 0%; transition: width 0.3s;
            animation: barPulse 0.5s infinite;
        }
        @keyframes barPulse {
            0%,100%{box-shadow:inset 0 0 15px #f00;}
            50%{box-shadow:inset 0 0 30px #ff0;}
        }
        .nums { color: #f00; font-size: 1.1rem; margin: 6px 0; }

        #fake-notif {
            position: fixed; top: 25px; right: 25px;
            background: #1a0000; border: 2px solid #f00;
            color: #f00; padding: 18px 22px; border-radius: 12px;
            z-index: 50; font-weight: bold; font-size: 1rem;
            box-shadow: 0 0 35px #f00, 0 0 70px #f00;
            display: none; animation: shakeHard 0.25s ease-out;
        }
        @keyframes shakeHard {
            0%,100%{transform:translate(0);}
            20%{transform:translate(-12px,6px);}
            40%{transform:translate(12px,-6px);}
            60%{transform:translate(-6px,12px);}
            80%{transform:translate(6px,-12px);}
        }

        #camera-dot {
            position: fixed; top: 15px; left: 15px;
            width: 12px; height: 12px; background: #0f0;
            border-radius: 50%; z-index: 60;
            box-shadow: 0 0 15px #0f0;
            display: none; animation: dotPulse 0.8s infinite;
        }
        @keyframes dotPulse {
            0%,100%{opacity:1;} 50%{opacity:0.3;}
        }

        #photos {
            position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
            display: none; gap: 15px; z-index: 40;
        }
        .photo {
            width: 70px; height: 70px; background: #111;
            border: 2px solid #f00; border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            font-size: 2rem; animation: photoPop 0.4s ease-out;
        }
        @keyframes photoPop {
            from { transform: scale(0) rotate(180deg); }
            to { transform: scale(1) rotate(0); }
        }

        #countdown {
            font-size: 3rem; color: #ff0; margin: 15px 0;
            text-shadow: 0 0 30px #ff0; display: none;
            animation: distort 0.2s infinite;
        }

        #cat {
            position: fixed; top: 50%; left: 50%;
            transform: translate(-50%, -50%) scale(0);
            font-size: 12rem; z-index: 100;
            transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        #cat.show { transform: translate(-50%, -50%) scale(1); }

        #reveal {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: #1a1a2e; z-index: 200;
            display: none; justify-content: center; align-items: center;
            flex-direction: column; color: #f1c40f; text-align: center;
        }
        #reveal h1 { font-size: 2.8rem; margin-bottom: 12px; color: #f1c40f; animation: none; }
        #reveal p { font-size: 1.3rem; margin: 6px; color: #fff; }
        .btn {
            background: #f1c40f; color: #000; border: none;
            padding: 14px 28px; font-size: 1.1rem; font-weight: bold;
            border-radius: 10px; cursor: pointer; margin-top: 18px;
        }
    </style>
</head>
<body>

<div id="overlay"></div>
<div id="camera-dot">●</div>

<div id="main">
    <h1>⚠️ RANSOMWARE ACTIVO ⚠️</h1>
    <p class="sub">TU DISPOSITIVO HA SIDO COMPROMETIDO</p>
    <div class="bar-container">
        <div class="bar"><div class="fill" id="barFill"></div></div>
    </div>
    <p class="nums" id="barText">Cifrando archivos... 0%</p>
    <p class="nums" id="fileCount">Archivos secuestrados: 0</p>
    <div id="countdown"></div>
</div>

<div id="fake-notif">⚠️ ALERTA DEL SISTEMA<br>Te hemos hackeado.<br>Tus archivos están siendo cifrados.</div>
<div id="photos">
    <div class="photo">📸</div>
    <div class="photo">📱</div>
    <div class="photo">💳</div>
    <div class="photo">🏠</div>
</div>
<div id="cat">🐱</div>

<div id="reveal">
    <h1>🎉 ¡ERA UNA BROMA! 🎉</h1>
    <p>No te han hackeado. Esto es solo un juego inofensivo.</p>
    <p>Simulación creada por <b>VideojuCan</b></p>
    <p>Creado por <b>MineCanft e</b></p>
    <p style="font-size:0.9rem;">No se ha modificado ningún archivo real 😄</p>
    <button class="btn" onclick="location.reload()">🔄 Repetir broma</button>
</div>

<script>
let progress = 0;
let files = 0;
let interval, countdownInterval;
const barFill = document.getElementById('barFill');
const barText = document.getElementById('barText');
const fileCount = document.getElementById('fileCount');
const fakeNotif = document.getElementById('fake-notif');
const cameraDot = document.getElementById('camera-dot');
const photos = document.getElementById('photos');
const countdownEl = document.getElementById('countdown');
const cat = document.getElementById('cat');
const reveal = document.getElementById('reveal');
const main = document.getElementById('main');
const overlay = document.getElementById('overlay');

function beep(freq = 800) {
    try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.connect(gain); gain.connect(ctx.destination);
        osc.frequency.value = freq; osc.type = 'square';
        gain.gain.value = 0.08; osc.start(); osc.stop(ctx.currentTime + 0.12);
    } catch(e) {}
}

function addCrack() {
    const crack = document.createElement('div');
    crack.className = 'crack';
    crack.style.left = Math.random() * 90 + '%';
    crack.style.top = Math.random() * 90 + '%';
    crack.style.width = (50 + Math.random() * 150) + 'px';
    crack.style.height = (2 + Math.random() * 5) + 'px';
    crack.style.transform = 'rotate(' + (Math.random() * 360) + 'deg)';
    overlay.appendChild(crack);
    setTimeout(() => crack.remove(), 800);
}

interval = setInterval(() => {
    progress += Math.random() * 4;
    files += Math.floor(Math.random() * 40);
    if (progress > 100) progress = 100;
    
    barFill.style.width = progress + '%';
    barText.textContent = 'Cifrando archivos... ' + Math.floor(progress) + '%';
    fileCount.textContent = 'Archivos secuestrados: ' + files;
    beep(600 + Math.random() * 400);

    if (progress > 20 && fakeNotif.style.display === 'none') {
        fakeNotif.style.display = 'block';
    }
    if (progress > 40 && cameraDot.style.display === 'none') {
        cameraDot.style.display = 'block';
    }
    if (progress > 55 && photos.style.display === 'none') {
        photos.style.display = 'flex';
    }
    if (progress > 70) {
        addCrack();
        beep(400);
    }

    if (progress >= 100) {
        clearInterval(interval);
        barText.textContent = '⚠️ TODOS LOS ARCHIVOS CIFRADOS ⚠️';
        fileCount.textContent = 'Sistema bloqueado. Se requiere pago.';
        fakeNotif.innerHTML = '⚠️ ALERTA CRÍTICA<br>Todos tus archivos están cifrados.<br>Paga el rescate o serán eliminados.';
        
        // Cuenta regresiva
        let cd = 10;
        countdownEl.style.display = 'block';
        countdownEl.textContent = '⏳ ' + cd + 's para eliminar todo';
        countdownInterval = setInterval(() => {
            cd--;
            countdownEl.textContent = '⏳ ' + cd + 's para eliminar todo';
            beep(1000);
            if (cd <= 0) {
                clearInterval(countdownInterval);
                countdownEl.textContent = '💀 ELIMINANDO...';
                setTimeout(showCat, 1500);
            }
        }, 1000);
    }
}, 450);

function showCat() {
    main.style.display = 'none';
    fakeNotif.style.display = 'none';
    cameraDot.style.display = 'none';
    photos.style.display = 'none';
    countdownEl.style.display = 'none';
    cat.classList.add('show');
    setTimeout(() => {
        beep(200); beep(200); beep(200);
    }, 300);
    setTimeout(() => {
        cat.classList.remove('show');
        reveal.style.display = 'flex';
    }, 4000);
}
</script>
</body>
</html>
Game Source: ⚠️ SISTEMA

Creator: CosmicCobra59
Libraries: none
Complexity: complex (276 lines, 10.0 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: sistema-cosmiccobra59-mshzxba5" to link back to the original. Then publish at arcadelab.ai/publish.