-
Notifications
You must be signed in to change notification settings - Fork 30
Expand file tree
/
Copy pathindex.html
More file actions
262 lines (249 loc) · 13.5 KB
/
Copy pathindex.html
File metadata and controls
262 lines (249 loc) · 13.5 KB
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!doctype html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
/>
<title>輕鬆記帳 2.0</title>
<meta
name="description"
content="這是一個簡單、實用的網頁記帳程式，打開網頁，便可以開始記帳，且資料皆儲存於裝置上，不用擔心外流。本網頁使用了PWA技術，讓使用者在需要時，可將這個網頁像APP一樣安裝到裝置上。"
/>
<meta
name="keywords"
content="記帳, 網頁, PWA, 網頁程式, 漸進式網頁程式, 輕鬆記帳, 網頁記帳, 網頁帳本"
/>
<meta name="author" content="ADT109119" />
<link rel="manifest" href="/manifest.json" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<meta name="theme-color" content="#F5F5F3" />
<link rel="apple-touch-icon" sizes="192x192" href="icon/icon.png" />
<link rel="shortcut icon" href="icon/favicon.ico" />
<!-- 註：Tailwind 已改由 PostCSS 本地 build（src/css/tailwind.css →
@tailwind directives，build 時產出靜態 CSS），不再用 Play CDN
（runtime JIT，官方不建議上 production）。
Font Awesome / Google Fonts / QRCode.js / html5-qrcode 也已改由
本地 npm 打包（Vite build），離線可用，CDN tag 全部移除。 -->
<!-- 註：Google Identity Services (gsi) 與 Google API (gapi) 已改由
syncService.ensureGoogleSdk() 按需載入（批次 3）——原本這兩個
<script> 每次首屏都載入，但只有使用者點登入/同步/共用帳本才用得到。
現在首屏 0 個第三方 CDN 請求，Google SDK 登入時才注入。 -->
<link rel="stylesheet" href="src/css/main.css" />
</head>
<body class="font-display bg-wabi-bg text-wabi-text-primary">
<div id="app-container" class="relative min-h-screen w-full md:pl-64">
<!-- ===== 骨架畫面 (Skeleton Screen) — JS 載入完成前顯示 ===== -->
<div id="skeleton-screen" class="p-4 pb-24 md:pb-8 max-w-3xl mx-auto animate-pulse">
<!-- Header 骨架 -->
<div class="flex items-center justify-between mb-6">
<div class="h-8 w-40 rounded-lg skeleton-bg"></div>
<div class="h-8 w-8 rounded-full skeleton-bg"></div>
</div>
<!-- Balance Card 骨架 -->
<div class="bg-wabi-surface rounded-xl shadow-sm border border-wabi-border p-6 mb-8">
<div class="h-4 w-20 mx-auto rounded skeleton-bg"></div>
<div class="h-10 w-36 mx-auto mt-3 rounded skeleton-bg"></div>
<div class="flex justify-around pt-6 mt-4 border-t border-wabi-border">
<div class="text-center space-y-2">
<div class="h-3 w-12 mx-auto rounded skeleton-bg"></div>
<div class="h-6 w-20 mx-auto rounded skeleton-bg"></div>
</div>
<div class="text-center space-y-2">
<div class="h-3 w-12 mx-auto rounded skeleton-bg"></div>
<div class="h-6 w-20 mx-auto rounded skeleton-bg"></div>
</div>
</div>
</div>
<!-- Recent Records 骨架 -->
<div class="mb-12">
<div class="flex justify-between items-center mb-4">
<div class="h-5 w-20 rounded skeleton-bg"></div>
<div class="h-4 w-16 rounded skeleton-bg"></div>
</div>
<div class="space-y-2">
<!-- Record row x5 -->
<div class="flex items-center gap-4 bg-wabi-surface px-4 py-3 rounded-lg border border-wabi-border">
<div class="size-12 rounded-lg skeleton-bg shrink-0"></div>
<div class="flex-1 min-w-0 space-y-1.5">
<div class="h-4 w-28 rounded skeleton-bg"></div>
<div class="h-3 w-20 rounded skeleton-bg"></div>
</div>
<div class="h-5 w-16 rounded skeleton-bg"></div>
</div>
<div class="flex items-center gap-4 bg-wabi-surface px-4 py-3 rounded-lg border border-wabi-border">
<div class="size-12 rounded-lg skeleton-bg shrink-0"></div>
<div class="flex-1 min-w-0 space-y-1.5">
<div class="h-4 w-28 rounded skeleton-bg"></div>
<div class="h-3 w-20 rounded skeleton-bg"></div>
</div>
<div class="h-5 w-16 rounded skeleton-bg"></div>
</div>
<div class="flex items-center gap-4 bg-wabi-surface px-4 py-3 rounded-lg border border-wabi-border">
<div class="size-12 rounded-lg skeleton-bg shrink-0"></div>
<div class="flex-1 min-w-0 space-y-1.5">
<div class="h-4 w-28 rounded skeleton-bg"></div>
<div class="h-3 w-20 rounded skeleton-bg"></div>
</div>
<div class="h-5 w-16 rounded skeleton-bg"></div>
</div>
<div class="flex items-center gap-4 bg-wabi-surface px-4 py-3 rounded-lg border border-wabi-border">
<div class="size-12 rounded-lg skeleton-bg shrink-0"></div>
<div class="flex-1 min-w-0 space-y-1.5">
<div class="h-4 w-28 rounded skeleton-bg"></div>
<div class="h-3 w-20 rounded skeleton-bg"></div>
</div>
<div class="h-5 w-16 rounded skeleton-bg"></div>
</div>
<div class="flex items-center gap-4 bg-wabi-surface px-4 py-3 rounded-lg border border-wabi-border">
<div class="size-12 rounded-lg skeleton-bg shrink-0"></div>
<div class="flex-1 min-w-0 space-y-1.5">
<div class="h-4 w-28 rounded skeleton-bg"></div>
<div class="h-3 w-20 rounded skeleton-bg"></div>
</div>
<div class="h-5 w-16 rounded skeleton-bg"></div>
</div>
</div>
</div>
<!-- Footer 骨架 -->
<div class="pt-8 border-t border-wabi-border/50 text-center">
<div class="flex justify-center gap-3 mb-2">
<div class="h-3 w-16 rounded skeleton-bg"></div>
<div class="h-3 w-16 rounded skeleton-bg"></div>
</div>
<div class="h-3 w-48 mx-auto rounded skeleton-bg"></div>
</div>
</div>
<!-- Pages will be injected here by JS -->
</div>
<!-- Bottom Navigation Bar -->
<nav
id="bottom-nav"
class="fixed bottom-0 left-0 right-0 bg-wabi-surface/95 backdrop-blur-md border-t border-wabi-border h-20 z-40 flex justify-around items-center md:top-0 md:w-64 md:h-screen md:flex-col md:justify-start md:border-t-0 md:border-r md:pt-8 md:items-stretch md:overflow-y-auto"
>
<div class="hidden md:flex items-center justify-center mb-4 px-4">
<img
src="icon/icon.png"
alt="輕鬆記帳"
class="w-8 h-8 mr-2 rounded-lg shadow-sm"
/>
<h1 class="text-xl font-bold text-wabi-primary">
輕鬆記帳 2.0
</h1>
</div>
<!-- 帳本切換器（桌面版側邊欄） -->
<div class="hidden md:block px-4 mb-4">
<button
id="sidebar-ledger-switcher"
class="w-full flex items-center gap-2.5 px-3 py-2.5 bg-wabi-primary/5 hover:bg-wabi-primary/10 rounded-xl border border-wabi-border transition-colors group"
>
<div
id="sidebar-ledger-icon"
class="flex items-center justify-center rounded-lg text-white shrink-0 size-8 text-xs"
style="background-color: #334a52"
>
<i class="fa-solid fa-book"></i>
</div>
<span
id="sidebar-ledger-name"
class="text-sm font-medium text-wabi-text-primary truncate flex-1 text-left"
>預設帳本</span
>
<i
class="fa-solid fa-chevron-down text-xs text-wabi-text-secondary group-hover:text-wabi-primary transition-colors"
></i>
</button>
</div>
<a
href="#home"
data-page="home"
class="nav-item flex flex-col items-center justify-center text-wabi-text-secondary w-full h-full md:flex-row md:justify-start md:items-center md:h-auto md:py-4 md:px-8 hover:bg-black/5"
>
<i class="fa-solid fa-house text-xl md:w-6 md:text-center"></i>
<span
class="text-xs mt-1 md:mt-0 md:ml-4 md:text-base font-medium"
>首頁</span
>
</a>
<a
href="#records"
data-page="records"
class="nav-item flex flex-col items-center justify-center text-wabi-text-secondary w-full h-full md:flex-row md:justify-start md:items-center md:h-auto md:py-4 md:px-8 hover:bg-black/5"
>
<i
class="fa-solid fa-list-ul text-xl md:w-6 md:text-center"
></i>
<span
class="text-xs mt-1 md:mt-0 md:ml-4 md:text-base font-medium"
>明細</span
>
</a>
<a
href="#add"
data-page="add"
class="nav-item flex flex-col items-center justify-center text-wabi-text-secondary w-full h-full md:flex-row md:justify-start md:items-center md:h-auto md:py-3 md:px-8 md:my-2 hover:bg-black/5"
>
<div
class="flex items-center justify-center w-14 h-14 rounded-full bg-wabi-accent text-wabi-primary shadow-lg -mt-8 md:mt-0 md:w-full md:h-12 md:rounded-xl md:shadow-md"
>
<i id="nav-add-icon" class="fa-solid fa-plus text-2xl md:text-xl"></i>
<span class="hidden md:inline ml-2 font-bold text-base"
>新增紀錄</span
>
</div>
</a>
<a
href="#stats"
data-page="stats"
class="nav-item flex flex-col items-center justify-center text-wabi-text-secondary w-full h-full md:flex-row md:justify-start md:items-center md:h-auto md:py-4 md:px-8 hover:bg-black/5"
>
<i
class="fa-solid fa-chart-pie text-xl md:w-6 md:text-center"
></i>
<span
class="text-xs mt-1 md:mt-0 md:ml-4 md:text-base font-medium"
>統計</span
>
</a>
<a
href="#settings"
data-page="settings"
class="nav-item flex flex-col items-center justify-center text-wabi-text-secondary w-full h-full md:flex-row md:justify-start md:items-center md:h-auto md:py-4 md:px-8 hover:bg-black/5"
>
<i class="fa-solid fa-gear text-xl md:w-6 md:text-center"></i>
<span
class="text-xs mt-1 md:mt-0 md:ml-4 md:text-base font-medium"
>設定</span
>
</a>
<div
class="hidden md:flex mt-auto pb-4 pt-8 px-8 flex-col text-wabi-text-secondary text-xs opacity-70"
>
<span id="sidebar-version-info" class="cursor-default"
>版本讀取中...</span
>
<div class="mt-1.5 flex flex-wrap gap-x-2 gap-y-1">
<a href="#privacy" class="hover:underline">隱私權政策</a>
<span>•</span>
<a href="#license" class="hover:underline">授權條款</a>
</div>
<span class="mt-1.5 cursor-default"
>© 2025 The walking fish 步行魚</span
>
</div>
</nav>
<!-- Toast Notification -->
<div
id="toast"
class="fixed top-5 left-1/2 -translate-x-1/2 bg-wabi-primary text-white px-6 py-3 rounded-lg shadow-lg opacity-0 transition-all duration-300 z-50"
>
<span id="toast-message"></span>
</div>
<script type="module" src="src/js/main.js"></script>
</body>
</html>