Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>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); | |
| } | |
| .risk-high { | |
| border-left: 4px solid #EF4444; | |
| } | |
| .risk-medium { | |
| border-left: 4px solid #F59E0B; | |
| } | |
| .risk-low { | |
| border-left: 4px solid #10B981; | |
| } | |
| </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="#" class="flex items-center space-x-3 p-3 rounded-lg bg-gray-800 text-yellow-400"> | |
| <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 hover:bg-gray-800 text-gray-300 hover:text-white"> | |
| <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">Dashboard</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..." | |
| 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="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> | |
| <i data-feather="bell"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <!-- Quick Stats --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Active CBOMs</p> | |
| <p class="text-3xl font-bold mt-1">24</p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-yellow-50 text-yellow-600"> | |
| <i data-feather="file-text" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-3"><span class="text-green-500">+3</span> from last week</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Assets</p> | |
| <p class="text-3xl font-bold mt-1">1,284</p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-blue-50 text-blue-600"> | |
| <i data-feather="lock" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-3"><span class="text-green-500">+12%</span> from last week</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Risk Assessments</p> | |
| <p class="text-3xl font-bold mt-1">18</p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-red-50 text-red-600"> | |
| <i data-feather="alert-triangle" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-3"><span class="text-red-500">-2</span> from last week</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Integrations</p> | |
| <p class="text-3xl font-bold mt-1">3/4</p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-green-50 text-green-600"> | |
| <i data-feather="link" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-3">1 integration needs attention</p> | |
| </div> | |
| </div> | |
| <!-- Main Content Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Quick Actions --> | |
| <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">Quick Actions</h3> | |
| <button class="text-sm text-yellow-600 hover:text-yellow-700">View All</button> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> | |
| <button | |
| 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"> | |
| <div class="p-3 rounded-lg bg-yellow-100 text-yellow-600"> | |
| <i data-feather="plus" class="w-5 h-5"></i> | |
| </div> | |
| <span class="font-medium">New CBOM</span> | |
| </button> | |
| <button | |
| 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"> | |
| <div class="p-3 rounded-lg bg-blue-100 text-blue-600"> | |
| <i data-feather="download" class="w-5 h-5"></i> | |
| </div> | |
| <span class="font-medium">Import CBOM</span> | |
| </button> | |
| <button | |
| 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"> | |
| <div class="p-3 rounded-lg bg-red-100 text-red-600"> | |
| <i data-feather="alert-triangle" class="w-5 h-5"></i> | |
| </div> | |
| <span class="font-medium">Risk Assessment</span> | |
| </button> | |
| <button | |
| 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"> | |
| <div class="p-3 rounded-lg bg-green-100 text-green-600"> | |
| <i data-feather="bar-chart-2" class="w-5 h-5"></i> | |
| </div> | |
| <span class="font-medium">Generate Report</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <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">Recent Activity</h3> | |
| <button class="text-sm text-yellow-600 hover:text-yellow-700">View All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mt-1"> | |
| <i data-feather="file-plus" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">New CBOM created</p> | |
| <p class="text-sm text-gray-500">"Enterprise Web App" CBOM was created by Josep Mateu | |
| </p> | |
| <p class="text-xs text-gray-400 mt-1">2 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600 mt-1"> | |
| <i data-feather="download" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">CBOM imported</p> | |
| <p class="text-sm text-gray-500">"Payment Gateway" CBOM was imported from Venafi</p> | |
| <p class="text-xs text-gray-400 mt-1">5 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <div class="p-2 rounded-full bg-red-100 text-red-600 mt-1"> | |
| <i data-feather="alert-triangle" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Risk assessment completed</p> | |
| <p class="text-sm text-gray-500">High risk found in "Legacy System" CBOM</p> | |
| <p class="text-xs text-gray-400 mt-1">1 day ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <div class="p-2 rounded-full bg-green-100 text-green-600 mt-1"> | |
| <i data-feather="check-circle" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Integration connected</p> | |
| <p class="text-sm text-gray-500">Tanium integration was successfully connected</p> | |
| <p class="text-xs text-gray-400 mt-1">2 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column --> | |
| <div class="space-y-6"> | |
| <!-- Integration Status --> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h3 class="font-semibold text-lg mb-4">Integration Status</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="p-2 rounded-lg bg-purple-100 text-purple-600"> | |
| <i data-feather="cpu" class="w-5 h-5"></i> | |
| </div> | |
| <span class="font-medium">Venafi</span> | |
| </div> | |
| <span | |
| class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Connected</span> | |
| </div> | |
| <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="p-2 rounded-lg bg-blue-100 text-blue-600"> | |
| <i data-feather="server" class="w-5 h-5"></i> | |
| </div> | |
| <span class="font-medium">Tanium</span> | |
| </div> | |
| <span | |
| class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Connected</span> | |
| </div> | |
| <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="p-2 rounded-lg bg-yellow-100 text-yellow-600"> | |
| <i data-feather="shield" class="w-5 h-5"></i> | |
| </div> | |
| <span class="font-medium">SandboxAQ</span> | |
| </div> | |
| <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Disconnected</span> | |
| </div> | |
| <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="p-2 rounded-lg bg-gray-100 text-gray-600"> | |
| <i data-feather="cloud" class="w-5 h-5"></i> | |
| </div> | |
| <span class="font-medium">AWS KMS</span> | |
| </div> | |
| <span | |
| class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pending</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Risk Distribution --> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <h3 class="font-semibold text-lg mb-4">Risk Distribution</h3> | |
| <div class="h-48 flex items-center justify-center"> | |
| <!-- Placeholder for chart --> | |
| <div | |
| class="w-full h-full bg-gray-100 rounded-lg flex items-center justify-center text-gray-400"> | |
| <i data-feather="pie-chart" class="w-12 h-12"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 space-y-2"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <span class="text-sm">High Risk</span> | |
| </div> | |
| <span class="text-sm font-medium">12%</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <span class="text-sm">Medium Risk</span> | |
| </div> | |
| <span class="text-sm font-medium">34%</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| <span class="text-sm">Low Risk</span> | |
| </div> | |
| <span class="text-sm font-medium">54%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| AOS.init(); | |
| feather.replace(); | |
| // Simple animation for cards on load | |
| document.addEventListener('DOMContentLoaded', function () { | |
| const cards = document.querySelectorAll('.card-hover'); | |
| cards.forEach((card, index) => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(20px)'; | |
| card.style.transition = 'all 0.5s ease ' + (index * 0.1) + 's'; | |
| setTimeout(() => { | |
| card.style.opacity = '1'; | |
| card.style.transform = 'translateY(0)'; | |
| }, 100); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |