diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..281607a --- /dev/null +++ b/Dockerfile @@ -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;"] \ No newline at end of file diff --git a/fuel-calc.html b/fuel-calc.html index a18ef98..1520638 100644 --- a/fuel-calc.html +++ b/fuel-calc.html @@ -9,56 +9,68 @@
-

Car Cost Comparison

- +
+ +
+
+ + + +
+
+ +
+ +
+
- +
- +
- +
- +
- +
- +
- +
- To offset the tax difference at 17500 km/year, - a petrol car would need to consume at least 0.00 L/100km, - or the diesel price should be at least 0.00 €/L. + To offset the tax difference at 17500 km/year, + a petrol car would need to consume at least 0.00L/100km, + or the diesel price should be at least 0.00 €/L.
- - - - + + + + @@ -67,10 +79,157 @@
Annual DistanceDiesel TotalPetrol TotalDifferenceAnnual DistanceDiesel TotalPetrol TotalDifference
- - + - diff --git a/languages.json b/languages.json new file mode 100644 index 0000000..69d1674 --- /dev/null +++ b/languages.json @@ -0,0 +1,32 @@ +{ + "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) for Break-even", + "resultText": "To offset the tax difference at ", + "tableDistance": "Annual Distance", + "tableDieselTotal": "Diesel Total", + "tablePetrolTotal": "Petrol Total", + "tableDifference": "Difference" + }, + "ru": { + "header": "Сравнение затрат на автомобили", + "dTaxLabel": "Годовая плата за дизель (€)", + "dPriceLabel": "Цена дизеля за литр (€)", + "dConsLabel": "Расход дизеля (л/100км)", + "pTaxLabel": "Годовая плата за бензин (€)", + "pPriceLabel": "Цена бензина за литр (€)", + "pConsLabel": "Расход бензина (л/100км)", + "annualKmLabel": "Ваша ежегодная дистанция (км) для компенсации", + "resultText": "Чтобы компенсировать разницу в налогах при ", + "tableDistance": "Ежегодная дистанция", + "tableDieselTotal": "Итоговый расход дизеля", + "tablePetrolTotal": "Итоговый расход бензина", + "tableDifference": "Разница" + } +} \ No newline at end of file diff --git a/script.js b/script.js deleted file mode 100644 index 0e40b67..0000000 --- a/script.js +++ /dev/null @@ -1,81 +0,0 @@ -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. 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('minDieselPrice').innerText = isFinite(minDieselPrice) ? minDieselPrice.toFixed(2) : "0.00"; - - // 3. 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 = ` - ${km.toLocaleString()} km - €${dTotal.toFixed(2)} - €${pTotal.toFixed(2)} - ${diffText} - `; - tbody.appendChild(row); - }); -} - -// Initial run -calculate(); - -function toggleTheme() { - const body = document.body; - body.classList.toggle('dark-mode'); - - // Save preference to localStorage - if (body.classList.contains('dark-mode')) { - localStorage.setItem('theme', 'dark'); - } else { - localStorage.setItem('theme', 'light'); - } -} - -// Check for saved theme preference and set dark mode by default -document.addEventListener('DOMContentLoaded', function() { - const savedTheme = localStorage.getItem('theme'); - if (savedTheme === 'dark' || !savedTheme) { // Default to dark mode - document.body.classList.add('dark-mode'); - } -}); \ No newline at end of file diff --git a/style.css b/style.css index be2ede3..eff6ebb 100644 --- a/style.css +++ b/style.css @@ -108,15 +108,38 @@ th { color: var(--loss-color); font-weight: bold; } -.theme-toggle { - position: fixed; + +.buttons { + display: flex; + flex-direction: row; +} + +.header { + display: flex; + flex-direction: column-reverse; +} + +.button-toggle { top: 20px; - right: 20px; + cursor: pointer; + width: 15px; + height: 15px; + 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; - border-radius: 4px; - cursor: pointer; - font-size: 0.9rem; -} \ No newline at end of file + margin-right: 10px; + margin-bottom: 10px; +} + +.button-toggle:hover { + transform: scale(1.1); +} + +.button-toggle svg { + width: 100%; + height: 100%; + color: var(--text-color); +}