ella/kartoffelsalat-rechner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add help and print page

Browse Source
This commit is contained in:
Ella
2026-05-22 17:42:30 +02:00
parent faaa6b1f25
commit 70341b7bad
3 changed files with 48 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
hilfe/index.html Normal file
View File

@@ -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>

4
index.html
View File

@@ -22,6 +22,10 @@
<button type="reset" @click="filter = ''">&times;</button> <button type="reset" @click="filter = ''">&times;</button>
</template> </template>
</span> </span>
<div class="help">
<a href="#" @click="window.print();">Drucken</a>
<a href="hilfe/">Hilfe</a>
</div>
</div> </div>
<div class="grid"> <div class="grid">
<h1>Kartoffelsalat-Rechner</h1> <h1>Kartoffelsalat-Rechner</h1>

17
style.css
View File

@@ -1,11 +1,15 @@
:root {
}
body { body {
font-family: sans-serif; font-family: sans-serif;
margin: 0; margin: 0;
background: radial-gradient(circle,rgba(105, 105, 105, 1) 0%, rgba(41, 41, 41, 1) 85%); background: radial-gradient(circle,rgba(105, 105, 105, 1) 0%, rgba(41, 41, 41, 1) 85%);
color: white; color: white;
min-height: 100vh;
@media print {
color: black;
background: transparent;
}
} }
.window { .window {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -40,6 +44,15 @@ body {
@media print { @media print {
display: none; display: none;
} }
.help {
margin-left: auto;
padding: .5rem;
display: flex;
column-gap: 1rem;
}
}
.container {
width: 100%;
} }
} }
.title { .title {