Hugging Face's logo

Spaces:
voizex
/
pickmenow
Running

App Files Community
voizex commited on
Commit
d7ec52c
·
verified ·
1 Parent(s): 8c25757

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +535 -465
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,546 +3,616 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>ACCQUEST Management Portal</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: '#3B82F6',
15
- secondary: '#10B981',
16
- dark: '#1F2937',
17
- light: '#F9FAFB',
18
- accent: '#6366F1',
19
- }
20
- }
21
- }
22
- }
23
- </script>
24
  <style>
25
  .sidebar {
26
  transition: all 0.3s ease;
27
  }
28
- .chart-container {
29
- position: relative;
30
- height: 300px;
 
 
31
  }
32
- .dropdown-content {
33
  display: none;
34
- position: absolute;
35
- right: 0;
36
- min-width: 160px;
37
- z-index: 1;
38
  }
39
- .dropdown:hover .dropdown-content {
40
- display: block;
 
 
 
 
 
 
 
 
 
 
 
 
41
  }
42
- #main-content {
43
- transition: margin-left 0.3s ease;
 
 
 
 
 
 
 
 
44
  }
45
  </style>
46
  </head>
47
- <body class="bg-gray-100 font-sans">
48
- <div class="flex h-screen overflow-hidden">
49
  <!-- Sidebar -->
50
- <div class="sidebar bg-white w-64 md:w-72 shadow-lg fixed h-full">
51
- <div class="p-4 border-b border-gray-200">
52
  <div class="flex items-center">
53
- <i class="fas fa-shield-alt text-primary text-2xl mr-3"></i>
54
- <h1 class="text-xl font-bold text-dark">ACCQUEST Portal</h1>
55
  </div>
 
 
 
56
  </div>
57
- <div class="p-4">
58
- <div class="mb-8">
59
- <h2 class="text-xs uppercase font-semibold text-gray-500 mb-3">Main</h2>
60
- <ul>
61
- <li class="mb-2">
62
- <a href="#" class="flex items-center p-2 text-primary bg-blue-50 rounded-lg">
63
- <i class="fas fa-tachometer-alt mr-3"></i>
64
- <span>Dashboard</span>
65
- </a>
66
- </li>
67
- </ul>
68
- </div>
69
- <div class="mb-8">
70
- <h2 class="text-xs uppercase font-semibold text-gray-500 mb-3">Analysis</h2>
71
- <ul>
72
- <li class="mb-2">
73
- <a href="#" class="flex items-center p-2 text-gray-700 hover:bg-gray-100 rounded-lg">
74
- <i class="fas fa-network-wired mr-3"></i>
75
- <span>IPDR Analysis</span>
76
- </a>
77
- </li>
78
- <li class="mb-2">
79
- <a href="#" class="flex items-center p-2 text-gray-700 hover:bg-gray-100 rounded-lg">
80
- <i class="fas fa-phone-alt mr-3"></i>
81
- <span>CDR Analysis</span>
82
- </a>
83
- </li>
84
- <li class="mb-2">
85
- <a href="#" class="flex items-center p-2 text-gray-700 hover:bg-gray-100 rounded-lg">
86
- <i class="fas fa-chart-bar mr-3"></i>
87
- <span>Traffic Analytics</span>
88
- </a>
89
- </li>
90
- </ul>
91
- </div>
92
- <div class="mb-8">
93
- <h2 class="text-xs uppercase font-semibold text-gray-500 mb-3">Management</h2>
94
- <ul>
95
- <li class="mb-2">
96
- <a href="#" class="flex items-center p-2 text-gray-700 hover:bg-gray-100 rounded-lg">
97
- <i class="fas fa-users mr-3"></i>
98
- <span>User Management</span>
99
- </a>
100
- </li>
101
- <li class="mb-2">
102
- <a href="#" class="flex items-center p-2 text-gray-700 hover:bg-gray-100 rounded-lg">
103
- <i class="fas fa-key mr-3"></i>
104
- <span>Access Control</span>
105
- </a>
106
- </li>
107
- <li class="mb-2">
108
- <a href="#" class="flex items-center p-2 text-gray-700 hover:bg-gray-100 rounded-lg">
109
- <i class="fas fa-cog mr-3"></i>
110
- <span>Settings</span>
111
- </a>
112
- </li>
113
- </ul>
114
- </div>
115
- <div class="mb-8">
116
- <h2 class="text-xs uppercase font-semibold text-gray-500 mb-3">Reports</h2>
117
- <ul>
118
- <li class="mb-2">
119
- <a href="#" class="flex items-center p-2 text-gray-700 hover:bg-gray-100 rounded-lg">
120
- <i class="fas fa-file-alt mr-3"></i>
121
- <span>Generate Reports</span>
122
- </a>
123
- </li>
124
- <li class="mb-2">
125
- <a href="#" class="flex items-center p-2 text-gray-700 hover:bg-gray-100 rounded-lg">
126
- <i class="fas fa-history mr-3"></i>
127
- <span>Audit Logs</span>
128
- </a>
129
- </li>
130
- </ul>
131
  </div>
132
  </div>
133
  </div>
134
 
135
  <!-- Main Content -->
136
- <div id="main-content" class="flex-1 overflow-auto ml-64 md:ml-72">
137
- <!-- Top Navigation -->
138
- <header class="bg-white shadow-sm">
139
- <div class="flex justify-between items-center p-4">
140
- <div class="flex items-center">
141
- <button id="sidebar-toggle" class="text-gray-600 mr-4 md:hidden">
142
- <i class="fas fa-bars text-xl"></i>
143
- </button>
144
- <h2 class="text-lg font-semibold text-dark">Dashboard Overview</h2>
145
  </div>
