\n
\n \n
\n
Ciber-Misticismo
\nSoberano Digital: Proteo
\n \rangle", "css": "body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background-color: #000; color: #00ffcc; font-family: 'Courier New', Courier, monospace; }\n#app { position: relative; width: 100%; height: 100%; }\n#canvas-container { position: relative; width: 100%; height: 100%; }\n#canvas { display: block; width: 100%; height: 100%; }\n#ui { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; z-index: 10; }\n#ui h1 { font-size: 3rem; letter-spacing: 10px; text-transform: uppercase; text-shadow: 0 0 15px #00ffcc; margin-bottom: 10px; animation: pulse 3s infinite ease-in-out; }\n#ui p { font-size: 1.2rem; opacity: 0.7; letter-spacing: 2px; }\n.overlay { position: absolute; bottom: 20px; right: 20px; font-size: 0.8rem; opacity: 0.4; }\n@keyframes pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }", "js": "const canvas = document.getElementById('canvas');\nconst ctx = canvas.getContext('2d');\nlet width, height, particles = [];\nconst particleCount = 150;\n\nfunction resize() {\n width = canvas.width = window.innerWidth;\n height = canvas.height = window.innerHeight;\n}\n\nwindow.addEventListener('resize', resize);\nresize();\n\nclass Particle {\n constructor() {\n this.reset();\n }\n reset() {\n this.x = Math.random() * width;\n this.y = Math.random() * height;\n this.vx = (Math.random() - 0.5) * 0.5;\n this.vy = (Math.random() - 0.5) * 0.5;\n this.size = Math.random() * 2 + 1;\n this.color = `hsl(${Math.random() * 60 + 160}, 100%, 70%)`;\n this.angle = Math.random() * Math.PI * 2;\n }\n update() {\n this.x += this.vx;\n this.y += this.vy;\n if (this.x < 0 || this.x > width) this.vx *= -1;\n if (this.y < 0 || this.y > height) this.vy *= -1;\n this.angle += 0.02;\n }\n draw() {\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n ctx.fill();\n ctx.strokeStyle = this.color;\n ctx.stroke();\n }\n}\n\nfunction init() {\n particles = [];\n for (let i = 0; i < particleCount; i++) {\n particles.push(new Particle());\n }\n}\n\nfunction animate() {\n ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';\n ctx.fillRect(0, 0, width, height);\n \n ctx.lineWidth = 0.5;\n particles.forEach((p, i) =>