IT Live AI Code Editor Agent

LLM:

index.html

style.css

script.js

README.md

app.php

index.html

Preview

AI Agent: Hallo! Ik ben je AI code assistent. Vraag me anything over je code! 🚀

`, 'style.css': `/* Global Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; } /* Header */ header { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 1rem 0; position: fixed; width: 100%; top: 0; z-index: 1000; } header h1 { text-align: center; color: white; margin-bottom: 1rem; } nav ul { display: flex; justify-content: center; list-style: none; } nav ul li { margin: 0 1rem; } nav ul li a { color: white; text-decoration: none; padding: 0.5rem 1rem; border-radius: 5px; transition: all 0.3s ease; } nav ul li a:hover { background: rgba(255, 255, 255, 0.2); } /* Main Content */ main { margin-top: 100px; padding: 2rem; max-width: 1200px; margin-left: auto; margin-right: auto; } section { background: rgba(255, 255, 255, 0.9); margin: 2rem 0; padding: 2rem; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } section h2 { color: #333; margin-bottom: 1rem; } section p { color: #666; line-height: 1.8; }`, 'script.js': `// Main JavaScript console.log('Website loaded successfully!'); document.addEventListener('DOMContentLoaded', function() { // Initialize smooth scrolling initializeSmoothScrolling(); // Initialize animations initializeAnimations(); // Initialize interactions initializeInteractions(); }); function initializeSmoothScrolling() { document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); } function initializeAnimations() { // Add scroll animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver(function(entries) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); // Observe all sections document.querySelectorAll('section').forEach(section => { section.style.opacity = '0'; section.style.transform = 'translateY(20px)'; section.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; observer.observe(section); }); } function initializeInteractions() { // Add hover effects to navigation const navLinks = document.querySelectorAll('nav a'); navLinks.forEach(link => { link.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-2px)'; }); link.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; }); }); }`, 'README.md': `# 🚀 Mijn Prachtige Website ## 📋 Overzicht Dit is een moderne, responsieve website gebouwd met HTML, CSS en JavaScript! ## ✨ Features ### 🎨 Design - **Modern Design**: Prachtige gradienten en animaties - **Responsief**: Perfect op alle apparaten - **Interactief**: Smooth scroll en hover effects ### 🛠️ Technologieën - **HTML5**: Semantische markup - **CSS3**: Modern styling met gradients - **JavaScript**: Interactieve features ### 📱 Gebruiksvriendelijkheid - **Navigatie**: Intuïtieve menu structuur - **Animaties**: Smooth transitions - **Mobile First**: Responsive design ## 🚀 Quick Start 1. Open \`index.html\` in je browser 2. Bewerk de files naar wens 3. Geniet van je prachtige website! ## 📁 Bestands Structuur \`\`\` project/ ├── index.html # Hoofdpagina ├── style.css # Styling ├── script.js # Interactiviteit └── README.md # Documentatie \`\`\` --- **Gebouwd met ❤️ en IT Live AI Code Editor** 🚀`, 'app.php': `

Mijn Website

Version: 1.0.0

Status: ✅ Running

` }; // Initialize CodeMirror document.addEventListener('DOMContentLoaded', function() { editor = CodeMirror.fromTextArea(document.getElementById('code-editor'), { lineNumbers: true, theme: 'monokai', mode: getModeForFile(currentFile), autoCloseBrackets: true, matchBrackets: true, indentUnit: 4, tabSize: 4, lineWrapping: true }); // Set initial content editor.setValue(files[currentFile] || ''); // Update preview on code change editor.on('change', function() { updatePreview(); files[currentFile] = editor.getValue(); }); // Initial preview updatePreview(); console.log('AI Code Editor Agent loaded successfully! AI Available:', aiAvailable); }); function getModeForFile(filename) { if (filename.endsWith('.js')) return 'javascript'; if (filename.endsWith('.css')) return 'css'; if (filename.endsWith('.html')) return 'xml'; if (filename.endsWith('.md')) return 'markdown'; if (filename.endsWith('.php')) return 'php'; return 'javascript'; } function openFile(filename) { // Save current file content files[currentFile] = editor.getValue(); // Update current file currentFile = filename; // Load new file content editor.setValue(files[filename] || ''); editor.setOption('mode', getModeForFile(filename)); // Update UI document.querySelectorAll('.file-item').forEach(item => { item.classList.remove('active'); }); event.target.closest('.file-item').classList.add('active'); // Update tab document.getElementById('current-tab-name').textContent = filename; // Update preview updatePreview(); } function updatePreview() { const content = editor.getValue(); const iframe = document.getElementById('preview-iframe'); if (currentFile === 'index.html') { iframe.srcdoc = content; } else if (currentFile === 'README.md') { // Simple markdown preview const html = content .replace(/^# (.*$)/gim, '

$1

') .replace(/^## (.*$)/gim, '

$1

') .replace(/^### (.*$)/gim, '

$1

') .replace(/\*\*(.*)\*\*/gim, '$1') .replace(/\*(.*)\*/gim, '$1') .replace(/\`\`\`(.*?)\`\`\`/gs, '

$1

') .replace(/\`(.*?)\`/g, '$1') .replace(/\n/gim, '
'); iframe.srcdoc = ` ${html} `; } else { // For other files, show as code const escaped = content.replace(/&/g, '&').replace(//g, '>'); iframe.srcdoc = `

${escaped}

`; } } function runCode() { if (currentFile === 'index.html') { const content = editor.getValue(); const newWindow = window.open('', '_blank'); newWindow.document.write(content); newWindow.document.close(); addChatMessage('Code is running in new window!', 'ai'); } else { addChatMessage('Run feature works best with HTML files. Try opening index.html!', 'ai'); } } function selectLLM(llm) { if (!aiAvailable) { addChatMessage('Cannot switch LLM - AI service is offline.', 'ai'); return; } currentLLM = llm; // Update UI document.querySelectorAll('.llm-btn').forEach(btn => { btn.classList.remove('active'); }); document.querySelector(`[data-llm="${llm}"]`).classList.add('active'); addChatMessage(`Switched to ${llm.toUpperCase()} LLM`, 'ai'); } function getAIHelp() { if (!aiAvailable) { addChatMessage('AI service is currently unavailable. Please try again later.', 'ai'); return; } const selectedCode = editor.getSelection() || editor.getValue(); const prompt = `Help me with this code:\n\n${selectedCode}\n\nFile: ${currentFile}`; addChatMessage('Analyzing your code...', 'ai'); // Call AI API fetch('?action=ai_chat', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `action=ai_chat&prompt=${encodeURIComponent(prompt)}&provider=${currentLLM}` }) .then(response => response.json()) .then(data => { if (data.success) { addChatMessage(data.reply, 'ai'); } else { addChatMessage('Sorry, I had trouble helping with that code.', 'ai'); } }) .catch(error => { console.error('Error:', error); addChatMessage('Connection error. Please try again.', 'ai'); }); } function sendChatMessage() { const input = document.getElementById('chat-input'); const message = input.value.trim(); if (!message || !aiAvailable) { if (!aiAvailable) { addChatMessage('Chat is unavailable - AI service is offline.', 'ai'); } return; } // Add user message addChatMessage(message, 'user'); input.value = ''; // Show typing indicator showTypingIndicator(); // Call AI API fetch('?action=ai_chat', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: `action=ai_chat&prompt=${encodeURIComponent(message)}&provider=${currentLLM}` }) .then(response => response.json()) .then(data => { hideTypingIndicator(); if (data.success) { addChatMessage(data.reply, 'ai'); } else { addChatMessage('Sorry, I had trouble understanding. Can you rephrase?', 'ai'); } }) .catch(error => { console.error('Error:', error); hideTypingIndicator(); addChatMessage('Connection error. Please try again.', 'ai'); }); } function handleChatKeyPress(event) { if (event.key === 'Enter') { sendChatMessage(); } } function addChatMessage(message, type) { const messagesContainer = document.getElementById('chat-messages'); const messageDiv = document.createElement('div'); messageDiv.className = `chat-message ${type}-message`; if (type === 'ai') { messageDiv.innerHTML = ` AI Agent (${currentLLM.toUpperCase()}): ${message}`; } else { messageDiv.innerHTML = ` You: ${message}`; } messagesContainer.appendChild(messageDiv); messagesContainer.scrollTop = messagesContainer.scrollHeight; } function showTypingIndicator() { const messagesContainer = document.getElementById('chat-messages'); const indicator = document.createElement('div'); indicator.className = 'chat-message ai-message typing-indicator'; indicator.id = 'typing-indicator'; indicator.innerHTML = ' AI Agent: Typing...'; messagesContainer.appendChild(indicator); messagesContainer.scrollTop = messagesContainer.scrollHeight; } function hideTypingIndicator() { const indicator = document.getElementById('typing-indicator'); if (indicator) { indicator.remove(); } } // Keyboard shortcuts document.addEventListener('keydown', function(e) { if (e.ctrlKey || e.metaKey) { switch(e.key) { case 'Enter': e.preventDefault(); runCode(); break; case '/': e.preventDefault(); document.getElementById('chat-input').focus(); break; } } });