pull all image prompts up to a single JS block accessible from the top of the page.

components/image-manager.js

@@ -0,0 +1,366 @@
+/**
+ * Image Manager Web Component
+ * Centralized management of all image prompts and configurations
+ * Provides a single source of truth for all image URLs in the application
+ */
+
+class ImageManager extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.config = null;
+        this.imageCache = new Map();
+    }
+
+    connectedCallback() {
+        this.loadConfig();
+        this.render();
+    }
+
+    loadConfig() {
+        // Try to load from JSON config element
+        const configElement = document.getElementById('imagePromptsConfig');
+        if (configElement) {
+            try {
+                this.config = JSON.parse(configElement.textContent);
+            } catch (e) {
+                console.error('Failed to parse image prompts config:', e);
+                this.config = this.getDefaultConfig();
+            }
+        } else {
+            this.config = this.getDefaultConfig();
+        }
+
+        // Store in global window object for easy access
+        window.imagePrompts = this.config;
+    }
+
+    getDefaultConfig() {
+        return {
+            hero: "https://static.photos/medical/800x600/1",
+            productImages: [
+                "https://static.photos/medical/400x300/101",
+                "https://static.photos/medical/400x300/102",
+                "https://static.photos/medical/400x300/103",
+                "https://static.photos/medical/400x300/104"
+            ],
+            about: "https://static.photos/workspace/800x600/201",
+            testimonials: [
+                "https://static.photos/people/48x48/301",
+                "https://static.photos/people/48x48/302",
+                "https://static.photos/people/48x48/303"
+            ],
+            categories: {
+                medical: "medical",
+                workspace: "workspace",
+                people: "people",
+                abstract: "abstract"
+            },
+            placeholder: "https://static.photos/abstract/100x100",
+            fallback: "https://static.photos/abstract/400x300"
+        };
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: none;
+                }
+                
+                .image-manager-panel {
+                    position: fixed;
+                    top: 100px;
+                    right: 20px;
+                    width: 300px;
+                    background: white;
+                    border-radius: 8px;
+                    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+                    padding: 20px;
+                    z-index: 9999;
+                    display: none;
+                    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+                }
+                
+                .image-manager-panel.active {
+                    display: block;
+                }
+                
+                .image-manager-header {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    margin-bottom: 15px;
+                    padding-bottom: 10px;
+                    border-bottom: 1px solid #e5e5e5;
+                }
+                
+                .image-manager-title {
+                    font-weight: bold;
+                    font-size: 16px;
+                    color: #333;
+                }
+                
+                .image-manager-close {
+                    background: none;
+                    border: none;
+                    font-size: 20px;
+                    cursor: pointer;
+                    color: #666;
+                }
+                
+                .image-manager-section {
+                    margin-bottom: 15px;
+                }
+                
+                .image-manager-section-title {
+                    font-size: 14px;
+                    font-weight: 600;
+                    color: #555;
+                    margin-bottom: 8px;
+                }
+                
+                .image-manager-list {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 5px;
+                }
+                
+                .image-manager-item {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 8px;
+                    background: #f8f9fa;
+                    border-radius: 4px;
+                    font-size: 12px;
+                }
+                
+                .image-manager-item:hover {
+                    background: #e9ecef;
+                }
+                
+                .image-manager-url {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    max-width: 180px;
+                }
+                
+                .image-manager-copy {
+                    background: #5d9245;
+                    color: white;
+                    border: none;
+                    border-radius: 3px;
+                    padding: 3px 8px;
+                    font-size: 11px;
+                    cursor: pointer;
+                }
+                
+                .image-manager-copy:hover {
+                    background: #3f7344;
+                }
+                
+                .image-manager-toggle {
+                    position: fixed;
+                    top: 150px;
+                    right: 20px;
+                    background: #5d9245;
+                    color: white;
+                    border: none;
+                    border-radius: 50%;
+                    width: 40px;
+                    height: 40px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    z-index: 9998;
+                    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+                }
+            </style>
+            
+            <button class="image-manager-toggle">
+                <i class="fas fa-images"></i>
+            </button>
+            
+            <div class="image-manager-panel">
+                <div class="image-manager-header">
+                    <div class="image-manager-title">Image Prompts Manager</div>
+                    <button class="image-manager-close">&times;</button>
+                </div>
+                
+                <div class="image-manager-section">
+                    <div class="image-manager-section-title">Hero Image</div>
+                    <div class="image-manager-list">
+                        <div class="image-manager-item">
+                            <div class="image-manager-url" title="${this.config?.hero || ''}">
+                                ${this.config?.hero ? this.config.hero.substring(0, 30) + '...' : ''}
+                            </div>
+                            <button class="image-manager-copy" data-url="${this.config?.hero || ''}">Copy</button>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="image-manager-section">
+                    <div class="image-manager-section-title">Product Images (${this.config?.productImages?.length || 0})</div>
+                    <div class="image-manager-list">
+                        ${this.config?.productImages?.map((url, index) => `
+                            <div class="image-manager-item">
+                                <div class="image-manager-url" title="${url}">
+                                    Product ${index + 1}: ${url.substring(0, 25)}...
+                                </div>
+                                <button class="image-manager-copy" data-url="${url}">Copy</button>
+                            </div>
+                        `).join('') || '<div style="padding: 8px; color: #666; font-size: 12px;">No product images configured</div>'}
+                    </div>
+                </div>
+                
+                <div class="image-manager-section">
+                    <div class="image-manager-section-title">Testimonial Images (${this.config?.testimonials?.length || 0})</div>
+                    <div class="image-manager-list">
+                        ${this.config?.testimonials?.map((url, index) => `
+                            <div class="image-manager-item">
+                                <div class="image-manager-url" title="${url}">
+                                    Testimonial ${index + 1}: ${url.substring(0, 25)}...
+                                </div>
+                                <button class="image-manager-copy" data-url="${url}">Copy</button>
+                            </div>
+                        `).join('') || '<div style="padding: 8px; color: #666; font-size: 12px;">No testimonial images configured</div>'}
+                    </div>
+                </div>
+                
+                <div class="image-manager-section">
+                    <div class="image-manager-section-title">Configuration</div>
+                    <div class="image-manager-list">
+                        <div class="image-manager-item">
+                            <div>Categories: ${this.config?.categories ? Object.keys(this.config.categories).join(', ') : ''}</div>
+                            <button class="image-manager-copy" data-url="${JSON.stringify(this.config)}">Copy Config</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        this.addEventListeners();
+    }
+
+    addEventListeners() {
+        const toggleBtn = this.shadowRoot.querySelector('.image-manager-toggle');
+        const closeBtn = this.shadowRoot.querySelector('.image-manager-close');
+        const panel = this.shadowRoot.querySelector('.image-manager-panel');
+        const copyButtons = this.shadowRoot.querySelectorAll('.image-manager-copy');
+
+        if (toggleBtn && panel) {
+            toggleBtn.addEventListener('click', () => {
+                panel.classList.toggle('active');
+            });
+        }
+
+        if (closeBtn && panel) {
+            closeBtn.addEventListener('click', () => {
+                panel.classList.remove('active');
+            });
+        }
+
+        if (copyButtons) {
+            copyButtons.forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    const url = e.currentTarget.getAttribute('data-url');
+                    this.copyToClipboard(url);
+                    
+                    // Show feedback
+                    const originalText = e.currentTarget.textContent;
+                    e.currentTarget.textContent = 'Copied!';
+                    e.currentTarget.style.background = '#28a745';
+                    
+                    setTimeout(() => {
+                        e.currentTarget.textContent = originalText;
+                        e.currentTarget.style.background = '#5d9245';
+                    }, 1500);
+                });
+            });
+        }
+    }
+
+    copyToClipboard(text) {
+        navigator.clipboard.writeText(text).then(() => {
+            console.log('Image URL copied to clipboard:', text);
+        }).catch(err => {
+            console.error('Failed to copy:', err);
+            // Fallback method
+            const textArea = document.createElement('textarea');
+            textArea.value = text;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+        });
+    }
+
+    // Public API methods
+    getImage(category, index = 0) {
+        if (!this.config) return this.config?.fallback || '';
+        
+        switch(category) {
+            case 'hero':
+                return this.config.hero;
+            case 'product':
+                return this.config.productImages[index] || this.config.fallback;
+            case 'testimonial':
+                return this.config.testimonials[index] || this.config.fallback;
+            case 'about':
+                return this.config.about;
+            case 'placeholder':
+                return this.config.placeholder;
+            default:
+                return this.config.fallback;
+        }
+    }
+
+    updateImage(category, value, index = 0) {
+        if (!this.config) return false;
+        
+        switch(category) {
+            case 'hero':
+                this.config.hero = value;
+                break;
+            case 'product':
+                if (this.config.productImages && index < this.config.productImages.length) {
+                    this.config.productImages[index] = value;
+                }
+                break;
+            case 'testimonial':
+                if (this.config.testimonials && index < this.config.testimonials.length) {
+                    this.config.testimonials[index] = value;
+                }
+                break;
+            case 'about':
+                this.config.about = value;
+                break;
+            default:
+                return false;
+        }
+        
+        // Update the JSON config element
+        const configElement = document.getElementById('imagePromptsConfig');
+        if (configElement) {
+            configElement.textContent = JSON.stringify(this.config, null, 2);
+        }
+        
+        return true;
+    }
+
+    static get observedAttributes() {
+        return ['config'];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'config' && oldValue !== newValue) {
+            this.loadConfig();
+            this.render();
+        }
+    }
+}
+
+customElements.define('image-manager', ImageManager);

