summaryrefslogtreecommitdiff
path: root/index.php
diff options
context:
space:
mode:
authorHorus2020-10-19 23:50:06 +0200
committerHorus2020-10-19 23:50:06 +0200
commit035fc1fd1ba4df72074a05e43d210bad04bf8ce7 (patch)
treefe283978c6408bc781e98664ea603bbb9012803d /index.php
parent2f4f077594e45c8b524f7249dc61c7a0fdfbd81c (diff)
downloadpizza-035fc1fd1ba4df72074a05e43d210bad04bf8ce7.tar.gz
inline css and faviconHEADmaster
Diffstat (limited to 'index.php')
-rw-r--r--index.php364
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,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">
+ <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>
+ &#10132; Verhältnis Rand zu Belag (je höher, desto besser):
+ </th>
+ <td id="verhältnis1">
+ </td>
+ <td id="verhältnis2">
+ </td>
+ </tr>
+ <tr>
+ <th>
+ &#10132; Wie viel Pizza-cm² pro Euro (inklusive Rand):
+ </th>
+ <td id="kostenVerhältnisMitRand1">
+ </td>
+ <td id="kostenVerhältnisMitRand2">
+ </td>
+ </tr>
+ <tr class="Rand">
+ <th>
+ &#10132; 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>