Hugging Face's logo

Spaces:
thors1
/
deepsite-project-yb8tm
Running

App Files Community
thors1 commited on
Commit
b414ae6
·
verified ·
1 Parent(s): ad41196

Initial DeepSite commit

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +884 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Deepsite Project Yb8tm
3
- emoji: 📊
4
  colorFrom: yellow
5
- colorTo: yellow
6
  sdk: static
7
- pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: DeepSite Project
 
3
  colorFrom: yellow
4
+ colorTo: pink
5
  sdk: static
6
+ emoji: 🛠️
7
+ tags:
8
+ - deepsite-v4
9
  ---
10
 
11
+ # DeepSite Project
12
+
13
+ This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.
index.html CHANGED
@@ -1,19 +1,884 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MediGreen Clinic - Patient Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#2563eb',
16
+ 'primary-light': '#eff6ff',
17
+ background: '#f8fafc',
18
+ border: '#e5e7eb',
19
+ },
20
+ fontFamily: {
21
+ sans: ['Inter', 'sans-serif'],
22
+ },
23
+ },
24
+ },
25
+ }
26
+ </script>
27
+ <style>
28
+ * {
29
+ scrollbar-width: thin;
30
+ scrollbar-color: #cbd5e1 #f1f5f9;
31
+ }
32
+ *::-webkit-scrollbar {
33
+ width: 6px;
34
+ height: 6px;
35
+ }
36
+ *::-webkit-scrollbar-track {
37
+ background: #f1f5f9;
38
+ }
39
+ *::-webkit-scrollbar-thumb {
40
+ background: #cbd5e1;
41
+ border-radius: 3px;
42
+ }
43
+ *::-webkit-scrollbar-thumb:hover {
44
+ background: #94a3b8;
45
+ }
46
+
47
+ .tooltip {
48
+ visibility: hidden;
49
+ opacity: 0;
50
+ transition: opacity 0.2s, transform 0.2s;
51
+ transform: translateX(-10px);
52
+ }
53
+ .tooltip-trigger:hover .tooltip {
54
+ visibility: visible;
55
+ opacity: 1;
56
+ transform: translateX(0);
57
+ }
58
+
59
+ .card-hover {
60
+ transition: all 0.2s ease;
61
+ }
62
+ .card-hover:hover {
63
+ box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
64
+ transform: translateY(-2px);
65
+ }
66
+
67
+ @keyframes slideIn {
68
+ from {
69
+ opacity: 0;
70
+ transform: translateY(-10px);
71
+ }
72
+ to {
73
+ opacity: 1;
74
+ transform: translateY(0);
75
+ }
76
+ }
77
+ .animate-slide-in {
78
+ animation: slideIn 0.3s ease-out;
79
+ }
80
+
81
+ @keyframes fadeIn {
82
+ from { opacity: 0; }
83
+ to { opacity: 1; }
84
+ }
85
+ .animate-fade-in {
86
+ animation: fadeIn 0.3s ease-out;
87
+ }
88
+
89
+ .progress-bar {
90
+ transition: width 0.5s ease-out;
91
+ }
92
+
93
+ .checkbox-custom:checked + div {
94
+ background-color: #2563eb;
95
+ border-color: #2563eb;
96
+ }
97
+ .checkbox-custom:checked + div svg {
98
+ display: block;
99
+ }
100
+
101
+ .sticky-patient-header {
102
+ transition: all 0.3s ease;
103
+ }
104
+ .sticky-patient-header.scrolled {
105
+ box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.1);
106
+ }
107
+ </style>
108
+ </head>
109
+ <body class="bg-background text-slate-800 font-sans antialiased">
110
+ <!-- Toast Container -->
111
+ <div id="toast-container" class="fixed top-20 right-4 z-[100] space-y-2"></div>
112
+
113
+ <!-- Sticky Primary Header -->
114
+ <header class="fixed top-0 left-0 right-0 h-16 bg-white border-b border-border z-50">
115
+ <div class="flex items-center justify-between h-full px-4">
116
+ <!-- Left: Logo -->
117
+ <div class="flex items-center gap-3">
118
+ <div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center">
119
+ <i data-lucide="leaf" class="w-5 h-5 text-white"></i>
120
+ </div>
121
+ <span class="font-semibold text-lg text-slate-900 hidden sm:block">MediGreen</span>
122
+ </div>
123
+
124
+ <!-- Center: Search -->
125
+ <div class="flex-1 max-w-xl mx-4 hidden md:block">
126
+ <div class="relative">
127
+ <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
128
+ <input
129
+ type="text"
130
+ placeholder="Search patients, appointments, notes..."
131
+ class="w-full h-10 pl-10 pr-4 bg-slate-50 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
132
+ >
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Right: Actions -->
137
+ <div class="flex items-center gap-2">
138
+ <button class="relative p-2 text-slate-500 hover:text-primary hover:bg-primary-light rounded-lg transition-all" onclick="showToast('No new notifications', 'info')">
139
+ <i data-lucide="bell" class="w-5 h-5"></i>
140
+ <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
141
+ </button>
142
+ <button class="p-2 text-slate-500 hover:text-primary hover:bg-primary-light rounded-lg transition-all hidden sm:flex" onclick="showToast('Messages opened', 'info')">
143
+ <i data-lucide="message-square" class="w-5 h-5"></i>
144
+ </button>
145
+ <button class="p-2 text-slate-500 hover:text-primary hover:bg-primary-light rounded-lg transition-all hidden sm:flex" onclick="showToast('Help center opened', 'info')">
146
+ <i data-lucide="help-circle" class="w-5 h-5"></i>
147
+ </button>
148
+ <div class="relative ml-2">
149
+ <button id="user-menu-btn" class="flex items-center gap-2 p-1.5 hover:bg-slate-50 rounded-lg transition-all">
150
+ <img src="https://static.photos/people/200x200/42" alt="Dr. Smith" class="w-8 h-8 rounded-lg object-cover">
151
+ <div class="hidden lg:block text-left">
152
+ <p class="text-sm font-medium text-slate-900">Dr. Smith</p>
153
+ <p class="text-xs text-slate-500">Physician</p>
154
+ </div>
155
+ <i data-lucide="chevron-down" class="w-4 h-4 text-slate-400 hidden lg:block"></i>
156
+ </button>
157
+ <!-- User Dropdown -->
158
+ <div id="user-dropdown" class="hidden absolute right-0 top-full mt-2 w-48 bg-white rounded-xl shadow-lg border border-border py-2 animate-slide-in">
159
+ <a href="#" class="flex items-center gap-2 px-4 py-2 text-sm text-slate-700 hover:bg-primary-light hover:text-primary">
160
+ <i data-lucide="user" class="w-4 h-4"></i> Profile
161
+ </a>
162
+ <a href="#" class="flex items-center gap-2 px-4 py-2 text-sm text-slate-700 hover:bg-primary-light hover:text-primary">
163
+ <i data-lucide="settings" class="w-4 h-4"></i> Settings
164
+ </a>
165
+ <div class="border-t border-border my-2"></div>
166
+ <a href="#" class="flex items-center gap-2 px-4 py-2 text-sm text-red-600 hover:bg-red-50">
167
+ <i data-lucide="log-out" class="w-4 h-4"></i> Sign out
168
+ </a>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </header>
174
+
175
+ <!-- Main Layout -->
176
+ <div class="flex pt-16 min-h-screen">
177
+ <!-- Primary Icon Sidebar -->
178
+ <aside class="fixed left-0 top-16 bottom-0 w-[72px] bg-white border-r border-border z-40 flex flex-col">
179
+ <nav class="flex-1 py-4 space-y-1 overflow-y-auto">
180
+ <!-- Sidebar Items -->
181
+ <div class="tooltip-trigger relative">
182
+ <button class="w-full h-12 flex items-center justify-center text-slate-500 hover:text-primary hover:bg-primary-light transition-all" onclick="setActiveSidebar(this)">
183
+ <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
184
+ </button>
185
+ <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs rounded-lg whitespace-nowrap z-50">Dashboard</span>
186
+ </div>
187
+
188
+ <div class="tooltip-trigger relative">
189
+ <button class="w-full h-12 flex items-center justify-center text-primary bg-primary-light transition-all" onclick="setActiveSidebar(this)">
190
+ <i data-lucide="users" class="w-5 h-5"></i>
191
+ </button>
192
+ <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs rounded-lg whitespace-nowrap z-50">Patients</span>
193
+ </div>
194
+
195
+ <div class="tooltip-trigger relative">
196
+ <button class="w-full h-12 flex items-center justify-center text-slate-500 hover:text-primary hover:bg-primary-light transition-all" onclick="setActiveSidebar(this)">
197
+ <i data-lucide="calendar" class="w-5 h-5"></i>
198
+ </button>
199
+ <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs rounded-lg whitespace-nowrap z-50">Appointments</span>
200
+ </div>
201
+
202
+ <div class="tooltip-trigger relative">
203
+ <button class="w-full h-12 flex items-center justify-center text-slate-500 hover:text-primary hover:bg-primary-light transition-all" onclick="setActiveSidebar(this)">
204
+ <i data-lucide="file-text" class="w-5 h-5"></i>
205
+ </button>
206
+ <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs rounded-lg whitespace-nowrap z-50">Forms</span>
207
+ </div>
208
+
209
+ <div class="tooltip-trigger relative">
210
+ <button class="w-full h-12 flex items-center justify-center text-slate-500 hover:text-primary hover:bg-primary-light transition-all" onclick="setActiveSidebar(this)">
211
+ <i data-lucide="message-circle" class="w-5 h-5"></i>
212
+ </button>
213
+ <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs rounded-lg whitespace-nowrap z-50">Communication</span>
214
+ </div>
215
+
216
+ <div class="tooltip-trigger relative">
217
+ <button class="w-full h-12 flex items-center justify-center text-slate-500 hover:text-primary hover:bg-primary-light transition-all" onclick="setActiveSidebar(this)">
218
+ <i data-lucide="check-square" class="w-5 h-5"></i>
219
+ </button>
220
+ <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs rounded-lg whitespace-nowrap z-50">Tasks</span>
221
+ </div>
222
+
223
+ <div class="tooltip-trigger relative">
224
+ <button class="w-full h-12 flex items-center justify-center text-slate-500 hover:text-primary hover:bg-primary-light transition-all" onclick="setActiveSidebar(this)">
225
+ <i data-lucide="folder" class="w-5 h-5"></i>
226
+ </button>
227
+ <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs rounded-lg whitespace-nowrap z-50">Documents</span>
228
+ </div>
229
+
230
+ <div class="tooltip-trigger relative">
231
+ <button class="w-full h-12 flex items-center justify-center text-slate-500 hover:text-primary hover:bg-primary-light transition-all" onclick="setActiveSidebar(this)">
232
+ <i data-lucide="credit-card" class="w-5 h-5"></i>
233
+ </button>
234
+ <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs rounded-lg whitespace-nowrap z-50">Billing</span>
235
+ </div>
236
+
237
+ <div class="tooltip-trigger relative">
238
+ <button class="w-full h-12 flex items-center justify-center text-slate-500 hover:text-primary hover:bg-primary-light transition-all" onclick="setActiveSidebar(this)">
239
+ <i data-lucide="bar-chart-3" class="w-5 h-5"></i>
240
+ </button>
241
+ <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs rounded-lg whitespace-nowrap z-50">Reports</span>
242
+ </div>
243
+
244
+ <div class="tooltip-trigger relative">
245
+ <button class="w-full h-12 flex items-center justify-center text-slate-500 hover:text-primary hover:bg-primary-light transition-all" onclick="setActiveSidebar(this)">
246
+ <i data-lucide="users-2" class="w-5 h-5"></i>
247
+ </button>
248
+ <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs rounded-lg whitespace-nowrap z-50">Staff</span>
249
+ </div>
250
+
251
+ <div class="tooltip-trigger relative">
252
+ <button class="w-full h-12 flex items-center justify-center text-slate-500 hover:text-primary hover:bg-primary-light transition-all" onclick="setActiveSidebar(this)">
253
+ <i data-lucide="plug" class="w-5 h-5"></i>
254
+ </button>
255
+ <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs rounded-lg whitespace-nowrap z-50">Integrations</span>
256
+ </div>
257
+ </nav>
258
+
259
+ <div class="p-2 border-t border-border">
260
+ <div class="tooltip-trigger relative">
261
+ <button class="w-full h-12 flex items-center justify-center text-slate-500 hover:text-primary hover:bg-primary-light transition-all" onclick="setActiveSidebar(this)">
262
+ <i data-lucide="settings" class="w-5 h-5"></i>
263
+ </button>
264
+ <span class="tooltip absolute left-full ml-2 px-2 py-1 bg-slate-800 text-white text-xs rounded-lg whitespace-nowrap z-50">Settings</span>
265
+ </div>
266
+ </div>
267
+ </aside>
268
+
269
+ <!-- Secondary Patient Menu -->
270
+ <aside id="patient-menu" class="fixed left-[72px] top-16 bottom-0 w-[260px] bg-white border-r border-border z-30 overflow-y-auto transform transition-transform duration-300">
271
+ <div class="p-4">
272
+ <!-- Patient Section -->
273
+ <div class="mb-6">
274
+ <h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 px-3">Patient</h3>
275
+ <nav class="space-y-1">
276
+ <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium text-white bg-primary rounded-lg">
277
+ <i data-lucide="user-circle" class="w-4 h-4"></i>
278
+ Overview
279
+ </a>
280
+ <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm text-slate-600 hover:bg-primary-light hover:text-primary rounded-lg transition-all">
281
+ <i data-lucide="phone" class="w-4 h-4"></i>
282
+ Contact
283
+ </a>
284
+ <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm text-slate-600 hover:bg-primary-light hover:text-primary rounded-lg transition-all">
285
+ <i data-lucide="shield" class="w-4 h-4"></i>
286
+ Insurance
287
+ </a>
288
+ <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm text-slate-600 hover:bg-primary-light hover:text-primary rounded-lg transition-all">
289
+ <i data-lucide="receipt" class="w-4 h-4"></i>
290
+ Invoices
291
+ </a>
292
+ </nav>
293
+ </div>
294
+
295
+ <!-- Care Section -->
296
+ <div class="mb-6">
297
+ <h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 px-3">Care</h3>
298
+ <nav class="space-y-1">
299
+ <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm text-slate-600 hover:bg-primary-light hover:text-primary rounded-lg transition-all">
300
+ <i data-lucide="calendar-check" class="w-4 h-4"></i>
301
+ Appointments
302
+ </a>
303
+ <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm text-slate-600 hover:bg-primary-light hover:text-primary rounded-lg transition-all">
304
+ <i data-lucide="file-text" class="w-4 h-4"></i>
305
+ Notes
306
+ </a>
307
+ <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm text-slate-600 hover:bg-primary-light hover:text-primary rounded-lg transition-all">
308
+ <i data-lucide="check-square" class="w-4 h-4"></i>
309
+ Tasks
310
+ </a>
311
+ <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm text-slate-600 hover:bg-primary-light hover:text-primary rounded-lg transition-all">
312
+ <i data-lucide="activity" class="w-4 h-4"></i>
313
+ Activity
314
+ </a>
315
+ </nav>
316
+ </div>
317
+
318
+ <!-- Documents Section -->
319
+ <div class="mb-6">
320
+ <h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 px-3">Documents</h3>
321
+ <nav class="space-y-1">
322
+ <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm text-slate-600 hover:bg-primary-light hover:text-primary rounded-lg transition-all">
323
+ <i data-lucide="folder-open" class="w-4 h-4"></i>
324
+ Files
325
+ </a>
326
+ <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm text-slate-600 hover:bg-primary-light hover:text-primary rounded-lg transition-all">
327
+ <i data-lucide="clipboard-list" class="w-4 h-4"></i>
328
+ Forms
329
+ </a>
330
+ </nav>
331
+ </div>
332
+
333
+ <!-- Communication Section -->
334
+ <div class="mb-6">
335
+ <h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2 px-3">Communication</h3>
336
+ <nav class="space-y-1">
337
+ <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm text-slate-600 hover:bg-primary-light hover:text-primary rounded-lg transition-all">
338
+ <i data-lucide="mail" class="w-4 h-4"></i>
339
+ Email
340
+ </a>
341
+ <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm text-slate-600 hover:bg-primary-light hover:text-primary rounded-lg transition-all">
342
+ <i data-lucide="message-square" class="w-4 h-4"></i>
343
+ Messages
344
+ </a>
345
+ </nav>
346
+ </div>
347
+ </div>
348
+ </aside>
349
+
350
+ <!-- Mobile Menu Toggle -->
351
+ <button id="mobile-menu-toggle" class="fixed left-[72px] top-20 z-40 lg:hidden bg-white border border-border rounded-r-lg p-2 shadow-lg" onclick="togglePatientMenu()">
352
+ <i data-lucide="chevron-right" class="w-4 h-4 text-slate-600" id="menu-toggle-icon"></i>
353
+ </button>
354
+
355
+ <!-- Main Content -->
356
+ <main class="flex-1 ml-[72px] lg:ml-[332px] min-h-screen">
357
+ <div class="max-w-[1280px] mx-auto">
358
+ <!-- Sticky Patient Info Header -->
359
+ <div id="patient-header" class="sticky top-0 z-20 bg-background/95 backdrop-blur-sm border-b border-border">
360
+ <div class="p-6">
361
+ <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
362
+ <!-- Patient Info -->
363
+ <div class="flex items-start gap-4">
364
+ <img src="https://static.photos/people/200x200/123" alt="Sarah Johnson" class="w-16 h-16 rounded-xl object-cover border-2 border-white shadow-md">
365
+ <div>
366
+ <h1 class="text-xl font-semibold text-slate-900">Sarah Johnson</h1>
367
+ <p class="text-sm text-slate-500 flex items-center gap-2 mt-1">
368
+ <span>PT-2024-001</span>
369
+ <span class="w-1 h-1 bg-slate-300 rounded-full"></span>
370
+ <span>32 years old</span>
371
+ </p>
372
+ <div class="flex flex-wrap gap-2 mt-2">
373
+ <span class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-emerald-700 bg-emerald-50 rounded-full border border-emerald-200">
374
+ <i data-lucide="check-circle" class="w-3 h-3"></i>
375
+ Active Patient
376
+ </span>
377
+ <span class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-emerald-700 bg-emerald-50 rounded-full border border-emerald-200">
378
+ <i data-lucide="award" class="w-3 h-3"></i>
379
+ Certification Approved
380
+ </span>
381
+ <span class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-blue-700 bg-blue-50 rounded-full border border-blue-200">
382
+ <i data-lucide="shield-check" class="w-3 h-3"></i>
383
+ Insurance Verified
384
+ </span>
385
+ </div>
386
+ </div>
387
+ </div>
388
+
389
+ <!-- Action Buttons -->
390
+ <div class="flex flex-wrap items-center gap-2">
391
+ <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-border rounded-lg hover:bg-slate-50 transition-all" onclick="showToast('Contact options opened', 'info')">
392
+ <i data-lucide="phone" class="w-4 h-4"></i>
393
+ Contact
394
+ </button>
395
+ <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-border rounded-lg hover:bg-slate-50 transition-all" onclick="showToast('Upload dialog opened', 'info')">
396
+ <i data-lucide="upload" class="w-4 h-4"></i>
397
+ Upload File
398
+ </button>
399
+ <div class="relative">
400
+ <button id="actions-dropdown-btn" class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-primary rounded-lg hover:bg-blue-700 transition-all">
401
+ Actions
402
+ <i data-lucide="chevron-down" class="w-4 h-4"></i>
403
+ </button>
404
+ <!-- Actions Dropdown -->
405
+ <div id="actions-dropdown" class="hidden absolute right-0 top-full mt-2 w-56 bg-white rounded-xl shadow-lg border border-border py-2 animate-slide-in">
406
+ <button onclick="showToast('Note editor opened', 'success')" class="w-full flex items-center gap-2 px-4 py-2 text-sm text-slate-700 hover:bg-primary-light hover:text-primary text-left">
407
+ <i data-lucide="file-text" class="w-4 h-4"></i> Add Note
408
+ </button>
409
+ <button onclick="showToast('Appointment scheduler opened', 'success')" class="w-full flex items-center gap-2 px-4 py-2 text-sm text-slate-700 hover:bg-primary-light hover:text-primary text-left">
410
+ <i data-lucide="calendar-plus" class="w-4 h-4"></i> Schedule Appointment
411
+ </button>
412
+ <button onclick="showToast('File upload started', 'success')" class="w-full flex items-center gap-2 px-4 py-2 text-sm text-slate-700 hover:bg-primary-light hover:text-primary text-left">
413
+ <i data-lucide="upload-cloud" class="w-4 h-4"></i> Upload File
414
+ </button>
415
+ <button onclick="showToast('Invoice creator opened', 'success')" class="w-full flex items-center gap-2 px-4 py-2 text-sm text-slate-700 hover:bg-primary-light hover:text-primary text-left">
416
+ <i data-lucide="file-invoice" class="w-4 h-4"></i> Create Invoice
417
+ </button>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- Dashboard Content -->
426
+ <div class="p-6">
427
+ <!-- Page Header -->
428
+ <div class="mb-6">
429
+ <h2 class="text-2xl font-semibold text-slate-900">Patient Overview</h2>
430
+ <p class="text-slate-500 mt-1">Patient summary and recent activity</p>
431
+ </div>
432
+
433
+ <!-- Dashboard Grid -->
434
+ <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
435
+ <!-- Certification Status Card -->
436
+ <div class="bg-white rounded-xl border border-border shadow-sm card-hover p-6">
437
+ <div class="flex items-center justify-between mb-4">
438
+ <div class="flex items-center gap-3">
439
+ <div class="w-10 h-10 bg-emerald-50 rounded-lg flex items-center justify-center">
440
+ <i data-lucide="award" class="w-5 h-5 text-emerald-600"></i>
441
+ </div>
442
+ <h3 class="font-semibold text-slate-900">Certification Status</h3>
443
+ </div>
444
+ <span class="px-2 py-1 text-xs font-medium text-emerald-700 bg-emerald-50 rounded-full border border-emerald-200">Approved</span>
445
+ </div>
446
+
447
+ <div class="space-y-3 mb-4">
448
+ <div class="flex justify-between text-sm">
449
+ <span class="text-slate-500">Issue Date</span>
450
+ <span class="font-medium text-slate-900">March 10, 2026</span>
451
+ </div>
452
+ <div class="flex justify-between text-sm">
453
+ <span class="text-slate-500">Expiration Date</span>
454
+ <span class="font-medium text-slate-900">March 10, 2027</span>
455
+ </div>
456
+ </div>
457
+
458
+ <div class="mb-4">
459
+ <div class="flex items-center justify-between text-sm mb-2">
460
+ <span class="text-slate-500">Time Remaining</span>
461
+ <span class="font-medium text-amber-600">23 days</span>
462
+ </div>
463
+ <div class="h-2 bg-slate-100 rounded-full overflow-hidden">
464
+ <div class="h-full bg-gradient-to-r from-emerald-500 to-amber-500 rounded-full progress-bar" style="width: 94%"></div>
465
+ </div>
466
+ <p class="text-xs text-slate-500 mt-2">Certification expires in <strong class="text-amber-600">23 days</strong></p>
467
+ </div>
468
+
469
+ <button class="w-full py-2.5 text-sm font-medium text-primary bg-primary-light rounded-lg hover:bg-blue-100 transition-all" onclick="showToast('Renewal process started', 'success')">
470
+ Renew Certification
471
+ </button>
472
+ </div>
473
+
474
+ <!-- Upcoming Appointments Card -->
475
+ <div class="bg-white rounded-xl border border-border shadow-sm card-hover p-6">
476
+ <div class="flex items-center justify-between mb-4">
477
+ <div class="flex items-center gap-3">
478
+ <div class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center">
479
+ <i data-lucide="calendar" class="w-5 h-5 text-blue-600"></i>
480
+ </div>
481
+ <h3 class="font-semibold text-slate-900">Upcoming Appointments</h3>
482
+ </div>
483
+ <span class="text-xs text-slate-500">3 scheduled</span>
484
+ </div>
485
+
486
+ <div class="space-y-3">
487
+ <div class="flex items-start gap-3 p-3 bg-slate-50 rounded-lg">
488
+ <div class="text-center min-w-[48px]">
489
+ <p class="text-xs text-slate-500 uppercase">Mar</p>
490
+ <p class="text-lg font-semibold text-slate-900">15</p>
491
+ </div>
492
+ <div class="flex-1 min-w-0">
493
+ <p class="text-sm font-medium text-slate-900 truncate">Follow-up Consultation</p>
494
+ <p class="text-xs text-slate-500">Dr. Smith • 10:00 AM</p>
495
+ </div>
496
+ </div>
497
+
498
+ <div class="flex items-start gap-3 p-3 bg-slate-50 rounded-lg">
499
+ <div class="text-center min-w-[48px]">
500
+ <p class="text-xs text-slate-500 uppercase">Apr</p>
501
+ <p class="text-lg font-semibold text-slate-900">02</p>
502
+ </div>
503
+ <div class="flex-1 min-w-0">
504
+ <p class="text-sm font-medium text-slate-900 truncate">Certification Renewal</p>
505
+ <p class="text-xs text-slate-500">Dr. Johnson • 2:30 PM</p>
506
+ </div>
507
+ </div>
508
+
509
+ <div class="flex items-start gap-3 p-3 bg-slate-50 rounded-lg">
510
+ <div class="text-center min-w-[48px]">
511
+ <p class="text-xs text-slate-500 uppercase">Apr</p>
512
+ <p class="text-lg font-semibold text-slate-900">18</p>
513
+ </div>
514
+ <div class="flex-1 min-w-0">
515
+ <p class="text-sm font-medium text-slate-900 truncate">Progress Check</p>
516
+ <p class="text-xs text-slate-500">Dr. Smith • 11:00 AM</p>
517
+ </div>
518
+ </div>
519
+ </div>
520
+
521
+ <div class="flex gap-2 mt-4">
522
+ <button class="flex-1 py-2 text-sm font-medium text-slate-700 bg-slate-100 rounded-lg hover:bg-slate-200 transition-all" onclick="showToast('Calendar view opened', 'info')">
523
+ View All
524
+ </button>
525
+ <button class="flex-1 py-2 text-sm font-medium text-primary bg-primary-light rounded-lg hover:bg-blue-100 transition-all" onclick="showToast('Reschedule dialog opened', 'info')">
526
+ Reschedule
527
+ </button>
528
+ </div>
529
+ </div>
530
+
531
+ <!-- Notes Card -->
532
+ <div class="bg-white rounded-xl border border-border shadow-sm card-hover p-6">
533
+ <div class="flex items-center justify-between mb-4">
534
+ <div class="flex items-center gap-3">
535
+ <div class="w-10 h-10 bg-purple-50 rounded-lg flex items-center justify-center">
536
+ <i data-lucide="file-text" class="w-5 h-5 text-purple-600"></i>
537
+ </div>
538
+ <h3 class="font-semibold text-slate-900">Recent Notes</h3>
539
+ </div>
540
+ <span class="text-xs text-slate-500">Last updated 2h ago</span>
541
+ </div>
542
+
543
+ <div class="space-y-3">
544
+ <div class="p-3 border border-border rounded-lg hover:border-primary/30 transition-all cursor-pointer" onclick="showToast('Note opened for editing', 'info')">
545
+ <div class="flex items-center justify-between mb-2">
546
+ <span class="text-xs font-medium text-slate-500">March 8, 2026</span>
547
+ <span class="text-xs text-slate-400">Dr. Smith</span>
548
+ </div>
549
+ <p class="text-sm text-slate-700 line-clamp-2">Patient reports improved sleep quality with current dosage. No adverse effects noted. Recommended continuing...</p>
550
+ </div>
551
+
552
+ <div class="p-3 border border-border rounded-lg hover:border-primary/30 transition-all cursor-pointer" onclick="showToast('Note opened for editing', 'info')">
553
+ <div class="flex items-center justify-between mb-2">
554
+ <span class="text-xs font-medium text-slate-500">February 22, 2026</span>
555
+ <span class="text-xs text-slate-400">Dr. Smith</span>
556
+ </div>
557
+ <p class="text-sm text-slate-700 line-clamp-2">Initial consultation completed. Patient qualifies for medical marijuana certification based on chronic pain...</p>
558
+ </div>
559
+ </div>
560
+
561
+ <button class="w-full mt-4 py-2.5 text-sm font-medium text-primary bg-primary-light rounded-lg hover:bg-blue-100 transition-all flex items-center justify-center gap-2" onclick="showToast('New note created', 'success')">
562
+ <i data-lucide="plus" class="w-4 h-4"></i>
563
+ Add Note
564
+ </button>
565
+ </div>
566
+
567
+ <!-- Tasks Card -->
568
+ <div class="bg-white rounded-xl border border-border shadow-sm card-hover p-6">
569
+ <div class="flex items-center justify-between mb-4">
570
+ <div class="flex items-center gap-3">
571
+ <div class="w-10 h-10 bg-amber-50 rounded-lg flex items-center justify-center">
572
+ <i data-lucide="check-square" class="w-5 h-5 text-amber-600"></i>
573
+ </div>
574
+ <h3 class="font-semibold text-slate-900">Tasks</h3>
575
+ </div>
576
+ <span class="text-xs text-slate-500">2 of 3 completed</span>
577
+ </div>
578
+
579
+ <div class="space-y-2">
580
+ <label class="flex items-center gap-3 p-3 bg-slate-50 rounded-lg cursor-pointer group">
581
+ <input type="checkbox" class="checkbox-custom hidden" checked onchange="toggleTask(this)">
582
+ <div class="w-5 h-5 border-2 border-slate-300 rounded flex items-center justify-center transition-all">
583
+ <i data-lucide="check" class="w-3 h-3 text-white hidden"></i>
584
+ </div>
585
+ <span class="text-sm text-slate-500 line-through">Upload ID verification</span>
586
+ </label>
587
+
588
+ <label class="flex items-center gap-3 p-3 bg-amber-50 rounded-lg cursor-pointer group border border-amber-200">
589
+ <input type="checkbox" class="checkbox-custom hidden" onchange="toggleTask(this)">
590
+ <div class="w-5 h-5 border-2 border-amber-400 rounded flex items-center justify-center transition-all bg-white">
591
+ <i data-lucide="check" class="w-3 h-3 text-white hidden"></i>
592
+ </div>
593
+ <div class="flex-1">
594
+ <span class="text-sm font-medium text-amber-900">Complete renewal form</span>
595
+ <p class="text-xs text-amber-700">Due in 3 days</p>
596
+ </div>
597
+ <span class="px-2 py-0.5 text-xs font-medium text-amber-700 bg-amber-100 rounded">Urgent</span>
598
+ </label>
599
+
600
+ <label class="flex items-center gap-3 p-3 bg-slate-50 rounded-lg cursor-pointer group">
601
+ <input type="checkbox" class="checkbox-custom hidden" onchange="toggleTask(this)">
602
+ <div class="w-5 h-5 border-2 border-slate-300 rounded flex items-center justify-center transition-all">
603
+ <i data-lucide="check" class="w-3 h-3 text-white hidden"></i>
604
+ </div>
605
+ <span class="text-sm text-slate-700">Schedule renewal appointment</span>
606
+ </label>
607
+ </div>
608
+
609
+ <button class="w-full mt-4 py-2.5 text-sm font-medium text-primary bg-primary-light rounded-lg hover:bg-blue-100 transition-all flex items-center justify-center gap-2" onclick="showToast('New task created', 'success')">
610
+ <i data-lucide="plus" class="w-4 h-4"></i>
611
+ Add Task
612
+ </button>
613
+ </div>
614
+
615
+ <!-- Recent Activity Timeline -->
616
+ <div class="bg-white rounded-xl border border-border shadow-sm card-hover p-6">
617
+ <div class="flex items-center justify-between mb-4">
618
+ <div class="flex items-center gap-3">
619
+ <div class="w-10 h-10 bg-indigo-50 rounded-lg flex items-center justify-center">
620
+ <i data-lucide="activity" class="w-5 h-5 text-indigo-600"></i>
621
+ </div>
622
+ <h3 class="font-semibold text-slate-900">Recent Activity</h3>
623
+ </div>
624
+ </div>
625
+
626
+ <div class="relative pl-6 space-y-4">
627
+ <div class="absolute left-2 top-2 bottom-2 w-0.5 bg-slate-200"></div>
628
+
629
+ <div class="relative">
630
+ <div class="absolute -left-4 w-3 h-3 bg-primary rounded-full border-2 border-white shadow"></div>
631
+ <div>
632
+ <p class="text-sm font-medium text-slate-900">Appointment Scheduled</p>
633
+ <p class="text-xs text-slate-500 mt-0.5">Follow-up consultation on March 15</p>
634
+ <p class="text-xs text-slate-400 mt-1">2 hours ago</p>
635
+ </div>
636
+ </div>
637
+
638
+ <div class="relative">
639
+ <div class="absolute -left-4 w-3 h-3 bg-emerald-500 rounded-full border-2 border-white shadow"></div>
640
+ <div>
641
+ <p class="text-sm font-medium text-slate-900">Document Uploaded</p>
642
+ <p class="text-xs text-slate-500 mt-0.5">Insurance card updated</p>
643
+ <p class="text-xs text-slate-400 mt-1">Yesterday at 3:45 PM</p>
644
+ </div>
645
+ </div>
646
+
647
+ <div class="relative">
648
+ <div class="absolute -left-4 w-3 h-3 bg-purple-500 rounded-full border-2 border-white shadow"></div>
649
+ <div>
650
+ <p class="text-sm font-medium text-slate-900">Note Added</p>
651
+ <p class="text-xs text-slate-500 mt-0.5">Progress check by Dr. Smith</p>
652
+ <p class="text-xs text-slate-400 mt-1">March 8, 2026</p>
653
+ </div>
654
+ </div>
655
+
656
+ <div class="relative">
657
+ <div class="absolute -left-4 w-3 h-3 bg-slate-300 rounded-full border-2 border-white"></div>
658
+ <div>
659
+ <p class="text-sm font-medium text-slate-900">Task Completed</p>
660
+ <p class="text-xs text-slate-500 mt-0.5">ID verification uploaded</p>
661
+ <p class="text-xs text-slate-400 mt-1">March 7, 2026</p>
662
+ </div>
663
+ </div>
664
+ </div>
665
+ </div>
666
+
667
+ <!-- Documents Card -->
668
+ <div class="bg-white rounded-xl border border-border shadow-sm card-hover p-6">
669
+ <div class="flex items-center justify-between mb-4">
670
+ <div class="flex items-center gap-3">
671
+ <div class="w-10 h-10 bg-cyan-50 rounded-lg flex items-center justify-center">
672
+ <i data-lucide="folder" class="w-5 h-5 text-cyan-600"></i>
673
+ </div>
674
+ <h3 class="font-semibold text-slate-900">Documents</h3>
675
+ </div>
676
+ <span class="text-xs text-slate-500">12 files</span>
677
+ </div>
678
+
679
+ <div class="space-y-2">
680
+ <div class="flex items-center gap-3 p-3 hover:bg-slate-50 rounded-lg cursor-pointer transition-all group" onclick="showToast('Opening ID_Verification.pdf', 'info')">
681
+ <div class="w-10 h-10 bg-red-50 rounded-lg flex items-center justify-center">
682
+ <i data-lucide="file-text" class="w-5 h-5 text-red-500"></i>
683
+ </div>
684
+ <div class="flex-1 min-w-0">
685
+ <p class="text-sm font-medium text-slate-900 truncate">ID_Verification.pdf</p>
686
+ <p class="text-xs text-slate-500">PDF • 2.4 MB</p>
687
+ </div>
688
+ <i data-lucide="download" class="w-4 h-4 text-slate-400 opacity-0 group-hover:opacity-100 transition-all"></i>
689
+ </div>
690
+
691
+ <div class="flex items-center gap-3 p-3 hover:bg-slate-50 rounded-lg cursor-pointer transition-all group" onclick="showToast('Opening Certification_2026.pdf', 'info')">
692
+ <div class="w-10 h-10 bg-emerald-50 rounded-lg flex items-center justify-center">
693
+ <i data-lucide="file-check" class="w-5 h-5 text-emerald-500"></i>
694
+ </div>
695
+ <div class="flex-1 min-w-0">
696
+ <p class="text-sm font-medium text-slate-900 truncate">Certification_2026.pdf</p>
697
+ <p class="text-xs text-slate-500">PDF • 1.8 MB</p>
698
+ </div>
699
+ <i data-lucide="download" class="w-4 h-4 text-slate-400 opacity-0 group-hover:opacity-100 transition-all"></i>
700
+ </div>
701
+
702
+ <div class="flex items-center gap-3 p-3 hover:bg-slate-50 rounded-lg cursor-pointer transition-all group" onclick="showToast('Opening Medical_Record.pdf', 'info')">
703
+ <div class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center">
704
+ <i data-lucide="file-heart" class="w-5 h-5 text-blue-500"></i>
705
+ </div>
706
+ <div class="flex-1 min-w-0">
707
+ <p class="text-sm font-medium text-slate-900 truncate">Medical_Record.pdf</p>
708
+ <p class="text-xs text-slate-500">PDF • 3.2 MB</p>
709
+ </div>
710
+ <i data-lucide="download" class="w-4 h-4 text-slate-400 opacity-0 group-hover:opacity-100 transition-all"></i>
711
+ </div>
712
+ </div>
713
+
714
+ <div class="flex gap-2 mt-4">
715
+ <button class="flex-1 py-2 text-sm font-medium text-primary bg-primary-light rounded-lg hover:bg-blue-100 transition-all" onclick="showToast('Upload dialog opened', 'info')">
716
+ Upload File
717
+ </button>
718
+ <button class="flex-1 py-2 text-sm font-medium text-slate-700 bg-slate-100 rounded-lg hover:bg-slate-200 transition-all" onclick="showToast('Document library opened', 'info')">
719
+ View All
720
+ </button>
721
+ </div>
722
+ </div>
723
+ </div>
724
+
725
+ <!-- Quick Stats Row -->
726
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
727
+ <div class="bg-white rounded-xl border border-border p-4">
728
+ <p class="text-xs text-slate-500 uppercase tracking-wider">Total Visits</p>
729
+ <p class="text-2xl font-semibold text-slate-900 mt-1">8</p>
730
+ <p class="text-xs text-emerald-600 mt-1 flex items-center gap-1">
731
+ <i data-lucide="trending-up" class="w-3 h-3"></i>
732
+ +2 this month
733
+ </p>
734
+ </div>
735
+ <div class="bg-white rounded-xl border border-border p-4">
736
+ <p class="text-xs text-slate-500 uppercase tracking-wider">Days Since Last Visit</p>
737
+ <p class="text-2xl font-semibold text-slate-900 mt-1">12</p>
738
+ <p class="text-xs text-slate-500 mt-1">Regular patient</p>
739
+ </div>
740
+ <div class="bg-white rounded-xl border border-border p-4">
741
+ <p class="text-xs text-slate-500 uppercase tracking-wider">Active Prescriptions</p>
742
+ <p class="text-2xl font-semibold text-slate-900 mt-1">2</p>
743
+ <p class="text-xs text-emerald-600 mt-1">Both valid</p>
744
+ </div>
745
+ <div class="bg-white rounded-xl border border-border p-4">
746
+ <p class="text-xs text-slate-500 uppercase tracking-wider">Outstanding Balance</p>
747
+ <p class="text-2xl font-semibold text-slate-900 mt-1">$0</p>
748
+ <p class="text-xs text-emerald-600 mt-1">Account current</p>
749
+ </div>
750
+ </div>
751
+ </div>
752
+ </div>
753
+ </main>
754
+ </div>
755
+
756
+ <script>
757
+ // Initialize Lucide icons
758
+ lucide.createIcons();
759
+
760
+ // Toast notification system
761
+ function showToast(message, type = 'success') {
762
+ const container = document.getElementById('toast-container');
763
+ const toast = document.createElement('div');
764
+
765
+ const colors = {
766
+ success: 'bg-emerald-50 border-emerald-200 text-emerald-800',
767
+ error: 'bg-red-50 border-red-200 text-red-800',
768
+ info: 'bg-blue-50 border-blue-200 text-blue-800'
769
+ };
770
+
771
+ const icons = {
772
+ success: 'check-circle',
773
+ error: 'x-circle',
774
+ info: 'info'
775
+ };
776
+
777
+ toast.className = `flex items-center gap-3 px-4 py-3 rounded-xl border shadow-lg animate-slide-in ${colors[type]}`;
778
+ toast.innerHTML = `
779
+ <i data-lucide="${icons[type]}" class="w-5 h-5"></i>
780
+ <span class="text-sm font-medium">${message}</span>
781
+ `;
782
+
783
+ container.appendChild(toast);
784
+ lucide.createIcons({ nodes: [toast] });
785
+
786
+ setTimeout(() => {
787
+ toast.style.opacity = '0';
788
+ toast.style.transform = 'translateX(100%)';
789
+ toast.style.transition = 'all 0.3s ease';
790
+ setTimeout(() => toast.remove(), 300);
791
+ }, 3000);
792
+ }
793
+
794
+ // Sidebar active state
795
+ function setActiveSidebar(btn) {
796
+ const buttons = document.querySelectorAll('aside nav button');
797
+ buttons.forEach(b => {
798
+ b.classList.remove('text-primary', 'bg-primary-light');
799
+ b.classList.add('text-slate-500');
800
+ });
801
+ btn.classList.remove('text-slate-500');
802
+ btn.classList.add('text-primary', 'bg-primary-light');
803
+ }
804
+
805
+ // Task toggle
806
+ function toggleTask(checkbox) {
807
+ const label = checkbox.closest('label');
808
+ const text = label.querySelector('span:not(.px-2)');
809
+
810
+ if (checkbox.checked) {
811
+ text.classList.add('line-through', 'text-slate-500');
812
+ text.classList.remove('text-slate-700', 'font-medium', 'text-amber-900');
813
+ showToast('Task completed!', 'success');
814
+ } else {
815
+ text.classList.remove('line-through', 'text-slate-500');
816
+ text.classList.add('text-slate-700');
817
+ }
818
+ }
819
+
820
+ // Dropdown toggles
821
+ document.getElementById('user-menu-btn').addEventListener('click', (e) => {
822
+ e.stopPropagation();
823
+ const dropdown = document.getElementById('user-dropdown');
824
+ dropdown.classList.toggle('hidden');
825
+ });
826
+
827
+ document.getElementById('actions-dropdown-btn').addEventListener('click', (e) => {
828
+ e.stopPropagation();
829
+ const dropdown = document.getElementById('actions-dropdown');
830
+ dropdown.classList.toggle('hidden');
831
+ });
832
+
833
+ // Close dropdowns on outside click
834
+ document.addEventListener('click', () => {
835
+ document.getElementById('user-dropdown').classList.add('hidden');
836
+ document.getElementById('actions-dropdown').classList.add('hidden');
837
+ });
838
+
839
+ // Mobile menu toggle
840
+ let patientMenuOpen = false;
841
+ function togglePatientMenu() {
842
+ const menu = document.getElementById('patient-menu');
843
+ const icon = document.getElementById('menu-toggle-icon');
844
+ patientMenuOpen = !patientMenuOpen;
845
+
846
+ if (patientMenuOpen) {
847
+ menu.classList.remove('-translate-x-full');
848
+ icon.setAttribute('data-lucide', 'chevron-left');
849
+ } else {
850
+ menu.classList.add('-translate-x-full');
851
+ icon.setAttribute('data-lucide', 'chevron-right');
852
+ }
853
+ lucide.createIcons();
854
+ }
855
+
856
+ // Initialize mobile menu state
857
+ if (window.innerWidth < 1024) {
858
+ document.getElementById('patient-menu').classList.add('-translate-x-full');
859
+ }
860
+
861
+ // Sticky patient header shadow on scroll
862
+ const patientHeader = document.getElementById('patient-header');
863
+ window.addEventListener('scroll', () => {
864
+ if (window.scrollY > 10) {
865
+ patientHeader.classList.add('scrolled');
866
+ } else {
867
+ patientHeader.classList.remove('scrolled');
868
+ }
869
+ });
870
+
871
+ // Responsive handling
872
+ window.addEventListener('resize', () => {
873
+ const menu = document.getElementById('patient-menu');
874
+ if (window.innerWidth >= 1024) {
875
+ menu.classList.remove('-translate-x-full');
876
+ patientMenuOpen = false;
877
+ } else if (!patientMenuOpen) {
878
+ menu.classList.add('-translate-x-full');
879
+ }
880
+ });
881
+ </script>
882
+ <script src="https://deepsite.hf.co/deepsite-badge.js"></script>
883
+ </body>
884
+ </html>