146
- <div class="flex items-center space-x-4">
147
- <div class="relative">
148
- <button class="text-gray-600 hover:text-gray-900">
149
- <i class="fas fa-bell text-xl"></i>
150
- <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
 
 
 
 
 
 
 
 
 
151
  </button>
152
  </div>
153
- <div class="dropdown relative">
154
- <button class="flex items-center space-x-2">
155
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-8 h-8 rounded-full">
156
- <span class="hidden md:inline text-gray-700">Admin User</span>
157
- <i class="fas fa-chevron-down text-xs text-gray-500"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
158
  </button>
159
- <div class="dropdown-content mt-2 bg-white shadow-lg rounded-md py-2">
160
- <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Profile</a>
161
- <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Settings</a>
162
- <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Logout</a>
163
- </div>
164
  </div>
165
  </div>
166
  </div>
167
- </header>
168
 
169
- <!-- Main Content Area -->
170
- <main class="p-4">
171
- <!-- Stats Cards -->
172
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
173
- <div class="bg-white p-4 rounded-lg shadow">
174
- <div class="flex justify-between items-center">
175
- <div>
176
- <p class="text-gray-500 text-sm">Total Sessions</p>
177
- <h3 class="text-2xl font-bold text-dark">12,456</h3>
178
- <p class="text-green-500 text-sm flex items-center">
179
- <i class="fas fa-arrow-up mr-1"></i> 12% from last week
180
- </p>
181
- </div>
182
- <div class="bg-blue-50 p-3 rounded-full">
183
- <i class="fas fa-network-wired text-primary text-xl"></i>
184
- </div>
185
- </div>
186
  </div>
187
- <div class="bg-white p-4 rounded-lg shadow">
188
- <div class="flex justify-between items-center">
189
- <div>
190
- <p class="text-gray-500 text-sm">Total Calls</p>
191
- <h3 class="text-2xl font-bold text-dark">3,789</h3>
192
- <p class="text-red-500 text-sm flex items-center">
193
- <i class="fas fa-arrow-down mr-1"></i> 5% from last week
194
- </p>
195
- </div>
196
- <div class="bg-green-50 p-3 rounded-full">
197
- <i class="fas fa-phone-alt text-secondary text-xl"></i>
198
  </div>
199
  </div>
200
- </div>
201
- <div class="bg-white p-4 rounded-lg shadow">
202
- <div class="flex justify-between items-center">
203
- <div>
204
- <p class="text-gray-500 text-sm">Active Users</p>
205
- <h3 class="text-2xl font-bold text-dark">1,234</h3>
206
- <p class="text-green-500 text-sm flex items-center">
207
- <i class="fas fa-arrow-up mr-1"></i> 8% from last week
208
- </p>
209
- </div>
210
- <div class="bg-purple-50 p-3 rounded-full">
211
- <i class="fas fa-users text-accent text-xl"></i>
212
- </div>
213
  </div>
214
- </div>
215
- <div class="bg-white p-4 rounded-lg shadow">
216
- <div class="flex justify-between items-center">
217
- <div>
218
- <p class="text-gray-500 text-sm">Alerts</p>
219
- <h3 class="text-2xl font-bold text-dark">24</h3>
220
- <p class="text-gray-500 text-sm">Need attention</p>
221
- </div>
222
- <div class="bg-red-50 p-3 rounded-full">
223
- <i class="fas fa-exclamation-triangle text-red-500 text-xl"></i>
224
- </div>
225
  </div>
226
  </div>
227
- </div>
228
-
229
- <!-- IPDR and CDR Analysis Section -->
230
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
231
- <!-- IPDR Analysis Card -->
232
- <div class="bg-white p-4 rounded-lg shadow">
233
- <div class="flex justify-between items-center mb-4">
234
- <h3 class="text-lg font-semibold text-dark">
235
- <i class="fas fa-network-wired text-primary mr-2"></i> IPDR Analysis
236
- </h3>
237
- <div class="relative">
238
- <select class="bg-gray-100 border-0 text-sm rounded px-3 py-1 focus:outline-none">
239
- <option>Last 24 Hours</option>
240
- <option>Last 7 Days</option>
241
- <option>Last 30 Days</option>
242
- </select>
243
- </div>
244
  </div>
245
- <div class="chart-container">
246
- <canvas id="ipdrChart"></canvas>
 
247
  </div>
248
- <div class="mt-4 grid grid-cols-3 gap-2 text-center">
249
- <div class="p-2">
250
- <p class="text-gray-500 text-sm">Avg. Duration</p>
251
- <p class="font-semibold">12.4 min</p>
252
- </div>
253
- <div class="p-2">
254
- <p class="text-gray-500 text-sm">Data Volume</p>
255
- <p class="font-semibold">1.2 TB</p>
256
- </div>
257
- <div class="p-2">
258
- <p class="text-gray-500 text-sm">Peak Time</p>
259
- <p class="font-semibold">14:00-16:00</p>
260
- </div>
261
  </div>
262
- <div class="mt-4">
263
- <button class="w-full bg-primary hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition">
264
- View Detailed Analysis
265
- </button>
 
 
 
 
266
  </div>
267
  </div>
 
 
 
 
 
 
 
268
 
269
- <!-- CDR Analysis Card -->
270
- <div class="bg-white p-4 rounded-lg shadow">
271
- <div class="flex justify-between items-center mb-4">
272
- <h3 class="text-lg font-semibold text-dark">
273
- <i class="fas fa-phone-alt text-secondary mr-2"></i> CDR Analysis
274
- </h3>
275
- <div class="relative">
276
- <select class="bg-gray-100 border-0 text-sm rounded px-3 py-1 focus:outline-none">
277
- <option>Last 24 Hours</option>
278
- <option>Last 7 Days</option>
279
- <option>Last 30 Days</option>
280
- </select>
281
- </div>
282
- </div>
283
  <div class="chart-container">
