Hugging Face's logo

Spaces:
fsalmansour
/
bot
Running

App Files Community
fsalmansour commited on
Commit
b1355f8
·
verified ·
1 Parent(s): 8e3323d

Build a full-featured web dashboard application for managing a Telegram bot and server monitoring with the following features: 1. User Authentication: - Secure login page with username and password. - Passwords must be hashed and stored securely. - Support multiple user roles: Admin, User, Guest. - Role-based access control to restrict features per role. - Session management with auto-logout after inactivity. - Optionally add Two-Factor Authentication (2FA). 2. Dashboard Features: - Real-time server status overview (nginx, docker, etc.). - Display recent bot activity logs and alerts. - Ability to send commands to the Telegram bot from the dashboard. - Manage server services: restart, stop, start via UI. - Schedule and view periodic reports. - Manage authorized users: add, edit, remove users and assign roles. 3. Integration & Security: - REST API backend to interact with Telegram bot and server. - Secure API endpoints with token-based authentication. - Use HTTPS and secure cookies for web sessions. - Proper error handling and user feedback on UI. - Responsive and accessible UI design. 4. Technical Requirements: - Use modern web framework suitable for DeepSite generation (React, Vue, or similar). - Include database schema for user management (SQLite or PostgreSQL). - Provide sample API endpoints for bot communication. - Include frontend forms for login, user management, server control. - Implement websocket or polling for live server status updates. Write clean, modular, and documented code snippets for frontend, backend, and database setup. Include instructions on environment setup, dependencies, and deployment steps. --- Create the code files and folder structure required for this project with all necessary components for full operation. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +858 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Bot
3
- emoji: 🐠
4
- colorFrom: green
5
- colorTo: gray
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: bot
3
+ emoji: 🐳
4
+ colorFrom: pink
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,858 @@
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>Telegram Bot Manager & Server Monitor</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#4361ee',
15
+ secondary: '#3f37c9',
16
+ accent: '#4cc9f0',
17
+ dark: '#1d3557',
18
+ success: '#2ec4b6',
19
+ warning: '#ff9f1c',
20
+ danger: '#e71d36',
21
+ light: '#f8f9fa'
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style>
28
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
29
+
30
+ body {
31
+ font-family: 'Inter', sans-serif;
32
+ background-color: #f5f7fb;
33
+ }
34
+
35
+ .sidebar {
36
+ transition: all 0.3s ease;
37
+ }
38
+
39
+ .sidebar.collapsed {
40
+ width: 80px;
41
+ }
42
+
43
+ .sidebar.collapsed .sidebar-text {
44
+ display: none;
45
+ }
46
+
47
+ .sidebar.collapsed .sidebar-icon {
48
+ margin: 0 auto;
49
+ }
50
+
51
+ .card {
52
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
53
+ border-radius: 12px;
54
+ transition: all 0.3s ease;
55
+ }
56
+
57
+ .card:hover {
58
+ transform: translateY(-3px);
59
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
60
+ }
61
+
62
+ .status-indicator {
63
+ display: inline-block;
64
+ width: 12px;
65
+ height: 12px;
66
+ border-radius: 50%;
67
+ margin-right: 8px;
68
+ }
69
+
70
+ .status-up {
71
+ background-color: #10b981;
72
+ }
73
+
74
+ .status-down {
75
+ background-color: #ef4444;
76
+ }
77
+
78
+ .status-warning {
79
+ background-color: #f59e0b;
80
+ }
81
+
82
+ .pulse {
83
+ animation: pulse 2s infinite;
84
+ }
85
+
86
+ @keyframes pulse {
87
+ 0% {
88
+ box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
89
+ }
90
+ 70% {
91
+ box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
92
+ }
93
+ 100% {
94
+ box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
95
+ }
96
+ }
97
+
98
+ .log-entry {
99
+ border-left: 3px solid #4361ee;
100
+ padding-left: 12px;
101
+ margin-bottom: 12px;
102
+ }
103
+
104
+ .log-entry.warning {
105
+ border-left-color: #f59e0b;
106
+ }
107
+
108
+ .log-entry.error {
109
+ border-left-color: #ef4444;
110
+ }
111
+
112
+ .service-card {
113
+ transition: all 0.2s ease;
114
+ }
115
+
116
+ .service-card:hover {
117
+ transform: translateY(-2px);
118
+ }
119
+
120
+ .role-badge {
121
+ padding: 2px 8px;
122
+ border-radius: 20px;
123
+ font-size: 0.75rem;
124
+ font-weight: 500;
125
+ }
126
+
127
+ .admin-badge {
128
+ background-color: #fee2e2;
129
+ color: #dc2626;
130
+ }
131
+
132
+ .user-badge {
133
+ background-color: #dbeafe;
134
+ color: #2563eb;
135
+ }
136
+
137
+ .guest-badge {
138
+ background-color: #fef3c7;
139
+ color: #d97706;
140
+ }
141
+
142
+ .chart-container {
143
+ height: 200px;
144
+ }
145
+
146
+ .activity-indicator {
147
+ position: relative;
148
+ }
149
+
150
+ .activity-indicator::after {
151
+ content: "";
152
+ position: absolute;
153
+ top: 0;
154
+ right: 0;
155
+ width: 10px;
156
+ height: 10px;
157
+ background-color: #10b981;
158
+ border-radius: 50%;
159
+ animation: pulse 1.5s infinite;
160
+ }
161
+ </style>
162
+ </head>
163
+ <body class="bg-gray-50">
164
+ <!-- Login Page -->
165
+ <div id="login-page" class="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary to-secondary p-4">
166
+ <div class="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden">
167
+ <div class="p-8">
168
+ <div class="text-center mb-8">
169
+ <div class="mx-auto bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16 flex items-center justify-center mb-4">
170
+ <i class="fas fa-robot text-2xl text-primary"></i>
171
+ </div>
172
+ <h1 class="text-3xl font-bold text-gray-800">Bot Manager</h1>
173
+ <p class="text-gray-600 mt-2">Sign in to your dashboard</p>
174
+ </div>
175
+
176
+ <form id="login-form" class="space-y-6">
177
+ <div>
178
+ <label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
179
+ <div class="relative">
180
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
181
+ <i class="fas fa-user text-gray-400"></i>
182
+ </div>
183
+ <input type="text" id="username" class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Enter your username">
184
+ </div>
185
+ </div>
186
+
187
+ <div>
188
+ <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
189
+ <div class="relative">
190
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
191
+ <i class="fas fa-lock text-gray-400"></i>
192
+ </div>
193
+ <input type="password" id="password" class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Enter your password">
194
+ </div>
195
+ </div>
196
+
197
+ <div class="flex items-center justify-between">
198
+ <div class="flex items-center">
199
+ <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
200
+ <label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label>
201
+ </div>
202
+ <div class="text-sm">
203
+ <a href="#" class="font-medium text-primary hover:text-secondary">Forgot password?</a>
204
+ </div>
205
+ </div>
206
+
207
+ <div>
208
+ <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-primary hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-300">
209
+ Sign in
210
+ </button>
211
+ </div>
212
+ </form>
213
+
214
+ <div class="mt-6">
215
+ <div class="relative">
216
+ <div class="absolute inset-0 flex items-center">
217
+ <div class="w-full border-t border-gray-300"></div>
218
+ </div>
219
+ <div class="relative flex justify-center text-sm">
220
+ <span class="px-2 bg-white text-gray-500">Or continue with</span>
221
+ </div>
222
+ </div>
223
+
224
+ <div class="mt-6 grid grid-cols-2 gap-3">
225
+ <button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-lg shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
226
+ <i class="fab fa-google text-red-500 mr-2"></i>
227
+ Google
228
+ </button>
229
+ <button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-lg shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
230
+ <i class="fab fa-github text-gray-800 mr-2"></i>
231
+ GitHub
232
+ </button>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ <div class="bg-gray-50 px-8 py-4 text-center">
237
+ <p class="text-xs text-gray-600">
238
+ &copy; 2023 Bot Manager Dashboard. All rights reserved.
239
+ </p>
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <!-- Main Dashboard -->
245
+ <div id="dashboard" class="hidden min-h-screen flex flex-col">
246
+ <!-- Header -->
247
+ <header class="bg-white shadow-sm z-10">
248
+ <div class="flex items-center justify-between px-6 py-4">
249
+ <div class="flex items-center">
250
+ <button id="sidebar-toggle" class="mr-4 text-gray-500 hover:text-gray-700 focus:outline-none">
251
+ <i class="fas fa-bars text-xl"></i>
252
+ </button>
253
+ <h1 class="text-xl font-bold text-gray-800">Telegram Bot Manager</h1>
254
+ </div>
255
+
256
+ <div class="flex items-center space-x-4">
257
+ <div class="relative">
258
+ <button class="text-gray-500 hover:text-gray-700 relative">
259
+ <i class="fas fa-bell text-xl"></i>
260
+ <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-500 rounded-full">3</span>
261
+ </button>
262
+ </div>
263
+
264
+ <div class="flex items-center">
265
+ <div class="mr-3 text-right">
266
+ <p class="text-sm font-medium text-gray-800" id="user-display-name">John Doe</p>
267
+ <p class="text-xs text-gray-500" id="user-role">Administrator</p>
268
+ </div>
269
+ <div class="relative">
270
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User profile">
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </header>
276
+
277
+ <div class="flex flex-1 overflow-hidden">
278
+ <!-- Sidebar -->
279
+ <aside id="sidebar" class="sidebar w-64 bg-white shadow-md flex flex-col">
280
+ <nav class="flex-1 px-4 py-6">
281
+ <ul class="space-y-2">
282
+ <li>
283
+ <a href="#" class="flex items-center p-3 text-gray-700 rounded-lg hover:bg-gray-100 active">
284
+ <i class="fas fa-home sidebar-icon text-primary text-lg mr-3"></i>
285
+ <span class="sidebar-text font-medium">Dashboard</span>
286
+ </a>
287
+ </li>
288
+ <li>
289
+ <a href="#" class="flex items-center p-3 text-gray-700 rounded-lg hover:bg-gray-100">
290
+ <i class="fas fa-robot sidebar-icon text-primary text-lg mr-3"></i>
291
+ <span class="sidebar-text font-medium">Bot Management</span>
292
+ </a>
293
+ </li>
294
+ <li>
295
+ <a href="#" class="flex items-center p-3 text-gray-700 rounded-lg hover:bg-gray-100">
296
+ <i class="fas fa-server sidebar-icon text-primary text-lg mr-3"></i>
297
+ <span class="sidebar-text font-medium">Server Status</span>
298
+ </a>
299
+ </li>
300
+ <li>
301
+ <a href="#" class="flex items-center p-3 text-gray-700 rounded-lg hover:bg-gray-100">
302
+ <i class="fas fa-cogs sidebar-icon text-primary text-lg mr-3"></i>
303
+ <span class="sidebar-text font-medium">Services</span>
304
+ </a>
305
+ </li>
306
+ <li>
307
+ <a href="#" class="flex items-center p-3 text-gray-700 rounded-lg hover:bg-gray-100">
308
+ <i class="fas fa-chart-line sidebar-icon text-primary text-lg mr-3"></i>
309
+ <span class="sidebar-text font-medium">Reports</span>
310
+ </a>
311
+ </li>
312
+ <li>
313
+ <a href="#" class="flex items-center p-3 text-gray-700 rounded-lg hover:bg-gray-100">
314
+ <i class="fas fa-users sidebar-icon text-primary text-lg mr-3"></i>
315
+ <span class="sidebar-text font-medium">Users</span>
316
+ </a>
317
+ </li>
318
+ <li>
319
+ <a href="#" class="flex items-center p-3 text-gray-700 rounded-lg hover:bg-gray-100">
320
+ <i class="fas fa-cog sidebar-icon text-primary text-lg mr-3"></i>
321
+ <span class="sidebar-text font-medium">Settings</span>
322
+ </a>
323
+ </li>
324
+ </ul>
325
+ </nav>
326
+
327
+ <div class="p-4 border-t border-gray-200">
328
+ <button id="logout-btn" class="w-full flex items-center p-3 text-gray-700 rounded-lg hover:bg-gray-100">
329
+ <i class="fas fa-sign-out-alt sidebar-icon text-danger text-lg mr-3"></i>
330
+ <span class="sidebar-text font-medium">Logout</span>
331
+ </button>
332
+ </div>
333
+ </aside>
334
+
335
+ <!-- Main Content -->
336
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
337
+ <div class="mb-6">
338
+ <h2 class="text-2xl font-bold text-gray-800">Dashboard Overview</h2>
339
+ <p class="text-gray-600">Welcome back! Here's what's happening with your bot and servers.</p>
340
+ </div>
341
+
342
+ <!-- Stats Cards -->
343
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
344
+ <div class="card bg-white p-6">
345
+ <div class="flex items-center">
346
+ <div class="p-3 rounded-lg bg-blue-100 text-primary mr-4">
347
+ <i class="fas fa-robot text-xl"></i>
348
+ </div>
349
+ <div>
350
+ <p class="text-gray-500 text-sm">Bot Status</p>
351
+ <div class="flex items-center mt-1">
352
+ <span class="status-indicator status-up pulse"></span>
353
+ <span class="text-lg font-semibold">Running</span>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <div class="card bg-white p-6">
360
+ <div class="flex items-center">
361
+ <div class="p-3 rounded-lg bg-green-100 text-success mr-4">
362
+ <i class="fas fa-server text-xl"></i>
363
+ </div>
364
+ <div>
365
+ <p class="text-gray-500 text-sm">Servers</p>
366
+ <p class="text-2xl font-bold">4</p>
367
+ </div>
368
+ </div>
369
+ </div>
370
+
371
+ <div class="card bg-white p-6">
372
+ <div class="flex items-center">
373
+ <div class="p-3 rounded-lg bg-yellow-100 text-warning mr-4">
374
+ <i class="fas fa-exclamation-circle text-xl"></i>
375
+ </div>
376
+ <div>
377
+ <p class="text-gray-500 text-sm">Alerts</p>
378
+ <p class="text-2xl font-bold">2</p>
379
+ </div>
380
+ </div>
381
+ </div>
382
+
383
+ <div class="card bg-white p-6">
384
+ <div class="flex items-center">
385
+ <div class="p-3 rounded-lg bg-purple-100 text-accent mr-4">
386
+ <i class="fas fa-users text-xl"></i>
387
+ </div>
388
+ <div>
389
+ <p class="text-gray-500 text-sm">Active Users</p>
390
+ <p class="text-2xl font-bold">18</p>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </div>
395
+
396
+ <!-- Server Status and Bot Activity -->
397
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
398
+ <!-- Server Status -->
399
+ <div class="card bg-white p-6">
400
+ <div class="flex justify-between items-center mb-4">
401
+ <h3 class="text-lg font-semibold text-gray-800">Server Status</h3>
402
+ <button class="text-sm text-primary hover:text-secondary">
403
+ <i class="fas fa-sync-alt mr-1"></i> Refresh
404
+ </button>
405
+ </div>
406
+
407
+ <div class="space-y-4">
408
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
409
+ <div class="flex items-center">
410
+ <div class="status-indicator status-up mr-3"></div>
411
+ <span class="font-medium">Nginx</span>
412
+ </div>
413
+ <span class="text-sm text-gray-500">Running</span>
414
+ </div>
415
+
416
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
417
+ <div class="flex items-center">
418
+ <div class="status-indicator status-up mr-3"></div>
419
+ <span class="font-medium">Docker</span>
420
+ </div>
421
+ <span class="text-sm text-gray-500">Running</span>
422
+ </div>
423
+
424
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
425
+ <div class="flex items-center">
426
+ <div class="status-indicator status-warning mr-3"></div>
427
+ <span class="font-medium">Database</span>
428
+ </div>
429
+ <span class="text-sm text-gray-500">Degraded</span>
430
+ </div>
431
+
432
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
433
+ <div class="flex items-center">
434
+ <div class="status-indicator status-up mr-3"></div>
435
+ <span class="font-medium">Redis</span>
436
+ </div>
437
+ <span class="text-sm text-gray-500">Running</span>
438
+ </div>
439
+ </div>
440
+ </div>
441
+
442
+ <!-- Bot Activity -->
443
+ <div class="card bg-white p-6">
444
+ <div class="flex justify-between items-center mb-4">
445
+ <h3 class="text-lg font-semibold text-gray-800">Bot Activity</h3>
446
+ <button class="text-sm text-primary hover:text-secondary">
447
+ View All
448
+ </button>
449
+ </div>
450
+
451
+ <div class="space-y-4 max-h-80 overflow-y-auto">
452
+ <div class="log-entry">
453
+ <p class="text-sm text-gray-800">User <span class="font-medium">Alex Johnson</span> sent command <span class="font-mono bg-gray-100 px-1 rounded">/status</span></p>
454
+ <p class="text-xs text-gray-500 mt-1">2 minutes ago</p>
455
+ </div>
456
+
457
+ <div class="log-entry warning">
458
+ <p class="text-sm text-gray-800">Warning: High CPU usage detected on server <span class="font-medium">prod-01</span></p>
459
+ <p class="text-xs text-gray-500 mt-1">5 minutes ago</p>
460
+ </div>
461
+
462
+ <div class="log-entry">
463
+ <p class="text-sm text-gray-800">Bot response sent to <span class="font-medium">@travelbot</span> channel</p>
464
+ <p class="text-xs text-gray-500 mt-1">8 minutes ago</p>
465
+ </div>
466
+
467
+ <div class="log-entry error">
468
+ <p class="text-sm text-gray-800">Error: Failed to connect to database</p>
469
+ <p class="text-xs text-gray-500 mt-1">12 minutes ago</p>
470
+ </div>
471
+
472
+ <div class="log-entry">
473
+ <p class="text-sm text-gray-800">User <span class="font-medium">Sarah Miller</span> sent command <span class="font-mono bg-gray-100 px-1 rounded">/help</span></p>
474
+ <p class="text-xs text-gray-500 mt-1">15 minutes ago</p>
475
+ </div>
476
+
477
+ <div class="log-entry">
478
+ <p class="text-sm text-gray-800">Scheduled report generated and sent</p>
479
+ <p class="text-xs text-gray-500 mt-1">22 minutes ago</p>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </div>
484
+
485
+ <!-- Services and Send Command -->
486
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
487
+ <!-- Services Control -->
488
+ <div class="card bg-white p-6">
489
+ <div class="flex justify-between items-center mb-4">
490
+ <h3 class="text-lg font-semibold text-gray-800">Server Services</h3>
491
+ <button class="text-sm text-primary hover:text-secondary">
492
+ Manage All
493
+ </button>
494
+ </div>
495
+
496
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
497
+ <div class="service-card bg-gray-50 p-4 rounded-lg border border-gray-200">
498
+ <div class="flex justify-between items-start">
499
+ <div>
500
+ <h4 class="font-medium">Nginx</h4>
501
+ <p class="text-sm text-gray-500">Web Server</p>
502
+ </div>
503
+ <span class="status-indicator status-up"></span>
504
+ </div>
505
+ <div class="flex space-x-2 mt-3">
506
+ <button class="text-xs bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-2 rounded">Restart</button>
507
+ <button class="text-xs bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-2 rounded">Stop</button>
508
+ </div>
509
+ </div>
510
+
511
+ <div class="service-card bg-gray-50 p-4 rounded-lg border border-gray-200">
512
+ <div class="flex justify-between items-start">
513
+ <div>
514
+ <h4 class="font-medium">Docker</h4>
515
+ <p class="text-sm text-gray-500">Container Engine</p>
516
+ </div>
517
+ <span class="status-indicator status-up"></span>
518
+ </div>
519
+ <div class="flex space-x-2 mt-3">
520
+ <button class="text-xs bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-2 rounded">Restart</button>
521
+ <button class="text-xs bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-2 rounded">Stop</button>
522
+ </div>
523
+ </div>
524
+
525
+ <div class="service-card bg-gray-50 p-4 rounded-lg border border-gray-200">
526
+ <div class="flex justify-between items-start">
527
+ <div>
528
+ <h4 class="font-medium">PostgreSQL</h4>
529
+ <p class="text-sm text-gray-500">Database</p>
530
+ </div>
531
+ <span class="status-indicator status-warning"></span>
532
+ </div>
533
+ <div class="flex space-x-2 mt-3">
534
+ <button class="text-xs bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-2 rounded">Restart</button>
535
+ <button class="text-xs bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-2 rounded">Stop</button>
536
+ </div>
537
+ </div>
538
+
539
+ <div class="service-card bg-gray-50 p-4 rounded-lg border border-gray-200">
540
+ <div class="flex justify-between items-start">
541
+ <div>
542
+ <h4 class="font-medium">Redis</h4>
543
+ <p class="text-sm text-gray-500">Cache</p>
544
+ </div>
545
+ <span class="status-indicator status-up"></span>
546
+ </div>
547
+ <div class="flex space-x-2 mt-3">
548
+ <button class="text-xs bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-2 rounded">Restart</button>
549
+ <button class="text-xs bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-2 rounded">Stop</button>
550
+ </div>
551
+ </div>
552
+ </div>
553
+ </div>
554
+
555
+ <!-- Send Command -->
556
+ <div class="card bg-white p-6">
557
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Send Command to Bot</h3>
558
+
559
+ <div class="mb-4">
560
+ <label class="block text-sm font-medium text-gray-700 mb-1">Command</label>
561
+ <div class="flex">
562
+ <input type="text" class="block w-full px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-primary focus:border-primary" placeholder="/command [arguments]">
563
+ <button class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded-r-lg transition duration-300">
564
+ Send
565
+ </button>
566
+ </div>
567
+ <p class="mt-1 text-xs text-gray-500">Example: /broadcast Hello everyone!</p>
568
+ </div>
569
+
570
+ <div class="mb-4">
571
+ <label class="block text-sm font-medium text-gray-700 mb-1">Target</label>
572
+ <select class="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary">
573
+ <option>All Users</option>
574
+ <option>Active Users</option>
575
+ <option>Specific Group</option>
576
+ <option>Channel</option>
577
+ </select>
578
+ </div>
579
+
580
+ <div class="mb-4">
581
+ <label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
582
+ <textarea class="block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary" rows="3" placeholder="Enter your message here..."></textarea>
583
+ </div>
584
+
585
+ <button class="w-full bg-primary hover:bg-secondary text-white py-2 px-4 rounded-lg transition duration-300">
586
+ Send Command
587
+ </button>
588
+ </div>
589
+ </div>
590
+
591
+ <!-- Users and Reports -->
592
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
593
+ <!-- Authorized Users -->
594
+ <div class="card bg-white p-6">
595
+ <div class="flex justify-between items-center mb-4">
596
+ <h3 class="text-lg font-semibold text-gray-800">Authorized Users</h3>
597
+ <button class="text-sm bg-primary hover:bg-secondary text-white py-1 px-3 rounded-lg transition duration-300">
598
+ Add User
599
+ </button>
600
+ </div>
601
+
602
+ <div class="overflow-x-auto">
603
+ <table class="min-w-full divide-y divide-gray-200">
604
+ <thead class="bg-gray-50">
605
+ <tr>
606
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
607
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>
608
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
609
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
610
+ </tr>
611
+ </thead>
612
+ <tbody class="bg-white divide-y divide-gray-200">
613
+ <tr>
614
+ <td class="px-6 py-4 whitespace-nowrap">
615
+ <div class="flex items-center">
616
+ <div class="flex-shrink-0 h-10 w-10">
617
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
618
+ </div>
619
+ <div class="ml-4">
620
+ <div class="text-sm font-medium text-gray-900">John Doe</div>
621
+ <div class="text-sm text-gray-500">[email protected]</div>
622
+ </div>
623
+ </div>
624
+ </td>
625
+ <td class="px-6 py-4 whitespace-nowrap">
626
+ <span class="role-badge admin-badge">Admin</span>
627
+ </td>
628
+ <td class="px-6 py-4 whitespace-nowrap">
629
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
630
+ Active
631
+ </span>
632
+ </td>
633
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
634
+ <button class="text-primary hover:text-secondary mr-3">
635
+ <i class="fas fa-edit"></i>
636
+ </button>
637
+ <button class="text-danger hover:text-red-700">
638
+ <i class="fas fa-trash"></i>
639
+ </button>
640
+ </td>
641
+ </tr>
642
+ <tr>
643
+ <td class="px-6 py-4 whitespace-nowrap">
644
+ <div class="flex items-center">
645
+ <div class="flex-shrink-0 h-10 w-10">
646
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
647
+ </div>
648
+ <div class="ml-4">
649
+ <div class="text-sm font-medium text-gray-900">Jane Smith</div>
650
+ <div class="text-sm text-gray-500">[email protected]</div>
651
+ </div>
652
+ </div>
653
+ </td>
654
+ <td class="px-6 py-4 whitespace-nowrap">
655
+ <span class="role-badge user-badge">User</span>
656
+ </td>
657
+ <td class="px-6 py-4 whitespace-nowrap">
658
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
659
+ Active
660
+ </span>
661
+ </td>
662
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
663
+ <button class="text-primary hover:text-secondary mr-3">
664
+ <i class="fas fa-edit"></i>
665
+ </button>
666
+ <button class="text-danger hover:text-red-700">
667
+ <i class="fas fa-trash"></i>
668
+ </button>
669
+ </td>
670
+ </tr>
671
+ <tr>
672
+ <td class="px-6 py-4 whitespace-nowrap">
673
+ <div class="flex items-center">
674
+ <div class="flex-shrink-0 h-10 w-10">
675
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
676
+ </div>
677
+ <div class="ml-4">
678
+ <div class="text-sm font-medium text-gray-900">Robert Johnson</div>
679
+ <div class="text-sm text-gray-500">[email protected]</div>
680
+ </div>
681
+ </div>
682
+ </td>
683
+ <td class="px-6 py-4 whitespace-nowrap">
684
+ <span class="role-badge guest-badge">Guest</span>
685
+ </td>
686
+ <td class="px-6 py-4 whitespace-nowrap">
687
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
688
+ Pending
689
+ </span>
690
+ </td>
691
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
692
+ <button class="text-primary hover:text-secondary mr-3">
693
+ <i class="fas fa-edit"></i>
694
+ </button>
695
+ <button class="text-danger hover:text-red-700">
696
+ <i class="fas fa-trash"></i>
697
+ </button>
698
+ </td>
699
+ </tr>
700
+ </tbody>
701
+ </table>
702
+ </div>
703
+ </div>
704
+
705
+ <!-- Reports -->
706
+ <div class="card bg-white p-6">
707
+ <div class="flex justify-between items-center mb-4">
708
+ <h3 class="text-lg font-semibold text-gray-800">Scheduled Reports</h3>
709
+ <button class="text-sm bg-primary hover:bg-secondary text-white py-1 px-3 rounded-lg transition duration-300">
710
+ Schedule Report
711
+ </button>
712
+ </div>
713
+
714
+ <div class="space-y-4">
715
+ <div class="p-4 border border-gray-200 rounded-lg">
716
+ <div class="flex justify-between items-start">
717
+ <div>
718
+ <h4 class="font-medium">Daily Server Status</h4>
719
+ <p class="text-sm text-gray-500">Every day at 9:00 AM</p>
720
+ </div>
721
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Active</span>
722
+ </div>
723
+ <div class="flex space-x-2 mt-3">
724
+ <button class="text-xs bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-2 rounded">Edit</button>
725
+ <button class="text-xs bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-2 rounded">Pause</button>
726
+ </div>
727
+ </div>
728
+
729
+ <div class="p-4 border border-gray-200 rounded-lg">
730
+ <div class="flex justify-between items-start">
731
+ <div>
732
+ <h4 class="font-medium">Weekly Bot Analytics</h4>
733
+ <p class="text-sm text-gray-500">Every Monday at 10:00 AM</p>
734
+ </div>
735
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Active</span>
736
+ </div>
737
+ <div class="flex space-x-2 mt-3">
738
+ <button class="text-xs bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-2 rounded">Edit</button>
739
+ <button class="text-xs bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-2 rounded">Pause</button>
740
+ </div>
741
+ </div>
742
+
743
+ <div class="p-4 border border-gray-200 rounded-lg">
744
+ <div class="flex justify-between items-start">
745
+ <div>
746
+ <h4 class="font-medium">Monthly Usage Report</h4>
747
+ <p class="text-sm text-gray-500">First day of every month</p>
748
+ </div>
749
+ <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Paused</span>
750
+ </div>
751
+ <div class="flex space-x-2 mt-3">
752
+ <button class="text-xs bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-2 rounded">Edit</button>
753
+ <button class="text-xs bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-2 rounded">Resume</button>
754
+ </div>
755
+ </div>
756
+ </div>
757
+ </div>
758
+ </div>
759
+ </main>
760
+ </div>
761
+ </div>
762
+
763
+ <script>
764
+ // Mock user data
765
+ const users = {
766
+ admin: {
767
+ username: "admin",
768
+ password: "admin123", // In real app, this would be hashed
769
+ role: "Administrator",
770
+ name: "Admin User"
771
+ },
772
+ user: {
773
+ username: "user",
774
+ password: "user123",
775
+ role: "User",
776
+ name: "Regular User"
777
+ },
778
+ guest: {
779
+ username: "guest",
780
+ password: "guest123",
781
+ role: "Guest",
782
+ name: "Guest User"
783
+ }
784
+ };
785
+
786
+ // DOM Elements
787
+ const loginPage = document.getElementById('login-page');
788
+ const dashboard = document.getElementById('dashboard');
789
+ const loginForm = document.getElementById('login-form');
790
+ const logoutBtn = document.getElementById('logout-btn');
791
+ const sidebarToggle = document.getElementById('sidebar-toggle');
792
+ const sidebar = document.getElementById('sidebar');
793
+ const userDisplayName = document.getElementById('user-display-name');
794
+ const userRole = document.getElementById('user-role');
795
+
796
+ // Login functionality
797
+ loginForm.addEventListener('submit', function(e) {
798
+ e.preventDefault();
799
+ const username = document.getElementById('username').value;
800
+ const password = document.getElementById('password').value;
801
+
802
+ // Simple authentication (in real app, this would be server-side)
803
+ if (users[username] && users[username].password === password) {
804
+ // Set user session
805
+ localStorage.setItem('currentUser', JSON.stringify(users[username]));
806
+
807
+ // Update UI with user info
808
+ userDisplayName.textContent = users[username].name;
809
+ userRole.textContent = users[username].role;
810
+
811
+ // Show dashboard and hide login
812
+ loginPage.classList.add('hidden');
813
+ dashboard.classList.remove('hidden');
814
+ } else {
815
+ alert('Invalid username or password');
816
+ }
817
+ });
818
+
819
+ // Logout functionality
820
+ logoutBtn.addEventListener('click', function() {
821
+ localStorage.removeItem('currentUser');
822
+ dashboard.classList.add('hidden');
823
+ loginPage.classList.remove('hidden');
824
+ });
825
+
826
+ // Sidebar toggle
827
+ sidebarToggle.addEventListener('click', function() {
828
+ sidebar.classList.toggle('collapsed');
829
+ });
830
+
831
+ // Check if user is already logged in
832
+ window.addEventListener('load', function() {
833
+ const currentUser = localStorage.getItem('currentUser');
834
+ if (currentUser) {
835
+ const user = JSON.parse(currentUser);
836
+ userDisplayName.textContent = user.name;
837
+ userRole.textContent = user.role;
838
+ loginPage.classList.add('hidden');
839
+ dashboard.classList.remove('hidden');
840
+ }
841
+ });
842
+
843
+ // Simulate real-time updates
844
+ setInterval(() => {
845
+ // In a real app, this would fetch data from an API
846
+ // For demo purposes, we'll just simulate status changes
847
+ const serverStatuses = document.querySelectorAll('.status-indicator');
848
+ serverStatuses.forEach(indicator => {
849
+ // Randomly change status for demo
850
+ if (Math.random() > 0.7) {
851
+ indicator.classList.toggle('status-up');
852
+ indicator.classList.toggle('status-warning');
853
+ }
854
+ });
855
+ }, 5000);
856
+ </script>
857
+ <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=fsalmansour/bot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
858
+ </html>