index.html

@@ -108,6 +108,31 @@
     </style>
 </head>
 <body class="bg-gray-50">
+    <!-- Image Prompts Configuration -->
+    <script type="application/json" id="imagePromptsConfig">
+        {
+            "hero": "https://static.photos/medical/800x600/1",
+            "productImages": [
+                "https://static.photos/medical/400x300/101",
+                "https://static.photos/medical/400x300/102",
+                "https://static.photos/medical/400x300/103",
+                "https://static.photos/medical/400x300/104"
+            ],
+            "about": "https://static.photos/workspace/800x600/201",
+            "testimonials": [
+                "https://static.photos/people/48x48/301",
+                "https://static.photos/people/48x48/302",
+                "https://static.photos/people/48x48/303"
+            ],
+            "categories": {
+                "medical": "medical",
+                "workspace": "workspace",
+                "people": "people"
+            },
+            "placeholder": "https://static.photos/abstract/100x100"
+        }
+    </script>
+
     <!-- Header/Navigation -->
     <header class="bg-white shadow-sm sticky top-0 z-50">
         <div class="container mx-auto px-4 py-3 flex justify-between items-center">
@@ -117,8 +142,7 @@
                     <span class="text-xl font-bold text-gray-800">PharmaCare</span>
                 </a>
             </div>
-            
-            <div class="hidden md:flex space-x-8">
+<div class="hidden md:flex space-x-8">
                 <a href="#home" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Home</a>
                 <a href="#products" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Products</a>
                 <a href="#about" class="nav-link text-gray-700 hover:text-blue-600 font-medium">About</a>
@@ -162,8 +186,8 @@
                     <a href="#about" class="border-2 border-white text-white hover:bg-white hover:text-[#5d9245] font-bold py-3 px-6 rounded-full text-center transition duration-300">Learn More</a>
                 </div>
             </div>
-                <div class="md:w-1/2 flex justify-center">
-                    <img src="https://static.photos/medical/800x600/1" alt="Pharmaceutical products" class="rounded-xl shadow-2xl max-w-md w-full floating">
+            <div class="md:w-1/2 flex justify-center">
+                    <img id="heroImage" src="" alt="Pharmaceutical products" class="rounded-xl shadow-2xl max-w-md w-full floating">
                 </div>
 </div>
     </section>
@@ -209,7 +233,7 @@
                 <!-- Product 1 -->
                 <div class="bg-white rounded-xl shadow-md overflow-hidden product-card transition duration-300">
                     <div class="relative">
-                        <img src="https://static.photos/medical/400x300/101" alt="Xanax" class="w-full h-48 object-contain bg-gray-100 p-4">
+                        <img id="productImage1" src="" alt="Xanax" class="w-full h-48 object-contain bg-gray-100 p-4">
 <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded-full">BESTSELLER</span>
                     </div>
                     <div class="p-6">
