Hugging Face's logo

Spaces:
haramb3
/
cbom-builder
Running

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

Add initial dashboard layout with sidebar, navigation, and main content area

Browse files
Files changed (2) hide show
  1. dashboard.html +611 -0
  2. index.html +607 -290
dashboard.html ADDED
@@ -0,0 +1,611 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>EY Quantum Safe</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
15
+
16
+ body {
17
+ font-family: 'Inter', sans-serif;
18
+ background-color: #f9fafb;
19
+ }
20
+
21
+ .sidebar {
22
+ transition: all 0.3s ease;
23
+ }
24
+
25
+ .card-hover:hover {
26
+ transform: translateY(-2px);
27
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
28
+ }
29
+
30
+ .risk-high {
31
+ border-left: 4px solid #EF4444;
32
+ }
33
+
34
+ .risk-medium {
35
+ border-left: 4px solid #F59E0B;
36
+ }
37
+
38
+ .risk-low {
39
+ border-left: 4px solid #10B981;
40
+ }
41
+ </style>
42
+ </head>
43
+
44
+ <body class="flex h-screen overflow-hidden">
45
+ <!-- Sidebar -->
46
+ <div class="sidebar bg-gray-900 text-white w-64 flex-shrink-0 flex flex-col">
47
+ <div class="p-4 border-b border-gray-700">
48
+ <div class="flex items-center space-x-3">
49
+ <div class="w-10 h-10 rounded-full bg-yellow-400 flex items-center justify-center">
50
+ <i data-feather="shield" class="text-gray-900"></i>
51
+ </div>
52
+ <h1 class="text-xl font-bold">EY Quantum Safe</h1>
53
+ </div>
54
+ </div>
55
+
56
+ <nav class="flex-1 overflow-y-auto p-4 space-y-1">
57
+ <a href="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>
90
+ <p class="text-xs text-gray-400">Administrator</p>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Main Content -->
97
+ <div class="flex-1 flex flex-col overflow-hidden">
98
+ <!-- Top Navigation -->
99
+ <header class="bg-white border-b border-gray-200 flex items-center justify-between p-4">
100
+ <div class="flex items-center space-x-4">
101
+ <button class="md:hidden text-gray-500">
102
+ <i data-feather="menu"></i>
103
+ </button>
104
+ <h2 class="text-xl font-semibold text-gray-800">Dashboard</h2>
105
+ </div>
106
+
107
+ <div class="flex items-center space-x-4">
108
+ <div class="relative">
109
+ <i data-feather="search"
110
+ class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
111
+ <input type="text" placeholder="Search..."
112
+ class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
113
+ </div>
114
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
115
+ <i data-feather="bell"></i>
116
+ </button>
117
+ </div>
118
+ </header>
119
+
120
+ <!-- Main Content Area -->
121
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
122
+ <!-- Quick Stats -->
123
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
124
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
125
+ <div class="flex items-center justify-between">
126
+ <div>
127
+ <p class="text-sm font-medium text-gray-500">Active CBOMs</p>
128
+ <p class="text-3xl font-bold mt-1">24</p>
129
+ </div>
130
+ <div class="p-3 rounded-lg bg-yellow-50 text-yellow-600">
131
+ <i data-feather="file-text" class="w-6 h-6"></i>
132
+ </div>
133
+ </div>
134
+ <p class="text-xs text-gray-500 mt-3"><span class="text-green-500">+3</span> from last week</p>
135
+ </div>
136
+
137
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
138
+ <div class="flex items-center justify-between">
139
+ <div>
140
+ <p class="text-sm font-medium text-gray-500">Total Assets</p>
141
+ <p class="text-3xl font-bold mt-1">1,284</p>
142
+ </div>
143
+ <div class="p-3 rounded-lg bg-blue-50 text-blue-600">
144
+ <i data-feather="lock" class="w-6 h-6"></i>
145
+ </div>
146
+ </div>
147
+ <p class="text-xs text-gray-500 mt-3"><span class="text-green-500">+12%</span> from last week</p>
148
+ </div>
149
+
150
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
151
+ <div class="flex items-center justify-between">
152
+ <div>
153
+ <p class="text-sm font-medium text-gray-500">Risk Assessments</p>
154
+ <p class="text-3xl font-bold mt-1">18</p>
155
+ </div>
156
+ <div class="p-3 rounded-lg bg-red-50 text-red-600">
157
+ <i data-feather="alert-triangle" class="w-6 h-6"></i>
158
+ </div>
159
+ </div>
160
+ <p class="text-xs text-gray-500 mt-3"><span class="text-red-500">-2</span> from last week</p>
161
+ </div>
162
+
163
+ <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
164
+ <div class="flex items-center justify-between">
165
+ <div>
166
+ <p class="text-sm font-medium text-gray-500">Integrations</p>
167
+ <p class="text-3xl font-bold mt-1">3/4</p>
168
+ </div>
169
+ <div class="p-3 rounded-lg bg-green-50 text-green-600">
170
+ <i data-feather="link" class="w-6 h-6"></i>
171
+ </div>
172
+ </div>
173
+ <p class="text-xs text-gray-500 mt-3">1 integration needs attention</p>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Main Content Grid -->
178
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
179
+ <!-- Left Column -->
180
+ <div class="lg:col-span-2 space-y-6">
181
+ <!-- Quick Actions -->
182
+ <div class="bg-white rounded-xl shadow-sm p-6">
183
+ <div class="flex items-center justify-between mb-4">
184
+ <h3 class="font-semibold text-lg">Quick Actions</h3>
185
+ <button class="text-sm text-yellow-600 hover:text-yellow-700">View All</button>
186
+ </div>
187
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
188
+ <button
189
+ class="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors">
190
+ <div class="p-3 rounded-lg bg-yellow-100 text-yellow-600">
191
+ <i data-feather="plus" class="w-5 h-5"></i>
192
+ </div>
193
+ <span class="font-medium">New CBOM</span>
194
+ </button>
195
+ <button
196
+ class="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors">
197
+ <div class="p-3 rounded-lg bg-blue-100 text-blue-600">
198
+ <i data-feather="download" class="w-5 h-5"></i>
199
+ </div>
200
+ <span class="font-medium">Import CBOM</span>
201
+ </button>
202
+ <button
203
+ class="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors">
204
+ <div class="p-3 rounded-lg bg-red-100 text-red-600">
205
+ <i data-feather="alert-triangle" class="w-5 h-5"></i>
206
+ </div>
207
+ <span class="font-medium">Risk Assessment</span>
208
+ </button>
209
+ <button
210
+ class="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors">
211
+ <div class="p-3 rounded-lg bg-green-100 text-green-600">
212
+ <i data-feather="bar-chart-2" class="w-5 h-5"></i>
213
+ </div>
214
+ <span class="font-medium">Generate Report</span>
215
+ </button>
216
+ </div>
217
+ </div>
218
+
219
+ <!-- Recent Activity -->
220
+ <div class="bg-white rounded-xl shadow-sm p-6">
221
+ <div class="flex items-center justify-between mb-4">
222
+ <h3 class="font-semibold text-lg">Recent Activity</h3>
223
+ <button class="text-sm text-yellow-600 hover:text-yellow-700">View All</button>
224
+ </div>
225
+ <div class="space-y-4">
226
+ <div class="flex items-start space-x-3">
227
+ <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mt-1">
228
+ <i data-feather="file-plus" class="w-4 h-4"></i>
229
+ </div>
230
+ <div>
231
+ <p class="font-medium">New CBOM created</p>
232
+ <p class="text-sm text-gray-500">"Enterprise Web App" CBOM was created by Josep
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>
269
+ </div>
270
+ </div>
271
+
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>
330
+ <div class="mt-4 space-y-2">
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>
354
+ </div>
355
+ </div>
356
+ </main>
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>
389
+ <option>Legacy System</option>
390
+ </select>
391
+ </div>
392
+ </div>
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>
403
+ </div>
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>
443
+ </div>
444
+ </div>
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>
466
+ <option>Mobile Banking</option>
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>
476
+ </select>
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>
495
+ </div>
496
+ </div>
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>
518
+ <option>Technical Details</option>
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>
554
+ </div>
555
+ </div>
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>
609
+ </body>
610
+
611
+ </html>
index.html CHANGED
@@ -4,376 +4,693 @@
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>EY Quantum Safe</title>
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
  <script src="https://unpkg.com/feather-icons"></script>
