tylen/isdieselcheaper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: tylen:ec8c8f2a812f6e05b61313afbc73570f507ebe78
Branches Tags
tylen:main
...
compare: tylen:121499717915a15f2e851a95121b1c569f2c6872
Branches Tags
tylen:main

2 Commits
ec8c8f2a81 ... 1214997179

Author SHA1 Message Date
Vasily Davydov
1214997179 add formulas 2026-09-21 15:46:12 +03:00
Vasily Davydov
24da791d99 make teh design responsive 2026-09-21 15:34:34 +03:00
2 changed files with 174 additions and 11 deletions
Expand all files Collapse all files

125
index.html
View File

@@ -67,6 +67,8 @@
or the diesel price should be at least </span> <b id="minDieselPrice">0.00</b> <span id="resultText4">€/L.</span> or the diesel price should be at least </span> <b id="minDieselPrice">0.00</b> <span id="resultText4">€/L.</span>
</div> </div>
<table id="comparisonTable"> <table id="comparisonTable">
<thead> <thead>
<tr> <tr>
@@ -80,6 +82,129 @@
<!-- Rows generated by JS --> <!-- Rows generated by JS -->
</tbody> </tbody>
</table> </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> </div>

60
style.css
View File

@@ -38,14 +38,21 @@ body {
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;
} }
.container { .container {
max-width: 800px; max-width: 100%;
margin: auto; margin: auto;
background: var(--container-bg); background: var(--container-bg);
padding: 20px; padding: 15px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 10px var(--shadow-color); box-shadow: 0 2px 10px var(--shadow-color);
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;
} }
@media screen and (max-width: 768px) {
.container {
padding: 10px;
margin: 10px;
}
}
h2 { h2 {
color: var(--header-color); color: var(--header-color);
text-align: center; text-align: center;
@@ -57,6 +64,12 @@ h2 {
gap: 20px; gap: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
@media screen and (max-width: 768px) {
.input-grid {
grid-template-columns: 1fr;
}
}
.input-group { .input-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -117,6 +130,15 @@ th {
.header { .header {
display: flex; display: flex;
flex-direction: column-reverse; 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 { .description {
@@ -124,10 +146,9 @@ th {
} }
.button-toggle { .button-toggle {
top: 20px;
cursor: pointer; cursor: pointer;
width: 15px; width: 30px;
height: 15px; height: 30px;
border-radius: 4px; border-radius: 4px;
transition: transform 0.3s ease; transition: transform 0.3s ease;
background: var(--container-bg); background: var(--container-bg);
@@ -138,12 +159,29 @@ th {
margin-bottom: 10px; margin-bottom: 10px;
} }
.button-toggle:hover { .formula-info {
transform: scale(1.1); background: var(--result-bg);
padding: 15px;
border-radius: 8px;
margin-top: 20px;
margin-bottom: 20px;
border-left: 5px solid var(--result-border);
} }
.button-toggle svg { .formula-info h3 {
width: 100%; margin-top: 0;
height: 100%; color: var(--result-text);
fill: var(--text-color); }
.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;
}
} }