Spaces:
Running
Running
| <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 ; | |
| transform: none ; | |
| } | |
| [data-aos].aos-animate { | |
| opacity: 1 ; | |
| } | |
| .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> |