Hugging Face's logo

Spaces:
haramb3
/
cbom-builder
Running

App Files Community
gpetrizey commited on
Commit
61e0718
·
1 Parent(s): c714b7b

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

Browse files
Files changed (6) hide show
  1. analytics.html +115 -62
  2. assets.html +274 -163
  3. cboms.html +230 -127
  4. dashboard.html +2 -2
  5. index.html +5 -7
  6. integrations.html +25 -17
analytics.html CHANGED
@@ -4,7 +4,7 @@
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Analytics Dashboard - EY Quantum Safe</title>
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
@@ -224,7 +224,7 @@
224
  class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
225
  <i data-feather="shield" class="text-gray-900 w-5 h-5"></i>
226
  </div>
227
- <h1 class="text-xl font-bold">EY <span class="gradient-text">Quantum Safe</span></h1>
228
  </a>
229
  </div>
230
 
@@ -307,10 +307,14 @@
307
  <div class="card-hover rounded-xl mb-6">
308
  <div class="flex border-b border-white/10 overflow-x-auto">
309
  <button class="px-6 py-4 font-medium tab-active" onclick="showTab('overview')">Overview</button>
310
- <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('compliance')">Compliance Frameworks</button>
311
- <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('rules')">Custom Rules</button>
312
- <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('reports')">Reports</button>
313
- <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('trends')">Trends & Insights</button>
 
 
 
 
314
  </div>
315
  </div>
316
 
@@ -350,7 +354,8 @@
350
  <span>72%</span>
351
  </div>
352
  <div class="w-full bg-white/10 rounded-full h-2">
353
- <div class="bg-red-500 h-2 rounded-full progress-bar glow-effect" style="width: 72%"></div>
 
354
  </div>
355
  </div>
356
  </div>
@@ -429,7 +434,8 @@
429
  <div>
430
  <div class="flex justify-between items-center mb-2">
431
  <div class="flex items-center space-x-2">
432
- <div class="w-8 h-8 bg-blue-400/20 text-blue-400 rounded flex items-center justify-center">
 
433
  <span class="text-xs font-bold">N</span>
434
  </div>
435
  <span class="text-white font-medium">NIST 800-53</span>
@@ -445,7 +451,8 @@
445
  <div>
446
  <div class="flex justify-between items-center mb-2">
447
  <div class="flex items-center space-x-2">
448
- <div class="w-8 h-8 bg-green-400/20 text-green-400 rounded flex items-center justify-center">
 
449
  <span class="text-xs font-bold">I</span>
450
  </div>
451
  <span class="text-white font-medium">ISO/IEC 27001</span>
@@ -461,7 +468,8 @@
461
  <div>
462
  <div class="flex justify-between items-center mb-2">
463
  <div class="flex items-center space-x-2">
464
- <div class="w-8 h-8 bg-purple-400/20 text-purple-400 rounded flex items-center justify-center">
 
465
  <span class="text-xs font-bold">P</span>
466
  </div>
467
  <span class="text-white font-medium">PCI-DSS</span>
@@ -477,7 +485,8 @@
477
  <div>
478
  <div class="flex justify-between items-center mb-2">
479
  <div class="flex items-center space-x-2">
480
- <div class="w-8 h-8 bg-yellow-400/20 text-yellow-400 rounded flex items-center justify-center">
 
481
  <span class="text-xs font-bold">C</span>
482
  </div>
483
  <span class="text-white font-medium">Custom - Quantum Ready</span>
@@ -602,12 +611,12 @@
602
  <div class="text-center mb-4">
603
  <div class="relative inline-flex items-center justify-center w-32 h-32">
604
  <svg class="w-32 h-32 transform -rotate-90">
605
- <circle cx="64" cy="64" r="56" stroke="rgba(255, 255, 255, 0.1)" stroke-width="8"
606
- fill="none">
607
  </circle>
608
  <circle cx="64" cy="64" r="56" stroke="#f59e0b" stroke-width="8" fill="none"
609
- stroke-dasharray="351.86" stroke-dashoffset="105.56" stroke-linecap="round"
610
- class="glow-effect">
611
  </circle>
612
  </svg>
613
  <div class="absolute text-center">
@@ -722,10 +731,12 @@
722
  <div class="lg:col-span-2">
723
  <div class="card-hover rounded-xl p-6" data-aos="fade-up">
724
  <h3 class="font-semibold text-lg text-white mb-6">Compliance Framework Management</h3>
725
-
726
  <div class="mb-6">
727
  <label class="block text-sm font-medium text-gray-300 mb-2">Select Framework</label>
728
- <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()">
 
 
729
  <option value="">Choose a framework...</option>
730
  <option value="nist">NIST 800-53 - Security and Privacy Controls</option>
731
  <option value="iso27001">ISO/IEC 27001 - Information Security</option>
@@ -750,18 +761,24 @@
750
  <h4 class="font-semibold text-white mb-4">Import Custom Framework</h4>
751
  <div class="space-y-4">
752
  <div>
753
- <label class="block text-sm font-medium text-gray-300 mb-2">Framework Name</label>
754
- <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">
 
 
 
755
  </div>
756
  <div>
757
- <label class="block text-sm font-medium text-gray-300 mb-2">Upload Rules File</label>
758
- <div class="border-2 border-dashed border-white/20 rounded-lg p-6 text-center hover:border-yellow-400 transition-all">
 
 
759
  <i data-feather="upload" class="w-8 h-8 mx-auto text-gray-400 mb-2"></i>
760
  <p class="text-sm text-gray-300">Drop your JSON/YAML file here</p>
761
  <p class="text-xs text-gray-500 mt-1">or click to browse</p>
762
  </div>
763
  </div>
764
- <button class="w-full px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
 
765
  Import Framework
766
  </button>
767
  </div>
@@ -772,9 +789,11 @@
772
  <div class="card-hover rounded-xl p-6 mt-6" data-aos="fade-up" data-aos-delay="100">
773
  <h3 class="font-semibold text-lg text-white mb-4">Active Compliance Checks</h3>
774
  <div class="space-y-3">
775
- <div class="flex items-center justify-between p-3 border border-white/20 rounded-lg">
 
776
  <div class="flex items-center space-x-3">
777
- <input type="checkbox" checked class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
 
778
  <div>
779
  <p class="font-medium text-white">NIST 800-53</p>
780
  <p class="text-xs text-gray-400">Last checked: 2 hours ago</p>
@@ -782,9 +801,11 @@
782
  </div>
783
  <button class="text-sm text-blue-400 hover:text-blue-300">Run Check</button>
784
  </div>
785
- <div class="flex items-center justify-between p-3 border border-white/20 rounded-lg">
 
786
  <div class="flex items-center space-x-3">
787
- <input type="checkbox" checked class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
 
788
  <div>
789
  <p class="font-medium text-white">ISO/IEC 27001</p>
790
  <p class="text-xs text-gray-400">Last checked: 1 day ago</p>
@@ -801,7 +822,8 @@
801
  <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
802
  <h4 class="font-semibold text-white mb-4">Framework Templates</h4>
803
  <div class="space-y-3">
804
- <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">
 
805
  <div class="flex items-center justify-between">
806
  <div>
807
  <p class="font-medium text-white">NIST Cryptographic Controls</p>
@@ -810,7 +832,8 @@
810
  <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
811
  </div>
812
  </button>
813
- <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">
 
814
  <div class="flex items-center justify-between">
815
  <div>
816
  <p class="font-medium text-white">Quantum-Safe Template</p>
@@ -819,7 +842,8 @@
819
  <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
820
  </div>
821
  </button>
822
- <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">
 
823
  <div class="flex items-center justify-between">
824
  <div>
825
  <p class="font-medium text-white">Minimal Security</p>
@@ -863,17 +887,20 @@
863
  <div class="lg:col-span-2">
864
  <div class="card-hover rounded-xl p-6" data-aos="fade-up">
865
  <h3 class="font-semibold text-lg text-white mb-6">Custom Rule Builder</h3>
866
-
867
  <form class="space-y-6">
868
  <div>
869
  <label class="block text-sm font-medium text-gray-300 mb-2">Rule Name *</label>
870
- <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">
 
 
871
  </div>
872
 
873
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
874
  <div>
875
  <label class="block text-sm font-medium text-gray-300 mb-2">Category</label>
876
- <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">
 
877
  <option>Cryptographic Algorithms</option>
878
  <option>Key Management</option>
879
  <option>Protocol Security</option>
@@ -883,7 +910,8 @@
883
  </div>
884
  <div>
885
  <label class="block text-sm font-medium text-gray-300 mb-2">Severity</label>
886
- <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">
 
887
  <option>Critical</option>
888
  <option>High</option>
889
  <option>Medium</option>
@@ -894,33 +922,41 @@
894
  </div>
895
 
896
  <div>
897
- <label class="block text-sm font-medium text-gray-300 mb-2">Rule Description</label>
898
- <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>
 
 
 
899
  </div>
900
 
901
  <div>
902
  <label class="block text-sm font-medium text-gray-300 mb-2">Rule Logic</label>
903
  <div class="space-y-3">
904
- <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">
 
905
  <option>When asset type is...</option>
906
  <option>When algorithm equals...</option>
907
  <option>When key length is less than...</option>
908
  <option>When protocol version is...</option>
909
  <option>When certificate expires in...</option>
910
  </select>
911
-
912
  <div class="flex items-center space-x-2">
913
- <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">
 
914
  <option>equals</option>
915
  <option>not equals</option>
916
  <option>contains</option>
917
  <option>less than</option>
918
  <option>greater than</option>
919
  </select>
920
- <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">
 
 
921
  </div>
922
-
923
- <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">
 
924
  <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
925
  Add Condition
926
  </button>
@@ -928,15 +964,21 @@
928
  </div>
929
 
930
  <div>
931
- <label class="block text-sm font-medium text-gray-300 mb-2">Remediation Guidance</label>
932
- <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>
 
 
 
 
933
  </div>
934
 
935
  <div class="flex justify-end space-x-3">
936
- <button type="button" class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
 
937
  Test Rule
938
  </button>
939
- <button type="submit" class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
 
940
  Save Rule
941
  </button>
942
  </div>
@@ -944,7 +986,8 @@
944
  </div>
945
 
946
  <!-- Existing Custom Rules -->
947
- <div class="card-hover rounded-xl overflow-hidden mt-6" data-aos="fade-up" data-aos-delay="100">
 
948
  <div class="p-6 border-b border-white/10">
949
  <h3 class="font-semibold text-lg text-white">Custom Rules</h3>
950
  </div>
@@ -953,9 +996,11 @@
953
  <div class="p-4 border border-white/20 rounded-lg hover:bg-white/5">
954
  <div class="flex items-center justify-between mb-2">
955
  <h4 class="font-medium text-white">RSA Key Size Check</h4>
956
- <span class="px-2 py-1 text-xs bg-red-400/20 text-red-400 rounded-full">Critical</span>
 
957
  </div>
958
- <p class="text-sm text-gray-400 mb-2">Ensures RSA keys are at least 2048 bits</p>
 
959
  <div class="flex items-center space-x-4 text-xs">
960
  <span class="text-gray-500">Category: Key Management</span>
961
  <button class="text-blue-400 hover:text-blue-300">Edit</button>
@@ -966,9 +1011,11 @@
966
  <div class="p-4 border border-white/20 rounded-lg hover:bg-white/5">
967
  <div class="flex items-center justify-between mb-2">
968
  <h4 class="font-medium text-white">Quantum-Safe Algorithm Check</h4>
969
- <span class="px-2 py-1 text-xs bg-yellow-400/20 text-yellow-400 rounded-full">High</span>
 
970
  </div>
971
- <p class="text-sm text-gray-400 mb-2">Identifies algorithms vulnerable to quantum attacks</p>
 
972
  <div class="flex items-center space-x-4 text-xs">
973
  <span class="text-gray-500">Category: Quantum Readiness</span>
974
  <button class="text-blue-400 hover:text-blue-300">Edit</button>
@@ -985,15 +1032,18 @@
985
  <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
986
  <h4 class="font-semibold text-white mb-4">Rule Templates</h4>
987
  <div class="space-y-2">
988
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
989
  <p class="text-sm font-medium text-white">Weak Algorithm Detection</p>
990
  <p class="text-xs text-gray-400">Identify deprecated algorithms</p>
991
  </button>
992
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
993
  <p class="text-sm font-medium text-white">Certificate Expiry Check</p>
994
  <p class="text-xs text-gray-400">Alert on expiring certificates</p>
995
  </button>
996
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
997
  <p class="text-sm font-medium text-white">PQC Migration Readiness</p>
998
  <p class="text-xs text-gray-400">Check quantum-safe status</p>
999
  </button>
@@ -1003,15 +1053,18 @@
1003
  <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="300">
1004
  <h4 class="font-semibold text-white mb-4">Import/Export Rules</h4>
1005
  <div class="space-y-3">
1006
- <button class="w-full px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
 
1007
  <i data-feather="upload" class="w-4 h-4 inline mr-2"></i>
1008
  Import Rules
1009
  </button>
1010
- <button class="w-full px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
 
1011
  <i data-feather="download" class="w-4 h-4 inline mr-2"></i>
1012
  Export All Rules
1013
  </button>
1014
- <button class="w-full px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
 
1015
  <i data-feather="share-2" class="w-4 h-4 inline mr-2"></i>
1016
  Share Rules
1017
  </button>
@@ -1067,20 +1120,20 @@
1067
  document.querySelectorAll('.tab-content').forEach(content => {
1068
  content.classList.add('hidden');
1069
  });
1070
-
1071
  // Remove active class from all tabs
1072
  document.querySelectorAll('.flex button[onclick^="showTab"]').forEach(button => {
1073
  button.classList.remove('tab-active');
1074
  button.classList.add('text-gray-400', 'hover:text-gray-200');
1075
  });
1076
-
1077
  // Show selected tab content
1078
  document.getElementById(tabName).classList.remove('hidden');
1079
-
1080
  // Add active class to clicked tab
1081
  event.target.classList.add('tab-active');
1082
  event.target.classList.remove('text-gray-400', 'hover:text-gray-200');
1083
-
1084
  // Re-render feather icons
1085
  feather.replace();
1086
  AOS.refresh();
@@ -1091,14 +1144,14 @@
1091
  const select = document.getElementById('frameworkSelect');
1092
  const rulesDiv = document.getElementById('frameworkRules');
1093
  const customDiv = document.getElementById('customFrameworkImport');
