Add 2 files

index.html

@@ -74,6 +74,187 @@
             transform: translateY(-5px);
             box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
         }
+        
+        /* Chat interface styles */
+        .chat-container {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 350px;
+            max-height: 500px;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+            transform: translateY(20px);
+            opacity: 0;
+            transition: all 0.3s ease;
+            z-index: 1000;
+        }
+        
+        .chat-container.open {
+            transform: translateY(0);
+            opacity: 1;
+        }
+        
+        .chat-header {
+            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+            color: white;
+            padding: 12px 16px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .chat-messages {
+            height: 300px;
+            overflow-y: auto;
+            padding: 16px;
+            background: #f9fafb;
+        }
+        
+        .message {
+            margin-bottom: 12px;
+            max-width: 80%;
+            padding: 8px 12px;
+            border-radius: 12px;
+            font-size: 14px;
+        }
+        
+        .user-message {
+            background: #e0e7ff;
+            margin-left: auto;
+            border-bottom-right-radius: 4px;
+        }
+        
+        .ai-message {
+            background: white;
+            border: 1px solid #e5e7eb;
+            margin-right: auto;
+            border-bottom-left-radius: 4px;
+        }
+        
+        .chat-input {
+            display: flex;
+            padding: 12px;
+            border-top: 1px solid #e5e7eb;
+            background: white;
+        }
+        
+        .chat-input input {
+            flex: 1;
+            padding: 8px 12px;
+            border: 1px solid #e5e7eb;
+            border-radius: 8px;
+            outline: none;
+        }
+        
+        .chat-input button {
+            margin-left: 8px;
+            background: #6366f1;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            padding: 8px 12px;
+            cursor: pointer;
+        }
+        
+        .chat-toggle {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 60px;
+            height: 60px;
+            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            cursor: pointer;
+            z-index: 1000;
+        }
+        
+        /* Live preview editor */
+        .editor-panel {
+            position: fixed;
+            top: 0;
+            right: 0;
+            width: 400px;
+            height: 100vh;
+            background: white;
+            box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
+            transform: translateX(100%);
+            transition: transform 0.3s ease;
+            z-index: 999;
+            overflow-y: auto;
+        }
+        
+        .editor-panel.open {
+            transform: translateX(0);
+        }
+        
+        .editor-header {
+            padding: 16px;
+            border-bottom: 1px solid #e5e7eb;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .editor-content {
+            padding: 16px;
+        }
+        
+        .form-group {
+            margin-bottom: 16px;
+        }
+        
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 500;
+        }
+        
+        .form-group input, .form-group textarea, .form-group select {
+            width: 100%;
+            padding: 8px 12px;
+            border: 1px solid #e5e7eb;
+            border-radius: 6px;
+        }
+        
+        .color-picker {
+            display: flex;
+            gap: 8px;
+        }
+        
+        .color-option {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            cursor: pointer;
+            border: 2px solid transparent;
+        }
+        
+        .color-option.selected {
+            border-color: #6366f1;
+        }
+        
+        .toggle-editor {
+            position: fixed;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+            background: #6366f1;
+            color: white;
+            padding: 12px 8px;
+            border-top-left-radius: 8px;
+            border-bottom-left-radius: 8px;
+            cursor: pointer;
+            z-index: 998;
+            box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+        }
     </style>
 </head>
 <body class="bg-light text-dark">
@@ -107,8 +288,8 @@
                 <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Build Stunning Landing Pages <span class="text-primary">Powered by AI</span></h1>
                 <p class="text-lg text-gray-600 mb-8">Our AI analyzes your business and generates high-converting landing pages in minutes. No design skills required.</p>
                 <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-                    <button class="gradient-bg text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition flex items-center justify-center">
-                        <i class="fas fa-bolt mr-2"></i> Generate Your Page Now
+                    <button id="startBuildingBtn" class="gradient-bg text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition flex items-center justify-center">
+                        <i class="fas fa-bolt mr-2"></i> Start Building Now
                     </button>
                     <button class="border border-primary text-primary px-6 py-3 rounded-lg font-medium hover:bg-primary hover:text-white transition flex items-center justify-center">
                         <i class="fas fa-play-circle mr-2"></i> Watch Demo
