Hugging Face's logo

Spaces:
thors1
/
deepsite-project-sd5up
Running

App Files Community
thors1 commited on
Commit
6d0db7d
·
verified ·
1 Parent(s): b85db58

Initial DeepSite commit

Browse files
Files changed (2) hide show
  1. README.md +9 -6
  2. index.html +449 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Deepsite Project Sd5up
3
- emoji: 🦀
4
- colorFrom: gray
5
- colorTo: pink
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: pink
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,449 @@
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 - Medical Admin</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <script src="https://unpkg.com/lucide@latest"></script>
10
+ <style>
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ background-color: #f8fafc;
14
+ }
15
+ .toggle-checkbox:checked {
16
+ right: 0;
17
+ border-color: #2563eb;
18
+ }
19
+ .toggle-checkbox:checked + .toggle-label {
20
+ background-color: #2563eb;
21
+ }
22
+ .sidebar-item:hover .tooltip {
23
+ opacity: 1;
24
+ visibility: visible;
25
+ }
26
+ /* Custom scrollbar */
27
+ ::-webkit-scrollbar {
28
+ width: 8px;
29
+ height: 8px;
30
+ }
31
+ ::-webkit-scrollbar-track {
32
+ background: #f1f5f9;
33
+ }
34
+ ::-webkit-scrollbar-thumb {
35
+ background: #cbd5e1;
36
+ border-radius: 4px;
37
+ }
38
+ ::-webkit-scrollbar-thumb:hover {
39
+ background: #94a3b8;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="text-slate-800">
44
+ <!-- Header -->
45
+ <header class="fixed top-0 left-0 right-0 h-16 bg-white border-b border-gray-200 z-50 flex items-center justify-between px-4 lg:px-6">
46
+ <!-- Left: Logo -->
47
+ <div class="flex items-center gap-4">
48
+ <button id="mobile-menu-btn" class="lg:hidden p-2 hover:bg-gray-100 rounded-lg">
49
+ <i data-lucide="menu" class="w-6 h-6 text-slate-600"></i>
50
+ </button>
51
+ <div class="flex items-center gap-2">
52
+ <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
53
+ <i data-lucide="activity" class="w-5 h-5 text-white"></i>
54
+ </div>
55
+ <span class="text-xl font-bold text-slate-800">VerifyMC</span>
56
+ </div>
57
+ </div>
58
+
59
+ <!-- Center: Search -->
60
+ <div class="hidden md:flex flex-1 max-w-xl mx-8">
61
+ <div class="relative w-full">
62
+ <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400"></i>
63
+ <input type="text" placeholder="Search patients, appointments, records..."
64
+ class="w-full pl-10 pr-4 py-2 bg-slate-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent text-sm">
65
+ </div>
66
+ </div>
67
+
68
+ <!-- Right: Icons & User -->
69
+ <div class="flex items-center gap-2">
70
+ <button class="p-2 hover:bg-gray-100 rounded-lg relative">
71
+ <i data-lucide="help-circle" class="w-5 h-5 text-slate-600"></i>
72
+ </button>
73
+ <button class="p-2 hover:bg-gray-100 rounded-lg relative">
74
+ <i data-lucide="bell" class="w-5 h-5 text-slate-600"></i>
75
+ <span class="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full"></span>
76
+ </button>
77
+ <div class="relative ml-2">
78
+ <button id="user-dropdown-btn" class="flex items-center gap-3 p-1.5 hover:bg-gray-100 rounded-lg transition-colors">
79
+ <img src="https://static.photos/face/200x200/42" alt="User" class="w-8 h-8 rounded-full object-cover border border-gray-200">
80
+ <div class="hidden lg:block text-left">
81
+ <p class="text-sm font-medium text-slate-700">Dr. Sarah Chen</p>
82
+ <p class="text-xs text-slate-500">Administrator</p>
83
+ </div>
84
+ <i data-lucide="chevron-down" class="w-4 h-4 text-slate-400 hidden lg:block"></i>
85
+ </button>
86
+ </div>
87
+ </div>
88
+ </header>
89
+
90
+ <!-- Sidebar -->
91
+ <aside id="sidebar" class="fixed left-0 top-16 bottom-0 w-16 bg-white border-r border-gray-200 z-40 flex flex-col items-center py-4 gap-1 overflow-y-auto transform -translate-x-full lg:translate-x-0 transition-transform duration-200">
92
+ <nav class="flex flex-col gap-1 w-full px-2">
93
+ <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative">
94
+ <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
95
+ <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Dashboard</span>
96
+ </a>
97
+ <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative">
98
+ <i data-lucide="users" class="w-5 h-5"></i>
99
+ <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Patients</span>
100
+ </a>
101
+ <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative">
102
+ <i data-lucide="calendar" class="w-5 h-5"></i>
103
+ <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Appointments</span>
104
+ </a>
105
+ <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative">
106
+ <i data-lucide="clipboard-list" class="w-5 h-5"></i>
107
+ <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Encounters</span>
108
+ </a>
109
+ <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative">
110
+ <i data-lucide="file-text" class="w-5 h-5"></i>
111
+ <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Forms</span>
112
+ </a>
113
+ <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative">
114
+ <i data-lucide="folder-open" class="w-5 h-5"></i>
115
+ <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Documents</span>
116
+ </a>
117
+ <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative">
118
+ <i data-lucide="credit-card" class="w-5 h-5"></i>
119
+ <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Billing</span>
120
+ </a>
121
+ <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative">
122
+ <i data-lucide="bar-chart-2" class="w-5 h-5"></i>
123
+ <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Reports</span>
124
+ </a>
125
+ <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative">
126
+ <i data-lucide="message-square" class="w-5 h-5"></i>
127
+ <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Messages</span>
128
+ </a>
129
+ <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg hover:bg-blue-50 text-slate-500 hover:text-blue-600 transition-colors relative">
130
+ <i data-lucide="settings" class="w-5 h-5"></i>
131
+ <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Settings</span>
132
+ </a>
133
+ <a href="#" class="sidebar-item group flex items-center justify-center p-3 rounded-lg bg-blue-50 text-blue-600 transition-colors relative">
134
+ <i data-lucide="user" class="w-5 h-5"></i>
135
+ <span class="tooltip absolute left-14 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 invisible transition-opacity whitespace-nowrap z-50">Account</span>
136
+ </a>
137
+ </nav>
138
+ </aside>
139
+
140
+ <!-- Mobile Sidebar Overlay -->
141
+ <div id="sidebar-overlay" class="fixed inset-0 bg-slate-900/50 z-30 hidden lg:hidden backdrop-blur-sm"></div>
142
+
143
+ <!-- Main Content -->
144
+ <main class="lg:ml-16 pt-16 min-h-screen">
145
+ <div class="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 py-8">
146
+
147
+ <!-- Page Header -->
148
+ <div class="mb-8">
149
+ <h1 class="text-2xl font-bold text-slate-900 mb-2">Notifications</h1>
150
+ <p class="text-slate-500">Manage notification settings for the clinic and users.</p>
151
+ </div>
152
+
153
+ <!-- Tabs -->
154
+ <div class="mb-6 border-b border-gray-200">
155
+ <nav class="flex space-x-8" aria-label="Tabs">
156
+ <button class="tab-btn active py-4 px-1 border-b-2 border-blue-600 text-blue-600 font-medium text-sm whitespace-nowrap" data-tab="clinic">
157
+ Clinic Notifications
158
+ </button>
159
+ <button class="tab-btn py-4 px-1 border-b-2 border-transparent text-slate-500 hover:text-slate-700 font-medium text-sm whitespace-nowrap" data-tab="provider">
160
+ Provider Notifications
161
+ </button>
162
+ <button class="tab-btn py-4 px-1 border-b-2 border-transparent text-slate-500 hover:text-slate-700 font-medium text-sm whitespace-nowrap" data-tab="staff">
163
+ Staff Notifications
164
+ </button>
165
+ <button class="tab-btn py-4 px-1 border-b-2 border-transparent text-slate-500 hover:text-slate-700 font-medium text-sm whitespace-nowrap" data-tab="patient">
166
+ Patient Notifications
167
+ </button>
168
+ </nav>
169
+ </div>
170
+
171
+ <!-- Tab Contents -->
172
+ <div class="space-y-6">
173
+
174
+ <!-- Clinic Notifications Tab -->
175
+ <div id="clinic-tab" class="tab-content">
176
+ <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
177
+ <div class="px-6 py-4 border-b border-gray-200 bg-slate-50/50">
178
+ <h2 class="text-lg font-semibold text-slate-800">System Notifications</h2>
179
+ <p class="text-sm text-slate-500 mt-1">Configure alerts for clinic-wide system events</p>
180
+ </div>
181
+ <div class="p-6 space-y-6">
182
+ <div class="flex items-center justify-between">
183
+ <div>
184
+ <h3 class="text-sm font-medium text-slate-900">New patient registration</h3>
185
+ <p class="text-sm text-slate-500 mt-1">Receive notifications when new patients register</p>
186
+ </div>
187
+ <label class="relative inline-flex items-center cursor-pointer">
188
+ <input type="checkbox" class="sr-only peer" checked>
189
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
190
+ </label>
191
+ </div>
192
+ <div class="border-t border-gray-100 pt-6 flex items-center justify-between">
193
+ <div>
194
+ <h3 class="text-sm font-medium text-slate-900">Appointment cancellations</h3>
195
+ <p class="text-sm text-slate-500 mt-1">Get notified when appointments are cancelled</p>
196
+ </div>
197
+ <label class="relative inline-flex items-center cursor-pointer">
198
+ <input type="checkbox" class="sr-only peer" checked>
199
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
200
+ </label>
201
+ </div>
202
+ <div class="border-t border-gray-100 pt-6 flex items-center justify-between">
203
+ <div>
204
+ <h3 class="text-sm font-medium text-slate-900">System alerts</h3>
205
+ <p class="text-sm text-slate-500 mt-1">Critical system updates and maintenance notices</p>
206
+ </div>
207
+ <label class="relative inline-flex items-center cursor-pointer">
208
+ <input type="checkbox" class="sr-only peer" checked>
209
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
210
+ </label>
211
+ </div>
212
+ <div class="border-t border-gray-100 pt-6 flex items-center justify-between">
213
+ <div>
214
+ <h3 class="text-sm font-medium text-slate-900">Billing alerts</h3>
215
+ <p class="text-sm text-slate-500 mt-1">Payment processing and billing issue notifications</p>
216
+ </div>
217
+ <label class="relative inline-flex items-center cursor-pointer">
218
+ <input type="checkbox" class="sr-only peer">
219
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
220
+ </label>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- Provider Notifications Tab -->
227
+ <div id="provider-tab" class="tab-content hidden">
228
+ <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
229
+ <div class="px-6 py-4 border-b border-gray-200 bg-slate-50/50">
230
+ <h2 class="text-lg font-semibold text-slate-800">Provider Alerts</h2>
231
+ <p class="text-sm text-slate-500 mt-1">Configure notifications for healthcare providers</p>
232
+ </div>
233
+ <div class="p-6 space-y-6">
234
+ <div class="flex items-center justify-between">
235
+ <div>
236
+ <h3 class="text-sm font-medium text-slate-900">New appointments</h3>
237
+ <p class="text-sm text-slate-500 mt-1">Notify when new appointments are scheduled</p>
238
+ </div>
239
+ <label class="relative inline-flex items-center cursor-pointer">
240
+ <input type="checkbox" class="sr-only peer" checked>
241
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
242
+ </label>
243
+ </div>
244
+ <div class="border-t border-gray-100 pt-6 flex items-center justify-between">
245
+ <div>
246
+ <h3 class="text-sm font-medium text-slate-900">Appointment reminders</h3>
247
+ <p class="text-sm text-slate-500 mt-1">Upcoming appointment notifications</p>
248
+ </div>
249
+ <label class="relative inline-flex items-center cursor-pointer">
250
+ <input type="checkbox" class="sr-only peer" checked>
251
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
252
+ </label>
253
+ </div>
254
+ <div class="border-t border-gray-100 pt-6 flex items-center justify-between">
255
+ <div>
256
+ <h3 class="text-sm font-medium text-slate-900">Patient messages</h3>
257
+ <p class="text-sm text-slate-500 mt-1">Alert when patients send secure messages</p>
258
+ </div>
259
+ <label class="relative inline-flex items-center cursor-pointer">
260
+ <input type="checkbox" class="sr-only peer" checked>
261
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
262
+ </label>
263
+ </div>
264
+ <div class="border-t border-gray-100 pt-6 flex items-center justify-between">
265
+ <div>
266
+ <h3 class="text-sm font-medium text-slate-900">Prescription requests</h3>
267
+ <p class="text-sm text-slate-500 mt-1">Notify on prescription refill requests</p>
268
+ </div>
269
+ <label class="relative inline-flex items-center cursor-pointer">
270
+ <input type="checkbox" class="sr-only peer">
271
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
272
+ </label>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </div>
277
+
278
+ <!-- Staff Notifications Tab -->
279
+ <div id="staff-tab" class="tab-content hidden">
280
+ <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
281
+ <div class="px-6 py-4 border-b border-gray-200 bg-slate-50/50">
282
+ <h2 class="text-lg font-semibold text-slate-800">Staff Alerts</h2>
283
+ <p class="text-sm text-slate-500 mt-1">Configure notifications for administrative staff</p>
284
+ </div>
285
+ <div class="p-6 space-y-6">
286
+ <div class="flex items-center justify-between">
287
+ <div>
288
+ <h3 class="text-sm font-medium text-slate-900">Schedule updates</h3>
289
+ <p class="text-sm text-slate-500 mt-1">Changes to provider schedules and availability</p>
290
+ </div>
291
+ <label class="relative inline-flex items-center cursor-pointer">
292
+ <input type="checkbox" class="sr-only peer" checked>
293
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
294
+ </label>
295
+ </div>
296
+ <div class="border-t border-gray-100 pt-6 flex items-center justify-between">
297
+ <div>
298
+ <h3 class="text-sm font-medium text-slate-900">Patient check-in alerts</h3>
299
+ <p class="text-sm text-slate-500 mt-1">Real-time patient arrival notifications</p>
300
+ </div>
301
+ <label class="relative inline-flex items-center cursor-pointer">
302
+ <input type="checkbox" class="sr-only peer" checked>
303
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
304
+ </label>
305
+ </div>
306
+ <div class="border-t border-gray-100 pt-6 flex items-center justify-between">
307
+ <div>
308
+ <h3 class="text-sm font-medium text-slate-900">Task assignments</h3>
309
+ <p class="text-sm text-slate-500 mt-1">New tasks and workflow assignments</p>
310
+ </div>
311
+ <label class="relative inline-flex items-center cursor-pointer">
312
+ <input type="checkbox" class="sr-only peer" checked>
313
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
314
+ </label>
315
+ </div>
316
+ <div class="border-t border-gray-100 pt-6 flex items-center justify-between">
317
+ <div>
318
+ <h3 class="text-sm font-medium text-slate-900">Internal messages</h3>
319
+ <p class="text-sm text-slate-500 mt-1">Team communications and announcements</p>
320
+ </div>
321
+ <label class="relative inline-flex items-center cursor-pointer">
322
+ <input type="checkbox" class="sr-only peer" checked>
323
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
324
+ </label>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+
330
+ <!-- Patient Notifications Tab -->
331
+ <div id="patient-tab" class="tab-content hidden">
332
+ <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
333
+ <div class="px-6 py-4 border-b border-gray-200 bg-slate-50/50">
334
+ <h2 class="text-lg font-semibold text-slate-800">Patient Notifications</h2>
335
+ <p class="text-sm text-slate-500 mt-1">Configure patient-facing notification preferences</p>
336
+ </div>
337
+ <div class="p-6 space-y-6">
338
+ <div class="flex items-center justify-between">
339
+ <div>
340
+ <h3 class="text-sm font-medium text-slate-900">Appointment confirmations</h3>
341
+ <p class="text-sm text-slate-500 mt-1">Send confirmation when appointments are booked</p>
342
+ </div>
343
+ <label class="relative inline-flex items-center cursor-pointer">
344
+ <input type="checkbox" class="sr-only peer" checked>
345
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
346
+ </label>
347
+ </div>
348
+ <div class="border-t border-gray-100 pt-6 flex items-center justify-between">
349
+ <div>
350
+ <h3 class="text-sm font-medium text-slate-900">Appointment reminders</h3>
351
+ <p class="text-sm text-slate-500 mt-1">Automated reminders 24 hours before visit</p>
352
+ </div>
353
+ <label class="relative inline-flex items-center cursor-pointer">
354
+ <input type="checkbox" class="sr-only peer" checked>
355
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
356
+ </label>
357
+ </div>
358
+ <div class="border-t border-gray-100 pt-6 flex items-center justify-between">
359
+ <div>
360
+ <h3 class="text-sm font-medium text-slate-900">Prescription updates</h3>
361
+ <p class="text-sm text-slate-500 mt-1">Notify when prescriptions are ready</p>
362
+ </div>
363
+ <label class="relative inline-flex items-center cursor-pointer">
364
+ <input type="checkbox" class="sr-only peer">
365
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
366
+ </label>
367
+ </div>
368
+ <div class="border-t border-gray-100 pt-6 flex items-center justify-between">
369
+ <div>
370
+ <h3 class="text-sm font-medium text-slate-900">Clinic announcements</h3>
371
+ <p class="text-sm text-slate-500 mt-1">General updates and health tips</p>
372
+ </div>
373
+ <label class="relative inline-flex items-center cursor-pointer">
374
+ <input type="checkbox" class="sr-only peer">
375
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
376
+ </label>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+
382
+ </div>
383
+
384
+ <!-- Action Buttons -->
385
+ <div class="mt-8 flex items-center justify-end gap-4">
386
+ <button class="px-6 py-2.5 border border-gray-300 text-slate-700 font-medium rounded-lg hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
387
+ Cancel
388
+ </button>
389
+ <button class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600 shadow-sm">
390
+ Save Changes
391
+ </button>
392
+ </div>
393
+
394
+ </div>
395
+ </main>
396
+
397
+ <script>
398
+ // Initialize Lucide icons
399
+ lucide.createIcons();
400
+
401
+ // Mobile sidebar toggle
402
+ const mobileMenuBtn = document.getElementById('mobile-menu-btn');
403
+ const sidebar = document.getElementById('sidebar');
404
+ const overlay = document.getElementById('sidebar-overlay');
405
+
406
+ function toggleSidebar() {
407
+ sidebar.classList.toggle('-translate-x-full');
408
+ overlay.classList.toggle('hidden');
409
+ }
410
+
411
+ mobileMenuBtn.addEventListener('click', toggleSidebar);
412
+ overlay.addEventListener('click', toggleSidebar);
413
+
414
+ // Tab switching functionality
415
+ const tabBtns = document.querySelectorAll('.tab-btn');
416
+ const tabContents = document.querySelectorAll('.tab-content');
417
+
418
+ tabBtns.forEach(btn => {
419
+ btn.addEventListener('click', () => {
420
+ const tabId = btn.getAttribute('data-tab');
421
+
422
+ // Update button styles
423
+ tabBtns.forEach(b => {
424
+ b.classList.remove('border-blue-600', 'text-blue-600', 'active');
425
+ b.classList.add('border-transparent', 'text-slate-500');
426
+ });
427
+ btn.classList.remove('border-transparent', 'text-slate-500');
428
+ btn.classList.add('border-blue-600', 'text-blue-600', 'active');
429
+
430
+ // Show/hide content
431
+ tabContents.forEach(content => {
432
+ content.classList.add('hidden');
433
+ });
434
+ document.getElementById(`${tabId}-tab`).classList.remove('hidden');
435
+ });
436
+ });
437
+
438
+ // Toggle switch animation
439
+ const toggles = document.querySelectorAll('input[type="checkbox"]');
440
+ toggles.forEach(toggle => {
441
+ toggle.addEventListener('change', function() {
442
+ // Add subtle animation or haptic feedback here if needed
443
+ console.log(`Toggle ${this.checked ? 'enabled' : 'disabled'}`);
444
+ });
445
+ });
446
+ </script>
447
+ <script src="https://deepsite.hf.co/deepsite-badge.js"></script>
448
+ </body>
449
+ </html>