Update templates/menu.html

templates/menu.html

@@ -40,17 +40,66 @@
         .menu-card.visible {
             opacity: 1;
         }
-        .menu-image {
+        
+        /* Video Container Styles */
+        .video-container {
+            position: relative;
+            width: 100%;
             height: 200px;
+            overflow: hidden;
+            border-radius: 15px 15px 0 0;
+            background-color: #000;
+        }
+        
+        .video-container video {
             width: 100%;
+            height: 100%;
             object-fit: cover;
-            border-radius: 15px 15px 0 0;
+            transition: opacity 0.5s ease;
+        }
+        
+        .video-container .video-placeholder {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #f0f0f0;
+            color: #666;
+            font-size: 14px;
+        }
+        
+        .video-container .play-button {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 50px;
+            height: 50px;
+            background-color: rgba(0, 0, 0, 0.7);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            z-index: 10;
             opacity: 0;
-            transition: opacity 0.5s ease-in-out;
+            transition: opacity 0.3s ease;
         }
-        .menu-image.loaded {
+        
+        .video-container:hover .play-button {
             opacity: 1;
         }
+        
+        .video-container .play-button i {
+            color: white;
+            font-size: 20px;
+            margin-left: 3px;
+        }
+        
         .card-title {
             font-size: 1.2rem;
             font-weight: bold;
@@ -672,6 +721,11 @@
                 height: 20px;
                 font-size: 10px;
             }
+            
+            /* Mobile video adjustments */
+            .video-container {
+                height: 150px;
+            }
         }
     </style>
 </head>
@@ -730,24 +784,28 @@
                     {% for item in items %}
                         <div class="col-md-6 mb-4">
                             <div class="card menu-card">
-                                <picture>
-                                    <source 
-                                        srcset="{{ item.Image1__c_webp if item.Image1__c_webp else item.Image1__c }} 350w, 
-                                                {{ item.Image1__c_small if item.Image1__c_small else item.Image1__c }} 175w" 
-                                        sizes="(max-width: 576px) 175px, 350px" 
-                                        type="image/webp">
-                                    <img 
-                                        src="/static/placeholder.jpg" 
-                                        data-src="{{ item.Image1__c }}" 
-                                        class="card-img-top menu-image" 
-                                        alt="{{ item.Name }}" 
-                                        width="350" 
-                                        height="200" 
-                                        loading="lazy" 
-                                        fetchpriority="low" 
-                                        decoding="async" 
-                                        onerror="this.onerror=null; this.src='/static/placeholder.jpg';">
-                                </picture>
+                                <div class="video-container">
+                                    <video 
+                                        id="video-{{ loop.index }}" 
+                                        preload="metadata" 
+                                        poster="{{ item.Image1__c if item.Image1__c else '/static/placeholder.jpg' }}"
+                                        data-src="{{ item.Video1__c }}"
+                                        muted
+                                        loop
+                                    >
+                                        <source src="{{ item.Video1__c }}" type="video/mp4">
+                                        Your browser does not support the video tag.
+                                    </video>
+                                    {% if not item.Video1__c %}
+                                        <div class="video-placeholder">
+                                            No video available
+                                        </div>
+                                    {% endif %}
+                                    <div class="play-button" onclick="togglePlay(this)">
+                                        <i class="bi bi-play-fill"></i>
+                                    </div>
+                                </div>
+                                
                                 <div class="addbutton">
                                     <div class="card-body d-flex align-items-center justify-content-between">
                                         <div>
@@ -800,7 +858,9 @@
         <a href="{{ url_for('cart.cart') }}" class="view-cart-button">
             <i class="bi bi-cart"></i>
             view Cart
-            
+            <span id="cart-item-count" class="cart-icon-badge {% if cart_item_count > 0 %}active{% endif %}">
+                {{ cart_item_count if cart_item_count > 0 else '' }}
+            </span>
         </a>
     </div>
 
@@ -859,6 +919,30 @@
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
+        // Video Handling Functions
+        function togglePlay(button) {
+            const videoContainer = button.closest('.video-container');
+            const video = videoContainer.querySelector('video');
+            
+            if (video.paused) {
+                // Load video source if not already loaded
+                if (!video.src && video.dataset.src) {
+                    video.src = video.dataset.src;
+                }
+                video.play()
+                    .then(() => {
+                        button.innerHTML = '<i class="bi bi-pause-fill"></i>';
+                    })
+                    .catch(e => {
+                        console.log('Video play error:', e);
+                        // Show error to user if needed
+                    });
+            } else {
+                video.pause();
+                button.innerHTML = '<i class="bi bi-play-fill"></i>';
+            }
+        }
+
         // Dynamically populate menuItems from ordered_menu
         const menuItems = [
             {% for section, items in ordered_menu.items() %}
@@ -1016,6 +1100,45 @@
         }
 
         document.addEventListener('DOMContentLoaded', function () {
+            // Initialize video handling
+            const videoContainers = document.querySelectorAll('.video-container');
+            
+            videoContainers.forEach(container => {
+                const video = container.querySelector('video');
+                
+                // Only load video when container is in viewport
+                const observer = new IntersectionObserver((entries) => {
+                    entries.forEach(entry => {
+                        if (entry.isIntersecting && video.dataset.src && !video.src) {
+                            video.src = video.dataset.src;
+                            observer.unobserve(entry.target);
+                        }
+                    });
+                }, {
+                    rootMargin: '200px',
+                    threshold: 0.1
+                });
+                
+                observer.observe(container);
+
+                // Handle hover play/pause
+                container.addEventListener('mouseenter', () => {
+                    if (video.src) {
+                        video.play().catch(e => console.log('Autoplay prevented:', e));
+                    }
+                });
+                
+                container.addEventListener('mouseleave', () => {
+                    if (!video.paused) {
+                        video.pause();
+                        const playButton = container.querySelector('.play-button');
+                        if (playButton) {
+                            playButton.innerHTML = '<i class="bi bi-play-fill"></i>';
+                        }
+                    }
+                });
+            });
+
             const avatarContainer = document.querySelector('.avatar-dropdown-container');
             const dropdownMenu = document.querySelector('.dropdown-menu');
 
@@ -1062,7 +1185,6 @@
                 }
             });
 
-            const menuImages = document.querySelectorAll('.menu-image');
             const cardObserver = new IntersectionObserver((entries, observer) => {
                 entries.forEach(entry => {
                     if (entry.isIntersecting) {
@@ -1076,30 +1198,7 @@
                 threshold: 0.1
             });
 
-            const imageObserver = new IntersectionObserver((entries, observer) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        const img = entry.target;
-                        const src = img.getAttribute('data-src');
-                        if (src && img.src !== src) {
-                            img.src = src;
-                        }
-                        img.onload = () => img.classList.add('loaded');
-                        img.onerror = () => {
-                            img.src = '/static/placeholder.jpg';
-                            img.classList.add('loaded');
-                        };
-                        observer.unobserve(img);
-                    }
-                });
-            }, {
-                root: null,
-                rootMargin: '200px',
-                threshold: 0.01
-            });
-
             menuCards.forEach(card => cardObserver.observe(card));
-            menuImages.forEach(img => imageObserver.observe(img));
 
             const toggleLinks = document.querySelectorAll('.toggle-details');
             toggleLinks.forEach(link => {