Hugging Face's logo

Spaces:
haramb3
/
cbom-builder
Running

App Files Community
gpetrizey commited on
Commit
e241f1f
·
1 Parent(s): 9b8dd5d

Add CBOM and Integrations management pages with responsive design and interactive elements

Browse files
Files changed (5) hide show
  1. analytics.html +585 -0
  2. assets.html +604 -0
  3. cboms.html +360 -0
  4. index.html +379 -19
  5. integrations.html +529 -0
analytics.html ADDED
@@ -0,0 +1,585 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Analytics Dashboard - EY Quantum Safe</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
14
+ <style>
15
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
16
+
17
+ body {
18
+ font-family: 'Inter', sans-serif;
19
+ background-color: #f9fafb;
20
+ }
21
+
22
+ .sidebar {
23
+ transition: all 0.3s ease;
24
+ }
25
+
26
+ .card-hover:hover {
27
+ transform: translateY(-2px);
28
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
29
+ }
30
+
31
+ .tab-active {
32
+ border-bottom: 3px solid #F59E0B;
33
+ color: #111827;
34
+ }
35
+
36
+ .risk-critical {
37
+ background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
38
+ border-left: 4px solid #DC2626;
39
+ }
40
+
41
+ .risk-high {
42
+ background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
43
+ border-left: 4px solid #F59E0B;
44
+ }
45
+
46
+ .risk-medium {
47
+ background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
48
+ border-left: 4px solid #3B82F6;
49
+ }
50
+
51
+ .risk-low {
52
+ background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
53
+ border-left: 4px solid #16A34A;
54
+ }
55
+
56
+ .chart-container {
57
+ position: relative;
58
+ height: 300px;
59
+ margin-bottom: 1rem;
60
+ }
61
+
62
+ .progress-bar {
63
+ transition: width 0.3s ease;
64
+ }
65
+
66
+ .metric-card {
67
+ transition: all 0.3s ease;
68
+ }
69
+
70
+ .metric-card:hover {
71
+ transform: scale(1.02);
72
+ }
73
+ </style>
74
+ </head>
75
+
76
+ <body class="flex h-screen overflow-hidden">
77
+ <!-- Sidebar -->
78
+ <div class="sidebar bg-gray-900 text-white w-64 flex-shrink-0 flex flex-col">
79
+ <div class="p-4 border-b border-gray-700">
80
+ <div class="flex items-center space-x-3">
81
+ <div class="w-10 h-10 rounded-full bg-yellow-400 flex items-center justify-center">
82
+ <i data-feather="shield" class="text-gray-900"></i>
83
+ </div>
84
+ <h1 class="text-xl font-bold">EY Quantum Safe</h1>
85
+ </div>
86
+ </div>
87
+
88
+ <nav class="flex-1 overflow-y-auto p-4 space-y-1">
89
+ <a href="index.html"
90
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
91
+ <i data-feather="layout" class="w-5 h-5"></i>
92
+ <span>Dashboard</span>
93
+ </a>
94
+ <a href="cboms.html"
95
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
96
+ <i data-feather="file-text" class="w-5 h-5"></i>
97
+ <span>CBOMs</span>
98
+ </a>
99
+ <a href="assets.html"
100
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
101
+ <i data-feather="lock" class="w-5 h-5"></i>
102
+ <span>Assets</span>
103
+ </a>
104
+ <a href="integrations.html"
105
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
106
+ <i data-feather="link" class="w-5 h-5"></i>
107
+ <span>Integrations</span>
108
+ </a>
109
+ <a href="analytics.html" class="flex items-center space-x-3 p-3 rounded-lg bg-gray-800 text-yellow-400">
110
+ <i data-feather="bar-chart-2" class="w-5 h-5"></i>
111
+ <span>Analytics</span>
112
+ </a>
113
+ </nav>
114
+
115
+ <div class="p-4 border-t border-gray-700">
116
+ <div class="flex items-center space-x-3">
117
+ <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">
118
+ <i data-feather="user" class="text-gray-300"></i>
119
+ </div>
120
+ <div>
121
+ <p class="text-sm font-medium">Josep Mateu</p>
122
+ <p class="text-xs text-gray-400">Administrator</p>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Main Content -->
129
+ <div class="flex-1 flex flex-col overflow-hidden">
130
+ <!-- Top Navigation -->
131
+ <header class="bg-white border-b border-gray-200 flex items-center justify-between p-4">
132
+ <div class="flex items-center space-x-4">
133
+ <button class="md:hidden text-gray-500">
134
+ <i data-feather="menu"></i>
135
+ </button>
136
+ <h2 class="text-xl font-semibold text-gray-800">Analytics Dashboard</h2>
137
+ </div>
138
+
139
+ <div class="flex items-center space-x-4">
140
+ <div class="relative">
141
+ <i data-feather="search"
142
+ class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
143
+ <input type="text" placeholder="Search analytics..."
144
+ class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
145
+ </div>
146
+ <button
147
+ class="px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg font-medium hover:bg-yellow-500 transition-colors">
148
+ <i data-feather="download" class="w-4 h-4 inline mr-2"></i>
149
+ Export Report
150
+ </button>
151
+ </div>
152
+ </header>
153
+
154
+ <!-- Main Content Area -->
155
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
156
+ <!-- Tabs Navigation -->
157
+ <div class="bg-white rounded-xl shadow-sm mb-6">
158
+ <div class="flex border-b border-gray-200 overflow-x-auto">
159
+ <button class="px-6 py-4 font-medium tab-active">Overview</button>
160
+ <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Quantum Risk</button>
161
+ <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Asset Analysis</button>
162
+ <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Dependencies</button>
163
+ <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Trends</button>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Analytics Overview -->
168
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
169
+ <!-- Total Risk Score -->
170
+ <div class="bg-white rounded-xl shadow-sm p-6 metric-card">
171
+ <div class="flex items-center justify-between">
172
+ <div>
173
+ <p class="text-sm font-medium text-gray-500">Overall Risk Score</p>
174
+ <p class="text-3xl font-bold mt-1 text-red-600">7.2/10</p>
175
+ </div>
176
+ <div class="p-3 rounded-lg bg-red-50 text-red-600">
177
+ <i data-feather="alert-triangle" class="w-6 h-6"></i>
178
+ </div>
179
+ </div>
180
+ <div class="mt-4">
181
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
182
+ <span>Risk Level</span>
183
+ <span>72%</span>
184
+ </div>
185
+ <div class="w-full bg-gray-200 rounded-full h-2">
186
+ <div class="bg-red-500 h-2 rounded-full progress-bar" style="width: 72%"></div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Quantum Vulnerable Assets -->
192
+ <div class="bg-white rounded-xl shadow-sm p-6 metric-card">
193
+ <div class="flex items-center justify-between">
194
+ <div>
195
+ <p class="text-sm font-medium text-gray-500">Quantum Vulnerable</p>
196
+ <p class="text-3xl font-bold mt-1 text-yellow-600">342</p>
197
+ </div>
198
+ <div class="p-3 rounded-lg bg-yellow-50 text-yellow-600">
199
+ <i data-feather="zap" class="w-6 h-6"></i>
200
+ </div>
201
+ </div>
202
+ <div class="mt-4">
203
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
204
+ <span>Of 1,284 total assets</span>
205
+ <span>27%</span>
206
+ </div>
207
+ <div class="w-full bg-gray-200 rounded-full h-2">
208
+ <div class="bg-yellow-500 h-2 rounded-full progress-bar" style="width: 27%"></div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Migration Priority -->
214
+ <div class="bg-white rounded-xl shadow-sm p-6 metric-card">
215
+ <div class="flex items-center justify-between">
216
+ <div>
217
+ <p class="text-sm font-medium text-gray-500">Migration Priority</p>
218
+ <p class="text-3xl font-bold mt-1 text-blue-600">156</p>
219
+ </div>
220
+ <div class="p-3 rounded-lg bg-blue-50 text-blue-600">
221
+ <i data-feather="trending-up" class="w-6 h-6"></i>
222
+ </div>
223
+ </div>
224
+ <div class="mt-4">
225
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
226
+ <span>Critical/High priority</span>
227
+ <span>46%</span>
228
+ </div>
229
+ <div class="w-full bg-gray-200 rounded-full h-2">
230
+ <div class="bg-blue-500 h-2 rounded-full progress-bar" style="width: 46%"></div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Compliance Status -->
236
+ <div class="bg-white rounded-xl shadow-sm p-6 metric-card">
237
+ <div class="flex items-center justify-between">
238
+ <div>
239
+ <p class="text-sm font-medium text-gray-500">Compliance Score</p>
240
+ <p class="text-3xl font-bold mt-1 text-green-600">8.4/10</p>
241
+ </div>
242
+ <div class="p-3 rounded-lg bg-green-50 text-green-600">
243
+ <i data-feather="check-circle" class="w-6 h-6"></i>
244
+ </div>
245
+ </div>
246
+ <div class="mt-4">
247
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
248
+ <span>Standards met</span>
249
+ <span>84%</span>
250
+ </div>
251
+ <div class="w-full bg-gray-200 rounded-full h-2">
252
+ <div class="bg-green-500 h-2 rounded-full progress-bar" style="width: 84%"></div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Main Analytics Grid -->
259
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
260
+ <!-- Left Column - Charts -->
261
+ <div class="lg:col-span-2 space-y-6">
262
+ <!-- Risk Distribution Chart -->
263
+ <div class="bg-white rounded-xl shadow-sm p-6">
264
+ <div class="flex items-center justify-between mb-4">
265
+ <h3 class="font-semibold text-lg">Risk Distribution by Asset Type</h3>
266
+ <div class="flex space-x-2">
267
+ <button class="px-3 py-1 text-sm bg-gray-100 rounded-lg hover:bg-gray-200">
268
+ <i data-feather="download" class="w-4 h-4"></i>
269
+ </button>
270
+ <button class="px-3 py-1 text-sm bg-gray-100 rounded-lg hover:bg-gray-200">
271
+ <i data-feather="maximize" class="w-4 h-4"></i>
272
+ </button>
273
+ </div>
274
+ </div>
275
+ <div class="chart-container">
276
+ <canvas id="riskChart"></canvas>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Quantum Timeline Chart -->
281
+ <div class="bg-white rounded-xl shadow-sm p-6">
282
+ <div class="flex items-center justify-between mb-4">
283
+ <h3 class="font-semibold text-lg">Quantum Threat Timeline</h3>
284
+ <div class="flex space-x-2">
285
+ <select class="px-3 py-1 text-sm border border-gray-300 rounded-lg">
286
+ <option>5 Year Horizon</option>
287
+ <option>10 Year Horizon</option>
288
+ <option>20 Year Horizon</option>
289
+ </select>
290
+ </div>
291
+ </div>
292
+ <div class="chart-container">
293
+ <canvas id="quantumTimelineChart"></canvas>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- Asset Performance Trends -->
298
+ <div class="bg-white rounded-xl shadow-sm p-6">
299
+ <div class="flex items-center justify-between mb-4">
300
+ <h3 class="font-semibold text-lg">Asset Discovery Trends</h3>
301
+ <div class="flex space-x-2">
302
+ <button
303
+ class="px-3 py-1 text-sm bg-yellow-400 text-gray-900 rounded-lg hover:bg-yellow-500">
304
+ Last 30 days
305
+ </button>
306
+ <button class="px-3 py-1 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">
307
+ Last 90 days
308
+ </button>
309
+ </div>
310
+ </div>
311
+ <div class="chart-container">
312
+ <canvas id="trendsChart"></canvas>
313
+ </div>
314
+ </div>
315
+ </div>
316
+
317
+ <!-- Right Column - Analytics Cards -->
318
+ <div class="space-y-6">
319
+ <!-- Critical Findings -->
320
+ <div class="bg-white rounded-xl shadow-sm p-6">
321
+ <h3 class="font-semibold text-lg mb-4">Critical Findings</h3>
322
+ <div class="space-y-3">
323
+ <div class="p-4 rounded-lg risk-critical">
324
+ <div class="flex items-start space-x-3">
325
+ <i data-feather="alert-circle" class="w-5 h-5 text-red-600 mt-0.5"></i>
326
+ <div>
327
+ <p class="font-medium text-red-800">SHA-1 Still in Use</p>
328
+ <p class="text-sm text-red-600">Found in 23 certificates</p>
329
+ <p class="text-xs text-red-500 mt-1">Immediate replacement required</p>
330
+ </div>
331
+ </div>
332
+ </div>
333
+
334
+ <div class="p-4 rounded-lg risk-high">
335
+ <div class="flex items-start space-x-3">
336
+ <i data-feather="clock" class="w-5 h-5 text-yellow-600 mt-0.5"></i>
337
+ <div>
338
+ <p class="font-medium text-yellow-800">RSA-1024 Keys</p>
339
+ <p class="text-sm text-yellow-600">87 keys need upgrade</p>
340
+ <p class="text-xs text-yellow-500 mt-1">Upgrade by Q2 2025</p>
341
+ </div>
342
+ </div>
343
+ </div>
344
+
345
+ <div class="p-4 rounded-lg risk-medium">
346
+ <div class="flex items-start space-x-3">
347
+ <i data-feather="info" class="w-5 h-5 text-blue-600 mt-0.5"></i>
348
+ <div>
349
+ <p class="font-medium text-blue-800">TLS 1.2 Usage</p>
350
+ <p class="text-sm text-blue-600">134 implementations found</p>
351
+ <p class="text-xs text-blue-500 mt-1">Plan TLS 1.3 migration</p>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <!-- CBOM Health Score -->
359
+ <div class="bg-white rounded-xl shadow-sm p-6">
360
+ <h3 class="font-semibold text-lg mb-4">CBOM Health Score</h3>
361
+ <div class="text-center mb-4">
362
+ <div class="relative inline-flex items-center justify-center w-32 h-32">
363
+ <svg class="w-32 h-32 transform -rotate-90">
364
+ <circle cx="64" cy="64" r="56" stroke="#e5e7eb" stroke-width="8" fill="none">
365
+ </circle>
366
+ <circle cx="64" cy="64" r="56" stroke="#f59e0b" stroke-width="8" fill="none"
367
+ stroke-dasharray="351.86" stroke-dashoffset="105.56" stroke-linecap="round">
368
+ </circle>
369
+ </svg>
370
+ <div class="absolute text-center">
371
+ <span class="text-2xl font-bold text-gray-800">7.2</span>
372
+ <span class="text-sm text-gray-500 block">/ 10</span>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ <div class="space-y-3">
377
+ <div class="flex justify-between items-center">
378
+ <span class="text-sm text-gray-600">Asset Coverage</span>
379
+ <span class="text-sm font-medium">92%</span>
380
+ </div>
381
+ <div class="flex justify-between items-center">
382
+ <span class="text-sm text-gray-600">Risk Assessment</span>
383
+ <span class="text-sm font-medium">78%</span>
384
+ </div>
385
+ <div class="flex justify-between items-center">
386
+ <span class="text-sm text-gray-600">Compliance</span>
387
+ <span class="text-sm font-medium">84%</span>
388
+ </div>
389
+ <div class="flex justify-between items-center">
390
+ <span class="text-sm text-gray-600">Dependencies</span>
391
+ <span class="text-sm font-medium">67%</span>
392
+ </div>
393
+ </div>
394
+ </div>
395
+
396
+ <!-- Integration Status -->
397
+ <div class="bg-white rounded-xl shadow-sm p-6">
398
+ <h3 class="font-semibold text-lg mb-4">Data Sources</h3>
399
+ <div class="space-y-3">
400
+ <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
401
+ <div class="flex items-center space-x-3">
402
+ <div class="p-2 rounded-lg bg-green-100 text-green-600">
403
+ <i data-feather="cpu" class="w-4 h-4"></i>
404
+ </div>
405
+ <div>
406
+ <span class="font-medium text-sm">Venafi</span>
407
+ <p class="text-xs text-gray-500">247 certificates</p>
408
+ </div>
409
+ </div>
410
+ <div class="w-3 h-3 bg-green-500 rounded-full"></div>
411
+ </div>
412
+
413
+ <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
414
+ <div class="flex items-center space-x-3">
415
+ <div class="p-2 rounded-lg bg-blue-100 text-blue-600">
416
+ <i data-feather="server" class="w-4 h-4"></i>
417
+ </div>
418
+ <div>
419
+ <span class="font-medium text-sm">Tanium</span>
420
+ <p class="text-xs text-gray-500">1,842 assets</p>
421
+ </div>
422
+ </div>
423
+ <div class="w-3 h-3 bg-green-500 rounded-full"></div>
424
+ </div>
425
+
426
+ <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
427
+ <div class="flex items-center space-x-3">
428
+ <div class="p-2 rounded-lg bg-yellow-100 text-yellow-600">
429
+ <i data-feather="shield" class="w-4 h-4"></i>
430
+ </div>
431
+ <div>
432
+ <span class="font-medium text-sm">SandboxAQ</span>
433
+ <p class="text-xs text-gray-500">Risk analysis</p>
434
+ </div>
435
+ </div>
436
+ <div class="w-3 h-3 bg-red-500 rounded-full"></div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+
441
+ <!-- Quick Actions -->
442
+ <div class="bg-white rounded-xl shadow-sm p-6">
443
+ <h3 class="font-semibold text-lg mb-4">Quick Actions</h3>
444
+ <div class="space-y-2">
445
+ <button
446
+ class="w-full flex items-center space-x-3 p-3 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors">
447
+ <div class="p-2 rounded-lg bg-red-100 text-red-600">
448
+ <i data-feather="zap" class="w-4 h-4"></i>
449
+ </div>
450
+ <span class="text-sm font-medium">Run Quantum Assessment</span>
451
+ </button>
452
+ <button
453
+ class="w-full flex items-center space-x-3 p-3 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors">
454
+ <div class="p-2 rounded-lg bg-blue-100 text-blue-600">
455
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
456
+ </div>
457
+ <span class="text-sm font-medium">Refresh Asset Data</span>
458
+ </button>
459
+ <button
460
+ class="w-full flex items-center space-x-3 p-3 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors">
461
+ <div class="p-2 rounded-lg bg-green-100 text-green-600">
462
+ <i data-feather="file-text" class="w-4 h-4"></i>
463
+ </div>
464
+ <span class="text-sm font-medium">Generate Report</span>
465
+ </button>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </main>
471
+ </div>
472
+
473
+ <script>
474
+ AOS.init();
475
+ feather.replace();
476
+
477
+ // Tab switching functionality
478
+ document.querySelectorAll('.flex button').forEach(button => {
479
+ button.addEventListener('click', function () {
480
+ document.querySelectorAll('.flex button').forEach(btn => {
481
+ btn.classList.remove('tab-active');
482
+ btn.classList.add('text-gray-500', 'hover:text-gray-700');
483
+ });
484
+ this.classList.add('tab-active');
485
+ this.classList.remove('text-gray-500', 'hover:text-gray-700');
486
+ });
487
+ });
488
+
489
+ // Chart configurations
490
+ const chartConfig = {
491
+ responsive: true,
492
+ maintainAspectRatio: false,
493
+ plugins: {
494
+ legend: {
495
+ position: 'bottom',
496
+ }
497
+ }
498
+ };
499
+
500
+ // Risk Distribution Chart
501
+ const riskCtx = document.getElementById('riskChart').getContext('2d');
502
+ new Chart(riskCtx, {
503
+ type: 'doughnut',
504
+ data: {
505
+ labels: ['Critical', 'High', 'Medium', 'Low'],
506
+ datasets: [{
507
+ data: [154, 342, 437, 351],
508
+ backgroundColor: ['#DC2626', '#F59E0B', '#3B82F6', '#16A34A'],
509
+ borderWidth: 0
510
+ }]
511
+ },
512
+ options: chartConfig
513
+ });
514
+
515
+ // Quantum Timeline Chart
516
+ const quantumCtx = document.getElementById('quantumTimelineChart').getContext('2d');
517
+ new Chart(quantumCtx, {
518
+ type: 'line',
519
+ data: {
520
+ labels: ['2025', '2027', '2029', '2031', '2033', '2035'],
521
+ datasets: [{
522
+ label: 'Quantum Threat Level',
523
+ data: [2.1, 3.4, 5.2, 6.8, 8.1, 9.3],
524
+ borderColor: '#F59E0B',
525
+ backgroundColor: 'rgba(245, 158, 11, 0.1)',
526
+ fill: true,
527
+ tension: 0.4
528
+ }, {
529
+ label: 'Migration Progress',
530
+ data: [0, 15, 35, 58, 75, 92],
531
+ borderColor: '#16A34A',
532
+ backgroundColor: 'rgba(22, 163, 74, 0.1)',
533
+ fill: true,
534
+ tension: 0.4
535
+ }]
536
+ },
537
+ options: {
538
+ ...chartConfig,
539
+ scales: {
540
+ y: {
541
+ beginAtZero: true,
542
+ max: 100
543
+ }
544
+ }
545
+ }
546
+ });
547
+
548
+ // Trends Chart
549
+ const trendsCtx = document.getElementById('trendsChart').getContext('2d');
550
+ new Chart(trendsCtx, {
551
+ type: 'bar',
552
+ data: {
553
+ labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
554
+ datasets: [{
555
+ label: 'New Assets',
556
+ data: [42, 38, 56, 31],
557
+ backgroundColor: '#3B82F6'
558
+ }, {
559
+ label: 'Risk Assessments',
560
+ data: [28, 45, 33, 52],
561
+ backgroundColor: '#F59E0B'
562
+ }, {
563
+ label: 'Migrations',
564
+ data: [15, 23, 28, 19],
565
+ backgroundColor: '#16A34A'
566
+ }]
567
+ },
568
+ options: chartConfig
569
+ });
570
+
571
+ // Animate progress bars on load
572
+ document.addEventListener('DOMContentLoaded', function () {
573
+ const progressBars = document.querySelectorAll('.progress-bar');
574
+ progressBars.forEach(bar => {
575
+ const width = bar.style.width;
576
+ bar.style.width = '0%';
577
+ setTimeout(() => {
578
+ bar.style.width = width;
579
+ }, 500);
580
+ });
581
+ });
582
+ </script>
583
+ </body>
584
+
585
+ </html>
assets.html ADDED
@@ -0,0 +1,604 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Assets Management - EY Quantum Safe</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
15
+
16
+ body {
17
+ font-family: 'Inter', sans-serif;
18
+ background-color: #f9fafb;
19
+ }
20
+
21
+ .sidebar {
22
+ transition: all 0.3s ease;
23
+ }
24
+
25
+ .card-hover:hover {
26
+ transform: translateY(-2px);
27
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
28
+ }
29
+
30
+ .tab-active {
31
+ border-bottom: 3px solid #F59E0B;
32
+ color: #111827;
33
+ }
34
+
35
+ .risk-high {
36
+ border-left: 4px solid #EF4444;
37
+ }
38
+
39
+ .risk-medium {
40
+ border-left: 4px solid #F59E0B;
41
+ }
42
+
43
+ .risk-low {
44
+ border-left: 4px solid #10B981;
45
+ }
46
+
47
+ .table-container {
48
+ max-height: 600px;
49
+ overflow-y: auto;
50
+ }
51
+
52
+ .table-container::-webkit-scrollbar {
53
+ width: 6px;
54
+ }
55
+
56
+ .table-container::-webkit-scrollbar-track {
57
+ background: #f1f1f1;
58
+ }
59
+
60
+ .table-container::-webkit-scrollbar-thumb {
61
+ background: #c1c1c1;
62
+ border-radius: 3px;
63
+ }
64
+
65
+ .table-container::-webkit-scrollbar-thumb:hover {
66
+ background: #a8a8a8;
67
+ }
68
+ </style>
69
+ </head>
70
+
71
+ <body class="flex h-screen overflow-hidden">
72
+ <!-- Sidebar -->
73
+ <div class="sidebar bg-gray-900 text-white w-64 flex-shrink-0 flex flex-col">
74
+ <div class="p-4 border-b border-gray-700">
75
+ <div class="flex items-center space-x-3">
76
+ <div class="w-10 h-10 rounded-full bg-yellow-400 flex items-center justify-center">
77
+ <i data-feather="shield" class="text-gray-900"></i>
78
+ </div>
79
+ <h1 class="text-xl font-bold">EY Quantum Safe</h1>
80
+ </div>
81
+ </div>
82
+
83
+ <nav class="flex-1 overflow-y-auto p-4 space-y-1">
84
+ <a href="index.html"
85
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
86
+ <i data-feather="layout" class="w-5 h-5"></i>
87
+ <span>Dashboard</span>
88
+ </a>
89
+ <a href="cboms.html"
90
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
91
+ <i data-feather="file-text" class="w-5 h-5"></i>
92
+ <span>CBOMs</span>
93
+ </a>
94
+ <a href="assets.html" class="flex items-center space-x-3 p-3 rounded-lg bg-gray-800 text-yellow-400">
95
+ <i data-feather="lock" class="w-5 h-5"></i>
96
+ <span>Assets</span>
97
+ </a>
98
+ <a href="integrations.html"
99
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
100
+ <i data-feather="link" class="w-5 h-5"></i>
101
+ <span>Integrations</span>
102
+ </a>
103
+ <a href="analytics.html"
104
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
105
+ <i data-feather="bar-chart-2" class="w-5 h-5"></i>
106
+ <span>Analytics</span>
107
+ </a>
108
+ </nav>
109
+
110
+ <div class="p-4 border-t border-gray-700">
111
+ <div class="flex items-center space-x-3">
112
+ <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">
113
+ <i data-feather="user" class="text-gray-300"></i>
114
+ </div>
115
+ <div>
116
+ <p class="text-sm font-medium">Guillem Pétriz</p>
117
+ <p class="text-xs text-gray-400">Administrator</p>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Main Content -->
124
+ <div class="flex-1 flex flex-col overflow-hidden">
125
+ <!-- Top Navigation -->
126
+ <header class="bg-white border-b border-gray-200 flex items-center justify-between p-4">
127
+ <div class="flex items-center space-x-4">
128
+ <button class="md:hidden text-gray-500">
129
+ <i data-feather="menu"></i>
130
+ </button>
131
+ <h2 class="text-xl font-semibold text-gray-800">Assets Management</h2>
132
+ </div>
133
+
134
+ <div class="flex items-center space-x-4">
135
+ <div class="relative">
136
+ <i data-feather="search"
137
+ class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
138
+ <input type="text" placeholder="Search assets..."
139
+ class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
140
+ </div>
141
+ <button
142
+ class="px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg font-medium hover:bg-yellow-500 transition-colors">
143
+ <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
144
+ Add Asset
145
+ </button>
146
+ </div>
147
+ </header>
148
+
149
+ <!-- Main Content Area -->
150
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
151
+ <!-- Tabs Navigation -->
152
+ <div class="bg-white rounded-xl shadow-sm mb-6">
153
+ <div class="flex border-b border-gray-200 overflow-x-auto">
154
+ <button class="px-6 py-4 font-medium tab-active">Asset List</button>
155
+ <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Algorithms</button>
156
+ <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Protocols</button>
157
+ <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Certificates</button>
158
+ <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Crypto Materials</button>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Filters and Controls -->
163
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
164
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
165
+ <div>
166
+ <label class="block text-sm font-medium text-gray-700 mb-2">Risk Level</label>
167
+ <select
168
+ class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
169
+ <option value="">All Levels</option>
170
+ <option value="high">High Risk</option>
171
+ <option value="medium">Medium Risk</option>
172
+ <option value="low">Low Risk</option>
173
+ </select>
174
+ </div>
175
+ <div>
176
+ <label class="block text-sm font-medium text-gray-700 mb-2">Quantum Vulnerable</label>
177
+ <select
178
+ class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
179
+ <option value="">All</option>
180
+ <option value="true">Vulnerable</option>
181
+ <option value="false">Secure</option>
182
+ </select>
183
+ </div>
184
+ <div>
185
+ <label class="block text-sm font-medium text-gray-700 mb-2">Asset Type</label>
186
+ <select
187
+ class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
188
+ <option value="">All Types</option>
189
+ <option value="algorithm">Algorithm</option>
190
+ <option value="protocol">Protocol</option>
191
+ <option value="certificate">Certificate</option>
192
+ <option value="crypto-material">Crypto Material</option>
193
+ </select>
194
+ </div>
195
+ <div>
196
+ <label class="block text-sm font-medium text-gray-700 mb-2">CBOM</label>
197
+ <select
198
+ class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
199
+ <option value="">All CBOMs</option>
200
+ <option value="enterprise">Enterprise Web App</option>
201
+ <option value="payment">Payment Gateway</option>
202
+ <option value="legacy">Legacy System</option>
203
+ </select>
204
+ </div>
205
+ </div>
206
+
207
+ <div class="flex items-center justify-between">
208
+ <div class="flex items-center space-x-4">
209
+ <button
210
+ class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
211
+ <i data-feather="filter" class="w-4 h-4 inline mr-2"></i>
212
+ Apply Filters
213
+ </button>
214
+ <button
215
+ class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
216
+ <i data-feather="refresh-cw" class="w-4 h-4 inline mr-2"></i>
217
+ Reset
218
+ </button>
219
+ </div>
220
+
221
+ <div class="flex items-center space-x-2">
222
+ <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg">
223
+ <i data-feather="download" class="w-5 h-5"></i>
224
+ </button>
225
+ <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg">
226
+ <i data-feather="settings" class="w-5 h-5"></i>
227
+ </button>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <!-- Statistics Dashboard -->
233
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
234
+ <div class="bg-white rounded-xl shadow-sm p-4 text-center">
235
+ <div
236
+ class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-3">
237
+ <i data-feather="lock" class="w-6 h-6"></i>
238
+ </div>
239
+ <p class="text-2xl font-bold text-gray-800">1,284</p>
240
+ <p class="text-sm text-gray-600">Total Assets</p>
241
+ </div>
242
+
243
+ <div class="bg-white rounded-xl shadow-sm p-4 text-center">
244
+ <div
245
+ class="w-12 h-12 bg-red-100 text-red-600 rounded-full flex items-center justify-center mx-auto mb-3">
246
+ <i data-feather="alert-triangle" class="w-6 h-6"></i>
247
+ </div>
248
+ <p class="text-2xl font-bold text-gray-800">154</p>
249
+ <p class="text-sm text-gray-600">High Risk</p>
250
+ </div>
251
+
252
+ <div class="bg-white rounded-xl shadow-sm p-4 text-center">
253
+ <div
254
+ class="w-12 h-12 bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center mx-auto mb-3">
255
+ <i data-feather="alert-circle" class="w-6 h-6"></i>
256
+ </div>
257
+ <p class="text-2xl font-bold text-gray-800">437</p>
258
+ <p class="text-sm text-gray-600">Medium Risk</p>
259
+ </div>
260
+
261
+ <div class="bg-white rounded-xl shadow-sm p-4 text-center">
262
+ <div
263
+ class="w-12 h-12 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-3">
264
+ <i data-feather="shield" class="w-6 h-6"></i>
265
+ </div>
266
+ <p class="text-2xl font-bold text-gray-800">693</p>
267
+ <p class="text-sm text-gray-600">Quantum Secure</p>
268
+ </div>
269
+ </div>
270
+
271
+ <!-- Asset Table -->
272
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden">
273
+ <div class="p-6 border-b border-gray-200">
274
+ <div class="flex items-center justify-between">
275
+ <h3 class="font-semibold text-lg">Assets</h3>
276
+ <div class="flex items-center space-x-2">
277
+ <span class="text-sm text-gray-500">1-10 of 1,284 assets</span>
278
+ <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg">
279
+ <i data-feather="chevron-left" class="w-4 h-4"></i>
280
+ </button>
281
+ <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg">
282
+ <i data-feather="chevron-right" class="w-4 h-4"></i>
283
+ </button>
284
+ </div>
285
+ </div>
286
+ </div>
287
+
288
+ <div class="table-container">
289
+ <table class="w-full">
290
+ <thead class="bg-gray-50">
291
+ <tr>
292
+ <th
293
+ class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
294
+ <input type="checkbox"
295
+ class="rounded border-gray-300 text-yellow-400 focus:ring-yellow-400">
296
+ </th>
297
+ <th
298
+ class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
299
+ Name</th>
300
+ <th
301
+ class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
302
+ Type</th>
303
+ <th
304
+ class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
305
+ Version</th>
306
+ <th
307
+ class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
308
+ Risk Level</th>
309
+ <th
310
+ class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
311
+ Quantum</th>
312
+ <th
313
+ class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
314
+ CBOM</th>
315
+ <th
316
+ class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
317
+ Actions</th>
318
+ </tr>
319
+ </thead>
320
+ <tbody class="bg-white divide-y divide-gray-200">
321
+ <tr class="hover:bg-gray-50 risk-high">
322
+ <td class="px-6 py-4 whitespace-nowrap">
323
+ <input type="checkbox"
324
+ class="rounded border-gray-300 text-yellow-400 focus:ring-yellow-400">
325
+ </td>
326
+ <td class="px-6 py-4 whitespace-nowrap">
327
+ <div class="flex items-center">
328
+ <div
329
+ class="w-8 h-8 bg-red-100 text-red-600 rounded-full flex items-center justify-center mr-3">
330
+ <i data-feather="alert-triangle" class="w-4 h-4"></i>
331
+ </div>
332
+ <div>
333
+ <div class="font-medium text-gray-900">SHA-1</div>
334
+ <div class="text-sm text-gray-500">Hash algorithm</div>
335
+ </div>
336
+ </div>
337
+ </td>
338
+ <td class="px-6 py-4 whitespace-nowrap">
339
+ <span
340
+ class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">Algorithm</span>
341
+ </td>
342
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">1.0</td>
343
+ <td class="px-6 py-4 whitespace-nowrap">
344
+ <span
345
+ class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">High</span>
346
+ </td>
347
+ <td class="px-6 py-4 whitespace-nowrap">
348
+ <span
349
+ class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">Vulnerable</span>
350
+ </td>
351
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Legacy System</td>
352
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
353
+ <div class="flex space-x-2">
354
+ <button class="text-blue-600 hover:text-blue-900">
355
+ <i data-feather="edit" class="w-4 h-4"></i>
356
+ </button>
357
+ <button class="text-red-600 hover:text-red-900">
358
+ <i data-feather="trash-2" class="w-4 h-4"></i>
359
+ </button>
360
+ </div>
361
+ </td>
362
+ </tr>
363
+
364
+ <tr class="hover:bg-gray-50 risk-medium">
365
+ <td class="px-6 py-4 whitespace-nowrap">
366
+ <input type="checkbox"
367
+ class="rounded border-gray-300 text-yellow-400 focus:ring-yellow-400">
368
+ </td>
369
+ <td class="px-6 py-4 whitespace-nowrap">
370
+ <div class="flex items-center">
371
+ <div
372
+ class="w-8 h-8 bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center mr-3">
373
+ <i data-feather="alert-circle" class="w-4 h-4"></i>
374
+ </div>
375
+ <div>
376
+ <div class="font-medium text-gray-900">TLS 1.2</div>
377
+ <div class="text-sm text-gray-500">Security protocol</div>
378
+ </div>
379
+ </div>
380
+ </td>
381
+ <td class="px-6 py-4 whitespace-nowrap">
382
+ <span
383
+ class="px-2 py-1 text-xs font-medium bg-purple-100 text-purple-800 rounded-full">Protocol</span>
384
+ </td>
385
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">1.2</td>
386
+ <td class="px-6 py-4 whitespace-nowrap">
387
+ <span
388
+ class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">Medium</span>
389
+ </td>
390
+ <td class="px-6 py-4 whitespace-nowrap">
391
+ <span
392
+ class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Secure</span>
393
+ </td>
394
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Enterprise Web App
395
+ </td>
396
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
397
+ <div class="flex space-x-2">
398
+ <button class="text-blue-600 hover:text-blue-900">
399
+ <i data-feather="edit" class="w-4 h-4"></i>
400
+ </button>
401
+ <button class="text-red-600 hover:text-red-900">
402
+ <i data-feather="trash-2" class="w-4 h-4"></i>
403
+ </button>
404
+ </div>
405
+ </td>
406
+ </tr>
407
+
408
+ <tr class="hover:bg-gray-50 risk-low">
409
+ <td class="px-6 py-4 whitespace-nowrap">
410
+ <input type="checkbox"
411
+ class="rounded border-gray-300 text-yellow-400 focus:ring-yellow-400">
412
+ </td>
413
+ <td class="px-6 py-4 whitespace-nowrap">
414
+ <div class="flex items-center">
415
+ <div
416
+ class="w-8 h-8 bg-green-100 text-green-600 rounded-full flex items-center justify-center mr-3">
417
+ <i data-feather="shield" class="w-4 h-4"></i>
418
+ </div>
419
+ <div>
420
+ <div class="font-medium text-gray-900">AES-256</div>
421
+ <div class="text-sm text-gray-500">Encryption algorithm</div>
422
+ </div>
423
+ </div>
424
+ </td>
425
+ <td class="px-6 py-4 whitespace-nowrap">
426
+ <span
427
+ class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">Algorithm</span>
428
+ </td>
429
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2.0</td>
430
+ <td class="px-6 py-4 whitespace-nowrap">
431
+ <span
432
+ class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Low</span>
433
+ </td>
434
+ <td class="px-6 py-4 whitespace-nowrap">
435
+ <span
436
+ class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Secure</span>
437
+ </td>
438
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Payment Gateway</td>
439
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
440
+ <div class="flex space-x-2">
441
+ <button class="text-blue-600 hover:text-blue-900">
442
+ <i data-feather="edit" class="w-4 h-4"></i>
443
+ </button>
444
+ <button class="text-red-600 hover:text-red-900">
445
+ <i data-feather="trash-2" class="w-4 h-4"></i>
446
+ </button>
447
+ </div>
448
+ </td>
449
+ </tr>
450
+
451
+ <!-- Additional rows would follow the same pattern -->
452
+ <tr class="hover:bg-gray-50 risk-high">
453
+ <td class="px-6 py-4 whitespace-nowrap">
454
+ <input type="checkbox"
455
+ class="rounded border-gray-300 text-yellow-400 focus:ring-yellow-400">
456
+ </td>
457
+ <td class="px-6 py-4 whitespace-nowrap">
458
+ <div class="flex items-center">
459
+ <div
460
+ class="w-8 h-8 bg-red-100 text-red-600 rounded-full flex items-center justify-center mr-3">
461
+ <i data-feather="alert-triangle" class="w-4 h-4"></i>
462
+ </div>
463
+ <div>
464
+ <div class="font-medium text-gray-900">RSA-1024</div>
465
+ <div class="text-sm text-gray-500">Asymmetric key</div>
466
+ </div>
467
+ </div>
468
+ </td>
469
+ <td class="px-6 py-4 whitespace-nowrap">
470
+ <span
471
+ class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded-full">Crypto
472
+ Material</span>
473
+ </td>
474
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">1.0</td>
475
+ <td class="px-6 py-4 whitespace-nowrap">
476
+ <span
477
+ class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">High</span>
478
+ </td>
479
+ <td class="px-6 py-4 whitespace-nowrap">
480
+ <span
481
+ class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">Vulnerable</span>
482
+ </td>
483
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Legacy System</td>
484
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
485
+ <div class="flex space-x-2">
486
+ <button class="text-blue-600 hover:text-blue-900">
487
+ <i data-feather="edit" class="w-4 h-4"></i>
488
+ </button>
489
+ <button class="text-red-600 hover:text-red-900">
490
+ <i data-feather="trash-2" class="w-4 h-4"></i>
491
+ </button>
492
+ </div>
493
+ </td>
494
+ </tr>
495
+
496
+ <tr class="hover:bg-gray-50 risk-low">
497
+ <td class="px-6 py-4 whitespace-nowrap">
498
+ <input type="checkbox"
499
+ class="rounded border-gray-300 text-yellow-400 focus:ring-yellow-400">
500
+ </td>
501
+ <td class="px-6 py-4 whitespace-nowrap">
502
+ <div class="flex items-center">
503
+ <div
504
+ class="w-8 h-8 bg-green-100 text-green-600 rounded-full flex items-center justify-center mr-3">
505
+ <i data-feather="shield" class="w-4 h-4"></i>
506
+ </div>
507
+ <div>
508
+ <div class="font-medium text-gray-900">ECC-256</div>
509
+ <div class="text-sm text-gray-500">Elliptic curve</div>
510
+ </div>
511
+ </div>
512
+ </td>
513
+ <td class="px-6 py-4 whitespace-nowrap">
514
+ <span
515
+ class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded-full">Crypto
516
+ Material</span>
517
+ </td>
518
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2.1</td>
519
+ <td class="px-6 py-4 whitespace-nowrap">
520
+ <span
521
+ class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Low</span>
522
+ </td>
523
+ <td class="px-6 py-4 whitespace-nowrap">
524
+ <span
525
+ class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Secure</span>
526
+ </td>
527
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Enterprise Web App</td>
528
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
529
+ <div class="flex space-x-2">
530
+ <button class="text-blue-600 hover:text-blue-900">
531
+ <i data-feather="edit" class="w-4 h-4"></i>
532
+ </button>
533
+ <button class="text-red-600 hover:text-red-900">
534
+ <i data-feather="trash-2" class="w-4 h-4"></i>
535
+ </button>
536
+ </div>
537
+ </td>
538
+ </tr>
539
+ </tbody>
540
+ </table>
541
+ </div>
542
+
543
+ <div class="px-6 py-4 border-t border-gray-200 bg-gray-50">
544
+ <div class="flex items-center justify-between">
545
+ <div class="flex items-center space-x-4">
546
+ <button
547
+ class="px-4 py-2 bg-red-100 text-red-700 rounded-lg text-sm hover:bg-red-200 transition-colors">
548
+ <i data-feather="trash-2" class="w-4 h-4 inline mr-2"></i>
549
+ Delete Selected
550
+ </button>
551
+ <button
552
+ class="px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg text-sm hover:bg-yellow-500 transition-colors">
553
+ <i data-feather="edit" class="w-4 h-4 inline mr-2"></i>
554
+ Edit Selected
555
+ </button>
556
+ </div>
557
+
558
+ <div class="flex items-center space-x-4">
559
+ <button
560
+ class="px-4 py-2 border border-gray-300 rounded-lg text-sm hover:bg-gray-50 transition-colors">
561
+ <i data-feather="download" class="w-4 h-4 inline mr-2"></i>
562
+ Export to CSV
563
+ </button>
564
+ <button
565
+ class="px-4 py-2 border border-gray-300 rounded-lg text-sm hover:bg-gray-50 transition-colors">
566
+ <i data-feather="download" class="w-4 h-4 inline mr-2"></i>
567
+ Export to JSON
568
+ </button>
569
+ </div>
570
+ </div>
571
+ </div>
572
+ </div>
573
+ </main>
574
+ </div>
575
+
576
+ <script>
577
+ AOS.init();
578
+ feather.replace();
579
+
580
+ // Tab switching functionality
581
+ document.querySelectorAll('.flex button').forEach(button => {
582
+ button.addEventListener('click', function () {
583
+ document.querySelectorAll('.flex button').forEach(btn => {
584
+ btn.classList.remove('tab-active');
585
+ btn.classList.add('text-gray-500', 'hover:text-gray-700');
586
+ });
587
+ this.classList.add('tab-active');
588
+ this.classList.remove('text-gray-500', 'hover:text-gray-700');
589
+ });
590
+ });
591
+
592
+ // Select all checkbox functionality
593
+ const selectAll = document.querySelector('thead input[type="checkbox"]');
594
+ const rowCheckboxes = document.querySelectorAll('tbody input[type="checkbox"]');
595
+
596
+ selectAll.addEventListener('change', function () {
597
+ rowCheckboxes.forEach(checkbox => {
598
+ checkbox.checked = this.checked;
599
+ });
600
+ });
601
+ </script>
602
+ </body>
603
+
604
+ </html>
cboms.html ADDED
@@ -0,0 +1,360 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>CBOM Management - EY Quantum Safe</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
15
+
16
+ body {
17
+ font-family: 'Inter', sans-serif;
18
+ background-color: #f9fafb;
19
+ }
20
+
21
+ .sidebar {
22
+ transition: all 0.3s ease;
23
+ }
24
+
25
+ .card-hover:hover {
26
+ transform: translateY(-2px);
27
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
28
+ }
29
+
30
+ .tab-active {
31
+ border-bottom: 3px solid #F59E0B;
32
+ color: #111827;
33
+ }
34
+
35
+ .json-view {
36
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
37
+ font-size: 12px;
38
+ line-height: 1.4;
39
+ }
40
+ </style>
41
+ </head>
42
+
43
+ <body class="flex h-screen overflow-hidden">
44
+ <!-- Sidebar -->
45
+ <div class="sidebar bg-gray-900 text-white w-64 flex-shrink-0 flex flex-col">
46
+ <div class="p-4 border-b border-gray-700">
47
+ <div class="flex items-center space-x-3">
48
+ <div class="w-10 h-10 rounded-full bg-yellow-400 flex items-center justify-center">
49
+ <i data-feather="shield" class="text-gray-900"></i>
50
+ </div>
51
+ <h1 class="text-xl font-bold">EY Quantum Safe</h1>
52
+ </div>
53
+ </div>
54
+
55
+ <nav class="flex-1 overflow-y-auto p-4 space-y-1">
56
+ <a href="index.html"
57
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
58
+ <i data-feather="layout" class="w-5 h-5"></i>
59
+ <span>Dashboard</span>
60
+ </a>
61
+ <a href="cboms.html" class="flex items-center space-x-3 p-3 rounded-lg bg-gray-800 text-yellow-400">
62
+ <i data-feather="file-text" class="w-5 h-5"></i>
63
+ <span>CBOMs</span>
64
+ </a>
65
+ <a href="assets.html"
66
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
67
+ <i data-feather="lock" class="w-5 h-5"></i>
68
+ <span>Assets</span>
69
+ </a>
70
+ <a href="integrations.html"
71
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
72
+ <i data-feather="link" class="w-5 h-5"></i>
73
+ <span>Integrations</span>
74
+ </a>
75
+ <a href="analytics.html"
76
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
77
+ <i data-feather="bar-chart-2" class="w-5 h-5"></i>
78
+ <span>Analytics</span>
79
+ </a>
80
+ </nav>
81
+
82
+ <div class="p-4 border-t border-gray-700">
83
+ <div class="flex items-center space-x-3">
84
+ <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">
85
+ <i data-feather="user" class="text-gray-300"></i>
86
+ </div>
87
+ <div>
88
+ <p class="极客时间text-sm font-medium">Josep Mateu</p>
89
+ <p class="text-xs text-gray-400">Administrator</p>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- Main Content -->
96
+ <div class="flex-1 flex flex-col overflow-hidden">
97
+ <!-- Top Navigation -->
98
+ <header class="bg-white border-b border-gray-200 flex items-center justify-between p-4">
99
+ <div class="flex items-center space-x-4">
100
+ <button class="md:hidden text-gray-500">
101
+ <i data-feather="menu"></i>
102
+ </button>
103
+ <h2 class="text-xl font-semibold text-gray-800">CBOM Management</h2>
104
+ </div>
105
+
106
+ <div class="flex items-center space-x-4">
107
+ <div class="relative">
108
+ <i data-feather="search"
109
+ class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
110
+ <input type="text" placeholder="Search CBOMs..."
111
+ class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
112
+ </div>
113
+ <button
114
+ class="px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg font-medium hover:bg-yellow-500 transition-colors">
115
+ <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
116
+ New CBOM
117
+ </button>
118
+ </div>
119
+ </header>
120
+
121
+ <!-- Main Content Area -->
122
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
123
+ <!-- Tabs Navigation -->
124
+ <div class="bg-white rounded-xl shadow-sm mb-6">
125
+ <div class="flex border-b border-gray-200">
126
+ <button class="px-6 py-4 font-medium tab-active">Overview</button>
127
+ <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Create New</button>
128
+ <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Import</button>
129
+ <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Code Viewer</button>
130
+ <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Files</button>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- CBOM Overview -->
135
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
136
+ <!-- Left Column - CBOM List -->
137
+ <div class="lg:col-span-1">
138
+ <div class="bg-white rounded-xl shadow-sm p-6">
139
+ <h3 class="font-semibold text-lg mb-4">Active CBOMs</h3>
140
+ <div class="space-y-3">
141
+ <div class="p-4 border border-gray-200 rounded-lg hover:border-yellow-400 cursor-pointer">
142
+ <div class="flex items-center justify-between mb-2">
143
+ <h4 class="font-medium">Enterprise Web App</h4>
144
+ <span
145
+ class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span>
146
+ </div>
147
+ <p class="text-sm text-gray-500">Version 2.1.0 • 342 assets</p>
148
+ <p class="text-xs text-gray-400 mt-2">Last modified: 2 hours ago</p>
149
+ </div>
150
+
151
+ <div class="p-4 border border-gray-200 rounded-lg hover:border-yellow-400 cursor-pointer">
152
+ <div class="flex items-center justify-between mb-2">
153
+ <h4 class="font-medium">Payment Gateway</h4>
154
+ <span
155
+ class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span>
156
+ </div>
157
+ <p class="text-sm text-gray-500">Version 1.0.3 • 189 assets</p>
158
+ <p class="text-xs text-gray-400 mt-2">Last modified: 5 hours ago</p>
159
+ </div>
160
+
161
+ <div class="p-4 border border-gray-200 rounded-lg hover:border-yellow-400 cursor-pointer">
162
+ <div class="flex items-center justify-between mb-2">
163
+ <h4 class="font-medium">Legacy System</h4>
164
+ <span
165
+ class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Draft</span>
166
+ </div>
167
+ <p class="text-sm text-gray-500">Version 0.9.1 • 87 assets</p>
168
+ <p class="text-xs text-gray-400 mt-2">Last modified: 1 day ago</p>
169
+ </div>
170
+
171
+ <div class="p-4 border border-gray-200 rounded-lg hover:border-yellow-400 cursor-pointer">
172
+ <div class="flex items-center justify-between mb-2">
173
+ <h4 class="font-medium">Mobile Banking</h4>
174
+ <span
175
+ class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Archived</span>
176
+ </div>
177
+ <p class="text-sm text-gray-500">Version 1.2.0 • 215 assets</p>
178
+ <p class="text-xs text-gray-400 mt-2">Last modified: 1 week ago</p>
179
+ </div>
180
+ </div>
181
+
182
+ <button
183
+ class="w-full mt-4 px-4 py-2 border border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-yellow-400 hover:text-yellow-600 transition-colors">
184
+ <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
185
+ Load More CBOMs
186
+ </button>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Right Column - Selected CBOM Details -->
191
+ <div class="lg:col-span-2 space-y-6">
192
+ <!-- CBOM Summary -->
193
+ <div class="bg-white rounded-xl shadow-sm p-6">
194
+ <div class="flex items-center justify-between mb-4">
195
+ <h3 class="font-semibold text-lg">Enterprise Web App</h3>
196
+ <div class="flex space-x-2">
197
+ <button class="px-3 py-1 border border-gray-300 rounded-lg text-sm hover:bg-gray-50">
198
+ <i data-feather="edit" class="w-4 h-4"></i>
199
+ </button>
200
+ <button class="px-3 py-1 border border-gray-300 rounded-lg text-sm hover:bg-gray-50">
201
+ <i data-feather="download" class="w-4 h-4"></i>
202
+ </button>
203
+ <button class="px-3 py-1 bg-red-100 text-red-700 rounded-lg text-sm hover:bg-red-200">
204
+ <i data-feather="trash-2" class="w-4 h-4"></i>
205
+ </button>
206
+ </div>
207
+ </div>
208
+
209
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
210
+ <div class="p-3 bg-gray-50 rounded-lg">
211
+ <p class="text-sm text-gray-500">Version</p>
212
+ <p class="font-medium">2.1.0</p>
213
+ </div>
214
+ <div class="p-3 bg-gray-50 rounded-lg">
215
+ <p class="text-sm text-gray-500">Author</p>
216
+ <p class="font-medium">Josep Mateu</p>
217
+ </div>
218
+ <div class="p-3 bg-gray-50 rounded-lg">
219
+ <p class="text-sm text-gray-500">Created</p>
220
+ <p class="font-medium">2025-09-16</p>
221
+ </div>
222
+ </div>
223
+
224
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-2">
225
+ <div class="text-center p-3 bg-blue-50 rounded-lg">
226
+ <p class="text-2xl font-bold text-blue-600">342</p>
227
+ <p class="text-sm text-gray-600">Total Assets</p>
228
+ </div>
229
+ <div class="text-center p-3 bg-green-50 rounded-lg">
230
+ <p class="text-2xl font-bold text-green-600">45</p>
231
+ <p class="text-sm text-gray-600">Algorithms</p>
232
+ </div>
233
+ <div class="text-center p-3 bg-purple-50 rounded-lg">
234
+ <p class="text-2xl font-bold text-purple-600">28</p>
235
+ <p class="text-sm text-gray-600">Protocols</p>
236
+ </div>
237
+ <div class="text-center p-3 bg-yellow-50 rounded-lg">
238
+ <p class="text-2xl font-bold text-yellow-600">269</p>
239
+ <p class="text-sm text-gray-600">Certificates</p>
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <!-- Quick Actions -->
245
+ <div class="bg-white rounded-xl shadow-sm p-6">
246
+ <h3 class="font-semibold text-lg mb-4">Quick Actions</h3>
247
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
248
+ <button
249
+ class="flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors">
250
+ <div class="p-3 rounded-lg bg-blue-100 text-blue-600 mb-2">
251
+ <i data-feather="bar-chart-2" class="w-6 h-6"></i>
252
+ </div>
253
+ <span class="text-sm font-medium">Analyze</span>
254
+ </button>
255
+ <button
256
+ class="flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors">
257
+ <div class="p-3 rounded-lg bg-red-100 text-red-600 mb-2">
258
+ <i data-feather="alert-triangle" class="w-6 h-6"></i>
259
+ </div>
260
+ <span class="text-sm font-medium">Risk Assess</span>
261
+ </button>
262
+ <button
263
+ class="flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors">
264
+ <div class="p-3 rounded-lg bg-green-100 text-green-600 mb-2">
265
+ <i data-feather="download" class="w-6 h-6"></i>
266
+ </div>
267
+ <span class="text-sm font-medium">Export</span>
268
+ </button>
269
+ <button
270
+ class="flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors">
271
+ <div class="p-3 rounded-lg bg-purple-100 text-purple-600 mb-2">
272
+ <i data-feather="share" class="w-6 h-6"></i>
273
+ </div>
274
+ <span class="text-sm font-medium">Share</span>
275
+ </button>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- JSON Preview -->
280
+ <div class="bg-white rounded-xl shadow-sm p-6">
281
+ <div class="flex items-center justify-between mb-4">
282
+ <h3 class="font-semibold text-lg">CBOM Preview</h3>
283
+ <div class="flex space-x-2">
284
+ <button class="px-3 py-1 text-sm bg-gray-100 rounded-lg hover:bg-gray-200">
285
+ <i data-feather="copy" class="w-4 h-4"></i>
286
+ </button>
287
+ <button class="px-3 py-1 text-sm bg-gray-100 rounded-lg hover:bg-gray-200">
288
+ <i data-feather="maximize" class="w-4 h-4"></i>
289
+ </button>
290
+ </div>
291
+ </div>
292
+
293
+ <div class="bg-gray-900 rounded-lg p-4 json-view text-gray-200 overflow-auto max-h-64">
294
+ <pre>{
295
+ "cbom": {
296
+ "version": "1.0",
297
+ "name": "Enterprise Web App",
298
+ "versionNumber": "2.1.0",
299
+ "author": "John Doe",
300
+ "created": "2024-01-15T10:30:00Z",
301
+ "components": {
302
+ "total": 342,
303
+ "algorithms": 45,
304
+ "protocols": 28,
305
+ "certificates": 269,
306
+ "cryptoMaterials": 0
307
+ },
308
+ "metadata": {
309
+ "description": "Enterprise web application cryptographic bill of materials",
310
+ "systemCriticality": "high",
311
+ "complianceRequirements": ["PCI-DSS", "GDPR", "SOX"]
312
+ }
313
+ },
314
+ "assets": [
315
+ {
316
+ "id": "alg-001",
317
+ "type": "algorithm",
318
+ "name": "AES-256",
319
+ "version": "1.0",
320
+ "strength": "256",
321
+ "implementation": "OpenSSL",
322
+ "quantumVulnerable": false
323
+ },
324
+ {
325
+ "id": "cert-001",
326
+ "type": "certificate",
327
+ "subject": "CN=example.com",
328
+ "issuer": "CN=Let's Encrypt",
329
+ "validFrom": "2024-01-01",
330
+ "validTo": "2024-12-31",
331
+ "signatureAlgorithm": "SHA256withRSA"
332
+ }
333
+ ]
334
+ }</pre>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </main>
340
+ </div>
341
+
342
+ <script>
343
+ AOS.init();
344
+ feather.replace();
345
+
346
+ // Tab switching functionality
347
+ document.querySelectorAll('.flex button').forEach(button => {
348
+ button.addEventListener('click', function () {
349
+ document.querySelectorAll('.flex button').forEach(btn => {
350
+ btn.classList.remove('tab-active');
351
+ btn.classList.add('text-gray-500', 'hover:text-gray-700');
352
+ });
353
+ this.classList.add('tab-active');
354
+ this.classList.remove('text-gray-500', 'hover:text-gray-700');
355
+ });
356
+ });
357
+ </script>
358
+ </body>
359
+
360
+ </html>
index.html CHANGED
@@ -1,19 +1,379 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>EY Quantum Safe</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
15
+
16
+ body {
17
+ font-family: 'Inter', sans-serif;
18
+ background-color: #f9fafb;
19
+ }
20
+
21
+ .sidebar {
22
+ transition: all 0.3s ease;
23
+ }
24
+
25
+ .card-hover:hover {
26
+ transform: translateY(-2px);
27
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
28
+ }
29
+
30
+ .risk-high {
31
+ border-left: 4px solid #EF4444;
32
+ }
33
+
34
+ .risk-medium {
35
+ border-left: 4px solid #F59E0B;
36
+ }
37
+
38
+ .risk-low {
39
+ border-left: 4px solid #10B981;
40
+ }
41
+ </style>
42
+ </head>
43
+
44
+ <body class="flex h-screen overflow-hidden">
45
+ <!-- Sidebar -->
46
+ <div class="sidebar bg-gray-900 text-white w-64 flex-shrink-0 flex flex-col">
47
+ <div class="p-4 border-b border-gray-700">
48
+ <div class="flex items-center space-x-3">
49
+ <div class="w-10 h-10 rounded-full bg-yellow-400 flex items-center justify-center">
50
+ <i data-feather="shield" class="text-gray-900"></i>
51
+ </div>
52
+ <h1 class="text-xl font-bold">EY Quantum Safe</h1>
53
+ </div>
54
+ </div>
55
+
56
+ <nav class="flex-1 overflow-y-auto p-4 space-y-1">
57
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-gray-800 text-yellow-400">
58
+ <i data-feather="layout" class="w-5 h-5"></i>
59
+ <span>Dashboard</span>
60
+ </a>
61
+ <a href="cboms.html"
62
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
63
+ <i data-feather="file-text" class="w-5 h-5"></i>
64
+ <span>CBOMs</span>
65
+ </a>
66
+ <a href="assets.html"
67
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
68
+ <i data-feather="lock" class="w-5 h-5"></i>
69
+ <span>Assets</span>
70
+ </a>
71
+ <a href="integrations.html"
72
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
73
+ <i data-feather="link" class="w-5 h-5"></i>
74
+ <span>Integrations</span>
75
+ </a>
76
+ <a href="analytics.html"
77
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
78
+ <i data-feather="bar-chart-2" class="w-5 h-5"></i>
79
+ <span>Analytics</span>
80
+ </a>
81
+ </nav>
82
+
83
+ <div class="p-4 border-t border-gray-700">
84
+ <div class="flex items-center space-x-3">
85
+ <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">
86
+ <i data-feather="user" class="text-gray-300"></i>
87
+ </div>
88
+ <div>
89
+ <p class="text-sm font-medium">Josep Mateu</p>
90
+ <p class="text-xs text-gray-400">Administrator</p>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Main Content -->
97
+ <div class="flex-1 flex flex-col overflow-hidden">
98
+ <!-- Top Navigation -->
99
+ <header class="bg-white border-b border-gray-200 flex items-center justify-between p-4">
100
+ <div class="flex items-center space-x-4">
101
+ <button class="md:hidden text-gray-500">
102
+ <i data-feather="menu"></i>
103
+ </button>
104
+ <h2 class="text-xl font-semibold text-gray-800">Dashboard</h2>
105
+ </div>
106
+
107
+ <div class="flex items-center space-x-4">
108
+ <div class="relative">
109
+ <i data-feather="search"
110
+ class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
111
+ <input type="text" placeholder="Search..."
112
+ class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
113
+ </div>
114
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
115
+ <i data-feather="bell"></i>
116
+ </button>
117
+ </div>
118
+ </header>
119
+
120
+ <!-- Main Content Area -->
121
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
122
+ <!-- Quick Stats -->
123
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
124
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
125
+ <div class="flex items-center justify-between">
126
+ <div>
127
+ <p class="text-sm font-medium text-gray-500">Active CBOMs</p>
128
+ <p class="text-3xl font-bold mt-1">24</p>
129
+ </div>
130
+ <div class="p-3 rounded-lg bg-yellow-50 text-yellow-600">
131
+ <i data-feather="file-text" class="w-6 h-6"></i>
132
+ </div>
133
+ </div>
134
+ <p class="text-xs text-gray-500 mt-3"><span class="text-green-500">+3</span> from last week</p>
135
+ </div>
136
+
137
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
138
+ <div class="flex items-center justify-between">
139
+ <div>
140
+ <p class="text-sm font-medium text-gray-500">Total Assets</p>
141
+ <p class="text-3xl font-bold mt-1">1,284</p>
142
+ </div>
143
+ <div class="p-3 rounded-lg bg-blue-50 text-blue-600">
144
+ <i data-feather="lock" class="w-6 h-6"></i>
145
+ </div>
146
+ </div>
147
+ <p class="text-xs text-gray-500 mt-3"><span class="text-green-500">+12%</span> from last week</p>
148
+ </div>
149
+
150
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
151
+ <div class="flex items-center justify-between">
152
+ <div>
153
+ <p class="text-sm font-medium text-gray-500">Risk Assessments</p>
154
+ <p class="text-3xl font-bold mt-1">18</p>
155
+ </div>
156
+ <div class="p-3 rounded-lg bg-red-50 text-red-600">
157
+ <i data-feather="alert-triangle" class="w-6 h-6"></i>
158
+ </div>
159
+ </div>
160
+ <p class="text-xs text-gray-500 mt-3"><span class="text-red-500">-2</span> from last week</p>
161
+ </div>
162
+
163
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
164
+ <div class="flex items-center justify-between">
165
+ <div>
166
+ <p class="text-sm font-medium text-gray-500">Integrations</p>
167
+ <p class="text-3xl font-bold mt-1">3/4</p>
168
+ </div>
169
+ <div class="p-3 rounded-lg bg-green-50 text-green-600">
170
+ <i data-feather="link" class="w-6 h-6"></i>
171
+ </div>
172
+ </div>
173
+ <p class="text-xs text-gray-500 mt-3">1 integration needs attention</p>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Main Content Grid -->
178
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
179
+ <!-- Left Column -->
180
+ <div class="lg:col-span-2 space-y-6">
181
+ <!-- Quick Actions -->
182
+ <div class="bg-white rounded-xl shadow-sm p-6">
183
+ <div class="flex items-center justify-between mb-4">
184
+ <h3 class="font-semibold text-lg">Quick Actions</h3>
185
+ <button class="text-sm text-yellow-600 hover:text-yellow-700">View All</button>
186
+ </div>
187
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
188
+ <button
189
+ class="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors">
190
+ <div class="p-3 rounded-lg bg-yellow-100 text-yellow-600">
191
+ <i data-feather="plus" class="w-5 h-5"></i>
192
+ </div>
193
+ <span class="font-medium">New CBOM</span>
194
+ </button>
195
+ <button
196
+ class="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors">
197
+ <div class="p-3 rounded-lg bg-blue-100 text-blue-600">
198
+ <i data-feather="download" class="w-5 h-5"></i>
199
+ </div>
200
+ <span class="font-medium">Import CBOM</span>
201
+ </button>
202
+ <button
203
+ class="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors">
204
+ <div class="p-3 rounded-lg bg-red-100 text-red-600">
205
+ <i data-feather="alert-triangle" class="w-5 h-5"></i>
206
+ </div>
207
+ <span class="font-medium">Risk Assessment</span>
208
+ </button>
209
+ <button
210
+ class="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors">
211
+ <div class="p-3 rounded-lg bg-green-100 text-green-600">
212
+ <i data-feather="bar-chart-2" class="w-5 h-5"></i>
213
+ </div>
214
+ <span class="font-medium">Generate Report</span>
215
+ </button>
216
+ </div>
217
+ </div>
218
+
219
+ <!-- Recent Activity -->
220
+ <div class="bg-white rounded-xl shadow-sm p-6">
221
+ <div class="flex items-center justify-between mb-4">
222
+ <h3 class="font-semibold text-lg">Recent Activity</h3>
223
+ <button class="text-sm text-yellow-600 hover:text-yellow-700">View All</button>
224
+ </div>
225
+ <div class="space-y-4">
226
+ <div class="flex items-start space-x-3">
227
+ <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mt-1">
228
+ <i data-feather="file-plus" class="w-4 h-4"></i>
229
+ </div>
230
+ <div>
231
+ <p class="font-medium">New CBOM created</p>
232
+ <p class="text-sm text-gray-500">"Enterprise Web App" CBOM was created by Josep Mateu
233
+ </p>
234
+ <p class="text-xs text-gray-400 mt-1">2 hours ago</p>
235
+ </div>
236
+ </div>
237
+ <div class="flex items-start space-x-3">
238
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600 mt-1">
239
+ <i data-feather="download" class="w-4 h-4"></i>
240
+ </div>
241
+ <div>
242
+ <p class="font-medium">CBOM imported</p>
243
+ <p class="text-sm text-gray-500">"Payment Gateway" CBOM was imported from Venafi</p>
244
+ <p class="text-xs text-gray-400 mt-1">5 hours ago</p>
245
+ </div>
246
+ </div>
247
+ <div class="flex items-start space-x-3">
248
+ <div class="p-2 rounded-full bg-red-100 text-red-600 mt-1">
249
+ <i data-feather="alert-triangle" class="w-4 h-4"></i>
250
+ </div>
251
+ <div>
252
+ <p class="font-medium">Risk assessment completed</p>
253
+ <p class="text-sm text-gray-500">High risk found in "Legacy System" CBOM</p>
254
+ <p class="text-xs text-gray-400 mt-1">1 day ago</p>
255
+ </div>
256
+ </div>
257
+ <div class="flex items-start space-x-3">
258
+ <div class="p-2 rounded-full bg-green-100 text-green-600 mt-1">
259
+ <i data-feather="check-circle" class="w-4 h-4"></i>
260
+ </div>
261
+ <div>
262
+ <p class="font-medium">Integration connected</p>
263
+ <p class="text-sm text-gray-500">Tanium integration was successfully connected</p>
264
+ <p class="text-xs text-gray-400 mt-1">2 days ago</p>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+
271
+ <!-- Right Column -->
272
+ <div class="space-y-6">
273
+ <!-- Integration Status -->
274
+ <div class="bg-white rounded-xl shadow-sm p-6">
275
+ <h3 class="font-semibold text-lg mb-4">Integration Status</h3>
276
+ <div class="space-y-3">
277
+ <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
278
+ <div class="flex items-center space-x-3">
279
+ <div class="p-2 rounded-lg bg-purple-100 text-purple-600">
280
+ <i data-feather="cpu" class="w-5 h-5"></i>
281
+ </div>
282
+ <span class="font-medium">Venafi</span>
283
+ </div>
284
+ <span
285
+ class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Connected</span>
286
+ </div>
287
+ <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
288
+ <div class="flex items-center space-x-3">
289
+ <div class="p-2 rounded-lg bg-blue-100 text-blue-600">
290
+ <i data-feather="server" class="w-5 h-5"></i>
291
+ </div>
292
+ <span class="font-medium">Tanium</span>
293
+ </div>
294
+ <span
295
+ class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Connected</span>
296
+ </div>
297
+ <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
298
+ <div class="flex items-center space-x-3">
299
+ <div class="p-2 rounded-lg bg-yellow-100 text-yellow-600">
300
+ <i data-feather="shield" class="w-5 h-5"></i>
301
+ </div>
302
+ <span class="font-medium">SandboxAQ</span>
303
+ </div>
304
+ <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Disconnected</span>
305
+ </div>
306
+ <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
307
+ <div class="flex items-center space-x-3">
308
+ <div class="p-2 rounded-lg bg-gray-100 text-gray-600">
309
+ <i data-feather="cloud" class="w-5 h-5"></i>
310
+ </div>
311
+ <span class="font-medium">AWS KMS</span>
312
+ </div>
313
+ <span
314
+ class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pending</span>
315
+ </div>
316
+ </div>
317
+ </div>
318
+
319
+ <!-- Risk Distribution -->
320
+ <div class="bg-white rounded-xl shadow-sm p-6">
321
+ <h3 class="font-semibold text-lg mb-4">Risk Distribution</h3>
322
+ <div class="h-48 flex items-center justify-center">
323
+ <!-- Placeholder for chart -->
324
+ <div
325
+ class="w-full h-full bg-gray-100 rounded-lg flex items-center justify-center text-gray-400">
326
+ <i data-feather="pie-chart" class="w-12 h-12"></i>
327
+ </div>
328
+ </div>
329
+ <div class="mt-4 space-y-2">
330
+ <div class="flex items-center justify-between">
331
+ <div class="flex items-center space-x-2">
332
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
333
+ <span class="text-sm">High Risk</span>
334
+ </div>
335
+ <span class="text-sm font-medium">12%</span>
336
+ </div>
337
+ <div class="flex items-center justify-between">
338
+ <div class="flex items-center space-x-2">
339
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
340
+ <span class="text-sm">Medium Risk</span>
341
+ </div>
342
+ <span class="text-sm font-medium">34%</span>
343
+ </div>
344
+ <div class="flex items-center justify-between">
345
+ <div class="flex items-center space-x-2">
346
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
347
+ <span class="text-sm">Low Risk</span>
348
+ </div>
349
+ <span class="text-sm font-medium">54%</span>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </main>
356
+ </div>
357
+
358
+ <script>
359
+ AOS.init();
360
+ feather.replace();
361
+
362
+ // Simple animation for cards on load
363
+ document.addEventListener('DOMContentLoaded', function () {
364
+ const cards = document.querySelectorAll('.card-hover');
365
+ cards.forEach((card, index) => {
366
+ card.style.opacity = '0';
367
+ card.style.transform = 'translateY(20px)';
368
+ card.style.transition = 'all 0.5s ease ' + (index * 0.1) + 's';
369
+
370
+ setTimeout(() => {
371
+ card.style.opacity = '1';
372
+ card.style.transform = 'translateY(0)';
373
+ }, 100);
374
+ });
375
+ });
376
+ </script>
377
+ </body>
378
+
379
+ </html>
integrations.html ADDED
@@ -0,0 +1,529 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Integrations Management - EY Quantum Safe</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
15
+
16
+ body {
17
+ font-family: 'Inter', sans-serif;
18
+ background-color: #f9fafb;
19
+ }
20
+
21
+ .sidebar {
22
+ transition: all 0.3s ease;
23
+ }
24
+
25
+ .card-hover:hover {
26
+ transform: translateY(-2px);
27
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
28
+ }
29
+
30
+ .tab-active {
31
+ border-bottom: 3px solid #F59E0B;
32
+ color: #111827;
33
+ }
34
+
35
+ .status-connected {
36
+ border-left: 4px solid #10B981;
37
+ }
38
+
39
+ .status-disconnected {
40
+ border-left: 4px solid #EF4444;
41
+ }
42
+
43
+ .status-pending {
44
+ border-left: 4px solid #F59E0B;
45
+ }
46
+
47
+ .pulse-animation {
48
+ animation: pulse 2s infinite;
49
+ }
50
+
51
+ @keyframes pulse {
52
+
53
+ 0%,
54
+ 100% {
55
+ opacity: 1;
56
+ }
57
+
58
+ 50% {
59
+ opacity: 0.7;
60
+ }
61
+ }
62
+ </style>
63
+ </head>
64
+
65
+ <body class="flex h-screen overflow-hidden">
66
+ <!-- Sidebar -->
67
+ <div class="sidebar bg-gray-900 text-white w-64 flex-shrink-0 flex flex-col">
68
+ <div class="p-4 border-b border-gray-700">
69
+ <div class="flex items-center space-x-3">
70
+ <div class="w-10 h-10 rounded-full bg-yellow-400 flex items-center justify-center">
71
+ <i data-feather="shield" class="text-gray-900"></i>
72
+ </div>
73
+ <h1 class="text-xl font-bold">EY Quantum Safe</h1>
74
+ </div>
75
+ </div>
76
+
77
+ <nav class="flex-1 overflow-y-auto p-4 space-y-1">
78
+ <a href="index.html"
79
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
80
+ <i data-feather="layout" class="w-5 h-5"></i>
81
+ <span>Dashboard</span>
82
+ </a>
83
+ <a href="cboms.html"
84
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
85
+ <i data-feather="file-text" class="w-5 h-5"></i>
86
+ <span>CBOMs</span>
87
+ </a>
88
+ <a href="assets.html"
89
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
90
+ <i data-feather="lock" class="w-5 h-5"></i>
91
+ <span>Assets</span>
92
+ </a>
93
+ <a href="integrations.html" class="flex items-center space-x-3 p-3 rounded-lg bg-gray-800 text-yellow-400">
94
+ <i data-feather="link" class="w-5 h-5"></i>
95
+ <span>Integrations</span>
96
+ </a>
97
+ <a href="analytics.html"
98
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
99
+ <i data-feather="bar-chart-2" class="w-5 h-5"></i>
100
+ <span>Analytics</span>
101
+ </a>
102
+ </nav>
103
+
104
+ <div class="p-4 border-t border-gray-700">
105
+ <div class="flex items-center space-x-3">
106
+ <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">
107
+ <i data-feather="user" class="text-gray-300"></i>
108
+ </div>
109
+ <div>
110
+ <p class="text-sm font-medium">Josep Mateu</p>
111
+ <p class="text-xs text-gray-400">Administrator</p>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Main Content -->
118
+ <div class="flex-1 flex flex-col overflow-hidden">
119
+ <!-- Top Navigation -->
120
+ <header class="bg-white border-b border-gray-200 flex items-center justify-between p-4">
121
+ <div class="flex items-center space-x-4">
122
+ <button class="md:hidden text-gray-500">
123
+ <i data-feather="menu"></i>
124
+ </button>
125
+ <h2 class="text-xl font-semibold text-gray-800">Integrations Management</h2>
126
+ </div>
127
+
128
+ <div class="flex items-center space-x-4">
129
+ <div class="relative">
130
+ <i data-feather="search"
131
+ class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
132
+ <input type="text" placeholder="Search integrations..."
133
+ class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
134
+ </div>
135
+ <button
136
+ class="px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg font-medium hover:bg-yellow-500 transition-colors">
137
+ <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
138
+ Add Integration
139
+ </button>
140
+ </div>
141
+ </header>
142
+
143
+ <!-- Main Content Area -->
144
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
145
+ <!-- Tabs Navigation -->
146
+ <div class="bg-white rounded-xl shadow-sm mb-6">
147
+ <div class="flex border-b border-gray-200">
148
+ <button class="px-6 py-4 font-medium tab-active">Active Integrations</button>
149
+ <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Available</button>
150
+ <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Configuration</button>
151
+ <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Logs</button>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Integration Statistics -->
156
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
157
+ <div class="bg-white rounded-xl shadow-sm p-4 text-center">
158
+ <div
159
+ class="w-12 h-12 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-3">
160
+ <i data-feather="check-circle" class="w-6 h-6"></i>
161
+ </div>
162
+ <p class="text-2xl font-bold text-gray-800">3</p>
163
+ <p class="text-sm text-gray-600">Active Integrations</p>
164
+ </div>
165
+
166
+ <div class="bg-white rounded-xl shadow-sm p-4 text-center">
167
+ <div
168
+ class="w-12 h-12 bg-red-100 text-red-600 rounded-full flex items-center justify-center mx-auto mb-3">
169
+ <i data-feather="x-circle" class="w-6 h-6"></i>
170
+ </div>
171
+ <p class="text-2xl font-bold text-gray-800">1</p>
172
+ <p class="text-sm text-gray-600">Failed Connections</p>
173
+ </div>
174
+
175
+ <div class="bg-white rounded-xl shadow-sm p-4 text-center">
176
+ <div
177
+ class="w-12 h-12 bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center mx-auto mb-3">
178
+ <i data-feather="clock" class="w-6 h-6"></i>
179
+ </div>
180
+ <p class="text-2xl font-bold text-gray-800">2</p>
181
+ <p class="text-sm text-gray-600">Pending Setup</p>
182
+ </div>
183
+
184
+ <div class="bg-white rounded-xl shadow-sm p-4 text-center">
185
+ <div
186
+ class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-3">
187
+ <i data-feather="activity" class="w-6 h-6"></i>
188
+ </div>
189
+ <p class="text-2xl font-bold text-gray-800">15.2k</p>
190
+ <p class="text-sm text-gray-600">Events Today</p>
191
+ </div>
192
+ </div>
193
+
194
+ <!-- Integration Cards Grid -->
195
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
196
+ <!-- Active Integrations -->
197
+ <div class="space-y-6">
198
+ <h3 class="font-semibold text-lg text-gray-800">Active Integrations</h3>
199
+
200
+ <!-- Venafi Integration -->
201
+ <div class="bg-white rounded-xl shadow-sm p-6 status-connected">
202
+ <div class="flex items-center justify-between mb-4">
203
+ <div class="flex items-center space-x-4">
204
+ <div
205
+ class="w-12 h-12 bg-purple-100 text-purple-600 rounded-lg flex items-center justify-center">
206
+ <i data-feather="cpu" class="w-6 h-6"></i>
207
+ </div>
208
+ <div>
209
+ <h4 class="font-semibold text-lg">Venafi</h4>
210
+ <p class="text-sm text-gray-500">Certificate Management Platform</p>
211
+ </div>
212
+ </div>
213
+ <div class="flex items-center space-x-2">
214
+ <span
215
+ class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Connected</span>
216
+ <div class="w-3 h-3 bg-green-500 rounded-full pulse-animation"></div>
217
+ </div>
218
+ </div>
219
+
220
+ <div class="grid grid-cols-2 gap-4 mb-4">
221
+ <div class="text-center p-3 bg-gray-50 rounded-lg">
222
+ <p class="text-xl font-bold text-gray-800">247</p>
223
+ <p class="text-xs text-gray-600">Certificates Synced</p>
224
+ </div>
225
+ <div class="text-center p-3 bg-gray-50 rounded-lg">
226
+ <p class="text-xl font-bold text-gray-800">99.8%</p>
227
+ <p class="text-xs text-gray-600">Uptime</p>
228
+ </div>
229
+ </div>
230
+
231
+ <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
232
+ <span>Last sync: 5 minutes ago</span>
233
+ <span>Next sync: 1 hour</span>
234
+ </div>
235
+
236
+ <div class="flex space-x-2">
237
+ <button
238
+ class="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
239
+ <i data-feather="settings" class="w-4 h-4 inline mr-2"></i>
240
+ Configure
241
+ </button>
242
+ <button
243
+ class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
244
+ <i data-feather="activity" class="w-4 h-4 inline mr-2"></i>
245
+ View Logs
246
+ </button>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Tanium Integration -->
251
+ <div class="bg-white rounded-xl shadow-sm p-6 status-connected">
252
+ <div class="flex items-center justify-between mb-4">
253
+ <div class="flex items-center space-x-4">
254
+ <div
255
+ class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center">
256
+ <i data-feather="server" class="w-6 h-6"></i>
257
+ </div>
258
+ <div>
259
+ <h4 class="font-semibold text-lg">Tanium</h4>
260
+ <p class="text-sm text-gray-500">Endpoint Management Platform</p>
261
+ </div>
262
+ </div>
263
+ <div class="flex items-center space-x-2">
264
+ <span
265
+ class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Connected</span>
266
+ <div class="w-3 h-3 bg-green-500 rounded-full pulse-animation"></div>
267
+ </div>
268
+ </div>
269
+
270
+ <div class="grid grid-cols-2 gap-4 mb-4">
271
+ <div class="text-center p-3 bg-gray-50 rounded-lg">
272
+ <p class="text-xl font-bold text-gray-800">1,842</p>
273
+ <p class="text-xs text-gray-600">Assets Discovered</p>
274
+ </div>
275
+ <div class="text-center p-3 bg-gray-50 rounded-lg">
276
+ <p class="text-xl font-bold text-gray-800">97.2%</p>
277
+ <p class="text-xs text-gray-600">Uptime</p>
278
+ </div>
279
+ </div>
280
+
281
+ <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
282
+ <span>Last scan: 2 hours ago</span>
283
+ <span>Next scan: 6 hours</span>
284
+ </div>
285
+
286
+ <div class="flex space-x-2">
287
+ <button
288
+ class="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
289
+ <i data-feather="settings" class="w-4 h-4 inline mr-2"></i>
290
+ Configure
291
+ </button>
292
+ <button
293
+ class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
294
+ <i data-feather="activity" class="w-4 h-4 inline mr-2"></i>
295
+ View Logs
296
+ </button>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Pending/Failed Integrations -->
302
+ <div class="space-y-6">
303
+ <h3 class="font-semibold text-lg text-gray-800">Pending & Failed Integrations</h3>
304
+
305
+ <!-- SandboxAQ Integration - Failed -->
306
+ <div class="bg-white rounded-xl shadow-sm p-6 status-disconnected">
307
+ <div class="flex items-center justify-between mb-4">
308
+ <div class="flex items-center space-x-4">
309
+ <div
310
+ class="w-12 h-12 bg-yellow-100 text-yellow-600 rounded-lg flex items-center justify-center">
311
+ <i data-feather="shield" class="w-6 h-6"></i>
312
+ </div>
313
+ <div>
314
+ <h4 class="font-semibold text-lg">SandboxAQ</h4>
315
+ <p class="text-sm text-gray-500">Quantum Security Assessment</p>
316
+ </div>
317
+ </div>
318
+ <div class="flex items-center space-x-2">
319
+ <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Failed</span>
320
+ <div class="w-3 h-3 bg-red-500 rounded-full"></div>
321
+ </div>
322
+ </div>
323
+
324
+ <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
325
+ <div class="flex items-start space-x-3">
326
+ <i data-feather="alert-circle" class="w-5 h-5 text-red-600 mt-0.5"></i>
327
+ <div>
328
+ <p class="text-sm font-medium text-red-800">Connection Failed</p>
329
+ <p class="text-xs text-red-600 mt-1">Authentication credentials expired. Please
330
+ update API key.</p>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
336
+ <span>Last attempt: 1 hour ago</span>
337
+ <span>Failed attempts: 3</span>
338
+ </div>
339
+
340
+ <div class="flex space-x-2">
341
+ <button
342
+ class="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
343
+ <i data-feather="refresh-cw" class="w-4 h-4 inline mr-2"></i>
344
+ Retry Connection
345
+ </button>
346
+ <button
347
+ class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
348
+ <i data-feather="settings" class="w-4 h-4 inline mr-2"></i>
349
+ Configure
350
+ </button>
351
+ </div>
352
+ </div>
353
+
354
+ <!-- AWS KMS Integration - Pending -->
355
+ <div class="bg-white rounded-xl shadow-sm p-6 status-pending">
356
+ <div class="flex items-center justify-between mb-4">
357
+ <div class="flex items-center space-x-4">
358
+ <div
359
+ class="w-12 h-12 bg-gray-100 text-gray-600 rounded-lg flex items-center justify-center">
360
+ <i data-feather="cloud" class="w-6 h-6"></i>
361
+ </div>
362
+ <div>
363
+ <h4 class="font-semibold text-lg">AWS KMS</h4>
364
+ <p class="text-sm text-gray-500">Key Management Service</p>
365
+ </div>
366
+ </div>
367
+ <div class="flex items-center space-x-2">
368
+ <span
369
+ class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pending</span>
370
+ <div class="w-3 h-3 bg-yellow-500 rounded-full pulse-animation"></div>
371
+ </div>
372
+ </div>
373
+
374
+ <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
375
+ <div class="flex items-start space-x-3">
376
+ <i data-feather="clock" class="w-5 h-5 text-yellow-600 mt-0.5"></i>
377
+ <div>
378
+ <p class="text-sm font-medium text-yellow-800">Setup Required</p>
379
+ <p class="text-xs text-yellow-600 mt-1">Complete configuration to activate this
380
+ integration.</p>
381
+ </div>
382
+ </div>
383
+ </div>
384
+
385
+ <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
386
+ <span>Added: 2 days ago</span>
387
+ <span>Progress: 60%</span>
388
+ </div>
389
+
390
+ <div class="flex space-x-2">
391
+ <button
392
+ class="flex-1 px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg hover:bg-yellow-500 transition-colors">
393
+ <i data-feather="play" class="w-4 h-4 inline mr-2"></i>
394
+ Complete Setup
395
+ </button>
396
+ <button
397
+ class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
398
+ <i data-feather="trash-2" class="w-4 h-4 inline mr-2"></i>
399
+ Remove
400
+ </button>
401
+ </div>
402
+ </div>
403
+
404
+ <!-- HashiCorp Vault Integration - Pending -->
405
+ <div class="bg-white rounded-xl shadow-sm p-6 status-pending">
406
+ <div class="flex items-center justify-between mb-4">
407
+ <div class="flex items-center space-x-4">
408
+ <div
409
+ class="w-12 h-12 bg-indigo-100 text-indigo-600 rounded-lg flex items-center justify-center">
410
+ <i data-feather="key" class="w-6 h-6"></i>
411
+ </div>
412
+ <div>
413
+ <h4 class="font-semibold text-lg">HashiCorp Vault</h4>
414
+ <p class="text-sm text-gray-500">Secrets Management</p>
415
+ </div>
416
+ </div>
417
+ <div class="flex items-center space-x-2">
418
+ <span
419
+ class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pending</span>
420
+ <div class="w-3 h-3 bg-yellow-500 rounded-full pulse-animation"></div>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
425
+ <div class="flex items-start space-x-3">
426
+ <i data-feather="info" class="w-5 h-5 text-blue-600 mt-0.5"></i>
427
+ <div>
428
+ <p class="text-sm font-medium text-blue-800">Ready to Configure</p>
429
+ <p class="text-xs text-blue-600 mt-1">Integration template is ready. Configure
430
+ connection settings.</p>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
436
+ <span>Added: 3 hours ago</span>
437
+ <span>Progress: 25%</span>
438
+ </div>
439
+
440
+ <div class="flex space-x-2">
441
+ <button
442
+ class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
443
+ <i data-feather="settings" class="w-4 h-4 inline mr-2"></i>
444
+ Configure Now
445
+ </button>
446
+ <button
447
+ class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
448
+ <i data-feather="trash-2" class="w-4 h-4 inline mr-2"></i>
449
+ Remove
450
+ </button>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ </div>
455
+
456
+ <!-- Recent Activity -->
457
+ <div class="bg-white rounded-xl shadow-sm p-6 mt-6">
458
+ <div class="flex items-center justify-between mb-4">
459
+ <h3 class="font-semibold text-lg">Recent Integration Activity</h3>
460
+ <button class="text-sm text-yellow-600 hover:text-yellow-700">View All</button>
461
+ </div>
462
+
463
+ <div class="space-y-4">
464
+ <div class="flex items-start space-x-3 p-4 bg-green-50 rounded-lg">
465
+ <div class="p-2 rounded-full bg-green-100 text-green-600 mt-1">
466
+ <i data-feather="check-circle" class="w-4 h-4"></i>
467
+ </div>
468
+ <div class="flex-1">
469
+ <p class="font-medium">Venafi sync completed successfully</p>
470
+ <p class="text-sm text-gray-500">247 certificates updated, 3 new certificates added</p>
471
+ <p class="text-xs text-gray-400 mt-1">5 minutes ago</p>
472
+ </div>
473
+ </div>
474
+
475
+ <div class="flex items-start space-x-3 p-4 bg-blue-50 rounded-lg">
476
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600 mt-1">
477
+ <i data-feather="server" class="w-4 h-4"></i>
478
+ </div>
479
+ <div class="flex-1">
480
+ <p class="font-medium">Tanium asset discovery completed</p>
481
+ <p class="text-sm text-gray-500">1,842 assets scanned, 15 new cryptographic assets found</p>
482
+ <p class="text-xs text-gray-400 mt-1">2 hours ago</p>
483
+ </div>
484
+ </div>
485
+
486
+ <div class="flex items-start space-x-3 p-4 bg-red-50 rounded-lg">
487
+ <div class="p-2 rounded-full bg-red-100 text-red-600 mt-1">
488
+ <i data-feather="alert-circle" class="w-4 h-4"></i>
489
+ </div>
490
+ <div class="flex-1">
491
+ <p class="font-medium">SandboxAQ connection failed</p>
492
+ <p class="text-sm text-gray-500">Authentication error: API key expired</p>
493
+ <p class="text-xs text-gray-400 mt-1">1 hour ago</p>
494
+ </div>
495
+ </div>
496
+ </div>
497
+ </div>
498
+ </main>
499
+ </div>
500
+
501
+ <script>
502
+ AOS.init();
503
+ feather.replace();
504
+
505
+ // Tab switching functionality
506
+ document.querySelectorAll('.flex button').forEach(button => {
507
+ button.addEventListener('click', function () {
508
+ document.querySelectorAll('.flex button').forEach(btn => {
509
+ btn.classList.remove('tab-active');
510
+ btn.classList.add('text-gray-500', 'hover:text-gray-700');
511
+ });
512
+ this.classList.add('tab-active');
513
+ this.classList.remove('text-gray-500', 'hover:text-gray-700');
514
+ });
515
+ });
516
+
517
+ // Pulse animation control
518
+ document.addEventListener('DOMContentLoaded', function () {
519
+ const pulseElements = document.querySelectorAll('.pulse-animation');
520
+ pulseElements.forEach(element => {
521
+ setInterval(() => {
522
+ element.style.opacity = element.style.opacity === '0.7' ? '1' : '0.7';
523
+ }, 1000);
524
+ });
525
+ });
526
+ </script>
527
+ </body>
528
+
529
+ </html>