Archived
Florian OttoandCopilot
7e74f8843e
Deploy Website / deploy (push) Successful in 4s
Co-authored-by: Copilot <copilot@github.com>
120 lines
4.5 KiB
PHP
120 lines
4.5 KiB
PHP
<?php
|
|
// Unser "Wörterbuch" für den zweiten Slider (Position => Echter Wert)
|
|
$werteMap = [
|
|
1 => 8,
|
|
2 => 15,
|
|
3 => 20,
|
|
4 => 30,
|
|
5 => 40
|
|
];
|
|
|
|
// 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];
|
|
|
|
// Prüfen, ob das Formular abgeschickt wurde
|
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|
$wert1 = filter_input(INPUT_POST, 'slider1', FILTER_VALIDATE_INT) ?: 1;
|
|
|
|
// 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;
|
|
}
|
|
?>
|
|
<!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>
|