Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title> IDE</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Fira Code', 'Courier New', monospace; | |
| } | |
| body { | |
| height: 100vh; | |
| display: flex; | |
| overflow: hidden; | |
| color: #e0e0e0; | |
| background-color: #121212; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1e1e1e; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #00bcd4; | |
| border-radius: 0; | |
| } | |
| /* Chat panel */ | |
| .chat-panel { | |
| width: 280px; | |
| height: 100vh; | |
| background-color: #1e1e1e; | |
| border-right: 1px solid #00bcd4; | |
| display: flex; | |
| flex-direction: column; | |
| flex-shrink: 0; | |
| } | |
| .chat-header { | |
| padding: 10px 12px; | |
| border-bottom: 1px solid #00bcd4; | |
| font-weight: 600; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background-color: #121212; | |
| color: #00bcd4; | |
| font-size: 14px; | |
| } | |
| .chat-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 12px; | |
| background-color: #1e1e1e; | |
| } | |
| .message { | |
| margin-bottom: 12px; | |
| padding: 8px 10px; | |
| background-color: #252525; | |
| border-radius: 0; | |
| border-left: 2px solid #00bcd4; | |
| max-width: 90%; | |
| font-size: 13px; | |
| line-height: 1.4; | |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); | |
| } | |
| .message.user { | |
| margin-left: auto; | |
| background-color: #003d4d; | |
| border-left: 3px solid #00bcd4; | |
| color: white; | |
| } | |
| .message.bot { | |
| background-color: #252525; | |
| border-left: 3px solid #4caf50; | |
| } | |
| .message.system { | |
| background-color: #252525; | |
| border-left: 3px solid #ff5722; | |
| font-size: 12px; | |
| color: #b0b0b0; | |
| } | |
| .message-time { | |
| font-size: 10px; | |
| color: #757575; | |
| margin-top: 2px; | |
| text-align: right; | |
| } | |
| .chat-input-container { | |
| padding: 10px 12px; | |
| border-top: 1px solid #00bcd4; | |
| background-color: #121212; | |
| } | |
| .chat-input { | |
| width: 100%; | |
| padding: 8px 10px; | |
| border: 1px solid #00bcd4; | |
| border-radius: 0; | |
| resize: none; | |
| margin-bottom: 8px; | |
| font-size: 13px; | |
| background-color: #252525; | |
| color: #e0e0e0; | |
| min-height: 60px; | |
| } | |
| .chat-input:focus { | |
| outline: none; | |
| border-color: #00e5ff; | |
| } | |
| .chat-buttons { | |
| display: flex; | |
| gap: 6px; | |
| margin-bottom: 8px; | |
| } | |
| .chat-button { | |
| background-color: #00bcd4; | |
| color: #121212; | |
| border: none; | |
| padding: 6px 10px; | |
| border-radius: 0; | |
| cursor: pointer; | |
| font-size: 12px; | |
| font-weight: bold; | |
| transition: all 0.2s; | |
| flex: 1; | |
| text-align: center; | |
| } | |
| .chat-button:hover { | |
| background-color: #00e5ff; | |
| } | |
| .chat-button.secondary { | |
| background-color: #252525; | |
| color: #00bcd4; | |
| border: 1px solid #00bcd4; | |
| } | |
| .chat-button.secondary:hover { | |
| background-color: #003d4d; | |
| } | |
| .chat-button.danger { | |
| background-color: #252525; | |
| color: #ff5252; | |
| border: 1px solid #ff5252; | |
| } | |
| .chat-button.danger:hover { | |
| background-color: #4d0000; | |
| } | |
| /* StackBlitz container */ | |
| .stackblitz-container { | |
| flex: 1; | |
| height: 100vh; | |
| position: relative; | |
| background-color: #121212; | |
| } | |
| #stackblitz-embed { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| /* Resize handle */ | |
| .resize-handle { | |
| width: 4px; | |
| background-color: #00bcd4; | |
| cursor: col-resize; | |
| flex-shrink: 0; | |
| transition: background-color 0.2s; | |
| } | |
| .resize-handle:hover { | |
| background-color: #00e5ff; | |
| } | |
| /* Tabs */ | |
| .chat-tabs { | |
| display: flex; | |
| border-bottom: 1px solid #00bcd4; | |
| } | |
| .chat-tab { | |
| padding: 8px 12px; | |
| cursor: pointer; | |
| background-color: #252525; | |
| color: #757575; | |
| border-right: 1px solid #121212; | |
| font-size: 12px; | |
| } | |
| > | |
| .chat-tab.active { | |
| background-color: #121212; | |
| color: #00bcd4; | |
| border-bottom: 2px solid #00bcd4; | |
| } | |
| /* Status bar */ | |
| .status-bar { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 8px 16px; | |
| background-color: #121212; | |
| color: #00bcd4; | |
| font-size: 12px; | |
| border-top: 1px solid #00bcd4; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .chat-panel { | |
| width: 280px; | |
| } | |
| .chat-buttons { | |
| flex-direction: column; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Left Chat Panel --> | |
| <div class="chat-panel"> | |
| <div class="chat-header"> | |
| <span><i class="fas fa-code mr-2"></i>CyberBlitz IDE</span> | |
| <div> | |
| <i class="fas fa-cog cursor-pointer hover:text-cyan-300"></i> | |
| <i class="fas fa-expand ml-3 cursor-pointer hover:text-cyan-300"></i> | |
| </div> | |
| </div> | |
| <div class="chat-tabs"> | |
| <div class="chat-tab active"><i class="fas fa-comments mr-2"></i>Chat</div> | |
| <div class="chat-tab"><i class="fas fa-users mr-2"></i>Collaborators</div> | |
| <div class="chat-tab"><i class="fas fa-terminal mr-2"></i>Console</div> | |
| </div> | |
| <div class="chat-messages"> | |
| <div class="message bot"> | |
| <div>Welcome to CyberBlitz IDE! I'm your AI coding assistant.</div> | |
| <div class="message-time">12:34 PM</div> | |
| </div> | |
| <div class="message system"> | |
| <div>System connected to StackBlitz project</div> | |
| <div class="message-time">12:34 PM</div> | |
| </div> | |
| <div class="message user"> | |
| <div>Can you help me fix this React component?</div> | |
| <div class="message-time">12:35 PM</div> | |
| </div> | |
| <div class="message bot"> | |
| <div>Of course! I can see your code on the right. What specific issue are you facing?</div> | |
| <div class="message-time">12:35 PM</div> | |
| </div> | |
| <div class="message bot"> | |
| <div>I've detected a potential error in your App.tsx file. Would you like me to suggest a fix?</div> | |
| <div class="message-time">12:36 PM</div> | |
| </div> | |
| </div> | |
| <div class="chat-input-container"> | |
| <div class="chat-buttons"> | |
| <button class="chat-button" id="suggest-fix"><i class="fas fa-lightbulb mr-2"></i>Suggest Fix</button> | |
| <button class="chat-button secondary" id="explain-code"><i class="fas fa-question mr-2"></i>Explain</button> | |
| <button class="chat-button secondary" id="format-code"><i class="fas fa-align-left mr-2"></i>Format</button> | |
| </div> | |
| <textarea class="chat-input" placeholder="Type your message or code question..." rows="3"></textarea> | |
| <div class="flex justify-between"> | |
| <button class="chat-button secondary" id="send-code"><i class="fas fa-code mr-2"></i>Send Code</button> | |
| <button class="chat-button" id="send-message"><i class="fas fa-paper-plane mr-2"></i>Send</button> | |
| </div> | |
| </div> | |
| <div class="status-bar"> | |
| <div><i class="fas fa-circle text-green-500 mr-2"></i>Connected</div> | |
| <div>AI Assistant v2.4.1</div> | |
| </div> | |
| </div> | |
| <!-- Resize handle --> | |
| <div class="resize-handle"></div> | |
| <!-- Right StackBlitz Container --> | |
| <div class="stackblitz-container"> | |
| <iframe | |
| id="stackblitz-embed" | |
| src="https://stackblitz.com/edit/react-ts?embed=1&file=App.tsx&hideExplorer=0&hideNavigation=0&theme=dark&view=both" | |
| sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" | |
| ></iframe> | |
| </div> | |
| <script> | |
| // Make the chat panel resizable | |
| const resizeHandle = document.querySelector('.resize-handle'); | |
| const chatPanel = document.querySelector('.chat-panel'); | |
| resizeHandle.addEventListener('mousedown', function(e) { | |
| e.preventDefault(); | |
| document.addEventListener('mousemove', resize); | |
| document.addEventListener('mouseup', stopResize); | |
| }); | |
| function resize(e) { | |
| const newWidth = e.clientX; | |
| if (newWidth > 250 && newWidth < 500) { | |
| chatPanel.style.width = `${newWidth}px`; | |
| } | |
| } | |
| function stopResize() { | |
| document.removeEventListener('mousemove', resize); | |
| } | |
| // Tab switching | |
| const tabs = document.querySelectorAll('.chat-tab'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| tabs.forEach(t => t.classList.remove('active')); | |
| tab.classList.add('active'); | |
| }); | |
| }); | |
| // Chat functionality | |
| const chatInput = document.querySelector('.chat-input'); | |
| const messagesContainer = document.querySelector('.chat-messages'); | |
| function addMessage(text, isUser = true) { | |
| const now = new Date(); | |
| const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = isUser ? 'message user' : 'message bot'; | |
| messageDiv.innerHTML = ` | |
| <div>${text}</div> | |
| <div class="message-time">${timeString}</div> | |
| `; | |
| messagesContainer.appendChild(messageDiv); | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| } | |
| // Send message button | |
| document.getElementById('send-message').addEventListener('click', sendMessage); | |
| // Send message on Enter (but allow Shift+Enter for new lines) | |
| chatInput.addEventListener('keydown', function(e) { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| sendMessage(); | |
| } | |
| }); | |
| function sendMessage() { | |
| const message = chatInput.value.trim(); | |
| if (message) { | |
| addMessage(message, true); | |
| chatInput.value = ''; | |
| // Simulate bot response | |
| setTimeout(() => { | |
| const responses = [ | |
| "I've analyzed your code. The issue appears to be in the component lifecycle.", | |
| "Would you like me to refactor that section for you?", | |
| "I've detected a potential optimization in your code.", | |
| "That's an interesting approach. Have you considered using hooks instead?", | |
| "The error you're seeing is due to a missing dependency in your useEffect hook." | |
| ]; | |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; | |
| addMessage(randomResponse, false); | |
| }, 1000 + Math.random() * 2000); | |
| } | |
| } | |
| // Special action buttons | |
| document.getElementById('suggest-fix').addEventListener('click', () => { | |
| addMessage("Please suggest a fix for the current file.", true); | |
| setTimeout(() => { | |
| addMessage("I recommend restructuring the component to use custom hooks. This will improve reusability and make the code easier to test. Would you like me to show you how?", false); | |
| }, 1500); | |
| }); | |
| document.getElementById('explain-code').addEventListener('click', () => { | |
| addMessage("Can you explain the current code selection?", true); | |
| setTimeout(() => { | |
| addMessage("This code creates a React component with state management using useState. The useEffect hook is used for side effects when the component mounts or when dependencies change.", false); | |
| }, 1500); | |
| }); | |
| document.getElementById('format-code').addEventListener('click', () => { | |
| addMessage("Please format the current file.", true); | |
| setTimeout(() => { | |
| addMessage("I've formatted the code according to standard React practices. The indentation is now consistent and the imports are properly organized.", false); | |
| addMessage("system", "Code formatting applied to App.tsx"); | |
| }, 1500); | |
| }); | |
| document.getElementById('send-code').addEventListener('click', () => { | |
| addMessage("Here's the code I'm working on: [code snippet]", true); | |
| setTimeout(() => { | |
| addMessage("I see the issue. Line 42 has an incorrect state update. You should use the functional form of setState when the new state depends on the previous state.", false); | |
| }, 1500); | |
| }); | |
| </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=subatomicERROR/cyberblitz-ide" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |