Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>💣 Bomb IDE - For Explosive Code Detonation</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/python.min.js"></script> | |
| <style> | |
| @keyframes shake { | |
| 0%, 100% { transform: translateX(0); } | |
| 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } | |
| 20%, 40%, 60%, 80% { transform: translateX(5px); } | |
| } | |
| @keyframes flash { | |
| 0%, 100% { background-color: transparent; } | |
| 50% { background-color: rgba(239, 68, 68, 0.3); } | |
| } | |
| @keyframes particle-explode { | |
| 0% { transform: scale(1); opacity: 1; } | |
| 100% { transform: scale(5); opacity: 0; } | |
| } | |
| @keyframes fuse-burn { | |
| 0% { width: 100%; } | |
| 100% { width: 0%; } | |
| } | |
| .shake { | |
| animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; | |
| } | |
| .flash { | |
| animation: flash 0.3s ease-out; | |
| } | |
| .particle { | |
| position: absolute; | |
| border-radius: 50%; | |
| animation: particle-explode 1s ease-out forwards; | |
| } | |
| .fuse { | |
| height: 4px; | |
| background: linear-gradient(to right, #f59e0b, #ef4444); | |
| animation: fuse-burn 3s linear forwards; | |
| } | |
| .terminal-output { | |
| font-family: 'Courier New', monospace; | |
| white-space: pre-wrap; | |
| } | |
| .bomb-code { | |
| border-left: 4px solid #ef4444; | |
| } | |
| .danger-zone { | |
| box-shadow: 0 0 15px rgba(239, 68, 68, 0.5); | |
| } | |
| .explosion-effect { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| pointer-events: none; | |
| z-index: 100; | |
| overflow: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen overflow-hidden"> | |
| <!-- Explosion effect container --> | |
| <div id="explosion-effect" class="explosion-effect hidden"></div> | |
| <div class="container mx-auto px-4 py-8 max-w-7xl"> | |
| <!-- Header --> | |
| <header class="flex items-center justify-between mb-8 border-b border-red-900 pb-4"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-2xl">💣</span> | |
| </div> | |
| <div> | |
| <h1 class="text-3xl font-bold">Bomb IDE</h1> | |
| <p class="text-red-400">For Explosive Code Detonation</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="bg-red-900 px-3 py-1 rounded-full text-sm flex items-center"> | |
| <div class="w-2 h-2 bg-red-500 rounded-full mr-2 animate-pulse"></div> | |
| <span>ARMED</span> | |
| </div> | |
| <button id="emergency-stop" class="bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg text-sm font-medium flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> | |
| </svg> | |
| Emergency Stop | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main IDE Layout --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- Code Editor --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden danger-zone"> | |
| <div class="bg-gray-900 px-4 py-3 flex items-center justify-between border-b border-gray-700"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div> | |
| <h2 class="font-medium">bomb_code.py</h2> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="text-xs text-gray-500">💣 BOMB MODE</div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium mb-2">Detonation Yield</label> | |
| <div class="flex items-center space-x-4"> | |
| <select id="yield-select" class="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-sm"> | |
| <option value="small">Small (Debug)</option> | |
| <option value="medium" selected>Medium (Standard)</option> | |
| <option value="large">Large (Production)</option> | |
| <option value="extreme">Extreme (Overkill)</option> | |
| </select> | |
| <div class="flex-1"> | |
| <div class="fuse"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <pre id="code-editor" class="bomb-code bg-gray-900 p-4 rounded-lg overflow-auto max-h-96"><code class="language-python"># Welcome to Bomb IDE! | |
| # Write your explosive code here... | |
| class Bomb: | |
| def __init__(self, yield_level="medium"): | |
| self.yield_level = yield_level | |
| self.armed = False | |
| def arm(self): | |
| """Arm the bomb for detonation""" | |
| self.armed = True | |
| return f"💣 Bomb armed at {self.yield_level} yield!" | |
| def detonate(self): | |
| """Detonate the bomb with explosive force""" | |
| if not self.armed: | |
| raise Exception("Bomb not armed! Use .arm() first") | |
| # Calculate explosive force based on yield | |
| force = { | |
| "small": 100, | |
| "medium": 1000, | |
| "large": 10000, | |
| "extreme": 100000 | |
| }.get(self.yield_level, 1000) | |
| return f"💥 KABOOM! Detonated with force {force}!" | |
| # Create and detonate a bomb | |
| bomb = Bomb(yield_level="medium") | |
| print(bomb.arm()) | |
| print(bomb.detonate())</code></pre> | |
| <button id="copy-code" class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-gray-300 px-2 py-1 rounded text-xs"> | |
| Copy | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 px-4 py-3 border-t border-gray-700 flex justify-end"> | |
| <button id="detonate-btn" class="bg-gradient-to-r from-red-600 to-yellow-500 hover:from-red-700 hover:to-yellow-600 text-white px-6 py-2 rounded-lg font-bold flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> | |
| </svg> | |
| DETONATE CODE | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Terminal Output --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden"> | |
| <div class="bg-gray-900 px-4 py-3 flex items-center justify-between border-b border-gray-700"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div> | |
| <h2 class="font-medium">DETONATION TERMINAL</h2> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="text-xs text-gray-500">READY FOR BLAST</div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div id="terminal-output" class="terminal-output bg-black text-green-400 p-4 rounded-lg h-96 overflow-y-auto font-mono text-sm"> | |
| <div class="text-yellow-400">Bomb IDE v1.0 - Explosive Code Detonation System</div> | |
| <div class="text-gray-500">-----------------------------------------------</div> | |
| <div class="mb-4">System initialized. Awaiting detonation sequence...</div> | |
| <div id="output-content"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 px-4 py-3 border-t border-gray-700 flex items-center"> | |
| <div class="flex-1 flex items-center"> | |
| <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div> | |
| <span class="text-xs text-gray-400">DETONATION READY</span> | |
| </div> | |
| <button id="clear-terminal" class="text-gray-400 hover:text-gray-200 text-sm flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /> | |
| </svg> | |
| Clear Debris | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bomb Status --> | |
| <div class="mt-8 bg-gray-800 rounded-lg p-6"> | |
| <h2 class="text-xl font-bold mb-4 flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2m0 4h.01" /> | |
| </svg> | |
| Detonation Status | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-gray-900 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm text-gray-400">Last Detonation</span> | |
| <span class="text-xs bg-red-900 text-red-400 px-2 py-1 rounded">N/A</span> | |
| </div> | |
| <div class="text-2xl font-bold" id="last-detonation">--</div> | |
| </div> | |
| <div class="bg-gray-900 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm text-gray-400">Detonation Force</span> | |
| <span class="text-xs bg-yellow-900 text-yellow-400 px-2 py-1 rounded">CALCULATING</span> | |
| </div> | |
| <div class="text-2xl font-bold" id="detonation-force">--</div> | |
| </div> | |
| <div class="bg-gray-900 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm text-gray-400">System Integrity</span> | |
| <span class="text-xs bg-green-900 text-green-400 px-2 py-1 rounded">100%</span> | |
| </div> | |
| <div class="h-2 bg-gray-700 rounded-full overflow-hidden"> | |
| <div id="integrity-bar" class="h-full bg-green-500" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize syntax highlighting | |
| document.addEventListener('DOMContentLoaded', (event) => { | |
| hljs.highlightAll(); | |
| // Set up event listeners | |
| document.getElementById('detonate-btn').addEventListener('click', detonateCode); | |
| document.getElementById('clear-terminal').addEventListener('click', clearTerminal); | |
| document.getElementById('copy-code').addEventListener('click', copyCode); | |
| document.getElementById('emergency-stop').addEventListener('click', emergencyStop); | |
| }); | |
| // Create explosion particles | |
| function createExplosion(x, y, count = 30) { | |
| const container = document.getElementById('explosion-effect'); | |
| container.innerHTML = ''; | |
| container.classList.remove('hidden'); | |
| const colors = ['#ef4444', '#f59e0b', '#f97316', '#facc15']; | |
| for (let i = 0; i < count; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'particle'; | |
| // Random properties | |
| const size = Math.random() * 10 + 5; | |
| const color = colors[Math.floor(Math.random() * colors.length)]; | |
| const duration = Math.random() * 0.5 + 0.5; | |
| const delay = Math.random() * 0.3; | |
| // Position relative to click | |
| const offsetX = (Math.random() - 0.5) * 100; | |
| const offsetY = (Math.random() - 0.5) * 100; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| particle.style.backgroundColor = color; | |
| particle.style.left = `${x + offsetX}px`; | |
| particle.style.top = `${y + offsetY}px`; | |
| particle.style.animationDuration = `${duration}s`; | |
| particle.style.animationDelay = `${delay}s`; | |
| container.appendChild(particle); | |
| } | |
| // Hide container after animation | |
| setTimeout(() => { | |
| container.classList.add('hidden'); | |
| }, 1000); | |
| } | |
| // Simulate terminal output | |
| function terminalOutput(text, color = 'text-green-400', delay = 0) { | |
| setTimeout(() => { | |
| const output = document.getElementById('output-content'); | |
| const line = document.createElement('div'); | |
| line.className = `mb-1 ${color}`; | |
| line.textContent = text; | |
| output.appendChild(line); | |
| output.scrollTop = output.scrollHeight; | |
| }, delay); | |
| } | |
| // Detonate the code | |
| function detonateCode() { | |
| const yieldLevel = document.getElementById('yield-select').value; | |
| const terminal = document.getElementById('terminal-output'); | |
| const detonateBtn = document.getElementById('detonate-btn'); | |
| // Visual feedback | |
| terminal.classList.add('flash'); | |
| document.body.classList.add('shake'); | |
| detonateBtn.disabled = true; | |
| detonateBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>DETONATING...'; | |
| // Clear previous output | |
| document.getElementById('output-content').innerHTML = ''; | |
| // Get current time for last detonation | |
| const now = new Date(); | |
| const timeString = now.toLocaleTimeString(); | |
| document.getElementById('last-detonation').textContent = timeString; | |
| // Calculate force based on yield | |
| const forceMap = { | |
| 'small': 100, | |
| 'medium': 1000, | |
| 'large': 10000, | |
| 'extreme': 100000 | |
| }; | |
| const force = forceMap[yieldLevel] || 1000; | |
| document.getElementById('detonation-force').textContent = force; | |
| // Reduce system integrity slightly | |
| const integrityBar = document.getElementById('integrity-bar'); | |
| const currentWidth = parseInt(integrityBar.style.width); | |
| const newWidth = Math.max(0, currentWidth - (Math.random() * 5 + 5)); | |
| integrityBar.style.width = `${newWidth}%`; | |
| // Terminal output sequence | |
| terminalOutput('>>> Initiating detonation sequence...', 'text-yellow-400'); | |
| terminalOutput(`>>> Yield level set to: ${yieldLevel.toUpperCase()}`, 'text-yellow-400', 500); | |
| terminalOutput('>>> Arming explosive payload...', 'text-yellow-400', 1000); | |
| terminalOutput('💣 Bomb armed!', 'text-red-400', 1500); | |
| terminalOutput('>>> Starting countdown...', 'text-yellow-400', 2000); | |
| // Countdown | |
| for (let i = 3; i > 0; i--) { | |
| terminalOutput(`${i}...`, 'text-red-500', 2000 + (3 - i) * 500); | |
| } | |
| // Detonation | |
| setTimeout(() => { | |
| terminalOutput('💥 KABOOM!', 'text-red-500 font-bold', 3500); | |
| terminalOutput(`Detonated with force ${force}!`, 'text-red-400', 4000); | |
| terminalOutput('>>> Detonation successful!', 'text-green-500', 4500); | |
| terminalOutput('>>> System checks complete', 'text-green-400', 5000); | |
| // Create explosion effect | |
| const rect = detonateBtn.getBoundingClientRect(); | |
| createExplosion(rect.left + rect.width/2, rect.top + rect.height/2, force/50); | |
| // Reset button | |
| setTimeout(() => { | |
| detonateBtn.disabled = false; | |
| detonateBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>DETONATE CODE'; | |
| terminal.classList.remove('flash'); | |
| document.body.classList.remove('shake'); | |
| }, 1000); | |
| }, 3500); | |
| } | |
| // Clear terminal | |
| function clearTerminal() { | |
| document.getElementById('output-content').innerHTML = ''; | |
| terminalOutput('Terminal cleared. Ready for next detonation.', 'text-gray-500'); | |
| } | |
| // Copy code to clipboard | |
| function copyCode() { | |
| const code = document.querySelector('#code-editor code').textContent; | |
| navigator.clipboard.writeText(code).then(() => { | |
| const btn = document.getElementById('copy-code'); | |
| btn.textContent = 'Copied!'; | |
| setTimeout(() => { | |
| btn.textContent = 'Copy'; | |
| }, 2000); | |
| }); | |
| } | |
| // Emergency stop | |
| function emergencyStop() { | |
| const output = document.getElementById('output-content'); | |
| output.innerHTML = ''; | |
| terminalOutput('!!! EMERGENCY STOP ACTIVATED !!!', 'text-red-500 font-bold'); | |
| terminalOutput('All detonation processes halted.', 'text-red-400'); | |
| terminalOutput('System cooling down...', 'text-blue-400', 500); | |
| terminalOutput('Safety protocols engaged.', 'text-green-400', 1000); | |
| // Reset integrity | |
| document.getElementById('integrity-bar').style.width = '100%'; | |
| // Reset detonation button | |
| const detonateBtn = document.getElementById('detonate-btn'); | |
| detonateBtn.disabled = false; | |
| detonateBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>DETONATE CODE'; | |
| // Visual feedback | |
| document.body.classList.remove('shake'); | |
| document.getElementById('terminal-output').classList.remove('flash'); | |
| } | |
| </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=Boobs00/ai-code-snippet-viewer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |