Hugging Face's logo

Spaces:
azils3
/
Professor
Running

App Files Community
azils3 commited on
Commit
09f686f
·
verified ·
1 Parent(s): a24cb71

Update templates/dashboard.html

Browse files
Files changed (1) hide show
  1. templates/dashboard.html +379 -1357
templates/dashboard.html CHANGED
@@ -1,1358 +1,380 @@
1
- <!-- File: C:\Users\Shakeel\Desktop\PROFESSOR-BOT\templates\dashboard.html -->
2
- <!DOCTYPE html>
3
- <html lang="en">
4
- <head>
5
- <meta charset="utf-8"/>
6
- <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
7
- <title>Professor Bot Dashboard</title>
8
- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
9
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
- <style>
11
- :root {
12
- --primary-color: #00ffff;
13
- --background-dark: #0f1115;
14
- --secondary-dark: #1a1d23;
15
- --purple: #6c5dd3;
16
- --text-color: #ffffff;
17
- --border-color: #2a2e35;
18
- --accent-color: #4CAF50;
19
- }
20
-
21
- * {
22
- margin: 0;
23
- padding: 0;
24
- box-sizing: border-box;
25
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
26
- }
27
-
28
- body {
29
- background-color: var(--background-dark);
30
- color: var(--text-color);
31
- position: relative;
32
- }
33
-
34
- /* Navbar Styles */
35
- .navbar {
36
- display: flex;
37
- justify-content: space-between;
38
- align-items: center;
39
- padding: 1rem 2rem;
40
- background-color: var(--background-dark);
41
- border-bottom: 1px solid var(--border-color);
42
- }
43
-
44
- .logo {
45
- color: var(--primary-color);
46
- font-size: 2rem;
47
- font-weight: bold;
48
- background-image: url('/static/images/logo.png');
49
- background-size: contain;
50
- background-repeat: no-repeat;
51
- background-position: left;
52
- padding-left: 40px;
53
- height: 40px;
54
- }
55
-
56
- .nav-left {
57
- display: flex;
58
- align-items: center;
59
- gap: 1rem;
60
- }
61
-
62
- .dropdown {
63
- background-color: var(--secondary-dark);
64
- padding: 0.5rem 1rem;
65
- border-radius: 8px;
66
- display: flex;
67
- align-items: center;
68
- gap: 0.5rem;
69
- cursor: pointer;
70
- }
71
-
72
- .nav-right {
73
- display: flex;
74
- align-items: center;
75
- gap: 1rem;
76
- position: relative;
77
- }
78
-
79
- .profile-photo {
80
- width: 40px;
81
- height: 40px;
82
- background-image: url('/static/images/profile.jpg');
83
- background-size: cover;
84
- border-radius: 50%;
85
- cursor: pointer;
86
- position: relative;
87
- }
88
-
89
- .profile-menu {
90
- display: none;
91
- position: absolute;
92
- top: 100%;
93
- right: 0;
94
- background-color: var(--background-dark);
95
- border: 1px solid var(--border-color);
96
- border-radius: 8px;
97
- z-index: 1000;
98
- }
99
-
100
- .profile-menu a {
101
- display: block;
102
- padding: 0.8rem 1rem;
103
- color: var(--text-color);
104
- text-decoration: none;
105
- }
106
-
107
- .profile-menu a:hover {
108
- background-color: var(--secondary-dark);
109
- }
110
-
111
- /* Main Content Styles */
112
- .main-content {
113
- display: flex;
114
- height: calc(100vh - 70px);
115
- }
116
-
117
- /* Sidebar Styles */
118
- .sidebar {
119
- width: 250px;
120
- background-color: var(--background-dark);
121
- padding: 1rem;
122
- border-right: 1px solid var(--border-color);
123
- transition: transform 0.3s;
124
- transform: translateX(0);
125
- }
126
-
127
- .sidebar-item {
128
- padding: 0.8rem;
129
- margin: 0.5rem 0;
130
- border-radius: 8px;
131
- cursor: pointer;
132
- transition: background-color 0.3s;
133
- display: flex;
134
- align-items: center;
135
- gap: 0.5rem;
136
- }
137
-
138
- .sidebar-item:hover {
139
- background-color: var(--secondary-dark);
140
- }
141
-
142
- .sidebar-item.active {
143
- background-color: var(--secondary-dark);
144
- }
145
-
146
- /* Content Area Styles */
147
- .content-area {
148
- flex: 1;
149
- padding: 2rem;
150
- background-color: var(--background-dark);
151
- overflow-y: auto;
152
- }
153
-
154
- .page-title {
155
- font-size: 1.5rem;
156
- margin-bottom: 1.5rem;
157
- }
158
-
159
- .stats-grid {
160
- display: grid;
161
- grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
162
- gap: 1rem;
163
- margin-bottom: 1.5rem;
164
- }
165
-
166
- .stat-card {
167
- background-color: var(--secondary-dark);
168
- padding: 1.5rem;
169
- border-radius: 12px;
170
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
171
- transition: transform 0.3s;
172
- cursor: pointer;
173
- }
174
-
175
- .stat-card:hover {
176
- transform: translateY(-5px);
177
- }
178
-
179
- .stat-header {
180
- display: flex;
181
- justify-content: space-between;
182
- align-items: center;
183
- margin-bottom: 1rem;
184
- }
185
-
186
- .stat-icon {
187
- width: 45px;
188
- height: 45px;
189
- border-radius: 12px;
190
- display: flex;
191
- align-items: center;
192
- justify-content: center;
193
- font-size: 20px;
194
- color: white;
195
- background-color: var(--purple);
196
- }
197
-
198
- .charts-grid {
199
- display: grid;
200
- grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
201
- gap: 1rem;
202
- margin-bottom: 1.5rem;
203
- }
204
-
205
- .chart-card {
206
- background-color: var(--secondary-dark);
207
- padding: 1.5rem;
208
- border-radius: 12px;
209
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
210
- height: 300px; /* Fixed height */
211
- }
212
-
213
- .platform-grid, .thumbnail-grid {
214
- display: grid;
215
- grid-template-columns: repeat(5, 1fr); /* 5 columns for platforms and thumbnails */
216
- gap: 1rem;
217
- margin-bottom: 1.5rem;
218
- }
219
-
220
- .platform-card, .thumbnail-card {
221
- background-color: var(--secondary-dark);
222
- padding: 1rem;
223
- border-radius: 12px;
224
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
225
- }
226
-
227
- .platform-header {
228
- display: flex;
229
- align-items: center;
230
- gap: 0.5rem;
231
- margin-bottom: 1rem;
232
- }
233
-
234
- .platform-icon {
235
- font-size: 24px;
236
- }
237
-
238
- .progress-bar {
239
- width: 100%;
240
- height: 8px;
241
- background-color: var(--border-color);
242
- border-radius: 4px;
243
- margin-top: 1rem;
244
- }
245
-
246
- .progress {
247
- height: 100%;
248
- border-radius: 4px;
249
- background-color: var(--purple);
250
- }
251
-
252
- .recent-videos {
253
- background-color: var(--secondary-dark);
254
- padding: 1.5rem;
255
- border-radius: 12px;
256
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
257
- }
258
-
259
- .thumbnail-card {
260
- aspect-ratio: 9/16;
261
- border-radius: 12px;
262
- overflow: hidden;
263
- position: relative;
264
- cursor: pointer;
265
- border: 2px solid transparent;
266
- background-color: var(--secondary-dark);
267
- display: flex;
268
- flex-direction: column;
269
- align-items: center;
270
- justify-content: center;
271
- }
272
-
273
- .thumbnail-card:hover {
274
- border-color: var(--purple);
275
- }
276
-
277
- .thumbnail-card.selected {
278
- border-color: var(--purple);
279
- }
280
-
281
- .thumbnail-card img {
282
- width: 100%;
283
- height: 100%;
284
- object-fit: cover;
285
- }
286
-
287
- .thumbnail-card .thumbnail-label {
288
- position: absolute;
289
- bottom: 0;
290
- left: 0;
291
- right: 0;
292
- padding: 1rem;
293
- background: linear-gradient(transparent, rgba(0,0,0,0.7));
294
- color: white;
295
- }
296
-
297
- .thumbnail-card.create-new-video {
298
- background: rgba(76, 175, 80, 0.1);
299
- border: 2px dashed var(--accent-color);
300
- display: flex;
301
- flex-direction: column;
302
- align-items: center;
303
- justify-content: center;
304
- cursor: pointer;
305
- min-height: 200px;
306
- }
307
-
308
- .thumbnail-card.create-new-video i {
309
- font-size: 40px;
310
- margin-bottom: 15px;
311
- color: rgba(108, 93, 211, 0.7);
312
- }
313
-
314
- .thumbnail-card.create-new-video .thumbnail-label {
315
- font-size: 18px;
316
- color: var(--accent-color);
317
- }
318
-
319
- /* Responsive Styles */
320
- @media (max-width: 768px) {
321
- .sidebar {
322
- transform: translateX(-100%);
323
- }
324
-
325
- .sidebar.active {
326
- transform: translateX(0);
327
- }
328
-
329
- .navbar .nav-left {
330
- flex-direction: column;
331
- align-items: flex-start;
332
- }
333
-
334
- .navbar .logo {
335
- padding-left: 0;
336
- width: 100%;
337
- text-align: center;
338
- background-image: none;
339
- }
340
-
341
- .navbar .nav-right {
342
- width: 100%;
343
- justify-content: center;
344
- margin-top: 1rem;
345
- }
346
- }
347
- </style>
348
- </head>
349
- <body>
350
- <div class="navbar">
351
- <div class="nav-left">
352
- <div class="logo">Professor Bot</div>
353
- <div class="dropdown" id="toggleSidebar">
354
- <span>Dashboard</span>
355
- <i class="fas fa-chevron-down"></i>
356
- </div>
357
- </div>
358
- <div class="nav-right">
359
- <div class="profile-photo" id="profilePhoto"></div>
360
- <div class="profile-menu" id="profileMenu">
361
- <a href="#">Profile</a>
362
- <a href="#">Logout</a>
363
- </div>
364
- </div>
365
- </div>
366
- <div class="main-content">
367
- <div class="sidebar" id="sidebar">
368
- <div class="sidebar-item active" data-tab="dashboard">
369
- <span>📊</span>
370
- <span>Dashboard</span>
371
- </div>
372
- <div class="sidebar-item" data-tab="filters">
373
- <span>📝</span>
374
- <span>Filters</span>
375
- </div>
376
- <div class="sidebar-item" data-tab="global-filters">
377
- <span>🌐</span>
378
- <span>Global Filters</span>
379
- </div>
380
- <div class="sidebar-item" data-tab="users">
381
- <span>👥</span>
382
- <span>Users</span>
383
- </div>
384
- <div class="sidebar-item" data-tab="chats">
385
- <span>💬</span>
386
- <span>Chats</span>
387
- </div>
388
- <div class="sidebar-item" data-tab="files">
389
- <span>📁</span>
390
- <span>Files</span>
391
- </div>
392
- <div class="sidebar-item" data-tab="broadcast">
393
- <span>📢</span>
394
- <span>Broadcast</span>
395
- </div>
396
- <div class="sidebar-item" data-tab="connections">
397
- <span>🔗</span>
398
- <span>Connections</span>
399
- </div>
400
- <div class="sidebar-item" data-tab="settings">
401
- <span>🔧</span>
402
- <span>Settings</span>
403
- </div>
404
- <div class="sidebar-item" data-tab="stats">
405
- <span>📈</span>
406
- <span>Stats</span>
407
- </div>
408
- <div class="sidebar-item" data-tab="group-manager">
409
- <span>👥</span>
410
- <span>Group Manager</span>
411
- </div>
412
- <div class="sidebar-item" data-tab="extra-mods">
413
- <span>🛠️</span>
414
- <span>Extra Mods</span>
415
- </div>
416
- </div>
417
- <div class="content-area">
418
- <div id="dashboard-content" class="tab-content active">
419
- <h2 class="page-title">Dashboard Overview</h2>
420
- <p>Get a comprehensive overview of your bot's performance, including total files, users, and chats.</p>
421
-
422
- <div class="stats-grid">
423
- <div class="stat-card">
424
- <div class="stat-header">
425
- <div>
426
- <h3>Total Files</h3>
427
- <p style="font-size: 28px; font-weight: bold;" id="totalFiles">Loading...</p>
428
- </div>
429
- <div class="stat-icon">
430
- <i class="fas fa-file-alt"></i>
431
- </div>
432
- </div>
433
- <p style="color: #4caf50;">File statistics</p>
434
- </div>
435
- <div class="stat-card">
436
- <div class="stat-header">
437
- <div>
438
- <h3>Total Users</h3>
439
- <p style="font-size: 28px; font-weight: bold;" id="totalUsers">Loading...</p>
440
- </div>
441
- <div class="stat-icon">
442
- <i class="fas fa-users"></i>
443
- </div>
444
- </div>
445
- <p style="color: #4caf50;">User statistics</p>
446
- </div>
447
- <div class="stat-card">
448
- <div class="stat-header">
449
- <div>
450
- <h3>Total Chats</h3>
451
- <p style="font-size: 28px; font-weight: bold;" id="totalChats">Loading...</p>
452
- </div>
453
- <div class="stat-icon">
454
- <i class="fas fa-comments"></i>
455
- </div>
456
- </div>
457
- <p style="color: #4caf50;">Chat statistics</p>
458
- </div>
459
- <div class="stat-card">
460
- <div class="stat-header">
461
- <div>
462
- <h3>Operating System</h3>
463
- <p style="font-size: 28px; font-weight: bold;" id="osName">Loading...</p>
464
- </div>
465
- <div class="stat-icon">
466
- <i class="fas fa-server"></i>
467
- </div>
468
- </div>
469
- <p id="osVersion" style="color: #4caf50;">Loading...</p>
470
- </div>
471
- <div class="stat-card">
472
- <div class="stat-header">
473
- <div>
474
- <h3>Uptime</h3>
475
- <p style="font-size: 28px; font-weight: bold;" id="uptime">Loading...</p>
476
- </div>
477
- <div class="stat-icon">
478
- <i class="fas fa-clock"></i>
479
- </div>
480
- </div>
481
- <p style="color: #4caf50;">Time since last boot</p>
482
- </div>
483
- <div class="stat-card">
484
- <div class="stat-header">
485
- <div>
486
- <h3>Storage</h3>
487
- <p style="font-size: 28px; font-weight: bold;" id="storage">Loading...</p>
488
- </div>
489
- <div class="stat-icon">
490
- <i class="fas fa-hdd"></i>
491
- </div>
492
- </div>
493
- <p style="color: #4caf50;">Total / Free</p>
494
- </div>
495
- </div>
496
-
497
- <div class="charts-grid">
498
- <div class="chart-card">
499
- <h3>Upload Performance</h3>
500
- <canvas id="performanceChart"></canvas>
501
- </div>
502
- <div class="chart-card">
503
- <h3>Platform Distribution</h3>
504
- <canvas id="platformChart"></canvas>
505
- </div>
506
- </div>
507
-
508
- <div class="recent-videos">
509
- <h2>Recent Uploads</h2>
510
- <p>View and manage your recent video uploads.</p>
511
- <div class="thumbnail-grid" id="recentFilesGrid">
512
- <!-- Thumbnails will be dynamically loaded here -->
513
- </div>
514
- </div>
515
- </div>
516
- <div id="filters-content" class="tab-content" style="display: none;">
517
- <h2 class="page-title">Filters</h2>
518
- <p>Manage and organize your local filters.</p>
519
- <form id="addFilterForm">
520
- <label for="chatId">Chat ID:</label>
521
- <input type="text" id="chatId" name="chatId" required>
522
- <label for="filterText">Filter Text:</label>
523
- <input type="text" id="filterText" name="filterText" required>
524
- <label for="replyText">Reply Text:</label>
525
- <textarea id="replyText" name="replyText" required></textarea>
526
- <label for="btn">Buttons (JSON):</label>
527
- <textarea id="btn" name="btn"></textarea>
528
- <label for="file">File ID:</label>
529
- <input type="text" id="file" name="file">
530
- <label for="alert">Alerts (JSON):</label>
531
- <textarea id="alert" name="alert"></textarea>
532
- <button type="submit">Add Filter</button>
533
- </form>
534
- <div class="filters-list" id="filtersList">
535
- <!-- Filters will be dynamically loaded here -->
536
- </div>
537
- </div>
538
- <div id="global-filters-content" class="tab-content" style="display: none;">
539
- <h2 class="page-title">Global Filters</h2>
540
- <p>Manage and organize your global filters.</p>
541
- <form id="addGFilterForm">
542
- <label for="gfilterText">Filter Text:</label>
543
- <input type="text" id="gfilterText" name="gfilterText" required>
544
- <label for="greplyText">Reply Text:</label>
545
- <textarea id="greplyText" name="greplyText" required></textarea>
546
- <label for="gbtn">Buttons (JSON):</label>
547
- <textarea id="gbtn" name="gbtn"></textarea>
548
- <label for="gfile">File ID:</label>
549
- <input type="text" id="gfile" name="gfile">
550
- <label for="galert">Alerts (JSON):</label>
551
- <textarea id="galert" name="galert"></textarea>
552
- <button type="submit">Add Global Filter</button>
553
- </form>
554
- <div class="gfilters-list" id="gfiltersList">
555
- <!-- Global Filters will be dynamically loaded here -->
556
- </div>
557
- </div>
558
- <div id="users-content" class="tab-content" style="display: none;">
559
- <h2 class="page-title">Users</h2>
560
- <p>Manage and view all users connected to the bot.</p>
561
- <div class="users-list" id="usersList">
562
- <!-- Users will be dynamically loaded here -->
563
- </div>
564
- </div>
565
- <div id="chats-content" class="tab-content" style="display: none;">
566
- <h2 class="page-title">Chats</h2>
567
- <p>Manage and view all chats connected to the bot.</p>
568
- <div class="chats-list" id="chatsList">
569
- <!-- Chats will be dynamically loaded here -->
570
- </div>
571
- </div>
572
- <div id="files-content" class="tab-content" style="display: none;">
573
- <h2 class="page-title">Files</h2>
574
- <p>Manage and view all files stored in the bot's database.</p>
575
- <form id="uploadFileForm" enctype="multipart/form-data">
576
- <label for="fileUpload">Upload File:</label>
577
- <input type="file" id="fileUpload" name="fileUpload" required>
578
- <button type="submit">Upload File</button>
579
- </form>
580
- <div class="files-list" id="filesList">
581
- <!-- Files will be dynamically loaded here -->
582
- </div>
583
- </div>
584
- <div id="broadcast-content" class="tab-content" style="display: none;">
585
- <h2 class="page-title">Broadcast</h2>
586
- <p>Broadcast messages to all users or chats.</p>
587
- <form id="broadcastForm">
588
- <label for="broadcastText">Message Text:</label>
589
- <textarea id="broadcastText" name="broadcastText" required></textarea>
590
- <button type="submit">Broadcast</button>
591
- </form>
592
- </div>
593
- <div id="connections-content" class="tab-content" style="display: none;">
594
- <h2 class="page-title">Connections</h2>
595
- <p>Manage connections between users and groups.</p>
596
- <form id="addConnectionForm">
597
- <label for="groupId">Group ID:</label>
598
- <input type="text" id="groupId" name="groupId" required>
599
- <label for="userId">User ID:</label>
600
- <input type="text" id="userId" name="userId" required>
601
- <button type="submit">Add Connection</button>
602
- </form>
603
- <div class="connections-list" id="connectionsList">
604
- <!-- Connections will be dynamically loaded here -->
605
- </div>
606
- </div>
607
- <div id="settings-content" class="tab-content" style="display: none;">
608
- <h2 class="page-title">Settings</h2>
609
- <p>Configure bot settings for different groups.</p>
610
- <form id="saveSettingsForm">
611
- <label for="settingsChatId">Chat ID:</label>
612
- <input type="text" id="settingsChatId" name="settingsChatId" required>
613
- <label for="settingKey">Setting Key:</label>
614
- <input type="text" id="settingKey" name="settingKey" required>
615
- <label for="settingValue">Setting Value:</label>
616
- <input type="text" id="settingValue" name="settingValue" required>
617
- <button type="submit">Save Settings</button>
618
- </form>
619
- <div class="settings-list" id="settingsList">
620
- <!-- Settings will be dynamically loaded here -->
621
- </div>
622
- </div>
623
- <div id="stats-content" class="tab-content" style="display: none;">
624
- <h2 class="page-title">Stats</h2>
625
- <p>View detailed statistics about the bot.</p>
626
- <div class="stats-grid">
627
- <div class="stat-card">
628
- <div class="stat-header">
629
- <div>
630
- <h3>CPU Usage</h3>
631
- <p style="font-size: 28px; font-weight: bold;" id="cpuUsage">Loading...</p>
632
- </div>
633
- <div class="stat-icon">
634
- <i class="fas fa-microchip"></i>
635
- </div>
636
- </div>
637
- <p style="color: #4caf50;">Current CPU usage</p>
638
- </div>
639
- <div class="stat-card">
640
- <div class="stat-header">
641
- <div>
642
- <h3>RAM Usage</h3>
643
- <p style="font-size: 28px; font-weight: bold;" id="ramUsage">Loading...</p>
644
- </div>
645
- <div class="stat-icon">
646
- <i class="fas fa-memory"></i>
647
- </div>
648
- </div>
649
- <p style="color: #4caf50;">Current RAM usage</p>
650
- </div>
651
- <div class="stat-card">
652
- <div class="stat-header">
653
- <div>
654
- <h3>Storage Used</h3>
655
- <p style="font-size: 28px; font-weight: bold;" id="storageUsed">Loading...</p>
656
- </div>
657
- <div class="stat-icon">
658
- <i class="fas fa-database"></i>
659
- </div>
660
- </div>
661
- <p style="color: #4caf50;">Total storage used</p>
662
- </div>
663
- <div class="stat-card">
664
- <div class="stat-header">
665
- <div>
666
- <h3>Storage Free</h3>
667
- <p style="font-size: 28px; font-weight: bold;" id="storageFree">Loading...</p>
668
- </div>
669
- <div class="stat-icon">
670
- <i class="fas fa-database"></i>
671
- </div>
672
- </div>
673
- <p style="color: #4caf50;">Total storage free</p>
674
- </div>
675
- </div>
676
- </div>
677
- <div id="group-manager-content" class="tab-content" style="display: none;">
678
- <h2 class="page-title">Group Manager</h2>
679
- <p>Manage groups and users directly from the dashboard.</p>
680
- <form id="banUserForm">
681
- <label for="banUserId">User ID:</label>
682
- <input type="text" id="banUserId" name="banUserId" required>
683
- <label for="banReason">Ban Reason:</label>
684
- <input type="text" id="banReason" name="banReason">
685
- <button type="submit">Ban User</button>
686
- </form>
687
- <form id="unbanUserForm">
688
- <label for="unbanUserId">User ID:</label>
689
- <input type="text" id="unbanUserId" name="unbanUserId" required>
690
- <button type="submit">Unban User</button>
691
- </form>
692
- <form id="disableChatForm">
693
- <label for="disableChatId">Chat ID:</label>
694
- <input type="text" id="disableChatId" name="disableChatId" required>
695
- <label for="disableReason">Disable Reason:</label>
696
- <input type="text" id="disableReason" name="disableReason">
697
- <button type="submit">Disable Chat</button>
698
- </form>
699
- <form id="enableChatForm">
700
- <label for="enableChatId">Chat ID:</label>
701
- <input type="text" id="enableChatId" name="enableChatId" required>
702
- <button type="submit">Enable Chat</button>
703
- </form>
704
- </div>
705
- <div id="extra-mods-content" class="tab-content" style="display: none;">
706
- <h2 class="page-title">Extra Mods</h2>
707
- <p>Perform additional operations directly from the dashboard.</p>
708
- <form id="restartBotForm">
709
- <button type="submit">Restart Bot</button>
710
- </form>
711
- </div>
712
- </div>
713
- </div>
714
-
715
- <script>
716
- // Tab Switching
717
- document.querySelectorAll('.sidebar-item[data-tab]').forEach(item => {
718
- item.addEventListener('click', () => {
719
- document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active'));
720
- item.classList.add('active');
721
- document.querySelectorAll('.tab-content').forEach(content => content.style.display = 'none');
722
- const tabId = item.getAttribute('data-tab') + '-content';
723
- document.getElementById(tabId).style.display = 'block';
724
- loadTabContent(tabId);
725
- });
726
- });
727
-
728
- // Profile Photo Click Event
729
- document.getElementById('profilePhoto').addEventListener('click', function() {
730
- const menu = document.getElementById('profileMenu');
731
- if (menu.style.display === 'block') {
732
- menu.style.display = 'none';
733
- } else {
734
- menu.style.display = 'block';
735
- }
736
- });
737
-
738
- // Close Profile Menu when clicking outside
739
- window.onclick = function(event) {
740
- if (!event.target.matches('#profilePhoto')) {
741
- const menu = document.getElementById('profileMenu');
742
- if (menu.style.display === 'block') {
743
- menu.style.display = 'none';
744
- }
745
- }
746
- };
747
-
748
- // Toggle Sidebar
749
- document.getElementById('toggleSidebar').addEventListener('click', function() {
750
- document.getElementById('sidebar').classList.toggle('active');
751
- });
752
-
753
- // Fetch System Info
754
- async function fetchSystemInfo() {
755
- try {
756
- const response = await fetch('/api/system-info');
757
- const data = await response.json();
758
- document.getElementById('osName').textContent = data.os.name;
759
- document.getElementById('osVersion').textContent = data.os.version;
760
- document.getElementById('uptime').textContent = data.uptime;
761
- document.getElementById('storage').textContent = `${(data.storage.total / (1024 ** 3)).toFixed(2)} GB / ${(data.storage.free / (1024 ** 3)).toFixed(2)} GB`;
762
- } catch (error) {
763
- console.error('Failed to fetch system info:', error);
764
- }
765
- }
766
-
767
- // Fetch Bot Stats
768
- async function fetchBotStats() {
769
- try {
770
- const response = await fetch('/api/bot-stats');
771
- const data = await response.json();
772
- document.getElementById('totalFiles').textContent = data.total_files;
773
- document.getElementById('totalUsers').textContent = data.total_users;
774
- document.getElementById('totalChats').textContent = data.total_chats;
775
- document.getElementById('storageUsed').textContent = data.storage_used;
776
- document.getElementById('storageFree').textContent = data.storage_free;
777
- } catch (error) {
778
- console.error('Failed to fetch bot stats:', error);
779
- }
780
- }
781
-
782
- // Fetch Bot Status
783
- async function fetchBotStatus() {
784
- try {
785
- const response = await fetch('/api/bot-status');
786
- const data = await response.json();
787
- document.getElementById('cpuUsage').textContent = `${data.cpu_usage}%`;
788
- document.getElementById('ramUsage').textContent = `${data.ram_usage}%`;
789
- document.getElementById('storageUsed').textContent = data.used_storage;
790
- document.getElementById('storageFree').textContent = data.free_storage;
791
- } catch (error) {
792
- console.error('Failed to fetch bot status:', error);
793
- }
794
- }
795
-
796
- // Load Tab Content
797
- async function loadTabContent(tabId) {
798
- if (tabId === 'filters-content') {
799
- loadFilters();
800
- } else if (tabId === 'global-filters-content') {
801
- loadGlobalFilters();
802
- } else if (tabId === 'users-content') {
803
- loadUsers();
804
- } else if (tabId === 'chats-content') {
805
- loadChats();
806
- } else if (tabId === 'files-content') {
807
- loadFiles();
808
- } else if (tabId === 'connections-content') {
809
- loadConnections();
810
- } else if (tabId === 'stats-content') {
811
- fetchBotStatus();
812
- }
813
- }
814
-
815
- // Load Filters
816
- async function loadFilters() {
817
- try {
818
- const response = await fetch('/api/filters?chat_id=123456789'); // Replace with actual chat ID
819
- const data = await response.json();
820
- const filtersList = document.getElementById('filtersList');
821
- filtersList.innerHTML = '';
822
- data.filters.forEach(filter => {
823
- const filterItem = document.createElement('div');
824
- filterItem.className = 'stat-card';
825
- filterItem.innerHTML = `
826
- <div class="stat-header">
827
- <div>
828
- <h3>${filter}</h3>
829
- </div>
830
- <div class="stat-icon">
831
- <i class="fas fa-filter"></i>
832
- </div>
833
- </div>
834
- <button onclick="deleteFilter('${filter}')">Delete</button>
835
- `;
836
- filtersList.appendChild(filterItem);
837
- });
838
- } catch (error) {
839
- console.error('Failed to load filters:', error);
840
- }
841
- }
842
-
843
- // Load Global Filters
844
- async function loadGlobalFilters() {
845
- try {
846
- const response = await fetch('/api/gfilters');
847
- const data = await response.json();
848
- const gfiltersList = document.getElementById('gfiltersList');
849
- gfiltersList.innerHTML = '';
850
- data.filters.forEach(filter => {
851
- const filterItem = document.createElement('div');
852
- filterItem.className = 'stat-card';
853
- filterItem.innerHTML = `
854
- <div class="stat-header">
855
- <div>
856
- <h3>${filter}</h3>
857
- </div>
858
- <div class="stat-icon">
859
- <i class="fas fa-globe"></i>
860
- </div>
861
- </div>
862
- <button onclick="deleteGFilter('${filter}')">Delete</button>
863
- `;
864
- gfiltersList.appendChild(filterItem);
865
- });
866
- } catch (error) {
867
- console.error('Failed to load global filters:', error);
868
- }
869
- }
870
-
871
- // Load Users
872
- async function loadUsers() {
873
- try {
874
- const response = await fetch('/api/users');
875
- const data = await response.json();
876
- const usersList = document.getElementById('usersList');
877
- usersList.innerHTML = '';
878
- data.users.forEach(user => {
879
- const userItem = document.createElement('div');
880
- userItem.className = 'stat-card';
881
- userItem.innerHTML = `
882
- <div class="stat-header">
883
- <div>
884
- <h3>${user.name}</h3>
885
- <p>ID: ${user.id}</p>
886
- </div>
887
- <div class="stat-icon">
888
- <i class="fas fa-user"></i>
889
- </div>
890
- </div>
891
- <button onclick="banUser('${user.id}', '${user.ban_status.ban_reason}')">${user.ban_status.is_banned ? 'Unban' : 'Ban'}</button>
892
- `;
893
- usersList.appendChild(userItem);
894
- });
895
- } catch (error) {
896
- console.error('Failed to load users:', error);
897
- }
898
- }
899
-
900
- // Load Chats
901
- async function loadChats() {
902
- try {
903
- const response = await fetch('/api/chats');
904
- const data = await response.json();
905
- const chatsList = document.getElementById('chatsList');
906
- chatsList.innerHTML = '';
907
- data.chats.forEach(chat => {
908
- const chatItem = document.createElement('div');
909
- chatItem.className = 'stat-card';
910
- chatItem.innerHTML = `
911
- <div class="stat-header">
912
- <div>
913
- <h3>${chat.title}</h3>
914
- <p>ID: ${chat.id}</p>
915
- </div>
916
- <div class="stat-icon">
917
- <i class="fas fa-comment-dots"></i>
918
- </div>
919
- </div>
920
- <button onclick="disableChat('${chat.id}', '${chat.chat_status.reason}')">${chat.chat_status.is_disabled ? 'Enable' : 'Disable'}</button>
921
- `;
922
- chatsList.appendChild(chatItem);
923
- });
924
- } catch (error) {
925
- console.error('Failed to load chats:', error);
926
- }
927
- }
928
-
929
- // Load Files
930
- async function loadFiles() {
931
- try {
932
- const response = await fetch('/api/files');
933
- const data = await response.json();
934
- const filesList = document.getElementById('filesList');
935
- filesList.innerHTML = '';
936
- data.files.forEach(file => {
937
- const fileItem = document.createElement('div');
938
- fileItem.className = 'stat-card';
939
- fileItem.innerHTML = `
940
- <div class="stat-header">
941
- <div>
942
- <h3>${file.file_name}</h3>
943
- <p>Size: ${get_size(file.file_size)}</p>
944
- </div>
945
- <div class="stat-icon">
946
- <i class="fas fa-file"></i>
947
- </div>
948
- </div>
949
- <button onclick="deleteFile('${file.file_id}')">Delete</button>
950
- `;
951
- filesList.appendChild(fileItem);
952
- });
953
- } catch (error) {
954
- console.error('Failed to load files:', error);
955
- }
956
- }
957
-
958
- // Load Connections
959
- async function loadConnections() {
960
- try {
961
- const response = await fetch('/api/connections');
962
- const data = await response.json();
963
- const connectionsList = document.getElementById('connectionsList');
964
- connectionsList.innerHTML = '';
965
- data.connections.forEach(connection => {
966
- const connectionItem = document.createElement('div');
967
- connectionItem.className = 'stat-card';
968
- connectionItem.innerHTML = `
969
- <div class="stat-header">
970
- <div>
971
- <h3>${connection.title}</h3>
972
- <p>ID: ${connection.id}</p>
973
- </div>
974
- <div class="stat-icon">
975
- <i class="fas fa-link"></i>
976
- </div>
977
- </div>
978
- <button onclick="deleteConnection('${connection.id}', '${connection.user_id}')">Delete</button>
979
- `;
980
- connectionsList.appendChild(connectionItem);
981
- });
982
- } catch (error) {
983
- console.error('Failed to load connections:', error);
984
- }
985
- }
986
-
987
- // Add Filter
988
- document.getElementById('addFilterForm').addEventListener('submit', async function(event) {
989
- event.preventDefault();
990
- const chatId = document.getElementById('chatId').value;
991
- const text = document.getElementById('filterText').value;
992
- const replyText = document.getElementById('replyText').value;
993
- const btn = document.getElementById('btn').value;
994
- const file = document.getElementById('file').value;
995
- const alert = document.getElementById('alert').value;
996
- try {
997
- const response = await fetch('/api/add-filter', {
998
- method: 'POST',
999
- headers: {
1000
- 'Content-Type': 'application/x-www-form-urlencoded',
1001
- },
1002
- body: `chat_id=${encodeURIComponent(chatId)}&text=${encodeURIComponent(text)}&reply_text=${encodeURIComponent(replyText)}&btn=${encodeURIComponent(btn)}&file=${encodeURIComponent(file)}&alert=${encodeURIComponent(alert)}`,
1003
- });
1004
- const data = await response.json();
1005
- alert(data.message);
1006
- loadFilters();
1007
- } catch (error) {
1008
- console.error('Failed to add filter:', error);
1009
- alert('Failed to add filter');
1010
- }
1011
- });
1012
-
1013
- // Delete Filter
1014
- async function deleteFilter(text) {
1015
- try {
1016
- const response = await fetch('/api/delete-filter', {
1017
- method: 'POST',
1018
- headers: {
1019
- 'Content-Type': 'application/x-www-form-urlencoded',
1020
- },
1021
- body: `chat_id=123456789&text=${encodeURIComponent(text)}`, // Replace with actual chat ID
1022
- });
1023
- const data = await response.json();
1024
- alert(data.message);
1025
- loadFilters();
1026
- } catch (error) {
1027
- console.error('Failed to delete filter:', error);
1028
- alert('Failed to delete filter');
1029
- }
1030
- }
1031
-
1032
- // Add Global Filter
1033
- document.getElementById('addGFilterForm').addEventListener('submit', async function(event) {
1034
- event.preventDefault();
1035
- const text = document.getElementById('gfilterText').value;
1036
- const replyText = document.getElementById('greplyText').value;
1037
- const btn = document.getElementById('gbtn').value;
1038
- const file = document.getElementById('gfile').value;
1039
- const alert = document.getElementById('galert').value;
1040
- try {
1041
- const response = await fetch('/api/add-gfilter', {
1042
- method: 'POST',
1043
- headers: {
1044
- 'Content-Type': 'application/x-www-form-urlencoded',
1045
- },
1046
- body: `text=${encodeURIComponent(text)}&reply_text=${encodeURIComponent(replyText)}&btn=${encodeURIComponent(btn)}&file=${encodeURIComponent(file)}&alert=${encodeURIComponent(alert)}`,
1047
- });
1048
- const data = await response.json();
1049
- alert(data.message);
1050
- loadGlobalFilters();
1051
- } catch (error) {
1052
- console.error('Failed to add global filter:', error);
1053
- alert('Failed to add global filter');
1054
- }
1055
- });
1056
-
1057
- // Delete Global Filter
1058
- async function deleteGFilter(text) {
1059
- try {
1060
- const response = await fetch('/api/delete-gfilter', {
1061
- method: 'POST',
1062
- headers: {
1063
- 'Content-Type': 'application/x-www-form-urlencoded',
1064
- },
1065
- body: `text=${encodeURIComponent(text)}`,
1066
- });
1067
- const data = await response.json();
1068
- alert(data.message);
1069
- loadGlobalFilters();
1070
- } catch (error) {
1071
- console.error('Failed to delete global filter:', error);
1072
- alert('Failed to delete global filter');
1073
- }
1074
- }
1075
-
1076
- // Ban User
1077
- async function banUser(userId, banReason) {
1078
- try {
1079
- const response = await fetch('/api/ban-user', {
1080
- method: 'POST',
1081
- headers: {
1082
- 'Content-Type': 'application/x-www-form-urlencoded',
1083
- },
1084
- body: `user_id=${encodeURIComponent(userId)}&ban_reason=${encodeURIComponent(banReason)}`,
1085
- });
1086
- const data = await response.json();
1087
- alert(data.message);
1088
- loadUsers();
1089
- } catch (error) {
1090
- console.error('Failed to ban user:', error);
1091
- alert('Failed to ban user');
1092
- }
1093
- }
1094
-
1095
- // Unban User
1096
- async function unbanUser(userId) {
1097
- try {
1098
- const response = await fetch('/api/unban-user', {
1099
- method: 'POST',
1100
- headers: {
1101
- 'Content-Type': 'application/x-www-form-urlencoded',
1102
- },
1103
- body: `user_id=${encodeURIComponent(userId)}`,
1104
- });
1105
- const data = await response.json();
1106
- alert(data.message);
1107
- loadUsers();
1108
- } catch (error) {
1109
- console.error('Failed to unban user:', error);
1110
- alert('Failed to unban user');
1111
- }
1112
- }
1113
-
1114
- // Disable Chat
1115
- async function disableChat(chatId, reason) {
1116
- try {
1117
- const response = await fetch('/api/disable-chat', {
1118
- method: 'POST',
1119
- headers: {
1120
- 'Content-Type': 'application/x-www-form-urlencoded',
1121
- },
1122
- body: `chat_id=${encodeURIComponent(chatId)}&reason=${encodeURIComponent(reason)}`,
1123
- });
1124
- const data = await response.json();
1125
- alert(data.message);
1126
- loadChats();
1127
- } catch (error) {
1128
- console.error('Failed to disable chat:', error);
1129
- alert('Failed to disable chat');
1130
- }
1131
- }
1132
-
1133
- // Enable Chat
1134
- async function enableChat(chatId) {
1135
- try {
1136
- const response = await fetch('/api/enable-chat', {
1137
- method: 'POST',
1138
- headers: {
1139
- 'Content-Type': 'application/x-www-form-urlencoded',
1140
- },
1141
- body: `chat_id=${encodeURIComponent(chatId)}`,
1142
- });
1143
- const data = await response.json();
1144
- alert(data.message);
1145
- loadChats();
1146
- } catch (error) {
1147
- console.error('Failed to enable chat:', error);
1148
- alert('Failed to enable chat');
1149
- }
1150
- }
1151
-
1152
- // Upload File
1153
- document.getElementById('uploadFileForm').addEventListener('submit', async function(event) {
1154
- event.preventDefault();
1155
- const formData = new FormData(this);
1156
- try {
1157
- const response = await fetch('/api/upload-file', {
1158
- method: 'POST',
1159
- body: formData,
1160
- });
1161
- const data = await response.json();
1162
- alert(data.message);
1163
- loadFiles();
1164
- } catch (error) {
1165
- console.error('Failed to upload file:', error);
1166
- alert('Failed to upload file');
1167
- }
1168
- });
1169
-
1170
- // Delete File
1171
- async function deleteFile(fileId) {
1172
- try {
1173
- const response = await fetch('/api/delete-file', {
1174
- method: 'POST',
1175
- headers: {
1176
- 'Content-Type': 'application/x-www-form-urlencoded',
1177
- },
1178
- body: `file_id=${encodeURIComponent(fileId)}`,
1179
- });
1180
- const data = await response.json();
1181
- alert(data.message);
1182
- loadFiles();
1183
- } catch (error) {
1184
- console.error('Failed to delete file:', error);
1185
- alert('Failed to delete file');
1186
- }
1187
- }
1188
-
1189
- // Broadcast Message
1190
- document.getElementById('broadcastForm').addEventListener('submit', async function(event) {
1191
- event.preventDefault();
1192
- const messageText = document.getElementById('broadcastText').value;
1193
- try {
1194
- const response = await fetch('/api/broadcast', {
1195
- method: 'POST',
1196
- headers: {
1197
- 'Content-Type': 'application/x-www-form-urlencoded',
1198
- },
1199
- body: `message_text=${encodeURIComponent(messageText)}`,
1200
- });
1201
- const data = await response.json();
1202
- alert(`Broadcast completed. Success: ${data.success}, Blocked: ${data.blocked}, Deleted: ${data.deleted}`);
1203
- } catch (error) {
1204
- console.error('Failed to broadcast message:', error);
1205
- alert('Failed to broadcast message');
1206
- }
1207
- });
1208
-
1209
- // Add Connection
1210
- document.getElementById('addConnectionForm').addEventListener('submit', async function(event) {
1211
- event.preventDefault();
1212
- const groupId = document.getElementById('groupId').value;
1213
- const userId = document.getElementById('userId').value;
1214
- try {
1215
- const response = await fetch('/api/add-connection', {
1216
- method: 'POST',
1217
- headers: {
1218
- 'Content-Type': 'application/x-www-form-urlencoded',
1219
- },
1220
- body: `group_id=${encodeURIComponent(groupId)}&user_id=${encodeURIComponent(userId)}`,
1221
- });
1222
- const data = await response.json();
1223
- alert(data.message);
1224
- loadConnections();
1225
- } catch (error) {
1226
- console.error('Failed to add connection:', error);
1227
- alert('Failed to add connection');
1228
- }
1229
- });
1230
-
1231
- // Delete Connection
1232
- async function deleteConnection(groupId, userId) {
1233
- try {
1234
- const response = await fetch('/api/delete-connection', {
1235
- method: 'POST',
1236
- headers: {
1237
- 'Content-Type': 'application/x-www-form-urlencoded',
1238
- },
1239
- body: `group_id=${encodeURIComponent(groupId)}&user_id=${encodeURIComponent(userId)}`,
1240
- });
1241
- const data = await response.json();
1242
- alert(data.message);
1243
- loadConnections();
1244
- } catch (error) {
1245
- console.error('Failed to delete connection:', error);
1246
- alert('Failed to delete connection');
1247
- }
1248
- }
1249
-
1250
- // Save Settings
1251
- document.getElementById('saveSettingsForm').addEventListener('submit', async function(event) {
1252
- event.preventDefault();
1253
- const chatId = document.getElementById('settingsChatId').value;
1254
- const settingKey = document.getElementById('settingKey').value;
1255
- const settingValue = document.getElementById('settingValue').value;
1256
- try {
1257
- const response = await fetch('/api/save-settings', {
1258
- method: 'POST',
1259
- headers: {
1260
- 'Content-Type': 'application/x-www-form-urlencoded',
1261
- },
1262
- body: `chat_id=${encodeURIComponent(chatId)}&setting_key=${encodeURIComponent(settingKey)}&setting_value=${encodeURIComponent(settingValue)}`,
1263
- });
1264
- const data = await response.json();
1265
- alert(data.message);
1266
- } catch (error) {
1267
- console.error('Failed to save settings:', error);
1268
- alert('Failed to save settings');
1269
- }
1270
- });
1271
-
1272
- // Restart Bot
1273
- document.getElementById('restartBotForm').addEventListener('submit', async function(event) {
1274
- event.preventDefault();
1275
- try {
1276
- const response = await fetch('/api/restart-bot', {
1277
- method: 'POST',
1278
- headers: {
1279
- 'Content-Type': 'application/x-www-form-urlencoded',
1280
- },
1281
- body: `admin_id=${encodeURIComponent(${ADMINS[0]})}`, // Replace with actual admin ID
1282
- });
1283
- const data = await response.json();
1284
- alert(data.message);
1285
- } catch (error) {
1286
- console.error('Failed to restart bot:', error);
1287
- alert('Failed to restart bot');
1288
- }
1289
- });
1290
-
1291
- // Performance Chart
1292
- const performanceCtx = document.getElementById('performanceChart').getContext('2d');
1293
- new Chart(performanceCtx, {
1294
- type: 'line',
1295
- data: {
1296
- labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
1297
- datasets: [{
1298
- label: 'Uploads',
1299
- data: [65, 59, 80, 81, 56, 55],
1300
- borderColor: '#3b82f6',
1301
- tension: 0.4
1302
- }]
1303
- },
1304
- options: {
1305
- responsive: true,
1306
- maintainAspectRatio: false,
1307
- scales: {
1308
- y: {
1309
- beginAtZero: true
1310
- }
1311
- }
1312
- }
1313
- });
1314
-
1315
- // Platform Distribution Chart
1316
- const platformCtx = document.getElementById('platformChart').getContext('2d');
1317
- new Chart(platformCtx, {
1318
- type: 'doughnut',
1319
- data: {
1320
- labels: ['YouTube', 'Instagram', 'Facebook', 'WhatsApp', 'Pinterest', 'LinkedIn', 'TikTok', 'Twitter', 'Reddit', 'Telegram'],
1321
- datasets: [{
1322
- data: [45, 30, 25, 15, 10, 8, 7, 6, 5, 4],
1323
- backgroundColor: ['#ff0000', '#e4405f', '#1877F2', '#25D366', '#BD081C', '#0077B5', '#000000', '#1DA1F2', '#FF4500', '#0088CC']
1324
- }]
1325
- },
1326
- options: {
1327
- responsive: true,
1328
- maintainAspectRatio: false
1329
- }
1330
- });
1331
-
1332
- // Fetch System Info on Page Load
1333
- document.addEventListener('DOMContentLoaded', function() {
1334
- fetchSystemInfo();
1335
- fetchBotStats();
1336
- fetchBotStatus();
1337
- loadFilters();
1338
- loadGlobalFilters();
1339
- loadUsers();
1340
- loadChats();
1341
- loadFiles();
1342
- loadConnections();
1343
- });
1344
-
1345
- // Utility Function to Format Size
1346
- function get_size(size) {
1347
- const units = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB"];
1348
- size = parseFloat(size);
1349
- let i = 0;
1350
- while (size >= 1024.0 && i < units.length) {
1351
- i += 1;
1352
- size /= 1024.0;
1353
- }
1354
- return `${size.toFixed(2)} ${units[i]}`;
1355
- }
1356
- </script>
1357
- </body>
1358
  </html>
 
