Hugging Face's logo

Spaces:
CabirPoya
/
poyaadmin
Running

App Files Community
CabirPoya commited on
Commit
bb788ed
·
verified ·
1 Parent(s): b30d130

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +710 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Poyaadmin
3
- emoji: 🏆
4
- colorFrom: indigo
5
- colorTo: purple
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: poyaadmin
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,710 @@
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>User Management System</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6b73ff 0%, #000dff 100%);
12
+ }
13
+ .card-hover:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .sidebar {
18
+ transition: all 0.3s ease;
19
+ }
20
+ @media (max-width: 768px) {
21
+ .sidebar {
22
+ position: fixed;
23
+ left: -100%;
24
+ top: 0;
25
+ z-index: 50;
26
+ height: 100vh;
27
+ }
28
+ .sidebar.active {
29
+ left: 0;
30
+ }
31
+ }
32
+ </style>
33
+ </head>
34
+ <body class="bg-gray-100 font-sans">
35
+ <!-- Login Page (Default View) -->
36
+ <div id="login-page" class="min-h-screen flex items-center justify-center gradient-bg p-4">
37
+ <div class="bg-white rounded-xl shadow-2xl p-8 w-full max-w-md">
38
+ <div class="text-center mb-8">
39
+ <h1 class="text-3xl font-bold text-gray-800">Welcome Back</h1>
40
+ <p class="text-gray-600 mt-2">Sign in to access your account</p>
41
+ </div>
42
+ <form id="login-form" class="space-y-6">
43
+ <div>
44
+ <label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
45
+ <input type="text" id="username" name="username"
46
+ class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
47
+ placeholder="Enter your username" required>
48
+ </div>
49
+ <div>
50
+ <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
51
+ <input type="password" id="password" name="password"
52
+ class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 transition"
53
+ placeholder="Enter your password" required>
54
+ </div>
55
+ <div class="flex items-center justify-between">
56
+ <div class="flex items-center">
57
+ <input type="checkbox" id="remember" name="remember" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
58
+ <label for="remember" class="ml-2 block text-sm text-gray-700">Remember me</label>
59
+ </div>
60
+ <a href="#" class="text-sm text-blue-600 hover:text-blue-500">Forgot password?</a>
61
+ </div>
62
+ <button type="submit"
63
+ class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
64
+ Sign In
65
+ </button>
66
+ </form>
67
+ <div class="mt-6 text-center">
68
+ <p class="text-sm text-gray-600">Don't have an account? <a href="#" class="text-blue-600 hover:text-blue-500 font-medium">Contact admin</a></p>
69
+ </div>
70
+ </div>
71
+ </div>
72
+
73
+ <!-- Main App (Hidden Initially) -->
74
+ <div id="app" class="hidden">
75
+ <!-- Mobile Menu Button -->
76
+ <button id="mobile-menu-button" class="md:hidden fixed top-4 left-4 z-50 bg-white p-2 rounded-lg shadow-lg">
77
+ <i class="fas fa-bars text-gray-700 text-xl"></i>
78
+ </button>
79
+
80
+ <!-- Sidebar -->
81
+ <div id="sidebar" class="sidebar bg-white w-64 min-h-screen fixed shadow-lg md:relative">
82
+ <div class="p-4 border-b border-gray-200">
83
+ <div class="flex items-center space-x-3">
84
+ <div id="user-avatar" class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">
85
+ A
86
+ </div>
87
+ <div>
88
+ <h3 id="username-display" class="font-semibold text-gray-800">Admin</h3>
89
+ <p id="user-role" class="text-xs text-gray-500">Administrator</p>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ <nav class="p-4">
94
+ <ul class="space-y-2">
95
+ <li>
96
+ <a href="#" id="dashboard-link" class="flex items-center space-x-3 p-3 rounded-lg text-blue-600 bg-blue-50">
97
+ <i class="fas fa-tachometer-alt"></i>
98
+ <span>Dashboard</span>
99
+ </a>
100
+ </li>
101
+ <li>
102
+ <a href="#" id="profile-link" class="flex items-center space-x-3 p-3 rounded-lg text-gray-700 hover:bg-gray-100">
103
+ <i class="fas fa-user"></i>
104
+ <span>Profile</span>
105
+ </a>
106
+ </li>
107
+ <li id="admin-menu-item" class="hidden">
108
+ <a href="#" id="users-link" class="flex items-center space-x-3 p-3 rounded-lg text-gray-700 hover:bg-gray-100">
109
+ <i class="fas fa-users"></i>
110
+ <span>Manage Users</span>
111
+ </a>
112
+ </li>
113
+ <li>
114
+ <a href="#" id="settings-link" class="flex items-center space-x-3 p-3 rounded-lg text-gray-700 hover:bg-gray-100">
115
+ <i class="fas fa-cog"></i>
116
+ <span>Settings</span>
117
+ </a>
118
+ </li>
119
+ <li>
120
+ <a href="#" id="logout-link" class="flex items-center space-x-3 p-3 rounded-lg text-gray-700 hover:bg-gray-100">
121
+ <i class="fas fa-sign-out-alt"></i>
122
+ <span>Logout</span>
123
+ </a>
124
+ </li>
125
+ </ul>
126
+ </nav>
127
+ </div>
128
+
129
+ <!-- Main Content -->
130
+ <div class="md:ml-64 min-h-screen">
131
+ <!-- Header -->
132
+ <header class="bg-white shadow-sm p-4">
133
+ <div class="flex justify-between items-center">
134
+ <h1 id="page-title" class="text-xl font-semibold text-gray-800">Dashboard</h1>
135
+ <div class="flex items-center space-x-4">
136
+ <div class="relative">
137
+ <button id="notifications-btn" class="p-2 rounded-full hover:bg-gray-100">
138
+ <i class="fas fa-bell text-gray-600"></i>
139
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
140
+ </button>
141
+ </div>
142
+ <div class="relative">
143
+ <button id="user-menu-btn" class="flex items-center space-x-2">
144
+ <div id="header-avatar" class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-sm font-bold">
145
+ A
146
+ </div>
147
+ <i class="fas fa-chevron-down text-gray-500 text-xs"></i>
148
+ </button>
149
+ <div id="user-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10">
150
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
151
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
152
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Logout</a>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </header>
158
+
159
+ <!-- Content Area -->
160
+ <main class="p-4">
161
+ <!-- Dashboard Content -->
162
+ <div id="dashboard-content">
163
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
164
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition">
165
+ <div class="flex items-center justify-between">
166
+ <div>
167
+ <p class="text-sm text-gray-500">Total Users</p>
168
+ <h3 class="text-2xl font-bold text-gray-800">9</h3>
169
+ </div>
170
+ <div class="p-3 rounded-lg bg-blue-100 text-blue-600">
171
+ <i class="fas fa-users text-xl"></i>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition">
176
+ <div class="flex items-center justify-between">
177
+ <div>
178
+ <p class="text-sm text-gray-500">Admin Users</p>
179
+ <h3 class="text-2xl font-bold text-gray-800">1</h3>
180
+ </div>
181
+ <div class="p-3 rounded-lg bg-green-100 text-green-600">
182
+ <i class="fas fa-user-shield text-xl"></i>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition">
187
+ <div class="flex items-center justify-between">
188
+ <div>
189
+ <p class="text-sm text-gray-500">Regular Users</p>
190
+ <h3 class="text-2xl font-bold text-gray-800">8</h3>
191
+ </div>
192
+ <div class="p-3 rounded-lg bg-purple-100 text-purple-600">
193
+ <i class="fas fa-user text-xl"></i>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
200
+ <div class="flex justify-between items-center mb-6">
201
+ <h2 class="text-lg font-semibold text-gray-800">Recent Activity</h2>
202
+ <a href="#" class="text-sm text-blue-600 hover:text-blue-500">View All</a>
203
+ </div>
204
+ <div class="space-y-4">
205
+ <div class="flex items-start space-x-4">
206
+ <div class="p-2 bg-blue-100 rounded-lg text-blue-600">
207
+ <i class="fas fa-user-plus"></i>
208
+ </div>
209
+ <div>
210
+ <p class="text-sm font-medium text-gray-800">New user registered</p>
211
+ <p class="text-xs text-gray-500">2 minutes ago</p>
212
+ </div>
213
+ </div>
214
+ <div class="flex items-start space-x-4">
215
+ <div class="p-2 bg-green-100 rounded-lg text-green-600">
216
+ <i class="fas fa-sign-in-alt"></i>
217
+ </div>
218
+ <div>
219
+ <p class="text-sm font-medium text-gray-800">User logged in</p>
220
+ <p class="text-xs text-gray-500">10 minutes ago</p>
221
+ </div>
222
+ </div>
223
+ <div class="flex items-start space-x-4">
224
+ <div class="p-2 bg-purple-100 rounded-lg text-purple-600">
225
+ <i class="fas fa-cog"></i>
226
+ </div>
227
+ <div>
228
+ <p class="text-sm font-medium text-gray-800">System updated</p>
229
+ <p class="text-xs text-gray-500">1 hour ago</p>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <!-- Profile Content -->
237
+ <div id="profile-content" class="hidden">
238
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
239
+ <h2 class="text-lg font-semibold text-gray-800 mb-6">Profile Information</h2>
240
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
241
+ <div>
242
+ <label class="block text-sm font-medium text-gray-700 mb-1">Username</label>
243
+ <input type="text" id="profile-username" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" value="admin" readonly>
244
+ </div>
245
+ <div>
246
+ <label class="block text-sm font-medium text-gray-700 mb-1">Role</label>
247
+ <input type="text" id="profile-role" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" value="Administrator" readonly>
248
+ </div>
249
+ <div>
250
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
251
+ <input type="email" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" value="admin@example.com">
252
+ </div>
253
+ <div>
254
+ <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
255
+ <input type="tel" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" value="+1234567890">
256
+ </div>
257
+ </div>
258
+ <div class="mt-6">
259
+ <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition">
260
+ Update Profile
261
+ </button>
262
+ </div>
263
+ </div>
264
+
265
+ <div class="bg-white rounded-xl shadow-sm p-6">
266
+ <h2 class="text-lg font-semibold text-gray-800 mb-6">Change Password</h2>
267
+ <div class="space-y-4">
268
+ <div>
269
+ <label class="block text-sm font-medium text-gray-700 mb-1">Current Password</label>
270
+ <input type="password" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
271
+ </div>
272
+ <div>
273
+ <label class="block text-sm font-medium text-gray-700 mb-1">New Password</label>
274
+ <input type="password" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
275
+ </div>
276
+ <div>
277
+ <label class="block text-sm font-medium text-gray-700 mb-1">Confirm New Password</label>
278
+ <input type="password" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
279
+ </div>
280
+ </div>
281
+ <div class="mt-6">
282
+ <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition">
283
+ Change Password
284
+ </button>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- Users Management Content (Admin Only) -->
290
+ <div id="users-content" class="hidden">
291
+ <div class="bg-white rounded-xl shadow-sm p-6">
292
+ <div class="flex justify-between items-center mb-6">
293
+ <h2 class="text-lg font-semibold text-gray-800">User Management</h2>
294
+ <button id="add-user-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition flex items-center space-x-2">
295
+ <i class="fas fa-plus"></i>
296
+ <span>Add User</span>
297
+ </button>
298
+ </div>
299
+
300
+ <div class="overflow-x-auto">
301
+ <table class="min-w-full divide-y divide-gray-200">
302
+ <thead class="bg-gray-50">
303
+ <tr>
304
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
305
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Username</th>
306
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
307
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
308
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
309
+ </tr>
310
+ </thead>
311
+ <tbody id="users-table-body" class="bg-white divide-y divide-gray-200">
312
+ <!-- Users will be populated here by JavaScript -->
313
+ </tbody>
314
+ </table>
315
+ </div>
316
+ </div>
317
+ </div>
318
+
319
+ <!-- Settings Content -->
320
+ <div id="settings-content" class="hidden">
321
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
322
+ <h2 class="text-lg font-semibold text-gray-800 mb-6">System Settings</h2>
323
+ <div class="space-y-6">
324
+ <div>
325
+ <label class="block text-sm font-medium text-gray-700 mb-2">Site Name</label>
326
+ <input type="text" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" value="User Management System">
327
+ </div>
328
+ <div>
329
+ <label class="block text-sm font-medium text-gray-700 mb-2">Site Logo</label>
330
+ <div class="flex items-center space-x-4">
331
+ <div class="w-16 h-16 rounded-lg bg-gray-200 flex items-center justify-center">
332
+ <i class="fas fa-image text-gray-400"></i>
333
+ </div>
334
+ <div>
335
+ <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-lg transition">
336
+ Upload New
337
+ </button>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ <div>
342
+ <label class="block text-sm font-medium text-gray-700 mb-2">Maintenance Mode</label>
343
+ <div class="flex items-center space-x-4">
344
+ <label class="inline-flex items-center">
345
+ <input type="radio" name="maintenance" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
346
+ <span class="ml-2 text-sm text-gray-700">Active</span>
347
+ </label>
348
+ <label class="inline-flex items-center">
349
+ <input type="radio" name="maintenance" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
350
+ <span class="ml-2 text-sm text-gray-700">Maintenance</span>
351
+ </label>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ <div class="mt-6">
356
+ <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition">
357
+ Save Settings
358
+ </button>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </main>
363
+ </div>
364
+
365
+ <!-- Add User Modal -->
366
+ <div id="add-user-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
367
+ <div class="bg-white rounded-xl shadow-2xl w-full max-w-md">
368
+ <div class="p-6">
369
+ <div class="flex justify-between items-center mb-4">
370
+ <h3 class="text-lg font-semibold text-gray-800">Add New User</h3>
371
+ <button id="close-add-user-modal" class="text-gray-500 hover:text-gray-700">
372
+ <i class="fas fa-times"></i>
373
+ </button>
374
+ </div>
375
+ <form id="add-user-form" class="space-y-4">
376
+ <div>
377
+ <label class="block text-sm font-medium text-gray-700 mb-1">Username</label>
378
+ <input type="text" id="new-username" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
379
+ </div>
380
+ <div>
381
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
382
+ <input type="email" id="new-email" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
383
+ </div>
384
+ <div>
385
+ <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
386
+ <input type="password" id="new-password" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
387
+ </div>
388
+ <div>
389
+ <label class="block text-sm font-medium text-gray-700 mb-1">Role</label>
390
+ <select id="new-role" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
391
+ <option value="user">Regular User</option>
392
+ <option value="admin">Administrator</option>
393
+ </select>
394
+ </div>
395
+ <div class="pt-2">
396
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition">
397
+ Create User
398
+ </button>
399
+ </div>
400
+ </form>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </div>
405
+
406
+ <script>
407
+ // Sample user data
408
+ const users = [
409
+ { id: 1, username: 'admin', role: 'admin', status: 'active' },
410
+ { id: 2, username: 'user1', role: 'user', status: 'active' },
411
+ { id: 3, username: 'user2', role: 'user', status: 'active' },
412
+ { id: 4, username: 'user3', role: 'user', status: 'active' },
413
+ { id: 5, username: 'user4', role: 'user', status: 'inactive' },
414
+ { id: 6, username: 'user5', role: 'user', status: 'active' },
415
+ { id: 7, username: 'user6', role: 'user', status: 'active' },
416
+ { id: 8, username: 'user7', role: 'user', status: 'inactive' },
417
+ { id: 9, username: 'user8', role: 'user', status: 'active' }
418
+ ];
419
+
420
+ // Current user (will be set after login)
421
+ let currentUser = null;
422
+
423
+ // DOM Elements
424
+ const loginPage = document.getElementById('login-page');
425
+ const app = document.getElementById('app');
426
+ const loginForm = document.getElementById('login-form');
427
+ const usernameInput = document.getElementById('username');
428
+ const passwordInput = document.getElementById('password');
429
+
430
+ // Sidebar elements
431
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
432
+ const sidebar = document.getElementById('sidebar');
433
+ const dashboardLink = document.getElementById('dashboard-link');
434
+ const profileLink = document.getElementById('profile-link');
435
+ const usersLink = document.getElementById('users-link');
436
+ const settingsLink = document.getElementById('settings-link');
437
+ const logoutLink = document.getElementById('logout-link');
438
+ const adminMenuItem = document.getElementById('admin-menu-item');
439
+
440
+ // Content areas
441
+ const dashboardContent = document.getElementById('dashboard-content');
442
+ const profileContent = document.getElementById('profile-content');
443
+ const usersContent = document.getElementById('users-content');
444
+ const settingsContent = document.getElementById('settings-content');
445
+
446
+ // User management elements
447
+ const usersTableBody = document.getElementById('users-table-body');
448
+ const addUserBtn = document.getElementById('add-user-btn');
449
+ const addUserModal = document.getElementById('add-user-modal');
450
+ const closeAddUserModal = document.getElementById('close-add-user-modal');
451
+ const addUserForm = document.getElementById('add-user-form');
452
+
453
+ // User profile elements
454
+ const userAvatar = document.getElementById('user-avatar');
455
+ const usernameDisplay = document.getElementById('username-display');
456
+ const userRole = document.getElementById('user-role');
457
+ const headerAvatar = document.getElementById('header-avatar');
458
+
459
+ // Page title
460
+ const pageTitle = document.getElementById('page-title');
461
+
462
+ // Initialize the app
463
+ document.addEventListener('DOMContentLoaded', function() {
464
+ // Check if user is already logged in (from localStorage)
465
+ const savedUser = localStorage.getItem('currentUser');
466
+ if (savedUser) {
467
+ currentUser = JSON.parse(savedUser);
468
+ showApp();
469
+ }
470
+
471
+ // Setup event listeners
472
+ setupEventListeners();
473
+ });
474
+
475
+ function setupEventListeners() {
476
+ // Login form submission
477
+ loginForm.addEventListener('submit', function(e) {
478
+ e.preventDefault();
479
+ const username = usernameInput.value.trim();
480
+ const password = passwordInput.value.trim();
481
+
482
+ // Simple validation (in a real app, this would be a server-side check)
483
+ const user = users.find(u => u.username === username);
484
+
485
+ if (user && password !== '') { // In real app, verify password hash
486
+ currentUser = user;
487
+ localStorage.setItem('currentUser', JSON.stringify(currentUser));
488
+ showApp();
489
+ } else {
490
+ alert('Invalid username or password');
491
+ }
492
+ });
493
+
494
+ // Mobile menu toggle
495
+ mobileMenuButton.addEventListener('click', function() {
496
+ sidebar.classList.toggle('active');
497
+ });
498
+
499
+ // Navigation links
500
+ dashboardLink.addEventListener('click', function(e) {
501
+ e.preventDefault();
502
+ showContent('dashboard');
503
+ });
504
+
505
+ profileLink.addEventListener('click', function(e) {
506
+ e.preventDefault();
507
+ showContent('profile');
508
+ });
509
+
510
+ usersLink.addEventListener('click', function(e) {
511
+ e.preventDefault();
512
+ showContent('users');
513
+ });
514
+
515
+ settingsLink.addEventListener('click', function(e) {
516
+ e.preventDefault();
517
+ showContent('settings');
518
+ });
519
+
520
+ logoutLink.addEventListener('click', function(e) {
521
+ e.preventDefault();
522
+ logout();
523
+ });
524
+
525
+ // User management
526
+ addUserBtn.addEventListener('click', function(e) {
527
+ e.preventDefault();
528
+ addUserModal.classList.remove('hidden');
529
+ });
530
+
531
+ closeAddUserModal.addEventListener('click', function(e) {
532
+ e.preventDefault();
533
+ addUserModal.classList.add('hidden');
534
+ });
535
+
536
+ addUserForm.addEventListener('submit', function(e) {
537
+ e.preventDefault();
538
+ const username = document.getElementById('new-username').value.trim();
539
+ const role = document.getElementById('new-role').value;
540
+
541
+ // In a real app, this would be sent to the server
542
+ const newUser = {
543
+ id: users.length + 1,
544
+ username: username,
545
+ role: role,
546
+ status: 'active'
547
+ };
548
+
549
+ users.push(newUser);
550
+ populateUsersTable();
551
+ addUserModal.classList.add('hidden');
552
+ addUserForm.reset();
553
+
554
+ // Show success message
555
+ alert('User created successfully!');
556
+ });
557
+ }
558
+
559
+ function showApp() {
560
+ loginPage.classList.add('hidden');
561
+ app.classList.remove('hidden');
562
+
563
+ // Update UI based on current user
564
+ updateUserInfo();
565
+
566
+ // Show appropriate content based on user role
567
+ if (currentUser.role === 'admin') {
568
+ adminMenuItem.classList.remove('hidden');
569
+ showContent('dashboard');
570
+ } else {
571
+ adminMenuItem.classList.add('hidden');
572
+ showContent('profile');
573
+ }
574
+ }
575
+
576
+ function updateUserInfo() {
577
+ // Update sidebar and header with user info
578
+ const firstLetter = currentUser.username.charAt(0).toUpperCase();
579
+ userAvatar.textContent = firstLetter;
580
+ headerAvatar.textContent = firstLetter;
581
+ usernameDisplay.textContent = currentUser.username;
582
+
583
+ if (currentUser.role === 'admin') {
584
+ userRole.textContent = 'Administrator';
585
+ userAvatar.classList.add('bg-blue-500');
586
+ headerAvatar.classList.add('bg-blue-500');
587
+ } else {
588
+ userRole.textContent = 'Regular User';
589
+ userAvatar.classList.add('bg-green-500');
590
+ headerAvatar.classList.add('bg-green-500');
591
+ }
592
+ }
593
+
594
+ function showContent(content) {
595
+ // Hide all content
596
+ dashboardContent.classList.add('hidden');
597
+ profileContent.classList.add('hidden');
598
+ usersContent.classList.add('hidden');
599
+ settingsContent.classList.add('hidden');
600
+
601
+ // Reset active nav items
602
+ dashboardLink.classList.remove('text-blue-600', 'bg-blue-50');
603
+ profileLink.classList.remove('text-blue-600', 'bg-blue-50');
604
+ usersLink.classList.remove('text-blue-600', 'bg-blue-50');
605
+ settingsLink.classList.remove('text-blue-600', 'bg-blue-50');
606
+
607
+ // Show selected content and update active nav item
608
+ switch(content) {
609
+ case 'dashboard':
610
+ dashboardContent.classList.remove('hidden');
611
+ dashboardLink.classList.add('text-blue-600', 'bg-blue-50');
612
+ pageTitle.textContent = 'Dashboard';
613
+ break;
614
+ case 'profile':
615
+ profileContent.classList.remove('hidden');
616
+ profileLink.classList.add('text-blue-600', 'bg-blue-50');
617
+ pageTitle.textContent = 'Profile';
618
+ break;
619
+ case 'users':
620
+ usersContent.classList.remove('hidden');
621
+ usersLink.classList.add('text-blue-600', 'bg-blue-50');
622
+ pageTitle.textContent = 'User Management';
623
+ populateUsersTable();
624
+ break;
625
+ case 'settings':
626
+ settingsContent.classList.remove('hidden');
627
+ settingsLink.classList.add('text-blue-600', 'bg-blue-50');
628
+ pageTitle.textContent = 'Settings';
629
+ break;
630
+ }
631
+
632
+ // Close mobile menu if open
633
+ if (window.innerWidth <= 768) {
634
+ sidebar.classList.remove('active');
635
+ }
636
+ }
637
+
638
+ function populateUsersTable() {
639
+ usersTableBody.innerHTML = '';
640
+
641
+ users.forEach(user => {
642
+ const row = document.createElement('tr');
643
+ row.className = 'hover:bg-gray-50';
644
+
645
+ row.innerHTML = `
646
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${user.id}</td>
647
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${user.username}</td>
648
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
649
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${user.role === 'admin' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800'}">
650
+ ${user.role === 'admin' ? 'Administrator' : 'Regular User'}
651
+ </span>
652
+ </td>
653
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
654
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${user.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
655
+ ${user.status === 'active' ? 'Active' : 'Inactive'}
656
+ </span>
657
+ </td>
658
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
659
+ <button class="text-blue-600 hover:text-blue-900 mr-3 edit-user" data-id="${user.id}">Edit</button>
660
+ ${user.id !== currentUser.id ? `<button class="text-red-600 hover:text-red-900 delete-user" data-id="${user.id}">Delete</button>` : ''}
661
+ </td>
662
+ `;
663
+
664
+ usersTableBody.appendChild(row);
665
+ });
666
+
667
+ // Add event listeners to edit and delete buttons
668
+ document.querySelectorAll('.edit-user').forEach(btn => {
669
+ btn.addEventListener('click', function() {
670
+ const userId = parseInt(this.getAttribute('data-id'));
671
+ editUser(userId);
672
+ });
673
+ });
674
+
675
+ document.querySelectorAll('.delete-user').forEach(btn => {
676
+ btn.addEventListener('click', function() {
677
+ const userId = parseInt(this.getAttribute('data-id'));
678
+ if (confirm('Are you sure you want to delete this user?')) {
679
+ deleteUser(userId);
680
+ }
681
+ });
682
+ });
683
+ }
684
+
685
+ function editUser(userId) {
686
+ const user = users.find(u => u.id === userId);
687
+ if (user) {
688
+ alert(`Editing user: ${user.username}\nThis would open an edit modal in a real application.`);
689
+ }
690
+ }
691
+
692
+ function deleteUser(userId) {
693
+ const index = users.findIndex(u => u.id === userId);
694
+ if (index !== -1) {
695
+ users.splice(index, 1);
696
+ populateUsersTable();
697
+ alert('User deleted successfully!');
698
+ }
699
+ }
700
+
701
+ function logout() {
702
+ currentUser = null;
703
+ localStorage.removeItem('currentUser');
704
+ app.classList.add('hidden');
705
+ loginPage.classList.remove('hidden');
706
+ loginForm.reset();
707
+ }
708
+ </script>
709
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=CabirPoya/poyaadmin" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
710
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ If you're creating a website (not a dashboard) with **1 admin** and **8 users**, you'll need a **text-based script** to define user roles, permissions, and basic interactions. Below is a simplified example using **HTML/CSS/JS** for the frontend and **PHP/MySQL** for the backend (but you can adapt this logic to any tech stack). --- ### **Step 1: Database Setup (MySQL)** Create a `users` table to store admin and user accounts: ```sql CREATE TABLE users ( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) NOT NULL, password VARCHAR(255) NOT NULL, -- Store hashed passwords (e.g., bcrypt) role ENUM('admin', 'user') NOT NULL ); ``` Insert sample data: ```sql -- Admin (password: "admin123") INSERT INTO users (username, password, role) VALUES ('admin', '$2y$10$hashed_password_here', 'admin'); -- Users (password: "user123") INSERT INTO users (username, password, role) VALUES ('user1', '$2y$10$hashed_password_here', 'user'), ('user2', '$2y$10$hashed_password_here', 'user'), ...; -- Add 8 users total ``` --- ### **Step 2: Login System (PHP)** Create `login.php` to authenticate users: ```php <?php session_start(); // Connect to MySQL $conn = mysqli_connect("localhost", "root", "", "your_database"); // Check login credentials if ($_SERVER['REQUEST_METHOD'] == 'POST') { $username = $_POST['username']; $password = $_POST['password']; $query = "SELECT * FROM users WHERE username='$username'"; $result = mysqli_query($conn, $query); $user = mysqli_fetch_assoc($result); if ($user && password_verify($password, $user['password'])) { $_SESSION['user_id'] = $user['id']; $_SESSION['role'] = $user['role']; header("Location: profile.php"); // Redirect to profile } else { echo "Invalid credentials!"; } } ?> ``` --- ### **Step 3: Role-Based Access (PHP)** Create `profile.php` to show content based on user role: ```php <?php session_start(); if (!isset($_SESSION['user_id'])) { header("Location: login.php"); // Redirect to login exit(); } $role = $_SESSION['role']; ?> <!DOCTYPE html> <html> <head> <title>Profile</title> </head> <body> <?php if ($role === 'admin'): ?> <h1>Welcome Admin!</h1> <p>Admin-only actions:</p> <ul> <li><a href="manage_users.php">Manage Users</a></li> <li><a href="site_settings.php">Site Settings</a></li> </ul> <?php else: ?> <h1>Welcome User!</h1> <p>Regular user content here.</p> <?php endif; ?> <a href="logout.php">Logout</a> </body> </html> ``` --- ### **Step 4: Admin Features (Example)** Create `manage_users.php` (admin-only): ```php <?php session_start(); // Ensure user is admin if ($_SESSION['role'] !== 'admin') { header("Location: profile.php"); exit(); } // Fetch all users from the database $query = "SELECT * FROM users"; $result = mysqli_query($conn, $query); ?> <!DOCTYPE html> <html> <head> <title>Manage Users</title> </head> <body> <h2>User List</h2> <table> <tr><th>ID</th><th>Username</th><th>Role</th></tr> <?php while ($row = mysqli_fetch_assoc($result)): ?> <tr> <td><?= $row['id'] ?></td> <td><?= $row['username'] ?></td> <td><?= $row['role'] ?></td> </tr> <?php endwhile; ?> </table> </body> </html> ``` --- ### **Step 5: Frontend Pages (HTML)** - **Login Page**: Simple form for username/password. - **User Profile**: Basic content for regular users. - **Admin Panel**: Links to manage users/settings. --- ### Security Notes: 1. Always hash passwords (use `password_hash()`/`password_verify()` in PHP). 2. Sanitize inputs to prevent SQL injection (use prepared statements). 3. Use HTTPS for secure communication. 4. Restrict access to admin pages using server-side checks. This is a basic template—customize it based on your specific needs (e.g., add more features like user registration, profile editing, etc.).