enhance all functions - Follow Up Deployment

index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Elegant Wedding Invitations | AI-Powered Card Creator</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script>
         tailwind.config = {
@@ -226,6 +227,51 @@
                             </div>
                             <button class="w-full mt-4 bg-sage hover:bg-navy text-white py-2 px-4 rounded-lg font-medium transition duration-300 select-template" data-template="3">Select This Design</button>
                         </div>
+
+                        <!-- Template 4 -->
+                        <div class="carousel-item flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 snap-start">
+                            <div class="card-preview w-full h-96 rounded-lg p-8 flex flex-col justify-center items-center text-center text-white relative overflow-hidden">
+                                <div class="absolute inset-0 bg-navy bg-opacity-70"></div>
+                                <div class="relative z-10">
+                                    <h3 id="template4Names" class="font-playfair text-2xl mb-2">Sarah & Michael</h3>
+                                    <p class="text-sm mb-4">Request the honour of your presence</p>
+                                    <div class="w-16 h-px bg-white mx-auto my-4"></div>
+                                    <p id="template4Date" class="text-sm mb-1">Saturday, June 10th, 2023</p>
+                                    <p id="template4Venue" class="text-sm">The Grand Ballroom, New York</p>
+                                </div>
+                            </div>
+                            <button class="w-full mt-4 bg-navy hover:bg-mauve text-white py-2 px-4 rounded-lg font-medium transition duration-300 select-template" data-template="4">Select This Design</button>
+                        </div>
+
+                        <!-- Template 5 -->
+                        <div class="carousel-item flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 snap-start">
+                            <div class="card-preview w-full h-96 rounded-lg p-8 flex flex-col justify-center items-center text-center text-white relative overflow-hidden">
+                                <div class="absolute inset-0 bg-champagne bg-opacity-80"></div>
+                                <div class="relative z-10 text-navy">
+                                    <h3 id="template5Names" class="font-playfair text-2xl mb-2">Sarah & Michael</h3>
+                                    <p class="text-sm mb-4">Would love you to join their celebration</p>
+                                    <div class="w-16 h-px bg-navy mx-auto my-4"></div>
+                                    <p id="template5Date" class="text-sm mb-1">Saturday, June 10th, 2023</p>
+                                    <p id="template5Venue" class="text-sm">The Grand Ballroom, New York</p>
+                                </div>
+                            </div>
+                            <button class="w-full mt-4 bg-champagne hover:bg-blush text-navy py-2 px-4 rounded-lg font-medium transition duration-300 select-template" data-template="5">Select This Design</button>
+                        </div>
+
+                        <!-- Template 6 -->
+                        <div class="carousel-item flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 snap-start">
+                            <div class="card-preview w-full h-96 rounded-lg p-8 flex flex-col justify-center items-center text-center text-white relative overflow-hidden">
+                                <div class="absolute inset-0 bg-blush bg-opacity-50"></div>
+                                <div class="relative z-10">
+                                    <h3 id="template6Names" class="font-playfair text-2xl mb-2">Sarah & Michael</h3>
+                                    <p class="text-sm mb-4">Joyfully invite you to their wedding</p>
+                                    <div class="w-16 h-px bg-white mx-auto my-4"></div>
+                                    <p id="template6Date" class="text-sm mb-1">Saturday, June 10th, 2023</p>
+                                    <p id="template6Venue" class="text-sm">The Grand Ballroom, New York</p>
+                                </div>
+                            </div>
+                            <button class="w-full mt-4 bg-blush hover:bg-navy text-white py-2 px-4 rounded-lg font-medium transition duration-300 select-template" data-template="6">Select This Design</button>
+                        </div>
                     </div>
                     <button class="carousel-prev absolute left-0 top-1/2 -translate-y-1/2 -ml-4 bg-white rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-gray-100 transition"><i class="fas fa-chevron-left text-mauve"></i></button>
                     <button class="carousel-next absolute right-0 top-1/2 -translate-y-1/2 -mr-4 bg-white rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-gray-100 transition"><i class="fas fa-chevron-right text-mauve"></i></button>
@@ -506,27 +552,49 @@
             form.addEventListener('submit', function(e) {
                 e.preventDefault();
                 
+                // Validate form first
+                if (!updatePreview()) return;
+                
                 // Show loading state
                 submitText.textContent = 'Designing your invitation...';
                 loadingSpinner.classList.remove('hidden');
+                form.querySelectorAll('input, select, textarea').forEach(el => {
+                    el.disabled = true;
+                });
                 
-                // Update preview with form data
-                updatePreview();
-                
-                // Simulate AI working
+                // Simulate AI working with more realistic delay
                 setTimeout(() => {
-                    aiMessage.textContent = "I've created 3 beautiful designs for you based on your preferences. Which one do you like best?";
+                    // Generate 3 random template suggestions (1-6)
+                    const suggestedTemplates = [];
+                    while(suggestedTemplates.length < 3) {
+                        const randomTemplate = Math.floor(Math.random() * 6) + 1;
+                        if (!suggestedTemplates.includes(randomTemplate)) {
+                            suggestedTemplates.push(randomTemplate);
+                        }
+                    }
+                    
+                    // Show only suggested templates
+                    document.querySelectorAll('.carousel-item').forEach(item => {
+                        const templateNum = item.querySelector('.select-template').getAttribute('data-template');
+                        item.style.display = suggestedTemplates.includes(parseInt(templateNum)) ? 'block' : 'none';
+                    });
+                    
+                    aiMessage.textContent = "I've created these beautiful designs based on your preferences. Which one speaks to you?";
                     
                     // Show success state
                     submitText.textContent = 'View Designs';
                     loadingSpinner.classList.add('hidden');
+                    form.querySelectorAll('input, select, textarea').forEach(el => {
+                        el.disabled = false;
+                    });
                     
-                    // Show templates carousel
+                    // Show templates carousel with smooth scroll
                     document.getElementById('templatesCarousel').classList.remove('hidden');
+                    document.getElementById('templatesCarousel').scrollIntoView({ behavior: 'smooth' });
                     
                     // Update template previews with form data
                     updateTemplatePreviews();
-                }, 3000);
+                }, 2000 + Math.random() * 2000); // Random delay between 2-4 seconds
             });
             
             // Update preview as user types
