the Meme Generator is not working and the Generated Captions is not working and T-Shirt Preview is not working and the Meme Generator is adding the image to the t-shirt a to make it look real

meme.html

@@ -35,9 +35,9 @@
                             <label class="block text-gray-400 mb-2">Style Hint (Optional)</label>
                             <input type="text" placeholder="e.g., crypto meme, sarcastic" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-red-500">
                         </div>
-                        <button id="generateBtn" class="w-full bg-red-600 hover:bg-red-700 text-white py-3 rounded-lg font-semibold transition disabled:bg-gray-600 disabled:cursor-not-allowed" disabled>
-                            Generate Captions
-                        </button>
+        <button id="generateBtn" class="w-full bg-red-600 hover:bg-red-700 text-white py-3 rounded-lg font-semibold transition disabled:bg-gray-600 disabled:cursor-not-allowed">
+            Generate Captions
+        </button>
 </div>
                     
                     <div>
@@ -58,18 +58,37 @@
                 
                 <div class="mt-12">
                     <h2 class="text-xl font-bold mb-4">T-Shirt Preview</h2>
-                    <div id="mockupContainer" class="bg-gray-800 rounded-xl p-8 flex items-center justify-center min-h-[400px] border border-gray-700">
+                        <div id="mockupContainer" class="bg-gray-800 rounded-xl p-8 flex items-center justify-center min-h-[500px] border border-gray-700">
                         <div id="mockupPlaceholder" class="text-center">
                             <i data-feather="t-shirt" class="w-24 h-24 mx-auto text-gray-600 mb-4"></i>
                             <p class="text-gray-500">Your t-shirt mockup will appear here</p>
                         </div>
                         <div id="mockupPreview" class="hidden relative">
-                            <div class="bg-white rounded-lg p-4">
-                                <img id="mockupImg" class="w-48 h-48 object-contain" alt="Meme">
-                                <p id="mockupCaption" class="text-black text-center font-bold mt-2"></p>
-                            </div>
-                            <div class="absolute -bottom-4 -left-4 -right-4 -top-4 bg-gray-700 rounded-lg transform rotate-1"></div>
-                            <div class="absolute -bottom-2 -left-2 -right-2 -top-2 bg-gray-800 rounded-lg transform -rotate-1"></div>
+                            <!-- T-Shirt SVG Mockup -->
+                            <svg width="300" height="350" viewBox="0 0 300 350" class="relative">
+                                <!-- T-Shirt Base -->
+                                <path d="M75 80 L75 40 L100 20 L120 30 L150 25 L180 30 L200 20 L225 40 L225 80 L200 100 L200 320 L100 320 L100 100 Z" 
+                                      fill="#1a1a1a" stroke="#333" stroke-width="2"/>
+                                <!-- Neckline -->
+                                <ellipse cx="150" cy="40" rx="25" ry="20" fill="none" stroke="#333" stroke-width="2"/>
+                                <!-- Sleeves -->
+                                <path d="M75 80 L50 120 L40 180 L70 180 L100 100" fill="#1a1a1a" stroke="#333" stroke-width="2"/>
+                                <path d="M225 80 L250 120 L260 180 L230 180 L200 100" fill="#1a1a1a" stroke="#333" stroke-width="2"/>
+                                
+                                <!-- Design Area -->
+                                <defs>
+                                    <clipPath id="designArea">
+                                        <rect x="90" y="100" width="120" height="120" rx="5"/>
+                                    </clipPath>
+                                </defs>
+                                <rect x="90" y="100" width="120" height="120" rx="5" fill="white" opacity="0.1"/>
+                                <g clip-path="url(#designArea)">
+                                    <image id="tshirtImage" x="90" y="100" width="120" height="120" preserveAspectRatio="xMidYMid meet"/>
+                                </g>
+                                
+                                <!-- Caption Text -->
+                                <text id="tshirtCaption" x="150" y="240" text-anchor="middle" fill="white" font-size="14" font-weight="bold" font-family="Arial, sans-serif"></text>
+                            </svg>
                         </div>
                     </div>
 </div>
@@ -130,7 +149,6 @@
                 handleImageUpload(file);
             }
         });
-        
         function handleImageUpload(file) {
             const reader = new FileReader();
             reader.onload = (e) => {
@@ -142,24 +160,24 @@
             };
             reader.readAsDataURL(file);
         }
-        
-        // Generate captions
+// Generate captions
         generateBtn.addEventListener('click', async () => {
             if (!uploadedImage) return;
             
             loadingCaptions.classList.remove('hidden');
             captionsContainer.classList.add('hidden');
             noCaptions.classList.add('hidden');
+            generateBtn.disabled = true;
             
             // Simulate API call with mock captions
             setTimeout(() => {
                 const captions = generateMockCaptions();
                 displayCaptions(captions);
                 loadingCaptions.classList.add('hidden');
+                generateBtn.disabled = false;
             }, 1500);
         });