1
+ <!-- File: C:\Users\Shakeel\Desktop\PROFESSOR-BOT\templates\dashboard.html -->
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8"/>
6
+ <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
7
+ <title>Professor Bot Dashboard</title>
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
9
+ <link href="/static/css/dashboard.css" rel="stylesheet"/>
10
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11
+ </head>
12
+ <body>
13
+ <div class="navbar">
14
+ <div class="nav-left">
15
+ <div class="logo">Professor Bot</div>
16
+ <div class="dropdown" id="toggleSidebar">
17
+ <span>Dashboard</span>
18
+ <i class="fas fa-chevron-down"></i>
19
+ </div>
20
+ </div>
21
+ <div class="nav-right">
22
+ <div class="profile-photo" id="profilePhoto"></div>
23
+ <div class="profile-menu" id="profileMenu">
24
+ <a href="#">Profile</a>
25
+ <a href="#">Logout</a>
26
+ </div>
27
+ </div>
28
+ </div>
29
+ <div class="main-content">
30
+ <div class="sidebar" id="sidebar">
31
+ <div class="sidebar-item active" data-tab="dashboard">
32
+ <span>📊</span>
33
+ <span>Dashboard</span>
34
+ </div>
35
+ <div class="sidebar-item" data-tab="filters">
36
+ <span>📝</span>
37
+ <span>Filters</span>
38
+ </div>
39
+ <div class="sidebar-item" data-tab="global-filters">
40
+ <span>🌐</span>
41
+ <span>Global Filters</span>
42
+ </div>
43
+ <div class="sidebar-item" data-tab="users">
44
+ <span>👥</span>
45
+ <span>Users</span>
46
+ </div>
47
+ <div class="sidebar-item" data-tab="chats">
48
+ <span>💬</span>
49
+ <span>Chats</span>
50
+ </div>
51
+ <div class="sidebar-item" data-tab="files">
52
+ <span>📁</span>
53
+ <span>Files</span>
54
+ </div>
55
+ <div class="sidebar-item" data-tab="broadcast">
56
+ <span>📢</span>
57
+ <span>Broadcast</span>
58
+ </div>
59
+ <div class="sidebar-item" data-tab="connections">
60
+ <span>🔗</span>
61
+ <span>Connections</span>
62
+ </div>
63
+ <div class="sidebar-item" data-tab="settings">
64
+ <span>🔧</span>
65
+ <span>Settings</span>
66
+ </div>
67
+ <div class="sidebar-item" data-tab="stats">
68
+ <span>📈</span>
69
+ <span>Stats</span>
70
+ </div>
71
+ <div class="sidebar-item" data-tab="group-manager">
72
+ <span>👥</span>
73
+ <span>Group Manager</span>
74
+ </div>
75
+ <div class="sidebar-item" data-tab="extra-mods">
76
+ <span>🛠️</span>
77
+ <span>Extra Mods</span>
78
+ </div>
79
+ </div>
80
+ <div class="content-area">
81
+ <div id="dashboard-content" class="tab-content active">
82
+ <h2 class="page-title">Dashboard Overview</h2>
83
+ <p>Get a comprehensive overview of your bot's performance, including total files, users, and chats.</p>
84
+
85
+ <div class="stats-grid">
86
+ <div class="stat-card">
87
+ <div class="stat-header">
88
+ <div>
89
+ <h3>Total Files</h3>
90
+ <p style="font-size: 28px; font-weight: bold;" id="totalFiles">Loading...</p>
91
+ </div>
92
+ <div class="stat-icon">
93
+ <i class="fas fa-file-alt"></i>
94
+ </div>
95
+ </div>
96
+ <p style="color: #4caf50;">File statistics</p>
97
+ </div>
98
+ <div class="stat-card">
99
+ <div class="stat-header">
100
+ <div>
101
+ <h3>Total Users</h3>
102
+ <p style="font-size: 28px; font-weight: bold;" id="totalUsers">Loading...</p>
103
+ </div>
104
+ <div class="stat-icon">
105
+ <i class="fas fa-users"></i>
106
+ </div>
107
+ </div>
108
+ <p style="color: #4caf50;">User statistics</p>
109
+ </div>
110
+ <div class="stat-card">
111
+ <div class="stat-header">
112
+ <div>
113
+ <h3>Total Chats</h3>
114
+ <p style="font-size: 28px; font-weight: bold;" id="totalChats">Loading...</p>
115
+ </div>
116
+ <div class="stat-icon">
117
+ <i class="fas fa-comments"></i>
118
+ </div>
119
+ </div>
120
+ <p style="color: #4caf50;">Chat statistics</p>
121
+ </div>
122
+ <div class="stat-card">
123
+ <div class="stat-header">
124
+ <div>
125
+ <h3>Operating System</h3>
126
+ <p style="font-size: 28px; font-weight: bold;" id="osName">Loading...</p>
127
+ </div>
128
+ <div class="stat-icon">
129
+ <i class="fas fa-server"></i>
130
+ </div>
131
+ </div>
132
+ <p id="osVersion" style="color: #4caf50;">Loading...</p>
133
+ </div>
134
+ <div class="stat-card">
135
+ <div class="stat-header">
136
+ <div>
137
+ <h3>Uptime</h3>
138
+ <p style="font-size: 28px; font-weight: bold;" id="uptime">Loading...</p>
139
+ </div>
140
+ <div class="stat-icon">
141
+ <i class="fas fa-clock"></i>
142
+ </div>
143
+ </div>
144
+ <p style="color: #4caf50;">Time since last boot</p>
145
+ </div>
146
+ <div class="stat-card">
147
+ <div class="stat-header">
148
+ <div>
149
+ <h3>Storage</h3>
150
+ <p style="font-size: 28px; font-weight: bold;" id="storage">Loading...</p>
151
+ </div>
152
+ <div class="stat-icon">
153
+ <i class="fas fa-hdd"></i>
154
+ </div>
155
+ </div>
156
+ <p style="color: #4caf50;">Total / Free</p>
157
+ </div>
158
+ </div>
159
+
160
+ <div class="charts-grid">
161
+ <div class="chart-card">
162
+ <h3>Upload Performance</h3>
163
+ <canvas id="performanceChart"></canvas>
164
+ </div>
165
+ <div class="chart-card">
166
+ <h3>Platform Distribution</h3>
167
+ <canvas id="platformChart"></canvas>
168
+ </div>
169
+ </div>
170
+
171
+ <div class="recent-videos">
172
+ <h2>Recent Uploads</h2>
173
+ <p>View and manage your recent video uploads.</p>
174
+ <div class="thumbnail-grid" id="recentFilesGrid">
175
+ <!-- Thumbnails will be dynamically loaded here -->
176
+ </div>
177
+ </div>
178
+ </div>
179
+ <div id="filters-content" class="tab-content" style="display: none;">
180
+ <h2 class="page-title">Filters</h2>
181
+ <p>Manage and organize your local filters.</p>
182
+ <form id="addFilterForm">
183
+ <label for="chatId">Chat ID:</label>
184
+ <input type="text" id="chatId" name="chatId" required>
185
+ <label for="filterText">Filter Text:</label>
186
+ <input type="text" id="filterText" name="filterText" required>
187
+ <label for="replyText">Reply Text:</label>
188
+ <textarea id="replyText" name="replyText" required></textarea>
189
+ <label for="btn">Buttons (JSON):</label>
190
+ <textarea id="btn" name="btn"></textarea>
191
+ <label for="file">File ID:</label>
192
+ <input type="text" id="file" name="file">
193
+ <label for="alert">Alerts (JSON):</label>
194
+ <textarea id="alert" name="alert"></textarea>
195
+ <button type="submit">Add Filter</button>
196
+ </form>
197
+ <div class="filters-list" id="filtersList">
198
+ <!-- Filters will be dynamically loaded here -->
199
+ </div>
200
+ </div>
201
+ <div id="global-filters-content" class="tab-content" style="display: none;">
202
+ <h2 class="page-title">Global Filters</h2>
203
+ <p>Manage and organize your global filters.</p>
204
+ <form id="addGFilterForm">
205
+ <label for="gfilterText">Filter Text:</label>
206
+ <input type="text" id="gfilterText" name="gfilterText" required>
207
+ <label for="greplyText">Reply Text:</label>
208
+ <textarea id="greplyText" name="greplyText" required></textarea>
209
+ <label for="gbtn">Buttons (JSON):</label>
210
+ <textarea id="gbtn" name="gbtn"></textarea>
211
+ <label for="gfile">File ID:</label>
212
+ <input type="text" id="gfile" name="gfile">
213
+ <label for="galert">Alerts (JSON):</label>
214
+ <textarea id="galert" name="galert"></textarea>
215
+ <button type="submit">Add Global Filter</button>
216
+ </form>
217
+ <div class="gfilters-list" id="gfiltersList">
218
+ <!-- Global Filters will be dynamically loaded here -->
219
+ </div>
220
+ </div>
221
+ <div id="users-content" class="tab-content" style="display: none;">
222
+ <h2 class="page-title">Users</h2>
223
+ <p>Manage and view all users connected to the bot.</p>
224
+ <div class="users-list" id="usersList">
225
+ <!-- Users will be dynamically loaded here -->
226
+ </div>
227
+ </div>
228
+ <div id="chats-content" class="tab-content" style="display: none;">
229
+ <h2 class="page-title">Chats</h2>
230
+ <p>Manage and view all chats connected to the bot.</p>
231
+ <div class="chats-list" id="chatsList">
232
+ <!-- Chats will be dynamically loaded here -->
233
+ </div>
234
+ </div>
235
+ <div id="files-content" class="tab-content" style="display: none;">
236
+ <h2 class="page-title">Files</h2>
237
+ <p>Manage and view all files stored in the bot's database.</p>
238
+ <form id="uploadFileForm" enctype="multipart/form-data">
239
+ <label for="fileUpload">Upload File:</label>
240
+ <input type="file" id="fileUpload" name="fileUpload" required>
241
+ <button type="submit">Upload File</button>
242
+ </form>
243
+ <div class="files-list" id="filesList">
244
+ <!-- Files will be dynamically loaded here -->
245
+ </div>
246
+ </div>
247
+ <div id="broadcast-content" class="tab-content" style="display: none;">
248
+ <h2 class="page-title">Broadcast</h2>
249
+ <p>Broadcast messages to all users or chats.</p>
250
+ <form id="broadcastForm">
251
+ <label for="broadcastText">Message Text:</label>
252
+ <textarea id="broadcastText" name="broadcastText" required></textarea>
253
+ <button type="submit">Broadcast</button>
254
+ </form>
255
+ </div>
256
+ <div id="connections-content" class="tab-content" style="display: none;">
257
+ <h2 class="page-title">Connections</h2>
258
+ <p>Manage connections between users and groups.</p>
259
+ <form id="addConnectionForm">
260
+ <label for="groupId">Group ID:</label>
261
+ <input type="text" id="groupId" name="groupId" required>
262
+ <label for="userId">User ID:</label>
263
+ <input type="text" id="userId" name="userId" required>
264
+ <button type="submit">Add Connection</button>
265
+ </form>
266
+ <div class="connections-list" id="connectionsList">
267
+ <!-- Connections will be dynamically loaded here -->
268
+ </div>
269
+ </div>
270
+ <div id="settings-content" class="tab-content" style="display: none;">
271
+ <h2 class="page-title">Settings</h2>
272
+ <p>Configure bot settings for different groups.</p>
273
+ <form id="saveSettingsForm">
274
+ <label for="settingsChatId">Chat ID:</label>
275
+ <input type="text" id="settingsChatId" name="settingsChatId" required>
276
+ <label for="settingKey">Setting Key:</label>
277
+ <input type="text" id="settingKey" name="settingKey" required>
278
+ <label for="settingValue">Setting Value:</label>
279
+ <input type="text" id="settingValue" name="settingValue" required>
280
+ <button type="submit">Save Settings</button>
281
+ </form>
282
+ <div class="settings-list" id="settingsList">
283
+ <!-- Settings will be dynamically loaded here -->
284
+ </div>
285
+ </div>
286
+ <div id="stats-content" class="tab-content" style="display: none;">
287
+ <h2 class="page-title">Stats</h2>
288
+ <p>View detailed statistics about the bot.</p>
289
+ <div class="stats-grid">
290
+ <div class="stat-card">
291
+ <div class="stat-header">
292
+ <div>
293
+ <h3>CPU Usage</h3>
294
+ <p style="font-size: 28px; font-weight: bold;" id="cpuUsage">Loading...</p>
295
+ </div>
296
+ <div class="stat-icon">
297
+ <i class="fas fa-microchip"></i>
298
+ </div>
299
+ </div>
300
+ <p style="color: #4caf50;">Current CPU usage</p>
301
+ </div>
302
+ <div class="stat-card">
303
+ <div class="stat-header">
304
+ <div>
305
+ <h3>RAM Usage</h3>
306
+ <p style="font-size: 28px; font-weight: bold;" id="ramUsage">Loading...</p>
307
+ </div>
308
+ <div class="stat-icon">
309
+ <i class="fas fa-memory"></i>
310
+ </div>
311
+ </div>
312
+ <p style="color: #4caf50;">Current RAM usage</p>
313
+ </div>
314
+ <div class="stat-card">
315
+ <div class="stat-header">
316
+ <div>
317
+ <h3>Storage Used</h3>
318
+ <p style="font-size: 28px; font-weight: bold;" id="storageUsed">Loading...</p>
319
+ </div>
320
+ <div class="stat-icon">
321
+ <i class="fas fa-database"></i>
322
+ </div>
323
+ </div>
324
+ <p style="color: #4caf50;">Total storage used</p>
325
+ </div>
326
+ <div class="stat-card">
327
+ <div class="stat-header">
328
+ <div>
329
+ <h3>Storage Free</h3>
330
+ <p style="font-size: 28px; font-weight: bold;" id="storageFree">Loading...</p>
331
+ </div>
332
+ <div class="stat-icon">
333
+ <i class="fas fa-database"></i>
334
+ </div>
335
+ </div>
336
+ <p style="color: #4caf50;">Total storage free</p>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ <div id="group-manager-content" class="tab-content" style="display: none;">
341
+ <h2 class="page-title">Group Manager</h2>
342
+ <p>Manage groups and users directly from the dashboard.</p>
343
+ <form id="banUserForm">
344
+ <label for="banUserId">User ID:</label>
345
+ <input type="text" id="banUserId" name="banUserId" required>
346
+ <label for="banReason">Ban Reason:</label>
347
+ <input type="text" id="banReason" name="banReason">
348
+ <button type="submit">Ban User</button>
349
+ </form>
350
+ <form id="unbanUserForm">
351
+ <label for="unbanUserId">User ID:</label>
352
+ <input type="text" id="unbanUserId" name="unbanUserId" required>
353
+ <button type="submit">Unban User</button>
354
+ </form>
355
+ <form id="disableChatForm">
356
+ <label for="disableChatId">Chat ID:</label>
357
+ <input type="text" id="disableChatId" name="disableChatId" required>
358
+ <label for="disableReason">Disable Reason:</label>
359
+ <input type="text" id="disableReason" name="disableReason">
360
+ <button type="submit">Disable Chat</button>
361
+ </form>
362
+ <form id="enableChatForm">
363
+ <label for="enableChatId">Chat ID:</label>
364
+ <input type="text" id="enableChatId" name="enableChatId" required>
365
+ <button type="submit">Enable Chat</button>
366
+ </form>
367
+ </div>
368
+ <div id="extra-mods-content" class="tab-content" style="display: none;">
369
+ <h2 class="page-title">Extra Mods</h2>
370
+ <p>Perform additional operations directly from the dashboard.</p>
371
+ <form id="restartBotForm">
372
+ <button type="submit">Restart Bot</button>
373
+ </form>
374
+ </div>
375
+ </div>
376
+ </div>
377
+
378
+ <script src="/static/js/dashboard.js"></script>
379
+ </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
380
  </html>