commit

author: stefan_gey <stfngy@proton.me> 2025-03-25 22:51:39 +0100
committer: stefan_gey <stfngy@proton.me> 2025-03-25 22:51:39 +0100
commit: f99b7701847efec51466d6a54f5f057cc6234d88 (patch)
tree: 0fe595f297aa9d83a74f124b2c7a0cbd1e7ae6ab
77 files changed, 2955 insertions, 0 deletions
diff --git a/agb.html b/agb.html
new file mode 100755
index 0000000..530cc74
--- /dev/null
+++ b/agb.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="wodth=device-width, initial-scale=1.0">
+	<title>AGB</title>
+	<link rel="icon" type="image/x-icon" href="/style/avocado.png">
+</head>
+<body>
+<pre>
+<h1>Allgemeine Geschäftsbedingungen (AGB)</h1>
+
+<h2>1. Geltungsbereich</h2>  
+Diese Allgemeinen Geschäftsbedingungen (AGB) gelten für die Nutzung der Webseite annapurna.fitness. Durch die Nutzung der Webseite erklären Sie sich mit diesen AGB einverstanden. Die Zustimmung zu den AGB erfolgt automatisch durch die Nutzung der Webseite.
+
+<h2>2. Registrierung und Benutzerkonten</h2>  
+(1) Um die Dienste der Webseite nutzen zu können, müssen sich Benutzer registrieren und ein Benutzerkonto anlegen. Dabei sind die bei der Registrierung abgefragten Daten wahrheitsgemäß anzugeben.  
+(2) Der Benutzername und das Passwort, die im Rahmen der Registrierung erstellt werden, sind ausschließlich für den jeweiligen Benutzer bestimmt. Der Benutzer verpflichtet sich, seine Zugangsdaten geheim zu halten und keinem Dritten zugänglich zu machen.  
+(3) Das Passwort wird verschlüsselt (als Hashwert) in einer MariaDB-Datenbank gespeichert, um die Sicherheit Ihrer Daten zu gewährleisten.
+
+<h2>3. Speicherung und Verarbeitung von Daten</h2>  
+(1) Die Webseite speichert persönliche Daten der Nutzer, die im Rahmen der Registrierung und Nutzung der Webseite angegeben werden. Dies umfasst insbesondere den Benutzernamen sowie Ernährungsbedarfswerte.  
+(2) Alle persönlichen Daten, einschließlich der Passwörter, werden ausschließlich in verschlüsselter Form gespeichert. Passwörter werden als Hashwert gespeichert, um ein Höchstmaß an Sicherheit zu bieten.  
+(3) Die Ernährungsbedarfswerte werden ebenfalls gespeichert und dienen der Bereitstellung personalisierter Dienste der Webseite. Diese Daten werden ausschließlich für den Zweck der Bereitstellung dieser Dienste verwendet und nicht mit Dritten geteilt.  
+(4) Die Webseite verwendet eine einzige Session-Variable, um zu speichern, ob der Benutzer eingeloggt ist. Weitere Tracking-Technologien oder Cookies kommen nicht zum Einsatz.
+
+<h2>4. Nutzung der Webseite</h2>  
+(1) Die Webseite stellt eine Plattform zur Verfügung, die den Nutzern ermöglicht, ihre Ernährungsbedarfswerte zu erfassen und zu speichern. Die Nutzung der Webseite erfolgt auf eigene Verantwortung.  
+(2) Die Benutzer sind verpflichtet, die Webseite nicht für rechtswidrige oder missbräuchliche Zwecke zu verwenden. Insbesondere ist die Speicherung und Veröffentlichung von Inhalten, die gegen geltendes Recht verstoßen, untersagt.
+
+<h2>5. Datenschutz und Datensicherheit</h2>  
+(1) Die Sicherheit Ihrer Daten ist uns ein wichtiges Anliegen. Wir treffen angemessene technische und organisatorische Maßnahmen, um die Sicherheit Ihrer personenbezogenen Daten zu gewährleisten und diese vor unbefugtem Zugriff, Verlust oder Missbrauch zu schützen.  
+(2) Weitere Informationen zur Verarbeitung personenbezogener Daten und zu Ihren Rechten finden Sie in unserer Datenschutzerklärung. Diese ist ein integraler Bestandteil dieser AGB.
+
+<h2>6. Haftung</h2>  
+(1) Die Webseite übernimmt keine Haftung für Schäden, die durch die Nutzung oder Unmöglichkeit der Nutzung der Webseite entstehen, es sei denn, diese beruhen auf vorsätzlichem oder grob fahrlässigem Verhalten von uns.  
+(2) Die Webseite haftet nicht für die Richtigkeit der gespeicherten Ernährungsbedarfswerte oder für die Empfehlungen, die auf Basis dieser Daten erstellt werden. Die Verwendung dieser Empfehlungen erfolgt auf eigene Verantwortung des Nutzers.
+
+<h2>7. Rechte und Pflichten des Nutzers</h2>  
+(1) Der Nutzer ist verpflichtet, die auf der Webseite gespeicherten Daten regelmäßig zu überprüfen und bei Bedarf zu aktualisieren.  
+(2) Der Nutzer ist verpflichtet, auf seiner Seite alle erforderlichen Maßnahmen zu treffen, um sein Benutzerkonto vor unbefugtem Zugriff zu schützen.
+
+<h2>8. Beendigung der Nutzung</h2>  
+(1) Der Nutzer kann sein Benutzerkonto jederzeit durch eine schriftliche Mitteilung an uns kündigen. Alle gespeicherten Daten des Nutzers werden in diesem Fall gemäß unserer Datenschutzerklärung gelöscht.  
+(2) Wir behalten uns vor, das Benutzerkonto eines Nutzers bei schwerwiegenden Verstößen gegen diese AGB oder bei Verdacht auf Missbrauch der Webseite zu sperren oder zu löschen.
+
+<h2>9. Änderungen der AGB</h2>  
+(1) Wir behalten uns vor, diese AGB jederzeit zu ändern oder zu ergänzen. Die Änderungen werden auf der Webseite veröffentlicht und treten mit ihrer Veröffentlichung in Kraft.  
+(2) Sofern der Nutzer den Änderungen nicht innerhalb von 14 Tagen nach Bekanntgabe widerspricht, gelten die geänderten AGB als angenommen.
+
+<h2>10. Schlussbestimmungen</h2>  
+(1) Es gilt das Recht der Bundesrepublik Deutschland, unter Ausschluss des UN-Kaufrechts.  
+(2) Gerichtsstand für alle Streitigkeiten aus oder im Zusammenhang mit der Nutzung der Webseite ist [Gerichtsstandort einfügen], sofern der Nutzer Kaufmann oder eine juristische Person des öffentlichen Rechts ist.
+
+Diese AGB wurden zuletzt am 16.03.2025 geändert.
+</pre>
+</body>
+</html>
diff --git a/index.html b/index.html
new file mode 100755
index 0000000..69a8760
--- /dev/null
+++ b/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Annapurna</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box hor_spacing">
+    <h1>Willkommen auf</h1>
+    <div style="font-size: 100px">Annapurna</div>
+    <h1>das Paradies für jeden auf der Suche nach der wahren Gesundheit.</h1>
+    <h1>Lasse Annapurna dich begleiten auf den Weg zum perfekten Körper.</h1>
+    <br>
+    <div class="flexbox hor_spacing_item">
+        <a class="medium_box color_inverse_on_hover" style="flex: 1" href="/login"><h2 style="margin: 0">Melde dich hier an oder registriere dich</h2></a>
+        <a class="medium_box color_inverse_on_hover" style="flex: 1" href="/kalorien_rechner"><h2 style="margin: 0">Kalkuliere deinen Kalorienverbrauch</h2></a>
+    </div>
+    <div class="flexbox hor_spacing_item">
+        <a class="medium_box color_inverse_on_hover" style="flex: 1" href="/rezepte"><h2 style="margin: 0">Finde leckere und gesunde Rezepte</h2></a>
+        <a class="medium_box color_inverse_on_hover" style="flex: 1" href="/workouts"><h2 style="margin: 0">Finde einfache und effektive Workouts</h2></a>
+    </div>
+</main>
+</body>
+</html>
diff --git a/kalorien_rechner/ausgabe.php b/kalorien_rechner/ausgabe.php
new file mode 100755
index 0000000..5aa63ab
--- /dev/null
+++ b/kalorien_rechner/ausgabe.php
@@ -0,0 +1,118 @@
+<?php
+session_start();
+
+if (isset($_POST['rechnen'])) {
+    $geschlecht = $_POST['geschlecht'];
+    $gewicht = $_POST['gewicht'];
+    $groesse = $_POST['groesse'];
+    $alter = $_POST['alter'];
+    $aktivitaet = $_POST['aktivitaet'];
+    $sport = $_POST['sport'];
+    $ziel = $_POST['ziel'];
+
+    if ($geschlecht == 'maennlich') {
+        $grundumsatz = 66.47 + (13.7 * $gewicht) + (5 * $groesse) - (6.8 * $alter);
+    } else $grundumsatz = 655.1 + (9.6 * $gewicht) + (1.8 * $groesse) - (4.7 * $alter);
+
+    $leistungsumsatz = ($grundumsatz * $aktivitaet) + ($sport * 100);
+
+    if ($ziel == 'abnehmen') {
+        $absolut_kalorien = $leistungsumsatz - 400;
+    } elseif ($ziel == 'zunehmen') {
+        $absolut_kalorien = $leistungsumsatz + 400;
+    } else $absolut_kalorien = $leistungsumsatz;
+
+    if ($ziel == 'abnehmen') {
+        $protein = $gewicht * 2.2;
+    } else if ($ziel == 'zunehmen') {
+        $protein = $gewicht * 1.8;
+    } else $protein = $gewicht * 2;
+
+	$protein = $protein > 0 ? round($protein) : 0;
+	$absolut_zucker = $absolut_kalorien / 40;
+	$zucker = $absolut_zucker > 0 ? round($absolut_zucker) : 0;
+    $absolut_kohlenhydrate = ($absolut_kalorien - (4 * $protein) - (9 * $gewicht) - (4 * $zucker)) / 4;
+	$kohlenhydrate = $absolut_kohlenhydrate > 0 ? round($absolut_kohlenhydrate) : 0;
+    $fett = $gewicht;
+    $kalorien = $absolut_kalorien > 0 ? round($absolut_kalorien) : 0;
+}
+?>
+
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kalorien Ausgabe</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class=hor_spacing_item>
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box hor_spacing">
+    <h1>Täglicher Bedarf</h1>
+
+    <?php if (isset($_POST['rechnen'])) { ?>
+        <div class="flexbox hor_spacing_item">
+            <div class="medium_box" style="flex: 1">
+                <h2 style="margin: 0">Proteine:</h2>
+                <div style="font-size: 100px"><?= $protein ?></div>
+                <h2 style="margin: 0">gramm</h2>
+            </div>
+            <div class="medium_box" style="flex: 1">
+                <h2 style="margin: 0">Kohlenhydrate:</h2>
+                <div style="font-size: 100px"><?= $kohlenhydrate ?></div>
+                <h2 style="margin: 0">gramm</h2>
+            </div>
+            <div class="medium_box" style="flex: 1">
+                <h2 style="margin: 0">Fette:</h2>
+                <div style="font-size: 100px"><?= $fett ?></div>
+                <h2 style="margin: 0">gramm</h2>
+            </div>
+        </div>
+        <div class="flexbox hor_spacing_item">
+            <div class="medium_box" style="flex: 1">
+                <h2 style="margin: 0">Zucker:</h2>
+                <div style="font-size: 100px"><?= $zucker ?></div>
+                <h2 style="margin: 0">gramm</h2>
+            </div>
+            <div class="medium_box" style="flex: 2">
+                <h2 style="margin: 0">Um ihr Ziel zu erreichen müssen Sie am Tag</h2>
+                <div style="font-size: 100px"><?= $kalorien ?></div>
+                <h2 style="margin: 0">Kalorien zu sich nehmen</h2>
+            </div>
+            <form action="/kalorien_zaehler/index.php" method="POST" style="flex: 1">
+                <input style="display: none" name="gesamt_kalorien" value="<?= $zielkalorien ?>" />
+                <input style="display: none" name="gesamt_kohlenhydrate" value="<?= $kohlenhydrate ?>" />
+                <input style="display: none" name="gesamt_fett" value="<?= $fett ?>" />
+                <input style="display: none" name="gesamt_protein" value="<?= $protein ?>" />
+                <input style="display: none" name="gesamt_zucker" value="<?= $zucker ?>" />
+                <button class="medium_box color_inverse_on_hover" style="height: 100%; width: 100%" type="submit" name="werte_uebernehmen">
+                    <h2 style="font-size: 50px; margin: 0">Werte<br>Speichern</h2>
+                </button>
+            </form>
+        </div>
+    <?php } else { ?>
+        <h2>Fülle erst das <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Formular</a> aus!</h2>
+    <?php } ?>
+</main>
+</body>
+</html>
diff --git a/kalorien_rechner/index.html b/kalorien_rechner/index.html
new file mode 100755
index 0000000..06424f2
--- /dev/null
+++ b/kalorien_rechner/index.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kalorien Rechner</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+
+<main class="big_box">
+    <h1>Kalorien-rechner</h1>
+    <form class="hor_spacing" method="post" action="./ausgabe.php">
+        <div class="medium_box hor_spacing_item">
+            <h2>Geschlecht:</h2>
+            <div class="flexbox special_radio">
+                <input type="radio" name="geschlecht" id="maennlich" value="maennlich" required>
+                <label class="small_box" style="flex: 1" for="maennlich">Männlich</label>
+                <input type="radio" name="geschlecht" id="weiblich" value="weiblich" required>
+                <label class="small_box" style="flex: 1" for="weiblich">Weiblich</label>
+            </div>
+        </div>
+        <div class="flexbox hor_spacing_item">
+            <div class="medium_box" style="flex: 1; display: block">
+                <h2>Alter in Jahre:</h2>
+                <input class="small_box color_inverse_on_hover" type="number" name="alter" min="0" max="200" step="1" required><label for="alter"> Jahre
+            </div>
+            <div class="medium_box" style="flex: 1; display: block">
+                <h2>Gewicht in Kilogramm:</h2>
+                <input class="small_box color_inverse_on_hover" type="number" name="gewicht" min="0" max="999" step="1" required><label for="gewicht"> kg
+            </div>
+        </div>
+        <div class="flexbox hor_spacing_item">
+            <div class="medium_box" style="flex: 1; display: block">
+                <h2>Größe in Centimeter:</h2>
+                <input class="small_box color_inverse_on_hover" type="number" name="groesse" min="0" max="300" step="1" required> cm
+            </div>
+            <div class="medium_box" style="flex: 1; display: block">
+                <h2>Körperfettanteil in Prozent: <a class="small_box color_inverse_on_hover" href="./kfa_info.html" target="_blank">&#9432;</a></h2>
+                <input class="small_box color_inverse_on_hover" type="number" name="koerperfettanteil" min="0" max="100" step="1" required> %
+            </div>
+        </div>
+        <div class="flexbox hor_spacing_item">
+            <div class="medium_box" style="flex: 1; display: block">
+                <h2>Sport pro Woche:</h2>
+                <select class="small_box color_inverse_on_hover" name="sport" required>
+                    <option value="" selected>--Wie oft machst du Sport?--</option>
+                    <option value="0">Kein Sport</option>
+                    <option value="1">1x</option>
+                    <option value="2">2x</option>
+                    <option value="3">3x</option>
+                    <option value="4">4x</option>
+                    <option value="5">5x</option>
+                    <option value="6">6x</option>
+                    <option value="7">7x oder öfter</option>
+                </select>
+            </div>
+            <div class="medium_box" style="flex: 1; display: block">
+                <h2>Alltagsaktivität (ohne Sport):</h2>
+                <select class="small_box color_inverse_on_hover" name="aktivitaet" required>
+                    <option value="" selected>--Wie aktiv ist dein Alltag?--</option>
+                    <option value="1.2">Wenig aktiv (nur sitzend)</option>
+                    <option value="1.4">Etwas aktiv (meist sitzend)</option>
+                    <option value="1.6">Aktiv (viel laufend)</option>
+                    <option value="1.8">Sehr aktiv (harte körperliche Arbeit)</option>
+                </select>
+            </div>
+        </div>
+        <div class="medium_box hor_spacing_item">
+            <h2>Ziel:</h2>
+            <div class="flexbox special_radio">
+                <input type="radio" name="ziel" id="abnehmen" value="abnehmen" required>
+                <label class="small_box" style="flex: 1; display: block" for="abnehmen">Abnehmen</label>
+                <input type="radio" name="ziel" id="gewicht_halten" value="gewicht_halten" required>
+                <label class="small_box" style="flex: 1; display: block" for="gewicht_halten">Gewicht halten</label>
+                <input type="radio" name="ziel" id="zunehmen" value="zunehmen" required>
+                <label class="small_box" style="flex: 1; display: block" for="zunehmen">Zunehmen</label>
+            </div>
+        </div>
+        <button class="medium_box hor_spacing_item color_inverse_on_hover" style="width: 100%" type="submit" name="rechnen"><h2 style="margin: 0">RECHNEN</div></button>
+    </form>
+</main>
+</body>
+</html>
+\ No newline at end of file
diff --git a/kalorien_rechner/kfa.jpg b/kalorien_rechner/kfa.jpg
new file mode 100755
index 0000000..bd2e904
--- /dev/null
+++ b/kalorien_rechner/kfa.jpg
diff --git a/kalorien_rechner/kfa_info.html b/kalorien_rechner/kfa_info.html
new file mode 100755
index 0000000..265c01c
--- /dev/null
+++ b/kalorien_rechner/kfa_info.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Körperfettanteil Info</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Körperfett Kalkulation</h1>
+    <div class="hor_spacing">
+        <table class="hor_spacing_item">
+            <tr>
+                <th>
+                    <h2>Körperbau</h2>
+                </th>
+                <th>
+                    <h2>Männer</h2>
+                </th>
+                <th>
+                    <h2>Frauen</h2>
+                </th>
+            </tr>
+            <tr>
+                <td>
+                    <h2>Super muskulös</h2>
+                    <p>Nur essentielles Körperfett</p>
+                </td>
+                <td>
+                    <h2>2-5%</h2>
+                    <p>Körperfett</p>
+                </td>
+                <td>
+                    <h2>10-12%</h2>
+                    <p>Körperfett</p>
+                </td>
+            </tr>
+            <tr>
+                <td>            
+                    <h2>Athletisch</h2>
+                    <p>Geringer Prozentsatz von Körperfett</p>
+                </td>
+                <td>
+                    <h2>6-13%</h2>
+                    <p>Körperfett</p>
+                </td>
+                <td>
+                    <h2>13-17%</h2>
+                    <p>Körperfett</p>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <h2>Fit</h2>
+                    <p>Schlank und leicht definiert</p>
+                </td>
+                <td>
+                    <h2>14-17%</h2>
+                    <p>Körperfett</p>
+                </td>
+                <td>
+                    <h2>18-25%</h2>
+                    <p>Körperfett</p>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <h2>Durchschnitt</h2>
+                    <p>Keine klare Trennung von Muskeln und Fett</p>
+                </td>
+                <td>
+                    <h2>18-24%</h2>
+                    <p>Körperfett</p>
+                </td>
+                <td>
+                    <h2>25-31%</h2>
+                    <p>Körperfett</p>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <h2>Übergewichtig</h2>
+                    <p>Offensichtiliche Zeichen von hohem Körperfett</p>
+                </td>
+                <td>
+                    <h2>Mehr als 25%</h2>
+                    <p>Körperfett</p>
+                </td>
+                <td>
+                    <h2>Bis zu 50%</h2>
+                    <p>Körperfett</p>
+                </td>
+            </tr>
+        </table>
+        <img class="hor_spacing_item" style="width: 100%" src="./kfa.jpg">
+        <p>
+            Berechne deinen genauen Körperfettanteil <a class="small_box color_inverse_on_hover" href="https://www.hammer.de/fitnesswissen/koerperfett-rechner">hier</a>.
+        </p>
+    </div>
+</main>
+</body>
+</html>
diff --git a/kalorien_zaehler/index.php b/kalorien_zaehler/index.php
new file mode 100755
index 0000000..8641a83
--- /dev/null
+++ b/kalorien_zaehler/index.php
@@ -0,0 +1,344 @@
+<?php session_start();
+
+/* error_reporting(E_ALL);
+ini_set('display_errors', 1); */
+
+$tag = (isset($_POST['tag_aendern'])) ? $_POST['tag_aendern'] : time();
+$tabelle_datum = date("d. M Y", $tag);
+$datenbank_datum = date("Y-m-d", $tag);
+
+if (isset($_SESSION['benutzer'])) {
+    $benutzer = $_SESSION['benutzer'];
+    $datenbank = new mysqli('localhost', 'root', 'sexyweyer', 'Annapurna');
+    
+    if (isset($_POST['werte_uebernehmen'])) {
+        $gesamt_kalorien = round($_POST['gesamt_kalorien']);
+        $gesamt_kohlenhydrate = round($_POST['gesamt_kohlenhydrate']);
+        $gesamt_fett = round($_POST['gesamt_fett']);
+        $gesamt_protein = round($_POST['gesamt_protein']);
+        $gesamt_zucker = round($_POST['gesamt_zucker']);
+    
+        $datenbank->query("DELETE FROM ernaehrungswerte WHERE benutzer_id = $benutzer");
+        $datenbank->query("INSERT INTO ernaehrungswerte VALUES ('$benutzer', '$gesamt_kalorien', '$gesamt_kohlenhydrate', '$gesamt_fett', '$gesamt_protein', '$gesamt_zucker')");
+    } else {
+        $response = $datenbank->query("SELECT gesamt_kalorien, gesamt_kohlenhydrate, gesamt_fett, gesamt_protein, gesamt_zucker FROM ernaehrungswerte WHERE benutzer_id = $benutzer");
+        $data = $response->fetch_assoc();
+        $gesamt_kalorien = $data['gesamt_kalorien'];
+        $gesamt_kohlenhydrate = $data['gesamt_kohlenhydrate'];
+        $gesamt_fett = $data['gesamt_fett'];
+        $gesamt_protein = $data['gesamt_protein'];
+        $gesamt_zucker = $data['gesamt_zucker'];
+    }
+    
+    if (isset($_POST['lebensmittel_hinzufuegen'])) {
+        $lebensmittel_id = $_POST['lebensmittel_hinzufuegen'];
+        $menge = $_POST['menge'];
+    
+        $datenbank->query("INSERT INTO benutzer_lebensmittel (benutzer, lebensmittel, menge, datum, uhrzeit) VALUES ('$benutzer', '$lebensmittel_id', '$menge', CURRENT_DATE(), CURRENT_TIME())");
+    }
+    
+    $antwort = $datenbank->query(
+        "SELECT
+            lebensmittel.namen AS lebensmittel_namen,
+            benutzer_lebensmittel.menge AS menge, 
+            (lebensmittel.kalorien / 100 * benutzer_lebensmittel.menge) AS kalorienwert,
+            (lebensmittel.kohlenhydrate / 100 * benutzer_lebensmittel.menge) AS kohlenhydratwert,
+            (lebensmittel.fett / 100 * benutzer_lebensmittel.menge) AS fettwert,
+            (lebensmittel.protein / 100 * benutzer_lebensmittel.menge) AS proteinwert,
+            (lebensmittel.zucker / 100 * benutzer_lebensmittel.menge) AS zuckerwert,
+            benutzer_lebensmittel.uhrzeit AS eintrag_uhrzeit
+        FROM benutzer_lebensmittel INNER JOIN lebensmittel
+        ON benutzer_lebensmittel.lebensmittel = lebensmittel.lebensmittel_id
+        WHERE benutzer_lebensmittel.benutzer = '$benutzer'
+        AND benutzer_lebensmittel.datum = '$datenbank_datum'
+        ORDER BY benutzer_lebensmittel.uhrzeit;"
+    );
+    
+    $alle_lebensmittel = [];
+    while ($lebensmittel = $antwort->fetch_assoc()) {
+        $alle_lebensmittel[] = $lebensmittel;
+    }
+    $datenbank->close();
+    
+    $verbraucht_kalorien = 0;
+    $verbraucht_kohlenhydrate = 0;
+    $verbraucht_fett = 0;
+    $verbraucht_protein = 0;
+    $verbraucht_zucker = 0;
+    
+    foreach ($alle_lebensmittel as $lebensmittel) {
+        $verbraucht_kalorien += $lebensmittel['kalorienwert'];
+        $verbraucht_kohlenhydrate += $lebensmittel['kohlenhydratwert'];
+        $verbraucht_fett += $lebensmittel['fettwert'];
+        $verbraucht_protein += $lebensmittel['proteinwert'];
+        $verbraucht_zucker += $lebensmittel['zuckerwert'];
+    }
+}
+?>
+
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ernährungszähler</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+
+<body>
+    
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+
+<main class="big_box hor_spacing">
+    <h1>Ernährungszähler</h1>
+    <?php if (isset($_SESSION['benutzer'])) { ?>
+        <div class="medium_box hor_spacing_item">
+            <h2>Heutiger Ernährungsbedarf</h2>
+            <div class="listenbox" style="text-align: left">
+                <div class="listenobjekt flexbox">
+                    <div style="flex: 2; overflow: hidden">
+                        <b>Wert</b>
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <b>Kalorien</b>
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <b>Kohlenhydrate</b>
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <b>Fett</b>
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <b>Protein</b>
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <b>Zucker</b>
+                    </div>
+                </div>
+                <div class="listenobjekt flexbox">
+                    <div style="flex: 2; overflow: hidden">
+                        Gesamter Bedarf
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= $gesamt_kalorien ?? 0 ?> kcal
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= $gesamt_kohlenhydrate ?? 0 ?> gramm
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= $gesamt_fett ?? 0 ?> gramm
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= $gesamt_protein ?? 0 ?> gramm
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= $gesamt_zucker ?? 0 ?> gramm
+                    </div>
+                </div>
+                <div class="listenobjekt flexbox">
+                    <div style="flex: 2; overflow: hidden">
+                        Verbraucht
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= $verbraucht_kalorien ?? 0 ?> kcal
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= $verbraucht_kohlenhydrate ?? 0 ?> gramm
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= $verbraucht_fett ?? 0 ?> gramm
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= $verbraucht_protein ?? 0 ?> gramm
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= $verbraucht_zucker ?? 0 ?> gramm
+                    </div>
+                </div>
+                <div class="listenobjekt flexbox">
+                    <div style="flex: 2; overflow: hidden">
+                        Übrig
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= max($gesamt_kalorien - $verbraucht_kalorien, 0) ?> kcal
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= max($gesamt_kohlenhydrate - $verbraucht_kohlenhydrate, 0) ?> gramm
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= max($gesamt_fett - $verbraucht_fett, 0) ?> gramm
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= max($gesamt_protein - $verbraucht_protein, 0) ?> gramm
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= max($gesamt_zucker - $verbraucht_zucker, 0) ?> gramm
+                    </div>
+                </div>
+                <div class="listenobjekt flexbox">
+                    <div style="flex: 2; overflow: hidden">
+                        % Verbraucht
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= ($gesamt_kalorien) ? round(($verbraucht_kalorien / $gesamt_kalorien) * 100) : 0 ?> %
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= ($gesamt_kohlenhydrate) ? round(($verbraucht_kohlenhydrate / $gesamt_kohlenhydrate) * 100) : 0 ?> %
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= ($gesamt_fett) ? round(($verbraucht_fett / $gesamt_fett) * 100) : 0 ?> %
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= ($gesamt_protein) ? round(($verbraucht_protein / $gesamt_protein) * 100) : 0 ?> %
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <?= ($gesamt_zucker) ? round(($verbraucht_zucker / $gesamt_zucker) * 100) : 0 ?> %
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="medium_box hor_spacing_item hor_spacing">
+
+            <h2>Lebensmittel hizufügen</h2>
+            <form class="flexbox hor_spacing_item" action="" method="POST">
+                <input class="small_box color_inverse_on_hover" type="text" name="lebensmittel_suchquery" style="flex-grow: 1" required>
+                <button class="small_box color_inverse_on_hover" type="submit" name="lebensmittel_suche" style="width: auto">Suchen</button>
+            </form>
+
+            <?php
+            if (isset($_POST['lebensmittel_suche'])) {
+                $suchbegriff = $_POST['lebensmittel_suchquery'];
+
+                $ch = curl_init();
+                $url = 'https://api.webapp.prod.blv.foodcase-services.com/BLV_WebApp_WS/webresources/BLV-api/foods?lang=de&search=' . urlencode($suchbegriff);
+                
+                $curl_options = [
+                    CURLOPT_URL => $url, 
+                    CURLOPT_HEADER => false, 
+                    CURLOPT_RETURNTRANSFER => true, 
+                ];
+                curl_setopt_array($ch, $curl_options);
+            
+                $antwort = curl_exec($ch);
+                curl_close($ch);
+                $alle_api_lebensmittel = json_decode($antwort, true);
+        
+                if ($alle_api_lebensmittel) { ?>
+                    <form class="listenbox" action="./lebensmittel_hinzufuegen.php" method="POST">
+                        <?php foreach ($alle_api_lebensmittel as $api_lebensmittel) { ?>
+                            <button type="submit" class="color_inverse_on_hover listenobjekt" style="width: 100%" name="lebensmittel_auswahl" value="<?= $api_lebensmittel['id'] ?>">
+                                <?= $api_lebensmittel['foodName'] ?>
+                            </button>
+                        <?php } ?>
+                    </form>
+                <?php } else { ?>
+                    <div class="small_box hor_spacing_item">
+                        Keine Einträge in der Datenbank!
+                    </div>
+                <?php }
+            } ?>
+        </div>
+        <div class="medium_box hor_spacing">
+            <h2>Konsumierte Lebensmittel</h2>
+            <form class="flexbox hor_spacing_item" action="" method="POST">
+                <button class="small_box color_inverse_on_hover" style="flex: 1" type="submit" name="tag_aendern" value="<?= strtotime("-1 day", $tag) ?>"><h2 style="margin: 0">-1 Tag</h2></button>
+                <button class="small_box color_inverse_on_hover" style="flex: 3" type="submit" name="tag_aendern" value="<?= strtotime("now") ?>"><h2 style="margin: 0"><?= $tabelle_datum ?></h2></button>
+                <button class="small_box color_inverse_on_hover" style="flex: 1" type="submit" name="tag_aendern" value="<?= strtotime("+1 day", $tag) ?>"><h2 style="margin: 0">+1 Tag</h2></button>
+            </form>
+            <div class="listenbox hor_spacing_item" style="text-align: left">
+                <div class="listenobjekt flexbox">
+                    <div style="flex: 3; overflow: hidden">
+                        <b>Namen</b>
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <b>Menge</b>
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <b>Kalorien</b>
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <b>Kohlenhydrate</b>
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <b>Fett</b>
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <b>Protein</b>
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <b>Zucker</b>
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <b>Fett</b>
+                    </div>
+                    <div style="flex: 1; overflow: hidden">
+                        <b>Uhrzeit</b>
+                    </div>
+                </div>
+                <?php if ($alle_lebensmittel) {
+                    foreach ($alle_lebensmittel as $lebensmittel) { ?>
+                        <div class="listenobjekt flexbox">
+                            <div style="flex: 3; overflow: hidden">
+                                <?= $lebensmittel['lebensmittel_namen'] ?>
+                            </div>
+                            <div style="flex: 1; overflow: hidden">
+                                <?= $lebensmittel['menge'] ?> g
+                            </div>
+                            <div style="flex: 1; overflow: hidden">
+                                <?= round($lebensmittel['kalorienwert']) ?> kcal
+                            </div>
+                            <div style="flex: 1; overflow: hidden">
+                                <?= round($lebensmittel['kohlenhydratwert']) ?> g
+                            </div>
+                            <div style="flex: 1; overflow: hidden">
+                                <?= round($lebensmittel['fettwert']) ?> g
+                            </div>
+                            <div style="flex: 1; overflow: hidden">
+                                <?= round($lebensmittel['proteinwert']) ?> g
+                            </div>
+                            <div style="flex: 1; overflow: hidden">
+                                <?= round($lebensmittel['zuckerwert']) ?> g
+                            </div>
+                            <div style="flex: 1; overflow: hidden">
+                                <?= round($lebensmittel['fettwert']) ?> g
+                            </div>
+                            <div style="flex: 1; overflow: hidden">
+                                <?= substr($lebensmittel['eintrag_uhrzeit'], 0, -3) ?>
+                            </div>
+                        </div>
+                    <?php }
+                } else { ?>
+                    <div class="listenobjekt" style="text-align: center">
+                        Keine Einträge in der Datenbank!
+                    </div>
+                <?php } ?>
+            </div>
+        </div>
+    <?php } else { ?>
+        <div class="medium_box hor_spacing_item">
+            <p><a class="small_box color_inverse_on_hover" href="/login">Melde dich an</a>, um diesen Teil der Webseite zu nutzen!</p>
+        </div>
+    <?php } ?>
+</main>
+</body>
+</html>
diff --git a/kalorien_zaehler/lebensmittel_hinzufuegen.php b/kalorien_zaehler/lebensmittel_hinzufuegen.php
new file mode 100755
index 0000000..51f61c8
--- /dev/null
+++ b/kalorien_zaehler/lebensmittel_hinzufuegen.php
@@ -0,0 +1,139 @@
+<?php
+/* error_reporting(E_ALL);
+ini_set('display_errors', 1); */
+
+if ($lebensmittel_id = $_POST['lebensmittel_auswahl']) {
+
+    $datenbank = new mysqli('localhost', 'root', 'sexyweyer', 'Annapurna');
+    $response = $datenbank->query("SELECT * FROM lebensmittel WHERE lebensmittel_id = '$lebensmittel_id';");
+
+    if ($result = $response->fetch_assoc()) {
+        $namen = $result['namen'];
+        $kalorien = $result['kalorien'];
+        $kohlenhydrate = $result['kohlenhydrate'];
+        $fett = $result['fett'];
+        $protein = $result['protein'];
+        $zucker = $result['zucker'];
+    } else {
+        $url = 'https://api.webapp.prod.blv.foodcase-services.com/BLV_WebApp_WS/webresources/BLV-api/food/' . $lebensmittel_id . '?lang=de';
+
+        $ch = curl_init();
+        $curl_options = [
+            CURLOPT_URL => $url, 
+            CURLOPT_HEADER => false, 
+            CURLOPT_RETURNTRANSFER => true, 
+        ];
+        curl_setopt_array($ch, $curl_options);
+        $response = curl_exec($ch);
+
+        curl_close($ch);
+
+        $result = json_decode($response, true);
+
+        $namen = $result['name'];
+        $werte = $result['values'];
+
+        foreach ($werte as $wert) {
+            if ($wert['component']['code'] == 'ENERCC') {
+                $kalorien = $wert['value'];
+            } else if ($wert['component']['code'] == 'CHO') {
+                $kohlenhydrate = $wert['value'];
+            } else if ($wert['component']['code'] == 'FAT') {
+                $fett = $wert['value'];
+            } else if ($wert['component']['code'] == 'PROT625') {
+                $protein = $wert['value'];
+            } else if ($wert['component']['code'] == 'SUGAR') {
+                $zucker = $wert['value'];
+            }
+        }
+        $datenbank->query("INSERT INTO lebensmittel VALUES ('$lebensmittel_id', '$namen', '$kalorien', '$kohlenhydrate', '$fett', '$protein', '$zucker')");
+    }
+}
+?>
+
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lebensmittel hinzufügen</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+
+<body>
+    
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+
+<main class="big_box hor_spacing">
+
+    <h1><?= $namen ?></h1>
+
+    <div class="hor_spacing">
+        <div class="flexbox hor_spacing_item">
+            <div class="medium_box" style="flex: 1">
+                <h2 style="margin: 0">Kohlenhydrate</h2>
+                <div style="font-size: 100px"><?= $kohlenhydrate ?></div>
+                <h2 style="margin: 0">gramm / 100 gramm</h2>
+            </div>
+            <div class="medium_box" style="flex: 1">
+                <h2 style="margin: 0">Protein</h2>
+                <div style="font-size: 100px"><?= $protein ?></div>
+                <h2 style="margin: 0">gramm / 100 gramm</h2>
+            </div>
+            <div class="medium_box" style="flex: 1">
+                <h2 style="margin: 0">Fett</h2>
+                <div style="font-size: 100px"><?= $fett ?></div>
+                <h2 style="margin: 0">gramm / 100 gramm</h2>
+            </div>
+        </div>
+        <div class="flexbox hor_spacing_item">
+            <div class="medium_box" style="flex: 1">
+                <h2 style="margin: 0">Zucker</h2>
+                <div style="font-size: 100px"><?= $zucker ?></div>
+                <h2 style="margin: 0">gramm / 100 gramm</h2>
+            </div>
+            <div class="medium_box" style="flex: 2">
+                <h2 style="margin: 0">Kalorien</h2>
+                <div style="font-size: 100px"><?= $kalorien ?></div>
+                <h2 style="margin: 0">gramm / 100 gramm</h2>
+            </div>
+            <a class="medium_box color_inverse_on_hover" style="flex: 1" href="<?= 'https://api.webapp.prod.blv.foodcase-services.com/BLV_WebApp_WS/webresources/BLV-api/food/' . $lebensmittel_id . '?lang=de' ?>" target="_blank">
+                <h2 style="margin: 0">auf</h2>
+                <div style="font-size: 100px">API</div>
+                <h2 style="margin: 0">zugreifen</h2>
+            </a>
+        </div>
+    </div>
+</main>
+
+<main class="big_box">
+    <h1><?= $namen ?> hinzufügen</h1>
+    <form class="flexbox" action="./index.php" method="POST">
+        <div class="medium_box" style="flex: 1">
+            <h2 style="display: inline">Menge (in gramm): </h2><input class="small_box color_inverse_on_hover" type="number" name="menge" min="1" max="10000" step="1" required> g
+        </div>
+        <button class="medium_box color_inverse_on_hover" style="flex: 1" type="submit" name="lebensmittel_hinzufuegen" value="<?= $lebensmittel_id ?>"><h2 style="margin: 0">Mahlzeit hinzufügen</h2></button>
+    </form>
+</main> 
+
+</body>
+</html>
diff --git a/login/index.php b/login/index.php
new file mode 100755
index 0000000..229b130
--- /dev/null
+++ b/login/index.php
@@ -0,0 +1,156 @@
+<?php
+/* error_reporting(E_ALL);
+ini_set('display_errors', 1); */
+session_start();
+
+if (isset($_POST['abmelden'])) unset($_SESSION['benutzer']);
+
+$benutzername = $_POST['input_benutzername'];
+$passwort = $_POST['input_passwort'];
+
+$datenbank = new mysqli('localhost', 'root', 'sexyweyer', 'Annapurna');
+
+if ($_POST['abmelden_loeschen'] == 'abmelden') {
+	unset($_SESSION['benutzer']);
+} elseif ($_POST['abmelden_loeschen'] == 'loeschen') {
+	$benutzer = $_SESSION['benutzer'];
+	$datenbank->query("DELETE FROM benutzer WHERE benutzer_id = '$benutzer'");
+	unset($_SESSION['benutzer']);
+}
+if (isset($_POST['konto_loeschen'])) {
+	$datenbank->query("DELETE FROM benutzer WHERE benutzer_id = '{$_SESSION['benutzer']}'");
+}
+
+if ($_POST['login'] == 'anmeldung') {
+
+    $statement = $datenbank->prepare("SELECT * FROM benutzer WHERE benutzername = ?");
+    $statement->bind_param('s', $benutzername);
+    $statement->execute();
+    $result = $statement->get_result();
+    $statement->close();
+
+    if ($user = $result->fetch_assoc()) {
+        if (password_verify($passwort, $user['passwort'])) {
+            $_SESSION['benutzer'] = $user['benutzer_id'];
+        } else {
+            $nachricht = "Passwort ist falsch!";
+        }
+    } else {
+        $nachricht = "Benutzername nicht registriert!";
+    }
+
+} else if ($_POST['login'] == 'registrierung') {
+
+    if (str_contains($benutzername, ' ')) {
+        $nachricht = "Benutzername darf keine Leerzeichen enthalten!";
+    } else if (str_contains($passwort, ' ')) {
+        $nachricht = "Passwort darf keine Leerzeichen enthalten!";
+    } else if (!preg_match('/[^a-zA-Z0-9]/', $passwort)) {
+        $nachricht = "Passwort muss ein Sonderzeichen enthalten!";
+    }
+    $statement = $datenbank->prepare("SELECT * FROM benutzer WHERE benutzername = ?");
+    $statement->bind_param('s', $benutzername);
+    $statement->execute();
+    $result = $statement->get_result();
+
+    if ($result->num_rows) {
+        $nachricht = "Benutzername ist schon registriert!";
+    } else {
+        $passwort_hash = password_hash($passwort, PASSWORD_DEFAULT);
+        
+        $statement = $datenbank->prepare(
+            "INSERT INTO benutzer (benutzername, passwort, letzter_login) 
+            VALUES (?, ?, NOW())"
+        );
+        $statement->bind_param('ss', $benutzername, $passwort_hash);
+
+        if ($statement->execute()) {
+            $nachricht = "Benutzer wurde erfolgreich registriert!";
+        } else {
+            $nachricht = "Fehler bei der Registrierung(" . $statement->errno . "): " . $statement->error;
+        }
+    }
+    $statement->close();
+}
+$datenbank->close();
+?>
+
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+
+<body>
+
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+
+<main class="big_box hor_spacing">
+    <h1>Anmeldung / Registrierung</h1>
+
+    <?php if (isset($_SESSION['benutzer'])) { ?>
+
+        <div class="medium_box">
+            <h2>Sie sind eingeloggt!</h2>
+            <form class="flexbox" action="" method="POST">
+                <button class="small_box color_inverse_on_hover" style="flex: 1" type="submit" name="abmelden_loeschen" value="abmelden"><h2 style="margin: 0">Abmelden</h2></button>
+                <button class="small_box color_inverse_on_hover" style="flex: 1" type="submit" name="abmelden_loeschen" value="loeschen"><h2 style="margin: 0">Konto löschen</h2></button>
+            </form>
+        </div>
+
+    <?php } else {
+        ?>
+
+        <form class="hor_spacing_item" method="POST" action="">
+            <ol style="list-style-position: inside">
+                <p><li>Benutzername und Passwort dürfen keine Leerzeichen enthalten.</li></p>
+                <p><li>Das Passwort muss mindestens ein Sonderzeichen enthalten.</li></p>
+                <p><li>Benutzername und Passwort dürfen nicht weniger als 8 und mehr als 24 Charaktere enthalten.</li></p>
+                <p><li>Durch die Registrierung akzeptieren Sie die <a href="/agb.html" style="text-decoration: underline">AGBs</a></li></p>
+            </ol>
+            <br>
+            <div class="flexbox hor_spacing_item">
+                <div class="medium_box" style="flex: 1">
+                    <h2>Benutzername: </h2>
+                    <input class="small_box color_inverse_on_hover" type="text" minlength="8" maxlength="24" name="input_benutzername" required>
+                </div>
+                <div class="medium_box" style="flex: 1">
+                    <h2>Passwort: </h2>
+                    <input class="small_box color_inverse_on_hover" type="password" minlength="8" maxlengh="24" name="input_passwort" required>
+                </div>
+            </div>
+            <div class="flexbox hor_spacing_item">
+                <button class="medium_box color_inverse_on_hover" style="flex: 1" type="submit" name="login" value="anmeldung"><h2 style="margin: 0">ANMELDEN</h2></button>
+                <button class="medium_box color_inverse_on_hover" style="flex: 1" type="submit" name="login" value="registrierung"><h2 style="margin: 0">REGISTRIEREN</h2></button>
+            </div>
+        </form>
+
+        <?php if ($nachricht) { ?>
+            <div class="medium_box hor_spacing_item"><h2><?= $nachricht ?></h2></div>
+        <?php }
+    } ?>
+</main>
+</body>
+</html>
diff --git a/rezepte/abendessen/gegrillter_fisch_mit_kartoffeln_und_spargel/index.html b/rezepte/abendessen/gegrillter_fisch_mit_kartoffeln_und_spargel/index.html
new file mode 100755
index 0000000..ae27fc8
--- /dev/null
+++ b/rezepte/abendessen/gegrillter_fisch_mit_kartoffeln_und_spargel/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gegrillter Fisch mit Kartoffeln und Spargel</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+
+<main class="big_box">
+    <h1>Gegrillter Fisch mit Kartoffeln und Spargel</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./rezept.png">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Zutaten:</h2>
+        <ul>
+            <li><p>2 Fischfilets (z.B. Lachs, Kabeljau)</p></li>
+            <li><p>2 Kartoffeln</p></li>
+            <li><p>500g Spargel</p></li>
+            <li><p>Olivenöl</p></li>
+            <li><p>Salz und Pfeffer</p></li>
+        </ul>
+        <h2>Zubereitung:</h2>
+        <ol>
+            <li><p>Kartoffeln schälen und in Scheiben schneiden.</p></li>
+            <li><p>Spargel waschen und die Enden abschneiden.</p></li>
+            <li><p>Fischfilets mit Olivenöl, Salz und Pfeffer würzen.</p></li>
+            <li><p>Kartoffeln, Spargel und Fisch auf den Grill legen und garen, bis alles gar ist.</p></li>
+        </ol>
+    </div>
+</main>
+\ No newline at end of file
diff --git a/rezepte/abendessen/gegrillter_fisch_mit_kartoffeln_und_spargel/rezept.png b/rezepte/abendessen/gegrillter_fisch_mit_kartoffeln_und_spargel/rezept.png
new file mode 100755
index 0000000..79d28ec
--- /dev/null
+++ b/rezepte/abendessen/gegrillter_fisch_mit_kartoffeln_und_spargel/rezept.png
diff --git a/rezepte/abendessen/gemuese_curry_mit_kokosmilch_und_reis/index.html b/rezepte/abendessen/gemuese_curry_mit_kokosmilch_und_reis/index.html
new file mode 100755
index 0000000..8723765
--- /dev/null
+++ b/rezepte/abendessen/gemuese_curry_mit_kokosmilch_und_reis/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gemüse-Curry mit Kokosmilch und Reis</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Gemüse-Curry mit Kokosmilch und Reis</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./rezept.png">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Zutaten:</h2>
+        <ul>
+            <li><p>1 Zwiebel</p></li>
+            <li><p>2 Knoblauchzehen</p></li>
+            <li><p>1 rote Paprika</p></li>
+            <li><p>1 grüne Paprika</p></li>
+            <li><p>1 Dose (400 g) Kichererbsen</p></li>
+            <li><p>1 Dose (400 ml) Kokosmilch</p></li>
+            <li><p>2 EL Currypaste</p></li>
+            <li><p>1 TL Kurkuma</p></li>
+            <li><p>Salz und Pfeffer</p></li>
+            <li><p>Reis</p></li>
+        </ul>
+        <h2>Zubereitung:</h2>
+        <ol>
+            <li><p>Zwiebel und Knoblauch hacken. Paprika in Streifen schneiden.</p></li>
+            <li><p>Öl in einem Topf erhitzen. Zwiebel und Knoblauch darin andünsten, bis sie weich sind.</p></li>
+            <li><p>Paprika, Kichererbsen, Kokosmilch, Currypaste und Kurkuma hinzufügen. Mit Salz und Pfeffer abschmecken.</p></li>
+            <li><p>Alles ca. 15-20 Minuten köcheln lassen, bis das Gemüse gar ist.</p></li>
+            <li><p>Reis nach Packungsanweisung kochen.</p></li>
+            <li><p>Curry mit Reis servieren.</p></li>
+        </ol>
+    </div>
+</main>
+\ No newline at end of file
diff --git a/rezepte/abendessen/gemuese_curry_mit_kokosmilch_und_reis/rezept.png b/rezepte/abendessen/gemuese_curry_mit_kokosmilch_und_reis/rezept.png
new file mode 100755
index 0000000..2ed8bba
--- /dev/null
+++ b/rezepte/abendessen/gemuese_curry_mit_kokosmilch_und_reis/rezept.png
diff --git a/rezepte/abendessen/haenchenbrust_mit_suesskartoffel_und_brokkoli/index.html b/rezepte/abendessen/haenchenbrust_mit_suesskartoffel_und_brokkoli/index.html
new file mode 100755
index 0000000..f37f263
--- /dev/null
+++ b/rezepte/abendessen/haenchenbrust_mit_suesskartoffel_und_brokkoli/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hähnchenbrust mit Süßkartoffel und Brokkoli</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Hähnchenbrust mit Süßkartoffel und Brokkoli</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./rezept.png">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Zutaten:</h2>
+        <ul>
+            <li><p>2 Hähnchenbrustfilets</p></li>
+            <li><p>2 Süßkartoffeln</p></li>
+            <li><p>500g Brokkoli</p></li>
+            <li><p>Olivenöl</p></li>
+            <li><p>Salz und Pfeffer</p></li>
+        </ul>
+        <h2>Zubereitung:</h2>
+        <ol>
+            <li><p>Süßkartoffeln schälen und in Würfel schneiden.</p></li>
+            <li><p>Brokkoli in Röschen teilen.</p></li>
+            <li><p>Hähnchenbrustfilets mit Olivenöl, Salz und Pfeffer würzen.</p></li>
+            <li><p>Süßkartoffeln, Brokkoli und Hähnchenbrust in einer Pfanne oder im Ofen garen, bis alles gar ist.</p></li>
+        </ol>
+    </div>
+</main>
+\ No newline at end of file
diff --git a/rezepte/abendessen/haenchenbrust_mit_suesskartoffel_und_brokkoli/rezept.png b/rezepte/abendessen/haenchenbrust_mit_suesskartoffel_und_brokkoli/rezept.png
new file mode 100755
index 0000000..c18899e
--- /dev/null
+++ b/rezepte/abendessen/haenchenbrust_mit_suesskartoffel_und_brokkoli/rezept.png
diff --git a/rezepte/abendessen/quinoa_bowl_mit_gemuese_und_ei/index.html b/rezepte/abendessen/quinoa_bowl_mit_gemuese_und_ei/index.html
new file mode 100755
index 0000000..8a6819c
--- /dev/null
+++ b/rezepte/abendessen/quinoa_bowl_mit_gemuese_und_ei/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quinoa-Bowl mit Gemüse und Ei</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Quinoa-Bowl mit Gemüse und Ei</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./rezept.png">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Zutaten:</h2>
+        <ul>
+            <li><p>1 Tasse Quinoa</p></li>
+            <li><p>1 Gurke</p></li>
+            <li><p>1 Tomate</p></li>
+            <li><p>1/2 Avocado</p></li>
+            <li><p>2 Eier</p></li>
+            <li><p>Dressing nach Wahl (z.B. Zitronensaft, Olivenöl)</p></li>
+            <li><p>Salz und Pfeffer</p></li>
+        </ul>
+        <h2>Zubereitung:</h2>
+        <ol>
+            <li><p>Quinoa nach Packungsanweisung kochen.</p></li>
+            <li><p>Gurke, Tomate und Avocado in mundgerechte Stücke schneiden.</p></li>
+            <li><p>Eier hart kochen.</p></li>
+            <li><p>Quinoa in eine Schüssel geben und mit Gemüse und Ei belegen.</p></li>
+            <li><p>Mit Dressing beträufeln und mit Salz und Pfeffer würzen.</p></li>
+            <li><p>Servieren.</p></li>
+        </ol>
+    </div>
+</main>
+\ No newline at end of file
diff --git a/rezepte/abendessen/quinoa_bowl_mit_gemuese_und_ei/rezept.png b/rezepte/abendessen/quinoa_bowl_mit_gemuese_und_ei/rezept.png
new file mode 100755
index 0000000..8a9e14e
--- /dev/null
+++ b/rezepte/abendessen/quinoa_bowl_mit_gemuese_und_ei/rezept.png
diff --git a/rezepte/fruehstueck/haferflocken_mit_frischen_fruechten_und_nuessen/index.html b/rezepte/fruehstueck/haferflocken_mit_frischen_fruechten_und_nuessen/index.html
new file mode 100755
index 0000000..2cf46f9
--- /dev/null
+++ b/rezepte/fruehstueck/haferflocken_mit_frischen_fruechten_und_nuessen/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Haferflocken mit frischen Früchten und Nüssen</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Haferflocken mit frischen Früchten und Nüssen</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./rezept.png">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Zutaten:</h2>
+        <ul>
+            <li><p>1/2 Tasse Haferflocken</p></li>
+            <li><p>1 Tasse Milch oder eine pflanzliche Alternative</p></li>
+            <li><p>1/2 Tasse gemischte Früchte (z.B. Beeren, Banane, Apfel)</p></li>
+            <li><p>1/4 Tasse Nüsse und Samen (z.B. Mandeln, Walnüsse, Chiasamen)</p></li>
+            <li><p>Optional: Honig oder Ahornsirup zum Süßen</p></li>
+        </ul>
+        <h2>Zubereitung:</h2>
+        <ol>
+            <li><p>Haferflocken und Milch in einem Topf zum Kochen bringen.</p></li>
+            <li><p>Hitze reduzieren und unter Rühren ca. 5 Minuten köcheln lassen, bis die Haferflocken weich sind.</p></li>
+            <li><p>In eine Schüssel geben und mit Früchten und Nüssen belegen.</p></li>
+            <li><p>Optional mit Honig oder Ahornsirup beträufeln.</p></li>
+        </ol>
+    </div>
+</main>
+\ No newline at end of file
diff --git a/rezepte/fruehstueck/haferflocken_mit_frischen_fruechten_und_nuessen/rezept.png b/rezepte/fruehstueck/haferflocken_mit_frischen_fruechten_und_nuessen/rezept.png
new file mode 100755
index 0000000..4f8230e
--- /dev/null
+++ b/rezepte/fruehstueck/haferflocken_mit_frischen_fruechten_und_nuessen/rezept.png
diff --git a/rezepte/fruehstueck/ruehrei_mit_lachs_und_dill/index.html b/rezepte/fruehstueck/ruehrei_mit_lachs_und_dill/index.html
new file mode 100755
index 0000000..6858863
--- /dev/null
+++ b/rezepte/fruehstueck/ruehrei_mit_lachs_und_dill/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rührei mit Lachs und Dill</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Rührei mit Lachs und Dill</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./rezept.png">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Zutaten:</h2>
+        <ul>
+            <li><p>4 Eier</p></li>
+            <li><p>2 EL Milch</p></li>
+            <li><p>Salz und Pfeffer</p></li>
+            <li><p>1 EL Butter</p></li>
+            <li><p>100 g Räucherlachs, in Streifen geschnitten</p></li>
+            <li><p>2 EL frischer Dill, gehackt</p></li>
+        </ul>
+        <h2>Zubereitung:</h2>
+        <ol>
+            <li><p>Eier und Milch in einer Schüssel verquirlen. Mit Salz und Pfeffer würzen.</p></li>
+            <li><p>Butter in einer Pfanne schmelzen.</p></li>
+            <li><p>Eier-Mischung in die Pfanne geben und bei mittlerer Hitze unter Rühren stocken lassen.</p></li>
+            <li><p>Räucherlachs und Dill hinzufügen und kurz mitbraten.</p></li>
+            <li><p>Servieren.</p></li>
+        </ol>
+    </div>
+</main>
+\ No newline at end of file
diff --git a/rezepte/fruehstueck/ruehrei_mit_lachs_und_dill/rezept.png b/rezepte/fruehstueck/ruehrei_mit_lachs_und_dill/rezept.png
new file mode 100755
index 0000000..8bb80b4
--- /dev/null
+++ b/rezepte/fruehstueck/ruehrei_mit_lachs_und_dill/rezept.png
diff --git a/rezepte/fruehstueck/smoothie/index.html b/rezepte/fruehstueck/smoothie/index.html
new file mode 100755
index 0000000..522759a
--- /dev/null
+++ b/rezepte/fruehstueck/smoothie/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Smoothie</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Smoothie</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./rezept.png">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Zutaten:</h2>
+        <ul>
+            <li><p>1 Banane</p></li>
+            <li><p>1/2 Tasse gefrorene Beeren (z.B. Erdbeeren, Himbeeren, Blaubeeren)</p></li>
+            <li><p>1/2 Tasse Spinat (frisch oder gefroren)</p></li>
+            <li><p>1/2 Tasse Joghurt (Natur oder griechisch)</p></li>
+            <li><p>1/4 Tasse Milch oder eine pflanzliche Alternative (z.B. Mandelmilch, Sojamilch)</p></li>
+            <li><p>1 EL Honig oder Ahornsirup (optional)</p></li>
+        </ul>
+        <h2>Zubereitung:</h2>
+        <ol>
+            <li><p>Alle Zutaten in einen Mixer geben.</p></li>
+            <li><p>Den Mixer auf höchster Stufe ca. 30-60 Sekunden mixen, bis der Smoothie cremig und glatt ist.</p></li>
+            <li><p>Bei Bedarf noch etwas mehr Milch oder Joghurt hinzufügen, um die gewünschte Konsistenz zu erreichen.</p></li>
+            <li><p>Den Smoothie in ein Glas füllen und sofort genießen.</p></li>
+        </ol>
+    </div>
+</main>
+\ No newline at end of file
diff --git a/rezepte/fruehstueck/smoothie/rezept.png b/rezepte/fruehstueck/smoothie/rezept.png
new file mode 100755
index 0000000..8c2a571
--- /dev/null
+++ b/rezepte/fruehstueck/smoothie/rezept.png
diff --git a/rezepte/fruehstueck/vollkornbrot_mit_avocado_und_ei/index.html b/rezepte/fruehstueck/vollkornbrot_mit_avocado_und_ei/index.html
new file mode 100755
index 0000000..57a95ff
--- /dev/null
+++ b/rezepte/fruehstueck/vollkornbrot_mit_avocado_und_ei/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vollkornbrot mit Avocado und Ei</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Vollkornbrot mit Avocado und Ei</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./rezept.png">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Zutaten:</h2>
+        <ul>
+            <li><p>1 Scheibe Vollkornbrot</p></li>
+            <li><p>1/2 Avocado</p></li>
+            <li><p>1 Ei</p></li>
+            <li><p>Salz und Pfeffer</p></li>
+            <li><p>Optional: Zitronensaft, rote Pfefferflocken</p></li>
+        </ul>
+        <h2>Zubereitung:</h2>
+        <ol>
+            <li><p>Brot toasten.</p></li>
+            <li><p>Avocado auf das Brot geben und mit einer Gabel zerdrücken.</p></li>
+            <li><p>Ei nach Wunsch zubereiten (z.B. Spiegelei, Rührei).</p></li>
+            <li><p>Ei auf die Avocado geben und mit Salz und Pfeffer würzen.</p></li>
+            <li><p>Optional mit Zitronensaft und roten Pfefferflocken bestreuen.</p></li>
+        </ol>
+    </div>
+</main>
diff --git a/rezepte/fruehstueck/vollkornbrot_mit_avocado_und_ei/rezept.png b/rezepte/fruehstueck/vollkornbrot_mit_avocado_und_ei/rezept.png
new file mode 100755
index 0000000..2f65214
--- /dev/null
+++ b/rezepte/fruehstueck/vollkornbrot_mit_avocado_und_ei/rezept.png
diff --git a/rezepte/index.html b/rezepte/index.html
new file mode 100755
index 0000000..e966478
--- /dev/null
+++ b/rezepte/index.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rezepte</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+
+<main class="big_box">
+    <h1>Frühstück</h1>
+    <div class="flexbox">
+        <a class="medium_box color_inverse_on_hover" style="flex: 1; height: 100%" href="./fruehstueck/haferflocken_mit_frischen_fruechten_und_nuessen/">
+            <h2>Haferflocken mit frischen Früchten und Nüssen</h2>
+            <img class="small_box" style="padding: 0; width: 100%" src="./fruehstueck/haferflocken_mit_frischen_fruechten_und_nuessen/rezept.png">
+        </a>
+        <a class="medium_box color_inverse_on_hover" style="flex: 1; height: 100%" href="./fruehstueck/ruehrei_mit_lachs_und_dill/">
+            <h2>Rührei mit Lachs und Dill</h2>
+            <img class="small_box" style="padding: 0; width: 100%" src="./fruehstueck/ruehrei_mit_lachs_und_dill/rezept.png">
+        </a>
+        <a class="medium_box color_inverse_on_hover" style="flex: 1; height: 100%" href="./fruehstueck/smoothie/">
+            <h2>Smoothie</h2>
+            <img class="small_box" style="padding: 0; width: 100%" src="./fruehstueck/smoothie/rezept.png">
+        </a>
+        <a class="medium_box color_inverse_on_hover" style="flex: 1; height: 100%" href="./fruehstueck/vollkornbrot_mit_avocado_und_ei/">
+            <h2>Vollkornbrot mit Avocado und Ei</h2>
+            <img class="small_box" style="padding: 0; width: 100%" src="./fruehstueck/vollkornbrot_mit_avocado_und_ei/rezept.png">
+        </a>
+    </div>
+</main>
+
+<main class="big_box">
+    <h1>Mittagessen</h1>
+    <div class="flexbox">
+        <a class="medium_box color_inverse_on_hover" style="flex: 1; height: 100%" href="./mittagessen/kartoffel_und_suesskartoffel_frittata/">
+            <h2>Kartoffel und Süßkartoffel Frittata</h2>
+            <img class="small_box" style="padding: 0; width: 100%" src="./mittagessen/kartoffel_und_suesskartoffel_frittata/rezept.png">
+        </a>
+        <div class="hor_spacing" style="flex: 1">
+            <a class="medium_box color_inverse_on_hover hor_spacing_item" style="display: block" href="./mittagessen/lasagne/">
+                <h2>Lasagne</h2>
+                <img class="small_box" style="padding: 0; width: 100%" src="./mittagessen/lasagne/rezept.png">
+            </a>
+            <a class="medium_box color_inverse_on_hover hor_spacing_item" style="display: block" href="./mittagessen/vollkorn_wraps_mit_hummus_und_gemuese/">
+                <h2>Vollkorn Wraps mit Hummus und Gemüse</h2>
+                <img class="small_box" style="padding: 0; width: 100%" src="./mittagessen/vollkorn_wraps_mit_hummus_und_gemuese/rezept.png">
+            </a>
+        </div>
+        <a class="medium_box color_inverse_on_hover" style="flex: 1; height: 100%" href="./mittagessen/penne_all_arrabbiata/">
+            <h2>Penne All'Arrabbiata</h2>
+            <img class="small_box" style="padding: 0; width: 100%" src="./mittagessen/penne_all_arrabbiata/rezept.png">
+        </a>
+        <a class="medium_box color_inverse_on_hover" style="flex: 1; height: 100%" href="./mittagessen/salat_mit_gegrilltem_haehnchen_oder_tofu/">
+            <h2>Salat mit gegrilltem Hähnchen oder Tofu</h2>
+            <img class="small_box" style="padding: 0; width: 100%" src="./mittagessen/salat_mit_gegrilltem_haehnchen_oder_tofu/rezept.png">
+        </a>
+    </div>
+</main>
+<main class="big_box">
+    <h1>Abendessen</h1>
+    <div class="flexbox">
+        <a class="medium_box color_inverse_on_hover" style="flex: 1; height: 100%" href="./abendessen/gegrillter_fisch_mit_kartoffeln_und_spargel/">
+            <h2>Gegrillter Fisch mit Kartoffeln und Spargel</h2>
+            <img class="small_box" style="padding: 0; width: 100%" src="./abendessen/gegrillter_fisch_mit_kartoffeln_und_spargel/rezept.png">
+        </a>
+        <a class="medium_box color_inverse_on_hover" style="flex: 1; height: 100%" href="./abendessen/gemuese_curry_mit_kokosmilch_und_reis/">
+            <h2>Gemüse-Curry mit Kokosmilch und Reis</h2>
+            <img class="small_box" style="padding: 0; width: 100%" src="./abendessen/gemuese_curry_mit_kokosmilch_und_reis/rezept.png">
+        </a>
+        <a class="medium_box color_inverse_on_hover" style="flex: 1; height: 100%" href="./abendessen/haenchenbrust_mit_suesskartoffel_und_brokkoli/">
+            <h2>Hähnchenbrust mit Süßkartoffel und Brokkoli</h2>
+            <img class="small_box" style="padding: 0; width: 100%" src="./abendessen/haenchenbrust_mit_suesskartoffel_und_brokkoli/rezept.png">
+        </a>
+        <a class="medium_box color_inverse_on_hover" style="flex: 1; height: 100%" href="./abendessen/quinoa_bowl_mit_gemuese_und_ei/">
+            <h2>Quinoa-Bowl mit Gemüse und Ei</h2>
+            <img class="small_box" style="padding: 0; width: 100%" src="./abendessen/quinoa_bowl_mit_gemuese_und_ei/rezept.png">
+        </a>
+    </div>
+</main>
+<main class="big_box">
+    <h1>Snacks</h1>
+    <div class="flexbox">
+        <a class="medium_box color_inverse_on_hover" style="flex: 1; height: 100%" href="./snacks/avocado_dip_mit_tortilla_chips/">
+            <h2>Avocado-Dip mit Tortilla-Chips</h2>
+            <img class="small_box" style="padding: 0; width: 100%" src="./snacks/avocado_dip_mit_tortilla_chips/rezept.png">
+        </a>
+        <a class="medium_box color_inverse_on_hover" style="flex: 1; height: 100%" href="./snacks/jogurt_mit_beeren_und_granola/">
+            <h2>Jogurt mit Beeren und Granola</h2>
+            <img class="small_box" style="padding: 0; width: 100%" src="./snacks/jogurt_mit_beeren_und_granola/rezept.png">
+        </a>
+        <a class="medium_box color_inverse_on_hover" style="flex: 1; height: 100%" href="./snacks/nuesse_und_samen/">
+            <h2>Nüsse und Samen</h2>
+            <img class="small_box" style="padding: 0; width: 100%" src="./snacks/nuesse_und_samen/rezept.png">
+        </a>
+        <a class="medium_box color_inverse_on_hover" style="flex: 1; height: 100%" href="./snacks/obst_und_gemuese_sticks_mit_hummus/">
+            <h2>Obst und Gemüse-Sticks mit Hummus</h2>
+            <img class="small_box" style="padding: 0; width: 100%" src="./snacks/obst_und_gemuese_sticks_mit_hummus/rezept.png">
+        </a>
+    </div>
+</main>
+</body>
+</html>
+\ No newline at end of file
diff --git a/rezepte/mittagessen/.DS_Store b/rezepte/mittagessen/.DS_Store
new file mode 100755
index 0000000..9ff0b56
--- /dev/null
+++ b/rezepte/mittagessen/.DS_Store
diff --git a/rezepte/mittagessen/._.DS_Store b/rezepte/mittagessen/._.DS_Store
new file mode 100755
index 0000000..28c42fb
--- /dev/null
+++ b/rezepte/mittagessen/._.DS_Store
diff --git a/rezepte/mittagessen/._vollkorn_wraps_mit_hummus_und_gemuese b/rezepte/mittagessen/._vollkorn_wraps_mit_hummus_und_gemuese
new file mode 100755
index 0000000..bdd0140
--- /dev/null
+++ b/rezepte/mittagessen/._vollkorn_wraps_mit_hummus_und_gemuese
diff --git a/rezepte/mittagessen/kartoffel_und_suesskartoffel_frittata/index.html b/rezepte/mittagessen/kartoffel_und_suesskartoffel_frittata/index.html
new file mode 100755
index 0000000..a599c6a
--- /dev/null
+++ b/rezepte/mittagessen/kartoffel_und_suesskartoffel_frittata/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kartoffel- und Süßkartoffel-Frittata</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Kartoffel- und Süßkartoffel-Frittata</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./rezept.png">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Zutaten:</h2>
+        <ul>
+            <li><p>6 Eier</p></li>
+            <li><p>1/4 Tasse Milch</p></li>
+            <li><p>Salz und Pfeffer</p></li>
+            <li><p>1 EL Olivenöl</p></li>
+            <li><p>1 Kartoffel, geschält und gewürfelt</p></li>
+            <li><p>1 Süßkartoffel, geschält und gewürfelt</p></li>
+            <li><p>1/2 Zwiebel, gehackt</p></li>
+            <li><p>Optional: Käse (z.B. Cheddar, Mozzarella)</p></li>
+        </ul>
+        <h2>Zubereitung:</h2>
+        <ol>
+            <li><p>Backofen auf 180°C vorheizen.</p></li>
+            <li><p>Eier und Milch in einer Schüssel verquirlen. Mit Salz und Pfeffer würzen.</p></li>
+            <li><p>Olivenöl in einer ofenfesten Pfanne erhitzen. Kartoffeln, Süßkartoffeln und Zwiebel darin andünsten, bis sie weich sind.</p></li>
+            <li><p>Eier-Mischung über das Gemüse gießen.</p></li>
+            <li><p>Optional Käse darüber streuen.</p></li>
+            <li><p>Die Frittata im Ofen ca. 15-20 Minuten backen, bis sie fest ist und der Käse geschmolzen ist.</p></li>
+            <li><p>In Stücke schneiden und servieren.</p></li>
+        </ol>
+    </div>
+</main>
+\ No newline at end of file
diff --git a/rezepte/mittagessen/kartoffel_und_suesskartoffel_frittata/rezept.png b/rezepte/mittagessen/kartoffel_und_suesskartoffel_frittata/rezept.png
new file mode 100755
index 0000000..80237fa
--- /dev/null
+++ b/rezepte/mittagessen/kartoffel_und_suesskartoffel_frittata/rezept.png
diff --git a/rezepte/mittagessen/lasagne/index.html b/rezepte/mittagessen/lasagne/index.html
new file mode 100755
index 0000000..0df9b53
--- /dev/null
+++ b/rezepte/mittagessen/lasagne/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lasagne</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Lasagne</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./rezept.png">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Zutaten:</h2>
+        <ul>
+            <li><p>500 g Lasagneplatten</p></li>
+            <li><p>500 g Hackfleisch</p></li>
+            <li><p>1 Zwiebel, gehackt</p></li>
+            <li><p>2 Knoblauchzehen, gehackt</p></li>
+            <li><p>2 Dosen (400 g) gehackte Tomaten</p></li>
+            <li><p>1 EL Tomatenmark</p></li>
+            <li><p>1 TL Oregano</p></li>
+            <li><p>1/2 TL Basilikum</p></li>
+            <li><p>Salz und Pfeffer</p></li>
+            <li><p>500 ml Milch</p></li>
+            <li><p>50 g Butter</p></li>
+            <li><p>50 g Mehl</p></li>
+            <li><p>200 g geriebener Käse (z.B. Mozzarella, Parmesan)</p></li>
+        </ul>
+        <h2>Zubereitung:</h2>
+        <ol>
+            <li><p>Hackfleisch in einer Pfanne anbraten. Zwiebel und Knoblauch hinzufügen und mitbraten, bis sie weich sind.</p></li>
+            <li><p>Gehackte Tomaten, Tomatenmark, Oregano, Basilikum, Salz und Pfeffer hinzufügen. Ca. 30 Minuten köcheln lassen.</p></li>
+            <li><p>Für die Béchamelsauce Milch, Butter und Mehl in einem Topf erhitzen. Unter Rühren aufkochen lassen, bis eine dicke Soße entsteht. Mit Salz und Pfeffer würzen.</p></li>
+            <li><p>Eine Auflaufform mit Lasagneplatten, Fleischsoße, Béchamelsauce und Käse schichtweise füllen. Mit Käse abschließen.</p></li>
+            <li><p>Im Ofen bei 180°C ca. 30-40 Minuten backen, bis der Käse goldbraun ist.</p></li>
+        </ol>
+    </div>
+</main>
+
diff --git a/rezepte/mittagessen/lasagne/rezept.png b/rezepte/mittagessen/lasagne/rezept.png
new file mode 100755
index 0000000..f4aa4bb
--- /dev/null
+++ b/rezepte/mittagessen/lasagne/rezept.png
diff --git a/rezepte/mittagessen/penne_all_arrabbiata/index.html b/rezepte/mittagessen/penne_all_arrabbiata/index.html
new file mode 100755
index 0000000..bd38e75
--- /dev/null
+++ b/rezepte/mittagessen/penne_all_arrabbiata/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Penne all'Arrabbiata</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Penne all'Arrabbiata</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./rezept.png">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Zutaten:</h2>
+        <ul>
+            <li><p>400 g Penne</p></li>
+            <li><p>1 Dose (400 g) gehackte Tomaten</p></li>
+            <li><p>2 Knoblauchzehen, gehackt</p></li>
+            <li><p>1/2 TL Chiliflocken</p></li>
+            <li><p>1 EL Olivenöl</p></li>
+            <li><p>Salz und Pfeffer</p></li>
+            <li><p>Frischer Basilikum, gehackt</p></li>
+        </ul>
+        <h2>Zubereitung:</h2>
+        <ol>
+            <li><p>Penne nach Packungsanweisung kochen.</p></li>
+            <li><p>Während die Penne kochen, Olivenöl in einer Pfanne erhitzen. Knoblauch und Chiliflocken darin andünsten, bis der Knoblauch goldbraun ist.</p></li>
+            <li><p>Gehackte Tomaten hinzufügen und ca. 10 Minuten köcheln lassen, bis die Soße etwas eingedickt ist.</p></li>
+            <li><p>Penne abgießen und in die Pfanne geben. Mit Salz und Pfeffer würzen und gut vermischen.</p></li>
+            <li><p>Mit frischem Basilikum bestreuen und servieren.</p></li>
+        </ol>
+    </div>
+</main>
+\ No newline at end of file
diff --git a/rezepte/mittagessen/penne_all_arrabbiata/rezept.png b/rezepte/mittagessen/penne_all_arrabbiata/rezept.png
new file mode 100755
index 0000000..e51f416
--- /dev/null
+++ b/rezepte/mittagessen/penne_all_arrabbiata/rezept.png
diff --git a/rezepte/mittagessen/salat_mit_gegrilltem_haehnchen_oder_tofu/index.html b/rezepte/mittagessen/salat_mit_gegrilltem_haehnchen_oder_tofu/index.html
new file mode 100755
index 0000000..46903b7
--- /dev/null
+++ b/rezepte/mittagessen/salat_mit_gegrilltem_haehnchen_oder_tofu/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Salat mit gegrilltem Hähnchen oder Tofu</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Salat mit gegrilltem Hähnchen oder Tofu</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./rezept.png">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Zutaten:</h2>
+        <ul>
+            <li><p>Gemischter Salat (z.B. Blattsalat, Rucola, Spinat)</p></li>
+            <li><p>100g gegrilltes Hähnchen oder Tofu</p></li>
+            <li><p>Gemüse nach Wahl (z.B. Gurke, Tomaten, Paprika)</p></li>
+            <li><p>Dressing nach Wahl (z.B. Vinaigrette, Joghurt-Dressing)</p></li>
+        </ul>
+        <h2>Zubereitung:</h2>
+        <ol>
+            <li><p>Salat waschen und in eine Schüssel geben.</p></li>
+            <li><p>Hähnchen oder Tofu in Streifen schneiden und zum Salat geben.</p></li>
+            <li><p>Gemüse hinzufügen.</p></li>
+            <li><p>Mit Dressing beträufeln und servieren.</p></li>
+        </ol>
+    </div>
+</main>
+\ No newline at end of file
diff --git a/rezepte/mittagessen/salat_mit_gegrilltem_haehnchen_oder_tofu/rezept.png b/rezepte/mittagessen/salat_mit_gegrilltem_haehnchen_oder_tofu/rezept.png
new file mode 100755
index 0000000..9fe43b5
--- /dev/null
+++ b/rezepte/mittagessen/salat_mit_gegrilltem_haehnchen_oder_tofu/rezept.png
diff --git a/rezepte/mittagessen/vollkorn_wraps_mit_hummus_und_gemuese/index.html b/rezepte/mittagessen/vollkorn_wraps_mit_hummus_und_gemuese/index.html
new file mode 100755
index 0000000..7379f9d
--- /dev/null
+++ b/rezepte/mittagessen/vollkorn_wraps_mit_hummus_und_gemuese/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vollkorn-Wraps mit Hummus und Gemüse</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Vollkorn-Wraps mit Hummus und Gemüse</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./rezept.png">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Zutaten:</h2>
+        <ul>
+            <li><p>2 Vollkorn-Wraps</p></li>
+            <li><p>1/4 Tasse Hummus</p></li>
+            <li><p>Gemüse nach Wahl (z.B. Paprika, Gurke, Karotten)</p></li>
+            <li><p>Optional: Feta-Käse, Oliven</p></li>
+        </ul>
+        <h2>Zubereitung:</h2>
+        <ol>
+            <li><p>Wraps mit Hummus bestreichen.</p></li>
+            <li><p>Gemüse in Streifen schneiden und auf die Wraps legen.</p></li>
+            <li><p>Optional Feta-Käse und Oliven hinzufügen.</p></li>
+            <li><p>Wraps aufrollen und genießen.</p></li>
+        </ol>
+    </div>
+</main>
+\ No newline at end of file
diff --git a/rezepte/mittagessen/vollkorn_wraps_mit_hummus_und_gemuese/rezept.png b/rezepte/mittagessen/vollkorn_wraps_mit_hummus_und_gemuese/rezept.png
new file mode 100755
index 0000000..4cb1c8b
--- /dev/null
+++ b/rezepte/mittagessen/vollkorn_wraps_mit_hummus_und_gemuese/rezept.png
diff --git a/rezepte/snacks/avocado_dip_mit_tortilla_chips/index.html b/rezepte/snacks/avocado_dip_mit_tortilla_chips/index.html
new file mode 100755
index 0000000..96d91c6
--- /dev/null
+++ b/rezepte/snacks/avocado_dip_mit_tortilla_chips/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Avocado-Dip mit Tortilla-Chips</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Avocado-Dip mit Tortilla-Chips</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./rezept.png">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Zutaten:</h2>
+        <ul>
+            <li><p>2 reife Avocados</p></li>
+            <li><p>1/2 Zitrone (Saft)</p></li>
+            <li><p>1/4 Zwiebel (gehackt)</p></li>
+            <li><p>1 Knoblauchzehe (gehackt)</p></li>
+            <li><p>1/2 TL Chilipulver (optional)</p></li>
+            <li><p>Salz und Pfeffer</p></li>
+            <li><p>Tortilla-Chips</p></li>
+        </ul>
+        <h2>Zubereitung:</h2>
+        <ol>
+            <li><p>Avocados entkernen und das Fruchtfleisch mit einer Gabel zerdrücken.</p></li>
+            <li><p>Zitronensaft, Zwiebel, Knoblauch und Chilipulver hinzufügen und gut vermischen.</p></li>
+            <li><p>Mit Salz und Pfeffer abschmecken.</p></li>
+            <li><p>Mit Tortilla-Chips servieren.</p></li>
+        </ol>
+    </div>
+</main>
+\ No newline at end of file
diff --git a/rezepte/snacks/avocado_dip_mit_tortilla_chips/rezept.png b/rezepte/snacks/avocado_dip_mit_tortilla_chips/rezept.png
new file mode 100755
index 0000000..6b5bc33
--- /dev/null
+++ b/rezepte/snacks/avocado_dip_mit_tortilla_chips/rezept.png
diff --git a/rezepte/snacks/jogurt_mit_beeren_und_granola/index.html b/rezepte/snacks/jogurt_mit_beeren_und_granola/index.html
new file mode 100755
index 0000000..54ab2a5
--- /dev/null
+++ b/rezepte/snacks/jogurt_mit_beeren_und_granola/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Joghurt mit Beeren und Granola</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Joghurt mit Beeren und Granola</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./rezept.png">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Zutaten:</h2>
+        <ul>
+            <li><p>1 Becher Joghurt (Natur oder griechisch)</p></li>
+            <li><p>1/2 Tasse Beeren (frisch oder gefroren)</p></li>
+            <li><p>1/4 Tasse Granola</p></li>
+            <li><p>Optional: Honig oder Ahornsirup</p></li>
+        </ul>
+        <h2>Zubereitung:</h2>
+        <ol>
+            <li><p>Joghurt in ein Glas füllen.</p></li>
+            <li><p>Beeren und Granola darüber geben.</p></li>
+            <li><p>Optional mit Honig oder Ahornsirup beträufeln.</p></li>
+        </ol>
+    </div>
+</main>
+\ No newline at end of file
diff --git a/rezepte/snacks/jogurt_mit_beeren_und_granola/rezept.png b/rezepte/snacks/jogurt_mit_beeren_und_granola/rezept.png
new file mode 100755
index 0000000..85e5a8c
--- /dev/null
+++ b/rezepte/snacks/jogurt_mit_beeren_und_granola/rezept.png
diff --git a/rezepte/snacks/nuesse_und_samen/index.html b/rezepte/snacks/nuesse_und_samen/index.html
new file mode 100755
index 0000000..3707381
--- /dev/null
+++ b/rezepte/snacks/nuesse_und_samen/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nüsse und Samen</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Nüsse und Samen</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./rezept.png">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Zutaten:</h2>
+        <ul>
+            <li><p>Eine Handvoll Nüsse und Samen nach Wahl (z.B. Mandeln, Walnüsse, Sonnenblumenkerne, Kürbiskerne)</p></li>
+        </ul>
+        <h2>Zubereitung:</h2>
+        <ol>
+            <li><p>Nüsse und Samen mischen und genießen.</p></li>
+        </ol>
+    </div>
+</main>
+\ No newline at end of file
diff --git a/rezepte/snacks/nuesse_und_samen/rezept.png b/rezepte/snacks/nuesse_und_samen/rezept.png
new file mode 100755
index 0000000..0ef2647
--- /dev/null
+++ b/rezepte/snacks/nuesse_und_samen/rezept.png
diff --git a/rezepte/snacks/obst_und_gemuese_sticks_mit_hummus/index.html b/rezepte/snacks/obst_und_gemuese_sticks_mit_hummus/index.html
new file mode 100755
index 0000000..91d341d
--- /dev/null
+++ b/rezepte/snacks/obst_und_gemuese_sticks_mit_hummus/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Obst und Gemüse-Sticks mit Hummus</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Obst und Gemüse-Sticks mit Hummus</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./rezept.png">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Zutaten:</h2>
+        <ul>
+            <li><p>Verschiedene Obst- und Gemüsesorten (z.B. Karotten, Gurken, Paprika, Äpfel, Birnen)</p></li>
+            <li><p>1/4 Tasse Hummus</p></li>
+        </ul>
+        <h2>Zubereitung:</h2>
+        <ol>
+            <li><p>Obst und Gemüse in mundgerechte Stücke schneiden.</p></li>
+            <li><p>Mit Hummus servieren.</p></li>
+        </ol>
+    </div>
+</main>
+\ No newline at end of file
diff --git a/rezepte/snacks/obst_und_gemuese_sticks_mit_hummus/rezept.png b/rezepte/snacks/obst_und_gemuese_sticks_mit_hummus/rezept.png
new file mode 100755
index 0000000..87f526c
--- /dev/null
+++ b/rezepte/snacks/obst_und_gemuese_sticks_mit_hummus/rezept.png
diff --git a/shitsite/shit.html b/shitsite/shit.html
new file mode 100755
index 0000000..414d1fa
--- /dev/null
+++ b/shitsite/shit.html
@@ -0,0 +1,5 @@
+<div style="overflow: hidden; width: 500px; border: 1px solid red">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quae possimus esse, quo facere asperiores dignissimos dolorum, commodi ad laudantium beatae ullam qui distinctio omnis maiores saepe reprehenderit aliquid unde!
+	Sussy change to shitfile
+	emergency change
+</div>
diff --git a/style/avocado.jpg b/style/avocado.jpg
new file mode 100755
index 0000000..938bdc0
--- /dev/null
+++ b/style/avocado.jpg
diff --git a/style/avocado.png b/style/avocado.png
new file mode 100755
index 0000000..62149f5
--- /dev/null
+++ b/style/avocado.png
diff --git a/style/minecraft_carrot.cur b/style/minecraft_carrot.cur
new file mode 100755
index 0000000..90ac01f
--- /dev/null
+++ b/style/minecraft_carrot.cur
diff --git a/style/style.css b/style/style.css
new file mode 100755
index 0000000..1548237
--- /dev/null
+++ b/style/style.css
@@ -0,0 +1,164 @@
+:root {
+    font-family: monospace;
+    text-align: center;
+    --primary-color: wheat;
+    --secondary-color: saddlebrown;
+    --tertiary-color: limegreen;
+    --shadow-color: black;
+    /* cursor: url(./minecraft_carrot.cur), auto; */
+}
+body {
+    margin: 0px;
+    background-image: url('./avocado.jpg');
+    background-size: cover;
+    background-attachment: fixed;
+}
+
+/* styling special radio buttons */
+.special_radio input[type="radio"] {
+    opacity: 0;
+    position: fixed;
+    width: 0;
+}
+.special_radio input[type="radio"]:checked + label, 
+.special_radio input[type="radio"]:hover + label {
+    color: var(--secondary-color);
+    background-color: var(--primary-color);
+}
+/* end styling special radio buttons */
+
+main {
+    display: block;
+    margin: 10px 50px 10px 250px;
+}
+.big_box {
+    color: var(--primary-color);
+    background-color: var(--secondary-color);
+    border: 1px solid var(--primary-color);
+    border-radius: 30px;
+    overflow: hidden;
+    box-shadow: 0 0 30px var(--shadow-color);
+    padding: 10px;
+    box-sizing: border-box;
+}
+.medium_box {
+    color: var(--primary-color);
+    background-color: var(--secondary-color);
+    border: 1px solid var(--primary-color);
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 0 20px var(--shadow-color);
+    padding: 10px;
+    box-sizing: border-box;
+}
+.small_box {
+    color: inherit;
+    background-color: inherit;
+    border: 1px solid var(--primary-color);
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 0 10px var(--shadow-color);
+    padding: 10px;
+    box-sizing: border-box;
+}
+.color_inverse_on_hover:hover, .color_inverse_on_focus:focus {
+    color: var(--secondary-color) !important;
+    background-color: var(--primary-color) !important;
+}
+table {
+    border-collapse: collapse;
+    width: 100%;
+    border: 1px solid var(--primary-color);
+}
+td, th {
+    padding: 0;
+    border: 1px solid var(--primary-color);
+}
+.tertiary_color_style {
+    color: var(--secondary-color);
+    background-color: var(--tertiary-color);
+    border: 1px solid var(--tertiary-color);
+}
+a {
+    text-decoration: none;
+    color: var(--primary-color);
+}
+input {
+    appearance: none;               /* Standard property */
+    -webkit-appearance: none;       /* For WebKit browsers (Chrome, Safari, etc.) */
+    -moz-appearance: textfield;     /* Firefox */
+}
+nav {
+    color: var(--primary-color);
+    background-color: var(--secondary-color);
+    width: 190px;
+    position: fixed;
+    top: 0px;
+    overflow: auto;
+    /* height: calc(100% - 20px); */
+    margin: 10px;
+
+}
+nav a {
+    display: block;
+}
+nav ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+select {
+    text-align: center;
+}
+.flexbox {
+    display: flex;
+    justify-content: space-evenly;
+    gap: 10px;
+    padding: 0;
+}
+.hor_spacing .hor_spacing_item {
+    margin-bottom: 10px;
+}
+.hor_spacing .hor_spacing_item:last-child {
+    margin-bottom: 0;
+}
+/* button {
+    display: block;
+}
+button * {
+    margin: 0;
+}
+img {
+    width: 100%;
+} */
+.listenbox {
+    border: 1px solid var(--primary-color);
+    border-radius: 10px;
+    box-shadow: 0 0 10px var(--shadow-color);
+    overflow: hidden;
+}
+.listenbox .listenobjekt {
+    border: 0;
+    border-bottom: 1px solid var(--primary-color);
+    color: inherit;
+    background-color: inherit;
+    padding: 10px;
+}
+.listenbox .listenobjekt:last-child {
+    border-bottom: 0;
+}
+.marquee_box {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    position: relative;
+}
+.marquee_text {
+    display: inline-block;
+    /* padding-left: 100%; */
+    animation: marquee 5s linear infinite; /* Adjust timing as needed */
+}
+@keyframes marquee {
+    0%, 50% { transform: translateX(0); } /* Pause at start */
+    100% { transform: translateX(-50%); } /* Fully loops with second text */
+  }
+\ No newline at end of file
diff --git a/workouts/ausfallschritte_mit_sprung/index.html b/workouts/ausfallschritte_mit_sprung/index.html
new file mode 100755
index 0000000..cbf7676
--- /dev/null
+++ b/workouts/ausfallschritte_mit_sprung/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ausfallschritte mit Sprung</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Ausfallschritte mit Sprung</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./tim.gif" placeholder="tim.gif">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Beanspruchte Muskelgruppen:</h2>
+        <ul>
+            <li><p>Gesäß</p></li>
+            <li><p>Waden</p></li>
+            <li><p>Beinstrecker</p></li>
+        </ul>
+        <h2>Ausführung:</h2>
+        <ol>
+            <li><p>Ausfallschritt als Grundstellung</p></li>
+            <li><p>Explosiv nach oben springen</p></li>
+            <li><p>In der Luft die Beine wechseln</p></li>
+            <li><p>Lande auf den Vorderfüßen</p></li>
+        </ol>
+        <br>
+        <p>Wichtig: Die Knie dürfen den Boden nicht berühren.</p>
+    </div>
+</main>
+</body>
+</html>
diff --git a/workouts/ausfallschritte_mit_sprung/tim.gif b/workouts/ausfallschritte_mit_sprung/tim.gif
new file mode 100755
index 0000000..542b28d
--- /dev/null
+++ b/workouts/ausfallschritte_mit_sprung/tim.gif
diff --git a/workouts/breite_liegestuetze/index.html b/workouts/breite_liegestuetze/index.html
new file mode 100755
index 0000000..ffcc24d
--- /dev/null
+++ b/workouts/breite_liegestuetze/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Breite Liegestütze</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Breite Liegestütze</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./tim.gif" placeholder="tim.gif">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Beanspruchte Muskelgruppen:</h2>
+        <ul>
+            <li><p>Brust</p></li>
+            <li><p>vordere Schultermuskel</p></li>
+            <li><p>Trizeps</p></li>
+        </ul>
+        <h2>Ausführung:</h2>
+        <ol>
+            <li><p>Grundposition Liegestützstellung, aber Hände stehen bisschen mehr als Schulterbreit</p></li>
+            <li><p>Mit Spannung den Körper senken und ausatmen</p></li>
+            <li><p>Beim einatmen explosiv nach oben drücken</p></li>
+        </ol>         
+    </div>
+</main>
+</body>
+</html>
diff --git a/workouts/breite_liegestuetze/tim.gif b/workouts/breite_liegestuetze/tim.gif
new file mode 100755
index 0000000..2af0939
--- /dev/null
+++ b/workouts/breite_liegestuetze/tim.gif
diff --git a/workouts/burpees/index.html b/workouts/burpees/index.html
new file mode 100755
index 0000000..be175bc
--- /dev/null
+++ b/workouts/burpees/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Burpees</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Burpees</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./tim.gif" placeholder="tim.gif">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Beanspruchte Muskelgruppen:</h2>
+        <ul>
+            <li><p>Gesäß</p></li>
+            <li><p>Beine</p></li>
+            <li><p>Schultern</p></li>
+            <li><p>Rücken</p></li>
+            <li><p>Brust</p></li>
+            <li><p>Hüftbeuger</p></li>
+        </ul>
+        <h2>Ausführung:</h2>
+        <ol>
+            <li><p>Grundposition: Hüftbreit stehen, Zehen zeigen gerade nach vorn</p></li>
+            <li><p>Nun in die Hocke und stützt dich mit den Händen am Boden ab, danach springst du in die Liegestützstellung und machst einen Liegestütz</p></li>
+            <li><p>Nun springst du wieder in die Hockposition und springst danach explosionsartig nach oben</p></li>
+        </ol>
+    </div>
+</main>
+</body>
+</html>
diff --git a/workouts/burpees/tim.gif b/workouts/burpees/tim.gif
new file mode 100755
index 0000000..1969a48
--- /dev/null
+++ b/workouts/burpees/tim.gif
diff --git a/workouts/enge_liegestuetze/index.html b/workouts/enge_liegestuetze/index.html
new file mode 100755
index 0000000..4434f4b
--- /dev/null
+++ b/workouts/enge_liegestuetze/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Enge Liegestütze</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Enge Liegestütze</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./tim.gif" placeholder="tim.gif">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Beanspruchte Muskelgruppen:</h2>
+        <ul>
+            <li><p>Trizeps</p></li>
+            <li><p>vorderer Deltamuskel</p></li>
+            <li><p>großer Brustmuskel</p></li>
+        </ul>
+        <h2>Ausführung:</h2>
+        <ul>
+            <li><p>Grundposition: Liegestützstellung, Hände unter der Brust</p></li>
+            <li><p>Beim ausatmen den Körper mit Spannung senken und beim Einatmen explosionsartig rausdrücken</p></li>
+        </ul>
+    </div>
+</main>
+</body>
+</html>
diff --git a/workouts/enge_liegestuetze/tim.gif b/workouts/enge_liegestuetze/tim.gif
new file mode 100755
index 0000000..2e2c138
--- /dev/null
+++ b/workouts/enge_liegestuetze/tim.gif
diff --git a/workouts/high_knees/index.html b/workouts/high_knees/index.html
new file mode 100755
index 0000000..8b25e94
--- /dev/null
+++ b/workouts/high_knees/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>High Knees</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>High Knees</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./tim.gif">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)" placeholder="tim.gif">
+        <h2>Beanspruchte Muskelgruppen:</h2>
+        <ul>
+            <li><p>Beinmuskeln</p></li>
+            <li><p>Waden</p></li>
+            <li><p>Quadrizeps</p></li>
+            <li><p>Hamstrings</p></li>
+        </ul>
+        <h2>Ausführung:</h2>
+        <ol>
+            <li><p>Grundposition: Hüftbreiter Stand</p></li>
+            <li><p>Abwechselnd Kniee auf Hüfthöhe bewegen und wieder absetzen</p></li>
+            <li><p>Dabei sollte ein angemessenes Tempo gehalten werden</p></li>
+        </ol>
+    </div>
+</main>
+</body>
+</html>
diff --git a/workouts/high_knees/tim.gif b/workouts/high_knees/tim.gif
new file mode 100755
index 0000000..2d42680
--- /dev/null
+++ b/workouts/high_knees/tim.gif
diff --git a/workouts/index.html b/workouts/index.html
new file mode 100755
index 0000000..aadf057
--- /dev/null
+++ b/workouts/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Workouts</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Workouts</h1>
+    <div class="hor_spacing">
+
+        <div class="flexbox hor_spacing_item">
+            <a class="medium_box color_inverse_on_hover" style="height: 100%; flex: 1" href="./plank_to_shoulder_tap">
+                <h2>Plank to shoulder tap</h2>
+                <img class="small_box" style="padding: 0; width: 100%" src="./plank_to_shoulder_tap/tim.gif" placeholder="tim.gif">
+            </a>
+            <a class="medium_box color_inverse_on_hover" style="height: 100%; flex: 1" href="./ausfallschritte_mit_sprung">
+                <h2>Ausfallschritte mit Sprung</h2>
+                <img class="small_box" style="padding: 0; width: 100%" src="./ausfallschritte_mit_sprung/tim.gif" placeholder="tim.gif">
+            </a>
+            <a class="medium_box color_inverse_on_hover" style="height: 100%; flex: 1" href="./breite_liegestuetze">
+                <h2>Breite Liegestütze</h2>
+                <img class="small_box" style="padding: 0; width: 100%" src="./breite_liegestuetze/tim.gif" placeholder="tim.gif">
+            </a>
+            <a class="medium_box color_inverse_on_hover" style="height: 100%; flex: 1" href="./enge_liegestuetze">
+                <h2>Enge Liegestütze</h2>
+                <img class="small_box" style="padding: 0; width: 100%" src="./enge_liegestuetze/tim.gif" placeholder="tim.gif">
+            </a>
+        </div>
+
+        <div class="flexbox hor_spacing_item">
+            <a class="medium_box color_inverse_on_hover" style="height: 100%; flex: 1" href="./burpees">
+                <h2>Burpees</h2>
+                <img class="small_box" style="padding: 0; width: 100%" src="./burpees/tim.gif" placeholder="tim.gif">
+            </a>
+            <a class="medium_box color_inverse_on_hover" style="height: 100%; flex: 1" href="./high_knees">
+                <h2>High Knees</h2>
+                <img class="small_box" style="padding: 0; width: 100%" src="./high_knees/tim.gif" placeholder="tim.gif">
+            </a>
+            <a class="medium_box color_inverse_on_hover" style="height: 100%; flex: 1" href="./kniebeugesprung">
+                <h2>Kniebeugesprung</h2>
+                <img class="small_box" style="padding: 0; width: 100%" src="./kniebeugesprung/tim.gif" placeholder="tim.gif">
+            </a>
+            <a class="medium_box color_inverse_on_hover" style="height: 100%; flex: 1" href="./mountain_climbers">
+                <h2>Mountain Climbers</h2>
+                <img class="small_box" style="padding: 0; width: 100%" src="./mountain_climbers/tim.gif" placeholder="tim.gif">
+            </a>
+        </div>
+        <div class="flexbox hor_spacing_item">
+            <a class="medium_box color_inverse_on_hover" style="height: 100%; flex: 1" href="./plank_jacks">
+                <h2>Plank Jacks</h2>
+                <img class="small_box" style="padding: 0; width: 100%" src="./plank_jacks/tim.gif" placeholder="tim.gif">
+            </a>
+            <a class="medium_box color_inverse_on_hover" style="height: 100%; flex: 1" href="./plank_punches">
+                <h2>Plank Punches</h2>
+                <img class="small_box" style="padding: 0; width: 100%" src="./plank_punches/tim.gif" placeholder="tim.gif">
+            </a>
+            <a class="medium_box color_inverse_on_hover" style="height: 100%; flex: 1" href="./schattenboxen_jab">
+                <h2>Schattenboxen Jab</h2>
+                <img class="small_box" style="padding: 0; width: 100%" src="./schattenboxen_jab/tim.gif" placeholder="tim.gif">
+            </a>
+            <a class="medium_box color_inverse_on_hover" style="height: 100%; flex: 1" href="./schattemboxen_uppercut">
+                <h2 style="white-space: nowrap">Schattenboxen Uppercut</h2>
+                <img class="small_box" style="padding: 0; width: 100%" src="./schattenboxen_uppercut/tim.gif" placeholder="tim.gif">
+            </a>
+        </div>
+
+    </div>
+</main>
+</body>
+</html>
diff --git a/workouts/kniebeugesprung/index.html b/workouts/kniebeugesprung/index.html
new file mode 100755
index 0000000..4a2203c
--- /dev/null
+++ b/workouts/kniebeugesprung/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kniebeugesprung</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Kniebeugesprung</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./tim.gif" placeholder="tim.gif">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Beanspruchte Muskelgruppen:</h2>
+        <ul>
+            <li><p>Vierköpfiger Oberschenkelmuskel</p></li>
+            <li><p>Beinbizeps</p></li>
+            <li><p>großer Gesäßmuskel</p></li>
+            <li><p>Rückenstrecker</p></li>
+        </ul>
+        <h2>Ausführung:</h2>
+        <ol>
+            <li><p>Grundposition: Hüftbreiter Stand, Füße leicht nach außen gerichtet</p></li>
+            <li><p>In die Knie gehen der Po sollte unter Kniehöhe sein</p></li>
+            <li><p>Explosionsartig  rausdrücken</p></li>
+        </ol>
+    </div>
+</main>
+</body>
+</html>
diff --git a/workouts/kniebeugesprung/tim.gif b/workouts/kniebeugesprung/tim.gif
new file mode 100755
index 0000000..c5bf0d7
--- /dev/null
+++ b/workouts/kniebeugesprung/tim.gif
diff --git a/workouts/mountain_climbers/index.html b/workouts/mountain_climbers/index.html
new file mode 100755
index 0000000..00fac19
--- /dev/null
+++ b/workouts/mountain_climbers/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mountain Climbers</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Mountain Climbers</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./tim.gif" placeholder="tim.gif">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Beanspruchte Muskelgruppen:</h2>
+        <ul>
+            <li><p>Gerader Bauchmuskel</p></li>
+            <li><p>Beinbizeps</p></li>
+            <li><p>Quadrizeps</p></li>
+            <li><p>Gesäßmuskulatur</p></li>
+        </ul>
+        <h2>Ausführung:</h2>
+        <ol>
+            <li><p>Grundposition: Liegestützstellung, Hände befinden sich unter der Schulter, Füße hüftbreit</p></li>
+            <li><p>Nun in sprunghaften Bewegung abwechseln die Knie zur Körpermitte in Richtung der Ellenbogen ziehen</p></li>
+        </ol>
+    </div>
+</main>
+</body>
+</html>
diff --git a/workouts/mountain_climbers/tim.gif b/workouts/mountain_climbers/tim.gif
new file mode 100755
index 0000000..5e3e990
--- /dev/null
+++ b/workouts/mountain_climbers/tim.gif
diff --git a/workouts/plank_jacks/index.html b/workouts/plank_jacks/index.html
new file mode 100755
index 0000000..ace1765
--- /dev/null
+++ b/workouts/plank_jacks/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Plank Jacks</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Plank Jacks</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./tim.gif" placeholder="tim.gif">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Beanspruchte Muskelgruppen:</h2>
+        <ul>
+            <li><p>Rumpf</p></li>
+            <li><p>Bauch</p></li>
+            <li><p>Beine</p></li>
+            <li><p>Po</p></li>
+            <li><p>Rücken</p></li>
+            <li><p>Schultern</p></li>
+        </ul>
+        <h2>Ausführung:</h2>
+        <ol>
+            <li><p>Grundposition: Unterarmstütz. Beine voll durchstrecken.</p></li>
+            <li><p>Springe mit den Zehenspitzen ein kleines Stück von Boden ab und beweg beiden Beine nach außen und danach zurück</p></li>
+        </ol>
+    </div>
+</main>
+</body>
+</html>
diff --git a/workouts/plank_jacks/tim.gif b/workouts/plank_jacks/tim.gif
new file mode 100755
index 0000000..1514318
--- /dev/null
+++ b/workouts/plank_jacks/tim.gif
diff --git a/workouts/plank_punches/index.html b/workouts/plank_punches/index.html
new file mode 100755
index 0000000..afa8534
--- /dev/null
+++ b/workouts/plank_punches/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Plank Punches</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Plank Punches</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./tim.gif" placeholder="tim.gif">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Beanspruchte Muskelgruppen:</h2>
+        <ul>
+            <li><p>Rumpf</p></li>
+            <li><p>Bauch</p></li>
+            <li><p>Beine</p></li>
+            <li><p>Po</p></li>
+            <li><p>Rücken</p></li>
+            <li><p>Schultern</p></li>
+            <li><p>Arme</p></li>
+        </ul>
+        <h2>Ausführung:</h2>
+        <ol>
+            <li><p>Grundposition: Plankstellung</p></li>
+            <li><p>Nun streck abwechselnd deine Arme nach vorne und halte ihn für paar Sekunden, bevor du den Arm wechselst</p></li>
+        </ol>
+    </div>
+</main>
+</body>
+</html>
diff --git a/workouts/plank_punches/tim.gif b/workouts/plank_punches/tim.gif
new file mode 100755
index 0000000..104d9ed
--- /dev/null
+++ b/workouts/plank_punches/tim.gif
diff --git a/workouts/plank_to_shoulder_tap/index.html b/workouts/plank_to_shoulder_tap/index.html
new file mode 100755
index 0000000..e55d55d
--- /dev/null
+++ b/workouts/plank_to_shoulder_tap/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Plank to shoulder tap</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Plank to shoulder tap</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./tim.gif" placeholder="tim.gif">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Beanspruchte Muskelgruppen:</h2>
+        <ul>
+            <li><p>Bauch</p></li>
+            <li><p>Rücken</p></li>
+            <li><p>Brust</p></li>
+            <li><p>Trizeps</p></li>
+            <li><p>Beine</p></li>
+            <li><p>Schultern</p></li>
+        </ul>
+        <h2>Ausführung:</h2>
+        <ol>
+            <li><p>Grundposition: Liegestützstellung</p></li>
+            <li><p>Heb abwechselnd einen Arm zur gegenüberliegenden Schulter und tippe kurz mit der Handfläche drauf, bevor du die Hand wieder absetzt</p></li>
+        </ol>
+    </div>
+</main>
+</body>
+</html>
diff --git a/workouts/plank_to_shoulder_tap/tim.gif b/workouts/plank_to_shoulder_tap/tim.gif
new file mode 100755
index 0000000..113ddbe
--- /dev/null
+++ b/workouts/plank_to_shoulder_tap/tim.gif
diff --git a/workouts/schattenboxen_jab/index.html b/workouts/schattenboxen_jab/index.html
new file mode 100755
index 0000000..425bb9c
--- /dev/null
+++ b/workouts/schattenboxen_jab/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Schattenboxen Jab</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Schattenboxen Jab</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./tim.gif" placeholder="tim.gif" placeholder="tim.gif">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Beanspruchte Muskelgruppen:</h2>
+        <ul>
+            <li><p>Oberarme</p></li>
+            <li><p>Unterarme</p></li>
+            <li><p>Schultern</p></li>
+            <li><p>Beine</p></li>
+            <li><p>Brust</p></li>
+            <li><p>Rücken</p></li>
+            <li><p>Bauchmuskulatur</p></li>
+        </ul>
+        <h2>Ausführung:</h2>
+        <ol>
+            <li><p>Grundstellung Boxen</p></li>
+            <li><p>Ständiges Tippeln auf den Zehenspitzen</p></li>
+            <li><p>Abwechselnd Gerade Schläge aus der Hüfte</p></li>
+        </ol>
+    </div>
+</main>
+</body>
+</html>
diff --git a/workouts/schattenboxen_jab/tim.gif b/workouts/schattenboxen_jab/tim.gif
new file mode 100755
index 0000000..f2a77a1
--- /dev/null
+++ b/workouts/schattenboxen_jab/tim.gif
diff --git a/workouts/schattenboxen_uppercut/index.html b/workouts/schattenboxen_uppercut/index.html
new file mode 100755
index 0000000..77cda6f
--- /dev/null
+++ b/workouts/schattenboxen_uppercut/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Schattenboxen Uppercut</title>
+    <link rel="icon" type="image/x-icon" href="/style/avocado.png">
+    <link rel="stylesheet" type="text/css" href="/style/style.css">
+</head>
+<body>
+<nav class="medium_box">
+    <ul class="hor_spacing">
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/login">Login</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_rechner">Kalorien-rechner</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/kalorien_zaehler">Kalorien-zähler</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box color_inverse_on_hover" href="/rezepte">Rezepte</a>
+        </li>
+        <li class="hor_spacing_item">
+            <a class="small_box tertiary_color_style" href="/workouts">Workouts</a>
+        </li>
+    </ul>
+</nav>
+<main class="big_box">
+    <h1>Schattenboxen Uppercut</h1>
+    <img class="medium_box" style="width: 300px; padding: 0; float: left" src="./tim.gif">
+    <div class="medium_box" style="float: right; text-align: left; width: calc(100% - 310px)">
+        <h2>Beanspruchte Muskelgruppen:</h2>
+        <ul>
+            <li><p>Oberarme</p></li>
+            <li><p>Unterarme</p></li>
+            <li><p>Schultern</p></li>
+            <li><p>Beine</p></li>
+            <li><p>Brust</p></li>
+            <li><p>Rücken</p></li>
+            <li><p>Bauchmuskulatur</p></li>
+        </ul>
+        <h2>Ausführung:</h2>
+        <ol>
+            <li><p>Grundstellung Boxen</p></li>
+            <li><p>Ständiges Tippeln auf den Zehenspitzen</p></li>
+            <li><p>Abwechselnd Schläge von unten nach oben</p></li>
+        </ol>
+    </div>
+</main>
+</body>
+</html>
+\ No newline at end of file
diff --git a/workouts/schattenboxen_uppercut/tim.gif b/workouts/schattenboxen_uppercut/tim.gif
new file mode 100755
index 0000000..4db4d75
--- /dev/null
+++ b/workouts/schattenboxen_uppercut/tim.gif
author	stefan_gey <stfngy@proton.me>	2025-03-25 22:51:39 +0100
committer	stefan_gey <stfngy@proton.me>	2025-03-25 22:51:39 +0100
commit	f99b7701847efec51466d6a54f5f057cc6234d88 (patch)
tree	0fe595f297aa9d83a74f124b2c7a0cbd1e7ae6ab