-        
-        function generateMockCaptions() {
+function generateMockCaptions() {
             const captionTemplates = [
                 "When you finally understand that meme",
                 "Send this to your group chat immediately",
@@ -196,7 +214,6 @@
                 `;
                 captionsContainer.appendChild(captionDiv);
             });
-            
             // Add event listeners to the new buttons
             document.querySelectorAll('.preview-btn').forEach(btn => {
                 btn.addEventListener('click', (e) => {
@@ -210,31 +227,96 @@
                     const caption = e.target.dataset.caption;
                     currentCaption = caption;
                     showMockup(caption);
-                    // Here you could add logic to add to cart
-                    alert('Design added to T-Shirt! Check out the mockup below.');
+                    
+                    // Create success notification
+                    const notification = document.createElement('div');
+                    notification.className = 'fixed top-20 right-4 bg-green-600 text-white px-6 py-3 rounded-lg shadow-lg z-50 transform translate-x-full transition-transform duration-300';
+                    notification.innerHTML = `
+                        <div class="flex items-center">
+                            <i data-feather="check-circle" class="w-5 h-5 mr-2"></i>
+                            <span>Design added to T-Shirt! Scroll down to preview.</span>
+                        </div>
+                    `;
+                    document.body.appendChild(notification);
+                    feather.replace();
+                    
+                    // Animate in
+                    setTimeout(() => {
+                        notification.style.transform = 'translateX(0)';
+                    }, 100);
+                    
+                    // Remove after 3 seconds
+                    setTimeout(() => {
+                        notification.style.transform = 'translateX(100%)';
+                        setTimeout(() => {
+                            document.body.removeChild(notification);
+                        }, 300);
+                    }, 3000);
                 });
             });
-            
-            captionsContainer.classList.remove('hidden');
+captionsContainer.classList.remove('hidden');
         }
-        
         function showMockup(caption) {
             if (!uploadedImage) return;
             
-            mockupImg.src = uploadedImage;
-            mockupCaption.textContent = caption;
+            const tshirtImage = document.getElementById('tshirtImage');
+            const tshirtCaption = document.getElementById('tshirtCaption');
+            
+            // Set the image on the t-shirt
+            tshirtImage.setAttributeNS('http://www.w3.org/1999/xlink', 'href', uploadedImage);
+            
+            // Set the caption with word wrap
+            const words = caption.split(' ');
+            const maxCharsPerLine = 15;
+            let lines = [];
+            let currentLine = '';
+            
+            words.forEach(word => {
+                if ((currentLine + word).length <= maxCharsPerLine) {
+                    currentLine += (currentLine ? ' ' : '') + word;
+                } else {
+                    if (currentLine) lines.push(currentLine);
+                    currentLine = word;
+                }
+            });
+            if (currentLine) lines.push(currentLine);
+            
+            // Clear existing text elements
+            const mockupPreview = document.getElementById('mockupPreview');
+            const existingTexts = mockupPreview.querySelectorAll('text:not(#tshirtCaption)');
+            existingTexts.forEach(text => text.remove());
+            
+            // Add new text elements for each line
+            const svg = mockupPreview.querySelector('svg');
+            const startY = lines.length === 1 ? 240 : (lines.length === 2 ? 235 : 230);
+            
+            lines.forEach((line, index) => {
+                const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+                text.setAttribute('x', '150');
+                text.setAttribute('y', startY + (index * 15));
+                text.setAttribute('text-anchor', 'middle');
+                text.setAttribute('fill', 'white');
+                text.setAttribute('font-size', '12');
+                text.setAttribute('font-weight', 'bold');
+                text.setAttribute('font-family', 'Arial, sans-serif');
+                text.textContent = line;
+                svg.appendChild(text);
+            });
+            
+            // Hide the original text element
+            tshirtCaption.style.display = 'none';
+            
             mockupPlaceholder.classList.add('hidden');
             mockupPreview.classList.remove('hidden');
         }
-        
         function resetCaptions() {
             captionsContainer.classList.add('hidden');
             noCaptions.classList.remove('hidden');
             mockupPlaceholder.classList.remove('hidden');
             mockupPreview.classList.add('hidden');
+            generateBtn.disabled = !uploadedImage;
         }
-        
-        // Style hint input
+// Style hint input
         const styleHint = document.querySelector('input[placeholder="e.g., crypto meme, sarcastic"]');
         if (styleHint) {
             styleHint.addEventListener('input', (e) => {