-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathguide.html
More file actions
416 lines (393 loc) · 34.2 KB
/
Copy pathguide.html
File metadata and controls
416 lines (393 loc) · 34.2 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
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arctic Trucking Cat Guide · Arctic Time Trucking Co.</title>
<meta name="description" content="Learn the lore, onboarding steps, features, and pro tips behind Pringles' Arctic Time Trucking Co.">
<link rel="canonical" href="https://www.arctictime.de/guide.html" />
<link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" href="favicon.png" type="image/png" sizes="256x256">
<link rel="apple-touch-icon" href="assets/icon-192.png" sizes="192x192">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#d97706">
<link href="tailwind.css" rel="stylesheet">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "TechArticle",
"headline": "Arctic Trucking Cat Guide",
"description": "Your purr-fect guide to mastering arctic time tracking and route management",
"author": {
"@type": "Organization",
"name": "Arctic Time Trucking Co."
}
}
</script>
<style>
.sidebar-transition { transition: transform 0.3s ease-in-out; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #fef3c7; }
::-webkit-scrollbar-thumb { background: #d97706; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #b45309; }
</style>
</head>
<body class="min-h-screen bg-gradient-to-b from-orange-50 via-amber-50 to-amber-100">
<div class="min-h-screen flex flex-col">
<div class="flex flex-1">
<!-- Sidebar -->
<div id="sidebar" class="fixed top-0 left-0 h-full bg-gradient-to-b from-amber-800 to-amber-900 text-white w-64 p-4 z-40 transform -translate-x-full md:translate-x-0 sidebar-transition">
<div class="flex justify-between items-center mb-4">
<h1 class="text-lg font-bold text-amber-200">Arctic Time Co.</h1>
<button id="close-sidebar-btn" class="md:hidden text-amber-300 hover:text-white">
<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="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<div class="flex flex-col h-[calc(100%-4rem)]">
<!-- Cat Info -->
<div class="px-4 pt-4 pb-2 text-center">
<div class="relative w-24 h-24 mx-auto mb-3">
<img src="assets/1-pringles-ice-road-specialist.jpg" alt="Current Cat Trucker" class="w-full h-full object-cover rounded-full border-4 border-amber-400 shadow-lg" />
</div>
<p class="text-xs text-amber-300 italic bg-black/20 rounded-md px-2 py-1">"Time waits for no cat, especially when they're upside down in a truck cab during a blizzard."</p>
<p class="text-xs text-amber-400 mt-1">- Pringles, Founder & Chief Grumpy Officer</p>
</div>
<!-- Navigation -->
<nav class="flex-1 px-4 mt-4 space-y-1">
<a href="guide.html" class="group flex items-center justify-between px-3 py-2 text-sm font-medium rounded-md bg-amber-900 text-white">
<div class="flex items-center">
<svg class="h-5 w-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
<span>Guide</span>
</div>
</a>
<a href="imprint.html" class="group flex items-center justify-between px-3 py-2 text-sm font-medium rounded-md text-amber-300 hover:bg-amber-700 hover:text-white">
<div class="flex items-center">
<svg class="h-5 w-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>Imprint</span>
</div>
</a>
<a href="privacy.html" class="group flex items-center justify-between px-3 py-2 text-sm font-medium rounded-md text-amber-300 hover:bg-amber-700 hover:text-white">
<div class="flex items-center">
<svg class="h-5 w-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
<span>Privacy</span>
</div>
</a>
</nav>
<!-- App Link -->
<div class="mt-auto px-2 pb-2">
<a href="app.html" class="block w-full px-3 py-2 text-center text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 rounded-lg transition-colors shadow-md">
Enter Dispatch Center
</a>
</div>
</div>
</div>
<!-- Main Content -->
<div class="md:pl-64 flex flex-col flex-1">
<!-- Mobile Header -->
<div class="sticky top-0 z-20 flex items-center justify-between p-4 md:hidden bg-amber-800 text-white shadow-md">
<div class="flex items-center gap-3">
<button id="mobile-menu-btn" class="text-amber-200 hover:text-white focus:outline-none">
<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="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
<h1 class="text-lg font-bold text-white">Arctic Time Co.</h1>
</div>
<a href="app.html" class="text-sm bg-amber-600 hover:bg-amber-700 px-3 py-1 rounded-lg transition-colors">Enter App</a>
</div>
<!-- Mobile Sidebar Overlay -->
<div id="mobile-sidebar-overlay" class="fixed inset-0 bg-black/50 z-30 hidden md:hidden"></div>
<!-- Page Content -->
<main class="relative z-10 py-6 px-4 sm:px-6 md:px-8 flex-1 overflow-x-hidden">
<div class="max-w-7xl mx-auto min-w-0 w-full">
<div class="bg-white/80 backdrop-blur-sm rounded-xl shadow-xl p-4 sm:p-6 border border-amber-100 overflow-x-hidden">
<!-- GUIDE CONTENT -->
<div class="space-y-10">
<div class="space-y-4 text-center md:text-left mx-auto max-w-3xl">
<div class="flex items-center justify-center md:justify-start gap-3 text-amber-700 font-semibold tracking-wide">
<span class="text-2xl">🐱</span>
<span>Arctic Time Co.</span>
<span class="text-2xl">🚛</span>
</div>
<h1 class="text-4xl font-bold text-amber-900">Arctic Trucking Cat Guide</h1>
<p class="text-amber-700 text-lg">Your purr-fect guide to mastering arctic time tracking and route management</p>
</div>
<div class="relative space-y-8">
<!-- STORY SECTION -->
<section id="story" class="space-y-8 scroll-mt-20">
<div class="bg-gradient-to-br from-amber-50 to-orange-50 border border-amber-200 rounded-2xl p-4 shadow-lg space-y-8">
<div>
<h2 class="text-2xl font-bold text-amber-900 flex items-center gap-2">📜 Pringles' Arctic Time Trucking Co.</h2>
<h3 class="text-lg font-semibold text-amber-800 mt-4">How It All Began</h3>
</div>
<div class="grid md:grid-cols-2 gap-8 items-center">
<div class="space-y-4 text-amber-700">
<p>Pringles wasn't always a grumpy trucker. In his kittenhood, he dreamed of Olympic gold in gymnastics. His backflips were the stuff of legend, but he had one tiny flaw: he couldn't help but make a little 'purr-thump' sound every time he landed. The judges, sticklers for rules, said that was a no-no.</p>
<p>But Pringles is a "never-stick-your-head-too-deep-into-the-litter-box" kind of cat. He left sports behind and found a new calling on the open ice roads—a way to support himself and, most importantly, ensure a never-ending supply of his favorite 'Party Mix' treats.</p>
<p>Life was good, full of trucking, naps, and friends. The only problem? Keeping track of it all was harder than finding a good cardboard box. So, he built this app to manage his deliveries and maximize his nap time.</p>
</div>
<div class="space-y-4 text-amber-700">
<h3 class="text-lg font-semibold text-amber-900 flex items-center gap-2">🌌 The Aurora Addition</h3>
<p class="text-amber-700 mt-2">Soon, Aurora joined the team - a mathematical genius cat with purple flair who loves ABBA and calculating the most efficient routes through mountain passes. Together, they've built a trucking empire that spans the entire arctic!</p>
</div>
<div class="relative md:col-span-2">
<img
src="assets/arctic_diner.jpg"
alt="The legendary meeting where the routes were first charted... over Party Mix."
class="rounded-2xl shadow-xl border-4 border-amber-100 w-full object-cover max-h-96"
/>
<p class="text-center text-xs italic text-amber-700 mt-2 bg-amber-100/70 px-3 py-2 rounded-lg">
The legendary meeting where the routes were first charted... over Party Mix.
</p>
</div>
</div>
<div class="bg-white/80 border border-amber-200 rounded-2xl p-6 shadow">
<div class="flex flex-col sm:flex-row gap-4 items-center">
<img src="assets/1-pringles-ice-road-specialist.jpg"
alt="Pringles"
class="w-20 h-20 rounded-full object-cover border-4 border-amber-200" />
<div>
<p class="text-amber-800 italic">"Time waits for no cat, especially when they're upside down in a truck cab during a blizzard. That's why I made this app - so every cat can track their arctic deliveries without missing their scheduled naps."</p>
<p class="text-amber-600 text-sm mt-2">- Pringles, Founder & Chief Grumpy Officer</p>
</div>
</div>
</div>
</div>
</section>
<!-- GETTING STARTED SECTION -->
<section id="getting-started" class="space-y-8 scroll-mt-20">
<div class="bg-gradient-to-br from-amber-50 to-orange-50 border border-amber-200 rounded-2xl p-4 shadow-lg">
<h2 class="text-2xl font-bold text-amber-900 flex items-center gap-2">🚀 Welcome to the Crew, New Cat!</h2>
<div class="mt-6 space-y-6">
<!-- Step 1 -->
<div class="flex gap-4 bg-white/80 border border-amber-200 rounded-xl p-2 shadow-sm">
<div class="w-10 h-10 rounded-full bg-amber-600 text-white flex items-center justify-center font-bold flex-shrink-0">1</div>
<div>
<h3 class="font-semibold text-amber-900">Create Your Cat Trucker Profile</h3>
<p class="text-amber-700 text-sm mt-1">Choose your name, nickname, specialty (ice roads, mountain passes, etc.), and your purrfect profile picture. All this info stays on your device, not on a server!</p>
<p class="text-xs text-gray-600 mt-2 p-2 bg-gray-50 border border-gray-200 rounded-md">
<span class="font-semibold">Human‑speak: </span>User onboarding. Each team member creates a local profile. No cloud account needed.
</p>
<span class="inline-flex mt-2 px-3 py-1 rounded-full bg-amber-200 text-amber-800 text-xs font-semibold">Pro Tip: You can set a 4‑digit paw‑code for security!</span>
</div>
</div>
<!-- Step 2 -->
<div class="flex gap-4 bg-white/80 border border-amber-200 rounded-xl p-2 shadow-sm">
<div class="w-10 h-10 rounded-full bg-amber-600 text-white flex items-center justify-center font-bold flex-shrink-0">2</div>
<div>
<h3 class="font-semibold text-amber-900">Understand Your Dashboard</h3>
<p class="text-amber-700 text-sm mt-1">Your Dispatch Center shows daily, weekly, and monthly trucking stats. Mission control for arctic adventures!</p>
<p class="text-xs text-gray-600 mt-2 p-2 bg-gray-50 border border-gray-200 rounded-md">
<span class="font-semibold">Human‑speak: </span>Centralized dashboard with KPIs and project overviews, all calculated locally.
</p>
</div>
</div>
<!-- Step 3 -->
<div class="flex gap-4 bg-white/80 border border-amber-200 rounded-xl p-2 shadow-sm">
<div class="w-10 h-10 rounded-full bg-amber-600 text-white flex items-center justify-center font-bold flex-shrink-0">3</div>
<div>
<h3 class="font-semibold text-amber-900">Create Your First Route</h3>
<p class="text-amber-700 text-sm mt-1">Head to Purrfect Routes to create your delivery path: fish runs, treat transport, emergency supplies, and more.</p>
<p class="text-xs text-gray-600 mt-2 p-2 bg-gray-50 border border-gray-200 rounded-md">
<span class="font-semibold">Human‑speak: </span>Project creation. Routes = Projects for organizing work streams.
</p>
</div>
</div>
<!-- Step 4 -->
<div class="flex gap-4 bg-white/80 border border-amber-200 rounded-xl p-2 shadow-sm">
<div class="w-10 h-10 rounded-full bg-amber-600 text-white flex items-center justify-center font-bold flex-shrink-0">4</div>
<div>
<h3 class="font-semibold text-amber-900">Export Your Logbook!</h3>
<p class="text-amber-700 text-sm mt-1">Your data is only on this device! Use the 'Time Trucking Backup' in your user menu to save a backup file. Don't lose your hard-earned trucking history!</p>
<p class="text-xs text-gray-600 mt-2 p-2 bg-gray-50 border border-gray-200 rounded-md">
<span class="font-semibold">Human‑speak: </span>Data management is local. Users are responsible for backing up their data via the export feature.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- FEATURES SECTION -->
<section id="features" class="space-y-8 scroll-mt-20">
<h2 class="text-2xl font-bold text-amber-900 flex items-center gap-2">⚙️ Features Guide</h2>
<div class="grid gap-6">
<div class="bg-white/80 border border-amber-200 rounded-2xl p-6 shadow-lg">
<div class="flex items-center gap-3 text-amber-900 text-xl font-semibold">
<span class="text-2xl">❄️</span>
<span>Dispatch Center (Dashboard)</span>
</div>
<p class="text-amber-700 mt-4">Your mission control showing today's, this week's, and this month's trucking statistics.</p>
<p class="text-sm text-gray-700 p-3 bg-gray-50 border border-gray-200 rounded-lg mt-4">
<span class="font-semibold">Professional analogy: </span>Your main Dashboard with at‑a‑glance metrics and high‑level overview.
</p>
</div>
<div class="bg-white/80 border border-amber-200 rounded-2xl p-6 shadow-lg">
<div class="flex items-center gap-3 text-amber-900 text-xl font-semibold">
<span class="text-2xl">⏱️</span>
<span>Time on the Road (Timer)</span>
</div>
<p class="text-amber-700 mt-4">Select a route and track your deliveries with precision.</p>
<p class="text-sm text-gray-700 p-3 bg-gray-50 border border-gray-200 rounded-lg mt-4">
<span class="font-semibold">Professional analogy: </span>Core Time Tracking module with start/pause and descriptive entries.
</p>
<span class="inline-block mt-4 px-3 py-1 rounded-full bg-amber-200 text-amber-800 text-xs font-semibold">Tip: Use the ±15 min buttons to adjust time if you forgot to start the timer!</span>
</div>
<div class="bg-white/80 border border-amber-200 rounded-2xl p-6 shadow-lg">
<div class="flex items-center gap-3 text-amber-900 text-xl font-semibold">
<span class="text-2xl">📂</span>
<span>Purrfect Routes (Projects)</span>
</div>
<p class="text-amber-700 mt-4">Manage your delivery routes. Each route can have its own color and description.</p>
<p class="text-sm text-gray-700 p-3 bg-gray-50 border border-gray-200 rounded-lg mt-4">
<span class="font-semibold">Professional analogy: </span>Project management for organizing and segmenting tracked time.
</p>
</div>
<div class="bg-white/80 border border-amber-200 rounded-2xl p-6 shadow-lg">
<div class="flex items-center gap-3 text-amber-900 text-xl font-semibold">
<span class="text-2xl">📊</span>
<span>Paw-print Log (Reports)</span>
</div>
<p class="text-amber-700 mt-4">View detailed logs of your expeditions, with charts and export to CSV.</p>
<p class="text-sm text-gray-700 p-3 bg-gray-50 border border-gray-200 rounded-lg mt-4">
<span class="font-semibold">Professional analogy: </span>Reporting & analytics with visualizations and exports.
</p>
</div>
</div>
</section>
<!-- PRO TIPS SECTION -->
<section id="tips" class="space-y-8 scroll-mt-20">
<h2 class="text-2xl font-bold text-amber-900 flex items-center gap-2">🎓 Wisdom from Veteran Cat Truckers</h2>
<div class="grid gap-6">
<div class="bg-purple-100 border border-purple-200 rounded-2xl p-6 shadow-lg">
<div class="flex items-center gap-3">
<span class="text-3xl">💜</span>
<div>
<h3 class="font-semibold text-purple-900 mb-1 flex items-center gap-2">
Aurora's Mathematical Precision <span class="text-xs">🎵</span>
</h3>
<p class="text-xs text-purple-700">The Aurora Addition</p>
</div>
</div>
<ul class="mt-4 space-y-2 text-purple-700 text-sm">
<li>• Use different colored routes for different cargo types.</li>
<li>• Check weekly reports to optimize delivery schedules.</li>
<li>• CSV exports are perfect for your own charts.</li>
<li>• Mountain passes require 15% more time — always adjust accordingly.</li>
</ul>
</div>
<div class="bg-white/80 border border-amber-100 rounded-2xl p-4 shadow-sm">
<div class="flex items-center gap-3">
<span class="text-3xl">😾</span>
<div>
<h3 class="font-semibold text-amber-900">Pringles' Grumpy Wisdom</h3>
<p class="text-xs text-amber-600">- Pringles, Founder & Chief Grumpy Officer</p>
</div>
</div>
<ul class="mt-4 space-y-2 text-amber-700 text-sm">
<li>• Pre-trip inspection: tea, snacks, and a solid nap strategy.</li>
<li>• Always track your time, even for the shortest fish delivery.</li>
<li>• Napping on the clock is for rookies. Pause the timer, then nap like a pro.</li>
<li>• The best routes are taken upside down — purr‑fessional advice.</li>
<li>• Don't forget to log what cargo you're hauling — future you will thank you.</li>
</ul>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-white/80 border border-amber-200 rounded-2xl p-6 shadow-lg">
<h3 class="font-semibold text-amber-900 mb-2">Time Management</h3>
<p class="text-xs text-gray-500 mb-2 italic">Tips for staying on schedule.</p>
<ul class="text-sm text-amber-700 space-y-1">
<li>• Start your timer before leaving the depot</li>
<li>• Use adjustment buttons if you forgot the timer</li>
<li>• Log details while they're fresh</li>
<li>• Regular catnaps are important for safety</li>
<li>• Remember: Naps are not a weakness, they are a strategy.</li>
</ul>
</div>
<div class="bg-white/80 border border-amber-200 rounded-2xl p-6 shadow-lg">
<h3 class="font-semibold text-amber-900 mb-2">Route Organization</h3>
<p class="text-xs text-gray-500 mb-2 italic">Best practices for your routes.</p>
<ul class="text-sm text-amber-700 space-y-1">
<li>• Create separate routes for different cargo types</li>
<li>• Use descriptive names you’ll remember</li>
<li>• Archive old routes instead of deleting</li>
<li>• Choose colors that make sense to you</li>
</ul>
</div>
</div>
<div class="bg-blue-100 border border-blue-200 rounded-2xl p-6 shadow-lg">
<h3 class="font-semibold text-blue-900 mb-2 flex items-center gap-2">🔒 Paw‑code Security Tips</h3>
<p class="text-xs text-blue-700 mb-2 italic">Keep your data safe from other cats.</p>
<ul class="space-y-2 text-blue-800 text-sm">
<li>• Enable paw‑code protection if sharing devices</li>
<li>• Use a 4‑digit code you can remember (not 1234!)</li>
<li>• Each cat's data is private to their profile</li>
<li>• You can disable protection later if needed</li>
</ul>
</div>
</div>
</section>
</div>
<div class="text-center py-8 border-t border-amber-200">
<div class="max-w-3xl mx-auto mb-6">
<img
src="assets/cat_truck_stop.jpg"
alt="Annual Cat Truck Stop Party ❄️✨"
class="rounded-xl shadow-lg border-4 border-amber-200 w-full object-cover max-h-96"
/>
<p class="text-center text-sm italic text-amber-700 mt-2 bg-amber-100/70 px-3 py-2 rounded-b-lg">
Annual Cat Truck Stop Party ❄️✨
</p>
</div>
<div class="flex items-center justify-center gap-4 mb-4">
<span class="text-2xl">🐾</span>
<p class="text-amber-700 italic">"Welcome to the most purr-fessional arctic trucking operation in the frozen north!"</p>
<span class="text-2xl">🐾</span>
</div>
<p class="text-amber-600 text-sm">- The Arctic Time Trucking Co. Team</p>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="relative z-10 p-4 text-center text-xs text-amber-700">
<div class="max-w-7xl mx-auto flex flex-col items-center gap-2">
<div class="flex justify-center items-center gap-4">
<a href="imprint.html" class="hover:underline">Imprint</a>
<span class="text-amber-300">•</span>
<a href="privacy.html" class="hover:underline">Privacy Policy</a>
<span class="text-amber-300">•</span>
<a href="https://github.com/KickdriveOliver/arctic-time-truckers"
target="_blank"
rel="noopener noreferrer"
class="flex items-center gap-1 opacity-60 hover:opacity-100 transition-opacity"
title="Open-source cat magic on GitHub">
🐾 <span>Made with purrs · Get the source</span>
</a>
</div>
<p class="opacity-70">© 2026 Arctic Time Trucking Co. All rights to napping reserved.</p>
</div>
</footer>
</div>
</div>
</div>
<script>
// Mobile Sidebar Logic
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('mobile-sidebar-overlay');
const menuBtn = document.getElementById('mobile-menu-btn');
const closeBtn = document.getElementById('close-sidebar-btn');
function toggleSidebar() {
const isClosed = sidebar.classList.contains('-translate-x-full');
if (isClosed) {
sidebar.classList.remove('-translate-x-full');
overlay.classList.remove('hidden');
} else {
sidebar.classList.add('-translate-x-full');
overlay.classList.add('hidden');
}
}
menuBtn.addEventListener('click', toggleSidebar);
closeBtn.addEventListener('click', toggleSidebar);
overlay.addEventListener('click', toggleSidebar);
</script>
</body>
</html>