Hugging Face's logo

Spaces:
IngStrange
/
undefined
Running

App Files Community
IngStrange commited on
Commit
bfa0bcc
·
verified ·
1 Parent(s): f436099

add form for new app

Browse files

with relant info and pics. even the link to the app

then a user management form and table with actions to edit and delete and ui for edit and delete with toasts

Files changed (6) hide show
  1. README.md +9 -5
  2. apps.html +336 -0
  3. dashboard.html +174 -0
  4. index.html +81 -18
  5. new-app.html +254 -0
  6. users.html +470 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🔥
4
- colorFrom: yellow
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: undefined
3
+ colorFrom: purple
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
apps.html ADDED
@@ -0,0 +1,336 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>AppVoyage - Apps</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <style>
12
+ .sidebar {
13
+ transition: all 0.3s ease;
14
+ }
15
+ .card-hover:hover {
16
+ transform: translateY(-5px);
17
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
18
+ }
19
+ .active-nav-item {
20
+ background: rgba(124, 58, 237, 0.1);
21
+ border-left: 4px solid #7c3aed;
22
+ }
23
+ .app-card {
24
+ transition: all 0.2s ease;
25
+ }
26
+ .app-card:hover {
27
+ transform: translateY(-3px);
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gray-50">
32
+ <div class="flex h-screen overflow-hidden">
33
+ <!-- Sidebar -->
34
+ <div class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col">
35
+ <div class="flex items-center justify-center h-16 px-4 border-b border-gray-200">
36
+ <div class="flex items-center">
37
+ <i data-feather="box" class="w-6 h-6 text-purple-600"></i>
38
+ <span class="ml-2 text-xl font-bold text-gray-800">AppVoyage</span>
39
+ </div>
40
+ </div>
41
+
42
+ <div class="flex-1 overflow-y-auto">
43
+ <nav class="px-4 py-6 space-y-1">
44
+ <a href="dashboard.html" class="group flex items-center px-3 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-purple-50 hover:text-purple-600">
45
+ <i data-feather="home" class="flex-shrink-0 h-5 w-5 mr-3 text-gray-400 group-hover:text-purple-600"></i>
46
+ Dashboard
47
+ </a>
48
+
49
+ <a href="apps.html" class="active-nav-item group flex items-center px-3 py-3 text-sm font-medium rounded-md text-purple-600 bg-purple-50">
50
+ <i data-feather="grid" class="flex-shrink-0 h-5 w-5 mr-3 text-purple-600"></i>
51
+ Apps
52
+ </a>
53
+
54
+ <a href="#" class="group flex items-center px-3 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-purple-50 hover:text-purple-600">
55
+ <i data-feather="users" class="flex-shrink-0 h-5 w-5 mr-3 text-gray-400 group-hover:text-purple-600"></i>
56
+ Users
57
+ </a>
58
+
59
+ <a href="#" class="group flex items-center px-3 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-purple-50 hover:text-purple-600">
60
+ <i data-feather="settings" class="flex-shrink-0 h-5 w-5 mr-3 text-gray-400 group-hover:text-purple-600"></i>
61
+ Settings
62
+ </a>
63
+ </nav>
64
+ </div>
65
+
66
+ <div class="p-4 border-t border-gray-200">
67
+ <div class="flex items-center">
68
+ <img class="h-9 w-9 rounded-full" src="http://static.photos/people/200x200/10" alt="User avatar">
69
+ <div class="ml-3">
70
+ <p class="text-sm font-medium text-gray-700">John Doe</p>
71
+ <a href="#" class="text-xs font-medium text-purple-600 hover:text-purple-500">Sign out</a>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </div>
76
+
77
+ <!-- Main content -->
78
+ <div class="flex-1 overflow-auto">
79
+ <header class="bg-white shadow-sm">
80
+ <div class="flex justify-between items-center px-6 py-4">
81
+ <h1 class="text-2xl font-semibold text-gray-800">All Apps</h1>
82
+ <div class="flex items-center space-x-4">
83
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
84
+ <i data-feather="bell"></i>
85
+ </button>
86
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
87
+ <i data-feather="help-circle"></i>
88
+ </button>
89
+ </div>
90
+ </div>
91
+ </header>
92
+
93
+ <main class="p-6">
94
+ <!-- Filters -->
95
+ <div class="mb-6 bg-white rounded-lg shadow p-4">
96
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
97
+ <div class="relative w-full md:w-64 mb-4 md:mb-0">
98
+ <input type="text" placeholder="Search apps..."
99
+ class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
100
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
101
+ </div>
102
+
103
+ <div class="flex space-x-2">
104
+ <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
105
+ <option>All Categories</option>
106
+ <option>Web Apps</option>
107
+ <option>USSD</option>
108
+ <option>APIs</option>
109
+ </select>
110
+
111
+ <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
112
+ <option>Sort by</option>
113
+ <option>Recently Added</option>
114
+ <option>Most Popular</option>
115
+ <option>A-Z</option>
116
+ </select>
117
+ <a href="new-app.html" class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 flex items-center">
118
+ <i data-feather="plus" class="w-4 h-4 mr-1"></i>
119
+ New App
120
+ </a>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- App Cards -->
126
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
127
+ <!-- App 1 -->
128
+ <div class="app-card bg-white rounded-lg shadow overflow-hidden transition-all duration-200">
129
+ <div class="h-40 bg-purple-100 flex items-center justify-center">
130
+ <img src="http://static.photos/technology/640x360/1" alt="App screenshot" class="h-full w-full object-cover">
131
+ </div>
132
+ <div class="p-5">
133
+ <div class="flex justify-between items-start">
134
+ <div>
135
+ <h3 class="text-lg font-semibold text-gray-800">Payment Gateway</h3>
136
+ <span class="inline-block px-2 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800 mt-1">Web App</span>
137
+ </div>
138
+ <div class="flex space-x-2">
139
+ <button class="p-2 text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded-full">
140
+ <i data-feather="edit-2" class="w-4 h-4"></i>
141
+ </button>
142
+ <button class="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-full">
143
+ <i data-feather="trash-2" class="w-4 h-4"></i>
144
+ </button>
145
+ </div>
146
+ </div>
147
+ <p class="mt-3 text-gray-600 text-sm">Secure payment processing solution with multiple currency support.</p>
148
+ <div class="mt-4 flex justify-between items-center">
149
+ <span class="text-xs text-gray-500">Updated 2 days ago</span>
150
+ <a href="https://payment.example.com" target="_blank" class="text-sm font-medium text-purple-600 hover:text-purple-500 flex items-center">
151
+ Open <i data-feather="external-link" class="w-4 h-4 ml-1"></i>
152
+ </a>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- App 2 -->
158
+ <div class="app-card bg-white rounded-lg shadow overflow-hidden transition-all duration-200">
159
+ <div class="h-40 bg-blue-100 flex items-center justify-center">
160
+ <img src="http://static.photos/technology/640x360/2" alt="App screenshot" class="h-full w-full object-cover">
161
+ </div>
162
+ <div class="p-5">
163
+ <div class="flex justify-between items-start">
164
+ <div>
165
+ <h3 class="text-lg font-semibold text-gray-800">USSD Banking</h3>
166
+ <span class="inline-block px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 mt-1">USSD</span>
167
+ </div>
168
+ <div class="flex space-x-2">
169
+ <button class="p-2 text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded-full">
170
+ <i data-feather="edit-2" class="w-4 h-4"></i>
171
+ </button>
172
+ <button class="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-full">
173
+ <i data-feather="trash-2" class="w-4 h-4"></i>
174
+ </button>
175
+ </div>
176
+ </div>
177
+ <p class="mt-3 text-gray-600 text-sm">Mobile banking service accessible via USSD without internet.</p>
178
+ <div class="mt-4 flex justify-between items-center">
179
+ <span class="text-xs text-gray-500">Updated 1 week ago</span>
180
+ <a href="tel:*123#" class="text-sm font-medium text-blue-600 hover:text-blue-500 flex items-center">
181
+ Dial <i data-feather="phone" class="w-4 h-4 ml-1"></i>
182
+ </a>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <!-- App 3 -->
188
+ <div class="app-card bg-white rounded-lg shadow overflow-hidden transition-all duration-200">
189
+ <div class="h-40 bg-green-100 flex items-center justify-center">
190
+ <img src="http://static.photos/technology/640x360/3" alt="App screenshot" class="h-full w-full object-cover">
191
+ </div>
192
+ <div class="p-5">
193
+ <div class="flex justify-between items-start">
194
+ <div>
195
+ <h3 class="text-lg font-semibold text-gray-800">Weather API</h3>
196
+ <span class="inline-block px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 mt-1">API</span>
197
+ </div>
198
+ <div class="flex space-x-2">
199
+ <button class="p-2 text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded-full">
200
+ <i data-feather="edit-2" class="w-4 h-4"></i>
201
+ </button>
202
+ <button class="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-full">
203
+ <i data-feather="trash-2" class="w-4 h-4"></i>
204
+ </button>
205
+ </div>
206
+ </div>
207
+ <p class="mt-3 text-gray-600 text-sm">Real-time weather data and forecasts API service.</p>
208
+ <div class="mt-4 flex justify-between items-center">
209
+ <span class="text-xs text-gray-500">Updated 3 days ago</span>
210
+ <a href="https://api.weather.example.com" target="_blank" class="text-sm font-medium text-green-600 hover:text-green-500 flex items-center">
211
+ Docs <i data-feather="file-text" class="w-4 h-4 ml-1"></i>
212
+ </a>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- App 4 -->
218
+ <div class="app-card bg-white rounded-lg shadow overflow-hidden transition-all duration-200">
219
+ <div class="h-40 bg-yellow-100 flex items-center justify-center">
220
+ <img src="http://static.photos/technology/640x360/4" alt="App screenshot" class="h-full w-full object-cover">
221
+ </div>
222
+ <div class="p-5">
223
+ <div class="flex justify-between items-start">
224
+ <div>
225
+ <h3 class="text-lg font-semibold text-gray-800">Inventory System</h3>
226
+ <span class="inline-block px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800 mt-1">Web App</span>
227
+ </div>
228
+ <div class="flex space-x-2">
229
+ <button class="p-2 text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded-full">
230
+ <i data-feather="edit-2" class="w-4 h-4"></i>
231
+ </button>
232
+ <button class="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-full">
233
+ <i data-feather="trash-2" class="w-4 h-4"></i>
234
+ </button>
235
+ </div>
236
+ </div>
237
+ <p class="mt-3 text-gray-600 text-sm">Comprehensive inventory management system with reporting.</p>
238
+ <div class="mt-4 flex justify-between items-center">
239
+ <span class="text-xs text-gray-500">Updated yesterday</span>
240
+ <a href="https://inventory.example.com" target="_blank" class="text-sm font-medium text-yellow-600 hover:text-yellow-500 flex items-center">
241
+ Open <i data-feather="external-link" class="w-4 h-4 ml-1"></i>
242
+ </a>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <!-- App 5 -->
248
+ <div class="app-card bg-white rounded-lg shadow overflow-hidden transition-all duration-200">
249
+ <div class="h-40 bg-red-100 flex items-center justify-center">
250
+ <img src="http://static.photos/technology/640x360/5" alt="App screenshot" class="h-full w-full object-cover">
251
+ </div>
252
+ <div class="p-5">
253
+ <div class="flex justify-between items-start">
254
+ <div>
255
+ <h3 class="text-lg font-semibold text-gray-800">USSD Voting</h3>
256
+ <span class="inline-block px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800 mt-1">USSD</span>
257
+ </div>
258
+ <div class="flex space-x-2">
259
+ <button class="p-2 text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded-full">
260
+ <i data-feather="edit-2" class="w-4 h-4"></i>
261
+ </button>
262
+ <button class="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-full">
263
+ <i data-feather="trash-2" class="w-4 h-4"></i>
264
+ </button>
265
+ </div>
266
+ </div>
267
+ <p class="mt-3 text-gray-600 text-sm">Mobile voting system accessible via USSD for elections.</p>
268
+ <div class="mt-4 flex justify-between items-center">
269
+ <span class="text-xs text-gray-500">Updated 2 weeks ago</span>
270
+ <a href="tel:*456#" class="text-sm font-medium text-red-600 hover:text-red-500 flex items-center">
271
+ Dial <i data-feather="phone" class="w-4 h-4 ml-1"></i>
272
+ </a>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- App 6 -->
278
+ <div class="app-card bg-white rounded-lg shadow overflow-hidden transition-all duration-200">
279
+ <div class="h-40 bg-indigo-100 flex items-center justify-center">
280
+ <img src="http://static.photos/technology/640x360/6" alt="App screenshot" class="h-full w-full object-cover">
281
+ </div>
282
+ <div class="p-5">
283
+ <div class="flex justify-between items-start">
284
+ <div>
285
+ <h3 class="text-lg font-semibold text-gray-800">SMS Gateway API</h3>
286
+ <span class="inline-block px-2 py-1 text-xs font-semibold rounded-full bg-indigo-100 text-indigo-800 mt-1">API</span>
287
+ </div>
288
+ <div class="flex space-x-2">
289
+ <button class="p-2 text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded-full">
290
+ <i data-feather="edit-2" class="w-4 h-4"></i>
291
+ </button>
292
+ <button class="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-full">
293
+ <i data-feather="trash-2" class="w-4 h-4"></i>
294
+ </button>
295
+ </div>
296
+ </div>
297
+ <p class="mt-3 text-gray-600 text-sm">Bulk SMS sending and receiving API with analytics.</p>
298
+ <div class="mt-4 flex justify-between items-center">
299
+ <span class="text-xs text-gray-500">Updated 5 days ago</span>
300
+ <a href="https://api.sms.example.com" target="_blank" class="text-sm font-medium text-indigo-600 hover:text-indigo-500 flex items-center">
301
+ Docs <i data-feather="file-text" class="w-4 h-4 ml-1"></i>
302
+ </a>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Pagination -->
309
+ <div class="mt-8 flex justify-center">
310
+ <nav class="inline-flex rounded-md shadow">
311
+ <a href="#" class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
312
+ Previous
313
+ </a>
314
+ <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-sm font-medium text-purple-600 hover:bg-purple-50">
315
+ 1
316
+ </a>
317
+ <a href="#" class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
318
+ 2
319
+ </a>
320
+ <a href="#" class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
321
+ 3
322
+ </a>
323
+ <a href="#" class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
324
+ Next
325
+ </a>
326
+ </nav>
327
+ </div>
328
+ </main>
329
+ </div>
330
+ </div>
331
+
332
+ <script>
333
+ feather.replace();
334
+ </script>
335
+ </body>
336
+ </html>
dashboard.html ADDED
@@ -0,0 +1,174 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>AppVoyage - Dashboard</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <style>
12
+ .sidebar {
13
+ transition: all 0.3s ease;
14
+ }
15
+ .card-hover:hover {
16
+ transform: translateY(-5px);
17
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
18
+ }
19
+ .active-nav-item {
20
+ background: rgba(124, 58, 237, 0.1);
21
+ border-left: 4px solid #7c3aed;
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="bg-gray-50">
26
+ <div class="flex h-screen overflow-hidden">
27
+ <!-- Sidebar -->
28
+ <div class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col">
29
+ <div class="flex items-center justify-center h-16 px-4 border-b border-gray-200">
30
+ <div class="flex items-center">
31
+ <i data-feather="box" class="w-6 h-6 text-purple-600"></i>
32
+ <span class="ml-2 text-xl font-bold text-gray-800">AppVoyage</span>
33
+ </div>
34
+ </div>
35
+
36
+ <div class="flex-1 overflow-y-auto">
37
+ <nav class="px-4 py-6 space-y-1">
38
+ <a href="dashboard.html" class="group flex items-center px-3 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-purple-50 hover:text-purple-600">
39
+ <i data-feather="home" class="flex-shrink-0 h-5 w-5 mr-3 text-gray-400 group-hover:text-purple-600"></i>
40
+ Dashboard
41
+ </a>
42
+ <a href="apps.html" class="group flex items-center px-3 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-purple-50 hover:text-purple-600">
43
+ <i data-feather="grid" class="flex-shrink-0 h-5 w-5 mr-3 text-gray-400 group-hover:text-purple-600"></i>
44
+ Apps
45
+ </a>
46
+
47
+ <a href="users.html" class="group flex items-center px-3 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-purple-50 hover:text-purple-600">
48
+ <i data-feather="users" class="flex-shrink-0 h-5 w-5 mr-3 text-gray-400 group-hover:text-purple-600"></i>
49
+ Users
50
+ </a>
51
+ <a href="#" class="group flex items-center px-3 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-purple-50 hover:text-purple-600">
52
+ <i data-feather="settings" class="flex-shrink-0 h-5 w-5 mr-3 text-gray-400 group-hover:text-purple-600"></i>
53
+ Settings
54
+ </a>
55
+ </nav>
56
+ </div>
57
+
58
+ <div class="p-4 border-t border-gray-200">
59
+ <div class="flex items-center">
60
+ <img class="h-9 w-9 rounded-full" src="http://static.photos/people/200x200/10" alt="User avatar">
61
+ <div class="ml-3">
62
+ <p class="text-sm font-medium text-gray-700">John Doe</p>
63
+ <a href="#" class="text-xs font-medium text-purple-600 hover:text-purple-500">Sign out</a>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Main content -->
70
+ <div class="flex-1 overflow-auto">
71
+ <header class="bg-white shadow-sm">
72
+ <div class="flex justify-between items-center px-6 py-4">
73
+ <h1 class="text-2xl font-semibold text-gray-800">Dashboard</h1>
74
+ <div class="flex items-center space-x-4">
75
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
76
+ <i data-feather="bell"></i>
77
+ </button>
78
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
79
+ <i data-feather="help-circle"></i>
80
+ </button>
81
+ </div>
82
+ </div>
83
+ </header>
84
+
85
+ <main class="p-6">
86
+ <!-- Metrics -->
87
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
88
+ <div class="bg-white rounded-lg shadow p-6">
89
+ <div class="flex items-center">
90
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
91
+ <i data-feather="box" class="w-6 h-6"></i>
92
+ </div>
93
+ <div class="ml-4">
94
+ <p class="text-sm font-medium text-gray-500">Total Apps</p>
95
+ <p class="text-2xl font-semibold text-gray-800">42</p>
96
+ </div>
97
+ </div>
98
+ </div>
99
+
100
+ <div class="bg-white rounded-lg shadow p-6">
101
+ <div class="flex items-center">
102
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
103
+ <i data-feather="globe" class="w-6 h-6"></i>
104
+ </div>
105
+ <div class="ml-4">
106
+ <p class="text-sm font-medium text-gray-500">Web Apps</p>
107
+ <p class="text-2xl font-semibold text-gray-800">28</p>
108
+ </div>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="bg-white rounded-lg shadow p-6">
113
+ <div class="flex items-center">
114
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
115
+ <i data-feather="smartphone" class="w-6 h-6"></i>
116
+ </div>
117
+ <div class="ml-4">
118
+ <p class="text-sm font-medium text-gray-500">USSD</p>
119
+ <p class="text-2xl font-semibold text-gray-800">9</p>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <div class="bg-white rounded-lg shadow p-6">
125
+ <div class="flex items-center">
126
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
127
+ <i data-feather="code" class="w-6 h-6"></i>
128
+ </div>
129
+ <div class="ml-4">
130
+ <p class="text-sm font-medium text-gray-500">APIs</p>
131
+ <p class="text-2xl font-semibold text-gray-800">5</p>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Recent Activity -->
138
+ <div class="bg-white rounded-lg shadow overflow-hidden">
139
+ <div class="px-6 py-4 border-b border-gray-200">
140
+ <h2 class="text-lg font-semibold text-gray-800">Recent Activity</h2>
141
+ </div>
142
+ <div class="divide-y divide-gray-200">
143
+ <div class="p-6 flex items-start">
144
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/1" alt="User avatar">
145
+ <div class="ml-4">
146
+ <p class="text-sm font-medium text-gray-800">Sarah Johnson</p>
147
+ <p class="text-sm text-gray-500">Added new API integration at 10:30 AM</p>
148
+ </div>
149
+ </div>
150
+ <div class="p-6 flex items-start">
151
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/2" alt="User avatar">
152
+ <div class="ml-4">
153
+ <p class="text-sm font-medium text-gray-800">Mike Chen</p>
154
+ <p class="text-sm text-gray-500">Updated payment gateway app at 9:15 AM</p>
155
+ </div>
156
+ </div>
157
+ <div class="p-6 flex items-start">
158
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/3" alt="User avatar">
159
+ <div class="ml-4">
160
+ <p class="text-sm font-medium text-gray-800">Alex Taylor</p>
161
+ <p class="text-sm text-gray-500">Deployed new USSD service at 8:45 AM</p>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </main>
167
+ </div>
168
+ </div>
169
+
170
+ <script>
171
+ feather.replace();
172
+ </script>
173
+ </body>
174
+ </html>
index.html CHANGED
@@ -1,19 +1,82 @@
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>AppVoyage - Login</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <style>
12
+ .login-glass {
13
+ background: rgba(255, 255, 255, 0.1);
14
+ backdrop-filter: blur(10px);
15
+ border-radius: 20px;
16
+ border: 1px solid rgba(255, 255, 255, 0.18);
17
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
18
+ }
19
+ .gradient-bg {
20
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
21
+ }
22
+ </style>
23
+ </head>
24
+ <body class="gradient-bg min-h-screen flex items-center justify-center p-4">
25
+ <div class="login-glass p-8 max-w-md w-full">
26
+ <div class="text-center mb-8">
27
+ <i data-feather="box" class="w-12 h-12 text-white mx-auto"></i>
28
+ <h1 class="text-3xl font-bold text-white mt-4">AppVoyage</h1>
29
+ <p class="text-white opacity-80">Discover & manage your digital tools</p>
30
+ </div>
31
+
32
+ <form id="loginForm" class="space-y-6">
33
+ <div>
34
+ <label for="email" class="block text-sm font-medium text-white">Email</label>
35
+ <div class="mt-1 relative">
36
+ <input id="email" name="email" type="email" required
37
+ class="py-3 px-4 block w-full bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg text-white placeholder-white placeholder-opacity-70 focus:outline-none focus:ring-2 focus:ring-white focus:border-transparent">
38
+ <i data-feather="mail" class="absolute right-3 top-3 text-white opacity-70"></i>
39
+ </div>
40
+ </div>
41
+
42
+ <div>
43
+ <label for="password" class="block text-sm font-medium text-white">Password</label>
44
+ <div class="mt-1 relative">
45
+ <input id="password" name="password" type="password" required
46
+ class="py-3 px-4 block w-full bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg text-white placeholder-white placeholder-opacity-70 focus:outline-none focus:ring-2 focus:ring-white focus:border-transparent">
47
+ <i data-feather="lock" class="absolute right-3 top-3 text-white opacity-70"></i>
48
+ </div>
49
+ </div>
50
+
51
+ <div class="flex items-center justify-between">
52
+ <div class="flex items-center">
53
+ <input id="remember-me" name="remember-me" type="checkbox"
54
+ class="h-4 w-4 bg-white bg-opacity-20 border border-white rounded focus:ring-white">
55
+ <label for="remember-me" class="ml-2 block text-sm text-white">Remember me</label>
56
+ </div>
57
+
58
+ <div class="text-sm">
59
+ <a href="#" class="font-medium text-white hover:text-opacity-80">Forgot password?</a>
60
+ </div>
61
+ </div>
62
+
63
+ <div>
64
+ <button type="submit"
65
+ class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-purple-700 bg-white hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white transition-transform hover:scale-105">
66
+ Sign in
67
+ </button>
68
+ </div>
69
+ </form>
70
+ </div>
71
+
72
+ <script>
73
+ feather.replace();
74
+
75
+ document.getElementById('loginForm').addEventListener('submit', function(e) {
76
+ e.preventDefault();
77
+ // Simulate successful login
78
+ window.location.href = 'dashboard.html';
79
+ });
80
+ </script>
81
+ </body>
82
  </html>
new-app.html ADDED
@@ -0,0 +1,254 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>AppVoyage - New App</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
11
+ <style>
12
+ .sidebar {
13
+ transition: all 0.3s ease;
14
+ }
15
+ .active-nav-item {
16
+ background: rgba(124, 58, 237, 0.1);
17
+ border-left: 4px solid #7c3aed;
18
+ }
19
+ .file-upload {
20
+ border: 2px dashed #d1d5db;
21
+ transition: all 0.3s;
22
+ }
23
+ .file-upload:hover {
24
+ border-color: #7c3aed;
25
+ background-color: rgba(124, 58, 237, 0.05);
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="bg-gray-50">
30
+ <div class="flex h-screen overflow-hidden">
31
+ <!-- Sidebar -->
32
+ <div class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col">
33
+ <div class="flex items-center justify-center h-16 px-4 border-b border-gray-200">
34
+ <div class="flex items-center">
35
+ <i data-feather="box" class="w-6 h-6 text-purple-600"></i>
36
+ <span class="ml-2 text-xl font-bold text-gray-800">AppVoyage</span>
37
+ </div>
38
+ </div>
39
+
40
+ <div class="flex-1 overflow-y-auto">
41
+ <nav class="px-4 py-6 space-y-1">
42
+ <a href="dashboard.html" class="group flex items-center px-3 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-purple-50 hover:text-purple-600">
43
+ <i data-feather="home" class="flex-shrink-0 h-5 w-5 mr-3 text-gray-400 group-hover:text-purple-600"></i>
44
+ Dashboard
45
+ </a>
46
+
47
+ <a href="apps.html" class="group flex items-center px-3 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-purple-50 hover:text-purple-600">
48
+ <i data-feather="grid" class="flex-shrink-0 h-5 w-5 mr-3 text-gray-400 group-hover:text-purple-600"></i>
49
+ Apps
50
+ </a>
51
+
52
+ <a href="users.html" class="group flex items-center px-3 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-purple-50 hover:text-purple-600">
53
+ <i data-feather="users" class="flex-shrink-0 h-5 w-5 mr-3 text-gray-400 group-hover:text-purple-600"></i>
54
+ Users
55
+ </a>
56
+
57
+ <a href="#" class="group flex items-center px-3 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-purple-50 hover:text-purple-600">
58
+ <i data-feather="settings" class="flex-shrink-0 h-5 w-5 mr-3 text-gray-400 group-hover:text-purple-600"></i>
59
+ Settings
60
+ </a>
61
+ </nav>
62
+ </div>
63
+
64
+ <div class="p-4 border-t border-gray-200">
65
+ <div class="flex items-center">
66
+ <img class="h-9 w-9 rounded-full" src="http://static.photos/people/200x200/10" alt="User avatar">
67
+ <div class="ml-3">
68
+ <p class="text-sm font-medium text-gray-700">John Doe</p>
69
+ <a href="#" class="text-xs font-medium text-purple-600 hover:text-purple-500">Sign out</a>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- Main content -->
76
+ <div class="flex-1 overflow-auto">
77
+ <header class="bg-white shadow-sm">
78
+ <div class="flex justify-between items-center px-6 py-4">
79
+ <h1 class="text-2xl font-semibold text-gray-800">Add New App</h1>
80
+ <div class="flex items-center space-x-4">
81
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
82
+ <i data-feather="bell"></i>
83
+ </button>
84
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
85
+ <i data-feather="help-circle"></i>
86
+ </button>
87
+ </div>
88
+ </div>
89
+ </header>
90
+
91
+ <main class="p-6">
92
+ <form id="appForm" class="space-y-6">
93
+ <div class="bg-white rounded-lg shadow p-6">
94
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">Basic Information</h2>
95
+
96
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
97
+ <div>
98
+ <label for="appName" class="block text-sm font-medium text-gray-700 mb-1">App Name</label>
99
+ <input type="text" id="appName" name="appName" required
100
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
101
+ </div>
102
+
103
+ <div>
104
+ <label for="appType" class="block text-sm font-medium text-gray-700 mb-1">App Type</label>
105
+ <select id="appType" name="appType" required
106
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
107
+ <option value="">Select type</option>
108
+ <option value="web">Web App</option>
109
+ <option value="mobile">Mobile App</option>
110
+ <option value="ussd">USSD</option>
111
+ <option value="api">API</option>
112
+ </select>
113
+ </div>
114
+
115
+ <div>
116
+ <label for="appUrl" class="block text-sm font-medium text-gray-700 mb-1">App URL</label>
117
+ <input type="url" id="appUrl" name="appUrl"
118
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
119
+ placeholder="https://">
120
+ </div>
121
+
122
+ <div>
123
+ <label for="appStatus" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
124
+ <select id="appStatus" name="appStatus"
125
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
126
+ <option value="active">Active</option>
127
+ <option value="inactive">Inactive</option>
128
+ <option value="development">In Development</option>
129
+ </select>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="mt-6">
134
+ <label for="appDescription" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
135
+ <textarea id="appDescription" name="appDescription" rows="3"
136
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"></textarea>
137
+ </div>
138
+ </div>
139
+
140
+ <div class="bg-white rounded-lg shadow p-6">
141
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">App Images</h2>
142
+
143
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
144
+ <div class="file-upload p-6 rounded-lg text-center cursor-pointer">
145
+ <input type="file" id="appLogo" name="appLogo" accept="image/*" class="hidden">
146
+ <div class="flex flex-col items-center justify-center h-full">
147
+ <i data-feather="upload" class="w-10 h-10 text-gray-400 mb-2"></i>
148
+ <p class="text-sm text-gray-500">Upload Logo (PNG, JPG)</p>
149
+ <p class="text-xs text-gray-400 mt-1">Recommended: 200x200 px</p>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="file-upload p-6 rounded-lg text-center cursor-pointer">
154
+ <input type="file" id="appScreenshot" name="appScreenshot" accept="image/*" class="hidden">
155
+ <div class="flex flex-col items-center justify-center h-full">
156
+ <i data-feather="image" class="w-10 h-10 text-gray-400 mb-2"></i>
157
+ <p class="text-sm text-gray-500">Upload Screenshot</p>
158
+ <p class="text-xs text-gray-400 mt-1">Recommended: 16:9 ratio</p>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <div class="bg-white rounded-lg shadow p-6">
165
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">Additional Information</h2>
166
+
167
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
168
+ <div>
169
+ <label for="appCategory" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
170
+ <select id="appCategory" name="appCategory"
171
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
172
+ <option value="finance">Finance</option>
173
+ <option value="health">Health</option>
174
+ <option value="education">Education</option>
175
+ <option value="ecommerce">E-commerce</option>
176
+ <option value="entertainment">Entertainment</option>
177
+ <option value="utility">Utility</option>
178
+ </select>
179
+ </div>
180
+
181
+ <div>
182
+ <label for="appTags" class="block text-sm font-medium text-gray-700 mb-1">Tags</label>
183
+ <input type="text" id="appTags" name="appTags"
184
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
185
+ placeholder="Separate tags with commas">
186
+ </div>
187
+
188
+ <div>
189
+ <label for="appOwner" class="block text-sm font-medium text-gray-700 mb-1">Owner/Team</label>
190
+ <input type="text" id="appOwner" name="appOwner"
191
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
192
+ </div>
193
+
194
+ <div>
195
+ <label for="appLaunchDate" class="block text-sm font-medium text-gray-700 mb-1">Launch Date</label>
196
+ <input type="date" id="appLaunchDate" name="appLaunchDate"
197
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <div class="flex justify-end space-x-3">
203
+ <button type="button" class="px-6 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
204
+ Cancel
205
+ </button>
206
+ <button type="submit" class="px-6 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
207
+ Save App
208
+ </button>
209
+ </div>
210
+ </form>
211
+ </main>
212
+ </div>
213
+ </div>
214
+
215
+ <script>
216
+ feather.replace();
217
+
218
+ // Handle file upload UI
219
+ document.querySelectorAll('.file-upload').forEach(uploadDiv => {
220
+ const fileInput = uploadDiv.querySelector('input[type="file"]');
221
+
222
+ uploadDiv.addEventListener('click', () => fileInput.click());
223
+
224
+ fileInput.addEventListener('change', (e) => {
225
+ if (e.target.files.length > 0) {
226
+ uploadDiv.innerHTML = `
227
+ <div class="flex flex-col items-center justify-center h-full">
228
+ <i data-feather="check-circle" class="w-10 h-10 text-green-500 mb-2"></i>
229
+ <p class="text-sm text-gray-700">${e.target.files[0].name}</p>
230
+ <p class="text-xs text-gray-500 mt-1">${(e.target.files[0].size / 1024).toFixed(2)} KB</p>
231
+ </div>
232
+ `;
233
+ feather.replace();
234
+ }
235
+ });
236
+ });
237
+
238
+ // Form submission
239
+ document.getElementById('appForm').addEventListener('submit', function(e) {
240
+ e.preventDefault();
241
+
242
+ Swal.fire({
243
+ title: 'App Created!',
244
+ text: 'Your new app has been added successfully.',
245
+ icon: 'success',
246
+ confirmButtonText: 'OK',
247
+ confirmButtonColor: '#7c3aed'
248
+ }).then(() => {
249
+ window.location.href = 'apps.html';
250
+ });
251
+ });
252
+ </script>
253
+ </body>
254
+ </html>
users.html ADDED
@@ -0,0 +1,470 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>AppVoyage - Users</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
11
+ <style>
12
+ .sidebar {
13
+ transition: all 0.3s ease;
14
+ }
15
+ .active-nav-item {
16
+ background: rgba(124, 58, 237, 0.1);
17
+ border-left: 4px solid #7c3aed;
18
+ }
19
+ .table-row:hover {
20
+ background-color: rgba(124, 58, 237, 0.05);
21
+ }
22
+ .user-status-active {
23
+ background-color: #10b9811a;
24
+ color: #10b981;
25
+ }
26
+ .user-status-inactive {
27
+ background-color: #ef44441a;
28
+ color: #ef4444;
29
+ }
30
+ .user-status-pending {
31
+ background-color: #f59e0b1a;
32
+ color: #f59e0b;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="bg-gray-50">
37
+ <div class="flex h-screen overflow-hidden">
38
+ <!-- Sidebar -->
39
+ <div class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col">
40
+ <div class="flex items-center justify-center h-16 px-4 border-b border-gray-200">
41
+ <div class="flex items-center">
42
+ <i data-feather="box" class="w-6 h-6 text-purple-600"></i>
43
+ <span class="ml-2 text-xl font-bold text-gray-800">AppVoyage</span>
44
+ </div>
45
+ </div>
46
+
47
+ <div class="flex-1 overflow-y-auto">
48
+ <nav class="px-4 py-6 space-y-1">
49
+ <a href="dashboard.html" class="group flex items-center px-3 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-purple-50 hover:text-purple-600">
50
+ <i data-feather="home" class="flex-shrink-0 h-5 w-5 mr-3 text-gray-400 group-hover:text-purple-600"></i>
51
+ Dashboard
52
+ </a>
53
+
54
+ <a href="apps.html" class="group flex items-center px-3 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-purple-50 hover:text-purple-600">
55
+ <i data-feather="grid" class="flex-shrink-0 h-5 w-5 mr-3 text-gray-400 group-hover:text-purple-600"></i>
56
+ Apps
57
+ </a>
58
+
59
+ <a href="users.html" class="active-nav-item group flex items-center px-3 py-3 text-sm font-medium rounded-md text-purple-600 bg-purple-50">
60
+ <i data-feather="users" class="flex-shrink-0 h-5 w-5 mr-3 text-purple-600"></i>
61
+ Users
62
+ </a>
63
+
64
+ <a href="#" class="group flex items-center px-3 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-purple-50 hover:text-purple-600">
65
+ <i data-feather="settings" class="flex-shrink-0 h-5 w-5 mr-3 text-gray-400 group-hover:text-purple-600"></i>
66
+ Settings
67
+ </a>
68
+ </nav>
69
+ </div>
70
+
71
+ <div class="p-4 border-t border-gray-200">
72
+ <div class="flex items-center">
73
+ <img class="h-9 w-9 rounded-full" src="http://static.photos/people/200x200/10" alt="User avatar">
74
+ <div class="ml-3">
75
+ <p class="text-sm font-medium text-gray-700">John Doe</p>
76
+ <a href="#" class="text-xs font-medium text-purple-600 hover:text-purple-500">Sign out</a>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- Main content -->
83
+ <div class="flex-1 overflow-auto">
84
+ <header class="bg-white shadow-sm">
85
+ <div class="flex justify-between items-center px-6 py-4">
86
+ <h1 class="text-2xl font-semibold text-gray-800">User Management</h1>
87
+ <div class="flex items-center space-x-4">
88
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
89
+ <i data-feather="bell"></i>
90
+ </button>
91
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
92
+ <i data-feather="help-circle"></i>
93
+ </button>
94
+ </div>
95
+ </div>
96
+ </header>
97
+
98
+ <main class="p-6">
99
+ <!-- Filters and Actions -->
100
+ <div class="mb-6 bg-white rounded-lg shadow p-4">
101
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
102
+ <div class="relative w-full md:w-64 mb-4 md:mb-0">
103
+ <input type="text" placeholder="Search users..."
104
+ class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
105
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
106
+ </div>
107
+
108
+ <div class="flex space-x-2">
109
+ <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
110
+ <option>All Roles</option>
111
+ <option>Admin</option>
112
+ <option>Editor</option>
113
+ <option>Viewer</option>
114
+ </select>
115
+
116
+ <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
117
+ <option>All Status</option>
118
+ <option>Active</option>
119
+ <option>Inactive</option>
120
+ <option>Pending</option>
121
+ </select>
122
+
123
+ <button onclick="openAddUserModal()" class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 flex items-center">
124
+ <i data-feather="plus" class="w-4 h-4 mr-1"></i>
125
+ Add User
126
+ </button>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Users Table -->
132
+ <div class="bg-white rounded-lg shadow overflow-hidden">
133
+ <div class="overflow-x-auto">
134
+ <table class="min-w-full divide-y divide-gray-200">
135
+ <thead class="bg-gray-50">
136
+ <tr>
137
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
138
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
139
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
140
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
141
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Active</th>
142
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
143
+ </tr>
144
+ </thead>
145
+ <tbody class="bg-white divide-y divide-gray-200">
146
+ <tr class="table-row">
147
+ <td class="px-6 py-4 whitespace-nowrap">
148
+ <div class="flex items-center">
149
+ <div class="flex-shrink-0 h-10 w-10">
150
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/1" alt="User avatar">
151
+ </div>
152
+ <div class="ml-4">
153
+ <div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
154
+ <div class="text-sm text-gray-500">Admin</div>
155
+ </div>
156
+ </div>
157
+ </td>
158
+ <td class="px-6 py-4 whitespace-nowrap">
159
+ <div class="text-sm text-gray-900">sarah@example.com</div>
160
+ </td>
161
+ <td class="px-6 py-4 whitespace-nowrap">
162
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Admin</span>
163
+ </td>
164
+ <td class="px-6 py-4 whitespace-nowrap">
165
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full user-status-active">Active</span>
166
+ </td>
167
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 hours ago</td>
168
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
169
+ <button onclick="openEditUserModal()" class="text-purple-600 hover:text-purple-900 mr-3"><i data-feather="edit-2" class="w-4 h-4"></i></button>
170
+ <button onclick="confirmDeleteUser()" class="text-red-600 hover:text-red-900"><i data-feather="trash-2" class="w-4 h-4"></i></button>
171
+ </td>
172
+ </tr>
173
+
174
+ <tr class="table-row">
175
+ <td class="px-6 py-4 whitespace-nowrap">
176
+ <div class="flex items-center">
177
+ <div class="flex-shrink-0 h-10 w-10">
178
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/2" alt="User avatar">
179
+ </div>
180
+ <div class="ml-4">
181
+ <div class="text-sm font-medium text-gray-900">Mike Chen</div>
182
+ <div class="text-sm text-gray-500">Editor</div>
183
+ </div>
184
+ </div>
185
+ </td>
186
+ <td class="px-6 py-4 whitespace-nowrap">
187
+ <div class="text-sm text-gray-900">mike@example.com</div>
188
+ </td>
189
+ <td class="px-6 py-4 whitespace-nowrap">
190
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Editor</span>
191
+ </td>
192
+ <td class="px-6 py-4 whitespace-nowrap">
193
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full user-status-active">Active</span>
194
+ </td>
195
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday</td>
196
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
197
+ <button onclick="openEditUserModal()" class="text-purple-600 hover:text-purple-900 mr-3"><i data-feather="edit-2" class="w-4 h-4"></i></button>
198
+ <button onclick="confirmDeleteUser()" class="text-red-600 hover:text-red-900"><i data-feather="trash-2" class="w-4 h-4"></i></button>
199
+ </td>
200
+ </tr>
201
+
202
+ <tr class="table-row">
203
+ <td class="px-6 py-4 whitespace-nowrap">
204
+ <div class="flex items-center">
205
+ <div class="flex-shrink-0 h-10 w-10">
206
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/3" alt="User avatar">
207
+ </div>
208
+ <div class="ml-4">
209
+ <div class="text-sm font-medium text-gray-900">Alex Taylor</div>
210
+ <div class="text-sm text-gray-500">Viewer</div>
211
+ </div>
212
+ </div>
213
+ </td>
214
+ <td class="px-6 py-4 whitespace-nowrap">
215
+ <div class="text-sm text-gray-900">alex@example.com</div>
216
+ </td>
217
+ <td class="px-6 py-4 whitespace-nowrap">
218
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Viewer</span>
219
+ </td>
220
+ <td class="px-6 py-4 whitespace-nowrap">
221
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full user-status-pending">Pending</span>
222
+ </td>
223
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Never</td>
224
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
225
+ <button onclick="openEditUserModal()" class="text-purple-600 hover:text-purple-900 mr-3"><i data-feather="edit-2" class="w-4 h-4"></i></button>
226
+ <button onclick="confirmDeleteUser()" class="text-red-600 hover:text-red-900"><i data-feather="trash-2" class="w-4 h-4"></i></button>
227
+ </td>
228
+ </tr>
229
+
230
+ <tr class="table-row">
231
+ <td class="px-6 py-4 whitespace-nowrap">
232
+ <div class="flex items-center">
233
+ <div class="flex-shrink-0 h-10 w-10">
234
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/4" alt="User avatar">
235
+ </div>
236
+ <div class="ml-4">
237
+ <div class="text-sm font-medium text-gray-900">Emma Wilson</div>
238
+ <div class="text-sm text-gray-500">Editor</div>
239
+ </div>
240
+ </div>
241
+ </td>
242
+ <td class="px-6 py-4 whitespace-nowrap">
243
+ <div class="text-sm text-gray-900">emma@example.com</div>
244
+ </td>
245
+ <td class="px-6 py-4 whitespace-nowrap">
246
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Editor</span>
247
+ </td>
248
+ <td class="px-6 py-4 whitespace-nowrap">
249
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full user-status-inactive">Inactive</span>
250
+ </td>
251
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 week ago</td>
252
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
253
+ <button onclick="openEditUserModal()" class="text-purple-600 hover:text-purple-900 mr-3"><i data-feather="edit-2" class="w-4 h-4"></i></button>
254
+ <button onclick="confirmDeleteUser()" class="text-red-600 hover:text-red-900"><i data-feather="trash-2" class="w-4 h-4"></i></button>
255
+ </td>
256
+ </tr>
257
+ </tbody>
258
+ </table>
259
+ </div>
260
+
261
+ <!-- Pagination -->
262
+ <div class="px-6 py-4 border-t border-gray-200">
263
+ <div class="flex items-center justify-between">
264
+ <div class="flex-1 flex justify-between items-center">
265
+ <div>
266
+ <p class="text-sm text-gray-700">
267
+ Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">12</span> users
268
+ </p>
269
+ </div>
270
+ <div>
271
+ <nav class="inline-flex rounded-md shadow">
272
+ <a href="#" class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
273
+ Previous
274
+ </a>
275
+ <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-sm font-medium text-purple-600 hover:bg-purple-50">
276
+ 1
277
+ </a>
278
+ <a href="#" class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
279
+ 2
280
+ </a>
281
+ <a href="#" class="px-3 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
282
+ 3
283
+ </a>
284
+ <a href="#" class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
285
+ Next
286
+ </a>
287
+ </nav>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </main>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- Add User Modal (hidden by default) -->
298
+ <div id="addUserModal" class="fixed z-10 inset-0 overflow-y-auto hidden">
299
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
300
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
301
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
302
+ </div>
303
+
304
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
305
+
306
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
307
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
308
+ <div class="sm:flex sm:items-start">
309
+ <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 sm:mx-0 sm:h-10 sm:w-10">
310
+ <i data-feather="user-plus" class="text-purple-600"></i>
311
+ </div>
312
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
313
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Add New User</h3>
314
+ <div class="mt-4 space-y-4">
315
+ <div>
316
+ <label for="userName" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
317
+ <input type="text" id="userName" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
318
+ </div>
319
+ <div>
320
+ <label for="userEmail" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
321
+ <input type="email" id="userEmail" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
322
+ </div>
323
+ <div>
324
+ <label for="userRole" class="block text-sm font-medium text-gray-700 mb-1">Role</label>
325
+ <select id="userRole" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
326
+ <option value="admin">Admin</option>
327
+ <option value="editor">Editor</option>
328
+ <option value="viewer">Viewer</option>
329
+ </select>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
336
+ <button type="button" onclick="saveNewUser()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm">
337
+ Add User
338
+ </button>
339
+ <button type="button" onclick="closeAddUserModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
340
+ Cancel
341
+ </button>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </div>
346
+
347
+ <!-- Edit User Modal (hidden by default) -->
348
+ <div id="editUserModal" class="fixed z-10 inset-0 overflow-y-auto hidden">
349
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
350
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
351
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
352
+ </div>
353
+
354
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
355
+
356
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
357
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
358
+ <div class="sm:flex sm:items-start">
359
+ <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 sm:mx-0 sm:h-10 sm:w-10">
360
+ <i data-feather="user" class="text-purple-600"></i>
361
+ </div>
362
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
363
+ <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Edit User</h3>
364
+ <div class="mt-4 space-y-4">
365
+ <div>
366
+ <label for="editUserName" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
367
+ <input type="text" id="editUserName" value="Sarah Johnson" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
368
+ </div>
369
+ <div>
370
+ <label for="editUserEmail" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
371
+ <input type="email" id="editUserEmail" value="sarah@example.com" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
372
+ </div>
373
+ <div class="grid grid-cols-2 gap-4">
374
+ <div>
375
+ <label for="editUserRole" class="block text-sm font-medium text-gray-700 mb-1">Role</label>
376
+ <select id="editUserRole" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
377
+ <option value="admin">Admin</option>
378
+ <option value="editor">Editor</option>
379
+ <option value="viewer" selected>Viewer</option>
380
+ </select>
381
+ </div>
382
+ <div>
383
+ <label for="editUserStatus" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
384
+ <select id="editUserStatus" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
385
+ <option value="active">Active</option>
386
+ <option value="inactive">Inactive</option>
387
+ <option value="pending">Pending</option>
388
+ </select>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </div>
395
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
396
+ <button type="button" onclick="saveUserChanges()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm">
397
+ Save Changes
398
+ </button>
399
+ <button type="button" onclick="closeEditUserModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
400
+ Cancel
401
+ </button>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </div>
406
+
407
+ <script>
408
+ feather.replace();
409
+
410
+ // Modal functions
411
+ function openAddUserModal() {
412
+ document.getElementById('addUserModal').classList.remove('hidden');
413
+ }
414
+
415
+ function closeAddUserModal() {
416
+ document.getElementById('addUserModal').classList.add('hidden');
417
+ }
418
+
419
+ function openEditUserModal() {
420
+ document.getElementById('editUserModal').classList.remove('hidden');
421
+ }
422
+
423
+ function closeEditUserModal() {
424
+ document.getElementById('editUserModal').classList.add('hidden');
425
+ }
426
+
427
+ function saveNewUser() {
428
+ closeAddUserModal();
429
+ Swal.fire({
430
+ title: 'User Added!',
431
+ text: 'The new user has been created successfully.',
432
+ icon: 'success',
433
+ confirmButtonText: 'OK',
434
+ confirmButtonColor: '#7c3aed'
435
+ });
436
+ }
437
+
438
+ function saveUserChanges() {
439
+ closeEditUserModal();
440
+ Swal.fire({
441
+ title: 'Changes Saved!',
442
+ text: 'User details have been updated successfully.',
443
+ icon: 'success',
444
+ confirmButtonText: 'OK',
445
+ confirmButtonColor: '#7c3aed'
446
+ });
447
+ }
448
+
449
+ function confirmDeleteUser() {
450
+ Swal.fire({
451
+ title: 'Are you sure?',
452
+ text: "You won't be able to revert this!",
453
+ icon: 'warning',
454
+ showCancelButton: true,
455
+ confirmButtonColor: '#7c3aed',
456
+ cancelButtonColor: '#d33',
457
+ confirmButtonText: 'Yes, delete it!'
458
+ }).then((result) => {
459
+ if (result.isConfirmed) {
460
+ Swal.fire(
461
+ 'Deleted!',
462
+ 'The user has been deleted.',
463
+ 'success'
464
+ );
465
+ }
466
+ });
467
+ }
468
+ </script>
469
+ </body>
470
+ </html>