13
  <style>
14
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
15
 
16
  body {
17
  font-family: 'Inter', sans-serif;
18
- background-color: #f9fafb;
 
19
  }
20
 
21
- .sidebar {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  transition: all 0.3s ease;
23
  }
24
 
25
- .card-hover:hover {
 
 
 
 
 
 
 
 
 
 
 
26
  transform: translateY(-2px);
27
- box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
28
  }
29
 
30
- .risk-high {
31
- border-left: 4px solid #EF4444;
 
32
  }
33
 
34
- .risk-medium {
35
- border-left: 4px solid #F59E0B;
 
 
 
 
 
 
 
 
36
  }
37
 
38
- .risk-low {
39
- border-left: 4px solid #10B981;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
  }
41
  </style>
42
  </head>
43
 
44
- <body class="flex h-screen overflow-hidden">
45
- <!-- Sidebar -->
46
- <div class="sidebar bg-gray-900 text-white w-64 flex-shrink-0 flex flex-col">
47
- <div class="p-4 border-b border-gray-700">
48
- <div class="flex items-center space-x-3">
49
- <div class="w-10 h-10 rounded-full bg-yellow-400 flex items-center justify-center">
50
- <i data-feather="shield" class="text-gray-900"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
51
  </div>
52
- <h1 class="text-xl font-bold">EY Quantum Safe</h1>
 
 
 
 
 
 
 
 
 
53
  </div>
54
  </div>
 
55
 
56
- <nav class="flex-1 overflow-y-auto p-4 space-y-1">
57
- <a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-gray-800 text-yellow-400">
58
- <i data-feather="layout" class="w-5 h-5"></i>
59
- <span>Dashboard</span>
60
- </a>
61
- <a href="cboms.html"
62
- class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
63
- <i data-feather="file-text" class="w-5 h-5"></i>
64
- <span>CBOMs</span>
65
- </a>
66
- <a href="assets.html"
67
- class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
68
- <i data-feather="lock" class="w-5 h-5"></i>
69
- <span>Assets</span>
70
- </a>
71
- <a href="integrations.html"
72
- class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
73
- <i data-feather="link" class="w-5 h-5"></i>
74
- <span>Integrations</span>
75
- </a>
76
- <a href="analytics.html"
77
- class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white">
78
- <i data-feather="bar-chart-2" class="w-5 h-5"></i>
79
- <span>Analytics</span>
80
- </a>
81
- </nav>
82
 
83
- <div class="p-4 border-t border-gray-700">
84
- <div class="flex items-center space-x-3">
85
- <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">
86
- <i data-feather="user" class="text-gray-300"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
87
  </div>
88
- <div>
89
- <p class="text-sm font-medium">Josep Mateu</p>
90
- <p class="text-xs text-gray-400">Administrator</p>
 
 
 
 
 
 
 
 
91
  </div>
92
  </div>
 
 
 
 
 
 
 
 
93
  </div>
94
- </div>
95
 
