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> | |
| <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'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |