improve prompt engineering for images

components/image-gallery.js

@@ -0,0 +1,290 @@
+/**
+ * Image Gallery Web Component
+ * Displays a gallery of pharmaceutical products with lightbox functionality
+ */
+class ImageGallery extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.images = [];
+    this.currentIndex = 0;
+  }
+
+  connectedCallback() {
+    // Parse images from data attribute or children
+    const imagesData = this.getAttribute('data-images');
+    if (imagesData) {
+      try {
+        this.images = JSON.parse(imagesData);
+      } catch (e) {
+        console.error('Failed to parse images data', e);
+      }
+    }
+
+    // If no images data attribute, look for child elements
+    if (this.images.length === 0) {
+      this.querySelectorAll('img').forEach(img => {
+        this.images.push({
+          src: img.src,
+          alt: img.alt,
+          title: img.title || img.alt
+        });
+      });
+    }
+
+    this.render();
+  }
+
+  render() {
+    const columns = this.getAttribute('columns') || '4';
+    const gap = this.getAttribute('gap') || '4';
+    const showCaptions = this.hasAttribute('show-captions');
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+        }
+        
+        .gallery-container {
+          display: grid;
+          grid-template-columns: repeat(${columns}, 1fr);
+          gap: ${gap}px;
+          margin: 0 auto;
+        }
+        
+        @media (max-width: 1024px) {
+          .gallery-container {
+            grid-template-columns: repeat(3, 1fr);
+          }
+        }
+        
+        @media (max-width: 768px) {
+          .gallery-container {
+            grid-template-columns: repeat(2, 1fr);
+          }
+        }
+        
+        @media (max-width: 480px) {
+          .gallery-container {
+            grid-template-columns: 1fr;
+          }
+        }
+        
+        .gallery-item {
+          position: relative;
+          cursor: pointer;
+          border-radius: 8px;
+          overflow: hidden;
+          transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        
+        .gallery-item:hover {
+          transform: translateY(-4px);
+          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        
+        .gallery-image {
+          width: 100%;
+          height: 200px;
+          object-fit: cover;
+          display: block;
+        }
+        
+        .image-caption {
+          padding: 12px;
+          background: white;
+          text-align: center;
+          font-size: 14px;
+          color: #333;
+        }
+        
+        /* Lightbox styles */
+        .lightbox {
+          display: none;
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: rgba(0, 0, 0, 0.9);
+          z-index: 1000;
+          align-items: center;
+          justify-content: center;
+        }
+        
+        .lightbox.active {
+          display: flex;
+        }
+        
+        .lightbox-content {
+          position: relative;
+          max-width: 90%;
+          max-height: 90%;
+        }
+        
+        .lightbox-image {
+          max-width: 100%;
+          max-height: 80vh;
+          object-fit: contain;
+        }
+        
+        .lightbox-caption {
+          color: white;
+          text-align: center;
+          padding: 15px;
+          font-size: 18px;
+        }
+        
+        .lightbox-close {
+          position: absolute;
+          top: 20px;
+          right: 20px;
+          background: none;
+          border: none;
+          color: white;
+          font-size: 30px;
+          cursor: pointer;
+          z-index: 1001;
+        }
+        
+        .lightbox-nav {
+          position: absolute;
+          top: 50%;
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          transform: translateY(-50%);
+          padding: 0 20px;
+        }
+        
+        .lightbox-prev,
+        .lightbox-next {
+          background: rgba(255, 255, 255, 0.2);
+          border: none;
+          color: white;
+          width: 50px;
+          height: 50px;
+          border-radius: 50%;
+          font-size: 24px;
+          cursor: pointer;
+          transition: background 0.3s;
+        }
+        
+        .lightbox-prev:hover,
+        .lightbox-next:hover {
+          background: rgba(255, 255, 255, 0.4);
+        }
+      </style>
+      
+      <div class="gallery-container">
+        ${this.images.map((image, index) => `
+          <div class="gallery-item" data-index="${index}">
+            <optimized-image
+              src="${image.src}"
+              alt="${image.alt}"
+              height="200px"
+              lazy
+              class="gallery-image"
+            ></optimized-image>
+            ${showCaptions ? `<div class="image-caption">${image.title || image.alt}</div>` : ''}
+          </div>
+        `).join('')}
+      </div>
+      
+      <!-- Lightbox -->
+      <div class="lightbox">
+        <button class="lightbox-close">&times;</button>
+        <div class="lightbox-nav">
+          <button class="lightbox-prev">&#10094;</button>
+          <button class="lightbox-next">&#10095;</button>
+        </div>
+        <div class="lightbox-content">
+          <img class="lightbox-image" src="" alt="">
+          <div class="lightbox-caption"></div>
+        </div>
+      </div>
+    `;
+
+    // Add event listeners
+    this.addEventListeners();
+  }
+
+  addEventListeners() {
+    const lightbox = this.shadowRoot.querySelector('.lightbox');
+    const lightboxImage = this.shadowRoot.querySelector('.lightbox-image');
+    const lightboxCaption = this.shadowRoot.querySelector('.lightbox-caption');
+    const closeBtn = this.shadowRoot.querySelector('.lightbox-close');
+    const prevBtn = this.shadowRoot.querySelector('.lightbox-prev');
+    const nextBtn = this.shadowRoot.querySelector('.lightbox-next');
+    const galleryItems = this.shadowRoot.querySelectorAll('.gallery-item');
+
+    // Open lightbox on image click
+    galleryItems.forEach(item => {
+      item.addEventListener('click', () => {
+        this.currentIndex = parseInt(item.dataset.index);
+        this.updateLightbox();
+        lightbox.classList.add('active');
+        document.body.style.overflow = 'hidden';
+      });
+    });
+
+    // Close lightbox
+    closeBtn.addEventListener('click', () => {
+      lightbox.classList.remove('active');
+      document.body.style.overflow = 'auto';
+    });
+
+    // Lightbox navigation
+    prevBtn.addEventListener('click', () => {
+      this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
+      this.updateLightbox();
+    });
+
+    nextBtn.addEventListener('click', () => {
+      this.currentIndex = (this.currentIndex + 1) % this.images.length;
+      this.updateLightbox();
+    });
+
+    // Keyboard navigation
+    document.addEventListener('keydown', (e) => {
+      if (!lightbox.classList.contains('active')) return;
+      
+      switch (e.key) {
+        case 'Escape':
+          lightbox.classList.remove('active');
+          document.body.style.overflow = 'auto';
+          break;
+        case 'ArrowLeft':
+          this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
+          this.updateLightbox();
+          break;
+        case 'ArrowRight':
+          this.currentIndex = (this.currentIndex + 1) % this.images.length;
+          this.updateLightbox();
+          break;
+      }
+    });
+
+    // Close on background click
+    lightbox.addEventListener('click', (e) => {
+      if (e.target === lightbox) {
+        lightbox.classList.remove('active');
+        document.body.style.overflow = 'auto';
+      }
+    });
+  }
+
+  updateLightbox() {
+    const lightboxImage = this.shadowRoot.querySelector('.lightbox-image');
+    const lightboxCaption = this.shadowRoot.querySelector('.lightbox-caption');
+    const image = this.images[this.currentIndex];
+    
+    lightboxImage.src = image.src;
+    lightboxImage.alt = image.alt;
+    lightboxCaption.textContent = image.title || image.alt;
+  }
+}
+
+customElements.define('image-gallery', ImageGallery);

components/image-optimizer.js

@@ -0,0 +1,157 @@
+/**
+ * Image Optimizer Web Component
+ * Automatically optimizes image loading with lazy loading, placeholders, and responsive images
+ */
+class ImageOptimizer extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    const src = this.getAttribute('src') || '';
+    const alt = this.getAttribute('alt') || '';
+    const width = this.getAttribute('width') || '100%';
+    const height = this.getAttribute('height') || 'auto';
+    const lazy = this.hasAttribute('lazy');
+    const placeholder = this.getAttribute('placeholder') || 'https://static.photos/abstract/100x100';
+    const category = this.getAttribute('category') || 'general';
+    
+    // Generate optimized image URL based on static.photos API
+    const optimizeURL = (url) => {
+      // If it's already a static.photos URL, keep it
+      if (url.includes('static.photos')) return url;
+      
+      // For other URLs, we could add resize parameters if needed
+      // For now, just return the original
+      return url;
+    };
+
+    // Create responsive image sets for different screen sizes
+    const generateSrcSet = (baseUrl) => {
+      if (!baseUrl.includes('static.photos')) return '';
+      
+      // Extract dimensions if present
+      const dimMatch = baseUrl.match(/\/(\d+)x(\d+)\//);
+      if (!dimMatch) return '';
+      
+      const [_, width, height] = dimMatch;
+      const base = baseUrl.replace(`/${width}x${height}/`, '');
+      
+      // Generate srcset for common breakpoints
+      const sizes = [
+        { width: 320, height: Math.round(320 * height / width) },
+        { width: 640, height: Math.round(640 * height / width) },
+        { width: 768, height: Math.round(768 * height / width) },
+        { width: 1024, height: Math.round(1024 * height / width) },
+        { width: 1280, height: Math.round(1280 * height / width) }
+      ];
+      
+      return sizes.map(size => 
+        `${base.replace(/\/\d+x\d+\//, `/${size.width}x${size.height}/`)} ${size.width}w`
+      ).join(', ');
+    };
+
+    const optimizedSrc = optimizeURL(src);
+    const srcset = generateSrcSet(optimizedSrc);
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: relative;
+          width: ${width};
+          height: ${height};
+          overflow: hidden;
+        }
+        
+        .image-container {
+          position: relative;
+          width: 100%;
+          height: 100%;
+        }
+        
+        .optimized-image {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          transition: opacity 0.3s ease;
+          opacity: 0;
+        }
+        
+        .optimized-image.loaded {
+          opacity: 1;
+        }
+        
+        .placeholder {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+          background-size: 200% 100%;
+          animation: loading 1.5s infinite;
+          border-radius: inherit;
+        }
+        
+        @keyframes loading {
+          0% { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
+        
+        .error-fallback {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: #f8f9fa;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #6c757d;
+          font-size: 14px;
+          border-radius: inherit;
+        }
+        
+        .error-fallback i {
+          font-size: 24px;
+          margin-bottom: 8px;
+        }
+      </style>
+      
+      <div class="image-container">
+        <div class="placeholder"></div>
+        <img 
+          class="optimized-image"
+          src="${optimizedSrc}"
+          ${srcset ? `srcset="${srcset}"` : ''}
+          sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+          alt="${alt}"
+          ${lazy ? 'loading="lazy"' : ''}
+          onload="this.classList.add('loaded')"
+          onerror="this.style.display='none'; this.parentNode.querySelector('.error-fallback').style.display='flex';"
+        >
+        <div class="error-fallback" style="display: none;">
+          <div style="text-align: center;">
+            <i class="fas fa-image"></i>
+            <div>${alt || 'Image'}</div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  static get observedAttributes() {
+    return ['src', 'alt', 'width', 'height'];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      this.connectedCallback();
+    }
+  }
+}
+
+customElements.define('optimized-image', ImageOptimizer);

index.html

@@ -162,9 +162,9 @@
                     <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://placeholders.io/800/600/medical?style=photographic" alt="Pharmaceutical products" class="rounded-xl shadow-2xl max-w-md w-full floating">
-            </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>
 </div>
     </section>
 
@@ -209,7 +209,7 @@
                 <!-- Product 1 -->
                 <div class="bg-white rounded-xl shadow-md overflow-hidden product-card transition duration-300">
                     <div class="relative">
-                        <img src="https://placeholders.io/400/300/pills?style=photographic&seed=1" alt="Xanax" class="w-full h-48 object-contain bg-gray-100 p-4">
+                        <img src="https://static.photos/medical/400x300/101" 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 +227,7 @@
                 <!-- Product 2 -->
                 <div class="bg-white rounded-xl shadow-md overflow-hidden product-card transition duration-300">
                     <div class="relative">
-                        <img src="https://placeholders.io/400/300/pills?style=photographic&seed=2" alt="Valium" class="w-full h-48 object-contain bg-gray-100 p-4">
+                        <img src="https://static.photos/medical/400x300/102" 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 +244,7 @@
                 <!-- Product 3 -->
                 <div class="bg-white rounded-xl shadow-md overflow-hidden product-card transition duration-300">
                     <div class="relative">
-                        <img src="https://placeholders.io/400/300/pills?style=photographic&seed=3" alt="Viagra" class="w-full h-48 object-contain bg-gray-100 p-4">
+                        <img src="https://static.photos/medical/400x300/103" 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 +262,7 @@
                 <!-- Product 4 -->
                 <div class="bg-white rounded-xl shadow-md overflow-hidden product-card transition duration-300">
                     <div class="relative">
-                        <img src="https://placeholders.io/400/300/pills?style=photographic&seed=4" alt="Codeine" class="w-full h-48 object-contain bg-gray-100 p-4">
+                        <img src="https://static.photos/medical/400x300/104" 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>
@@ -290,8 +290,8 @@
         <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://placeholders.io/800/600/lab?style=photographic&seed=12345" alt="Our lab" class="rounded-xl shadow-lg w-full">
-                </div>
+                    <img src="https://static.photos/workspace/800x600/201" 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>
                     <p class="text-gray-600 mb-4">At PharmaCare, we are committed to providing high-quality medications that meet strict safety and efficacy standards.</p>
@@ -342,7 +342,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://placeholders.io/48/48/person?style=photographic&seed=44" alt="Sarah J." class="w-12 h-12 rounded-full mr-4">
+                        <img src="https://static.photos/people/48x48/301" 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 +360,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://placeholders.io/48/48/person?style=photographic&seed=32" alt="Michael T." class="w-12 h-12 rounded-full mr-4">
+                        <img src="https://static.photos/people/48x48/302" 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 +378,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://placeholders.io/48/48/person?style=photographic&seed=68" alt="Priya K." class="w-12 h-12 rounded-full mr-4">
+                        <img src="https://static.photos/people/48x48/303" 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">
@@ -657,7 +657,10 @@
             </div>
         </div>
     </div>
-
+    <!-- Image Optimizer Component -->
+    <script src="components/image-optimizer.js"></script>
+    <script src="components/image-gallery.js"></script>
+    
     <script>
         // Mobile menu toggle
         const mobileMenuButton = document.getElementById('mobileMenuButton');
@@ -792,7 +795,7 @@
                     <div class="flex justify-between items-center py-4 border-b">
                         <div>
                             <h4 class="font-medium">${item.name}</h4>
-                            <p class="text-gray-600 text-sm">$${item.price.toFixed(2)}</p>
+                            <p class="text-gray-600 text-sm">${item.price.toFixed(2)}</p>
                         </div>
                         <div class="flex items-center">
                             <button class="decrease-quantity text-gray-500 hover:text-blue-600 px-2" data-id="${item.id}">
@@ -811,7 +814,7 @@
             });
             
             cartItems.innerHTML = itemsHTML;
-            cartSubtotal.textContent = `$${subtotal.toFixed(2)}`;
+            cartSubtotal.textContent = `${subtotal.toFixed(2)}`;
             
             // Add event listeners to quantity buttons
             document.querySelectorAll('.decrease-quantity').forEach(button => {
@@ -898,6 +901,27 @@
                 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);
+            });
+        });
     </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>
 </html>