96
- <!-- Main Content -->
97
- <div class="flex-1 flex flex-col overflow-hidden">
98
- <!-- Top Navigation -->
99
- <header class="bg-white border-b border-gray-200 flex items-center justify-between p-4">
100
- <div class="flex items-center space-x-4">
101
- <button class="md:hidden text-gray-500">
102
- <i data-feather="menu"></i>
103
- </button>
104
- <h2 class="text-xl font-semibold text-gray-800">Dashboard</h2>
105
  </div>
106
 
107
- <div class="flex items-center space-x-4">
108
- <div class="relative">
109
- <i data-feather="search"
110
- class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
111
- <input type="text" placeholder="Search..."
112
- class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
 
 
 
113
  </div>
114
- <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
115
- <i data-feather="bell"></i>
116
- </button>
117
  </div>
118
- </header>
119
-
120
- <!-- Main Content Area -->
121
- <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
122
- <!-- Quick Stats -->
123
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
124
- <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
125
- <div class="flex items-center justify-between">
126
- <div>
127
- <p class="text-sm font-medium text-gray-500">Active CBOMs</p>
128
- <p class="text-3xl font-bold mt-1">24</p>
129
- </div>
130
- <div class="p-3 rounded-lg bg-yellow-50 text-yellow-600">
131
- <i data-feather="file-text" class="w-6 h-6"></i>
132
  </div>
 
 
133
  </div>
134
- <p class="text-xs text-gray-500 mt-3"><span class="text-green-500">+3</span> from last week</p>
135
- </div>
136
 
137
- <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
138
- <div class="flex items-center justify-between">
139
- <div>
140
- <p class="text-sm font-medium text-gray-500">Total Assets</p>
141
- <p class="text-3xl font-bold mt-1">1,284</p>
 
 
 
 
 
142
  </div>
143
- <div class="p-3 rounded-lg bg-blue-50 text-blue-600">
144
- <i data-feather="lock" class="w-6 h-6"></i>
 
145
  </div>
146
  </div>
147
- <p class="text-xs text-gray-500 mt-3"><span class="text-green-500">+12%</span> from last week</p>
148
- </div>
149
 
150
- <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
151
- <div class="flex items-center justify-between">
152
- <div>
153
- <p class="text-sm font-medium text-gray-500">Risk Assessments</p>
154
- <p class="text-3xl font-bold mt-1">18</p>
155
  </div>
156
- <div class="p-3 rounded-lg bg-red-50 text-red-600">
157
- <i data-feather="alert-triangle" class="w-6 h-6"></i>
 
158
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
159
  </div>
160
- <p class="text-xs text-gray-500 mt-3"><span class="text-red-500">-2</span> from last week</p>
161
  </div>
162
 
163
- <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
164
- <div class="flex items-center justify-between">
165
- <div>
166
- <p class="text-sm font-medium text-gray-500">Integrations</p>
167
- <p class="text-3xl font-bold mt-1">3/4</p>
168
- </div>
169
- <div class="p-3 rounded-lg bg-green-50 text-green-600">
170
- <i data-feather="link" class="w-6 h-6"></i>
171
  </div>
 
 
172
  </div>
173
- <p class="text-xs text-gray-500 mt-3">1 integration needs attention</p>
174
- </div>
175
- </div>
176
 
177
- <!-- Main Content Grid -->
178
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
179
- <!-- Left Column -->
180
- <div class="lg:col-span-2 space-y-6">
181
- <!-- Quick Actions -->
182
- <div class="bg-white rounded-xl shadow-sm p-6">
183
- <div class="flex items-center justify-between mb-4">
184
- <h3 class="font-semibold text-lg">Quick Actions</h3>
185
- <button class="text-sm text-yellow-600 hover:text-yellow-700">View All</button>
 
186
  </div>
187
- <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
188
- <button
189
- class="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors">
190
- <div class="p-3 rounded-lg bg-yellow-100 text-yellow-600">
191
- <i data-feather="plus" class="w-5 h-5"></i>
192
- </div>
193
- <span class="font-medium">New CBOM</span>
194
- </button>
195
- <button
196
- class="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors">
197
- <div class="p-3 rounded-lg bg-blue-100 text-blue-600">
198
- <i data-feather="download" class="w-5 h-5"></i>
199
- </div>
200
- <span class="font-medium">Import CBOM</span>
201
- </button>
202
- <button
203
- class="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors">
204
- <div class="p-3 rounded-lg bg-red-100 text-red-600">
205
- <i data-feather="alert-triangle" class="w-5 h-5"></i>
206
- </div>
207
- <span class="font-medium">Risk Assessment</span>
208
- </button>
209
- <button
210
- class="flex items-center space-x-3 p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors">
211
- <div class="p-3 rounded-lg bg-green-100 text-green-600">
212
- <i data-feather="bar-chart-2" class="w-5 h-5"></i>
213
- </div>
214
- <span class="font-medium">Generate Report</span>
215
- </button>
216
  </div>
217
  </div>
218
 
219
- <!-- Recent Activity -->
220
- <div class="bg-white rounded-xl shadow-sm p-6">
221
- <div class="flex items-center justify-between mb-4">
222
- <h3 class="font-semibold text-lg">Recent Activity</h3>
223
- <button class="text-sm text-yellow-600 hover:text-yellow-700">View All</button>
224
  </div>
