cbom-builder / cboms.html
gpetrizey's picture
Adjust layout and spacing for consistency in navigation and sidebar components.
61e0718
Raw History Blame Contribute Delete
76.9 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CBOM Manager - 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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); min-height: 100vh; } /* Ensure content is visible by default */ [data-aos] { opacity: 1 !important; transform: none !important; } [data-aos].aos-animate { opacity: 1 !important; } .gradient-text { background: linear-gradient(135deg, #F59E0B, #FBBF24, #FCD34D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .sidebar { backdrop-filter: blur(20px); background: rgba(15, 23, 42, 0.8); border-right: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .card-hover { backdrop-filter: blur(15px); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .card-hover:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.08); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5); border-color: rgba(245, 158, 11, 0.3); } .tab-active { border-bottom: 3px solid #F59E0B; color: #F59E0B; } .json-view { font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 12px; line-height: 1.4; } .action-button { background: linear-gradient(135deg, #F59E0B, #FBBF24); transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); } .action-button:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4); } .particle { position: absolute; width: 2px; height: 2px; background: #F59E0B; border-radius: 50%; animation: particle-float 8s linear infinite; opacity: 0.7; } @keyframes particle-float { 0% { transform: translateY(100vh) translateX(0px); opacity: 0; } 10% { opacity: 0.7; } 90% { opacity: 0.7; } 100% { transform: translateY(-100px) translateX(100px); opacity: 0; } } /* Fix select dropdown styling */ select option { background-color: #1e293b; color: #ffffff; padding: 8px; } select option:hover { background-color: #334155; } select option:checked { background-color: #475569; } /* Ensure select has proper background */ select { background-color: rgba(255, 255, 255, 0.1); color: #ffffff; } select:focus { background-color: rgba(255, 255, 255, 0.15); } </style> </head> <body class="flex h-screen overflow-hidden"> <!-- Animated Background Particles --> <div class="fixed inset-0 pointer-events-none z-0"> <div class="particle" style="left: 10%; animation-delay: 0s;"></div> <div class="particle" style="left: 30%; animation-delay: 2s;"></div> <div class="particle" style="left: 50%; animation-delay: 4s;"></div> <div class="particle" style="left: 70%; animation-delay: 6s;"></div> <div class="particle" style="left: 90%; animation-delay: 8s;"></div> </div> <!-- Sidebar --> <div class="sidebar text-white w-64 flex-shrink-0 flex flex-col relative z-10"> <div class="p-4 border-b border-white/10"> <a href="index.html" class="flex items-center space-x-3 hover:opacity-80 transition-opacity"> <div class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center"> <i data-feather="shield" class="text-gray-900 w-5 h-5"></i> </div> <h1 class="text-xl font-bold"><span class="gradient-text">Quantum Safe</span></h1> </a> </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-white/10 text-gray-300 hover:text-white transition-all"> <i data-feather="home" class="w-5 h-5"></i> <span>Home</span> </a> <a href="dashboard.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all"> <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-yellow-400/20 text-yellow-400 border border-yellow-400/30"> <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-white/10 text-gray-300 hover:text-white transition-all"> <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-white/10 text-gray-300 hover:text-white transition-all"> <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-white/10 text-gray-300 hover:text-white transition-all"> <i data-feather="bar-chart-2" class="w-5 h-5"></i> <span>Analytics</span> </a> </nav> <div class="p-4 border-t border-white/10"> <div class="flex items-center space-x-3"> <div class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-600 to-gray-700 flex items-center justify-center"> <i data-feather="user" class="text-gray-300 w-5 h-5"></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 relative z-10"> <!-- Top Navigation --> <header class="backdrop-filter backdrop-blur-lg bg-white/5 border-b border-white/10 flex items-center justify-between p-4"> <div class="flex items-center space-x-4"> <button class="md:hidden text-white"> <i data-feather="menu"></i> </button> <h2 class="text-xl font-semibold text-white">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 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"> </div> <button class="px-4 py-2 action-button text-gray-900 rounded-lg font-semibold"> <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"> <!-- Tabs Navigation --> <div class="card-hover rounded-xl mb-6"> <div class="flex border-b border-white/10 overflow-x-auto"> <button class="px-6 py-4 font-medium tab-active" onclick="showTab('overview')">Overview</button> <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('create')">Create New</button> <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('import')">Import</button> <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('templates')">Templates</button> <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('dependencies')">Dependencies</button> </div> </div> <!-- Tab Content --> <div id="tabContent"> <!-- Overview Tab --> <div id="overview" class="tab-content"> <!-- Stats Overview --> <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6"> <div class="card-hover rounded-xl p-6" data-aos="fade-up"> <div class="flex items-center justify-between"> <div> <p class="text-sm font-medium text-gray-400">Total CBOMs</p> <p class="text-3xl font-bold text-white mt-1">24</p> </div> <div class="p-3 rounded-lg bg-yellow-400/20 text-yellow-400"> <i data-feather="file-text" class="w-6 h-6"></i> </div> </div> </div> <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="100"> <div class="flex items-center justify-between"> <div> <p class="text-sm font-medium text-gray-400">Active</p> <p class="text-3xl font-bold text-white mt-1">19</p> </div> <div class="p-3 rounded-lg bg-green-400/20 text-green-400"> <i data-feather="check-circle" class="w-6 h-6"></i> </div> </div> </div> <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200"> <div class="flex items-center justify-between"> <div> <p class="text-sm font-medium text-gray-400">Draft</p> <p class="text-3xl font-bold text-white mt-1">3</p> </div> <div class="p-3 rounded-lg bg-blue-400/20 text-blue-400"> <i data-feather="edit" class="w-6 h-6"></i> </div> </div> </div> <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="300"> <div class="flex items-center justify-between"> <div> <p class="text-sm font-medium text-gray-400">Archived</p> <p class="text-3xl font-bold text-white mt-1">2</p> </div> <div class="p-3 rounded-lg bg-gray-400/20 text-gray-400"> <i data-feather="archive" class="w-6 h-6"></i> </div> </div> </div> </div> <!-- Filters and Search --> <div class="card-hover rounded-xl p-6 mb-6" data-aos="fade-up" data-aos-delay="400"> <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4"> <div class="flex items-center space-x-2"> <i data-feather="filter" class="text-gray-400"></i> <span class="text-sm text-gray-400">Filters:</span> <select 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"> <option>All Status</option> <option>Active</option> <option>Draft</option> <option>Archived</option> </select> <select 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"> <option>All Risk Levels</option> <option>High Risk</option> <option>Medium Risk</option> <option>Low Risk</option> </select> </div> <div class="relative"> <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4"></i> <input type="text" placeholder="Search CBOMs..." 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"> </div> </div> </div> <!-- CBOMs List --> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <!-- CBOM Card 1 --> <div class="card-hover rounded-xl overflow-hidden risk-high" data-aos="fade-up" data-aos-delay="500"> <div class="p-6"> <div class="flex items-start justify-between mb-4"> <div> <h3 class="font-semibold text-lg text-white">Enterprise Web App</h3> <p class="text-sm text-gray-400">Created 2 days ago</p> </div> <span class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Active</span> </div> <p class="text-sm text-gray-300 mb-4">Main customer-facing web application with payment processing capabilities</p> <div class="space-y-2 mb-4"> <div class="flex justify-between text-sm"> <span class="text-gray-400">Assets</span> <span class="text-white">342</span> </div> <div class="flex justify-between text-sm"> <span class="text-gray-400">Risk Level</span> <span class="text-red-400">High</span> </div> <div class="flex justify-between text-sm"> <span class="text-gray-400">Last Assessment</span> <span class="text-white">12 hours ago</span> </div> </div> <div class="flex space-x-2"> <button class="flex-1 px-3 py-2 bg-white/10 text-white text-sm rounded-lg hover:bg-white/20 transition-colors"> <i data-feather="eye" class="w-4 h-4 inline mr-1"></i> View </button> <button class="flex-1 px-3 py-2 action-button text-gray-900 text-sm rounded-lg font-semibold"> <i data-feather="play" class="w-4 h-4 inline mr-1"></i> Assess </button> </div> </div> </div> <!-- CBOM Card 2 --> <div class="card-hover rounded-xl overflow-hidden risk-medium" data-aos="fade-up" data-aos-delay="600"> <div class="p-6"> <div class="flex items-start justify-between mb-4"> <div> <h3 class="font-semibold text-lg text-white">Payment Gateway</h3> <p class="text-sm text-gray-400">Created 1 week ago</p> </div> <span class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Active</span> </div> <p class="text-sm text-gray-300 mb-4">Secure payment processing system handling credit card transactions</p> <div class="space-y-2 mb-4"> <div class="flex justify-between text-sm"> <span class="text-gray-400">Assets</span> <span class="text-white">128</span> </div> <div class="flex justify-between text-sm"> <span class="text-gray-400">Risk Level</span> <span class="text-yellow-400">Medium</span> </div> <div class="flex justify-between text-sm"> <span class="text-gray-400">Last Assessment</span> <span class="text-white">3 days ago</span> </div> </div> <div class="flex space-x-2"> <button class="flex-1 px-3 py-2 bg-white/10 text-white text-sm rounded-lg hover:bg-white/20 transition-colors"> <i data-feather="eye" class="w-4 h-4 inline mr-1"></i> View </button> <button class="flex-1 px-3 py-2 action-button text-gray-900 text-sm rounded-lg font-semibold"> <i data-feather="play" class="w-4 h-4 inline mr-1"></i> Assess </button> </div> </div> </div> <!-- CBOM Card 3 --> <div class="card-hover rounded-xl overflow-hidden risk-low" data-aos="fade-up" data-aos-delay="700"> <div class="p-6"> <div class="flex items-start justify-between mb-4"> <div> <h3 class="font-semibold text-lg text-white">Mobile Banking App</h3> <p class="text-sm text-gray-400">Created 2 weeks ago</p> </div> <span class="px-2 py-1 text-xs font-medium bg-blue-400/20 text-blue-400 rounded-full">Draft</span> </div> <p class="text-sm text-gray-300 mb-4">iOS and Android banking application for retail customers</p> <div class="space-y-2 mb-4"> <div class="flex justify-between text-sm"> <span class="text-gray-400">Assets</span> <span class="text-white">89</span> </div> <div class="flex justify-between text-sm"> <span class="text-gray-400">Risk Level</span> <span class="text-green-400">Low</span> </div> <div class="flex justify-between text-sm"> <span class="text-gray-400">Last Assessment</span> <span class="text-white">Not assessed</span> </div> </div> <div class="flex space-x-2"> <button class="flex-1 px-3 py-2 bg-white/10 text-white text-sm rounded-lg hover:bg-white/20 transition-colors"> <i data-feather="eye" class="w-4 h-4 inline mr-1"></i> View </button> <button class="flex-1 px-3 py-2 action-button text-gray-900 text-sm rounded-lg font-semibold"> <i data-feather="play" class="w-4 h-4 inline mr-1"></i> Assess </button> </div> </div> </div> <!-- Add more CBOM cards... --> </div> </div> <!-- Create New Tab --> <div id="create" class="tab-content hidden"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div class="lg:col-span-2"> <div class="card-hover rounded-xl p-6"> <h3 class="font-semibold text-lg text-white mb-6">Create New CBOM</h3> <form class="space-y-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <label class="block text-sm font-medium text-gray-300 mb-2">CBOM Name *</label> <input type="text" 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" placeholder="Enter CBOM name"> </div> <div> <label class="block text-sm font-medium text-gray-300 mb-2">Version</label> <input type="text" 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" placeholder="1.0.0"> </div> </div> <div> <label class="block text-sm font-medium text-gray-300 mb-2">Description</label> <textarea 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" rows="4" placeholder="Describe the purpose and scope of this CBOM"></textarea> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <label class="block text-sm font-medium text-gray-300 mb-2">Application Type</label> <select 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"> <option>Web Application</option> <option>Mobile Application</option> <option>Desktop Application</option> <option>Microservices</option> <option>IoT System</option> <option>Legacy System</option> </select> </div> <div> <label class="block text-sm font-medium text-gray-300 mb-2">Criticality Level</label> <select 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"> <option>Critical</option> <option>High</option> <option>Medium</option> <option>Low</option> </select> </div> </div> <div> <label class="block text-sm font-medium text-gray-300 mb-2">Tags</label> <input type="text" 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" placeholder="Add tags (comma separated)"> <p class="text-xs text-gray-400 mt-1">e.g., production, banking, customer-facing </p> </div> <div class="border-t border-white/10 pt-6"> <h4 class="font-medium text-white mb-4">Initial Cryptographic Assets</h4> <div class="space-y-3"> <button type="button" class="w-full p-4 border-2 border-dashed border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all"> <i data-feather="plus" class="w-5 h-5 mx-auto text-gray-400 mb-2"></i> <p class="text-sm text-gray-400">Add Asset Manually</p> </button> <button type="button" class="w-full p-4 border-2 border-dashed border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all"> <i data-feather="upload" class="w-5 h-5 mx-auto text-gray-400 mb-2"></i> <p class="text-sm text-gray-400">Import from Integration</p> </button> </div> </div> <div class="flex justify-end space-x-4"> <button type="button" class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors"> Cancel </button> <button type="submit" class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold"> Create CBOM </button> </div> </form> </div> </div> <div class="space-y-6"> <div class="card-hover rounded-xl p-6"> <h4 class="font-semibold text-white mb-4">Quick Start Templates</h4> <div class="space-y-3"> <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left"> <div class="flex items-center justify-between"> <div> <p class="font-medium text-white">Web Application</p> <p class="text-xs text-gray-400">Standard web app template</p> </div> <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i> </div> </button> <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left"> <div class="flex items-center justify-between"> <div> <p class="font-medium text-white">Microservices</p> <p class="text-xs text-gray-400">Distributed system template</p> </div> <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i> </div> </button> <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left"> <div class="flex items-center justify-between"> <div> <p class="font-medium text-white">Legacy System</p> <p class="text-xs text-gray-400">For older systems</p> </div> <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i> </div> </button> </div> </div> <div class="card-hover rounded-xl p-6"> <h4 class="font-semibold text-white mb-4">Tips</h4> <div class="space-y-3"> <div class="flex items-start space-x-2"> <i data-feather="info" class="w-4 h-4 text-blue-400 mt-0.5"></i> <p class="text-sm text-gray-300">Use descriptive names to easily identify CBOMs </p> </div> <div class="flex items-start space-x-2"> <i data-feather="info" class="w-4 h-4 text-blue-400 mt-0.5"></i> <p class="text-sm text-gray-300">Set appropriate criticality levels for prioritization</p> </div> <div class="flex items-start space-x-2"> <i data-feather="info" class="w-4 h-4 text-blue-400 mt-0.5"></i> <p class="text-sm text-gray-300">Add relevant tags for better organization</p> </div> </div> </div> </div> </div> </div> <!-- Import Tab --> <div id="import" class="tab-content hidden"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div class="lg:col-span-2"> <div class="card-hover rounded-xl p-6"> <h3 class="font-semibold text-lg text-white mb-6">Import CBOM</h3> <div class="space-y-6"> <div> <h4 class="font-medium text-white mb-4">1. Select Import Method</h4> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <label class="cursor-pointer"> <input type="radio" name="importMethod" value="file" class="sr-only peer" checked> <div 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"> <i data-feather="file" class="w-8 h-8 mx-auto mb-2 text-gray-400 peer-checked:text-yellow-400"></i> <p class="font-medium text-center text-white">File Upload</p> <p class="text-xs text-center text-gray-400 mt-1">Upload CBOM file </p> </div> </label> <label class="cursor-pointer"> <input type="radio" name="importMethod" value="integration" class="sr-only peer"> <div 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"> <i data-feather="link" class="w-8 h-8 mx-auto mb-2 text-gray-400 peer-checked:text-yellow-400"></i> <p class="font-medium text-center text-white">Integration</p> <p class="text-xs text-center text-gray-400 mt-1">Import from tool </p> </div> </label> </div> </div> <div id="fileUploadSection"> <h4 class="font-medium text-white mb-4">2. Upload File</h4> <div class="border-2 border-dashed border-white/20 rounded-lg p-8 text-center hover:border-yellow-400 transition-all"> <i data-feather="upload-cloud" class="w-12 h-12 mx-auto text-gray-400 mb-4"></i> <p class="text-white font-medium mb-2">Drag & drop your CBOM file here</p> <p class="text-sm text-gray-400 mb-4">or</p> <button class="px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 transition-colors"> Browse Files </button> <p class="text-xs text-gray-500 mt-4">Supported formats: .json, .xml, .cbom, .csv</p> </div> </div> <div id="integrationSection" class="hidden"> <h4 class="font-medium text-white mb-4">2. Select Integration Source</h4> <div class="space-y-3"> <label class="flex items-center p-3 border border-white/20 rounded-lg hover:border-yellow-400 cursor-pointer"> <input type="radio" name="integration" value="venafi" class="mr-3 text-yellow-400"> <div class="flex-1"> <p class="font-medium text-white">Venafi</p> <p class="text-xs text-gray-400">Import from Venafi Trust Protection Platform</p> </div> <span class="px-2 py-1 text-xs bg-green-400/20 text-green-400 rounded-full">Connected</span> </label> <label class="flex items-center p-3 border border-white/20 rounded-lg hover:border-yellow-400 cursor-pointer"> <input type="radio" name="integration" value="tanium" class="mr-3 text-yellow-400"> <div class="flex-1"> <p class="font-medium text-white">Tanium</p> <p class="text-xs text-gray-400">Import asset inventory from Tanium </p> </div> <span class="px-2 py-1 text-xs bg-green-400/20 text-green-400 rounded-full">Connected</span> </label> </div> </div> <div> <h4 class="font-medium text-white mb-4">3. Import Options</h4> <div class="space-y-3"> <div class="flex items-center space-x-3"> <input type="checkbox" id="validateSchema" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400" checked> <label for="validateSchema" class="text-sm text-gray-300">Validate schema before import</label> </div> <div class="flex items-center space-x-3"> <input type="checkbox" id="mergeExisting" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400"> <label for="mergeExisting" class="text-sm text-gray-300">Merge with existing CBOM if name matches</label> </div> <div class="flex items-center space-x-3"> <input type="checkbox" id="runAssessment" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400" checked> <label for="runAssessment" class="text-sm text-gray-300">Run risk assessment after import</label> </div> </div> </div> <div class="flex justify-end space-x-4"> <button type="button" class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors"> Cancel </button> <button type="button" class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold"> Import CBOM </button> </div> </div> </div> </div> <div class="space-y-6"> <div class="card-hover rounded-xl p-6"> <h4 class="font-semibold text-white mb-4">Recent Imports</h4> <div class="space-y-3"> <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg"> <div class="flex items-center space-x-3"> <i data-feather="file-text" class="w-4 h-4 text-gray-400"></i> <div> <p class="text-sm font-medium text-white">payment-gateway.json</p> <p class="text-xs text-gray-400">2 hours ago</p> </div> </div> <i data-feather="check-circle" class="w-4 h-4 text-green-400"></i> </div> <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg"> <div class="flex items-center space-x-3"> <i data-feather="link" class="w-4 h-4 text-gray-400"></i> <div> <p class="text-sm font-medium text-white">Venafi Import</p> <p class="text-xs text-gray-400">Yesterday</p> </div> </div> <i data-feather="check-circle" class="w-4 h-4 text-green-400"></i> </div> </div> </div> <div class="card-hover rounded-xl p-6"> <h4 class="font-semibold text-white mb-4">Import Statistics</h4> <div class="space-y-3"> <div class="flex justify-between items-center"> <span class="text-sm text-gray-400">Total Imports</span> <span class="text-sm font-medium text-white">47</span> </div> <div class="flex justify-between items-center"> <span class="text-sm text-gray-400">Successful</span> <span class="text-sm font-medium text-green-400">45</span> </div> <div class="flex justify-between items-center"> <span class="text-sm text-gray-400">Failed</span> <span class="text-sm font-medium text-red-400">2</span> </div> <div class="flex justify-between items-center"> <span class="text-sm text-gray-400">Avg. Assets/Import</span> <span class="text-sm font-medium text-white">234</span> </div> </div> </div> </div> </div> </div> <!-- Templates Tab --> <div id="templates" class="tab-content hidden"> <div class="card-hover rounded-xl p-6 mb-6"> <div class="flex items-center justify-between mb-4"> <h3 class="font-semibold text-lg text-white">CBOM Templates</h3> <button class="px-4 py-2 action-button text-gray-900 rounded-lg text-sm font-semibold"> <i data-feather="plus" class="w-4 h-4 inline mr-2"></i> Create Template </button> </div> <p class="text-gray-300">Pre-configured templates to help you quickly create CBOMs for common application types</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform"> <div class="p-6"> <div class="w-12 h-12 rounded-lg bg-blue-400/20 flex items-center justify-center mb-4"> <i data-feather="globe" class="w-6 h-6 text-blue-400"></i> </div> <h4 class="font-semibold text-white mb-2">Web Application</h4> <p class="text-sm text-gray-400 mb-4">Standard template for web applications with TLS, authentication, and session management</p> <div class="space-y-2 text-xs"> <div class="flex items-center space-x-2"> <i data-feather="check" class="w-3 h-3 text-green-400"></i> <span class="text-gray-300">TLS Configuration</span> </div> <div class="flex items-center space-x-2"> <i data-feather="check" class="w-3 h-3 text-green-400"></i> <span class="text-gray-300">JWT/Session Management</span> </div> <div class="flex items-center space-x-2"> <i data-feather="check" class="w-3 h-3 text-green-400"></i> <span class="text-gray-300">Database Encryption</span> </div> </div> </div> <div class="px-6 py-3 bg-white/5 border-t border-white/10"> <div class="flex items-center justify-between"> <span class="text-xs text-gray-400">12 predefined assets</span> <button class="text-xs text-yellow-400 hover:text-yellow-300">Use Template</button> </div> </div> </div> <div class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform"> <div class="p-6"> <div class="w-12 h-12 rounded-lg bg-purple-400/20 flex items-center justify-center mb-4"> <i data-feather="smartphone" class="w-6 h-6 text-purple-400"></i> </div> <h4 class="font-semibold text-white mb-2">Mobile Application</h4> <p class="text-sm text-gray-400 mb-4">Template for mobile apps with device security, API communication, and local storage</p> <div class="space-y-2 text-xs"> <div class="flex items-center space-x-2"> <i data-feather="check" class="w-3 h-3 text-green-400"></i> <span class="text-gray-300">Keychain/Keystore</span> </div> <div class="flex items-center space-x-2"> <i data-feather="check" class="w-3 h-3 text-green-400"></i> <span class="text-gray-300">API Security</span> </div> <div class="flex items-center space-x-2"> <i data-feather="check" class="w-3 h-3 text-green-400"></i> <span class="text-gray-300">Biometric Auth</span> </div> </div> </div> <div class="px-6 py-3 bg-white/5 border-t border-white/10"> <div class="flex items-center justify-between"> <span class="text-xs text-gray-400">18 predefined assets</span> <button class="text-xs text-yellow-400 hover:text-yellow-300">Use Template</button> </div> </div> </div> <div class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform"> <div class="p-6"> <div class="w-12 h-12 rounded-lg bg-green-400/20 flex items-center justify-center mb-4"> <i data-feather="server" class="w-6 h-6 text-green-400"></i> </div> <h4 class="font-semibold text-white mb-2">Microservices</h4> <p class="text-sm text-gray-400 mb-4">Distributed system template with service mesh, mTLS, and container security</p> <div class="space-y-2 text-xs"> <div class="flex items-center space-x-2"> <i data-feather="check" class="w-3 h-3 text-green-400"></i> <span class="text-gray-300">Service Mesh mTLS</span> </div> <div class="flex items-center space-x-2"> <i data-feather="check" class="w-3 h-3 text-green-400"></i> <span class="text-gray-300">Container Security</span> </div> <div class="flex items-center space-x-2"> <i data-feather="check" class="w-3 h-3 text-green-400"></i> <span class="text-gray-300">Secret Management</span> </div> </div> </div> <div class="px-6 py-3 bg-white/5 border-t border-white/10"> <div class="flex items-center justify-between"> <span class="text-xs text-gray-400">24 predefined assets</span> <button class="text-xs text-yellow-400 hover:text-yellow-300">Use Template</button> </div> </div> </div> <div class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform"> <div class="p-6"> <div class="w-12 h-12 rounded-lg bg-red-400/20 flex items-center justify-center mb-4"> <i data-feather="database" class="w-6 h-6 text-red-400"></i> </div> <h4 class="font-semibold text-white mb-2">Legacy System</h4> <p class="text-sm text-gray-400 mb-4">Template for older systems with common legacy cryptographic implementations</p> <div class="space-y-2 text-xs"> <div class="flex items-center space-x-2"> <i data-feather="check" class="w-3 h-3 text-green-400"></i> <span class="text-gray-300">Legacy Algorithms</span> </div> <div class="flex items-center space-x-2"> <i data-feather="check" class="w-3 h-3 text-green-400"></i> <span class="text-gray-300">Certificate Management</span> </div> <div class="flex items-center space-x-2"> <i data-feather="check" class="w-3 h-3 text-green-400"></i> <span class="text-gray-300">Migration Planning</span> </div> </div> </div> <div class="px-6 py-3 bg-white/5 border-t border-white/10"> <div class="flex items-center justify-between"> <span class="text-xs text-gray-400">15 predefined assets</span> <button class="text-xs text-yellow-400 hover:text-yellow-300">Use Template</button> </div> </div> </div> </div> </div> <!-- Dependencies Tab --> <div id="dependencies" class="tab-content hidden"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div class="lg:col-span-2"> <div class="card-hover rounded-xl p-6"> <div class="flex items-center justify-between mb-6"> <h3 class="font-semibold text-lg text-white">CBOM Dependencies</h3> <div class="flex items-center space-x-2"> <button class="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg"> <i data-feather="refresh-cw" class="w-5 h-5"></i> </button> <button class="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg"> <i data-feather="download" class="w-5 h-5"></i> </button> </div> </div> <div class="mb-6"> <div class="flex items-center space-x-4"> <select 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"> <option>All CBOMs</option> <option>Enterprise Web App</option> <option>Payment Gateway</option> <option>Legacy System</option> </select> <input type="text" placeholder="Search dependencies..." 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"> </div> </div> <div class="space-y-4"> <div class="border border-white/10 rounded-lg overflow-hidden"> <div class="p-4 bg-white/5 flex items-center justify-between"> <div class="flex items-center space-x-3"> <i data-feather="package" class="w-5 h-5 text-blue-400"></i> <div> <p class="font-medium text-white">OpenSSL</p> <p class="text-xs text-gray-400">v3.0.11</p> </div> </div> <span class="px-2 py-1 text-xs bg-yellow-400/20 text-yellow-400 rounded-full">3 CBOMs</span> </div> <div class="p-4 border-t border-white/10"> <div class="grid grid-cols-2 gap-4 mb-3"> <div> <p class="text-xs text-gray-400">Used in</p> <p class="text-sm text-white">Enterprise Web App, Payment Gateway, API Service</p> </div> <div> <p class="text-xs text-gray-400">Risk Level</p> <p class="text-sm text-yellow-400">Medium (Quantum Vulnerable)</p> </div> </div> <div class="flex items-center justify-between pt-3 border-t border-white/10"> <button class="text-xs text-blue-400 hover:text-blue-300">View Details</button> <button class="text-xs text-yellow-400 hover:text-yellow-300">Update All</button> </div> </div> </div> <div class="border border-white/10 rounded-lg overflow-hidden"> <div class="p-4 bg-white/5 flex items-center justify-between"> <div class="flex items-center space-x-3"> <i data-feather="package" class="w-5 h-5 text-red-400"></i> <div> <p class="font-medium text-white">Bouncy Castle</p> <p class="text-xs text-gray-400">v1.70</p> </div> </div> <span class="px-2 py-1 text-xs bg-red-400/20 text-red-400 rounded-full">5 CBOMs</span> </div> <div class="p-4 border-t border-white/10"> <div class="grid grid-cols-2 gap-4 mb-3"> <div> <p class="text-xs text-gray-400">Used in</p> <p class="text-sm text-white">5 applications across production</p> </div> <div> <p class="text-xs text-gray-400">Risk Level</p> <p class="text-sm font-medium text-red-400">High (Outdated)</p> </div> </div> <div class="flex items-center justify-between pt-3 border-t border-white/10"> <button class="text-xs text-blue-400 hover:text-blue-300">View Details</button> <button class="text-xs text-red-400 hover:text-red-300">Urgent Update</button> </div> </div> </div> <div class="border border-white/10 rounded-lg overflow-hidden"> <div class="p-4 bg-white/5 flex items-center justify-between"> <div class="flex items-center space-x-3"> <i data-feather="package" class="w-5 h-5 text-green-400"></i> <div> <p class="font-medium text-white">libsodium</p> <p class="text-xs text-gray-400">v1.0.19</p> </div> </div> <span class="px-2 py-1 text-xs bg-green-400/20 text-green-400 rounded-full">2 CBOMs</span> </div> <div class="p-4 border-t border-white/10"> <div class="grid grid-cols-2 gap-4 mb-3"> <div> <p class="text-xs text-gray-400">Used in</p> <p class="text-sm text-white">Mobile App, IoT Gateway</p> </div> <div> <p class="text-xs text-gray-400">Risk Level</p> <p class="text-sm text-green-400">Low (Quantum Safe)</p> </div> </div> <div class="flex items-center justify-between pt-3 border-t border-white/10"> <button class="text-xs text-blue-400 hover:text-blue-300">View Details</button> <button class="text-xs text-gray-400" disabled>Up to date</button> </div> </div> </div> </div> </div> </div> <div class="space-y-6"> <div class="card-hover rounded-xl p-6"> <h4 class="font-semibold text-white mb-4">Dependency Summary</h4> <div class="space-y-3"> <div class="flex justify-between items-center"> <span class="text-sm text-gray-400">Total Dependencies</span> <span class="text-sm font-medium text-white">47</span> </div> <div class="flex justify-between items-center"> <span class="text-sm text-gray-400">Unique Libraries</span> <span class="text-sm font-medium text-white">23</span> </div> <div class="flex justify-between items-center"> <span class="text-sm text-gray-400">Outdated</span> <span class="text-sm font-medium text-red-400">8</span> </div> <div class="flex justify-between items-center"> <span class="text-sm text-gray-400">Quantum Vulnerable</span> <span class="text-sm font-medium text-yellow-400">12</span> </div> <div class="flex justify-between items-center"> <span class="text-sm text-gray-400">Quantum Safe</span> <span class="text-sm font-medium text-green-400">27</span> </div> </div> </div> <div class="card-hover rounded-xl p-6"> <h4 class="font-semibold text-white mb-4">Quick Actions</h4> <div class="space-y-2"> <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left"> <div class="flex items-center justify-between"> <div class="flex items-center space-x-2"> <i data-feather="refresh-cw" class="w-4 h-4 text-gray-400"></i> <span class="text-sm text-white">Update All Dependencies</span> </div> <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i> </div> </button> <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left"> <div class="flex items-center justify-between"> <div class="flex items-center space-x-2"> <i data-feather="alert-triangle" class="w-4 h-4 text-gray-400"></i> <span class="text-sm text-white">Vulnerability Scan</span> </div> <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i> </div> </button> <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left"> <div class="flex items-center justify-between"> <div class="flex items-center space-x-2"> <i data-feather="file-text" class="w-4 h-4 text-gray-400"></i> <span class="text-sm text-white">Generate Report</span> </div> <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i> </div> </button> </div> </div> </div> </div> </div> </div> </main> </div> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <script> // Initialize feather icons immediately document.addEventListener('DOMContentLoaded', function () { // Replace feather icons feather.replace(); // Initialize AOS with better settings AOS.init({ duration: 400, once: true, offset: 0, easing: 'ease-out', delay: 0, anchorPlacement: 'top-bottom', disable: function () { // Disable AOS on mobile devices to prevent issues return window.innerWidth < 768; } }); // Force AOS refresh after a short delay setTimeout(() => { AOS.refresh(); }, 100); }); // Tab switching functionality function showTab(tabName) { // Hide all tab contents document.querySelectorAll('.tab-content').forEach(content => { content.classList.add('hidden'); }); // Remove active class from all tabs document.querySelectorAll('.flex button').forEach(button => { if (button.onclick && button.onclick.toString().includes('showTab')) { button.classList.remove('tab-active'); button.classList.add('text-gray-400', 'hover:text-gray-200'); } }); // Show selected tab content document.getElementById(tabName).classList.remove('hidden'); // Add active class to clicked tab event.target.classList.add('tab-active'); event.target.classList.remove('text-gray-400', 'hover:text-gray-200'); // Re-render feather icons feather.replace(); } // Import method toggle document.addEventListener('change', function (e) { if (e.target.name === 'importMethod') { if (e.target.value === 'file') { document.getElementById('fileUploadSection').classList.remove('hidden'); document.getElementById('integrationSection').classList.add('hidden'); } else { document.getElementById('fileUploadSection').classList.add('hidden'); document.getElementById('integrationSection').classList.remove('hidden'); } } }); // Ensure all content is visible on load window.addEventListener('load', function () { // Force all AOS elements to animate document.querySelectorAll('[data-aos]').forEach(el => { el.classList.add('aos-animate'); }); }); </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CBOM Manager - 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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
min-height: 100vh;
}
/* Ensure content is visible by default */
[data-aos] {
opacity: 1 !important;
transform: none !important;
}
[data-aos].aos-animate {
opacity: 1 !important;
}
.gradient-text {
background: linear-gradient(135deg, #F59E0B, #FBBF24, #FCD34D);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.sidebar {
backdrop-filter: blur(20px);
background: rgba(15, 23, 42, 0.8);
border-right: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.card-hover {
backdrop-filter: blur(15px);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
border-color: rgba(245, 158, 11, 0.3);
}
.tab-active {
border-bottom: 3px solid #F59E0B;
color: #F59E0B;
}
.json-view {
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 12px;
line-height: 1.4;
}
.action-button {
background: linear-gradient(135deg, #F59E0B, #FBBF24);
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
.action-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}
.particle {
position: absolute;
width: 2px;
height: 2px;
background: #F59E0B;
border-radius: 50%;
animation: particle-float 8s linear infinite;
opacity: 0.7;
}
@keyframes particle-float {
0% {
transform: translateY(100vh) translateX(0px);
opacity: 0;
}
10% {
opacity: 0.7;
}
90% {