Hugging Face's logo

Spaces:
haramb3
/
cbom-builder
Running

App Files Community
gpetrizey commited on
Commit
c714b7b
·
1 Parent(s): 53db7eb

Enhance UI and UX of Integrations Management Page

Browse files

- Updated background to a gradient for a modern look.
- Improved typography by adding more font weights for better readability.
- Enhanced sidebar with a blurred backdrop and gradient effects.
- Added hover effects and transitions for buttons and cards.
- Implemented animated background particles for visual appeal.
- Improved select dropdown styling for better user experience.
- Updated integration statistics and activity sections with new styles.
- Enhanced AOS (Animate On Scroll) settings for smoother animations.
- Refined tab switching functionality for better interaction.

Files changed (6) hide show
  1. analytics.html +968 -381
  2. assets.html +0 -0
  3. cboms.html +985 -208
  4. dashboard.html +317 -208
  5. index.html +202 -36
  6. integrations.html +281 -143
analytics.html CHANGED
@@ -7,49 +7,77 @@
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
 
@@ -65,57 +93,179 @@
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>
@@ -126,14 +276,15 @@
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">
@@ -141,10 +292,9 @@
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>
@@ -152,433 +302,870 @@
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
 
 
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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 
11
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
  <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
14
 
15
  body {
16
  font-family: 'Inter', sans-serif;
17
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
18
+ min-height: 100vh;
19
+ }
20
+
21
+ /* Ensure content is visible by default */
22
+ [data-aos] {
23
+ opacity: 1 !important;
24
+ transform: none !important;
25
+ }
26
+
27
+ [data-aos].aos-animate {
28
+ opacity: 1 !important;
29
+ }
30
+
31
+ .gradient-text {
32
+ background: linear-gradient(135deg, #F59E0B, #FBBF24, #FCD34D);
33
+ -webkit-background-clip: text;
34
+ -webkit-text-fill-color: transparent;
35
+ background-clip: text;
36
  }
37
 
38
  .sidebar {
39
+ backdrop-filter: blur(20px);
40
+ background: rgba(15, 23, 42, 0.8);
41
+ border-right: 1px solid rgba(255, 255, 255, 0.1);
42
+ transition: all 0.3s ease;
43
+ }
44
+
45
+ .card-hover {
46
+ backdrop-filter: blur(15px);
47
+ background: rgba(255, 255, 255, 0.05);
48
+ border: 1px solid rgba(255, 255, 255, 0.1);
49
  transition: all 0.3s ease;
50
  }
51
 
52
  .card-hover:hover {
53
  transform: translateY(-2px);
54
+ background: rgba(255, 255, 255, 0.08);
55
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
56
+ border-color: rgba(245, 158, 11, 0.3);
57
  }
58
 
59
  .tab-active {
60
  border-bottom: 3px solid #F59E0B;
61
+ color: #F59E0B;
62
  }
63
 
64
  .risk-critical {
65
+ background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(254, 202, 202, 0.1) 100%);
66
  border-left: 4px solid #DC2626;
67
  }
68
 
69
  .risk-high {
70
+ background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(253, 230, 138, 0.1) 100%);
71
  border-left: 4px solid #F59E0B;
72
  }
73
 
74
  .risk-medium {
75
+ background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(191, 219, 254, 0.1) 100%);
76
  border-left: 4px solid #3B82F6;
77
  }
78
 
79
  .risk-low {
80
+ background: linear-gradient(135deg, rgba(22, 163, 74, 0.2) 0%, rgba(187, 247, 208, 0.1) 100%);
81
  border-left: 4px solid #16A34A;
82
  }
83
 
 
93
 
94
  .metric-card {
95
  transition: all 0.3s ease;
96
+ backdrop-filter: blur(15px);
97
+ background: rgba(255, 255, 255, 0.05);
98
+ border: 1px solid rgba(255, 255, 255, 0.1);
99
  }
100
 
