inline css and faviconHEAD master

author: Horus 2020-10-19 23:50:06 +0200
committer: Horus 2020-10-19 23:50:06 +0200
commit: 035fc1fd1ba4df72074a05e43d210bad04bf8ce7 (patch)
tree: fe283978c6408bc781e98664ea603bbb9012803d /index.html
parent: 2f4f077594e45c8b524f7249dc61c7a0fdfbd81c (diff)
download: pizza-master.tar.gz
1 files changed, 0 insertions, 364 deletions
diff --git a/index.html b/index.html
deleted file mode 100644
index a6fdeb0..0000000
--- a/index.html
+++ /dev/null
@@ -1,364 +0,0 @@
-<!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='stylesheet' type='text/css' href="/css/bootstrap.min.css">
-	<link rel='icon' href="/img/paw-144.png">
-	<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>
-		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>
author	Horus	2020-10-19 23:50:06 +0200
committer	Horus	2020-10-19 23:50:06 +0200
commit	035fc1fd1ba4df72074a05e43d210bad04bf8ce7 (patch)
tree	fe283978c6408bc781e98664ea603bbb9012803d /index.html
parent	2f4f077594e45c8b524f7249dc61c7a0fdfbd81c (diff)
download	pizza-master.tar.gz