Spaces:

Boobs00
/

ai-code-snippet-viewer

Running

App Files Files Community

Boobs00 commited on Apr 30, 2025

Commit

d6da60e

verified ·

1 Parent(s): 6291f6d

Add 2 files

Browse files

Files changed (2) hide show

index.html +356 -140
prompts.txt +3 -1

index.html CHANGED Viewed

@@ -3,129 +3,240 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Code Snippet Viewer</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>
-        .code-container {
-            position: relative;
-            transform: scaleX(-1); /* Flip horizontally */
         }
-        .copy-btn {
-            position: absolute;
-            left: 10px; /* Changed from right to left */
-            top: 10px;
-            opacity: 0;
-            transition: opacity 0.2s;
-            transform: scaleX(-1); /* Flip button back */
         }
-        .code-container:hover .copy-btn {
-            opacity: 1;
         }
-        .tab-active {
-            border-top: 3px solid #3b82f6; /* Changed from bottom to top */
-            color: #3b82f6;
-            font-weight: 600;
         }
-        pre {
-            margin: 0;
-            border-radius: 0.5rem;
-            transform: scaleX(-1); /* Flip code back */
-            direction: rtl; /* Right-to-left text */
         }
-        .hljs {
-            padding: 1.5rem !important;
-            background: #1e293b !important;
         }
-        .flipped-card {
-            transform: scaleX(-1);
         }
-        .flipped-content {
-            transform: scaleX(-1);
         }
     </style>
 </head>
-<body class="bg-gray-50 min-h-screen">
-    <div class="container mx-auto px-4 py-12 max-w-5xl">
-        <div class="text-center mb-12">
-            <h1 class="text-4xl font-bold text-gray-800 mb-2 transform scaleX(-1)">AI Code Snippet Viewer</h1>
-            <p class="text-gray-600 max-w-2xl mx-auto transform scaleX(-1)">
-                Explore and copy ready-to-use code snippets for integrating various AI providers into your applications.
-            </p>
-        </div>
-        <div class="bg-white rounded-xl shadow-lg overflow-hidden flipped-card">
-            <!-- Header with tabs at the bottom -->
-            <div class="border-t border-gray-200"> <!-- Changed from border-b to border-t -->
-                <div class="flex px-6 pb-4"> <!-- Changed from pt-4 to pb-4 -->
-                    <div class="flex space-x-8">
-                        <button id="huggingface-tab" class="tab-active py-3 px-1 text-sm font-medium">
-                            Hugging Face
-                        </button>
-                        <button id="gemini-tab" class="py-3 px-1 text-sm font-medium text-gray-500 hover:text-gray-700">
-                            Gemini Coder
-                        </button>
-                    </div>
                 </div>
             </div>
-            <!-- Content area -->
-            <div class="p-6 flipped-content">
-                <!-- Demo section at the top -->
-                <div class="mb-8">
-                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Live Demo</h3>
-                    <div class="bg-gray-100 rounded-lg p-6">
-                        <div class="flex items-center space-x-4 mb-4">
-                            <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">HF</div>
-                            <div>
-                                <p class="font-medium">Hugging Face Demo</p>
-                                <p class="text-sm text-gray-500">Try the DeepSeek-R1 model</p>
                             </div>
                         </div>
-                        <div class="bg-white rounded-lg p-4 shadow-inner">
-                            <p class="text-gray-600 italic">Demo interface would appear here...</p>
-                        </div>
                     </div>
-                </div>
-                <!-- Code display -->
-                <div class="code-container mb-6">
-                    <pre id="code-display"><code class="language-python">import gradio as gr
-import ai_gradio
-gr.load(
-    name='huggingface:deepseek-ai/DeepSeek-R1',
-    src=ai_gradio.registry,
-    coder=True,
-    provider="together"
-).launch()</code></pre>
-                    <button class="copy-btn bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-sm" onclick="copyCode()">
-                        Copy
                     </button>
                 </div>
