Update components/popup_card.py

components/popup_card.py

@@ -1,26 +1,21 @@
 def generate_popup_card(name, model_path):
     """
-    Generates an HTML popup card dynamically for the selected menu item with a black background overlay.
+    Generates an HTML popup card dynamically for the selected menu item with proper close functionality.
     """
     html_content = f"""
     <div id="overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; display: flex; justify-content: center; align-items: center;">
-        <div style="border: 1px solid #ddd; padding: 20px; border-radius: 10px; background-color: #fff; width: 300px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);">
-            <h2 style="text-align: center; color: #333;">{name}</h2>
-            <model-viewer src="{model_path}" alt="3D Model of {name}" camera-controls auto-rotate style="width: 100%;"></model-viewer>
-            <label for="instructions" style="display: block; margin-top: 10px;">Special Instructions:</label>
-            <textarea id="instructions" placeholder="Add any requests here..." style="width: 100%; margin-bottom: 10px;"></textarea>
-            <label for="quantity" style="display: block;">Quantity:</label>
-            <input type="number" id="quantity" min="1" max="10" value="1" style="width: 100%; margin-bottom: 10px;">
+        <div style="border: 1px solid #ddd; padding: 20px; border-radius: 10px; background-color: #fff; width: 350px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);">
+            <h2 style="text-align: center; color: #333; margin-bottom: 10px;">{name}</h2>
+            <model-viewer src="{model_path}" alt="3D Model of {name}" camera-controls auto-rotate style="width: 100%; margin-bottom: 10px;"></model-viewer>
+            <label for="instructions" style="display: block; margin-bottom: 5px; font-weight: bold;">Special Instructions:</label>
+            <textarea id="instructions" placeholder="Add any requests here..." style="width: 100%; margin-bottom: 10px; padding: 5px; border: 1px solid #ccc; border-radius: 5px;"></textarea>
+            <label for="quantity" style="display: block; font-weight: bold; margin-bottom: 5px;">Quantity:</label>
+            <input type="number" id="quantity" min="1" max="10" value="1" style="width: 100%; margin-bottom: 10px; padding: 5px; border: 1px solid #ccc; border-radius: 5px;">
             <div style="text-align: center;">
-                <button style="margin-top: 10px; padding: 10px 20px; background-color: #008cba; color: white; border: none; border-radius: 5px;">Add to Cart</button>
-                <button style="margin-top: 10px; padding: 10px 20px; background-color: #ccc; color: black; border: none; border-radius: 5px; margin-left: 10px;" onclick="closePopup()">Close</button>
+                <button style="padding: 10px 20px; background-color: #008cba; color: white; border: none; border-radius: 5px; cursor: pointer;">Add to Cart</button>
+                <button style="padding: 10px 20px; background-color: #ccc; color: black; border: none; border-radius: 5px; margin-left: 10px; cursor: pointer;" onclick="document.getElementById('overlay').style.display='none'">Close</button>
             </div>
         </div>
     </div>
-    <script>
-        function closePopup() {{
-            document.getElementById('overlay').style.display = 'none';
-        }}
-    </script>
     """
     return html_content