kobold-ai/wtc.waiswuaschd.de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add hand-drawn sketch favicon and PWA icons, align popup form labels above inputs, and compact shopping list typography

Browse Source
This commit is contained in:
kobold-ai
2026-10-15 21:57:58 +02:00
parent dd875d40ef
commit fef6956d62
11 changed files with 176 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/cookbook.html
+4 -4
View File
@@ -8,10 +8,10 @@
<meta name="theme-color" content="#1E4D3B">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="What To Cook?">
<link rel="apple-touch-icon" href="/static/icon-192.png">
<link rel="stylesheet" href="/static/cookbook.css?v=4.6.1">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📖</text></svg>">
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
<link rel="alternate icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/static/apple-touch-icon.png">
<link rel="stylesheet" href="/static/cookbook.css?v=4.6.5">
<style id="print-engine-styles">
/* Auf dem Bildschirm: Cover, Inhaltsverzeichnis und Seitenzahlen ausblenden */
@media screen {
app/templates/home.html
+4 -4
View File
@@ -8,10 +8,10 @@
<meta name="theme-color" content="#1E4D3B">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="What To Cook?">
<link rel="apple-touch-icon" href="/static/icon-192.png">
<link rel="stylesheet" href="/static/cookbook.css?v=4.6.1">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍽️</text></svg>">
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
<link rel="alternate icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/static/apple-touch-icon.png">
<link rel="stylesheet" href="/static/cookbook.css?v=4.6.5">
<style>
:root {
--font-hand: 'Caveat', cursive, sans-serif;
app/templates/login.html
+4 -1
View File
@@ -7,7 +7,10 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Lora:ital,wght@0,400;0,600;1,400&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/cookbook.css?v=4.0">
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
<link rel="alternate icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/static/apple-touch-icon.png">
<link rel="stylesheet" href="/static/cookbook.css?v=4.6.5">
<style>
body.login-body {
background-color: var(--creme, #faf6ee);
app/templates/shopping_list.html
+69 -39
View File
@@ -9,9 +9,10 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="What To Cook?">
<link rel="apple-touch-icon" href="/static/icon-192.png">
<link rel="stylesheet" href="/static/cookbook.css?v=4.6.4">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛒</text></svg>">
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
<link rel="alternate icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/static/apple-touch-icon.png">
<link rel="stylesheet" href="/static/cookbook.css?v=4.6.5">
<style>
:root {
--shop-green: var(--tannengruen, #1E4D3B);
@@ -74,49 +75,49 @@
max-width: 820px;
width: 100%;
margin: 0 auto;
padding: 16px 12px 100px 12px;
padding: 14px 12px 100px 12px;
}
/* Kategorie Sektionen */
/* Kategorie Sektionen (kompakter & dezenter) */
.shop-cat-section {
margin-bottom: 22px;
margin-bottom: 14px;
}
.shop-cat-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 10px;
margin-bottom: 8px;
padding: 4px 8px;
margin-bottom: 5px;
background: rgba(30, 77, 59, 0.08);
border-left: 4px solid var(--shop-green);
border-radius: 4px 8px 8px 4px;
border-left: 3.5px solid var(--shop-green);
border-radius: 4px 6px 6px 4px;
}
.shop-cat-title {
font-family: var(--font-hand, 'Caveat', cursive);
font-size: 1.45rem;
font-size: 1.15rem;
font-weight: 700;
color: var(--shop-green);
margin: 0;
display: flex;
align-items: center;
gap: 8px;
gap: 6px;
line-height: 1.1;
}
.shop-cat-count {
font-size: 0.82rem;
font-size: 0.74rem;
font-weight: 700;
color: rgba(34, 34, 34, 0.65);
background: rgba(255, 255, 255, 0.8);
padding: 2px 8px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.85);
padding: 1px 6px;
border-radius: 8px;
border: 1px solid rgba(34, 34, 34, 0.15);
}
/* Listen-Einträge: Volle Breite auf Mobile, klickbar zum Editieren */
/* Listen-Einträge: Kompakter, lesbar, volle Breite */
.shop-items-list {
display: flex;
flex-direction: column;
gap: 7px;
gap: 5px;
list-style: none;
padding: 0;
margin: 0;
@@ -125,12 +126,12 @@
.shop-item-row {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
gap: 10px;
padding: 7px 11px;
background: #FFFFFF;
border: 1.5px solid rgba(34, 34, 34, 0.16);
border-radius: 10px;
box-shadow: 2px 2px 0px rgba(30, 77, 59, 0.08);
border: 1.5px solid rgba(34, 34, 34, 0.15);
border-radius: 8px;
box-shadow: 1px 2px 0px rgba(30, 77, 59, 0.06);
transition: background-color 0.15s, opacity 0.15s, transform 0.12s;
position: relative;
}
@@ -158,9 +159,9 @@
height: 0;
}
.shop-custom-check {
width: 24px;
height: 24px;
border-radius: 6px;
width: 20px;
height: 20px;
border-radius: 5px;
border: 2px solid var(--shop-green);
background: #FFFFFF;
display: flex;
@@ -168,7 +169,7 @@
justify-content: center;
transition: all 0.15s ease;
color: transparent;
font-size: 1rem;
font-size: 0.85rem;
font-weight: 900;
}
.shop-item-row.is-checked .shop-custom-check {
@@ -184,17 +185,17 @@
cursor: pointer;
display: flex;
flex-direction: column;
gap: 3px;
gap: 2px;
}
.shop-item-title-row {
display: flex;
align-items: baseline;
gap: 8px;
gap: 7px;
flex-wrap: wrap;
word-break: break-word;
}
.shop-item-name {
font-size: 1.05rem;
font-size: 0.94rem;
font-weight: 600;
color: var(--shop-schwarz);
line-height: 1.25;
@@ -204,12 +205,12 @@
color: rgba(34, 34, 34, 0.5);
}
.shop-item-amount {
font-size: 0.95rem;
font-size: 0.84rem;
font-weight: 700;
color: var(--shop-green);
background: rgba(30, 77, 59, 0.1);
padding: 1px 7px;
border-radius: 6px;
padding: 1px 6px;
border-radius: 5px;
white-space: nowrap;
}
.shop-item-row.is-checked .shop-item-amount {
@@ -217,19 +218,19 @@
background: rgba(30, 77, 59, 0.05);
}
/* Badge nur noch für Notiz (Quelle wurde entfernt) */
/* Badge nur für persönliche Notiz */
.shop-item-badges {
display: flex;
align-items: center;
gap: 6px;
gap: 5px;
flex-wrap: wrap;
}
.shop-badge-note {
font-size: 0.78rem;
font-size: 0.74rem;
color: #7a5a00;
background: var(--shop-yellow);
border: 1px solid #d4c165;
padding: 1px 6px;
padding: 1px 5px;
border-radius: 4px;
display: inline-flex;
align-items: center;
@@ -241,10 +242,10 @@
flex-shrink: 0;
background: none;
border: none;
font-size: 1.15rem;
font-size: 1rem;
color: rgba(34, 34, 34, 0.35);
cursor: pointer;
padding: 8px;
padding: 5px 6px;
border-radius: 6px;
transition: all 0.15s;
display: flex;
@@ -257,6 +258,35 @@
background: rgba(217, 83, 79, 0.1);
}
/* Modal Form: Labels immer direkt über Input-Feld */
.modal-form-grid {
display: flex;
flex-direction: column;
gap: 12px;
}
.modal-form-grid > div {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.modal-form-grid .cb-label {
display: block;
font-family: var(--font-hand, 'Caveat', cursive);
font-size: 1.15rem;
font-weight: 700;
color: var(--shop-schwarz);
margin: 0 0 3px 0;
text-align: left;
}
.modal-form-grid .cb-input,
.modal-form-grid .cb-select {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
font-size: 0.95rem;
}
/* Floating Action Button (FAB '+') */
.cb-fab {
position: fixed;