BiryaniHubflaskMenu

Sleeping

App Files Files Community

Rammohan0504

lokesh341 commited on 19 days ago

Commit

1cc125e

verified ·

1 Parent(s): f5bf323

Update templates/order_history.html (#2)

Browse files

- Update templates/order_history.html (9834f2f04c3a55929b84a23f52b0abb949426672)

Co-authored-by: lokesh surya sai sirigineedi <[email protected]>

Files changed (1) hide show

templates/order_history.html +134 -131

templates/order_history.html CHANGED Viewed

@@ -1,126 +1,117 @@
-<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
     <title>Order History</title>
     <style>
         body {
             font-family: Arial, sans-serif;
-            background-color: #f8f9fa;
             margin: 0;
             padding: 0;
         }
         .container {
-            width: 70%;
-            margin: 30px auto;
-            padding: 20px;
-            background-color: #fdf4e3;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
             border-radius: 8px;
         }
         .order-item {
-            padding: 10px;
-            border: 1px solid #6c757d; /*#ffe5b4;*/
-            margin-bottom: 20px;
             border-radius: 5px;
         }
         .order-details {
-            font-size: 16px;
             font-weight: bold;
-            color: gray;
         }
         .order-details p {
-            margin: 5px 0;
         }
         .order-date-time {
-            font-size: 14px;
-            color: gray;
         }
         .order-price {
-            font-size: 16px;
             font-weight: bold;
-            color: gray;
-            margin: 10px 0;
         }
-      .order-status p {
-    margin: 5px 0;
-}
-.order-status .status-label {
-    color: lightgrey;  /* Light grey color for "Status:" label */
-    font-weight: normal;  /* Optional: make the label less bold */
-}
         .order-status {
-            font-size: 14px;
             font-weight: bold;
-            color: #28a745; /* Green for completed, can be customized based on the status */
-            margin-top: 10px;
         }
         .order-buttons {
-            margin-top: 10px;
         }
         .reorder-btn, .rate-order-btn {
             background-color: #ff7f00;
             color: white;
             border: none;
-            padding: 8px 16px;
-            margin-right: 10px;
             cursor: pointer;
             border-radius: 4px;
         }
         .reorder-btn:hover, .rate-order-btn:hover {
             background-color: #f55b00;
         }
         .total-price {
-            font-size: 18px;
             font-weight: bold;
             color: #333;
-            margin-top: 20px;
         }
         .order-heading {
-            font-size: 20px;
             font-weight: bold;
-            color: black;
-            margin-bottom: 20px;
             text-align: center;
         }
-        .back-button {
-            display: inline-block;
-            background-color: green;
-            color: white;
-            padding: 10px 20px;
-            text-decoration: none;
-            font-weight: bold;
-            border-radius: 4px;
-            margin-bottom: 20px;
-        }
-        .back-button:hover {
-            background-color: darkgreen;
-        }
-        /* Hide additional orders by default */
-        .more-orders {
-            display: none;
-        }
-        /* Style for the Show More/Show Less button */
         .show-more-btn {
             background-color: #ff7f00;
             color: white;
@@ -129,93 +120,106 @@
             cursor: pointer;
             border-radius: 4px;
             margin-top: 20px;
-          font-weight:bold;
         }
         .show-more-btn:hover {
             background-color: #f55b00;
         }
-        @media (max-width: 768px) {
-            .order-details, .order-price, .order-date-time {
-                font-size: 14px;
             }
             .order-heading {
-                font-size: 18px;
             }
         }
     </style>
 </head>
 <body>
-<a href="{{ url_for('menu') }}" class="back-button"><i class="fa fa-arrow-left"></i></a>
-<div class="container">
-    <div class="order-heading">Order History</div>
-    <!-- Loop through the orders (first 3) -->
-    {% for order in orders[:3] %}
-    <div class="order-item">
-        <!-- Order details: item names and quantities -->
-        <div class="order-details">
-            <p>{{ order.formatted_items }}</p>
-        </div>
-        <!-- Order date and time -->
-        <div class="order-date-time">
-          <p>{{ order.formatted_date }}</p>
-        </div>
-        <!-- Total price -->
-        <div class="order-price">
-            <p>Total: ₹{{ order.Total_Bill__c }}</p>
-        </div>
-        <div class="order-status">
-        <p>Status: {{ order.order_status }}</p> <!-- Display order status -->
-    </div>
-    </div>
-    {% endfor %}
-    <!-- Loop through the remaining orders (hidden initially) -->
-    <div class="more-orders" id="more-orders">
-        {% for order in orders[3:] %}
         <div class="order-item">
-            <!-- Order details: item names and quantities -->
             <div class="order-details">
                 <p>{{ order.formatted_items }}</p>
             </div>
-            <!-- Order date and time -->
             <div class="order-date-time">
-              <p>Order Placed:{{ order.formatted_date }}</p>
             </div>
-            <!-- Total price -->
             <div class="order-price">
                 <p>Total: ₹{{ order.Total_Bill__c }}</p>
             </div>
-            <!-- Order Status -->
-    <div class="order-status">
-        <p>Status: {{ order.order_status }}</p> <!-- Display order status -->
-    </div>
         </div>
         {% endfor %}
-    </div>
-    <!-- Show More button -->
-    {% if orders|length > 3 %}
-    <button class="show-more-btn" onclick="toggleOrders()">Show More</button>
-    {% endif %}
-    <!-- If no orders exist -->
-    {% if not orders %}
-    <div class="no-orders">
-        <p>No orders found.</p>
     </div>
-    {% endif %}
 </div>
 <script>
@@ -223,7 +227,6 @@
   function toggleOrders() {
     const moreOrders = document.getElementById("more-orders");
     const button = document.querySelector(".show-more-btn");
     if (moreOrders.style.display === "none") {
       moreOrders.style.display = "block";
       button.innerHTML = "Show Less";  // Change button text
@@ -235,4 +238,4 @@
 </script>
 </body>
-</html>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
     <title>Order History</title>
     <style>
+        /* Reset padding and margin for all elements */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
         body {
             font-family: Arial, sans-serif;
+            background-color: #fdf4e3; /* Light orange background for the whole page */
             margin: 0;
             padding: 0;
         }
+        /* Light Orange Background for the back-side */
+        .background {
+            padding: 8vw 0;
+            position: relative;
+        }
+        /* Green Back Button styling */
+        .back-button {
+            position: absolute;
+            top: 15px;
+            left: 15px;
+            display: inline-block;
+            background-color: green; /* Green color */
+            color: white;
+            padding: 10px 20px;
+            text-decoration: none;
+            font-weight: bold;
+            border-radius: 4px;
+            z-index: 10; /* Ensure it stays above other content */
+        }
+        .back-button:hover {
+            background-color: darkgreen; /* Darker green color on hover */
+        }
+        /* Container */
         .container {
+            width: 85%; /* Decreased width for smaller template size */
+            max-width: 450px; /* Reduced max-width */
+            margin: 30px auto 0; /* Added margin-top to push content down */
+            padding: 15px;
+            background-color: white;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
             border-radius: 8px;
         }
         .order-item {
+            padding: 12px;
+            border: 1px solid #6c757d;
+            margin-bottom: 12px;
             border-radius: 5px;
         }
         .order-details {
+            font-size: 14px;
             font-weight: bold;
+            color: black;
         }
         .order-details p {
+            margin: 4px 0;
         }
         .order-date-time {
+            font-size: 11px;
+            color: black;
         }
         .order-price {
+            font-size: 13px;
             font-weight: bold;
+            color: black;
+            margin: 5px 0;
         }
         .order-status {
+            font-size: 11px;
             font-weight: bold;
+            margin-top: 6px;
+        }
+        .order-status.pending {
+            color: green;
+        }
+        .order-status.completed {
+            color: #28a745;
         }
         .order-buttons {
+            margin-top: 6px;
         }
         .reorder-btn, .rate-order-btn {
             background-color: #ff7f00;
             color: white;
             border: none;
+            padding: 6px 12px;
+            margin-right: 8px;
             cursor: pointer;
             border-radius: 4px;
         }
         .reorder-btn:hover, .rate-order-btn:hover {
             background-color: #f55b00;
         }
         .total-price {
+            font-size: 14px;
             font-weight: bold;
             color: #333;
+            margin-top: 15px;
         }
         .order-heading {
+            font-size: 16px;
             font-weight: bold;
+            color: #ff7f00;
+            margin-bottom: 15px;
             text-align: center;
         }
         .show-more-btn {
             background-color: #ff7f00;
             color: white;
             cursor: pointer;
             border-radius: 4px;
             margin-top: 20px;
+            font-weight: bold;
         }
         .show-more-btn:hover {
             background-color: #f55b00;
         }
+        /* Responsive design adjustments */
+        @media (max-width: 480px) {
+            .container {
+                width: 90%;
+                margin: 30px auto 0;
+                padding: 10px;
+            }
+            .order-details {
+                font-size: 12px;
+            }
+            .order-price {
+                font-size: 12px;
+            }
+            .order-status {
+                font-size: 10px;
             }
             .order-heading {
+                font-size: 14px;
+            }
+            .show-more-btn {
+                padding: 6px 12px;
+            }
+            .back-button {
+                top: 10px;
+                left: 10px;
+                padding: 8px 16px;
             }
         }
     </style>
 </head>
 <body>
+<!-- Background container with light orange -->
+<div class="background">
+    <a href="{{ url_for('menu') }}" class="back-button"><i class="fa fa-arrow-left"></i></a>
+    <div class="container">
+        <div class="order-heading">Order History</div>
+        <!-- Loop through the orders (first 3) -->
+        {% for order in orders[:3] %}
         <div class="order-item">
             <div class="order-details">
                 <p>{{ order.formatted_items }}</p>
             </div>
             <div class="order-date-time">
+                <p>{{ order.formatted_date }}</p>
             </div>
             <div class="order-price">
                 <p>Total: ₹{{ order.Total_Bill__c }}</p>
             </div>
+            <div class="order-status {% if order.order_status == 'Pending' %}pending{% else %}completed{% endif %}">
+                <p>Status: {{ order.order_status }}</p>
+            </div>
         </div>
         {% endfor %}
+        <!-- Loop through the remaining orders (hidden initially) -->
+        <div class="more-orders" id="more-orders">
+            {% for order in orders[3:] %}
+            <div class="order-item">
+                <div class="order-details">
+                    <p>{{ order.formatted_items }}</p>
+                </div>
+                <div class="order-date-time">
+                    <p>Order Placed: {{ order.formatted_date }}</p>
+                </div>
+                <div class="order-price">
+                    <p>Total: ₹{{ order.Total_Bill__c }}</p>
+                </div>
+                <div class="order-status {% if order.order_status == 'Pending' %}pending{% else %}completed{% endif %}">
+                    <p>Status: {{ order.order_status }}</p>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+        <!-- Show More button -->
+        {% if orders|length > 3 %}
+        <button class="show-more-btn" onclick="toggleOrders()">Show More</button>
+        {% endif %}
+        <!-- If no orders exist -->
+        {% if not orders %}
+        <div class="no-orders">
+            <p>No orders found.</p>
+        </div>
+        {% endif %}
     </div>
 </div>
 <script>
   function toggleOrders() {
     const moreOrders = document.getElementById("more-orders");
     const button = document.querySelector(".show-more-btn");
     if (moreOrders.style.display === "none") {
       moreOrders.style.display = "block";
       button.innerHTML = "Show Less";  // Change button text
 </script>
 </body>
+</html>