Archived
Florian Otto
@@ -1,280 +0,0 @@
|
|||||||
@charset "utf-8";
|
|
||||||
/*
|
|
||||||
/*
|
|
||||||
* HTML5 ✰ Boilerplate
|
|
||||||
*
|
|
||||||
* Das Folgende ist das Ergebnis umfangreicher Nachforschungen zum browserunabhängigen Webdesign.
|
|
||||||
* Verweise auf die Urheber finden Sie in den Codekommentaren, außerdem ein herzliches Dankeschön an Nicolas Gallagher, Jonathan Neal,
|
|
||||||
* Kroc Camen und die H5BP-Entwicklergemeinde und das H5BP-Team.
|
|
||||||
*
|
|
||||||
* Ausführliche Informationen über diesen CSS-Code gibt's unter h5bp.com/css
|
|
||||||
*
|
|
||||||
* Dreamweaver-Modifikationen:
|
|
||||||
* 1. Auswahlmarkierung auskommentiert
|
|
||||||
* 2. Abschnitt über Medienabfrage entfernt (wir definieren unsere eigene Medienabfrage in einer gesonderten Datei)
|
|
||||||
*
|
|
||||||
* ==|== Normalisieren ======================================================
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/* =============================================================================
|
|
||||||
HTML5-Anzeigedefinitionen
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
|
|
||||||
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
|
|
||||||
audio:not([controls]) { display: none; }
|
|
||||||
[hidden] { display: none; }
|
|
||||||
|
|
||||||
/* =============================================================================
|
|
||||||
Basis
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* 1. Die Anpassung der Textgröße führt in IE6/7 zu merkwürdigen Resultaten, wenn die Schriftgröße des Bodytexts in em-Einheiten angegeben ist
|
|
||||||
* 2. Erzwingen einer vertikalen Bildlaufleiste in Nicht-IE-Browsern
|
|
||||||
* 3. Verhindern der iOS-Textgrößenanpassung beim Ändern der Geräteausrichtung ohne den Benutzerzoom zu deaktivieren: h5bp.com/g
|
|
||||||
*/
|
|
||||||
|
|
||||||
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
|
|
||||||
|
|
||||||
body { margin: 0; font-size: medium; line-height: 1.231; }
|
|
||||||
|
|
||||||
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Textschatten in der Auswahlmarkierung entfernen: h5bp.com/i
|
|
||||||
* Die folgenden Auswahldeklarationen müssen getrennt voneinander erfolgen
|
|
||||||
* Außerdem: leuchtendes Pink! (Die Hintergrundfarbe kann auch an das Design angepasst werden.)
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* Dreamweaver: die folgenden Codestellen auskommentieren, wenn die Auswahlmarkierung angepasst werden soll
|
|
||||||
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
|
|
||||||
*::selection { background: #fe57a1; color: #fff; text-shadow: none; }
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* =============================================================================
|
|
||||||
Hyperlinks
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
a { color: #222; }
|
|
||||||
a:visited { color: #000; }
|
|
||||||
a:hover { color: #eb3526; }
|
|
||||||
a:focus { outline: thin dotted; }
|
|
||||||
|
|
||||||
/* Verbessert in allen Browsern die Lesbarkeit von Hyperlinks, die über die Tabulatortaste fokussiert werden (focus) und von Hyperlinks, auf die der Mauszeiger gerichtet ist (hover): h5bp.com/h */
|
|
||||||
a:hover, a:active { outline: 0; }
|
|
||||||
|
|
||||||
|
|
||||||
/* =============================================================================
|
|
||||||
Typografie
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
abbr[title] { border-bottom: 1px dotted; }
|
|
||||||
|
|
||||||
b, strong { font-weight: bold; }
|
|
||||||
|
|
||||||
blockquote { margin: 1em 40px; }
|
|
||||||
|
|
||||||
dfn { font-style: italic; }
|
|
||||||
|
|
||||||
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
|
|
||||||
|
|
||||||
ins { background: #ff9; color: #000; text-decoration: none; }
|
|
||||||
|
|
||||||
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
|
|
||||||
|
|
||||||
/* Nichtproportionale Schriftfamilie neu deklarieren: h5bp.com/j */
|
|
||||||
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
|
|
||||||
|
|
||||||
/* In allen Browsern die Lesbarkeit von vorformatiertem Text verbessern */
|
|
||||||
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
|
|
||||||
|
|
||||||
q { quotes: none; }
|
|
||||||
q:before, q:after { content: ""; content: none; }
|
|
||||||
|
|
||||||
small { font-size: 85%; }
|
|
||||||
|
|
||||||
/* Text höher oder tiefer stellen ohne die Zeilenhöhe zu beeinflussen: h5bp.com/k */
|
|
||||||
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
|
|
||||||
sup { top: -0.5em; }
|
|
||||||
sub { bottom: -0.25em; }
|
|
||||||
|
|
||||||
|
|
||||||
/* =============================================================================
|
|
||||||
Listen
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
|
|
||||||
dd { margin: 0 0 0 40px; }
|
|
||||||
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
|
|
||||||
|
|
||||||
|
|
||||||
/* =============================================================================
|
|
||||||
Eingebetteter Inhalt
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* 1. Verbessern der Bildqualität beim Skalieren in IE7: h5bp.com/d
|
|
||||||
* 2. Entfernen der Lücke zwischen Bildern und Rahmen in Bildcontainern: h5bp.com/e
|
|
||||||
*/
|
|
||||||
|
|
||||||
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Korrekter Überlauf in IE9 nicht verborgen
|
|
||||||
*/
|
|
||||||
|
|
||||||
svg:not(:root) { overflow: hidden; }
|
|
||||||
|
|
||||||
|
|
||||||
/* =============================================================================
|
|
||||||
Abbildungen
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
figure { margin: 0; }
|
|
||||||
|
|
||||||
|
|
||||||
/* =============================================================================
|
|
||||||
Formulare
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
form { margin: 0; }
|
|
||||||
fieldset { border: 0; margin: 0; padding: 0; }
|
|
||||||
|
|
||||||
/* Festlegen, dass 'label' den Fokus auf das betreffende Forularelement setzt */
|
|
||||||
label { cursor: pointer; }
|
|
||||||
|
|
||||||
/*
|
|
||||||
* 1. Korrekte Farbe wird in IE6/7/8/9 nicht vererbt
|
|
||||||
* 2. Korrekte Ausrichtung wird in IE6/7 merkwürdig angezeigt
|
|
||||||
*/
|
|
||||||
|
|
||||||
legend { border: 0; *margin-left: -7px; padding: 0; }
|
|
||||||
|
|
||||||
/*
|
|
||||||
* 1. Korrekte Schriftgröße wird in keinem der Browser vererbt
|
|
||||||
* 2. Entfernen von Rändern in FF3/4 S5 Chrome
|
|
||||||
* 3. Definieren konsistenter vertikaler Ausrichtung für alle Browser
|
|
||||||
*/
|
|
||||||
|
|
||||||
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
|
|
||||||
|
|
||||||
/*
|
|
||||||
* 1. Für eine Übereinstimmung mit FF3/4 die Zeilenhöhe als normal definieren (im UA-Stylesheet '!important' verwenden)
|
|
||||||
* 2. Korrekter innerer Abstand wird in IE6/7 merkwürdig angezeigt
|
|
||||||
*/
|
|
||||||
|
|
||||||
button, input { line-height: normal; *overflow: visible; }
|
|
||||||
|
|
||||||
/*
|
|
||||||
* In 'table' inneren Abstand wieder einführen, um Überlappungen zu vermeiden und IE6/7-Probleme mit Leerraum zu vermeiden.
|
|
||||||
*/
|
|
||||||
|
|
||||||
table button, table input { *overflow: auto; }
|
|
||||||
|
|
||||||
/*
|
|
||||||
* 1. Anzeigen des Handcursors bei klickbaren Formularelementen
|
|
||||||
* 2. Gestaltung klickbarer Formularelemente in iOS ermöglichen
|
|
||||||
*/
|
|
||||||
|
|
||||||
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Konsistente Größe und Darstellung von Feldern
|
|
||||||
*/
|
|
||||||
|
|
||||||
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
|
|
||||||
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
|
|
||||||
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
|
|
||||||
|
|
||||||
/*
|
|
||||||
* In FF3/4 innere Auffüllung und Rahmen entfernen: h5bp.com/l
|
|
||||||
*/
|
|
||||||
|
|
||||||
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
|
|
||||||
|
|
||||||
/*
|
|
||||||
* 1. In IE6/7/8/9 vertikale Standardbildlaufleiste entfernen
|
|
||||||
* 2. Größenänderung nur in der Vertikale zulassen
|
|
||||||
*/
|
|
||||||
|
|
||||||
textarea { overflow: auto; vertical-align: top; resize: vertical; }
|
|
||||||
|
|
||||||
/* Farben für die Formularüberprüfung */
|
|
||||||
input:valid, textarea:valid { }
|
|
||||||
input:invalid, textarea:invalid { background-color: #f0dddd; }
|
|
||||||
|
|
||||||
|
|
||||||
/* =============================================================================
|
|
||||||
Tabellen
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
table { border-collapse: collapse; border-spacing: 0; }
|
|
||||||
td { vertical-align: top; }
|
|
||||||
|
|
||||||
|
|
||||||
/* ==|== Primärstile ========================================================
|
|
||||||
Autor:
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* ==|== nichtsemantische Helferklassen ========================================
|
|
||||||
Definieren Sie Ihre Stile vor dieser Auswahl
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/* Für den Austausch von Bildern */
|
|
||||||
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
|
|
||||||
.ir br { display: none; }
|
|
||||||
|
|
||||||
/* Vor Bildschirmleseprogrammen und Browsern verbergen: h5bp.com/u */
|
|
||||||
.hidden { display: none !important; visibility: hidden; }
|
|
||||||
|
|
||||||
/* Nur visuell verbergen, aber für Bildschirmleseprogramme bereithalten: h5bp.com/v */
|
|
||||||
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
|
|
||||||
|
|
||||||
/* Erweitert die Klasse ".visuallyhidden" so, dass das Element bei der Tastaturnavigation den Fokus erhält: h5bp.com/p */
|
|
||||||
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
|
|
||||||
|
|
||||||
/* Visuell und vor Bildschirmleseprogrammen verbergen, aber das Layout beibehalten */
|
|
||||||
.invisible { visibility: hidden; }
|
|
||||||
|
|
||||||
/* Floats beinhalten: h5bp.com/q */
|
|
||||||
.clearfix:before, .clearfix:after { content: ""; display: table; }
|
|
||||||
.clearfix:after { clear: both; }
|
|
||||||
.clearfix { zoom: 1; }
|
|
||||||
|
|
||||||
|
|
||||||
/* ==|== Druckstile ==========================================================
|
|
||||||
Druckstile.
|
|
||||||
Innen, um die erforderliche HTTP-Verbindung zu vermeiden: h5bp.com/r
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@media print {
|
|
||||||
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Schwarz druckt schneller: h5bp.com/s */
|
|
||||||
a, a:visited { text-decoration: underline; }
|
|
||||||
a[href]:after { content: " (" attr(href) ")"; }
|
|
||||||
abbr[title]:after { content: " (" attr(title) ")"; }
|
|
||||||
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Keine Bildverweise anzeigen und keine javascript/internal- Hyperlinks */
|
|
||||||
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
|
|
||||||
thead { display: table-header-group; } /* h5bp.com/t */
|
|
||||||
tr, img { page-break-inside: avoid; }
|
|
||||||
img { max-width: 100% !important; }
|
|
||||||
@page { margin: 0.5cm; }
|
|
||||||
p, h2, h3 { orphans: 3; widows: 3; }
|
|
||||||
h2, h3 { page-break-after: avoid; }
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="de">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Basic HTML Page</title>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
background-color: #7a381e;
|
|
||||||
color: #333;
|
|
||||||
display: flex;
|
|
||||||
min-height: 100vh;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2rem;
|
|
||||||
letter-spacing: 0.03em;
|
|
||||||
margin: 0;
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.etikett {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 809px;
|
|
||||||
height: 776px;
|
|
||||||
background-image: url('data:image/svg+xml,<svg width="809px" height="776px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-45.984221,-27.910785)"><g transform="matrix(0.481893,0,0,0.481893,-154.520299,-91.445084)"><path d="M1589.216,391.728C1607.444,417.316 1636.92,432.509 1668.337,432.509C1750.341,432.521 1891.324,432.521 1891.324,432.521C1997.956,432.521 2084.528,519.093 2084.528,625.725L2084.528,1655.427C2084.528,1762.059 1997.956,1848.631 1891.324,1848.631L617.613,1848.631C510.981,1848.631 424.41,1762.059 424.41,1655.427L424.41,625.725C424.41,519.093 510.981,432.521 617.613,432.521L840.601,432.521C872.021,432.521 901.501,417.326 919.731,391.735C976.466,311.833 1105.066,256.014 1254.469,256.014C1403.872,256.014 1532.471,311.833 1589.216,391.728Z" style="fill:white;stroke:%23512717;stroke-width:16.67px;" /></g><g transform="matrix(1.09499,0,0,1.09499,-31.67058,-10.50163)"><path d="M420.762,122.374C401.388,108.228 404.796,89.046 413.697,81.751C419.644,76.877 428.043,77.309 433.737,88.093L433.767,88.151C457.895,70.697 474.397,112.278 420.762,122.374Z" style="fill:%23B67552;stroke:%23512717;stroke-width:3.32px;" /><g transform="matrix(1,0,0,1,-5.201076,-38.425008)"><path d="M425.963,160.799C426.698,156.554 432.005,132.702 439.288,126.938" style="fill:none;stroke:%23512717;stroke-width:2.05px;" /></g><g transform="matrix(1,0,0,1,-5.201076,-38.425008)"><path d="M418.898,120.176C415.841,116.806 419.38,102.644 429.47,100.355C429.991,100.236 431.091,100.583 431.193,100.718C433.444,103.723 429.734,109.731 429.55,110.465C429.728,109.931 430.024,109.291 430.352,108.589C432.859,104.28 439.468,100.322 441.191,102.402C442.798,104.342 440.406,111.42 440.155,112.164C438.538,116.185 436.257,120.029 435.391,121.411C430.106,115.764 423.702,116.239 418.898,120.176Z" style="fill:%239CB751;stroke:%23512717;stroke-width:1.9px;stroke-miterlimit:5;" /></g><g transform="matrix(1,0,0,1,-5.201076,-38.425008)"><path d="M454.479,110.032C453.404,111.58 452.768,112.546 452.768,112.546C452.768,112.546 453.518,111.635 454.479,110.032C460.173,101.833 476.409,86.263 478.066,89.219C481.04,94.525 462.686,116.738 462.076,116.379C462.83,115.78 471.499,108.896 471.499,108.896C483.568,101.179 474.141,123.565 461.044,130.053C458.675,122.625 449.556,118.917 438.968,126.576L438.938,126.518C437.843,124.445 436.649,122.755 435.391,121.411C436.476,119.678 437.945,114.745 446.198,103.541C455.369,91.091 457.483,92.918 458.101,93.972C458.96,95.437 458.455,103.402 454.479,110.032Z" style="fill:%239CB751;stroke:%23512717;stroke-width:2.21px;stroke-miterlimit:5;" /></g></g></g></svg>');
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="etikett">
|
|
||||||
<h1><span style="color: black;">nutella</span><span style="color: #eb3526;">rechner</span></h1>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
-120
@@ -1,120 +0,0 @@
|
|||||||
<?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>
|
|
||||||
-436
@@ -1,436 +0,0 @@
|
|||||||
/* ==========================================================================
|
|
||||||
1. CSS Variablen (Custom Properties)
|
|
||||||
========================================================================== */
|
|
||||||
:root {
|
|
||||||
/* Farben */
|
|
||||||
--color-primary: #222222;
|
|
||||||
--color-secondary: #eb3526;
|
|
||||||
--color-tertiary: #f7c66d;
|
|
||||||
--color-background: #7a381e;
|
|
||||||
--color-text: #333333;
|
|
||||||
--color-text-light: #666666;
|
|
||||||
--color-text-white: #ffffff;
|
|
||||||
|
|
||||||
/* Typografie */
|
|
||||||
--font-family-base: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
||||||
--font-size-base: 16px;
|
|
||||||
--font-size-title: 54px;
|
|
||||||
--line-height-base: 1.5;
|
|
||||||
|
|
||||||
/* Abstände (Spacing) */
|
|
||||||
--spacing-sm: 0.5rem;
|
|
||||||
--spacing-md: 1rem;
|
|
||||||
--spacing-lg: 2rem;
|
|
||||||
|
|
||||||
/* Radien */
|
|
||||||
--border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
2. Basis Reset & Normierung
|
|
||||||
========================================================================== */
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
box-sizing: border-box; /* Verhindert, dass Padding/Border die Breite verändern */
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-size: var(--font-size-base);
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: var(--font-family-base);
|
|
||||||
color: var(--color-text);
|
|
||||||
background-color: var(--color-background);
|
|
||||||
line-height: var(--line-height-base);
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: var(--spacing-lg);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--color-tertiary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsives Verhalten für Medien */
|
|
||||||
img,
|
|
||||||
picture,
|
|
||||||
video,
|
|
||||||
canvas,
|
|
||||||
svg {
|
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
3. Grundlegende Typografie
|
|
||||||
========================================================================== */
|
|
||||||
h1 {
|
|
||||||
margin-bottom: var(--spacing-sm);
|
|
||||||
line-height: 1.2;
|
|
||||||
color: var(--color-primary);
|
|
||||||
text-align: center;
|
|
||||||
font-size: var(--font-size-title);
|
|
||||||
}
|
|
||||||
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
margin-bottom: var(--spacing-md);
|
|
||||||
line-height: 1.2;
|
|
||||||
color: var(--color-primary);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: var(--spacing-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--color-primary);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: var(--spacing-sm);
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.span-dark {
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.span-red {
|
|
||||||
color: var(--color-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slogan {
|
|
||||||
color: var(--color-text-light);
|
|
||||||
font-style: italic;
|
|
||||||
font-size: small;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: var(--spacing-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.disclaimer {
|
|
||||||
color: var(--color-text);
|
|
||||||
background: var(--color-tertiary);
|
|
||||||
font-style: italic;
|
|
||||||
font-size: small;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: var(--spacing-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.value-display {
|
|
||||||
color: var(--color-secondary);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.result {
|
|
||||||
margin-top: var(--spacing-lg);
|
|
||||||
padding: var(--spacing-md);
|
|
||||||
background-color: var(--color-tertiary);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
color: var(--color-primary);
|
|
||||||
font-size: 1.25rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.werbung-title {
|
|
||||||
width: 90%;
|
|
||||||
margin-left: 5%;
|
|
||||||
margin-right: 5%;
|
|
||||||
margin-top: var(--spacing-lg);
|
|
||||||
padding: var(--spacing-md);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
color: var(--color-text);
|
|
||||||
font-size: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.werbung-buttons {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: var(--spacing-md);
|
|
||||||
margin-top: var(--spacing-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
4. Layout Buttons, Forms & Slider
|
|
||||||
========================================================================== */
|
|
||||||
.button-calc {
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0.6em 2em;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
box-sizing: border-box;
|
|
||||||
outline: none;
|
|
||||||
color: var(--color-text);
|
|
||||||
background: var(--color-tertiary);
|
|
||||||
font-size: large;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
-webkit-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
touch-action: manipulation;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-calc:before {
|
|
||||||
content: "";
|
|
||||||
background: linear-gradient(
|
|
||||||
45deg,
|
|
||||||
var(--color-background),
|
|
||||||
var(--color-secondary),
|
|
||||||
var(--color-tertiary),
|
|
||||||
var(--color-text-white)
|
|
||||||
);
|
|
||||||
position: absolute;
|
|
||||||
top: -2px;
|
|
||||||
left: -2px;
|
|
||||||
background-size: 400%;
|
|
||||||
z-index: -1;
|
|
||||||
-webkit-filter: blur(5px);
|
|
||||||
filter: blur(5px);
|
|
||||||
width: calc(100% + 4px);
|
|
||||||
height: calc(100% + 4px);
|
|
||||||
animation: glowing-button-calc 20s linear infinite;
|
|
||||||
transition: opacity 0.5s ease-in-out;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes glowing-button-calc {
|
|
||||||
0% {
|
|
||||||
background-position: 0 0;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
background-position: 400% 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position: 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-calc:after {
|
|
||||||
z-index: -1;
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: var(--color-tertiary);
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-calc:hover {
|
|
||||||
background: var(--color-tertiary);
|
|
||||||
color: var(--color-secondary);
|
|
||||||
border: 1px solid var(--color-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-mett {
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0.6em 2em;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
box-sizing: border-box;
|
|
||||||
outline: none;
|
|
||||||
color: #fffae8;
|
|
||||||
background: #cd7569;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-mett:hover {
|
|
||||||
color: #cd7569;
|
|
||||||
background-color: #fffae8;
|
|
||||||
border: 1px solid #fffae8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-nudeln {
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0.6em 2em;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
box-sizing: border-box;
|
|
||||||
outline: none;
|
|
||||||
color: #fdbf5b;
|
|
||||||
background: #182132;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-nudeln:hover {
|
|
||||||
color: #182132;
|
|
||||||
background-color: #fdbf5b;
|
|
||||||
border: 1px solid #182132;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-burger {
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0.6em 2em;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
box-sizing: border-box;
|
|
||||||
outline: none;
|
|
||||||
color: orange;
|
|
||||||
background: #221600;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-burger:hover {
|
|
||||||
color: #221600;
|
|
||||||
background-color: orange;
|
|
||||||
border: 1px solid #221600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: var(--spacing-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"] {
|
|
||||||
margin: 0 5%;
|
|
||||||
width: 90%;
|
|
||||||
accent-color: var(--color-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
5. Layout Listen
|
|
||||||
========================================================================== */
|
|
||||||
ul,
|
|
||||||
ol {
|
|
||||||
margin: 1em 0;
|
|
||||||
padding: 0 0 0 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
dd {
|
|
||||||
margin: 0 0 0 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul,
|
|
||||||
nav ol {
|
|
||||||
list-style: none;
|
|
||||||
list-style-image: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
6. Layout Container
|
|
||||||
========================================================================== */
|
|
||||||
.container {
|
|
||||||
width: 100%;
|
|
||||||
height: 776px;
|
|
||||||
padding-top: 100px;
|
|
||||||
padding-right: 15px;
|
|
||||||
padding-left: 15px;
|
|
||||||
margin-top: var(--spacing-md);
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
background-image: url('data:image/svg+xml,<svg width="809px" height="776px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-45.984221,-27.910785)"><g transform="matrix(0.481893,0,0,0.481893,-154.520299,-91.445084)"><path d="M1589.216,391.728C1607.444,417.316 1636.92,432.509 1668.337,432.509C1750.341,432.521 1891.324,432.521 1891.324,432.521C1997.956,432.521 2084.528,519.093 2084.528,625.725L2084.528,1655.427C2084.528,1762.059 1997.956,1848.631 1891.324,1848.631L617.613,1848.631C510.981,1848.631 424.41,1762.059 424.41,1655.427L424.41,625.725C424.41,519.093 510.981,432.521 617.613,432.521L840.601,432.521C872.021,432.521 901.501,417.326 919.731,391.735C976.466,311.833 1105.066,256.014 1254.469,256.014C1403.872,256.014 1532.471,311.833 1589.216,391.728Z" style="fill:white;stroke:%23512717;stroke-width:16.67px;" /></g><g transform="matrix(1.09499,0,0,1.09499,-31.67058,-10.50163)"><path d="M420.762,122.374C401.388,108.228 404.796,89.046 413.697,81.751C419.644,76.877 428.043,77.309 433.737,88.093L433.767,88.151C457.895,70.697 474.397,112.278 420.762,122.374Z" style="fill:%23B67552;stroke:%23512717;stroke-width:3.32px;" /><g transform="matrix(1,0,0,1,-5.201076,-38.425008)"><path d="M425.963,160.799C426.698,156.554 432.005,132.702 439.288,126.938" style="fill:none;stroke:%23512717;stroke-width:2.05px;" /></g><g transform="matrix(1,0,0,1,-5.201076,-38.425008)"><path d="M418.898,120.176C415.841,116.806 419.38,102.644 429.47,100.355C429.991,100.236 431.091,100.583 431.193,100.718C433.444,103.723 429.734,109.731 429.55,110.465C429.728,109.931 430.024,109.291 430.352,108.589C432.859,104.28 439.468,100.322 441.191,102.402C442.798,104.342 440.406,111.42 440.155,112.164C438.538,116.185 436.257,120.029 435.391,121.411C430.106,115.764 423.702,116.239 418.898,120.176Z" style="fill:%239CB751;stroke:%23512717;stroke-width:1.9px;stroke-miterlimit:5;" /></g><g transform="matrix(1,0,0,1,-5.201076,-38.425008)"><path d="M454.479,110.032C453.404,111.58 452.768,112.546 452.768,112.546C452.768,112.546 453.518,111.635 454.479,110.032C460.173,101.833 476.409,86.263 478.066,89.219C481.04,94.525 462.686,116.738 462.076,116.379C462.83,115.78 471.499,108.896 471.499,108.896C483.568,101.179 474.141,123.565 461.044,130.053C458.675,122.625 449.556,118.917 438.968,126.576L438.938,126.518C437.843,124.445 436.649,122.755 435.391,121.411C436.476,119.678 437.945,114.745 446.198,103.541C455.369,91.091 457.483,92.918 458.101,93.972C458.96,95.437 458.455,103.402 454.479,110.032Z" style="fill:%239CB751;stroke:%23512717;stroke-width:2.21px;stroke-miterlimit:5;" /></g></g></g></svg>');
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center top;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grid-Beispiel (Flexbox) */
|
|
||||||
.row {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-right: -15px;
|
|
||||||
margin-left: -15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col {
|
|
||||||
flex: 1 0 100%; /* Nimmt auf Mobilgeräten die volle Breite ein */
|
|
||||||
padding-right: 15px;
|
|
||||||
padding-left: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
7. Media Queries (Mobile First)
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/* --- Kleine Geräte (Smartphones im Querformat, ab 576px) --- */
|
|
||||||
@media (min-width: 576px) {
|
|
||||||
.container {
|
|
||||||
max-width: 809px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Mittlere Geräte (Tablets, ab 768px) --- */
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.container {
|
|
||||||
max-width: 809px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Beispiel: Spalten stehen nebeneinander ab Tablet-Größe */
|
|
||||||
.col {
|
|
||||||
flex: 1 0 50%; /* Zwei Spalten nebeneinander */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Große Geräte (Desktops, ab 992px) --- */
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
.container {
|
|
||||||
max-width: 809px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col {
|
|
||||||
flex: 1; /* Alle Spalten verteilen sich gleichmäßig */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-height: 920px) {
|
|
||||||
footer {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Sehr große Geräte (Große Desktops, ab 1200px) --- */
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
.container {
|
|
||||||
max-width: 809px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Extra große Geräte (Ultrawide, ab 1400px) --- */
|
|
||||||
@media (min-width: 1400px) {
|
|
||||||
.container {
|
|
||||||
max-width: 809px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
+38
-76
@@ -1,79 +1,41 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
|
<html lang="de">
|
||||||
<!--[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;
|
|
||||||
}
|
|
||||||
span.rev { unicode-bidi:bidi-override; direction:rtl }
|
|
||||||
span.rev.email:before { content:"ed.renhcer" }
|
|
||||||
span.rev.email:after { content:"@retsambew :liaM-E" }
|
|
||||||
span.rev.phone:before { content:"962 9119 " }
|
|
||||||
span.rev.phone:after { content:" 94+ :nofeleT" }
|
|
||||||
span.rev.fax:before { content:"402 9119 " }
|
|
||||||
span.rev.fax:after { content:" 94+ :xaF" }
|
|
||||||
</style>
|
|
||||||
<script src="respond.min.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="gridContainer clearfix">
|
|
||||||
<div id="LayoutDiv1"><form method="POST" action="">
|
|
||||||
<div class='impressum'><h1>Impressum</h1><p>Angaben gemäß § 5 TMG</p><p>Florian Otto <br>
|
|
||||||
Hammerweg 37<br>
|
|
||||||
59929 Brilon-Wald<br>
|
|
||||||
</p><p> <strong>Vertreten durch: </strong><br>
|
|
||||||
Florian Otto<br>
|
|
||||||
</p><p><strong>Kontakt:</strong> <br>
|
|
||||||
<span class="rev email">alletun</span><br>
|
|
||||||
<span class="rev phone">1692</span><br>
|
|
||||||
<span class="rev fax">1692</span></br></p>
|
|
||||||
<p><strong>Haftungsausschluss: </strong><br><br><strong>Haftung für Inhalte</strong><br><br>
|
|
||||||
Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.<br><br><strong>Haftung für Links</strong><br><br>
|
|
||||||
Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.<br><br><strong>Urheberrecht</strong><br><br>
|
|
||||||
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.<br><br><strong>Datenschutz</strong><br><br>
|
|
||||||
Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder eMail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben. <br>
|
|
||||||
Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich. <br>
|
|
||||||
Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor.<br>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
<head>
|
||||||
</div>
|
<meta charset="UTF-8">
|
||||||
<footer>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<nav><p align="center">
|
<title>nutellarechner | Impressum</title>
|
||||||
<a href="index.php">Zurück</a>
|
<link href="style.css" rel="stylesheet" type="text/css">
|
||||||
</p>
|
</head>
|
||||||
</nav>
|
|
||||||
</footer>
|
<body>
|
||||||
|
<div class="container-impressum">
|
||||||
|
<h1>Impressum</h1>
|
||||||
|
<h2>Angaben gemäß § 5 TMG</h2>
|
||||||
|
<p>Florian Otto <br>
|
||||||
|
Hammerweg 37<br>
|
||||||
|
59929 Brilon-Wald<br>
|
||||||
|
</p>
|
||||||
|
<h3>Vertreten durch:</h3>
|
||||||
|
<p>Florian Otto</p>
|
||||||
|
<h2>Kontakt:</h2>
|
||||||
|
<p><span class="rev email">alletun</span><br>
|
||||||
|
<span class="rev phone">1692</span><br>
|
||||||
|
<span class="rev fax">1692</span></br>
|
||||||
|
</p>
|
||||||
|
<h2>Haftungsausschluss:</h2>
|
||||||
|
<h3>Haftung für Inhalte</h3>
|
||||||
|
<p>Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.</p>
|
||||||
|
<h3>Haftung für Links</h3>
|
||||||
|
<p>Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.</p>
|
||||||
|
<h3>Urheberrecht</h3>
|
||||||
|
<p>Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.</p>
|
||||||
|
<h3>Datenschutz</h3>
|
||||||
|
<p>Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder E-Mail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben.<br>
|
||||||
|
Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.<br>
|
||||||
|
Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor.</p>
|
||||||
|
<p>Quelle: <a href="https://www.e-recht24.de/impressum-generator.html" target="_blank" rel="noopener noreferrer">eRecht24 Impressum Generator</a></p>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -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
|
<?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"]))
|
// Initialisierung der Variablen
|
||||||
{
|
$ergebnis = null;
|
||||||
$_zahl1 = $_POST["bread"];
|
$wert1 = 2; // Standardwert für Slider 1
|
||||||
$_rz = $_POST["menge"];
|
$wert2_position = 3; // Standard-Position für Slider 2 (entspricht hier der 20)
|
||||||
|
$echter_wert2 = $werteMap[$wert2_position];
|
||||||
|
|
||||||
if($_rz == "normal") $c = $_zahl1 * 15;
|
// Prüfen, ob das Formular abgeschickt wurde
|
||||||
if($_rz == "viel") $c = $_zahl1 * 25;
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||||
if($_rz == "sviel") $c = $_zahl1 * 40;
|
$wert1 = filter_input(INPUT_POST, 'slider1', FILTER_VALIDATE_INT) ?: 1;
|
||||||
if($_rz == "wenig") $c = $_zahl1 * 8;
|
|
||||||
if($_rz == "vegan") $c = $_zahl1 * 0;
|
|
||||||
|
|
||||||
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>
|
<!DOCTYPE html>
|
||||||
<p align="center">
|
<html lang="de">
|
||||||
<br />
|
|
||||||
Ich will lieber <a href="https://mettcalc.de" style="font-size:x-large;text-decoration:underline">Mett</a>!
|
<head>
|
||||||
<br />
|
<meta charset="UTF-8">
|
||||||
</p>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
</div>
|
<title>nutellarechner</title>
|
||||||
</div>
|
<link href="style.css" rel="stylesheet" type="text/css">
|
||||||
<footer>
|
</head>
|
||||||
<nav><p align="center">
|
|
||||||
<a href="impressum.php">Impressum</a>
|
<body>
|
||||||
</p>
|
|
||||||
</nav>
|
<div class="container">
|
||||||
</footer>
|
<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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -0,0 +1,79 @@
|
|||||||
|
<!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;
|
||||||
|
}
|
||||||
|
span.rev { unicode-bidi:bidi-override; direction:rtl }
|
||||||
|
span.rev.email:before { content:"ed.renhcer" }
|
||||||
|
span.rev.email:after { content:"@retsambew :liaM-E" }
|
||||||
|
span.rev.phone:before { content:"962 9119 " }
|
||||||
|
span.rev.phone:after { content:" 94+ :nofeleT" }
|
||||||
|
span.rev.fax:before { content:"402 9119 " }
|
||||||
|
span.rev.fax:after { content:" 94+ :xaF" }
|
||||||
|
</style>
|
||||||
|
<script src="respond.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="gridContainer clearfix">
|
||||||
|
<div id="LayoutDiv1"><form method="POST" action="">
|
||||||
|
<div class='impressum'><h1>Impressum</h1><p>Angaben gemäß § 5 TMG</p><p>Florian Otto <br>
|
||||||
|
Hammerweg 37<br>
|
||||||
|
59929 Brilon-Wald<br>
|
||||||
|
</p><p> <strong>Vertreten durch: </strong><br>
|
||||||
|
Florian Otto<br>
|
||||||
|
</p><p><strong>Kontakt:</strong> <br>
|
||||||
|
<span class="rev email">alletun</span><br>
|
||||||
|
<span class="rev phone">1692</span><br>
|
||||||
|
<span class="rev fax">1692</span></br></p>
|
||||||
|
<p><strong>Haftungsausschluss: </strong><br><br><strong>Haftung für Inhalte</strong><br><br>
|
||||||
|
Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.<br><br><strong>Haftung für Links</strong><br><br>
|
||||||
|
Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.<br><br><strong>Urheberrecht</strong><br><br>
|
||||||
|
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.<br><br><strong>Datenschutz</strong><br><br>
|
||||||
|
Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder eMail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben. <br>
|
||||||
|
Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich. <br>
|
||||||
|
Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor.<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<nav><p align="center">
|
||||||
|
<a href="index.php">Zurück</a>
|
||||||
|
</p>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,93 @@
|
|||||||
|
<!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
|
||||||
|
|
||||||
|
if (!empty($_POST["submit"]))
|
||||||
|
{
|
||||||
|
$_zahl1 = $_POST["bread"];
|
||||||
|
$_rz = $_POST["menge"];
|
||||||
|
|
||||||
|
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;
|
||||||
|
|
||||||
|
echo "Für ". $_zahl1/2 . " Brötchen brauchst Du ". $c ."g Nutella.";
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</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>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Vendored
+110
@@ -0,0 +1,110 @@
|
|||||||
|
@charset "utf-8";
|
||||||
|
/* Einfache fließende Medien
|
||||||
|
Hinweis: Für fließende Medien müssen Sie die Attribute 'height' und 'width' des Medium aus dem HTML-Code entfernen
|
||||||
|
http://www.alistapart.com/articles/fluid-images/
|
||||||
|
*/
|
||||||
|
img, object, embed, video {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
/* IE 6 unterstützt keine maximale Breite, verwenden Sie daher eine Standardbreite von 100% */
|
||||||
|
.ie6 img {
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Dreamweaver-Eigenschaften für fließende Raster
|
||||||
|
----------------------------------
|
||||||
|
dw-num-cols-mobile: 5;
|
||||||
|
dw-num-cols-tablet: 8;
|
||||||
|
dw-num-cols-desktop: 10;
|
||||||
|
dw-gutter-percentage: 25;
|
||||||
|
|
||||||
|
Idee durch den Artikel "Responsive Web Design" von Ethan Marcotte
|
||||||
|
http://www.alistapart.com/articles/responsive-web-design
|
||||||
|
|
||||||
|
und "Golden Grid System" von Joni Korpi
|
||||||
|
http://goldengridsystem.com/
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Layout für Mobilgeräte: 480 px oder weniger. */
|
||||||
|
|
||||||
|
.gridContainer {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
width: 87.36%;
|
||||||
|
padding-left: 1.82%;
|
||||||
|
padding-right: 1.82%;
|
||||||
|
}
|
||||||
|
#LayoutDiv1 {
|
||||||
|
clear: both;
|
||||||
|
float: left;
|
||||||
|
margin-left: 0;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#footer {
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zeroMargin_mobile {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.hide_mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */
|
||||||
|
|
||||||
|
@media only screen and (min-width: 481px) {
|
||||||
|
.gridContainer {
|
||||||
|
width: 90.675%;
|
||||||
|
padding-left: 1.1625%;
|
||||||
|
padding-right: 1.1625%;
|
||||||
|
}
|
||||||
|
#LayoutDiv1 {
|
||||||
|
clear: both;
|
||||||
|
float: left;
|
||||||
|
margin-left: 0;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#footer {
|
||||||
|
}
|
||||||
|
.hide_tablet {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.zeroMargin_tablet {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Desktoplayout: 769 bis maximal 1232 px. Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
|
||||||
|
|
||||||
|
@media only screen and (min-width: 769px) {
|
||||||
|
.gridContainer {
|
||||||
|
width: 88.2%;
|
||||||
|
max-width: 1232px;
|
||||||
|
padding-left: 0.9%;
|
||||||
|
padding-right: 0.9%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
#LayoutDiv1 {
|
||||||
|
clear: both;
|
||||||
|
float: left;
|
||||||
|
margin-left: 0;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#footer {
|
||||||
|
}
|
||||||
|
.zeroMargin_desktop {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.hide_desktop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
Vendored
-2
@@ -1,2 +0,0 @@
|
|||||||
/*! Respond.js v1.0.1pre: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
|
|
||||||
(function(e,h){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=h;if(h){return}var u=e.document,r=u.documentElement,i=[],k=[],p=[],o={},g=30,f=u.getElementsByTagName("head")[0]||r,b=f.getElementsByTagName("link"),d=[],a=function(){var B=b,w=B.length,z=0,y,x,A,v;for(;z<w;z++){y=B[z],x=y.href,A=y.media,v=y.rel&&y.rel.toLowerCase()==="stylesheet";if(!!x&&v&&!o[x]){if(y.styleSheet&&y.styleSheet.rawCssText){m(y.styleSheet.rawCssText,x,A);o[x]=true}else{if(!/^([a-zA-Z]+?:(\/\/)?)/.test(x)||x.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:x,media:A})}}}}t()},t=function(){if(d.length){var v=d.shift();n(v.href,function(w){m(w,v.href,v.media);o[v.href]=true;t()})}},m=function(G,v,x){var E=G.match(/@media[^\{]+\{([^\{\}]+\{[^\}\{]+\})+/gi),H=E&&E.length||0,v=v.substring(0,v.lastIndexOf("/")),w=function(I){return I.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+v+"$2$3")},y=!H&&x,B=0,A,C,D,z,F;if(v.length){v+="/"}if(y){H=1}for(;B<H;B++){A=0;if(y){C=x;k.push(w(G))}else{C=E[B].match(/@media ([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&w(RegExp.$2))}z=C.split(",");F=z.length;for(;A<F;A++){D=z[A];i.push({media:D.match(/(only\s+)?([a-zA-Z]+)(\sand)?/)&&RegExp.$2,rules:k.length-1,minw:D.match(/\(min\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1),maxw:D.match(/\(max\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1)})}}j()},l,q,j=function(E){var v="clientWidth",x=r[v],D=u.compatMode==="CSS1Compat"&&x||u.body[v]||x,z={},C=u.createDocumentFragment(),B=b[b.length-1],w=(new Date()).getTime();if(E&&l&&w-l<g){clearTimeout(q);q=setTimeout(j,g);return}else{l=w}for(var y in i){var F=i[y];if(!F.minw&&!F.maxw||(!F.minw||F.minw&&D>=F.minw)&&(!F.maxw||F.maxw&&D<=F.maxw)){if(!z[F.media]){z[F.media]=[]}z[F.media].push(k[F.rules])}}for(var y in p){if(p[y]&&p[y].parentNode===f){f.removeChild(p[y])}}for(var y in z){var G=u.createElement("style"),A=z[y].join("\n");G.type="text/css";G.media=y;if(G.styleSheet){G.styleSheet.cssText=A}else{G.appendChild(u.createTextNode(A))}C.appendChild(G);p.push(G)}f.insertBefore(C,B.nextSibling)},n=function(v,x){var w=c();if(!w){return}w.open("GET",v,true);w.onreadystatechange=function(){if(w.readyState!=4||w.status!=200&&w.status!=304){return}x(w.responseText)};if(w.readyState==4){return}w.send(null)},c=(function(){var v=false;try{v=new XMLHttpRequest()}catch(w){v=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return v}})();a();respond.update=a;function s(){j(true)}if(e.addEventListener){e.addEventListener("resize",s,false)}else{if(e.attachEvent){e.attachEvent("onresize",s)}}})(this,(function(f){if(f.matchMedia){return true}var e,i=document,c=i.documentElement,g=c.firstElementChild||c.firstChild,h=!i.body,d=i.body||i.createElement("body"),b=i.createElement("div"),a="only all";b.id="mq-test-1";b.style.cssText="position:absolute;top:-99em";d.appendChild(b);b.innerHTML='_<style media="'+a+'"> #mq-test-1 { width: 9px; }</style>';if(h){c.insertBefore(d,g)}b.removeChild(b.firstChild);e=b.offsetWidth==9;if(h){c.removeChild(d)}else{d.removeChild(b)}return e})(this));
|
|
||||||
@@ -1,110 +1,454 @@
|
|||||||
@charset "utf-8";
|
/* ==========================================================================
|
||||||
/* Einfache fließende Medien
|
1. CSS Variablen (Custom Properties)
|
||||||
Hinweis: Für fließende Medien müssen Sie die Attribute 'height' und 'width' des Medium aus dem HTML-Code entfernen
|
========================================================================== */
|
||||||
http://www.alistapart.com/articles/fluid-images/
|
:root {
|
||||||
*/
|
/* Farben */
|
||||||
img, object, embed, video {
|
--color-primary: #222222;
|
||||||
max-width: 100%;
|
--color-secondary: #eb3526;
|
||||||
}
|
--color-tertiary: #f7c66d;
|
||||||
/* IE 6 unterstützt keine maximale Breite, verwenden Sie daher eine Standardbreite von 100% */
|
--color-background: #7a381e;
|
||||||
.ie6 img {
|
--color-text: #333333;
|
||||||
width:100%;
|
--color-text-light: #666666;
|
||||||
|
--color-text-white: #ffffff;
|
||||||
|
|
||||||
|
/* Typografie */
|
||||||
|
--font-family-base: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
|
--font-size-base: 16px;
|
||||||
|
--font-size-title: 54px;
|
||||||
|
--line-height-base: 1.5;
|
||||||
|
|
||||||
|
/* Abstände (Spacing) */
|
||||||
|
--spacing-sm: 0.5rem;
|
||||||
|
--spacing-md: 1rem;
|
||||||
|
--spacing-lg: 2rem;
|
||||||
|
|
||||||
|
/* Radien */
|
||||||
|
--border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/* ==========================================================================
|
||||||
Dreamweaver-Eigenschaften für fließende Raster
|
2. Basis Reset & Normierung
|
||||||
----------------------------------
|
========================================================================== */
|
||||||
dw-num-cols-mobile: 5;
|
*,
|
||||||
dw-num-cols-tablet: 8;
|
*::before,
|
||||||
dw-num-cols-desktop: 10;
|
*::after {
|
||||||
dw-gutter-percentage: 25;
|
box-sizing: border-box; /* Verhindert, dass Padding/Border die Breite verändern */
|
||||||
|
margin: 0;
|
||||||
Idee durch den Artikel "Responsive Web Design" von Ethan Marcotte
|
padding: 0;
|
||||||
http://www.alistapart.com/articles/responsive-web-design
|
|
||||||
|
|
||||||
und "Golden Grid System" von Joni Korpi
|
|
||||||
http://goldengridsystem.com/
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* Layout für Mobilgeräte: 480 px oder weniger. */
|
|
||||||
|
|
||||||
.gridContainer {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
width: 87.36%;
|
|
||||||
padding-left: 1.82%;
|
|
||||||
padding-right: 1.82%;
|
|
||||||
}
|
}
|
||||||
#LayoutDiv1 {
|
|
||||||
clear: both;
|
html {
|
||||||
float: left;
|
font-size: var(--font-size-base);
|
||||||
margin-left: 0;
|
scroll-behavior: smooth;
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
#footer {
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-family-base);
|
||||||
|
color: var(--color-text);
|
||||||
|
background-color: var(--color-background);
|
||||||
|
line-height: var(--line-height-base);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: fixed;
|
margin-top: var(--spacing-lg);
|
||||||
bottom: 0px;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zeroMargin_mobile {
|
footer a {
|
||||||
margin-left: 0;
|
text-decoration: none;
|
||||||
}
|
color: var(--color-tertiary);
|
||||||
.hide_mobile {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */
|
/* Responsives Verhalten für Medien */
|
||||||
|
img,
|
||||||
@media only screen and (min-width: 481px) {
|
picture,
|
||||||
.gridContainer {
|
video,
|
||||||
width: 90.675%;
|
canvas,
|
||||||
padding-left: 1.1625%;
|
svg {
|
||||||
padding-right: 1.1625%;
|
display: block;
|
||||||
}
|
max-width: 100%;
|
||||||
#LayoutDiv1 {
|
height: auto;
|
||||||
clear: both;
|
|
||||||
float: left;
|
|
||||||
margin-left: 0;
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
#footer {
|
|
||||||
}
|
|
||||||
.hide_tablet {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.zeroMargin_tablet {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Desktoplayout: 769 bis maximal 1232 px. Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
|
/* ==========================================================================
|
||||||
|
3. Grundlegende Typografie
|
||||||
|
========================================================================== */
|
||||||
|
h1 {
|
||||||
|
margin-bottom: var(--spacing-sm);
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--color-primary);
|
||||||
|
text-align: center;
|
||||||
|
font-size: var(--font-size-title);
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: 769px) {
|
h2,
|
||||||
.gridContainer {
|
h3,
|
||||||
width: 88.2%;
|
h4,
|
||||||
max-width: 1232px;
|
h5,
|
||||||
padding-left: 0.9%;
|
h6 {
|
||||||
padding-right: 0.9%;
|
margin-bottom: var(--spacing-md);
|
||||||
margin: auto;
|
line-height: 1.2;
|
||||||
|
color: var(--color-primary);
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
#LayoutDiv1 {
|
|
||||||
clear: both;
|
p {
|
||||||
float: left;
|
margin-bottom: var(--spacing-md);
|
||||||
margin-left: 0;
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
#footer {
|
|
||||||
|
a {
|
||||||
|
color: var(--color-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s ease;
|
||||||
}
|
}
|
||||||
.zeroMargin_desktop {
|
|
||||||
margin-left: 0;
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
.hide_desktop {
|
|
||||||
display: none;
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: var(--spacing-sm);
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.span-dark {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.span-red {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slogan {
|
||||||
|
color: var(--color-text-light);
|
||||||
|
font-style: italic;
|
||||||
|
font-size: small;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.disclaimer {
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-tertiary);
|
||||||
|
font-style: italic;
|
||||||
|
font-size: small;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-display {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result {
|
||||||
|
margin-top: var(--spacing-lg);
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
background-color: var(--color-tertiary);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
color: var(--color-primary);
|
||||||
|
font-size: 1.25rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.werbung-title {
|
||||||
|
width: 90%;
|
||||||
|
margin-left: 5%;
|
||||||
|
margin-right: 5%;
|
||||||
|
margin-top: var(--spacing-lg);
|
||||||
|
padding: var(--spacing-md);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
color: var(--color-text);
|
||||||
|
font-size: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.werbung-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
margin-top: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
4. Layout Buttons, Forms & Slider
|
||||||
|
========================================================================== */
|
||||||
|
.button-calc {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0.6em 2em;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
box-sizing: border-box;
|
||||||
|
outline: none;
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-tertiary);
|
||||||
|
font-size: large;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-calc:before {
|
||||||
|
content: "";
|
||||||
|
background: linear-gradient(
|
||||||
|
45deg,
|
||||||
|
var(--color-background),
|
||||||
|
var(--color-secondary),
|
||||||
|
var(--color-tertiary),
|
||||||
|
var(--color-text-white)
|
||||||
|
);
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
left: -2px;
|
||||||
|
background-size: 400%;
|
||||||
|
z-index: -1;
|
||||||
|
-webkit-filter: blur(5px);
|
||||||
|
filter: blur(5px);
|
||||||
|
width: calc(100% + 4px);
|
||||||
|
height: calc(100% + 4px);
|
||||||
|
animation: glowing-button-calc 20s linear infinite;
|
||||||
|
transition: opacity 0.5s ease-in-out;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glowing-button-calc {
|
||||||
|
0% {
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 400% 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-calc:after {
|
||||||
|
z-index: -1;
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: var(--color-tertiary);
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-calc:hover {
|
||||||
|
background: var(--color-tertiary);
|
||||||
|
color: var(--color-secondary);
|
||||||
|
border: 1px solid var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-mett {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0.6em 2em;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
box-sizing: border-box;
|
||||||
|
outline: none;
|
||||||
|
color: #fffae8;
|
||||||
|
background: #cd7569;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-mett:hover {
|
||||||
|
color: #cd7569;
|
||||||
|
background-color: #fffae8;
|
||||||
|
border: 1px solid #fffae8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-nudeln {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0.6em 2em;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
box-sizing: border-box;
|
||||||
|
outline: none;
|
||||||
|
color: #fdbf5b;
|
||||||
|
background: #182132;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-nudeln:hover {
|
||||||
|
color: #182132;
|
||||||
|
background-color: #fdbf5b;
|
||||||
|
border: 1px solid #182132;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-burger {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0.6em 2em;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
box-sizing: border-box;
|
||||||
|
outline: none;
|
||||||
|
color: orange;
|
||||||
|
background: #221600;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-burger:hover {
|
||||||
|
color: #221600;
|
||||||
|
background-color: orange;
|
||||||
|
border: 1px solid #221600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"] {
|
||||||
|
margin: 0 5%;
|
||||||
|
width: 90%;
|
||||||
|
accent-color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
5. Layout Listen
|
||||||
|
========================================================================== */
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
margin: 1em 0;
|
||||||
|
padding: 0 0 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
margin: 0 0 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul,
|
||||||
|
nav ol {
|
||||||
|
list-style: none;
|
||||||
|
list-style-image: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
6. Layout Container
|
||||||
|
========================================================================== */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 776px;
|
||||||
|
padding-top: 100px;
|
||||||
|
padding-right: 15px;
|
||||||
|
padding-left: 15px;
|
||||||
|
margin-top: var(--spacing-md);
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
background-image: url('data:image/svg+xml,<svg width="809px" height="776px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g transform="matrix(1,0,0,1,-45.984221,-27.910785)"><g transform="matrix(0.481893,0,0,0.481893,-154.520299,-91.445084)"><path d="M1589.216,391.728C1607.444,417.316 1636.92,432.509 1668.337,432.509C1750.341,432.521 1891.324,432.521 1891.324,432.521C1997.956,432.521 2084.528,519.093 2084.528,625.725L2084.528,1655.427C2084.528,1762.059 1997.956,1848.631 1891.324,1848.631L617.613,1848.631C510.981,1848.631 424.41,1762.059 424.41,1655.427L424.41,625.725C424.41,519.093 510.981,432.521 617.613,432.521L840.601,432.521C872.021,432.521 901.501,417.326 919.731,391.735C976.466,311.833 1105.066,256.014 1254.469,256.014C1403.872,256.014 1532.471,311.833 1589.216,391.728Z" style="fill:white;stroke:%23512717;stroke-width:16.67px;" /></g><g transform="matrix(1.09499,0,0,1.09499,-31.67058,-10.50163)"><path d="M420.762,122.374C401.388,108.228 404.796,89.046 413.697,81.751C419.644,76.877 428.043,77.309 433.737,88.093L433.767,88.151C457.895,70.697 474.397,112.278 420.762,122.374Z" style="fill:%23B67552;stroke:%23512717;stroke-width:3.32px;" /><g transform="matrix(1,0,0,1,-5.201076,-38.425008)"><path d="M425.963,160.799C426.698,156.554 432.005,132.702 439.288,126.938" style="fill:none;stroke:%23512717;stroke-width:2.05px;" /></g><g transform="matrix(1,0,0,1,-5.201076,-38.425008)"><path d="M418.898,120.176C415.841,116.806 419.38,102.644 429.47,100.355C429.991,100.236 431.091,100.583 431.193,100.718C433.444,103.723 429.734,109.731 429.55,110.465C429.728,109.931 430.024,109.291 430.352,108.589C432.859,104.28 439.468,100.322 441.191,102.402C442.798,104.342 440.406,111.42 440.155,112.164C438.538,116.185 436.257,120.029 435.391,121.411C430.106,115.764 423.702,116.239 418.898,120.176Z" style="fill:%239CB751;stroke:%23512717;stroke-width:1.9px;stroke-miterlimit:5;" /></g><g transform="matrix(1,0,0,1,-5.201076,-38.425008)"><path d="M454.479,110.032C453.404,111.58 452.768,112.546 452.768,112.546C452.768,112.546 453.518,111.635 454.479,110.032C460.173,101.833 476.409,86.263 478.066,89.219C481.04,94.525 462.686,116.738 462.076,116.379C462.83,115.78 471.499,108.896 471.499,108.896C483.568,101.179 474.141,123.565 461.044,130.053C458.675,122.625 449.556,118.917 438.968,126.576L438.938,126.518C437.843,124.445 436.649,122.755 435.391,121.411C436.476,119.678 437.945,114.745 446.198,103.541C455.369,91.091 457.483,92.918 458.101,93.972C458.96,95.437 458.455,103.402 454.479,110.032Z" style="fill:%239CB751;stroke:%23512717;stroke-width:2.21px;stroke-miterlimit:5;" /></g></g></g></svg>');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-impressum {
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
margin: var(--spacing-md) 0;
|
||||||
|
background-color: var(--color-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grid-Beispiel (Flexbox) */
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-right: -15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col {
|
||||||
|
flex: 1 0 100%; /* Nimmt auf Mobilgeräten die volle Breite ein */
|
||||||
|
padding-right: 15px;
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
7. Kontaktdaten verschleiern (Bidi-Text) - Optional, kann entfernt werden
|
||||||
|
========================================================================== */
|
||||||
|
span.rev { unicode-bidi:bidi-override; direction:rtl }
|
||||||
|
span.rev.email:before { content:"ed.renhcer" }
|
||||||
|
span.rev.email:after { content:"@retsambew :liaM-E" }
|
||||||
|
span.rev.phone:before { content:"962 9119 " }
|
||||||
|
span.rev.phone:after { content:" 94+ :nofeleT" }
|
||||||
|
span.rev.fax:before { content:"402 9119 " }
|
||||||
|
span.rev.fax:after { content:" 94+ :xaF" }
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
8. Media Queries (Mobile First)
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* --- Kleine Geräte (Smartphones im Querformat, ab 576px) --- */
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.container {
|
||||||
|
max-width: 809px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Mittlere Geräte (Tablets, ab 768px) --- */
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.container {
|
||||||
|
max-width: 809px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Beispiel: Spalten stehen nebeneinander ab Tablet-Größe */
|
||||||
|
.col {
|
||||||
|
flex: 1 0 50%; /* Zwei Spalten nebeneinander */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Große Geräte (Desktops, ab 992px) --- */
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.container {
|
||||||
|
max-width: 809px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col {
|
||||||
|
flex: 1; /* Alle Spalten verteilen sich gleichmäßig */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-height: 920px) {
|
||||||
|
footer {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Sehr große Geräte (Große Desktops, ab 1200px) --- */
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.container {
|
||||||
|
max-width: 809px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Extra große Geräte (Ultrawide, ab 1400px) --- */
|
||||||
|
@media (min-width: 1400px) {
|
||||||
|
.container {
|
||||||
|
max-width: 809px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user