Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CBOM Management - EY Quantum Safe</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f9fafb; | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #F59E0B; | |
| color: #111827; | |
| } | |
| .json-view { | |
| font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; | |
| font-size: 12px; | |
| line-height: 1.4; | |
| } | |
| </style> | |
| </head> | |
| <body class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-gray-900 text-white w-64 flex-shrink-0 flex flex-col"> | |
| <div class="p-4 border-b border-gray-700"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-yellow-400 flex items-center justify-center"> | |
| <i data-feather="shield" class="text-gray-900"></i> | |
| </div> | |
| <h1 class="text-xl font-bold">EY Quantum Safe</h1> | |
| </div> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto p-4 space-y-1"> | |
| <a href="index.html" | |
| class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white"> | |
| <i data-feather="layout" class="w-5 h-5"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="cboms.html" class="flex items-center space-x-3 p-3 rounded-lg bg-gray-800 text-yellow-400"> | |
| <i data-feather="file-text" class="w-5 h-5"></i> | |
| <span>CBOMs</span> | |
| </a> | |
| <a href="assets.html" | |
| class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white"> | |
| <i data-feather="lock" class="w-5 h-5"></i> | |
| <span>Assets</span> | |
| </a> | |
| <a href="integrations.html" | |
| class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white"> | |
| <i data-feather="link" class="w-5 h-5"></i> | |
| <span>Integrations</span> | |
| </a> | |
| <a href="analytics.html" | |
| class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 text-gray-300 hover:text-white"> | |
| <i data-feather="bar-chart-2" class="w-5 h-5"></i> | |
| <span>Analytics</span> | |
| </a> | |
| </nav> | |
| <div class="p-4 border-t border-gray-700"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center"> | |
| <i data-feather="user" class="text-gray-300"></i> | |
| </div> | |
| <div> | |
| <p class="极客时间text-sm font-medium">Josep Mateu</p> | |
| <p class="text-xs text-gray-400">Administrator</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white border-b border-gray-200 flex items-center justify-between p-4"> | |
| <div class="flex items-center space-x-4"> | |
| <button class="md:hidden text-gray-500"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| <h2 class="text-xl font-semibold text-gray-800">CBOM Management</h2> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <i data-feather="search" | |
| class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i> | |
| <input type="text" placeholder="Search CBOMs..." | |
| 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"> | |
| </div> | |
| <button | |
| class="px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg font-medium hover:bg-yellow-500 transition-colors"> | |
| <i data-feather="plus" class="w-4 h-4 inline mr-2"></i> | |
| New CBOM | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <!-- Tabs Navigation --> | |
| <div class="bg-white rounded-xl shadow-sm mb-6"> | |
| <div class="flex border-b border-gray-200"> | |
| <button class="px-6 py-4 font-medium tab-active">Overview</button> | |
| <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Create New</button> | |
| <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Import</button> | |
| <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Code Viewer</button> | |
| <button class="px-6 py-4 font-medium text-gray-500 hover:text-gray-700">Files</button> | |
| </div> | |
| </div> | |
| <!-- CBOM Overview --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column - CBOM List --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h3 class="font-semibold text-lg mb-4">Active CBOMs</h3> | |
| <div class="space-y-3"> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:border-yellow-400 cursor-pointer"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h4 class="font-medium">Enterprise Web App</h4> | |
| <span | |
| class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span> | |
| </div> | |
| <p class="text-sm text-gray-500">Version 2.1.0 • 342 assets</p> | |
| <p class="text-xs text-gray-400 mt-2">Last modified: 2 hours ago</p> | |
| </div> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:border-yellow-400 cursor-pointer"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h4 class="font-medium">Payment Gateway</h4> | |
| <span | |
| class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span> | |
| </div> | |
| <p class="text-sm text-gray-500">Version 1.0.3 • 189 assets</p> | |
| <p class="text-xs text-gray-400 mt-2">Last modified: 5 hours ago</p> | |
| </div> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:border-yellow-400 cursor-pointer"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h4 class="font-medium">Legacy System</h4> | |
| <span | |
| class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Draft</span> | |
| </div> | |
| <p class="text-sm text-gray-500">Version 0.9.1 • 87 assets</p> | |
| <p class="text-xs text-gray-400 mt-2">Last modified: 1 day ago</p> | |
| </div> | |
| <div class="p-4 border border-gray-200 rounded-lg hover:border-yellow-400 cursor-pointer"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h4 class="font-medium">Mobile Banking</h4> | |
| <span | |
| class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">Archived</span> | |
| </div> | |
| <p class="text-sm text-gray-500">Version 1.2.0 • 215 assets</p> | |
| <p class="text-xs text-gray-400 mt-2">Last modified: 1 week ago</p> | |
| </div> | |
| </div> | |
| <button | |
| class="w-full mt-4 px-4 py-2 border border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-yellow-400 hover:text-yellow-600 transition-colors"> | |
| <i data-feather="plus" class="w-4 h-4 inline mr-2"></i> | |
| Load More CBOMs | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Right Column - Selected CBOM Details --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- CBOM Summary --> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-lg">Enterprise Web App</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg text-sm hover:bg-gray-50"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-lg text-sm hover:bg-gray-50"> | |
| <i data-feather="download" class="w-4 h-4"></i> | |
| </button> | |
| <button class="px-3 py-1 bg-red-100 text-red-700 rounded-lg text-sm hover:bg-red-200"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> | |
| <div class="p-3 bg-gray-50 rounded-lg"> | |
| <p class="text-sm text-gray-500">Version</p> | |
| <p class="font-medium">2.1.0</p> | |
| </div> | |
| <div class="p-3 bg-gray-50 rounded-lg"> | |
| <p class="text-sm text-gray-500">Author</p> | |
| <p class="font-medium">Josep Mateu</p> | |
| </div> | |
| <div class="p-3 bg-gray-50 rounded-lg"> | |
| <p class="text-sm text-gray-500">Created</p> | |
| <p class="font-medium">2025-09-16</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-2"> | |
| <div class="text-center p-3 bg-blue-50 rounded-lg"> | |
| <p class="text-2xl font-bold text-blue-600">342</p> | |
| <p class="text-sm text-gray-600">Total Assets</p> | |
| </div> | |
| <div class="text-center p-3 bg-green-50 rounded-lg"> | |
| <p class="text-2xl font-bold text-green-600">45</p> | |
| <p class="text-sm text-gray-600">Algorithms</p> | |
| </div> | |
| <div class="text-center p-3 bg-purple-50 rounded-lg"> | |
| <p class="text-2xl font-bold text-purple-600">28</p> | |
| <p class="text-sm text-gray-600">Protocols</p> | |
| </div> | |
| <div class="text-center p-3 bg-yellow-50 rounded-lg"> | |
| <p class="text-2xl font-bold text-yellow-600">269</p> | |
| <p class="text-sm text-gray-600">Certificates</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h3 class="font-semibold text-lg mb-4">Quick Actions</h3> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3"> | |
| <button | |
| class="flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors"> | |
| <div class="p-3 rounded-lg bg-blue-100 text-blue-600 mb-2"> | |
| <i data-feather="bar-chart-2" class="w-6 h-6"></i> | |
| </div> | |
| <span class="text-sm font-medium">Analyze</span> | |
| </button> | |
| <button | |
| class="flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors"> | |
| <div class="p-3 rounded-lg bg-red-100 text-red-600 mb-2"> | |
| <i data-feather="alert-triangle" class="w-6 h-6"></i> | |
| </div> | |
| <span class="text-sm font-medium">Risk Assess</span> | |
| </button> | |
| <button | |
| class="flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors"> | |
| <div class="p-3 rounded-lg bg-green-100 text-green-600 mb-2"> | |
| <i data-feather="download" class="w-6 h-6"></i> | |
| </div> | |
| <span class="text-sm font-medium">Export</span> | |
| </button> | |
| <button | |
| class="flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:border-yellow-400 hover:bg-yellow-50 transition-colors"> | |
| <div class="p-3 rounded-lg bg-purple-100 text-purple-600 mb-2"> | |
| <i data-feather="share" class="w-6 h-6"></i> | |
| </div> | |
| <span class="text-sm font-medium">Share</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- JSON Preview --> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-lg">CBOM Preview</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-sm bg-gray-100 rounded-lg hover:bg-gray-200"> | |
| <i data-feather="copy" class="w-4 h-4"></i> | |
| </button> | |
| <button class="px-3 py-1 text-sm bg-gray-100 rounded-lg hover:bg-gray-200"> | |
| <i data-feather="maximize" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-lg p-4 json-view text-gray-200 overflow-auto max-h-64"> | |
| <pre>{ | |
| "cbom": { | |
| "version": "1.0", | |
| "name": "Enterprise Web App", | |
| "versionNumber": "2.1.0", | |
| "author": "John Doe", | |
| "created": "2024-01-15T10:30:00Z", | |
| "components": { | |
| "total": 342, | |
| "algorithms": 45, | |
| "protocols": 28, | |
| "certificates": 269, | |
| "cryptoMaterials": 0 | |
| }, | |
| "metadata": { | |
| "description": "Enterprise web application cryptographic bill of materials", | |
| "systemCriticality": "high", | |
| "complianceRequirements": ["PCI-DSS", "GDPR", "SOX"] | |
| } | |
| }, | |
| "assets": [ | |
| { | |
| "id": "alg-001", | |
| "type": "algorithm", | |
| "name": "AES-256", | |
| "version": "1.0", | |
| "strength": "256", | |
| "implementation": "OpenSSL", | |
| "quantumVulnerable": false | |
| }, | |
| { | |
| "id": "cert-001", | |
| "type": "certificate", | |
| "subject": "CN=example.com", | |
| "issuer": "CN=Let's Encrypt", | |
| "validFrom": "2024-01-01", | |
| "validTo": "2024-12-31", | |
| "signatureAlgorithm": "SHA256withRSA" | |
| } | |
| ] | |
| }</pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- CBOM Details Floating Window --> | |
| <div id="cbomDetailsModal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50"> | |
| <div class="bg-white rounded-xl shadow-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-xl font-semibold" id="cbomModalTitle">CBOM Details</h3> | |
| <button onclick="closeCbomModal()" class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="x" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> | |
| <div class="p-4 bg-gray-50 rounded-lg"> | |
| <p class="text-sm text-gray-500">Name</p> | |
| <p class="font-medium" id="cbomName">-</p> | |
| </div> | |
| <div class="p-4 bg-gray-50 rounded-lg"> | |
| <p class="text-sm text-gray-500">Version</p> | |
| <p class="font-medium" id="cbomVersion">-</p> | |
| </div> | |
| <div class="p-4 bg-gray-50 rounded-lg"> | |
| <p class="text-sm text-gray-500">Status</p> | |
| <p class="font-medium" id="cbomStatus">-</p> | |
| </div> | |
| <div class="p-4 bg-gray-50 rounded-lg"> | |
| <p class="text-sm text-gray-500">Last Modified</p> | |
| <p class="font-medium" id="cbomModified">-</p> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-medium mb-2">Assets Breakdown</h4> | |
| <div class="grid grid-cols-4 gap-2 text-center"> | |
| <div class="p-3 bg-blue-50 rounded-lg"> | |
| <p class="text-xl font-bold text-blue-600" id="cbomAlgorithms">0</p> | |
| <p class="text-xs text-gray-600">Algorithms</p> | |
| </div> | |
| <div class="p-3 bg-purple-50 rounded-lg"> | |
| <p class="text-xl font-bold text-purple-600" id="cbomProtocols">0</p> | |
| <p class="text-xs text-gray-600">Protocols</p> | |
| </div> | |
| <div class="p-3 bg-yellow-50 rounded-lg"> | |
| <p class="text-xl font-bold text-yellow-600" id="cbomCertificates">0</p> | |
| <p class="text-xs text-gray-600">Certificates</p> | |
| </div> | |
| <div class="p-3 bg-green-50 rounded-lg"> | |
| <p class="text-xl font-bold text-green-600" id="cbomTotal">0</p> | |
| <p class="text-xs text-gray-600">Total</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-medium mb-2">Risk Assessment</h4> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>High Risk</span> | |
| <span id="cbomHighRisk">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" id="cbomHighRiskBar" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Medium Risk</span> | |
| <span id="cbomMediumRisk">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" id="cbomMediumRiskBar" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Low Risk</span> | |
| <span id="cbomLowRisk">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" id="cbomLowRiskBar" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button onclick="closeCbomModal()" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"> | |
| Close | |
| </button> | |
| <button class="px-4 py-2 bg-yellow-400 text-gray-900 rounded-lg hover:bg-yellow-500"> | |
| View Full Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| AOS.init(); | |
| feather.replace(); | |
| // Tab switching functionality | |
| document.querySelectorAll('.flex button').forEach(button => { | |
| button.addEventListener('click', function () { | |
| document.querySelectorAll('.flex button').forEach(btn => { | |
| btn.classList.remove('tab-active'); | |
| btn.classList.add('text-gray-500', 'hover:text-gray-700'); | |
| }); | |
| this.classList.add('tab-active'); | |
| this.classList.remove('text-gray-500', 'hover:text-gray-700'); | |
| }); | |
| }); | |
| // CBOM Modal Functions | |
| function openCbomModal(cbomData) { | |
| document.getElementById('cbomModalTitle').textContent = cbomData.name; | |
| document.getElementById('cbomName').textContent = cbomData.name; | |
| document.getElementById('cbomVersion').textContent = cbomData.version; | |
| document.getElementById('cbomStatus').textContent = cbomData.status; | |
| document.getElementById('cbomModified').textContent = cbomData.modified; | |
| document.getElementById('cbomAlgorithms').textContent = cbomData.assets.algorithms; | |
| document.getElementById('cbomProtocols').textContent = cbomData.assets.protocols; | |
| document.getElementById('cbomCertificates').textContent = cbomData.assets.certificates; | |
| document.getElementById('cbomTotal').textContent = cbomData.assets.total; | |
| document.getElementById('cbomHighRisk').textContent = cbomData.risks.high + '%'; | |
| document.getElementById('cbomMediumRisk').textContent = cbomData.risks.medium + '%'; | |
| document.getElementById('cbomLowRisk').textContent = cbomData.risks.low + '%'; | |
| document.getElementById('cbomHighRiskBar').style.width = cbomData.risks.high + '%'; | |
| document.getElementById('cbomMediumRiskBar').style.width = cbomData.risks.medium + '%'; | |
| document.getElementById('cbomLowRiskBar').style.width = cbomData.risks.low + '%'; | |
| document.getElementById('cbomDetailsModal').classList.remove('hidden'); | |
| } | |
| function closeCbomModal() { | |
| document.getElementById('cbomDetailsModal').classList.add('hidden'); | |
| } | |
| // Sample data for CBOM cards | |
| const cbomCards = document.querySelectorAll('.p-4.border.border-gray-200.rounded-lg'); | |
| cbomCards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| const title = this.querySelector('h4').textContent; | |
| const status = this.querySelector('span').textContent; | |
| const versionText = this.querySelector('p:nth-of-type(1)').textContent; | |
| const modifiedText = this.querySelector('p:nth-of-type(2)').textContent; | |
| const cbomData = { | |
| name: title, | |
| status: status, | |
| version: versionText.split('•')[0].replace('Version', '').trim(), | |
| modified: modifiedText.replace('Last modified:', '').trim(), | |
| assets: { | |
| algorithms: Math.floor(Math.random() * 50) + 10, | |
| protocols: Math.floor(Math.random() * 30) + 5, | |
| certificates: Math.floor(Math.random() * 300) + 50, | |
| total: Math.floor(Math.random() * 400) + 100 | |
| }, | |
| risks: { | |
| high: Math.floor(Math.random() * 30) + 5, | |
| medium: Math.floor(Math.random() * 40) + 20, | |
| low: Math.floor(Math.random() * 40) + 30 | |
| } | |
| }; | |
| openCbomModal(cbomData); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |