Spaces:

sap-ai
/

duoling-horror

Running

App Files Files Community

sap-ai commited on Apr 18, 2025

Commit

6aef688

verified ·

1 Parent(s): b38982c

Add 2 files

Browse files

Files changed (2) hide show

index.html +403 -483
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -3,558 +3,478 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DeepSite - AI Assistant & Website Generator</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; }
-        }
-        .typing-indicator::after {
-            content: '...';
-            animation: typing 1.5s infinite;
-        }
-        @keyframes typing {
-            0% { content: '.'; }
-            33% { content: '..'; }
-            66% { content: '...'; }
-        }
-        .message-enter {
-            animation: messageEnter 0.3s ease-out;
-        }
-        @keyframes messageEnter {
-            from { transform: translateY(10px); opacity: 0; }
-            to { transform: translateY(0); opacity: 1; }
-        }
         .gradient-bg {
-            background: linear-gradient(135deg, #6e8efb, #a777e3);
         }
-        .scrollbar-hide::-webkit-scrollbar {
-            display: none;
-        }
-        .website-preview {
             border: 2px dashed #a777e3;
             min-height: 300px;
-            background-color: #f9fafb;
         }
-        .tab-active {
-            border-bottom: 3px solid #a777e3;
-            color: #a777e3;
-            font-weight: 600;
         }
-        #code-preview {
-            font-family: 'Courier New', monospace;
-            font-size: 14px;
         }
     </style>
 </head>
-<body class="bg-gray-50 h-screen flex flex-col">
     <!-- Header -->
     <header class="gradient-bg text-white shadow-lg">
-        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
-            <div class="flex items-center space-x-3">
-                <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
-                    <i class="fas fa-brain text-xl"></i>
                 </div>
-                <h1 class="text-xl font-bold">DeepSite</h1>
             </div>
-            <nav class="hidden md:flex space-x-6">
-                <a href="#" class="hover:text-white/80 transition">Home</a>
-                <a href="#" class="hover:text-white/80 transition">AI Chat</a>
-                <a href="#" class="hover:text-white/80 transition">Website Gen</a>
-                <a href="#" class="hover:text-white/80 transition">Pricing</a>
-            </nav>
-            <button class="md:hidden text-xl">
-                <i class="fas fa-bars"></i>
-            </button>
         </div>
     </header>
-    <!-- Main Content Area with Tabs -->
-    <main class="flex-1 container mx-auto px-4 py-6 max-w-6xl">
-        <!-- Tabs Navigation -->
-        <div class="flex border-b border-gray-200 mb-6">
-            <button id="chat-tab" class="px-4 py-2 mr-2 tab-active">AI Assistant</button>
-            <button id="website-tab" class="px-4 py-2 mr-2">Website Generator</button>
-        </div>
-        <!-- Chat Tab Content -->
-        <div id="chat-content" class="flex flex-col h-full">
-            <!-- Welcome Message -->
-            <div class="bg-white rounded-xl shadow-md p-6 mb-6 message-enter">
-                <div class="flex items-start space-x-3">
-                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
-                        <i class="fas fa-robot text-purple-600"></i>
-                    </div>
-                    <div>
-                        <h2 class="font-bold text-lg">Hello! I'm DeepSite</h2>
-                        <p class="text-gray-600 mt-1">I'm your AI assistant. Ask me anything, from creative writing to technical explanations. How can I help you today?</p>
-                        <div class="mt-3 flex flex-wrap gap-2">
-                            <button class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition">Explain quantum computing</button>
-                            <button class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition">Write a poem about AI</button>
-                            <button class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 rounded-full text-sm transition">Help me debug code</button>
-                        </div>
-                    </div>
                 </div>
             </div>
-            <!-- Chat Messages Container -->
-            <div id="chat-container" class="flex-1 overflow-y-auto scrollbar-hide space-y-4">
-                <!-- Messages will be inserted here by JavaScript -->
-            </div>
-            <!-- Input Area -->
-            <div class="mt-4 bg-white rounded-xl shadow-md p-4 sticky bottom-4">
-                <div class="flex items-end space-x-2">
-                    <div class="flex-1 relative">
-                        <textarea
-                            id="message-input"
-                            rows="1"
-                            placeholder="Message DeepSite..."
-                            class="w-full px-4 py-3 pr-12 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none max-h-32"
-                            style="min-height: 50px;"></textarea>
-                        <div class="absolute right-2 bottom-2 flex space-x-1">
-                            <button class="text-gray-400 hover:text-gray-600 p-1 rounded-full transition">
-                                <i class="fas fa-paperclip"></i>
-                            </button>
-                            <button class="text-gray-400 hover:text-gray-600 p-1 rounded-full transition">
-                                <i class="fas fa-microphone"></i>
-                            </button>
                         </div>
                     </div>