@@ -227,7 +251,7 @@
                 <!-- Product 2 -->
                 <div class="bg-white rounded-xl shadow-md overflow-hidden product-card transition duration-300">
                     <div class="relative">
-                        <img src="https://static.photos/medical/400x300/102" alt="Valium" class="w-full h-48 object-contain bg-gray-100 p-4">
+                        <img id="productImage2" src="" alt="Valium" class="w-full h-48 object-contain bg-gray-100 p-4">
 </div>
                     <div class="p-6">
                         <h3 class="text-xl font-bold mb-2">Valium (Diazepam) 10mg</h3>
@@ -244,7 +268,7 @@
                 <!-- Product 3 -->
                 <div class="bg-white rounded-xl shadow-md overflow-hidden product-card transition duration-300">
                     <div class="relative">
-                        <img src="https://static.photos/medical/400x300/103" alt="Viagra" class="w-full h-48 object-contain bg-gray-100 p-4">
+                        <img id="productImage3" src="" alt="Viagra" class="w-full h-48 object-contain bg-gray-100 p-4">
 <span class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</span>
                     </div>
                     <div class="p-6">
@@ -262,7 +286,7 @@
                 <!-- Product 4 -->
                 <div class="bg-white rounded-xl shadow-md overflow-hidden product-card transition duration-300">
                     <div class="relative">
-                        <img src="https://static.photos/medical/400x300/104" alt="Codeine" class="w-full h-48 object-contain bg-gray-100 p-4">
+                        <img id="productImage4" src="" alt="Codeine" class="w-full h-48 object-contain bg-gray-100 p-4">
 </div>
                     <div class="p-6">
                         <h3 class="text-xl font-bold mb-2">Codeine 30mg</h3>
@@ -275,7 +299,7 @@
                         </div>
                     </div>
                 </div>
-            </div>
+</div>
             
             <div class="text-center mt-12">
                 <a href="#" class="inline-block border-2 border-[#5d9245] text-[#5d9245] hover:bg-[#5d9245] hover:text-white font-bold py-3 px-8 rounded-full transition duration-300">
@@ -290,7 +314,7 @@
         <div class="container mx-auto px-4">
             <div class="flex flex-col md:flex-row items-center">
                 <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
-                    <img src="https://static.photos/workspace/800x600/201" alt="Our lab" class="rounded-xl shadow-lg w-full">
+                    <img id="aboutImage" src="" alt="Our lab" class="rounded-xl shadow-lg w-full">
 </div>
 <div class="md:w-1/2">
                     <h2 class="text-3xl font-bold mb-6">Our Pharmaceutical Expertise</h2>
@@ -342,7 +366,7 @@
                 <!-- Testimonial 1 -->
                 <div class="bg-white p-6 rounded-xl shadow-sm testimonial-card">
                     <div class="flex items-center mb-4">
-                        <img src="https://static.photos/people/48x48/301" alt="Sarah J." class="w-12 h-12 rounded-full mr-4">
+                        <img id="testimonialImage1" src="" alt="Sarah J." class="w-12 h-12 rounded-full mr-4">
 <div>
                             <h4 class="font-bold">Sarah J.</h4>
                             <div class="flex text-yellow-400">
@@ -360,7 +384,7 @@
                 <!-- Testimonial 2 -->
                 <div class="bg-white p-6 rounded-xl shadow-sm testimonial-card">
                     <div class="flex items-center mb-4">
-                        <img src="https://static.photos/people/48x48/302" alt="Michael T." class="w-12 h-12 rounded-full mr-4">
+                        <img id="testimonialImage2" src="" alt="Michael T." class="w-12 h-12 rounded-full mr-4">
 <div>
                             <h4 class="font-bold">Michael T.</h4>
                             <div class="flex text-yellow-400">
