Add hand-drawn sketch favicon and PWA icons, align popup form labels above inputs, and compact shopping list typography
This commit is contained in:
@@ -242,6 +242,13 @@ def get_service_worker():
|
||||
return FileResponse(sw_path, media_type="application/javascript", headers={"Service-Worker-Allowed": "/"})
|
||||
raise HTTPException(status_code=404, detail="Service worker not found")
|
||||
|
||||
@app.get("/favicon.ico")
|
||||
def get_favicon():
|
||||
ico_path = os.path.join(STATIC_DIR, "favicon.ico")
|
||||
if os.path.exists(ico_path):
|
||||
return FileResponse(ico_path, media_type="image/x-icon")
|
||||
raise HTTPException(status_code=404, detail="Favicon not found")
|
||||
|
||||
|
||||
# ==========================================
|
||||
# AUTH VIEWS
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
@@ -0,0 +1,82 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="100%" height="100%">
|
||||
<defs>
|
||||
<filter id="sketch-shadow" x="-8%" y="-8%" width="120%" height="120%">
|
||||
<feDropShadow dx="3" dy="5" stdDeviation="6" flood-color="#1e4d3b" flood-opacity="0.18"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background: Warm Cream Rounded Sketch Card -->
|
||||
<rect x="24" y="24" width="464" height="464" rx="105" ry="105" fill="#FAF6F0" filter="url(#sketch-shadow)"/>
|
||||
|
||||
<!-- Outer Hand-drawn Sketch Border (Double Organic Ring) -->
|
||||
<rect x="36" y="36" width="440" height="440" rx="95" ry="95" fill="none" stroke="#1E4D3B" stroke-width="7" stroke-dasharray="1200" stroke-linecap="round"/>
|
||||
<rect x="44" y="44" width="424" height="424" rx="88" ry="88" fill="none" stroke="#1E4D3B" stroke-width="2.5" stroke-opacity="0.45" stroke-linecap="round"/>
|
||||
|
||||
<!-- Sketch Doodles / Sparkles -->
|
||||
<!-- Top Right Sparkle -->
|
||||
<path d="M 405 105 L 405 135 M 390 120 L 420 120" stroke="#D4A338" stroke-width="4.5" stroke-linecap="round"/>
|
||||
<!-- Top Left Sparkle -->
|
||||
<path d="M 105 135 L 105 155 M 95 145 L 115 145" stroke="#D98A72" stroke-width="3.5" stroke-linecap="round"/>
|
||||
|
||||
<!-- Rising Steam Swirls (Playful Hand-drawn Lines) -->
|
||||
<path d="M 215 185 C 205 150 230 135 220 100" fill="none" stroke="#D4A338" stroke-width="6" stroke-linecap="round"/>
|
||||
<path d="M 256 180 C 265 145 245 130 260 90" fill="none" stroke="#1E4D3B" stroke-width="6.5" stroke-linecap="round"/>
|
||||
<path d="M 295 185 C 310 155 285 135 305 105" fill="none" stroke="#D98A72" stroke-width="5.5" stroke-linecap="round"/>
|
||||
|
||||
<!-- Sketched Crossed Wooden Spoon & Fork behind pot -->
|
||||
<!-- Spoon (Diagonal Top-Left to Bottom-Right) -->
|
||||
<g stroke="#1E4D3B" stroke-linecap="round" stroke-linejoin="round">
|
||||
<!-- Spoon Handle -->
|
||||
<path d="M 145 125 L 345 375" stroke="#1E4D3B" stroke-width="9" stroke-linecap="round"/>
|
||||
<!-- Spoon Bowl -->
|
||||
<ellipse cx="135" cy="115" rx="26" ry="34" transform="rotate(-40 135 115)" fill="#F5EFE0" stroke="#1E4D3B" stroke-width="7"/>
|
||||
<!-- Spoon inner accent -->
|
||||
<ellipse cx="135" cy="115" rx="14" ry="20" transform="rotate(-40 135 115)" fill="none" stroke="#D4A338" stroke-width="3"/>
|
||||
|
||||
<!-- Fork (Diagonal Top-Right to Bottom-Left) -->
|
||||
<path d="M 365 125 L 165 375" stroke="#1E4D3B" stroke-width="9" stroke-linecap="round"/>
|
||||
<!-- Fork Head & Prongs -->
|
||||
<path d="M 365 125 L 395 90 M 355 135 L 380 98 M 375 115 L 410 82" stroke="#1E4D3B" stroke-width="6" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<!-- Cooking Pot Body & Lid -->
|
||||
<g filter="url(#sketch-shadow)">
|
||||
<!-- Pot Body Fill & Outline -->
|
||||
<path d="M 150 250 L 165 390 C 170 425 210 435 256 435 C 302 435 342 425 347 390 L 362 250 Z"
|
||||
fill="#1E4D3B" stroke="#1E4D3B" stroke-width="7" stroke-linejoin="round"/>
|
||||
|
||||
<!-- Pot Body Inner Highlight / Paper Wash Accent -->
|
||||
<path d="M 165 260 L 176 385 C 180 410 215 420 256 420 C 297 420 332 410 336 385 L 347 260 Z"
|
||||
fill="#27614B"/>
|
||||
|
||||
<!-- Sketch Hatching Lines on Pot for Hand-drawn Look -->
|
||||
<path d="M 185 285 L 215 410" stroke="#FAF6F0" stroke-width="3.5" stroke-linecap="round" opacity="0.35"/>
|
||||
<path d="M 205 285 L 230 415" stroke="#FAF6F0" stroke-width="2.5" stroke-linecap="round" opacity="0.3"/>
|
||||
|
||||
<!-- Pot Accent Stripe -->
|
||||
<path d="M 158 320 Q 256 345 354 320" fill="none" stroke="#D4A338" stroke-width="4.5" stroke-linecap="round"/>
|
||||
|
||||
<!-- Left Pot Handle -->
|
||||
<path d="M 152 275 C 115 275 115 320 155 320" fill="none" stroke="#1E4D3B" stroke-width="8" stroke-linecap="round"/>
|
||||
<path d="M 152 280 C 125 280 125 315 155 315" fill="none" stroke="#FAF6F0" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||||
|
||||
<!-- Right Pot Handle -->
|
||||
<path d="M 360 275 C 397 275 397 320 357 320" fill="none" stroke="#1E4D3B" stroke-width="8" stroke-linecap="round"/>
|
||||
<path d="M 360 280 C 387 280 387 315 357 315" fill="none" stroke="#FAF6F0" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
|
||||
|
||||
<!-- Pot Rim -->
|
||||
<ellipse cx="256" cy="250" rx="108" ry="19" fill="#2E7057" stroke="#1E4D3B" stroke-width="7"/>
|
||||
|
||||
<!-- Tilted Pot Lid with Cute Sketch Handle -->
|
||||
<!-- Lid Knob -->
|
||||
<ellipse cx="256" cy="200" rx="16" ry="12" fill="#D4A338" stroke="#1E4D3B" stroke-width="5"/>
|
||||
<path d="M 256 212 L 256 220" stroke="#1E4D3B" stroke-width="7" stroke-linecap="round"/>
|
||||
<!-- Lid Base -->
|
||||
<path d="M 156 240 Q 256 210 356 240 Q 256 254 156 240 Z" fill="#FAF6F0" stroke="#1E4D3B" stroke-width="6.5" stroke-linejoin="round"/>
|
||||
<!-- Lid Accent Line -->
|
||||
<path d="M 180 234 Q 256 218 332 234" fill="none" stroke="#D98A72" stroke-width="3" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<!-- Little Cheerful Heart / Chef Touch on Pot Center -->
|
||||
<path d="M 256 360 C 256 360 240 345 240 334 C 240 326 247 320 256 327 C 265 320 272 326 272 334 C 272 345 256 360 256 360 Z" fill="#D98A72" stroke="#FAF6F0" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 9.2 KiB |
+6
-3
@@ -1,13 +1,16 @@
|
||||
// What To Cook? - PWA Service Worker (v1.0.0)
|
||||
const CACHE_NAME = 'wtc-cache-v1';
|
||||
// What To Cook? - PWA Service Worker (v1.1.0)
|
||||
const CACHE_NAME = 'wtc-cache-v2';
|
||||
const PRECACHE_URLS = [
|
||||
'/',
|
||||
'/cookbook',
|
||||
'/shopping-list',
|
||||
'/manifest.json',
|
||||
'/favicon.ico',
|
||||
'/static/favicon.svg',
|
||||
'/static/cookbook.css',
|
||||
'/static/icon-192.png',
|
||||
'/static/icon-512.png'
|
||||
'/static/icon-512.png',
|
||||
'/static/apple-touch-icon.png'
|
||||
];
|
||||
|
||||
// Install: Pre-cache shell assets
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user