<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fuel Receipt Generator</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 20px;
background: #f2f2f2;
font-family: Arial, sans-serif;
}
.container {
max-width: 900px;
margin: auto;
display: flex;
gap: 25px;
align-items: flex-start;
}
.panel {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.12);
width: 100%;
}
h2 {
margin-top: 0;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
font-size: 14px;
}
input,
select {
width: 100%;
padding: 9px;
margin-top: 4px;
border: 1px solid #bbb;
border-radius: 4px;
font-size: 14px;
}
button {
width: 100%;
padding: 12px;
margin-top: 15px;
border: none;
border-radius: 5px;
background: #222;
color: white;
font-size: 16px;
cursor: pointer;
}
button:hover {
background: #444;
}
/* =========================
58MM THERMAL RECEIPT
========================= */
.receipt {
width: 58mm;
min-height: 100mm;
background: white;
padding: 3mm;
font-family: "Courier New", monospace;
/* INCREASED TEXT SIZE */
font-size: 11.5px;
/* INCREASED LINE SPACING */
line-height: 1.45;
color: #000;
margin: auto;
}
.center {
text-align: center;
}
.bold {
font-weight: bold;
}
/* Pump name */
.title {
font-size: 14px;
font-weight: bold;
line-height: 1.3;
}
/* */
. {
font-size: 9.5px;
font-weight: bold;
border: 1px dashed #000;
padding: 2px;
margin: 5px 0;
line-height: 1.2;
}
/* Separator */
.line {
border-top: 1px dashed #000;
margin: 6px 0;
}
/* Receipt rows */
.row {
display: flex;
justify-content: space-between;
gap: 5px;
/* slightly larger spacing */
min-height: 18px;
}
.row span:first-child {
white-space: nowrap;
}
.row span:last-child {
text-align: right;
}
/* Important values */
.big {
font-size: 13px;
font-weight: bold;
}
/* Footer */
.footer {
margin-top: 7px;
text-align: center;
font-size: 10px;
line-height: 1.3;
}
/* =========================
MOBILE
========================= */
@media screen and (max-width: 700px) {
.container {
flex-direction: column;
}
}
/* =========================
PRINT SETTINGS
========================= */
@media print {
@page {
size: 58mm auto;
margin: 0;
}
html,
body {
width: 58mm;
margin: 0;
padding: 0;
background: white;
}
body * {
visibility: hidden;
}
.receipt,
.receipt * {
visibility: visible;
}
.receipt {
position: absolute;
left: 0;
top: 0;
width: 58mm;
margin: 0;
padding: 3mm;
box-shadow: none;
font-size: 11.5px;
line-height: 1.45;
}
}
</style>
</head>
<body>
<div class="container">
<!-- =========================
INPUT PANEL
========================= -->
<div class="panel">
<h2>Fuel Receipt Generator</h2>
<p>
<b></b>
</p>
<label>Business / Pump Name</label>
<input
id="pumpName"
value="SAMPLE FUEL STATION"
>
<label>Address</label>
<input
id="address"
value="MIDC ROAD"
>
<label>City</label>
<input
id="city"
value="OSMANABAD"
>
<label>Phone</label>
<input
id="phone"
value="00000 00000"
>
<label>Bill Number</label>
<input
id="billNo"
value="758969"
>
<label>Transaction ID</label>
<input
id="transactionId"
value="0000000000758489"
>
<label>Vehicle Number</label>
<input
id="vehicleNo"
placeholder="MH XX XX 0000"
>
<label>Date</label>
<input
type="date"
id="date"
>
<label>Time</label>
<input
type="time"
id="time"
step="1"
>
<label>Fuel</label>
<select id="fuel">
<option>Petrol</option>
<option>Diesel</option>
<option>CNG</option>
<option>Other</option>
</select>
<label>Density (kg/m³)</label>
<input
id="density"
type="number"
value="754"
>
<label>FP ID</label>
<input
id="fpId"
value="3"
>
<label>Nozzle Number</label>
<input
id="nozzle"
value="1"
>
<label>Amount (₹)</label>
<input
id="amount"
type="number"
value="100"
step="0.01"
>
<label>Rate (₹/Litre)</label>
<input
id="rate"
type="number"
value="112.45"
step="0.01"
>
<button onclick="updateReceipt()">
Update Receipt
</button>
<button onclick="window.print()">
🖨 Print Receipt
</button>
</div>
<!-- =========================
RECEIPT PREVIEW
========================= -->
<div class="panel">
<div id="receipt" class="receipt">
<div class="center title" id="rPump">
SAMPLE FUEL STATION
</div>
<div class="center" id="rAddress">
MIDC ROAD
</div>
<div class="center" id="rCity">
OSMANABAD
</div>
<div class="center" id="rPhone">
00000 00000
</div>
<div class="center sample">
RECEIPT
</div>
<div class="line"></div>
<div class="row">
<span>Bill No:</span>
<span id="rBill">
758969
</span>
</div>
<div class="row">
<span>Trns. ID:</span>
<span id="rTransaction">
0000000000758489
</span>
</div>
<div class="row">
<span>Attnd. ID:</span>
<span></span>
</div>
<div class="row">
<span>Vehi. No:</span>
<span id="rVehicle">
Not Entered
</span>
</div>
<div class="row">
<span>Date:</span>
<span id="rDate"></span>
</div>
<div class="row">
<span>Time:</span>
<span id="rTime"></span>
</div>
<div class="row">
<span>FP. ID:</span>
<span id="rFp">
3
</span>
</div>
<div class="row">
<span>Nozl No:</span>
<span id="rNozzle">
1
</span>
</div>
<div class="line"></div>
<div class="row">
<span>Fuel:</span>
<span id="rFuel">
Petrol
</span>
</div>
<div class="row">
<span>Density:</span>
<span id="rDensity">
754 kg/m3
</span>
</div>
<div class="line"></div>
<div class="row">
<span>Preset:</span>
<span id="rPreset">
Rs.100.00
</span>
</div>
<div class="row">
<span>Rate:</span>
<span id="rRate">
Rs.112.45
</span>
</div>
<div class="row">
<span>Sale:</span>
<span id="rSale">
Rs.100.00
</span>
</div>
<div class="row big">
<span>Volume:</span>
<span id="rVolume">
0.89 L
</span>
</div>
<div class="line"></div>
<div class="footer">
THANK YOU
</div>
<div class="footer">
</div>
</div>
</div>
</div>
<script>
/* =========================
UPDATE RECEIPT
========================= */
function updateReceipt() {
const pumpName =
document.getElementById("pumpName").value;
const address =
document.getElementById("address").value;
const city =
document.getElementById("city").value;
const phone =
document.getElementById("phone").value;
const billNo =
document.getElementById("billNo").value;
const transactionId =
document.getElementById("transactionId").value;
const vehicleNo =
document.getElementById("vehicleNo").value;
const date =
document.getElementById("date").value;
const time =
document.getElementById("time").value;
const fuel =
document.getElementById("fuel").value;
const density =
document.getElementById("density").value;
const fpId =
document.getElementById("fpId").value;
const nozzle =
document.getElementById("nozzle").value;
const amount =
parseFloat(
document.getElementById("amount").value
) || 0;
const rate =
parseFloat(
document.getElementById("rate").value
) || 0;
/* Calculate volume */
let volume = 0;
if (rate > 0) {
volume = amount / rate;
}
/* Update receipt */
document.getElementById("rPump").innerText =
pumpName;
document.getElementById("rAddress").innerText =
address;
document.getElementById("rCity").innerText =
city;
document.getElementById("rPhone").innerText =
phone;
document.getElementById("rBill").innerText =
billNo;
document.getElementById("rTransaction").innerText =
transactionId;
document.getElementById("rVehicle").innerText =
vehicleNo || "Not Entered";
document.getElementById("rDate").innerText =
date ? formatDate(date) : "";
document.getElementById("rTime").innerText =
time || "";
document.getElementById("rFuel").innerText =
fuel;
document.getElementById("rDensity").innerText =
density + " kg/m3";
document.getElementById("rFp").innerText =
fpId;
document.getElementById("rNozzle").innerText =
nozzle;
document.getElementById("rPreset").innerText =
"Rs." + amount.toFixed(2);
document.getElementById("rRate").innerText =
"Rs." + rate.toFixed(2);
document.getElementById("rSale").innerText =
"Rs." + amount.toFixed(2);
document.getElementById("rVolume").innerText =
volume.toFixed(2) + " L";
}
/* =========================
DATE FORMAT
========================= */
function formatDate(dateString) {
const parts =
dateString.split("-");
if (parts.length !== 3) {
return dateString;
}
return parts[2] + "/" +
parts[1] + "/" +
parts[0].slice(-2);
}
/* =========================
CURRENT DATE / TIME
========================= */
window.onload = function() {
const now = new Date();
const year =
now.getFullYear();
const month =
String(
now.getMonth() + 1
).padStart(2, "0");
const day =
String(
now.getDate()
).padStart(2, "0");
const hours =
String(
now.getHours()
).padStart(2, "0");
const minutes =
String(
now.getMinutes()
).padStart(2, "0");
const seconds =
String(
now.getSeconds()
).padStart(2, "0");
document.getElementById("date").value =
year + "-" + month + "-" + day;
document.getElementById("time").value =
hours + ":" + minutes + ":" + seconds;
updateReceipt();
};
</script>
</body>
</html>