Hugging Face's logo

Spaces:
thors1
/
deepsite-project-tyz83
Running

App Files Community
thors1 commited on
Commit
606fb3e
·
verified ·
1 Parent(s): 6ca12d1

Initial DeepSite commit

Browse files
Files changed (4) hide show
  1. README.md +9 -6
  2. index.html +517 -19
  3. script.js +203 -0
  4. style.css +103 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Deepsite Project Tyz83
3
- emoji: 🦀
4
- colorFrom: gray
5
- colorTo: green
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: green
4
+ colorTo: gray
 
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,517 @@
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>VerifyMC - Notifications</title>
7
+
8
+ <!-- Inter Font -->
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
+
13
+ <!-- Tailwind CSS -->
14
+ <script src="https://cdn.tailwindcss.com"></script>
15
+
16
+ <!-- Custom Configuration -->
17
+ <script>
18
+ tailwind.config = {
19
+ theme: {
20
+ extend: {
21
+ fontFamily: {
22
+ sans: ['Inter', 'sans-serif'],
23
+ },
24
+ colors: {
25
+ primary: '#2563eb',
26
+ background: '#f8fafc',
27
+ border: '#e5e7eb',
28
+ }
29
+ }
30
+ }
31
+ }
32
+ </script>
33
+
34
+ <!-- Lucide Icons -->
35
+ <script src="https://unpkg.com/lucide@latest"></script>
36
+
37
+ <!-- Custom Styles -->
38
+ <link rel="stylesheet" href="style.css">
39
+ </head>
40
+ <body class="font-sans bg-background text-gray-900 antialiased">
41
+
42
+ <!-- Header -->
43
+ <header class="sticky top-0 z-50 bg-white border-b border-border h-16 flex items-center justify-between px-4 lg:px-6 shadow-sm">
44
+ <!-- Left: Logo -->
45
+ <div class="flex items-center gap-4">
46
+ <button id="mobile-menu-btn" class="lg:hidden p-2 hover:bg-gray-100 rounded-lg transition-colors">
47
+ <i data-lucide="menu" class="w-5 h-5 text-gray-600"></i>
48
+ </button>
49
+ <div class="flex items-center gap-2">
50
+ <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
51
+ <i data-lucide="activity" class="w-5 h-5 text-white"></i>
52
+ </div>
53
+ <span class="text-xl font-bold text-gray-900 tracking-tight">VerifyMC</span>
54
+ </div>
55
+ </div>
56
+
57
+ <!-- Center: Search -->
58
+ <div class="hidden md:flex flex-1 max-w-2xl mx-8">
59
+ <div class="relative w-full">
60
+ <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"></i>
61
+ <input
62
+ type="text"
63
+ placeholder="Search patients, appointments, records..."
64
+ class="w-full pl-10 pr-4 py-2 bg-gray-50 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
65
+ >
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Right: Actions -->
70
+ <div class="flex items-center gap-2">
71
+ <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors relative">
72
+ <i data-lucide="help-circle" class="w-5 h-5 text-gray-600"></i>
73
+ </button>
74
+ <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors relative">
75
+ <i data-lucide="bell" class="w-5 h-5 text-gray-600"></i>
76
+ <span class="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full"></span>
77
+ </button>
78
+ <div class="relative ml-2">
79
+ <button id="user-dropdown-btn" class="flex items-center gap-2 p-1.5 hover:bg-gray-100 rounded-lg transition-colors">
80
+ <img src="http://static.photos/people/200x200/42" alt="User" class="w-8 h-8 rounded-full object-cover border border-border">
81
+ <i data-lucide="chevron-down" class="w-4 h-4 text-gray-500 hidden lg:block"></i>
82
+ </button>
83
+ <!-- Dropdown Menu -->
84
+ <div id="user-dropdown" class="hidden absolute right-0 top-full mt-2 w-48 bg-white rounded-xl border border-border shadow-lg py-1">
85
+ <a href="#" class="flex items-center gap-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50">
86
+ <i data-lucide="user" class="w-4 h-4"></i>
87
+ Profile
88
+ </a>
89
+ <a href="#" class="flex items-center gap-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50">
90
+ <i data-lucide="settings" class="w-4 h-4"></i>
91
+ Settings
92
+ </a>
93
+ <div class="border-t border-border my-1"></div>
94
+ <a href="#" class="flex items-center gap-2 px-4 py-2.5 text-sm-red-600 hover:bg-gray-50 text-red-600">
95
+ <i data-lucide="log-out" class="w-4 h-4"></i>
96
+ Sign out
97
+ </a>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </header>
102
+
103
+ <div class="flex min-h-[calc(100vh-64px)]">
104
+ <!-- Sidebar -->
105
+ <aside id="sidebar" class="fixed lg:sticky top-16 left-0 z-40 w-16 lg:w-20 bg-white border-r border-border h-[calc(100vh-64px)] overflow-y-auto transform -translate-x-full lg:translate-x-0 transition-transform duration-200 ease-in-out">
106
+ <nav class="flex flex-col items-center py-4 gap-1">
107
+ <a href="#" class="w-12 h-12 flex items-center justify-center rounded-xl text-gray-500 hover:bg-gray-50 hover:text-primary transition-all group relative">
108
+ <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
109
+ <span class="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none lg:hidden">Dashboard</span>
110
+ </a>
111
+ <a href="#" class="w-12 h-12 flex items-center justify-center rounded-xl text-gray-500 hover:bg-gray-50 hover:text-primary transition-all group relative">
112
+ <i data-lucide="users" class="w-5 h-5"></i>
113
+ <span class="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none lg:hidden">Patients</span>
114
+ </a>
115
+ <a href="#" class="w-12 h-12 flex items-center justify-center rounded-xl text-gray-500 hover:bg-gray-50 hover:text-primary transition-all group relative">
116
+ <i data-lucide="calendar" class="w-5 h-5"></i>
117
+ <span class="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none lg:hidden">Appointments</span>
118
+ </a>
119
+ <a href="#" class="w-12 h-12 flex items-center justify-center rounded-xl text-gray-500 hover:bg-gray-50 hover:text-primary transition-all group relative">
120
+ <i data-lucide="stethoscope" class="w-5 h-5"></i>
121
+ <span class="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none lg:hidden">Encounters</span>
122
+ </a>
123
+ <a href="#" class="w-12 h-12 flex items-center justify-center rounded-xl text-gray-500 hover:bg-gray-50 hover:text-primary transition-all group relative">
124
+ <i data-lucide="file-text" class="w-5 h-5"></i>
125
+ <span class="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none lg:hidden">Forms</span>
126
+ </a>
127
+ <a href="#" class="w-12 h-12 flex items-center justify-center rounded-xl text-gray-500 hover:bg-gray-50 hover:text-primary transition-all group relative">
128
+ <i data-lucide="folder" class="w-5 h-5"></i>
129
+ <span class="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none lg:hidden">Documents</span>
130
+ </a>
131
+ <a href="#" class="w-12 h-12 flex items-center justify-center rounded-xl text-gray-500 hover:bg-gray-50 hover:text-primary transition-all group relative">
132
+ <i data-lucide="credit-card" class="w-5 h-5"></i>
133
+ <span class="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none lg:hidden">Billing</span>
134
+ </a>
135
+ <a href="#" class="w-12 h-12 flex items-center justify-center rounded-xl text-gray-500 hover:bg-gray-50 hover:text-primary transition-all group relative">
136
+ <i data-lucide="bar-chart-3" class="w-5 h-5"></i>
137
+ <span class="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none lg:hidden">Reports</span>
138
+ </a>
139
+ <a href="#" class="w-12 h-12 flex items-center justify-center rounded-xl text-gray-500 hover:bg-gray-50 hover:text-primary transition-all group relative">
140
+ <i data-lucide="message-square" class="w-5 h-5"></i>
141
+ <span class="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none lg:hidden">Messages</span>
142
+ </a>
143
+
144
+ <div class="w-8 h-px bg-border my-2"></div>
145
+
146
+ <a href="#" class="w-12 h-12 flex items-center justify-center rounded-xl text-primary bg-primary/10 transition-all group relative">
147
+ <i data-lucide="bell" class="w-5 h-5"></i>
148
+ <span class="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none lg:hidden">Notifications</span>
149
+ </a>
150
+ <a href="#" class="w-12 h-12 flex items-center justify-center rounded-xl text-gray-500 hover:bg-gray-50 hover:text-primary transition-all group relative">
151
+ <i data-lucide="settings" class="w-5 h-5"></i>
152
+ <span class="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none lg:hidden">Settings</span>
153
+ </a>
154
+ <a href="#" class="w-12 h-12 flex items-center justify-center rounded-xl text-gray-500 hover:bg-gray-50 hover:text-primary transition-all group relative">
155
+ <i data-lucide="user" class="w-5 h-5"></i>
156
+ <span class="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none lg:hidden">Account</span>
157
+ </a>
158
+ </nav>
159
+ </aside>
160
+
161
+ <!-- Mobile Sidebar Overlay -->
162
+ <div id="sidebar-overlay" class="fixed inset-0 bg-black/50 z-30 lg:hidden hidden"></div>
163
+
164
+ <!-- Main Content -->
165
+ <main class="flex-1 p-4 lg:p-8 overflow-x-hidden">
166
+ <div class="max-w-[1280px] mx-auto">
167
+ <!-- Page Header -->
168
+ <div class="mb-8">
169
+ <h1 class="text-2xl lg:text-3xl font-bold text-gray-900 mb-2">Notifications</h1>
170
+ <p class="text-gray-500 text-sm lg:text-base">Manage notification settings for the clinic and users.</p>
171
+ </div>
172
+
173
+ <!-- Tabs -->
174
+ <div class="bg-white rounded-xl border border-border p-1 mb-6 inline-flex flex-wrap gap-1 w-full lg:w-auto">
175
+ <button class="tab-btn flex-1 lg:flex-none px-4 py-2.5 text-sm font-medium rounded-lg transition-all bg-primary text-white shadow-sm" data-tab="clinic">
176
+ Clinic Notifications
177
+ </button>
178
+ <button class="tab-btn flex-1 lg:flex-none px-4 py-2.5 text-sm font-medium rounded-lg transition-all text-gray-600 hover:bg-gray-50" data-tab="provider">
179
+ Provider Notifications
180
+ </button>
181
+ <button class="tab-btn flex-1 lg:flex-none px-4 py-2.5 text-sm font-medium rounded-lg transition-all text-gray-600 hover:bg-gray-50" data-tab="staff">
182
+ Staff Notifications
183
+ </button>
184
+ <button class="tab-btn flex-1 lg:flex-none px-4 py-2.5 text-sm font-medium rounded-lg transition-all text-gray-600 hover:bg-gray-50" data-tab="patient">
185
+ Patient Notifications
186
+ </button>
187
+ </div>
188
+
189
+ <!-- Tab Content: Clinic Notifications -->
190
+ <div id="tab-clinic" class="tab-content">
191
+ <div class="bg-white rounded-xl border border-border p-6">
192
+ <div class="flex items-center gap-3 mb-6 pb-4 border-b border-border">
193
+ <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
194
+ <i data-lucide="building-2" class="w-5 h-5 text-primary"></i>
195
+ </div>
196
+ <div>
197
+ <h2 class="text-lg font-semibold text-gray-900">System Notifications</h2>
198
+ <p class="text-sm text-gray-500">Configure alerts for clinic-wide activities</p>
199
+ </div>
200
+ </div>
201
+
202
+ <div class="space-y-4">
203
+ <label class="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer group">
204
+ <div class="flex items-start gap-3">
205
+ <div class="w-5 h-5 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
206
+ <i data-lucide="user-plus" class="w-3 h-3 text-green-600"></i>
207
+ </div>
208
+ <div>
209
+ <p class="font-medium text-gray-900 group-hover:text-primary transition-colors">New patient registration</p>
210
+ <p class="text-sm text-gray-500 mt-1">Receive alerts when new patients register through the portal</p>
211
+ </div>
212
+ </div>
213
+ <div class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors toggle-switch">
214
+ <span class="translate-x-6 inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-sm"></span>
215
+ </div>
216
+ </label>
217
+
218
+ <label class="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer group">
219
+ <div class="flex items-start gap-3">
220
+ <div class="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0 mt-0.5">
221
+ <i data-lucide="calendar-x" class="w-3 h-3 text-red-600"></i>
222
+ </div>
223
+ <div>
224
+ <p class="font-medium text-gray-900 group-hover:text-primary transition-colors">Appointment cancellations</p>
225
+ <p class="text-sm text-gray-500 mt-1">Get notified when appointments are cancelled by patients</p>
226
+ </div>
227
+ </div>
228
+ <div class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors toggle-switch">
229
+ <span class="translate-x-6 inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-sm"></span>
230
+ </div>
231
+ </label>
232
+
233
+ <label class="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer group">
234
+ <div class="flex items-start gap-3">
235
+ <div class="w-5 h-5 rounded-full bg-amber-100 flex items-center justify-center flex-shrink-0 mt-0.5">
236
+ <i data-lucide="alert-triangle" class="w-3 h-3 text-amber-600"></i>
237
+ </div>
238
+ <div>
239
+ <p class="font-medium text-gray-900 group-hover:text-primary transition-colors">System alerts</p>
240
+ <p class="text-sm text-gray-500 mt-1">Important system updates and maintenance notifications</p>
241
+ </div>
242
+ </div>
243
+ <div class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 transition-colors toggle-switch">
244
+ <span class="translate-x-1 inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-sm"></span>
245
+ </div>
246
+ </label>
247
+
248
+ <label class="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer group">
249
+ <div class="flex items-start gap-3">
250
+ <div class="w-5 h-5 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5">
251
+ <i data-lucide="receipt" class="w-3 h-3 text-purple-600"></i>
252
+ </div>
253
+ <div>
254
+ <p class="font-medium text-gray-900 group-hover:text-primary transition-colors">Billing alerts</p>
255
+ <p class="text-sm text-gray-500 mt-1">Notifications for payment failures and invoice issues</p>
256
+ </div>
257
+ </div>
258
+ <div class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors toggle-switch">
259
+ <span class="translate-x-6 inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-sm"></span>
260
+ </div>
261
+ </label>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <!-- Tab Content: Provider Notifications -->
267
+ <div id="tab-provider" class="tab-content hidden">
268
+ <div class="bg-white rounded-xl border border-border p-6">
269
+ <div class="flex items-center gap-3 mb-6 pb-4 border-b border-border">
270
+ <div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center">
271
+ <i data-lucide="stethoscope" class="w-5 h-5 text-indigo-600"></i>
272
+ </div>
273
+ <div>
274
+ <h2 class="text-lg font-semibold text-gray-900">Provider Alerts</h2>
275
+ <p class="text-sm text-gray-500">Notifications for healthcare providers</p>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="space-y-4">
280
+ <label class="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer group">
281
+ <div class="flex items-start gap-3">
282
+ <div class="w-5 h-5 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
283
+ <i data-lucide="calendar-plus" class="w-3 h-3 text-blue-600"></i>
284
+ </div>
285
+ <div>
286
+ <p class="font-medium text-gray-900 group-hover:text-primary transition-colors">New appointments</p>
287
+ <p class="text-sm text-gray-500 mt-1">Alert when new appointments are scheduled</p>
288
+ </div>
289
+ </div>
290
+ <div class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors toggle-switch">
291
+ <span class="translate-x-6 inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-sm"></span>
292
+ </div>
293
+ </label>
294
+
295
+ <label class="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer group">
296
+ <div class="flex items-start gap-3">
297
+ <div class="w-5 h-5 rounded-full bg-orange-100 flex items-center justify-center flex-shrink-0 mt-0.5">
298
+ <i data-lucide="clock" class="w-3 h-3 text-orange-600"></i>
299
+ </div>
300
+ <div>
301
+ <p class="font-medium text-gray-900 group-hover:text-primary transition-colors">Appointment reminders</p>
302
+ <p class="text-sm text-gray-500 mt-1">Upcoming appointment notifications</p>
303
+ </div>
304
+ </div>
305
+ <div class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors toggle-switch">
306
+ <span class="translate-x-6 inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-sm"></span>
307
+ </div>
308
+ </label>
309
+
310
+ <label class="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer group">
311
+ <div class="flex items-start gap-3">
312
+ <div class="w-5 h-5 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
313
+ <i data-lucide="message-circle" class="w-3 h-3 text-green-600"></i>
314
+ </div>
315
+ <div>
316
+ <p class="font-medium text-gray-900 group-hover:text-primary transition-colors">Patient messages</p>
317
+ <p class="text-sm text-gray-500 mt-1">Notify when patients send secure messages</p>
318
+ </div>
319
+ </div>
320
+ <div class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 transition-colors toggle-switch">
321
+ <span class="translate-x-1 inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-sm"></span>
322
+ </div>
323
+ </label>
324
+
325
+ <label class="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer group">
326
+ <div class="flex items-start gap-3">
327
+ <div class="w-5 h-5 rounded-full bg-cyan-100 flex items-center justify-center flex-shrink-0 mt-0.5">
328
+ <i data-lucide="pill" class="w-3 h-3 text-cyan-600"></i>
329
+ </div>
330
+ <div>
331
+ <p class="font-medium text-gray-900 group-hover:text-primary transition-colors">Prescription requests</p>
332
+ <p class="text-sm text-gray-500 mt-1">Alert for refill requests from patients</p>
333
+ </div>
334
+ </div>
335
+ <div class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors toggle-switch">
336
+ <span class="translate-x-6 inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-sm"></span>
337
+ </div>
338
+ </label>
339
+ </div>
340
+ </div>
341
+ </div>
342
+
343
+ <!-- Tab Content: Staff Notifications -->
344
+ <div id="tab-staff" class="tab-content hidden">
345
+ <div class="bg-white rounded-xl border border-border p-6">
346
+ <div class="flex items-center gap-3 mb-6 pb-4 border-b border-border">
347
+ <div class="w-10 h-10 rounded-lg bg-pink-50 flex items-center justify-center">
348
+ <i data-lucide="users" class="w-5 h-5 text-pink-600"></i>
349
+ </div>
350
+ <div>
351
+ <h2 class="text-lg font-semibold text-gray-900">Staff Alerts</h2>
352
+ <p class="text-sm text-gray-500">Administrative and operational notifications</p>
353
+ </div>
354
+ </div>
355
+
356
+ <div class="space-y-4">
357
+ <label class="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer group">
358
+ <div class="flex items-start gap-3">
359
+ <div class="w-5 h-5 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
360
+ <i data-lucide="calendar-days" class="w-3 h-3 text-blue-600"></i>
361
+ </div>
362
+ <div>
363
+ <p class="font-medium text-gray-900 group-hover:text-primary transition-colors">Schedule updates</p>
364
+ <p class="text-sm text-gray-500 mt-1">Changes to staff schedules and shifts</p>
365
+ </div>
366
+ </div>
367
+ <div class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 transition-colors toggle-switch">
368
+ <span class="translate-x-1 inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-sm"></span>
369
+ </div>
370
+ </label>
371
+
372
+ <label class="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer group">
373
+ <div class="flex items-start gap-3">
374
+ <div class="w-5 h-5 rounded-full bg-teal-100 flex items-center justify-center flex-shrink-0 mt-0.5">
375
+ <i data-lucide="clipboard-check" class="w-3 h-3 text-teal-600"></i>
376
+ </div>
377
+ <div>
378
+ <p class="font-medium text-gray-900 group-hover:text-primary transition-colors">Patient check-in alerts</p>
379
+ <p class="text-sm text-gray-500 mt-1">Real-time notifications when patients arrive</p>
380
+ </div>
381
+ </div>
382
+ <div class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors toggle-switch">
383
+ <span class="translate-x-6 inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-sm"></span>
384
+ </div>
385
+ </label>
386
+
387
+ <label class="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer group">
388
+ <div class="flex items-start gap-3">
389
+ <div class="w-5 h-5 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5">
390
+ <i data-lucide="check-square" class="w-3 h-3 text-purple-600"></i>
391
+ </div>
392
+ <div>
393
+ <p class="font-medium text-gray-900 group-hover:text-primary transition-colors">Task assignments</p>
394
+ <p class="text-sm text-gray-500 mt-1">New tasks and to-do items assigned to you</p>
395
+ </div>
396
+ </div>
397
+ <div class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors toggle-switch">
398
+ <span class="translate-x-6 inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-sm"></span>
399
+ </div>
400
+ </label>
401
+
402
+ <label class="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer group">
403
+ <div class="flex items-start gap-3">
404
+ <div class="w-5 h-5 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5">
405
+ <i data-lucide="message-square" class="w-3 h-3 text-gray-600"></i>
406
+ </div>
407
+ <div>
408
+ <p class="font-medium text-gray-900 group-hover:text-primary transition-colors">Internal messages</p>
409
+ <p class="text-sm text-gray-500 mt-1">Direct messages from team members</p>
410
+ </div>
411
+ </div>
412
+ <div class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors toggle-switch">
413
+ <span class="translate-x-6 inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-sm"></span>
414
+ </div>
415
+ </label>
416
+ </div>
417
+ </div>
418
+ </div>
419
+
420
+ <!-- Tab Content: Patient Notifications -->
421
+ <div id="tab-patient" class="tab-content hidden">
422
+ <div class="bg-white rounded-xl border border-border p-6">
423
+ <div class="flex items-center gap-3 mb-6 pb-4 border-b border-border">
424
+ <div class="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center">
425
+ <i data-lucide="heart" class="w-5 h-5 text-green-600"></i>
426
+ </div>
427
+ <div>
428
+ <h2 class="text-lg font-semibold text-gray-900">Patient Notifications</h2>
429
+ <p class="text-sm text-gray-500">Communication preferences for patients</p>
430
+ </div>
431
+ </div>
432
+
433
+ <div class="space-y-4">
434
+ <label class="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer group">
435
+ <div class="flex items-start gap-3">
436
+ <div class="w-5 h-5 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 mt-0.5">
437
+ <i data-lucide="check-circle" class="w-3 h-3 text-green-600"></i>
438
+ </div>
439
+ <div>
440
+ <p class="font-medium text-gray-900 group-hover:text-primary transition-colors">Appointment confirmations</p>
441
+ <p class="text-sm text-gray-500 mt-1">Send confirmation after successful booking</p>
442
+ </div>
443
+ </div>
444
+ <div class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors toggle-switch">
445
+ <span class="translate-x-6 inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-sm"></span>
446
+ </div>
447
+ </label>
448
+
449
+ <label class="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer group">
450
+ <div class="flex items-start gap-3">
451
+ <div class="w-5 h-5 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
452
+ <i data-lucide="bell" class="w-3 h-3 text-blue-600"></i>
453
+ </div>
454
+ <div>
455
+ <p class="font-medium text-gray-900 group-hover:text-primary transition-colors">Appointment reminders</p>
456
+ <p class="text-sm text-gray-500 mt-1">24-hour and 1-hour reminder notifications</p>
457
+ </div>
458
+ </div>
459
+ <div class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary transition-colors toggle-switch">
460
+ <span class="translate-x-6 inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-sm"></span>
461
+ </div>
462
+ </label>
463
+
464
+ <label class="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer group">
465
+ <div class="flex items-start gap-3">
466
+ <div class="w-5 h-5 rounded-full bg-orange-100 flex items-center justify-center flex-shrink-0 mt-0.5">
467
+ <i data-lucide="pill" class="w-3 h-3 text-orange-600"></i>
468
+ </div>
469
+ <div>
470
+ <p class="font-medium text-gray-900 group-hover:text-primary transition-colors">Prescription updates</p>
471
+ <p class="text-sm text-gray-500 mt-1">Notify when prescriptions are ready or updated</p>
472
+ </div>
473
+ </div>
474
+ <div class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 transition-colors toggle-switch">
475
+ <span class="translate-x-1 inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-sm"></span>
476
+ </div>
477
+ </label>
478
+
479
+ <label class="flex items-center justify-between p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer group">
480
+ <div class="flex items-start gap-3">
481
+ <div class="w-5 h-5 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 mt-0.5">
482
+ <i data-lucide="megaphone" class="w-3 h-3 text-purple-600"></i>
483
+ </div>
484
+ <div>
485
+ <p class="font-medium text-gray-900 group-hover:text-primary transition-colors">Clinic announcements</p>
486
+ <p class="text-sm text-gray-500 mt-1">General updates and newsletters from the clinic</p>
487
+ </div>
488
+ </div>
489
+ <div class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 transition-colors toggle-switch">
490
+ <span class="translate-x-1 inline-block h-4 w-4 transform rounded-full bg-white transition-transform shadow-sm"></span>
491
+ </div>
492
+ </label>
493
+ </div>
494
+ </div>
495
+ </div>
496
+
497
+ <!-- Action Buttons -->
498
+ <div class="flex flex-col sm:flex-row items-center justify-end gap-3 mt-8 pb-8">
499
+ <button class="w-full sm:w-auto px-6 py-2.5 border border-border text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-200">
500
+ Cancel
501
+ </button>
502
+ <button class="w-full sm:w-auto px-6 py-2.5 bg-primary text-white font-medium rounded-lg hover:bg-blue-700 transition-colors shadow-sm shadow-blue-200 focus:outline-none focus:ring-2 focus:ring-primary/20 flex items-center justify-center gap-2">
503
+ <i data-lucide="save" class="w-4 h-4"></i>
504
+ Save Changes
505
+ </button>
506
+ </div>
507
+ </div>
508
+ </main>
509
+ </div>
510
+
511
+ <script src="script.js"></script>
512
+ <script>
513
+ lucide.createIcons();
514
+ </script>
515
+ <script src="https://deepsite.hf.co/deepsite-badge.js"></script>
516
+ </body>
517
+ </html>
script.js ADDED
@@ -0,0 +1,203 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // VerifyMC Medical Admin - Notifications Page JavaScript
2
+
3
+ document.addEventListener('DOMContentLoaded', function() {
4
+ // Initialize Lucide icons
5
+ lucide.createIcons();
6
+
7
+ // Mobile menu toggle
8
+ const mobileMenuBtn = document.getElementById('mobile-menu-btn');
9
+ const sidebar = document.getElementById('sidebar');
10
+ const sidebarOverlay = document.getElementById('sidebar-overlay');
11
+
12
+ function toggleMobileMenu() {
13
+ const isOpen = !sidebar.classList.contains('-translate-x-full');
14
+ if (isOpen) {
15
+ sidebar.classList.add('-translate-x-full');
16
+ sidebarOverlay.classList.add('hidden');
17
+ document.body.style.overflow = '';
18
+ } else {
19
+ sidebar.classList.remove('-translate-x-full');
20
+ sidebarOverlay.classList.remove('hidden');
21
+ document.body.style.overflow = 'hidden';
22
+ }
23
+ }
24
+
25
+ mobileMenuBtn?.addEventListener('click', toggleMobileMenu);
26
+ sidebarOverlay?.addEventListener('click', toggleMobileMenu);
27
+
28
+ // User dropdown toggle
29
+ const userDropdownBtn = document.getElementById('user-dropdown-btn');
30
+ const userDropdown = document.getElementById('user-dropdown');
31
+ let dropdownOpen = false;
32
+
33
+ userDropdownBtn?.addEventListener('click', function(e) {
34
+ e.stopPropagation();
35
+ dropdownOpen = !dropdownOpen;
36
+ if (dropdownOpen) {
37
+ userDropdown.classList.remove('hidden');
38
+ } else {
39
+ userDropdown.classList.add('hidden');
40
+ }
41
+ });
42
+
43
+ // Close dropdown when clicking outside
44
+ document.addEventListener('click', function() {
45
+ if (dropdownOpen) {
46
+ dropdownOpen = false;
47
+ userDropdown?.classList.add('hidden');
48
+ }
49
+ });
50
+
51
+ // Tab switching functionality
52
+ const tabBtns = document.querySelectorAll('.tab-btn');
53
+ const tabContents = document.querySelectorAll('.tab-content');
54
+
55
+ tabBtns.forEach(btn => {
56
+ btn.addEventListener('click', function() {
57
+ const tabName = this.getAttribute('data-tab');
58
+
59
+ // Update button styles
60
+ tabBtns.forEach(b => {
61
+ b.classList.remove('bg-primary', 'text-white', 'shadow-sm');
62
+ b.classList.add('text-gray-600', 'hover:bg-gray-50');
63
+ });
64
+ this.classList.remove('text-gray-600', 'hover:bg-gray-50');
65
+ this.classList.add('bg-primary', 'text-white', 'shadow-sm');
66
+
67
+ // Show corresponding content
68
+ tabContents.forEach(content => {
69
+ content.classList.add('hidden');
70
+ });
71
+ const activeContent = document.getElementById(`tab-${tabName}`);
72
+ if (activeContent) {
73
+ activeContent.classList.remove('hidden');
74
+ }
75
+ });
76
+ });
77
+
78
+ // Toggle switches functionality
79
+ const toggleSwitches = document.querySelectorAll('.toggle-switch');
80
+
81
+ toggleSwitches.forEach(toggle => {
82
+ toggle.addEventListener('click', function() {
83
+ const isEnabled = this.classList.contains('bg-primary');
84
+ const span = this.querySelector('span');
85
+
86
+ if (isEnabled) {
87
+ // Disable
88
+ this.classList.remove('bg-primary');
89
+ this.classList.add('bg-gray-200');
90
+ span.classList.remove('translate-x-6');
91
+ span.classList.add('translate-x-1');
92
+ } else {
93
+ // Enable
94
+ this.classList.remove('bg-gray-200');
95
+ this.classList.add('bg-primary');
96
+ span.classList.remove('translate-x-1');
97
+ span.classList.add('translate-x-6');
98
+ }
99
+ });
100
+ });
101
+
102
+ // Save Changes button interaction
103
+ const saveBtn = document.querySelector('button:has([data-lucide="save"])');
104
+ const cancelBtn = document.querySelector('button:contains("Cancel")') ||
105
+ Array.from(document.querySelectorAll('button')).find(b => b.textContent.includes('Cancel'));
106
+
107
+ saveBtn?.addEventListener('click', function() {
108
+ // Show loading state
109
+ const originalContent = this.innerHTML;
110
+ this.disabled = true;
111
+ this.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Saving...';
112
+ lucide.createIcons();
113
+
114
+ // Simulate API call
115
+ setTimeout(() => {
116
+ this.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i> Saved!';
117
+ lucide.createIcons();
118
+
119
+ setTimeout(() => {
120
+ this.innerHTML = originalContent;
121
+ this.disabled = false;
122
+ lucide.createIcons();
123
+ }, 1500);
124
+ }, 1000);
125
+ });
126
+
127
+ // Cancel button interaction
128
+ if (cancelBtn) {
129
+ cancelBtn.addEventListener('click', function() {
130
+ // Reset all toggles to default state (all enabled)
131
+ toggleSwitches.forEach(toggle => {
132
+ toggle.classList.add('bg-primary');
133
+ toggle.classList.remove('bg-gray-200');
134
+ const span = toggle.querySelector('span');
135
+ span.classList.add('translate-x-6');
136
+ span.classList.remove('translate-x-1');
137
+ });
138
+ });
139
+ }
140
+
141
+ // Search functionality (basic implementation)
142
+ const searchInput = document.querySelector('input[type="text"]');
143
+ searchInput?.addEventListener('keypress', function(e) {
144
+ if (e.key === 'Enter') {
145
+ console.log('Searching for:', this.value);
146
+ // Implement search logic here
147
+ }
148
+ });
149
+
150
+ // Handle window resize to reset mobile menu state
151
+ window.addEventListener('resize', function() {
152
+ if (window.innerWidth >= 1024) {
153
+ sidebar.classList.remove('-translate-x-full');
154
+ sidebarOverlay.classList.add('hidden');
155
+ document.body.style.overflow = '';
156
+ } else {
157
+ sidebar.classList.add('-translate-x-full');
158
+ }
159
+ });
160
+
161
+ // Keyboard navigation for tabs
162
+ document.addEventListener('keydown', function(e) {
163
+ if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
164
+ const activeTab = document.querySelector('.tab-btn.bg-primary');
165
+ const tabs = Array.from(tabBtns);
166
+ const currentIndex = tabs.indexOf(activeTab);
167
+
168
+ let newIndex;
169
+ if (e.key === 'ArrowLeft') {
170
+ newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
171
+ } else {
172
+ newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
173
+ }
174
+
175
+ tabs[newIndex].click();
176
+ tabs[newIndex].focus();
177
+ }
178
+ });
179
+
180
+ // Notification badge animation
181
+ const notificationBell = document.querySelector('[data-lucide="bell"]')?.parentElement;
182
+ if (notificationBell) {
183
+ notificationBell.addEventListener('click', function() {
184
+ const badge = this.querySelector('span');
185
+ if (badge) {
186
+ badge.style.animation = 'pulse 0.5s ease-in-out';
187
+ setTimeout(() => {
188
+ badge.style.animation = '';
189
+ }, 500);
190
+ }
191
+ });
192
+ }
193
+ });
194
+
195
+ // Add pulse animation keyframes dynamically
196
+ const style = document.createElement('style');
197
+ style.textContent = `
198
+ @keyframes pulse {
199
+ 0%, 100% { transform: scale(1); }
200
+ 50% { transform: scale(1.2); }
201
+ }
202
+ `;
203
+ document.head.appendChild(style);
style.css CHANGED
@@ -1,28 +1,112 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Custom Styles for VerifyMC Medical Admin */
2
+
3
+ /* Smooth scrolling */
4
+ html {
5
+ scroll-behavior: smooth;
6
+ }
7
+
8
+ /* Custom Toggle Switch Animation */
9
+ .toggle-switch {
10
+ cursor: pointer;
11
+ transition: background-color 0.2s ease-in-out;
12
+ }
13
+
14
+ .toggle-switch:active span {
15
+ width: 1.25rem;
16
+ }
17
+
18
+ /* Tab transitions */
19
+ .tab-content {
20
+ animation: fadeIn 0.3s ease-in-out;
21
+ }
22
+
23
+ @keyframes fadeIn {
24
+ from {
25
+ opacity: 0;
26
+ transform: translateY(5px);
27
+ }
28
+ to {
29
+ opacity: 1;
30
+ transform: translateY(0);
31
+ }
32
+ }
33
+
34
+ /* Custom scrollbar */
35
+ ::-webkit-scrollbar {
36
+ width: 6px;
37
+ height: 6px;
38
+ }
39
+
40
+ ::-webkit-scrollbar-track {
41
+ background: #f1f1f1;
42
+ }
43
+
44
+ ::-webkit-scrollbar-thumb {
45
+ background: #cbd5e1;
46
+ border-radius: 3px;
47
+ }
48
+
49
+ ::-webkit-scrollbar-thumb:hover {
50
+ background: #94a3b8;
51
+ }
52
+
53
+ /* Sidebar tooltip enhancement */
54
+ @media (min-width: 1024px) {
55
+ .group:hover .absolute {
56
+ display: none;
57
+ }
58
+ }
59
+
60
+ /* Focus states */
61
+ button:focus-visible,
62
+ input:focus-visible {
63
+ outline: 2px solid #2563eb;
64
+ outline-offset: 2px;
65
  }
