Spaces:

haramb3
/

cbom-builder

Running

App Files Files Community

cbom-builder / assets.html

gpetrizey

Adjust layout and spacing for consistency in navigation and sidebar components.

61e0718 11 months ago

Raw

History Blame Contribute Delete

103 kB

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Assets Management - Quantum Safe</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

	body {
	font-family: 'Inter', sans-serif;
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
	min-height: 100vh;
	}

	/* Ensure content is visible by default */
	[data-aos] {
	opacity: 1 !important;
	transform: none !important;
	}

	[data-aos].aos-animate {
	opacity: 1 !important;
	}

	.gradient-text {
	background: linear-gradient(135deg, #F59E0B, #FBBF24, #FCD34D);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	.sidebar {
	backdrop-filter: blur(20px);
	background: rgba(15, 23, 42, 0.8);
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
	}

	.card-hover {
	backdrop-filter: blur(15px);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
	}

	.card-hover:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
	border-color: rgba(245, 158, 11, 0.3);
	}

	.tab-active {
	border-bottom: 3px solid #F59E0B;
	color: #F59E0B;
	}

	.risk-high {
	border-left: 4px solid #EF4444;
	}

	.risk-medium {
	border-left: 4px solid #F59E0B;
	}

	.risk-low {
	border-left: 4px solid #10B981;
	}

	.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);
	}

	.table-container {
	max-height: 600px;
	overflow-y: auto;
	}

	.table-container::-webkit-scrollbar {
	width: 6px;
	}

	.table-container::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.05);
	}

	.table-container::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 3px;
	}

	.table-container::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.3);
	}

	.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;
	}

	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);
	}
	</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 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 bg-yellow-400/20 text-yellow-400 border border-yellow-400/30">
	<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">Assets 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 assets..."
	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>
	Add Asset
	</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('assetList')">Asset List</button>
	<button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"
	onclick="showTab('algorithms')">Algorithms</button>
	<button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"
	onclick="showTab('protocols')">Protocols</button>
	<button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"
	onclick="showTab('certificates')">Certificates</button>
	<button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"
	onclick="showTab('cryptoMaterials')">Crypto Materials</button>
	</div>
	</div>

	<!-- Tab Content -->
	<div id="tabContent">
	<!-- Asset List Tab -->
	<div id="assetList" class="tab-content">
	<!-- Existing Asset List Content -->
	<!-- Statistics Dashboard -->
	<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
	<div class="card-hover rounded-xl p-4 text-center" data-aos="fade-up">
	<div
	class="w-12 h-12 bg-blue-400/20 text-blue-400 rounded-full flex items-center justify-center mx-auto mb-3">
	<i data-feather="lock" class="w-6 h-6"></i>
	</div>
	<p class="text-2xl font-bold text-white">1,284</p>
	<p class="text-sm text-gray-400">Total Assets</p>
	</div>

	<div class="card-hover rounded-xl p-4 text-center" data-aos="fade-up" data-aos-delay="100">
	<div
	class="w-12 h-12 bg-red-400/20 text-red-400 rounded-full flex items-center justify-center mx-auto mb-3">
	<i data-feather="alert-triangle" class="w-6 h-6"></i>
	</div>
	<p class="text-2xl font-bold text-white">154</p>
	<p class="text-sm text-gray-400">High Risk</p>
	</div>

	<div class="card-hover rounded-xl p-4 text-center" data-aos="fade-up" data-aos-delay="200">
	<div
	class="w-12 h-12 bg-yellow-400/20 text-yellow-400 rounded-full flex items-center justify-center mx-auto mb-3">
	<i data-feather="alert-circle" class="w-6 h-6"></i>
	</div>
	<p class="text-2xl font-bold text-white">437</p>
	<p class="text-sm text-gray-400">Medium Risk</p>
	</div>

	<div class="card-hover rounded-xl p-4 text-center" data-aos="fade-up" data-aos-delay="300">
	<div
	class="w-12 h-12 bg-green-400/20 text-green-400 rounded-full flex items-center justify-center mx-auto mb-3">
	<i data-feather="shield" class="w-6 h-6"></i>
	</div>
	<p class="text-2xl font-bold text-white">693</p>
	<p class="text-sm text-gray-400">Quantum Secure</p>
	</div>
	</div>

	<!-- Asset Table -->
	<div class="card-hover rounded-xl overflow-hidden" data-aos="fade-up" data-aos-delay="400">
	<div class="p-6 border-b border-white/10">
	<div class="flex items-center justify-between">
	<h3 class="font-semibold text-lg text-white">Assets</h3>
	<div class="flex items-center space-x-2">
	<span class="text-sm text-gray-400">1-10 of 1,284 assets</span>
	<button class="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg">
	<i data-feather="chevron-left" class="w-4 h-4"></i>
	</button>
	<button class="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg">
	<i data-feather="chevron-right" class="w-4 h-4"></i>
	</button>
	</div>
	</div>
	</div>

	<div class="table-container">
	<table class="w-full">
	<thead class="bg-white/5">
	<tr>
	<th
	class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
	<input type="checkbox"
	class="rounded border-gray-600 bg-white/10 text-yellow-400 focus:ring-yellow-400">
	</th>
	<th
	class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
	Name</th>
	<th
	class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
	Type</th>
	<th
	class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
	Version</th>
	<th
	class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
	Risk Level</th>
	<th
	class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
	Quantum</th>
	<th
	class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
	CBOM</th>
	<th
	class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
	Actions</th>
	</tr>
	</thead>
	<tbody class="divide-y divide-white/10">
	<tr class="hover:bg-white/5 risk-high">
	<td class="px-6 py-4 whitespace-nowrap">
	<input type="checkbox"
	class="rounded border-gray-600 bg-white/10 text-yellow-400 focus:ring-yellow-400">
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div
	class="w-8 h-8 bg-red-400/20 text-red-400 rounded-full flex items-center justify-center mr-3">
	<i data-feather="alert-triangle" class="w-4 h-4"></i>
	</div>
	<div>
	<div class="font-medium text-white">SHA-1</div>
	<div class="text-sm text-gray-400">Hash algorithm</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span
	class="px-2 py-1 text-xs font-medium bg-blue-400/20 text-blue-400 rounded-full">Algorithm</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">1.0</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span
	class="px-2 py-1 text-xs font-medium bg-red-400/20 text-red-400 rounded-full">High</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span
	class="px-2 py-1 text-xs font-medium bg-red-400/20 text-red-400 rounded-full">Vulnerable</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Legacy System</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
	<div class="flex space-x-2">
	<button class="text-blue-400 hover:text-blue-300">
	<i data-feather="edit" class="w-4 h-4"></i>
	</button>
	<button class="text-red-400 hover:text-red-300">
	<i data-feather="trash-2" class="w-4 h-4"></i>
	</button>
	</div>
	</td>
	</tr>

	<tr class="hover:bg-white/5 risk-medium">
	<td class="px-6 py-4 whitespace-nowrap">
	<input type="checkbox"
	class="rounded border-gray-600 bg-white/10 text-yellow-400 focus:ring-yellow-400">
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div
	class="w-8 h-8 bg-yellow-400/20 text-yellow-400 rounded-full flex items-center justify-center mr-3">
	<i data-feather="alert-circle" class="w-4 h-4"></i>
	</div>
	<div>
	<div class="font-medium text-white">TLS 1.2</div>
	<div class="text-sm text-gray-400">Security protocol</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span
	class="px-2 py-1 text-xs font-medium bg-purple-400/20 text-purple-400 rounded-full">Protocol</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">1.2</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span
	class="px-2 py-1 text-xs font-medium bg-yellow-400/20 text-yellow-400 rounded-full">Medium</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span
	class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Secure</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Enterprise Web App
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
	<div class="flex space-x-2">
	<button class="text-blue-400 hover:text-blue-300">
	<i data-feather="edit" class="w-4 h-4"></i>
	</button>
	<button class="text-red-400 hover:text-red-300">
	<i data-feather="trash-2" class="w-4 h-4"></i>
	</button>
	</div>
	</td>
	</tr>

	<tr class="hover:bg-white/5 risk-low">
	<td class="px-6 py-4 whitespace-nowrap">
	<input type="checkbox"
	class="rounded border-gray-600 bg-white/10 text-yellow-400 focus:ring-yellow-400">
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div
	class="w-8 h-8 bg-green-400/20 text-green-400 rounded-full flex items-center justify-center mr-3">
	<i data-feather="shield" class="w-4 h-4"></i>
	</div>
	<div>
	<div class="font-medium text-white">AES-256</div>
	<div class="text-sm text-gray-400">Encryption algorithm</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span
	class="px-2 py-1 text-xs font-medium bg-blue-400/20 text-blue-400 rounded-full">Algorithm</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">2.0</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span
	class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Low</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span
	class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Secure</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Payment Gateway
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
	<div class="flex space-x-2">
	<button class="text-blue-400 hover:text-blue-300">
	<i data-feather="edit" class="w-4 h-4"></i>
	</button>
	<button class="text-red-400 hover:text-red-300">
	<i data-feather="trash-2" class="w-4 h-4"></i>
	</button>
	</div>
	</td>
	</tr>

	<tr class="hover:bg-white/5 risk-high">
	<td class="px-6 py-4 whitespace-nowrap">
	<input type="checkbox"
	class="rounded border-gray-600 bg-white/10 text-yellow-400 focus:ring-yellow-400">
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div
	class="w-8 h-8 bg-red-400/20 text-red-400 rounded-full flex items-center justify-center mr-3">
	<i data-feather="alert-triangle" class="w-4 h-4"></i>
	</div>
	<div>
	<div class="font-medium text-white">RSA-1024</div>
	<div class="text-sm text-gray-400">Asymmetric key</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span
	class="px-2 py-1 text-xs font-medium bg-gray-400/20 text-gray-400 rounded-full">Crypto
	Material</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">1.0</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span
	class="px-2 py-1 text-xs font-medium bg-red-400/20 text-red-400 rounded-full">High</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span
	class="px-2 py-1 text-xs font-medium bg-red-400/20 text-red-400 rounded-full">Vulnerable</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Legacy System</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
	<div class="flex space-x-2">
	<button class="text-blue-400 hover:text-blue-300">
	<i data-feather="edit" class="w-4 h-4"></i>
	</button>
	<button class="text-red-400 hover:text-red-300">
	<i data-feather="trash-2" class="w-4 h-4"></i>
	</button>
	</div>
	</td>
	</tr>

	<tr class="hover:bg-white/5 risk-low">
	<td class="px-6 py-4 whitespace-nowrap">
	<input type="checkbox"
	class="rounded border-gray-600 bg-white/10 text-yellow-400 focus:ring-yellow-400">
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div
	class="w-8 h-8 bg-green-400/20 text-green-400 rounded-full flex items-center justify-center mr-3">
	<i data-feather="shield" class="w-4 h-4"></i>
	</div>
	<div>
	<div class="font-medium text-white">ECC-256</div>
	<div class="text-sm text-gray-400">Elliptic curve</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span
	class="px-2 py-1 text-xs font-medium bg-gray-400/20 text-gray-400 rounded-full">Crypto
	Material</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">2.1</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span
	class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Low</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span
	class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Secure</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Enterprise Web App
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
	<div class="flex space-x-2">
	<button class="text-blue-400 hover:text-blue-300">
	<i data-feather="edit" class="w-4 h-4"></i>
	</button>
	<button class="text-red-400 hover:text-red-300">
	<i data-feather="trash-2" class="w-4 h-4"></i>
	</button>
	</div>
	</td>
	</tr>
	</tbody>
	</table>
	</div>

	<div class="px-6 py-4 border-t border-white/10 bg-white/5">
	<div class="flex items-center justify-between">
	<div class="flex items-center space-x-4">
	<button
	class="px-4 py-2 bg-red-400/20 text-red-400 rounded-lg text-sm hover:bg-red-400/30 transition-colors">
	<i data-feather="trash-2" class="w-4 h-4 inline mr-2"></i>
	Delete Selected
	</button>
	<button
	class="px-4 py-2 action-button text-gray-900 rounded-lg text-sm font-semibold">
	<i data-feather="edit" class="w-4 h-4 inline mr-2"></i>
	Edit Selected
	</button>
	</div>

	<div class="flex items-center space-x-4">
	<button
	class="px-4 py-2 border border-white/20 text-gray-300 rounded-lg text-sm hover:bg-white/10 transition-colors">
	<i data-feather="download" class="w-4 h-4 inline mr-2"></i>
	Export to CSV
	</button>
	<button
	class="px-4 py-2 border border-white/20 text-gray-300 rounded-lg text-sm hover:bg-white/10 transition-colors">
	<i data-feather="download" class="w-4 h-4 inline mr-2"></i>
	Export to JSON
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Algorithms Tab -->
	<div id="algorithms" class="tab-content hidden">
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
	<!-- Algorithm Input Form -->
	<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">Add New Algorithm</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">Algorithm 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., AES-256-GCM">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Algorithm 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>Symmetric Encryption</option>
	<option>Asymmetric Encryption</option>
	<option>Hash Function</option>
	<option>Digital Signature</option>
	<option>Key Exchange</option>
	<option>MAC (Message Authentication)</option>
	</select>
	</div>
	</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">Key Size
	(bits)</label>
	<input type="number"
	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., 256">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Mode of
	Operation</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., GCM, CBC, CTR">
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Implementation
	Details</label>
	<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
	<div>
	<label class="block text-xs text-gray-400 mb-1">Library/Provider</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., OpenSSL">
	</div>
	<div>
	<label class="block text-xs text-gray-400 mb-1">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="e.g., 3.0.11">
	</div>
	<div>
	<label class="block text-xs text-gray-400 mb-1">FIPS Validated</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>Yes</option>
	<option>No</option>
	<option>In Progress</option>
	</select>
	</div>
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Quantum Resistance
	Status *</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>Quantum Safe</option>
	<option>Quantum Vulnerable</option>
	<option>Partially Resistant</option>
	<option>Under Evaluation</option>
	</select>
	</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">Purpose/Usage</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., Data at rest encryption">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Associated
	CBOM</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>Select CBOM...</option>
	<option>Enterprise Web App</option>
	<option>Payment Gateway</option>
	<option>Mobile Banking App</option>
	</select>
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Additional
	Metadata</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="Any additional information about this algorithm..."></textarea>
	</div>

	<div class="border-t border-white/10 pt-6">
	<div class="flex justify-between items-center">
	<p class="text-sm text-gray-400">* Required fields</p>
	<div class="flex 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">
	Clear Form
	</button>
	<button type="submit"
	class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
	Add Algorithm
	</button>
	</div>
	</div>
	</div>
	</form>
	</div>
	</div>

	<!-- Algorithm Templates -->
	<div class="space-y-6">
	<div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
	<h4 class="font-semibold text-white mb-4">Quick 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">
	<p class="font-medium text-white">AES-256-GCM</p>
	<p class="text-xs text-gray-400">Symmetric encryption, 256-bit key</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="font-medium text-white">RSA-2048</p>
	<p class="text-xs text-gray-400">Asymmetric encryption, 2048-bit key</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="font-medium text-white">SHA-256</p>
	<p class="text-xs text-gray-400">Hash function, 256-bit output</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="font-medium text-white">ECDSA-P256</p>
	<p class="text-xs text-gray-400">Digital signature, elliptic curve</p>
	</button>
	</div>
	</div>

	<div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
	<h4 class="font-semibold text-white mb-4">Recently Added</h4>
	<div class="space-y-3 max-h-64 overflow-y-auto">
	<div class="p-3 bg-white/5 rounded-lg">
	<p class="font-medium text-white text-sm">ChaCha20-Poly1305</p>
	<p class="text-xs text-gray-400">Added 2 hours ago</p>
	</div>
	<div class="p-3 bg-white/5 rounded-lg">
	<p class="font-medium text-white text-sm">HMAC-SHA256</p>
	<p class="text-xs text-gray-400">Added yesterday</p>
	</div>
	<div class="p-3 bg-white/5 rounded-lg">
	<p class="font-medium text-white text-sm">PBKDF2</p>
	<p class="text-xs text-gray-400">Added 3 days ago</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Protocols Tab -->
	<div id="protocols" class="tab-content hidden">
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
	<!-- Protocol Input Form -->
	<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">Add New Protocol</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">Protocol 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., TLS">
	</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="e.g., 1.3">
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Protocol 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>Transport Security</option>
	<option>Authentication</option>
	<option>Key Exchange</option>
	<option>VPN/Tunneling</option>
	<option>Email Security</option>
	<option>Other</option>
	</select>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Cipher Suites /
	Algorithms Used</label>
	<div class="space-y-2">
	<div class="flex items-center space-x-2">
	<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="e.g., TLS_AES_256_GCM_SHA384">
	<button type="button" class="p-2 text-yellow-400 hover:text-yellow-300">
	<i data-feather="plus-circle" class="w-5 h-5"></i>
	</button>
	</div>
	<p class="text-xs text-gray-400">Add multiple cipher suites as needed</p>
	</div>
	</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">Key Exchange
	Method</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., ECDHE, DHE">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Authentication
	Method</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., RSA, ECDSA">
	</div>
	</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">Port
	Number</label>
	<input type="number"
	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., 443">
	</div>
	<div>
	<label
	class="block text-sm font-medium text-gray-300 mb-2">Implementation</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., OpenSSL, BoringSSL">
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Security
	Settings</label>
	<div class="space-y-3">
	<div class="flex items-center space-x-3">
	<input type="checkbox" id="pfs"
	class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
	<label for="pfs" class="text-sm text-gray-300">Perfect Forward Secrecy
	(PFS)</label>
	</div>
	<div class="flex items-center space-x-3">
	<input type="checkbox" id="hsts"
	class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
	<label for="hsts" class="text-sm text-gray-300">HSTS Enabled</label>
	</div>
	<div class="flex items-center space-x-3">
	<input type="checkbox" id="ocsp"
	class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
	<label for="ocsp" class="text-sm text-gray-300">OCSP Stapling</label>
	</div>
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Quantum Risk
	Assessment *</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>Low - Uses quantum-safe algorithms</option>
	<option>Medium - Partially quantum-vulnerable</option>
	<option>High - Fully quantum-vulnerable</option>
	<option>Critical - Deprecated/Insecure</option>
	</select>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Notes</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="Additional configuration or security notes..."></textarea>
	</div>

	<div class="border-t border-white/10 pt-6">
	<div class="flex justify-between items-center">
	<p class="text-sm text-gray-400">* Required fields</p>
	<div class="flex 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">
	Clear Form
	</button>
	<button type="submit"
	class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
	Add Protocol
	</button>
	</div>
	</div>
	</div>
	</form>
	</div>
	</div>

	<!-- Protocol Templates -->
	<div class="space-y-6">
	<div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
	<h4 class="font-semibold text-white mb-4">Protocol 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">
	<p class="font-medium text-white">TLS 1.3</p>
	<p class="text-xs text-gray-400">Modern transport security</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="font-medium text-white">SSH v2</p>
	<p class="text-xs text-gray-400">Secure shell protocol</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="font-medium text-white">IPSec</p>
	<p class="text-xs text-gray-400">VPN tunneling protocol</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="font-medium text-white">OAuth 2.0</p>
	<p class="text-xs text-gray-400">Authentication protocol</p>
	</button>
	</div>
	</div>

	<div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
	<h4 class="font-semibold text-white mb-4">Common Configurations</h4>
	<div class="space-y-2">
	<div class="p-3 bg-white/5 rounded-lg">
	<p class="text-sm text-white">Web Server TLS</p>
	<p class="text-xs text-gray-400">HTTPS with modern ciphers</p>
	</div>
	<div class="p-3 bg-white/5 rounded-lg">
	<p class="text-sm text-white">API Security</p>
	<p class="text-xs text-gray-400">mTLS configuration</p>
	</div>
	<div class="p-3 bg-white/5 rounded-lg">
	<p class="text-sm text-white">Email Security</p>
	<p class="text-xs text-gray-400">S/MIME or PGP setup</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Certificates Tab -->
	<div id="certificates" class="tab-content hidden">
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
	<!-- Certificate Input Form -->
	<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">Add New Certificate</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">Common Name (CN)
	*</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., *.example.com">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Certificate 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>SSL/TLS Server</option>
	<option>SSL/TLS Client</option>
	<option>Code Signing</option>
	<option>Email (S/MIME)</option>
	<option>Root CA</option>
	<option>Intermediate CA</option>
	</select>
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Subject Alternative
	Names (SANs)</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="Enter SANs separated by commas (e.g., www.example.com, api.example.com)"></textarea>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Key Algorithm
	*</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>RSA</option>
	<option>ECDSA</option>
	<option>DSA</option>
	<option>EdDSA</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Key Size
	*</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>2048 bits</option>
	<option>3072 bits</option>
	<option>4096 bits</option>
	<option>P-256</option>
	<option>P-384</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Signature
	Algorithm *</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>SHA256withRSA</option>
	<option>SHA384withRSA</option>
	<option>SHA512withRSA</option>
	<option>SHA256withECDSA</option>
	</select>
	</div>
	</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">Valid From
	*</label>
	<input type="date"
	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">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Valid Until
	*</label>
	<input type="date"
	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">
	</div>
	</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">Issuer (CA)
	*</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., DigiCert SHA2 Secure Server CA">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Serial
	Number</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., 0A:1B:2C:3D...">
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Certificate
	Chain</label>
	<div class="space-y-2">
	<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="Root CA">
	<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="Intermediate CA (if applicable)">
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Storage
	Location</label>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<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="Key store path or HSM identifier">
	<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>File System</option>
	<option>HSM</option>
	<option>Key Vault</option>
	<option>Database</option>
	</select>
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Associated
	Services/Applications</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., Web Server, Load Balancer, API Gateway">
	</div>

	<div class="border-t border-white/10 pt-6">
	<div class="flex justify-between items-center">
	<p class="text-sm text-gray-400">* Required fields</p>
	<div class="flex 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">
	Clear Form
	</button>
	<button type="submit"
	class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
	Add Certificate
	</button>
	</div>
	</div>
	</div>
	</form>
	</div>
	</div>

	<!-- Certificate Tools -->
	<div class="space-y-6">
	<div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
	<h4 class="font-semibold text-white mb-4">Certificate 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">
	<p class="font-medium text-white">Web Server SSL</p>
	<p class="text-xs text-gray-400">Standard HTTPS certificate</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="font-medium text-white">Wildcard Certificate</p>
	<p class="text-xs text-gray-400">*.domain.com coverage</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="font-medium text-white">Code Signing</p>
	<p class="text-xs text-gray-400">Software signing certificate</p>
	</button>
	</div>
	</div>

	<div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
	<h4 class="font-semibold text-white mb-4">Import Options</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">
	<div class="flex items-center space-x-3">
	<i data-feather="upload" class="w-5 h-5 text-gray-400"></i>
	<span class="text-sm text-white">Import from PEM/DER</span>
	</div>
	</button>
	<button
	class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all">
	<div class="flex items-center space-x-3">
	<i data-feather="file-text" class="w-5 h-5 text-gray-400"></i>
	<span class="text-sm text-white">Parse Certificate</span>
	</div>
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Crypto Materials Tab -->
	<div id="cryptoMaterials" class="tab-content hidden">
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
	<!-- Crypto Material Input Form -->
	<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">Add New Cryptographic Material</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">Material Name/ID
	*</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., API_SIGNING_KEY_PROD">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Material 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>Symmetric Key</option>
	<option>Private Key</option>
	<option>Public Key</option>
	<option>Key Pair</option>
	<option>Secret/Password</option>
	<option>API Key/Token</option>
	<option>Seed/Salt</option>
	<option>IV (Initialization Vector)</option>
	</select>
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Key
	Properties</label>
	<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
	<div>
	<label class="block text-xs text-gray-400 mb-1">Algorithm</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., AES">
	</div>
	<div>
	<label class="block text-xs text-gray-400 mb-1">Key Length
	(bits)</label>
	<input type="number"
	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., 256">
	</div>
	<div>
	<label class="block text-xs text-gray-400 mb-1">Format</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>Raw Binary</option>
	<option>Base64</option>
	<option>Hex</option>
	<option>PEM</option>
	<option>DER</option>
	</select>
	</div>
	</div>
	</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">Purpose/Usage
	*</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>Data Encryption</option>
	<option>Digital Signature</option>
	<option>Authentication</option>
	<option>Key Wrapping</option>
	<option>Session Key</option>
	<option>Master Key</option>
	<option>Key Derivation</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Storage 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>HSM</option>
	<option>Key Management Service</option>
	<option>Secure Enclave</option>
	<option>Software Key Store</option>
	<option>Environment Variable</option>
	<option>Configuration File</option>
	</select>
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Key Lifecycle
	Information</label>
	<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
	<div>
	<label class="block text-xs text-gray-400 mb-1">Created Date</label>
	<input type="date"
	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">
	</div>
	<div>
	<label class="block text-xs text-gray-400 mb-1">Expiry Date</label>
	<input type="date"
	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">
	</div>
	<div>
	<label class="block text-xs text-gray-400 mb-1">Rotation Period</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>30 days</option>
	<option>90 days</option>
	<option>180 days</option>
	<option>1 year</option>
	<option>Custom</option>
	</select>
	</div>
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Access
	Control</label>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<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="Owner/Service Account">
	<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="Access Policy/Role">
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Associated
	Systems</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="List systems/applications using this material">
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-300 mb-2">Compliance &
	Standards</label>
	<div class="space-y-3">
	<div class="flex items-center space-x-3">
	<input type="checkbox" id="fips140"
	class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
	<label for="fips140" class="text-sm text-gray-300">FIPS 140-2/3
	Compliant</label>
	</div>
	<div class="flex items-center space-x-3">
	<input type="checkbox" id="pciCompliant"
	class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
	<label for="pciCompliant" class="text-sm text-gray-300">PCI-DSS
	Compliant</label>
	</div>
	<div class="flex items-center space-x-3">
	<input type="checkbox" id="quantumSafe"
	class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
	<label for="quantumSafe"
	class="text-sm text-gray-300">Quantum-Safe</label>
	</div>
	</div>
	</div>

	<div class="border-t border-white/10 pt-6">
	<div class="flex justify-between items-center">
	<p class="text-sm text-gray-400">* Required fields</p>
	<div class="flex 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">
	Clear Form
	</button>
	<button type="submit"
	class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
	Add Material
	</button>
	</div>
	</div>
	</div>
	</form>
	</div>
	</div>

	<!-- Crypto Material Templates & Info -->
	<div class="space-y-6">
	<div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
	<h4 class="font-semibold text-white mb-4">Common Key Types</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">
	<p class="font-medium text-white">Data Encryption Key</p>
	<p class="text-xs text-gray-400">DEK for data at rest</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="font-medium text-white">Key Encryption Key</p>
	<p class="text-xs text-gray-400">KEK for key wrapping</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="font-medium text-white">API Authentication</p>
	<p class="text-xs text-gray-400">JWT signing key</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="font-medium text-white">Database Encryption</p>
	<p class="text-xs text-gray-400">TDE master key</p>
	</button>
	</div>
	</div>

	<div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
	<h4 class="font-semibold text-white mb-4">Best Practices</h4>
	<div class="space-y-3">
	<div class="flex items-start space-x-2">
	<i data-feather="check-circle" class="w-4 h-4 text-green-400 mt-0.5"></i>
	<p class="text-sm text-gray-300">Use HSMs for high-value keys</p>
	</div>
	<div class="flex items-start space-x-2">
	<i data-feather="check-circle" class="w-4 h-4 text-green-400 mt-0.5"></i>
	<p class="text-sm text-gray-300">Implement key rotation policies</p>
	</div>
	<div class="flex items-start space-x-2">
	<i data-feather="check-circle" class="w-4 h-4 text-green-400 mt-0.5"></i>
	<p class="text-sm text-gray-300">Maintain key versioning</p>
	</div>
	<div class="flex items-start space-x-2">
	<i data-feather="check-circle" class="w-4 h-4 text-green-400 mt-0.5"></i>
	<p class="text-sm text-gray-300">Document key purposes</p>
	</div>
	</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[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 and refresh AOS
	feather.replace();
	AOS.refresh();
	}

	// Select all checkbox functionality
	const selectAll = document.querySelector('thead input[type="checkbox"]');
	const rowCheckboxes = document.querySelectorAll('tbody input[type="checkbox"]');

	if (selectAll) {
	selectAll.addEventListener('change', function () {
	rowCheckboxes.forEach(checkbox => {
	checkbox.checked = this.checked;
	});
	});
	}

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

	// Add template auto-fill functionality
	document.addEventListener('DOMContentLoaded', function () {
	// Algorithm templates
	const algorithmTemplates = {
	'AES-256-GCM': {
	name: 'AES-256-GCM',
	type: 'Symmetric Encryption',
	keySize: '256',
	mode: 'GCM',
	quantumStatus: 'Quantum Safe'
	},
	'RSA-2048': {
	name: 'RSA-2048',
	type: 'Asymmetric Encryption',
	keySize: '2048',
	mode: '',
	quantumStatus: 'Quantum Vulnerable'
	},
	'SHA-256': {
	name: 'SHA-256',
	type: 'Hash Function',
	keySize: '',
	mode: '',
	quantumStatus: 'Quantum Safe'
	},
	'ECDSA-P256': {
	name: 'ECDSA-P256',
	type: 'Digital Signature',
	keySize: '256',
	mode: '',
	quantumStatus: 'Quantum Vulnerable'
	}
	};

	// Handle template clicks
	document.querySelectorAll('.card-hover button').forEach(button => {
	button.addEventListener('click', function () {
	const templateName = this.querySelector('.font-medium').textContent;
	if (algorithmTemplates[templateName]) {
	// Fill form with template data
	console.log('Filling form with template:', templateName);
	}
	});
	});
	});
	</script>
	</body>

	</html>