diff options
Diffstat (limited to 'index.php')
| -rw-r--r-- | index.php | 364 |
1 files changed, 364 insertions, 0 deletions
diff --git a/index.php b/index.php new file mode 100644 index 0000000..c07a8d5 --- /dev/null +++ b/index.php @@ -0,0 +1,364 @@ +<!doctype html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <meta name="description" content="Berechnet die Preise für Pizza im Verhältnis zum Flächeninhalt. Lieber zwei kleine oder eine große Pizza kaufen?"> + <link rel='icon' href="data:image/x-icon;base64,AAABAAEAIyMAAAEAIABkFAAAFgAAACgAAAAjAAAARgAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAEAAH8CAH//AgBV/wMAP78EAH//BABmzAUAP78EAD+/BABVqgMAAH8CAAD/AQAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA/wEAf/8CAD+/BABV1AYAbf8HAHH/CQBz5wsAf+kMAH/pDABq6QwAf/8KAHHiCQBt2gcAZswFAFX/AwAAfwIAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wEAf/8CAGbMBQBt/wcAc+cLAHfuDwB/8BIAefIVAH/pGAB/6xoAf+saAHrqGQB58xcAf/IUAHjwEQB16w0Acf8JAH//BgA/vwQAAH8CAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAH8CAD+/BABt2gcAc/8LAHjwEQB58xcAg+0dAIPwIwB/8igAf+0sAHzuLwCC7i8Af+4uAILtKwB/8SYAg+8hAHrsGwB55hUAd+4PAH/lCgBV1AYAVaoDAAD/AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAB/AgBmzAUAceIJAHfuDwB58xcAf+8gAILyKQCE7zIAge07AIHvQQOD8EYDf+1KA4LxSgOD8EgAgexFAIHuPwB/7DgAgu4vAH/qJgB/9RwAf+UUAHXrDQBt/wcAVf8DAAD/AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA/wIAZv8FAH//CgB/8BIAf+wcAH/rKAB/8DQAg/NAAILuTAOE81UCg/FdAoLxYgKC7WYCgvBmAoPvZQKC72ICg/FdA4TwVQCC7UoAge49AIL0LwCD8CMAf+kYAHfuDwB/3wgAP78EAAD/AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH8CAGbMBQB//woAePETAHvuHwCC7i0Ag/I8AILuTAKC8FoCgvBmAoHvcASC8HcEg/B8BILwfwOD8YIDhPCJA4HrkgN43ZgDd9qTAX7ngQKD8GcDge5NAH/sOACC8ScAf+saAHf/DwB/3wgAVf8DAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AQB//wQAcf8JAHjkEwCD7h8Agu4vAIHvQQOB71MCg/JjAoHvcgSC8H0DhPGFA4TwiwOD75ADg/GXBH/orAJOj80BLFHkABkw7wAXK+8BJUPjAUB1xQFvz5ACgvFcAH/yPACC7CkAf+saAHfuDwBt/wcAVaoDAAAAAQAAAAAAAAAAAAAAAAAAAAEAVaoDAF/fCAB/7xAAg+0dAH/uLgB/70ICgvBWAoPwaQSC8HkDhPGFA4PwjgOD75UDg/CZBILvogRtyb8BL1bnAAQH/QAAAP8AAAD/AAAA/wAAAP8AAAH+AB855gFSmKkCgvFgAIHyOwCC8ScAf+kYAHXrDQBm/wUAAH8CAAAAAAAAAAAAAAAAAAD/AQBm/wUAdesNAHrqGQCC8ikAg/I+A4LvVAKD8GkEhPB7A4TxiQOD8ZMDhPCaBITwngSD8KMEfue6AS1V6QAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/ABsy6gFjtZ0CgvBWAITwNgB76SMAhvETAHH/CQBV/wMAAAABAAAAAAAAAAAAVf8DAHHiCQB48RMAf/AiAIHxNwCC8U4CgvBmBIPwegOD8IoDg/GVBIPwnQSD8KEEhPGkBIPwrgJNjNoAAwX9AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/ATJc1QKB8HgAgfBHAHzuLwB/7BwAf+wOAH/UBgAAfwIAAAAAAAD/AQBmzAUAdesNAH/rGgCC7i0Ag/BEAoLuXgKC8HcDhPCNA4PwmwSD8KEEg/CjBIPxpQSE8acEgOq5ASlM7QAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AEiLyA2/KnAKA8FkAgfI7AILxJQB/8hQAceIJAFX/AwAAAAEAAH8CAG3aBwB48BEAg+8hAIHxNwOB71ECgu9xA4PwmQJitL8CWaPOAmm+xwSE8LMEg++pBITxqQN218IAFCb2AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAGDPsCXqy0AoHwaACB7UcAf+4uAH/rGgB16w0AZswFAAD/AQB//wIAZuUKAHnyFQB/6ygAg/NAAoLvYAN/6JYBNGDbAAkR+gADBv0AER/4AUJ63gSD8LYEhPCrA3PUxAASIPgAAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAUK/AJcqbwCgu9zA4HvUQB/8DYAf+8gAH/vEAB//wYAAH8CAFX/AwB/6QwAevQZAH/uLgOD8EgCgfFyAUV+xwABAv4AAAD/AAAA/wAAAP8ADBb6Al+v0ASD8K4Ee+G+AR438gAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8ACxX5Ame9twSD8HgCgO1ZAIHyPQCC8SUAePETAH/fCABVqgMAP78EAIn/DQB/9RwAf+8yA4LxTgOB7YABLVXeAAAA/wAAAP8AAAD/AAAA/wAAAP4CSYbeBITwsQSD8LQBPW/kAAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wElRuwDfOWoBILwewKC8V4Age9DAILsKQB/5xYAcf8JAFX/AwB//wQAd+4PAH/2HgCB8DUDgu9SA4PxgAE2YtkAAAD/AAAA/wAAAP8AAAD/AAEC/gJPktoEhPCvBIPwrANqwcoAGi/1AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AChL7AlCT0QOC8JoEg/B8AoLvYgCD8EYAgvMrAIXzFwB//woAP78EAH//BAB37g8Ag+4fAIHsNwOC8lIEgvB3AlmkvAASI/UAAAD/AAAA/wAAAP8BHzvyA3DPxQSD8KsEg++pBIPwsgJQk9cAFCb3AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAgQ/AFAdN8Eg/CvA4LxkgSC8H0Cg/JjA4HwRwCF8ywAf/QYAHPnCwA/vwQAf/8EAHfuDwB77h8Af+w2A4HvUQKE8W4Dgu+VAlOaygErT+oAGzLzATJd6AJitM0Eg/CwBIPvqQSE76gEhPGpBIPvtAJcqdEBLFHsAAwW+gADBv0AAgT+AAgQ+wEiQfECT5HYBIPvtQOD8J8Dg/CPBIPwfAKC72IAg/BGAH/tLAB/6RgAc+cLAD+/BAA/vwQAf+wOAHvtHQCC8DMDgu5OAoPwaQOE8YMDgvCcBIDqsQR637sEgu65BIPvtASD8K8Eg/CrBIPvqQSE76gEhO+pBIPwrgSA6rsCasHMAlih1wJWndgCZbfPBHrhvwSE8K8EhO+kA4TwmgOE8I0EgvB5AoPuXwCB70MAgvIpAH/zFgBm5QoAVf8DAFX/AwB/6QwAf+saAH/uLgOD8EgCgu9kBIPwfAOD75ADhPCeBITwrwNsxsgCVZvXAlaf1gNz0sQEg/CwBITvqQSE76gEhO+pBITwrwSC7rkEge29BITxtwSD8K4Eg++pBIPxpQSE8KADg/GXA4TwiQKC8XMCg/BZAH/uPgCC8SUAhvETAH//CABVqgMAf/8CAH/lCgB/5xYAf/IoAIHvQQKC7lwCgu91A4PwigOD76MCUZTSABcs9QACBP4AAgX+ASA88gJerM8Eg/CuBITxqQSD77UCWaPSATZj5wEvWOoCSofcBILtvASE8KoEg/CjA4PwnQOE8ZIDg/GCAoHubAOB71EAgfE3AH/vIAB/7xAAbdoHAAB/AgAAfwIAbf8HAHjwEQCD7yEAf+w4A4TyUQKD8GsDg++EAnbWsQAeOPAAAAD/AAAA/wAAAP8AAAD/AStP7ASA57sEhPCxAlKX1gAQHfkAAAD/AAAA/wABA/4BOmnkBIPvtgSD8KEDgu+YA4PwjASC8HkCg/FhAIHwRwCC7i8Af/UaAHXrDQBmzAUAAP8BAAD/AQBm/wUAdesNAH/1GgB/7i4AgfBFAoDuXwSC8HsCZbm4AAkQ+gAAAP8AAAD/AAAA/wAAAP8AEiP3A3XVxAR/57wBKEvtAAAA/wAAAP8AAAD/AAAA/wALFfoCZ73HA4PwnwOD75EDhPGBAoPwbQOB8FUAf+48AH/qJgB55hUAcf8JAFX/AwAAAAEAAAAAAFX/AwBx4gkAhvETAIPwIwCE8TgDgu9QAoHwbANpwqkADxv2AAAA/wAAAP8AAAD/AAAA/wAdNvIDeNzAA3rdwAAZL/QAAAD/AAAA/wAAAP8AAAD/AAUK/AJerMoDgvGYA4PvhgSD73QCgvFeAIHtRwB/7zAAe+0dAHfuDwB//wYAAH8CAAAAAAAAAAAAAH8CAGb/BQB16w0AhPQZAH/yKgCB8j8CgvBYA4HvhAE3ZdMAAAH+AAAA/wAAAP8ABwz8AkZ/2gSD77AEgey1ATBZ6AAAAP8AAAD/AAAA/wAAAP8AFCb1AmzGuAOD8IoEg+92AoPvYwCB8U0AgfE3AIPwIwB/8hQAZuUKAD+/BAAAAAEAAAAAAAAAAAAAAAEAVaoDAH/fCAB48BEAf+4eAILuLwCD8EQCgvFeA4LujQFBeMkAJUXmASlL5gJLidEEg+6uA4PwnwSE8aQCYLDHAB458AABAv4AAAD+AA8b9wFEftADgvGUBIPvdgKD8mMDgu9QAIHyOwB/8igAeuoZAHXrDQBV1AYAAH8CAAAAAAAAAAAAAAAAAAAAAAAA/wEAf/8EAH/lCgCG8RMAf/cgAILvMQCB70MCgvBaAoPvdgN9544Df+qWA4PvkwOD8I8Dg++RA4PxkwOD8J0Cbsq3AkyNzgFHgdACXay5A4PvkAKD73ICg/FfAILuTgB/7jwAf/IqAHrsGwB37g8AX98IAFWqAwAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAfwIAZv8FAHPnCwB/8hQAf+8gAHzuLwCD8j4Dge5PAoLuXgKD8GkCg/FyBILweQSD7n4Dgu+BA4PvggOD8YQDgu+HA4LvgwKB73YCg/JlAoDwVwCD8EgAf/E4AHzsKQCE7BsAf+8QAH//CAA/vwQAAP8BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA/wIAZv8FAHPnCwB48RMAg+0dAILyKQB/8DYAg/NCA4LuTgKC8FgCg/FfAoDvZQKB8GgCg+5pAoPwZwKD72MCg+5dA4LvVACC7UoAf+4+AILvMQB/8CQAeuoZAH/vEABx4gkAf/8EAAD/AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA/wIAZv8FAH/lCgB/7xAAf/QYAIPvIQCC7SsAhPA0AIHuPQCB80MDge1JA4LuTAOB7k0Dge5LA4HwRwCB70EAf+06AILvMQCC8ScAf+4eAHnyFQB1/w0AX98IAD+/BAAA/wEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAfwIAf/8EAG3/BwB/6QwAf/ASAH/0GAB77h8AfPElAH/yKgB/7i4AfOoxAILvMQB/7zAAgu4tAH/yKAB78CMAf+wcAH/nFgBv7xAAf/8KAH/UBgBV/wMAAP8BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wEAVaoDAGbMBQB/3wgAf+kMAHf/DwB48RMAeegXAH/rGgB67BsAf+wcAHrsGwB66hkAf+cWAH/wEgB/7A4Af+UKAG3aBwB//wQAAP8CAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAP8BAFWqAwB//wQAf/8GAH//CAB/5QoAaukMAHXrDQB16w0Af+kMAHPnCwBx/wkAX98IAFXUBgA/vwQAf/8CAAD/AQAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA/wEAAP8CAH//AgBVqgMAVf8DAFX/AwBV/wMAVaoDAH//AgAAfwIAAP8BAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/////+AAAAD/////4AAAAP/////gAAAA/////+AAAAD/////4AAAAP/////gAAAA//+B/+AAAAD/+AB/4AAAAP/gAD/gAAAA/8AAH+AAAAD/gAAf4AAAAP8AAA/gAAAA/gAAD+AAAAD8AAAP4AAAAPwAAA/gAAAA+AAAD+AAAAD4AAAP4AAAAPwAAA/gAAAA/AAAD+AAAAD8AAAP4AAAAP4AAA/gAAAA/gAAD+AAAAD+AAAf4AAAAP8AAB/gAAAA/wAAP+AAAAD/AAB/4AAAAP+AAP/gAAAA/+AB/+AAAAD//wf/4AAAAP/////gAAAA/////+AAAAD/////4AAAAP/////gAAAA/////+AAAAD/////4AAAAA=="> + <link rel="manifest" href="/manifest.json"> + <title>Wie teuer ist eine Pizza im Verhältnis zum Flächeninhalt?</title> + <meta name="theme-color" content="#fd8a02"> + <style><?php readfile("css/prod.min.css"); ?></style> + <style> + html { + width: 100%; + } + .main { + margin-top: 1rem; + } + .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; + } + </style> +</head> + +<body> +<div class="container main"> + <h1>Wie teuer ist eine Pizza im Verhältnis zum Flächeninhalt?</h1> + <p>Auch bekannt als: Sollte man die kleinere oder größere Pizza nehmen? Ist es günstiger zwei Pizzen zu kaufen, oder eine zu teilen?</p> + <!-- 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"> + <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> +</body> +</html> |