@@ -378,7 +402,7 @@
                 <!-- Testimonial 3 -->
                 <div class="bg-white p-6 rounded-xl shadow-sm testimonial-card">
                     <div class="flex items-center mb-4">
-                        <img src="https://static.photos/people/48x48/303" alt="Priya K." class="w-12 h-12 rounded-full mr-4">
+                        <img id="testimonialImage3" src="" alt="Priya K." class="w-12 h-12 rounded-full mr-4">
 <div>
                             <h4 class="font-bold">Priya K.</h4>
                             <div class="flex text-yellow-400">
@@ -392,7 +416,7 @@
                     </div>
                     <p class="text-gray-600">"Stress Relief has helped me manage my anxiety naturally. I feel calmer and more centered without any drowsiness. It's become an essential part of my daily routine."</p>
                 </div>
-            </div>
+</div>
         </div>
     </section>
 
@@ -660,15 +684,68 @@
     <!-- Image Optimizer Component -->
     <script src="components/image-optimizer.js"></script>
     <script src="components/image-gallery.js"></script>
-    
     <script>
+        // Image Prompts Configuration Loader
+        function loadImagePrompts() {
+            try {
+                const configElement = document.getElementById('imagePromptsConfig');
+                if (!configElement) {
+                    console.warn('Image prompts config not found');
+                    return null;
+                }
+                
+                const config = JSON.parse(configElement.textContent);
+                console.log('Image prompts config loaded:', config);
+                return config;
+            } catch (error) {
+                console.error('Failed to load image prompts:', error);
+                return null;
+            }
+        }
+        
+        // Apply image prompts to all images
+        function applyImagePrompts() {
+            const config = loadImagePrompts();
+            if (!config) return;
+            
+            // Apply hero image
+            const heroImg = document.getElementById('heroImage');
+            if (heroImg && config.hero) {
+                heroImg.src = config.hero;
+            }
+            
+            // Apply product images
+            for (let i = 1; i <= 4; i++) {
+                const img = document.getElementById(`productImage${i}`);
+                if (img && config.productImages[i-1]) {
+                    img.src = config.productImages[i-1];
+                }
+            }
+            
+            // Apply about image
+            const aboutImg = document.getElementById('aboutImage');
+            if (aboutImg && config.about) {
+                aboutImg.src = config.about;
+            }
+            
+            // Apply testimonial images
+            for (let i = 1; i <= 3; i++) {
+                const img = document.getElementById(`testimonialImage${i}`);
+                if (img && config.testimonials[i-1]) {
+                    img.src = config.testimonials[i-1];
+                }
+            }
+        }
+        
         // Mobile menu toggle
         const mobileMenuButton = document.getElementById('mobileMenuButton');
         const mobileMenu = document.getElementById('mobileMenu');
         
-        mobileMenuButton.addEventListener('click', () => {
-            mobileMenu.classList.toggle('open');
-        });
+        if (mobileMenuButton && mobileMenu) {
+            mobileMenuButton.addEventListener('click', () => {
+                mobileMenu.classList.toggle('open');
+            });
+        }
         
         // Smooth scrolling for navigation links
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
@@ -685,7 +762,7 @@
                     });
                     
                     // Close mobile menu if open
-                    mobileMenu.classList.remove('open');
+                    if (mobileMenu) mobileMenu.classList.remove('open');
                 }
             });
         });
@@ -707,72 +784,84 @@
         const addToCartButtons = document.querySelectorAll('.add-to-cart');
         
         // Toggle cart modal
-        cartButton.addEventListener('click', () => {
-            cartModal.classList.remove('hidden');
-            renderCart();
-        });
+        if (cartButton && cartModal) {
+            cartButton.addEventListener('click', () => {
+                cartModal.classList.remove('hidden');
+                renderCart();
+            });
+        }
         
-        closeCart.addEventListener('click', () => {
-            cartModal.classList.add('hidden');
-        });
+        if (closeCart) {
+            closeCart.addEventListener('click', () => {
+                cartModal.classList.add('hidden');
+            });
+        }
         
