Archived
Florian Otto
@@ -1,93 +1,120 @@
|
||||
<!doctype html>
|
||||
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
|
||||
<!--[if gt IE 8]><!-->
|
||||
<html class="">
|
||||
<!--<![endif]-->
|
||||
<head>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#73401e">
|
||||
<meta name="msapplication-TileColor" content="#73401e">
|
||||
<meta name="theme-color" content="#73401e">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Nutellarechner</title>
|
||||
<link href="boilerplate.css" rel="stylesheet" type="text/css">
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<style type="text/css">
|
||||
body,td,th {
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
font-size: large;
|
||||
color: #FFFAE8;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: small;
|
||||
color: #FFFAE8
|
||||
}
|
||||
a.hover {
|
||||
text-decoration: underline
|
||||
}
|
||||
body {
|
||||
background-color: #73401e;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
<script src="respond.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="gridContainer clearfix">
|
||||
<div id="LayoutDiv1"><form method="POST" action="">
|
||||
<p align="center"><b>nutellarechner.de</b><br />
|
||||
(Funktioniert auch für Nusspli ;) )</p>
|
||||
<p align="center"><b>Brötchenhälften:</b>
|
||||
<input name="bread" size=6><br>
|
||||
<b>Wie dick schmierst du?</b>
|
||||
<select name="menge">
|
||||
<option value="normal">normal</option>
|
||||
<option value="viel">dick</option>
|
||||
<option value="sviel">sehr dick</option>
|
||||
<option value="wenig">dünn</option>
|
||||
</select>
|
||||
<br>
|
||||
<br />
|
||||
<input type=submit name=submit value="Rechne das!">
|
||||
</p>
|
||||
</form>
|
||||
<p align="center">
|
||||
<?php
|
||||
// Unser "Wörterbuch" für den zweiten Slider (Position => Echter Wert)
|
||||
$werteMap = [
|
||||
1 => 8,
|
||||
2 => 15,
|
||||
3 => 20,
|
||||
4 => 30,
|
||||
5 => 40
|
||||
];
|
||||
|
||||
if (!empty($_POST["submit"]))
|
||||
{
|
||||
$_zahl1 = $_POST["bread"];
|
||||
$_rz = $_POST["menge"];
|
||||
// Initialisierung der Variablen
|
||||
$ergebnis = null;
|
||||
$wert1 = 2; // Standardwert für Slider 1
|
||||
$wert2_position = 3; // Standard-Position für Slider 2 (entspricht hier der 20)
|
||||
$echter_wert2 = $werteMap[$wert2_position];
|
||||
|
||||
if($_rz == "normal") $c = $_zahl1 * 15;
|
||||
if($_rz == "viel") $c = $_zahl1 * 25;
|
||||
if($_rz == "sviel") $c = $_zahl1 * 40;
|
||||
if($_rz == "wenig") $c = $_zahl1 * 8;
|
||||
if($_rz == "vegan") $c = $_zahl1 * 0;
|
||||
// Prüfen, ob das Formular abgeschickt wurde
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
$wert1 = filter_input(INPUT_POST, 'slider1', FILTER_VALIDATE_INT) ?: 1;
|
||||
|
||||
echo "Für ". $_zahl1/2 . " Brötchen brauchst Du ". $c ."g Nutella.";
|
||||
}
|
||||
// Wir lesen die Position (1-5) des Sliders aus
|
||||
$wert2_position = filter_input(INPUT_POST, 'slider2', FILTER_VALIDATE_INT) ?: 1;
|
||||
|
||||
// Zur Sicherheit prüfen, ob die Position in unserem Array existiert
|
||||
if (array_key_exists($wert2_position, $werteMap)) {
|
||||
$echter_wert2 = $werteMap[$wert2_position];
|
||||
} else {
|
||||
$echter_wert2 = $werteMap[1]; // Fallback auf den ersten Wert
|
||||
}
|
||||
|
||||
// Die beiden echten Werte multiplizieren
|
||||
$ergebnis = $wert1 * $echter_wert2;
|
||||
}
|
||||
?>
|
||||
</p>
|
||||
<p align="center">
|
||||
<br />
|
||||
Ich will lieber <a href="https://mettcalc.de" style="font-size:x-large;text-decoration:underline">Mett</a>!
|
||||
<br />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<nav><p align="center">
|
||||
<a href="impressum.php">Impressum</a>
|
||||
</p>
|
||||
</nav>
|
||||
</footer>
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>nutellarechner</title>
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<h1><span class="span-dark">nutella</span><span class="span-red">rechner</span></h1>
|
||||
<p class="slogan">Für jede Nuss-Nougat-Creme geeignet.</p>
|
||||
|
||||
<form method="POST" action="">
|
||||
<div class="form-group">
|
||||
<label for="slider1">
|
||||
Brötchenhälften: <span id="display1"
|
||||
class="value-display"><?= htmlspecialchars((string) $wert1) ?></span>
|
||||
</label>
|
||||
<input type="range" id="slider1" name="slider1" min="1" max="100" step="1"
|
||||
value="<?= htmlspecialchars((string) $wert1) ?>"
|
||||
oninput="document.getElementById('display1').innerText = this.value">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="slider2">
|
||||
So dick wird geschmiert: <span id="display2" class="value-display"></span>
|
||||
</label>
|
||||
<input type="range" id="slider2" name="slider2" min="1" max="5" step="1"
|
||||
value="<?= htmlspecialchars((string) $wert2_position) ?>" oninput="updateSlider2(this.value)">
|
||||
</div>
|
||||
|
||||
<button class="button-calc" role="button" type="submit">Rechnen</button>
|
||||
</form>
|
||||
|
||||
<?php if ($ergebnis !== null): ?>
|
||||
<div class="result">
|
||||
<strong>Ergebnis:</strong> Du brauchst
|
||||
<strong><?= htmlspecialchars((string) $ergebnis) ?></strong> Gramm Nutella.
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<p class="werbung-title">Ich möchte lieber:</p>
|
||||
<div class="werbung-buttons">
|
||||
<!-- <button class="button-nudeln" role="button" onclick="window.location.href='https://nudelrechner.de';">Nudeln</button> --><button class="button-mett" role="button" onclick="window.location.href='https://mettcalc.de';">Mettbrötchen</button> <!-- <button class="button-burger" role="button" onclick="window.location.href='https://burgerrechner.de';">Burger</button>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Ein Objekt, das die Positionen (1-5) mit Texten UND deinen eigenen Zahlen verknüpft
|
||||
const sliderDaten = {
|
||||
1: { text: "sehr dünn", wert: 8 },
|
||||
2: { text: "dünn", wert: 15 },
|
||||
3: { text: "normal", wert: 20 },
|
||||
4: { text: "dick", wert: 30 },
|
||||
5: { text: "sehr dick", wert: 40 }
|
||||
};
|
||||
|
||||
// Funktion, um Text und die echten Zahlen anzuzeigen
|
||||
function updateSlider2(position) {
|
||||
const daten = sliderDaten[position];
|
||||
document.getElementById('display2').innerText = daten.text;
|
||||
}
|
||||
|
||||
// Startwert beim Laden setzen
|
||||
window.onload = function () {
|
||||
const startPosition = document.getElementById('slider2').value;
|
||||
updateSlider2(startPosition);
|
||||
};
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
<nav>
|
||||
<p>
|
||||
<a href="impressum.php">Impressum</a>
|
||||
</p>
|
||||
<p class="disclaimer">Disclaimer: <span class="span-dark">nutella</span><span class="span-red">rechner</span> ist ein privat betriebenes Projekt ohne kommerzielle Absichten und steht in keiner Beziehung zum Unternehmen Ferrero oder der Marke Nutella.</p>
|
||||
</nav>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user