66
 
67
+ /* Card hover effects */
68
+ .bg-white {
69
+ transition: box-shadow 0.2s ease-in-out;
70
  }
71
 
72
+ .bg-white:hover {
73
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
 
 
 
74
  }
75
 
76
+ /* Mobile optimizations */
77
+ @media (max-width: 640px) {
78
+ .tab-btn {
79
+ font-size: 0.75rem;
80
+ padding: 0.5rem 0.75rem;
81
+ }
82
  }
83
 
84
+ /* Print styles */
85
+ @media print {
86
+ #sidebar,
87
+ header,
88
+ .tab-btn {
89
+ display: none !important;
90
+ }
91
+
92
+ main {
93
+ margin-left: 0 !important;
94
+ width: 100% !important;
95
+ }
96
  }
97
+
98
+ /* Loading state for buttons */
99
+ button:active:not(:disabled) {
100
+ transform: scale(0.98);
101
+ }
102
+
103
+ /* Accessibility: Respect reduced motion preference */
104
+ @media (prefers-reduced-motion: reduce) {
105
+ *,
106
+ *::before,
107
+ *::after {
108
+ animation-duration: 0.01ms !important;
109
+ animation-iteration-count: 1 !important;
110
+ transition-duration: 0.01ms !important;
111
+ }
112
+ }