add formulas
This commit is contained in:
125
index.html
125
index.html
@@ -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>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
19
style.css
19
style.css
@@ -159,6 +159,25 @@ th {
|
|||||||
margin-bottom: 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) {
|
@media screen and (max-width: 768px) {
|
||||||
.button-toggle {
|
.button-toggle {
|
||||||
width: 25px;
|
width: 25px;
|
||||||
|
|||||||
Reference in New Issue
Block a user