101
  .metric-card:hover {
102
+ transform: translateY(-2px);
103
+ background: rgba(255, 255, 255, 0.08);
104
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
105
+ border-color: rgba(245, 158, 11, 0.3);
106
+ }
107
+
108
+ .action-button {
109
+ background: linear-gradient(135deg, #F59E0B, #FBBF24);
110
+ transition: all 0.3s ease;
111
+ box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
112
+ }
113
+
114
+ .action-button:hover {
115
+ transform: translateY(-2px);
116
+ box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
117
+ }
118
+
119
+ .particle {
120
+ position: absolute;
121
+ width: 2px;
122
+ height: 2px;
123
+ background: #F59E0B;
124
+ border-radius: 50%;
125
+ animation: particle-float 8s linear infinite;
126
+ opacity: 0.7;
127
+ }
128
+
129
+ @keyframes particle-float {
130
+ 0% {
131
+ transform: translateY(100vh) translateX(0px);
132
+ opacity: 0;
133
+ }
134
+
135
+ 10% {
136
+ opacity: 0.7;
137
+ }
138
+
139
+ 90% {
140
+ opacity: 0.7;
141
+ }
142
+
143
+ 100% {
144
+ transform: translateY(-100px) translateX(100px);
145
+ opacity: 0;
146
+ }
147
+ }
148
+
149
+ .glow-effect {
150
+ box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
151
+ }
152
+
153
+ .pulse-animation {
154
+ animation: pulse 2s infinite;
155
+ }
156
+
157
+ @keyframes pulse {
158
+
159
+ 0%,
160
+ 100% {
161
+ opacity: 1;
162
+ }
163
+
164
+ 50% {
165
+ opacity: 0.8;
166
+ }
167
+ }
168
+
169
+ /* Fix select dropdown styling */
170
+ select option {
171
+ background-color: #1e293b;
172
+ color: #ffffff;
173
+ padding: 8px;
174
+ }
175
+
176
+ select option:hover {
177
+ background-color: #334155;
178
+ }
179
+
180
+ select option:checked {
181
+ background-color: #475569;
182
+ font-weight: 500;
183
+ }
184
+
185
+ select option:disabled {
186
+ background-color: #0f172a;
187
+ color: #6b7280;
188
+ }
189
+
190
+ /* Ensure select has proper background */
191
+ select {
192
+ background-color: rgba(255, 255, 255, 0.1);
193
+ color: #ffffff;
194
+ }
195
+
196
+ select:focus {
197
+ background-color: rgba(255, 255, 255, 0.15);
198
+ }
199
+
200
+ /* Fix for optgroup if used */
201
+ optgroup {
202
+ background-color: #0f172a;
203
+ color: #9ca3af;
204
+ font-weight: 600;
205
  }
206
  </style>
207
  </head>
208
 
209
  <body class="flex h-screen overflow-hidden">
210
+ <!-- Animated Background Particles -->
211
+ <div class="fixed inset-0 pointer-events-none z-0">
212
+ <div class="particle" style="left: 10%; animation-delay: 0s;"></div>
213
+ <div class="particle" style="left: 30%; animation-delay: 2s;"></div>
214
+ <div class="particle" style="left: 50%; animation-delay: 4s;"></div>
215
+ <div class="particle" style="left: 70%; animation-delay: 6s;"></div>
216
+ <div class="particle" style="left: 90%; animation-delay: 8s;"></div>
217
+ </div>
218
+
219
  <!-- Sidebar -->
220
+ <div class="sidebar text-white w-64 flex-shrink-0 flex flex-col relative z-10">
221
+ <div class="p-4 border-b border-white/10">
222
+ <a href="index.html" class="flex items-center space-x-3 hover:opacity-80 transition-opacity">
223
+ <div
224
+ class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
225
+ <i data-feather="shield" class="text-gray-900 w-5 h-5"></i>
226
  </div>
227
+ <h1 class="text-xl font-bold">EY <span class="gradient-text">Quantum Safe</span></h1>
228
+ </a>
229
  </div>
230
 
231
  <nav class="flex-1 overflow-y-auto p-4 space-y-1">
232
  <a href="index.html"
233
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
234
+ <i data-feather="home" class="w-5 h-5"></i>
235
+ <span>Home</span>
236
+ </a>
237
+ <a href="index.html"
238
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
239
  <i data-feather="layout" class="w-5 h-5"></i>
240
  <span>Dashboard</span>
241
  </a>
242
  <a href="cboms.html"
243
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
244
  <i data-feather="file-text" class="w-5 h-5"></i>
245
  <span>CBOMs</span>
246
  </a>
247
  <a href="assets.html"
248
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
249
  <i data-feather="lock" class="w-5 h-5"></i>
250
  <span>Assets</span>
251
  </a>
252
  <a href="integrations.html"
253
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
254
  <i data-feather="link" class="w-5 h-5"></i>
255
  <span>Integrations</span>
256
  </a>
257
+ <a href="analytics.html"
258
+ class="flex items-center space-x-3 p-3 rounded-lg bg-yellow-400/20 text-yellow-400 border border-yellow-400/30">
259
  <i data-feather="bar-chart-2" class="w-5 h-5"></i>
260
  <span>Analytics</span>
261
  </a>
262
  </nav>
263
 
264
+ <div class="p-4 border-t border-white/10">
265
  <div class="flex items-center space-x-3">
266
+ <div
267
+ class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-600 to-gray-700 flex items-center justify-center">
268
+ <i data-feather="user" class="text-gray-300 w-5 h-5"></i>
269
  </div>
270
  <div>
271
  <p class="text-sm font-medium">Josep Mateu</p>
 
276
  </div>
277
 
278
  <!-- Main Content -->
279
+ <div class="flex-1 flex flex-col overflow-hidden relative z-10">
280
  <!-- Top Navigation -->
281
+ <header
282
+ class="backdrop-filter backdrop-blur-lg bg-white/5 border-b border-white/10 flex items-center justify-between p-4">
283
  <div class="flex items-center space-x-4">
284
+ <button class="md:hidden text-white">
285
  <i data-feather="menu"></i>
286
  </button>
287
+ <h2 class="text-xl font-semibold text-white">Analytics Dashboard</h2>
288
  </div>
289
 
290
  <div class="flex items-center space-x-4">
 
292
  <i data-feather="search"
293
  class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
294
  <input type="text" placeholder="Search analytics..."
295
+ class="pl-10 pr-4 py-2 bg-white/10 border border-white/20 text-white placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
296
  </div>
297
+ <button class="px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
 
298
  <i data-feather="download" class="w-4 h-4 inline mr-2"></i>
299
  Export Report
300
  </button>
 
302
  </header>
303
 
304
  <!-- Main Content Area -->
305
+ <main class="flex-1 overflow-y-auto p-6">
306
  <!-- Tabs Navigation -->
307
+ <div class="card-hover rounded-xl mb-6">
308
+ <div class="flex border-b border-white/10 overflow-x-auto">
309
+ <button class="px-6 py-4 font-medium tab-active" onclick="showTab('overview')">Overview</button>
310
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('compliance')">Compliance Frameworks</button>
311
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('rules')">Custom Rules</button>
312
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('reports')">Reports</button>
313
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('trends')">Trends & Insights</button>
314
  </div>
315
  </div>
316
 
317
+ <!-- Tab Content -->
318
+ <div id="tabContent">
319
+ <!-- Overview Tab -->
320
+ <div id="overview" class="tab-content">
321
+ <!-- Enhanced Statistics Dashboard with Compliance Scores -->
322
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
323
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up">
324
+ <div class="flex items-center justify-between">
325
+ <div>
326
+ <p class="text-sm font-medium text-gray-400">Overall Compliance</p>
327
+ <p class="text-3xl font-bold text-white mt-1">78%</p>
328
+ </div>
329
+ <div class="p-3 rounded-lg bg-yellow-400/20 text-yellow-400">
330
+ <i data-feather="check-square" class="w-6 h-6"></i>
331
+ </div>
332
+ </div>
333
+ <p class="text-xs text-gray-400 mt-3">Across all frameworks</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
334
  </div>
 
 
335
 
336
+ <!-- Total Risk Score -->
337
+ <div class="metric-card rounded-xl p-6" data-aos="fade-up">
338
+ <div class="flex items-center justify-between">
339
+ <div>
340
+ <p class="text-sm font-medium text-gray-400">Overall Risk Score</p>
341
+ <p class="text-3xl font-bold mt-1 text-red-400 pulse-animation">7.2/10</p>
342
+ </div>
343
+ <div class="p-3 rounded-lg bg-red-400/20 text-red-400 glow-effect">
344
+ <i data-feather="alert-triangle" class="w-6 h-6"></i>
345
+ </div>
346
+ </div>
347
+ <div class="mt-4">
348
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
349
+ <span>Risk Level</span>
350
+ <span>72%</span>
351
+ </div>
352
+ <div class="w-full bg-white/10 rounded-full h-2">
353
+ <div class="bg-red-500 h-2 rounded-full progress-bar glow-effect" style="width: 72%"></div>
354
+ </div>
355
+ </div>
356
  </div>
 
 
357
 
358
+ <!-- Quantum Vulnerable Assets -->
359
+ <div class="metric-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
360
+ <div class="flex items-center justify-between">
361
+ <div>
362
+ <p class="text-sm font-medium text-gray-400">Quantum Vulnerable</p>
363
+ <p class="text-3xl font-bold mt-1 text-yellow-400">342</p>
364
+ </div>
365
+ <div class="p-3 rounded-lg bg-yellow-400/20 text-yellow-400 glow-effect">
366
+ <i data-feather="zap" class="w-6 h-6"></i>
367
+ </div>
368
+ </div>
369
+ <div class="mt-4">
370
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
371
+ <span>Of 1,284 total assets</span>
372
+ <span>27%</span>
373
+ </div>
374
+ <div class="w-full bg-white/10 rounded-full h-2">
375
+ <div class="bg-yellow-500 h-2 rounded-full progress-bar" style="width: 27%"></div>
376
+ </div>
377
+ </div>
378
  </div>
 
 
 
379
 
380
+ <!-- Migration Priority -->
381
+ <div class="metric-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
382
+ <div class="flex items-center justify-between">
383
+ <div>
384
+ <p class="text-sm font-medium text-gray-400">Migration Priority</p>
385
+ <p class="text-3xl font-bold mt-1 text-blue-400">156</p>
386
+ </div>
387
+ <div class="p-3 rounded-lg bg-blue-400/20 text-blue-400 glow-effect">
388
+ <i data-feather="trending-up" class="w-6 h-6"></i>
389
+ </div>
390
+ </div>
391
+ <div class="mt-4">
392
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
393
+ <span>Critical/High priority</span>
394
+ <span>46%</span>
395
+ </div>
396
+ <div class="w-full bg-white/10 rounded-full h-2">
397
+ <div class="bg-blue-500 h-2 rounded-full progress-bar" style="width: 46%"></div>
398
+ </div>
399
  </div>
400
  </div>
 
 
 
 
401
 
402
+ <!-- Compliance Status -->
403
+ <div class="metric-card rounded-xl p-6" data-aos="fade-up" data-aos-delay="300">
404
+ <div class="flex items-center justify-between">
405
+ <div>
406
+ <p class="text-sm font-medium text-gray-400">Compliance Score</p>
407
+ <p class="text-3xl font-bold mt-1 text-green-400">8.4/10</p>
408
+ </div>
409
+ <div class="p-3 rounded-lg bg-green-400/20 text-green-400 glow-effect">
410
+ <i data-feather="check-circle" class="w-6 h-6"></i>
411
+ </div>
412
+ </div>
413
+ <div class="mt-4">
414
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
415
+ <span>Standards met</span>
416
+ <span>84%</span>
417
+ </div>
418
+ <div class="w-full bg-white/10 rounded-full h-2">
419
+ <div class="bg-green-500 h-2 rounded-full progress-bar" style="width: 84%"></div>
420
+ </div>
421
  </div>
 
 
 
422
  </div>
423
  </div>
424
 
425
+ <!-- Compliance Status by Framework -->
426
+ <div class="card-hover rounded-xl p-6 mb-6" data-aos="fade-up" data-aos-delay="400">
427
+ <h3 class="font-semibold text-lg text-white mb-4">Compliance Status by Framework</h3>
428
+ <div class="space-y-4">
429
+ <div>
430
+ <div class="flex justify-between items-center mb-2">
431
+ <div class="flex items-center space-x-2">
432
+ <div class="w-8 h-8 bg-blue-400/20 text-blue-400 rounded flex items-center justify-center">
433
+ <span class="text-xs font-bold">N</span>
434
+ </div>
435
+ <span class="text-white font-medium">NIST 800-53</span>
436
+ </div>
437
+ <span class="text-sm text-white">82%</span>
438
+ </div>
439
+ <div class="bg-white/10 rounded-full h-2">
440
+ <div class="bg-blue-400 h-2 rounded-full" style="width: 82%"></div>
441
+ </div>
442
+ <p class="text-xs text-gray-400 mt-1">164 of 200 controls satisfied</p>
443
  </div>
 
 
 
 
 
 
444
 
445
+ <div>
446
+ <div class="flex justify-between items-center mb-2">
447
+ <div class="flex items-center space-x-2">
448
+ <div class="w-8 h-8 bg-green-400/20 text-green-400 rounded flex items-center justify-center">
449
+ <span class="text-xs font-bold">I</span>
450
+ </div>
451
+ <span class="text-white font-medium">ISO/IEC 27001</span>
 
 
 
 
 
 
452
  </div>
453
+ <span class="text-sm text-white">91%</span>
454
+ </div>
455
+ <div class="bg-white/10 rounded-full h-2">
456
+ <div class="bg-green-400 h-2 rounded-full" style="width: 91%"></div>
457
  </div>
458
+ <p class="text-xs text-gray-400 mt-1">109 of 120 controls satisfied</p>
459
  </div>
460
 
461
+ <div>
462
+ <div class="flex justify-between items-center mb-2">
463
+ <div class="flex items-center space-x-2">
464
+ <div class="w-8 h-8 bg-purple-400/20 text-purple-400 rounded flex items-center justify-center">
465
+ <span class="text-xs font-bold">P</span>
466
+ </div>
467
+ <span class="text-white font-medium">PCI-DSS</span>
468
  </div>
469
+ <span class="text-sm text-white">67%</span>
470
+ </div>
471
+ <div class="bg-white/10 rounded-full h-2">
472
+ <div class="bg-yellow-400 h-2 rounded-full" style="width: 67%"></div>
473
  </div>
474
+ <p class="text-xs text-gray-400 mt-1">54 of 80 controls satisfied</p>
475
  </div>
476
 
477
+ <div>
478
+ <div class="flex justify-between items-center mb-2">
479
+ <div class="flex items-center space-x-2">
480
+ <div class="w-8 h-8 bg-yellow-400/20 text-yellow-400 rounded flex items-center justify-center">
481
+ <span class="text-xs font-bold">C</span>
482
+ </div>
483
+ <span class="text-white font-medium">Custom - Quantum Ready</span>
484
  </div>
485
+ <span class="text-sm text-white">45%</span>
486
+ </div>
487
+ <div class="bg-white/10 rounded-full h-2">
488
+ <div class="bg-red-400 h-2 rounded-full" style="width: 45%"></div>
489
  </div>
490
+ <p class="text-xs text-gray-400 mt-1">18 of 40 custom rules satisfied</p>
491
  </div>
492
  </div>
493
  </div>
494
 
495
+ <!-- Main Analytics Grid -->
496
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
497
+ <!-- Left Column - Charts -->
498
+ <div class="lg:col-span-2 space-y-6">
499
+ <!-- Risk Distribution Chart -->
500
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="400">
501
+ <div class="flex items-center justify-between mb-4">
502
+ <h3 class="font-semibold text-lg text-white">Risk Distribution by Asset Type</h3>
503
+ <div class="flex space-x-2">
504
+ <button
505
+ class="px-3 py-1 text-sm bg-white/10 border border-white/20 rounded-lg hover:bg-white/20 text-gray-300">
506
+ <i data-feather="download" class="w-4 h-4"></i>
507
+ </button>
508
+ <button
509
+ class="px-3 py-1 text-sm bg-white/10 border border-white/20 rounded-lg hover:bg-white/20 text-gray-300">
510
+ <i data-feather="maximize" class="w-4 h-4"></i>
511
+ </button>
512
+ </div>
513
+ </div>
514
+ <div class="chart-container">
515
+ <canvas id="riskChart"></canvas>
516
+ </div>
517
+ </div>
518
+
519
+ <!-- Quantum Timeline Chart -->
520
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="500">
521
+ <div class="flex items-center justify-between mb-4">
522
+ <h3 class="font-semibold text-lg text-white">Quantum Threat Timeline</h3>
523
+ <div class="flex space-x-2">
524
+ <select
525
+ class="px-3 py-1 text-sm bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
526
+ <option>5 Year Horizon</option>
527
+ <option>10 Year Horizon</option>
528
+ <option>20 Year Horizon</option>
529
+ </select>
530
+ </div>
531
+ </div>
532
+ <div class="chart-container">
533
+ <canvas id="quantumTimelineChart"></canvas>
534
+ </div>
535
+ </div>
536
+
537
+ <!-- Asset Performance Trends -->
538
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="600">
539
+ <div class="flex items-center justify-between mb-4">
540
+ <h3 class="font-semibold text-lg text-white">Asset Discovery Trends</h3>
541
+ <div class="flex space-x-2">
542
+ <button
543
+ class="px-3 py-1 text-sm bg-yellow-400 text-gray-900 rounded-lg hover:bg-yellow-500">
544
+ Last 30 days
545
+ </button>
546
+ <button
547
+ class="px-3 py-1 text-sm border border-white/30 text-gray-300 rounded-lg hover:bg-white/10">
548
+ Last 90 days
549
+ </button>
550
+ </div>
551
+ </div>
552
+ <div class="chart-container">
553
+ <canvas id="trendsChart"></canvas>
554
  </div>
555
  </div>
556
  </div>
557
+
558
+ <!-- Right Column - Analytics Cards -->
559
+ <div class="space-y-6">
560
+ <!-- Critical Findings -->
561
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="700">
562
+ <h3 class="font-semibold text-lg mb-4 text-white">Critical Findings</h3>
563
+ <div class="space-y-3">
564
+ <div class="p-4 rounded-lg risk-critical border border-red-400/30">
565
+ <div class="flex items-start space-x-3">
566
+ <i data-feather="alert-circle" class="w-5 h-5 text-red-400 mt-0.5"></i>
567
+ <div>
568
+ <p class="font-medium text-red-300">SHA-1 Still in Use</p>
569
+ <p class="text-sm text-red-400">Found in 23 certificates</p>
570
+ <p class="text-xs text-red-500 mt-1">Immediate replacement required</p>
571
+ </div>
572
+ </div>
573
+ </div>
574
+
575
+ <div class="p-4 rounded-lg risk-high border border-yellow-400/30">
576
+ <div class="flex items-start space-x-3">
577
+ <i data-feather="clock" class="w-5 h-5 text-yellow-400 mt-0.5"></i>
578
+ <div>
579
+ <p class="font-medium text-yellow-300">RSA-1024 Keys</p>
580
+ <p class="text-sm text-yellow-400">87 keys need upgrade</p>
581
+ <p class="text-xs text-yellow-500 mt-1">Upgrade by Q2 2025</p>
582
+ </div>
583
+ </div>
584
+ </div>
585
+
586
+ <div class="p-4 rounded-lg risk-medium border border-blue-400/30">
587
+ <div class="flex items-start space-x-3">
588
+ <i data-feather="info" class="w-5 h-5 text-blue-400 mt-0.5"></i>
589
+ <div>
590
+ <p class="font-medium text-blue-300">TLS 1.2 Usage</p>
591
+ <p class="text-sm text-blue-400">134 implementations found</p>
592
+ <p class="text-xs text-blue-500 mt-1">Plan TLS 1.3 migration</p>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </div>
597
  </div>
598
+
599
+ <!-- CBOM Health Score -->
600
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="800">
601
+ <h3 class="font-semibold text-lg mb-4 text-white">CBOM Health Score</h3>
602
+ <div class="text-center mb-4">
603
+ <div class="relative inline-flex items-center justify-center w-32 h-32">
604
+ <svg class="w-32 h-32 transform -rotate-90">
605
+ <circle cx="64" cy="64" r="56" stroke="rgba(255, 255, 255, 0.1)" stroke-width="8"
606
+ fill="none">
607
+ </circle>
608
+ <circle cx="64" cy="64" r="56" stroke="#f59e0b" stroke-width="8" fill="none"
609
+ stroke-dasharray="351.86" stroke-dashoffset="105.56" stroke-linecap="round"
610
+ class="glow-effect">
611
+ </circle>
612
+ </svg>
613
+ <div class="absolute text-center">
614
+ <span class="text-2xl font-bold text-yellow-400">7.2</span>
615
+ <span class="text-sm text-gray-400 block">/ 10</span>
616
+ </div>
617
+ </div>
618
+ </div>
619
+ <div class="space-y-3">
620
+ <div class="flex justify-between items-center">
621
+ <span class="text-sm text-gray-400">Asset Coverage</span>
622
+ <span class="text-sm font-medium text-white">92%</span>
623
+ </div>
624
+ <div class="flex justify-between items-center">
625
+ <span class="text-sm text-gray-400">Risk Assessment</span>
626
+ <span class="text-sm font-medium text-white">78%</span>
627
+ </div>
628
+ <div class="flex justify-between items-center">
629
+ <span class="text-sm text-gray-400">Compliance</span>
630
+ <span class="text-sm font-medium text-white">84%</span>
631
+ </div>
632
+ <div class="flex justify-between items-center">
633
+ <span class="text-sm text-gray-400">Dependencies</span>
634
+ <span class="text-sm font-medium text-white">67%</span>
635
+ </div>
636
+ </div>
637
  </div>
638
+
639
+ <!-- Integration Status -->
640
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="900">
641
+ <h3 class="font-semibold text-lg mb-4 text-white">Data Sources</h3>
642
+ <div class="space-y-3">
643
+ <div
644
+ class="flex items-center justify-between p-3 border border-white/20 rounded-lg hover:border-green-400/50 transition-all">
645
+ <div class="flex items-center space-x-3">
646
+ <div class="p-2 rounded-lg bg-green-400/20 text-green-400">
647
+ <i data-feather="cpu" class="w-4 h-4"></i>
648
+ </div>
649
+ <div>
650
+ <span class="font-medium text-sm text-white">Venafi</span>
651
+ <p class="text-xs text-gray-400">247 certificates</p>
652
+ </div>
653
+ </div>
654
+ <div class="w-3 h-3 bg-green-500 rounded-full pulse-animation"></div>
655
+ </div>
656
+
657
+ <div
658
+ class="flex items-center justify-between p-3 border border-white/20 rounded-lg hover:border-blue-400/50 transition-all">
659
+ <div class="flex items-center space-x-3">
660
+ <div class="p-2 rounded-lg bg-blue-400/20 text-blue-400">
661
+ <i data-feather="server" class="w-4 h-4"></i>
662
+ </div>
663
+ <div>
664
+ <span class="font-medium text-sm text-white">Tanium</span>
665
+ <p class="text-xs text-gray-400">1,842 assets</p>
666
+ </div>
667
+ </div>
668
+ <div class="w-3 h-3 bg-green-500 rounded-full pulse-animation"></div>
669
+ </div>
670
+
671
+ <div
672
+ class="flex items-center justify-between p-3 border border-white/20 rounded-lg hover:border-red-400/50 transition-all">
673
+ <div class="flex items-center space-x-3">
674
+ <div class="p-2 rounded-lg bg-yellow-400/20 text-yellow-400">
675
+ <i data-feather="shield" class="w-4 h-4"></i>
676
+ </div>
677
+ <div>
678
+ <span class="font-medium text-sm text-white">SandboxAQ</span>
679
+ <p class="text-xs text-gray-400">Risk analysis</p>
680
+ </div>
681
+ </div>
682
+ <div class="w-3 h-3 bg-red-500 rounded-full pulse-animation"></div>
683
+ </div>
684
+ </div>
685
  </div>
686
+
687
+ <!-- Quick Actions -->
688
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="1000">
689
+ <h3 class="font-semibold text-lg mb-4 text-white">Quick Actions</h3>
690
+ <div class="space-y-2">
691
+ <button
692
+ class="w-full flex items-center space-x-3 p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-yellow-400/10 transition-all">
693
+ <div class="p-2 rounded-lg bg-red-400/20 text-red-400">
694
+ <i data-feather="zap" class="w-4 h-4"></i>
695
+ </div>
696
+ <span class="text-sm font-medium text-white">Run Quantum Assessment</span>
697
+ </button>
698
+ <button
699
+ class="w-full flex items-center space-x-3 p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-yellow-400/10 transition-all">
700
+ <div class="p-2 rounded-lg bg-blue-400/20 text-blue-400">
701
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
702
+ </div>
703
+ <span class="text-sm font-medium text-white">Refresh Asset Data</span>
704
+ </button>
705
+ <button
706
+ class="w-full flex items-center space-x-3 p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-yellow-400/10 transition-all">
707
+ <div class="p-2 rounded-lg bg-green-400/20 text-green-400">
708
+ <i data-feather="file-text" class="w-4 h-4"></i>
709
+ </div>
710
+ <span class="text-sm font-medium text-white">Generate Report</span>
711
+ </button>
712
+ </div>
713
  </div>
714
  </div>
715
  </div>
716
+ </div>
717
+
718
+ <!-- Compliance Frameworks Tab -->
719
+ <div id="compliance" class="tab-content hidden">
720
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
721
+ <!-- Framework Selection -->
722
+ <div class="lg:col-span-2">
723
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up">
724
+ <h3 class="font-semibold text-lg text-white mb-6">Compliance Framework Management</h3>
725
+
726
+ <div class="mb-6">
727
+ <label class="block text-sm font-medium text-gray-300 mb-2">Select Framework</label>
728
+ <select id="frameworkSelect" class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400" onchange="loadFrameworkRules()">
729
+ <option value="">Choose a framework...</option>
730
+ <option value="nist">NIST 800-53 - Security and Privacy Controls</option>
731
+ <option value="iso27001">ISO/IEC 27001 - Information Security</option>
732
+ <option value="pcidss">PCI-DSS - Payment Card Industry</option>
733
+ <option value="soc2">SOC 2 - Service Organization Control</option>
734
+ <option value="gdpr">GDPR - Data Protection</option>
735
+ <option value="hipaa">HIPAA - Healthcare Security</option>
736
+ <option value="custom">Import Custom Framework</option>
737
+ </select>
738
+ </div>
739
 
740
+ <!-- Framework Rules Display -->
741
+ <div id="frameworkRules" class="hidden">
742
+ <h4 class="font-semibold text-white mb-4">Framework Rules</h4>
743
+ <div class="space-y-3 max-h-96 overflow-y-auto">
744
+ <!-- Rules will be dynamically loaded here -->
 
 
 
745
  </div>
746
+ </div>
747
+
748
+ <!-- Import Custom Framework -->
749
+ <div id="customFrameworkImport" class="hidden">
750
+ <h4 class="font-semibold text-white mb-4">Import Custom Framework</h4>
751
+ <div class="space-y-4">
752
+ <div>
753
+ <label class="block text-sm font-medium text-gray-300 mb-2">Framework Name</label>
754
+ <input type="text" class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400" placeholder="e.g., Quantum Security Framework">
755
+ </div>
756
+ <div>
757
+ <label class="block text-sm font-medium text-gray-300 mb-2">Upload Rules File</label>
758
+ <div class="border-2 border-dashed border-white/20 rounded-lg p-6 text-center hover:border-yellow-400 transition-all">
759
+ <i data-feather="upload" class="w-8 h-8 mx-auto text-gray-400 mb-2"></i>
760
+ <p class="text-sm text-gray-300">Drop your JSON/YAML file here</p>
761
+ <p class="text-xs text-gray-500 mt-1">or click to browse</p>
762
+ </div>
763
+ </div>
764
+ <button class="w-full px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
765
+ Import Framework
766
+ </button>
767
  </div>
768
  </div>
 
769
  </div>
770
 
771
+ <!-- Active Compliance Checks -->
772
+ <div class="card-hover rounded-xl p-6 mt-6" data-aos="fade-up" data-aos-delay="100">
773
+ <h3 class="font-semibold text-lg text-white mb-4">Active Compliance Checks</h3>
774
+ <div class="space-y-3">
775
+ <div class="flex items-center justify-between p-3 border border-white/20 rounded-lg">
776
+ <div class="flex items-center space-x-3">
777
+ <input type="checkbox" checked class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
778
+ <div>
779
+ <p class="font-medium text-white">NIST 800-53</p>
780
+ <p class="text-xs text-gray-400">Last checked: 2 hours ago</p>
781
+ </div>
782
+ </div>
783
+ <button class="text-sm text-blue-400 hover:text-blue-300">Run Check</button>
784
  </div>
785
+ <div class="flex items-center justify-between p-3 border border-white/20 rounded-lg">
786
+ <div class="flex items-center space-x-3">
787
+ <input type="checkbox" checked class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
788
+ <div>
789
+ <p class="font-medium text-white">ISO/IEC 27001</p>
790
+ <p class="text-xs text-gray-400">Last checked: 1 day ago</p>
791
+ </div>
792
+ </div>
793
+ <button class="text-sm text-blue-400 hover:text-blue-300">Run Check</button>
794
  </div>
795
  </div>
796
+ </div>
797
+ </div>
798
+
799
+ <!-- Framework Templates -->
800
+ <div class="space-y-6">
801
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
802
+ <h4 class="font-semibold text-white mb-4">Framework Templates</h4>
803
+ <div class="space-y-3">
804
+ <button onclick="loadFrameworkTemplate('nist')" class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
805
+ <div class="flex items-center justify-between">
806
+ <div>
807
+ <p class="font-medium text-white">NIST Cryptographic Controls</p>
808
+ <p class="text-xs text-gray-400">200+ predefined rules</p>
809
+ </div>
810
+ <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
811
+ </div>
812
+ </button>
813
+ <button onclick="loadFrameworkTemplate('quantum')" class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
814
+ <div class="flex items-center justify-between">
815
+ <div>
816
+ <p class="font-medium text-white">Quantum-Safe Template</p>
817
+ <p class="text-xs text-gray-400">40+ quantum-specific rules</p>
818
+ </div>
819
+ <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
820
+ </div>
821
+ </button>
822
+ <button onclick="loadFrameworkTemplate('minimal')" class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
823
+ <div class="flex items-center justify-between">
824
+ <div>
825
+ <p class="font-medium text-white">Minimal Security</p>
826
+ <p class="text-xs text-gray-400">Essential controls only</p>
827
+ </div>
828
+ <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
829
+ </div>
830
+ </button>
831
+ </div>
832
  </div>
833
 
834
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="300">
835
+ <h4 class="font-semibold text-white mb-4">Compliance Status</h4>
836
+ <div class="space-y-3">
837
+ <div class="flex justify-between items-center">
838
+ <span class="text-sm text-gray-400">Total Frameworks</span>
839
+ <span class="text-sm font-medium text-white">6</span>
840
  </div>
841
+ <div class="flex justify-between items-center">
842
+ <span class="text-sm text-gray-400">Active Checks</span>
843
+ <span class="text-sm font-medium text-green-400">4</span>
844
+ </div>
845
+ <div class="flex justify-between items-center">
846
+ <span class="text-sm text-gray-400">Failed Controls</span>
847
+ <span class="text-sm font-medium text-red-400">127</span>
848
+ </div>
849
+ <div class="flex justify-between items-center">
850
+ <span class="text-sm text-gray-400">Last Assessment</span>
851
+ <span class="text-sm font-medium text-white">2h ago</span>
852
  </div>
853
  </div>
 
854
  </div>
855
  </div>
856
  </div>
857
+ </div>
858
+
859
+ <!-- Custom Rules Tab -->
860
+ <div id="rules" class="tab-content hidden">
861
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
862
+ <!-- Rule Builder -->
863
+ <div class="lg:col-span-2">
864
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up">
865
+ <h3 class="font-semibold text-lg text-white mb-6">Custom Rule Builder</h3>
866
+
867
+ <form class="space-y-6">
868
+ <div>
869
+ <label class="block text-sm font-medium text-gray-300 mb-2">Rule Name *</label>
870
+ <input type="text" class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400" placeholder="e.g., Quantum-Safe Key Length Check">
871
+ </div>
872
 
873
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
874
+ <div>
875
+ <label class="block text-sm font-medium text-gray-300 mb-2">Category</label>
876
+ <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
877
+ <option>Cryptographic Algorithms</option>
878
+ <option>Key Management</option>
879
+ <option>Protocol Security</option>
880
+ <option>Certificate Validation</option>
881
+ <option>Quantum Readiness</option>
882
+ </select>
883
+ </div>
884
+ <div>
885
+ <label class="block text-sm font-medium text-gray-300 mb-2">Severity</label>
886
+ <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
887
+ <option>Critical</option>
888
+ <option>High</option>
889
+ <option>Medium</option>
890
+ <option>Low</option>
891
+ <option>Info</option>
892
+ </select>
893
+ </div>
894
+ </div>
895
+
896
+ <div>
897
+ <label class="block text-sm font-medium text-gray-300 mb-2">Rule Description</label>
898
+ <textarea class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400" rows="3" placeholder="Describe what this rule checks..."></textarea>
899
+ </div>
900
+
901
+ <div>
902
+ <label class="block text-sm font-medium text-gray-300 mb-2">Rule Logic</label>
903
+ <div class="space-y-3">
904
+ <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
905
+ <option>When asset type is...</option>
906
+ <option>When algorithm equals...</option>
907
+ <option>When key length is less than...</option>
908
+ <option>When protocol version is...</option>
909
+ <option>When certificate expires in...</option>
910
+ </select>
911
+
912
+ <div class="flex items-center space-x-2">
913
+ <select class="flex-1 px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
914
+ <option>equals</option>
915
+ <option>not equals</option>
916
+ <option>contains</option>
917
+ <option>less than</option>
918
+ <option>greater than</option>
919
+ </select>
920
+ <input type="text" class="flex-1 px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400" placeholder="Value">
921
+ </div>
922
+
923
+ <button type="button" class="w-full px-3 py-2 border border-dashed border-white/20 text-gray-400 rounded-lg hover:border-yellow-400 hover:text-yellow-400">
924
+ <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
925
+ Add Condition
926
+ </button>
927
+ </div>
928
+ </div>
929
+
930
+ <div>
931
+ <label class="block text-sm font-medium text-gray-300 mb-2">Remediation Guidance</label>
932
+ <textarea class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400" rows="2" placeholder="Provide guidance on how to fix this issue..."></textarea>
933
+ </div>
934
+
935
+ <div class="flex justify-end space-x-3">
936
+ <button type="button" class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
937
+ Test Rule
938
+ </button>
939
+ <button type="submit" class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
940
+ Save Rule
941
+ </button>
942
+ </div>
943
+ </form>
944
+ </div>
945
+
946
+ <!-- Existing Custom Rules -->
947
+ <div class="card-hover rounded-xl overflow-hidden mt-6" data-aos="fade-up" data-aos-delay="100">
948
+ <div class="p-6 border-b border-white/10">
949
+ <h3 class="font-semibold text-lg text-white">Custom Rules</h3>
950
  </div>
951
+ <div class="p-6">
952
+ <div class="space-y-3">
953
+ <div class="p-4 border border-white/20 rounded-lg hover:bg-white/5">
954
+ <div class="flex items-center justify-between mb-2">
955
+ <h4 class="font-medium text-white">RSA Key Size Check</h4>
956
+ <span class="px-2 py-1 text-xs bg-red-400/20 text-red-400 rounded-full">Critical</span>
957
+ </div>
958
+ <p class="text-sm text-gray-400 mb-2">Ensures RSA keys are at least 2048 bits</p>
959
+ <div class="flex items-center space-x-4 text-xs">
960
+ <span class="text-gray-500">Category: Key Management</span>
961
+ <button class="text-blue-400 hover:text-blue-300">Edit</button>
962
+ <button class="text-red-400 hover:text-red-300">Delete</button>
963
+ </div>
964
+ </div>
965
+
966
+ <div class="p-4 border border-white/20 rounded-lg hover:bg-white/5">
967
+ <div class="flex items-center justify-between mb-2">
968
+ <h4 class="font-medium text-white">Quantum-Safe Algorithm Check</h4>
969
+ <span class="px-2 py-1 text-xs bg-yellow-400/20 text-yellow-400 rounded-full">High</span>
970
+ </div>
971
+ <p class="text-sm text-gray-400 mb-2">Identifies algorithms vulnerable to quantum attacks</p>
972
+ <div class="flex items-center space-x-4 text-xs">
973
+ <span class="text-gray-500">Category: Quantum Readiness</span>
974
+ <button class="text-blue-400 hover:text-blue-300">Edit</button>
975
+ <button class="text-red-400 hover:text-red-300">Delete</button>
976
+ </div>
977
+ </div>
978
+ </div>
979
  </div>
980
+ </div>
981
+ </div>
982
+
983
+ <!-- Rule Management Sidebar -->
984
+ <div class="space-y-6">
985
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
986
+ <h4 class="font-semibold text-white mb-4">Rule Templates</h4>
987
+ <div class="space-y-2">
988
+ <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
989
+ <p class="text-sm font-medium text-white">Weak Algorithm Detection</p>
990
+ <p class="text-xs text-gray-400">Identify deprecated algorithms</p>
991
+ </button>
992
+ <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
993
+ <p class="text-sm font-medium text-white">Certificate Expiry Check</p>
994
+ <p class="text-xs text-gray-400">Alert on expiring certificates</p>
995
+ </button>
996
+ <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
997
+ <p class="text-sm font-medium text-white">PQC Migration Readiness</p>
998
+ <p class="text-xs text-gray-400">Check quantum-safe status</p>
999
+ </button>
1000
  </div>
1001
+ </div>
1002
+
1003
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="300">
1004
+ <h4 class="font-semibold text-white mb-4">Import/Export Rules</h4>
1005
+ <div class="space-y-3">
1006
+ <button class="w-full px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
1007
+ <i data-feather="upload" class="w-4 h-4 inline mr-2"></i>
1008
+ Import Rules
1009
+ </button>
1010
+ <button class="w-full px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
1011
+ <i data-feather="download" class="w-4 h-4 inline mr-2"></i>
1012
+ Export All Rules
1013
+ </button>
1014
+ <button class="w-full px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
1015
+ <i data-feather="share-2" class="w-4 h-4 inline mr-2"></i>
1016
+ Share Rules
1017
+ </button>
1018
+ </div>
1019
+ </div>
1020
  </div>
1021
  </div>
1022
  </div>
1023
+
1024
+ <!-- Reports Tab -->
1025
+ <div id="reports" class="tab-content hidden">
1026
+ <!-- ...existing code... -->
1027
+ </div>
1028
+
1029
+ <!-- Trends Tab -->
1030
+ <div id="trends" class="tab-content hidden">
1031
+ <!-- ...existing code... -->
1032
+ </div>
1033
  </div>
1034
  </main>
1035
  </div>
1036
 
1037
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
1038
  <script>
1039
+ // Initialize feather icons and AOS immediately
1040
+ document.addEventListener('DOMContentLoaded', function () {
1041
+ // Replace feather icons
1042
+ feather.replace();
1043
 
1044
+ // Initialize AOS with better settings
1045
+ AOS.init({
1046
+ duration: 400,
1047
+ once: true,
1048
+ offset: 0,
1049
+ easing: 'ease-out',
1050
+ delay: 0,
1051
+ anchorPlacement: 'top-bottom',
1052
+ disable: function () {
1053
+ // Disable AOS on mobile devices to prevent issues
1054
+ return window.innerWidth < 768;
1055
+ }
1056
  });
 
1057
 
1058
+ // Force AOS refresh after a short delay
1059
+ setTimeout(() => {
1060
+ AOS.refresh();
1061
+ }, 100);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1062
  });
1063
 
1064
+ // Tab switching functionality
1065
+ function showTab(tabName) {
1066
+ // Hide all tab contents
1067
+ document.querySelectorAll('.tab-content').forEach(content => {
1068
+ content.classList.add('hidden');
1069
+ });
1070
+
1071
+ // Remove active class from all tabs
1072
+ document.querySelectorAll('.flex button[onclick^="showTab"]').forEach(button => {
1073
+ button.classList.remove('tab-active');
1074
+ button.classList.add('text-gray-400', 'hover:text-gray-200');
1075
+ });
1076
+
1077
+ // Show selected tab content
1078
+ document.getElementById(tabName).classList.remove('hidden');
1079
+
1080
+ // Add active class to clicked tab
1081
+ event.target.classList.add('tab-active');
1082
+ event.target.classList.remove('text-gray-400', 'hover:text-gray-200');
1083
+
1084
+ // Re-render feather icons
1085
+ feather.replace();
1086
+ AOS.refresh();
1087
+ }
1088
+
1089
+ // Load framework rules
1090
+ function loadFrameworkRules() {
1091
+ const select = document.getElementById('frameworkSelect');
1092
+ const rulesDiv = document.getElementById('frameworkRules');
1093
+ const customDiv = document.getElementById('customFrameworkImport');
1094
+
1095
+ if (select.value === 'custom') {
1096
+ rulesDiv.classList.add('hidden');
1097
+ customDiv.classList.remove('hidden');
1098
+ } else if (select.value) {
1099
+ customDiv.classList.add('hidden');
1100
+ rulesDiv.classList.remove('hidden');
1101
+
1102
+ // Load framework-specific rules
1103
+ const rulesContainer = rulesDiv.querySelector('.space-y-3');
1104
+ rulesContainer.innerHTML = getFrameworkRules(select.value);
1105
+ feather.replace();
1106
+ } else {
1107
+ rulesDiv.classList.add('hidden');
1108
+ customDiv.classList.add('hidden');
1109
  }
1110
+ }
1111
 
1112
+ // Get framework rules (sample data)
1113
+ function getFrameworkRules(framework) {
1114
+ const rules = {
1115
+ nist: [
1116
+ { id: 'SC-13', name: 'Cryptographic Protection', status: 'pass', description: 'Use of approved cryptographic mechanisms' },
1117
+ { id: 'SC-17', name: 'PKI Certificates', status: 'fail', description: 'Public key infrastructure certificates' },
1118
+ { id: 'IA-5', name: 'Authenticator Management', status: 'pass', description: 'Management of cryptographic keys' },
1119
+ { id: 'SC-28', name: 'Protection of Information at Rest', status: 'warning', description: 'Encryption of data at rest' }
1120
+ ],
1121
+ iso27001: [
1122
+ { id: 'A.10.1.1', name: 'Policy on Cryptography', status: 'pass', description: 'Cryptographic controls policy' },
1123
+ { id: 'A.10.1.2', name: 'Key Management', status: 'pass', description: 'Cryptographic key management' },
1124
+ { id: 'A.14.1.3', name: 'Protecting Application Data', status: 'fail', description: 'Application services security' }
1125
+ ],
1126
+ pcidss: [
1127
+ { id: '3.4', name: 'Strong Cryptography', status: 'warning', description: 'Render PAN unreadable using strong crypto' },
1128
+ { id: '4.1', name: 'Strong Crypto in Transit', status: 'pass', description: 'Use strong cryptography for transmission' }
1129
+ ]
1130
+ };
 
 
 
1131
 
1132
+ const frameworkRules = rules[framework] || [];
1133
+ return frameworkRules.map(rule => `
1134
+ <div class="p-4 border border-white/20 rounded-lg hover:bg-white/5">
1135
+ <div class="flex items-center justify-between mb-2">
1136
+ <div class="flex items-center space-x-3">
1137
+ <input type="checkbox" checked class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
1138
+ <div>
1139
+ <h4 class="font-medium text-white">${rule.id}: ${rule.name}</h4>
1140
+ <p class="text-sm text-gray-400">${rule.description}</p>
1141
+ </div>
1142
+ </div>
1143
+ <div class="flex items-center space-x-2">
1144
+ ${getStatusIcon(rule.status)}
1145
+ <button class="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded">
1146
+ <i data-feather="edit-2" class="w-4 h-4"></i>
1147
+ </button>
1148
+ </div>
1149
+ </div>
1150
+ </div>
1151
+ `).join('');
1152
+ }
1153
+
1154
+ // Get status icon
1155
+ function getStatusIcon(status) {
1156
+ const icons = {
1157
+ pass: '<i data-feather="check-circle" class="w-5 h-5 text-green-400"></i>',
1158
+ fail: '<i data-feather="x-circle" class="w-5 h-5 text-red-400"></i>',
1159
+ warning: '<i data-feather="alert-triangle" class="w-5 h-5 text-yellow-400"></i>'
1160
+ };
1161
+ return icons[status] || '';
1162
+ }
1163
+
1164
+ // Load framework template
1165
+ function loadFrameworkTemplate(templateType) {
1166
+ document.getElementById('frameworkSelect').value = templateType === 'quantum' ? 'custom' : templateType;
1167
+ loadFrameworkRules();
1168
+ }
1169
  </script>
1170
  </body>
1171
 
assets.html CHANGED
The diff for this file is too large to render. See raw diff
 
cboms.html CHANGED
@@ -7,29 +7,57 @@
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 {
@@ -37,55 +65,132 @@
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>
@@ -93,14 +198,14 @@
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">
@@ -108,10 +213,10 @@
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>
@@ -119,219 +224,833 @@
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>
@@ -339,19 +1058,77 @@
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>
 
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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 
11
  <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
13
 
14
  body {
15
  font-family: 'Inter', sans-serif;
16
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
17
+ min-height: 100vh;
18
+ }
19
+
20
+ /* Ensure content is visible by default */
21
+ [data-aos] {
22
+ opacity: 1 !important;
23
+ transform: none !important;
24
+ }
25
+
26
+ [data-aos].aos-animate {
27
+ opacity: 1 !important;
28
+ }
29
+
30
+ .gradient-text {
31
+ background: linear-gradient(135deg, #F59E0B, #FBBF24, #FCD34D);
32
+ -webkit-background-clip: text;
33
+ -webkit-text-fill-color: transparent;
34
+ background-clip: text;
35
  }
36
 
37
  .sidebar {
38
+ backdrop-filter: blur(20px);
39
+ background: rgba(15, 23, 42, 0.8);
40
+ border-right: 1px solid rgba(255, 255, 255, 0.1);
41
+ transition: all 0.3s ease;
42
+ }
43
+
44
+ .card-hover {
45
+ backdrop-filter: blur(15px);
46
+ background: rgba(255, 255, 255, 0.05);
47
+ border: 1px solid rgba(255, 255, 255, 0.1);
48
  transition: all 0.3s ease;
49
  }
50
 
51
  .card-hover:hover {
52
  transform: translateY(-2px);
53
+ background: rgba(255, 255, 255, 0.08);
54
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
55
+ border-color: rgba(245, 158, 11, 0.3);
56
  }
57
 
58
  .tab-active {
59
  border-bottom: 3px solid #F59E0B;
60
+ color: #F59E0B;
61
  }
62
 
63
  .json-view {
 
65
  font-size: 12px;
66
  line-height: 1.4;
67
  }
68
+
69
+ .action-button {
70
+ background: linear-gradient(135deg, #F59E0B, #FBBF24);
71
+ transition: all 0.3s ease;
72
+ box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
73
+ }
74
+
75
+ .action-button:hover {
76
+ transform: translateY(-2px);
77
+ box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
78
+ }
79
+
80
+ .particle {
81
+ position: absolute;
82
+ width: 2px;
83
+ height: 2px;
84
+ background: #F59E0B;
85
+ border-radius: 50%;
86
+ animation: particle-float 8s linear infinite;
87
+ opacity: 0.7;
88
+ }
89
+
90
+ @keyframes particle-float {
91
+ 0% {
92
+ transform: translateY(100vh) translateX(0px);
93
+ opacity: 0;
94
+ }
95
+ 10% {
96
+ opacity: 0.7;
97
+ }
98
+ 90% {
99
+ opacity: 0.7;
100
+ }
101
+ 100% {
102
+ transform: translateY(-100px) translateX(100px);
103
+ opacity: 0;
104
+ }
105
+ }
106
+
107
+ /* Fix select dropdown styling */
108
+ select option {
109
+ background-color: #1e293b;
110
+ color: #ffffff;
111
+ padding: 8px;
112
+ }
113
+
114
+ select option:hover {
115
+ background-color: #334155;
116
+ }
117
+
118
+ select option:checked {
119
+ background-color: #475569;
120
+ }
121
+
122
+ /* Ensure select has proper background */
123
+ select {
124
+ background-color: rgba(255, 255, 255, 0.1);
125
+ color: #ffffff;
126
+ }
127
+
128
+ select:focus {
129
+ background-color: rgba(255, 255, 255, 0.15);
130
+ }
131
  </style>
132
  </head>
133
 
134
  <body class="flex h-screen overflow-hidden">
135
+ <!-- Animated Background Particles -->
136
+ <div class="fixed inset-0 pointer-events-none z-0">
137
+ <div class="particle" style="left: 10%; animation-delay: 0s;"></div>
138
+ <div class="particle" style="left: 30%; animation-delay: 2s;"></div>
139
+ <div class="particle" style="left: 50%; animation-delay: 4s;"></div>
140
+ <div class="particle" style="left: 70%; animation-delay: 6s;"></div>
141
+ <div class="particle" style="left: 90%; animation-delay: 8s;"></div>
142
+ </div>
143
+
144
  <!-- Sidebar -->
145
+ <div class="sidebar text-white w-64 flex-shrink-0 flex flex-col relative z-10">
146
+ <div class="p-4 border-b border-white/10">
147
+ <a href="index.html" class="flex items-center space-x-3 hover:opacity-80 transition-opacity">
148
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
149
+ <i data-feather="shield" class="text-gray-900 w-5 h-5"></i>
150
  </div>
151
+ <h1 class="text-xl font-bold">EY <span class="gradient-text">Quantum Safe</span></h1>
152
+ </a>
153
  </div>
154
 
155
  <nav class="flex-1 overflow-y-auto p-4 space-y-1">
156
  <a href="index.html"
157
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
158
+ <i data-feather="home" class="w-5 h-5"></i>
159
+ <span>Home</span>
160
+ </a>
161
+ <a href="dashboard.html"
162
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
163
  <i data-feather="layout" class="w-5 h-5"></i>
164
  <span>Dashboard</span>
165
  </a>
166
+ <a href="cboms.html" class="flex items-center space-x-3 p-3 rounded-lg bg-yellow-400/20 text-yellow-400 border border-yellow-400/30">
167
  <i data-feather="file-text" class="w-5 h-5"></i>
168
  <span>CBOMs</span>
169
  </a>
170
  <a href="assets.html"
171
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
172
  <i data-feather="lock" class="w-5 h-5"></i>
173
  <span>Assets</span>
174
  </a>
175
  <a href="integrations.html"
176
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
177
  <i data-feather="link" class="w-5 h-5"></i>
178
  <span>Integrations</span>
179
  </a>
180
  <a href="analytics.html"
181
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
182
  <i data-feather="bar-chart-2" class="w-5 h-5"></i>
183
  <span>Analytics</span>
184
  </a>
185
  </nav>
186
 
187
+ <div class="p-4 border-t border-white/10">
188
  <div class="flex items-center space-x-3">
189
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-600 to-gray-700 flex items-center justify-center">
190
+ <i data-feather="user" class="text-gray-300 w-5 h-5"></i>
191
  </div>
192
  <div>
193
+ <p class="text-sm font-medium">Josep Mateu</p>
194
  <p class="text-xs text-gray-400">Administrator</p>
195
  </div>
196
  </div>
 
198
  </div>
199
 
200
  <!-- Main Content -->
201
+ <div class="flex-1 flex flex-col overflow-hidden relative z-10">
202
  <!-- Top Navigation -->
203
+ <header class="backdrop-filter backdrop-blur-lg bg-white/5 border-b border-white/10 flex items-center justify-between p-4">
204
  <div class="flex items-center space-x-4">
205
+ <button class="md:hidden text-white">
206
  <i data-feather="menu"></i>
207
  </button>
208
+ <h2 class="text-xl font-semibold text-white">CBOM Management</h2>
209
  </div>
210
 
211
  <div class="flex items-center space-x-4">
 
213
  <i data-feather="search"
214
  class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
215
  <input type="text" placeholder="Search CBOMs..."
216
+ class="pl-10 pr-4 py-2 bg-white/10 border border-white/20 text-white placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
217
  </div>
218
  <button
219
+ class="px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
220
  <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
221
  New CBOM
222
  </button>
 
224
  </header>
225
 
226
  <!-- Main Content Area -->
227
+ <main class="flex-1 overflow-y-auto p-6">
228
  <!-- Tabs Navigation -->
229
+ <div class="card-hover rounded-xl mb-6">
230
+ <div class="flex border-b border-white/10 overflow-x-auto">
231
+ <button class="px-6 py-4 font-medium tab-active" onclick="showTab('overview')">Overview</button>
232
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('create')">Create New</button>
233
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('import')">Import</button>
234
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('templates')">Templates</button>
235
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('dependencies')">Dependencies</button>
236
  </div>
237
  </div>
238
 
239
+ <!-- Tab Content -->
240
+ <div id="tabContent">
241
+ <!-- Overview Tab -->
242
+ <div id="overview" class="tab-content">
243
+ <!-- Stats Overview -->
244
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
245
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up">
246
+ <div class="flex items-center justify-between">
247
+ <div>
248
+ <p class="text-sm font-medium text-gray-400">Total CBOMs</p>
249
+ <p class="text-3xl font-bold text-white mt-1">24</p>
250
+ </div>
251
+ <div class="p-3 rounded-lg bg-yellow-400/20 text-yellow-400">
252
+ <i data-feather="file-text" class="w-6 h-6"></i>
253
+ </div>
254
  </div>
255
+ </div>
256
 
257
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
258
+ <div class="flex items-center justify-between">
259
+ <div>
260
+ <p class="text-sm font-medium text-gray-400">Active</p>
261
+ <p class="text-3xl font-bold text-white mt-1">19</p>
262
+ </div>
263
+ <div class="p-3 rounded-lg bg-green-400/20 text-green-400">
264
+ <i data-feather="check-circle" class="w-6 h-6"></i>
265
  </div>
 
 
266
  </div>
267
+ </div>
268
 
269
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
270
+ <div class="flex items-center justify-between">
271
+ <div>
272
+ <p class="text-sm font-medium text-gray-400">Draft</p>
273
+ <p class="text-3xl font-bold text-white mt-1">3</p>
274
+ </div>
275
+ <div class="p-3 rounded-lg bg-blue-400/20 text-blue-400">
276
+ <i data-feather="edit" class="w-6 h-6"></i>
277
  </div>
 
 
278
  </div>
279
+ </div>
280
 
281
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="300">
282
+ <div class="flex items-center justify-between">
283
+ <div>
284
+ <p class="text-sm font-medium text-gray-400">Archived</p>
285
+ <p class="text-3xl font-bold text-white mt-1">2</p>
286
+ </div>
287
+ <div class="p-3 rounded-lg bg-gray-400/20 text-gray-400">
288
+ <i data-feather="archive" class="w-6 h-6"></i>
289
  </div>
 
 
290
  </div>
291
  </div>
292
+ </div>
293
 
294
+ <!-- Filters and Search -->
295
+ <div class="card-hover rounded-xl p-6 mb-6" data-aos="fade-up" data-aos-delay="400">
296
+ <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
297
+ <div class="flex items-center space-x-2">
298
+ <i data-feather="filter" class="text-gray-400"></i>
299
+ <span class="text-sm text-gray-400">Filters:</span>
300
+ <select class="bg-white/10 border border-white/20 text-white text-sm rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-yellow-400">
301
+ <option>All Status</option>
302
+ <option>Active</option>
303
+ <option>Draft</option>
304
+ <option>Archived</option>
305
+ </select>
306
+ <select class="bg-white/10 border border-white/20 text-white text-sm rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-yellow-400">
307
+ <option>All Risk Levels</option>
308
+ <option>High Risk</option>
309
+ <option>Medium Risk</option>
310
+ <option>Low Risk</option>
311
+ </select>
312
+ </div>
313
+ <div class="relative">
314
+ <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4"></i>
315
+ <input type="text" placeholder="Search CBOMs..." class="pl-10 pr-4 py-2 bg-white/10 border border-white/20 text-white placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
316
+ </div>
317
+ </div>
318
  </div>
 
319
 
320
+ <!-- CBOMs List -->
321
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
322
+ <!-- CBOM Card 1 -->
323
+ <div class="card-hover rounded-xl overflow-hidden risk-high" data-aos="fade-up" data-aos-delay="500">
324
+ <div class="p-6">
325
+ <div class="flex items-start justify-between mb-4">
326
+ <div>
327
+ <h3 class="font-semibold text-lg text-white">Enterprise Web App</h3>
328
+ <p class="text-sm text-gray-400">Created 2 days ago</p>
329
+ </div>
330
+ <span class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Active</span>
331
+ </div>
332
+
333
+ <p class="text-sm text-gray-300 mb-4">Main customer-facing web application with payment processing capabilities</p>
334
+
335
+ <div class="space-y-2 mb-4">
336
+ <div class="flex justify-between text-sm">
337
+ <span class="text-gray-400">Assets</span>
338
+ <span class="text-white">342</span>
339
+ </div>
340
+ <div class="flex justify-between text-sm">
341
+ <span class="text-gray-400">Risk Level</span>
342
+ <span class="text-red-400">High</span>
343
+ </div>
344
+ <div class="flex justify-between text-sm">
345
+ <span class="text-gray-400">Last Assessment</span>
346
+ <span class="text-white">12 hours ago</span>
347
+ </div>
348
+ </div>
349
+
350
+ <div class="flex space-x-2">
351
+ <button class="flex-1 px-3 py-2 bg-white/10 text-white text-sm rounded-lg hover:bg-white/20 transition-colors">
352
+ <i data-feather="eye" class="w-4 h-4 inline mr-1"></i>
353
+ View
354
+ </button>
355
+ <button class="flex-1 px-3 py-2 action-button text-gray-900 text-sm rounded-lg font-semibold">
356
+ <i data-feather="play" class="w-4 h-4 inline mr-1"></i>
357
+ Assess
358
+ </button>
359
+ </div>
360
  </div>
361
  </div>
362
 
363
+ <!-- CBOM Card 2 -->
364
+ <div class="card-hover rounded-xl overflow-hidden risk-medium" data-aos="fade-up" data-aos-delay="600">
365
+ <div class="p-6">
366
+ <div class="flex items-start justify-between mb-4">
367
+ <div>
368
+ <h3 class="font-semibold text-lg text-white">Payment Gateway</h3>
369
+ <p class="text-sm text-gray-400">Created 1 week ago</p>
370
+ </div>
371
+ <span class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Active</span>
372
+ </div>
373
+
374
+ <p class="text-sm text-gray-300 mb-4">Secure payment processing system handling credit card transactions</p>
375
+
376
+ <div class="space-y-2 mb-4">
377
+ <div class="flex justify-between text-sm">
378
+ <span class="text-gray-400">Assets</span>
379
+ <span class="text-white">128</span>
380
+ </div>
381
+ <div class="flex justify-between text-sm">
382
+ <span class="text-gray-400">Risk Level</span>
383
+ <span class="text-yellow-400">Medium</span>
384
+ </div>
385
+ <div class="flex justify-between text-sm">
386
+ <span class="text-gray-400">Last Assessment</span>
387
+ <span class="text-white">3 days ago</span>
388
+ </div>
389
+ </div>
390
+
391
+ <div class="flex space-x-2">
392
+ <button class="flex-1 px-3 py-2 bg-white/10 text-white text-sm rounded-lg hover:bg-white/20 transition-colors">
393
+ <i data-feather="eye" class="w-4 h-4 inline mr-1"></i>
394
+ View
395
+ </button>
396
+ <button class="flex-1 px-3 py-2 action-button text-gray-900 text-sm rounded-lg font-semibold">
397
+ <i data-feather="play" class="w-4 h-4 inline mr-1"></i>
398
+ Assess
399
+ </button>
400
+ </div>
401
  </div>
402
+ </div>
403
+
404
+ <!-- CBOM Card 3 -->
405
+ <div class="card-hover rounded-xl overflow-hidden risk-low" data-aos="fade-up" data-aos-delay="700">
406
+ <div class="p-6">
407
+ <div class="flex items-start justify-between mb-4">
408
+ <div>
409
+ <h3 class="font-semibold text-lg text-white">Mobile Banking App</h3>
410
+ <p class="text-sm text-gray-400">Created 2 weeks ago</p>
411
+ </div>
412
+ <span class="px-2 py-1 text-xs font-medium bg-blue-400/20 text-blue-400 rounded-full">Draft</span>
413
+ </div>
414
+
415
+ <p class="text-sm text-gray-300 mb-4">iOS and Android banking application for retail customers</p>
416
+
417
+ <div class="space-y-2 mb-4">
418
+ <div class="flex justify-between text-sm">
419
+ <span class="text-gray-400">Assets</span>
420
+ <span class="text-white">89</span>
421
+ </div>
422
+ <div class="flex justify-between text-sm">
423
+ <span class="text-gray-400">Risk Level</span>
424
+ <span class="text-green-400">Low</span>
425
+ </div>
426
+ <div class="flex justify-between text-sm">
427
+ <span class="text-gray-400">Last Assessment</span>
428
+ <span class="text-white">Not assessed</span>
429
+ </div>
430
+ </div>
431
+
432
+ <div class="flex space-x-2">
433
+ <button class="flex-1 px-3 py-2 bg-white/10 text-white text-sm rounded-lg hover:bg-white/20 transition-colors">
434
+ <i data-feather="eye" class="w-4 h-4 inline mr-1"></i>
435
+ View
436
+ </button>
437
+ <button class="flex-1 px-3 py-2 action-button text-gray-900 text-sm rounded-lg font-semibold">
438
+ <i data-feather="play" class="w-4 h-4 inline mr-1"></i>
439
+ Assess
440
+ </button>
441
+ </div>
442
  </div>
443
+ </div>
444
+
445
+ <!-- Add more CBOM cards... -->
446
+ </div>
447
+ </div>
448
+
449
+ <!-- Create New Tab -->
450
+ <div id="create" class="tab-content hidden">
451
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
452
+ <div class="lg:col-span-2">
453
+ <div class="card-hover rounded-xl p-6">
454
+ <h3 class="font-semibold text-lg text-white mb-6">Create New CBOM</h3>
455
+
456
+ <form class="space-y-6">
457
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
458
+ <div>
459
+ <label class="block text-sm font-medium text-gray-300 mb-2">CBOM Name *</label>
460
+ <input type="text"
461
+ class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
462
+ placeholder="Enter CBOM name">
463
+ </div>
464
+ <div>
465
+ <label class="block text-sm font-medium text-gray-300 mb-2">Version</label>
466
+ <input type="text"
467
+ class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
468
+ placeholder="1.0.0">
469
+ </div>
470
+ </div>
471
+
472
+ <div>
473
+ <label class="block text-sm font-medium text-gray-300 mb-2">Description</label>
474
+ <textarea
475
+ class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
476
+ rows="4" placeholder="Describe the purpose and scope of this CBOM"></textarea>
477
+ </div>
478
+
479
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
480
+ <div>
481
+ <label class="block text-sm font-medium text-gray-300 mb-2">Application Type</label>
482
+ <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
483
+ <option>Web Application</option>
484
+ <option>Mobile Application</option>
485
+ <option>Desktop Application</option>
486
+ <option>Microservices</option>
487
+ <option>IoT System</option>
488
+ <option>Legacy System</option>
489
+ </select>
490
+ </div>
491
+ <div>
492
+ <label class="block text-sm font-medium text-gray-300 mb-2">Criticality Level</label>
493
+ <select class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
494
+ <option>Critical</option>
495
+ <option>High</option>
496
+ <option>Medium</option>
497
+ <option>Low</option>
498
+ </select>
499
+ </div>
500
+ </div>
501
+
502
+ <div>
503
+ <label class="block text-sm font-medium text-gray-300 mb-2">Tags</label>
504
+ <input type="text"
505
+ class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"
506
+ placeholder="Add tags (comma separated)">
507
+ <p class="text-xs text-gray-400 mt-1">e.g., production, banking, customer-facing</p>
508
+ </div>
509
+
510
+ <div class="border-t border-white/10 pt-6">
511
+ <h4 class="font-medium text-white mb-4">Initial Cryptographic Assets</h4>
512
+ <div class="space-y-3">
513
+ <button type="button" class="w-full p-4 border-2 border-dashed border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all">
514
+ <i data-feather="plus" class="w-5 h-5 mx-auto text-gray-400 mb-2"></i>
515
+ <p class="text-sm text-gray-400">Add Asset Manually</p>
516
+ </button>
517
+ <button type="button" class="w-full p-4 border-2 border-dashed border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all">
518
+ <i data-feather="upload" class="w-5 h-5 mx-auto text-gray-400 mb-2"></i>
519
+ <p class="text-sm text-gray-400">Import from Integration</p>
520
+ </button>
521
+ </div>
522
+ </div>
523
+
524
+ <div class="flex justify-end space-x-4">
525
+ <button type="button" class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
526
+ Cancel
527
+ </button>
528
+ <button type="submit" class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
529
+ Create CBOM
530
+ </button>
531
+ </div>
532
+ </form>
533
  </div>
534
  </div>
535
 
536
+ <div class="space-y-6">
537
+ <div class="card-hover rounded-xl p-6">
538
+ <h4 class="font-semibold text-white mb-4">Quick Start Templates</h4>
539
+ <div class="space-y-3">
540
+ <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
541
+ <div class="flex items-center justify-between">
542
+ <div>
543
+ <p class="font-medium text-white">Web Application</p>
544
+ <p class="text-xs text-gray-400">Standard web app template</p>
545
+ </div>
546
+ <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
547
+ </div>
548
+ </button>
549
+ <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
550
+ <div class="flex items-center justify-between">
551
+ <div>
552
+ <p class="font-medium text-white">Microservices</p>
553
+ <p class="text-xs text-gray-400">Distributed system template</p>
554
+ </div>
555
+ <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
556
+ </div>
557
+ </button>
558
+ <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
559
+ <div class="flex items-center justify-between">
560
+ <div>
561
+ <p class="font-medium text-white">Legacy System</p>
562
+ <p class="text-xs text-gray-400">For older systems</p>
563
+ </div>
564
+ <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
565
+ </div>
566
+ </button>
567
+ </div>
568
+ </div>
569
+
570
+ <div class="card-hover rounded-xl p-6">
571
+ <h4 class="font-semibold text-white mb-4">Tips</h4>
572
+ <div class="space-y-3">
573
+ <div class="flex items-start space-x-2">
574
+ <i data-feather="info" class="w-4 h-4 text-blue-400 mt-0.5"></i>
575
+ <p class="text-sm text-gray-300">Use descriptive names to easily identify CBOMs</p>
576
+ </div>
577
+ <div class="flex items-start space-x-2">
578
+ <i data-feather="info" class="w-4 h-4 text-blue-400 mt-0.5"></i>
579
+ <p class="text-sm text-gray-300">Set appropriate criticality levels for prioritization</p>
580
+ </div>
581
+ <div class="flex items-start space-x-2">
582
+ <i data-feather="info" class="w-4 h-4 text-blue-400 mt-0.5"></i>
583
+ <p class="text-sm text-gray-300">Add relevant tags for better organization</p>
584
+ </div>
585
+ </div>
586
  </div>
587
+ </div>
588
+ </div>
589
+ </div>
590
+
591
+ <!-- Import Tab -->
592
+ <div id="import" class="tab-content hidden">
593
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
594
+ <div class="lg:col-span-2">
595
+ <div class="card-hover rounded-xl p-6">
596
+ <h3 class="font-semibold text-lg text-white mb-6">Import CBOM</h3>
597
+
598
+ <div class="space-y-6">
599
+ <div>
600
+ <h4 class="font-medium text-white mb-4">1. Select Import Method</h4>
601
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
602
+ <label class="cursor-pointer">
603
+ <input type="radio" name="importMethod" value="file" class="sr-only peer" checked>
604
+ <div class="p-4 border border-white/20 rounded-lg peer-checked:border-yellow-400 peer-checked:bg-yellow-400/10 hover:bg-white/5 transition-all">
605
+ <i data-feather="file" class="w-8 h-8 mx-auto mb-2 text-gray-400 peer-checked:text-yellow-400"></i>
606
+ <p class="font-medium text-center text-white">File Upload</p>
607
+ <p class="text-xs text-center text-gray-400 mt-1">Upload CBOM file</p>
608
+ </div>
609
+ </label>
610
+ <label class="cursor-pointer">
611
+ <input type="radio" name="importMethod" value="integration" class="sr-only peer">
612
+ <div class="p-4 border border-white/20 rounded-lg peer-checked:border-yellow-400 peer-checked:bg-yellow-400/10 hover:bg-white/5 transition-all">
613
+ <i data-feather="link" class="w-8 h-8 mx-auto mb-2 text-gray-400 peer-checked:text-yellow-400"></i>
614
+ <p class="font-medium text-center text-white">Integration</p>
615
+ <p class="text-xs text-center text-gray-400 mt-1">Import from tool</p>
616
+ </div>
617
+ </label>
618
+ </div>
619
+ </div>
620
+
621
+ <div id="fileUploadSection">
622
+ <h4 class="font-medium text-white mb-4">2. Upload File</h4>
623
+ <div class="border-2 border-dashed border-white/20 rounded-lg p-8 text-center hover:border-yellow-400 transition-all">
624
+ <i data-feather="upload-cloud" class="w-12 h-12 mx-auto text-gray-400 mb-4"></i>
625
+ <p class="text-white font-medium mb-2">Drag & drop your CBOM file here</p>
626
+ <p class="text-sm text-gray-400 mb-4">or</p>
627
+ <button class="px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 transition-colors">
628
+ Browse Files
629
+ </button>
630
+ <p class="text-xs text-gray-500 mt-4">Supported formats: .json, .xml, .cbom, .csv</p>
631
+ </div>
632
+ </div>
633
+
634
+ <div id="integrationSection" class="hidden">
635
+ <h4 class="font-medium text-white mb-4">2. Select Integration Source</h4>
636
+ <div class="space-y-3">
637
+ <label class="flex items-center p-3 border border-white/20 rounded-lg hover:border-yellow-400 cursor-pointer">
638
+ <input type="radio" name="integration" value="venafi" class="mr-3 text-yellow-400">
639
+ <div class="flex-1">
640
+ <p class="font-medium text-white">Venafi</p>
641
+ <p class="text-xs text-gray-400">Import from Venafi Trust Protection Platform</p>
642
+ </div>
643
+ <span class="px-2 py-1 text-xs bg-green-400/20 text-green-400 rounded-full">Connected</span>
644
+ </label>
645
+ <label class="flex items-center p-3 border border-white/20 rounded-lg hover:border-yellow-400 cursor-pointer">
646
+ <input type="radio" name="integration" value="tanium" class="mr-3 text-yellow-400">
647
+ <div class="flex-1">
648
+ <p class="font-medium text-white">Tanium</p>
649
+ <p class="text-xs text-gray-400">Import asset inventory from Tanium</p>
650
+ </div>
651
+ <span class="px-2 py-1 text-xs bg-green-400/20 text-green-400 rounded-full">Connected</span>
652
+ </label>
653
+ </div>
654
+ </div>
655
+
656
+ <div>
657
+ <h4 class="font-medium text-white mb-4">3. Import Options</h4>
658
+ <div class="space-y-3">
659
+ <div class="flex items-center space-x-3">
660
+ <input type="checkbox" id="validateSchema" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400" checked>
661
+ <label for="validateSchema" class="text-sm text-gray-300">Validate schema before import</label>
662
+ </div>
663
+ <div class="flex items-center space-x-3">
664
+ <input type="checkbox" id="mergeExisting" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
665
+ <label for="mergeExisting" class="text-sm text-gray-300">Merge with existing CBOM if name matches</label>
666
+ </div>
667
+ <div class="flex items-center space-x-3">
668
+ <input type="checkbox" id="runAssessment" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400" checked>
669
+ <label for="runAssessment" class="text-sm text-gray-300">Run risk assessment after import</label>
670
+ </div>
671
+ </div>
672
+ </div>
673
+
674
+ <div class="flex justify-end space-x-4">
675
+ <button type="button" class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
676
+ Cancel
677
+ </button>
678
+ <button type="button" class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
679
+ Import CBOM
680
+ </button>
681
+ </div>
682
+ </div>
683
  </div>
684
+ </div>
685
+
686
+ <div class="space-y-6">
687
+ <div class="card-hover rounded-xl p-6">
688
+ <h4 class="font-semibold text-white mb-4">Recent Imports</h4>
689
+ <div class="space-y-3">
690
+ <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
691
+ <div class="flex items-center space-x-3">
692
+ <i data-feather="file-text" class="w-4 h-4 text-gray-400"></i>
693
+ <div>
694
+ <p class="text-sm font-medium text-white">payment-gateway.json</p>
695
+ <p class="text-xs text-gray-400">2 hours ago</p>
696
+ </div>
697
+ </div>
698
+ <i data-feather="check-circle" class="w-4 h-4 text-green-400"></i>
699
+ </div>
700
+ <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
701
+ <div class="flex items-center space-x-3">
702
+ <i data-feather="link" class="w-4 h-4 text-gray-400"></i>
703
+ <div>
704
+ <p class="text-sm font-medium text-white">Venafi Import</p>
705
+ <p class="text-xs text-gray-400">Yesterday</p>
706
+ </div>
707
+ </div>
708
+ <i data-feather="check-circle" class="w-4 h-4 text-green-400"></i>
709
+ </div>
710
+ </div>
711
  </div>
712
+
713
+ <div class="card-hover rounded-xl p-6">
714
+ <h4 class="font-semibold text-white mb-4">Import Statistics</h4>
715
+ <div class="space-y-3">
716
+ <div class="flex justify-between items-center">
717
+ <span class="text-sm text-gray-400">Total Imports</span>
718
+ <span class="text-sm font-medium text-white">47</span>
719
+ </div>
720
+ <div class="flex justify-between items-center">
721
+ <span class="text-sm text-gray-400">Successful</span>
722
+ <span class="text-sm font-medium text-green-400">45</span>
723
+ </div>
724
+ <div class="flex justify-between items-center">
725
+ <span class="text-sm text-gray-400">Failed</span>
726
+ <span class="text-sm font-medium text-red-400">2</span>
727
+ </div>
728
+ <div class="flex justify-between items-center">
729
+ <span class="text-sm text-gray-400">Avg. Assets/Import</span>
730
+ <span class="text-sm font-medium text-white">234</span>
731
+ </div>
732
+ </div>
733
  </div>
734
  </div>
735
  </div>
736
+ </div>
737
+
738
+ <!-- Templates Tab -->
739
+ <div id="templates" class="tab-content hidden">
740
+ <div class="card-hover rounded-xl p-6 mb-6">
741
+ <div class="flex items-center justify-between mb-4">
742
+ <h3 class="font-semibold text-lg text-white">CBOM Templates</h3>
743
+ <button class="px-4 py-2 action-button text-gray-900 rounded-lg text-sm font-semibold">
744
+ <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
745
+ Create Template
746
+ </button>
747
+ </div>
748
+ <p class="text-gray-300">Pre-configured templates to help you quickly create CBOMs for common application types</p>
749
+ </div>
750
 
751
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
752
+ <div class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform">
753
+ <div class="p-6">
754
+ <div class="w-12 h-12 rounded-lg bg-blue-400/20 flex items-center justify-center mb-4">
755
+ <i data-feather="globe" class="w-6 h-6 text-blue-400"></i>
 
 
 
756
  </div>
757
+ <h4 class="font-semibold text-white mb-2">Web Application</h4>
758
+ <p class="text-sm text-gray-400 mb-4">Standard template for web applications with TLS, authentication, and session management</p>
759
+ <div class="space-y-2 text-xs">
760
+ <div class="flex items-center space-x-2">
761
+ <i data-feather="check" class="w-3 h-3 text-green-400"></i>
762
+ <span class="text-gray-300">TLS Configuration</span>
763
+ </div>
764
+ <div class="flex items-center space-x-2">
765
+ <i data-feather="check" class="w-3 h-3 text-green-400"></i>
766
+ <span class="text-gray-300">JWT/Session Management</span>
767
+ </div>
768
+ <div class="flex items-center space-x-2">
769
+ <i data-feather="check" class="w-3 h-3 text-green-400"></i>
770
+ <span class="text-gray-300">Database Encryption</span>
771
+ </div>
772
  </div>
773
+ </div>
774
+ <div class="px-6 py-3 bg-white/5 border-t border-white/10">
775
+ <div class="flex items-center justify-between">
776
+ <span class="text-xs text-gray-400">12 predefined assets</span>
777
+ <button class="text-xs text-yellow-400 hover:text-yellow-300">Use Template</button>
 
778
  </div>
779
+ </div>
780
+ </div>
781
+
782
+ <div class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform">
783
+ <div class="p-6">
784
+ <div class="w-12 h-12 rounded-lg bg-purple-400/20 flex items-center justify-center mb-4">
785
+ <i data-feather="smartphone" class="w-6 h-6 text-purple-400"></i>
786
  </div>
787
+ <h4 class="font-semibold text-white mb-2">Mobile Application</h4>
788
+ <p class="text-sm text-gray-400 mb-4">Template for mobile apps with device security, API communication, and local storage</p>
789
+ <div class="space-y-2 text-xs">
790
+ <div class="flex items-center space-x-2">
791
+ <i data-feather="check" class="w-3 h-3 text-green-400"></i>
792
+ <span class="text-gray-300">Keychain/Keystore</span>
793
+ </div>
794
+ <div class="flex items-center space-x-2">
795
+ <i data-feather="check" class="w-3 h-3 text-green-400"></i>
796
+ <span class="text-gray-300">API Security</span>
797
+ </div>
798
+ <div class="flex items-center space-x-2">
799
+ <i data-feather="check" class="w-3 h-3 text-green-400"></i>
800
+ <span class="text-gray-300">Biometric Auth</span>
801
+ </div>
802
+ </div>
803
+ </div>
804
+ <div class="px-6 py-3 bg-white/5 border-t border-white/10">
805
+ <div class="flex items-center justify-between">
806
+ <span class="text-xs text-gray-400">18 predefined assets</span>
807
+ <button class="text-xs text-yellow-400 hover:text-yellow-300">Use Template</button>
808
+ </div>
809
+ </div>
810
+ </div>
811
+
812
+ <div class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform">
813
+ <div class="p-6">
814
+ <div class="w-12 h-12 rounded-lg bg-green-400/20 flex items-center justify-center mb-4">
815
+ <i data-feather="server" class="w-6 h-6 text-green-400"></i>
816
+ </div>
817
+ <h4 class="font-semibold text-white mb-2">Microservices</h4>
818
+ <p class="text-sm text-gray-400 mb-4">Distributed system template with service mesh, mTLS, and container security</p>
819
+ <div class="space-y-2 text-xs">
820
+ <div class="flex items-center space-x-2">
821
+ <i data-feather="check" class="w-3 h-3 text-green-400"></i>
822
+ <span class="text-gray-300">Service Mesh mTLS</span>
823
+ </div>
824
+ <div class="flex items-center space-x-2">
825
+ <i data-feather="check" class="w-3 h-3 text-green-400"></i>
826
+ <span class="text-gray-300">Container Security</span>
827
+ </div>
828
+ <div class="flex items-center space-x-2">
829
+ <i data-feather="check" class="w-3 h-3 text-green-400"></i>
830
+ <span class="text-gray-300">Secret Management</span>
831
+ </div>
832
+ </div>
833
+ </div>
834
+ <div class="px-6 py-3 bg-white/5 border-t border-white/10">
835
+ <div class="flex items-center justify-between">
836
+ <span class="text-xs text-gray-400">24 predefined assets</span>
837
+ <button class="text-xs text-yellow-400 hover:text-yellow-300">Use Template</button>
838
+ </div>
839
+ </div>
840
+ </div>
841
+
842
+ <div class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform">
843
+ <div class="p-6">
844
+ <div class="w-12 h-12 rounded-lg bg-red-400/20 flex items-center justify-center mb-4">
845
+ <i data-feather="database" class="w-6 h-6 text-red-400"></i>
846
+ </div>
847
+ <h4 class="font-semibold text-white mb-2">Legacy System</h4>
848
+ <p class="text-sm text-gray-400 mb-4">Template for older systems with common legacy cryptographic implementations</p>
849
+ <div class="space-y-2 text-xs">
850
+ <div class="flex items-center space-x-2">
851
+ <i data-feather="check" class="w-3 h-3 text-green-400"></i>
852
+ <span class="text-gray-300">Legacy Algorithms</span>
853
+ </div>
854
+ <div class="flex items-center space-x-2">
855
+ <i data-feather="check" class="w-3 h-3 text-green-400"></i>
856
+ <span class="text-gray-300">Certificate Management</span>
857
+ </div>
858
+ <div class="flex items-center space-x-2">
859
+ <i data-feather="check" class="w-3 h-3 text-green-400"></i>
860
+ <span class="text-gray-300">Migration Planning</span>
861
+ </div>
862
+ </div>
863
+ </div>
864
+ <div class="px-6 py-3 bg-white/5 border-t border-white/10">
865
+ <div class="flex items-center justify-between">
866
+ <span class="text-xs text-gray-400">15 predefined assets</span>
867
+ <button class="text-xs text-yellow-400 hover:text-yellow-300">Use Template</button>
868
+ </div>
869
+ </div>
870
  </div>
871
  </div>
872
+ </div>
873
 
874
+ <!-- Dependencies Tab -->
875
+ <div id="dependencies" class="tab-content hidden">
876
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
877
+ <div class="lg:col-span-2">
878
+ <div class="card-hover rounded-xl p-6">
879
+ <div class="flex items-center justify-between mb-6">
880
+ <h3 class="font-semibold text-lg text-white">CBOM Dependencies</h3>
881
+ <div class="flex items-center space-x-2">
882
+ <button class="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg">
883
+ <i data-feather="refresh-cw" class="w-5 h-5"></i>
884
+ </button>
885
+ <button class="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg">
886
+ <i data-feather="download" class="w-5 h-5"></i>
887
+ </button>
888
+ </div>
889
+ </div>
890
+
891
+ <div class="mb-6">
892
+ <div class="flex items-center space-x-4">
893
+ <select class="px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
894
+ <option>All CBOMs</option>
895
+ <option>Enterprise Web App</option>
896
+ <option>Payment Gateway</option>
897
+ <option>Legacy System</option>
898
+ </select>
899
+ <input type="text" placeholder="Search dependencies..."
900
+ class="flex-1 px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
901
+ </div>
902
+ </div>
903
+
904
+ <div class="space-y-4">
905
+ <div class="border border-white/10 rounded-lg overflow-hidden">
906
+ <div class="p-4 bg-white/5 flex items-center justify-between">
907
+ <div class="flex items-center space-x-3">
908
+ <i data-feather="package" class="w-5 h-5 text-blue-400"></i>
909
+ <div>
910
+ <p class="font-medium text-white">OpenSSL</p>
911
+ <p class="text-xs text-gray-400">v3.0.11</p>
912
+ </div>
913
+ </div>
914
+ <span class="px-2 py-1 text-xs bg-yellow-400/20 text-yellow-400 rounded-full">3 CBOMs</span>
915
+ </div>
916
+ <div class="p-4 border-t border-white/10">
917
+ <div class="grid grid-cols-2 gap-4 mb-3">
918
+ <div>
919
+ <p class="text-xs text-gray-400">Used in</p>
920
+ <p class="text-sm text-white">Enterprise Web App, Payment Gateway, API Service</p>
921
+ </div>
922
+ <div>
923
+ <p class="text-xs text-gray-400">Risk Level</p>
924
+ <p class="text-sm text-yellow-400">Medium (Quantum Vulnerable)</p>
925
+ </div>
926
+ </div>
927
+ <div class="flex items-center justify-between pt-3 border-t border-white/10">
928
+ <button class="text-xs text-blue-400 hover:text-blue-300">View Details</button>
929
+ <button class="text-xs text-yellow-400 hover:text-yellow-300">Update All</button>
930
+ </div>
931
+ </div>
932
+ </div>
933
+
934
+ <div class="border border-white/10 rounded-lg overflow-hidden">
935
+ <div class="p-4 bg-white/5 flex items-center justify-between">
936
+ <div class="flex items-center space-x-3">
937
+ <i data-feather="package" class="w-5 h-5 text-red-400"></i>
938
+ <div>
939
+ <p class="font-medium text-white">Bouncy Castle</p>
940
+ <p class="text-xs text-gray-400">v1.70</p>
941
+ </div>
942
+ </div>
943
+ <span class="px-2 py-1 text-xs bg-red-400/20 text-red-400 rounded-full">5 CBOMs</span>
944
+ </div>
945
+ <div class="p-4 border-t border-white/10">
946
+ <div class="grid grid-cols-2 gap-4 mb-3">
947
+ <div>
948
+ <p class="text-xs text-gray-400">Used in</p>
949
+ <p class="text-sm text-white">5 applications across production</p>
950
+ </div>
951
+ <div>
952
+ <p class="text-xs text-gray-400">Risk Level</p>
953
+ <p class="text-sm font-medium text-red-400">High (Outdated)</p>
954
+ </div>
955
+ </div>
956
+ <div class="flex items-center justify-between pt-3 border-t border-white/10">
957
+ <button class="text-xs text-blue-400 hover:text-blue-300">View Details</button>
958
+ <button class="text-xs text-red-400 hover:text-red-300">Urgent Update</button>
959
+ </div>
960
+ </div>
961
+ </div>
962
+
963
+ <div class="border border-white/10 rounded-lg overflow-hidden">
964
+ <div class="p-4 bg-white/5 flex items-center justify-between">
965
+ <div class="flex items-center space-x-3">
966
+ <i data-feather="package" class="w-5 h-5 text-green-400"></i>
967
+ <div>
968
+ <p class="font-medium text-white">libsodium</p>
969
+ <p class="text-xs text-gray-400">v1.0.19</p>
970
+ </div>
971
+ </div>
972
+ <span class="px-2 py-1 text-xs bg-green-400/20 text-green-400 rounded-full">2 CBOMs</span>
973
+ </div>
974
+ <div class="p-4 border-t border-white/10">
975
+ <div class="grid grid-cols-2 gap-4 mb-3">
976
+ <div>
977
+ <p class="text-xs text-gray-400">Used in</p>
978
+ <p class="text-sm text-white">Mobile App, IoT Gateway</p>
979
+ </div>
980
+ <div>
981
+ <p class="text-xs text-gray-400">Risk Level</p>
982
+ <p class="text-sm text-green-400">Low (Quantum Safe)</p>
983
+ </div>
984
+ </div>
985
+ <div class="flex items-center justify-between pt-3 border-t border-white/10">
986
+ <button class="text-xs text-blue-400 hover:text-blue-300">View Details</button>
987
+ <button class="text-xs text-gray-400" disabled>Up to date</button>
988
+ </div>
989
+ </div>
990
+ </div>
991
+ </div>
992
  </div>
993
  </div>
994
 
995
+ <div class="space-y-6">
996
+ <div class="card-hover rounded-xl p-6">
997
+ <h4 class="font-semibold text-white mb-4">Dependency Summary</h4>
998
+ <div class="space-y-3">
999
+ <div class="flex justify-between items-center">
1000
+ <span class="text-sm text-gray-400">Total Dependencies</span>
1001
+ <span class="text-sm font-medium text-white">47</span>
1002
+ </div>
1003
+ <div class="flex justify-between items-center">
1004
+ <span class="text-sm text-gray-400">Unique Libraries</span>
1005
+ <span class="text-sm font-medium text-white">23</span>
1006
+ </div>
1007
+ <div class="flex justify-between items-center">
1008
+ <span class="text-sm text-gray-400">Outdated</span>
1009
+ <span class="text-sm font-medium text-red-400">8</span>
1010
+ </div>
1011
+ <div class="flex justify-between items-center">
1012
+ <span class="text-sm text-gray-400">Quantum Vulnerable</span>
1013
+ <span class="text-sm font-medium text-yellow-400">12</span>
1014
+ </div>
1015
+ <div class="flex justify-between items-center">
1016
+ <span class="text-sm text-gray-400">Quantum Safe</span>
1017
+ <span class="text-sm font-medium text-green-400">27</span>
1018
+ </div>
1019
+ </div>
1020
+ </div>
1021
+
1022
+ <div class="card-hover rounded-xl p-6">
1023
+ <h4 class="font-semibold text-white mb-4">Quick Actions</h4>
1024
+ <div class="space-y-2">
1025
+ <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
1026
+ <div class="flex items-center justify-between">
1027
+ <div class="flex items-center space-x-2">
1028
+ <i data-feather="refresh-cw" class="w-4 h-4 text-gray-400"></i>
1029
+ <span class="text-sm text-white">Update All Dependencies</span>
1030
+ </div>
1031
+ <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
1032
+ </div>
1033
+ </button>
1034
+ <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
1035
+ <div class="flex items-center justify-between">
1036
+ <div class="flex items-center space-x-2">
1037
+ <i data-feather="alert-triangle" class="w-4 h-4 text-gray-400"></i>
1038
+ <span class="text-sm text-white">Vulnerability Scan</span>
1039
+ </div>
1040
+ <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
1041
+ </div>
1042
+ </button>
1043
+ <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
1044
+ <div class="flex items-center justify-between">
1045
+ <div class="flex items-center space-x-2">
1046
+ <i data-feather="file-text" class="w-4 h-4 text-gray-400"></i>
1047
+ <span class="text-sm text-white">Generate Report</span>
1048
+ </div>
1049
+ <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
1050
+ </div>
1051
+ </button>
1052
+ </div>
1053
+ </div>
1054
  </div>
1055
  </div>
1056
  </div>
 
1058
  </main>
1059
  </div>
1060
 
1061
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
1062
  <script>
1063
+ // Initialize feather icons immediately
1064
+ document.addEventListener('DOMContentLoaded', function() {
1065
+ // Replace feather icons
1066
+ feather.replace();
1067
+
1068
+ // Initialize AOS with better settings
1069
+ AOS.init({
1070
+ duration: 400,
1071
+ once: true,
1072
+ offset: 0,
1073
+ easing: 'ease-out',
1074
+ delay: 0,
1075
+ anchorPlacement: 'top-bottom',
1076
+ disable: function() {
1077
+ // Disable AOS on mobile devices to prevent issues
1078
+ return window.innerWidth < 768;
1079
+ }
1080
+ });
1081
+
1082
+ // Force AOS refresh after a short delay
1083
+ setTimeout(() => {
1084
+ AOS.refresh();
1085
+ }, 100);
1086
+ });
1087
 
1088
  // Tab switching functionality
1089
+ function showTab(tabName) {
1090
+ // Hide all tab contents
1091
+ document.querySelectorAll('.tab-content').forEach(content => {
1092
+ content.classList.add('hidden');
1093
+ });
1094
+
1095
+ // Remove active class from all tabs
1096
+ document.querySelectorAll('.flex button').forEach(button => {
1097
+ if (button.onclick && button.onclick.toString().includes('showTab')) {
1098
+ button.classList.remove('tab-active');
1099
+ button.classList.add('text-gray-400', 'hover:text-gray-200');
1100
+ }
1101
+ });
1102
+
1103
+ // Show selected tab content
1104
+ document.getElementById(tabName).classList.remove('hidden');
1105
+
1106
+ // Add active class to clicked tab
1107
+ event.target.classList.add('tab-active');
1108
+ event.target.classList.remove('text-gray-400', 'hover:text-gray-200');
1109
+
1110
+ // Re-render feather icons
1111
+ feather.replace();
1112
+ }
1113
+
1114
+ // Import method toggle
1115
+ document.addEventListener('change', function(e) {
1116
+ if (e.target.name === 'importMethod') {
1117
+ if (e.target.value === 'file') {
1118
+ document.getElementById('fileUploadSection').classList.remove('hidden');
1119
+ document.getElementById('integrationSection').classList.add('hidden');
1120
+ } else {
1121
+ document.getElementById('fileUploadSection').classList.add('hidden');
1122
+ document.getElementById('integrationSection').classList.remove('hidden');
1123
+ }
1124
+ }
1125
+ });
1126
+
1127
+ // Ensure all content is visible on load
1128
+ window.addEventListener('load', function() {
1129
+ // Force all AOS elements to animate
1130
+ document.querySelectorAll('[data-aos]').forEach(el => {
1131
+ el.classList.add('aos-animate');
1132
  });
1133
  });
1134
  </script>
dashboard.html CHANGED
@@ -4,27 +4,55 @@
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 {
@@ -38,52 +66,133 @@
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="index.html" 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>
@@ -94,14 +203,15 @@
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">
@@ -109,68 +219,71 @@
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
 
@@ -179,90 +292,89 @@
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
233
- Mateu
234
- </p>
235
- <p class="text-xs text-gray-400 mt-1">2 hours ago</p>
236
  </div>
237
  </div>
238
  <div class="flex items-start space-x-3">
239
- <div class="p-2 rounded-full bg-blue-100 text-blue-600 mt-1">
240
  <i data-feather="download" class="w-4 h-4"></i>
241
  </div>
242
  <div>
243
- <p class="font-medium">CBOM imported</p>
244
- <p class="text-sm text-gray-500">"Payment Gateway" CBOM was imported from Venafi</p>
245
- <p class="text-xs text-gray-400 mt-1">5 hours ago</p>
246
  </div>
247
  </div>
248
  <div class="flex items-start space-x-3">
249
- <div class="p-2 rounded-full bg-red-100 text-red-600 mt-1">
250
  <i data-feather="alert-triangle" class="w-4 h-4"></i>
251
  </div>
252
  <div>
253
- <p class="font-medium">Risk assessment completed</p>
254
- <p class="text-sm text-gray-500">High risk found in "Legacy System" CBOM</p>
255
- <p class="text-xs text-gray-400 mt-1">1 day ago</p>
256
  </div>
257
  </div>
258
  <div class="flex items-start space-x-3">
259
- <div class="p-2 rounded-full bg-green-100 text-green-600 mt-1">
260
  <i data-feather="check-circle" class="w-4 h-4"></i>
261
  </div>
262
  <div>
263
- <p class="font-medium">Integration connected</p>
264
- <p class="text-sm text-gray-500">Tanium integration was successfully connected</p>
265
- <p class="text-xs text-gray-400 mt-1">2 days ago</p>
266
  </div>
267
  </div>
268
  </div>
@@ -272,58 +384,59 @@
272
  <!-- Right Column -->
273
  <div class="space-y-6">
274
  <!-- Integration Status -->
275
- <div class="bg-white rounded-xl shadow-sm p-6">
276
- <h3 class="font-semibold text-lg mb-4">Integration Status</h3>
277
  <div class="space-y-3">
278
- <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
279
  <div class="flex items-center space-x-3">
280
- <div class="p-2 rounded-lg bg-purple-100 text-purple-600">
281
  <i data-feather="cpu" class="w-5 h-5"></i>
282
  </div>
283
- <span class="font-medium">Venafi</span>
284
  </div>
285
  <span
286
- class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Connected</span>
287
  </div>
288
- <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
289
  <div class="flex items-center space-x-3">
290
- <div class="p-2 rounded-lg bg-blue-100 text-blue-600">
291
  <i data-feather="server" class="w-5 h-5"></i>
292
  </div>
293
- <span class="font-medium">Tanium</span>
294
  </div>
295
  <span
296
- class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Connected</span>
297
  </div>
298
- <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
299
  <div class="flex items-center space-x-3">
300
- <div class="p-2 rounded-lg bg-yellow-100 text-yellow-600">
301
  <i data-feather="shield" class="w-5 h-5"></i>
302
  </div>
303
- <span class="font-medium">SandboxAQ</span>
304
  </div>
305
- <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Disconnected</span>
 
306
  </div>
307
- <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
308
  <div class="flex items-center space-x-3">
309
- <div class="p-2 rounded-lg bg-gray-100 text-gray-600">
310
  <i data-feather="cloud" class="w-5 h-5"></i>
311
  </div>
312
- <span class="font-medium">AWS KMS</span>
313
  </div>
314
  <span
315
- class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pending</span>
316
  </div>
317
  </div>
318
  </div>
319
 
320
  <!-- Risk Distribution -->
321
- <div class="bg-white rounded-xl shadow-sm p-6">
322
- <h3 class="font-semibold text-lg mb-4">Risk Distribution</h3>
323
  <div class="h-48 flex items-center justify-center">
324
  <!-- Placeholder for chart -->
325
  <div
326
- class="w-full h-full bg-gray-100 rounded-lg flex items-center justify-center text-gray-400">
327
  <i data-feather="pie-chart" class="w-12 h-12"></i>
328
  </div>
329
  </div>
@@ -331,23 +444,23 @@
331
  <div class="flex items-center justify-between">
332
  <div class="flex items-center space-x-2">
333
  <div class="w-3 h-3 rounded-full bg-red-500"></div>
334
- <span class="text-sm">High Risk</span>
335
  </div>
336
- <span class="text-sm font-medium">12%</span>
337
  </div>
338
  <div class="flex items-center justify-between">
339
  <div class="flex items-center space-x-2">
340
  <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
341
- <span class="text-sm">Medium Risk</span>
342
  </div>
343
- <span class="text-sm font-medium">34%</span>
344
  </div>
345
  <div class="flex items-center justify-between">
346
  <div class="flex items-center space-x-2">
347
  <div class="w-3 h-3 rounded-full bg-green-500"></div>
348
- <span class="text-sm">Low Risk</span>
349
  </div>
350
- <span class="text-sm font-medium">54%</span>
351
  </div>
352
  </div>
353
  </div>
@@ -357,32 +470,33 @@
357
  </div>
358
 
359
  <!-- Floating Modals -->
360
- <div id="newCbomModal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50">
361
- <div class="bg-white rounded-xl shadow-lg w-full max-w-md">
 
362
  <div class="p-6">
363
  <div class="flex items-center justify-between mb-4">
364
- <h3 class="text-xl font-semibold">Create New CBOM</h3>
365
- <button onclick="closeModal('newCbomModal')" class="text-gray-500 hover:text-gray-700">
366
  <i data-feather="x" class="w-6 h-6"></i>
367
  </button>
368
  </div>
369
 
370
  <div class="space-y-4">
371
  <div>
372
- <label class="block text-sm font-medium text-gray-700 mb-1">CBOM Name</label>
373
  <input type="text"
374
- class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400">
375
  </div>
376
  <div>
377
- <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
378
  <textarea
379
- class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400"
380
  rows="3"></textarea>
381
  </div>
382
  <div>
383
- <label class="block text-sm font-medium text-gray-700 mb-1">Template</label>
384
  <select
385
- class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400">
386
  <option>Web Application</option>
387
  <option>Mobile Application</option>
388
  <option>Microservices</option>
@@ -393,10 +507,10 @@
393
 
394
  <div class="flex justify-end space-x-3 mt-6">
395
  <button onclick="closeModal('newCbomModal')"
396
- class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
397
  Cancel
398
  </button>
399
- <button class="px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg hover:bg-yellow-500">
400
  Create CBOM
401
  </button>
402
  </div>
@@ -404,39 +518,40 @@
404
  </div>
405
  </div>
406
 
407
- <div id="importCbomModal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50">
408
- <div class="bg-white rounded-xl shadow-lg w-full max-w-md">
 
409
  <div class="p-6">
410
  <div class="flex items-center justify-between mb-4">
411
- <h3 class="text-xl font-semibold">Import CBOM</h3>
412
- <button onclick="closeModal('importCbomModal')" class="text-gray-500 hover:text-gray-700">
413
  <i data-feather="x" class="w-6 h-6"></i>
414
  </button>
415
  </div>
416
 
417
  <div class="space-y-4">
418
- <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
419
  <i data-feather="upload" class="w-12 h-12 mx-auto text-gray-400 mb-3"></i>
420
- <p class="text-sm text-gray-500 mb-2">Drag and drop your CBOM file here</p>
421
- <p class="text-xs text-gray-400 mb-4">Supports .json, .xml, .cbom formats</p>
422
- <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
423
  Select File
424
  </button>
425
  </div>
426
  <div class="flex items-center space-x-2">
427
  <input type="checkbox" id="overwrite"
428
- class="rounded border-gray-300 text-yellow-400 focus:ring-yellow-400">
429
- <label for="overwrite" class="text-sm text-gray-700">Overwrite existing CBOM with same
430
  name</label>
431
  </div>
432
  </div>
433
 
434
  <div class="flex justify-end space-x-3 mt-6">
435
  <button onclick="closeModal('importCbomModal')"
436
- class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
437
  Cancel
438
  </button>
439
- <button class="px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg hover:bg-yellow-500">
440
  Import CBOM
441
  </button>
442
  </div>
@@ -445,21 +560,21 @@
445
  </div>
446
 
447
  <div id="riskAssessmentModal"
448
- class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50">
449
- <div class="bg-white rounded-xl shadow-lg w-full max-w-md">
450
  <div class="p-6">
451
  <div class="flex items-center justify-between mb-4">
452
- <h3 class="text-xl font-semibold">Run Risk Assessment</h3>
453
- <button onclick="closeModal('riskAssessmentModal')" class="text-gray-500 hover:text-gray-700">
454
  <i data-feather="x" class="w-6 h-6"></i>
455
  </button>
456
  </div>
457
 
458
  <div class="space-y-4">
459
  <div>
460
- <label class="block text-sm font-medium text-gray-700 mb-1">Select CBOM</label>
461
  <select
462
- class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400">
463
  <option>Enterprise Web App</option>
464
  <option>Payment Gateway</option>
465
  <option>Legacy System</option>
@@ -467,9 +582,9 @@
467
  </select>
468
  </div>
469
  <div>
470
- <label class="block text-sm font-medium text-gray-700 mb-1">Assessment Type</label>
471
  <select
472
- class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400">
473
  <option>Quantum Risk Only</option>
474
  <option>Full Cryptographic Assessment</option>
475
  <option>Compliance Check</option>
@@ -477,18 +592,18 @@
477
  </div>
478
  <div class="flex items-center space-x-2">
479
  <input type="checkbox" id="includeDependencies"
480
- class="rounded border-gray-300 text-yellow-400 focus:ring-yellow-400" checked>
481
- <label for="includeDependencies" class="text-sm text-gray-700">Include dependencies in
482
  assessment</label>
483
  </div>
484
  </div>
485
 
486
  <div class="flex justify-end space-x-3 mt-6">
487
  <button onclick="closeModal('riskAssessmentModal')"
488
- class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
489
  Cancel
490
  </button>
491
- <button class="px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg hover:bg-yellow-500">
492
  Run Assessment
493
  </button>
494
  </div>
@@ -497,21 +612,21 @@
497
  </div>
498
 
499
  <div id="generateReportModal"
500
- class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50">
501
- <div class="bg-white rounded-xl shadow-lg w-full max-w-md">
502
  <div class="p-6">
503
  <div class="flex items-center justify-between mb-4">
504
- <h3 class="text-xl font-semibold">Generate Report</h3>
505
- <button onclick="closeModal('generateReportModal')" class="text-gray-500 hover:text-gray-700">
506
  <i data-feather="x" class="w-6 h-6"></i>
507
  </button>
508
  </div>
509
 
510
  <div class="space-y-4">
511
  <div>
512
- <label class="block text-sm font-medium text-gray-700 mb-1">Report Type</label>
513
  <select
514
- class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400">
515
  <option>Quantum Risk Assessment</option>
516
  <option>Compliance Report</option>
517
  <option>Executive Summary</option>
@@ -519,35 +634,35 @@
519
  </select>
520
  </div>
521
  <div>
522
- <label class="block text-sm font-medium text-gray-700 mb-1">Format</label>
523
  <div class="grid grid-cols-3 gap-2">
524
- <button class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50">
525
- <i data-feather="file-text" class="w-5 h-5 mx-auto text-gray-600"></i>
526
- <span class="text-xs block mt-1">PDF</span>
527
  </button>
528
- <button class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50">
529
- <i data-feather="file-text" class="w-5 h-5 mx-auto text-gray-600"></i>
530
- <span class="text-xs block mt-1">DOCX</span>
531
  </button>
532
- <button class="p-2 border border-gray-300 rounded-lg hover:bg-gray-50">
533
- <i data-feather="file-text" class="w-5 h-5 mx-auto text-gray-600"></i>
534
- <span class="text-xs block mt-1">CSV</span>
535
  </button>
536
  </div>
537
  </div>
538
  <div class="flex items-center space-x-2">
539
  <input type="checkbox" id="includeCharts"
540
- class="rounded border-gray-300 text-yellow-400 focus:ring-yellow-400" checked>
541
- <label for="includeCharts" class="text-sm text-gray-700">Include charts and graphs</label>
542
  </div>
543
  </div>
544
 
545
  <div class="flex justify-end space-x-3 mt-6">
546
  <button onclick="closeModal('generateReportModal')"
547
- class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
548
  Cancel
549
  </button>
550
- <button class="px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg hover:bg-yellow-500">
551
  Generate Report
552
  </button>
553
  </div>
@@ -556,53 +671,47 @@
556
  </div>
557
 
558
  <script>
559
- AOS.init();
560
- feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
561
 
562
  // Modal functions
563
  function openModal(modalId) {
564
  document.getElementById(modalId).classList.remove('hidden');
 
 
565
  }
566
 
567
  function closeModal(modalId) {
568
  document.getElementById(modalId).classList.add('hidden');
569
  }
570
 
571
- // Connect quick action buttons to modals
572
- document.addEventListener('DOMContentLoaded', function () {
573
- // New CBOM
574
- document.querySelector('button:has(span:contains("New CBOM"))').addEventListener('click', function () {
575
- openModal('newCbomModal');
576
- });
577
-
578
- // Import CBOM
579
- document.querySelector('button:has(span:contains("Import CBOM"))').addEventListener('click', function () {
580
- openModal('importCbomModal');
581
- });
582
-
583
- // Risk Assessment
584
- document.querySelector('button:has(span:contains("Risk Assessment"))').addEventListener('click', function () {
585
- openModal('riskAssessmentModal');
586
- });
587
-
588
- // Generate Report
589
- document.querySelector('button:has(span:contains("Generate Report"))').addEventListener('click', function () {
590
- openModal('generateReportModal');
591
- });
592
- });
593
-
594
- // Simple animation for cards on load
595
- document.addEventListener('DOMContentLoaded', function () {
596
- const cards = document.querySelectorAll('.card-hover');
597
- cards.forEach((card, index) => {
598
- card.style.opacity = '0';
599
- card.style.transform = 'translateY(20px)';
600
- card.style.transition = 'all 0.5s ease ' + (index * 0.1) + 's';
601
-
602
- setTimeout(() => {
603
- card.style.opacity = '1';
604
- card.style.transform = 'translateY(0)';
605
- }, 100);
606
  });
607
  });
608
  </script>
 
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>EY Quantum Safe - Dashboard</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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 
11
  <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
13
 
14
  body {
15
  font-family: 'Inter', sans-serif;
16
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
17
+ min-height: 100vh;
18
+ }
19
+
20
+ /* Ensure content is visible by default */
21
+ [data-aos] {
22
+ opacity: 1 !important;
23
+ transform: none !important;
24
+ }
25
+
26
+ [data-aos].aos-animate {
27
+ opacity: 1 !important;
28
+ }
29
+
30
+ .gradient-text {
31
+ background: linear-gradient(135deg, #F59E0B, #FBBF24, #FCD34D);
32
+ -webkit-background-clip: text;
33
+ -webkit-text-fill-color: transparent;
34
+ background-clip: text;
35
  }
36
 
37
  .sidebar {
38
+ backdrop-filter: blur(20px);
39
+ background: rgba(15, 23, 42, 0.8);
40
+ border-right: 1px solid rgba(255, 255, 255, 0.1);
41
+ transition: all 0.3s ease;
42
+ }
43
+
44
+ .card-hover {
45
+ backdrop-filter: blur(15px);
46
+ background: rgba(255, 255, 255, 0.05);
47
+ border: 1px solid rgba(255, 255, 255, 0.1);
48
  transition: all 0.3s ease;
49
  }
50
 
51
  .card-hover:hover {
52
  transform: translateY(-2px);
53
+ background: rgba(255, 255, 255, 0.08);
54
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
55
+ border-color: rgba(245, 158, 11, 0.3);
56
  }
57
 
58
  .risk-high {
 
66
  .risk-low {
67
  border-left: 4px solid #10B981;
68
  }
69
+
70
+ .action-button {
71
+ background: linear-gradient(135deg, #F59E0B, #FBBF24);
72
+ transition: all 0.3s ease;
73
+ box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
74
+ }
75
+
76
+ .action-button:hover {
77
+ transform: translateY(-2px);
78
+ box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
79
+ }
80
+
81
+ .particle {
82
+ position: absolute;
83
+ width: 2px;
84
+ height: 2px;
85
+ background: #F59E0B;
86
+ border-radius: 50%;
87
+ animation: particle-float 8s linear infinite;
88
+ opacity: 0.7;
89
+ }
90
+
91
+ @keyframes particle-float {
92
+ 0% {
93
+ transform: translateY(100vh) translateX(0px);
94
+ opacity: 0;
95
+ }
96
+
97
+ 10% {
98
+ opacity: 0.7;
99
+ }
100
+
101
+ 90% {
102
+ opacity: 0.7;
103
+ }
104
+
105
+ 100% {
106
+ transform: translateY(-100px) translateX(100px);
107
+ opacity: 0;
108
+ }
109
+ }
110
+
111
+ /* Fix select dropdown styling */
112
+ select option {
113
+ background-color: #1e293b;
114
+ color: #ffffff;
115
+ }
116
+
117
+ select option:hover {
118
+ background-color: #334155;
119
+ }
120
+
121
+ select option:checked {
122
+ background-color: #475569;
123
+ }
124
+
125
+ /* Ensure select has proper background */
126
+ select {
127
+ background-color: rgba(255, 255, 255, 0.1);
128
+ }
129
+
130
+ select:focus {
131
+ background-color: rgba(255, 255, 255, 0.15);
132
+ }
133
  </style>
134
  </head>
135
 
136
  <body class="flex h-screen overflow-hidden">
137
+ <!-- Animated Background Particles -->
138
+ <div class="fixed inset-0 pointer-events-none z-0">
139
+ <div class="particle" style="left: 10%; animation-delay: 0s;"></div>
140
+ <div class="particle" style="left: 30%; animation-delay: 2s;"></div>
141
+ <div class="particle" style="left: 50%; animation-delay: 4s;"></div>
142
+ <div class="particle" style="left: 70%; animation-delay: 6s;"></div>
143
+ <div class="particle" style="left: 90%; animation-delay: 8s;"></div>
144
+ </div>
145
+
146
  <!-- Sidebar -->
147
+ <div class="sidebar text-white w-64 flex-shrink-0 flex flex-col relative z-10">
148
+ <div class="p-4 border-b border-white/10">
149
+ <a href="index.html" class="flex items-center space-x-3 hover:opacity-80 transition-opacity">
150
+ <div
151
+ class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
152
+ <i data-feather="shield" class="text-gray-900 w-5 h-5"></i>
153
  </div>
154
+ <h1 class="text-xl font-bold">EY <span class="gradient-text">Quantum Safe</span></h1>
155
+ </a>
156
  </div>
157
 
158
  <nav class="flex-1 overflow-y-auto p-4 space-y-1">
159
+ <a href="index.html"
160
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
161
+ <i data-feather="home" class="w-5 h-5"></i>
162
+ <span>Home</span>
163
+ </a>
164
+ <a href="dashboard.html"
165
+ class="flex items-center space-x-3 p-3 rounded-lg bg-yellow-400/20 text-yellow-400 border border-yellow-400/30">
166
  <i data-feather="layout" class="w-5 h-5"></i>
167
  <span>Dashboard</span>
168
  </a>
169
  <a href="cboms.html"
170
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
171
  <i data-feather="file-text" class="w-5 h-5"></i>
172
  <span>CBOMs</span>
173
  </a>
174
  <a href="assets.html"
175
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
176
  <i data-feather="lock" class="w-5 h-5"></i>
177
  <span>Assets</span>
178
  </a>
179
  <a href="integrations.html"
180
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
181
  <i data-feather="link" class="w-5 h-5"></i>
182
  <span>Integrations</span>
183
  </a>
184
  <a href="analytics.html"
185
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
186
  <i data-feather="bar-chart-2" class="w-5 h-5"></i>
187
  <span>Analytics</span>
188
  </a>
189
  </nav>
190
 
191
+ <div class="p-4 border-t border-white/10">
192
  <div class="flex items-center space-x-3">
193
+ <div
194
+ class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-600 to-gray-700 flex items-center justify-center">
195
+ <i data-feather="user" class="text-gray-300 w-5 h-5"></i>
196
  </div>
197
  <div>
198
  <p class="text-sm font-medium">Josep Mateu</p>
 
203
  </div>
204
 
205
  <!-- Main Content -->
206
+ <div class="flex-1 flex flex-col overflow-hidden relative z-10">
207
  <!-- Top Navigation -->
208
+ <header
209
+ class="backdrop-filter backdrop-blur-lg bg-white/5 border-b border-white/10 flex items-center justify-between p-4">
210
  <div class="flex items-center space-x-4">
211
+ <button class="md:hidden text-white">
212
  <i data-feather="menu"></i>
213
  </button>
214
+ <h2 class="text-xl font-semibold text-white">Dashboard</h2>
215
  </div>
216
 
217
  <div class="flex items-center space-x-4">
 
219
  <i data-feather="search"
220
  class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
221
  <input type="text" placeholder="Search..."
222
+ class="pl-10 pr-4 py-2 bg-white/10 border border-white/20 text-white placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
223
  </div>
224
+ <button class="p-2 rounded-full bg-white/10 text-gray-300 hover:bg-white/20 transition-all">
225
  <i data-feather="bell"></i>
226
  </button>
227
  </div>
228
  </header>
229
 
230
  <!-- Main Content Area -->
231
+ <main class="flex-1 overflow-y-auto p-6">
232
  <!-- Quick Stats -->
233
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
234
+ <div class="card-hover rounded-xl p-6 transition-all duration-300" data-aos="fade-up">
235
  <div class="flex items-center justify-between">
236
  <div>
237
+ <p class="text-sm font-medium text-gray-400">Active CBOMs</p>
238
+ <p class="text-3xl font-bold text-white mt-1">24</p>
239
  </div>
240
+ <div class="p-3 rounded-lg bg-yellow-400/20 text-yellow-400">
241
  <i data-feather="file-text" class="w-6 h-6"></i>
242
  </div>
243
  </div>
244
+ <p class="text-xs text-gray-400 mt-3"><span class="text-green-400">+3</span> from last week</p>
245
  </div>
246
 
247
+ <div class="card-hover rounded-xl p-6 transition-all duration-300" data-aos="fade-up"
248
+ data-aos-delay="100">
249
  <div class="flex items-center justify-between">
250
  <div>
251
+ <p class="text-sm font-medium text-gray-400">Total Assets</p>
252
+ <p class="text-3xl font-bold text-white mt-1">1,284</p>
253
  </div>
254
+ <div class="p-3 rounded-lg bg-blue-400/20 text-blue-400">
255
  <i data-feather="lock" class="w-6 h-6"></i>
256
  </div>
257
  </div>
258
+ <p class="text-xs text-gray-400 mt-3"><span class="text-green-400">+12%</span> from last week</p>
259
  </div>
260
 
261
+ <div class="card-hover rounded-xl p-6 transition-all duration-300" data-aos="fade-up"
262
+ data-aos-delay="200">
263
  <div class="flex items-center justify-between">
264
  <div>
265
+ <p class="text-sm font-medium text-gray-400">Risk Assessments</p>
266
+ <p class="text-3xl font-bold text-white mt-1">18</p>
267
  </div>
268
+ <div class="p-3 rounded-lg bg-red-400/20 text-red-400">
269
  <i data-feather="alert-triangle" class="w-6 h-6"></i>
270
  </div>
271
  </div>
272
+ <p class="text-xs text-gray-400 mt-3"><span class="text-red-400">-2</span> from last week</p>
273
  </div>
274
 
275
+ <div class="card-hover rounded-xl p-6 transition-all duration-300" data-aos="fade-up"
276
+ data-aos-delay="300">
277
  <div class="flex items-center justify-between">
278
  <div>
279
+ <p class="text-sm font-medium text-gray-400">Integrations</p>
280
+ <p class="text-3xl font-bold text-white mt-1">3/4</p>
281
  </div>
282
+ <div class="p-3 rounded-lg bg-green-400/20 text-green-400">
283
  <i data-feather="link" class="w-6 h-6"></i>
284
  </div>
285
  </div>
286
+ <p class="text-xs text-gray-400 mt-3">1 integration needs attention</p>
287
  </div>
288
  </div>
289
 
 
292
  <!-- Left Column -->
293
  <div class="lg:col-span-2 space-y-6">
294
  <!-- Quick Actions -->
295
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="400">
296
  <div class="flex items-center justify-between mb-4">
297
+ <h3 class="font-semibold text-lg text-white">Quick Actions</h3>
298
+ <button class="text-sm text-yellow-400 hover:text-yellow-300">View All</button>
299
  </div>
300
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
301
+ <button onclick="openModal('newCbomModal')"
302
+ class="flex items-center space-x-3 p-4 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-yellow-400/10 transition-all">
303
+ <div class="p-3 rounded-lg bg-yellow-400/20 text-yellow-400">
304
  <i data-feather="plus" class="w-5 h-5"></i>
305
  </div>
306
+ <span class="font-medium text-white">New CBOM</span>
307
  </button>
308
+ <button onclick="openModal('importCbomModal')"
309
+ class="flex items-center space-x-3 p-4 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-yellow-400/10 transition-all">
310
+ <div class="p-3 rounded-lg bg-blue-400/20 text-blue-400">
311
  <i data-feather="download" class="w-5 h-5"></i>
312
  </div>
313
+ <span class="font-medium text-white">Import CBOM</span>
314
  </button>
315
+ <button onclick="openModal('riskAssessmentModal')"
316
+ class="flex items-center space-x-3 p-4 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-yellow-400/10 transition-all">
317
+ <div class="p-3 rounded-lg bg-red-400/20 text-red-400">
318
  <i data-feather="alert-triangle" class="w-5 h-5"></i>
319
  </div>
320
+ <span class="font-medium text-white">Risk Assessment</span>
321
  </button>
322
+ <button onclick="openModal('generateReportModal')"
323
+ class="flex items-center space-x-3 p-4 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-yellow-400/10 transition-all">
324
+ <div class="p-3 rounded-lg bg-green-400/20 text-green-400">
325
  <i data-feather="bar-chart-2" class="w-5 h-5"></i>
326
  </div>
327
+ <span class="font-medium text-white">Generate Report</span>
328
  </button>
329
  </div>
330
  </div>
331
 
332
  <!-- Recent Activity -->
333
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="500">
334
  <div class="flex items-center justify-between mb-4">
335
+ <h3 class="font-semibold text-lg text-white">Recent Activity</h3>
336
+ <button class="text-sm text-yellow-400 hover:text-yellow-300">View All</button>
337
  </div>
338
  <div class="space-y-4">
339
  <div class="flex items-start space-x-3">
340
+ <div class="p-2 rounded-full bg-yellow-400/20 text-yellow-400 mt-1">
341
  <i data-feather="file-plus" class="w-4 h-4"></i>
342
  </div>
343
  <div>
344
+ <p class="font-medium text-white">New CBOM created</p>
345
+ <p class="text-sm text-gray-400">"Enterprise Web App" CBOM was created by Josep
346
+ Mateu</p>
347
+ <p class="text-xs text-gray-500 mt-1">2 hours ago</p>
 
348
  </div>
349
  </div>
350
  <div class="flex items-start space-x-3">
351
+ <div class="p-2 rounded-full bg-blue-400/20 text-blue-400 mt-1">
352
  <i data-feather="download" class="w-4 h-4"></i>
353
  </div>
354
  <div>
355
+ <p class="font-medium text-white">CBOM imported</p>
356
+ <p class="text-sm text-gray-400">"Payment Gateway" CBOM was imported from Venafi</p>
357
+ <p class="text-xs text-gray-500 mt-1">5 hours ago</p>
358
  </div>
359
  </div>
360
  <div class="flex items-start space-x-3">
361
+ <div class="p-2 rounded-full bg-red-400/20 text-red-400 mt-1">
362
  <i data-feather="alert-triangle" class="w-4 h-4"></i>
363
  </div>
364
  <div>
365
+ <p class="font-medium text-white">Risk assessment completed</p>
366
+ <p class="text-sm text-gray-400">High risk found in "Legacy System" CBOM</p>
367
+ <p class="text-xs text-gray-500 mt-1">1 day ago</p>
368
  </div>
369
  </div>
370
  <div class="flex items-start space-x-3">
371
+ <div class="p-2 rounded-full bg-green-400/20 text-green-400 mt-1">
372
  <i data-feather="check-circle" class="w-4 h-4"></i>
373
  </div>
374
  <div>
375
+ <p class="font-medium text-white">Integration connected</p>
376
+ <p class="text-sm text-gray-400">Tanium integration was successfully connected</p>
377
+ <p class="text-xs text-gray-500 mt-1">2 days ago</p>
378
  </div>
379
  </div>
380
  </div>
 
384
  <!-- Right Column -->
385
  <div class="space-y-6">
386
  <!-- Integration Status -->
387
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="600">
388
+ <h3 class="font-semibold text-lg mb-4 text-white">Integration Status</h3>
389
  <div class="space-y-3">
390
+ <div class="flex items-center justify-between p-3 border border-white/20 rounded-lg">
391
  <div class="flex items-center space-x-3">
392
+ <div class="p-2 rounded-lg bg-purple-400/20 text-purple-400">
393
  <i data-feather="cpu" class="w-5 h-5"></i>
394
  </div>
395
+ <span class="font-medium text-white">Venafi</span>
396
  </div>
397
  <span
398
+ class="px-2 py-1 text-xs rounded-full bg-green-400/20 text-green-400">Connected</span>
399
  </div>
400
+ <div class="flex items-center justify-between p-3 border border-white/20 rounded-lg">
401
  <div class="flex items-center space-x-3">
402
+ <div class="p-2 rounded-lg bg-blue-400/20 text-blue-400">
403
  <i data-feather="server" class="w-5 h-5"></i>
404
  </div>
405
+ <span class="font-medium text-white">Tanium</span>
406
  </div>
407
  <span
408
+ class="px-2 py-1 text-xs rounded-full bg-green-400/20 text-green-400">Connected</span>
409
  </div>
410
+ <div class="flex items-center justify-between p-3 border border-white/20 rounded-lg">
411
  <div class="flex items-center space-x-3">
412
+ <div class="p-2 rounded-lg bg-yellow-400/20 text-yellow-400">
413
  <i data-feather="shield" class="w-5 h-5"></i>
414
  </div>
415
+ <span class="font-medium text-white">SandboxAQ</span>
416
  </div>
417
+ <span
418
+ class="px-2 py-1 text-xs rounded-full bg-red-400/20 text-red-400">Disconnected</span>
419
  </div>
420
+ <div class="flex items-center justify-between p-3 border border-white/20 rounded-lg">
421
  <div class="flex items-center space-x-3">
422
+ <div class="p-2 rounded-lg bg-gray-400/20 text-gray-400">
423
  <i data-feather="cloud" class="w-5 h-5"></i>
424
  </div>
425
+ <span class="font-medium text-white">AWS KMS</span>
426
  </div>
427
  <span
428
+ class="px-2 py-1 text-xs rounded-full bg-yellow-400/20 text-yellow-400">Pending</span>
429
  </div>
430
  </div>
431
  </div>
432
 
433
  <!-- Risk Distribution -->
434
+ <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="700">
435
+ <h3 class="font-semibold text-lg mb-4 text-white">Risk Distribution</h3>
436
  <div class="h-48 flex items-center justify-center">
437
  <!-- Placeholder for chart -->
438
  <div
439
+ class="w-full h-full bg-white/5 rounded-lg flex items-center justify-center text-gray-400 border border-white/10">
440
  <i data-feather="pie-chart" class="w-12 h-12"></i>
441
  </div>
442
  </div>
 
444
  <div class="flex items-center justify-between">
445
  <div class="flex items-center space-x-2">
446
  <div class="w-3 h-3 rounded-full bg-red-500"></div>
447
+ <span class="text-sm text-gray-300">High Risk</span>
448
  </div>
449
+ <span class="text-sm font-medium text-white">12%</span>
450
  </div>
451
  <div class="flex items-center justify-between">
452
  <div class="flex items-center space-x-2">
453
  <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
454
+ <span class="text-sm text-gray-300">Medium Risk</span>
455
  </div>
456
+ <span class="text-sm font-medium text-white">34%</span>
457
  </div>
458
  <div class="flex items-center justify-between">
459
  <div class="flex items-center space-x-2">
460
  <div class="w-3 h-3 rounded-full bg-green-500"></div>
461
+ <span class="text-sm text-gray-300">Low Risk</span>
462
  </div>
463
+ <span class="text-sm font-medium text-white">54%</span>
464
  </div>
465
  </div>
466
  </div>
 
470
  </div>
471
 
472
  <!-- Floating Modals -->
473
+ <div id="newCbomModal"
474
+ class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-70 backdrop-blur-sm">
475
+ <div class="bg-gray-800 rounded-xl shadow-lg w-full max-w-md border border-white/10">
476
  <div class="p-6">
477
  <div class="flex items-center justify-between mb-4">
478
+ <h3 class="text-xl font-semibold text-white">Create New CBOM</h3>
479
+ <button onclick="closeModal('newCbomModal')" class="text-gray-400 hover:text-white">
480
  <i data-feather="x" class="w-6 h-6"></i>
481
  </button>
482
  </div>
483
 
484
  <div class="space-y-4">
485
  <div>
486
+ <label class="block text-sm font-medium text-gray-300 mb-1">CBOM Name</label>
487
  <input type="text"
488
+ class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
489
  </div>
490
  <div>
491
+ <label class="block text-sm font-medium text-gray-300 mb-1">Description</label>
492
  <textarea
493
+ class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-transparent"
494
  rows="3"></textarea>
495
  </div>
496
  <div>
497
+ <label class="block text-sm font-medium text-gray-300 mb-1">Template</label>
498
  <select
499
+ class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
500
  <option>Web Application</option>
501
  <option>Mobile Application</option>
502
  <option>Microservices</option>
 
507
 
508
  <div class="flex justify-end space-x-3 mt-6">
509
  <button onclick="closeModal('newCbomModal')"
510
+ class="px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10">
511
  Cancel
512
  </button>
513
+ <button class="px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
514
  Create CBOM
515
  </button>
516
  </div>
 
518
  </div>
519
  </div>
520
 
521
+ <div id="importCbomModal"
522
+ class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-70 backdrop-blur-sm">
523
+ <div class="bg-gray-800 rounded-xl shadow-lg w-full max-w-md border border-white/10">
524
  <div class="p-6">
525
  <div class="flex items-center justify-between mb-4">
526
+ <h3 class="text-xl font-semibold text-white">Import CBOM</h3>
527
+ <button onclick="closeModal('importCbomModal')" class="text-gray-400 hover:text-white">
528
  <i data-feather="x" class="w-6 h-6"></i>
529
  </button>
530
  </div>
531
 
532
  <div class="space-y-4">
533
+ <div class="border-2 border-dashed border-white/20 rounded-lg p-8 text-center">
534
  <i data-feather="upload" class="w-12 h-12 mx-auto text-gray-400 mb-3"></i>
535
+ <p class="text-sm text-gray-300 mb-2">Drag and drop your CBOM file here</p>
536
+ <p class="text-xs text-gray-500 mb-4">Supports .json, .xml, .cbom formats</p>
537
+ <button class="px-4 py-2 bg-white/10 text-gray-300 rounded-lg hover:bg-white/20">
538
  Select File
539
  </button>
540
  </div>
541
  <div class="flex items-center space-x-2">
542
  <input type="checkbox" id="overwrite"
543
+ class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
544
+ <label for="overwrite" class="text-sm text-gray-300">Overwrite existing CBOM with same
545
  name</label>
546
  </div>
547
  </div>
548
 
549
  <div class="flex justify-end space-x-3 mt-6">
550
  <button onclick="closeModal('importCbomModal')"
551
+ class="px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10">
552
  Cancel
553
  </button>
554
+ <button class="px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
555
  Import CBOM
556
  </button>
557
  </div>
 
560
  </div>
561
 
562
  <div id="riskAssessmentModal"
563
+ class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-70 backdrop-blur-sm">
564
+ <div class="bg-gray-800 rounded-xl shadow-lg w-full max-w-md border border-white/10">
565
  <div class="p-6">
566
  <div class="flex items-center justify-between mb-4">
567
+ <h3 class="text-xl font-semibold text-white">Run Risk Assessment</h3>
568
+ <button onclick="closeModal('riskAssessmentModal')" class="text-gray-400 hover:text-white">
569
  <i data-feather="x" class="w-6 h-6"></i>
570
  </button>
571
  </div>
572
 
573
  <div class="space-y-4">
574
  <div>
575
+ <label class="block text-sm font-medium text-gray-300 mb-1">Select CBOM</label>
576
  <select
577
+ class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
578
  <option>Enterprise Web App</option>
579
  <option>Payment Gateway</option>
580
  <option>Legacy System</option>
 
582
  </select>
583
  </div>
584
  <div>
585
+ <label class="block text-sm font-medium text-gray-300 mb-1">Assessment Type</label>
586
  <select
587
+ class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
588
  <option>Quantum Risk Only</option>
589
  <option>Full Cryptographic Assessment</option>
590
  <option>Compliance Check</option>
 
592
  </div>
593
  <div class="flex items-center space-x-2">
594
  <input type="checkbox" id="includeDependencies"
595
+ class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400" checked>
596
+ <label for="includeDependencies" class="text-sm text-gray-300">Include dependencies in
597
  assessment</label>
598
  </div>
599
  </div>
600
 
601
  <div class="flex justify-end space-x-3 mt-6">
602
  <button onclick="closeModal('riskAssessmentModal')"
603
+ class="px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10">
604
  Cancel
605
  </button>
606
+ <button class="px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
607
  Run Assessment
608
  </button>
609
  </div>
 
612
  </div>
613
 
614
  <div id="generateReportModal"
615
+ class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-70 backdrop-blur-sm">
616
+ <div class="bg-gray-800 rounded-xl shadow-lg w-full max-w-md border border-white/10">
617
  <div class="p-6">
618
  <div class="flex items-center justify-between mb-4">
619
+ <h3 class="text-xl font-semibold text-white">Generate Report</h3>
620
+ <button onclick="closeModal('generateReportModal')" class="text-gray-400 hover:text-white">
621
  <i data-feather="x" class="w-6 h-6"></i>
622
  </button>
623
  </div>
624
 
625
  <div class="space-y-4">
626
  <div>
627
+ <label class="block text-sm font-medium text-gray-300 mb-1">Report Type</label>
628
  <select
629
+ class="w-full px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
630
  <option>Quantum Risk Assessment</option>
631
  <option>Compliance Report</option>
632
  <option>Executive Summary</option>
 
634
  </select>
635
  </div>
636
  <div>
637
+ <label class="block text-sm font-medium text-gray-300 mb-1">Format</label>
638
  <div class="grid grid-cols-3 gap-2">
639
+ <button class="p-2 border border-white/20 rounded-lg hover:bg-white/10 transition-all">
640
+ <i data-feather="file-text" class="w-5 h-5 mx-auto text-gray-400"></i>
641
+ <span class="text-xs block mt-1 text-gray-300">PDF</span>
642
  </button>
643
+ <button class="p-2 border border-white/20 rounded-lg hover:bg-white/10 transition-all">
644
+ <i data-feather="file-text" class="w-5 h-5 mx-auto text-gray-400"></i>
645
+ <span class="text-xs block mt-1 text-gray-300">DOCX</span>
646
  </button>
647
+ <button class="p-2 border border-white/20 rounded-lg hover:bg-white/10 transition-all">
648
+ <i data-feather="file-text" class="w-5 h-5 mx-auto text-gray-400"></i>
649
+ <span class="text-xs block mt-1 text-gray-300">CSV</span>
650
  </button>
651
  </div>
652
  </div>
653
  <div class="flex items-center space-x-2">
654
  <input type="checkbox" id="includeCharts"
655
+ class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400" checked>
656
+ <label for="includeCharts" class="text-sm text-gray-300">Include charts and graphs</label>
657
  </div>
658
  </div>
659
 
660
  <div class="flex justify-end space-x-3 mt-6">
661
  <button onclick="closeModal('generateReportModal')"
662
+ class="px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10">
663
  Cancel
664
  </button>
665
+ <button class="px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
666
  Generate Report
667
  </button>
668
  </div>
 
671
  </div>
672
 
673
  <script>
674
+ // Initialize feather icons immediately
675
+ document.addEventListener('DOMContentLoaded', function () {
676
+ // Replace feather icons
677
+ feather.replace();
678
+
679
+ // Initialize AOS with better settings
680
+ AOS.init({
681
+ duration: 400,
682
+ once: true,
683
+ offset: 0,
684
+ easing: 'ease-out',
685
+ delay: 0,
686
+ anchorPlacement: 'top-bottom',
687
+ disable: function () {
688
+ // Disable AOS on mobile devices to prevent issues
689
+ return window.innerWidth < 768;
690
+ }
691
+ });
692
+
693
+ // Force AOS refresh after a short delay
694
+ setTimeout(() => {
695
+ AOS.refresh();
696
+ }, 100);
697
+ });
698
 
699
  // Modal functions
700
  function openModal(modalId) {
701
  document.getElementById(modalId).classList.remove('hidden');
702
+ // Re-render feather icons in modals
703
+ setTimeout(() => feather.replace(), 100);
704
  }
705
 
706
  function closeModal(modalId) {
707
  document.getElementById(modalId).classList.add('hidden');
708
  }
709
 
710
+ // Ensure all content is visible on load
711
+ window.addEventListener('load', function () {
712
+ // Force all AOS elements to animate
713
+ document.querySelectorAll('[data-aos]').forEach(el => {
714
+ el.classList.add('aos-animate');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
715
  });
716
  });
717
  </script>
index.html CHANGED
@@ -13,10 +13,19 @@
13
  <style>
14
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
15
 
 
 
 
 
 
16
  body {
17
  font-family: 'Inter', sans-serif;
18
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
19
  min-height: 100vh;
 
 
 
 
20
  }
21
 
22
  .gradient-text {
@@ -191,16 +200,84 @@
191
  }
192
  }
193
 
194
- /* Prevent horizontal overflow */
195
- html,
196
- body {
197
- overflow-x: hidden;
198
- max-width: 100%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
199
  }
200
  </style>
201
  </head>
202
 
203
- <body class="overflow-x-hidden">
204
  <!-- Animated Background Particles -->
205
  <div class="fixed inset-0 pointer-events-none">
206
  <div class="particle" style="left: 10%; animation-delay: 0s;"></div>
@@ -278,13 +355,13 @@
278
  Migration Journey
279
  </h1>
280
  <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-gray-300 mb-8 sm:mb-12 max-w-4xl mx-auto leading-relaxed"
281
- data-aos="fade-up" data-aos-delay="200">
282
  Navigate the quantum threat landscape with confidence. Our comprehensive platform guides you through
283
  discovery, assessment, and modernization of your cryptographic infrastructure.
284
  </p>
285
 
286
- <!-- Current Status Card - Make it responsive -->
287
- <div class="inline-block mb-8 sm:mb-16 w-full max-w-sm sm:max-w-md" data-aos="fade-up" data-aos-delay="400">
288
  <a href="#discoveryninventory" class="block transition-transform hover:scale-105">
289
  <div class="phase-card rounded-2xl p-6 sm:p-8 mx-auto cursor-pointer hover:border-yellow-400">
290
  <div class="flex items-center justify-center mb-4">
@@ -305,9 +382,9 @@
305
  </a>
306
  </div>
307
 
308
- <!-- Quick Stats - Responsive grid -->
309
  <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6 mb-8 sm:mb-12" data-aos="fade-up"
310
- data-aos-delay="600">
311
  <div class="stat-card rounded-xl p-4 sm:p-6 text-center">
312
  <div class="text-2xl sm:text-3xl font-bold text-white mb-1 sm:mb-2">24</div>
313
  <div class="text-gray-400 text-xs sm:text-sm">Active CBOMs</div>
@@ -329,7 +406,7 @@
329
  <!-- Action Button -->
330
  <a href="dashboard.html"
331
  class="action-button text-gray-900 font-bold py-3 px-6 sm:py-4 sm:px-8 rounded-xl text-base sm:text-lg"
332
- data-aos="fade-up" data-aos-delay="800">
333
  <i data-feather="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 inline mr-2"></i>
334
  Continue Journey
335
  </a>
@@ -347,8 +424,8 @@
347
  </p>
348
  </div>
349
 
350
- <!-- Progress Timeline - Hide labels on very small screens -->
351
- <div class="mb-12 sm:mb-16" data-aos="fade-up" data-aos-delay="200">
352
  <div class="timeline-connector mx-auto max-w-4xl rounded-full">
353
  <div class="timeline-progress rounded-full" style="width: 67%"></div>
354
  </div>
@@ -359,11 +436,11 @@
359
  </div>
360
  </div>
361
 
362
- <!-- Phase Cards - Stack on mobile -->
363
  <div id="discoveryninventory" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
364
  <!-- Phase 1: Discovery & Inventory -->
365
  <div class="phase-card active rounded-2xl p-8 transition-all duration-500" data-aos="fade-up"
366
- data-aos-delay="300">
367
  <div class="flex items-center justify-between mb-6">
368
  <div
369
  class="w-16 h-16 rounded-full bg-gradient-to-r from-blue-400 to-blue-500 flex items-center justify-center">
@@ -426,7 +503,7 @@
426
 
427
  <!-- Phase 2: Risk Assessment -->
428
  <div class="phase-card rounded-2xl p-8 transition-all duration-500" data-aos="fade-up"
429
- data-aos-delay="400">
430
  <div class="flex items-center justify-between mb-6">
431
  <div
432
  class="w-16 h-16 rounded-full bg-gradient-to-r from-red-400 to-red-500 flex items-center justify-center">
@@ -483,7 +560,7 @@
483
 
484
  <!-- Phase 3: Migration & Modernization -->
485
  <div class="phase-card rounded-2xl p-8 transition-all duration-500" data-aos="fade-up"
486
- data-aos-delay="500">
487
  <div class="flex items-center justify-between mb-6">
488
  <div
489
  class="w-16 h-16 rounded-full bg-gradient-to-r from-green-400 to-green-500 flex items-center justify-center">
@@ -541,7 +618,7 @@
541
  </div>
542
  </section>
543
 
544
- <!-- Quick Actions Section - Responsive grid -->
545
  <section class="py-12 sm:py-20 px-4 sm:px-6 bg-gradient-to-r from-gray-900/50 to-gray-800/50">
546
  <div class="max-w-7xl mx-auto">
547
  <div class="text-center mb-12 sm:mb-16" data-aos="fade-up">
@@ -552,7 +629,7 @@
552
  </div>
553
 
554
  <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6" data-aos="fade-up"
555
- data-aos-delay="200">
556
  <button
557
  class="action-button text-gray-900 font-semibold py-4 px-3 sm:py-6 sm:px-6 rounded-xl text-center transition-all hover:scale-105">
558
  <div class="flex flex-col items-center">
@@ -588,31 +665,87 @@
588
  </div>
589
  </section>
590
 
 
 
 
 
 
 
 
591
  <script>
592
- // Initialize AOS animations
593
  AOS.init({
594
- duration: 1000,
595
- once: true,
596
- offset: 100
 
 
597
  });
598
 
599
  // Initialize Feather icons
600
  feather.replace();
601
 
602
- // Smooth scrolling for navigation links
603
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
604
  anchor.addEventListener('click', function (e) {
605
  e.preventDefault();
606
- const target = document.querySelector(this.getAttribute('href'));
 
607
  if (target) {
608
- target.scrollIntoView({
609
- behavior: 'smooth',
610
- block: 'start'
611
- });
 
 
 
 
 
 
612
  }
613
  });
614
  });
615
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
616
  // Phase progress simulation
617
  function updatePhaseProgress() {
618
  const phases = [
@@ -632,12 +765,21 @@
632
 
633
  updatePhaseProgress();
634
 
635
- // Add dynamic background gradient based on scroll
636
- window.addEventListener('scroll', () => {
637
- const scrolled = window.pageYOffset;
638
- const rate = scrolled * -0.1;
639
- document.body.style.backgroundPositionY = rate + 'px';
640
- });
 
 
 
 
 
 
 
 
 
641
 
642
  // Add click handlers for action buttons
643
  document.querySelectorAll('.action-button').forEach(button => {
@@ -672,6 +814,30 @@
672
  menu.classList.add('hidden');
673
  }
674
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
675
  </script>
676
 
677
  <style>
 
13
  <style>
14
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
15
 
16
+ html {
17
+ scroll-behavior: smooth;
18
+ overflow-x: hidden;
19
+ }
20
+
21
  body {
22
  font-family: 'Inter', sans-serif;
23
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
24
  min-height: 100vh;
25
+ overflow-x: hidden;
26
+ overflow-y: auto;
27
+ margin: 0;
28
+ padding: 0;
29
  }
30
 
31
  .gradient-text {
 
200
  }
201
  }
202
 
203
+ /* Smooth scrolling for the entire page */
204
+ html {
205
+ scroll-behavior: smooth;
206
+ }
207
+
208
+ /* Back to top button */
209
+ .back-to-top {
210
+ position: fixed;
211
+ bottom: 2rem;
212
+ right: 2rem;
213
+ width: 48px;
214
+ height: 48px;
215
+ background: linear-gradient(135deg, #F59E0B, #FBBF24);
216
+ border-radius: 50%;
217
+ display: flex;
218
+ align-items: center;
219
+ justify-content: center;
220
+ cursor: pointer;
221
+ opacity: 0;
222
+ visibility: hidden;
223
+ transition: all 0.3s ease;
224
+ z-index: 1000;
225
+ box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
226
+ }
227
+
228
+ .back-to-top:hover {
229
+ transform: translateY(-3px);
230
+ box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
231
+ }
232
+
233
+ .back-to-top.show {
234
+ opacity: 1;
235
+ visibility: visible;
236
+ }
237
+
238
+ .back-to-top svg {
239
+ width: 20px;
240
+ height: 20px;
241
+ stroke: #0f172a;
242
+ stroke-width: 3;
243
+ }
244
+
245
+ @media (max-width: 640px) {
246
+ .back-to-top {
247
+ bottom: 1.5rem;
248
+ right: 1.5rem;
249
+ width: 40px;
250
+ height: 40px;
251
+ }
252
+
253
+ .back-to-top svg {
254
+ width: 16px;
255
+ height: 16px;
256
+ }
257
+ }
258
+
259
+ /* Fix select dropdown styling */
260
+ select option {
261
+ background-color: #1e293b;
262
+ color: #ffffff;
263
+ }
264
+
265
+ select option:hover {
266
+ background-color: #334155;
267
+ }
268
+
269
+ /* For better cross-browser compatibility */
270
+ select {
271
+ background-color: rgba(255, 255, 255, 0.1);
272
+ }
273
+
274
+ select:focus {
275
+ background-color: rgba(255, 255, 255, 0.15);
276
  }
277
  </style>
278
  </head>
279
 
280
+ <body>
281
  <!-- Animated Background Particles -->
282
  <div class="fixed inset-0 pointer-events-none">
283
  <div class="particle" style="left: 10%; animation-delay: 0s;"></div>
 
355
  Migration Journey
356
  </h1>
357
  <p class="text-base sm:text-lg md:text-xl lg:text-2xl text-gray-300 mb-8 sm:mb-12 max-w-4xl mx-auto leading-relaxed"
358
+ data-aos="fade-up" data-aos-delay="100">
359
  Navigate the quantum threat landscape with confidence. Our comprehensive platform guides you through
360
  discovery, assessment, and modernization of your cryptographic infrastructure.
361
  </p>
362
 
363
+ <!-- Current Status Card -->
364
+ <div class="inline-block mb-8 sm:mb-16 w-full max-w-sm sm:max-w-md" data-aos="fade-up" data-aos-delay="200">
365
  <a href="#discoveryninventory" class="block transition-transform hover:scale-105">
366
  <div class="phase-card rounded-2xl p-6 sm:p-8 mx-auto cursor-pointer hover:border-yellow-400">
367
  <div class="flex items-center justify-center mb-4">
 
382
  </a>
383
  </div>
384
 
385
+ <!-- Quick Stats -->
386
  <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6 mb-8 sm:mb-12" data-aos="fade-up"
387
+ data-aos-delay="300">
388
  <div class="stat-card rounded-xl p-4 sm:p-6 text-center">
389
  <div class="text-2xl sm:text-3xl font-bold text-white mb-1 sm:mb-2">24</div>
390
  <div class="text-gray-400 text-xs sm:text-sm">Active CBOMs</div>
 
406
  <!-- Action Button -->
407
  <a href="dashboard.html"
408
  class="action-button text-gray-900 font-bold py-3 px-6 sm:py-4 sm:px-8 rounded-xl text-base sm:text-lg"
409
+ data-aos="fade-up" data-aos-delay="400">
410
  <i data-feather="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 inline mr-2"></i>
411
  Continue Journey
412
  </a>
 
424
  </p>
425
  </div>
426
 
427
+ <!-- Progress Timeline -->
428
+ <div class="mb-12 sm:mb-16" data-aos="fade-up" data-aos-delay="100">
429
  <div class="timeline-connector mx-auto max-w-4xl rounded-full">
430
  <div class="timeline-progress rounded-full" style="width: 67%"></div>
431
  </div>
 
436
  </div>
437
  </div>
438
 
439
+ <!-- Phase Cards -->
440
  <div id="discoveryninventory" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
441
  <!-- Phase 1: Discovery & Inventory -->
442
  <div class="phase-card active rounded-2xl p-8 transition-all duration-500" data-aos="fade-up"
443
+ data-aos-delay="150">
444
  <div class="flex items-center justify-between mb-6">
445
  <div
446
  class="w-16 h-16 rounded-full bg-gradient-to-r from-blue-400 to-blue-500 flex items-center justify-center">
 
503
 
504
  <!-- Phase 2: Risk Assessment -->
505
  <div class="phase-card rounded-2xl p-8 transition-all duration-500" data-aos="fade-up"
506
+ data-aos-delay="200">
507
  <div class="flex items-center justify-between mb-6">
508
  <div
509
  class="w-16 h-16 rounded-full bg-gradient-to-r from-red-400 to-red-500 flex items-center justify-center">
 
560
 
561
  <!-- Phase 3: Migration & Modernization -->
562
  <div class="phase-card rounded-2xl p-8 transition-all duration-500" data-aos="fade-up"
563
+ data-aos-delay="250">
564
  <div class="flex items-center justify-between mb-6">
565
  <div
566
  class="w-16 h-16 rounded-full bg-gradient-to-r from-green-400 to-green-500 flex items-center justify-center">
 
618
  </div>
619
  </section>
620
 
621
+ <!-- Quick Actions Section -->
622
  <section class="py-12 sm:py-20 px-4 sm:px-6 bg-gradient-to-r from-gray-900/50 to-gray-800/50">
623
  <div class="max-w-7xl mx-auto">
624
  <div class="text-center mb-12 sm:mb-16" data-aos="fade-up">
 
629
  </div>
630
 
631
  <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6" data-aos="fade-up"
632
+ data-aos-delay="100">
633
  <button
634
  class="action-button text-gray-900 font-semibold py-4 px-3 sm:py-6 sm:px-6 rounded-xl text-center transition-all hover:scale-105">
635
  <div class="flex flex-col items-center">
 
665
  </div>
666
  </section>
667
 
668
+ <!-- Back to Top Button -->
669
+ <button class="back-to-top" onclick="scrollToTop()" aria-label="Back to top">
670
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
671
+ <path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" />
672
+ </svg>
673
+ </button>
674
+
675
  <script>
676
+ // Initialize AOS animations with faster settings
677
  AOS.init({
678
+ duration: 400, // Reduced from 600ms to 400ms
679
+ once: false, // Changed to false so animations replay on scroll
680
+ offset: 20, // Reduced from 50 to trigger animations sooner
681
+ easing: 'ease-out-cubic', // Smoother easing function
682
+ anchorPlacement: 'top-bottom'
683
  });
684
 
685
  // Initialize Feather icons
686
  feather.replace();
687
 
688
+ // Smooth scrolling for navigation links with improved performance
689
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
690
  anchor.addEventListener('click', function (e) {
691
  e.preventDefault();
692
+ const targetId = this.getAttribute('href');
693
+ const target = document.querySelector(targetId);
694
  if (target) {
695
+ // Calculate offset for fixed navigation
696
+ const navHeight = document.querySelector('nav').offsetHeight;
697
+ const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight - 20;
698
+
699
+ // Smooth scroll with custom duration based on distance
700
+ const startPosition = window.pageYOffset;
701
+ const distance = targetPosition - startPosition;
702
+ const duration = Math.min(Math.max(Math.abs(distance) / 3, 400), 1000);
703
+
704
+ smoothScrollTo(targetPosition, duration);
705
  }
706
  });
707
  });
708
 
709
+ // Custom smooth scroll function
710
+ function smoothScrollTo(targetPosition, duration) {
711
+ const startPosition = window.pageYOffset;
712
+ const distance = targetPosition - startPosition;
713
+ const startTime = performance.now();
714
+
715
+ function scrollAnimation(currentTime) {
716
+ const elapsed = currentTime - startTime;
717
+ const progress = Math.min(elapsed / duration, 1);
718
+
719
+ // Easing function for smooth deceleration
720
+ const easeProgress = 1 - Math.pow(1 - progress, 3);
721
+
722
+ window.scrollTo(0, startPosition + (distance * easeProgress));
723
+
724
+ if (progress < 1) {
725
+ requestAnimationFrame(scrollAnimation);
726
+ }
727
+ }
728
+
729
+ requestAnimationFrame(scrollAnimation);
730
+ }
731
+
732
+ // Back to top button functionality
733
+ const backToTopButton = document.querySelector('.back-to-top');
734
+
735
+ // Show/hide back to top button
736
+ window.addEventListener('scroll', () => {
737
+ if (window.pageYOffset > 300) {
738
+ backToTopButton.classList.add('show');
739
+ } else {
740
+ backToTopButton.classList.remove('show');
741
+ }
742
+ });
743
+
744
+ // Scroll to top function
745
+ function scrollToTop() {
746
+ smoothScrollTo(0, 600);
747
+ }
748
+
749
  // Phase progress simulation
750
  function updatePhaseProgress() {
751
  const phases = [
 
765
 
766
  updatePhaseProgress();
767
 
768
+ // Add dynamic background gradient based on scroll with throttling
769
+ let ticking = false;
770
+ function updateBackgroundPosition() {
771
+ if (!ticking) {
772
+ window.requestAnimationFrame(() => {
773
+ const scrolled = window.pageYOffset;
774
+ const rate = scrolled * -0.1;
775
+ document.body.style.backgroundPositionY = rate + 'px';
776
+ ticking = false;
777
+ });
778
+ ticking = true;
779
+ }
780
+ }
781
+
782
+ window.addEventListener('scroll', updateBackgroundPosition);
783
 
784
  // Add click handlers for action buttons
785
  document.querySelectorAll('.action-button').forEach(button => {
 
814
  menu.classList.add('hidden');
815
  }
816
  });
817
+
818
+ // Optimize scroll performance with passive listeners
819
+ window.addEventListener('scroll', updateBackgroundPosition, { passive: true });
820
+
821
+ // Preload animations for sections about to come into view
822
+ const observerOptions = {
823
+ root: null,
824
+ rootMargin: '50px',
825
+ threshold: 0
826
+ };
827
+
828
+ const animationObserver = new IntersectionObserver((entries) => {
829
+ entries.forEach(entry => {
830
+ if (entry.isIntersecting) {
831
+ // Force AOS to check this element
832
+ AOS.refreshHard();
833
+ }
834
+ });
835
+ }, observerOptions);
836
+
837
+ // Observe all AOS elements
838
+ document.querySelectorAll('[data-aos]').forEach(el => {
839
+ animationObserver.observe(el);
840
+ });
841
  </script>
842
 
843
  <style>
integrations.html CHANGED
@@ -7,29 +7,57 @@
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 {
@@ -44,67 +72,141 @@
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>
@@ -115,14 +217,14 @@
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">
@@ -130,10 +232,10 @@
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>
@@ -141,53 +243,53 @@
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
 
@@ -195,52 +297,52 @@
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>
@@ -248,49 +350,49 @@
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>
@@ -300,39 +402,39 @@
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>
@@ -344,7 +446,7 @@
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>
@@ -352,49 +454,49 @@
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>
@@ -402,37 +504,37 @@
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>
@@ -444,7 +546,7 @@
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>
@@ -454,43 +556,43 @@
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>
@@ -498,19 +600,47 @@
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
 
@@ -523,6 +653,14 @@
523
  }, 1000);
524
  });
525
  });
 
 
 
 
 
 
 
 
526
  </script>
527
  </body>
528
 
 
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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 
11
  <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
13
 
14
  body {
15
  font-family: 'Inter', sans-serif;
16
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
17
+ min-height: 100vh;
18
+ }
19
+
20
+ /* Ensure content is visible by default */
21
+ [data-aos] {
22
+ opacity: 1 !important;
23
+ transform: none !important;
24
+ }
25
+
26
+ [data-aos].aos-animate {
27
+ opacity: 1 !important;
28
+ }
29
+
30
+ .gradient-text {
31
+ background: linear-gradient(135deg, #F59E0B, #FBBF24, #FCD34D);
32
+ -webkit-background-clip: text;
33
+ -webkit-text-fill-color: transparent;
34
+ background-clip: text;
35
  }
36
 
37
  .sidebar {
38
+ backdrop-filter: blur(20px);
39
+ background: rgba(15, 23, 42, 0.8);
40
+ border-right: 1px solid rgba(255, 255, 255, 0.1);
41
+ transition: all 0.3s ease;
42
+ }
43
+
44
+ .card-hover {
45
+ backdrop-filter: blur(15px);
46
+ background: rgba(255, 255, 255, 0.05);
47
+ border: 1px solid rgba(255, 255, 255, 0.1);
48
  transition: all 0.3s ease;
49
  }
50
 
51
  .card-hover:hover {
52
  transform: translateY(-2px);
53
+ background: rgba(255, 255, 255, 0.08);
54
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
55
+ border-color: rgba(245, 158, 11, 0.3);
56
  }
57
 
58
  .tab-active {
59
  border-bottom: 3px solid #F59E0B;
60
+ color: #F59E0B;
61
  }
62
 
63
  .status-connected {
 
72
  border-left: 4px solid #F59E0B;
73
  }
74
 
75
+ .action-button {
76
+ background: linear-gradient(135deg, #F59E0B, #FBBF24);
77
+ transition: all 0.3s ease;
78
+ box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
79
+ }
80
+
81
+ .action-button:hover {
82
+ transform: translateY(-2px);
83
+ box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
84
+ }
85
+
86
  .pulse-animation {
87
  animation: pulse 2s infinite;
88
  }
89
 
90
  @keyframes pulse {
91
+ 0%, 100% {
 
 
92
  opacity: 1;
93
  }
 
94
  50% {
95
  opacity: 0.7;
96
  }
97
  }
98
+
99
+ .particle {
100
+ position: absolute;
101
+ width: 2px;
102
+ height: 2px;
103
+ background: #F59E0B;
104
+ border-radius: 50%;
105
+ animation: particle-float 8s linear infinite;
106
+ opacity: 0.7;
107
+ }
108
+
109
+ @keyframes particle-float {
110
+ 0% {
111
+ transform: translateY(100vh) translateX(0px);
112
+ opacity: 0;
113
+ }
114
+ 10% {
115
+ opacity: 0.7;
116
+ }
117
+ 90% {
118
+ opacity: 0.7;
119
+ }
120
+ 100% {
121
+ transform: translateY(-100px) translateX(100px);
122
+ opacity: 0;
123
+ }
124
+ }
125
+
126
+ /* Fix select dropdown styling */
127
+ select option {
128
+ background-color: #1e293b;
129
+ color: #ffffff;
130
+ padding: 8px;
131
+ }
132
+
133
+ select option:hover {
134
+ background-color: #334155;
135
+ }
136
+
137
+ select option:checked {
138
+ background-color: #475569;
139
+ }
140
+
141
+ /* Ensure select has proper background */
142
+ select {
143
+ background-color: rgba(255, 255, 255, 0.1);
144
+ color: #ffffff;
145
+ }
146
+
147
+ select:focus {
148
+ background-color: rgba(255, 255, 255, 0.15);
149
+ }
150
  </style>
151
  </head>
152
 
153
  <body class="flex h-screen overflow-hidden">
154
+ <!-- Animated Background Particles -->
155
+ <div class="fixed inset-0 pointer-events-none z-0">
156
+ <div class="particle" style="left: 10%; animation-delay: 0s;"></div>
157
+ <div class="particle" style="left: 30%; animation-delay: 2s;"></div>
158
+ <div class="particle" style="left: 50%; animation-delay: 4s;"></div>
159
+ <div class="particle" style="left: 70%; animation-delay: 6s;"></div>
160
+ <div class="particle" style="left: 90%; animation-delay: 8s;"></div>
161
+ </div>
162
+
163
  <!-- Sidebar -->
164
+ <div class="sidebar text-white w-64 flex-shrink-0 flex flex-col relative z-10">
165
+ <div class="p-4 border-b border-white/10">
166
+ <a href="index.html" class="flex items-center space-x-3 hover:opacity-80 transition-opacity">
167
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
168
+ <i data-feather="shield" class="text-gray-900 w-5 h-5"></i>
169
  </div>
170
+ <h1 class="text-xl font-bold">EY <span class="gradient-text">Quantum Safe</span></h1>
171
+ </a>
172
  </div>
173
 
174
  <nav class="flex-1 overflow-y-auto p-4 space-y-1">
175
  <a href="index.html"
176
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
177
+ <i data-feather="home" class="w-5 h-5"></i>
178
+ <span>Home</span>
179
+ </a>
180
+ <a href="dashboard.html"
181
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
182
  <i data-feather="layout" class="w-5 h-5"></i>
183
  <span>Dashboard</span>
184
  </a>
185
  <a href="cboms.html"
186
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
187
  <i data-feather="file-text" class="w-5 h-5"></i>
188
  <span>CBOMs</span>
189
  </a>
190
  <a href="assets.html"
191
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
192
  <i data-feather="lock" class="w-5 h-5"></i>
193
  <span>Assets</span>
194
  </a>
195
+ <a href="integrations.html" class="flex items-center space-x-3 p-3 rounded-lg bg-yellow-400/20 text-yellow-400 border border-yellow-400/30">
196
  <i data-feather="link" class="w-5 h-5"></i>
197
  <span>Integrations</span>
198
  </a>
199
  <a href="analytics.html"
200
+ class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">
201
  <i data-feather="bar-chart-2" class="w-5 h-5"></i>
202
  <span>Analytics</span>
203
  </a>
204
  </nav>
205
 
206
+ <div class="p-4 border-t border-white/10">
207
  <div class="flex items-center space-x-3">
208
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-600 to-gray-700 flex items-center justify-center">
209
+ <i data-feather="user" class="text-gray-300 w-5 h-5"></i>
210
  </div>
211
  <div>
212
  <p class="text-sm font-medium">Josep Mateu</p>
 
217
  </div>
218
 
219
  <!-- Main Content -->
220
+ <div class="flex-1 flex flex-col overflow-hidden relative z-10">
221
  <!-- Top Navigation -->
222
+ <header class="backdrop-filter backdrop-blur-lg bg-white/5 border-b border-white/10 flex items-center justify-between p-4">
223
  <div class="flex items-center space-x-4">
224
+ <button class="md:hidden text-white">
225
  <i data-feather="menu"></i>
226
  </button>
227
+ <h2 class="text-xl font-semibold text-white">Integrations Management</h2>
228
  </div>
229
 
230
  <div class="flex items-center space-x-4">
 
232
  <i data-feather="search"
233
  class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
234
  <input type="text" placeholder="Search integrations..."
235
+ class="pl-10 pr-4 py-2 bg-white/10 border border-white/20 text-white placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
236
  </div>
237
  <button
238
+ class="px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
239
  <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
240
  Add Integration
241
  </button>
 
243
  </header>
244
 
245
  <!-- Main Content Area -->
246
+ <main class="flex-1 overflow-y-auto p-6">
247
  <!-- Tabs Navigation -->
248
+ <div class="card-hover rounded-xl mb-6">
249
+ <div class="flex border-b border-white/10 overflow-x-auto">
250
  <button class="px-6 py-4 font-medium tab-active">Active Integrations</button>
251
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200">Available</button>
252
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200">Configuration</button>
253
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200">Logs</button>
254
  </div>
255
  </div>
256
 
257
  <!-- Integration Statistics -->
258
  <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
259
+ <div class="card-hover rounded-xl p-4 text-center" data-aos="fade-up">
260
  <div
261
+ class="w-12 h-12 bg-green-400/20 text-green-400 rounded-full flex items-center justify-center mx-auto mb-3">
262
  <i data-feather="check-circle" class="w-6 h-6"></i>
263
  </div>
264
+ <p class="text-2xl font-bold text-white">3</p>
265
+ <p class="text-sm text-gray-400">Active Integrations</p>
266
  </div>
267
 
268
+ <div class="card-hover rounded-xl p-4 text-center" data-aos="fade-up" data-aos-delay="100">
269
  <div
270
+ class="w-12 h-12 bg-red-400/20 text-red-400 rounded-full flex items-center justify-center mx-auto mb-3">
271
  <i data-feather="x-circle" class="w-6 h-6"></i>
272
  </div>
273
+ <p class="text-2xl font-bold text-white">1</p>
274
+ <p class="text-sm text-gray-400">Failed Connections</p>
275
  </div>
276
 
277
+ <div class="card-hover rounded-xl p-4 text-center" data-aos="fade-up" data-aos-delay="200">
278
  <div
279
+ class="w-12 h-12 bg-yellow-400/20 text-yellow-400 rounded-full flex items-center justify-center mx-auto mb-3">
280
  <i data-feather="clock" class="w-6 h-6"></i>
281
  </div>
282
+ <p class="text-2xl font-bold text-white">2</p>
283
+ <p class="text-sm text-gray-400">Pending Setup</p>
284
  </div>
285
 
286
+ <div class="card-hover rounded-xl p-4 text-center" data-aos="fade-up" data-aos-delay="300">
287
  <div
288
+ class="w-12 h-12 bg-blue-400/20 text-blue-400 rounded-full flex items-center justify-center mx-auto mb-3">
289
  <i data-feather="activity" class="w-6 h-6"></i>
290
  </div>
291
+ <p class="text-2xl font-bold text-white">15.2k</p>
292
+ <p class="text-sm text-gray-400">Events Today</p>
293
  </div>
294
  </div>
295
 
 
297
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
298
  <!-- Active Integrations -->
299
  <div class="space-y-6">
300
+ <h3 class="font-semibold text-lg text-white">Active Integrations</h3>
301
 
302
  <!-- Venafi Integration -->
303
+ <div class="card-hover rounded-xl p-6 status-connected" data-aos="fade-up" data-aos-delay="100">
304
  <div class="flex items-center justify-between mb-4">
305
  <div class="flex items-center space-x-4">
306
  <div
307
+ class="w-12 h-12 bg-purple-400/20 text-purple-400 rounded-lg flex items-center justify-center">
308
  <i data-feather="cpu" class="w-6 h-6"></i>
309
  </div>
310
  <div>
311
+ <h4 class="font-semibold text-lg text-white">Venafi</h4>
312
+ <p class="text-sm text-gray-400">Certificate Management Platform</p>
313
  </div>
314
  </div>
315
  <div class="flex items-center space-x-2">
316
  <span
317
+ class="px-2 py-1 text-xs rounded-full bg-green-400/20 text-green-400">Connected</span>
318
  <div class="w-3 h-3 bg-green-500 rounded-full pulse-animation"></div>
319
  </div>
320
  </div>
321
 
322
  <div class="grid grid-cols-2 gap-4 mb-4">
323
+ <div class="text-center p-3 bg-white/5 rounded-lg border border-white/10">
324
+ <p class="text-xl font-bold text-white">247</p>
325
+ <p class="text-xs text-gray-400">Certificates Synced</p>
326
  </div>
327
+ <div class="text-center p-3 bg-white/5 rounded-lg border border-white/10">
328
+ <p class="text-xl font-bold text-white">99.8%</p>
329
+ <p class="text-xs text-gray-400">Uptime</p>
330
  </div>
331
  </div>
332
 
333
+ <div class="flex items-center justify-between text-sm text-gray-400 mb-4">
334
  <span>Last sync: 5 minutes ago</span>
335
  <span>Next sync: 1 hour</span>
336
  </div>
337
 
338
  <div class="flex space-x-2">
339
  <button
340
+ class="flex-1 px-4 py-2 bg-white/10 text-gray-300 rounded-lg hover:bg-white/20 transition-colors border border-white/20">
341
  <i data-feather="settings" class="w-4 h-4 inline mr-2"></i>
342
  Configure
343
  </button>
344
  <button
345
+ class="flex-1 px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
346
  <i data-feather="activity" class="w-4 h-4 inline mr-2"></i>
347
  View Logs
348
  </button>
 
350
  </div>
351
 
352
  <!-- Tanium Integration -->
353
+ <div class="card-hover rounded-xl p-6 status-connected" data-aos="fade-up" data-aos-delay="200">
354
  <div class="flex items-center justify-between mb-4">
355
  <div class="flex items-center space-x-4">
356
  <div
357
+ class="w-12 h-12 bg-blue-400/20 text-blue-400 rounded-lg flex items-center justify-center">
358
  <i data-feather="server" class="w-6 h-6"></i>
359
  </div>
360
  <div>
361
+ <h4 class="font-semibold text-lg text-white">Tanium</h4>
362
+ <p class="text-sm text-gray-400">Endpoint Management Platform</p>
363
  </div>
364
  </div>
365
  <div class="flex items-center space-x-2">
366
  <span
367
+ class="px-2 py-1 text-xs rounded-full bg-green-400/20 text-green-400">Connected</span>
368
  <div class="w-3 h-3 bg-green-500 rounded-full pulse-animation"></div>
369
  </div>
370
  </div>
371
 
372
  <div class="grid grid-cols-2 gap-4 mb-4">
373
+ <div class="text-center p-3 bg-white/5 rounded-lg border border-white/10">
374
+ <p class="text-xl font-bold text-white">1,842</p>
375
+ <p class="text-xs text-gray-400">Assets Discovered</p>
376
  </div>
377
+ <div class="text-center p-3 bg-white/5 rounded-lg border border-white/10">
378
+ <p class="text-xl font-bold text-white">97.2%</p>
379
+ <p class="text-xs text-gray-400">Uptime</p>
380
  </div>
381
  </div>
382
 
383
+ <div class="flex items-center justify-between text-sm text-gray-400 mb-4">
384
  <span>Last scan: 2 hours ago</span>
385
  <span>Next scan: 6 hours</span>
386
  </div>
387
 
388
  <div class="flex space-x-2">
389
  <button
390
+ class="flex-1 px-4 py-2 bg-white/10 text-gray-300 rounded-lg hover:bg-white/20 transition-colors border border-white/20">
391
  <i data-feather="settings" class="w-4 h-4 inline mr-2"></i>
392
  Configure
393
  </button>
394
  <button
395
+ class="flex-1 px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
396
  <i data-feather="activity" class="w-4 h-4 inline mr-2"></i>
397
  View Logs
398
  </button>
 
402
 
403
  <!-- Pending/Failed Integrations -->
404
  <div class="space-y-6">
405
+ <h3 class="font-semibold text-lg text-white">Pending & Failed Integrations</h3>
406
 
407
  <!-- SandboxAQ Integration - Failed -->
408
+ <div class="card-hover rounded-xl p-6 status-disconnected" data-aos="fade-up" data-aos-delay="300">
409
  <div class="flex items-center justify-between mb-4">
410
  <div class="flex items-center space-x-4">
411
  <div
412
+ class="w-12 h-12 bg-yellow-400/20 text-yellow-400 rounded-lg flex items-center justify-center">
413
  <i data-feather="shield" class="w-6 h-6"></i>
414
  </div>
415
  <div>
416
+ <h4 class="font-semibold text-lg text-white">SandboxAQ</h4>
417
+ <p class="text-sm text-gray-400">Quantum Security Assessment</p>
418
  </div>
419
  </div>
420
  <div class="flex items-center space-x-2">
421
+ <span class="px-2 py-1 text-xs rounded-full bg-red-400/20 text-red-400">Failed</span>
422
  <div class="w-3 h-3 bg-red-500 rounded-full"></div>
423
  </div>
424
  </div>
425
 
426
+ <div class="bg-red-400/10 border border-red-400/30 rounded-lg p-4 mb-4">
427
  <div class="flex items-start space-x-3">
428
+ <i data-feather="alert-circle" class="w-5 h-5 text-red-400 mt-0.5"></i>
429
  <div>
430
+ <p class="text-sm font-medium text-red-400">Connection Failed</p>
431
+ <p class="text-xs text-red-300 mt-1">Authentication credentials expired. Please
432
  update API key.</p>
433
  </div>
434
  </div>
435
  </div>
436
 
437
+ <div class="flex items-center justify-between text-sm text-gray-400 mb-4">
438
  <span>Last attempt: 1 hour ago</span>
439
  <span>Failed attempts: 3</span>
440
  </div>
 
446
  Retry Connection
447
  </button>
448
  <button
449
+ class="flex-1 px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
450
  <i data-feather="settings" class="w-4 h-4 inline mr-2"></i>
451
  Configure
452
  </button>
 
454
  </div>
455
 
456
  <!-- AWS KMS Integration - Pending -->
457
+ <div class="card-hover rounded-xl p-6 status-pending" data-aos="fade-up" data-aos-delay="400">
458
  <div class="flex items-center justify-between mb-4">
459
  <div class="flex items-center space-x-4">
460
  <div
461
+ class="w-12 h-12 bg-gray-400/20 text-gray-400 rounded-lg flex items-center justify-center">
462
  <i data-feather="cloud" class="w-6 h-6"></i>
463
  </div>
464
  <div>
465
+ <h4 class="font-semibold text-lg text-white">AWS KMS</h4>
466
+ <p class="text-sm text-gray-400">Key Management Service</p>
467
  </div>
468
  </div>
469
  <div class="flex items-center space-x-2">
470
  <span
471
+ class="px-2 py-1 text-xs rounded-full bg-yellow-400/20 text-yellow-400">Pending</span>
472
  <div class="w-3 h-3 bg-yellow-500 rounded-full pulse-animation"></div>
473
  </div>
474
  </div>
475
 
476
+ <div class="bg-yellow-400/10 border border-yellow-400/30 rounded-lg p-4 mb-4">
477
  <div class="flex items-start space-x-3">
478
+ <i data-feather="clock" class="w-5 h-5 text-yellow-400 mt-0.5"></i>
479
  <div>
480
+ <p class="text-sm font-medium text-yellow-400">Setup Required</p>
481
+ <p class="text-xs text-yellow-300 mt-1">Complete configuration to activate this
482
  integration.</p>
483
  </div>
484
  </div>
485
  </div>
486
 
487
+ <div class="flex items-center justify-between text-sm text-gray-400 mb-4">
488
  <span>Added: 2 days ago</span>
489
  <span>Progress: 60%</span>
490
  </div>
491
 
492
  <div class="flex space-x-2">
493
  <button
494
+ class="flex-1 px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
495
  <i data-feather="play" class="w-4 h-4 inline mr-2"></i>
496
  Complete Setup
497
  </button>
498
  <button
499
+ class="flex-1 px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
500
  <i data-feather="trash-2" class="w-4 h-4 inline mr-2"></i>
501
  Remove
502
  </button>
 
504
  </div>
505
 
506
  <!-- HashiCorp Vault Integration - Pending -->
507
+ <div class="card-hover rounded-xl p-6 status-pending" data-aos="fade-up" data-aos-delay="500">
508
  <div class="flex items-center justify-between mb-4">
509
  <div class="flex items-center space-x-4">
510
  <div
511
+ class="w-12 h-12 bg-indigo-400/20 text-indigo-400 rounded-lg flex items-center justify-center">
512
  <i data-feather="key" class="w-6 h-6"></i>
513
  </div>
514
  <div>
515
+ <h4 class="font-semibold text-lg text-white">HashiCorp Vault</h4>
516
+ <p class="text-sm text-gray-400">Secrets Management</p>
517
  </div>
518
  </div>
519
  <div class="flex items-center space-x-2">
520
  <span
521
+ class="px-2 py-1 text-xs rounded-full bg-yellow-400/20 text-yellow-400">Pending</span>
522
  <div class="w-3 h-3 bg-yellow-500 rounded-full pulse-animation"></div>
523
  </div>
524
  </div>
525
 
526
+ <div class="bg-blue-400/10 border border-blue-400/30 rounded-lg p-4 mb-4">
527
  <div class="flex items-start space-x-3">
528
+ <i data-feather="info" class="w-5 h-5 text-blue-400 mt-0.5"></i>
529
  <div>
530
+ <p class="text-sm font-medium text-blue-400">Ready to Configure</p>
531
+ <p class="text-xs text-blue-300 mt-1">Integration template is ready. Configure
532
  connection settings.</p>
533
  </div>
534
  </div>
535
  </div>
536
 
537
+ <div class="flex items-center justify-between text-sm text-gray-400 mb-4">
538
  <span>Added: 3 hours ago</span>
539
  <span>Progress: 25%</span>
540
  </div>
 
546
  Configure Now
547
  </button>
548
  <button
549
+ class="flex-1 px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
550
  <i data-feather="trash-2" class="w-4 h-4 inline mr-2"></i>
551
  Remove
552
  </button>
 
556
  </div>
557
 
558
  <!-- Recent Activity -->
559
+ <div class="card-hover rounded-xl p-6 mt-6" data-aos="fade-up" data-aos-delay="600">
560
  <div class="flex items-center justify-between mb-4">
561
+ <h3 class="font-semibold text-lg text-white">Recent Integration Activity</h3>
562
+ <button class="text-sm text-yellow-400 hover:text-yellow-300">View All</button>
563
  </div>
564
 
565
  <div class="space-y-4">
566
+ <div class="flex items-start space-x-3 p-4 bg-green-400/10 rounded-lg border border-green-400/30">
567
+ <div class="p-2 rounded-full bg-green-400/20 text-green-400 mt-1">
568
  <i data-feather="check-circle" class="w-4 h-4"></i>
569
  </div>
570
  <div class="flex-1">
571
+ <p class="font-medium text-white">Venafi sync completed successfully</p>
572
+ <p class="text-sm text-gray-400">247 certificates updated, 3 new certificates added</p>
573
+ <p class="text-xs text-gray-500 mt-1">5 minutes ago</p>
574
  </div>
575
  </div>
576
 
577
+ <div class="flex items-start space-x-3 p-4 bg-blue-400/10 rounded-lg border border-blue-400/30">
578
+ <div class="p-2 rounded-full bg-blue-400/20 text-blue-400 mt-1">
579
  <i data-feather="server" class="w-4 h-4"></i>
580
  </div>
581
  <div class="flex-1">
582
+ <p class="font-medium text-white">Tanium asset discovery completed</p>
583
+ <p class="text-sm text-gray-400">1,842 assets scanned, 15 new cryptographic assets found</p>
584
+ <p class="text-xs text-gray-500 mt-1">2 hours ago</p>
585
  </div>
586
  </div>
587
 
588
+ <div class="flex items-start space-x-3 p-4 bg-red-400/10 rounded-lg border border-red-400/30">
589
+ <div class="p-2 rounded-full bg-red-400/20 text-red-400 mt-1">
590
  <i data-feather="alert-circle" class="w-4 h-4"></i>
591
  </div>
592
  <div class="flex-1">
593
+ <p class="font-medium text-white">SandboxAQ connection failed</p>
594
+ <p class="text-sm text-gray-400">Authentication error: API key expired</p>
595
+ <p class="text-xs text-gray-500 mt-1">1 hour ago</p>
596
  </div>
597
  </div>
598
  </div>
 
600
  </main>
601
  </div>
602
 
603
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
604
  <script>
605
+ // Initialize feather icons immediately
606
+ document.addEventListener('DOMContentLoaded', function() {
607
+ // Replace feather icons
608
+ feather.replace();
609
+
610
+ // Initialize AOS with better settings
611
+ AOS.init({
612
+ duration: 400,
613
+ once: true,
614
+ offset: 0,
615
+ easing: 'ease-out',
616
+ delay: 0,
617
+ anchorPlacement: 'top-bottom',
618
+ disable: function() {
619
+ // Disable AOS on mobile devices to prevent issues
620
+ return window.innerWidth < 768;
621
+ }
622
+ });
623
+
624
+ // Force AOS refresh after a short delay
625
+ setTimeout(() => {
626
+ AOS.refresh();
627
+ }, 100);
628
+ });
629
 
630
  // Tab switching functionality
631
  document.querySelectorAll('.flex button').forEach(button => {
632
  button.addEventListener('click', function () {
633
+ // Only apply to tab buttons
634
+ if (this.parentElement.classList.contains('flex') && this.parentElement.parentElement.classList.contains('card-hover')) {
635
+ document.querySelectorAll('.flex button').forEach(btn => {
636
+ if (btn.parentElement === this.parentElement) {
637
+ btn.classList.remove('tab-active');
638
+ btn.classList.add('text-gray-400', 'hover:text-gray-200');
639
+ }
640
+ });
641
+ this.classList.add('tab-active');
642
+ this.classList.remove('text-gray-400', 'hover:text-gray-200');
643
+ }
644
  });
645
  });
646
 
 
653
  }, 1000);
654
  });
655
  });
656
+
657
+ // Ensure all content is visible on load
658
+ window.addEventListener('load', function() {
659
+ // Force all AOS elements to animate
660
+ document.querySelectorAll('[data-aos]').forEach(el => {
661
+ el.classList.add('aos-animate');
662
+ });
663
+ });
664
  </script>
665
  </body>
666