BiryaniHubflaskSalesTeamcustomization

Sleeping

App Files Files Community

BiryaniHubflaskSalesTeamcustomization / templates /order.html

nagasurendra

Update templates/order.html (#5)

7bf5661 verified 17 days ago

raw

history blame contribute delete

8.07 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
	<style>
	body {
	font-family: 'Arial', sans-serif;
	background-color: #fdf4e3; /* Updated background color */
	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; /* Set the container background to white */
	border-radius: 15px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	border: 1px solid #ffffff;
	flex-grow: 1;
	}
	.cart-item {
	display: flex;
	justify-content: space-between;
	background-color: #fffcf5; /* Slightly lighter beige */
	border-radius: 8px;
	border: 1px solid #ffe5b4; /* Light orange border */
	padding: 10px;
	margin-bottom: 10px;
	}
	.cart-item img {
	width: 70px;
	height: 70px;
	object-fit: cover;
	border-radius: 5px;
	border: 1px solid #ffcc80; /* Light orange border around images */
	}
	.cart-item-details {
	flex: 1;
	margin-left: 15px;
	}
	.cart-item-title {
	font-size: 1.2rem;
	font-weight: bold;
	color: #000000; /* Change the color to black */
	}
	.cart-item-addons,
	.cart-item-instructions {
	font-size: 0.9rem;
	color: #000000; /* Change the color to black */
	}
	.cart-item-actions {
	font-size: 1.2rem;
	font-weight: bold;
	color: #2b9348;
	}
	.order-summary {
	text-align: right;
	margin-top: 15px;
	}
	.total-price {
	font-size: 1.5rem;
	font-weight: bold;
	color: #2b9348; /* Green for the total price */
	}
	.back-to-menu {
	display: block;
	margin: 30px auto 10px auto;
	padding: 10px 20px;
	background-color: #ff5722;
	color: #ffffff;
	border: none;
	border-radius: 25px;
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	width: 100%;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: background-color 0.3s ease;
	}
	.back-to-menu:hover {
	background-color: #ff5722;
	text-decoration: none;
	}
	footer {
	background-color: #333333;
	color: #ffffff;
	text-align: center;
	padding: 15px 10px;
	margin-top: auto;
	}
	footer p {
	margin: 0;
	font-size: 1rem;
	}
	footer p span {
	color: #ffcc00;
	font-weight: bold;
	}
	.totsl_bill {
	max-width: 768px;
	}
	.yourorder {
	font-family: Serif;
	color: #ff5722; /* Orange color for "Your Order Summary" */
	font-size: 1.5rem; /* Adjusted for better visibility */
	font-weight: bold;
	}
	/* Remove any gap between Sub-Total and Discount */
	.d-flex {
	margin-bottom: 0px !important; /* Remove margin */
	}
	.d-flex:first-child {
	margin-top: 0px !important; /* Ensure no space above Sub-Total */
	}
	/* Remove padding and margins from the individual fields */
	.d-flex .cart-item-actions {
	margin-bottom: 0px !important; /* Remove margin between fields */
	}
	.cart-item-instructions {
	word-wrap: break-word; /* Ensures text wraps to the next line */
	white-space: normal; /* Allows text to wrap naturally */
	overflow-wrap: break-word; /* Breaks long words to prevent overflow */
	max-width: 100%; /* Ensures the text stays within the container's width */
	line-height: 1.5; /* Increases line height for better readability */
	padding: 5px 0; /* Adds some padding for better text spacing */
	word-break: break-word; /* Prevents words from overflowing */
	}

	</style>
	</head>
	<body>
	<div class="container">
	<div class="order-container">
	<h4 class="mb-4 text-center yourorder">Your Order Summary</h4>

	{% if order %}
	{% for line in order.Order_Details__c.split('\n') %}
	{% set item_parts = line.split('\|') %}
	<div class="cart-item">
	<!-- Item Image -->
	<img src="{{ item_parts[4].strip().replace('Image:', '') }}"
	alt="{{ item_parts[0].strip() }}"
	onerror="this.src='/static/placeholder.jpg';">

	<!-- Item Details -->
	<div class="cart-item-details">
	<div class="cart-item-title">{{ item_parts[0].strip() }}</div> <!-- Item Name & Quantity -->


	<div class="cart-item-addons">
	<small class="text-muted">Add-ons: {{ item_parts[1].strip().replace('Add-Ons:', '') }}</small>
	</div>

	<div class="cart-item-instructions">
	<small class="text-muted">Instructions: {{ item_parts[2].strip().replace('Instructions:', '') }}</small>
	</div>
	</div>

	<!-- Price -->
	<div class="cart-item-actions m">
	<span style="font-size: 16px; margin-right: 13px">{{ item_parts[3].strip().replace('Price:', '') }}</span>
	</div>
	</div>
	{% endfor %}

	<!-- Total Section -->
	<div class="container mt-5 cart-item">
	<div class="container">
	<div class="d-flex justify-content-between mb-3">
	<p><strong>Sub-Total:</strong></p>
	<p class="cart-item-actions" style="font-size: 16px;">${{ order.Total_Amount__c }}</p>
	</div>
	<div class="d-flex justify-content-between mb-3">
	<p><strong>Discount:</strong></p>
	<p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"\|format(order.Discount__c) }}</p>
	</div>
	<!-- Add dotted line here -->
	<div style="border-bottom: 2px dotted #000; margin-bottom: 10px;"></div>
	<div class="d-flex justify-content-between mb-3">
	<p><strong>Total Bill:</strong></p>
	<p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"\|format(order.Total_Bill__c) }}</p>
	</div>
	</div>
	</div>

	{% else %}
	<p class="text-center">No order details available.</p>
	{% 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>