haramb3/cbom-builder
0
1<!DOCTYPE html>2<html lang="en">3 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>11 <style>12 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');13 14 body {15 font-family: 'Inter', sans-serif;16 background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);17 min-height: 100vh;18 }19 20 /* Ensure content is visible by default */21 [data-aos] {22 opacity: 1 !important;23 transform: none !important;24 }25 26 [data-aos].aos-animate {27 opacity: 1 !important;28 }29 30 .gradient-text {31 background: linear-gradient(135deg, #F59E0B, #FBBF24, #FCD34D);32 -webkit-background-clip: text;33 -webkit-text-fill-color: transparent;34 background-clip: text;35 }36 37 .sidebar {38 backdrop-filter: blur(20px);39 background: rgba(15, 23, 42, 0.8);40 border-right: 1px solid rgba(255, 255, 255, 0.1);41 transition: all 0.3s ease;42 }43 44 .card-hover {45 backdrop-filter: blur(15px);46 background: rgba(255, 255, 255, 0.05);47 border: 1px solid rgba(255, 255, 255, 0.1);48 transition: all 0.3s ease;49 }50 51 .card-hover:hover {52 transform: translateY(-2px);53 background: rgba(255, 255, 255, 0.08);54 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);55 border-color: rgba(245, 158, 11, 0.3);56 }57 58 .tab-active {59 border-bottom: 3px solid #F59E0B;60 color: #F59E0B;61 }62 63 .status-connected {64 border-left: 4px solid #10B981;65 }66 67 .status-disconnected {68 border-left: 4px solid #EF4444;69 }70 71 .status-pending {72 border-left: 4px solid #F59E0B;73 }74 75 .action-button {76 background: linear-gradient(135deg, #F59E0B, #FBBF24);77 transition: all 0.3s ease;78 box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);79 }80 81 .action-button:hover {82 transform: translateY(-2px);83 box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);84 }85 86 .pulse-animation {87 animation: pulse 2s infinite;88 }89 90 @keyframes pulse {91 92 0%,93 100% {94 opacity: 1;95 }96 97 50% {98 opacity: 0.7;99 }100 }101 102 .particle {103 position: absolute;104 width: 2px;105 height: 2px;106 background: #F59E0B;107 border-radius: 50%;108 animation: particle-float 8s linear infinite;109 opacity: 0.7;110 }111 112 @keyframes particle-float {113 0% {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;129 }130 }131 132 /* Fix select dropdown styling */133 select option {134 background-color: #1e293b;135 color: #ffffff;136 padding: 8px;137 }138 139 select option:hover {140 background-color: #334155;141 }142 143 select option:checked {144 background-color: #475569;145 }146 147 /* Ensure select has proper background */148 select {149 background-color: rgba(255, 255, 255, 0.1);150 color: #ffffff;151 }152 153 select:focus {154 background-color: rgba(255, 255, 255, 0.15);155 }156 </style>157</head>158 159<body class="flex h-screen overflow-hidden">160 <!-- Animated Background Particles -->161 <div class="fixed inset-0 pointer-events-none z-0">162 <div class="particle" style="left: 10%; animation-delay: 0s;"></div>163 <div class="particle" style="left: 30%; animation-delay: 2s;"></div>164 <div class="particle" style="left: 50%; animation-delay: 4s;"></div>165 <div class="particle" style="left: 70%; animation-delay: 6s;"></div>166 <div class="particle" style="left: 90%; animation-delay: 8s;"></div>167 </div>168 169 <!-- Sidebar -->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 <div174 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 181 <nav class="flex-1 overflow-y-auto p-4 space-y-1">182 <a href="index.html"183 class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">184 <i data-feather="home" class="w-5 h-5"></i>185 <span>Home</span>186 </a>187 <a href="dashboard.html"188 class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">189 <i data-feather="layout" class="w-5 h-5"></i>190 <span>Dashboard</span>191 </a>192 <a href="cboms.html"193 class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">194 <i data-feather="file-text" class="w-5 h-5"></i>195 <span>CBOMs</span>196 </a>197 <a href="assets.html"198 class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">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>207 <a href="analytics.html"208 class="flex items-center space-x-3 p-3 rounded-lg hover:bg-white/10 text-gray-300 hover:text-white transition-all">209 <i data-feather="bar-chart-2" class="w-5 h-5"></i>210 <span>Analytics</span>211 </a>212 </nav>213 214 <div class="p-4 border-t border-white/10">215 <div class="flex items-center space-x-3">216 <div217 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>221 <p class="text-sm font-medium">Josep Mateu</p>222 <p class="text-xs text-gray-400">Administrator</p>223 </div>224 </div>225 </div>226 </div>227 228 <!-- Main Content -->229 <div class="flex-1 flex flex-col overflow-hidden relative z-10">230 <!-- Top Navigation -->231 <header232 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>236 </button>237 <h2 class="text-xl font-semibold text-white">Integrations Management</h2>238 </div>239 240 <div class="flex items-center space-x-4">241 <div class="relative">242 <i data-feather="search"243 class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></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 Integration250 </button>251 </div>252 </header>253 254 <!-- Main Content Area -->255 <main class="flex-1 overflow-y-auto p-6">256 <!-- Tabs Navigation -->257 <div class="card-hover rounded-xl mb-6">258 <div class="flex border-b border-white/10 overflow-x-auto">259 <button class="px-6 py-4 font-medium tab-active">Active Integrations</button>260 <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200">Available</button>261 <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200">Configuration</button>262 <button class="px-6 py-4 font-medium text-gray-400 hover:text-gray-200">Logs</button>263 </div>264 </div>265 266 <!-- Integration Statistics -->267 <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">268 <div class="card-hover rounded-xl p-4 text-center" data-aos="fade-up">269 <div270 class="w-12 h-12 bg-green-400/20 text-green-400 rounded-full flex items-center justify-center mx-auto mb-3">271 <i data-feather="check-circle" class="w-6 h-6"></i>272 </div>273 <p class="text-2xl font-bold text-white">3</p>274 <p class="text-sm text-gray-400">Active Integrations</p>275 </div>276 277 <div class="card-hover rounded-xl p-4 text-center" data-aos="fade-up" data-aos-delay="100">278 <div279 class="w-12 h-12 bg-red-400/20 text-red-400 rounded-full flex items-center justify-center mx-auto mb-3">280 <i data-feather="x-circle" class="w-6 h-6"></i>281 </div>282 <p class="text-2xl font-bold text-white">1</p>283 <p class="text-sm text-gray-400">Failed Connections</p>284 </div>285 286 <div class="card-hover rounded-xl p-4 text-center" data-aos="fade-up" data-aos-delay="200">287 <div288 class="w-12 h-12 bg-yellow-400/20 text-yellow-400 rounded-full flex items-center justify-center mx-auto mb-3">289 <i data-feather="clock" class="w-6 h-6"></i>290 </div>291 <p class="text-2xl font-bold text-white">2</p>292 <p class="text-sm text-gray-400">Pending Setup</p>293 </div>294 295 <div class="card-hover rounded-xl p-4 text-center" data-aos="fade-up" data-aos-delay="300">296 <div297 class="w-12 h-12 bg-blue-400/20 text-blue-400 rounded-full flex items-center justify-center mx-auto mb-3">298 <i data-feather="activity" class="w-6 h-6"></i>299 </div>300 <p class="text-2xl font-bold text-white">15.2k</p>301 <p class="text-sm text-gray-400">Events Today</p>302 </div>303 </div>304 305 <!-- Integration Cards Grid -->306 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">307 <!-- Active Integrations -->308 <div class="space-y-6">309 <h3 class="font-semibold text-lg text-white">Active Integrations</h3>310 311 <!-- Venafi Integration -->312 <div class="card-hover rounded-xl p-6 status-connected" data-aos="fade-up" data-aos-delay="100">313 <div class="flex items-center justify-between mb-4">314 <div class="flex items-center space-x-4">315 <div316 class="w-12 h-12 bg-purple-400/20 text-purple-400 rounded-lg flex items-center justify-center">317 <i data-feather="cpu" class="w-6 h-6"></i>318 </div>319 <div>320 <h4 class="font-semibold text-lg text-white">Venafi</h4>321 <p class="text-sm text-gray-400">Certificate Management Platform</p>322 </div>323 </div>324 <div class="flex items-center space-x-2">325 <span326 class="px-2 py-1 text-xs rounded-full bg-green-400/20 text-green-400">Connected</span>327 <div class="w-3 h-3 bg-green-500 rounded-full pulse-animation"></div>328 </div>329 </div>330 331 <div class="grid grid-cols-2 gap-4 mb-4">332 <div class="text-center p-3 bg-white/5 rounded-lg border border-white/10">333 <p class="text-xl font-bold text-white">247</p>334 <p class="text-xs text-gray-400">Certificates Synced</p>335 </div>336 <div class="text-center p-3 bg-white/5 rounded-lg border border-white/10">337 <p class="text-xl font-bold text-white">99.8%</p>338 <p class="text-xs text-gray-400">Uptime</p>339 </div>340 </div>341 342 <div class="flex items-center justify-between text-sm text-gray-400 mb-4">343 <span>Last sync: 5 minutes ago</span>344 <span>Next sync: 1 hour</span>345 </div>346 347 <div class="flex space-x-2">348 <button349 class="flex-1 px-4 py-2 bg-white/10 text-gray-300 rounded-lg hover:bg-white/20 transition-colors border border-white/20">350 <i data-feather="settings" class="w-4 h-4 inline mr-2"></i>351 Configure352 </button>353 <button354 class="flex-1 px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">355 <i data-feather="activity" class="w-4 h-4 inline mr-2"></i>356 View Logs357 </button>358 </div>359 </div>360 361 <!-- Tanium Integration -->362 <div class="card-hover rounded-xl p-6 status-connected" data-aos="fade-up" data-aos-delay="200">363 <div class="flex items-center justify-between mb-4">364 <div class="flex items-center space-x-4">365 <div366 class="w-12 h-12 bg-blue-400/20 text-blue-400 rounded-lg flex items-center justify-center">367 <i data-feather="server" class="w-6 h-6"></i>368 </div>369 <div>370 <h4 class="font-semibold text-lg text-white">Tanium</h4>371 <p class="text-sm text-gray-400">Endpoint Management Platform</p>372 </div>373 </div>374 <div class="flex items-center space-x-2">375 <span376 class="px-2 py-1 text-xs rounded-full bg-green-400/20 text-green-400">Connected</span>377 <div class="w-3 h-3 bg-green-500 rounded-full pulse-animation"></div>378 </div>379 </div>380 381 <div class="grid grid-cols-2 gap-4 mb-4">382 <div class="text-center p-3 bg-white/5 rounded-lg border border-white/10">383 <p class="text-xl font-bold text-white">1,842</p>384 <p class="text-xs text-gray-400">Assets Discovered</p>385 </div>386 <div class="text-center p-3 bg-white/5 rounded-lg border border-white/10">387 <p class="text-xl font-bold text-white">97.2%</p>388 <p class="text-xs text-gray-400">Uptime</p>389 </div>390 </div>391 392 <div class="flex items-center justify-between text-sm text-gray-400 mb-4">393 <span>Last scan: 2 hours ago</span>394 <span>Next scan: 6 hours</span>395 </div>396 397 <div class="flex space-x-2">398 <button399 class="flex-1 px-4 py-2 bg-white/10 text-gray-300 rounded-lg hover:bg-white/20 transition-colors border border-white/20">400 <i data-feather="settings" class="w-4 h-4 inline mr-2"></i>401 Configure402 </button>403 <button404 class="flex-1 px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">405 <i data-feather="activity" class="w-4 h-4 inline mr-2"></i>406 View Logs407 </button>408 </div>409 </div>410 </div>411 412 <!-- Pending/Failed Integrations -->413 <div class="space-y-6">414 <h3 class="font-semibold text-lg text-white">Pending & Failed Integrations</h3>415 416 <!-- SandboxAQ Integration - Failed -->417 <div class="card-hover rounded-xl p-6 status-disconnected" data-aos="fade-up" data-aos-delay="300">418 <div class="flex items-center justify-between mb-4">419 <div class="flex items-center space-x-4">420 <div421 class="w-12 h-12 bg-yellow-400/20 text-yellow-400 rounded-lg flex items-center justify-center">422 <i data-feather="shield" class="w-6 h-6"></i>423 </div>424 <div>425 <h4 class="font-semibold text-lg text-white">SandboxAQ</h4>426 <p class="text-sm text-gray-400">Quantum Security Assessment</p>427 </div>428 </div>429 <div class="flex items-center space-x-2">430 <span class="px-2 py-1 text-xs rounded-full bg-red-400/20 text-red-400">Failed</span>431 <div class="w-3 h-3 bg-red-500 rounded-full"></div>432 </div>433 </div>434 435 <div class="bg-red-400/10 border border-red-400/30 rounded-lg p-4 mb-4">436 <div class="flex items-start space-x-3">437 <i data-feather="alert-circle" class="w-5 h-5 text-red-400 mt-0.5"></i>438 <div>439 <p class="text-sm font-medium text-red-400">Connection Failed</p>440 <p class="text-xs text-red-300 mt-1">Authentication credentials expired. Please441 update API key.</p>442 </div>443 </div>444 </div>445 446 <div class="flex items-center justify-between text-sm text-gray-400 mb-4">447 <span>Last attempt: 1 hour ago</span>448 <span>Failed attempts: 3</span>449 </div>450 451 <div class="flex space-x-2">452 <button453 class="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">454 <i data-feather="refresh-cw" class="w-4 h-4 inline mr-2"></i>455 Retry Connection456 </button>457 <button458 class="flex-1 px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">459 <i data-feather="settings" class="w-4 h-4 inline mr-2"></i>460 Configure461 </button>462 </div>463 </div>464 465 <!-- AWS KMS Integration - Pending -->466 <div class="card-hover rounded-xl p-6 status-pending" data-aos="fade-up" data-aos-delay="400">467 <div class="flex items-center justify-between mb-4">468 <div class="flex items-center space-x-4">469 <div470 class="w-12 h-12 bg-gray-400/20 text-gray-400 rounded-lg flex items-center justify-center">471 <i data-feather="cloud" class="w-6 h-6"></i>472 </div>473 <div>474 <h4 class="font-semibold text-lg text-white">AWS KMS</h4>475 <p class="text-sm text-gray-400">Key Management Service</p>476 </div>477 </div>478 <div class="flex items-center space-x-2">479 <span480 class="px-2 py-1 text-xs rounded-full bg-yellow-400/20 text-yellow-400">Pending</span>481 <div class="w-3 h-3 bg-yellow-500 rounded-full pulse-animation"></div>482 </div>483 </div>484 485 <div class="bg-yellow-400/10 border border-yellow-400/30 rounded-lg p-4 mb-4">486 <div class="flex items-start space-x-3">487 <i data-feather="clock" class="w-5 h-5 text-yellow-400 mt-0.5"></i>488 <div>489 <p class="text-sm font-medium text-yellow-400">Setup Required</p>490 <p class="text-xs text-yellow-300 mt-1">Complete configuration to activate this491 integration.</p>492 </div>493 </div>494 </div>495 496 <div class="flex items-center justify-between text-sm text-gray-400 mb-4">497 <span>Added: 2 days ago</span>498 <span>Progress: 60%</span>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 Setup505 </button>506 <button507 class="flex-1 px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">508 <i data-feather="trash-2" class="w-4 h-4 inline mr-2"></i>509 Remove510 </button>511 </div>512 </div>513 514 <!-- HashiCorp Vault Integration - Pending -->515 <div class="card-hover rounded-xl p-6 status-pending" data-aos="fade-up" data-aos-delay="500">516 <div class="flex items-center justify-between mb-4">517 <div class="flex items-center space-x-4">518 <div519 class="w-12 h-12 bg-indigo-400/20 text-indigo-400 rounded-lg flex items-center justify-center">520 <i data-feather="key" class="w-6 h-6"></i>521 </div>522 <div>523 <h4 class="font-semibold text-lg text-white">HashiCorp Vault</h4>524 <p class="text-sm text-gray-400">Secrets Management</p>525 </div>526 </div>527 <div class="flex items-center space-x-2">528 <span529 class="px-2 py-1 text-xs rounded-full bg-yellow-400/20 text-yellow-400">Pending</span>530 <div class="w-3 h-3 bg-yellow-500 rounded-full pulse-animation"></div>531 </div>532 </div>533 534 <div class="bg-blue-400/10 border border-blue-400/30 rounded-lg p-4 mb-4">535 <div class="flex items-start space-x-3">536 <i data-feather="info" class="w-5 h-5 text-blue-400 mt-0.5"></i>537 <div>538 <p class="text-sm font-medium text-blue-400">Ready to Configure</p>539 <p class="text-xs text-blue-300 mt-1">Integration template is ready. Configure540 connection settings.</p>541 </div>542 </div>543 </div>544 545 <div class="flex items-center justify-between text-sm text-gray-400 mb-4">546 <span>Added: 3 hours ago</span>547 <span>Progress: 25%</span>548 </div>549 550 <div class="flex space-x-2">551 <button552 class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">553 <i data-feather="settings" class="w-4 h-4 inline mr-2"></i>554 Configure Now555 </button>556 <button557 class="flex-1 px-4 py-2 border border-white/20 text-gray-300 rounded-lg hover:bg-white/10 transition-colors">558 <i data-feather="trash-2" class="w-4 h-4 inline mr-2"></i>559 Remove560 </button>561 </div>562 </div>563 </div>564 </div>565 566 <!-- Recent Activity -->567 <div class="card-hover rounded-xl p-6 mt-6" data-aos="fade-up" data-aos-delay="600">568 <div class="flex items-center justify-between mb-4">569 <h3 class="font-semibold text-lg text-white">Recent Integration Activity</h3>570 <button class="text-sm text-yellow-400 hover:text-yellow-300">View All</button>571 </div>572 573 <div class="space-y-4">574 <div class="flex items-start space-x-3 p-4 bg-green-400/10 rounded-lg border border-green-400/30">575 <div class="p-2 rounded-full bg-green-400/20 text-green-400 mt-1">576 <i data-feather="check-circle" class="w-4 h-4"></i>577 </div>578 <div class="flex-1">579 <p class="font-medium text-white">Venafi sync completed successfully</p>580 <p class="text-sm text-gray-400">247 certificates updated, 3 new certificates added</p>581 <p class="text-xs text-gray-500 mt-1">5 minutes ago</p>582 </div>583 </div>584 585 <div class="flex items-start space-x-3 p-4 bg-blue-400/10 rounded-lg border border-blue-400/30">586 <div class="p-2 rounded-full bg-blue-400/20 text-blue-400 mt-1">587 <i data-feather="server" class="w-4 h-4"></i>588 </div>589 <div class="flex-1">590 <p class="font-medium text-white">Tanium asset discovery completed</p>591 <p class="text-sm text-gray-400">1,842 assets scanned, 15 new cryptographic assets found</p>592 <p class="text-xs text-gray-500 mt-1">2 hours ago</p>593 </div>594 </div>595 596 <div class="flex items-start space-x-3 p-4 bg-red-400/10 rounded-lg border border-red-400/30">597 <div class="p-2 rounded-full bg-red-400/20 text-red-400 mt-1">598 <i data-feather="alert-circle" class="w-4 h-4"></i>599 </div>600 <div class="flex-1">601 <p class="font-medium text-white">SandboxAQ connection failed</p>602 <p class="text-sm text-gray-400">Authentication error: API key expired</p>603 <p class="text-xs text-gray-500 mt-1">1 hour ago</p>604 </div>605 </div>606 </div>607 </div>608 </main>609 </div>610 611 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>612 <script>613 // Initialize feather icons immediately614 document.addEventListener('DOMContentLoaded', function () {615 // Replace feather icons616 feather.replace();617 618 // Initialize AOS with better settings619 AOS.init({620 duration: 400,621 once: true,622 offset: 0,623 easing: 'ease-out',624 delay: 0,625 anchorPlacement: 'top-bottom',626 disable: function () {627 // Disable AOS on mobile devices to prevent issues628 return window.innerWidth < 768;629 }630 });631 632 // Force AOS refresh after a short delay633 setTimeout(() => {634 AOS.refresh();635 }, 100);636 });637 638 // Tab switching functionality639 document.querySelectorAll('.flex button').forEach(button => {640 button.addEventListener('click', function () {641 // Only apply to tab buttons642 if (this.parentElement.classList.contains('flex') && this.parentElement.parentElement.classList.contains('card-hover')) {643 document.querySelectorAll('.flex button').forEach(btn => {644 if (btn.parentElement === this.parentElement) {645 btn.classList.remove('tab-active');646 btn.classList.add('text-gray-400', 'hover:text-gray-200');647 }648 });649 this.classList.add('tab-active');650 this.classList.remove('text-gray-400', 'hover:text-gray-200');651 }652 });653 });654 655 // Pulse animation control656 document.addEventListener('DOMContentLoaded', function () {657 const pulseElements = document.querySelectorAll('.pulse-animation');658 pulseElements.forEach(element => {659 setInterval(() => {660 element.style.opacity = element.style.opacity === '0.7' ? '1' : '0.7';661 }, 1000);662 });663 });664 665 // Ensure all content is visible on load666 window.addEventListener('load', function () {667 // Force all AOS elements to animate668 document.querySelectorAll('[data-aos]').forEach(el => {669 el.classList.add('aos-animate');670 });671 });672 </script>673</body>674 675</html>