From a3391432920111887cff2b6c5a82ce5cf5201359 Mon Sep 17 00:00:00 2001
From: tylen <vasily.davydov@proton.me>
Date: Mon, 21 Sep 2026 08:45:54 +0000
Subject: [PATCH] Upload files to "/"

---
 fuel-calc.html | 135 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 135 insertions(+)
 create mode 100644 fuel-calc.html

diff --git a/fuel-calc.html b/fuel-calc.html
new file mode 100644
index 0000000..a6688a4
--- /dev/null
+++ b/fuel-calc.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Diesel vs Petrol Cost Calculator</title>
+    <style>
+        body { font-family: sans-serif; margin: 20px; background-color: #f4f7f6; color: #333; }
+        .container { max-width: 800px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
+        h2 { color: #2c3e50; text-align: center; }
+        .input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
+        .input-group { display: flex; flex-direction: column; }
+        label { font-size: 0.9rem; margin-bottom: 5px; font-weight: bold; }
+        input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; }
+        .result-box { background: #eef2f7; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; border-left: 5px solid #3498db; }
+        .result-box b { color: #2980b9; font-size: 1.2rem; }
+        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
+        th, td { border: 1px solid #ddd; padding: 12px; text-align: center; }
+        th { background-color: #f8f9fa; }
+        .saving { color: green; font-weight: bold; }
+        .loss { color: red; font-weight: bold; }
+    </style>
+</head>
+<body>
+
+<div class="container">
+    <h2>Car Cost Comparison</h2>
+    
+    <div class="input-grid">
+        <!-- Diesel Inputs -->
+        <div class="input-group">
+            <label>Diesel Annual Tax (€)</label>
+            <input type="number" id="dTax" value="600" oninput="calculate()">
+        </div>
+        <div class="input-group">
+            <label>Diesel Price per Liter (€)</label>
+            <input type="number" id="dPrice" value="2.51" step="0.01" oninput="calculate()">
+        </div>
+        <div class="input-group">
+            <label>Diesel Consumption (L/100km)</label>
+            <input type="number" id="dCons" value="5.5" step="0.1" oninput="calculate()">
+        </div>
+        
+        <!-- Petrol Inputs -->
+        <div class="input-group">
+            <label>Petrol Annual Tax (€)</label>
+            <input type="number" id="pTax" value="200" oninput="calculate()">
+        </div>
+        <div class="input-group">
+            <label>Petrol Price per Liter (€)</label>
+            <input type="number" id="pPrice" value="2.32" step="0.01" oninput="calculate()">
+        </div>
+        <div class="input-group">
+            <label>Petrol Consumption (L/100km)</label>
+            <input type="number" id="pCons" value="6.2" step="0.1" oninput="calculate()">
+        </div>
+    </div>
+
+    <div class="input-group" style="margin-bottom: 20px; max-width: 300px; margin-left: auto; margin-right: auto;">
+        <label>Your Annual Distance (km) for Break-even</label>
+        <input type="number" id="annualKm" value="17500" oninput="calculate()">
+    </div>
+
+    <div class="result-box">
+        To offset the tax difference at <span id="displayKm">17500</span> km/year, 
+        a petrol car would need to consume at least <b id="breakEvenCons">0.00</b> L/100km.
+    </div>
+
+    <table id="comparisonTable">
+        <thead>
+            <tr>
+                <th>Annual Distance</th>
+                <th>Diesel Total</th>
+                <th>Petrol Total</th>
+                <th>Difference</th>
+            </tr>
+        </thead>
+        <tbody>
+            <!-- Rows generated by JS -->
+        </tbody>
+    </table>
+</div>
+
+<script>
+function calculate() {
+    // Get values
+    const dTax = parseFloat(document.getElementById('dTax').value) || 0;
+    const dPrice = parseFloat(document.getElementById('dPrice').value) || 0;
+    const dCons = parseFloat(document.getElementById('dCons').value) || 0;
+    
+    const pTax = parseFloat(document.getElementById('pTax').value) || 0;
+    const pPrice = parseFloat(document.getElementById('pPrice').value) || 0;
+    const pCons = parseFloat(document.getElementById('pCons').value) || 0;
+    
+    const annualKm = parseFloat(document.getElementById('annualKm').value) || 0;
+
+    // 1. Calculate Break-Even Petrol Consumption
+    // Formula: P_Cons = (100 * (dTax - pTax) / (annualKm * pPrice)) + (dCons * dPrice / pPrice)
+    const taxDiff = dTax - pTax;
+    const breakEven = (100 * taxDiff / (annualKm * pPrice)) + (dCons * dPrice / pPrice);
+    
+    document.getElementById('displayKm').innerText = annualKm.toLocaleString();
+    document.getElementById('breakEvenCons').innerText = isFinite(breakEven) ? breakEven.toFixed(2) : "0.00";
+
+    // 2. Generate Table
+    const distances = [5000, 10000, 15000, 20000, 25000, 30000];
+    const tbody = document.querySelector('#comparisonTable tbody');
+    tbody.innerHTML = '';
+
+    distances.forEach(km => {
+        const dTotal = dTax + (km * dCons / 100 * dPrice);
+        const pTotal = pTax + (km * pCons / 100 * pPrice);
+        const diff = pTotal - dTotal;
+        
+        const row = document.createElement('tr');
+        const diffClass = diff >= 0 ? 'saving' : 'loss';
+        const diffText = diff >= 0 ? `Saving €${diff.toFixed(2)}` : `Loss €${Math.abs(diff).toFixed(2)}`;
+
+        row.innerHTML = `
+            <td>${km.toLocaleString()} km</td>
+            <td>€${dTotal.toFixed(2)}</td>
+            <td>€${pTotal.toFixed(2)}</td>
+            <td class="${diffClass}">${diffText}</td>
+        `;
+        tbody.appendChild(row);
+    });
+}
+
+// Initial run
+calculate();
+</script>
+
+</body>
+</html>
+