236 lines
12 KiB
HTML
236 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Is Diesel Cheaper?</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<div class="header">
|
|
<h2 id="header">Car Cost Comparison</h2>
|
|
<div class="buttons">
|
|
<div class="button-toggle" id="language-toggle">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
|
|
<!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M192 64C209.7 64 224 78.3 224 96L224 128L352 128C369.7 128 384 142.3 384 160C384 177.7 369.7 192 352 192L342.4 192L334 215.1C317.6 260.3 292.9 301.6 261.8 337.1C276 345.9 290.8 353.7 306.2 360.6L356.6 383L418.8 243C423.9 231.4 435.4 224 448 224C460.6 224 472.1 231.4 477.2 243L605.2 531C612.4 547.2 605.1 566.1 589 573.2C572.9 580.3 553.9 573.1 546.8 557L526.8 512L369.3 512L349.3 557C342.1 573.2 323.2 580.4 307.1 573.2C291 566 283.7 547.1 290.9 531L330.7 441.5L280.3 419.1C257.3 408.9 235.3 396.7 214.5 382.7C193.2 399.9 169.9 414.9 145 427.4L110.3 444.6C94.5 452.5 75.3 446.1 67.4 430.3C59.5 414.5 65.9 395.3 81.7 387.4L116.2 370.1C132.5 361.9 148 352.4 162.6 341.8C148.8 329.1 135.8 315.4 123.7 300.9L113.6 288.7C102.3 275.1 104.1 254.9 117.7 243.6C131.3 232.3 151.5 234.1 162.8 247.7L173 259.9C184.5 273.8 197.1 286.7 210.4 298.6C237.9 268.2 259.6 232.5 273.9 193.2L274.4 192L64.1 192C46.3 192 32 177.7 32 160C32 142.3 46.3 128 64 128L160 128L160 96C160 78.3 174.3 64 192 64zM448 334.8L397.7 448L498.3 448L448 334.8z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="button-toggle" id="dark-mode-toggle">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M512 320C512 214 426 128 320 128L320 512C426 512 512 426 512 320zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320z"/></svg>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="input-grid">
|
|
<!-- Diesel Inputs -->
|
|
<div class="input-group">
|
|
<label id="dTaxLabel">Diesel Annual Tax (€)</label>
|
|
<input type="number" id="dTax" value="600" oninput="calculate()">
|
|
</div>
|
|
<div class="input-group">
|
|
<label id="dPriceLabel">Diesel Price per Liter (€)</label>
|
|
<input type="number" id="dPrice" value="2.51" step="0.01" oninput="calculate()">
|
|
</div>
|
|
<div class="input-group">
|
|
<label id="dConsLabel">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 id="pTaxLabel">Petrol Annual Tax (€)</label>
|
|
<input type="number" id="pTax" value="200" oninput="calculate()">
|
|
</div>
|
|
<div class="input-group">
|
|
<label id="pPriceLabel">Petrol Price per Liter (€)</label>
|
|
<input type="number" id="pPrice" value="2.32" step="0.01" oninput="calculate()">
|
|
</div>
|
|
<div class="input-group">
|
|
<label id="pConsLabel">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 id="annualKmLabel">Your Annual Distance (km) for Break-even</label>
|
|
<input type="number" id="annualKm" value="17500" oninput="calculate()">
|
|
</div>
|
|
|
|
<div class="result-box">
|
|
<span id="resultText1">To offset the tax difference at </span><span id="displayKm">17500</span> <span id="resultText2">km/year,
|
|
a petrol car would need to consume at least </span><b id="breakEvenCons">0.00</b><span id="resultText3">L/100km,
|
|
or the diesel price should be at least </span> <b id="minDieselPrice">0.00</b> <span id="resultText4">€/L.</span>
|
|
</div>
|
|
|
|
<table id="comparisonTable">
|
|
<thead>
|
|
<tr>
|
|
<th id="tableDistance">Annual Distance</th>
|
|
<th id="tableDieselTotal">Diesel Total</th>
|
|
<th id="tablePetrolTotal">Petrol Total</th>
|
|
<th id="tableDifference">Difference</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Rows generated by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
// Load languages data
|
|
let currentLang = 'ru';
|
|
|
|
// Function to update content based on language
|
|
function updateLanguage() {
|
|
const langData = {
|
|
"en": {
|
|
"header": "Car Cost Comparison",
|
|
"dTaxLabel": "Diesel Annual Tax (€)",
|
|
"dPriceLabel": "Diesel Price per Liter (€)",
|
|
"dConsLabel": "Diesel Consumption (L/100km)",
|
|
"pTaxLabel": "Petrol Annual Tax (€)",
|
|
"pPriceLabel": "Petrol Price per Liter (€)",
|
|
"pConsLabel": "Petrol Consumption (L/100km)",
|
|
"annualKmLabel": "Your Annual Distance (km)",
|
|
"resultText1": "To offset the tax difference at ",
|
|
"resultText2": "km/year, a petrol car would need to consume at least ",
|
|
"resultText3": " L/100km, or the diesel price should be at least ",
|
|
"resultText4": "€/L.",
|
|
"tableDistance": "Annual Distance",
|
|
"tableDieselTotal": "Diesel Total",
|
|
"tablePetrolTotal": "Petrol Total",
|
|
"tableDifference": "Difference"
|
|
},
|
|
"ru": {
|
|
"header": "Сравнение затрат на автомобили",
|
|
"dTaxLabel": "Годовая плата за дизель (€)",
|
|
"dPriceLabel": "Цена дизеля за литр (€)",
|
|
"dConsLabel": "Расход дизеля (л/100км)",
|
|
"pTaxLabel": "Годовая плата за бензин (€)",
|
|
"pPriceLabel": "Цена бензина за литр (€)",
|
|
"pConsLabel": "Расход бензина (л/100км)",
|
|
"annualKmLabel": "Ваша ежегодный пробег (км)",
|
|
"resultText1": "Чтобы компенсировать разницу в налогах при ",
|
|
"resultText2": "км в год, расход бензинового автомобиля должен быть, как минимум ",
|
|
"resultText3": " Л/100 км, либо цена дизеля должна быть не выше чем ",
|
|
"resultText4": "€/Л.",
|
|
"tableDistance": "Ежегодная дистанция",
|
|
"tableDieselTotal": "Итоговый расход дизеля",
|
|
"tablePetrolTotal": "Итоговый расход бензина",
|
|
"tableDifference": "Разница"
|
|
}
|
|
};
|
|
|
|
document.getElementById('header').textContent = langData[currentLang].header;
|
|
document.getElementById('dTaxLabel').textContent = langData[currentLang].dTaxLabel;
|
|
document.getElementById('dPriceLabel').textContent = langData[currentLang].dPriceLabel;
|
|
document.getElementById('dConsLabel').textContent = langData[currentLang].dConsLabel;
|
|
document.getElementById('pTaxLabel').textContent = langData[currentLang].pTaxLabel;
|
|
document.getElementById('pPriceLabel').textContent = langData[currentLang].pPriceLabel;
|
|
document.getElementById('pConsLabel').textContent = langData[currentLang].pConsLabel;
|
|
document.getElementById('annualKmLabel').textContent = langData[currentLang].annualKmLabel;
|
|
document.getElementById('resultText1').textContent = langData[currentLang].resultText1;
|
|
document.getElementById('resultText2').textContent = langData[currentLang].resultText2;
|
|
document.getElementById('resultText3').textContent = langData[currentLang].resultText3;
|
|
document.getElementById('resultText4').textContent = langData[currentLang].resultText4;
|
|
document.getElementById('tableDistance').textContent = langData[currentLang].tableDistance;
|
|
document.getElementById('tableDieselTotal').textContent = langData[currentLang].tableDieselTotal;
|
|
document.getElementById('tablePetrolTotal').textContent = langData[currentLang].tablePetrolTotal;
|
|
document.getElementById('tableDifference').textContent = langData[currentLang].tableDifference;
|
|
|
|
// Recalculate after language change
|
|
calculate();
|
|
}
|
|
|
|
// Toggle between languages
|
|
document.querySelector('#language-toggle').addEventListener('click', () => {
|
|
currentLang = (currentLang === 'en') ? 'ru' : 'en';
|
|
updateLanguage();
|
|
});
|
|
|
|
// Theme toggle function from original page
|
|
document.querySelector('#dark-mode-toggle').addEventListener('click', () => {
|
|
document.body.classList.toggle('dark-mode');
|
|
});
|
|
|
|
// Calculation function from the original page
|
|
function calculate() {
|
|
// Get input values
|
|
var dTax = parseFloat(document.getElementById("dTax").value);
|
|
var dPrice = parseFloat(document.getElementById("dPrice").value);
|
|
var dCons = parseFloat(document.getElementById("dCons").value);
|
|
var pTax = parseFloat(document.getElementById("pTax").value);
|
|
var pPrice = parseFloat(document.getElementById("pPrice").value);
|
|
var pCons = parseFloat(document.getElementById("pCons").value);
|
|
var annualKm = parseFloat(document.getElementById("annualKm").value);
|
|
|
|
// Calculate costs
|
|
var dieselCostPerKm = (dPrice * dCons) / 100;
|
|
var petrolCostPerKm = (pPrice * pCons) / 100;
|
|
|
|
var dieselAnnualCost = (dTax + (dieselCostPerKm * annualKm));
|
|
var petrolAnnualCost = (pTax + (petrolCostPerKm * annualKm));
|
|
|
|
// Calculate difference
|
|
var diff = Math.abs(dieselAnnualCost - petrolAnnualCost);
|
|
|
|
// Calculate break even point
|
|
var breakEvenCons = 0;
|
|
if (dCons < pCons || dTax > pTax) {
|
|
var consumptionDifference = pCons - dCons;
|
|
breakEvenCons = (pCons - ((dTax - pTax) / (annualKm * (pPrice - dPrice))));
|
|
if (breakEvenCons <= 0) breakEvenCons = 0; // Invalid result
|
|
}
|
|
|
|
var minDieselPrice = 0;
|
|
if (dPrice < pPrice || dTax > pTax) {
|
|
minDieselPrice = (pPrice - ((dTax - pTax) / (annualKm * (pCons - dCons))));
|
|
if (minDieselPrice <= 0) minDieselPrice = 0; // Invalid result
|
|
}
|
|
|
|
// Update displays with proper formatting
|
|
document.getElementById("displayKm").textContent = annualKm.toLocaleString();
|
|
document.getElementById("breakEvenCons").textContent = breakEvenCons.toFixed(2);
|
|
document.getElementById("minDieselPrice").textContent = minDieselPrice.toFixed(2);
|
|
|
|
// Clear existing table rows
|
|
var tbody = document.getElementById("comparisonTable").getElementsByTagName('tbody')[0];
|
|
tbody.innerHTML = '';
|
|
|
|
// Add rows to display
|
|
for (var i = 10000; i <= 50000; i += 5000) {
|
|
var row = tbody.insertRow();
|
|
var cell1 = row.insertCell(0);
|
|
var cell2 = row.insertCell(1);
|
|
var cell3 = row.insertCell(2);
|
|
var cell4 = row.insertCell(3);
|
|
|
|
var dCost = (dTax + ((dPrice * dCons) / 100 * i)).toFixed(2);
|
|
var pCost = (pTax + ((pPrice * pCons) / 100 * i)).toFixed(2);
|
|
var diffCost = (parseFloat(pCost) - parseFloat(dCost)).toFixed(2);
|
|
|
|
cell1.innerHTML = "<strong>" + i.toLocaleString() + "</strong>";
|
|
cell2.innerHTML = dCost + " €";
|
|
cell3.innerHTML = pCost + " €";
|
|
cell4.innerHTML = diffCost + " €";
|
|
|
|
if (diffCost > 0) {
|
|
cell4.className = "saving";
|
|
} else {
|
|
cell4.className = "loss";
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialize
|
|
calculate();
|
|
updateLanguage();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|