Compare commits
7 Commits
a339143292
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
1214997179 | ||
|
|
24da791d99 | ||
|
|
ec8c8f2a81 | ||
|
|
17c01cd79a | ||
|
|
514e443fc2 | ||
|
|
6652655e2b | ||
|
|
3752b615a7 |
10
Dockerfile
Normal file
10
Dockerfile
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
FROM nginx:alpine
|
||||||
|
|
||||||
|
# Copy the application files
|
||||||
|
COPY . /usr/share/nginx/html
|
||||||
|
|
||||||
|
# Expose port 80
|
||||||
|
EXPOSE 80
|
||||||
|
|
||||||
|
# Set the default command to run nginx
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
135
fuel-calc.html
135
fuel-calc.html
@@ -1,135 +0,0 @@
|
|||||||
<!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>
|
|
||||||
|
|
||||||
100
fuel-calc.js
Normal file
100
fuel-calc.js
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
let currentLang = 'ru';
|
||||||
|
|
||||||
|
|
||||||
|
function updateLanguage() {
|
||||||
|
const language = langData[currentLang];
|
||||||
|
|
||||||
|
document.getElementById("header").textContent = language.header;
|
||||||
|
document.getElementById("description").textContent = language.description;
|
||||||
|
document.getElementById("dTaxLabel").textContent = language.dTaxLabel;
|
||||||
|
document.getElementById("dPriceLabel").textContent = language.dPriceLabel;
|
||||||
|
document.getElementById("dConsLabel").textContent = language.dConsLabel;
|
||||||
|
document.getElementById("pTaxLabel").textContent = language.pTaxLabel;
|
||||||
|
document.getElementById("pPriceLabel").textContent = language.pPriceLabel;
|
||||||
|
document.getElementById("pConsLabel").textContent = language.pConsLabel;
|
||||||
|
document.getElementById("annualKmLabel").textContent = language.annualKmLabel;
|
||||||
|
document.getElementById("resultText1").textContent = language.resultText1;
|
||||||
|
document.getElementById("resultText2").textContent = language.resultText2;
|
||||||
|
document.getElementById("resultText3").textContent = language.resultText3;
|
||||||
|
document.getElementById("resultText4").textContent = language.resultText4;
|
||||||
|
document.getElementById("tableDistance").textContent = language.tableDistance;
|
||||||
|
document.getElementById("tableDieselTotal").textContent = language.tableDieselTotal;
|
||||||
|
document.getElementById("tablePetrolTotal").textContent = language.tablePetrolTotal;
|
||||||
|
document.getElementById("tableDifference").textContent = language.tableDifference;
|
||||||
|
|
||||||
|
calculate();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
document.querySelector('#language-toggle').addEventListener('click', () => {
|
||||||
|
currentLang = (currentLang === 'en') ? 'ru' : 'en';
|
||||||
|
updateLanguage();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelector('#dark-mode-toggle').addEventListener('click', () => {
|
||||||
|
document.body.classList.toggle('dark-mode');
|
||||||
|
});
|
||||||
|
|
||||||
|
function calculate() {
|
||||||
|
const dTax = parseFloat(document.getElementById("dTax").value);
|
||||||
|
const dPrice = parseFloat(document.getElementById("dPrice").value);
|
||||||
|
const dCons = parseFloat(document.getElementById("dCons").value);
|
||||||
|
const pTax = parseFloat(document.getElementById("pTax").value);
|
||||||
|
const pPrice = parseFloat(document.getElementById("pPrice").value);
|
||||||
|
const pCons = parseFloat(document.getElementById("pCons").value);
|
||||||
|
const annualKm = parseFloat(document.getElementById("annualKm").value);
|
||||||
|
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
|
||||||
|
// 2. Generate Table
|
||||||
|
// 2. Calculate Minimum Diesel Price where user's pCons equals break-even consumption
|
||||||
|
// We want to solve for dPrice such that: pCons = (100 * taxDiff / (annualKm * pPrice)) + (dCons * dPrice / pPrice)
|
||||||
|
// Rearranging for dPrice:
|
||||||
|
// pCons - (100 * taxDiff / (annualKm * pPrice)) = (dCons * dPrice / pPrice)
|
||||||
|
// dPrice = (pCons - (100 * taxDiff / (annualKm * pPrice))) * pPrice / dCons
|
||||||
|
|
||||||
|
let minDieselPrice = 0;
|
||||||
|
if (dCons > 0 && annualKm > 0 && pPrice > 0) {
|
||||||
|
const firstTerm = 100 * taxDiff / (annualKm * pPrice);
|
||||||
|
const secondTerm = pCons - firstTerm;
|
||||||
|
minDieselPrice = secondTerm * pPrice / dCons;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("displayKm").textContent = annualKm.toLocaleString();
|
||||||
|
document.getElementById("breakEvenCons").textContent = breakEven.toFixed(2);
|
||||||
|
document.getElementById("minDieselPrice").textContent = minDieselPrice.toFixed(2);
|
||||||
|
|
||||||
|
const tbody = document.getElementById("comparisonTable").getElementsByTagName('tbody')[0];
|
||||||
|
tbody.innerHTML = '';
|
||||||
|
|
||||||
|
for (let i = 5000; i <= 50000; i += 5000) {
|
||||||
|
const row = tbody.insertRow();
|
||||||
|
const cell1 = row.insertCell(0);
|
||||||
|
const cell2 = row.insertCell(1);
|
||||||
|
const cell3 = row.insertCell(2);
|
||||||
|
const cell4 = row.insertCell(3);
|
||||||
|
|
||||||
|
const dCost = (dTax + ((dPrice * dCons) / 100 * i)).toFixed(2);
|
||||||
|
const pCost = (pTax + ((pPrice * pCons) / 100 * i)).toFixed(2);
|
||||||
|
const 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";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
calculate();
|
||||||
|
updateLanguage();
|
||||||
215
index.html
Normal file
215
index.html
Normal file
@@ -0,0 +1,215 @@
|
|||||||
|
<!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="description">
|
||||||
|
<span id="description"></span>
|
||||||
|
</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 class="formula-info">
|
||||||
|
<h3>Calculation Formulas</h3>
|
||||||
|
|
||||||
|
<p><strong>Break-Even Petrol Consumption:</strong></p>
|
||||||
|
|
||||||
|
<math display="block">
|
||||||
|
<msub>
|
||||||
|
<mi>P</mi>
|
||||||
|
<mi>Cons</mi>
|
||||||
|
</msub>
|
||||||
|
<mo>=</mo>
|
||||||
|
<mfrac>
|
||||||
|
<mrow>
|
||||||
|
<mn>100</mn>
|
||||||
|
<mo>×</mo>
|
||||||
|
<mo>(</mo>
|
||||||
|
<msub><mi>dTax</mi></msub>
|
||||||
|
<mo>−</mo>
|
||||||
|
<msub><mi>pTax</mi></msub>
|
||||||
|
<mo>)</mo>
|
||||||
|
</mrow>
|
||||||
|
<mrow>
|
||||||
|
<mi>annualKm</mi>
|
||||||
|
<mo>×</mo>
|
||||||
|
<msub><mi>pPrice</mi></msub>
|
||||||
|
</mrow>
|
||||||
|
</mfrac>
|
||||||
|
<mo>+</mo>
|
||||||
|
<mfrac>
|
||||||
|
<mrow>
|
||||||
|
<msub><mi>dCons</mi></msub>
|
||||||
|
<mo>×</mo>
|
||||||
|
<msub><mi>dPrice</mi></msub>
|
||||||
|
</mrow>
|
||||||
|
<msub><mi>pPrice</mi></msub>
|
||||||
|
</mfrac>
|
||||||
|
</math>
|
||||||
|
|
||||||
|
<p><strong>Minimum Diesel Price:</strong></p>
|
||||||
|
|
||||||
|
<math display="block">
|
||||||
|
<msub>
|
||||||
|
<mi>dPrice</mi>
|
||||||
|
</msub>
|
||||||
|
<mo>=</mo>
|
||||||
|
<mrow>
|
||||||
|
<mo>(</mo>
|
||||||
|
<msub><mi>pCons</mi></msub>
|
||||||
|
<mo>−</mo>
|
||||||
|
<mfrac>
|
||||||
|
<mrow>
|
||||||
|
<mn>100</mn>
|
||||||
|
<mo>×</mo>
|
||||||
|
<mi>taxDiff</mi>
|
||||||
|
</mrow>
|
||||||
|
<mrow>
|
||||||
|
<mi>annualKm</mi>
|
||||||
|
<mo>×</mo>
|
||||||
|
<msub><mi>pPrice</mi></msub>
|
||||||
|
</mrow>
|
||||||
|
</mfrac>
|
||||||
|
<mo>)</mo>
|
||||||
|
</mrow>
|
||||||
|
<mo>×</mo>
|
||||||
|
<mfrac>
|
||||||
|
<msub><mi>pPrice</mi></msub>
|
||||||
|
<msub><mi>dCons</mi></msub>
|
||||||
|
</mfrac>
|
||||||
|
</math>
|
||||||
|
|
||||||
|
<p><strong>Cost Calculation:</strong></p>
|
||||||
|
|
||||||
|
<math display="block">
|
||||||
|
<mtext>Diesel Cost</mtext>
|
||||||
|
<mo>=</mo>
|
||||||
|
<msub><mi>dTax</mi></msub>
|
||||||
|
<mo>+</mo>
|
||||||
|
<mrow>
|
||||||
|
<mo>(</mo>
|
||||||
|
<mfrac>
|
||||||
|
<mrow>
|
||||||
|
<msub><mi>dPrice</mi></msub>
|
||||||
|
<mo>×</mo>
|
||||||
|
<msub><mi>dCons</mi></msub>
|
||||||
|
</mrow>
|
||||||
|
<mn>100</mn>
|
||||||
|
</mfrac>
|
||||||
|
<mo>×</mo>
|
||||||
|
<mi>annualKm</mi>
|
||||||
|
<mo>)</mo>
|
||||||
|
</mrow>
|
||||||
|
</math>
|
||||||
|
|
||||||
|
<math display="block">
|
||||||
|
<mtext>Petrol Cost</mtext>
|
||||||
|
<mo>=</mo>
|
||||||
|
<msub><mi>pTax</mi></msub>
|
||||||
|
<mo>+</mo>
|
||||||
|
<mrow>
|
||||||
|
<mo>(</mo>
|
||||||
|
<mfrac>
|
||||||
|
<mrow>
|
||||||
|
<msub><mi>pPrice</mi></msub>
|
||||||
|
<mo>×</mo>
|
||||||
|
<msub><mi>pCons</mi></msub>
|
||||||
|
</mrow>
|
||||||
|
<mn>100</mn>
|
||||||
|
</mfrac>
|
||||||
|
<mo>×</mo>
|
||||||
|
<mi>annualKm</mi>
|
||||||
|
<mo>)</mo>
|
||||||
|
</mrow>
|
||||||
|
</math>
|
||||||
|
|
||||||
|
<math display="block">
|
||||||
|
<mtext>Difference</mtext>
|
||||||
|
<mo>=</mo>
|
||||||
|
<mtext>Petrol Cost</mtext>
|
||||||
|
<mo>−</mo>
|
||||||
|
<mtext>Diesel Cost</mtext>
|
||||||
|
</math>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="languages.js"></script>
|
||||||
|
<script src="fuel-calc.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
42
languages.js
Normal file
42
languages.js
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
const langData = {
|
||||||
|
en: {
|
||||||
|
header: "Car Cost Comparison",
|
||||||
|
description: "This calculator was created to provide a simple way to estimate and compare vehicle running costs. It uses a straightforward formula to combine well-known values and present the results at a high level, helping illustrate how current fuel prices, taxes, and consumption affect the overall cost of owning a diesel car.",
|
||||||
|
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: "Сравнение затрат на автомобили",
|
||||||
|
description: "Этот калькулятор создан для простого расчёта и сравнения эксплуатационных расходов автомобиля. Он использует несложную формулу, объединяющую известные показатели, чтобы представить результаты в общих чертах и показать, как текущие цены на топливо, налоги и расход влияют на общую стоимость владения дизельным автомобилем.",
|
||||||
|
dTaxLabel: "Годовой налог на дизель (€)",
|
||||||
|
dPriceLabel: "Цена дизеля за литр (€)",
|
||||||
|
dConsLabel: "Расход дизеля (л/100 км)",
|
||||||
|
pTaxLabel: "Годовой налог на бензин (€)",
|
||||||
|
pPriceLabel: "Цена бензина за литр (€)",
|
||||||
|
pConsLabel: "Расход бензина (л/100 км)",
|
||||||
|
annualKmLabel: "Ваш ежегодный пробег (км)",
|
||||||
|
resultText1: "Чтобы компенсировать разницу в налогах при ",
|
||||||
|
resultText2: " км в год, расход бензинового автомобиля должен быть не менее ",
|
||||||
|
resultText3: " л/100 км, либо цена дизеля должна быть не более ",
|
||||||
|
resultText4: " €/л.",
|
||||||
|
tableDistance: "Ежегодная дистанция",
|
||||||
|
tableDieselTotal: "Общие затраты на дизель",
|
||||||
|
tablePetrolTotal: "Общие затраты на бензин",
|
||||||
|
tableDifference: "Разница"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
187
style.css
Normal file
187
style.css
Normal file
@@ -0,0 +1,187 @@
|
|||||||
|
:root {
|
||||||
|
--bg-color: #f4f7f6;
|
||||||
|
--text-color: #333;
|
||||||
|
--container-bg: white;
|
||||||
|
--header-color: #2c3e50;
|
||||||
|
--label-color: #333;
|
||||||
|
--input-border: #ccc;
|
||||||
|
--result-bg: #eef2f7;
|
||||||
|
--result-border: #3498db;
|
||||||
|
--result-text: #2980b9;
|
||||||
|
--table-header-bg: #f8f9fa;
|
||||||
|
--saving-color: green;
|
||||||
|
--loss-color: red;
|
||||||
|
--shadow-color: rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode {
|
||||||
|
--bg-color: #1a1a1a;
|
||||||
|
--text-color: #f0f0f0;
|
||||||
|
--container-bg: #2d2d2d;
|
||||||
|
--header-color: #ffffff;
|
||||||
|
--label-color: #f0f0f0;
|
||||||
|
--input-border: #555;
|
||||||
|
--result-bg: #3a3a3a;
|
||||||
|
--result-border: #4a90e2;
|
||||||
|
--result-text: #7db4ff;
|
||||||
|
--table-header-bg: #333;
|
||||||
|
--saving-color: #4caf50;
|
||||||
|
--loss-color: #f44336;
|
||||||
|
--shadow-color: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
margin: 20px;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
max-width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
background: var(--container-bg);
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 10px var(--shadow-color);
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
color: var(--header-color);
|
||||||
|
text-align: center;
|
||||||
|
transition: color 0.3s;
|
||||||
|
}
|
||||||
|
.input-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.input-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.input-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--label-color);
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
padding: 8px;
|
||||||
|
border: 1px solid var(--input-border);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 1rem;
|
||||||
|
background: var(--container-bg);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
.result-box {
|
||||||
|
background: var(--result-bg);
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-align: center;
|
||||||
|
border-left: 5px solid var(--result-border);
|
||||||
|
}
|
||||||
|
.result-box b {
|
||||||
|
color: var(--result-text);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
th, td {
|
||||||
|
border: 1px solid var(--input-border);
|
||||||
|
padding: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
background-color: var(--table-header-bg);
|
||||||
|
}
|
||||||
|
.saving {
|
||||||
|
color: var(--saving-color);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.loss {
|
||||||
|
color: var(--loss-color);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
.header {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
margin-bottom: 20px
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-toggle {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
background: var(--container-bg);
|
||||||
|
border: 1px solid var(--input-border);
|
||||||
|
color: var(--text-color);
|
||||||
|
padding: 10px 15px;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formula-info {
|
||||||
|
background: var(--result-bg);
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-left: 5px solid var(--result-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.formula-info h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
color: var(--result-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.formula-info p {
|
||||||
|
margin: 5px 0;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.button-toggle {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user