-        continueShopping.addEventListener('click', () => {
-            cartModal.classList.add('hidden');
-        });
+        if (continueShopping) {
+            continueShopping.addEventListener('click', () => {
+                cartModal.classList.add('hidden');
+            });
+        }
         
         // Add to cart functionality
-        addToCartButtons.forEach(button => {
-            button.addEventListener('click', () => {
-                const id = button.getAttribute('data-id');
-                const name = button.getAttribute('data-name');
-                const price = parseFloat(button.getAttribute('data-price'));
-                
-                // Check if item already exists in cart
-                const existingItem = cart.find(item => item.id === id);
-                
-                if (existingItem) {
-                    existingItem.quantity += 1;
-                } else {
-                    cart.push({
-                        id,
-                        name,
-                        price,
-                        quantity: 1
-                    });
-                }
-                
-                updateCartCount();
-                renderCart();
-                
-                // Show cart modal
-                cartModal.classList.remove('hidden');
-                
-                // Add animation to button
-                button.innerHTML = '<i class="fas fa-check mr-2"></i> Added';
-                button.classList.add('bg-green-600', 'hover:bg-green-700');
-                
-                setTimeout(() => {
-                    button.innerHTML = 'Add to Cart';
-                    button.classList.remove('bg-green-600', 'hover:bg-green-700');
-                    button.classList.add('bg-blue-600', 'hover:bg-blue-700');
-                }, 2000);
+        if (addToCartButtons.length > 0) {
+            addToCartButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    const id = button.getAttribute('data-id');
+                    const name = button.getAttribute('data-name');
+                    const price = parseFloat(button.getAttribute('data-price'));
+                    
+                    // Check if item already exists in cart
+                    const existingItem = cart.find(item => item.id === id);
+                    
+                    if (existingItem) {
+                        existingItem.quantity += 1;
+                    } else {
+                        cart.push({
+                            id,
+                            name,
+                            price,
+                            quantity: 1
+                        });
+                    }
+                    
+                    updateCartCount();
+                    renderCart();
+                    
+                    // Show cart modal
+                    if (cartModal) cartModal.classList.remove('hidden');
+                    
+                    // Add animation to button
+                    button.innerHTML = '<i class="fas fa-check mr-2"></i> Added';
+                    button.classList.add('bg-green-600', 'hover:bg-green-700');
+                    
+                    setTimeout(() => {
+                        button.innerHTML = 'Add to Cart';
+                        button.classList.remove('bg-green-600', 'hover:bg-green-700');
+                        button.classList.add('bg-blue-600', 'hover:bg-blue-700');
+                    }, 2000);
+                });
             });
-        });
+        }
         
         // Update cart count in header
         function updateCartCount() {
             const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
             
-            if (totalItems > 0) {
-                cartCount.textContent = totalItems;
-                cartCount.classList.remove('hidden');
-            } else {
-                cartCount.classList.add('hidden');
+            if (cartCount) {
+                if (totalItems > 0) {
+                    cartCount.textContent = totalItems;
+                    cartCount.classList.remove('hidden');
+                } else {
+                    cartCount.classList.add('hidden');
+                }
             }
         }
         
         // Render cart items
         function renderCart() {
+            if (!cartItems || !cartSubtotal || !checkoutButton) return;
+            
             if (cart.length === 0) {
                 cartItems.innerHTML = '<p class="text-gray-500 text-center py-8">Your cart is empty</p>';
                 cartSubtotal.textContent = '$0.00';
@@ -856,28 +945,30 @@
         }
         
         // Checkout button
-        checkoutButton.addEventListener('click', () => {
-            // Show loading state
-            checkoutButton.innerHTML = '<div class="loader-small"></div> Processing...';
-            checkoutButton.disabled = true;
-            
-            // Simulate API call
-            setTimeout(() => {
-                alert('Thank you for your purchase! This is a demo site, no actual order will be placed.');
-                cart = [];
-                updateCartCount();
-                renderCart();
-                cartModal.classList.add('hidden');
+        if (checkoutButton) {
+            checkoutButton.addEventListener('click', () => {
+                // Show loading state
+                checkoutButton.innerHTML = '<div class="loader-small"></div> Processing...';
+                checkoutButton.disabled = true;
                 
-                // Reset button
-                checkoutButton.innerHTML = 'Checkout';
-                checkoutButton.disabled = false;
-            }, 1500);
-        });
+                // Simulate API call
+                setTimeout(() => {
+                    alert('Thank you for your purchase! This is a demo site, no actual order will be placed.');
+                    cart = [];
+                    updateCartCount();
+                    renderCart();
+                    if (cartModal) cartModal.classList.add('hidden');
+                    
+                    // Reset button
+                    checkoutButton.innerHTML = 'Checkout';
+                    checkoutButton.disabled = false;
+                }, 1500);
+            });
+        }
         
         // Close modal when clicking outside
         window.addEventListener('click', (e) => {
-            if (e.target === cartModal) {
+            if (cartModal && e.target === cartModal) {
                 cartModal.classList.add('hidden');
             }
         });
@@ -885,42 +976,51 @@
         // Back to top button
         const backToTopButton = document.getElementById('backToTop');
         
-        window.addEventListener('scroll', () => {
-            if (window.pageYOffset > 300) {
-                backToTopButton.classList.remove('opacity-0', 'invisible');
-                backToTopButton.classList.add('opacity-100', 'visible');
-            } else {
-                backToTopButton.classList.remove('opacity-100', 'visible');
-                backToTopButton.classList.add('opacity-0', 'invisible');
-            }
-        });
-        
-        backToTopButton.addEventListener('click', () => {
-            window.scrollTo({
-                top: 0,
-                behavior: 'smooth'
+        if (backToTopButton) {
+            window.addEventListener('scroll', () => {
+                if (window.pageYOffset > 300) {
+                    backToTopButton.classList.remove('opacity-0', 'invisible');
+                    backToTopButton.classList.add('opacity-100', 'visible');
+                } else {
+                    backToTopButton.classList.remove('opacity-100', 'visible');
+                    backToTopButton.classList.add('opacity-0', 'invisible');
+                }
             });
-        });
+            
+            backToTopButton.addEventListener('click', () => {
+                window.scrollTo({
+                    top: 0,
+                    behavior: 'smooth'
+                });
+            });
+        }
         
         // Image optimization initialization
         document.addEventListener('DOMContentLoaded', function() {
-            // Replace all product images with optimized versions
-            const productImages = document.querySelectorAll('.product-card img');
-            productImages.forEach(img => {
-                const parent = img.parentElement;
-                const alt = img.alt;
-                const src = img.src;
-                
-                // Create optimized image component
-                const optimizedImg = document.createElement('optimized-image');
-                optimizedImg.setAttribute('src', src);
-                optimizedImg.setAttribute('alt', alt);
-                optimizedImg.setAttribute('height', '200px');
-                optimizedImg.setAttribute('lazy', '');
-                
-                // Replace the original image
-                img.replaceWith(optimizedImg);
-            });
+            // Apply image prompts from config
+            applyImagePrompts();
+            
+            // Replace product images with optimized versions after they are loaded
+            setTimeout(() => {
+                const productImages = document.querySelectorAll('.product-card img');
+                productImages.forEach(img => {
+                    const parent = img.parentElement;
+                    const alt = img.alt;
+                    const src = img.src;
+                    
+                    if (src && src !== '' && typeof customElements !== 'undefined' && customElements.get('optimized-image')) {
+                        // Create optimized image component
+                        const optimizedImg = document.createElement('optimized-image');
+                        optimizedImg.setAttribute('src', src);
+                        optimizedImg.setAttribute('alt', alt);
+                        optimizedImg.setAttribute('height', '200px');
+                        optimizedImg.setAttribute('lazy', '');
+                        
+                        // Replace the original image
+                        img.replaceWith(optimizedImg);
+                    }
+                });
+            }, 100);
         });
     </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=steake/pharma-see" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>