Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Website Generator 1541</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"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script> | |
| <style> | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.6; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.6; } | |
| } | |
| @keyframes neon { | |
| 0% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6; } | |
| 50% { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0073e6, 0 0 40px #0073e6; } | |
| 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6; } | |
| } | |
| .neon-text { | |
| animation: neon 1.5s ease-in-out infinite alternate; | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| .holographic-bg { | |
| background: linear-gradient(135deg, rgba(0,30,60,0.9) 0%, rgba(0,80,120,0.8) 50%, rgba(0,30,60,0.9) 100%); | |
| box-shadow: 0 0 30px rgba(0, 119, 255, 0.5); | |
| border: 1px solid rgba(0, 195, 255, 0.3); | |
| } | |
| .glow-border { | |
| box-shadow: 0 0 15px rgba(0, 162, 255, 0.7); | |
| } | |
| .terminal-text { | |
| font-family: 'Courier New', monospace; | |
| color: #00ff00; | |
| text-shadow: 0 0 5px #00ff00; | |
| } | |
| .cyber-button { | |
| transition: all 0.3s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cyber-button:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0, 162, 255, 0.3); | |
| } | |
| .cyber-button:active { | |
| transform: translateY(1px); | |
| } | |
| .cyber-button::after { | |
| content: ""; | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| pointer-events: none; | |
| background-image: radial-gradient(circle, #fff 10%, transparent 10.01%); | |
| background-repeat: no-repeat; | |
| background-position: 50%; | |
| transform: scale(10,10); | |
| opacity: 0; | |
| transition: transform .5s, opacity 1s; | |
| } | |
| .cyber-button:active::after { | |
| transform: scale(0,0); | |
| opacity: 0.3; | |
| transition: 0s; | |
| } | |
| .grid-pattern { | |
| background-image: | |
| linear-gradient(rgba(0, 162, 255, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 162, 255, 0.1) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scrollbar-hide { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white overflow-hidden"> | |
| <div class="fixed inset-0 grid-pattern z-0"></div> | |
| <!-- Main Container --> | |
| <div class="relative z-10 min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="holographic-bg py-6 px-4 lg:px-8 flex justify-between items-center border-b border-cyan-500/20"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center glow-border floating"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| </div> | |
| <h1 class="text-3xl font-bold neon-text">AI Website Generator 1541</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="terminal-text px-4 py-2 bg-black/50 rounded"> | |
| <span class="blink">_</span> <span id="ai-status">1541 AI Agents Online</span> | |
| </div> | |
| <button class="cyber-button bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium"> | |
| <i class="fas fa-user-astronaut mr-2"></i> Dashboard | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Sidebar --> | |
| <aside class="w-64 bg-gray-800/80 border-r border-gray-700/50 flex flex-col"> | |
| <div class="p-4 border-b border-gray-700/50"> | |
| <h2 class="text-xl font-semibold text-cyan-300 flex items-center"> | |
| <i class="fas fa-cogs mr-2"></i> Configuration | |
| </h2> | |
| </div> | |
| <div class="flex-1 overflow-y-auto scrollbar-hide p-4 space-y-4"> | |
| <!-- Website Type --> | |
| <div class="holographic-bg rounded-lg p-4 glow-border"> | |
| <h3 class="font-medium text-cyan-200 mb-2 flex items-center"> | |
| <i class="fas fa-globe mr-2"></i> Website Type | |
| </h3> | |
| <select id="website-type" class="w-full bg-gray-900/70 border border-cyan-500/30 rounded px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500"> | |
| <option value="ecommerce">E-commerce</option> | |
| <option value="business">Business</option> | |
| <option value="portfolio">Portfolio</option> | |
| <option value="blog">Blog</option> | |
| <option value="saas">SaaS</option> | |
| <option value="agency">Agency</option> | |
| <option value="education">Education</option> | |
| <option value="health">Health</option> | |
| <option value="restaurant">Restaurant</option> | |
| <option value="realestate">Real Estate</option> | |
| </select> | |
| </div> | |
| <!-- Color Scheme --> | |
| <div class="holographic-bg rounded-lg p-4 glow-border"> | |
| <h3 class="font-medium text-cyan-200 mb-2 flex items-center"> | |
| <i class="fas fa-palette mr-2"></i> Color Scheme | |
| </h3> | |
| <div class="grid grid-cols-5 gap-2"> | |
| <div class="color-option h-8 w-8 rounded-full bg-blue-600 cursor-pointer border-2 border-transparent hover:border-white" data-color="blue"></div> | |
| <div class="color-option h-8 w-8 rounded-full bg-purple-600 cursor-pointer border-2 border-transparent hover:border-white" data-color="purple"></div> | |
| <div class="color-option h-8 w-8 rounded-full bg-green-600 cursor-pointer border-2 border-transparent hover:border-white" data-color="green"></div> | |
| <div class="color-option h-8 w-8 rounded-full bg-red-600 cursor-pointer border-2 border-transparent hover:border-white" data-color="red"></div> | |
| <div class="color-option h-8 w-8 rounded-full bg-yellow-500 cursor-pointer border-2 border-transparent hover:border-white" data-color="yellow"></div> | |
| <div class="color-option h-8 w-8 rounded-full bg-pink-600 cursor-pointer border-2 border-transparent hover:border-white" data-color="pink"></div> | |
| <div class="color-option h-8 w-8 rounded-full bg-indigo-600 cursor-pointer border-2 border-transparent hover:border-white" data-color="indigo"></div> | |
| <div class="color-option h-8 w-8 rounded-full bg-teal-500 cursor-pointer border-2 border-transparent hover:border-white" data-color="teal"></div> | |
| <div class="color-option h-8 w-8 rounded-full bg-orange-500 cursor-pointer border-2 border-transparent hover:border-white" data-color="orange"></div> | |
| <div class="color-option h-8 w-8 rounded-full bg-gray-700 cursor-pointer border-2 border-transparent hover:border-white" data-color="gray"></div> | |
| </div> | |
| </div> | |
| <!-- Layout Style --> | |
| <div class="holographic-bg rounded-lg p-4 glow-border"> | |
| <h3 class="font-medium text-cyan-200 mb-2 flex items-center"> | |
| <i class="fas fa-layer-group mr-2"></i> Layout Style | |
| </h3> | |
| <div class="space-y-2"> | |
| <label class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="radio" name="layout" value="modern" checked class="text-blue-500"> | |
| <span>Modern</span> | |
| </label> | |
| <label class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="radio" name="layout" value="minimal" class="text-blue-500"> | |
| <span>Minimal</span> | |
| </label> | |
| <label class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="radio" name="layout" value="classic" class="text-blue-500"> | |
| <span>Classic</span> | |
| </label> | |
| <label class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="radio" name="layout" value="futuristic" class="text-blue-500"> | |
| <span>Futuristic</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Pages to Generate --> | |
| <div class="holographic-bg rounded-lg p-4 glow-border"> | |
| <h3 class="font-medium text-cyan-200 mb-2 flex items-center"> | |
| <i class="fas fa-file-alt mr-2"></i> Pages to Generate | |
| </h3> | |
| <div class="space-y-2 max-h-40 overflow-y-auto scrollbar-hide"> | |
| <label class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="checkbox" checked class="text-blue-500"> | |
| <span>Home</span> | |
| </label> | |
| <label class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="checkbox" checked class="text-blue-500"> | |
| <span>About</span> | |
| </label> | |
| <label class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="checkbox" checked class="text-blue-500"> | |
| <span>Services</span> | |
| </label> | |
| <label class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="checkbox" checked class="text-blue-500"> | |
| <span>Portfolio</span> | |
| </label> | |
| <label class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="checkbox" checked class="text-blue-500"> | |
| <span>Blog</span> | |
| </label> | |
| <label class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="checkbox" checked class="text-blue-500"> | |
| <span>Contact</span> | |
| </label> | |
| <label class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="checkbox" class="text-blue-500"> | |
| <span>Pricing</span> | |
| </label> | |
| <label class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="checkbox" class="text-blue-500"> | |
| <span>Testimonials</span> | |
| </label> | |
| <label class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="checkbox" class="text-blue-500"> | |
| <span>FAQ</span> | |
| </label> | |
| <label class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="checkbox" class="text-blue-500"> | |
| <span>Team</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- AI Settings --> | |
| <div class="holographic-bg rounded-lg p-4 glow-border"> | |
| <h3 class="font-medium text-cyan-200 mb-2 flex items-center"> | |
| <i class="fas fa-brain mr-2"></i> AI Configuration | |
| </h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm text-gray-300 mb-1">Creativity Level</label> | |
| <input type="range" min="1" max="10" value="7" class="w-full"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-300 mb-1">Content Depth</label> | |
| <input type="range" min="1" max="10" value="8" class="w-full"> | |
| </div> | |
| <div> | |
| <label class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="checkbox" checked class="text-blue-500"> | |
| <span>Auto-optimize SEO</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="flex items-center space-x-2 cursor-pointer"> | |
| <input type="checkbox" checked class="text-blue-500"> | |
| <span>Generate images</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-700/50"> | |
| <button id="generate-btn" class="cyber-button w-full bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-700 hover:to-cyan-600 text-white px-4 py-3 rounded-lg font-bold text-lg flex items-center justify-center"> | |
| <i class="fas fa-bolt mr-2"></i> GENERATE WEBSITE | |
| </button> | |
| </div> | |
| </aside> | |
| <!-- Main Panel --> | |
| <main class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Preview Controls --> | |
| <div class="bg-gray-800/70 border-b border-gray-700/50 p-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <h2 class="text-xl font-semibold text-cyan-300 flex items-center"> | |
| <i class="fas fa-eye mr-2"></i> Real-time Preview | |
| </h2> | |
| <div class="terminal-text px-3 py-1 bg-black/50 rounded text-sm"> | |
| <span id="ai-agents-working">0</span>/1541 AI Agents Working | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="relative"> | |
| <select id="device-preview" class="bg-gray-900/70 border border-cyan-500/30 rounded px-3 py-1 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 appearance-none pr-8"> | |
| <option value="desktop">Desktop</option> | |
| <option value="tablet">Tablet</option> | |
| <option value="mobile">Mobile</option> | |
| </select> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </div> | |
| </div> | |
| <button class="cyber-button bg-gray-700 hover:bg-gray-600 text-white px-4 py-1 rounded-lg"> | |
| <i class="fas fa-expand mr-1"></i> Fullscreen | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Preview Container --> | |
| <div class="flex-1 overflow-auto p-4 bg-gray-900/50"> | |
| <div id="preview-container" class="mx-auto bg-white rounded-lg shadow-2xl overflow-hidden transition-all duration-300" style="width: 100%; height: 100%;"> | |
| <div class="flex items-center justify-center h-full"> | |
| <div class="text-center p-8"> | |
| <div class="floating mx-auto w-24 h-24 bg-blue-500 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-robot text-4xl text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">AI Website Generator</h3> | |
| <p class="text-gray-600 mb-6">Configure your website settings and click "Generate Website" to see the magic happen!</p> | |
| <div class="pulse text-blue-500"> | |
| <i class="fas fa-arrow-left mr-1"></i> | |
| <span>Use the panel on the left</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Export Panel --> | |
| <div class="bg-gray-800/70 border-t border-gray-700/50 p-4"> | |
| <div class="flex justify-between items-center"> | |
| <h2 class="text-xl font-semibold text-cyan-300 flex items-center"> | |
| <i class="fas fa-file-export mr-2"></i> Export Options | |
| </h2> | |
| <div class="flex space-x-3"> | |
| <button id="export-html" class="cyber-button bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg"> | |
| <i class="fas fa-file-code mr-2"></i> Export HTML | |
| </button> | |
| <button id="export-zip" class="cyber-button bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg"> | |
| <i class="fas fa-file-archive mr-2"></i> Export ZIP | |
| </button> | |
| <button id="publish-btn" class="cyber-button bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg"> | |
| <i class="fas fa-cloud-upload-alt mr-2"></i> Publish | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- AI Process Panel --> | |
| <aside class="w-80 bg-gray-800/80 border-l border-gray-700/50 flex flex-col"> | |
| <div class="p-4 border-b border-gray-700/50"> | |
| <h2 class="text-xl font-semibold text-cyan-300 flex items-center"> | |
| <i class="fas fa-microchip mr-2"></i> AI Process | |
| </h2> | |
| </div> | |
| <div class="flex-1 overflow-y-auto scrollbar-hide p-4"> | |
| <div class="holographic-bg rounded-lg p-4 glow-border mb-4"> | |
| <h3 class="font-medium text-cyan-200 mb-3 flex items-center justify-between"> | |
| <span><i class="fas fa-tasks mr-2"></i> Generation Progress</span> | |
| <span class="text-sm">0%</span> | |
| </h3> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="holographic-bg rounded-lg p-4 glow-border mb-4"> | |
| <h3 class="font-medium text-cyan-200 mb-3 flex items-center"> | |
| <i class="fas fa-network-wired mr-2"></i> AI Agent Allocation | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between text-sm"> | |
| <span>Design Team</span> | |
| <span>0/342</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-1.5"> | |
| <div class="bg-pink-500 h-1.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Content Team</span> | |
| <span>0/512</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-1.5"> | |
| <div class="bg-green-500 h-1.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Code Team</span> | |
| <span>0/427</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-1.5"> | |
| <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span>QA Team</span> | |
| <span>0/260</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-1.5"> | |
| <div class="bg-purple-500 h-1.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="holographic-bg rounded-lg p-4 glow-border"> | |
| <h3 class="font-medium text-cyan-200 mb-3 flex items-center"> | |
| <i class="fas fa-terminal mr-2"></i> AI Process Log | |
| </h3> | |
| <div class="bg-black/70 rounded p-3 h-64 overflow-y-auto scrollbar-hide terminal-text text-sm"> | |
| <div class="mb-1"><span class="text-gray-400">$</span> AI System Initialized</div> | |
| <div class="mb-1"><span class="text-gray-400">$</span> Waiting for user input...</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-700/50"> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-sm text-gray-400"> | |
| <i class="fas fa-shield-alt mr-1"></i> AI Security: Active | |
| </div> | |
| <div class="text-sm text-gray-400"> | |
| <i class="fas fa-bolt mr-1"></i> Power: 98% | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| </div> | |
| </div> | |
| <!-- Notification System --> | |
| <div id="notification-area" class="fixed bottom-4 right-4 space-y-2 z-50"></div> | |
| <!-- Scripts --> | |
| <script> | |
| // Color scheme selection | |
| document.querySelectorAll('.color-option').forEach(option => { | |
| option.addEventListener('click', function() { | |
| document.querySelectorAll('.color-option').forEach(opt => { | |
| opt.classList.remove('border-white', 'ring-2', 'ring-offset-2', 'ring-offset-gray-900'); | |
| }); | |
| this.classList.add('border-white', 'ring-2', 'ring-offset-2', 'ring-offset-gray-900'); | |
| const color = this.getAttribute('data-color'); | |
| // Update UI colors based on selection | |
| document.documentElement.style.setProperty('--primary-color', `var(--${color}-600)`); | |
| // Update button colors | |
| document.querySelectorAll('.cyber-button').forEach(btn => { | |
| if (btn.id !== 'generate-btn') { | |
| btn.classList.remove('bg-blue-600', 'hover:bg-blue-700', 'bg-green-600', 'hover:bg-green-700', | |
| 'bg-purple-600', 'hover:bg-purple-700', 'bg-red-600', 'hover:bg-red-700', | |
| 'bg-yellow-500', 'hover:bg-yellow-600', 'bg-pink-600', 'hover:bg-pink-700', | |
| 'bg-indigo-600', 'hover:bg-indigo-700', 'bg-teal-500', 'hover:bg-teal-600', | |
| 'bg-orange-500', 'hover:bg-orange-600', 'bg-gray-700', 'hover:bg-gray-600'); | |
| if (btn.classList.contains('bg-blue-600') || !btn.classList.contains('bg-')) { | |
| btn.classList.add(`bg-${color}-600`, `hover:bg-${color}-700`); | |
| } | |
| } | |
| }); | |
| // Update gradient for generate button | |
| const generateBtn = document.getElementById('generate-btn'); | |
| generateBtn.classList.remove('from-blue-600', 'to-cyan-500', 'hover:from-blue-700', 'hover:to-cyan-600', | |
| 'from-purple-600', 'to-pink-500', 'hover:from-purple-700', 'hover:to-pink-600', | |
| 'from-green-600', 'to-emerald-500', 'hover:from-green-700', 'hover:to-emerald-600', | |
| 'from-red-600', 'to-orange-500', 'hover:from-red-700', 'hover:to-orange-600', | |
| 'from-yellow-500', 'to-amber-500', 'hover:from-yellow-600', 'hover:to-amber-600', | |
| 'from-pink-600', 'to-rose-500', 'hover:from-pink-700', 'hover:to-rose-600', | |
| 'from-indigo-600', 'to-violet-500', 'hover:from-indigo-700', 'hover:to-violet-600', | |
| 'from-teal-500', 'to-cyan-400', 'hover:from-teal-600', 'hover:to-cyan-500', | |
| 'from-orange-500', 'to-amber-400', 'hover:from-orange-600', 'hover:to-amber-500', | |
| 'from-gray-700', 'to-gray-500', 'hover:from-gray-800', 'hover:to-gray-600'); | |
| let toColor = 'cyan'; | |
| if (color === 'purple') toColor = 'pink'; | |
| if (color === 'green') toColor = 'emerald'; | |
| if (color === 'red') toColor = 'orange'; | |
| if (color === 'yellow') toColor = 'amber'; | |
| if (color === 'pink') toColor = 'rose'; | |
| if (color === 'indigo') toColor = 'violet'; | |
| if (color === 'teal') toColor = 'cyan'; | |
| if (color === 'orange') toColor = 'amber'; | |
| if (color === 'gray') toColor = 'gray'; | |
| generateBtn.classList.add(`from-${color}-600`, `to-${toColor}-500`, `hover:from-${color}-700`, `hover:to-${toColor}-600`); | |
| }); | |
| }); | |
| // Set default color | |
| document.querySelector('.color-option[data-color="blue"]').click(); | |
| // Generate website button | |
| document.getElementById('generate-btn').addEventListener('click', function() { | |
| const websiteType = document.getElementById('website-type').value; | |
| const layoutStyle = document.querySelector('input[name="layout"]:checked').value; | |
| // Show notification | |
| showNotification(`Starting generation of ${websiteType} website with ${layoutStyle} layout`, 'info'); | |
| // Update AI status | |
| document.getElementById('ai-status').textContent = '1541 AI Agents Working'; | |
| // Start progress simulation | |
| simulateGeneration(); | |
| }); | |
| // Export buttons | |
| document.getElementById('export-html').addEventListener('click', function() { | |
| showNotification('Preparing HTML export...', 'info'); | |
| setTimeout(() => { | |
| // Create a sample HTML file for export | |
| const htmlContent = `<!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Generated Website</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <h1 class="text-4xl font-bold text-center mb-8">Your AI Generated Website</h1> | |
| <p class="text-lg text-center">This website was automatically generated by the AI Website Generator 1541.</p> | |
| </div> | |
| <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=docto41/ai-website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |