Hugging Face's logo

Spaces:
caustino
/
rigorsplusplus
Running

App Files Community
caustino commited on
Commit
4336fec
·
verified ·
1 Parent(s): ccdf712

Create dashboard.html

Browse files
Files changed (1) hide show
  1. dashboard.html +258 -0
dashboard.html ADDED
@@ -0,0 +1,258 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Dashboard | Quantum Gene Fortress</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
+ </head>
13
+ <body class="bg-gray-900 text-white min-h-screen">
14
+ <custom-navbar></custom-navbar>
15
+
16
+ <main class="container mx-auto px-4 py-8">
17
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
18
+ <h1 class="text-3xl font-bold mb-4 md:mb-0">
19
+ Security Dashboard
20
+ <span class="text-sm ml-2 px-2 py-1 bg-blue-900/50 text-blue-300 rounded-full">PQC Active</span>
21
+ </h1>
22
+ <div class="flex items-center gap-4">
23
+ <div class="flex items-center gap-2 text-green-400">
24
+ <div class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></div>
25
+ <span class="text-sm">All Systems Operational</span>
26
+ </div>
27
+ <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg flex items-center gap-2 transition">
28
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
29
+ <span>Refresh</span>
30
+ </button>
31
+ </div>
32
+ </div>
33
+
34
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
35
+ <div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700">
36
+ <div class="flex justify-between items-start mb-4">
37
+ <h3 class="text-lg font-semibold">Genomic Data Protection</h3>
38
+ <span class="px-2 py-1 text-xs bg-green-900/50 text-green-300 rounded-full">Active</span>
39
+ </div>
40
+ <div class="h-40">
41
+ <canvas id="encryptionChart"></canvas>
42
+ </div>
43
+ </div>
44
+
45
+ <div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700">
46
+ <div class="flex justify-between items-start mb-4">
47
+ <h3 class="text-lg font-semibold">Key Management</h3>
48
+ <span class="px-2 py-1 text-xs bg-blue-900/50 text-blue-300 rounded-full">Rotating</span>
49
+ </div>
50
+ <div class="h-40">
51
+ <canvas id="keysChart"></canvas>
52
+ </div>
53
+ </div>
54
+
55
+ <div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700">
56
+ <div class="flex justify-between items-start mb-4">
57
+ <h3 class="text-lg font-semibold">Ledger Integrity</h3>
58
+ <span class="px-2 py-1 text-xs bg-green-900/50 text-green-300 rounded-full">Verified</span>
59
+ </div>
60
+ <div class="h-40">
61
+ <canvas id="ledgerChart"></canvas>
62
+ </div>
63
+ </div>
64
+ </div>
65
+
66
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
67
+ <div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700">
68
+ <h3 class="text-lg font-semibold mb-4">Recent Security Events</h3>
69
+ <div class="space-y-4">
70
+ <div class="flex items-start gap-3 p-3 hover:bg-gray-700/50 rounded-lg transition">
71
+ <div class="mt-1 text-green-400">
72
+ <i data-feather="check-circle" class="w-4 h-4"></i>
73
+ </div>
74
+ <div>
75
+ <p class="font-medium">Data Decryption</p>
76
+ <p class="text-sm text-gray-400">Sample ID: G-28492 • Kyber-768 • Dilithium-III verified</p>
77
+ <p class="text-xs text-gray-500">2 minutes ago</p>
78
+ </div>
79
+ </div>
80
+ <div class="flex items-start gap-3 p-3 hover:bg-gray-700/50 rounded-lg transition">
81
+ <div class="mt-1 text-blue-400">
82
+ <i data-feather="rotate-cw" class="w-4 h-4"></i>
83
+ </div>
84
+ <div>
85
+ <p class="font-medium">Key Rotation</p>
86
+ <p class="text-sm text-gray-400">KEM keys successfully rotated for enclave #7</p>
87
+ <p class="text-xs text-gray-500">15 minutes ago</p>
88
+ </div>
89
+ </div>
90
+ <div class="flex items-start gap-3 p-3 hover:bg-gray-700/50 rounded-lg transition">
91
+ <div class="mt-1 text-purple-400">
92
+ <i data-feather="download" class="w-4 h-4"></i>
93
+ </div>
94
+ <div>
95
+ <p class="font-medium">Model Update</p>
96
+ <p class="text-sm text-gray-400">ADHD_PRS_v2.1 deployed with quantum-resistant signatures</p>
97
+ <p class="text-xs text-gray-500">1 hour ago</p>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+
103
+ <div class="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700">
104
+ <h3 class="text-lg font-semibold mb-4">System Status</h3>
105
+ <div class="space-y-4">
106
+ <div class="p-4 bg-gray-700/30 rounded-lg">
107
+ <div class="flex justify-between items-center mb-2">
108
+ <span class="font-medium">HSM Module #1</span>
109
+ <span class="text-xs px-2 py-1 bg-green-900/50 text-green-300 rounded-full">Operational</span>
110
+ </div>
111
+ <div class="w-full bg-gray-700 rounded-full h-2 mb-1">
112
+ <div class="bg-green-400 h-2 rounded-full" style="width: 92%"></div>
113
+ </div>
114
+ <div class="flex justify-between text-xs text-gray-400">
115
+ <span>Dilithium-III: Active</span>
116
+ <span>92%</span>
117
+ </div>
118
+ </div>
119
+
120
+ <div class="p-4 bg-gray-700/30 rounded-lg">
121
+ <div class="flex justify-between items-center mb-2">
122
+ <span class="font-medium">Enclave Processor</span>
123
+ <span class="text-xs px-2 py-1 bg-blue-900/50 text-blue-300 rounded-full">Processing</span>
124
+ </div>
125
+ <div class="w-full bg-gray-700 rounded-full h-2 mb-1">
126
+ <div class="bg-blue-400 h-2 rounded-full" style="width: 65%"></div>
127
+ </div>
128
+ <div class="flex justify-between text-xs text-gray-400">
129
+ <span>Kyber-768: Active</span>
130
+ <span>65%</span>
131
+ </div>
132
+ </div>
133
+
134
+ <div class="p-4 bg-gray-700/30 rounded-lg">
135
+ <div class="flex justify-between items-center mb-2">
136
+ <span class="font-medium">Ledger Node</span>
137
+ <span class="text-xs px-2 py-1 bg-green-900/50 text-green-300 rounded-full">Synced</span>
138
+ </div>
139
+ <div class="w-full bg-gray-700 rounded-full h-2 mb-1">
140
+ <div class="bg-purple-400 h-2 rounded-full" style="width: 100%"></div>
141
+ </div>
142
+ <div class="flex justify-between text-xs text-gray-400">
143
+ <span>Block Height: #284,921</span>
144
+ <span>100%</span>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </main>
151
+
152
+ <custom-footer></custom-footer>
153
+
154
+ <script src="components/navbar.js"></script>
155
+ <script src="components/footer.js"></script>
156
+ <script src="script.js"></script>
157
+ <script>
158
+ feather.replace();
159
+
160
+ // Encryption chart
161
+ const encryptionCtx = document.getElementById('encryptionChart').getContext('2d');
162
+ new Chart(encryptionCtx, {
163
+ type: 'doughnut',
164
+ data: {
165
+ labels: ['Kyber-768', 'AES-256', 'Dilithium-III'],
166
+ datasets: [{
167
+ data: [35, 50, 15],
168
+ backgroundColor: ['#8b5cf6', '#3b82f6', '#10b981'],
169
+ borderWidth: 0
170
+ }]
171
+ },
172
+ options: {
173
+ cutout: '70%',
174
+ plugins: {
175
+ legend: {
176
+ display: false
177
+ }
178
+ }
179
+ }
180
+ });
181
+
182
+ // Keys chart
183
+ const keysCtx = document.getElementById('keysChart').getContext('2d');
184
+ new Chart(keysCtx, {
185
+ type: 'line',
186
+ data: {
187
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
188
+ datasets: [{
189
+ label: 'Active Keys',
190
+ data: [12, 19, 15, 8, 12, 15],
191
+ borderColor: '#8b5cf6',
192
+ backgroundColor: 'rgba(139, 92, 246, 0.1)',
193
+ fill: true,
194
+ tension: 0.3
195
+ }]
196
+ },
197
+ options: {
198
+ responsive: true,
199
+ plugins: {
200
+ legend: {
201
+ display: false
202
+ }
203
+ },
204
+ scales: {
205
+ y: {
206
+ beginAtZero: true,
207
+ grid: {
208
+ color: 'rgba(55, 65, 81, 0.5)'
209
+ }
210
+ },
211
+ x: {
212
+ grid: {
213
+ color: 'rgba(55, 65, 81, 0.5)'
214
+ }
215
+ }
216
+ }
217
+ }
218
+ });
219
+
220
+ // Ledger chart
221
+ const ledgerCtx = document.getElementById('ledgerChart').getContext('2d');
222
+ new Chart(ledgerCtx, {
223
+ type: 'bar',
224
+ data: {
225
+ labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
226
+ datasets: [{
227
+ label: 'Transactions',
228
+ data: [142, 198, 156, 187, 203, 175, 162],
229
+ backgroundColor: 'rgba(59, 130, 246, 0.7)',
230
+ borderColor: 'rgba(59, 130, 246, 1)',
231
+ borderWidth: 1
232
+ }]
233
+ },
234
+ options: {
235
+ responsive: true,
236
+ plugins: {
237
+ legend: {
238
+ display: false
239
+ }
240
+ },
241
+ scales: {
242
+ y: {
243
+ beginAtZero: true,
244
+ grid: {
245
+ color: 'rgba(55, 65, 81, 0.5)'
246
+ }
247
+ },
248
+ x: {
249
+ grid: {
250
+ color: 'rgba(55, 65, 81, 0.5)'
251
+ }
252
+ }
253
+ }
254
+ }
255
+ });
256
+ </script>
257
+ </body>
258
+ </html>