BiryaniHubflaskSalesTeam8

Sleeping

App Files Files Community

BiryaniHubflaskSalesTeam8 / templates /reward_status.html

nagasurendra

Update templates/reward_status.html

bae22f4 verified 16 days ago

raw

history blame contribute delete

7.46 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Reward Status</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	background-color: #f9f9f9;
	margin: 0;
	padding: 0;
	}
	.container {
	width: 90%;
	margin: auto;
	padding-top: 20px;
	}
	.order-confirmed {
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	text-align: center;
	margin-bottom: 20px;
	}
	.order-confirmed h1 {
	font-size: 2em;
	color: #ff6f00;
	}
	.reward-status {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 20px; /* Adjust spacing between items */
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}
	.item-section {
	width: 100%; /* Default to 100% width on small screens */
	height: auto; /* Ensure dynamic height */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 10px;
	flex-grow: 1; /* Allow the container to grow as needed */
	}
	@media (min-width: 768px) {
	.item-section {
	width: 48%; /* When on larger screens, use 48% to create side-by-side layout */
	}
	}
	.item-image {
	width: 100%;
	height: 250px;
	object-fit: cover;
	border-radius: 8px;
	}
	.item-info {
	text-align: center;
	}
	.item-info h3 {
	font-size: 1.5em;
	margin-top: 10px;
	}
	.ingredient-card {
	display: flex;
	justify-content: space-between;
	padding-top: 10px;
	flex-wrap: wrap;
	gap: 10px; /* Ensures ingredients are spaced out evenly */
	}
	.ingredient {
	width: 48%;
	text-align: center;
	cursor: pointer;
	margin-top: 10px;
	transition: transform 0.3s ease; /* Added smooth hover effect */
	}
	.ingredient:hover {
	transform: scale(1.05); /* Makes the ingredient slightly larger when hovered */
	}
	.ingredient img {
	width: 100%;
	height: 100px;
	object-fit: cover;
	border-radius: 8px;
	}
	/* Modal Styling */
	.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	overflow: auto;
	padding-top: 60px; /* Allow for more content to be shown */
	}
	.modal-content {
	background-color: #fff;
	margin: 5% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%; /* Adjust to 80% of screen width */
	border-radius: 8px;
	position: relative;
	}
	.close {
	color: #aaa;
	font-size: 2em;
	font-weight: bold;
	position: absolute;
	right: 20px; /* Positioned inside the modal */
	top: 10px; /* Placed above the image */
	cursor: pointer;
	}
	</style>
	</head>
	<body>

	<div class="container">
	<div class="order-confirmed">
	<h1>Order Confirmed!</h1>
	<p class="delivery-time">Estimated delivery time: 35 minutes</p>
	</div>

	<div class="reward-status">
	<div class="item-section">
	{% for item in order_items %}
	<img class="item-image" src="{{ item.image_url }}" alt="{{ item.name }}" onerror="this.src='/static/placeholder.jpg';">
	<div class="item-info">
	<h3>{{ item.name }}</h3>
	<p>Price: ${{ "%.2f"\|format(item.price) }}</p>
	</div>

	<!-- Ingredients Section -->
	<div class="ingredient-card">
	{% if item.ingredients %}
	{% for ingredient in item.ingredients %}
	<div class="ingredient" onclick="showIngredientDetails('{{ loop.index }}', '{{ ingredient.name }}', '{{ ingredient.image }}', '{{ ingredient.health_benefits }}', '{{ ingredient.fun_facts }}')">
	<img src="{{ ingredient.image }}" alt="{{ ingredient.name }}" onerror="this.src='/static/placeholder.jpg';">
	<p>{{ ingredient.name }}</p>
	</div>
	{% endfor %}
	{% else %}
	<p>No ingredients found for {{ item.name }}</p>
	{% endif %}
	</div>

	<!-- Ingredient Modal for each item -->
	<div id="ingredientModal{{ loop.index }}" class="modal">
	<div class="modal-content">
	<span class="close" onclick="closeModal({{ loop.index }})">×</span>
	<div class="modal-header">
	<h2 id="ingredientName{{ loop.index }}"></h2>
	</div>
	<div class="modal-body">
	<img id="ingredientImage{{ loop.index }}" src="" alt="" style="width: 150px; height: 150px; object-fit: cover; border-radius: 8px;">
	<h3>Health Benefits:</h3>
	<ul id="healthBenefits{{ loop.index }}"></ul>
	<h3>Fun Facts:</h3>
	<ul id="funFacts{{ loop.index }}"></ul>
	</div>
	</div>
	</div>
	{% endfor %}
	</div>
	</div>
	</div>

	<script>
	// JavaScript for showing ingredient details in modal
	function showIngredientDetails(index, name, image, healthBenefits, funFacts) {
	const healthBenefitsList = healthBenefits.split(',');
	const funFactsList = funFacts.split(',');
	document.getElementById("ingredientName" + index).textContent = name;
	document.getElementById("ingredientImage" + index).src = image;
	document.getElementById("healthBenefits" + index).innerHTML = '';
	document.getElementById("funFacts" + index).innerHTML = '';

	healthBenefitsList.forEach(function(item) {
	const li = document.createElement("li");
	li.textContent = item.trim();
	document.getElementById("healthBenefits" + index).appendChild(li);
	});

	funFactsList.forEach(function(item) {
	const li = document.createElement("li");
	li.textContent = item.trim();
	document.getElementById("funFacts" + index).appendChild(li);
	});

	document.getElementById("ingredientModal" + index).style.display = "block";
	}

	function closeModal(index) {
	document.getElementById("ingredientModal" + index).style.display = "none";
	}
	</script>

	</body>
	</html>