Fuel Duty Calculator

<style>
body {
    font-family: Arial, sans-serif;
    background: #f4f4f4;
    margin: 0;
    padding: 12px;
}

.container {
    max-width: 90%;
    margin: auto;
    background: #fff;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(0,0,0,0.12);
}

h2 {
    text-align: center;
}

/* INPUTS */
label {
    display: block;
    margin-top: 12px;
    font-weight: bold;
    font-size: 14px;
}

input {
    width: 100%;
    padding: 14px;
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-top: 6px;
    box-sizing: border-box;
}

/* MODE */
.mode {
    display: flex;
    gap: 10px;
    margin: 10px 0 15px;
}

.mode label {
    flex: 1;
    text-align: center;
    background: #eee;
    padding: 10px;
    border-radius: 8px;
}

/* RESULTS */
.results {
    margin-top: 18px;
    background: #fafafa;
    padding: 12px;
    border-radius: 10px;
}

.row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #e5e5e5;
}

.total {
    font-size: 18px;
    background: #e9ffe9;
    padding: 12px;
    border-radius: 8px;
    margin-top: 10px;
}

/* BUTTON */
.print-btn {
    width: 100%;
    padding: 14px;
    margin-top: 15px;
    font-size: 16px;
    background: #333;
    color: white;
    border: none;
    border-radius: 8px;
}
</style>
</head>

<body>

<div class="container">

<h2>Midlands and Coast Canal Carriers Ltd<br>
  Fuel Duty Calculator</h2>

<!-- PRICE INPUTS -->
<label>Heating Price (£/L)</label>
<input type="number" id="heatingPrice" step="0.01" value="1.23">

<label>Domestic Price (£/L)</label>
<input type="number" id="propulsionPrice" step="0.01" value="1.70">

<div class="mode">
<label><input type="radio" name="mode" value="litres" checked> Litres</label>
<label><input type="radio" name="mode" value="cost"> Cost</label>
</div>

<label>Total Litres / Total £</label>
<input type="number" id="mainInput" step="0.01">

<label>Domestic %</label>
<input type="number" id="percent" step="0.01" value="60">

<div class="results">

<div class="row"><span>Total Litres</span><span id="totalLitres">0.00</span></div>

<div class="row"><span>Heating Litres</span><span id="heatLitres">0.00</span></div>
<div class="row"><span>Domestic Litres</span><span id="propLitres">0.00</span></div>

<div class="row"><span>Heating Cost</span><span id="heatCost">£0.00</span></div>
<div class="row"><span>Domestic Cost</span><span id="propCost">£0.00</span></div>

<div class="row total"><span>Total</span><span id="totalCost">£0.00</span></div>

</div>

<button class="print-btn" onclick="window.print()">Print Receipt</button>

</div>

<script>

const input = document.getElementById('mainInput');
const percent = document.getElementById('percent');
const hpInput = document.getElementById('heatingPrice');
const dpInput = document.getElementById('propulsionPrice');

function mode() {
    return document.querySelector('input[name="mode"]:checked').value;
}

function calc() {

    let heatingPrice = parseFloat(hpInput.value) || 0;
    let domesticPrice = parseFloat(dpInput.value) || 0;

    let value = parseFloat(input.value) || 0;
    let p = Math.min(Math.max(parseFloat(percent.value) || 0, 0), 100);
    let hp = 100 - p;

    let litres = 0, heatL = 0, domL = 0, totalCost = 0;

    if (mode() === "litres") {

        litres = value;

        heatL = litres * hp / 100;
        domL = litres * p / 100;

        totalCost = (heatL * heatingPrice) + (domL * domesticPrice);

    } else {

        totalCost = value;

        let avg =
            (p / 100 * domesticPrice) +
            (hp / 100 * heatingPrice);

        litres = avg > 0 ? totalCost / avg : 0;

        heatL = litres * hp / 100;
        domL = litres * p / 100;
    }

    document.getElementById('totalLitres').innerText = litres.toFixed(2);
    document.getElementById('heatLitres').innerText = heatL.toFixed(2);
    document.getElementById('propLitres').innerText = domL.toFixed(2);

    document.getElementById('heatCost').innerText = "£" + (heatL * heatingPrice).toFixed(2);
    document.getElementById('propCost').innerText = "£" + (domL * domesticPrice).toFixed(2);

    document.getElementById('totalCost').innerText = "£" + totalCost.toFixed(2);
}

[input, percent, hpInput, dpInput].forEach(el => {
    el.addEventListener('input', calc);
});

document.querySelectorAll('input[name="mode"]').forEach(r => {
    r.addEventListener('change', calc);
});

calc();

</script>