This commit is contained in:
2025-06-09 22:36:46 +02:00
parent 3f4de2266c
commit 08477e6e1b
2 changed files with 21 additions and 16 deletions

View File

@@ -4,14 +4,9 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cookbook</title> <title>Cookbook</title>
<script src="index.js" defer></script>
<!-- San Francisco System Font --> <!-- Apple-Style: San Francisco Font und Styling -->
<style>
html {
font-family: -apple-system, BlinkMacSystemFont, "San Francisco",
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
</style>
</head> </head>
<body> <body>
<main class="container"> <main class="container">
@@ -19,16 +14,33 @@
<h1>Cookbook</h1> <h1>Cookbook</h1>
<div class="button-group"> <div class="button-group">
<button onclick="syncRecipes()">🔄 Sync Recipes</button> <button onclick="syncRecipes()">🔄 Sync Recipes</button>
<a href="/add" class="secondary-button"> Add Recipe</a> <a href="addRecipe/addRecipe.html" class="secondary-button"
> Add Recipe</a
>
<a
href="https://example.com/help"
class="secondary-button"
target="_blank"
rel="noopener noreferrer"
>❓ Help</a
>
</div> </div>
</header> </header>
<section id="recipes" class="recipes-list"></section> <section id="recipes" class="recipes-list">
<!-- Recipes will be dynamically loaded here -->
</section>
</main> </main>
</body> </body>
</html> </html>
<style> <style>
/* System Font */
html {
font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI",
Roboto, Helvetica, Arial, sans-serif;
}
/* Reset */ /* Reset */
* { * {
margin: 0; margin: 0;
@@ -47,7 +59,6 @@
min-height: 100vh; min-height: 100vh;
} }
/* Main container */
.container { .container {
width: 100%; width: 100%;
max-width: 800px; max-width: 800px;
@@ -57,7 +68,6 @@
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
} }
/* Header */
header { header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -71,7 +81,6 @@
font-weight: 600; font-weight: 600;
} }
/* Button group */
.button-group { .button-group {
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -93,7 +102,6 @@
text-align: center; text-align: center;
} }
/* Primary button */
button { button {
background-color: #007aff; background-color: #007aff;
color: #fff; color: #fff;
@@ -103,7 +111,6 @@
background-color: #005ecb; background-color: #005ecb;
} }
/* Secondary button (styled link) */
.secondary-button { .secondary-button {
background-color: #e5e5ea; background-color: #e5e5ea;
color: #1d1d1f; color: #1d1d1f;
@@ -113,14 +120,12 @@
background-color: #d1d1d6; background-color: #d1d1d6;
} }
/* Recipe list */
.recipes-list { .recipes-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
} }
/* Placeholder for recipe cards (can be enhanced later) */
.recipe-card { .recipe-card {
padding: 1rem; padding: 1rem;
border-radius: 16px; border-radius: 16px;

0
helpSite.md Normal file
View File