Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="neural-networks"> | |
| <title>Quantum Web Generator 9000</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> | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| @keyframes scan { | |
| 0% { background-position: 0 -100vh; } | |
| 100% { background-position: 0 100vh; } | |
| } | |
| .cyber-border { | |
| border-image: linear-gradient(45deg, #00f0ff, #ff00f0, #00ff9d) 1; | |
| animation: border-pulse 4s infinite; | |
| } | |
| .holographic { | |
| background: linear-gradient(135deg, rgba(0,240,255,0.1) 0%, rgba(255,0,240,0.1) 50%, rgba(0,255,157,0.1) 100%); | |
| box-shadow: 0 0 20px rgba(0,240,255,0.5); | |
| } | |
| .matrix-bg { | |
| background: linear-gradient(rgba(0, 20, 0, 0.8), rgba(0, 10, 0, 0.8)), | |
| url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><text x="0" y="15" fill="rgba(0,255,0,0.3)" font-family="monospace" font-size="16">01010101010101010101</text></svg>'); | |
| background-size: 20px 20px; | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px #00f0ff, 0 0 10px #ff00f0; | |
| } | |
| .construction-beam { | |
| position: absolute; | |
| width: 4px; | |
| background: linear-gradient(to bottom, #00f0ff, transparent); | |
| animation: scan 2s linear infinite; | |
| } | |
| .code-block { | |
| font-family: 'Courier New', monospace; | |
| background: rgba(0,0,0,0.7); | |
| border-left: 3px solid #00f0ff; | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes border-pulse { | |
| 0%, 100% { border-image-source: linear-gradient(45deg, #00f0ff, #ff00f0, #00ff9d); } | |
| 50% { border-image-source: linear-gradient(45deg, #ff00f0, #00ff9d, #00f0ff); } | |
| } | |
| </style> | |
| </head> | |
| <body class="matrix-bg text-white min-h-screen overflow-x-hidden"> | |
| <!-- Quantum Interface --> | |
| <div class="fixed top-0 left-0 w-full h-full pointer-events-none" id="quantum-effects"> | |
| <div class="absolute top-0 left-0 w-full h-full opacity-20" style="background: radial-gradient(circle at center, #00f0ff 0%, transparent 70%);"></div> | |
| </div> | |
| <!-- Main Container --> | |
| <div class="container mx-auto px-4 py-12 relative z-10"> | |
| <!-- Header --> | |
| <header class="mb-16 text-center"> | |
| <h1 class="text-6xl font-bold mb-4 neon-text">QUANTUM WEB GENERATOR 9000</h1> | |
| <p class="text-xl text-gray-300">AI-Powered Futuristic Website Construction System</p> | |
| <div class="mt-8 h-1 bg-gradient-to-r from-transparent via-cyan-500 to-transparent"></div> | |
| </header> | |
| <!-- Generator Interface --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16"> | |
| <!-- Input Panel --> | |
| <div class="lg:col-span-1 holographic rounded-xl p-6 border border-cyan-500/50 shadow-lg"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-keyboard mr-3 text-cyan-400"></i> PROJECT SPECS | |
| </h2> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium mb-2">Website Name</label> | |
| <input type="text" id="site-name" class="w-full bg-black/50 border border-cyan-500/50 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500" value="My Futuristic Website"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium mb-2">Description</label> | |
| <textarea id="site-description" rows="8" class="w-full bg-black/50 border border-cyan-500/50 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500" placeholder="Describe your website in detail...">A cutting-edge futuristic website with advanced animations, holographic effects, and quantum design elements. The site should feature 15+ pages including home, about, services, portfolio, blog, and contact sections. Each page should have unique futuristic styling with interactive elements.</textarea> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium mb-2">Pages (15+)</label> | |
| <input type="number" id="page-count" min="15" value="15" class="w-full bg-black/50 border border-cyan-500/50 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium mb-2">Style</label> | |
| <select id="site-style" class="w-full bg-black/50 border border-cyan-500/50 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500"> | |
| <option value="futuristic" selected>Futuristic</option> | |
| <option value="corporate">Corporate</option> | |
| <option value="creative">Creative</option> | |
| <option value="minimal">Minimal</option> | |
| <option value="ecommerce">E-commerce</option> | |
| </select> | |
| </div> | |
| <button id="generate-btn" class="w-full bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center"> | |
| <i class="fas fa-bolt mr-2"></i> GENERATE WEBSITE | |
| </button> | |
| </div> | |
| <!-- Construction Visualizer --> | |
| <div class="lg:col-span-2 bg-black/70 rounded-xl p-6 border border-purple-500/50 shadow-lg relative overflow-hidden"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-eye mr-3 text-purple-400"></i> CONSTRUCTION VISUALIZER | |
| </h2> | |
| <div id="construction-area" class="h-96 bg-black/50 rounded-lg border border-dashed border-gray-600 relative overflow-hidden"> | |
| <div id="construction-beams"></div> | |
| <div id="construction-preview" class="p-4 h-full overflow-auto"></div> | |
| </div> | |
| <div class="mt-4 grid grid-cols-3 gap-4"> | |
| <div class="bg-black/50 p-3 rounded-lg"> | |
| <div class="text-xs text-gray-400">Lines Generated</div> | |
| <div id="line-count" class="text-xl font-mono text-cyan-400">0</div> | |
| </div> | |
| <div class="bg-black/50 p-3 rounded-lg"> | |
| <div class="text-xs text-gray-400">Pages Built</div> | |
| <div id="page-built" class="text-xl font-mono text-purple-400">0</div> | |
| </div> | |
| <div class="bg-black/50 p-3 rounded-lg"> | |
| <div class="text-xs text-gray-400">AI Processing</div> | |
| <div id="ai-status" class="text-xl font-mono text-green-400">IDLE</div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Construction Progress</span> | |
| <span id="progress-percent">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2.5"> | |
| <div id="progress-bar" class="bg-gradient-to-r from-cyan-500 to-purple-600 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Code Output --> | |
| <div class="mb-16"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-2xl font-bold flex items-center"> | |
| <i class="fas fa-code mr-3 text-green-400"></i> GENERATED CODE | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button id="export-html" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm flex items-center"> | |
| <i class="fas fa-file-export mr-2"></i> Export HTML | |
| </button> | |
| <button id="export-zip" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm flex items-center"> | |
| <i class="fas fa-file-archive mr-2"></i> Export ZIP | |
| </button> | |
| </div> | |
| </div> | |
| <div class="code-block rounded-lg overflow-hidden"> | |
| <div class="flex bg-gray-900 p-2 border-b border-gray-700"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="ml-2 text-sm text-gray-400">generated-website.html</div> | |
| </div> | |
| <pre id="code-output" class="p-4 overflow-auto max-h-96 text-gray-300"></pre> | |
| </div> | |
| </div> | |
| <!-- AI Processing Console --> | |
| <div class="mb-8"> | |
| <h2 class="text-2xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-terminal mr-3 text-yellow-400"></i> AI PROCESSING CONSOLE | |
| </h2> | |
| <div class="code-block rounded-lg overflow-hidden"> | |
| <div class="flex bg-gray-900 p-2 border-b border-gray-700"> | |
| <div class="flex space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="ml-2 text-sm text-gray-400">quantum-ai-process.log</div> | |
| </div> | |
| <div id="ai-console" class="p-4 overflow-auto max-h-64 text-green-300 font-mono text-sm leading-relaxed"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating Elements --> | |
| <div class="fixed top-20 right-10 w-16 h-16 rounded-full bg-purple-500/20 backdrop-blur-sm border border-purple-500/50 animate-float"></div> | |
| <div class="fixed bottom-32 left-8 w-12 h-12 rounded-full bg-cyan-500/20 backdrop-blur-sm border border-cyan-500/50 animate-float" style="animation-delay: 0.5s;"></div> | |
| <div class="fixed top-1/3 left-1/4 w-20 h-20 rounded-full bg-green-500/20 backdrop-blur-sm border border-green-500/50 animate-float" style="animation-delay: 1s;"></div> | |
| <script> | |
| // Initialize variables | |
| let generatedWebsite = {}; | |
| let constructionInterval; | |
| let currentPage = 0; | |
| let totalLines = 0; | |
| let isGenerating = false; | |
| // DOM Elements | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const constructionPreview = document.getElementById('construction-preview'); | |
| const constructionBeams = document.getElementById('construction-beams'); | |
| const aiConsole = document.getElementById('ai-console'); | |
| const codeOutput = document.getElementById('code-output'); | |
| const lineCount = document.getElementById('line-count'); | |
| const pageBuilt = document.getElementById('page-built'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const progressPercent = document.getElementById('progress-percent'); | |
| const exportHtml = document.getElementById('export-html'); | |
| const exportZip = document.getElementById('export-zip'); | |
| const aiStatus = document.getElementById('ai-status'); | |
| // Generate random construction beams | |
| function createConstructionBeams() { | |
| constructionBeams.innerHTML = ''; | |
| const beamCount = Math.floor(Math.random() * 5) + 3; | |
| for (let i = 0; i < beamCount; i++) { | |
| const beam = document.createElement('div'); | |
| beam.className = 'construction-beam'; | |
| beam.style.left = `${Math.random() * 100}%`; | |
| beam.style.height = `${Math.random() * 50 + 50}%`; | |
| beam.style.animationDelay = `${Math.random() * 2}s`; | |
| constructionBeams.appendChild(beam); | |
| } | |
| } | |
| // Add message to AI console | |
| function addConsoleMessage(message, type = 'info') { | |
| const now = new Date(); | |
| const timestamp = now.toLocaleTimeString(); | |
| const messageElement = document.createElement('div'); | |
| let icon = ''; | |
| let color = 'text-green-300'; | |
| switch(type) { | |
| case 'error': | |
| icon = '<i class="fas fa-times-circle text-red-500 mr-2"></i>'; | |
| color = 'text-red-400'; | |
| break; | |
| case 'warning': | |
| icon = '<i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i>'; | |
| color = 'text-yellow-400'; | |
| break; | |
| case 'success': | |
| icon = '<i class="fas fa-check-circle text-green-500 mr-2"></i>'; | |
| color = 'text-green-400'; | |
| break; | |
| default: | |
| icon = '<i class="fas fa-info-circle text-cyan-500 mr-2"></i>'; | |
| color = 'text-cyan-400'; | |
| } | |
| messageElement.innerHTML = `<span class="text-gray-500">[${timestamp}]</span> ${icon} <span class="${color}">${message}</span>`; | |
| aiConsole.appendChild(messageElement); | |
| aiConsole.scrollTop = aiConsole.scrollHeight; | |
| } | |
| // Generate HTML from template | |
| function generateHTMLTemplate(pageData) { | |
| let html = `<!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>${pageData.title}</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> | |
| /* Custom styles would be generated here */ | |
| body { | |
| background: linear-gradient(135deg, #0f172a, #1e293b); | |
| color: #ffffff; | |
| font-family: 'Segoe UI', system-ui, sans-serif; | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px #00f0ff, 0 0 10px #ff00f0; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .holographic-card { | |
| background: linear-gradient(135deg, rgba(0,240,255,0.1) 0%, rgba(255,0,240,0.1) 50%, rgba(0,255,157,0.1) 100%); | |
| box-shadow: 0 0 20px rgba(0,240,255,0.3); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(0,240,255,0.3); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <header class="bg-black/50 backdrop-blur-sm py-6 border-b border-cyan-500/30 sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-3xl font-bold neon-text">${pageData.title}</h1> | |
| <p class="text-cyan-400">${pageData.subtitle}</p> | |
| </div> | |
| <nav> | |
| <ul class="flex space-x-6"> | |
| ${pageData.navigation.map(item => ` | |
| <li><a href="${item.link}" class="hover:text-cyan-400 transition-colors">${item.label}</a></li> | |
| `).join('')} | |
| </ul> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-12"> | |
| <section class="mb-16"> | |
| <h2 class="text-2xl font-bold mb-6 text-cyan-400 border-b border-cyan-500/30 pb-2">${pageData.sections[0].title}</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <p class="mb-4">${pageData.sections[0].content}</p> | |
| <button class="bg-gradient-to-r from-cyan-500 to-blue-600 text-white px-6 py-2 rounded-lg hover:from-cyan-600 hover:to-blue-700 transition-all"> | |
| Learn More <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| <div class="holographic-card rounded-lg p-6"> | |
| <h3 class="text-xl font-bold mb-4">Key Features</h3> | |
| <ul class="space-y-2"> | |
| ${pageData.sections[0].features.map(f => `<li class="flex items-start"><i class="fas fa-check text-green-500 mt-1 mr-2"></i> ${f}</li>`).join('')} | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="mb-16"> | |
| <h2 class="text-2xl font-bold mb-6 text-purple-400 border-b border-purple-500/30 pb-2">${pageData.sections[1].title}</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| ${pageData.sections[1].items.map(item => ` | |
| <div class="holographic-card rounded-lg p-6 hover:border-purple-500/60 transition-all animate-float" style="animation-delay: ${Math.random() * 2}s"> | |
| <div class="text-2xl text-purple-400 mb-3"><i class="${item.icon}"></i></div> | |
| <h3 class="text-xl font-bold mb-2">${item.title}</h3> | |
| <p class="text-gray-300">${item.description}</p> | |
| </div> | |
| `).join('')} | |
| </div> | |
| </section> | |
| <section class="mb-16"> | |
| <h2 class="text-2xl font-bold mb-6 text-green-400 border-b border-green-500/30 pb-2">${pageData.sections[2]?.title || 'Advanced Technology'}</h2> | |
| <div class="bg-black/20 rounded-xl p-8 border border-green-500/30"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Quantum Computing Integration</h3> | |
| <p class="mb-4">${pageData.sections[2]?.content || 'Our platform leverages quantum algorithms to deliver unprecedented performance and futuristic user experiences.'}</p> | |
| <div class="flex space-x-4"> | |
| <div class="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center"> | |
| <i class="fas fa-atom text-green-400"></i> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-purple-500/20 flex items-center justify-center"> | |
| <i class="fas fa-brain text-purple-400"></i> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-cyan-500/20 flex items-center justify-center"> | |
| <i class="fas fa-robot text-cyan-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <div class="w-64 h-64 rounded-full bg-gradient-to-br from-green-500/20 to-purple-500/20 flex items-center justify-center border border-green-500/30"> | |
| <i class="fas fa-question text-5xl text-white/50"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="bg-black/50 backdrop-blur-sm py-8 border-t border-cyan-500/30"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 neon-text">${pageData.title}</h3> | |
| <p class="text-gray-400">${pageData.subtitle}</p> | |
| </div> | |
| ${pageData.footerSections.map(section => ` | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 text-cyan-400">${section.title}</h4> | |
| <ul class="space-y-2"> | |
| ${section.links.map(link => ` | |
| <li><a href="${link.url}" class="text-gray-400 hover:text-cyan-400 transition-colors">${link.label}</a></li> | |
| `).join('')} | |
| </ul> | |
| </div> | |
| `).join('')} | |
| </div> | |
| <div class="mt-8 pt-6 border-t border-gray-800 text-center text-gray-500"> | |
| <p>© ${new Date().getFullYear()} ${pageData.title}. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <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/web-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |