Update app.py

app.py

@@ -58,25 +58,25 @@ def update_cart():
         return "Your cart is empty."
 
     total_bill = 0
-    cart_html = "<h3>Your Cart:</h3><table style='border: 1px solid black; border-collapse: collapse; width: 100%;'>"
-    cart_html += "<tr><th style='border: 1px solid black; padding: 8px;'>Selected Item</th><th style='border: 1px solid black; padding: 8px;'>Actual Price</th><th style='border: 1px solid black; padding: 8px;'>Quantity x Price</th><th style='border: 1px solid black; padding: 8px;'>Spice Level</th><th style='border: 1px solid black; padding: 8px;'>Extras</th><th style='border: 1px solid black; padding: 8px;'>Instructions</th></tr>"
+    cart_html = "<h3>Your Cart:</h3><ul style='list-style-type: none; padding: 0;'>"
     
     for item in cart_items:
         extras = ", ".join(item.get("extras", []))
         extras_cost = sum(EXTRAS_PRICES.get(extra, 0) for extra in item.get("extras", []))
-        item_total = (float(item['price'].strip('$')) + extras_cost) * item['quantity']
+        item_price = float(item['price'].strip('$'))
+        item_total = (item_price + extras_cost) * item['quantity']
         total_bill += item_total
-        cart_html += f"<tr>"
-        cart_html += f"<td style='border: 1px solid black; padding: 8px;'>{item['name']}</td>"
-        cart_html += f"<td style='border: 1px solid black; padding: 8px;'>${float(item['price'].strip('$')):.2f}</td>"
-        cart_html += f"<td style='border: 1px solid black; padding: 8px;'>${item_total:.2f}</td>"
-        cart_html += f"<td style='border: 1px solid black; padding: 8px;'>{item['spiceLevel']}</td>"
-        cart_html += f"<td style='border: 1px solid black; padding: 8px;'>{extras}</td>"
-        cart_html += f"<td style='border: 1px solid black; padding: 8px;'>{item['instructions']}</td>"
-        cart_html += f"</tr>"
-
-    cart_html += "</table>"
-    cart_html += f"<p><strong>Total Bill: ${total_bill:.2f}</strong></p>"
+
+        cart_html += f"<li style='margin-bottom: 20px; border: 1px solid #ddd; padding: 10px; border-radius: 8px;'>"
+        cart_html += f"<strong>Item:</strong> {item['name']} - ${item_price:.2f}<br>"
+        cart_html += f"<strong>Quantity x Price:</strong> {item['quantity']} x ${item_price:.2f} = ${item_price * item['quantity']:.2f}<br>"
+        cart_html += f"<strong>Spice Level:</strong> {item['spiceLevel']}<br>"
+        cart_html += f"<strong>Extras:</strong> {extras} - ${extras_cost:.2f}<br>"
+        cart_html += f"<strong>Instructions:</strong> {item['instructions']}<br>"
+        cart_html += f"<strong>Item Total:</strong> ${item_total:.2f}"
+        cart_html += "</li>"
+
+    cart_html += f"</ul><p><strong>Total Bill: ${total_bill:.2f}</strong></p>"
     return cart_html
 
 # Gradio app definition