@@ -488,8 +669,178 @@
         </div>
     </footer>
 
+    <!-- AI Chat Assistant -->
+    <div class="chat-toggle" id="chatToggle">
+        <i class="fas fa-comment-dots"></i>
+    </div>
+    
+    <div class="chat-container" id="chatContainer">
+        <div class="chat-header">
+            <div class="flex items-center">
+                <i class="fas fa-robot mr-2"></i>
+                <span>LandingAI Assistant</span>
+            </div>
+            <button id="closeChat"><i class="fas fa-times"></i></button>
+        </div>
+        <div class="chat-messages" id="chatMessages">
+            <div class="message ai-message">
+                Hi there! I'm your LandingAI assistant. How can I help you build your perfect landing page today?
+            </div>
+        </div>
+        <div class="chat-input">
+            <input type="text" id="chatInput" placeholder="Ask me anything about landing pages...">
+            <button id="sendMessage"><i class="fas fa-paper-plane"></i></button>
+        </div>
+    </div>
+    
+    <!-- Live Editor Panel -->
+    <div class="editor-panel" id="editorPanel">
+        <div class="editor-header">
+            <h3>Page Editor</h3>
+            <button id="closeEditor"><i class="fas fa-times"></i></button>
+        </div>
+        <div class="editor-content">
+            <div class="form-group">
+                <label for="pageTitle">Page Title</label>
+                <input type="text" id="pageTitle" value="Welcome to My Business">
+            </div>
+            <div class="form-group">
+                <label for="pageSubtitle">Subtitle</label>
+                <input type="text" id="pageSubtitle" value="The best solution for your needs">
+            </div>
+            <div class="form-group">
+                <label>Primary Color</label>
+                <div class="color-picker">
+                    <div class="color-option selected" style="background-color: #6366f1;" data-color="primary"></div>
+                    <div class="color-option" style="background-color: #3b82f6;" data-color="blue"></div>
+                    <div class="color-option" style="background-color: #10b981;" data-color="green"></div>
+                    <div class="color-option" style="background-color: #f59e0b;" data-color="orange"></div>
+                    <div class="color-option" style="background-color: #ef4444;" data-color="red"></div>
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="ctaText">Button Text</label>
+                <input type="text" id="ctaText" value="Get Started Now">
+            </div>
+            <div class="form-group">
+                <label for="pageContent">Content</label>
+                <textarea id="pageContent" rows="4">Our AI-generated landing page will help you convert more visitors into customers with optimized design and compelling copy.</textarea>
+            </div>
+            <button class="w-full gradient-bg text-white py-3 rounded-lg font-medium mt-4 hover:opacity-90 transition">
+                Save Changes
+            </button>
+        </div>
+    </div>
+    
+    <div class="toggle-editor" id="toggleEditor">
+        <i class="fas fa-pencil-alt"></i>
+    </div>
+
     <script>
