Update templates/order.html

templates/order.html

@@ -13,6 +13,9 @@
             color: #333333; /* Dark gray text */
             margin: 0;
             padding: 0;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
         }
 
         .order-container {
@@ -23,6 +26,7 @@
             border-radius: 15px;
             box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for modern look */
             border: 1px solid #ffe5b4; /* Light orange border */
+            flex-grow: 1;
         }
 
         .order-title {
@@ -73,27 +77,43 @@
             color: #2b9348; /* Green for the total price */
         }
 
-        /* Responsive Design */
-        @media (max-width: 768px) {
-            .order-container {
-                padding: 15px;
-            }
+        .back-to-menu {
+            display: block;
+            margin: 30px auto 10px auto;
+            padding: 10px 20px;
+            background-color: #ff5722; /* Bright orange button */
+            color: #ffffff; /* White text */
+            border: none;
+            border-radius: 25px;
+            font-size: 1rem;
+            font-weight: bold;
+            text-align: center;
+            text-decoration: none;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle button shadow */
+            transition: background-color 0.3s ease;
+        }
 
-            .order-title {
-                font-size: 1.6rem;
-            }
+        .back-to-menu:hover {
+            background-color: #e64a19; /* Darker orange on hover */
+            text-decoration: none;
+        }
 
-            .section-title {
-                font-size: 1.3rem;
-            }
+        footer {
+            background-color: #333333; /* Dark gray background */
+            color: #ffffff; /* White text */
+            text-align: center;
+            padding: 15px 10px;
+            margin-top: auto;
+        }
 
-            .order-details {
-                font-size: 0.9rem;
-            }
+        footer p {
+            margin: 0;
+            font-size: 1rem;
+        }
 
-            .total-price {
-                font-size: 1.5rem;
-            }
+        footer p span {
+            color: #ffcc00; /* Golden highlight for the message */
+            font-weight: bold;
         }
     </style>
 </head>
@@ -125,7 +145,15 @@
                 <span class="total-price">${{ order.Total_Amount__c }}</span>
             </div>
             {% endif %}
+
+            <!-- Back to Menu Button -->
+            <a href="/menu" class="back-to-menu">Back to Menu</a>
         </div>
     </div>
+
+    <!-- Footer -->
+    <footer>
+        <p>Thank you for dining with us! <span>We look forward to serving you again.</span></p>
+    </footer>
 </body>
 </html>