Update components/popup_card.py

components/popup_card.py

@@ -1,17 +1,26 @@
 def generate_popup_card(name, model_path):
     """
-    Generates an HTML popup card dynamically for the selected menu item.
+    Generates an HTML popup card dynamically for the selected menu item with a black background overlay.
     """
     html_content = f"""
-    <div style="border: 1px solid #ddd; padding: 20px; border-radius: 10px; background-color: #fff;">
-        <h2>{name}</h2>
-        <model-viewer src="{model_path}" alt="3D Model of {name}" camera-controls auto-rotate></model-viewer>
-        <label for="instructions">Special Instructions:</label>
-        <textarea id="instructions" placeholder="Add any requests here..."></textarea>
-        <label for="quantity">Quantity:</label>
-        <input type="number" id="quantity" min="1" max="10" value="1">
-        <button style="margin-top: 10px;">Add to Cart</button>
-        <button style="margin-left: 10px; background-color: #ccc;">Close</button>
+    <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="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>
+            </div>
+        </div>
     </div>
+    <script>
+        function closePopup() {{
+            document.getElementById('overlay').style.display = 'none';
+        }}
+    </script>
     """
-    return html_content
+    return html_content