-        // Simple demo of the AI processing
+        // Chat interface functionality
+        const chatToggle = document.getElementById('chatToggle');
+        const chatContainer = document.getElementById('chatContainer');
+        const closeChat = document.getElementById('closeChat');
+        const chatMessages = document.getElementById('chatMessages');
+        const chatInput = document.getElementById('chatInput');
+        const sendMessage = document.getElementById('sendMessage');
+        
+        // Editor panel functionality
+        const editorPanel = document.getElementById('editorPanel');
+        const toggleEditor = document.getElementById('toggleEditor');
+        const closeEditor = document.getElementById('closeEditor');
+        
+        // Toggle chat interface
+        chatToggle.addEventListener('click', () => {
+            chatContainer.classList.toggle('open');
+        });
+        
+        closeChat.addEventListener('click', () => {
+            chatContainer.classList.remove('open');
+        });
+        
+        // Toggle editor panel
+        toggleEditor.addEventListener('click', () => {
+            editorPanel.classList.toggle('open');
+        });
+        
+        closeEditor.addEventListener('click', () => {
+            editorPanel.classList.remove('open');
+        });
+        
+        // Send message in chat
+        sendMessage.addEventListener('click', sendChatMessage);
+        chatInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                sendChatMessage();
+            }
+        });
+        
+        function sendChatMessage() {
+            const message = chatInput.value.trim();
+            if (message) {
+                // Add user message
+                const userMessage = document.createElement('div');
+                userMessage.className = 'message user-message';
+                userMessage.textContent = message;
+                chatMessages.appendChild(userMessage);
+                
+                // Clear input
+                chatInput.value = '';
+                
+                // Scroll to bottom
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+                
+                // Simulate AI response after delay
+                setTimeout(() => {
+                    const responses = [
+                        "I can help you with that! Based on your business description, I recommend focusing on clear value propositions and strong call-to-actions.",
+                        "Great question! Our AI analyzes top-performing pages in your industry to create designs that convert.",
+                        "For your type of business, I suggest using a modern design with vibrant colors to attract attention.",
+                        "You can customize any aspect of your page in the editor panel. Would you like me to open it for you?",
+                        "Our data shows that pages with video backgrounds convert 30% better. Consider adding one!",
+                        "I notice you haven't selected a template yet. Would you like me to recommend one based on your business type?"
+                    ];
+                    
+                    const randomResponse = responses[Math.floor(Math.random() * responses.length)];
+                    
+                    const aiMessage = document.createElement('div');
+                    aiMessage.className = 'message ai-message';
+                    aiMessage.textContent = randomResponse;
+                    chatMessages.appendChild(aiMessage);
+                    
+                    // Scroll to bottom
+                    chatMessages.scrollTop = chatMessages.scrollHeight;
+                }, 1000);
+            }
+        }
+        
+        // Style selection
+        const styleOptions = document.querySelectorAll('.style-option');
+        styleOptions.forEach(option => {
+            option.addEventListener('click', function() {
+                // Remove active class from all options
+                styleOptions.forEach(opt => {
+                    opt.classList.remove('border-white', 'border-opacity-50');
+                    opt.classList.add('border-transparent');
+                });
+                
+                // Add active class to clicked option
+                this.classList.remove('border-transparent');
+                this.classList.add('border-white', 'border-opacity-50');
+            });
+        });
+        
+        // Color selection in editor
+        const colorOptions = document.querySelectorAll('.color-option');
+        colorOptions.forEach(option => {
+            option.addEventListener('click', function() {
+                colorOptions.forEach(opt => opt.classList.remove('selected'));
+                this.classList.add('selected');
+            });
+        });
+        
+        // Page generation
         document.getElementById('generateBtn').addEventListener('click', function() {
             const description = document.getElementById('businessDescription').value;
             
@@ -506,24 +857,26 @@
             
             // Simulate AI processing delay
             setTimeout(function() {
-                alert('Your AI-generated landing page is ready! This is a demo - in a real implementation, you would be redirected to your new page editor.');
+                // Show editor panel
+                editorPanel.classList.add('open');
+                
+                // Show chat with initial message
+                chatContainer.classList.add('open');
+                
+                const aiMessage = document.createElement('div');
+                aiMessage.className = 'message ai-message';
+                aiMessage.textContent = "Your landing page is ready! I've opened the editor so you can customize it. Let me know if you need any help!";
+                chatMessages.appendChild(aiMessage);
+                
+                // Scroll to bottom
+                chatMessages.scrollTop = chatMessages.scrollHeight;
             }, 3000);
         });
         
-        // Style selection
-        const styleOptions = document.querySelectorAll('.style-option');
-        styleOptions.forEach(option => {
-            option.addEventListener('click', function() {
-                // Remove active class from all options
-                styleOptions.forEach(opt => {
-                    opt.classList.remove('border-white', 'border-opacity-50');
-                    opt.classList.add('border-transparent');
-                });
-                
-                // Add active class to clicked option
-                this.classList.remove('border-transparent');
-                this.classList.add('border-white', 'border-opacity-50');
-            });
+        // Start building button
+        document.getElementById('startBuildingBtn').addEventListener('click', function() {
+            // Scroll to generator section
+            document.querySelector('.gradient-bg').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=S-Dreamer/landingai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt

@@ -1 +1,2 @@
-Ai powered landing page building 
+Ai powered landing page building 
+Add real-time ai support to create real landing pages