284
- <canvas id="cdrChart"></canvas>
285
- </div>
286
- <div class="mt-4 grid grid-cols-3 gap-2 text-center">
287
- <div class="p-2">
288
- <p class="text-gray-500 text-sm">Avg. Duration</p>
289
- <p class="font-semibold">4.2 min</p>
290
- </div>
291
- <div class="p-2">
292
- <p class="text-gray-500 text-sm">Call Volume</p>
293
- <p class="font-semibold">3,789</p>
294
- </div>
295
- <div class="p-2">
296
- <p class="text-gray-500 text-sm">Peak Time</p>
297
- <p class="font-semibold">10:00-12:00</p>
298
- </div>
299
  </div>
300
- <div class="mt-4">
301
- <button class="w-full bg-secondary hover:bg-green-700 text-white py-2 px-4 rounded-lg transition">
302
- View Detailed Analysis
303
- </button>
 
304
  </div>
305
  </div>
306
  </div>
307
 
308
- <!-- Recent Activities and Top Users -->
309
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
310
- <!-- Recent Activities -->
311
- <div class="bg-white p-4 rounded-lg shadow lg:col-span-2">
312
- <div class="flex justify-between items-center mb-4">
313
- <h3 class="text-lg font-semibold text-dark">
314
- <i class="fas fa-history text-accent mr-2"></i> Recent Activities
315
- </h3>
316
- <button class="text-primary text-sm">View All</button>
317
- </div>
318
- <div class="space-y-4">
319
- <div class="flex items-start">
320
- <div class="bg-blue-50 p-2 rounded-full mr-3">
321
- <i class="fas fa-user-plus text-primary"></i>
322
- </div>
323
- <div>
324
- <p class="text-sm font-medium">New user registered</p>
325
- <p class="text-xs text-gray-500">John Doe registered at 10:30 AM</p>
326
- </div>
327
- <span class="ml-auto text-xs text-gray-500">10 min ago</span>
328
- </div>
329
- <div class="flex items-start">
330
- <div class="bg-red-50 p-2 rounded-full mr-3">
331
- <i class="fas fa-exclamation-triangle text-red-500"></i>
332
- </div>
333
- <div>
334
- <p class="text-sm font-medium">Security alert</p>
335
- <p class="text-xs text-gray-500">Multiple failed login attempts detected</p>
336
- </div>
337
- <span class="ml-auto text-xs text-gray-500">25 min ago</span>
338
- </div>
339
- <div class="flex items-start">
340
- <div class="bg-green-50 p-2 rounded-full mr-3">
341
- <i class="fas fa-file-export text-secondary"></i>
342
- </div>
343
- <div>
344
- <p class="text-sm font-medium">Report generated</p>
345
- <p class="text-xs text-gray-500">CDR analysis report for last week</p>
346
- </div>
347
- <span class="ml-auto text-xs text-gray-500">1 hour ago</span>
348
- </div>
349
- <div class="flex items-start">
350
- <div class="bg-purple-50 p-2 rounded-full mr-3">
351
- <i class="fas fa-cog text-accent"></i>
352
- </div>
353
- <div>
354
- <p class="text-sm font-medium">System update</p>
355
- <p class="text-xs text-gray-500">System updated to version 2.3.1</p>
356
- </div>
357
- <span class="ml-auto text-xs text-gray-500">2 hours ago</span>
358
- </div>
359
  </div>
360
  </div>
361
-
362
- <!-- Top Users -->
363
- <div class="bg-white p-4 rounded-lg shadow">
364
- <div class="flex justify-between items-center mb-4">
365
- <h3 class="text-lg font-semibold text-dark">
366
- <i class="fas fa-users text-accent mr-2"></i> Top Users
367
- </h3>
368
- <button class="text-primary text-sm">View All</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
369
  </div>
370
- <div class="space-y-4">
371
- <div class="flex items-center">
372
- <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full mr-3">
373
- <div>
374
- <p class="text-sm font-medium">Sarah Johnson</p>
375
- <p class="text-xs text-gray-500">1.2 TB data usage</p>
376
- </div>
377
- <span class="ml-auto bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">IPDR</span>
378
- </div>
379
- <div class="flex items-center">
380
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full mr-3">
381
- <div>
382
- <p class="text-sm font-medium">Michael Brown</p>
383
- <p class="text-xs text-gray-500">342 calls</p>
384
- </div>
385
- <span class="ml-auto bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">CDR</span>
386
- </div>
387
- <div class="flex items-center">
388
- <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="w-10 h-10 rounded-full mr-3">
389
- <div>
390
- <p class="text-sm font-medium">Emily Davis</p>
391
- <p class="text-xs text-gray-500">980 MB data usage</p>
392
- </div>
393
- <span class="ml-auto bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">IPDR</span>
394
- </div>
395
- <div class="flex items-center">
396
- <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="w-10 h-10 rounded-full mr-3">
397
- <div>
398
- <p class="text-sm font-medium">Robert Wilson</p>
399
- <p class="text-xs text-gray-500">256 calls</p>
400
- </div>
401
- <span class="ml-auto bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">CDR</span>
402
- </div>
403
  </div>
404
  </div>
405
  </div>
406
-
407
- <!-- Quick Actions -->
408
- <div class="bg-white p-4 rounded-lg shadow mb-6">
409
- <h3 class="text-lg font-semibold text-dark mb-4">
410
- <i class="fas fa-bolt text-yellow-500 mr-2"></i> Quick Actions
411
- </h3>
412
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
413
- <button class="flex flex-col items-center justify-center p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition">
414
- <i class="fas fa-search text-primary text-xl mb-2"></i>
415
- <span class="text-sm">Search Records</span>
416
- </button>
417
- <button class="flex flex-col items-center justify-center p-4 bg-green-50 rounded-lg hover:bg-green-100 transition">
418
- <i class="fas fa-file-export text-secondary text-xl mb-2"></i>
419
- <span class="text-sm">Export Data</span>
420
- </button>
421
- <button class="flex flex-col items-center justify-center p-4 bg-purple-50 rounded-lg hover:bg-purple-100 transition">
422
- <i class="fas fa-chart-pie text-accent text-xl mb-2"></i>
423
- <span class="text-sm">Create Report</span>
424
- </button>
425
- <button class="flex flex-col items-center justify-center p-4 bg-red-50 rounded-lg hover:bg-red-100 transition">
426
- <i class="fas fa-bell text-red-500 text-xl mb-2"></i>
427
- <span class="text-sm">Set Alert</span>
428
- </button>
429
- </div>
430
- </div>
431
  </main>
432
  </div>
433
  </div>
434
 
435
- <!-- Chart.js -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
436
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
437
  <script>
438
- // Toggle sidebar on mobile
439
- document.getElementById('sidebar-toggle').addEventListener('click', function() {
440
- const sidebar = document.querySelector('.sidebar');
441
- const mainContent = document.getElementById('main-content');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
442
 
443
- if (sidebar.style.transform === 'translateX(-100%)') {
444
- sidebar.style.transform = 'translateX(0)';
445
- mainContent.style.marginLeft = '16rem';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
446
  } else {
447
- sidebar.style.transform = 'translateX(-100%)';
448
- mainContent.style.marginLeft = '0';
449
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
450
  });
451
-
452
- // IPDR Chart
453
- const ipdrCtx = document.getElementById('ipdrChart').getContext('2d');
454
- const ipdrChart = new Chart(ipdrCtx, {
455
- type: 'line',
456
- data: {
457
- labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
458
- datasets: [{
459
- label: 'Data Volume (GB)',
460
- data: [120, 80, 200, 350, 280, 180],
461
- borderColor: '#3B82F6',
462
- backgroundColor: 'rgba(59, 130, 246, 0.1)',
463
- borderWidth: 2,
464
- fill: true,
465
- tension: 0.4
466
- }]
467
- },
468
- options: {
469
- responsive: true,
470
- maintainAspectRatio: false,
471
- plugins: {
472
- legend: {
473
- display: false
474
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
475
  },
476
- scales: {
477
- y: {
478
- beginAtZero: true,
479
- grid: {
480
- drawBorder: false
 
 
 
 
 
481
  }
482
  },
483
- x: {
484
- grid: {
485
- display: false
 
 
 
 
486
  }
487
  }
488
  }
489
- }
490
- });
491
-
492
- // CDR Chart
493
- const cdrCtx = document.getElementById('cdrChart').getContext('2d');
494
- const cdrChart = new Chart(cdrCtx, {
495
- type: 'bar',
496
- data: {
497
- labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
498
- datasets: [{
499
- label: 'Call Volume',
500
- data: [450, 520, 480, 600, 550, 300, 200],
501
- backgroundColor: '#10B981',
502
- borderColor: '#10B981',
503
- borderWidth: 1
504
- }]
505
- },
506
- options: {
507
- responsive: true,
508
- maintainAspectRatio: false,
509
- plugins: {
510
- legend: {
511
- display: false
512
- }
513
  },
514
- scales: {
515
- y: {
516
- beginAtZero: true,
517
- grid: {
518
- drawBorder: false
519
- }
520
- },
521
- x: {
522
- grid: {
523
- display: false
 
 
 
 
 
 
 
524
  }
525
  }
526
  }
527
- }
528
  });
529
-
530
- // Responsive adjustments
531
- function handleResize() {
532
- const sidebar = document.querySelector('.sidebar');
533
- const mainContent = document.getElementById('main-content');
534
-
535
- if (window.innerWidth < 768) {
536
- sidebar.style.transform = 'translateX(-100%)';
537
- mainContent.style.marginLeft = '0';
538
- } else {
539
- sidebar.style.transform = 'translateX(0)';
540
- mainContent.style.marginLeft = '16rem';
541
- }
542
- }
543
-
544
- window.addEventListener('resize', handleResize);
545
- handleResize(); // Initial call
546
  </script>
547
  <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=voizex/pickmenow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
548
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>IPDR Analysis | ACCQUEST Management Portal</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  <style>
10
  .sidebar {
11
  transition: all 0.3s ease;
12
  }
13
+ .sidebar.collapsed {
14
+ width: 70px;
15
+ }
16
+ .sidebar.collapsed .nav-text {
17
+ display: none;
18
  }
19
+ .sidebar.collapsed .logo-text {
20
  display: none;
 
 
 
 
21
  }
22
+ .main-content {
23
+ transition: all 0.3s ease;
24
+ }
25
+ .sidebar.collapsed + .main-content {
26
+ margin-left: 70px;
27
+ }
28
+ .file-upload {
29
+ border: 2px dashed #ccc;
30
+ border-radius: 8px;
31
+ transition: all 0.3s ease;
32
+ }
33
+ .file-upload:hover {
34
+ border-color: #3b82f6;
35
+ background-color: #f8fafc;
36
  }
37
+ .file-upload.dragover {
38
+ border-color: #3b82f6;
39
+ background-color: #eff6ff;
40
+ }
41
+ .chart-container {
42
+ height: 400px;
43
+ }
44
+ .data-table {
45
+ max-height: 500px;
46
+ overflow-y: auto;
47
  }
48
  </style>
49
  </head>
50
+ <body class="bg-gray-100">
51
+ <div class="flex h-screen">
52
  <!-- Sidebar -->
53
+ <div class="sidebar bg-blue-800 text-white w-64 flex flex-col">
54
+ <div class="p-4 flex items-center justify-between border-b border-blue-700">
55
  <div class="flex items-center">
56
+ <i class="fas fa-shield-alt text-2xl mr-3"></i>
57
+ <span class="logo-text text-xl font-bold">ACCQUEST</span>
58
  </div>
59
+ <button id="toggleSidebar" class="text-white focus:outline-none">
60
+ <i class="fas fa-bars"></i>
61
+ </button>
62
  </div>
63
+ <div class="flex-1 overflow-y-auto">
64
+ <nav class="p-4">
65
+ <div class="mb-6">
66
+ <p class="text-blue-300 uppercase text-xs font-semibold mb-2">Main Menu</p>
67
+ <ul>
68
+ <li class="mb-2">
69
+ <a href="index.html" class="flex items-center py-2 px-3 rounded hover:bg-blue-700">
70
+ <i class="fas fa-tachometer-alt mr-3"></i>
71
+ <span class="nav-text">Dashboard</span>
72
+ </a>
73
+ </li>
74
+ <li class="mb-2">
75
+ <a href="#" class="flex items-center py-2 px-3 rounded bg-blue-900">
76
+ <i class="fas fa-network-wired mr-3"></i>
77
+ <span class="nav-text">IPDR Analysis</span>
78
+ </a>
79
+ </li>
80
+ <li class="mb-2">
81
+ <a href="cdr.html" class="flex items-center py-2 px-3 rounded hover:bg-blue-700">
82
+ <i class="fas fa-phone-alt mr-3"></i>
83
+ <span class="nav-text">CDR Analysis</span>
84
+ </a>
85
+ </li>
86
+ </ul>
87
+ </div>
88
+ <div class="mb-6">
89
+ <p class="text-blue-300 uppercase text-xs font-semibold mb-2">Reports</p>
90
+ <ul>
91
+ <li class="mb-2">
92
+ <a href="#" class="flex items-center py-2 px-3 rounded hover:bg-blue-700">
93
+ <i class="fas fa-chart-bar mr-3"></i>
94
+ <span class="nav-text">Traffic Reports</span>
95
+ </a>
96
+ </li>
97
+ <li class="mb-2">
98
+ <a href="#" class="flex items-center py-2 px-3 rounded hover:bg-blue-700">
99
+ <i class="fas fa-exclamation-triangle mr-3"></i>
100
+ <span class="nav-text">Anomaly Detection</span>
101
+ </a>
102
+ </li>
103
+ </ul>
104
+ </div>
105
+ <div>
106
+ <p class="text-blue-300 uppercase text-xs font-semibold mb-2">Settings</p>
107
+ <ul>
108
+ <li class="mb-2">
109
+ <a href="#" class="flex items-center py-2 px-3 rounded hover:bg-blue-700">
110
+ <i class="fas fa-cog mr-3"></i>
111
+ <span class="nav-text">System Settings</span>
112
+ </a>
113
+ </li>
114
+ <li class="mb-2">
115
+ <a href="#" class="flex items-center py-2 px-3 rounded hover:bg-blue-700">
116
+ <i class="fas fa-user-shield mr-3"></i>
117
+ <span class="nav-text">User Management</span>
118
+ </a>
119
+ </li>
120
+ </ul>
121
+ </div>
122
+ </nav>
123
+ </div>
124
+ <div class="p-4 border-t border-blue-700">
125
+ <div class="flex items-center">
126
+ <img src="https://via.placeholder.com/40" alt="User" class="rounded-full mr-3">
127
+ <div>
128
+ <p class="font-medium">Admin User</p>
129
+ <p class="text-blue-300 text-sm">admin@accquest.com</p>
130
+ </div>
 
 
 
 
 
 
131
  </div>
132
  </div>
133
  </div>
134
 
135
  <!-- Main Content -->
136
+ <div class="main-content flex-1 overflow-y-auto ml-64">
137
+ <header class="bg-white shadow-sm p-4 flex justify-between items-center">
138
+ <h1 class="text-2xl font-bold text-gray-800">IPDR Analysis</h1>
139
+ <div class="flex items-center space-x-4">
140
+ <div class="relative">
141
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
142
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
 
 
143
  </div>
144
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
145
+ <i class="fas fa-bell"></i>
146
+ </button>
147
+ </div>
148
+ </header>
149
+
150
+ <main class="p-6">
151
+ <!-- Upload Section -->
152
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
153
+ <div class="flex justify-between items-center mb-4">
154
+ <h2 class="text-xl font-semibold text-gray-800">Upload IPDR Files</h2>
155
+ <div class="flex space-x-2">
156
+ <button id="uploadHelp" class="p-2 text-blue-500 hover:text-blue-700">
157
+ <i class="fas fa-question-circle"></i>
158
  </button>
159
  </div>
160
+ </div>
161
+
162
+ <div class="file-upload p-8 text-center mb-4" id="dropZone">
163
+ <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-3"></i>
164
+ <p class="text-gray-600 mb-2">Drag & drop your IPDR files here</p>
165
+ <p class="text-gray-400 text-sm mb-4">or</p>
166
+ <input type="file" id="fileInput" class="hidden" multiple accept=".csv,.xlsx,.json">
167
+ <label for="fileInput" class="bg-blue-600 text-white px-6 py-2 rounded-lg cursor-pointer hover:bg-blue-700 transition duration-300">
168
+ Browse Files
169
+ </label>
170
+ <p class="text-gray-400 text-xs mt-3">Supported formats: CSV, XLSX, JSON (Max 100MB)</p>
171
+ </div>
172
+
173
+ <div id="fileList" class="hidden">
174
+ <h3 class="font-medium text-gray-700 mb-3">Selected Files:</h3>
175
+ <ul id="selectedFiles" class="space-y-2"></ul>
176
+ <div class="flex justify-end mt-4">
177
+ <button id="processFiles" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition duration-300">
178
+ Process Files
179
  </button>
 
 
 
 
 
180
  </div>
181
  </div>
182
  </div>
 
183
 
184
+ <!-- Filter Section -->
185
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
186
+ <div class="flex justify-between items-center mb-4">
187
+ <h2 class="text-xl font-semibold text-gray-800">Filter IPDR Data</h2>
188
+ <button id="resetFilters" class="text-sm text-blue-500 hover:text-blue-700">
189
+ Reset Filters
190
+ </button>
 
 
 
 
 
 
 
 
 
 
191
  </div>
192
+
193
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
194
+ <div>
195
+ <label class="block text-sm font-medium text-gray-700 mb-1">Date Range</label>
196
+ <div class="flex space-x-2">
197
+ <input type="date" class="border rounded-lg px-3 py-2 w-full">
198
+ <input type="date" class="border rounded-lg px-3 py-2 w-full">
 
 
 
 
199
  </div>
200
  </div>
201
+ <div>
202
+ <label class="block text-sm font-medium text-gray-700 mb-1">Source IP</label>
203
+ <input type="text" placeholder="Enter source IP" class="border rounded-lg px-3 py-2 w-full">
 
 
 
 
 
 
 
 
 
 
204
  </div>
205
+ <div>
206
+ <label class="block text-sm font-medium text-gray-700 mb-1">Destination IP</label>
207
+ <input type="text" placeholder="Enter destination IP" class="border rounded-lg px-3 py-2 w-full">
 
 
 
 
 
 
 
 
208
  </div>
209
  </div>
210
+
211
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
212
+ <div>
213
+ <label class="block text-sm font-medium text-gray-700 mb-1">Protocol</label>
214
+ <select class="border rounded-lg px-3 py-2 w-full">
215
+ <option value="">All Protocols</option>
216
+ <option value="TCP">TCP</option>
217
+ <option value="UDP">UDP</option>
218
+ <option value="ICMP">ICMP</option>
219
+ </select>
 
 
 
 
 
 
 
220
  </div>
221
+ <div>
222
+ <label class="block text-sm font-medium text-gray-700 mb-1">Port</label>
223
+ <input type="number" placeholder="Enter port number" class="border rounded-lg px-3 py-2 w-full">
224
  </div>
225
+ <div>
226
+ <label class="block text-sm font-medium text-gray-700 mb-1">Traffic Volume</label>
227
+ <select class="border rounded-lg px-3 py-2 w-full">
228
+ <option value="">Any</option>
229
+ <option value="low">Low (&lt; 1MB)</option>
230
+ <option value="medium">Medium (1MB - 10MB)</option>
231
+ <option value="high">High (&gt; 10MB)</option>
232
+ </select>
 
 
 
 
 
233
  </div>
234
+ <div>
235
+ <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
236
+ <select class="border rounded-lg px-3 py-2 w-full">
237
+ <option value="">All Statuses</option>
238
+ <option value="success">Success</option>
239
+ <option value="failed">Failed</option>
240
+ <option value="timeout">Timeout</option>
241
+ </select>
242
  </div>
243
  </div>
244
+
245
+ <div class="flex justify-end">
246
+ <button id="applyFilters" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition duration-300">
247
+ Apply Filters
248
+ </button>
249
+ </div>
250
+ </div>
251
 
252
+ <!-- Visualization Section -->
253
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
254
+ <div class="bg-white rounded-lg shadow-md p-6">
255
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Traffic Volume Over Time</h2>
 
 
 
 
 
 
 
 
 
 
256
  <div class="chart-container">
257
+ <canvas id="trafficChart"></canvas>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
258
  </div>
259
+ </div>
260
+ <div class="bg-white rounded-lg shadow-md p-6">
261
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Protocol Distribution</h2>
262
+ <div class="chart-container">
263
+ <canvas id="protocolChart"></canvas>
264
  </div>
265
  </div>
266
  </div>
267
 
268
+ <!-- Data Table Section -->
269
+ <div class="bg-white rounded-lg shadow-md p-6">
270
+ <div class="flex justify-between items-center mb-4">
271
+ <h2 class="text-xl font-semibold text-gray-800">IPDR Records</h2>
272
+ <div class="flex space-x-2">
273
+ <button class="p-2 text-gray-500 hover:text-gray-700">
274
+ <i class="fas fa-download"></i>
275
+ </button>
276
+ <button class="p-2 text-gray-500 hover:text-gray-700">
277
+ <i class="fas fa-print"></i>
278
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
279
  </div>
280
  </div>
281
+
282
+ <div class="overflow-x-auto data-table">
283
+ <table class="min-w-full divide-y divide-gray-200">
284
+ <thead class="bg-gray-50">
285
+ <tr>
286
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Timestamp</th>
287
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Source IP</th>
288
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Destination IP</th>
289
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Protocol</th>
290
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Port</th>
291
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bytes</th>
292
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
293
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
294
+ </tr>
295
+ </thead>
296
+ <tbody class="bg-white divide-y divide-gray-200">
297
+ <tr>
298
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 08:23:45</td>
299
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">192.168.1.5</td>
300
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10.0.0.12</td>
301
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">TCP</td>
302
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">443</td>
303
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.2 MB</td>
304
+ <td class="px-6 py-4 whitespace-nowrap">
305
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Success</span>
306
+ </td>
307
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
308
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
309
+ <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button>
310
+ </td>
311
+ </tr>
312
+ <!-- More rows would be dynamically generated -->
313
+ </tbody>
314
+ </table>
315
+ </div>
316
+
317
+ <div class="flex justify-between items-center mt-4">
318
+ <div class="text-sm text-gray-500">
319
+ Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">24</span> results
320
  </div>
321
+ <div class="flex space-x-2">
322
+ <button class="px-3 py-1 border rounded-md text-gray-700 bg-gray-100">Previous</button>
323
+ <button class="px-3 py-1 border rounded-md bg-blue-600 text-white">1</button>
324
+ <button class="px-3 py-1 border rounded-md text-gray-700 hover:bg-gray-100">2</button>
325
+ <button class="px-3 py-1 border rounded-md text-gray-700 hover:bg-gray-100">3</button>
326
+ <button class="px-3 py-1 border rounded-md text-gray-700 hover:bg-gray-100">Next</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
327
  </div>
328
  </div>
329
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
330
  </main>
331
  </div>
332
  </div>
333
 
334
+ <!-- Help Modal -->
335
+ <div id="helpModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
336
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl">
337
+ <div class="flex justify-between items-center border-b p-4">
338
+ <h3 class="text-lg font-semibold">IPDR Analysis Help</h3>
339
+ <button id="closeHelp" class="text-gray-500 hover:text-gray-700">
340
+ <i class="fas fa-times"></i>
341
+ </button>
342
+ </div>
343
+ <div class="p-6">
344
+ <h4 class="font-medium text-gray-800 mb-2">Uploading IPDR Files</h4>
345
+ <p class="text-gray-600 mb-4">You can upload IPDR files in CSV, XLSX, or JSON format. The system will automatically parse the files and extract the relevant data for analysis.</p>
346
+
347
+ <h4 class="font-medium text-gray-800 mb-2">Filtering Data</h4>
348
+ <p class="text-gray-600 mb-4">Use the filter options to narrow down the IPDR records based on various criteria like date range, IP addresses, protocol, port, etc.</p>
349
+
350
+ <h4 class="font-medium text-gray-800 mb-2">Visualizations</h4>
351
+ <p class="text-gray-600 mb-4">The charts provide visual representations of your IPDR data, helping you identify patterns and trends in network traffic.</p>
352
+
353
+ <h4 class="font-medium text-gray-800 mb-2">Data Table</h4>
354
+ <p class="text-gray-600">The table displays all IPDR records with detailed information. You can view more details or delete records as needed.</p>
355
+ </div>
356
+ <div class="flex justify-end p-4 border-t">
357
+ <button id="closeHelpBtn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
358
+ Got it!
359
+ </button>
360
+ </div>
361
+ </div>
362
+ </div>
363
+
364
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
365
  <script>
366
+ // Toggle sidebar
367
+ document.getElementById('toggleSidebar').addEventListener('click', function() {
368
+ document.querySelector('.sidebar').classList.toggle('collapsed');
369
+ });
370
+
371
+ // File upload handling
372
+ const dropZone = document.getElementById('dropZone');
373
+ const fileInput = document.getElementById('fileInput');
374
+ const fileList = document.getElementById('fileList');
375
+ const selectedFiles = document.getElementById('selectedFiles');
376
+ const processFilesBtn = document.getElementById('processFiles');
377
+
378
+ // Handle drag and drop events
379
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
380
+ dropZone.addEventListener(eventName, preventDefaults, false);
381
+ });
382
+
383
+ function preventDefaults(e) {
384
+ e.preventDefault();
385
+ e.stopPropagation();
386
+ }
387
+
388
+ ['dragenter', 'dragover'].forEach(eventName => {
389
+ dropZone.addEventListener(eventName, highlight, false);
390
+ });
391
+
392
+ ['dragleave', 'drop'].forEach(eventName => {
393
+ dropZone.addEventListener(eventName, unhighlight, false);
394
+ });
395
+
396
+ function highlight() {
397
+ dropZone.classList.add('dragover');
398
+ }
399
+
400
+ function unhighlight() {
401
+ dropZone.classList.remove('dragover');
402
+ }
403
+
404
+ // Handle dropped files
405
+ dropZone.addEventListener('drop', handleDrop, false);
406
+
407
+ function handleDrop(e) {
408
+ const dt = e.dataTransfer;
409
+ const files = dt.files;
410
+ handleFiles(files);
411
+ }
412
+
413
+ // Handle selected files
414
+ fileInput.addEventListener('change', function() {
415
+ handleFiles(this.files);
416
+ });
417
+
418
+ function handleFiles(files) {
419
+ selectedFiles.innerHTML = '';
420
 
421
+ if (files.length > 0) {
422
+ fileList.classList.remove('hidden');
423
+
424
+ for (let i = 0; i < files.length; i++) {
425
+ const file = files[i];
426
+ const listItem = document.createElement('li');
427
+ listItem.className = 'flex items-center justify-between bg-gray-50 p-3 rounded';
428
+
429
+ listItem.innerHTML = `
430
+ <div class="flex items-center">
431
+ <i class="fas fa-file-alt text-blue-500 mr-3"></i>
432
+ <div>
433
+ <p class="text-sm font-medium">${file.name}</p>
434
+ <p class="text-xs text-gray-500">${formatFileSize(file.size)}</p>
435
+ </div>
436
+ </div>
437
+ <button class="text-red-500 hover:text-red-700 remove-file" data-index="${i}">
438
+ <i class="fas fa-times"></i>
439
+ </button>
440
+ `;
441
+
442
+ selectedFiles.appendChild(listItem);
443
+ }
444
+
445
+ // Add event listeners to remove buttons
446
+ document.querySelectorAll('.remove-file').forEach(button => {
447
+ button.addEventListener('click', function() {
448
+ const index = parseInt(this.getAttribute('data-index'));
449
+ removeFile(index);
450
+ });
451
+ });
452
  } else {
453
+ fileList.classList.add('hidden');
 
454
  }
455
+ }
456
+
457
+ function formatFileSize(bytes) {
458
+ if (bytes === 0) return '0 Bytes';
459
+ const k = 1024;
460
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
461
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
462
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
463
+ }
464
+
465
+ function removeFile(index) {
466
+ // In a real app, you would remove the file from the FileList
467
+ // For this demo, we'll just remove the list item
468
+ const items = document.querySelectorAll('#selectedFiles li');
469
+ if (items.length > 0 && index < items.length) {
470
+ items[index].remove();
471
+
472
+ // If no files left, hide the file list
473
+ if (document.querySelectorAll('#selectedFiles li').length === 0) {
474
+ fileList.classList.add('hidden');
475
+ }
476
+ }
477
+ }
478
+
479
+ // Process files button
480
+ processFilesBtn.addEventListener('click', function() {
481
+ // In a real app, you would process the files here
482
+ alert('Files are being processed. This would upload and analyze the IPDR files in a real application.');
483
  });