225
- <div class="space-y-4">
226
- <div class="flex items-start space-x-3">
227
- <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mt-1">
228
- <i data-feather="file-plus" class="w-4 h-4"></i>
229
- </div>
230
- <div>
231
- <p class="font-medium">New CBOM created</p>
232
- <p class="text-sm text-gray-500">"Enterprise Web App" CBOM was created by Josep Mateu
233
- </p>
234
- <p class="text-xs text-gray-400 mt-1">2 hours ago</p>
235
- </div>
236
- </div>
237
- <div class="flex items-start space-x-3">
238
- <div class="p-2 rounded-full bg-blue-100 text-blue-600 mt-1">
239
- <i data-feather="download" class="w-4 h-4"></i>
240
- </div>
241
- <div>
242
- <p class="font-medium">CBOM imported</p>
243
- <p class="text-sm text-gray-500">"Payment Gateway" CBOM was imported from Venafi</p>
244
- <p class="text-xs text-gray-400 mt-1">5 hours ago</p>
245
- </div>
246
- </div>
247
- <div class="flex items-start space-x-3">
248
- <div class="p-2 rounded-full bg-red-100 text-red-600 mt-1">
249
- <i data-feather="alert-triangle" class="w-4 h-4"></i>
250
- </div>
251
- <div>
252
- <p class="font-medium">Risk assessment completed</p>
253
- <p class="text-sm text-gray-500">High risk found in "Legacy System" CBOM</p>
254
- <p class="text-xs text-gray-400 mt-1">1 day ago</p>
255
- </div>
256
- </div>
257
- <div class="flex items-start space-x-3">
258
- <div class="p-2 rounded-full bg-green-100 text-green-600 mt-1">
259
- <i data-feather="check-circle" class="w-4 h-4"></i>
260
- </div>
261
- <div>
262
- <p class="font-medium">Integration connected</p>
263
- <p class="text-sm text-gray-500">Tanium integration was successfully connected</p>
264
- <p class="text-xs text-gray-400 mt-1">2 days ago</p>
265
- </div>
266
- </div>
267
  </div>
268
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
269
  </div>
270
 
271
- <!-- Right Column -->
272
- <div class="space-y-6">
273
- <!-- Integration Status -->
274
- <div class="bg-white rounded-xl shadow-sm p-6">
275
- <h3 class="font-semibold text-lg mb-4">Integration Status</h3>
276
- <div class="space-y-3">
277
- <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
278
- <div class="flex items-center space-x-3">
279
- <div class="p-2 rounded-lg bg-purple-100 text-purple-600">
280
- <i data-feather="cpu" class="w-5 h-5"></i>
281
- </div>
282
- <span class="font-medium">Venafi</span>
283
- </div>
284
- <span
285
- class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Connected</span>
286
- </div>
287
- <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
288
- <div class="flex items-center space-x-3">
289
- <div class="p-2 rounded-lg bg-blue-100 text-blue-600">
290
- <i data-feather="server" class="w-5 h-5"></i>
291
- </div>
292
- <span class="font-medium">Tanium</span>
293
- </div>
294
- <span
295
- class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Connected</span>
296
- </div>
297
- <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
298
- <div class="flex items-center space-x-3">
299
- <div class="p-2 rounded-lg bg-yellow-100 text-yellow-600">
300
- <i data-feather="shield" class="w-5 h-5"></i>
301
- </div>
302
- <span class="font-medium">SandboxAQ</span>
303
- </div>
304
- <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Disconnected</span>
305
- </div>
306
- <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
307
- <div class="flex items-center space-x-3">
308
- <div class="p-2 rounded-lg bg-gray-100 text-gray-600">
309
- <i data-feather="cloud" class="w-5 h-5"></i>
310
- </div>
311
- <span class="font-medium">AWS KMS</span>
312
- </div>
313
- <span
314
- class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pending</span>
315
- </div>
316
  </div>
 
 
317
  </div>
318
 
319
- <!-- Risk Distribution -->
320
- <div class="bg-white rounded-xl shadow-sm p-6">
321
- <h3 class="font-semibold text-lg mb-4">Risk Distribution</h3>
322
- <div class="h-48 flex items-center justify-center">
323
- <!-- Placeholder for chart -->
324
- <div
325
- class="w-full h-full bg-gray-100 rounded-lg flex items-center justify-center text-gray-400">
326
- <i data-feather="pie-chart" class="w-12 h-12"></i>
327
- </div>
 
328
  </div>
329
- <div class="mt-4 space-y-2">
330
- <div class="flex items-center justify-between">
331
- <div class="flex items-center space-x-2">
332
- <div class="w-3 h-3 rounded-full bg-red-500"></div>
333
- <span class="text-sm">High Risk</span>
334
- </div>
335
- <span class="text-sm font-medium">12%</span>
336
- </div>
337
- <div class="flex items-center justify-between">
338
- <div class="flex items-center space-x-2">
339
- <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
340
- <span class="text-sm">Medium Risk</span>
341
- </div>
342
- <span class="text-sm font-medium">34%</span>
343
- </div>
344
- <div class="flex items-center justify-between">
345
- <div class="flex items-center space-x-2">
346
- <div class="w-3 h-3 rounded-full bg-green-500"></div>
347
- <span class="text-sm">Low Risk</span>
348
- </div>
349
- <span class="text-sm font-medium">54%</span>
350
- </div>
351
  </div>
352
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
353
  </div>
354
  </div>
355
- </main>
356
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
357
 
358
  <script>
359
- AOS.init();
 
 
 
 
 
 
 
360
  feather.replace();
361
 