-                    <button id="send-button" class="bg-purple-600 hover:bg-purple-700 text-white w-12 h-12 rounded-full flex items-center justify-center transition">
-                        <i class="fas fa-paper-plane"></i>
-                    </button>
                 </div>
-                <p class="text-xs text-gray-500 mt-2 text-center">DeepSite may produce inaccurate information about people, places, or facts.</p>
             </div>
         </div>
-        <!-- Website Generator Tab Content (Hidden by default) -->
-        <div id="website-content" class="hidden flex flex-col h-full">
-            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-                <!-- Website Configuration Form -->
-                <div class="lg:col-span-1 bg-white rounded-xl shadow-md p-6">
-                    <h2 class="font-bold text-xl mb-4">Website Requirements</h2>
-                    <div class="space-y-4">
                         <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Website Type</label>
-                            <select id="website-type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
-                                <option value="portfolio">Portfolio</option>
-                                <option value="business">Business</option>
-                                <option value="ecommerce">E-commerce</option>
-                                <option value="blog">Blog</option>
-                                <option value="landing">Landing Page</option>
                             </select>
                         </div>
                         <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Primary Color</label>
-                            <div class="flex space-x-2">
-                                <button data-color="purple" class="w-8 h-8 rounded-full bg-purple-600 border-2 border-white shadow-md color-selector"></button>
-                                <button data-color="blue" class="w-8 h-8 rounded-full bg-blue-600 border-2 border-gray-200 shadow-md color-selector"></button>
-                                <button data-color="green" class="w-8 h-8 rounded-full bg-green-600 border-2 border-gray-200 shadow-md color-selector"></button>
-                                <button data-color="red" class="w-8 h-8 rounded-full bg-red-600 border-2 border-gray-200 shadow-md color-selector"></button>
-                                <button data-color="indigo" class="w-8 h-8 rounded-full bg-indigo-600 border-2 border-gray-200 shadow-md color-selector"></button>
-                            </div>
-                        </div>
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Style</label>
-                            <select id="website-style" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500">
-                                <option value="modern">Modern</option>
-                                <option value="minimal">Minimal</option>
-                                <option value="elegant">Elegant</option>
-                                <option value="bold">Bold</option>
-                                <option value="playful">Playful</option>
                             </select>
                         </div>
                         <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Sections Needed</label>
-                            <div class="space-y-2">
-                                <label class="flex items-center">
-                                    <input type="checkbox" checked class="rounded text-purple-600">
-                                    <span class="ml-2">Hero Section</span>
-                                </label>
-                                <label class="flex items-center">
-                                    <input type="checkbox" checked class="rounded text-purple-600">
-                                    <span class="ml-2">About/Features</span>
-                                </label>
-                                <label class="flex items-center">
-                                    <input type="checkbox" checked class="rounded text-purple-600">
-                                    <span class="ml-2">Services/Products</span>
-                                </label>
-                                <label class="flex items-center">
-                                    <input type="checkbox" class="rounded text-purple-600">
-                                    <span class="ml-2">Testimonials</span>
-                                </label>
-                                <label class="flex items-center">
-                                    <input type="checkbox" class="rounded text-purple-600">
-                                    <span class="ml-2">Contact Form</span>
-                                </label>
                             </div>
                         </div>
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Additional Notes</label>
-                            <textarea id="website-notes" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Any specific requirements..."></textarea>
-                        </div>
-                        <button id="generate-website" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md transition flex items-center justify-center">
-                            <i class="fas fa-magic mr-2"></i> Generate Website
-                        </button>
                     </div>
                 </div>
-                <!-- Preview Area -->
-                <div class="lg:col-span-2 space-y-4">
-                    <div class="bg-white rounded-xl shadow-md p-6">
-                        <h2 class="font-bold text-xl mb-4">Website Preview</h2>
-                        <div id="website-preview" class="website-preview rounded-lg overflow-hidden relative">
-                            <div class="absolute inset-0 flex items-center justify-center text-gray-400">
-                                <div class="text-center">
-                                    <i class="fas fa-laptop-code text-4xl mb-2"></i>
-                                    <p>Your website will appear here</p>
-                                </div>
-                            </div>
-                        </div>
                     </div>
-                    <div class="bg-white rounded-xl shadow-md p-6">
-                        <div class="flex justify-between items-center mb-4">
-                            <h2 class="font-bold text-xl">Generated Code</h2>
-                            <div class="flex space-x-2">
-                                <button id="copy-code" class="text-sm bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-md transition">
-                                    <i class="fas fa-copy mr-1"></i> Copy
-                                </button>
-                                <button id="download-code" class="text-sm bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-md transition">
-                                    <i class="fas fa-download mr-1"></i> Download
-                                </button>
-                            </div>
                         </div>
