Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Analytics Dashboard - 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> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.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; | |
| } | |
| .risk-critical { | |
| background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(254, 202, 202, 0.1) 100%); | |
| border-left: 4px solid #DC2626; | |
| } | |
| .risk-high { | |
| background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(253, 230, 138, 0.1) 100%); | |
| border-left: 4px solid #F59E0B; | |
| } | |
| .risk-medium { | |
| background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(191, 219, 254, 0.1) 100%); | |
| border-left: 4px solid #3B82F6; | |
| } | |
| .risk-low { | |
| background: linear-gradient(135deg, rgba(22, 163, 74, 0.2) 0%, rgba(187, 247, 208, 0.1) 100%); | |
| border-left: 4px solid #16A34A; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| margin-bottom: 1rem; | |
| } | |
| .progress-bar { | |
| transition: width 0.3s ease; | |
| } | |
| .metric-card { | |
| transition: all 0.3s ease; | |
| backdrop-filter: blur(15px); | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .metric-card: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); | |
| } | |
| .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; | |
| } | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.8; | |
| } | |
| } | |
| /* 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; | |
| font-weight: 500; | |
| } | |
| select option:disabled { | |
| background-color: #0f172a; | |
| color: #6b7280; | |
| } | |
| /* 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); | |
| } | |
| /* Fix for optgroup if used */ | |
| optgroup { | |
| background-color: #0f172a; | |
| color: #9ca3af; | |
| font-weight: 600; | |
| } | |
| </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="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="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-white/10 text-gray-300 hover:text-white transition-all"> | |
| <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 bg-yellow-400/20 text-yellow-400 border border-yellow-400/30"> | |
| <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">Analytics 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 analytics..." | |
| 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="download" class="w-4 h-4 inline mr-2"></i> | |
| Export Report | |
| </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('compliance')">Compliance Frameworks</button> | |
| <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" | |
| onclick="showTab('rules')">Custom Rules</button> | |
| <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" | |
| onclick="showTab('reports')">Reports</button> | |
| <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" | |
| onclick="showTab('trends')">Trends & Insights</button> | |
| </div> | |
| </div> | |
| <!-- Tab Content --> | |
| <div id="tabContent"> | |
| <!-- Overview Tab --> | |
| <div id="overview" class="tab-content"> | |
| <!-- Enhanced Statistics Dashboard with Compliance Scores --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg: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">Overall Compliance</p> | |
| <p class="text-3xl font-bold text-white mt-1">78%</p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-yellow-400/20 text-yellow-400"> | |
| <i data-feather="check-square" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-3">Across all frameworks</p> | |
| </div> | |
| <!-- Total Risk Score --> | |
| <div class="metric-card 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">Overall Risk Score</p> | |
| <p class="text-3xl font-bold mt-1 text-red-400 pulse-animation">7.2/10</p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-red-400/20 text-red-400 glow-effect"> | |
| <i data-feather="alert-triangle" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> | |
| <span>Risk Level</span> | |
| <span>72%</span> | |
| </div> | |
| <div class="w-full bg-white/10 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full progress-bar glow-effect" | |
| style="width: 72%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quantum Vulnerable Assets --> | |
| <div class="metric-card 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">Quantum Vulnerable</p> | |
| <p class="text-3xl font-bold mt-1 text-yellow-400">342</p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-yellow-400/20 text-yellow-400 glow-effect"> | |
| <i data-feather="zap" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> | |
| <span>Of 1,284 total assets</span> | |
| <span>27%</span> | |
| </div> | |
| <div class="w-full bg-white/10 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full progress-bar" style="width: 27%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Migration Priority --> | |
| <div class="metric-card 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">Migration Priority</p> | |
| <p class="text-3xl font-bold mt-1 text-blue-400">156</p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-blue-400/20 text-blue-400 glow-effect"> | |
| <i data-feather="trending-up" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> | |
| <span>Critical/High priority</span> | |
| <span>46%</span> | |
| </div> | |
| <div class="w-full bg-white/10 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full progress-bar" style="width: 46%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Compliance Status --> | |
| <div class="metric-card 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">Compliance Score</p> | |
| <p class="text-3xl font-bold mt-1 text-green-400">8.4/10</p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-green-400/20 text-green-400 glow-effect"> | |
| <i data-feather="check-circle" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> | |
| <span>Standards met</span> | |
| <span>84%</span> | |
| </div> | |
| <div class="w-full bg-white/10 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full progress-bar" style="width: 84%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Compliance Status by Framework --> | |
| <div class="card-hover rounded-xl p-6 mb-6" data-aos="fade-up" data-aos-delay="400"> | |
| <h3 class="font-semibold text-lg text-white mb-4">Compliance Status by Framework</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="flex items-center space-x-2"> | |
| <div | |
| class="w-8 h-8 bg-blue-400/20 text-blue-400 rounded flex items-center justify-center"> | |
| <span class="text-xs font-bold">N</span> | |
| </div> | |
| <span class="text-white font-medium">NIST 800-53</span> | |
| </div> | |
| <span class="text-sm text-white">82%</span> | |
| </div> | |
| <div class="bg-white/10 rounded-full h-2"> | |
| <div class="bg-blue-400 h-2 rounded-full" style="width: 82%"></div> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-1">164 of 200 controls satisfied</p> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="flex items-center space-x-2"> | |
| <div | |
| class="w-8 h-8 bg-green-400/20 text-green-400 rounded flex items-center justify-center"> | |
| <span class="text-xs font-bold">I</span> | |
| </div> | |
| <span class="text-white font-medium">ISO/IEC 27001</span> | |
| </div> | |
| <span class="text-sm text-white">91%</span> | |
| </div> | |
| <div class="bg-white/10 rounded-full h-2"> | |
| <div class="bg-green-400 h-2 rounded-full" style="width: 91%"></div> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-1">109 of 120 controls satisfied</p> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="flex items-center space-x-2"> | |
| <div | |
| class="w-8 h-8 bg-purple-400/20 text-purple-400 rounded flex items-center justify-center"> | |
| <span class="text-xs font-bold">P</span> | |
| </div> | |
| <span class="text-white font-medium">PCI-DSS</span> | |
| </div> | |
| <span class="text-sm text-white">67%</span> | |
| </div> | |
| <div class="bg-white/10 rounded-full h-2"> | |
| <div class="bg-yellow-400 h-2 rounded-full" style="width: 67%"></div> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-1">54 of 80 controls satisfied</p> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="flex items-center space-x-2"> | |
| <div | |
| class="w-8 h-8 bg-yellow-400/20 text-yellow-400 rounded flex items-center justify-center"> | |
| <span class="text-xs font-bold">C</span> | |
| </div> | |
| <span class="text-white font-medium">Custom - Quantum Ready</span> | |
| </div> | |
| <span class="text-sm text-white">45%</span> | |
| </div> | |
| <div class="bg-white/10 rounded-full h-2"> | |
| <div class="bg-red-400 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-1">18 of 40 custom rules satisfied</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Analytics Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column - Charts --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Risk Distribution Chart --> | |
| <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-lg text-white">Risk Distribution by Asset Type</h3> | |
| <div class="flex space-x-2"> | |
| <button | |
| class="px-3 py-1 text-sm bg-white/10 border border-white/20 rounded-lg hover:bg-white/20 text-gray-300"> | |
| <i data-feather="download" class="w-4 h-4"></i> | |
| </button> | |
| <button | |
| class="px-3 py-1 text-sm bg-white/10 border border-white/20 rounded-lg hover:bg-white/20 text-gray-300"> | |
| <i data-feather="maximize" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="riskChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Quantum Timeline Chart --> | |
| <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="500"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-lg text-white">Quantum Threat Timeline</h3> | |
| <div class="flex space-x-2"> | |
| <select | |
| class="px-3 py-1 text-sm bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400"> | |
| <option>5 Year Horizon</option> | |
| <option>10 Year Horizon</option> | |
| <option>20 Year Horizon</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="quantumTimelineChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Asset Performance Trends --> | |
| <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="600"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-lg text-white">Asset Discovery Trends</h3> | |
| <div class="flex space-x-2"> | |
| <button | |
| class="px-3 py-1 text-sm bg-yellow-400 text-gray-900 rounded-lg hover:bg-yellow-500"> | |
| Last 30 days | |
| </button> | |
| <button | |
| class="px-3 py-1 text-sm border border-white/30 text-gray-300 rounded-lg hover:bg-white/10"> | |
| Last 90 days | |
| </button> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="trendsChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Analytics Cards --> | |
| <div class="space-y-6"> | |
| <!-- Critical Findings --> | |
| <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="700"> | |
| <h3 class="font-semibold text-lg mb-4 text-white">Critical Findings</h3> | |
| <div class="space-y-3"> | |
| <div class="p-4 rounded-lg risk-critical border border-red-400/30"> | |
| <div class="flex items-start space-x-3"> | |
| <i data-feather="alert-circle" class="w-5 h-5 text-red-400 mt-0.5"></i> | |
| <div> | |
| <p class="font-medium text-red-300">SHA-1 Still in Use</p> | |
| <p class="text-sm text-red-400">Found in 23 certificates</p> | |
| <p class="text-xs text-red-500 mt-1">Immediate replacement required</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 rounded-lg risk-high border border-yellow-400/30"> | |
| <div class="flex items-start space-x-3"> | |
| <i data-feather="clock" class="w-5 h-5 text-yellow-400 mt-0.5"></i> | |
| <div> | |
| <p class="font-medium text-yellow-300">RSA-1024 Keys</p> | |
| <p class="text-sm text-yellow-400">87 keys need upgrade</p> | |
| <p class="text-xs text-yellow-500 mt-1">Upgrade by Q2 2025</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 rounded-lg risk-medium border border-blue-400/30"> | |
| <div class="flex items-start space-x-3"> | |
| <i data-feather="info" class="w-5 h-5 text-blue-400 mt-0.5"></i> | |
| <div> | |
| <p class="font-medium text-blue-300">TLS 1.2 Usage</p> | |
| <p class="text-sm text-blue-400">134 implementations found</p> | |
| <p class="text-xs text-blue-500 mt-1">Plan TLS 1.3 migration</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CBOM Health Score --> | |
| <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="800"> | |
| <h3 class="font-semibold text-lg mb-4 text-white">CBOM Health Score</h3> | |
| <div class="text-center mb-4"> | |
| <div class="relative inline-flex items-center justify-center w-32 h-32"> | |
| <svg class="w-32 h-32 transform -rotate-90"> | |
| <circle cx="64" cy="64" r="56" stroke="rgba(255, 255, 255, 0.1)" | |
| stroke-width="8" fill="none"> | |
| </circle> | |
| <circle cx="64" cy="64" r="56" stroke="#f59e0b" stroke-width="8" fill="none" | |
| stroke-dasharray="351.86" stroke-dashoffset="105.56" | |
| stroke-linecap="round" class="glow-effect"> | |
| </circle> | |
| </svg> | |
| <div class="absolute text-center"> | |
| <span class="text-2xl font-bold text-yellow-400">7.2</span> | |
| <span class="text-sm text-gray-400 block">/ 10</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-400">Asset Coverage</span> | |
| <span class="text-sm font-medium text-white">92%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-400">Risk Assessment</span> | |
| <span class="text-sm font-medium text-white">78%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-400">Compliance</span> | |
| <span class="text-sm font-medium text-white">84%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-400">Dependencies</span> | |
| <span class="text-sm font-medium text-white">67%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Integration Status --> | |
| <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="900"> | |
| <h3 class="font-semibold text-lg mb-4 text-white">Data Sources</h3> | |
| <div class="space-y-3"> | |
| <div | |
| class="flex items-center justify-between p-3 border border-white/20 rounded-lg hover:border-green-400/50 transition-all"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="p-2 rounded-lg bg-green-400/20 text-green-400"> | |
| <i data-feather="cpu" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <span class="font-medium text-sm text-white">Venafi</span> | |
| <p class="text-xs text-gray-400">247 certificates</p> | |
| </div> | |
| </div> | |
| <div class="w-3 h-3 bg-green-500 rounded-full pulse-animation"></div> | |
| </div> | |
| <div | |
| class="flex items-center justify-between p-3 border border-white/20 rounded-lg hover:border-blue-400/50 transition-all"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="p-2 rounded-lg bg-blue-400/20 text-blue-400"> | |
| <i data-feather="server" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <span class="font-medium text-sm text-white">Tanium</span> | |
| <p class="text-xs text-gray-400">1,842 assets</p> | |
| </div> | |
| </div> | |
| <div class="w-3 h-3 bg-green-500 rounded-full pulse-animation"></div> | |
| </div> | |
| <div | |
| class="flex items-center justify-between p-3 border border-white/20 rounded-lg hover:border-red-400/50 transition-all"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="p-2 rounded-lg bg-yellow-400/20 text-yellow-400"> | |
| <i data-feather="shield" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <span class="font-medium text-sm text-white">SandboxAQ</span> | |
| <p class="text-xs text-gray-400">Risk analysis</p> | |
| </div> | |
| </div> | |
| <div class="w-3 h-3 bg-red-500 rounded-full pulse-animation"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="1000"> | |
| <h3 class="font-semibold text-lg mb-4 text-white">Quick Actions</h3> | |
| <div class="space-y-2"> | |
| <button | |
| class="w-full flex items-center space-x-3 p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-yellow-400/10 transition-all"> | |
| <div class="p-2 rounded-lg bg-red-400/20 text-red-400"> | |
| <i data-feather="zap" class="w-4 h-4"></i> | |
| </div> | |
| <span class="text-sm font-medium text-white">Run Quantum Assessment</span> | |
| </button> | |
| <button | |
| class="w-full flex items-center space-x-3 p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-yellow-400/10 transition-all"> | |
| <div class="p-2 rounded-lg bg-blue-400/20 text-blue-400"> | |
| <i data-feather="refresh-cw" class="w-4 h-4"></i> | |
| </div> | |
| <span class="text-sm font-medium text-white">Refresh Asset Data</span> | |
| </button> | |
| <button | |
| class="w-full flex items-center space-x-3 p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-yellow-400/10 transition-all"> | |
| <div class="p-2 rounded-lg bg-green-400/20 text-green-400"> | |
| <i data-feather="file-text" class="w-4 h-4"></i> | |
| </div> | |
| <span class="text-sm font-medium text-white">Generate Report</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Compliance Frameworks Tab --> | |
| <div id="compliance" class="tab-content hidden"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Framework Selection --> | |
| <div class="lg:col-span-2"> | |
| <div class="card-hover rounded-xl p-6" data-aos="fade-up"> | |
| <h3 class="font-semibold text-lg text-white mb-6">Compliance Framework Management</h3> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">Select Framework</label> | |
| <select id="frameworkSelect" | |
| 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" | |
| onchange="loadFrameworkRules()"> | |
| <option value="">Choose a framework...</option> | |
| <option value="nist">NIST 800-53 - Security and Privacy Controls</option> | |
| <option value="iso27001">ISO/IEC 27001 - Information Security</option> | |
| <option value="pcidss">PCI-DSS - Payment Card Industry</option> | |
| <option value="soc2">SOC 2 - Service Organization Control</option> | |
| <option value="gdpr">GDPR - Data Protection</option> | |
| <option value="hipaa">HIPAA - Healthcare Security</option> | |
| <option value="custom">Import Custom Framework</option> | |
| </select> | |
| </div> | |
| <!-- Framework Rules Display --> | |
| <div id="frameworkRules" class="hidden"> | |
| <h4 class="font-semibold text-white mb-4">Framework Rules</h4> | |
| <div class="space-y-3 max-h-96 overflow-y-auto"> | |
| <!-- Rules will be dynamically loaded here --> | |
| </div> | |
| </div> | |
| <!-- Import Custom Framework --> | |
| <div id="customFrameworkImport" class="hidden"> | |
| <h4 class="font-semibold text-white mb-4">Import Custom Framework</h4> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">Framework | |
| 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="e.g., Quantum Security Framework"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">Upload Rules | |
| File</label> | |
| <div | |
| class="border-2 border-dashed border-white/20 rounded-lg p-6 text-center hover:border-yellow-400 transition-all"> | |
| <i data-feather="upload" class="w-8 h-8 mx-auto text-gray-400 mb-2"></i> | |
| <p class="text-sm text-gray-300">Drop your JSON/YAML file here</p> | |
| <p class="text-xs text-gray-500 mt-1">or click to browse</p> | |
| </div> | |
| </div> | |
| <button | |
| class="w-full px-4 py-2 action-button text-gray-900 rounded-lg font-semibold"> | |
| Import Framework | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Active Compliance Checks --> | |
| <div class="card-hover rounded-xl p-6 mt-6" data-aos="fade-up" data-aos-delay="100"> | |
| <h3 class="font-semibold text-lg text-white mb-4">Active Compliance Checks</h3> | |
| <div class="space-y-3"> | |
| <div | |
| class="flex items-center justify-between p-3 border border-white/20 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <input type="checkbox" checked | |
| class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400"> | |
| <div> | |
| <p class="font-medium text-white">NIST 800-53</p> | |
| <p class="text-xs text-gray-400">Last checked: 2 hours ago</p> | |
| </div> | |
| </div> | |
| <button class="text-sm text-blue-400 hover:text-blue-300">Run Check</button> | |
| </div> | |
| <div | |
| class="flex items-center justify-between p-3 border border-white/20 rounded-lg"> | |
| <div class="flex items-center space-x-3"> | |
| <input type="checkbox" checked | |
| class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400"> | |
| <div> | |
| <p class="font-medium text-white">ISO/IEC 27001</p> | |
| <p class="text-xs text-gray-400">Last checked: 1 day ago</p> | |
| </div> | |
| </div> | |
| <button class="text-sm text-blue-400 hover:text-blue-300">Run Check</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Framework Templates --> | |
| <div class="space-y-6"> | |
| <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200"> | |
| <h4 class="font-semibold text-white mb-4">Framework Templates</h4> | |
| <div class="space-y-3"> | |
| <button onclick="loadFrameworkTemplate('nist')" | |
| 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">NIST Cryptographic Controls</p> | |
| <p class="text-xs text-gray-400">200+ predefined rules</p> | |
| </div> | |
| <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i> | |
| </div> | |
| </button> | |
| <button onclick="loadFrameworkTemplate('quantum')" | |
| 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">Quantum-Safe Template</p> | |
| <p class="text-xs text-gray-400">40+ quantum-specific rules</p> | |
| </div> | |
| <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i> | |
| </div> | |
| </button> | |
| <button onclick="loadFrameworkTemplate('minimal')" | |
| 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">Minimal Security</p> | |
| <p class="text-xs text-gray-400">Essential controls only</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" data-aos="fade-up" data-aos-delay="300"> | |
| <h4 class="font-semibold text-white mb-4">Compliance Status</h4> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-400">Total Frameworks</span> | |
| <span class="text-sm font-medium text-white">6</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-400">Active Checks</span> | |
| <span class="text-sm font-medium text-green-400">4</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-400">Failed Controls</span> | |
| <span class="text-sm font-medium text-red-400">127</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-400">Last Assessment</span> | |
| <span class="text-sm font-medium text-white">2h ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Custom Rules Tab --> | |
| <div id="rules" class="tab-content hidden"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Rule Builder --> | |
| <div class="lg:col-span-2"> | |
| <div class="card-hover rounded-xl p-6" data-aos="fade-up"> | |
| <h3 class="font-semibold text-lg text-white mb-6">Custom Rule Builder</h3> | |
| <form class="space-y-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">Rule 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="e.g., Quantum-Safe Key Length Check"> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">Category</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>Cryptographic Algorithms</option> | |
| <option>Key Management</option> | |
| <option>Protocol Security</option> | |
| <option>Certificate Validation</option> | |
| <option>Quantum Readiness</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">Severity</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> | |
| <option>Info</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">Rule | |
| 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="3" placeholder="Describe what this rule checks..."></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">Rule Logic</label> | |
| <div class="space-y-3"> | |
| <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>When asset type is...</option> | |
| <option>When algorithm equals...</option> | |
| <option>When key length is less than...</option> | |
| <option>When protocol version is...</option> | |
| <option>When certificate expires in...</option> | |
| </select> | |
| <div class="flex items-center space-x-2"> | |
| <select | |
| 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"> | |
| <option>equals</option> | |
| <option>not equals</option> | |
| <option>contains</option> | |
| <option>less than</option> | |
| <option>greater than</option> | |
| </select> | |
| <input type="text" | |
| 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" | |
| placeholder="Value"> | |
| </div> | |
| <button type="button" | |
| class="w-full px-3 py-2 border border-dashed border-white/20 text-gray-400 rounded-lg hover:border-yellow-400 hover:text-yellow-400"> | |
| <i data-feather="plus" class="w-4 h-4 inline mr-2"></i> | |
| Add Condition | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">Remediation | |
| Guidance</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="2" | |
| placeholder="Provide guidance on how to fix this issue..."></textarea> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button type="button" | |
| class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors"> | |
| Test Rule | |
| </button> | |
| <button type="submit" | |
| class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold"> | |
| Save Rule | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Existing Custom Rules --> | |
| <div class="card-hover rounded-xl overflow-hidden mt-6" data-aos="fade-up" | |
| data-aos-delay="100"> | |
| <div class="p-6 border-b border-white/10"> | |
| <h3 class="font-semibold text-lg text-white">Custom Rules</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="space-y-3"> | |
| <div class="p-4 border border-white/20 rounded-lg hover:bg-white/5"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h4 class="font-medium text-white">RSA Key Size Check</h4> | |
| <span | |
| class="px-2 py-1 text-xs bg-red-400/20 text-red-400 rounded-full">Critical</span> | |
| </div> | |
| <p class="text-sm text-gray-400 mb-2">Ensures RSA keys are at least 2048 | |
| bits</p> | |
| <div class="flex items-center space-x-4 text-xs"> | |
| <span class="text-gray-500">Category: Key Management</span> | |
| <button class="text-blue-400 hover:text-blue-300">Edit</button> | |
| <button class="text-red-400 hover:text-red-300">Delete</button> | |
| </div> | |
| </div> | |
| <div class="p-4 border border-white/20 rounded-lg hover:bg-white/5"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h4 class="font-medium text-white">Quantum-Safe Algorithm Check</h4> | |
| <span | |
| class="px-2 py-1 text-xs bg-yellow-400/20 text-yellow-400 rounded-full">High</span> | |
| </div> | |
| <p class="text-sm text-gray-400 mb-2">Identifies algorithms vulnerable to | |
| quantum attacks</p> | |
| <div class="flex items-center space-x-4 text-xs"> | |
| <span class="text-gray-500">Category: Quantum Readiness</span> | |
| <button class="text-blue-400 hover:text-blue-300">Edit</button> | |
| <button class="text-red-400 hover:text-red-300">Delete</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Rule Management Sidebar --> | |
| <div class="space-y-6"> | |
| <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200"> | |
| <h4 class="font-semibold text-white mb-4">Rule Templates</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"> | |
| <p class="text-sm font-medium text-white">Weak Algorithm Detection</p> | |
| <p class="text-xs text-gray-400">Identify deprecated algorithms</p> | |
| </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"> | |
| <p class="text-sm font-medium text-white">Certificate Expiry Check</p> | |
| <p class="text-xs text-gray-400">Alert on expiring certificates</p> | |
| </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"> | |
| <p class="text-sm font-medium text-white">PQC Migration Readiness</p> | |
| <p class="text-xs text-gray-400">Check quantum-safe status</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="300"> | |
| <h4 class="font-semibold text-white mb-4">Import/Export Rules</h4> | |
| <div class="space-y-3"> | |
| <button | |
| class="w-full px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors"> | |
| <i data-feather="upload" class="w-4 h-4 inline mr-2"></i> | |
| Import Rules | |
| </button> | |
| <button | |
| class="w-full px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors"> | |
| <i data-feather="download" class="w-4 h-4 inline mr-2"></i> | |
| Export All Rules | |
| </button> | |
| <button | |
| class="w-full px-4 py-2 action-button text-gray-900 rounded-lg font-semibold"> | |
| <i data-feather="share-2" class="w-4 h-4 inline mr-2"></i> | |
| Share Rules | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Reports Tab --> | |
| <div id="reports" class="tab-content hidden"> | |
| <!-- ...existing code... --> | |
| </div> | |
| <!-- Trends Tab --> | |
| <div id="trends" class="tab-content hidden"> | |
| <!-- ...existing code... --> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script> | |
| // Initialize feather icons and AOS 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[onclick^="showTab"]').forEach(button => { | |
| 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(); | |
| AOS.refresh(); | |
| } | |
| // Load framework rules | |
| function loadFrameworkRules() { | |
| const select = document.getElementById('frameworkSelect'); | |
| const rulesDiv = document.getElementById('frameworkRules'); | |
| const customDiv = document.getElementById('customFrameworkImport'); | |
| if (select.value === 'custom') { | |
| rulesDiv.classList.add('hidden'); | |
| customDiv.classList.remove('hidden'); | |
| } else if (select.value) { | |
| customDiv.classList.add('hidden'); | |
| rulesDiv.classList.remove('hidden'); | |
| // Load framework-specific rules | |
| const rulesContainer = rulesDiv.querySelector('.space-y-3'); | |
| rulesContainer.innerHTML = getFrameworkRules(select.value); | |
| feather.replace(); | |
| } else { | |
| rulesDiv.classList.add('hidden'); | |
| customDiv.classList.add('hidden'); | |
| } | |
| } | |
| // Get framework rules (sample data) | |
| function getFrameworkRules(framework) { | |
| const rules = { | |
| nist: [ | |
| { id: 'SC-13', name: 'Cryptographic Protection', status: 'pass', description: 'Use of approved cryptographic mechanisms' }, | |
| { id: 'SC-17', name: 'PKI Certificates', status: 'fail', description: 'Public key infrastructure certificates' }, | |
| { id: 'IA-5', name: 'Authenticator Management', status: 'pass', description: 'Management of cryptographic keys' }, | |
| { id: 'SC-28', name: 'Protection of Information at Rest', status: 'warning', description: 'Encryption of data at rest' } | |
| ], | |
| iso27001: [ | |
| { id: 'A.10.1.1', name: 'Policy on Cryptography', status: 'pass', description: 'Cryptographic controls policy' }, | |
| { id: 'A.10.1.2', name: 'Key Management', status: 'pass', description: 'Cryptographic key management' }, | |
| { id: 'A.14.1.3', name: 'Protecting Application Data', status: 'fail', description: 'Application services security' } | |
| ], | |
| pcidss: [ | |
| { id: '3.4', name: 'Strong Cryptography', status: 'warning', description: 'Render PAN unreadable using strong crypto' }, | |
| { id: '4.1', name: 'Strong Crypto in Transit', status: 'pass', description: 'Use strong cryptography for transmission' } | |
| ] | |
| }; | |
| const frameworkRules = rules[framework] || []; | |
| return frameworkRules.map(rule => ` | |
| <div class="p-4 border border-white/20 rounded-lg hover:bg-white/5"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center space-x-3"> | |
| <input type="checkbox" checked class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400"> | |
| <div> | |
| <h4 class="font-medium text-white">${rule.id}: ${rule.name}</h4> | |
| <p class="text-sm text-gray-400">${rule.description}</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| ${getStatusIcon(rule.status)} | |
| <button class="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| // Get status icon | |
| function getStatusIcon(status) { | |
| const icons = { | |
| pass: '<i data-feather="check-circle" class="w-5 h-5 text-green-400"></i>', | |
| fail: '<i data-feather="x-circle" class="w-5 h-5 text-red-400"></i>', | |
| warning: '<i data-feather="alert-triangle" class="w-5 h-5 text-yellow-400"></i>' | |
| }; | |
| return icons[status] || ''; | |
| } | |
| // Load framework template | |
| function loadFrameworkTemplate(templateType) { | |
| document.getElementById('frameworkSelect').value = templateType === 'quantum' ? 'custom' : templateType; | |
| loadFrameworkRules(); | |
| } | |
| </script> | |
| </body> | |
| </html> |