@@ -536,12 +604,27 @@
             });
             
             function updatePreview() {
-                // Get form values
-                const names = document.getElementById('coupleNames').value || 'Sarah & Michael';
+                // Get form values with validation
+                const names = document.getElementById('coupleNames').value.trim() || 'Sarah & Michael';
                 const dateInput = document.getElementById('weddingDate').value;
-                const venue = document.getElementById('venue').value || 'The Grand Ballroom, New York';
+                const venue = document.getElementById('venue').value.trim() || 'The Grand Ballroom, New York';
                 const time = document.getElementById('time').value || '16:30';
-                const message = document.getElementById('message').value;
+                const message = document.getElementById('message').value.trim();
+                const theme = document.getElementById('theme').value;
+                const color = document.getElementById('colors').value;
+
+                // Validate date is in future
+                if (dateInput) {
+                    const today = new Date();
+                    const selectedDate = new Date(dateInput);
+                    if (selectedDate < today) {
+                        document.getElementById('weddingDate').classList.add('border-red-500');
+                        aiMessage.textContent = "Please select a future date for your wedding.";
+                        return false;
+                    } else {
+                        document.getElementById('weddingDate').classList.remove('border-red-500');
+                    }
+                }
                 
                 // Format date
                 let formattedDate = 'Saturday, June 10th, 2023';
@@ -622,9 +705,26 @@
                 });
             });
             
+            // Download functionality
+            function downloadInvitation() {
+                const cardPreview = document.getElementById('cardPreview');
+                html2canvas(cardPreview).then(canvas => {
+                    const link = document.createElement('a');
+                    link.download = 'wedding-invitation.png';
+                    link.href = canvas.toDataURL('image/png');
+                    link.click();
+                });
+            }
+
             // Initialize with default values
             updatePreview();
             
+            // Check for previously selected template
+            const savedTemplate = localStorage.getItem('selectedTemplate');
+            if (savedTemplate) {
+                document.getElementById('cardPreview').classList.add(`template-${savedTemplate}`);
+            }
+            
             // Carousel navigation
             document.querySelector('.carousel-prev').addEventListener('click', () => {
                 document.querySelector('.carousel-inner').scrollBy({ left: -300, behavior: 'smooth' });
@@ -634,12 +734,30 @@
                 document.querySelector('.carousel-inner').scrollBy({ left: 300, behavior: 'smooth' });
             });
             
-            // Template selection
+            // Template selection with preview update
             document.querySelectorAll('.select-template').forEach(button => {
                 button.addEventListener('click', function() {
                     const templateNum = this.getAttribute('data-template');
-                    // In a real app, you would apply the selected template
-                    alert(`Template ${templateNum} selected! This would apply the design to your invitation.`);
+                    const cardPreview = document.getElementById('cardPreview');
+                    
+                    // Remove all template classes
+                    cardPreview.classList.remove(
+                        'template-1', 'template-2', 'template-3',
+                        'template-4', 'template-5', 'template-6'
+                    );
+                    
+                    // Add selected template class
+                    cardPreview.classList.add(`template-${templateNum}`);
+                    
+                    // Update AI message
+                    aiMessage.textContent = `Great choice! You've selected Design ${templateNum}. Ready to download or customize further?`;
+                    
+                    // Show download button
+                    submitText.textContent = 'Download Invitation';
+                    document.getElementById('templatesCarousel').classList.add('hidden');
+                    
+                    // Store selected template
+                    localStorage.setItem('selectedTemplate', templateNum);
                 });
             });
             
@@ -658,7 +776,7 @@
                 }
                 
                 // Update all template previews
-                for (let i = 1; i <= 3; i++) {
+                for (let i = 1; i <= 6; i++) {
                     document.getElementById(`template${i}Names`).textContent = names;
                     document.getElementById(`template${i}Date`).textContent = formattedDate;
                     document.getElementById(`template${i}Venue`).textContent = venue;