-                        <pre id="code-preview" class="bg-gray-800 text-gray-100 p-4 rounded-md overflow-x-auto"><code>// Your generated HTML/CSS/JS code will appear here</code></pre>
                     </div>
                 </div>
             </div>
         </div>
-    </main>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // Tab switching functionality
-            const chatTab = document.getElementById('chat-tab');
-            const websiteTab = document.getElementById('website-tab');
-            const chatContent = document.getElementById('chat-content');
-            const websiteContent = document.getElementById('website-content');
-            chatTab.addEventListener('click', function() {
-                chatContent.classList.remove('hidden');
-                websiteContent.classList.add('hidden');
-                chatTab.classList.add('tab-active');
-                websiteTab.classList.remove('tab-active');
-            });
-            websiteTab.addEventListener('click', function() {
-                chatContent.classList.add('hidden');
-                websiteContent.classList.remove('hidden');
-                chatTab.classList.remove('tab-active');
-                websiteTab.classList.add('tab-active');
-            });
-            // Chat functionality
-            const chatContainer = document.getElementById('chat-container');
-            const messageInput = document.getElementById('message-input');
-            const sendButton = document.getElementById('send-button');
-            // Auto-resize textarea
-            messageInput.addEventListener('input', function() {
-                this.style.height = 'auto';
-                this.style.height = (this.scrollHeight) + 'px';
-            });
-            // Send message on button click or Enter key
-            function sendMessage() {
-                const message = messageInput.value.trim();
-                if (message) {
-                    addUserMessage(message);
-                    messageInput.value = '';
-                    messageInput.style.height = 'auto';
-                    // Show typing indicator
-                    const typingIndicator = document.createElement('div');
-                    typingIndicator.className = 'bg-white rounded-xl shadow-md p-4 message-enter';
-                    typingIndicator.innerHTML = `
-                        <div class="flex items-start space-x-3">
-                            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
-                                <i class="fas fa-robot text-purple-600"></i>
-                            </div>
-                            <div class="typing-indicator text-gray-600">Thinking</div>
-                        </div>
-                    `;
-                    chatContainer.appendChild(typingIndicator);
-                    chatContainer.scrollTop = chatContainer.scrollHeight;
-                    // Simulate AI response after a delay
-                    setTimeout(() => {
-                        chatContainer.removeChild(typingIndicator);
-                        addAIMessage(generateResponse(message));
-                    }, 1500 + Math.random() * 2000);
-                }
-            }
-            sendButton.addEventListener('click', sendMessage);
-            messageInput.addEventListener('keydown', function(e) {
-                if (e.key === 'Enter' && !e.shiftKey) {
-                    e.preventDefault();
-                    sendMessage();
-                }
-            });
-            // Add user message to chat
-            function addUserMessage(message) {
-                const messageDiv = document.createElement('div');
-                messageDiv.className = 'bg-purple-100 rounded-xl shadow-md p-4 ml-12 message-enter';
-                messageDiv.innerHTML = `
-                    <div class="flex items-start justify-end space-x-3">
-                        <div class="text-right">
-                            <p class="text-gray-800">${escapeHtml(message)}</p>
-                        </div>
-                        <div class="flex-shrink-0 w-10 h-10 rounded-full bg-purple-600 text-white flex items-center justify-center">
-                            <i class="fas fa-user"></i>
-                        </div>
-                    </div>
-                `;
-                chatContainer.appendChild(messageDiv);
-                chatContainer.scrollTop = chatContainer.scrollHeight;
-            }
-            // Add AI message to chat
-            function addAIMessage(message) {
-                const messageDiv = document.createElement('div');
-                messageDiv.className = 'bg-white rounded-xl shadow-md p-4 mr-12 message-enter';
-                messageDiv.innerHTML = `
-                    <div class="flex items-start space-x-3">
-                        <div class="flex-shrink-0 w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
-                            <i class="fas fa-robot text-purple-600"></i>
-                        </div>
-                        <div class="text-gray-800">${message}</div>
                     </div>
-                `;
-                chatContainer.appendChild(messageDiv);
-                chatContainer.scrollTop = chatContainer.scrollHeight;
-            }
-            // Simple HTML escape
-            function escapeHtml(unsafe) {
-                return unsafe
-                    .replace(/&/g, "&amp;")
-                    .replace(/</g, "&lt;")
-                    .replace(/>/g, "&gt;")
-                    .replace(/"/g, "&quot;")
-                    .replace(/'/g, "&#039;");
-            }
-            // Generate simple responses (in a real app, this would call an API)
-            function generateResponse(userMessage) {
-                const responses = [
-                    `I understand you're asking about "${userMessage}". While I don't have real-time data, I can provide general information on this topic.`,
-                    `Interesting question about "${userMessage}"! Here's what I know: [This would be a detailed response in a real implementation].`,
-                    `"${userMessage}" is a fascinating topic. From my training data, I can tell you that... [response would continue]`,
-                    `I'd be happy to help with "${userMessage}". Could you provide more details about what specifically you'd like to know?`,
-                    `Regarding "${userMessage}", I should note that my knowledge has a cutoff date. Here's the information I have...`
-                ];
-                const randomResponse = responses[Math.floor(Math.random() * responses.length)];
-                // Add some markdown-like formatting
-                return randomResponse + `<div class="mt-4 p-3 bg-gray-50 rounded-lg border border-gray-200">
-                    <p class="font-medium text-sm text-gray-700 mb-1">Remember:</p>
-                    <p class="text-sm text-gray-600">I'm an AI assistant and my responses should be verified for accuracy.</p>
-                </div>`;
-            }
-            // Add click handlers to the suggestion buttons
-            document.querySelectorAll('.bg-gray-100').forEach(button => {
-                button.addEventListener('click', function() {
-                    messageInput.value = this.textContent;
-                    messageInput.focus();
-                });
-            });
-            // Website Generator Functionality
-            const generateBtn = document.getElementById('generate-website');
-            const websitePreview = document.getElementById('website-preview');
-            const codePreview = document.getElementById('code-preview');
-            const colorSelectors = document.querySelectorAll('.color-selector');
-            let selectedColor = 'purple';
-            // Color selection
-            colorSelectors.forEach(button => {
-                button.addEventListener('click', function() {
-                    // Remove border from all buttons
-                    colorSelectors.forEach(btn => {
-                        btn.classList.remove('border-2', 'border-white', 'shadow-md');
-                        btn.classList.add('border-2', 'border-gray-200', 'shadow-md');
-                    });
-                    // Add highlight to selected button
-                    this.classList.remove('border-gray-200');
-                    this.classList.add('border-white', 'shadow-md');
-                    selectedColor = this.dataset.color;
-                });
-            });
-            // Generate website
-            generateBtn.addEventListener('click', function() {
-                const websiteType = document.getElementById('website-type').value;
-                const websiteStyle = document.getElementById('website-style').value;
-                const notes = document.getElementById('website-notes').value;
-                // Show loading state
-                generateBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Generating...';
-                generateBtn.disabled = true;
-                // Simulate generation delay
-                setTimeout(() => {
-                    generateBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Generate Website';
-                    generateBtn.disabled = false;
-                    // Generate sample website based on inputs
-                    const {html, preview} = generateWebsite(websiteType, selectedColor, websiteStyle, notes);
-                    // Update preview
-                    websitePreview.innerHTML = preview;
-                    // Update code preview
-                    codePreview.innerHTML = `<code>${escapeHtml(html)}</code>`;
-                    // Add copy and download functionality
-                    setupCodeActions(html);
-                }, 2000);
-            });
-            // Generate sample website HTML
-            function generateWebsite(type, color, style, notes) {
-                const colorClasses = {
-                    purple: {
-                        bg: 'bg-purple-600',
-                        text: 'text-purple-600',
-                        border: 'border-purple-600',
-                        hover: 'hover:bg-purple-700'
-                    },
-                    blue: {
-                        bg: 'bg-blue-600',
-                        text: 'text-blue-600',
-                        border: 'border-blue-600',
-                        hover: 'hover:bg-blue-700'
-                    },
-                    green: {
-                        bg: 'bg-green-600',
-                        text: 'text-green-600',
-                        border: 'border-green-600',
-                        hover: 'hover:bg-green-700'
-                    },
-                    red: {
-                        bg: 'bg-red-600',
-                        text: 'text-red-600',
-                        border: 'border-red-600',
-                        hover: 'hover:bg-red-700'
-                    },
-                    indigo: {
-                        bg: 'bg-indigo-600',
-                        text: 'text-indigo-600',
-                        border: 'border-indigo-600',
-                        hover: 'hover:bg-indigo-700'
-                    }
-                };
-                const colorScheme = colorClasses[color];
-                // Sample website HTML
-                const html = `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>${type.charAt(0).toUpperCase() + type.slice(1)} Website</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>
-        .hero-section {
-            background: linear-gradient(135deg, ${colorScheme.bg.replace('bg-', '')}, #${Math.floor(Math.random()*16777215).toString(16)});
-        }
-    </style>
-</head>
-<body class="font-sans">
-    <!-- Navigation -->
-    <nav class="bg-white shadow-lg">
-        <div class="container mx-auto px-6 py-3">
-            <div class="flex justify-between items-center">
-                <div class="text-2xl font-bold ${colorScheme.text}">${type.charAt(0).toUpperCase() + type.slice(1)}Site</div>
-                <div class="hidden md:flex space-x-8">
-                    <a href="#" class="${colorScheme.text} font-medium">Home</a>
-                    <a href="#" class="text-gray-600 hover:${colorScheme.text}">About</a>
-                    <a href="#" class="text-gray-600 hover:${colorScheme.text}">Services</a>
-                    <a href="#" class="text-gray-600 hover:${colorScheme.text}">Contact</a>
                 </div>
-                <button class="md:hidden text-gray-600">
-                    <i class="fas fa-bars text-2xl"></i>
-                </button>
             </div>
         </div>
-    </nav>
-    <!-- Hero Section -->
-    <section class="hero-section text-white py-20">
-        <div class="container mx-auto px-6 text-center">
-            <h1 class="text-4xl md:text-6xl font-bold mb-6">${getHeroTitle(type)}</h1>
-            <p class="text-xl mb-8">${getHeroSubtitle(type)}</p>
-            <button class="${colorScheme.bg} ${colorScheme.hover} text-white font-bold py-3 px-8 rounded-full text-lg transition">
-                Get Started
             </button>
         </div>
     </section>
-    <!-- Features Section -->
-    <section class="py-16 bg-gray-50">
-        <div class="container mx-auto px-6">
-            <h2 class="text-3xl font-bold text-center mb-12">Our ${type === 'ecommerce' ? 'Products' : 'Features'}</h2>
-            <div class="grid md:grid-cols-3 gap-8">
-                ${[1, 2, 3].map(i => `
-                <div class="bg-white p-6 rounded-lg shadow-md">
-                    <div class="${colorScheme.text} text-4xl mb-4">
-                        <i class="fas ${getFeatureIcon(type, i)}"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-2">${getFeatureTitle(type, i)}</h3>
-                    <p class="text-gray-600">${getFeatureDescription(type, i)}</p>
                 </div>
-                `).join('')}
             </div>
-        </div>
-    </section>
-    <!-- Footer -->
-    <footer class="bg-gray-800 text-white py-8">
-        <div class="container mx-auto px-6">
-            <div class="flex flex-col md:flex-row justify-between items-center">
-                <div class="text-xl font-bold mb-4 md:mb-0">${type.charAt(0).toUpperCase() + type.slice(1)}Site</div>
                 <div class="flex space-x-6">
-                    <a href="#"><i class="fab fa-facebook-f"></i></a>
-                    <a href="#"><i class="fab fa-twitter"></i></a>
-                    <a href="#"><i class="fab fa-instagram"></i></a>
-                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                 </div>
             </div>
-            <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
-                &copy; ${new Date().getFullYear()} ${type.charAt(0).toUpperCase() + type.slice(1)}Site. All rights reserved.
-            </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=sap-ai/duoling-horror" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Website Generator | Create Websites Instantly</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>
         .gradient-bg {
+            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
         }
+        .preview-window {
             border: 2px dashed #a777e3;
             min-height: 300px;
+            background-color: #f8f9fa;
+        }
+        .loading-bar {
+            width: 0%;
+            transition: width 3s ease-in-out;
+        }
+        .animate-pulse {
+            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
         }
+        @keyframes pulse {
+            0%, 100% {
+                opacity: 1;
+            }
+            50% {
+                opacity: 0.5;
+            }
         }
+        .floating {
+            animation: floating 3s ease-in-out infinite;
+        }
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-15px); }
+            100% { transform: translateY(0px); }
         }
     </style>
 </head>
+<body class="bg-gray-50 font-sans">
     <!-- Header -->
     <header class="gradient-bg text-white shadow-lg">
+        <div class="container mx-auto px-4 py-6">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center space-x-2">
+                    <i class="fas fa-robot text-3xl"></i>
+                    <h1 class="text-2xl font-bold">AI Website Generator</h1>
                 </div>
+                <nav>
+                    <ul class="flex space-x-6">
+                        <li><a href="#" class="hover:underline">Home</a></li>
+                        <li><a href="#" class="hover:underline">Templates</a></li>
+                        <li><a href="#" class="hover:underline">Pricing</a></li>
+                        <li><a href="#" class="hover:underline">Contact</a></li>
+                    </ul>
+                </nav>
             </div>
         </div>
     </header>
+    <!-- Hero Section -->
+    <section class="gradient-bg text-white py-16">
+        <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
+            <div class="md:w-1/2 mb-10 md:mb-0">
+                <h1 class="text-4xl md:text-5xl font-bold mb-6">Generate Your Perfect Website with AI</h1>
+                <p class="text-xl mb-8">Describe what you need and our AI will create a professional, responsive website in seconds. No coding required!</p>
+                <div class="flex space-x-4">
+                    <button class="bg-white text-purple-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition">Try for Free</button>
+                    <button class="border-2 border-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-600 transition">Watch Demo</button>
                 </div>
             </div>
+            <div class="md:w-1/2 relative">
+                <div class="bg-white rounded-xl shadow-2xl p-4 relative floating">
+                    <div class="flex space-x-2 mb-3">
+                        <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="preview-window rounded-lg overflow-hidden">
+                        <div id="live-preview" class="p-4">
+                            <div class="text-center py-10 text-gray-500">
+                                <i class="fas fa-magic text-4xl mb-4"></i>
+                                <p>Your AI-generated website will appear here</p>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
+    </section>
+    <!-- Generator Section -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12">Create Your Website in 3 Simple Steps</h2>
+            <div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-md p-8">
+                <div class="mb-8">
+                    <div class="flex items-center mb-4">
+                        <div class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">1</div>
+                        <h3 class="text-xl font-semibold">Describe Your Website</h3>
+                    </div>
+                    <textarea id="website-description" class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" rows="5" placeholder="Example: I need a modern portfolio website for a photographer with dark theme, image gallery, contact form, and about section..."></textarea>
+                </div>
+                <div class="mb-8">
+                    <div class="flex items-center mb-4">
+                        <div class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">2</div>
+                        <h3 class="text-xl font-semibold">Customize Options</h3>
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                         <div>
+                            <label class="block text-gray-700 mb-2">Color Scheme</label>
+                            <select class="w-full p-3 border border-gray-300 rounded-lg">
+                                <option>Modern Purple</option>
+                                <option>Professional Blue</option>
+                                <option>Elegant Dark</option>
+                                <option>Light Minimal</option>
                             </select>
                         </div>
                         <div>
+                            <label class="block text-gray-700 mb-2">Layout</label>
+                            <select class="w-full p-3 border border-gray-300 rounded-lg">
+                                <option>Single Page</option>
+                                <option>Multi-Page</option>
+                                <option>Landing Page</option>
+                                <option>Blog Style</option>
                             </select>
                         </div>
                         <div>
+                            <label class="block text-gray-700 mb-2">Features</label>
+                            <div class="flex flex-wrap gap-2">
+                                <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Contact Form</span>
+                                <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Gallery</span>
+                                <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Blog</span>
                             </div>
                         </div>
                     </div>
                 </div>
+                <div>
+                    <div class="flex items-center mb-4">
+                        <div class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">3</div>
+                        <h3 class="text-xl font-semibold">Generate & Preview</h3>
                     </div>
+                    <button id="generate-btn" class="w-full gradient-bg text-white py-4 rounded-lg font-bold text-lg hover:opacity-90 transition flex items-center justify-center">
+                        <i class="fas fa-magic mr-2"></i> Generate Website
+                    </button>
+                    <div id="loading-container" class="mt-6 hidden">
+                        <div class="mb-2 flex justify-between">
+                            <span class="font-medium">Generating your website...</span>
+                            <span id="progress-percent">0%</span>
+                        </div>
+                        <div class="w-full bg-gray-200 rounded-full h-2.5">
+                            <div id="loading-bar" class="loading-bar bg-purple-600 h-2.5 rounded-full"></div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
+    </section>
+    <!-- Features Section -->
+    <section class="py-16 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12">Why Choose Our AI Website Generator</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition">
+                    <div class="text-purple-600 mb-4">
+                        <i class="fas fa-bolt text-4xl"></i>
                     </div>
+                    <h3 class="text-xl font-bold mb-3">Lightning Fast</h3>
+                    <p class="text-gray-600">Generate complete, responsive websites in under a minute. No waiting for designers or developers.</p>
+                </div>
+                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition">
+                    <div class="text-purple-600 mb-4">
+                        <i class="fas fa-sliders-h text-4xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Fully Customizable</h3>
+                    <p class="text-gray-600">Easily tweak colors, layouts, and content after generation to make it truly yours.</p>
+                </div>
+                <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition">
+                    <div class="text-purple-600 mb-4">
+                        <i class="fas fa-mobile-alt text-4xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Mobile Ready</h3>
+                    <p class="text-gray-600">All generated websites are fully responsive and look great on any device.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Templates Section -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12">Popular Template Designs</h2>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                <div class="border rounded-lg overflow-hidden hover:shadow-lg transition">
+                    <div class="h-48 bg-gradient-to-r from-blue-400 to-blue-600 flex items-center justify-center">
+                        <i class="fas fa-briefcase text-white text-6xl"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-2">Business</h3>
+                        <p class="text-gray-600 text-sm">Professional corporate design</p>
+                    </div>
+                </div>
+                <div class="border rounded-lg overflow-hidden hover:shadow-lg transition">
+                    <div class="h-48 bg-gradient-to-r from-purple-400 to-purple-600 flex items-center justify-center">
+                        <i class="fas fa-camera text-white text-6xl"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-2">Portfolio</h3>
+                        <p class="text-gray-600 text-sm">Showcase your creative work</p>
+                    </div>
+                </div>
+                <div class="border rounded-lg overflow-hidden hover:shadow-lg transition">
+                    <div class="h-48 bg-gradient-to-r from-green-400 to-green-600 flex items-center justify-center">
+                        <i class="fas fa-store text-white text-6xl"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-2">E-commerce</h3>
+                        <p class="text-gray-600 text-sm">Online store ready for products</p>
+                    </div>
+                </div>
+                <div class="border rounded-lg overflow-hidden hover:shadow-lg transition">
+                    <div class="h-48 bg-gradient-to-r from-red-400 to-red-600 flex items-center justify-center">
+                        <i class="fas fa-newspaper text-white text-6xl"></i>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-2">Blog</h3>
+                        <p class="text-gray-600 text-sm">Perfect for writers and bloggers</p>
+                    </div>
                 </div>
             </div>
         </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="gradient-bg text-white py-16">
+        <div class="container mx-auto px-4 text-center">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Create Your Website?</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of users who've created stunning websites with our AI generator.</p>
+            <button class="bg-white text-purple-600 px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition">
+                <i class="fas fa-play mr-2"></i> Start Generating Now
             </button>
         </div>
     </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12">
+        <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 flex items-center">
+                        <i class="fas fa-robot mr-2"></i> AI Website Gen
+                    </h3>
+                    <p class="text-gray-400">The easiest way to create professional websites powered by artificial intelligence.</p>
+                </div>
+                <div>
+                    <h4 class="font-bold mb-4">Product</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Templates</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Examples</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-bold mb-4">Resources</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Guides</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">API Status</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-bold mb-4">Company</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li>
+                    </ul>
                 </div>
             </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-400 mb-4 md:mb-0">© 2023 AI Website Generator. All rights reserved.</p>
                 <div class="flex space-x-6">
+                    <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a>
+                    <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook text-xl"></i></a>
+                    <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram text-xl"></i></a>
+                    <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github text-xl"></i></a>
                 </div>
             </div>
         </div>
     </footer>
+    <script>
+        document.getElementById('generate-btn').addEventListener('click', function() {
+            const description = document.getElementById('website-description').value;
+            const loadingContainer = document.getElementById('loading-container');
+            const loadingBar = document.getElementById('loading-bar');
+            const progressPercent = document.getElementById('progress-percent');
+            const livePreview = document.getElementById('live-preview');
+            if (!description.trim()) {
+                alert('Please describe your website first!');
+                return;
+            }
+            // Show loading state
+            loadingContainer.classList.remove('hidden');
+            loadingBar.style.width = '0%';
+            progressPercent.textContent = '0%';
+            // Simulate generation process
+            let progress = 0;
+            const interval = setInterval(() => {
+                progress += Math.random() * 10;
+                if (progress > 100) progress = 100;
+                loadingBar.style.width = `${progress}%`;
+                progressPercent.textContent = `${Math.floor(progress)}%`;
+                if (progress === 100) {
+                    clearInterval(interval);
+                    setTimeout(() => {
+                        generateWebsite(description);
+                        loadingContainer.classList.add('hidden');
+                    }, 500);
+                }
+            }, 300);
+        });
+        function generateWebsite(description) {
+            const livePreview = document.getElementById('live-preview');
+            // Clear previous content
+            livePreview.innerHTML = '';
+            // Add a simple generated website preview based on description
+            if (description.toLowerCase().includes('portfolio') || description.toLowerCase().includes('photographer')) {
+                // Portfolio template
+                livePreview.innerHTML = `
+                    <div class="bg-gray-900 text-white p-6">
+                        <div class="flex justify-between items-center mb-8">
+                            <h1 class="text-2xl font-bold">Photography Portfolio</h1>
+                            <nav class="flex space-x-4">
+                                <a href="#" class="hover:text-purple-400">Home</a>
+                                <a href="#" class="hover:text-purple-400">Gallery</a>
+                                <a href="#" class="hover:text-purple-400">About</a>
+                                <a href="#" class="hover:text-purple-400">Contact</a>
+                            </nav>
+                        </div>
+                        <div class="text-center py-8">
+                            <h2 class="text-4xl font-bold mb-4">John Doe Photography</h2>
+                            <p class="text-xl mb-8">Capturing moments that last forever</p>
+                            <button class="bg-purple-600 hover:bg-purple-700 px-6 py-3 rounded-full">View My Work</button>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-2xl font-bold mb-6 text-center">Featured Work</h3>
+                        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
+                            <div class="bg-gray-200 h-32 animate-pulse"></div>
+                            <div class="bg-gray-200 h-32 animate-pulse"></div>
+                            <div class="bg-gray-200 h-32 animate-pulse"></div>
+                            <div class="bg-gray-200 h-32 animate-pulse"></div>
+                            <div class="bg-gray-200 h-32 animate-pulse"></div>
+                            <div class="bg-gray-200 h-32 animate-pulse"></div>
+                        </div>
+                    </div>
+                `;
+            } else if (description.toLowerCase().includes('business') || description.toLowerCase().includes('corporate')) {
+                // Business template
+                livePreview.innerHTML = `
+                    <div class="bg-white p-6">
+                        <div class="flex justify-between items-center mb-8">
+                            <h1 class="text-2xl font-bold text-gray-800">Business Solutions</h1>
+                            <nav class="flex space-x-4">
+                                <a href="#" class="text-gray-600 hover:text-purple-600">Home</a>
+                                <a href="#" class="text-gray-600 hover:text-purple-600">Services</a>
+                                <a href="#" class="text-gray-600 hover:text-purple-600">About</a>
+                                <a href="#" class="text-gray-600 hover:text-purple-600">Contact</a>
+                            </nav>
+                        </div>
+                        <div class="bg-gradient-to-r from-blue-500 to-blue-700 text-white p-8 rounded-lg mb-6">
+                            <h2 class="text-3xl font-bold mb-4">Innovative Business Solutions</h2>
+                            <p class="mb-6">We help companies grow and succeed in the digital age</p>
+                            <button class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-2 rounded">Learn More</button>
+                        </div>
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                            <div class="border p-4 rounded-lg">
+                                <div class="text-blue-600 mb-3">
+                                    <i class="fas fa-chart-line text-2xl"></i>
+                                </div>
+                                <h3 class="font-bold mb-2">Growth Strategy</h3>
+                                <p class="text-gray-600 text-sm">Custom solutions for your business growth</p>
+                            </div>
+                            <div class="border p-4 rounded-lg">
+                                <div class="text-blue-600 mb-3">
+                                    <i class="fas fa-cogs text-2xl"></i>
+                                </div>
+                                <h3 class="font-bold mb-2">Process Optimization</h3>
+                                <p class="text-gray-600 text-sm">Streamline your operations efficiently</p>
+                            </div>
+                            <div class="border p-4 rounded-lg">
+                                <div class="text-blue-600 mb-3">
+                                    <i class="fas fa-users text-2xl"></i>
+                                </div>
+                                <h3 class="font-bold mb-2">Team Building</h3>
+                                <p class="text-gray-600 text-sm">Build high-performing teams</p>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            } else {
+                // Default template
+                livePreview.innerHTML = `
+                    <div class="bg-white p-6">
+                        <div class="flex justify-between items-center mb-8">
+                            <h1 class="text-2xl font-bold text-gray-800">My Awesome Website</h1>
+                            <nav class="flex space-x-4">
+                                <a href="#" class="text-gray-600 hover:text-purple-600">Home</a>
+                                <a href="#" class="text-gray-600 hover:text-purple-600">Features</a>
+                                <a href="#" class="text-gray-600 hover:text-purple-600">About</a>
+                                <a href="#" class="text-gray-600 hover:text-purple-600">Contact</a>
+                            </nav>
+                        </div>
+                        <div class="bg-gradient-to-r from-purple-500 to-pink-500 text-white p-8 rounded-lg mb-6 text-center">
+                            <h2 class="text-3xl font-bold mb-4">Welcome to My Website</h2>
+                            <p class="mb-6">Generated by AI based on your description</p>
+                            <button class="bg-white text-purple-600 hover:bg-gray-100 px-6 py-2 rounded">Get Started</button>
+                        </div>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+                            <div>
+                                <h3 class="text-xl font-bold mb-3">About This Site</h3>
+                                <p class="text-gray-600">This website was automatically generated based on your description: "${description.substring(0, 100)}..."</p>
+                            </div>
+                            <div>
+                                <h3 class="text-xl font-bold mb-3">Key Features</h3>
+                                <ul class="list-disc list-inside text-gray-600">
+                                    <li>Fully responsive design</li>
+                                    <li>Modern UI components</li>
+                                    <li>Easy to customize</li>
+                                    <li>SEO optimized</li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="bg-gray-100 p-6 rounded-lg text-center">
+                            <h3 class="text-xl font-bold mb-3">Ready to Publish?</h3>
+                            <p class="mb-4">Download your complete website package or connect to a hosting service.</p>
+                            <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded mr-3">Download</button>
+                            <button class="bg-white border border-purple-600 text-purple-600 hover:bg-gray-50 px-6 py-2 rounded">Publish Online</button>
+                        </div>
+                    </div>
+                `;
+            }
+            // Scroll to preview
+            document.querySelector('.preview-window').scrollIntoView({ behavior: 'smooth' });
+        }
+    </script>
 <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=sap-ai/duoling-horror" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

@@ -2,4 +2,5 @@ Build a 3d first person dulingo horror game using https://sketchfab.com/3d-model
 Make the assets better and improve the game.
 Build a claud clone
 Build deepsite.
-Add ai website genoration.

 Make the assets better and improve the game.
 Build a claud clone
 Build deepsite.
+Add ai website genoration.
+Build an ai website generator