kada
Never
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Santhosh Canteen System</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5; /* Light gray background color */
}
header {
background-color: #8B4513;
color: white;
padding: 20px 0;
text-align: center;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
.menu {
flex: 1;
margin-bottom: 40px;
}
.menu h2 {
color: #8B4513;
font-size: 24px;
margin-bottom: 10px;
}
.menu-item {
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
background-color: #fff;
transition: transform 0.3s ease;
}
.menu-item:hover {
transform: translateY(-5px);
}
.menu-item img {
display: block;
margin: 0 auto 10px;
max-width: 100px;
max-height: 100px;
border-radius: 5px;
}
.menu-item h3 {
margin-top: 0;
font-size: 18px;
color: #333;
}
.menu-item p {
margin: 0;
color: #666;
}
.order-form {
margin-top: 20px;
}
.order-form input[type="number"] {
width: 50px;
padding: 5px;
}
.order-form input[type="submit"] {
background-color: #8B4513;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
.price-tracker {
margin-top: 20px;
text-align: center;
}
.cart {
flex: 1;
margin-top: 20px;
}
.cart h2 {
color: #8B4513;
font-size: 24px;
margin-bottom: 10px;
}
.cart-item {
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
background-color: #fff;
}
.cart-item p {
margin: 0;
color: #666;
}
#cash-payment-button {
background-color: brown;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#cash-payment-button:hover {
background-color: #A0522D;
}
#order-success {
text-align: center;
margin-top: 20px;
display: none;
}
#order-success p {
margin-bottom: 10px;
color: #4CAF50;
font-size: 18px;
}
#order-total-price {
font-weight: bold;
}
#submit-order {
background-color: #8B4513;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#submit-order:hover {
background-color: #A0522D;
}
label {
font-weight: bold;
color: #8B4513;
margin-right: 10px;
}
select {
padding: 8px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 16px;
color: #666;
}
option {
color: #666;
}
</style>
</head>
<body>
<header>
<h1>Santhosh Canteen System</h1>
</header>
<main>
<div class="menu">
<h2>Beverages</h2>
<div class="menu-item" data-price="12.00">
<img src="https://images.livemint.com/img/2024/02/26/1200x900/tea_quality_India_1708969986726_1708970008044.jpg" alt="Beverage 1">
<h3>Tea</h3>
<p>Price: ₹12.00</p>
<form class="order-form" action="#" method="post">
<label for="beverage1">Quantity:</label>
<input type="number" id="beverage1" name="beverage1" min="1" value="1">
<input type="submit" value="Order">
</form>
</div>
<div class="menu-item" data-price="15.00">
<img src="https://neurosciencenews.com/files/2023/06/coffee-brain-caffeine-neuroscincces.jpg" alt="Beverage 2">
<h3>Coffee</h3>
<p>Price: ₹15.00</p>
<form class="order-form" action="#" method="post">
<label for="beverage2">Quantity:</label>
<input type="number" id="beverage2" name="beverage2" min="1" value="1">
<input type="submit" value="Order">
</form>
</div>
<div class="menu-item" data-price="20.00">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRqziVfAEvl4-DMXrj9wYf4RgWLFoaX8jc1PnN4h-G2sw&s" alt="Beverage 3">
<h3>Sarbath</h3>
<p>Price: ₹20.00</p>
<form class="order-form" action="#" method="post">
<label for="beverage3">Quantity:</label>
<input type="number" id="beverage3" name="beverage3" min="1" value="1">
<input type="submit" value="Order">
</form>
</div>
<!-- Add more beverage items as needed -->
</div>
<div class="menu">
<h2>Snacks</h2>
<div class="menu-item" data-price="16.00">
<img src="https://i.ytimg.com/vi/oUtq_Fnqymo/maxresdefault.jpg" alt="Snack 1">
<h3>Puffs</h3>
<p>Price: ₹16.00</p>
<form class="order-form" action="#" method="post">
<label for="snack1">Quantity:</label>
<input type="number" id="snack1" name="snack1" min="1" value="1">
<input type="submit" value="Order">
</form>
</div>
<div class="menu-item" data-price="20.00">
<img src="https://www.onionz.in/uploads/items/d5093bf1a72f775b384d3825f573335e.jpg" alt="Snack 2">
<h3>Uzhunnuvada</h3>
<p>Price: ₹20.00</p>
<form class="order-form" action="#" method="post">
<label for="snack2">Quantity:</label>
<input type="number" id="snack2" name="snack2" min="1" value="1">
<input type="submit" value="Order">
</form>
</div>
<div class="menu-item" data-price="8.00">
<img src="https://www.shutterstock.com/image-photo/banana-cluster-isolated-600nw-575528746.jpg" alt="Snack 3">
<h3>Banana</h3>
<p>Price: ₹8.00</p>
<form class="order-form" action="#" method="post">
<label for="snack3">Quantity:</label>
<input type="number" id="snack3" name="snack3" min="1" value="1">
<input type="submit" value="Order">
</form>
</div>
<!-- Add more snack items as needed -->
</div>
<div class="price-tracker">
<h2>Total Price</h2>
<p id="total-price">₹0.00</p>
</div>
<div class="cart" id="cart">
<h2>Cart</h2>
</div>
<label for="table-no">Table No:</label>
<select id="table-no" name="table-no">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<button id="cash-payment-button">Pay with Cash</button>
<button id="submit-order">New Order</button>
<div id="order-success">
<p>Order Successful!</p>
<p>Total Price: ₹<span id="order-total-price">0.00</span></p>
</div>
</main>
<script>
document.addEventListener("DOMContentLoaded", function() {
const totalPriceElement = document.getElementById("total-price");
const cartElement = document.getElementById("cart");
const orderSuccessElement = document.getElementById("order-success");
const orderTotalPriceElement = document.getElementById("order-total-price");
let totalPrice = 0;
// Function to update total price
function updateTotalPrice(price) {
totalPrice += price;
totalPriceElement.textContent = `₹${totalPrice.toFixed(2)}`;
}
// Function to update cart
function updateCart(itemName, quantity, price) {
const cartItem = document.createElement("div");
cartItem.classList.add("cart-item");
cartItem.innerHTML = `
<p><strong>${itemName}</strong></p>
<p>Quantity: ${quantity}</p>
<p>Price: ₹${(quantity * price).toFixed(2)}</p>`;
cartElement.appendChild(cartItem);
}
// Add event listeners to order forms
const orderForms = document.querySelectorAll('.order-form');
orderForms.forEach(form => {
form.addEventListener('submit', function(event) {
event.preventDefault();
const itemName = form.parentNode.querySelector('h3').textContent;
const price = parseFloat(form.parentNode.dataset.price);
const quantity = parseInt(form.querySelector('input[type="number"]').value);
updateTotalPrice(quantity * price);
updateCart(itemName, quantity, price);
});
});
// Event listener for Cash Payment button
document.getElementById("cash-payment-button").addEventListener("click", function() {
// Perform actions for cash payment (e.g., display a message or update the order status)
const tableNo = document.getElementById("table-no").value;
alert(`Thank you for your order! Please pay in cash upon delivery or pickup. Table No: ${tableNo}`);
// Optionally, you can perform additional actions here, such as marking the order as paid
});
// Event listener for submit order button
document.getElementById("submit-order").addEventListener("click", function() {
// Display order success message with total price
orderSuccessElement.style.display = "block";
orderTotalPriceElement.textContent = totalPrice.toFixed(2);
// Clear the cart and reset the total price
cartElement.innerHTML = "<h2>Cart</h2>";
totalPrice = 0;
totalPriceElement.textContent = "₹0.00";
});
});
</script>
</body>
</html>