BiryaniHubflaskSalesTeamrammohan1

Sleeping

App Files Files Community

BiryaniHubflaskSalesTeamrammohan1 / templates /order.html

nagasurendra

Update templates/order.html

4b3026a verified 9 months ago

raw

history blame

5.4 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Order Summary</title>
	<!-- Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
	<style>
	body {
	font-family: 'Arial', sans-serif;
	background-color: #fdf4e3; /* Light cream background */
	color: #333333; /* Dark gray text */
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	}

	.order-container {
	max-width: 768px;
	margin: 40px auto;
	padding: 20px;
	background-color: #ffffff; /* White card background */
	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 {
	font-size: 2rem;
	font-weight: bold;
	color: #c04e01; /* Warm orange color for the title */
	text-align: center;
	margin-bottom: 20px;
	}

	.section-title {
	font-size: 1.5rem;
	font-weight: bold;
	color: #555555; /* Slightly lighter dark gray */
	margin-bottom: 10px;
	}

	.order-details {
	background-color: #fff5e1; /* Soft beige for the details section */
	border-radius: 10px;
	padding: 15px;
	font-size: 1rem;
	line-height: 1.8;
	color: #4a4a4a; /* Medium gray text for readability */
	}

	.order-item {
	margin-bottom: 10px;
	padding: 10px;
	background-color: #fffcf5; /* Slightly lighter beige for individual items */
	border-radius: 8px;
	border: 1px solid #ffe5b4; /* Light orange border for separation */
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.order-summary {
	margin-top: 20px;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: right;
	color: #333333; /* Dark gray */
	}

	.total-price {
	font-size: 1.8rem;
	color: #2b9348; /* Green for the total price */
	}

	.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;
	}

	.back-to-menu:hover {
	background-color: #e64a19; /* Darker orange on hover */
	text-decoration: none;
	}

	footer {
	background-color: #333333; /* Dark gray background */
	color: #ffffff; /* White text */
	text-align: center;
	padding: 15px 10px;
	margin-top: auto;
	}

	footer p {
	margin: 0;
	font-size: 1rem;
	}

	footer p span {
	color: #ffcc00; /* Golden highlight for the message */
	font-weight: bold;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="order-container">
	<h2 class="order-title">Your Order Summary</h2>

	<!-- Items Section -->
	<div>
	<h3 class="section-title">Order Details:</h3>
	{% if order %}
	<div class="order-details">
	{% for line in order.Order_Details__c.split('\n') %}
	<div class="order-item">
	<span>{{ line \| safe }}</span>
	</div>
	{% endfor %}
	</div>
	{% else %}
	<p>No order details available.</p>
	{% endif %}
	</div>

	<!-- Total Section -->
	{% if order %}
	<div class="order-summary mt-4">
	<span>Total: </span>
	<span class="total-price">${{ order.Total_Amount__c }}</span>
	<div class="order-summary mt-4">
	<span>Discount: </span>
	<span class="total-price">${{ order.Discount__c }}</span> <!-- Display discount -->
	</div>
	<div class="order-summary mt-4">
	<span>Total Bill: </span>
	<span class="total-price">${{ order.Total_Bill__c }}</span> <!-- Display total bill -->
	</div>

	</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>