add help and print page

2026-05-22 17:42:30 +02:00
parent faaa6b1f25
commit 70341b7bad
3 changed files with 48 additions and 2 deletions
--- a/hilfe/index.html
+++ b/hilfe/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Kartoffelsalat-Rechner | Hilfe</title>
+    <link rel="stylesheet" href="../style.css" />
+  </head>
+  <body>
+    <div class="window">
+      <div class="actionbar">
+        <a href="../">Zurück</a>
+      </div>
+      <div class="container">
+        <h1>Kartoffelsalat-Rechner</h1>
+        <p>
+          Herzlich Wilkommen bei unserem KKKK – dem
+          <b>K</b>rass-<b>K</b>ranken-<b>K</b>artoffelsalat-<b>K</b>alkulator!
+        </p>
+        <p>
+            Wir zeigen dir, wie du den besten Kartoffelsalat machst.</br>
+            Wähle dazu einfach aus unseren vielen Zutaten aus. Du kannst maximal zehn Mal eine Zutat hinzufügen. Jede Zutat hat dabei eine bestimmte Einstufung (z.B. Kartoffeln: 1x = 200g)</br>
+            Wenn dir das Rezept gefällt, das du gebaut hast, kannst du es mit der <i>Drucken-</i>Funktion deines Browsers drucken oder als PDF abspeichern. Dann kannst du es nachkochen und es dir schmecken lassen.
+        </p>
+        <p>Aber Achtung: Manchmal kommt <b>kein</b> Kartoffelsalat beim Zusammenbauen heraus. Kannst du alle versteckten kulinarischen Besonderheiten finden?</p>
+      </div>
+    </div>
+  </body>
+</html>
--- a/index.html
+++ b/index.html
@@ -22,6 +22,10 @@
          <button type="reset" @click="filter = ''">&times;</button>
        </template>
        </span>
+      <div class="help">
+        <a href="#" @click="window.print();">Drucken</a>
+        <a href="hilfe/">Hilfe</a>
+      </div>
      </div>
      <div class="grid">
        <h1>Kartoffelsalat-Rechner</h1>
--- a/style.css
+++ b/style.css
@@ -1,11 +1,15 @@
-:root {
-}
 body {
  font-family: sans-serif;
  margin: 0;
  background: radial-gradient(circle,rgba(105, 105, 105, 1) 0%, rgba(41, 41, 41, 1) 85%);
  color: white;
+  min-height: 100vh;
+  @media print {
+    color: black;
+    background: transparent;
+  }
 }
+
 .window {
  display: flex;
  flex-wrap: wrap;
@@ -40,6 +44,15 @@ body {
    @media print {
      display: none;
    }
+    .help {
+      margin-left: auto;
+      padding: .5rem;
+      display: flex;
+      column-gap: 1rem;
+    }
+  }
+  .container {
+    width: 100%;
  }
 }
 .title {