1094
-
1095
  if (select.value === 'custom') {
1096
  rulesDiv.classList.add('hidden');
1097
  customDiv.classList.remove('hidden');
1098
  } else if (select.value) {
1099
  customDiv.classList.add('hidden');
1100
  rulesDiv.classList.remove('hidden');
1101
-
1102
  // Load framework-specific rules
1103
  const rulesContainer = rulesDiv.querySelector('.space-y-3');
1104
  rulesContainer.innerHTML = getFrameworkRules(select.value);
 
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Analytics Dashboard - Quantum Safe</title>
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 
224
  class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
225
  <i data-feather="shield" class="text-gray-900 w-5 h-5"></i>
226
  </div>
227
+ <h1 class="text-xl font-bold"><span class="gradient-text">Quantum Safe</span></h1>
228
  </a>
229
  </div>
230
 
 
307
  <div class="card-hover rounded-xl mb-6">
308
  <div class="flex border-b border-white/10 overflow-x-auto">
309
  <button class="px-6 py-4 font-medium tab-active" onclick="showTab('overview')">Overview</button>
310
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"
311
+ onclick="showTab('compliance')">Compliance Frameworks</button>
312
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"
313
+ onclick="showTab('rules')">Custom Rules</button>
314
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"
315
+ onclick="showTab('reports')">Reports</button>
316
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"
317
+ onclick="showTab('trends')">Trends & Insights</button>
318
  </div>
319
  </div>
320
 
 
354
  <span>72%</span>
355
  </div>
356
  <div class="w-full bg-white/10 rounded-full h-2">
357
+ <div class="bg-red-500 h-2 rounded-full progress-bar glow-effect"
358
+ style="width: 72%"></div>
359
  </div>
360
  </div>
361
  </div>
 
434
  <div>
435
  <div class="flex justify-between items-center mb-2">
436
  <div class="flex items-center space-x-2">
437
+ <div
438
+ class="w-8 h-8 bg-blue-400/20 text-blue-400 rounded flex items-center justify-center">
439
  <span class="text-xs font-bold">N</span>
440
  </div>
441
  <span class="text-white font-medium">NIST 800-53</span>
 
451
  <div>
452
  <div class="flex justify-between items-center mb-2">
453
  <div class="flex items-center space-x-2">
454
+ <div
455
+ class="w-8 h-8 bg-green-400/20 text-green-400 rounded flex items-center justify-center">
456
  <span class="text-xs font-bold">I</span>
457
  </div>
458
  <span class="text-white font-medium">ISO/IEC 27001</span>
 
468
  <div>
469
  <div class="flex justify-between items-center mb-2">
470
  <div class="flex items-center space-x-2">
471
+ <div
472
+ class="w-8 h-8 bg-purple-400/20 text-purple-400 rounded flex items-center justify-center">
473
  <span class="text-xs font-bold">P</span>
474
  </div>
475
  <span class="text-white font-medium">PCI-DSS</span>
 
485
  <div>
486
  <div class="flex justify-between items-center mb-2">
487
  <div class="flex items-center space-x-2">
488
+ <div
489
+ class="w-8 h-8 bg-yellow-400/20 text-yellow-400 rounded flex items-center justify-center">
490
  <span class="text-xs font-bold">C</span>
491
  </div>
492
  <span class="text-white font-medium">Custom - Quantum Ready</span>
 
611
  <div class="text-center mb-4">
612
  <div class="relative inline-flex items-center justify-center w-32 h-32">
613
  <svg class="w-32 h-32 transform -rotate-90">
614
+ <circle cx="64" cy="64" r="56" stroke="rgba(255, 255, 255, 0.1)"
615
+ stroke-width="8" fill="none">
616
  </circle>
617
  <circle cx="64" cy="64" r="56" stroke="#f59e0b" stroke-width="8" fill="none"
618
+ stroke-dasharray="351.86" stroke-dashoffset="105.56"
619
+ stroke-linecap="round" class="glow-effect">
620
  </circle>
621
  </svg>
622
  <div class="absolute text-center">
 
731
  <div class="lg:col-span-2">
732
  <div class="card-hover rounded-xl p-6" data-aos="fade-up">
733
  <h3 class="font-semibold text-lg text-white mb-6">Compliance Framework Management</h3>
734
+
735
  <div class="mb-6">
736
  <label class="block text-sm font-medium text-gray-300 mb-2">Select Framework</label>
737
+ <select id="frameworkSelect"
738
+ 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"
739
+ onchange="loadFrameworkRules()">
740
  <option value="">Choose a framework...</option>
741
  <option value="nist">NIST 800-53 - Security and Privacy Controls</option>
742
  <option value="iso27001">ISO/IEC 27001 - Information Security</option>
 
761
  <h4 class="font-semibold text-white mb-4">Import Custom Framework</h4>
762
  <div class="space-y-4">
763
  <div>
764
+ <label class="block text-sm font-medium text-gray-300 mb-2">Framework
765
+ Name</label>
766
+ <input type="text"
767
+ 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"
768
+ placeholder="e.g., Quantum Security Framework">
769
  </div>
770
  <div>
771
+ <label class="block text-sm font-medium text-gray-300 mb-2">Upload Rules
772
+ File</label>
773
+ <div
774
+ class="border-2 border-dashed border-white/20 rounded-lg p-6 text-center hover:border-yellow-400 transition-all">
775
  <i data-feather="upload" class="w-8 h-8 mx-auto text-gray-400 mb-2"></i>
776
  <p class="text-sm text-gray-300">Drop your JSON/YAML file here</p>
777
  <p class="text-xs text-gray-500 mt-1">or click to browse</p>
778
  </div>
779
  </div>
780
+ <button
781
+ class="w-full px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
782
  Import Framework
783
  </button>
784
  </div>
 
789
  <div class="card-hover rounded-xl p-6 mt-6" data-aos="fade-up" data-aos-delay="100">
790
  <h3 class="font-semibold text-lg text-white mb-4">Active Compliance Checks</h3>
791
  <div class="space-y-3">
792
+ <div
793
+ class="flex items-center justify-between p-3 border border-white/20 rounded-lg">
794
  <div class="flex items-center space-x-3">
795
+ <input type="checkbox" checked
796
+ class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
797
  <div>
798
  <p class="font-medium text-white">NIST 800-53</p>
799
  <p class="text-xs text-gray-400">Last checked: 2 hours ago</p>
 
801
  </div>
802
  <button class="text-sm text-blue-400 hover:text-blue-300">Run Check</button>
803
  </div>
804
+ <div
805
+ class="flex items-center justify-between p-3 border border-white/20 rounded-lg">
806
  <div class="flex items-center space-x-3">
807
+ <input type="checkbox" checked
808
+ class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
809
  <div>
810
  <p class="font-medium text-white">ISO/IEC 27001</p>
811
  <p class="text-xs text-gray-400">Last checked: 1 day ago</p>
 
822
  <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
823
  <h4 class="font-semibold text-white mb-4">Framework Templates</h4>
824
  <div class="space-y-3">
825
+ <button onclick="loadFrameworkTemplate('nist')"
826
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
827
  <div class="flex items-center justify-between">
828
  <div>
829
  <p class="font-medium text-white">NIST Cryptographic Controls</p>
 
832
  <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
833
  </div>
834
  </button>
835
+ <button onclick="loadFrameworkTemplate('quantum')"
836
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
837
  <div class="flex items-center justify-between">
838
  <div>
839
  <p class="font-medium text-white">Quantum-Safe Template</p>
 
842
  <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
843
  </div>
844
  </button>
845
+ <button onclick="loadFrameworkTemplate('minimal')"
846
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
847
  <div class="flex items-center justify-between">
848
  <div>
849
  <p class="font-medium text-white">Minimal Security</p>
 
887
  <div class="lg:col-span-2">
888
  <div class="card-hover rounded-xl p-6" data-aos="fade-up">
889
  <h3 class="font-semibold text-lg text-white mb-6">Custom Rule Builder</h3>
890
+
891
  <form class="space-y-6">
892
  <div>
893
  <label class="block text-sm font-medium text-gray-300 mb-2">Rule Name *</label>
894
+ <input type="text"
895
+ 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"
896
+ placeholder="e.g., Quantum-Safe Key Length Check">
897
  </div>
898
 
899
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
900
  <div>
901
  <label class="block text-sm font-medium text-gray-300 mb-2">Category</label>
902
+ <select
903
+ 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">
904
  <option>Cryptographic Algorithms</option>
905
  <option>Key Management</option>
906
  <option>Protocol Security</option>
 
910
  </div>
911
  <div>
912
  <label class="block text-sm font-medium text-gray-300 mb-2">Severity</label>
913
+ <select
914
+ 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">
915
  <option>Critical</option>
916
  <option>High</option>
917
  <option>Medium</option>
 
922
  </div>
923
 
924
  <div>
925
+ <label class="block text-sm font-medium text-gray-300 mb-2">Rule
926
+ Description</label>
927
+ <textarea
928
+ 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"
929
+ rows="3" placeholder="Describe what this rule checks..."></textarea>
930
  </div>
931
 
932
  <div>
933
  <label class="block text-sm font-medium text-gray-300 mb-2">Rule Logic</label>
934
  <div class="space-y-3">
935
+ <select
936
+ 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">
937
  <option>When asset type is...</option>
938
  <option>When algorithm equals...</option>
939
  <option>When key length is less than...</option>
940
  <option>When protocol version is...</option>
941
  <option>When certificate expires in...</option>
942
  </select>
943
+
944
  <div class="flex items-center space-x-2">
945
+ <select
946
+ 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">
947
  <option>equals</option>
948
  <option>not equals</option>
949
  <option>contains</option>
950
  <option>less than</option>
951
  <option>greater than</option>
952
  </select>
953
+ <input type="text"
954
+ 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"
955
+ placeholder="Value">
956
  </div>
957
+
958
+ <button type="button"
959
+ 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">
960
  <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
961
  Add Condition
962
  </button>
 
964
  </div>
965
 
966
  <div>
967
+ <label class="block text-sm font-medium text-gray-300 mb-2">Remediation
968
+ Guidance</label>
969
+ <textarea
970
+ 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"
971
+ rows="2"
972
+ placeholder="Provide guidance on how to fix this issue..."></textarea>
973
  </div>
974
 
975
  <div class="flex justify-end space-x-3">
976
+ <button type="button"
977
+ class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
978
  Test Rule
979
  </button>
980
+ <button type="submit"
981
+ class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
982
  Save Rule
983
  </button>
984
  </div>
 
986
  </div>
987
 
988
  <!-- Existing Custom Rules -->
989
+ <div class="card-hover rounded-xl overflow-hidden mt-6" data-aos="fade-up"
990
+ data-aos-delay="100">
991
  <div class="p-6 border-b border-white/10">
992
  <h3 class="font-semibold text-lg text-white">Custom Rules</h3>
993
  </div>
 
996
  <div class="p-4 border border-white/20 rounded-lg hover:bg-white/5">
997
  <div class="flex items-center justify-between mb-2">
998
  <h4 class="font-medium text-white">RSA Key Size Check</h4>
999
+ <span
1000
+ class="px-2 py-1 text-xs bg-red-400/20 text-red-400 rounded-full">Critical</span>
1001
  </div>
1002
+ <p class="text-sm text-gray-400 mb-2">Ensures RSA keys are at least 2048
1003
+ bits</p>
1004
  <div class="flex items-center space-x-4 text-xs">
1005
  <span class="text-gray-500">Category: Key Management</span>
1006
  <button class="text-blue-400 hover:text-blue-300">Edit</button>
 
1011
  <div class="p-4 border border-white/20 rounded-lg hover:bg-white/5">
1012
  <div class="flex items-center justify-between mb-2">
1013
  <h4 class="font-medium text-white">Quantum-Safe Algorithm Check</h4>
1014
+ <span
1015
+ class="px-2 py-1 text-xs bg-yellow-400/20 text-yellow-400 rounded-full">High</span>
1016
  </div>
1017
+ <p class="text-sm text-gray-400 mb-2">Identifies algorithms vulnerable to
1018
+ quantum attacks</p>
1019
  <div class="flex items-center space-x-4 text-xs">
1020
  <span class="text-gray-500">Category: Quantum Readiness</span>
1021
  <button class="text-blue-400 hover:text-blue-300">Edit</button>
 
1032
  <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
1033
  <h4 class="font-semibold text-white mb-4">Rule Templates</h4>
1034
  <div class="space-y-2">
1035
+ <button
1036
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
1037
  <p class="text-sm font-medium text-white">Weak Algorithm Detection</p>
1038
  <p class="text-xs text-gray-400">Identify deprecated algorithms</p>
1039
  </button>
1040
+ <button
1041
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
1042
  <p class="text-sm font-medium text-white">Certificate Expiry Check</p>
1043
  <p class="text-xs text-gray-400">Alert on expiring certificates</p>
1044
  </button>
1045
+ <button
1046
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
1047
  <p class="text-sm font-medium text-white">PQC Migration Readiness</p>
1048
  <p class="text-xs text-gray-400">Check quantum-safe status</p>
1049
  </button>
 
1053
  <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="300">
1054
  <h4 class="font-semibold text-white mb-4">Import/Export Rules</h4>
1055
  <div class="space-y-3">
1056
+ <button
1057
+ class="w-full px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
1058
  <i data-feather="upload" class="w-4 h-4 inline mr-2"></i>
1059
  Import Rules
1060
  </button>
1061
+ <button
1062
+ class="w-full px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
1063
  <i data-feather="download" class="w-4 h-4 inline mr-2"></i>
1064
  Export All Rules
1065
  </button>
1066
+ <button
1067
+ class="w-full px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
1068
  <i data-feather="share-2" class="w-4 h-4 inline mr-2"></i>
1069
  Share Rules
1070
  </button>
 
1120
  document.querySelectorAll('.tab-content').forEach(content => {
1121
  content.classList.add('hidden');
1122
  });
1123
+
1124
  // Remove active class from all tabs
1125
  document.querySelectorAll('.flex button[onclick^="showTab"]').forEach(button => {
1126
  button.classList.remove('tab-active');
1127
  button.classList.add('text-gray-400', 'hover:text-gray-200');
1128
  });
1129
+
1130
  // Show selected tab content
1131
  document.getElementById(tabName).classList.remove('hidden');
1132
+
1133
  // Add active class to clicked tab
1134
  event.target.classList.add('tab-active');
1135
  event.target.classList.remove('text-gray-400', 'hover:text-gray-200');
1136
+
1137
  // Re-render feather icons
1138
  feather.replace();
1139
  AOS.refresh();
 
1144
  const select = document.getElementById('frameworkSelect');
1145
  const rulesDiv = document.getElementById('frameworkRules');
1146
  const customDiv = document.getElementById('customFrameworkImport');
1147
+
1148
  if (select.value === 'custom') {
1149
  rulesDiv.classList.add('hidden');
1150
  customDiv.classList.remove('hidden');
1151
  } else if (select.value) {
1152
  customDiv.classList.add('hidden');
1153
  rulesDiv.classList.remove('hidden');
1154
+
1155
  // Load framework-specific rules
1156
  const rulesContainer = rulesDiv.querySelector('.space-y-3');
1157
  rulesContainer.innerHTML = getFrameworkRules(select.value);
assets.html CHANGED
@@ -4,7 +4,7 @@
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Assets Management - EY Quantum Safe</title>
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
@@ -120,12 +120,15 @@
120
  transform: translateY(100vh) translateX(0px);
121
  opacity: 0;
122
  }
 
123
  10% {
124
  opacity: 0.7;
125
  }
 
126
  90% {
127
  opacity: 0.7;
128
  }
 
129
  100% {
130
  transform: translateY(-100px) translateX(100px);
131
  opacity: 0;
@@ -178,10 +181,11 @@
178
  <div class="sidebar text-white w-64 flex-shrink-0 flex flex-col relative z-10">
179
  <div class="p-4 border-b border-white/10">
180
  <a href="index.html" class="flex items-center space-x-3 hover:opacity-80 transition-opacity">
181
- <div class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
 
182
  <i data-feather="shield" class="text-gray-900 w-5 h-5"></i>
183
  </div>
184
- <h1 class="text-xl font-bold">EY <span class="gradient-text">Quantum Safe</span></h1>
185
  </a>
186
  </div>
187
 
@@ -201,7 +205,8 @@
201
  <i data-feather="file-text" class="w-5 h-5"></i>
202
  <span>CBOMs</span>
203
  </a>
204
- <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">
 
205
  <i data-feather="lock" class="w-5 h-5"></i>
206
  <span>Assets</span>
207
  </a>
@@ -219,11 +224,12 @@
219
 
220
  <div class="p-4 border-t border-white/10">
221
  <div class="flex items-center space-x-3">
222
- <div class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-600 to-gray-700 flex items-center justify-center">
 
223
  <i data-feather="user" class="text-gray-300 w-5 h-5"></i>
224
  </div>
225
  <div>
226
- <p class="text-sm font-medium">Guillem Pétriz</p>
227
  <p class="text-xs text-gray-400">Administrator</p>
228
  </div>
229
  </div>
@@ -233,7 +239,8 @@
233
  <!-- Main Content -->
234
  <div class="flex-1 flex flex-col overflow-hidden relative z-10">
235
  <!-- Top Navigation -->
236
- <header class="backdrop-filter backdrop-blur-lg bg-white/5 border-b border-white/10 flex items-center justify-between p-4">
 
237
  <div class="flex items-center space-x-4">
238
  <button class="md:hidden text-white">
239
  <i data-feather="menu"></i>
@@ -248,8 +255,7 @@
248
  <input type="text" placeholder="Search assets..."
249
  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">
250
  </div>
251
- <button
252
- class="px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
253
  <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
254
  Add Asset
255
  </button>
@@ -262,10 +268,14 @@
262
  <div class="card-hover rounded-xl mb-6">
263
  <div class="flex border-b border-white/10 overflow-x-auto">
264
  <button class="px-6 py-4 font-medium tab-active" onclick="showTab('assetList')">Asset List</button>
265
- <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('algorithms')">Algorithms</button>
266
- <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('protocols')">Protocols</button>
267
- <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('certificates')">Certificates</button>
268
- <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('cryptoMaterials')">Crypto Materials</button>
 
 
 
 
269
  </div>
270
  </div>
271
 
@@ -436,7 +446,8 @@
436
  <span
437
  class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Secure</span>
438
  </td>
439
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Enterprise Web App</td>
 
440
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
441
  <div class="flex space-x-2">
442
  <button class="text-blue-400 hover:text-blue-300">
@@ -479,7 +490,8 @@
479
  <span
480
  class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Secure</span>
481
  </td>
482
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Payment Gateway</td>
 
483
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
484
  <div class="flex space-x-2">
485
  <button class="text-blue-400 hover:text-blue-300">
@@ -511,7 +523,8 @@
511
  </td>
512
  <td class="px-6 py-4 whitespace-nowrap">
513
  <span
514
- class="px-2 py-1 text-xs font-medium bg-gray-400/20 text-gray-400 rounded-full">Crypto Material</span>
 
515
  </td>
516
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">1.0</td>
517
  <td class="px-6 py-4 whitespace-nowrap">
@@ -554,7 +567,8 @@
554
  </td>
555
  <td class="px-6 py-4 whitespace-nowrap">
556
  <span
557
- class="px-2 py-1 text-xs font-medium bg-gray-400/20 text-gray-400 rounded-full">Crypto Material</span>
 
558
  </td>
559
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">2.1</td>
560
  <td class="px-6 py-4 whitespace-nowrap">
@@ -565,7 +579,8 @@
565
  <span
566
  class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Secure</span>
567
  </td>
568
- <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Enterprise Web App</td>
 
569
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
570
  <div class="flex space-x-2">
571
  <button class="text-blue-400 hover:text-blue-300">
@@ -620,18 +635,21 @@
620
  <div class="lg:col-span-2">
621
  <div class="card-hover rounded-xl p-6" data-aos="fade-up">
622
  <h3 class="font-semibold text-lg text-white mb-6">Add New Algorithm</h3>
623
-
624
  <form class="space-y-6">
625
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
626
  <div>
627
- <label class="block text-sm font-medium text-gray-300 mb-2">Algorithm Name *</label>
628
- <input type="text"
 
629
  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"
630
  placeholder="e.g., AES-256-GCM">
631
  </div>
632
  <div>
633
- <label class="block text-sm font-medium text-gray-300 mb-2">Algorithm Type *</label>
634
- <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">
 
 
635
  <option>Symmetric Encryption</option>
636
  <option>Asymmetric Encryption</option>
637
  <option>Hash Function</option>
@@ -644,37 +662,41 @@
644
 
645
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
646
  <div>
647
- <label class="block text-sm font-medium text-gray-300 mb-2">Key Size (bits)</label>
648
- <input type="number"
 
649
  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"
650
  placeholder="e.g., 256">
651
  </div>
652
  <div>
653
- <label class="block text-sm font-medium text-gray-300 mb-2">Mode of Operation</label>
654
- <input type="text"
 
655
  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"
656
  placeholder="e.g., GCM, CBC, CTR">
657
  </div>
658
  </div>
659
 
660
  <div>
661
- <label class="block text-sm font-medium text-gray-300 mb-2">Implementation Details</label>
 
662
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
663
  <div>
664
  <label class="block text-xs text-gray-400 mb-1">Library/Provider</label>
665
- <input type="text"
666
  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"
667
  placeholder="e.g., OpenSSL">
668
  </div>
669
  <div>
670
  <label class="block text-xs text-gray-400 mb-1">Version</label>
671
- <input type="text"
672
  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"
673
  placeholder="e.g., 3.0.11">
674
  </div>
675
  <div>
676
  <label class="block text-xs text-gray-400 mb-1">FIPS Validated</label>
677
- <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">
 
678
  <option>Yes</option>
679
  <option>No</option>
680
  <option>In Progress</option>
@@ -684,8 +706,10 @@
684
  </div>
685
 
686
  <div>
687
- <label class="block text-sm font-medium text-gray-300 mb-2">Quantum Resistance Status *</label>
688
- <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">
 
 
689
  <option>Quantum Safe</option>
690
  <option>Quantum Vulnerable</option>
691
  <option>Partially Resistant</option>
@@ -695,14 +719,17 @@
695
 
696
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
697
  <div>
698
- <label class="block text-sm font-medium text-gray-300 mb-2">Purpose/Usage</label>
699
- <input type="text"
 
700
  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"
701
  placeholder="e.g., Data at rest encryption">
702
  </div>
703
  <div>
704
- <label class="block text-sm font-medium text-gray-300 mb-2">Associated CBOM</label>
705
- <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">
 
 
706
  <option>Select CBOM...</option>
707
  <option>Enterprise Web App</option>
708
  <option>Payment Gateway</option>
@@ -712,20 +739,24 @@
712
  </div>
713
 
714
  <div>
715
- <label class="block text-sm font-medium text-gray-300 mb-2">Additional Metadata</label>
716
- <textarea
 
717
  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"
718
- rows="3" placeholder="Any additional information about this algorithm..."></textarea>
 
719
  </div>
720
 
721
  <div class="border-t border-white/10 pt-6">
722
  <div class="flex justify-between items-center">
723
  <p class="text-sm text-gray-400">* Required fields</p>
724
  <div class="flex space-x-3">
725
- <button type="button" class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
 
726
  Clear Form
727
  </button>
728
- <button type="submit" class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
 
729
  Add Algorithm
730
  </button>
731
  </div>
@@ -740,19 +771,23 @@
740
  <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
741
  <h4 class="font-semibold text-white mb-4">Quick Templates</h4>
742
  <div class="space-y-3">
743
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
744
  <p class="font-medium text-white">AES-256-GCM</p>
745
  <p class="text-xs text-gray-400">Symmetric encryption, 256-bit key</p>
746
  </button>
747
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
748
  <p class="font-medium text-white">RSA-2048</p>
749
  <p class="text-xs text-gray-400">Asymmetric encryption, 2048-bit key</p>
750
  </button>
751
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
752
  <p class="font-medium text-white">SHA-256</p>
753
  <p class="text-xs text-gray-400">Hash function, 256-bit output</p>
754
  </button>
755
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
756
  <p class="font-medium text-white">ECDSA-P256</p>
757
  <p class="text-xs text-gray-400">Digital signature, elliptic curve</p>
758
  </button>
@@ -787,26 +822,30 @@
787
  <div class="lg:col-span-2">
788
  <div class="card-hover rounded-xl p-6" data-aos="fade-up">
789
  <h3 class="font-semibold text-lg text-white mb-6">Add New Protocol</h3>
790
-
791
  <form class="space-y-6">
792
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
793
  <div>
794
- <label class="block text-sm font-medium text-gray-300 mb-2">Protocol Name *</label>
795
- <input type="text"
 
796
  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"
797
  placeholder="e.g., TLS">
798
  </div>
799
  <div>
800
- <label class="block text-sm font-medium text-gray-300 mb-2">Version *</label>
801
- <input type="text"
 
802
  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"
803
  placeholder="e.g., 1.3">
804
  </div>
805
  </div>
806
 
807
  <div>
808
- <label class="block text-sm font-medium text-gray-300 mb-2">Protocol Type *</label>
809
- <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">
 
 
810
  <option>Transport Security</option>
811
  <option>Authentication</option>
812
  <option>Key Exchange</option>
@@ -817,10 +856,11 @@
817
  </div>
818
 
819
  <div>
820
- <label class="block text-sm font-medium text-gray-300 mb-2">Cipher Suites / Algorithms Used</label>
 
821
  <div class="space-y-2">
822
  <div class="flex items-center space-x-2">
823
- <input type="text"
824
  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"
825
  placeholder="e.g., TLS_AES_256_GCM_SHA384">
826
  <button type="button" class="p-2 text-yellow-400 hover:text-yellow-300">
@@ -833,14 +873,16 @@
833
 
834
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
835
  <div>
836
- <label class="block text-sm font-medium text-gray-300 mb-2">Key Exchange Method</label>
837
- <input type="text"
 
838
  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"
839
  placeholder="e.g., ECDHE, DHE">
840
  </div>
841
  <div>
842
- <label class="block text-sm font-medium text-gray-300 mb-2">Authentication Method</label>
843
- <input type="text"
 
844
  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"
845
  placeholder="e.g., RSA, ECDSA">
846
  </div>
@@ -848,40 +890,49 @@
848
 
849
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
850
  <div>
851
- <label class="block text-sm font-medium text-gray-300 mb-2">Port Number</label>
852
- <input type="number"
 
853
  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"
854
  placeholder="e.g., 443">
855
  </div>
856
  <div>
857
- <label class="block text-sm font-medium text-gray-300 mb-2">Implementation</label>
858
- <input type="text"
 
859
  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"
860
  placeholder="e.g., OpenSSL, BoringSSL">
861
  </div>
862
  </div>
863
 
864
  <div>
865
- <label class="block text-sm font-medium text-gray-300 mb-2">Security Settings</label>
 
866
  <div class="space-y-3">
867
  <div class="flex items-center space-x-3">
868
- <input type="checkbox" id="pfs" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
869
- <label for="pfs" class="text-sm text-gray-300">Perfect Forward Secrecy (PFS)</label>
 
 
870
  </div>
871
  <div class="flex items-center space-x-3">
872
- <input type="checkbox" id="hsts" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
 
873
  <label for="hsts" class="text-sm text-gray-300">HSTS Enabled</label>
874
  </div>
875
  <div class="flex items-center space-x-3">
876
- <input type="checkbox" id="ocsp" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
 
877
  <label for="ocsp" class="text-sm text-gray-300">OCSP Stapling</label>
878
  </div>
879
  </div>
880
  </div>
881
 
882
  <div>
883
- <label class="block text-sm font-medium text-gray-300 mb-2">Quantum Risk Assessment *</label>
884
- <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">
 
 
885
  <option>Low - Uses quantum-safe algorithms</option>
886
  <option>Medium - Partially quantum-vulnerable</option>
887
  <option>High - Fully quantum-vulnerable</option>
@@ -891,19 +942,22 @@
891
 
892
  <div>
893
  <label class="block text-sm font-medium text-gray-300 mb-2">Notes</label>
894
- <textarea
895
  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"
896
- rows="3" placeholder="Additional configuration or security notes..."></textarea>
 
897
  </div>
898
 
899
  <div class="border-t border-white/10 pt-6">
900
  <div class="flex justify-between items-center">
901
  <p class="text-sm text-gray-400">* Required fields</p>
902
  <div class="flex space-x-3">
903
- <button type="button" class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
 
904
  Clear Form
905
  </button>
906
- <button type="submit" class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
 
907
  Add Protocol
908
  </button>
909
  </div>
@@ -918,19 +972,23 @@
918
  <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
919
  <h4 class="font-semibold text-white mb-4">Protocol Templates</h4>
920
  <div class="space-y-3">
921
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
922
  <p class="font-medium text-white">TLS 1.3</p>
923
  <p class="text-xs text-gray-400">Modern transport security</p>
924
  </button>
925
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
926
  <p class="font-medium text-white">SSH v2</p>
927
  <p class="text-xs text-gray-400">Secure shell protocol</p>
928
  </button>
929
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
930
  <p class="font-medium text-white">IPSec</p>
931
  <p class="text-xs text-gray-400">VPN tunneling protocol</p>
932
  </button>
933
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
934
  <p class="font-medium text-white">OAuth 2.0</p>
935
  <p class="text-xs text-gray-400">Authentication protocol</p>
936
  </button>
@@ -965,18 +1023,21 @@
965
  <div class="lg:col-span-2">
966
  <div class="card-hover rounded-xl p-6" data-aos="fade-up">
967
  <h3 class="font-semibold text-lg text-white mb-6">Add New Certificate</h3>
968
-
969
  <form class="space-y-6">
970
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
971
  <div>
972
- <label class="block text-sm font-medium text-gray-300 mb-2">Common Name (CN) *</label>
973
- <input type="text"
 
974
  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"
975
  placeholder="e.g., *.example.com">
976
  </div>
977
  <div>
978
- <label class="block text-sm font-medium text-gray-300 mb-2">Certificate Type *</label>
979
- <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">
 
 
980
  <option>SSL/TLS Server</option>
981
  <option>SSL/TLS Client</option>
982
  <option>Code Signing</option>
@@ -988,16 +1049,20 @@
988
  </div>
989
 
990
  <div>
991
- <label class="block text-sm font-medium text-gray-300 mb-2">Subject Alternative Names (SANs)</label>
992
- <textarea
 
993
  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"
994
- rows="2" placeholder="Enter SANs separated by commas (e.g., www.example.com, api.example.com)"></textarea>
 
995
  </div>
996
 
997
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
998
  <div>
999
- <label class="block text-sm font-medium text-gray-300 mb-2">Key Algorithm *</label>
1000
- <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">
 
 
1001
  <option>RSA</option>
1002
  <option>ECDSA</option>
1003
  <option>DSA</option>
@@ -1005,8 +1070,10 @@
1005
  </select>
1006
  </div>
1007
  <div>
1008
- <label class="block text-sm font-medium text-gray-300 mb-2">Key Size *</label>
1009
- <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">
 
 
1010
  <option>2048 bits</option>
1011
  <option>3072 bits</option>
1012
  <option>4096 bits</option>
@@ -1015,8 +1082,10 @@
1015
  </select>
1016
  </div>
1017
  <div>
1018
- <label class="block text-sm font-medium text-gray-300 mb-2">Signature Algorithm *</label>
1019
- <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">
 
 
1020
  <option>SHA256withRSA</option>
1021
  <option>SHA384withRSA</option>
1022
  <option>SHA512withRSA</option>
@@ -1027,51 +1096,58 @@
1027
 
1028
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1029
  <div>
1030
- <label class="block text-sm font-medium text-gray-300 mb-2">Valid From *</label>
1031
- <input type="date"
 
1032
  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">
1033
  </div>
1034
  <div>
1035
- <label class="block text-sm font-medium text-gray-300 mb-2">Valid Until *</label>
1036
- <input type="date"
 
1037
  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">
1038
  </div>
1039
  </div>
1040
 
1041
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1042
  <div>
1043
- <label class="block text-sm font-medium text-gray-300 mb-2">Issuer (CA) *</label>
1044
- <input type="text"
 
1045
  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"
1046
  placeholder="e.g., DigiCert SHA2 Secure Server CA">
1047
  </div>
1048
  <div>
1049
- <label class="block text-sm font-medium text-gray-300 mb-2">Serial Number</label>
1050
- <input type="text"
 
1051
  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"
1052
  placeholder="e.g., 0A:1B:2C:3D...">
1053
  </div>
1054
  </div>
1055
 
1056
  <div>
1057
- <label class="block text-sm font-medium text-gray-300 mb-2">Certificate Chain</label>
 
1058
  <div class="space-y-2">
1059
- <input type="text"
1060
  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"
1061
  placeholder="Root CA">
1062
- <input type="text"
1063
  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"
1064
  placeholder="Intermediate CA (if applicable)">
1065
  </div>
1066
  </div>
1067
 
1068
  <div>
1069
- <label class="block text-sm font-medium text-gray-300 mb-2">Storage Location</label>
 
1070
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
1071
- <input type="text"
1072
  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"
1073
  placeholder="Key store path or HSM identifier">
1074
- <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">
 
1075
  <option>File System</option>
1076
  <option>HSM</option>
1077
  <option>Key Vault</option>
@@ -1081,8 +1157,9 @@
1081
  </div>
1082
 
1083
  <div>
1084
- <label class="block text-sm font-medium text-gray-300 mb-2">Associated Services/Applications</label>
1085
- <input type="text"
 
1086
  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"
1087
  placeholder="e.g., Web Server, Load Balancer, API Gateway">
1088
  </div>
@@ -1091,10 +1168,12 @@
1091
  <div class="flex justify-between items-center">
1092
  <p class="text-sm text-gray-400">* Required fields</p>
1093
  <div class="flex space-x-3">
1094
- <button type="button" class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
 
1095
  Clear Form
1096
  </button>
1097
- <button type="submit" class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
 
1098
  Add Certificate
1099
  </button>
1100
  </div>
@@ -1109,15 +1188,18 @@
1109
  <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
1110
  <h4 class="font-semibold text-white mb-4">Certificate Templates</h4>
1111
  <div class="space-y-3">
1112
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
1113
  <p class="font-medium text-white">Web Server SSL</p>
1114
  <p class="text-xs text-gray-400">Standard HTTPS certificate</p>
1115
  </button>
1116
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
1117
  <p class="font-medium text-white">Wildcard Certificate</p>
1118
  <p class="text-xs text-gray-400">*.domain.com coverage</p>
1119
  </button>
1120
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
1121
  <p class="font-medium text-white">Code Signing</p>
1122
  <p class="text-xs text-gray-400">Software signing certificate</p>
1123
  </button>
@@ -1127,13 +1209,15 @@
1127
  <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
1128
  <h4 class="font-semibold text-white mb-4">Import Options</h4>
1129
  <div class="space-y-3">
1130
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all">
 
1131
  <div class="flex items-center space-x-3">
1132
  <i data-feather="upload" class="w-5 h-5 text-gray-400"></i>
1133
  <span class="text-sm text-white">Import from PEM/DER</span>
1134
  </div>
1135
  </button>
1136
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all">
 
1137
  <div class="flex items-center space-x-3">
1138
  <i data-feather="file-text" class="w-5 h-5 text-gray-400"></i>
1139
  <span class="text-sm text-white">Parse Certificate</span>
@@ -1152,18 +1236,21 @@
1152
  <div class="lg:col-span-2">
1153
  <div class="card-hover rounded-xl p-6" data-aos="fade-up">
1154
  <h3 class="font-semibold text-lg text-white mb-6">Add New Cryptographic Material</h3>
1155
-
1156
  <form class="space-y-6">
1157
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1158
  <div>
1159
- <label class="block text-sm font-medium text-gray-300 mb-2">Material Name/ID *</label>
1160
- <input type="text"
 
1161
  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"
1162
  placeholder="e.g., API_SIGNING_KEY_PROD">
1163
  </div>
1164
  <div>
1165
- <label class="block text-sm font-medium text-gray-300 mb-2">Material Type *</label>
1166
- <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">
 
 
1167
  <option>Symmetric Key</option>
1168
  <option>Private Key</option>
1169
  <option>Public Key</option>
@@ -1177,23 +1264,26 @@
1177
  </div>
1178
 
1179
  <div>
1180
- <label class="block text-sm font-medium text-gray-300 mb-2">Key Properties</label>
 
1181
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
1182
  <div>
1183
  <label class="block text-xs text-gray-400 mb-1">Algorithm</label>
1184
- <input type="text"
1185
  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"
1186
  placeholder="e.g., AES">
1187
  </div>
1188
  <div>
1189
- <label class="block text-xs text-gray-400 mb-1">Key Length (bits)</label>
1190
- <input type="number"
 
1191
  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"
1192
  placeholder="e.g., 256">
1193
  </div>
1194
  <div>
1195
  <label class="block text-xs text-gray-400 mb-1">Format</label>
1196
- <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">
 
1197
  <option>Raw Binary</option>
1198
  <option>Base64</option>
1199
  <option>Hex</option>
@@ -1206,8 +1296,10 @@
1206
 
1207
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1208
  <div>
1209
- <label class="block text-sm font-medium text-gray-300 mb-2">Purpose/Usage *</label>
1210
- <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">
 
 
1211
  <option>Data Encryption</option>
1212
  <option>Digital Signature</option>
1213
  <option>Authentication</option>
@@ -1218,8 +1310,10 @@
1218
  </select>
1219
  </div>
1220
  <div>
1221
- <label class="block text-sm font-medium text-gray-300 mb-2">Storage Type *</label>
1222
- <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">
 
 
1223
  <option>HSM</option>
1224
  <option>Key Management Service</option>
1225
  <option>Secure Enclave</option>
@@ -1231,21 +1325,23 @@
1231
  </div>
1232
 
1233
  <div>
1234
- <label class="block text-sm font-medium text-gray-300 mb-2">Key Lifecycle Information</label>
 
1235
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
1236
  <div>
1237
  <label class="block text-xs text-gray-400 mb-1">Created Date</label>
1238
- <input type="date"
1239
  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">
1240
  </div>
1241
  <div>
1242
  <label class="block text-xs text-gray-400 mb-1">Expiry Date</label>
1243
- <input type="date"
1244
  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">
1245
  </div>
1246
  <div>
1247
  <label class="block text-xs text-gray-400 mb-1">Rotation Period</label>
1248
- <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">
 
1249
  <option>30 days</option>
1250
  <option>90 days</option>
1251
  <option>180 days</option>
@@ -1257,38 +1353,47 @@
1257
  </div>
1258
 
1259
  <div>
1260
- <label class="block text-sm font-medium text-gray-300 mb-2">Access Control</label>
 
1261
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
1262
- <input type="text"
1263
  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"
1264
  placeholder="Owner/Service Account">
1265
- <input type="text"
1266
  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"
1267
  placeholder="Access Policy/Role">
1268
  </div>
1269
  </div>
1270
 
1271
  <div>
1272
- <label class="block text-sm font-medium text-gray-300 mb-2">Associated Systems</label>
1273
- <input type="text"
 
1274
  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"
1275
  placeholder="List systems/applications using this material">
1276
  </div>
1277
 
1278
  <div>
1279
- <label class="block text-sm font-medium text-gray-300 mb-2">Compliance & Standards</label>
 
1280
  <div class="space-y-3">
1281
  <div class="flex items-center space-x-3">
1282
- <input type="checkbox" id="fips140" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
1283
- <label for="fips140" class="text-sm text-gray-300">FIPS 140-2/3 Compliant</label>
 
 
1284
  </div>
1285
  <div class="flex items-center space-x-3">
1286
- <input type="checkbox" id="pciCompliant" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
1287
- <label for="pciCompliant" class="text-sm text-gray-300">PCI-DSS Compliant</label>
 
 
1288
  </div>
1289
  <div class="flex items-center space-x-3">
1290
- <input type="checkbox" id="quantumSafe" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
1291
- <label for="quantumSafe" class="text-sm text-gray-300">Quantum-Safe</label>
 
 
1292
  </div>
1293
  </div>
1294
  </div>
@@ -1297,10 +1402,12 @@
1297
  <div class="flex justify-between items-center">
1298
  <p class="text-sm text-gray-400">* Required fields</p>
1299
  <div class="flex space-x-3">
1300
- <button type="button" class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
 
1301
  Clear Form
1302
  </button>
1303
- <button type="submit" class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
 
1304
  Add Material
1305
  </button>
1306
  </div>
@@ -1315,19 +1422,23 @@
1315
  <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
1316
  <h4 class="font-semibold text-white mb-4">Common Key Types</h4>
1317
  <div class="space-y-3">
1318
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
1319
  <p class="font-medium text-white">Data Encryption Key</p>
1320
  <p class="text-xs text-gray-400">DEK for data at rest</p>
1321
  </button>
1322
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
1323
  <p class="font-medium text-white">Key Encryption Key</p>
1324
  <p class="text-xs text-gray-400">KEK for key wrapping</p>
1325
  </button>
1326
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
1327
  <p class="font-medium text-white">API Authentication</p>
1328
  <p class="text-xs text-gray-400">JWT signing key</p>
1329
  </button>
1330
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
1331
  <p class="font-medium text-white">Database Encryption</p>
1332
  <p class="text-xs text-gray-400">TDE master key</p>
1333
  </button>
@@ -1365,10 +1476,10 @@
1365
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
1366
  <script>
1367
  // Initialize feather icons immediately
1368
- document.addEventListener('DOMContentLoaded', function() {
1369
  // Replace feather icons
1370
  feather.replace();
1371
-
1372
  // Initialize AOS with better settings
1373
  AOS.init({
1374
  duration: 400,
@@ -1377,12 +1488,12 @@
1377
  easing: 'ease-out',
1378
  delay: 0,
1379
  anchorPlacement: 'top-bottom',
1380
- disable: function() {
1381
  // Disable AOS on mobile devices to prevent issues
1382
  return window.innerWidth < 768;
1383
  }
1384
  });
1385
-
1386
  // Force AOS refresh after a short delay
1387
  setTimeout(() => {
1388
  AOS.refresh();
@@ -1395,20 +1506,20 @@
1395
  document.querySelectorAll('.tab-content').forEach(content => {
1396
  content.classList.add('hidden');
1397
  });
1398
-
1399
  // Remove active class from all tabs
1400
  document.querySelectorAll('.flex button[onclick^="showTab"]').forEach(button => {
1401
  button.classList.remove('tab-active');
1402
  button.classList.add('text-gray-400', 'hover:text-gray-200');
1403
  });
1404
-
1405
  // Show selected tab content
1406
  document.getElementById(tabName).classList.remove('hidden');
1407
-
1408
  // Add active class to clicked tab
1409
  event.target.classList.add('tab-active');
1410
  event.target.classList.remove('text-gray-400', 'hover:text-gray-200');
1411
-
1412
  // Re-render feather icons and refresh AOS
1413
  feather.replace();
1414
  AOS.refresh();
@@ -1425,9 +1536,9 @@
1425
  });
1426
  });
1427
  }
1428
-
1429
  // Ensure all content is visible on load
1430
- window.addEventListener('load', function() {
1431
  // Force all AOS elements to animate
1432
  document.querySelectorAll('[data-aos]').forEach(el => {
1433
  el.classList.add('aos-animate');
@@ -1435,7 +1546,7 @@
1435
  });
1436
 
1437
  // Add template auto-fill functionality
1438
- document.addEventListener('DOMContentLoaded', function() {
1439
  // Algorithm templates
1440
  const algorithmTemplates = {
1441
  'AES-256-GCM': {
@@ -1470,7 +1581,7 @@
1470
 
1471
  // Handle template clicks
1472
  document.querySelectorAll('.card-hover button').forEach(button => {
1473
- button.addEventListener('click', function() {
1474
  const templateName = this.querySelector('.font-medium').textContent;
1475
  if (algorithmTemplates[templateName]) {
1476
  // Fill form with template data
 
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Assets Management - Quantum Safe</title>
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 
120
  transform: translateY(100vh) translateX(0px);
121
  opacity: 0;
122
  }
123
+
124
  10% {
125
  opacity: 0.7;
126
  }
127
+
128
  90% {
129
  opacity: 0.7;
130
  }
131
+
132
  100% {
133
  transform: translateY(-100px) translateX(100px);
134
  opacity: 0;
 
181
  <div class="sidebar text-white w-64 flex-shrink-0 flex flex-col relative z-10">
182
  <div class="p-4 border-b border-white/10">
183
  <a href="index.html" class="flex items-center space-x-3 hover:opacity-80 transition-opacity">
184
+ <div
185
+ class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
186
  <i data-feather="shield" class="text-gray-900 w-5 h-5"></i>
187
  </div>
188
+ <h1 class="text-xl font-bold"><span class="gradient-text">Quantum Safe</span></h1>
189
  </a>
190
  </div>
191
 
 
205
  <i data-feather="file-text" class="w-5 h-5"></i>
206
  <span>CBOMs</span>
207
  </a>
208
+ <a href="assets.html"
209
+ class="flex items-center space-x-3 p-3 rounded-lg bg-yellow-400/20 text-yellow-400 border border-yellow-400/30">
210
  <i data-feather="lock" class="w-5 h-5"></i>
211
  <span>Assets</span>
212
  </a>
 
224
 
225
  <div class="p-4 border-t border-white/10">
226
  <div class="flex items-center space-x-3">
227
+ <div
228
+ class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-600 to-gray-700 flex items-center justify-center">
229
  <i data-feather="user" class="text-gray-300 w-5 h-5"></i>
230
  </div>
231
  <div>
232
+ <p class="text-sm font-medium">Josep Mateu</p>
233
  <p class="text-xs text-gray-400">Administrator</p>
234
  </div>
235
  </div>
 
239
  <!-- Main Content -->
240
  <div class="flex-1 flex flex-col overflow-hidden relative z-10">
241
  <!-- Top Navigation -->
242
+ <header
243
+ class="backdrop-filter backdrop-blur-lg bg-white/5 border-b border-white/10 flex items-center justify-between p-4">
244
  <div class="flex items-center space-x-4">
245
  <button class="md:hidden text-white">
246
  <i data-feather="menu"></i>
 
255
  <input type="text" placeholder="Search assets..."
256
  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">
257
  </div>
258
+ <button class="px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
 
259
  <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
260
  Add Asset
261
  </button>
 
268
  <div class="card-hover rounded-xl mb-6">
269
  <div class="flex border-b border-white/10 overflow-x-auto">
270
  <button class="px-6 py-4 font-medium tab-active" onclick="showTab('assetList')">Asset List</button>
271
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"
272
+ onclick="showTab('algorithms')">Algorithms</button>
273
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"
274
+ onclick="showTab('protocols')">Protocols</button>
275
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"
276
+ onclick="showTab('certificates')">Certificates</button>
277
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"
278
+ onclick="showTab('cryptoMaterials')">Crypto Materials</button>
279
  </div>
280
  </div>
281
 
 
446
  <span
447
  class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Secure</span>
448
  </td>
449
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Enterprise Web App
450
+ </td>
451
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
452
  <div class="flex space-x-2">
453
  <button class="text-blue-400 hover:text-blue-300">
 
490
  <span
491
  class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Secure</span>
492
  </td>
493
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Payment Gateway
494
+ </td>
495
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
496
  <div class="flex space-x-2">
497
  <button class="text-blue-400 hover:text-blue-300">
 
523
  </td>
524
  <td class="px-6 py-4 whitespace-nowrap">
525
  <span
526
+ class="px-2 py-1 text-xs font-medium bg-gray-400/20 text-gray-400 rounded-full">Crypto
527
+ Material</span>
528
  </td>
529
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">1.0</td>
530
  <td class="px-6 py-4 whitespace-nowrap">
 
567
  </td>
568
  <td class="px-6 py-4 whitespace-nowrap">
569
  <span
570
+ class="px-2 py-1 text-xs font-medium bg-gray-400/20 text-gray-400 rounded-full">Crypto
571
+ Material</span>
572
  </td>
573
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">2.1</td>
574
  <td class="px-6 py-4 whitespace-nowrap">
 
579
  <span
580
  class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Secure</span>
581
  </td>
582
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Enterprise Web App
583
+ </td>
584
  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
585
  <div class="flex space-x-2">
586
  <button class="text-blue-400 hover:text-blue-300">
 
635
  <div class="lg:col-span-2">
636
  <div class="card-hover rounded-xl p-6" data-aos="fade-up">
637
  <h3 class="font-semibold text-lg text-white mb-6">Add New Algorithm</h3>
638
+
639
  <form class="space-y-6">
640
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
641
  <div>
642
+ <label class="block text-sm font-medium text-gray-300 mb-2">Algorithm Name
643
+ *</label>
644
+ <input type="text"
645
  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"
646
  placeholder="e.g., AES-256-GCM">
647
  </div>
648
  <div>
649
+ <label class="block text-sm font-medium text-gray-300 mb-2">Algorithm Type
650
+ *</label>
651
+ <select
652
+ 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">
653
  <option>Symmetric Encryption</option>
654
  <option>Asymmetric Encryption</option>
655
  <option>Hash Function</option>
 
662
 
663
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
664
  <div>
665
+ <label class="block text-sm font-medium text-gray-300 mb-2">Key Size
666
+ (bits)</label>
667
+ <input type="number"
668
  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"
669
  placeholder="e.g., 256">
670
  </div>
671
  <div>
672
+ <label class="block text-sm font-medium text-gray-300 mb-2">Mode of
673
+ Operation</label>
674
+ <input type="text"
675
  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"
676
  placeholder="e.g., GCM, CBC, CTR">
677
  </div>
678
  </div>
679
 
680
  <div>
681
+ <label class="block text-sm font-medium text-gray-300 mb-2">Implementation
682
+ Details</label>
683
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
684
  <div>
685
  <label class="block text-xs text-gray-400 mb-1">Library/Provider</label>
686
+ <input type="text"
687
  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"
688
  placeholder="e.g., OpenSSL">
689
  </div>
690
  <div>
691
  <label class="block text-xs text-gray-400 mb-1">Version</label>
692
+ <input type="text"
693
  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"
694
  placeholder="e.g., 3.0.11">
695
  </div>
696
  <div>
697
  <label class="block text-xs text-gray-400 mb-1">FIPS Validated</label>
698
+ <select
699
+ 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">
700
  <option>Yes</option>
701
  <option>No</option>
702
  <option>In Progress</option>
 
706
  </div>
707
 
708
  <div>
709
+ <label class="block text-sm font-medium text-gray-300 mb-2">Quantum Resistance
710
+ Status *</label>
711
+ <select
712
+ 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">
713
  <option>Quantum Safe</option>
714
  <option>Quantum Vulnerable</option>
715
  <option>Partially Resistant</option>
 
719
 
720
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
721
  <div>
722
+ <label
723
+ class="block text-sm font-medium text-gray-300 mb-2">Purpose/Usage</label>
724
+ <input type="text"
725
  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"
726
  placeholder="e.g., Data at rest encryption">
727
  </div>
728
  <div>
729
+ <label class="block text-sm font-medium text-gray-300 mb-2">Associated
730
+ CBOM</label>
731
+ <select
732
+ 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">
733
  <option>Select CBOM...</option>
734
  <option>Enterprise Web App</option>
735
  <option>Payment Gateway</option>
 
739
  </div>
740
 
741
  <div>
742
+ <label class="block text-sm font-medium text-gray-300 mb-2">Additional
743
+ Metadata</label>
744
+ <textarea
745
  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"
746
+ rows="3"
747
+ placeholder="Any additional information about this algorithm..."></textarea>
748
  </div>
749
 
750
  <div class="border-t border-white/10 pt-6">
751
  <div class="flex justify-between items-center">
752
  <p class="text-sm text-gray-400">* Required fields</p>
753
  <div class="flex space-x-3">
754
+ <button type="button"
755
+ class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
756
  Clear Form
757
  </button>
758
+ <button type="submit"
759
+ class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
760
  Add Algorithm
761
  </button>
762
  </div>
 
771
  <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
772
  <h4 class="font-semibold text-white mb-4">Quick Templates</h4>
773
  <div class="space-y-3">
774
+ <button
775
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
776
  <p class="font-medium text-white">AES-256-GCM</p>
777
  <p class="text-xs text-gray-400">Symmetric encryption, 256-bit key</p>
778
  </button>
779
+ <button
780
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
781
  <p class="font-medium text-white">RSA-2048</p>
782
  <p class="text-xs text-gray-400">Asymmetric encryption, 2048-bit key</p>
783
  </button>
784
+ <button
785
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
786
  <p class="font-medium text-white">SHA-256</p>
787
  <p class="text-xs text-gray-400">Hash function, 256-bit output</p>
788
  </button>
789
+ <button
790
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
791
  <p class="font-medium text-white">ECDSA-P256</p>
792
  <p class="text-xs text-gray-400">Digital signature, elliptic curve</p>
793
  </button>
 
822
  <div class="lg:col-span-2">
823
  <div class="card-hover rounded-xl p-6" data-aos="fade-up">
824
  <h3 class="font-semibold text-lg text-white mb-6">Add New Protocol</h3>
825
+
826
  <form class="space-y-6">
827
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
828
  <div>
829
+ <label class="block text-sm font-medium text-gray-300 mb-2">Protocol Name
830
+ *</label>
831
+ <input type="text"
832
  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"
833
  placeholder="e.g., TLS">
834
  </div>
835
  <div>
836
+ <label class="block text-sm font-medium text-gray-300 mb-2">Version
837
+ *</label>
838
+ <input type="text"
839
  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"
840
  placeholder="e.g., 1.3">
841
  </div>
842
  </div>
843
 
844
  <div>
845
+ <label class="block text-sm font-medium text-gray-300 mb-2">Protocol Type
846
+ *</label>
847
+ <select
848
+ 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">
849
  <option>Transport Security</option>
850
  <option>Authentication</option>
851
  <option>Key Exchange</option>
 
856
  </div>
857
 
858
  <div>
859
+ <label class="block text-sm font-medium text-gray-300 mb-2">Cipher Suites /
860
+ Algorithms Used</label>
861
  <div class="space-y-2">
862
  <div class="flex items-center space-x-2">
863
+ <input type="text"
864
  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"
865
  placeholder="e.g., TLS_AES_256_GCM_SHA384">
866
  <button type="button" class="p-2 text-yellow-400 hover:text-yellow-300">
 
873
 
874
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
875
  <div>
876
+ <label class="block text-sm font-medium text-gray-300 mb-2">Key Exchange
877
+ Method</label>
878
+ <input type="text"
879
  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"
880
  placeholder="e.g., ECDHE, DHE">
881
  </div>
882
  <div>
883
+ <label class="block text-sm font-medium text-gray-300 mb-2">Authentication
884
+ Method</label>
885
+ <input type="text"
886
  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"
887
  placeholder="e.g., RSA, ECDSA">
888
  </div>
 
890
 
891
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
892
  <div>
893
+ <label class="block text-sm font-medium text-gray-300 mb-2">Port
894
+ Number</label>
895
+ <input type="number"
896
  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"
897
  placeholder="e.g., 443">
898
  </div>
899
  <div>
900
+ <label
901
+ class="block text-sm font-medium text-gray-300 mb-2">Implementation</label>
902
+ <input type="text"
903
  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"
904
  placeholder="e.g., OpenSSL, BoringSSL">
905
  </div>
906
  </div>
907
 
908
  <div>
909
+ <label class="block text-sm font-medium text-gray-300 mb-2">Security
910
+ Settings</label>
911
  <div class="space-y-3">
912
  <div class="flex items-center space-x-3">
913
+ <input type="checkbox" id="pfs"
914
+ class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
915
+ <label for="pfs" class="text-sm text-gray-300">Perfect Forward Secrecy
916
+ (PFS)</label>
917
  </div>
918
  <div class="flex items-center space-x-3">
919
+ <input type="checkbox" id="hsts"
920
+ class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
921
  <label for="hsts" class="text-sm text-gray-300">HSTS Enabled</label>
922
  </div>
923
  <div class="flex items-center space-x-3">
924
+ <input type="checkbox" id="ocsp"
925
+ class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
926
  <label for="ocsp" class="text-sm text-gray-300">OCSP Stapling</label>
927
  </div>
928
  </div>
929
  </div>
930
 
931
  <div>
932
+ <label class="block text-sm font-medium text-gray-300 mb-2">Quantum Risk
933
+ Assessment *</label>
934
+ <select
935
+ 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">
936
  <option>Low - Uses quantum-safe algorithms</option>
937
  <option>Medium - Partially quantum-vulnerable</option>
938
  <option>High - Fully quantum-vulnerable</option>
 
942
 
943
  <div>
944
  <label class="block text-sm font-medium text-gray-300 mb-2">Notes</label>
945
+ <textarea
946
  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"
947
+ rows="3"
948
+ placeholder="Additional configuration or security notes..."></textarea>
949
  </div>
950
 
951
  <div class="border-t border-white/10 pt-6">
952
  <div class="flex justify-between items-center">
953
  <p class="text-sm text-gray-400">* Required fields</p>
954
  <div class="flex space-x-3">
955
+ <button type="button"
956
+ class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
957
  Clear Form
958
  </button>
959
+ <button type="submit"
960
+ class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
961
  Add Protocol
962
  </button>
963
  </div>
 
972
  <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
973
  <h4 class="font-semibold text-white mb-4">Protocol Templates</h4>
974
  <div class="space-y-3">
975
+ <button
976
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
977
  <p class="font-medium text-white">TLS 1.3</p>
978
  <p class="text-xs text-gray-400">Modern transport security</p>
979
  </button>
980
+ <button
981
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
982
  <p class="font-medium text-white">SSH v2</p>
983
  <p class="text-xs text-gray-400">Secure shell protocol</p>
984
  </button>
985
+ <button
986
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
987
  <p class="font-medium text-white">IPSec</p>
988
  <p class="text-xs text-gray-400">VPN tunneling protocol</p>
989
  </button>
990
+ <button
991
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
992
  <p class="font-medium text-white">OAuth 2.0</p>
993
  <p class="text-xs text-gray-400">Authentication protocol</p>
994
  </button>
 
1023
  <div class="lg:col-span-2">
1024
  <div class="card-hover rounded-xl p-6" data-aos="fade-up">
1025
  <h3 class="font-semibold text-lg text-white mb-6">Add New Certificate</h3>
1026
+
1027
  <form class="space-y-6">
1028
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1029
  <div>
1030
+ <label class="block text-sm font-medium text-gray-300 mb-2">Common Name (CN)
1031
+ *</label>
1032
+ <input type="text"
1033
  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"
1034
  placeholder="e.g., *.example.com">
1035
  </div>
1036
  <div>
1037
+ <label class="block text-sm font-medium text-gray-300 mb-2">Certificate Type
1038
+ *</label>
1039
+ <select
1040
+ 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">
1041
  <option>SSL/TLS Server</option>
1042
  <option>SSL/TLS Client</option>
1043
  <option>Code Signing</option>
 
1049
  </div>
1050
 
1051
  <div>
1052
+ <label class="block text-sm font-medium text-gray-300 mb-2">Subject Alternative
1053
+ Names (SANs)</label>
1054
+ <textarea
1055
  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"
1056
+ rows="2"
1057
+ placeholder="Enter SANs separated by commas (e.g., www.example.com, api.example.com)"></textarea>
1058
  </div>
1059
 
1060
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
1061
  <div>
1062
+ <label class="block text-sm font-medium text-gray-300 mb-2">Key Algorithm
1063
+ *</label>
1064
+ <select
1065
+ 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">
1066
  <option>RSA</option>
1067
  <option>ECDSA</option>
1068
  <option>DSA</option>
 
1070
  </select>
1071
  </div>
1072
  <div>
1073
+ <label class="block text-sm font-medium text-gray-300 mb-2">Key Size
1074
+ *</label>
1075
+ <select
1076
+ 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">
1077
  <option>2048 bits</option>
1078
  <option>3072 bits</option>
1079
  <option>4096 bits</option>
 
1082
  </select>
1083
  </div>
1084
  <div>
1085
+ <label class="block text-sm font-medium text-gray-300 mb-2">Signature
1086
+ Algorithm *</label>
1087
+ <select
1088
+ 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">
1089
  <option>SHA256withRSA</option>
1090
  <option>SHA384withRSA</option>
1091
  <option>SHA512withRSA</option>
 
1096
 
1097
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1098
  <div>
1099
+ <label class="block text-sm font-medium text-gray-300 mb-2">Valid From
1100
+ *</label>
1101
+ <input type="date"
1102
  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">
1103
  </div>
1104
  <div>
1105
+ <label class="block text-sm font-medium text-gray-300 mb-2">Valid Until
1106
+ *</label>
1107
+ <input type="date"
1108
  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">
1109
  </div>
1110
  </div>
1111
 
1112
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1113
  <div>
1114
+ <label class="block text-sm font-medium text-gray-300 mb-2">Issuer (CA)
1115
+ *</label>
1116
+ <input type="text"
1117
  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"
1118
  placeholder="e.g., DigiCert SHA2 Secure Server CA">
1119
  </div>
1120
  <div>
1121
+ <label class="block text-sm font-medium text-gray-300 mb-2">Serial
1122
+ Number</label>
1123
+ <input type="text"
1124
  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"
1125
  placeholder="e.g., 0A:1B:2C:3D...">
1126
  </div>
1127
  </div>
1128
 
1129
  <div>
1130
+ <label class="block text-sm font-medium text-gray-300 mb-2">Certificate
1131
+ Chain</label>
1132
  <div class="space-y-2">
1133
+ <input type="text"
1134
  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"
1135
  placeholder="Root CA">
1136
+ <input type="text"
1137
  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"
1138
  placeholder="Intermediate CA (if applicable)">
1139
  </div>
1140
  </div>
1141
 
1142
  <div>
1143
+ <label class="block text-sm font-medium text-gray-300 mb-2">Storage
1144
+ Location</label>
1145
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
1146
+ <input type="text"
1147
  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"
1148
  placeholder="Key store path or HSM identifier">
1149
+ <select
1150
+ 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">
1151
  <option>File System</option>
1152
  <option>HSM</option>
1153
  <option>Key Vault</option>
 
1157
  </div>
1158
 
1159
  <div>
1160
+ <label class="block text-sm font-medium text-gray-300 mb-2">Associated
1161
+ Services/Applications</label>
1162
+ <input type="text"
1163
  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"
1164
  placeholder="e.g., Web Server, Load Balancer, API Gateway">
1165
  </div>
 
1168
  <div class="flex justify-between items-center">
1169
  <p class="text-sm text-gray-400">* Required fields</p>
1170
  <div class="flex space-x-3">
1171
+ <button type="button"
1172
+ class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
1173
  Clear Form
1174
  </button>
1175
+ <button type="submit"
1176
+ class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
1177
  Add Certificate
1178
  </button>
1179
  </div>
 
1188
  <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
1189
  <h4 class="font-semibold text-white mb-4">Certificate Templates</h4>
1190
  <div class="space-y-3">
1191
+ <button
1192
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
1193
  <p class="font-medium text-white">Web Server SSL</p>
1194
  <p class="text-xs text-gray-400">Standard HTTPS certificate</p>
1195
  </button>
1196
+ <button
1197
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
1198
  <p class="font-medium text-white">Wildcard Certificate</p>
1199
  <p class="text-xs text-gray-400">*.domain.com coverage</p>
1200
  </button>
1201
+ <button
1202
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
1203
  <p class="font-medium text-white">Code Signing</p>
1204
  <p class="text-xs text-gray-400">Software signing certificate</p>
1205
  </button>
 
1209
  <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
1210
  <h4 class="font-semibold text-white mb-4">Import Options</h4>
1211
  <div class="space-y-3">
1212
+ <button
1213
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all">
1214
  <div class="flex items-center space-x-3">
1215
  <i data-feather="upload" class="w-5 h-5 text-gray-400"></i>
1216
  <span class="text-sm text-white">Import from PEM/DER</span>
1217
  </div>
1218
  </button>
1219
+ <button
1220
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all">
1221
  <div class="flex items-center space-x-3">
1222
  <i data-feather="file-text" class="w-5 h-5 text-gray-400"></i>
1223
  <span class="text-sm text-white">Parse Certificate</span>
 
1236
  <div class="lg:col-span-2">
1237
  <div class="card-hover rounded-xl p-6" data-aos="fade-up">
1238
  <h3 class="font-semibold text-lg text-white mb-6">Add New Cryptographic Material</h3>
1239
+
1240
  <form class="space-y-6">
1241
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1242
  <div>
1243
+ <label class="block text-sm font-medium text-gray-300 mb-2">Material Name/ID
1244
+ *</label>
1245
+ <input type="text"
1246
  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"
1247
  placeholder="e.g., API_SIGNING_KEY_PROD">
1248
  </div>
1249
  <div>
1250
+ <label class="block text-sm font-medium text-gray-300 mb-2">Material Type
1251
+ *</label>
1252
+ <select
1253
+ 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">
1254
  <option>Symmetric Key</option>
1255
  <option>Private Key</option>
1256
  <option>Public Key</option>
 
1264
  </div>
1265
 
1266
  <div>
1267
+ <label class="block text-sm font-medium text-gray-300 mb-2">Key
1268
+ Properties</label>
1269
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
1270
  <div>
1271
  <label class="block text-xs text-gray-400 mb-1">Algorithm</label>
1272
+ <input type="text"
1273
  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"
1274
  placeholder="e.g., AES">
1275
  </div>
1276
  <div>
1277
+ <label class="block text-xs text-gray-400 mb-1">Key Length
1278
+ (bits)</label>
1279
+ <input type="number"
1280
  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"
1281
  placeholder="e.g., 256">
1282
  </div>
1283
  <div>
1284
  <label class="block text-xs text-gray-400 mb-1">Format</label>
1285
+ <select
1286
+ 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">
1287
  <option>Raw Binary</option>
1288
  <option>Base64</option>
1289
  <option>Hex</option>
 
1296
 
1297
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1298
  <div>
1299
+ <label class="block text-sm font-medium text-gray-300 mb-2">Purpose/Usage
1300
+ *</label>
1301
+ <select
1302
+ 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">
1303
  <option>Data Encryption</option>
1304
  <option>Digital Signature</option>
1305
  <option>Authentication</option>
 
1310
  </select>
1311
  </div>
1312
  <div>
1313
+ <label class="block text-sm font-medium text-gray-300 mb-2">Storage Type
1314
+ *</label>
1315
+ <select
1316
+ 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">
1317
  <option>HSM</option>
1318
  <option>Key Management Service</option>
1319
  <option>Secure Enclave</option>
 
1325
  </div>
1326
 
1327
  <div>
1328
+ <label class="block text-sm font-medium text-gray-300 mb-2">Key Lifecycle
1329
+ Information</label>
1330
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
1331
  <div>
1332
  <label class="block text-xs text-gray-400 mb-1">Created Date</label>
1333
+ <input type="date"
1334
  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">
1335
  </div>
1336
  <div>
1337
  <label class="block text-xs text-gray-400 mb-1">Expiry Date</label>
1338
+ <input type="date"
1339
  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">
1340
  </div>
1341
  <div>
1342
  <label class="block text-xs text-gray-400 mb-1">Rotation Period</label>
1343
+ <select
1344
+ 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">
1345
  <option>30 days</option>
1346
  <option>90 days</option>
1347
  <option>180 days</option>
 
1353
  </div>
1354
 
1355
  <div>
1356
+ <label class="block text-sm font-medium text-gray-300 mb-2">Access
1357
+ Control</label>
1358
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
1359
+ <input type="text"
1360
  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"
1361
  placeholder="Owner/Service Account">
1362
+ <input type="text"
1363
  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"
1364
  placeholder="Access Policy/Role">
1365
  </div>
1366
  </div>
1367
 
1368
  <div>
1369
+ <label class="block text-sm font-medium text-gray-300 mb-2">Associated
1370
+ Systems</label>
1371
+ <input type="text"
1372
  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"
1373
  placeholder="List systems/applications using this material">
1374
  </div>
1375
 
1376
  <div>
1377
+ <label class="block text-sm font-medium text-gray-300 mb-2">Compliance &
1378
+ Standards</label>
1379
  <div class="space-y-3">
1380
  <div class="flex items-center space-x-3">
1381
+ <input type="checkbox" id="fips140"
1382
+ class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
1383
+ <label for="fips140" class="text-sm text-gray-300">FIPS 140-2/3
1384
+ Compliant</label>
1385
  </div>
1386
  <div class="flex items-center space-x-3">
1387
+ <input type="checkbox" id="pciCompliant"
1388
+ class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
1389
+ <label for="pciCompliant" class="text-sm text-gray-300">PCI-DSS
1390
+ Compliant</label>
1391
  </div>
1392
  <div class="flex items-center space-x-3">
1393
+ <input type="checkbox" id="quantumSafe"
1394
+ class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
1395
+ <label for="quantumSafe"
1396
+ class="text-sm text-gray-300">Quantum-Safe</label>
1397
  </div>
1398
  </div>
1399
  </div>
 
1402
  <div class="flex justify-between items-center">
1403
  <p class="text-sm text-gray-400">* Required fields</p>
1404
  <div class="flex space-x-3">
1405
+ <button type="button"
1406
+ class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
1407
  Clear Form
1408
  </button>
1409
+ <button type="submit"
1410
+ class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
1411
  Add Material
1412
  </button>
1413
  </div>
 
1422
  <div class="card-hover rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
1423
  <h4 class="font-semibold text-white mb-4">Common Key Types</h4>
1424
  <div class="space-y-3">
1425
+ <button
1426
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
1427
  <p class="font-medium text-white">Data Encryption Key</p>
1428
  <p class="text-xs text-gray-400">DEK for data at rest</p>
1429
  </button>
1430
+ <button
1431
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
1432
  <p class="font-medium text-white">Key Encryption Key</p>
1433
  <p class="text-xs text-gray-400">KEK for key wrapping</p>
1434
  </button>
1435
+ <button
1436
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
1437
  <p class="font-medium text-white">API Authentication</p>
1438
  <p class="text-xs text-gray-400">JWT signing key</p>
1439
  </button>
1440
+ <button
1441
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
1442
  <p class="font-medium text-white">Database Encryption</p>
1443
  <p class="text-xs text-gray-400">TDE master key</p>
1444
  </button>
 
1476
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
1477
  <script>
1478
  // Initialize feather icons immediately
1479
+ document.addEventListener('DOMContentLoaded', function () {
1480
  // Replace feather icons
1481
  feather.replace();
1482
+
1483
  // Initialize AOS with better settings
1484
  AOS.init({
1485
  duration: 400,
 
1488
  easing: 'ease-out',
1489
  delay: 0,
1490
  anchorPlacement: 'top-bottom',
1491
+ disable: function () {
1492
  // Disable AOS on mobile devices to prevent issues
1493
  return window.innerWidth < 768;
1494
  }
1495
  });
1496
+
1497
  // Force AOS refresh after a short delay
1498
  setTimeout(() => {
1499
  AOS.refresh();
 
1506
  document.querySelectorAll('.tab-content').forEach(content => {
1507
  content.classList.add('hidden');
1508
  });
1509
+
1510
  // Remove active class from all tabs
1511
  document.querySelectorAll('.flex button[onclick^="showTab"]').forEach(button => {
1512
  button.classList.remove('tab-active');
1513
  button.classList.add('text-gray-400', 'hover:text-gray-200');
1514
  });
1515
+
1516
  // Show selected tab content
1517
  document.getElementById(tabName).classList.remove('hidden');
1518
+
1519
  // Add active class to clicked tab
1520
  event.target.classList.add('tab-active');
1521
  event.target.classList.remove('text-gray-400', 'hover:text-gray-200');
1522
+
1523
  // Re-render feather icons and refresh AOS
1524
  feather.replace();
1525
  AOS.refresh();
 
1536
  });
1537
  });
1538
  }
1539
+
1540
  // Ensure all content is visible on load
1541
+ window.addEventListener('load', function () {
1542
  // Force all AOS elements to animate
1543
  document.querySelectorAll('[data-aos]').forEach(el => {
1544
  el.classList.add('aos-animate');
 
1546
  });
1547
 
1548
  // Add template auto-fill functionality
1549
+ document.addEventListener('DOMContentLoaded', function () {
1550
  // Algorithm templates
1551
  const algorithmTemplates = {
1552
  'AES-256-GCM': {
 
1581
 
1582
  // Handle template clicks
1583
  document.querySelectorAll('.card-hover button').forEach(button => {
1584
+ button.addEventListener('click', function () {
1585
  const templateName = this.querySelector('.font-medium').textContent;
1586
  if (algorithmTemplates[templateName]) {
1587
  // Fill form with template data
cboms.html CHANGED
@@ -4,7 +4,7 @@
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>CBOM Management - EY Quantum Safe</title>
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
@@ -92,12 +92,15 @@
92
  transform: translateY(100vh) translateX(0px);
93
  opacity: 0;
94
  }
 
95
  10% {
96
  opacity: 0.7;
97
  }
 
98
  90% {
99
  opacity: 0.7;
100
  }
 
101
  100% {
102
  transform: translateY(-100px) translateX(100px);
103
  opacity: 0;
@@ -145,10 +148,11 @@
145
  <div class="sidebar text-white w-64 flex-shrink-0 flex flex-col relative z-10">
146
  <div class="p-4 border-b border-white/10">
147
  <a href="index.html" class="flex items-center space-x-3 hover:opacity-80 transition-opacity">
148
- <div class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
 
149
  <i data-feather="shield" class="text-gray-900 w-5 h-5"></i>
150
  </div>
151
- <h1 class="text-xl font-bold">EY <span class="gradient-text">Quantum Safe</span></h1>
152
  </a>
153
  </div>
154
 
@@ -163,7 +167,8 @@
163
  <i data-feather="layout" class="w-5 h-5"></i>
164
  <span>Dashboard</span>
165
  </a>
166
- <a href="cboms.html" class="flex items-center space-x-3 p-3 rounded-lg bg-yellow-400/20 text-yellow-400 border border-yellow-400/30">
 
167
  <i data-feather="file-text" class="w-5 h-5"></i>
168
  <span>CBOMs</span>
169
  </a>
@@ -186,7 +191,8 @@
186
 
187
  <div class="p-4 border-t border-white/10">
188
  <div class="flex items-center space-x-3">
189
- <div class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-600 to-gray-700 flex items-center justify-center">
 
190
  <i data-feather="user" class="text-gray-300 w-5 h-5"></i>
191
  </div>
192
  <div>
@@ -200,7 +206,8 @@
200
  <!-- Main Content -->
201
  <div class="flex-1 flex flex-col overflow-hidden relative z-10">
202
  <!-- Top Navigation -->
203
- <header class="backdrop-filter backdrop-blur-lg bg-white/5 border-b border-white/10 flex items-center justify-between p-4">
 
204
  <div class="flex items-center space-x-4">
205
  <button class="md:hidden text-white">
206
  <i data-feather="menu"></i>
@@ -215,8 +222,7 @@
215
  <input type="text" placeholder="Search CBOMs..."
216
  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">
217
  </div>
218
- <button
219
- class="px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
220
  <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
221
  New CBOM
222
  </button>
@@ -229,10 +235,14 @@
229
  <div class="card-hover rounded-xl mb-6">
230
  <div class="flex border-b border-white/10 overflow-x-auto">
231
  <button class="px-6 py-4 font-medium tab-active" onclick="showTab('overview')">Overview</button>
232
- <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('create')">Create New</button>
233
- <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('import')">Import</button>
234
- <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('templates')">Templates</button>
235
- <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200" onclick="showTab('dependencies')">Dependencies</button>
 
 
 
 
236
  </div>
237
  </div>
238
 
@@ -297,13 +307,15 @@
297
  <div class="flex items-center space-x-2">
298
  <i data-feather="filter" class="text-gray-400"></i>
299
  <span class="text-sm text-gray-400">Filters:</span>
300
- <select class="bg-white/10 border border-white/20 text-white text-sm rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-yellow-400">
 
301
  <option>All Status</option>
302
  <option>Active</option>
303
  <option>Draft</option>
304
  <option>Archived</option>
305
  </select>
306
- <select class="bg-white/10 border border-white/20 text-white text-sm rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-yellow-400">
 
307
  <option>All Risk Levels</option>
308
  <option>High Risk</option>
309
  <option>Medium Risk</option>
@@ -311,8 +323,10 @@
311
  </select>
312
  </div>
313
  <div class="relative">
314
- <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4"></i>
315
- <input type="text" placeholder="Search CBOMs..." class="pl-10 pr-4 py-2 bg-white/10 border border-white/20 text-white placeholder-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:border-transparent">
 
 
316
  </div>
317
  </div>
318
  </div>
@@ -320,18 +334,21 @@
320
  <!-- CBOMs List -->
321
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
322
  <!-- CBOM Card 1 -->
323
- <div class="card-hover rounded-xl overflow-hidden risk-high" data-aos="fade-up" data-aos-delay="500">
 
324
  <div class="p-6">
325
  <div class="flex items-start justify-between mb-4">
326
  <div>
327
  <h3 class="font-semibold text-lg text-white">Enterprise Web App</h3>
328
  <p class="text-sm text-gray-400">Created 2 days ago</p>
329
  </div>
330
- <span class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Active</span>
 
331
  </div>
332
-
333
- <p class="text-sm text-gray-300 mb-4">Main customer-facing web application with payment processing capabilities</p>
334
-
 
335
  <div class="space-y-2 mb-4">
336
  <div class="flex justify-between text-sm">
337
  <span class="text-gray-400">Assets</span>
@@ -346,13 +363,15 @@
346
  <span class="text-white">12 hours ago</span>
347
  </div>
348
  </div>
349
-
350
  <div class="flex space-x-2">
351
- <button class="flex-1 px-3 py-2 bg-white/10 text-white text-sm rounded-lg hover:bg-white/20 transition-colors">
 
352
  <i data-feather="eye" class="w-4 h-4 inline mr-1"></i>
353
  View
354
  </button>
355
- <button class="flex-1 px-3 py-2 action-button text-gray-900 text-sm rounded-lg font-semibold">
 
356
  <i data-feather="play" class="w-4 h-4 inline mr-1"></i>
357
  Assess
358
  </button>
@@ -361,18 +380,21 @@
361
  </div>
362
 
363
  <!-- CBOM Card 2 -->
364
- <div class="card-hover rounded-xl overflow-hidden risk-medium" data-aos="fade-up" data-aos-delay="600">
 
365
  <div class="p-6">
366
  <div class="flex items-start justify-between mb-4">
367
  <div>
368
  <h3 class="font-semibold text-lg text-white">Payment Gateway</h3>
369
  <p class="text-sm text-gray-400">Created 1 week ago</p>
370
  </div>
371
- <span class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Active</span>
 
372
  </div>
373
-
374
- <p class="text-sm text-gray-300 mb-4">Secure payment processing system handling credit card transactions</p>
375
-
 
376
  <div class="space-y-2 mb-4">
377
  <div class="flex justify-between text-sm">
378
  <span class="text-gray-400">Assets</span>
@@ -387,13 +409,15 @@
387
  <span class="text-white">3 days ago</span>
388
  </div>
389
  </div>
390
-
391
  <div class="flex space-x-2">
392
- <button class="flex-1 px-3 py-2 bg-white/10 text-white text-sm rounded-lg hover:bg-white/20 transition-colors">
 
393
  <i data-feather="eye" class="w-4 h-4 inline mr-1"></i>
394
  View
395
  </button>
396
- <button class="flex-1 px-3 py-2 action-button text-gray-900 text-sm rounded-lg font-semibold">
 
397
  <i data-feather="play" class="w-4 h-4 inline mr-1"></i>
398
  Assess
399
  </button>
@@ -402,18 +426,21 @@
402
  </div>
403
 
404
  <!-- CBOM Card 3 -->
405
- <div class="card-hover rounded-xl overflow-hidden risk-low" data-aos="fade-up" data-aos-delay="700">
 
406
  <div class="p-6">
407
  <div class="flex items-start justify-between mb-4">
408
  <div>
409
  <h3 class="font-semibold text-lg text-white">Mobile Banking App</h3>
410
  <p class="text-sm text-gray-400">Created 2 weeks ago</p>
411
  </div>
412
- <span class="px-2 py-1 text-xs font-medium bg-blue-400/20 text-blue-400 rounded-full">Draft</span>
 
413
  </div>
414
-
415
- <p class="text-sm text-gray-300 mb-4">iOS and Android banking application for retail customers</p>
416
-
 
417
  <div class="space-y-2 mb-4">
418
  <div class="flex justify-between text-sm">
419
  <span class="text-gray-400">Assets</span>
@@ -428,13 +455,15 @@
428
  <span class="text-white">Not assessed</span>
429
  </div>
430
  </div>
431
-
432
  <div class="flex space-x-2">
433
- <button class="flex-1 px-3 py-2 bg-white/10 text-white text-sm rounded-lg hover:bg-white/20 transition-colors">
 
434
  <i data-feather="eye" class="w-4 h-4 inline mr-1"></i>
435
  View
436
  </button>
437
- <button class="flex-1 px-3 py-2 action-button text-gray-900 text-sm rounded-lg font-semibold">
 
438
  <i data-feather="play" class="w-4 h-4 inline mr-1"></i>
439
  Assess
440
  </button>
@@ -452,18 +481,19 @@
452
  <div class="lg:col-span-2">
453
  <div class="card-hover rounded-xl p-6">
454
  <h3 class="font-semibold text-lg text-white mb-6">Create New CBOM</h3>
455
-
456
  <form class="space-y-6">
457
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
458
  <div>
459
- <label class="block text-sm font-medium text-gray-300 mb-2">CBOM Name *</label>
460
- <input type="text"
 
461
  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"
462
  placeholder="Enter CBOM name">
463
  </div>
464
  <div>
465
  <label class="block text-sm font-medium text-gray-300 mb-2">Version</label>
466
- <input type="text"
467
  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"
468
  placeholder="1.0.0">
469
  </div>
@@ -471,15 +501,18 @@
471
 
472
  <div>
473
  <label class="block text-sm font-medium text-gray-300 mb-2">Description</label>
474
- <textarea
475
  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"
476
- rows="4" placeholder="Describe the purpose and scope of this CBOM"></textarea>
 
477
  </div>
478
 
479
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
480
  <div>
481
- <label class="block text-sm font-medium text-gray-300 mb-2">Application Type</label>
482
- <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">
 
 
483
  <option>Web Application</option>
484
  <option>Mobile Application</option>
485
  <option>Desktop Application</option>
@@ -489,8 +522,10 @@
489
  </select>
490
  </div>
491
  <div>
492
- <label class="block text-sm font-medium text-gray-300 mb-2">Criticality Level</label>
493
- <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">
 
 
494
  <option>Critical</option>
495
  <option>High</option>
496
  <option>Medium</option>
@@ -501,20 +536,23 @@
501
 
502
  <div>
503
  <label class="block text-sm font-medium text-gray-300 mb-2">Tags</label>
504
- <input type="text"
505
  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"
506
  placeholder="Add tags (comma separated)">
507
- <p class="text-xs text-gray-400 mt-1">e.g., production, banking, customer-facing</p>
 
508
  </div>
509
 
510
  <div class="border-t border-white/10 pt-6">
511
  <h4 class="font-medium text-white mb-4">Initial Cryptographic Assets</h4>
512
  <div class="space-y-3">
513
- <button type="button" class="w-full p-4 border-2 border-dashed border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all">
 
514
  <i data-feather="plus" class="w-5 h-5 mx-auto text-gray-400 mb-2"></i>
515
  <p class="text-sm text-gray-400">Add Asset Manually</p>
516
  </button>
517
- <button type="button" class="w-full p-4 border-2 border-dashed border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all">
 
518
  <i data-feather="upload" class="w-5 h-5 mx-auto text-gray-400 mb-2"></i>
519
  <p class="text-sm text-gray-400">Import from Integration</p>
520
  </button>
@@ -522,10 +560,12 @@
522
  </div>
523
 
524
  <div class="flex justify-end space-x-4">
525
- <button type="button" class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
 
526
  Cancel
527
  </button>
528
- <button type="submit" class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
 
529
  Create CBOM
530
  </button>
531
  </div>
@@ -537,7 +577,8 @@
537
  <div class="card-hover rounded-xl p-6">
538
  <h4 class="font-semibold text-white mb-4">Quick Start Templates</h4>
539
  <div class="space-y-3">
540
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
541
  <div class="flex items-center justify-between">
542
  <div>
543
  <p class="font-medium text-white">Web Application</p>
@@ -546,7 +587,8 @@
546
  <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
547
  </div>
548
  </button>
549
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
550
  <div class="flex items-center justify-between">
551
  <div>
552
  <p class="font-medium text-white">Microservices</p>
@@ -555,7 +597,8 @@
555
  <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
556
  </div>
557
  </button>
558
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
559
  <div class="flex items-center justify-between">
560
  <div>
561
  <p class="font-medium text-white">Legacy System</p>
@@ -572,11 +615,13 @@
572
  <div class="space-y-3">
573
  <div class="flex items-start space-x-2">
574
  <i data-feather="info" class="w-4 h-4 text-blue-400 mt-0.5"></i>
575
- <p class="text-sm text-gray-300">Use descriptive names to easily identify CBOMs</p>
 
576
  </div>
577
  <div class="flex items-start space-x-2">
578
  <i data-feather="info" class="w-4 h-4 text-blue-400 mt-0.5"></i>
579
- <p class="text-sm text-gray-300">Set appropriate criticality levels for prioritization</p>
 
580
  </div>
581
  <div class="flex items-start space-x-2">
582
  <i data-feather="info" class="w-4 h-4 text-blue-400 mt-0.5"></i>
@@ -594,25 +639,33 @@
594
  <div class="lg:col-span-2">
595
  <div class="card-hover rounded-xl p-6">
596
  <h3 class="font-semibold text-lg text-white mb-6">Import CBOM</h3>
597
-
598
  <div class="space-y-6">
599
  <div>
600
  <h4 class="font-medium text-white mb-4">1. Select Import Method</h4>
601
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
602
  <label class="cursor-pointer">
603
- <input type="radio" name="importMethod" value="file" class="sr-only peer" checked>
604
- <div class="p-4 border border-white/20 rounded-lg peer-checked:border-yellow-400 peer-checked:bg-yellow-400/10 hover:bg-white/5 transition-all">
605
- <i data-feather="file" class="w-8 h-8 mx-auto mb-2 text-gray-400 peer-checked:text-yellow-400"></i>
 
 
 
606
  <p class="font-medium text-center text-white">File Upload</p>
607
- <p class="text-xs text-center text-gray-400 mt-1">Upload CBOM file</p>
 
608
  </div>
609
  </label>
610
  <label class="cursor-pointer">
611
- <input type="radio" name="importMethod" value="integration" class="sr-only peer">
612
- <div class="p-4 border border-white/20 rounded-lg peer-checked:border-yellow-400 peer-checked:bg-yellow-400/10 hover:bg-white/5 transition-all">
613
- <i data-feather="link" class="w-8 h-8 mx-auto mb-2 text-gray-400 peer-checked:text-yellow-400"></i>
 
 
 
614
  <p class="font-medium text-center text-white">Integration</p>
615
- <p class="text-xs text-center text-gray-400 mt-1">Import from tool</p>
 
616
  </div>
617
  </label>
618
  </div>
@@ -620,35 +673,47 @@
620
 
621
  <div id="fileUploadSection">
622
  <h4 class="font-medium text-white mb-4">2. Upload File</h4>
623
- <div class="border-2 border-dashed border-white/20 rounded-lg p-8 text-center hover:border-yellow-400 transition-all">
624
- <i data-feather="upload-cloud" class="w-12 h-12 mx-auto text-gray-400 mb-4"></i>
 
 
625
  <p class="text-white font-medium mb-2">Drag & drop your CBOM file here</p>
626
  <p class="text-sm text-gray-400 mb-4">or</p>
627
- <button class="px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 transition-colors">
 
628
  Browse Files
629
  </button>
630
- <p class="text-xs text-gray-500 mt-4">Supported formats: .json, .xml, .cbom, .csv</p>
 
631
  </div>
632
  </div>
633
 
634
  <div id="integrationSection" class="hidden">
635
  <h4 class="font-medium text-white mb-4">2. Select Integration Source</h4>
636
  <div class="space-y-3">
637
- <label class="flex items-center p-3 border border-white/20 rounded-lg hover:border-yellow-400 cursor-pointer">
638
- <input type="radio" name="integration" value="venafi" class="mr-3 text-yellow-400">
 
 
639
  <div class="flex-1">
640
  <p class="font-medium text-white">Venafi</p>
641
- <p class="text-xs text-gray-400">Import from Venafi Trust Protection Platform</p>
 
642
  </div>
643
- <span class="px-2 py-1 text-xs bg-green-400/20 text-green-400 rounded-full">Connected</span>
 
644
  </label>
645
- <label class="flex items-center p-3 border border-white/20 rounded-lg hover:border-yellow-400 cursor-pointer">
646
- <input type="radio" name="integration" value="tanium" class="mr-3 text-yellow-400">
 
 
647
  <div class="flex-1">
648
  <p class="font-medium text-white">Tanium</p>
649
- <p class="text-xs text-gray-400">Import asset inventory from Tanium</p>
 
650
  </div>
651
- <span class="px-2 py-1 text-xs bg-green-400/20 text-green-400 rounded-full">Connected</span>
 
652
  </label>
653
  </div>
654
  </div>
@@ -657,25 +722,35 @@
657
  <h4 class="font-medium text-white mb-4">3. Import Options</h4>
658
  <div class="space-y-3">
659
  <div class="flex items-center space-x-3">
660
- <input type="checkbox" id="validateSchema" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400" checked>
661
- <label for="validateSchema" class="text-sm text-gray-300">Validate schema before import</label>
 
 
 
662
  </div>
663
  <div class="flex items-center space-x-3">
664
- <input type="checkbox" id="mergeExisting" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
665
- <label for="mergeExisting" class="text-sm text-gray-300">Merge with existing CBOM if name matches</label>
 
 
666
  </div>
667
  <div class="flex items-center space-x-3">
668
- <input type="checkbox" id="runAssessment" class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400" checked>
669
- <label for="runAssessment" class="text-sm text-gray-300">Run risk assessment after import</label>
 
 
 
670
  </div>
671
  </div>
672
  </div>
673
 
674
  <div class="flex justify-end space-x-4">
675
- <button type="button" class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
 
676
  Cancel
677
  </button>
678
- <button type="button" class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
 
679
  Import CBOM
680
  </button>
681
  </div>
@@ -745,17 +820,20 @@
745
  Create Template
746
  </button>
747
  </div>
748
- <p class="text-gray-300">Pre-configured templates to help you quickly create CBOMs for common application types</p>
 
749
  </div>
750
 
751
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
752
- <div class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform">
 
753
  <div class="p-6">
754
  <div class="w-12 h-12 rounded-lg bg-blue-400/20 flex items-center justify-center mb-4">
755
  <i data-feather="globe" class="w-6 h-6 text-blue-400"></i>
756
  </div>
757
  <h4 class="font-semibold text-white mb-2">Web Application</h4>
758
- <p class="text-sm text-gray-400 mb-4">Standard template for web applications with TLS, authentication, and session management</p>
 
759
  <div class="space-y-2 text-xs">
760
  <div class="flex items-center space-x-2">
761
  <i data-feather="check" class="w-3 h-3 text-green-400"></i>
@@ -779,13 +857,16 @@
779
  </div>
780
  </div>
781
 
782
- <div class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform">
 
783
  <div class="p-6">
784
- <div class="w-12 h-12 rounded-lg bg-purple-400/20 flex items-center justify-center mb-4">
 
785
  <i data-feather="smartphone" class="w-6 h-6 text-purple-400"></i>
786
  </div>
787
  <h4 class="font-semibold text-white mb-2">Mobile Application</h4>
788
- <p class="text-sm text-gray-400 mb-4">Template for mobile apps with device security, API communication, and local storage</p>
 
789
  <div class="space-y-2 text-xs">
790
  <div class="flex items-center space-x-2">
791
  <i data-feather="check" class="w-3 h-3 text-green-400"></i>
@@ -809,13 +890,15 @@
809
  </div>
810
  </div>
811
 
812
- <div class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform">
 
813
  <div class="p-6">
814
  <div class="w-12 h-12 rounded-lg bg-green-400/20 flex items-center justify-center mb-4">
815
  <i data-feather="server" class="w-6 h-6 text-green-400"></i>
816
  </div>
817
  <h4 class="font-semibold text-white mb-2">Microservices</h4>
818
- <p class="text-sm text-gray-400 mb-4">Distributed system template with service mesh, mTLS, and container security</p>
 
819
  <div class="space-y-2 text-xs">
820
  <div class="flex items-center space-x-2">
821
  <i data-feather="check" class="w-3 h-3 text-green-400"></i>
@@ -839,13 +922,15 @@
839
  </div>
840
  </div>
841
 
842
- <div class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform">
 
843
  <div class="p-6">
844
  <div class="w-12 h-12 rounded-lg bg-red-400/20 flex items-center justify-center mb-4">
845
  <i data-feather="database" class="w-6 h-6 text-red-400"></i>
846
  </div>
847
  <h4 class="font-semibold text-white mb-2">Legacy System</h4>
848
- <p class="text-sm text-gray-400 mb-4">Template for older systems with common legacy cryptographic implementations</p>
 
849
  <div class="space-y-2 text-xs">
850
  <div class="flex items-center space-x-2">
851
  <i data-feather="check" class="w-3 h-3 text-green-400"></i>
@@ -890,13 +975,14 @@
890
 
891
  <div class="mb-6">
892
  <div class="flex items-center space-x-4">
893
- <select class="px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
 
894
  <option>All CBOMs</option>
895
  <option>Enterprise Web App</option>
896
  <option>Payment Gateway</option>
897
  <option>Legacy System</option>
898
  </select>
899
- <input type="text" placeholder="Search dependencies..."
900
  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">
901
  </div>
902
  </div>
@@ -911,22 +997,28 @@
911
  <p class="text-xs text-gray-400">v3.0.11</p>
912
  </div>
913
  </div>
914
- <span class="px-2 py-1 text-xs bg-yellow-400/20 text-yellow-400 rounded-full">3 CBOMs</span>
 
 
915
  </div>
916
  <div class="p-4 border-t border-white/10">
917
  <div class="grid grid-cols-2 gap-4 mb-3">
918
  <div>
919
  <p class="text-xs text-gray-400">Used in</p>
920
- <p class="text-sm text-white">Enterprise Web App, Payment Gateway, API Service</p>
 
921
  </div>
922
  <div>
923
  <p class="text-xs text-gray-400">Risk Level</p>
924
  <p class="text-sm text-yellow-400">Medium (Quantum Vulnerable)</p>
925
  </div>
926
  </div>
927
- <div class="flex items-center justify-between pt-3 border-t border-white/10">
928
- <button class="text-xs text-blue-400 hover:text-blue-300">View Details</button>
929
- <button class="text-xs text-yellow-400 hover:text-yellow-300">Update All</button>
 
 
 
930
  </div>
931
  </div>
932
  </div>
@@ -940,7 +1032,8 @@
940
  <p class="text-xs text-gray-400">v1.70</p>
941
  </div>
942
  </div>
943
- <span class="px-2 py-1 text-xs bg-red-400/20 text-red-400 rounded-full">5 CBOMs</span>
 
944
  </div>
945
  <div class="p-4 border-t border-white/10">
946
  <div class="grid grid-cols-2 gap-4 mb-3">
@@ -953,9 +1046,12 @@
953
  <p class="text-sm font-medium text-red-400">High (Outdated)</p>
954
  </div>
955
  </div>
956
- <div class="flex items-center justify-between pt-3 border-t border-white/10">
957
- <button class="text-xs text-blue-400 hover:text-blue-300">View Details</button>
958
- <button class="text-xs text-red-400 hover:text-red-300">Urgent Update</button>
 
 
 
959
  </div>
960
  </div>
961
  </div>
@@ -969,7 +1065,9 @@
969
  <p class="text-xs text-gray-400">v1.0.19</p>
970
  </div>
971
  </div>
972
- <span class="px-2 py-1 text-xs bg-green-400/20 text-green-400 rounded-full">2 CBOMs</span>
 
 
973
  </div>
974
  <div class="p-4 border-t border-white/10">
975
  <div class="grid grid-cols-2 gap-4 mb-3">
@@ -982,8 +1080,10 @@
982
  <p class="text-sm text-green-400">Low (Quantum Safe)</p>
983
  </div>
984
  </div>
985
- <div class="flex items-center justify-between pt-3 border-t border-white/10">
986
- <button class="text-xs text-blue-400 hover:text-blue-300">View Details</button>
 
 
987
  <button class="text-xs text-gray-400" disabled>Up to date</button>
988
  </div>
989
  </div>
@@ -1022,7 +1122,8 @@
1022
  <div class="card-hover rounded-xl p-6">
1023
  <h4 class="font-semibold text-white mb-4">Quick Actions</h4>
1024
  <div class="space-y-2">
1025
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
1026
  <div class="flex items-center justify-between">
1027
  <div class="flex items-center space-x-2">
1028
  <i data-feather="refresh-cw" class="w-4 h-4 text-gray-400"></i>
@@ -1031,7 +1132,8 @@
1031
  <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
1032
  </div>
1033
  </button>
1034
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
1035
  <div class="flex items-center justify-between">
1036
  <div class="flex items-center space-x-2">
1037
  <i data-feather="alert-triangle" class="w-4 h-4 text-gray-400"></i>
@@ -1040,7 +1142,8 @@
1040
  <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
1041
  </div>
1042
  </button>
1043
- <button class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
 
1044
  <div class="flex items-center justify-between">
1045
  <div class="flex items-center space-x-2">
1046
  <i data-feather="file-text" class="w-4 h-4 text-gray-400"></i>
@@ -1061,10 +1164,10 @@
1061
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
1062
  <script>
1063
  // Initialize feather icons immediately
1064
- document.addEventListener('DOMContentLoaded', function() {
1065
  // Replace feather icons
1066
  feather.replace();
1067
-
1068
  // Initialize AOS with better settings
1069
  AOS.init({
1070
  duration: 400,
@@ -1073,12 +1176,12 @@
1073
  easing: 'ease-out',
1074
  delay: 0,
1075
  anchorPlacement: 'top-bottom',
1076
- disable: function() {
1077
  // Disable AOS on mobile devices to prevent issues
1078
  return window.innerWidth < 768;
1079
  }
1080
  });
1081
-
1082
  // Force AOS refresh after a short delay
1083
  setTimeout(() => {
1084
  AOS.refresh();
@@ -1091,7 +1194,7 @@
1091
  document.querySelectorAll('.tab-content').forEach(content => {
1092
  content.classList.add('hidden');
1093
  });
1094
-
1095
  // Remove active class from all tabs
1096
  document.querySelectorAll('.flex button').forEach(button => {
1097
  if (button.onclick && button.onclick.toString().includes('showTab')) {
@@ -1099,20 +1202,20 @@
1099
  button.classList.add('text-gray-400', 'hover:text-gray-200');
1100
  }
1101
  });
1102
-
1103
  // Show selected tab content
1104
  document.getElementById(tabName).classList.remove('hidden');
1105
-
1106
  // Add active class to clicked tab
1107
  event.target.classList.add('tab-active');
1108
  event.target.classList.remove('text-gray-400', 'hover:text-gray-200');
1109
-
1110
  // Re-render feather icons
1111
  feather.replace();
1112
  }
1113
 
1114
  // Import method toggle
1115
- document.addEventListener('change', function(e) {
1116
  if (e.target.name === 'importMethod') {
1117
  if (e.target.value === 'file') {
1118
  document.getElementById('fileUploadSection').classList.remove('hidden');
@@ -1125,7 +1228,7 @@
1125
  });
1126
 
1127
  // Ensure all content is visible on load
1128
- window.addEventListener('load', function() {
1129
  // Force all AOS elements to animate
1130
  document.querySelectorAll('[data-aos]').forEach(el => {
1131
  el.classList.add('aos-animate');
 
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>CBOM Manager - Quantum Safe</title>
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 
92
  transform: translateY(100vh) translateX(0px);
93
  opacity: 0;
94
  }
95
+
96
  10% {
97
  opacity: 0.7;
98
  }
99
+
100
  90% {
101
  opacity: 0.7;
102
  }
103
+
104
  100% {
105
  transform: translateY(-100px) translateX(100px);
106
  opacity: 0;
 
148
  <div class="sidebar text-white w-64 flex-shrink-0 flex flex-col relative z-10">
149
  <div class="p-4 border-b border-white/10">
150
  <a href="index.html" class="flex items-center space-x-3 hover:opacity-80 transition-opacity">
151
+ <div
152
+ class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
153
  <i data-feather="shield" class="text-gray-900 w-5 h-5"></i>
154
  </div>
155
+ <h1 class="text-xl font-bold"><span class="gradient-text">Quantum Safe</span></h1>
156
  </a>
157
  </div>
158
 
 
167
  <i data-feather="layout" class="w-5 h-5"></i>
168
  <span>Dashboard</span>
169
  </a>
170
+ <a href="cboms.html"
171
+ class="flex items-center space-x-3 p-3 rounded-lg bg-yellow-400/20 text-yellow-400 border border-yellow-400/30">
172
  <i data-feather="file-text" class="w-5 h-5"></i>
173
  <span>CBOMs</span>
174
  </a>
 
191
 
192
  <div class="p-4 border-t border-white/10">
193
  <div class="flex items-center space-x-3">
194
+ <div
195
+ class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-600 to-gray-700 flex items-center justify-center">
196
  <i data-feather="user" class="text-gray-300 w-5 h-5"></i>
197
  </div>
198
  <div>
 
206
  <!-- Main Content -->
207
  <div class="flex-1 flex flex-col overflow-hidden relative z-10">
208
  <!-- Top Navigation -->
209
+ <header
210
+ class="backdrop-filter backdrop-blur-lg bg-white/5 border-b border-white/10 flex items-center justify-between p-4">
211
  <div class="flex items-center space-x-4">
212
  <button class="md:hidden text-white">
213
  <i data-feather="menu"></i>
 
222
  <input type="text" placeholder="Search CBOMs..."
223
  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">
224
  </div>
225
+ <button class="px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
 
226
  <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
227
  New CBOM
228
  </button>
 
235
  <div class="card-hover rounded-xl mb-6">
236
  <div class="flex border-b border-white/10 overflow-x-auto">
237
  <button class="px-6 py-4 font-medium tab-active" onclick="showTab('overview')">Overview</button>
238
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"
239
+ onclick="showTab('create')">Create New</button>
240
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"
241
+ onclick="showTab('import')">Import</button>
242
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"
243
+ onclick="showTab('templates')">Templates</button>
244
+ <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200"
245
+ onclick="showTab('dependencies')">Dependencies</button>
246
  </div>
247
  </div>
248
 
 
307
  <div class="flex items-center space-x-2">
308
  <i data-feather="filter" class="text-gray-400"></i>
309
  <span class="text-sm text-gray-400">Filters:</span>
310
+ <select
311
+ class="bg-white/10 border border-white/20 text-white text-sm rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-yellow-400">
312
  <option>All Status</option>
313
  <option>Active</option>
314
  <option>Draft</option>
315
  <option>Archived</option>
316
  </select>
317
+ <select
318
+ class="bg-white/10 border border-white/20 text-white text-sm rounded-lg px-3 py-1 focus:outline-none focus:ring-2 focus:ring-yellow-400">
319
  <option>All Risk Levels</option>
320
  <option>High Risk</option>
321
  <option>Medium Risk</option>
 
323
  </select>
324
  </div>
325
  <div class="relative">
326
+ <i data-feather="search"
327
+ class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4"></i>
328
+ <input type="text" placeholder="Search CBOMs..."
329
+ 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">
330
  </div>
331
  </div>
332
  </div>
 
334
  <!-- CBOMs List -->
335
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
336
  <!-- CBOM Card 1 -->
337
+ <div class="card-hover rounded-xl overflow-hidden risk-high" data-aos="fade-up"
338
+ data-aos-delay="500">
339
  <div class="p-6">
340
  <div class="flex items-start justify-between mb-4">
341
  <div>
342
  <h3 class="font-semibold text-lg text-white">Enterprise Web App</h3>
343
  <p class="text-sm text-gray-400">Created 2 days ago</p>
344
  </div>
345
+ <span
346
+ class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Active</span>
347
  </div>
348
+
349
+ <p class="text-sm text-gray-300 mb-4">Main customer-facing web application with payment
350
+ processing capabilities</p>
351
+
352
  <div class="space-y-2 mb-4">
353
  <div class="flex justify-between text-sm">
354
  <span class="text-gray-400">Assets</span>
 
363
  <span class="text-white">12 hours ago</span>
364
  </div>
365
  </div>
366
+
367
  <div class="flex space-x-2">
368
+ <button
369
+ class="flex-1 px-3 py-2 bg-white/10 text-white text-sm rounded-lg hover:bg-white/20 transition-colors">
370
  <i data-feather="eye" class="w-4 h-4 inline mr-1"></i>
371
  View
372
  </button>
373
+ <button
374
+ class="flex-1 px-3 py-2 action-button text-gray-900 text-sm rounded-lg font-semibold">
375
  <i data-feather="play" class="w-4 h-4 inline mr-1"></i>
376
  Assess
377
  </button>
 
380
  </div>
381
 
382
  <!-- CBOM Card 2 -->
383
+ <div class="card-hover rounded-xl overflow-hidden risk-medium" data-aos="fade-up"
384
+ data-aos-delay="600">
385
  <div class="p-6">
386
  <div class="flex items-start justify-between mb-4">
387
  <div>
388
  <h3 class="font-semibold text-lg text-white">Payment Gateway</h3>
389
  <p class="text-sm text-gray-400">Created 1 week ago</p>
390
  </div>
391
+ <span
392
+ class="px-2 py-1 text-xs font-medium bg-green-400/20 text-green-400 rounded-full">Active</span>
393
  </div>
394
+
395
+ <p class="text-sm text-gray-300 mb-4">Secure payment processing system handling credit
396
+ card transactions</p>
397
+
398
  <div class="space-y-2 mb-4">
399
  <div class="flex justify-between text-sm">
400
  <span class="text-gray-400">Assets</span>
 
409
  <span class="text-white">3 days ago</span>
410
  </div>
411
  </div>
412
+
413
  <div class="flex space-x-2">
414
+ <button
415
+ class="flex-1 px-3 py-2 bg-white/10 text-white text-sm rounded-lg hover:bg-white/20 transition-colors">
416
  <i data-feather="eye" class="w-4 h-4 inline mr-1"></i>
417
  View
418
  </button>
419
+ <button
420
+ class="flex-1 px-3 py-2 action-button text-gray-900 text-sm rounded-lg font-semibold">
421
  <i data-feather="play" class="w-4 h-4 inline mr-1"></i>
422
  Assess
423
  </button>
 
426
  </div>
427
 
428
  <!-- CBOM Card 3 -->
429
+ <div class="card-hover rounded-xl overflow-hidden risk-low" data-aos="fade-up"
430
+ data-aos-delay="700">
431
  <div class="p-6">
432
  <div class="flex items-start justify-between mb-4">
433
  <div>
434
  <h3 class="font-semibold text-lg text-white">Mobile Banking App</h3>
435
  <p class="text-sm text-gray-400">Created 2 weeks ago</p>
436
  </div>
437
+ <span
438
+ class="px-2 py-1 text-xs font-medium bg-blue-400/20 text-blue-400 rounded-full">Draft</span>
439
  </div>
440
+
441
+ <p class="text-sm text-gray-300 mb-4">iOS and Android banking application for retail
442
+ customers</p>
443
+
444
  <div class="space-y-2 mb-4">
445
  <div class="flex justify-between text-sm">
446
  <span class="text-gray-400">Assets</span>
 
455
  <span class="text-white">Not assessed</span>
456
  </div>
457
  </div>
458
+
459
  <div class="flex space-x-2">
460
+ <button
461
+ class="flex-1 px-3 py-2 bg-white/10 text-white text-sm rounded-lg hover:bg-white/20 transition-colors">
462
  <i data-feather="eye" class="w-4 h-4 inline mr-1"></i>
463
  View
464
  </button>
465
+ <button
466
+ class="flex-1 px-3 py-2 action-button text-gray-900 text-sm rounded-lg font-semibold">
467
  <i data-feather="play" class="w-4 h-4 inline mr-1"></i>
468
  Assess
469
  </button>
 
481
  <div class="lg:col-span-2">
482
  <div class="card-hover rounded-xl p-6">
483
  <h3 class="font-semibold text-lg text-white mb-6">Create New CBOM</h3>
484
+
485
  <form class="space-y-6">
486
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
487
  <div>
488
+ <label class="block text-sm font-medium text-gray-300 mb-2">CBOM Name
489
+ *</label>
490
+ <input type="text"
491
  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"
492
  placeholder="Enter CBOM name">
493
  </div>
494
  <div>
495
  <label class="block text-sm font-medium text-gray-300 mb-2">Version</label>
496
+ <input type="text"
497
  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"
498
  placeholder="1.0.0">
499
  </div>
 
501
 
502
  <div>
503
  <label class="block text-sm font-medium text-gray-300 mb-2">Description</label>
504
+ <textarea
505
  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"
506
+ rows="4"
507
+ placeholder="Describe the purpose and scope of this CBOM"></textarea>
508
  </div>
509
 
510
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
511
  <div>
512
+ <label class="block text-sm font-medium text-gray-300 mb-2">Application
513
+ Type</label>
514
+ <select
515
+ 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">
516
  <option>Web Application</option>
517
  <option>Mobile Application</option>
518
  <option>Desktop Application</option>
 
522
  </select>
523
  </div>
524
  <div>
525
+ <label class="block text-sm font-medium text-gray-300 mb-2">Criticality
526
+ Level</label>
527
+ <select
528
+ 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">
529
  <option>Critical</option>
530
  <option>High</option>
531
  <option>Medium</option>
 
536
 
537
  <div>
538
  <label class="block text-sm font-medium text-gray-300 mb-2">Tags</label>
539
+ <input type="text"
540
  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"
541
  placeholder="Add tags (comma separated)">
542
+ <p class="text-xs text-gray-400 mt-1">e.g., production, banking, customer-facing
543
+ </p>
544
  </div>
545
 
546
  <div class="border-t border-white/10 pt-6">
547
  <h4 class="font-medium text-white mb-4">Initial Cryptographic Assets</h4>
548
  <div class="space-y-3">
549
+ <button type="button"
550
+ class="w-full p-4 border-2 border-dashed border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all">
551
  <i data-feather="plus" class="w-5 h-5 mx-auto text-gray-400 mb-2"></i>
552
  <p class="text-sm text-gray-400">Add Asset Manually</p>
553
  </button>
554
+ <button type="button"
555
+ class="w-full p-4 border-2 border-dashed border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all">
556
  <i data-feather="upload" class="w-5 h-5 mx-auto text-gray-400 mb-2"></i>
557
  <p class="text-sm text-gray-400">Import from Integration</p>
558
  </button>
 
560
  </div>
561
 
562
  <div class="flex justify-end space-x-4">
563
+ <button type="button"
564
+ class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
565
  Cancel
566
  </button>
567
+ <button type="submit"
568
+ class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
569
  Create CBOM
570
  </button>
571
  </div>
 
577
  <div class="card-hover rounded-xl p-6">
578
  <h4 class="font-semibold text-white mb-4">Quick Start Templates</h4>
579
  <div class="space-y-3">
580
+ <button
581
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
582
  <div class="flex items-center justify-between">
583
  <div>
584
  <p class="font-medium text-white">Web Application</p>
 
587
  <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
588
  </div>
589
  </button>
590
+ <button
591
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
592
  <div class="flex items-center justify-between">
593
  <div>
594
  <p class="font-medium text-white">Microservices</p>
 
597
  <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
598
  </div>
599
  </button>
600
+ <button
601
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
602
  <div class="flex items-center justify-between">
603
  <div>
604
  <p class="font-medium text-white">Legacy System</p>
 
615
  <div class="space-y-3">
616
  <div class="flex items-start space-x-2">
617
  <i data-feather="info" class="w-4 h-4 text-blue-400 mt-0.5"></i>
618
+ <p class="text-sm text-gray-300">Use descriptive names to easily identify CBOMs
619
+ </p>
620
  </div>
621
  <div class="flex items-start space-x-2">
622
  <i data-feather="info" class="w-4 h-4 text-blue-400 mt-0.5"></i>
623
+ <p class="text-sm text-gray-300">Set appropriate criticality levels for
624
+ prioritization</p>
625
  </div>
626
  <div class="flex items-start space-x-2">
627
  <i data-feather="info" class="w-4 h-4 text-blue-400 mt-0.5"></i>
 
639
  <div class="lg:col-span-2">
640
  <div class="card-hover rounded-xl p-6">
641
  <h3 class="font-semibold text-lg text-white mb-6">Import CBOM</h3>
642
+
643
  <div class="space-y-6">
644
  <div>
645
  <h4 class="font-medium text-white mb-4">1. Select Import Method</h4>
646
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
647
  <label class="cursor-pointer">
648
+ <input type="radio" name="importMethod" value="file"
649
+ class="sr-only peer" checked>
650
+ <div
651
+ class="p-4 border border-white/20 rounded-lg peer-checked:border-yellow-400 peer-checked:bg-yellow-400/10 hover:bg-white/5 transition-all">
652
+ <i data-feather="file"
653
+ class="w-8 h-8 mx-auto mb-2 text-gray-400 peer-checked:text-yellow-400"></i>
654
  <p class="font-medium text-center text-white">File Upload</p>
655
+ <p class="text-xs text-center text-gray-400 mt-1">Upload CBOM file
656
+ </p>
657
  </div>
658
  </label>
659
  <label class="cursor-pointer">
660
+ <input type="radio" name="importMethod" value="integration"
661
+ class="sr-only peer">
662
+ <div
663
+ class="p-4 border border-white/20 rounded-lg peer-checked:border-yellow-400 peer-checked:bg-yellow-400/10 hover:bg-white/5 transition-all">
664
+ <i data-feather="link"
665
+ class="w-8 h-8 mx-auto mb-2 text-gray-400 peer-checked:text-yellow-400"></i>
666
  <p class="font-medium text-center text-white">Integration</p>
667
+ <p class="text-xs text-center text-gray-400 mt-1">Import from tool
668
+ </p>
669
  </div>
670
  </label>
671
  </div>
 
673
 
674
  <div id="fileUploadSection">
675
  <h4 class="font-medium text-white mb-4">2. Upload File</h4>
676
+ <div
677
+ class="border-2 border-dashed border-white/20 rounded-lg p-8 text-center hover:border-yellow-400 transition-all">
678
+ <i data-feather="upload-cloud"
679
+ class="w-12 h-12 mx-auto text-gray-400 mb-4"></i>
680
  <p class="text-white font-medium mb-2">Drag & drop your CBOM file here</p>
681
  <p class="text-sm text-gray-400 mb-4">or</p>
682
+ <button
683
+ class="px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 transition-colors">
684
  Browse Files
685
  </button>
686
+ <p class="text-xs text-gray-500 mt-4">Supported formats: .json, .xml, .cbom,
687
+ .csv</p>
688
  </div>
689
  </div>
690
 
691
  <div id="integrationSection" class="hidden">
692
  <h4 class="font-medium text-white mb-4">2. Select Integration Source</h4>
693
  <div class="space-y-3">
694
+ <label
695
+ class="flex items-center p-3 border border-white/20 rounded-lg hover:border-yellow-400 cursor-pointer">
696
+ <input type="radio" name="integration" value="venafi"
697
+ class="mr-3 text-yellow-400">
698
  <div class="flex-1">
699
  <p class="font-medium text-white">Venafi</p>
700
+ <p class="text-xs text-gray-400">Import from Venafi Trust Protection
701
+ Platform</p>
702
  </div>
703
+ <span
704
+ class="px-2 py-1 text-xs bg-green-400/20 text-green-400 rounded-full">Connected</span>
705
  </label>
706
+ <label
707
+ class="flex items-center p-3 border border-white/20 rounded-lg hover:border-yellow-400 cursor-pointer">
708
+ <input type="radio" name="integration" value="tanium"
709
+ class="mr-3 text-yellow-400">
710
  <div class="flex-1">
711
  <p class="font-medium text-white">Tanium</p>
712
+ <p class="text-xs text-gray-400">Import asset inventory from Tanium
713
+ </p>
714
  </div>
715
+ <span
716
+ class="px-2 py-1 text-xs bg-green-400/20 text-green-400 rounded-full">Connected</span>
717
  </label>
718
  </div>
719
  </div>
 
722
  <h4 class="font-medium text-white mb-4">3. Import Options</h4>
723
  <div class="space-y-3">
724
  <div class="flex items-center space-x-3">
725
+ <input type="checkbox" id="validateSchema"
726
+ class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400"
727
+ checked>
728
+ <label for="validateSchema" class="text-sm text-gray-300">Validate
729
+ schema before import</label>
730
  </div>
731
  <div class="flex items-center space-x-3">
732
+ <input type="checkbox" id="mergeExisting"
733
+ class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400">
734
+ <label for="mergeExisting" class="text-sm text-gray-300">Merge with
735
+ existing CBOM if name matches</label>
736
  </div>
737
  <div class="flex items-center space-x-3">
738
+ <input type="checkbox" id="runAssessment"
739
+ class="rounded border-gray-600 text-yellow-400 focus:ring-yellow-400"
740
+ checked>
741
+ <label for="runAssessment" class="text-sm text-gray-300">Run risk
742
+ assessment after import</label>
743
  </div>
744
  </div>
745
  </div>
746
 
747
  <div class="flex justify-end space-x-4">
748
+ <button type="button"
749
+ class="px-6 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">
750
  Cancel
751
  </button>
752
+ <button type="button"
753
+ class="px-6 py-2 action-button text-gray-900 rounded-lg font-semibold">
754
  Import CBOM
755
  </button>
756
  </div>
 
820
  Create Template
821
  </button>
822
  </div>
823
+ <p class="text-gray-300">Pre-configured templates to help you quickly create CBOMs for common
824
+ application types</p>
825
  </div>
826
 
827
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
828
+ <div
829
+ class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform">
830
  <div class="p-6">
831
  <div class="w-12 h-12 rounded-lg bg-blue-400/20 flex items-center justify-center mb-4">
832
  <i data-feather="globe" class="w-6 h-6 text-blue-400"></i>
833
  </div>
834
  <h4 class="font-semibold text-white mb-2">Web Application</h4>
835
+ <p class="text-sm text-gray-400 mb-4">Standard template for web applications with TLS,
836
+ authentication, and session management</p>
837
  <div class="space-y-2 text-xs">
838
  <div class="flex items-center space-x-2">
839
  <i data-feather="check" class="w-3 h-3 text-green-400"></i>
 
857
  </div>
858
  </div>
859
 
860
+ <div
861
+ class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform">
862
  <div class="p-6">
863
+ <div
864
+ class="w-12 h-12 rounded-lg bg-purple-400/20 flex items-center justify-center mb-4">
865
  <i data-feather="smartphone" class="w-6 h-6 text-purple-400"></i>
866
  </div>
867
  <h4 class="font-semibold text-white mb-2">Mobile Application</h4>
868
+ <p class="text-sm text-gray-400 mb-4">Template for mobile apps with device security, API
869
+ communication, and local storage</p>
870
  <div class="space-y-2 text-xs">
871
  <div class="flex items-center space-x-2">
872
  <i data-feather="check" class="w-3 h-3 text-green-400"></i>
 
890
  </div>
891
  </div>
892
 
893
+ <div
894
+ class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform">
895
  <div class="p-6">
896
  <div class="w-12 h-12 rounded-lg bg-green-400/20 flex items-center justify-center mb-4">
897
  <i data-feather="server" class="w-6 h-6 text-green-400"></i>
898
  </div>
899
  <h4 class="font-semibold text-white mb-2">Microservices</h4>
900
+ <p class="text-sm text-gray-400 mb-4">Distributed system template with service mesh,
901
+ mTLS, and container security</p>
902
  <div class="space-y-2 text-xs">
903
  <div class="flex items-center space-x-2">
904
  <i data-feather="check" class="w-3 h-3 text-green-400"></i>
 
922
  </div>
923
  </div>
924
 
925
+ <div
926
+ class="card-hover rounded-xl overflow-hidden cursor-pointer hover:scale-105 transition-transform">
927
  <div class="p-6">
928
  <div class="w-12 h-12 rounded-lg bg-red-400/20 flex items-center justify-center mb-4">
929
  <i data-feather="database" class="w-6 h-6 text-red-400"></i>
930
  </div>
931
  <h4 class="font-semibold text-white mb-2">Legacy System</h4>
932
+ <p class="text-sm text-gray-400 mb-4">Template for older systems with common legacy
933
+ cryptographic implementations</p>
934
  <div class="space-y-2 text-xs">
935
  <div class="flex items-center space-x-2">
936
  <i data-feather="check" class="w-3 h-3 text-green-400"></i>
 
975
 
976
  <div class="mb-6">
977
  <div class="flex items-center space-x-4">
978
+ <select
979
+ class="px-3 py-2 bg-white/10 border border-white/20 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
980
  <option>All CBOMs</option>
981
  <option>Enterprise Web App</option>
982
  <option>Payment Gateway</option>
983
  <option>Legacy System</option>
984
  </select>
985
+ <input type="text" placeholder="Search dependencies..."
986
  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">
987
  </div>
988
  </div>
 
997
  <p class="text-xs text-gray-400">v3.0.11</p>
998
  </div>
999
  </div>
1000
+ <span
1001
+ class="px-2 py-1 text-xs bg-yellow-400/20 text-yellow-400 rounded-full">3
1002
+ CBOMs</span>
1003
  </div>
1004
  <div class="p-4 border-t border-white/10">
1005
  <div class="grid grid-cols-2 gap-4 mb-3">
1006
  <div>
1007
  <p class="text-xs text-gray-400">Used in</p>
1008
+ <p class="text-sm text-white">Enterprise Web App, Payment Gateway,
1009
+ API Service</p>
1010
  </div>
1011
  <div>
1012
  <p class="text-xs text-gray-400">Risk Level</p>
1013
  <p class="text-sm text-yellow-400">Medium (Quantum Vulnerable)</p>
1014
  </div>
1015
  </div>
1016
+ <div
1017
+ class="flex items-center justify-between pt-3 border-t border-white/10">
1018
+ <button class="text-xs text-blue-400 hover:text-blue-300">View
1019
+ Details</button>
1020
+ <button class="text-xs text-yellow-400 hover:text-yellow-300">Update
1021
+ All</button>
1022
  </div>
1023
  </div>
1024
  </div>
 
1032
  <p class="text-xs text-gray-400">v1.70</p>
1033
  </div>
1034
  </div>
1035
+ <span class="px-2 py-1 text-xs bg-red-400/20 text-red-400 rounded-full">5
1036
+ CBOMs</span>
1037
  </div>
1038
  <div class="p-4 border-t border-white/10">
1039
  <div class="grid grid-cols-2 gap-4 mb-3">
 
1046
  <p class="text-sm font-medium text-red-400">High (Outdated)</p>
1047
  </div>
1048
  </div>
1049
+ <div
1050
+ class="flex items-center justify-between pt-3 border-t border-white/10">
1051
+ <button class="text-xs text-blue-400 hover:text-blue-300">View
1052
+ Details</button>
1053
+ <button class="text-xs text-red-400 hover:text-red-300">Urgent
1054
+ Update</button>
1055
  </div>
1056
  </div>
1057
  </div>
 
1065
  <p class="text-xs text-gray-400">v1.0.19</p>
1066
  </div>
1067
  </div>
1068
+ <span
1069
+ class="px-2 py-1 text-xs bg-green-400/20 text-green-400 rounded-full">2
1070
+ CBOMs</span>
1071
  </div>
1072
  <div class="p-4 border-t border-white/10">
1073
  <div class="grid grid-cols-2 gap-4 mb-3">
 
1080
  <p class="text-sm text-green-400">Low (Quantum Safe)</p>
1081
  </div>
1082
  </div>
1083
+ <div
1084
+ class="flex items-center justify-between pt-3 border-t border-white/10">
1085
+ <button class="text-xs text-blue-400 hover:text-blue-300">View
1086
+ Details</button>
1087
  <button class="text-xs text-gray-400" disabled>Up to date</button>
1088
  </div>
1089
  </div>
 
1122
  <div class="card-hover rounded-xl p-6">
1123
  <h4 class="font-semibold text-white mb-4">Quick Actions</h4>
1124
  <div class="space-y-2">
1125
+ <button
1126
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
1127
  <div class="flex items-center justify-between">
1128
  <div class="flex items-center space-x-2">
1129
  <i data-feather="refresh-cw" class="w-4 h-4 text-gray-400"></i>
 
1132
  <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
1133
  </div>
1134
  </button>
1135
+ <button
1136
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
1137
  <div class="flex items-center justify-between">
1138
  <div class="flex items-center space-x-2">
1139
  <i data-feather="alert-triangle" class="w-4 h-4 text-gray-400"></i>
 
1142
  <i data-feather="chevron-right" class="w-4 h-4 text-gray-400"></i>
1143
  </div>
1144
  </button>
1145
+ <button
1146
+ class="w-full p-3 border border-white/20 rounded-lg hover:border-yellow-400 hover:bg-white/5 transition-all text-left">
1147
  <div class="flex items-center justify-between">
1148
  <div class="flex items-center space-x-2">
1149
  <i data-feather="file-text" class="w-4 h-4 text-gray-400"></i>
 
1164
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
1165
  <script>
1166
  // Initialize feather icons immediately
1167
+ document.addEventListener('DOMContentLoaded', function () {
1168
  // Replace feather icons
1169
  feather.replace();
1170
+
1171
  // Initialize AOS with better settings
1172
  AOS.init({
1173
  duration: 400,
 
1176
  easing: 'ease-out',
1177
  delay: 0,
1178
  anchorPlacement: 'top-bottom',
1179
+ disable: function () {
1180
  // Disable AOS on mobile devices to prevent issues
1181
  return window.innerWidth < 768;
1182
  }
1183
  });
1184
+
1185
  // Force AOS refresh after a short delay
1186
  setTimeout(() => {
1187
  AOS.refresh();
 
1194
  document.querySelectorAll('.tab-content').forEach(content => {
1195
  content.classList.add('hidden');
1196
  });
1197
+
1198
  // Remove active class from all tabs
1199
  document.querySelectorAll('.flex button').forEach(button => {
1200
  if (button.onclick && button.onclick.toString().includes('showTab')) {
 
1202
  button.classList.add('text-gray-400', 'hover:text-gray-200');
1203
  }
1204
  });
1205
+
1206
  // Show selected tab content
1207
  document.getElementById(tabName).classList.remove('hidden');
1208
+
1209
  // Add active class to clicked tab
1210
  event.target.classList.add('tab-active');
1211
  event.target.classList.remove('text-gray-400', 'hover:text-gray-200');
1212
+
1213
  // Re-render feather icons
1214
  feather.replace();
1215
  }
1216
 
1217
  // Import method toggle
1218
+ document.addEventListener('change', function (e) {
1219
  if (e.target.name === 'importMethod') {
1220
  if (e.target.value === 'file') {
1221
  document.getElementById('fileUploadSection').classList.remove('hidden');
 
1228
  });
1229
 
1230
  // Ensure all content is visible on load
1231
+ window.addEventListener('load', function () {
1232
  // Force all AOS elements to animate
1233
  document.querySelectorAll('[data-aos]').forEach(el => {
1234
  el.classList.add('aos-animate');
dashboard.html CHANGED
@@ -4,7 +4,7 @@
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>EY Quantum Safe - Dashboard</title>
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
@@ -151,7 +151,7 @@
151
  class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
152
  <i data-feather="shield" class="text-gray-900 w-5 h-5"></i>
153
  </div>
154
- <h1 class="text-xl font-bold">EY <span class="gradient-text">Quantum Safe</span></h1>
155
  </a>
156
  </div>
157
 
 
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Quantum Safe - Dashboard</title>
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 
151
  class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
152
  <i data-feather="shield" class="text-gray-900 w-5 h-5"></i>
153
  </div>
154
+ <h1 class="text-xl font-bold"><span class="gradient-text">Quantum Safe</span></h1>
155
  </a>
156
  </div>
157
 
index.html CHANGED
@@ -4,7 +4,7 @@
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>EY Quantum Safe - Your Quantum-Safe Migration Journey</title>
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
@@ -295,14 +295,12 @@
295
  <nav class="relative z-50 backdrop-filter backdrop-blur-lg bg-white/5 border-b border-white/10">
296
  <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4">
297
  <div class="flex items-center justify-between">
298
- <div class="flex items-center space-x-2 sm:space-x-4">
299
  <div
300
- class="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
301
- <i data-feather="shield" class="text-gray-900 w-5 h-5 sm:w-6 sm:h-6"></i>
302
  </div>
303
- <h1 class="text-lg sm:text-2xl font-bold text-white">EY <span class="gradient-text">Quantum
304
- Safe</span>
305
- </h1>
306
  </div>
307
 
308
  <!-- Mobile menu button -->
 
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Quantum Safe - Your Quantum-Safe Migration Journey</title>
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
 
295
  <nav class="relative z-50 backdrop-filter backdrop-blur-lg bg-white/5 border-b border-white/10">
296
  <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4">
297
  <div class="flex items-center justify-between">
298
+ <div class="flex items-center space-x-3">
299
  <div
300
+ class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
301
+ <i data-feather="shield" class="text-gray-900 w-5 h-5"></i>
302
  </div>
303
+ <h1 class="text-xl font-bold text-white"><span class="gradient-text">Quantum Safe</span></h1>
 
 
304
  </div>
305
 
306
  <!-- Mobile menu button -->
integrations.html CHANGED
@@ -4,7 +4,7 @@
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Integrations Management - EY Quantum Safe</title>
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
@@ -88,9 +88,12 @@
88
  }
89
 
90
  @keyframes pulse {
91
- 0%, 100% {
 
 
92
  opacity: 1;
93
  }
 
94
  50% {
95
  opacity: 0.7;
96
  }
@@ -111,12 +114,15 @@
111
  transform: translateY(100vh) translateX(0px);
112
  opacity: 0;
113
  }
 
114
  10% {
115
  opacity: 0.7;
116
  }
 
117
  90% {
118
  opacity: 0.7;
119
  }
 
120
  100% {
121
  transform: translateY(-100px) translateX(100px);
122
  opacity: 0;
@@ -164,10 +170,11 @@
164
  <div class="sidebar text-white w-64 flex-shrink-0 flex flex-col relative z-10">
165
  <div class="p-4 border-b border-white/10">
166
  <a href="index.html" class="flex items-center space-x-3 hover:opacity-80 transition-opacity">
167
- <div class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
 
168
  <i data-feather="shield" class="text-gray-900 w-5 h-5"></i>
169
  </div>
170
- <h1 class="text-xl font-bold">EY <span class="gradient-text">Quantum Safe</span></h1>
171
  </a>
172
  </div>
173
 
@@ -192,7 +199,8 @@
192
  <i data-feather="lock" class="w-5 h-5"></i>
193
  <span>Assets</span>
194
  </a>
195
- <a href="integrations.html" class="flex items-center space-x-3 p-3 rounded-lg bg-yellow-400/20 text-yellow-400 border border-yellow-400/30">
 
196
  <i data-feather="link" class="w-5 h-5"></i>
197
  <span>Integrations</span>
198
  </a>
@@ -205,7 +213,8 @@
205
 
206
  <div class="p-4 border-t border-white/10">
207
  <div class="flex items-center space-x-3">
208
- <div class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-600 to-gray-700 flex items-center justify-center">
 
209
  <i data-feather="user" class="text-gray-300 w-5 h-5"></i>
210
  </div>
211
  <div>
@@ -219,7 +228,8 @@
219
  <!-- Main Content -->
220
  <div class="flex-1 flex flex-col overflow-hidden relative z-10">
221
  <!-- Top Navigation -->
222
- <header class="backdrop-filter backdrop-blur-lg bg-white/5 border-b border-white/10 flex items-center justify-between p-4">
 
223
  <div class="flex items-center space-x-4">
224
  <button class="md:hidden text-white">
225
  <i data-feather="menu"></i>
@@ -234,8 +244,7 @@
234
  <input type="text" placeholder="Search integrations..."
235
  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">
236
  </div>
237
- <button
238
- class="px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
239
  <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
240
  Add Integration
241
  </button>
@@ -490,8 +499,7 @@
490
  </div>
491
 
492
  <div class="flex space-x-2">
493
- <button
494
- class="flex-1 px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
495
  <i data-feather="play" class="w-4 h-4 inline mr-2"></i>
496
  Complete Setup
497
  </button>
@@ -603,10 +611,10 @@
603
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
604
  <script>
605
  // Initialize feather icons immediately
606
- document.addEventListener('DOMContentLoaded', function() {
607
  // Replace feather icons
608
  feather.replace();
609
-
610
  // Initialize AOS with better settings
611
  AOS.init({
612
  duration: 400,
@@ -615,12 +623,12 @@
615
  easing: 'ease-out',
616
  delay: 0,
617
  anchorPlacement: 'top-bottom',
618
- disable: function() {
619
  // Disable AOS on mobile devices to prevent issues
620
  return window.innerWidth < 768;
621
  }
622
  });
623
-
624
  // Force AOS refresh after a short delay
625
  setTimeout(() => {
626
  AOS.refresh();
@@ -653,9 +661,9 @@
653
  }, 1000);
654
  });
655
  });
656
-
657
  // Ensure all content is visible on load
658
- window.addEventListener('load', function() {
659
  // Force all AOS elements to animate
660
  document.querySelectorAll('[data-aos]').forEach(el => {
661
  el.classList.add('aos-animate');
 
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Integrations - Quantum Safe</title>
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 
88
  }
89
 
90
  @keyframes pulse {
91
+
92
+ 0%,
93
+ 100% {
94
  opacity: 1;
95
  }
96
+
97
  50% {
98
  opacity: 0.7;
99
  }
 
114
  transform: translateY(100vh) translateX(0px);
115
  opacity: 0;
116
  }
117
+
118
  10% {
119
  opacity: 0.7;
120
  }
121
+
122
  90% {
123
  opacity: 0.7;
124
  }
125
+
126
  100% {
127
  transform: translateY(-100px) translateX(100px);
128
  opacity: 0;
 
170
  <div class="sidebar text-white w-64 flex-shrink-0 flex flex-col relative z-10">
171
  <div class="p-4 border-b border-white/10">
172
  <a href="index.html" class="flex items-center space-x-3 hover:opacity-80 transition-opacity">
173
+ <div
174
+ class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-500 flex items-center justify-center">
175
  <i data-feather="shield" class="text-gray-900 w-5 h-5"></i>
176
  </div>
177
+ <h1 class="text-xl font-bold"><span class="gradient-text">Quantum Safe</span></h1>
178
  </a>
179
  </div>
180
 
 
199
  <i data-feather="lock" class="w-5 h-5"></i>
200
  <span>Assets</span>
201
  </a>
202
+ <a href="integrations.html"
203
+ class="flex items-center space-x-3 p-3 rounded-lg bg-yellow-400/20 text-yellow-400 border border-yellow-400/30">
204
  <i data-feather="link" class="w-5 h-5"></i>
205
  <span>Integrations</span>
206
  </a>
 
213
 
214
  <div class="p-4 border-t border-white/10">
215
  <div class="flex items-center space-x-3">
216
+ <div
217
+ class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-600 to-gray-700 flex items-center justify-center">
218
  <i data-feather="user" class="text-gray-300 w-5 h-5"></i>
219
  </div>
220
  <div>
 
228
  <!-- Main Content -->
229
  <div class="flex-1 flex flex-col overflow-hidden relative z-10">
230
  <!-- Top Navigation -->
231
+ <header
232
+ class="backdrop-filter backdrop-blur-lg bg-white/5 border-b border-white/10 flex items-center justify-between p-4">
233
  <div class="flex items-center space-x-4">
234
  <button class="md:hidden text-white">
235
  <i data-feather="menu"></i>
 
244
  <input type="text" placeholder="Search integrations..."
245
  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">
246
  </div>
247
+ <button class="px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
 
248
  <i data-feather="plus" class="w-4 h-4 inline mr-2"></i>
249
  Add Integration
250
  </button>
 
499
  </div>
500
 
501
  <div class="flex space-x-2">
502
+ <button class="flex-1 px-4 py-2 action-button text-gray-900 rounded-lg font-semibold">
 
503
  <i data-feather="play" class="w-4 h-4 inline mr-2"></i>
504
  Complete Setup
505
  </button>
 
611
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
612
  <script>
613
  // Initialize feather icons immediately
614
+ document.addEventListener('DOMContentLoaded', function () {
615
  // Replace feather icons
616
  feather.replace();
617
+
618
  // Initialize AOS with better settings
619
  AOS.init({
620
  duration: 400,
 
623
  easing: 'ease-out',
624
  delay: 0,
625
  anchorPlacement: 'top-bottom',
626
+ disable: function () {
627
  // Disable AOS on mobile devices to prevent issues
628
  return window.innerWidth < 768;
629
  }
630
  });
631
+
632
  // Force AOS refresh after a short delay
633
  setTimeout(() => {
634
  AOS.refresh();
 
661
  }, 1000);
662
  });
663
  });
664
+
665
  // Ensure all content is visible on load
666
+ window.addEventListener('load', function () {
667
  // Force all AOS elements to animate
668
  document.querySelectorAll('[data-aos]').forEach(el => {
669
  el.classList.add('aos-animate');