| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>WebCraft AI Studio - Build Websites with AI</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| .glass-effect { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| } |
| .code-editor { |
| font-family: 'Courier New', monospace; |
| tab-size: 2; |
| } |
| .draggable-item { |
| cursor: move; |
| transition: all 0.3s ease; |
| } |
| .draggable-item:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); |
| } |
| .sortable-ghost { |
| opacity: 0.4; |
| background: #f3f4f6; |
| } |
| .chat-message { |
| animation: slideIn 0.3s ease; |
| } |
| @keyframes slideIn { |
| from { |
| transform: translateX(-20px); |
| opacity: 0; |
| } |
| to { |
| transform: translateX(0); |
| opacity: 1; |
| } |
| } |
| .preview-frame { |
| border: none; |
| width: 100%; |
| height: 100%; |
| } |
| .component-card { |
| transition: all 0.3s ease; |
| } |
| .component-card:hover { |
| transform: scale(1.05); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <header class="gradient-bg text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-4"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center space-x-4"> |
| <i data-feather="code" class="w-8 h-8"></i> |
| <h1 class="text-2xl font-bold">WebCraft AI Studio</h1> |
| </div> |
| <nav class="flex items-center space-x-6"> |
| <button onclick="showDashboard()" class="hover:text-purple-200 transition">Dashboard</button> |
| <button onclick="showEditor()" class="hover:text-purple-200 transition">Editor</button> |
| <button onclick="showProjects()" class="hover:text-purple-200 transition">Projects</button> |
| <button onclick="toggleAuth()" class="bg-white text-purple-600 px-4 py-2 rounded-lg hover:bg-purple-50 transition"> |
| <span id="authBtn">Sign In</span> |
| </button> |
| </nav> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main id="mainContent" class="container mx-auto px-4 py-8"> |
| |
| <div id="dashboardView" class="hidden"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
| <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition"> |
| <div class="flex items-center justify-between mb-4"> |
| <i data-feather="folder" class="w-10 h-10 text-purple-600"></i> |
| <span class="text-3xl font-bold text-gray-800">12</span> |
| </div> |
| <h3 class="text-lg font-semibold text-gray-700">Total Projects</h3> |
| <p class="text-sm text-gray-500 mt-2">3 published this month</p> |
| </div> |
| <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition"> |
| <div class="flex items-center justify-between mb-4"> |
| <i data-feather="code" class="w-10 h-10 text-blue-600"></i> |
| <span class="text-3xl font-bold text-gray-800">1,248</span> |
| </div> |
| <h3 class="text-lg font-semibold text-gray-700">Lines of Code</h3> |
| <p class="text-sm text-gray-500 mt-2">Generated with AI</p> |
| </div> |
| <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition"> |
| <div class="flex items-center justify-between mb-4"> |
| <i data-feather="message-circle" class="w-10 h-10 text-green-600"></i> |
| <span class="text-3xl font-bold text-gray-800">89</span> |
| </div> |
| <h3 class="text-lg font-semibold text-gray-700">AI Conversations</h3> |
| <p class="text-sm text-gray-500 mt-2">This week</p> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-lg p-8"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Quick Actions</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> |
| <button onclick="createNewProject()" class="bg-gradient-to-r from-purple-500 to-pink-500 text-white p-4 rounded-lg hover:shadow-lg transition flex items-center justify-center space-x-2"> |
| <i data-feather="plus-circle" class="w-5 h-5"></i> |
| <span>New Project</span> |
| </button> |
| <button onclick="importProject()" class="bg-gradient-to-r from-blue-500 to-cyan-500 text-white p-4 rounded-lg hover:shadow-lg transition flex items-center justify-center space-x-2"> |
| <i data-feather="upload" class="w-5 h-5"></i> |
| <span>Import</span> |
| </button> |
| <button onclick="openTemplates()" class="bg-gradient-to-r from-green-500 to-teal-500 text-white p-4 rounded-lg hover:shadow-lg transition flex items-center justify-center space-x-2"> |
| <i data-feather="layers" class="w-5 h-5"></i> |
| <span>Templates</span> |
| </button> |
| <button onclick="openTutorials()" class="bg-gradient-to-r from-orange-500 to-red-500 text-white p-4 rounded-lg hover:shadow-lg transition flex items-center justify-center space-x-2"> |
| <i data-feather="book-open" class="w-5 h-5"></i> |
| <span>Tutorials</span> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="editorView" class="hidden"> |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-4 h-[calc(100vh-200px)]"> |
| |
| <div class="lg:col-span-1 bg-white rounded-xl shadow-lg p-4 overflow-y-auto"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Components</h3> |
| <div id="componentsList" class="space-y-2"> |
| <div class="component-card bg-gray-50 p-3 rounded-lg cursor-pointer" draggable="true" data-component="header"> |
| <i data-feather="header" class="w-4 h-4 inline mr-2"></i> Header |
| </div> |
| <div class="component-card bg-gray-50 p-3 rounded-lg cursor-pointer" draggable="true" data-component="nav"> |
| <i data-feather="menu" class="w-4 h-4 inline mr-2"></i> Navigation |
| </div> |
| <div class="component-card bg-gray-50 p-3 rounded-lg cursor-pointer" draggable="true" data-component="hero"> |
| <i data-feather="image" class="w-4 h-4 inline mr-2"></i> Hero Section |
| </div> |
| <div class="component-card bg-gray-50 p-3 rounded-lg cursor-pointer" draggable="true" data-component="card"> |
| <i data-feather="square" class="w-4 h-4 inline mr-2"></i> Card |
| </div> |
| <div class="component-card bg-gray-50 p-3 rounded-lg cursor-pointer" draggable="true" data-component="footer"> |
| <i data-feather="minimize-2" class="w-4 h-4 inline mr-2"></i> Footer |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="lg:col-span-2 bg-white rounded-xl shadow-lg p-4"> |
| <div class="flex space-x-2 mb-4"> |
| <button onclick="switchEditor('html')" class="editor-tab px-4 py-2 rounded-lg bg-orange-500 text-white">HTML</button> |
| <button onclick="switchEditor('css')" class="editor-tab px-4 py-2 rounded-lg bg-blue-500 text-white">CSS</button> |
| <button onclick="switchEditor('js')" class="editor-tab px-4 py-2 rounded-lg bg-yellow-500 text-white">JavaScript</button> |
| </div> |
| <div class="relative"> |
| <textarea id="codeEditor" class="code-editor w-full h-[calc(100%-60px)] p-4 bg-gray-900 text-green-400 rounded-lg resize-none" placeholder="Write your code here..."></textarea> |
| <button onclick="formatCode()" class="absolute top-2 right-2 bg-gray-700 text-white px-3 py-1 rounded text-sm hover:bg-gray-600"> |
| <i data-feather="code" class="w-4 h-4 inline"></i> Format |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="lg:col-span-1 space-y-4"> |
| |
| <div class="bg-white rounded-xl shadow-lg p-4 h-1/2"> |
| <div class="flex justify-between items-center mb-2"> |
| <h3 class="text-lg font-semibold text-gray-800">Preview</h3> |
| <button onclick="refreshPreview()" class="text-gray-600 hover:text-gray-800"> |
| <i data-feather="refresh-cw" class="w-4 h-4"></i> |
| </button> |
| </div> |
| <iframe id="previewFrame" class="preview-frame bg-white rounded border"></iframe> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-lg p-4 h-1/2 flex flex-col"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">AI Assistant</h3> |
| <div id="chatMessages" class="flex-1 overflow-y-auto space-y-2 mb-2"> |
| <div class="chat-message bg-purple-100 p-2 rounded-lg"> |
| <p class="text-sm">Hello! I'm your AI coding assistant. How can I help you today?</p> |
| </div> |
| </div> |
| <div class="flex space-x-2"> |
| <input type="text" id="chatInput" placeholder="Ask me anything..." class="flex-1 px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| <button onclick="sendMessage()" class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700"> |
| <i data-feather="send" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="projectsView" class="hidden"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-3xl font-bold text-gray-800">My Projects</h2> |
| <button onclick="createNewProject()" class="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition flex items-center space-x-2"> |
| <i data-feather="plus" class="w-5 h-5"></i> |
| <span>New Project</span> |
| </button> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition"> |
| <img src="http://static.photos/technology/640x360/1" alt="Project" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Portfolio Website</h3> |
| <p class="text-gray-600 mb-4">Personal portfolio with modern design</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-gray-500">Updated 2 days ago</span> |
| <div class="flex space-x-2"> |
| <button class="text-blue-600 hover:text-blue-800"> |
| <i data-feather="edit-2" class="w-4 h-4"></i> |
| </button> |
| <button class="text-green-600 hover:text-green-800"> |
| <i data-feather="external-link" class="w-4 h-4"></i> |
| </button> |
| <button class="text-red-600 hover:text-red-800"> |
| <i data-feather="trash-2" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition"> |
| <img src="http://static.photos/business/640x360/2" alt="Project" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">E-commerce Store</h3> |
| <p class="text-gray-600 mb-4">Online shopping platform with cart</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-gray-500">Updated 1 week ago</span> |
| <div class="flex space-x-2"> |
| <button class="text-blue-600 hover:text-blue-800"> |
| <i data-feather="edit-2" class="w-4 h-4"></i> |
| </button> |
| <button class="text-green-600 hover:text-green-800"> |
| <i data-feather="external-link" class="w-4 h-4"></i> |
| </button> |
| <button class="text-red-600 hover:text-red-800"> |
| <i data-feather="trash-2" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition"> |
| <img src="http://static/photos/abstract/640x360/3" alt="Project" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Blog Platform</h3> |
| <p class="text-gray-600 mb-4">Content management system</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-sm text-gray-500">Updated 3 days ago</span> |
| <div class="flex space-x-2"> |
| <button class="text-blue-600 hover:text-blue-800"> |
| <i data-feather="edit-2" class="w-4 h-4"></i> |
| </button> |
| <button class="text-green-600 hover:text-green-800"> |
| <i data-feather="external-link" class="w-4 h-4"></i> |
| </button> |
| <button class="text-red-600 hover:text-red-800"> |
| <i data-feather="trash-2" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <div id="authModal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50"> |
| <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Sign In</h2> |
| <form onsubmit="handleAuth(event)"> |
| <div class="mb-4"> |
| <label class="block text-gray-700 text-sm font-bold mb-2">Email</label> |
| <input type="email" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required> |
| </div> |
| <div class="mb-6"> |
| <label class="block text-gray-700 text-sm font-bold mb-2">Password</label> |
| <input type="password" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required> |
| </div> |
| <button type="submit" class="w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition">Sign In</button> |
| </form> |
| <button onclick="toggleAuth()" class="mt-4 text-gray-600 hover:text-gray-800">Close</button> |
| </div> |
| </div> |
|
|
| <script> |
| |
| feather.replace(); |
| |
| |
| let currentView = 'dashboard'; |
| let currentEditor = 'html'; |
| let isAuthenticated = false; |
| let projects = []; |
| |
| |
| function showDashboard() { |
| hideAllViews(); |
| document.getElementById('dashboardView').classList.remove('hidden'); |
| currentView = 'dashboard'; |
| } |
| |
| function showEditor() { |
| hideAllViews(); |
| document.getElementById('editorView').classList.remove('hidden'); |
| currentView = 'editor'; |
| initializeEditor(); |
| } |
| |
| function showProjects() { |
| hideAllViews(); |
| document.getElementById('projectsView').classList.remove('hidden'); |
| currentView = 'projects'; |
| } |
| |
| function hideAllViews() { |
| document.getElementById('dashboardView').classList.add('hidden'); |
| document.getElementById('editorView').classList.add('hidden'); |
| document.getElementById('projectsView').classList.add('hidden'); |
| } |
| |
| |
| function toggleAuth() { |
| const modal = document.getElementById('authModal'); |
| modal.classList.toggle('hidden'); |
| } |
| |
| function handleAuth(event) { |
| event.preventDefault(); |
| isAuthenticated = true; |
| document.getElementById('authBtn').textContent = 'Sign Out'; |
| toggleAuth(); |
| showNotification('Successfully signed in!', 'success'); |
| } |
| |
| |
| function initializeEditor() { |
| const codeEditor = document.getElementById('codeEditor'); |
| codeEditor.value = `<!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>My Website</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| </head> |
| <body> |
| <header class="bg-purple-600 text-white p-4"> |
| <h1 class="text-2xl font-bold">Welcome to My Website</h1> |
| </header> |
| <main class="container mx-auto p-4"> |
| <section class="my-8"> |
| <h2 class="text-xl font-semibold mb-4">About This Page</h2> |
| <p class="text-gray-700">Start building your amazing website here!</p> |
| </section> |
| </main> |
| </body> |
| </html>`; |
| updatePreview(); |
| } |
|
|
| function switchEditor(type) { |
| currentEditor = type; |
| const codeEditor = document.getElementById('codeEditor'); |
| |
| // Store current code |
| if (!window.codeStorage) window.codeStorage = {}; |
| window.codeStorage[window.lastEditor || 'html'] = codeEditor.value; |
| |
| // Load new code |
| codeEditor.value = window.codeStorage[type] || ''; |
| window.lastEditor = type; |
| |
| // Update tab styles |
| document.querySelectorAll('.editor-tab').forEach(tab => { |
| tab.classList.remove('ring-2', 'ring-offset-2', 'ring-purple-500'); |
| }); |
| event.target.classList.add('ring-2', 'ring-offset-2', 'ring-purple-500'); |
| } |
|
|
| function formatCode() { |
| const codeEditor = document.getElementById('codeEditor'); |
| // Simple formatting - in production, use a proper formatter |
| codeEditor.value = codeEditor.value |
| .replace(/></g, '>\n<') |
| .replace(/^\s+|\s+$/gm, ''); |
| showNotification('Code formatted!', 'success'); |
| } |
|
|
| function updatePreview() { |
| const preview = document.getElementById('previewFrame'); |
| const code = document.getElementById('codeEditor').value; |
| const blob = new Blob([code], { type: 'text/html' }); |
| preview.src = URL.createObjectURL(blob); |
| } |
|
|
| function refreshPreview() { |
| updatePreview(); |
| showNotification('Preview refreshed!', 'info'); |
| } |
|
|
| // Drag and Drop |
| document.addEventListener('DOMContentLoaded', function() { |
| const components = document.querySelectorAll('.component-card'); |
| const codeEditor = document.getElementById('codeEditor'); |
| |
| components.forEach(comp => { |
| comp.addEventListener('dragstart', (e) => { |
| e.dataTransfer.setData('component', e.target.dataset.component); |
| }); |
| }); |
| |
| codeEditor.addEventListener('dragover', (e) => { |
| e.preventDefault(); |
| }); |
| |
| codeEditor.addEventListener('drop', (e) => { |
| e.preventDefault(); |
| const component = e.dataTransfer.getData('component'); |
| insertComponent(component); |
| }); |
| }); |
|
|
| function insertComponent(component) { |
| const components = { |
| header: '<header class="bg-gradient-to-r from-purple-600 to-pink-600 text-white p-6">\n <h1 class="text-3xl font-bold">Your Header</h1>\n</header>', |
| nav: '<nav class="bg-gray-800 text-white p-4">\n <ul class="flex space-x-6">\n <li><a href="#" class="hover:text-purple-400">Home</a></li>\n <li><a href="#" class="hover:text-purple-400">About</a></li>\n <li><a href="#" class="hover:text-purple-400">Contact</a></li>\n </ul>\n</nav>', |
| hero: '<section class="bg-gradient-to-br from-blue-500 to-purple-600 text-white p-16 text-center">\n <h2 class="text-4xl font-bold mb-4">Hero Section</h2>\n <p class="text-xl">Make an impact with your message</p>\n <button class="mt-6 bg-white text-purple-600 px-6 py-3 rounded-lg hover:bg-gray-100">Get Started</button>\n</section>', |
| card: '<div class="bg-white rounded-lg shadow-lg p-6 m-4">\n <img src="http://static.photos/technology/320x240" alt="Card Image" class="w-full h-48 object-cover rounded mb-4">\n <h3 class="text-xl font-semibold mb-2">Card Title</h3>\n <p class="text-gray-600">Card description goes here...</p>\n</div>', |
| footer: '<footer class="bg-gray-900 text-white p-8 text-center">\n <p>© 2024 Your Website. All rights reserved.</p>\n</footer>' |
| }; |
| |
| const codeEditor = document.getElementById('codeEditor'); |
| const cursorPos = codeEditor.selectionStart; |
| const textBefore = codeEditor.value.substring(0, cursorPos); |
| const textAfter = codeEditor.value.substring(cursorPos); |
| codeEditor.value = textBefore + '\n' + components[component] + '\n' + textAfter; |
| updatePreview(); |
| showNotification(`${component} component added!`, 'success'); |
| } |
|
|
| // AI Chat |
| function sendMessage() { |
| const input = document.getElementById('chatInput'); |
| const message = input.value.trim(); |
| if (!message) return; |
| |
| const chatMessages = document.getElementById('chatMessages'); |
| |
| // Add user message |
| chatMessages.innerHTML += ` |
| <div class="chat-message bg-blue-100 p-2 rounded-lg"> |
| <p class="text-sm font-semibold">You:</p> |
| <p class="text-sm">${message}</p> |
| </div> |
| `; |
| |
| // Simulate AI response |
| setTimeout(() => { |
| const aiResponse = generateAIResponse(message); |
| chatMessages.innerHTML += ` |
| <div class="chat-message bg-purple-100 p-2 rounded-lg"> |
| <p class="text-sm font-semibold">AI:</p> |
| <p class="text-sm">${aiResponse}</p> |
| </div> |
| `; |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| }, 1000); |
| |
| input.value = ''; |
| chatMessages.scrollTop = chatMessages.scrollHeight; |
| } |
|
|
| function generateAIResponse(message) { |
| const responses = { |
| 'how to add a button': 'You can add a button using: <button class="bg-blue-500 text-white px-4 py-2 rounded">Click me</button>', |
| 'center text': 'Use Tailwind classes: text-center for horizontal centering, or flex items-center justify-center for perfect centering.', |
| 'add animation': 'Try using CSS animations or Tailwind\'s transition classes. Example: transition-all duration-300 hover:scale-105', |
| 'responsive design': 'Use Tailwind\'s responsive prefixes: sm:, md:, lg:, xl:. Example: w-full md:w-1/2 lg:w-1/3', |
| 'default': 'Great question! Try using modern CSS frameworks like Tailwind CSS for styling, and remember to keep your code semantic and accessible.' |
| }; |
| |
| const lowerMessage = message.toLowerCase(); |
| for (const [key, value] of Object.entries(responses)) { |
| if (lowerMessage.includes(key)) { |
| return value; |
| } |
| } |
| return responses.default; |
| } |
|
|
| // Project Management |
| function createNewProject() { |
| const projectName = prompt('Enter project name:'); |
| if (projectName) { |
| projects.push({ |
| id: Date.now(), |
| name: projectName, |
| created: new Date(), |
| code: { html: '', css: '', js: '' } |
| }); |
| showEditor(); |
| showNotification(`Project "${projectName}" created!`, 'success'); |
| } |
| } |
|
|
| function importProject() { |
| showNotification('Import feature coming soon!', 'info'); |
| } |
|
|
| function openTemplates() { |
| showNotification('Templates gallery coming soon!', 'info'); |
| } |
|
|
| function openTutorials() { |
| showNotification('Tutorials section coming soon!', 'info'); |
| } |
|
|
| // Notifications |
| function showNotification(message, type = 'info') { |
| const colors = { |
| success: 'bg-green-500', |
| error: 'bg-red-500', |
| info: 'bg-blue-500', |
| warning: 'bg-yellow-500' |
| }; |
| |
| const notification = document.createElement('div'); |
| notification.className = `fixed top-20 right-4 ${colors[type]} text-white px-6 py-3 rounded-lg shadow-lg z-50 animate-pulse`; |
| notification.textContent = message; |
| document.body.appendChild(notification); |
| |
| setTimeout(() => { |
| notification.remove(); |
| }, 3000); |
| } |
|
|
| // Auto-save |
| setInterval(() => { |
| if (currentView === 'editor') { |
| const code = document.getElementById('codeEditor').value; |
| localStorage.setItem('autosave', code); |
| } |
| }, 5000); |
|
|
| // Load autosaved content |
| window.addEventListener('load', () => { |
| const autosaved = localStorage.getItem('autosave'); |
| if (autosaved && document.getElementById('codeEditor')) { |
| document.getElementById('codeEditor').value = autosaved; |
| } |
| }); |
|
|
| // Keyboard shortcuts |
| document.addEventListener('keydown', (e) => { |
| if (e.ctrlKey || e.metaKey) { |
| switch(e.key) { |
| case 's': |
| e.preventDefault(); |
| showNotification('Project saved!', 'success'); |
| break; |
| case 'Enter': |
| if (document.getElementById('chatInput') === document.activeElement) { |
| e.preventDefault(); |
| sendMessage(); |
| } |
| break; |
| } |
| } |
| }); |
|
|
| // Initialize dashboard on load |
| showDashboard(); |
| </script> |
| </body> |
| </html> |
|
|
