Spaces:

docto41
/

ultimate-ai-generator

Running

App Files Files Community

docto41 commited on May 1, 2025

Commit

046665b

verified ·

1 Parent(s): 4372aae

Add 2 files

Browse files

Files changed (2) hide show

index.html +207 -9
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -53,6 +53,9 @@
             background-color: #4f46e5;
             color: white;
         }
     </style>
 </head>
 <body class="bg-gray-100 min-h-screen">
@@ -446,25 +449,220 @@
             }
             function generateSampleHTML() {
-                // This would be more sophisticated in a real app
                 let html = `<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>${getTitleBasedOnType()}</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>
-        ${getStyleBasedOnPreference()}
     </style>
 </head>
-<body class="${getBodyClasses()}">
-    ${generateHeroSection()}
-    ${generateFeaturesSection()}
-    ${generateCTASection()}
-    ${currentState.options.darkMode ? generateDarkModeToggle() : ''}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"><\/script>
-    ${currentState.options.darkMode ? generateDarkModeScript() : ''}
 <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/ultimate-ai-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

             background-color: #4f46e5;
             color: white;
         }
+        #preview-frame {
+            transition: width 0.3s ease;
+        }
     </style>
 </head>
 <body class="bg-gray-100 min-h-screen">
             }
             function generateSampleHTML() {
+                // Get user inputs
+                const steps = currentState.steps.filter(step => step.trim() !== '');
+                const hasHero = steps.some(step => step.toLowerCase().includes('hero'));
+                const hasFeatures = steps.some(step => step.toLowerCase().includes('feature'));
+                // Generate title based on website type
+                const titles = {
+                    business: "Professional Business Website",
+                    ecommerce: "Online Store",
+                    portfolio: "Creative Portfolio",
+                    blog: "Personal Blog",
+                    landing: "High-Converting Landing Page",
+                    webapp: "Web Application",
+                    custom: "Custom Website"
+                };
+                const title = titles[currentState.websiteType] || "My Website";
+                // Generate style based on preference
+                const styles = {
+                    modern: `
+                        .hero {
+                            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                            color: white;
+                        }
+                        .feature-card {
+                            transition: transform 0.3s ease;
+                        }
+                        .feature-card:hover {
+                            transform: translateY(-5px);
+                        }
+                    `,
+                    minimal: `
+                        body {
+                            font-family: 'Helvetica Neue', sans-serif;
+                        }
+                        .hero {
+                            background: white;
+                            color: #333;
+                        }
+                        .feature-card {
+                            border: 1px solid #e2e8f0;
+                        }
+                    `,
+                    vibrant: `
+                        .hero {
+                            background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
+                            color: white;
+                        }
+                        .feature-card {
+                            background: white;
+                            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+                        }
+                    `,
+                    elegant: `
+                        body {
+                            font-family: 'Georgia', serif;
+                        }
+                        .hero {
+                            background: linear-gradient(to right, #434343 0%, black 100%);
+                            color: white;
+                        }
+                        .feature-card {
+                            background: #f8f9fa;
+                            border-left: 4px solid #6c757d;
+                        }
+                    `,
+                    dark: `
+                        body {
+                            background-color: #1a202c;
+                            color: #e2e8f0;
+                        }
+                        .hero {
+                            background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
+                            color: white;
+                        }
+                        .feature-card {
+                            background: #2d3748;
+                            color: #e2e8f0;
+                        }
+                    `,
+                    custom: `
+                        .hero {
+                            background: linear-gradient(135deg, #6e8efb, #a777e3);
+                            color: white;
+                        }
+                        .feature-card {
+                            background: white;
+                            border-radius: 0.5rem;
+                            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+                        }
+                    `
+                };
+                const style = styles[currentState.style] || styles.modern;
+                // Generate animations if enabled
+                const animations = currentState.options.animations ? `
+                    @keyframes fadeIn {
+                        from { opacity: 0; }
+                        to { opacity: 1; }
+                    }
+                    .animate-fade-in {
+                        animation: fadeIn 1s ease-in;
+                    }
+                ` : '';
+                // Generate dark mode if enabled
+                const darkModeToggle = currentState.options.darkMode ? `
+                    <button id="dark-mode-toggle" class="fixed bottom-4 right-4 bg-gray-800 text-white p-3 rounded-full shadow-lg">
+                        <i class="fas fa-moon"></i>
+                    </button>
+                ` : '';
+                const darkModeScript = currentState.options.darkMode ? `
+                    <script>
+                        const darkModeToggle = document.getElementById('dark-mode-toggle');
+                        darkModeToggle.addEventListener('click', () => {
+                            document.body.classList.toggle('dark-mode');
+                            const icon = darkModeToggle.querySelector('i');
+                            if (document.body.classList.contains('dark-mode')) {
+                                icon.classList.remove('fa-moon');
+                                icon.classList.add('fa-sun');
+                            } else {
+                                icon.classList.remove('fa-sun');
+                                icon.classList.add('fa-moon');
+                            }
+                        });
+                    <\/script>
+                ` : '';
+                // Generate HTML structure
                 let html = `<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${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>
+        ${style}
+        ${animations}
+        .dark-mode {
+            background-color: #1a202c;
+            color: #e2e8f0;
+        }
+        .dark-mode .hero {
+            background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
+        }
+        .dark-mode .feature-card {
+            background: #2d3748;
+            color: #e2e8f0;
+        }
     </style>
 </head>
+<body class="${currentState.style === 'dark' ? 'bg-gray-900 text-white' : 'bg-white text-gray-800'}">
+    ${hasHero ? `
+    <!-- Hero Section -->
+    <section class="hero py-20 px-4 text-center ${currentState.options.animations ? 'animate-fade-in' : ''}">
+        <div class="max-w-4xl mx-auto">
+            <h1 class="text-4xl md:text-6xl font-bold mb-6">Welcome to ${title}</h1>
+            <p class="text-xl mb-8">${steps[0] || 'A beautifully designed website created with AI'}</p>
+            <button class="bg-white text-purple-600 hover:bg-gray-100 px-8 py-3 rounded-full text-lg font-semibold transition-all duration-300 transform hover:scale-105">
+                Get Started
+            </button>
+        </div>
+    </section>
+    ` : ''}
+    ${hasFeatures ? `
+    <!-- Features Section -->
+    <section class="py-16 px-4 ${currentState.options.animations ? 'animate-fade-in' : ''}">
+        <div class="max-w-6xl mx-auto">
+            <h2 class="text-3xl font-bold text-center mb-12">Key Features</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="feature-card p-8 rounded-lg">
+                    <div class="text-purple-600 text-4xl mb-4">
+                        <i class="fas fa-rocket"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">${steps[1] ? steps[1].split(' ').slice(0, 3).join(' ') : 'Fast Performance'}</h3>
+                    <p>${steps[1] || 'Our website is optimized for blazing fast loading speeds.'}</p>
+                </div>
+                <div class="feature-card p-8 rounded-lg">
+                    <div class="text-purple-600 text-4xl mb-4">
+                        <i class="fas fa-mobile-alt"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">${currentState.options.responsive ? 'Responsive Design' : 'Mobile Friendly'}</h3>
+                    <p>${steps[1] ? steps[1].split(' ').slice(0, 10).join(' ') : 'Looks great on all devices from desktop to mobile.'}</p>
+                </div>
+                <div class="feature-card p-8 rounded-lg">
+                    <div class="text-purple-600 text-4xl mb-4">
+                        <i class="fas fa-cog"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">${currentState.options.seo ? 'SEO Optimized' : 'Customizable'}</h3>
+                    <p>${steps[1] ? steps[1].split(' ').slice(0, 8).join(' ') : 'Easily customize to fit your brand and needs.'}</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    ` : ''}
+    <!-- CTA Section -->
+    <section class="py-16 px-4 bg-gray-100 ${currentState.style === 'dark' ? 'bg-gray-800' : ''} ${currentState.options.animations ? 'animate-fade-in' : ''}">
+        <div class="max-w-4xl mx-auto text-center">
+            <h2 class="text-3xl font-bold mb-6">Ready to get started?</h2>
+            <p class="text-xl mb-8">Join thousands of satisfied customers today.</p>
+            <button class="bg-purple-600 hover:bg-purple-700 text-white px-8 py-3 rounded-full text-lg font-semibold transition-all duration-300 transform hover:scale-105">
+                Contact Us
+            </button>
+        </div>
+    </section>
+    ${darkModeToggle}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"><\/script>
+    ${darkModeScript}
 <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/ultimate-ai-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

@@ -1,3 +1,4 @@
 je veux le plus immense de générator de site web pro , par    description en direct  étape par étape   je veux que le site est plus puissant  100000 fois que deep site , bolt.new.lovable ai  toutes les imemense IA regrouper en une seul
 toutes les boutons ne sont pas cliquable faire une mise a jours complet afin toutes les boutons fonctionne
-aucun bouton sont cliquable reparer toute errreur

 je veux le plus immense de générator de site web pro , par    description en direct  étape par étape   je veux que le site est plus puissant  100000 fois que deep site , bolt.new.lovable ai  toutes les imemense IA regrouper en une seul
 toutes les boutons ne sont pas cliquable faire une mise a jours complet afin toutes les boutons fonctionne
+aucun bouton sont cliquable reparer toute errreur
+ GENERATE WEBSITE ne fonctionne pas