362
- // Simple animation for cards on load
363
- document.addEventListener('DOMContentLoaded', function () {
364
- const cards = document.querySelectorAll('.card-hover');
365
- cards.forEach((card, index) => {
366
- card.style.opacity = '0';
367
- card.style.transform = 'translateY(20px)';
368
- card.style.transition = 'all 0.5s ease ' + (index * 0.1) + 's';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
369
 
370
  setTimeout(() => {
371
- card.style.opacity = '1';
372
- card.style.transform = 'translateY(0)';
373
- }, 100);
374
  });
375
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
376
  </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
377
  </body>
378
 
379
  </html>
 
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>EY Quantum Safe - Your Quantum-Safe Migration Journey</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;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 {
23
+ background: linear-gradient(135deg, #F59E0B, #FBBF24, #FCD34D);
24
+ -webkit-background-clip: text;
25
+ -webkit-text-fill-color: transparent;
26
+ background-clip: text;
27
+ }
28
+
29
+ .phase-card {
30
+ backdrop-filter: blur(20px);
31
+ background: rgba(255, 255, 255, 0.05);
32
+ border: 1px solid rgba(255, 255, 255, 0.1);
33
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
34
+ }
35
+
36
+ .phase-card:hover {
37
+ background: rgba(255, 255, 255, 0.08);
38
+ border: 1px solid rgba(245, 158, 11, 0.3);
39
+ transform: translateY(-8px);
40
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
41
+ }
42
+
43
+ .phase-card.active {
44
+ background: rgba(245, 158, 11, 0.1);
45
+ border: 2px solid #F59E0B;
46
+ box-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
47
+ }
48
+
49
+ .timeline-connector {
50
+ background: linear-gradient(90deg, #475569, #F59E0B, #475569);
51
+ height: 4px;
52
+ position: relative;
53
+ }
54
+
55
+ .timeline-progress {
56
+ background: linear-gradient(90deg, #F59E0B, #FBBF24);
57
+ height: 100%;
58
+ transition: width 1s ease-in-out;
59
+ position: relative;
60
+ }
61
+
62
+ .timeline-progress::after {
63
+ content: '';
64
+ position: absolute;
65
+ right: -8px;
66
+ top: -6px;
67
+ width: 16px;
68
+ height: 16px;
69
+ background: #F59E0B;
70
+ border-radius: 50%;
71
+ border: 3px solid #0f172a;
72
+ box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
73
+ }
74
+
75
+ .floating-element {
76
+ animation: float 6s ease-in-out infinite;
77
+ }
78
+
79
+ .floating-element:nth-child(2) {
80
+ animation-delay: -2s;
81
+ }
82
+
83
+ .floating-element:nth-child(3) {
84
+ animation-delay: -4s;
85
+ }
86
+
87
+ @keyframes float {
88
+
89
+ 0%,
90
+ 100% {
91
+ transform: translateY(0px) rotate(0deg);
92
+ }
93
+
94
+ 50% {
95
+ transform: translateY(-20px) rotate(180deg);
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
+
115
+ 10% {
116
+ opacity: 0.7;
117
+ }
118
+
119
+ 90% {
120
+ opacity: 0.7;
121
+ }
122
+
123
+ 100% {
124
+ transform: translateY(-100px) translateX(100px);
125
+ opacity: 0;
126
+ }
127
+ }
128
+
129
+ .stat-card {
130
+ backdrop-filter: blur(15px);
131
+ background: rgba(255, 255, 255, 0.03);
132
+ border: 1px solid rgba(255, 255, 255, 0.08);
133
  transition: all 0.3s ease;
134
  }
135
 
136
+ .stat-card:hover {
137
+ background: rgba(255, 255, 255, 0.06);
138
+ transform: scale(1.02);
139
+ }
140
+
141
+ .action-button {
142
+ background: linear-gradient(135deg, #F59E0B, #FBBF24);
143
+ transition: all 0.3s ease;
144
+ box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
145
+ }
146
+
147
+ .action-button:hover {
148
  transform: translateY(-2px);
149
+ box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
150
  }
151
 
152
+ .nav-item {
153
+ transition: all 0.3s ease;
154
+ position: relative;
155
  }
156
 
157
+ .nav-item::after {
158
+ content: '';
159
+ position: absolute;
160
+ bottom: -2px;
161
+ left: 50%;
162
+ width: 0;
163
+ height: 2px;
164
+ background: #F59E0B;
165
+ transition: all 0.3s ease;
166
+ transform: translateX(-50%);
167
  }
168
 
169
+ .nav-item:hover::after {
170
+ width: 100%;
171
+ }
172
+
173
+ /* Mobile-specific adjustments */
174
+ @media (max-width: 640px) {
175
+ .particle {
176
+ width: 1px;
177
+ height: 1px;
178
+ }
179
+
180
+ .floating-element {
181
+ transform: scale(0.6);
182
+ }
183
+
184
+ .phase-card {
185
+ padding: 1.5rem;
186
+ }
187
+
188
+ .timeline-progress::after {
189
+ width: 12px;
190
+ height: 12px;
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>
207
+ <div class="particle" style="left: 20%; animation-delay: 1s;"></div>
208
+ <div class="particle" style="left: 30%; animation-delay: 2s;"></div>
209
+ <div class="particle" style="left: 40%; animation-delay: 3s;"></div>
210
+ <div class="particle" style="left: 50%; animation-delay: 4s;"></div>
211
+ <div class="particle" style="left: 60%; animation-delay: 5s;"></div>
212
+ <div class="particle" style="left: 70%; animation-delay: 6s;"></div>
213
+ <div class="particle" style="left: 80%; animation-delay: 7s;"></div>
214
+ <div class="particle" style="left: 90%; animation-delay: 8s;"></div>
215
+ </div>
216
+
217
+ <!-- Navigation - Add mobile menu button -->
218
+ <nav class="relative z-50 backdrop-filter backdrop-blur-lg bg-white/5 border-b border-white/10">
219
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4">
220
+ <div class="flex items-center justify-between">
221
+ <div class="flex items-center space-x-2 sm:space-x-4">
222
+ <div
223
+ class="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
224
+ <i data-feather="shield" class="text-gray-900 w-5 h-5 sm:w-6 sm:h-6"></i>
225
+ </div>
226
+ <h1 class="text-lg sm:text-2xl font-bold text-white">EY <span class="gradient-text">Quantum
227
+ Safe</span>
228
+ </h1>
229
+ </div>
230
+
231
+ <!-- Mobile menu button -->
232
+ <button class="md:hidden text-white" onclick="toggleMobileMenu()">
233
+ <i data-feather="menu" class="w-6 h-6"></i>
234
+ </button>
235
+
236
+ <!-- Desktop menu -->
237
+ <div class="hidden md:flex items-center space-x-4 lg:space-x-8">
238
+ <a href="dashboard.html"
239
+ class="nav-item text-gray-300 hover:text-yellow-400 font-medium">Dashboard</a>
240
+ <a href="#phases" class="nav-item text-gray-300 hover:text-yellow-400 font-medium">Migration
241
+ Journey</a>
242
+ <a href="analytics.html"
243
+ class="nav-item text-gray-300 hover:text-yellow-400 font-medium">Analytics</a>
244
  </div>
245
+ </div>
246
+
247
+ <!-- Mobile menu -->
248
+ <div id="mobileMenu" class="hidden md:hidden mt-4 pb-4">
249
+ <a href="dashboard.html"
250
+ class="block py-2 text-gray-300 hover:text-yellow-400 font-medium">Dashboard</a>
251
+ <a href="#phases" class="block py-2 text-gray-300 hover:text-yellow-400 font-medium">Migration
252
+ Journey</a>
253
+ <a href="analytics.html"
254
+ class="block py-2 text-gray-300 hover:text-yellow-400 font-medium">Analytics</a>
255
  </div>
256
  </div>
257
+ </nav>
258
 
259
+ <!-- Hero Section -->
260
+ <section class="relative min-h-screen flex items-center justify-center px-4 sm:px-6 py-12 sm:py-0">
261
+ <!-- Floating Elements -->
262
+ <div class="absolute inset-0 overflow-hidden pointer-events-none">
263
+ <div
264
+ class="floating-element absolute top-20 left-10 w-20 h-20 rounded-full bg-gradient-to-r from-yellow-400/20 to-yellow-600/20 blur-xl">
265
+ </div>
266
+ <div
267
+ class="floating-element absolute top-40 right-20 w-32 h-32 rounded-full bg-gradient-to-r from-blue-400/20 to-purple-600/20 blur-xl">
268
+ </div>
269
+ <div
270
+ class="floating-element absolute bottom-32 left-1/4 w-24 h-24 rounded-full bg-gradient-to-r from-green-400/20 to-teal-600/20 blur-xl">
271
+ </div>
272
+ </div>
273
+
274
+ <div class="relative z-10 max-w-6xl mx-auto text-center">
275
+ <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black text-white mb-6 leading-tight"
276
+ data-aos="fade-up">
277
+ Your <span class="gradient-text">Quantum-Safe</span><br>
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">
291
+ <div
292
+ class="w-16 h-16 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
293
+ <i data-feather="target" class="text-gray-900 w-8 h-8"></i>
294
+ </div>
295
+ </div>
296
+ <h3 class="text-2xl font-bold text-white mb-2">Current Phase</h3>
297
+ <p class="text-yellow-400 text-lg font-semibold mb-2">Discovery & Inventory</p>
298
+ <p class="text-gray-300 text-sm">67% Complete</p>
299
+ <div class="mt-4 bg-gray-700 rounded-full h-2">
300
+ <div class="bg-gradient-to-r from-yellow-400 to-yellow-500 h-2 rounded-full"
301
+ style="width: 67%">
302
+ </div>
303
+ </div>
304
+ </div>
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>
314
  </div>
315
+ <div class="stat-card rounded-xl p-6 text-center">
316
+ <div class="text-3xl font-bold text-white mb-2">1,284</div>
317
+ <div class="text-gray-400 text-sm">Crypto Assets</div>
318
+ </div>
319
+ <div class="stat-card rounded-xl p-6 text-center">
320
+ <div class="text-3xl font-bold text-yellow-400 mb-2">154</div>
321
+ <div class="text-gray-400 text-sm">High Risk</div>
322
+ </div>
323
+ <div class="stat-card rounded-xl p-6 text-center">
324
+ <div class="text-3xl font-bold text-green-400 mb-2">693</div>
325
+ <div class="text-gray-400 text-sm">Quantum Secure</div>
326
  </div>
327
  </div>
328
+
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>
336
  </div>
337
+ </section>
338
 
339
+ <!-- Migration Timeline -->
340
+ <section id="phases" class="py-12 sm:py-20 px-4 sm:px-6">
341
+ <div class="max-w-7xl mx-auto">
342
+ <div class="text-center mb-12 sm:mb-16" data-aos="fade-up">
343
+ <h2 class="text-3xl sm:text-4xl md:text-5xl font-black text-white mb-4 sm:mb-6">Migration <span
344
+ class="gradient-text">Phases</span></h2>
345
+ <p class="text-base sm:text-lg md:text-xl text-gray-300 max-w-3xl mx-auto">
346
+ A structured approach to quantum-safe transformation, from discovery through modernization
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>
355
+ <div class="flex justify-between max-w-4xl mx-auto mt-4 text-center text-sm sm:text-base">
356
+ <div class="text-yellow-400 font-semibold">Phase 1</div>
357
+ <div class="text-gray-500 font-semibold hidden sm:block">Phase 2</div>
358
+ <div class="text-gray-500 font-semibold">Phase 3</div>
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">
370
+ <i data-feather="search" class="text-white w-8 h-8"></i>
 
 
 
 
371
  </div>
372
+ <span
373
+ class="text-yellow-400 font-bold text-sm px-3 py-1 bg-yellow-400/20 rounded-full">ACTIVE</span>
374
  </div>
 
 
375
 
376
+ <h3 class="text-2xl font-bold text-white mb-4">Discovery & Inventory</h3>
377
+ <p class="text-gray-300 mb-6 leading-relaxed">
378
+ Comprehensive identification and cataloging of all cryptographic assets across your
379
+ infrastructure using automated discovery tools.
380
+ </p>
381
+
382
+ <div class="mb-6">
383
+ <div class="flex justify-between text-sm text-gray-400 mb-2">
384
+ <span>Progress</span>
385
+ <span>67%</span>
386
  </div>
387
+ <div class="bg-gray-700 rounded-full h-2">
388
+ <div class="bg-gradient-to-r from-blue-400 to-blue-500 h-2 rounded-full" style="width: 67%">
389
+ </div>
390
  </div>
391
  </div>
 
 
392
 
393
+ <div class="space-y-3 mb-8">
394
+ <div class="flex items-center space-x-3">
395
+ <i data-feather="check-circle" class="text-green-400 w-5 h-5"></i>
396
+ <span class="text-gray-300">CBOMs Management</span>
 
397
  </div>
398
+ <div class="flex items-center space-x-3">
399
+ <i data-feather="check-circle" class="text-green-400 w-5 h-5"></i>
400
+ <span class="text-gray-300">Assets Cataloging</span>
401
  </div>
402
+ <div class="flex items-center space-x-3">
403
+ <i data-feather="clock" class="text-yellow-400 w-5 h-5"></i>
404
+ <span class="text-gray-300">Tool Integrations</span>
405
+ </div>
406
+ </div>
407
+
408
+ <div class="space-y-2">
409
+ <a href="cboms.html"
410
+ class="block w-full text-center py-2 px-4 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-colors">
411
+ <i data-feather="file-text" class="w-4 h-4 inline mr-2"></i>
412
+ CBOMs
413
+ </a>
414
+ <a href="assets.html"
415
+ class="block w-full text-center py-2 px-4 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-colors">
416
+ <i data-feather="lock" class="w-4 h-4 inline mr-2"></i>
417
+ Assets
418
+ </a>
419
+ <a href="integrations.html"
420
+ class="block w-full text-center py-2 px-4 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-colors">
421
+ <i data-feather="link" class="w-4 h-4 inline mr-2"></i>
422
+ Integrations
423
+ </a>
424
  </div>
 
425
  </div>
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">
433
+ <i data-feather="alert-triangle" class="text-white w-8 h-8"></i>
 
434
  </div>
435
+ <span
436
+ class="text-gray-500 font-bold text-sm px-3 py-1 bg-gray-500/20 rounded-full">PENDING</span>
437
  </div>
 
 
 
438
 
439
+ <h3 class="text-2xl font-bold text-white mb-4">Risk Assessment</h3>
440
+ <p class="text-gray-300 mb-6 leading-relaxed">
441
+ Quantum-aware risk scoring and analysis of discovered cryptographic assets to prioritize
442
+ migration efforts.
443
+ </p>
444
+
445
+ <div class="mb-6">
446
+ <div class="flex justify-between text-sm text-gray-400 mb-2">
447
+ <span>Progress</span>
448
+ <span>0%</span>
449
  </div>
450
+ <div class="bg-gray-700 rounded-full h-2">
451
+ <div class="bg-gray-600 h-2 rounded-full" style="width: 0%"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
452
  </div>
453
  </div>
454
 
455
+ <div class="space-y-3 mb-8">
456
+ <div class="flex items-center space-x-3">
457
+ <i data-feather="circle" class="text-gray-500 w-5 h-5"></i>
458
+ <span class="text-gray-400">Quantum Threat Analysis</span>
 
459
  </div>
460
+ <div class="flex items-center space-x-3">
461
+ <i data-feather="circle" class="text-gray-500 w-5 h-5"></i>
462
+ <span class="text-gray-400">Risk Scoring</span>
463
+ </div>
464
+ <div class="flex items-center space-x-3">
465
+ <i data-feather="circle" class="text-gray-500 w-5 h-5"></i>
466
+ <span class="text-gray-400">Priority Matrix</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
467
  </div>
468
  </div>
469
+
470
+ <div class="space-y-2">
471
+ <a href="assets.html"
472
+ class="block w-full text-center py-2 px-4 bg-gray-700 text-gray-400 rounded-lg">
473
+ <i data-feather="bar-chart-2" class="w-4 h-4 inline mr-2"></i>
474
+ Risk Assessment
475
+ </a>
476
+ <a href="analytics.html"
477
+ class="block w-full text-center py-2 px-4 bg-gray-700 text-gray-400 rounded-lg">
478
+ <i data-feather="trending-up" class="w-4 h-4 inline mr-2"></i>
479
+ Analytics
480
+ </a>
481
+ </div>
482
  </div>
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">
490
+ <i data-feather="refresh-cw" class="text-white w-8 h-8"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
491
  </div>
492
+ <span
493
+ class="text-gray-500 font-bold text-sm px-3 py-1 bg-gray-500/20 rounded-full">FUTURE</span>
494
  </div>
495
 
496
+ <h3 class="text-2xl font-bold text-white mb-4">Migration & Modernization</h3>
497
+ <p class="text-gray-300 mb-6 leading-relaxed">
498
+ Automated replacement of quantum-vulnerable assets with quantum-resistant alternatives through
499
+ intelligent tooling.
500
+ </p>
501
+
502
+ <div class="mb-6">
503
+ <div class="flex justify-between text-sm text-gray-400 mb-2">
504
+ <span>Progress</span>
505
+ <span>0%</span>
506
  </div>
507
+ <div class="bg-gray-700 rounded-full h-2">
508
+ <div class="bg-gray-600 h-2 rounded-full" style="width: 0%"></div>
509
+ </div>
510
+ </div>
511
+
512
+ <div class="space-y-3 mb-8">
513
+ <div class="flex items-center space-x-3">
514
+ <i data-feather="circle" class="text-gray-500 w-5 h-5"></i>
515
+ <span class="text-gray-400">Automated Migration</span>
516
+ </div>
517
+ <div class="flex items-center space-x-3">
518
+ <i data-feather="circle" class="text-gray-500 w-5 h-5"></i>
519
+ <span class="text-gray-400">Quantum-Resistant Deployment</span>
520
+ </div>
521
+ <div class="flex items-center space-x-3">
522
+ <i data-feather="circle" class="text-gray-500 w-5 h-5"></i>
523
+ <span class="text-gray-400">Validation & Testing</span>
 
 
 
 
 
524
  </div>
525
  </div>
526
+
527
+ <div class="space-y-2">
528
+ <a href="modernization-tools.html"
529
+ class="block w-full text-center py-2 px-4 bg-gray-700 text-gray-400 rounded-lg">
530
+ <i data-feather="tool" class="w-4 h-4 inline mr-2"></i>
531
+ Modernization Tools
532
+ </a>
533
+ <a href="validation.html"
534
+ class="block w-full text-center py-2 px-4 bg-gray-700 text-gray-400 rounded-lg">
535
+ <i data-feather="check-square" class="w-4 h-4 inline mr-2"></i>
536
+ Validation
537
+ </a>
538
+ </div>
539
  </div>
540
  </div>
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">
548
+ <h2 class="text-3xl sm:text-4xl font-black text-white mb-4 sm:mb-6">Quick <span
549
+ class="gradient-text">Actions</span>
550
+ </h2>
551
+ <p class="text-base sm:text-lg text-gray-300">Jump directly to key tasks in your current phase</p>
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">
559
+ <i data-feather="plus" class="w-6 h-6 sm:w-8 sm:h-8 mb-2 sm:mb-3"></i>
560
+ <span class="text-sm sm:text-base">New CBOM</span>
561
+ </div>
562
+ </button>
563
+
564
+ <a href="assets.html"
565
+ 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">
566
+ <div class="flex flex-col items-center">
567
+ <i data-feather="download" class="w-6 h-6 sm:w-8 sm:h-8 mb-2 sm:mb-3"></i>
568
+ <span>Import Assets</span>
569
+ </div>
570
+ </a>
571
+
572
+ <a href="integrations.html"
573
+ 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">
574
+ <div class="flex flex-col items-center">
575
+ <i data-feather="link" class="w-6 h-6 sm:w-8 sm:h-8 mb-2 sm:mb-3"></i>
576
+ <span>Connect Tools</span>
577
+ </div>
578
+ </a>
579
+
580
+ <a href="analytics.html"
581
+ 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">
582
+ <div class="flex flex-col items-center">
583
+ <i data-feather="bar-chart-2" class="w-6 h-6 sm:w-8 sm:h-8 mb-2 sm:mb-3"></i>
584
+ <span>View Analytics</span>
585
+ </div>
586
+ </a>
587
+ </div>
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 = [
619
+ { id: 'phase1', progress: 67, status: 'active' },
620
+ { id: 'phase2', progress: 0, status: 'pending' },
621
+ { id: 'phase3', progress: 0, status: 'future' }
622
+ ];
623
+
624
+ // Simulate real-time updates (in a real app, this would come from your backend)
625
+ setInterval(() => {
626
+ if (phases[0].progress < 100) {
627
+ phases[0].progress += Math.random() * 2;
628
+ if (phases[0].progress > 100) phases[0].progress = 100;
629
+ }
630
+ }, 5000);
631
+ }
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 => {
644
+ button.addEventListener('click', function () {
645
+ // Add ripple effect
646
+ const ripple = document.createElement('span');
647
+ const rect = this.getBoundingClientRect();
648
+ const size = Math.max(rect.width, rect.height);
649
+ ripple.style.width = ripple.style.height = size + 'px';
650
+ ripple.style.left = (event.clientX - rect.left - size / 2) + 'px';
651
+ ripple.style.top = (event.clientY - rect.top - size / 2) + 'px';
652
+ ripple.classList.add('ripple');
653
+ this.appendChild(ripple);
654
 
655
  setTimeout(() => {
656
+ ripple.remove();
657
+ }, 600);
 
658
  });
659
  });
660
+
661
+ // Mobile menu toggle
662
+ function toggleMobileMenu() {
663
+ const menu = document.getElementById('mobileMenu');
664
+ menu.classList.toggle('hidden');
665
+ }
666
+
667
+ // Close mobile menu when clicking outside
668
+ document.addEventListener('click', function (event) {
669
+ const nav = document.querySelector('nav');
670
+ const menu = document.getElementById('mobileMenu');
671
+ if (!nav.contains(event.target) && !menu.classList.contains('hidden')) {
672
+ menu.classList.add('hidden');
673
+ }
674
+ });
675
  </script>
676
+
677
+ <style>
678
+ .ripple {
679
+ position: absolute;
680
+ border-radius: 50%;
681
+ background: rgba(255, 255, 255, 0.3);
682
+ transform: scale(0);
683
+ animation: ripple-animation 0.6s linear;
684
+ pointer-events: none;
685
+ }
686
+
687
+ @keyframes ripple-animation {
688
+ to {
689
+ transform: scale(4);
690
+ opacity: 0;
691
+ }
692
+ }
693
+ </style>
694
  </body>
695
 
696
  </html>