diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 358 |
1 files changed, 358 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..8a74aa4 --- /dev/null +++ b/index.html @@ -0,0 +1,358 @@ +{% extends "snippets/layout.html" %} + +{% block title 'Wie teuer ist eine Pizza im Verhältnis zum Flächeninhalt? | Maximilian Möhring' %} + +{% block description "Berechnet die Preise für Pizza im Verhältnis zum Flächeninhalt. Lieber zwei kleine oder eine große Pizza kaufen?" %} + +{% block css %} + .main { + font-size: inherit !important; + } + .show-pizza { + height: 10cm; + width: 10cm; + background-color: #a10a09; + border-radius: 50%; + margin-left: 10px; + margin-top: 20px; + border: 0.5cm solid #fff38a; + } + math { + font-size: 1.5rem; + } + .btn-tertiary { + background-color: #fd8a02; + margin-left: .01rem; + } + .btn-tertiary:hover { + filter: brightness(0.85); + } + .btn-hide { + background-color: grey; + } + .hidden { + display: none; + } +{% endblock %} + +{% block main %} +<div class="container"> + + <div class="flavor-text"> + <h1>Wie teuer ist eine Pizza im Verhältnis zum Flächeninhalt?</h1> + Auch bekannt als: <em>Sollte man die kleinere oder größere Pizza nehmen? Ist es günstiger zwei Pizzen zu kaufen, oder eine zu teilen?</em> + </div> + <!-- Flächeninhalt: π * r^2 + Umfang: π * d + --> + <form id="preis"> + <label id="pizza-label-1" class="hidden"> + <h2>Erste Pizza</h2> + </label> + <div class="form-group"> + <label for="d1">Durchmesser in cm:</label> + <input id="d1" class="form-control" type="number" step="0.1" placeholder="Durchmesser in cm" required> + </div> + + <div class="form-group"> + <label for="p1"> + Preis in Euro: + </label> + <input id="p1" class="form-control" type="number" step="0.1" placeholder="Preis in €" required> + </div> + + <div class="form-group"> + <label for="r1"> + <strong>(Optional)</strong> Randstärke in cm (Wie viel der Pizza ist Rand?) + </label> + <input id="r1" class="form-control" type="number" step="0.1" placeholder="Randstärke in cm"> + </div> + + <div class="form-group" id="submit-buttons"> + <button class="btn btn-primary" type="submit">Preis berechnen</button> + <button id="compare" class="btn btn-tertiary" type="button">Vergleichen +</button> + </div> + </form> + <form id="preis2" class="hidden"> + <label> + <h2>Zweite Pizza</h2> + </label> + <div class="form-group"> + <label for="d2">Durchmesser in cm:</label> + <input id="d2" class="form-control" type="number" step="0.1" placeholder="Durchmesser in cm" required> + </div> + + <div class="form-group"> + <label for="p2"> + Preis in Euro: + </label> + <input id="p2" class="form-control" type="number" step="0.1" placeholder="Preis in €" required> + </div> + + <div class="form-group"> + <label for="r2"> + <strong>(Optional)</strong> Randstärke in cm (Wie viel der Pizza ist Rand?) + </label> + <input id="r2" class="form-control" type="number" step="0.1" placeholder="Randstärke in cm"> + </div> + + <div class="form-group"> + <button class="btn btn-primary" type="submit">Preis berechnen</button> + <button id="hide" class="btn btn-tertiary btn-hide" type="button">Verbergen -</button> + </div> + </form> + + <div id="rec" class="alert alert-info hidden"> + </div> + <div id="result" class="hidden"> + <table class="table table-striped table-responsive-sm table-dark"> + <thead> + <tr> + <th> + (~˘▾˘)~ + </th> + <th id="pizza-head-1"> + Pizza + </th> + <th id="pizza-head-2" class="hidden"> + Pizza 2 + </th> + </tr> + </thead> + + <tbody> + <tr> + <th> + Flächeninhalt<span class="Rand"> inklusive Rand</span>: + </th> + <td id="flächeninhalt1"> + </td> + <td id="flächeninhalt2"> + </td> + </tr> + <tr class="Rand"> + <th> + Flächeninhalt ohne Rand (nur Pizzabelag): + </th> + <td id="ohneRand1"> + </td> + <td id="ohneRand2"> + </td> + </tr> + <tr class="Rand"> + <th> + Flächeninhalt des Randes (ohne Belag!): + </th> + <td id="nurRand1"> + </td> + <td id="nurRand2"> + </td> + </tr> + <tr class="Rand"> + <th> + ➔ Verhältnis Rand zu Belag (je höher, desto besser): + </th> + <td id="verhältnis1"> + </td> + <td id="verhältnis2"> + </td> + </tr> + <tr> + <th> + ➔ Wie viel Pizza-cm² pro Euro (inklusive Rand): + </th> + <td id="kostenVerhältnisMitRand1"> + </td> + <td id="kostenVerhältnisMitRand2"> + </td> + </tr> + <tr class="Rand"> + <th> + ➔ Wie viel Pizza-cm² pro Euro (nur Belag): + </th> + <td id="kostenVerhältnisOhneRand1"> + </td> + <td id="kostenVerhältnisOhneRand2"> + </td> + </tr> + <tr> + <th> + Anteilige Kosten nur für den Pizzabelag: + </th> + <td id="kostenOhneRand1"> + </td> + <td id="kostenOhneRand2"> + </td> + </tr> + <tr class="Rand"> + <th> + Anteilige Kosten nur für den Rand: + </th> + <td id="kostenNurRand1"> + </td> + <td id="kostenNurRand2"> + </td> + </tr> + </tbody> + </table> + + <div id="keinenRandAlert" class="hidden alert" style="padding-left: 0;"> + <em>Für genauere Angaben gib einen geschätzen Rand an.</em> + </div> + </div> + + <br> + <span id="pizza-wrap" class="hidden"> + <p>Ungefähre Darstellung der Pizzagröße <a href="#disclaimer">*</a></p> + <div id="pizza1" class="show-pizza"></div> + <div id="pizza2" class="show-pizza hidden"></div> + + <p id="disclaimer"><strong>* Warnung: Sehr ungenau! Hängt von eurem Bildschirm ab und schwankt sogar um mehrere Centimeter!</strong></p> + </span> +</div> + + <script> + var hatKeinenRand = true; + var bestRatioMitRand = []; + var bestRatio = []; + var rec = ""; + function calc(id) { + d = document.getElementById('d' + id).value.replace(",", "."); + p = document.getElementById('p' + id).value.replace(",", "."); + r = document.getElementById('r' + id).value.replace(",", "."); + + f = ( Math.PI * Math.pow((d/2),2) ); + fr = ( Math.PI * Math.pow((d/2)-r,2) ); + frpp = (( Math.PI * Math.pow((d)/2,2) ) - ( Math.PI * Math.pow((d/2)-r,2) )); + v = fr / frpp; + fp = f / p; + frp = fr / p; + pf = p / f; + fpr = pf * fr; + fprpp = pf * frpp; + + document.getElementById('flächeninhalt' + id).innerHTML = f.toFixed(2) + " cm²"; + document.getElementById('ohneRand' + id).innerHTML = fr.toFixed(2) + " cm²"; + document.getElementById('nurRand' + id).innerHTML = frpp.toFixed(2) + " cm²"; + + document.getElementById('verhältnis' + id).innerHTML = "1 : " + v.toFixed(2); + bestRatio.push(v.toFixed(2)); + + document.getElementById('kostenVerhältnisMitRand' + id).innerHTML = fp.toFixed(2) + " <math><mfrac><mi>cm²</mi><mi>€</mi></math><!-- <br><br> (entspricht " + pf.toFixed(2) + " <math><mfrac><mi>€</mi><mi>cm²</mi></math>)-->"; + bestRatioMitRand.push(fp.toFixed(2)); + document.getElementById('kostenVerhältnisOhneRand' + id).innerHTML = frp.toFixed(2) + " <math><mfrac><mi>cm²</mi><mi>€</mi></math><!-- <br><br> (entspricht " + pf.toFixed(2) + " <math><mfrac><mi>€</mi><mi>cm²</mi></math>)-->"; + + document.getElementById('kostenOhneRand' + id).innerHTML = fpr.toFixed(2) + " €"; + document.getElementById('kostenNurRand' + id).innerHTML = fprpp.toFixed(2) + " €"; + + document.getElementById('pizza' + id).style.width = d + "cm"; + document.getElementById('pizza' + id).style.height= d + "cm"; + if ( r ) { + document.getElementById('pizza' + id).style.border= r + "cm solid rgb(230, 219, 128)"; + } else { + document.getElementById('pizza' + id).style.border = 0; + } + document.body.style.zoom = 1.0; + + if ( 0 != r ) { + hatKeinenRand = false; + } + + }; + function clicked(both = false) { + document.getElementById('result').classList.remove("hidden"); + document.getElementById('pizza-wrap').classList.remove("hidden"); + calc("1"); + if( both ) { + calc("2"); + } + + if ( hatKeinenRand ) { + // Keinen Rand angegeben, muss also auch nicht angezeigt werden + document.querySelectorAll('.Rand').forEach(function(item) { + item.classList.add('hidden'); + }); + } else { + // Zeige auch die Ergebnisse, die den Rand berücksichtigen + document.querySelectorAll('.Rand').forEach(function(item) { + item.classList.remove('hidden'); + }); + } + + if ( bestRatioMitRand.length > 1 && bestRatioMitRand[0] != bestRatioMitRand[1] ) { + if ( bestRatioMitRand[0] > bestRatioMitRand[1] ) { + rec = "Das beste Preis-Leistungs-Verhältnis hat <strong>Pizza 1</strong>."; + } else { + rec = "Das beste Preis-Leistungs-Verhältnis hat <strong>Pizza 2</strong>."; + } + + if ( ! hatKeinenRand && bestRatio[0] != bestRatio[1] ) { + if ( bestRatio[0] > bestRatio[1] ) { + rec = rec + " Das beste Verhältnis zwischen Rand und Belag hat <strong>Pizza 1</strong>."; + } else { + rec = rec + " Das beste Verhältnis zwischen Rand und Belag hat <strong>Pizza 2</strong>."; + } + } + } + + if ( rec ) { + // Zeig Empfehlung an + document.getElementById('rec').classList.remove("hidden"); + document.getElementById('rec').innerHTML = rec; + + // Scrolle zur korrekten Stelle + document.getElementById('rec').scrollIntoView({ + behavior: 'smooth' + }); + } else { + // Scrolle zur korrekten Stelle, wenn keine Rec angezeigt wird + document.getElementById('result').scrollIntoView({ + behavior: 'smooth' + }); + } + + if ( hatKeinenRand ) { + document.getElementById('keinenRandAlert').classList.remove("hidden"); + } else { + document.getElementById('keinenRandAlert').classList.add("hidden"); + } + + // back to default + bestRatio = []; + bestRatioMitRand = []; + hatKeinenRand = true; + }; + window.addEventListener("load",function() { + document.getElementById('preis').addEventListener("submit", function(e) { + e.preventDefault(); // before the code + clicked(); + }); + document.getElementById('compare').addEventListener("click", function(e){ + document.getElementById('preis2').classList.remove("hidden"); + document.getElementById('pizza-label-1').classList.remove("hidden"); + document.getElementById('submit-buttons').classList.add("hidden"); + }); + document.getElementById('hide').addEventListener("click", function(e){ + document.getElementById('preis2').classList.add("hidden"); + document.getElementById('pizza-label-1').classList.add("hidden"); + document.getElementById('submit-buttons').classList.remove("hidden"); + }); + document.getElementById('preis2').addEventListener("submit",function(e) { + e.preventDefault(); // before the code + + document.getElementById('pizza-head-1').innerHTML = "Pizza 1"; + document.getElementById('pizza-head-2').classList.remove("hidden"); + document.getElementById('pizza2').classList.remove("hidden"); + + clicked(true); + }); + }); + if ('serviceWorker' in navigator){ + navigator.serviceWorker.register('serviceworker.js').then(function(registration){ + console.log('ServiceWorker registration successful with scope: ', registration.scope); + }).catch(function(err){ + console.log('ServiceWorker registration failed: ', err); + }); + } + </script> +{% endblock %} |