484
+
485
+ // Help modal
486
+ const helpModal = document.getElementById('helpModal');
487
+ const uploadHelp = document.getElementById('uploadHelp');
488
+ const closeHelp = document.getElementById('closeHelp');
489
+ const closeHelpBtn = document.getElementById('closeHelpBtn');
490
+
491
+ uploadHelp.addEventListener('click', function() {
492
+ helpModal.classList.remove('hidden');
493
+ });
494
+
495
+ closeHelp.addEventListener('click', function() {
496
+ helpModal.classList.add('hidden');
497
+ });
498
+
499
+ closeHelpBtn.addEventListener('click', function() {
500
+ helpModal.classList.add('hidden');
501
+ });
502
+
503
+ // Reset filters
504
+ document.getElementById('resetFilters').addEventListener('click', function() {
505
+ const inputs = document.querySelectorAll('.bg-white input, .bg-white select');
506
+ inputs.forEach(input => {
507
+ if (input.type === 'text' || input.type === 'number') {
508
+ input.value = '';
509
+ } else if (input.type === 'date') {
510
+ input.value = '';
511
+ } else if (input.tagName === 'SELECT') {
512
+ input.selectedIndex = 0;
513
+ }
514
+ });
515
+ });
516
+
517
+ // Apply filters
518
+ document.getElementById('applyFilters').addEventListener('click', function() {
519
+ // In a real app, this would filter the data
520
+ alert('Filters applied. This would filter the IPDR data in a real application.');
521
+ });
522
+
523
+ // Initialize charts
524
+ document.addEventListener('DOMContentLoaded', function() {
525
+ // Traffic Volume Chart
526
+ const trafficCtx = document.getElementById('trafficChart').getContext('2d');
527
+ const trafficChart = new Chart(trafficCtx, {
528
+ type: 'line',
529
+ data: {
530
+ labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
531
+ datasets: [{
532
+ label: 'Inbound Traffic (MB)',
533
+ data: [12, 19, 3, 5, 2, 3, 15],
534
+ borderColor: 'rgb(59, 130, 246)',
535
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
536
+ tension: 0.4,
537
+ fill: true
538
+ }, {
539
+ label: 'Outbound Traffic (MB)',
540
+ data: [8, 15, 5, 8, 3, 10, 12],
541
+ borderColor: 'rgb(16, 185, 129)',
542
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
543
+ tension: 0.4,
544
+ fill: true
545
+ }]
546
  },
547
+ options: {
548
+ responsive: true,
549
+ maintainAspectRatio: false,
550
+ plugins: {
551
+ legend: {
552
+ position: 'top',
553
+ },
554
+ tooltip: {
555
+ mode: 'index',
556
+ intersect: false,
557
  }
558
  },
559
+ scales: {
560
+ y: {
561
+ beginAtZero: true,
562
+ title: {
563
+ display: true,
564
+ text: 'Traffic Volume (MB)'
565
+ }
566
  }
567
  }
568
  }
569
+ });
570
+
571
+ // Protocol Distribution Chart
572
+ const protocolCtx = document.getElementById('protocolChart').getContext('2d');
573
+ const protocolChart = new Chart(protocolCtx, {
574
+ type: 'doughnut',
575
+ data: {
576
+ labels: ['TCP', 'UDP', 'ICMP', 'Other'],
577
+ datasets: [{
578
+ data: [45, 30, 15, 10],
579
+ backgroundColor: [
580
+ 'rgba(59, 130, 246, 0.8)',
581
+ 'rgba(16, 185, 129, 0.8)',
582
+ 'rgba(245, 158, 11, 0.8)',
583
+ 'rgba(239, 68, 68, 0.8)'
584
+ ],
585
+ borderColor: [
586
+ 'rgba(59, 130, 246, 1)',
587
+ 'rgba(16, 185, 129, 1)',
588
+ 'rgba(245, 158, 11, 1)',
589
+ 'rgba(239, 68, 68, 1)'
590
+ ],
591
+ borderWidth: 1
592
+ }]
593
  },
594
+ options: {
595
+ responsive: true,
596
+ maintainAspectRatio: false,
597
+ plugins: {
598
+ legend: {
599
+ position: 'right',
600
+ },
601
+ tooltip: {
602
+ callbacks: {
603
+ label: function(context) {
604
+ const label = context.label || '';
605
+ const value = context.raw || 0;
606
+ const total = context.dataset.data.reduce((a, b) => a + b, 0);
607
+ const percentage = Math.round((value / total) * 100);
608
+ return `${label}: ${value} (${percentage}%)`;
609
+ }
610
+ }
611
  }
612
  }
613
  }
614
+ });
615
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
616
  </script>
617
  <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=voizex/pickmenow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
618
  </html>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- Build a ACCQUEST MANAGEMENT PORTAL WITH IPDR ANALYSIS AND CDR ANALYSIS MAIN PAGE INCLUDING ALL FEATURES
 
 
1
+ Build a ACCQUEST MANAGEMENT PORTAL WITH IPDR ANALYSIS AND CDR ANALYSIS MAIN PAGE INCLUDING ALL FEATURES
2
+ NOW CREATED IPDR ANALYSIS PAGE WITH UPLOAD OPTIONS AND AND FILTER OPTIONS AND ALL OTHER OPTION LINKING WITH MY INDEX.HTML PAGE