<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Meat Ordering and Billing System</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 20px;
text-align: center;
}
.container {
max-width: 600px;
margin: auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px #0000001f;
}
h1 {
color: #333;
margin-bottom: 20px;
}
label {
display: block;
margin-top: 10px;
}
input, select {
width: calc(100% – 20px);
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
margin-top: 20px;
border: none;
background-color: #28a745;
color: white;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
.bill {
margin-top: 30px;
display: none;
text-align: left;
background-color: #f1f1f1;
padding: 20px;
border-radius: 10px;
}
.bill button {
background-color: #007bff;
}
.bill button:hover {
background-color: #0069d9;
}
.shop-details {
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class=”container”>
<h1>🍖 Meat Ordering and Billing System 🥩</h1>
<form id=”orderForm”>
<div class=”user-details”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” required>
<label for=”address”>Address:</label>
<input type=”text” id=”address” required>
<label for=”phone”>Phone Number:</label>
<input type=”text” id=”phone” required>
<label for=”age”>Age:</label>
<input type=”number” id=”age” required>
</div>
<div class=”meat-selection”>
<label for=”meat”>Choose Meat:</label>
<select id=”meat” required>
<option value=”buff”>Buff</option>
<option value=”beef”>Beef</option>
<option value=”mutton”>Mutton</option>
<option value=”chicken”>Chicken</option>
<option value=”pork”>Pork</option>
<option value=”lamb”>Lamb</option>
</select>
<label for=”weight”>Weight (kg):</label>
<input type=”number” id=”weight” required>
</div>
<div class=”billing-details”>
<label for=”discount”>Discount (Rs):</label>
<input type=”number” id=”discount” value=”0″>
<label for=”vat”>VAT (%) :</label>
<input type=”number” id=”vat” value=”13″>
</div>
<div class=”payment-method”>
<label for=”payment”>Payment Method:</label>
<select id=”payment”>
<option value=”cash”>Cash</option>
</select>
<label for=”delivery”>Free Delivery:</label>
<input type=”checkbox” id=”delivery” checked>
</div>
<button type=”button” onclick=”generateBill()”>Generate Bill</button>
</form>
<div id=”bill” class=”bill”>
<div class=”shop-details”>
<h2>Dhorpatan Meat Shop, Baglung</h2>
<p>Contact: 9827106244</p>
</div>
<h3>Bill Details</h3>
<div id=”billDetails”></div>
<button onclick=”printBill()”>Print Bill</button>
<button onclick=”downloadBill(‘pdf’)”>Download as PDF</button>
<button onclick=”downloadBill(‘jpeg’)”>Download as JPEG</button>
<button onclick=”emailBill()”>Email Bill</button>
<button onclick=”messageBill()”>Message Bill</button>
</div>
</div>
<script>
function generateBill() {
const name = document.getElementById(‘name’).value;
const address = document.getElementById(‘address’).value;
const phone = document.getElementById(‘phone’).value;
const meat = document.getElementById(‘meat’).value;
const weight = document.getElementById(‘weight’).value;
const discount = parseFloat(document.getElementById(‘discount’).value) || 0;
const vat = parseFloat(document.getElementById(‘vat’).value) || 13;
const delivery = document.getElementById(‘delivery’).checked ? “Free Delivery” : “No Delivery”;
const meatPrices = {
buff: 450,
beef: 1200,
mutton: 1000,
chicken: 500,
pork: 400,
lamb: 1200
};
const benefits = {
buff: “Rich in protein, good for building muscle.”,
beef: “High in iron and B vitamins, supports energy production.”,
mutton: “Rich in minerals, good for bone health.”,
chicken: “Low in fat, good for weight management.”,
pork: “High in thiamine, supports energy metabolism.”,
lamb: “Rich in omega-3, good for heart health.”
};
const price = meatPrices[meat] * weight;
const discountAmount = discount;
const vatAmount = (price * vat) / 100;
const total = price – discountAmount + vatAmount;
const billDetails = `
<p><strong>Name:</strong> ${name}</p>
<p><strong>Address:</strong> ${address}</p>
<p><strong>Phone Number:</strong> ${phone}</p>
<p><strong>Total Price:</strong> Rs ${total.toFixed(2)}</p>
<p><strong>Delivery:</strong> ${delivery}</p>
<p><strong>Benefits of ${meat}:</strong> ${benefits[meat]}</p>
`;
document.getElementById(‘billDetails’).innerHTML = billDetails;
document.getElementById(‘bill’).style.display = ‘block’;
}
function printBill() {
const printContent = document.getElementById(‘bill’).innerHTML;
const originalContent = document.body.innerHTML;
document.body.innerHTML = printContent;
window.print();
document.body.innerHTML = originalContent;
}
function downloadBill(format) {
// Download logic for PDF and JPEG (placeholder function)
alert(`Bill downloaded as ${format.toUpperCase()}`);
}
function emailBill() {
const name = document.getElementById(‘name’).value;
const address = document.getElementById(‘address’).value;
const phone = document.getElementById(‘phone’).value;
const billDetails = document.getElementById(‘billDetails’).innerHTML;
const emailContent = `
Hi ${name},<br><br>
Thank you for your order! Here are your billing details:<br><br>
${billDetails}<br><br>
Regards,<br>
Dhorpatan Meat Shop, Baglung<br>
Contact: 9827106244
`;
// Placeholder: Simulating sending an email
console.log(“Email content:”, emailContent);
alert(‘Bill sent to your email.’);
}
function messageBill() {
// Message logic (placeholder function)
alert(‘Bill sent to your phone.’);
}
</script>
</body>
</html>