IT Live AI Code Editor

IT Live AI Code Editor - Multi-LLM

LLM:

PROJECT FILES

index.html

style.css

script.js

README.md

app.php

index.html

Preview

AI Assistant: Hallo! Ik kan je helpen met code. Vraag me anything! 🚀

`, '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 \`\`\` ## 🎯 Features in Detail ### Header & Navigatie - Fixed header met blur effect - Smooth scroll navigatie - Mobile-responsive menu ### Sections - Home section met introductie - About section met bedrijfsinfo - Contact section met contactgegevens ### Interacties - Smooth scroll navigatie - Hover effects op navigatie - Scroll animaties voor sections - Responsive design ## 🎨 Customization ### Kleuren aanpassen \`\`\`css /* Main gradient */ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); \`\`\` ### Animaties aanpassen \`\`\`javascript // Animation duration transition: 'opacity 0.6s ease, transform 0.6s ease'; \`\`\` ## 📱 Mobile Optimalisatie - Touch-friendly navigatie - Responsive typography - Optimized animations - Mobile-first design ## 🔧 Browser Support - ✅ Chrome 60+ - ✅ Firefox 55+ - ✅ Safari 12+ - ✅ Edge 79+ ## 📈 Performance - **Page Load**: <2 seconds - **First Paint**: <1 second - **Animations**: 60fps - **Mobile Score**: 95+ ## 🎉 Resultaat Een prachtige, moderne website die perfect werkt op alle apparaten! --- **Gebouwd met ❤️ en IT Live AI Code Editor** 🚀`, 'app.php': `Database connection failed: SQLSTATE[HY000] [1045] Access denied for user 'username'@'localhost' (using password: YES)