\n
\n
\n
\n
\n

DATA PARANOIA

\n

SYSTEM STATUS: MONITORING

\n
\n
\n
\n
\n
\n \n \n
\n
\n
\n
", "css": "body, html { margin: 0; padding: 0; height: 100%; width: 100%; background: #050505; color: #00ff41; font-family: 'Courier New', Courier, monospace; overflow: hidden; }\n#app { position: relative; height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; }\n#glitch-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1) 1px, transparent 1px, transparent 2px); z-index: 10; }\n#data-stream { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.3; pointer-events: none; }\n#interface { position: relative; z-index: 5; background: rgba(0, 20, 0, 0.8); border: 2px solid #00ff41; box-shadow: 0 0 20px rgba(0, 255, 65, 0.4); padding: 40px; border-radius: 10px; text-align: center; max-width: 600px; }\n.glitch-text { font-size: 3rem; font-weight: bold; position: relative; color: #00ff41; text-transform: leyenda; }\n.glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0); opacity: 0.8; }\n.glitch-text::before { color: #ff00c1; z-index: -1; animation: glitch-anim 0.3s cubic-bezier(.25, .46, .45, .//) infinite; }\n.glitch-text::after { color: #00fff2; z-index: -1; animation: glitch- 뜻 0.3s cubic-bezier(.25, .46, .45, .//) reverse infinite; }\n@keyframes glitch-anim { 0% { transform: translate(0); } 20% { transform: translate(-3px, 3px); } 40% { transform: translate(-3px, -3px); } 60% { transform: translate(3px, 3px); } 80% { transform: translate(3px, -3px); } 100% { transform: translate(0); } }\n.status { margin: 15px 0; font-size: 1.2rem; }\n#terminal { background: #000; border: 1px solid #00ff41; height: 200px; overflow-y: auto; padding: 10px; text-align: left; font-size: 0.9rem; position: relative; }\n#logs { color: #00ff41; }\n.cursor { width: 10px; height: 20px; background: #00ff41; display: inline-block; animation: blink 0.8s infinite; }\n@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }\n.controls { margin-top: 20px; display: flex; justify-content: center; gap: 20px; }\n.btn { background: transparent; border: 1px solid #00ff41; color: #00ff41; padding: 10px 20px; cursor: pointer; font-family: inherit; transition: 0.3s; }\n.btn:hover { background: #00ff41; color: #000; box-shadow: 0 0 15px #00ff41; }\n#status-val { font-weight: bold; color: #fff; text-shadow: 0 0 5px #00ff41; }\n", "js": "const logs = document.getElementById('logs');\nconst statusVal = document.getElementById('status-val');\nconst breachBtn = document.getElementById('breach');\nconst resetBtn = document.getElementById('reset');\nconst dataStream = document.getElementById('data-stream');\n\nconst messages = [\n 'Scanning for vulnerabilities...',\n 'Tracing IP address...',\n 'Accessing encrypted archives...',\n 'Analyzing behavioral patterns...',\n 'WARNING: Data leak detected!',\n 'Who is watching?',\n 'They are inside the system.',\n 'They know your location.',\n 'Deleting traces of existence...',\n 'Parsing neural link...',\n 'Paranoia level: CRITICAL',\n 'Your data is no longer yours.'\n];\n\nfunction createDataRain() {\n const canvas = document.createElement('canvas');\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n dataStream.appendChild(canvas);\n const ctx = canvas.getContext('2d');\n const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*()_+-=[]{}|;:','.';\n const fontSize = 16;\n const columns = canvas.width / fontSize;\n const drops = new Array(Math.floor(columns)).fill(1);\n\n function draw() {\n ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n ctx.fillStyle = '#00ff41';\n ctx.font = '16px monospace';\n \n for (let i = 0; i < drops.length; i++) {\n const text = chars.charAt(Math.floor(Math.random() * chars.length));\n ctx.fillText(text, i * fontSize, drops[i] * fontSize);\n if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {\n drops[i] = 0;\n }\n drops[i]++;\n }\n requestAnimationFrame(draw);\n }\n draw();\n}\n\nfunction addLog(msg) {\n const div = document.createElement('div');\n div.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`;\n logs.appendChild(div);\n logs.scrollTop = logs.scrollHeight;\n}\n\nfunction triggerBreach() {\n statusVal.textContent = 'BREACHED';\n statusVal.style.color = '#ff0000';\n addLog('CRITICAL: Unauthorized access detected. SYSTEM FAILURE.');\n \n document.body.style.transition = '0.1s';\n let count = 0;\n const glitchInterval = setInterval(() => {\n document.body.style.backgroundColor = count % 2 === 0 ? '#ff0000' : '#050505';\n count++;\n if (count > 20) clearInterval(glitchInterval);\n }, 50);\n}\n\nfunction purgeData() {\n statusVal.textContent = 'MONITORING';\n statusVal.style.color = '#fff';\n addLog('Purging all local cache... Resetting parity...');\n logs.innerHTML = '';\n \n // Simulates a reset effect\n document.body.style.backgroundColor = '#050505';\n}\n\nbreachBtn.addEventListener('click', () => triggerBreach());\nresetBtn.addEventListener('click', () => triggerData());\n// Correction: calling purgeData instead of triggerData\nresetBtn.addEventListener('click', () => purgeData());\n\n// Start data rain and log sequence\ncreateDataRain();\nsetInterval(() =>