blob: 88d8561192cdbd02f0a96cc935d37cc5244ac9ba (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>{{.StoreName}} - Shopping</title>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
<link rel="stylesheet" href="/static/css/output.css">
<script src="/static/js/htmx.min.js"></script>
<style>
body {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
min-height: 100vh;
margin: 0;
padding: 0;
}
.item-row {
transition: all 0.2s ease;
}
.item-row:active {
transform: scale(0.98);
background: rgba(255,255,255,0.15);
}
.item-checked {
opacity: 0.5;
}
.item-checked .item-name {
text-decoration: line-through;
color: rgba(255,255,255,0.4);
}
.store-switcher {
scrollbar-width: none;
-ms-overflow-style: none;
}
.store-switcher::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body class="text-white">
<!-- Header -->
<header class="sticky top-0 z-50 bg-black/40 backdrop-blur-lg border-b border-white/10">
<div class="flex items-center justify-between px-4 py-3">
<a href="/?tab=shopping" class="text-white/70 hover:text-white p-2 -ml-2">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</a>
<h1 class="text-lg font-semibold">{{.StoreName}}</h1>
<div class="w-10"></div>
</div>
<!-- Store Switcher -->
{{if gt (len .StoreNames) 1}}
<div class="store-switcher flex gap-2 px-4 pb-3 overflow-x-auto">
{{range .StoreNames}}
<a href="/shopping/mode/{{.}}"
class="px-3 py-1.5 rounded-full text-sm whitespace-nowrap transition-colors
{{if eq . $.StoreName}}bg-white/20 text-white{{else}}bg-white/5 text-white/60 hover:bg-white/10{{end}}">
{{.}}
</a>
{{end}}
</div>
{{end}}
</header>
<!-- Items List -->
<main class="p-4" id="shopping-items">
{{template "shopping-mode-items" .}}
</main>
<!-- Quick Add Form (Fixed at Bottom) -->
<div class="fixed bottom-0 left-0 right-0 bg-black/60 backdrop-blur-lg border-t border-white/10 p-4">
<form hx-post="/shopping/add"
hx-target="#shopping-items"
hx-swap="innerHTML"
hx-on::after-request="if(event.detail.successful) this.reset();"
class="flex gap-2">
<input type="hidden" name="store" value="{{.StoreName}}">
<input type="hidden" name="mode" value="shopping-mode">
<input type="text" name="name" placeholder="Add item..."
class="flex-1 bg-white/10 border border-white/20 rounded-lg px-4 py-3 text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-white/30"
required autocomplete="off">
<button type="submit" class="bg-white/20 hover:bg-white/30 text-white px-5 py-3 rounded-lg font-medium transition-colors">
Add
</button>
</form>
</div>
<!-- Spacer for fixed bottom form -->
<div class="h-24"></div>
</body>
</html>
|