-                <!-- Provider description at the bottom -->
-                <div id="huggingface-desc">
-                    <h3 class="text-lg font-semibold text-gray-800 mb-2">Hugging Face Integration</h3>
-                    <p class="text-gray-600">
-                        This snippet demonstrates how to integrate Hugging Face's DeepSeek-R1 model into your Gradio application.
-                        The code loads the model from the AI Gradio registry with coder capabilities enabled.
-                    </p>
                 </div>
-                <div id="gemini-desc" class="hidden">
-                    <h3 class="text-lg font-semibold text-gray-800 mb-2">Gemini Coder Integration</h3>
-                    <p class="text-gray-600">
-                        This snippet shows how to use Google's Gemini 2.5 Pro model with coder capabilities in your Gradio application.
-                        The model is loaded from the AI Gradio registry with the Together provider.
-                    </p>
                 </div>
             </div>
         </div>
-        <div class="mt-8 text-center text-gray-500 text-sm transform scaleX(-1)">
-            <p>Need help integrating these snippets? <a href="#" class="text-blue-500 hover:underline">Contact support</a></p>
         </div>
     </div>
@@ -133,69 +244,174 @@ gr.load(
         // Initialize syntax highlighting
         document.addEventListener('DOMContentLoaded', (event) => {
             hljs.highlightAll();
         });
-        // Tab switching functionality
-        const tabs = {
-            'huggingface-tab': {
-                desc: 'huggingface-desc',
-                code: `import gradio as gr
-import ai_gradio
-gr.load(
-    name='huggingface:deepseek-ai/DeepSeek-R1',
-    src=ai_gradio.registry,
-    coder=True,
-    provider="together"
-).launch()`
-            },
-            'gemini-tab': {
-                desc: 'gemini-desc',
-                code: `import gradio as gr
-import ai_gradio
-gr.load(
-    name='gemini:gemini-2.5-pro-exp-03-25',
-    src=ai_gradio.registry,
-    coder=True,
-    provider="together"
-).launch()`
             }
-        };
-        Object.keys(tabs).forEach(tabId => {
-            document.getElementById(tabId).addEventListener('click', () => {
-                // Update active tab styling
-                Object.keys(tabs).forEach(id => {
-                    const tab = document.getElementById(id);
-                    tab.classList.remove('tab-active', 'text-blue-600');
-                    tab.classList.add('text-gray-500');
-                });
-                const activeTab = document.getElementById(tabId);
-                activeTab.classList.add('tab-active', 'text-blue-600');
-                activeTab.classList.remove('text-gray-500');
-                // Update content
-                Object.values(tabs).forEach(content => {
-                    document.getElementById(content.desc).classList.add('hidden');
-                });
-                document.getElementById(tabs[tabId].desc).classList.remove('hidden');
-                // Update code
-                document.getElementById('code-display').textContent = tabs[tabId].code;
-                hljs.highlightAll();
-            });
-        });
-        // Copy code functionality
         function copyCode() {
-            const code = document.getElementById('code-display').textContent;
             navigator.clipboard.writeText(code).then(() => {
-                const btn = document.querySelector('.copy-btn');
                 btn.textContent = 'Copied!';
                 setTimeout(() => {
                     btn.textContent = 'Copy';
                 }, 2000);
             });
         }
     </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>

 <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>
         // 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>

prompts.txt CHANGED Viewed

@@ -1,2 +1,4 @@
 Reitorate and implement optimized and refined robust.
-Flip it and reverse it.

 Reitorate and implement optimized and refined robust.
+Flip it and reverse it.
+Bring it back one time come on!  And around again!  Come like a bomb!
+I am loving this idea with detonating the code instead of just executing, like, it's some kind of regular everyday average ordinary code. This is bomb code and it explodes. Let's detonate an IDE that is made to detonate for bomb code that explodes and doesn't just execute like the rest of them.