<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Vegetable Billing System</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 600px;
margin: auto;
}
h2 {
text-align: center;
color: #4CAF50;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type=”text”], input[type=”email”], input[type=”number”] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}
button:hover {
background-color: #45a049;
}
#bill {
display: none;
margin-top: 20px;
border: 1px solid #ccc;
padding: 15px;
border-radius: 8px;
background-color: #fafafa;
}
#bill p {
margin: 5px 0;
}
</style>
</head>
<body>
<div class=”container”>
<h2>Vegetable Billing System</h2>
<form id=”billingForm”>
<label for=”userName”>Name:</label>
<input type=”text” id=”userName” required>
<label for=”userMobile”>Mobile Number:</label>
<input type=”number” id=”userMobile” required>
<label for=”userEmail”>Email:</label>
<input type=”email” id=”userEmail” required>
<label for=”vegetableName”>Vegetable Name:</label>
<input type=”text” id=”vegetableName” required>
<button type=”button” onclick=”generateBill()”>Generate Bill</button>
</form>
<div id=”bill”>
<h3>Bill</h3>
<p id=”billUserName”></p>
<p id=”billUserMobile”></p>
<p id=”billUserEmail”></p>
<p id=”billVegetableName”></p>
<button onclick=”printBill()”>Print Bill</button>
<button onclick=”downloadBill(‘pdf’)”>Download PDF</button>
<button onclick=”downloadBill(‘jpeg’)”>Download JPEG</button>
<button onclick=”emailBill()”>Email Bill</button>
</div>
</div>
<script>
function generateBill() {
const userName = document.getElementById(‘userName’).value;
const userMobile = document.getElementById(‘userMobile’).value;
const userEmail = document.getElementById(‘userEmail’).value;
const vegetableName = document.getElementById(‘vegetableName’).value;
document.getElementById(‘billUserName’).innerText = “Name: ” + userName;
document.getElementById(‘billUserMobile’).innerText = “Mobile Number: ” + userMobile;
document.getElementById(‘billUserEmail’).innerText = “Email: ” + userEmail;
document.getElementById(‘billVegetableName’).innerText = “Vegetable Name: ” + vegetableName;
document.getElementById(‘bill’).style.display = ‘block’;
}
function printBill() {
const billContent = document.getElementById(‘bill’).innerHTML;
const originalContent = document.body.innerHTML;
document.body.innerHTML = billContent;
window.print();
document.body.innerHTML = originalContent;
location.reload();
}
function downloadBill(format) {
const element = document.createElement(‘a’);
const billContent = document.getElementById(‘bill’).innerHTML;
const billBlob = new Blob([billContent], { type: ‘text/html’ });
if (format === ‘pdf’) {
element.href = URL.createObjectURL(billBlob);
element.download = ‘bill.pdf’;
} else if (format === ‘jpeg’) {
element.href = URL.createObjectURL(billBlob);
element.download = ‘bill.jpeg’;
}
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
function emailBill() {
const email = document.getElementById(‘userEmail’).value;
const subject = “Your Vegetable Bill”;
const body = document.getElementById(‘bill’).innerText;
window.location.href = `mailto:${email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
}
</script>
</body>
</html>