haramb3/cbom-builder
0
1<!DOCTYPE html>2<html lang="en">3 4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>CBOM Manager - 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 {64 font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;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 96 10% {97 opacity: 0.7;98 }99 100 90% {101 opacity: 0.7;102 }103 104 100% {105 transform: translateY(-100px) translateX(100px);106 opacity: 0;107 }108 }109 110 /* Fix select dropdown styling */111 select option {112 background-color: #1e293b;113 color: #ffffff;114 padding: 8px;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 color: #ffffff;129 }130 131 select:focus {132 background-color: rgba(255, 255, 255, 0.15);133 }134 </style>135</head>136 137<body class="flex h-screen overflow-hidden">138 <!-- Animated Background Particles -->139 <div class="fixed inset-0 pointer-events-none z-0">140 <div class="particle" style="left: 10%; animation-delay: 0s;"></div>141 <div class="particle" style="left: 30%; animation-delay: 2s;"></div>142 <div class="particle" style="left: 50%; animation-delay: 4s;"></div>143 <div class="particle" style="left: 70%; animation-delay: 6s;"></div>144 <div class="particle" style="left: 90%; animation-delay: 8s;"></div>145 </div>146 147 <!-- Sidebar -->148 <div class="sidebar text-white w-64 flex-shrink-0 flex flex-col relative z-10">149 <div class="p-4 border-b border-white/10">150 <a href="index.html" class="flex items-center space-x-3 hover:opacity-80 transition-opacity">151 <div152 class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">153 <i data-feather="shield" class="text-gray-900 w-5 h-5"></i>154 </div>155 <h1 class="text-xl font-bold"><span class="gradient-text">Quantum Safe</span></h1>156 </a>157 </div>158 159 <nav class="flex-1 overflow-y-auto p-4 space-y-1">160 <a href="index.html"161 class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">162 <i data-feather="home" class="w-5 h-5"></i>163 <span>Home</span>164 </a>165 <a href="dashboard.html"166 class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">167 <i data-feather="layout" class="w-5 h-5"></i>168 <span>Dashboard</span>169 </a>170 <a href="cboms.html"171 class="flex items-center space-x-3 p-3 rounded-lg bg-yellow-400/20 text-yellow-400 border border-yellow-400/30">172 <i data-feather="file-text" class="w-5 h-5"></i>173 <span>CBOMs</span>174 </a>175 <a href="assets.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="lock" class="w-5 h-5"></i>178 <span>Assets</span>179 </a>180 <a href="integrations.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="link" class="w-5 h-5"></i>183 <span>Integrations</span>184 </a>185 <a href="analytics.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="bar-chart-2" class="w-5 h-5"></i>188 <span>Analytics</span>189 </a>190 </nav>191 192 <div class="p-4 border-t border-white/10">193 <div class="flex items-center space-x-3">194 <div195 class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-600 to-gray-700 flex items-center justify-center">196 <i data-feather="user" class="text-gray-300 w-5 h-5"></i>197 </div>198 <div>199 <p class="text-sm font-medium">Josep Mateu</p>200 <p class="text-xs text-gray-400">Administrator</p>201 </div>202 </div>203 </div>204 </div>205 206 <!-- Main Content -->207 <div class="flex-1 flex flex-col overflow-hidden relative z-10">208 <!-- Top Navigation -->209 <header210 class="backdrop-filter backdrop-blur-lg bg-white/5 border-b border-white/10 flex items-center justify-between p-4">211 <div class="flex items-center space-x-4">212 <button class="md:hidden text-white">213 <i data-feather="menu"></i>214 </button>215 <h2 class="text-xl font-semibold text-white">CBOM Management</h2>216 </div>217 218 <div class="flex items-center space-x-4">219 <div class="relative">220 <i data-feather="search"221 class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>222 <input type="text" placeholder="Search CBOMs..."223 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">224 </div>225 <button class="px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">226 <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>227 New CBOM228 </button>229 </div>230 </header>231 232 <!-- Main Content Area -->233 <main class="flex-1 overflow-y-auto p-6">234 <!-- Tabs Navigation -->235 <div class="card-hover rounded-xl mb-6">236 <div class="flex border-b border-white/10 overflow-x-auto">237 <button class="px-6 py-4 font-medium tab-active" onclick="showTab('overview')">Overview</button>238 <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"239 onclick="showTab('create')">Create New</button>240 <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"241 onclick="showTab('import')">Import</button>242 <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"243 onclick="showTab('templates')">Templates</button>244 <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"245 onclick="showTab('dependencies')">Dependencies</button>246 </div>247 </div>248 249 <!-- Tab Content -->250 <div id="tabContent">251 <!-- Overview Tab -->252 <div id="overview" class="tab-content">253 <!-- Stats Overview -->254 <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">255 <div class="card-hover rounded-xl p-6" data-aos="fade-up">256 <div class="flex items-center justify-between">257 <div>258 <p class="text-sm font-medium text-gray-400">Total CBOMs</p>259 <p class="text-3xl font-bold text-white mt-1">24</p>260 </div>261 <div class="p-3 rounded-lg bg-yellow-400/20 text-yellow-400">262 <i data-feather="file-text" class="w-6 h-6"></i>263 </div>264 </div>265 </div>266 267 <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">268 <div class="flex items-center justify-between">269 <div>270 <p class="text-sm font-medium text-gray-400">Active</p>271 <p class="text-3xl font-bold text-white mt-1">19</p>272 </div>273 <div class="p-3 rounded-lg bg-green-400/20 text-green-400">274 <i data-feather="check-circle" class="w-6 h-6"></i>275 </div>276 </div>277 </div>278 279 <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">280 <div class="flex items-center justify-between">281 <div>282 <p class="text-sm font-medium text-gray-400">Draft</p>283 <p class="text-3xl font-bold text-white mt-1">3</p>284 </div>285 <div class="p-3 rounded-lg bg-blue-400/20 text-blue-400">286 <i data-feather="edit" class="w-6 h-6"></i>287 </div>288 </div>289 </div>290 291 <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="300">292 <div class="flex items-center justify-between">293 <div>294 <p class="text-sm font-medium text-gray-400">Archived</p>295 <p class="text-3xl font-bold text-white mt-1">2</p>296 </div>297 <div class="p-3 rounded-lg bg-gray-400/20 text-gray-400">298 <i data-feather="archive" class="w-6 h-6"></i>299 </div>300 </div>301 </div>302 </div>303 304 <!-- Filters and Search -->305 <div class="card-hover rounded-xl p-6 mb-6" data-aos="fade-up" data-aos-delay="400">306 <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">307 <div class="flex items-center space-x-2">308 <i data-feather="filter" class="text-gray-400"></i>309 <span class="text-sm text-gray-400">Filters:</span>310 <select311 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">312 <option>All Status</option>313 <option>Active</option>314 <option>Draft</option>315 <option>Archived</option>316 </select>317 <select318 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">319 <option>All Risk Levels</option>320 <option>High Risk</option>321 <option>Medium Risk</option>322 <option>Low Risk</option>323 </select>324 </div>325 <div class="relative">326 <i data-feather="search"327 class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4"></i>328 <input type="text" placeholder="Search CBOMs..."329 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">330 </div>331 </div>332 </div>333 334 <!-- CBOMs List -->335 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">336 <!-- CBOM Card 1 -->337 <div class="card-hover rounded-xl overflow-hidden risk-high" data-aos="fade-up"338 data-aos-delay="500">339 <div class="p-6">340 <div class="flex items-start justify-between mb-4">341 <div>342 <h3 class="font-semibold text-lg text-white">Enterprise Web App</h3>343 <p class="text-sm text-gray-400">Created 2 days ago</p>344 </div>345 <span346 class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Active</span>347 </div>348 349 <p class="text-sm text-gray-300 mb-4">Main customer-facing web application with payment350 processing capabilities</p>351 352 <div class="space-y-2 mb-4">353 <div class="flex justify-between text-sm">354 <span class="text-gray-400">Assets</span>355 <span class="text-white">342</span>356 </div>357 <div class="flex justify-between text-sm">358 <span class="text-gray-400">Risk Level</span>359 <span class="text-red-400">High</span>360 </div>361 <div class="flex justify-between text-sm">362 <span class="text-gray-400">Last Assessment</span>363 <span class="text-white">12 hours ago</span>364 </div>365 </div>366 367 <div class="flex space-x-2">368 <button369 class="flex-1 px-3 py-2 bg-white/10 text-white text-sm rounded-lg hover:bg-white/20 transition-colors">370 <i data-feather="eye" class="w-4 h-4 inline mr-1"></i>371 View372 </button>373 <button374 class="flex-1 px-3 py-2 action-button text-gray-900 text-sm rounded-lg font-semibold">375 <i data-feather="play" class="w-4 h-4 inline mr-1"></i>376 Assess377 </button>378 </div>379 </div>380 </div>381 382 <!-- CBOM Card 2 -->383 <div class="card-hover rounded-xl overflow-hidden risk-medium" data-aos="fade-up"384 data-aos-delay="600">385 <div class="p-6">386 <div class="flex items-start justify-between mb-4">387 <div>388 <h3 class="font-semibold text-lg text-white">Payment Gateway</h3>389 <p class="text-sm text-gray-400">Created 1 week ago</p>390 </div>391 <span392 class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Active</span>393 </div>394 395 <p class="text-sm text-gray-300 mb-4">Secure payment processing system handling credit396 card transactions</p>397 398 <div class="space-y-2 mb-4">399 <div class="flex justify-between text-sm">400 <span class="text-gray-400">Assets</span>401 <span class="text-white">128</span>402 </div>403 <div class="flex justify-between text-sm">404 <span class="text-gray-400">Risk Level</span>405 <span class="text-yellow-400">Medium</span>406 </div>407 <div class="flex justify-between text-sm">408 <span class="text-gray-400">Last Assessment</span>409 <span class="text-white">3 days ago</span>410 </div>411 </div>412 413 <div class="flex space-x-2">414 <button415 class="flex-1 px-3 py-2 bg-white/10 text-white text-sm rounded-lg hover:bg-white/20 transition-colors">416 <i data-feather="eye" class="w-4 h-4 inline mr-1"></i>417 View418 </button>419 <button420 class="flex-1 px-3 py-2 action-button text-gray-900 text-sm rounded-lg font-semibold">421 <i data-feather="play" class="w-4 h-4 inline mr-1"></i>422 Assess423 </button>424 </div>425 </div>426 </div>427 428 <!-- CBOM Card 3 -->429 <div class="card-hover rounded-xl overflow-hidden risk-low" data-aos="fade-up"430 data-aos-delay="700">431 <div class="p-6">432 <div class="flex items-start justify-between mb-4">433 <div>434 <h3 class="font-semibold text-lg text-white">Mobile Banking App</h3>435 <p class="text-sm text-gray-400">Created 2 weeks ago</p>436 </div>437 <span438 class="px-2 py-1 text-xs font-medium bg-blue-400/20 text-blue-400 rounded-full">Draft</span>439 </div>440 441 <p class="text-sm text-gray-300 mb-4">iOS and Android banking application for retail442 customers</p>443 444 <div class="space-y-2 mb-4">445 <div class="flex justify-between text-sm">446 <span class="text-gray-400">Assets</span>447 <span class="text-white">89</span>448 </div>449 <div class="flex justify-between text-sm">450 <span class="text-gray-400">Risk Level</span>451 <span class="text-green-400">Low</span>452 </div>453 <div class="flex justify-between text-sm">454 <span class="text-gray-400">Last Assessment</span>455 <span class="text-white">Not assessed</span>456 </div>457 </div>458 459 <div class="flex space-x-2">460 <button461 class="flex-1 px-3 py-2 bg-white/10 text-white text-sm rounded-lg hover:bg-white/20 transition-colors">462 <i data-feather="eye" class="w-4 h-4 inline mr-1"></i>463 View464 </button>465 <button466 class="flex-1 px-3 py-2 action-button text-gray-900 text-sm rounded-lg font-semibold">467 <i data-feather="play" class="w-4 h-4 inline mr-1"></i>468 Assess469 </button>470 </div>471 </div>472 </div>473 474 <!-- Add more CBOM cards... -->475 </div>476 </div>477 478 <!-- Create New Tab -->479 <div id="create" class="tab-content hidden">480 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">481 <div class="lg:col-span-2">482 <div class="card-hover rounded-xl p-6">483 <h3 class="font-semibold text-lg text-white mb-6">Create New CBOM</h3>484 485 <form class="space-y-6">486 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">487 <div>488 <label class="block text-sm font-medium text-gray-300 mb-2">CBOM Name489 *</label>490 <input type="text"491 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"492 placeholder="Enter CBOM name">493 </div>494 <div>495 <label class="block text-sm font-medium text-gray-300 mb-2">Version</label>496 <input type="text"497 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"498 placeholder="1.0.0">499 </div>500 </div>501 502 <div>503 <label class="block text-sm font-medium text-gray-300 mb-2">Description</label>504 <textarea505 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 rows="4"507 placeholder="Describe the purpose and scope of this CBOM"></textarea>508 </div>509 510 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">511 <div>512 <label class="block text-sm font-medium text-gray-300 mb-2">Application513 Type</label>514 <select515 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">516 <option>Web Application</option>517 <option>Mobile Application</option>518 <option>Desktop Application</option>519 <option>Microservices</option>520 <option>IoT System</option>521 <option>Legacy System</option>522 </select>523 </div>524 <div>525 <label class="block text-sm font-medium text-gray-300 mb-2">Criticality526 Level</label>527 <select528 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">529 <option>Critical</option>530 <option>High</option>531 <option>Medium</option>532 <option>Low</option>533 </select>534 </div>535 </div>536 537 <div>538 <label class="block text-sm font-medium text-gray-300 mb-2">Tags</label>539 <input type="text"540 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"541 placeholder="Add tags (comma separated)">542 <p class="text-xs text-gray-400 mt-1">e.g., production, banking, customer-facing543 </p>544 </div>545 546 <div class="border-t border-white/10 pt-6">547 <h4 class="font-medium text-white mb-4">Initial Cryptographic Assets</h4>548 <div class="space-y-3">549 <button type="button"550 class="w-full p-4 border-2 border-dashed border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all">551 <i data-feather="plus" class="w-5 h-5 mx-auto text-gray-400 mb-2"></i>552 <p class="text-sm text-gray-400">Add Asset Manually</p>553 </button>554 <button type="button"555 class="w-full p-4 border-2 border-dashed border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all">556 <i data-feather="upload" class="w-5 h-5 mx-auto text-gray-400 mb-2"></i>557 <p class="text-sm text-gray-400">Import from Integration</p>558 </button>559 </div>560 </div>561 562 <div class="flex justify-end space-x-4">563 <button type="button"564 class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">565 Cancel566 </button>567 <button type="submit"568 class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">569 Create CBOM570 </button>571 </div>572 </form>573 </div>574 </div>575 576 <div class="space-y-6">577 <div class="card-hover rounded-xl p-6">578 <h4 class="font-semibold text-white mb-4">Quick Start Templates</h4>579 <div class="space-y-3">580 <button581 class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">582 <div class="flex items-center justify-between">583 <div>584 <p class="font-medium text-white">Web Application</p>585 <p class="text-xs text-gray-400">Standard web app template</p>586 </div>587 <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>588 </div>589 </button>590 <button591 class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">592 <div class="flex items-center justify-between">593 <div>594 <p class="font-medium text-white">Microservices</p>595 <p class="text-xs text-gray-400">Distributed system template</p>596 </div>597 <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>598 </div>599 </button>600 <button601 class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">602 <div class="flex items-center justify-between">603 <div>604 <p class="font-medium text-white">Legacy System</p>605 <p class="text-xs text-gray-400">For older systems</p>606 </div>607 <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>608 </div>609 </button>610 </div>611 </div>612 613 <div class="card-hover rounded-xl p-6">614 <h4 class="font-semibold text-white mb-4">Tips</h4>615 <div class="space-y-3">616 <div class="flex items-start space-x-2">617 <i data-feather="info" class="w-4 h-4 text-blue-400 mt-0.5"></i>618 <p class="text-sm text-gray-300">Use descriptive names to easily identify CBOMs619 </p>620 </div>621 <div class="flex items-start space-x-2">622 <i data-feather="info" class="w-4 h-4 text-blue-400 mt-0.5"></i>623 <p class="text-sm text-gray-300">Set appropriate criticality levels for624 prioritization</p>625 </div>626 <div class="flex items-start space-x-2">627 <i data-feather="info" class="w-4 h-4 text-blue-400 mt-0.5"></i>628 <p class="text-sm text-gray-300">Add relevant tags for better organization</p>629 </div>630 </div>631 </div>632 </div>633 </div>634 </div>635 636 <!-- Import Tab -->637 <div id="import" class="tab-content hidden">638 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">639 <div class="lg:col-span-2">640 <div class="card-hover rounded-xl p-6">641 <h3 class="font-semibold text-lg text-white mb-6">Import CBOM</h3>642 643 <div class="space-y-6">644 <div>645 <h4 class="font-medium text-white mb-4">1. Select Import Method</h4>646 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">647 <label class="cursor-pointer">648 <input type="radio" name="importMethod" value="file"649 class="sr-only peer" checked>650 <div651 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">652 <i data-feather="file"653 class="w-8 h-8 mx-auto mb-2 text-gray-400 peer-checked:text-yellow-400"></i>654 <p class="font-medium text-center text-white">File Upload</p>655 <p class="text-xs text-center text-gray-400 mt-1">Upload CBOM file656 </p>657 </div>658 </label>659 <label class="cursor-pointer">660 <input type="radio" name="importMethod" value="integration"661 class="sr-only peer">662 <div663 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">664 <i data-feather="link"665 class="w-8 h-8 mx-auto mb-2 text-gray-400 peer-checked:text-yellow-400"></i>666 <p class="font-medium text-center text-white">Integration</p>667 <p class="text-xs text-center text-gray-400 mt-1">Import from tool668 </p>669 </div>670 </label>671 </div>672 </div>673 674 <div id="fileUploadSection">675 <h4 class="font-medium text-white mb-4">2. Upload File</h4>676 <div677 class="border-2 border-dashed border-white/20 rounded-lg p-8 text-center hover:border-yellow-400 transition-all">678 <i data-feather="upload-cloud"679 class="w-12 h-12 mx-auto text-gray-400 mb-4"></i>680 <p class="text-white font-medium mb-2">Drag & drop your CBOM file here</p>681 <p class="text-sm text-gray-400 mb-4">or</p>682 <button683 class="px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 transition-colors">684 Browse Files685 </button>686 <p class="text-xs text-gray-500 mt-4">Supported formats: .json, .xml, .cbom,687 .csv</p>688 </div>689 </div>690 691 <div id="integrationSection" class="hidden">692 <h4 class="font-medium text-white mb-4">2. Select Integration Source</h4>693 <div class="space-y-3">694 <label695 class="flex items-center p-3 border border-white/20 rounded-lg hover:border-yellow-400 cursor-pointer">696 <input type="radio" name="integration" value="venafi"697 class="mr-3 text-yellow-400">698 <div class="flex-1">699 <p class="font-medium text-white">Venafi</p>700 <p class="text-xs text-gray-400">Import from Venafi Trust Protection701 Platform</p>702 </div>703 <span704 class="px-2 py-1 text-xs bg-green-400/20 text-green-400 rounded-full">Connected</span>705 </label>706 <label707 class="flex items-center p-3 border border-white/20 rounded-lg hover:border-yellow-400 cursor-pointer">708 <input type="radio" name="integration" value="tanium"709 class="mr-3 text-yellow-400">710 <div class="flex-1">711 <p class="font-medium text-white">Tanium</p>712 <p class="text-xs text-gray-400">Import asset inventory from Tanium713 </p>714 </div>715 <span716 class="px-2 py-1 text-xs bg-green-400/20 text-green-400 rounded-full">Connected</span>717 </label>718 </div>719 </div>720 721 <div>722 <h4 class="font-medium text-white mb-4">3. Import Options</h4>723 <div class="space-y-3">724 <div class="flex items-center space-x-3">725 <input type="checkbox" id="validateSchema"726 class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400"727 checked>728 <label for="validateSchema" class="text-sm text-gray-300">Validate729 schema before import</label>730 </div>731 <div class="flex items-center space-x-3">732 <input type="checkbox" id="mergeExisting"733 class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">734 <label for="mergeExisting" class="text-sm text-gray-300">Merge with735 existing CBOM if name matches</label>736 </div>737 <div class="flex items-center space-x-3">738 <input type="checkbox" id="runAssessment"739 class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400"740 checked>741 <label for="runAssessment" class="text-sm text-gray-300">Run risk742 assessment after import</label>743 </div>744 </div>745 </div>746 747 <div class="flex justify-end space-x-4">748 <button type="button"749 class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">750 Cancel751 </button>752 <button type="button"753 class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">754 Import CBOM755 </button>756 </div>757 </div>758 </div>759 </div>760 761 <div class="space-y-6">762 <div class="card-hover rounded-xl p-6">763 <h4 class="font-semibold text-white mb-4">Recent Imports</h4>764 <div class="space-y-3">765 <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">766 <div class="flex items-center space-x-3">767 <i data-feather="file-text" class="w-4 h-4 text-gray-400"></i>768 <div>769 <p class="text-sm font-medium text-white">payment-gateway.json</p>770 <p class="text-xs text-gray-400">2 hours ago</p>771 </div>772 </div>773 <i data-feather="check-circle" class="w-4 h-4 text-green-400"></i>774 </div>775 <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">776 <div class="flex items-center space-x-3">777 <i data-feather="link" class="w-4 h-4 text-gray-400"></i>778 <div>779 <p class="text-sm font-medium text-white">Venafi Import</p>780 <p class="text-xs text-gray-400">Yesterday</p>781 </div>782 </div>783 <i data-feather="check-circle" class="w-4 h-4 text-green-400"></i>784 </div>785 </div>786 </div>787 788 <div class="card-hover rounded-xl p-6">789 <h4 class="font-semibold text-white mb-4">Import Statistics</h4>790 <div class="space-y-3">791 <div class="flex justify-between items-center">792 <span class="text-sm text-gray-400">Total Imports</span>793 <span class="text-sm font-medium text-white">47</span>794 </div>795 <div class="flex justify-between items-center">796 <span class="text-sm text-gray-400">Successful</span>797 <span class="text-sm font-medium text-green-400">45</span>798 </div>799 <div class="flex justify-between items-center">800 <span class="text-sm text-gray-400">Failed</span>801 <span class="text-sm font-medium text-red-400">2</span>802 </div>803 <div class="flex justify-between items-center">804 <span class="text-sm text-gray-400">Avg. Assets/Import</span>805 <span class="text-sm font-medium text-white">234</span>806 </div>807 </div>808 </div>809 </div>810 </div>811 </div>812 813 <!-- Templates Tab -->814 <div id="templates" class="tab-content hidden">815 <div class="card-hover rounded-xl p-6 mb-6">816 <div class="flex items-center justify-between mb-4">817 <h3 class="font-semibold text-lg text-white">CBOM Templates</h3>818 <button class="px-4 py-2 action-button text-gray-900 rounded-lg text-sm font-semibold">819 <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>820 Create Template821 </button>822 </div>823 <p class="text-gray-300">Pre-configured templates to help you quickly create CBOMs for common824 application types</p>825 </div>826 827 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">828 <div829 class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform">830 <div class="p-6">831 <div class="w-12 h-12 rounded-lg bg-blue-400/20 flex items-center justify-center mb-4">832 <i data-feather="globe" class="w-6 h-6 text-blue-400"></i>833 </div>834 <h4 class="font-semibold text-white mb-2">Web Application</h4>835 <p class="text-sm text-gray-400 mb-4">Standard template for web applications with TLS,836 authentication, and session management</p>837 <div class="space-y-2 text-xs">838 <div class="flex items-center space-x-2">839 <i data-feather="check" class="w-3 h-3 text-green-400"></i>840 <span class="text-gray-300">TLS Configuration</span>841 </div>842 <div class="flex items-center space-x-2">843 <i data-feather="check" class="w-3 h-3 text-green-400"></i>844 <span class="text-gray-300">JWT/Session Management</span>845 </div>846 <div class="flex items-center space-x-2">847 <i data-feather="check" class="w-3 h-3 text-green-400"></i>848 <span class="text-gray-300">Database Encryption</span>849 </div>850 </div>851 </div>852 <div class="px-6 py-3 bg-white/5 border-t border-white/10">853 <div class="flex items-center justify-between">854 <span class="text-xs text-gray-400">12 predefined assets</span>855 <button class="text-xs text-yellow-400 hover:text-yellow-300">Use Template</button>856 </div>857 </div>858 </div>859 860 <div861 class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform">862 <div class="p-6">863 <div864 class="w-12 h-12 rounded-lg bg-purple-400/20 flex items-center justify-center mb-4">865 <i data-feather="smartphone" class="w-6 h-6 text-purple-400"></i>866 </div>867 <h4 class="font-semibold text-white mb-2">Mobile Application</h4>868 <p class="text-sm text-gray-400 mb-4">Template for mobile apps with device security, API869 communication, and local storage</p>870 <div class="space-y-2 text-xs">871 <div class="flex items-center space-x-2">872 <i data-feather="check" class="w-3 h-3 text-green-400"></i>873 <span class="text-gray-300">Keychain/Keystore</span>874 </div>875 <div class="flex items-center space-x-2">876 <i data-feather="check" class="w-3 h-3 text-green-400"></i>877 <span class="text-gray-300">API Security</span>878 </div>879 <div class="flex items-center space-x-2">880 <i data-feather="check" class="w-3 h-3 text-green-400"></i>881 <span class="text-gray-300">Biometric Auth</span>882 </div>883 </div>884 </div>885 <div class="px-6 py-3 bg-white/5 border-t border-white/10">886 <div class="flex items-center justify-between">887 <span class="text-xs text-gray-400">18 predefined assets</span>888 <button class="text-xs text-yellow-400 hover:text-yellow-300">Use Template</button>889 </div>890 </div>891 </div>892 893 <div894 class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform">895 <div class="p-6">896 <div class="w-12 h-12 rounded-lg bg-green-400/20 flex items-center justify-center mb-4">897 <i data-feather="server" class="w-6 h-6 text-green-400"></i>898 </div>899 <h4 class="font-semibold text-white mb-2">Microservices</h4>900 <p class="text-sm text-gray-400 mb-4">Distributed system template with service mesh,901 mTLS, and container security</p>902 <div class="space-y-2 text-xs">903 <div class="flex items-center space-x-2">904 <i data-feather="check" class="w-3 h-3 text-green-400"></i>905 <span class="text-gray-300">Service Mesh mTLS</span>906 </div>907 <div class="flex items-center space-x-2">908 <i data-feather="check" class="w-3 h-3 text-green-400"></i>909 <span class="text-gray-300">Container Security</span>910 </div>911 <div class="flex items-center space-x-2">912 <i data-feather="check" class="w-3 h-3 text-green-400"></i>913 <span class="text-gray-300">Secret Management</span>914 </div>915 </div>916 </div>917 <div class="px-6 py-3 bg-white/5 border-t border-white/10">918 <div class="flex items-center justify-between">919 <span class="text-xs text-gray-400">24 predefined assets</span>920 <button class="text-xs text-yellow-400 hover:text-yellow-300">Use Template</button>921 </div>922 </div>923 </div>924 925 <div926 class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform">927 <div class="p-6">928 <div class="w-12 h-12 rounded-lg bg-red-400/20 flex items-center justify-center mb-4">929 <i data-feather="database" class="w-6 h-6 text-red-400"></i>930 </div>931 <h4 class="font-semibold text-white mb-2">Legacy System</h4>932 <p class="text-sm text-gray-400 mb-4">Template for older systems with common legacy933 cryptographic implementations</p>934 <div class="space-y-2 text-xs">935 <div class="flex items-center space-x-2">936 <i data-feather="check" class="w-3 h-3 text-green-400"></i>937 <span class="text-gray-300">Legacy Algorithms</span>938 </div>939 <div class="flex items-center space-x-2">940 <i data-feather="check" class="w-3 h-3 text-green-400"></i>941 <span class="text-gray-300">Certificate Management</span>942 </div>943 <div class="flex items-center space-x-2">944 <i data-feather="check" class="w-3 h-3 text-green-400"></i>945 <span class="text-gray-300">Migration Planning</span>946 </div>947 </div>948 </div>949 <div class="px-6 py-3 bg-white/5 border-t border-white/10">950 <div class="flex items-center justify-between">951 <span class="text-xs text-gray-400">15 predefined assets</span>952 <button class="text-xs text-yellow-400 hover:text-yellow-300">Use Template</button>953 </div>954 </div>955 </div>956 </div>957 </div>958 959 <!-- Dependencies Tab -->960 <div id="dependencies" class="tab-content hidden">961 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">962 <div class="lg:col-span-2">963 <div class="card-hover rounded-xl p-6">964 <div class="flex items-center justify-between mb-6">965 <h3 class="font-semibold text-lg text-white">CBOM Dependencies</h3>966 <div class="flex items-center space-x-2">967 <button class="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg">968 <i data-feather="refresh-cw" class="w-5 h-5"></i>969 </button>970 <button class="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg">971 <i data-feather="download" class="w-5 h-5"></i>972 </button>973 </div>974 </div>975 976 <div class="mb-6">977 <div class="flex items-center space-x-4">978 <select979 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">980 <option>All CBOMs</option>981 <option>Enterprise Web App</option>982 <option>Payment Gateway</option>983 <option>Legacy System</option>984 </select>985 <input type="text" placeholder="Search dependencies..."986 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">987 </div>988 </div>989 990 <div class="space-y-4">991 <div class="border border-white/10 rounded-lg overflow-hidden">992 <div class="p-4 bg-white/5 flex items-center justify-between">993 <div class="flex items-center space-x-3">994 <i data-feather="package" class="w-5 h-5 text-blue-400"></i>995 <div>996 <p class="font-medium text-white">OpenSSL</p>997 <p class="text-xs text-gray-400">v3.0.11</p>998 </div>999 </div>1000 <span1001 class="px-2 py-1 text-xs bg-yellow-400/20 text-yellow-400 rounded-full">31002 CBOMs</span>1003 </div>1004 <div class="p-4 border-t border-white/10">1005 <div class="grid grid-cols-2 gap-4 mb-3">1006 <div>1007 <p class="text-xs text-gray-400">Used in</p>1008 <p class="text-sm text-white">Enterprise Web App, Payment Gateway,1009 API Service</p>1010 </div>1011 <div>1012 <p class="text-xs text-gray-400">Risk Level</p>1013 <p class="text-sm text-yellow-400">Medium (Quantum Vulnerable)</p>1014 </div>1015 </div>1016 <div1017 class="flex items-center justify-between pt-3 border-t border-white/10">1018 <button class="text-xs text-blue-400 hover:text-blue-300">View1019 Details</button>1020 <button class="text-xs text-yellow-400 hover:text-yellow-300">Update1021 All</button>1022 </div>1023 </div>1024 </div>1025 1026 <div class="border border-white/10 rounded-lg overflow-hidden">1027 <div class="p-4 bg-white/5 flex items-center justify-between">1028 <div class="flex items-center space-x-3">1029 <i data-feather="package" class="w-5 h-5 text-red-400"></i>1030 <div>1031 <p class="font-medium text-white">Bouncy Castle</p>1032 <p class="text-xs text-gray-400">v1.70</p>1033 </div>1034 </div>1035 <span class="px-2 py-1 text-xs bg-red-400/20 text-red-400 rounded-full">51036 CBOMs</span>1037 </div>1038 <div class="p-4 border-t border-white/10">1039 <div class="grid grid-cols-2 gap-4 mb-3">1040 <div>1041 <p class="text-xs text-gray-400">Used in</p>1042 <p class="text-sm text-white">5 applications across production</p>1043 </div>1044 <div>1045 <p class="text-xs text-gray-400">Risk Level</p>1046 <p class="text-sm font-medium text-red-400">High (Outdated)</p>1047 </div>1048 </div>1049 <div1050 class="flex items-center justify-between pt-3 border-t border-white/10">1051 <button class="text-xs text-blue-400 hover:text-blue-300">View1052 Details</button>1053 <button class="text-xs text-red-400 hover:text-red-300">Urgent1054 Update</button>1055 </div>1056 </div>1057 </div>1058 1059 <div class="border border-white/10 rounded-lg overflow-hidden">1060 <div class="p-4 bg-white/5 flex items-center justify-between">1061 <div class="flex items-center space-x-3">1062 <i data-feather="package" class="w-5 h-5 text-green-400"></i>1063 <div>1064 <p class="font-medium text-white">libsodium</p>1065 <p class="text-xs text-gray-400">v1.0.19</p>1066 </div>1067 </div>1068 <span1069 class="px-2 py-1 text-xs bg-green-400/20 text-green-400 rounded-full">21070 CBOMs</span>1071 </div>1072 <div class="p-4 border-t border-white/10">1073 <div class="grid grid-cols-2 gap-4 mb-3">1074 <div>1075 <p class="text-xs text-gray-400">Used in</p>1076 <p class="text-sm text-white">Mobile App, IoT Gateway</p>1077 </div>1078 <div>1079 <p class="text-xs text-gray-400">Risk Level</p>1080 <p class="text-sm text-green-400">Low (Quantum Safe)</p>1081 </div>1082 </div>1083 <div1084 class="flex items-center justify-between pt-3 border-t border-white/10">1085 <button class="text-xs text-blue-400 hover:text-blue-300">View1086 Details</button>1087 <button class="text-xs text-gray-400" disabled>Up to date</button>1088 </div>1089 </div>1090 </div>1091 </div>1092 </div>1093 </div>1094 1095 <div class="space-y-6">1096 <div class="card-hover rounded-xl p-6">1097 <h4 class="font-semibold text-white mb-4">Dependency Summary</h4>1098 <div class="space-y-3">1099 <div class="flex justify-between items-center">1100 <span class="text-sm text-gray-400">Total Dependencies</span>1101 <span class="text-sm font-medium text-white">47</span>1102 </div>1103 <div class="flex justify-between items-center">1104 <span class="text-sm text-gray-400">Unique Libraries</span>1105 <span class="text-sm font-medium text-white">23</span>1106 </div>1107 <div class="flex justify-between items-center">1108 <span class="text-sm text-gray-400">Outdated</span>1109 <span class="text-sm font-medium text-red-400">8</span>1110 </div>1111 <div class="flex justify-between items-center">1112 <span class="text-sm text-gray-400">Quantum Vulnerable</span>1113 <span class="text-sm font-medium text-yellow-400">12</span>1114 </div>1115 <div class="flex justify-between items-center">1116 <span class="text-sm text-gray-400">Quantum Safe</span>1117 <span class="text-sm font-medium text-green-400">27</span>1118 </div>1119 </div>1120 </div>1121 1122 <div class="card-hover rounded-xl p-6">1123 <h4 class="font-semibold text-white mb-4">Quick Actions</h4>1124 <div class="space-y-2">1125 <button1126 class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">1127 <div class="flex items-center justify-between">1128 <div class="flex items-center space-x-2">1129 <i data-feather="refresh-cw" class="w-4 h-4 text-gray-400"></i>1130 <span class="text-sm text-white">Update All Dependencies</span>1131 </div>1132 <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>1133 </div>1134 </button>1135 <button1136 class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">1137 <div class="flex items-center justify-between">1138 <div class="flex items-center space-x-2">1139 <i data-feather="alert-triangle" class="w-4 h-4 text-gray-400"></i>1140 <span class="text-sm text-white">Vulnerability Scan</span>1141 </div>1142 <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>1143 </div>1144 </button>1145 <button1146 class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">1147 <div class="flex items-center justify-between">1148 <div class="flex items-center space-x-2">1149 <i data-feather="file-text" class="w-4 h-4 text-gray-400"></i>1150 <span class="text-sm text-white">Generate Report</span>1151 </div>1152 <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>1153 </div>1154 </button>1155 </div>1156 </div>1157 </div>1158 </div>1159 </div>1160 </div>1161 </main>1162 </div>1163 1164 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>1165 <script>1166 // Initialize feather icons immediately1167 document.addEventListener('DOMContentLoaded', function () {1168 // Replace feather icons1169 feather.replace();1170 1171 // Initialize AOS with better settings1172 AOS.init({1173 duration: 400,1174 once: true,1175 offset: 0,1176 easing: 'ease-out',1177 delay: 0,1178 anchorPlacement: 'top-bottom',1179 disable: function () {1180 // Disable AOS on mobile devices to prevent issues1181 return window.innerWidth < 768;1182 }1183 });1184 1185 // Force AOS refresh after a short delay1186 setTimeout(() => {1187 AOS.refresh();1188 }, 100);1189 });1190 1191 // Tab switching functionality1192 function showTab(tabName) {1193 // Hide all tab contents1194 document.querySelectorAll('.tab-content').forEach(content => {1195 content.classList.add('hidden');1196 });1197 1198 // Remove active class from all tabs1199 document.querySelectorAll('.flex button').forEach(button => {1200 if (button.onclick && button.onclick.toString().includes('showTab')) {