From 94a325594c8a9e124ea75f2885e82786fb2172bc Mon Sep 17 00:00:00 2001
From: horus
Date: Mon, 15 Mar 2021 17:38:07 +0100
Subject: Inline page in website

---
 index.html | 358 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 358 insertions(+)
 create mode 100644 index.html

(limited to 'index.html')

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>
+						&#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>
+{% endblock %}
-- 
cgit v1.2.3