<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>PatchLeaks - From Patch to PoC</title>
    
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/github-dark.min.css">
    
    <style>
        :root {
            --primary-blue: #4169E1;
            --accent-color: #6c5ce7;
            --code-bg: #0a0e14;
            --section-spacing: 100px;
            --dark-bg: #0a0b10;
            --card-bg: #121520;
            --success-color: #00b894;
            --danger-color: #e74c3c;
            --warning-color: #f39c12;
            --info-color: #3498db;
        }

        body {
            background: linear-gradient(135deg, var(--dark-bg) 0%, #16171d 100%);
            color: #f8f9fa;
            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .scroll-section {
            padding: var(--section-spacing) 0rem;
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            position: relative;
            will-change: opacity, transform;
            backface-visibility: hidden; /* Reduce paint flashing */
            -webkit-backface-visibility: hidden;
            transform: translateZ(0); /* Force GPU acceleration */
        }

        .scroll-section.active {
            opacity: 1;
            transform: translateY(0) translateZ(0);
            will-change: auto; /* Remove will-change after animation */
        }

        .section-bg-accent {
            position: absolute;
            width: 30vw;
            height: 30vw;
            border-radius: 50%;
            background: linear-gradient(45deg, var(--primary-blue), var(--accent-color));
            filter: blur(120px);
            opacity: 0.1;
            z-index: -1;
            will-change: transform;
            backface-visibility: hidden;
            transform: translateZ(0);
        }

        .section-bg-accent.left {
            left: -15vw;
            top: 20%;
        }

        .section-bg-accent.right {
            right: -15vw;
            bottom: 20%;
        }

        .code-preview {
            background: var(--code-bg);
            border-radius: 16px;
            padding: clamp(1rem, 5vw, 2rem);
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6);
            border: 1px solid rgba(255,255,255,0.05);
            transition: all 0.3s ease;
            overflow: hidden;
            width: 100%;
        }

        .code-preview:hover, .code-preview:active {
            box-shadow: 0 30px 60px -15px rgba(0,0,0,0.7);
            transform: translateY(-5px);
            border-color: rgba(65,105,225,0.3);
        }

        .ui-mockup {
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px;
            background: var(--card-bg);
            padding: clamp(1.2rem, 4vw, 1.8rem);
            margin: 1rem 0;
            box-shadow: 0 15px 30px -10px rgba(0,0,0,0.5);
            transition: all 0.3s ease;
            width: 100%;
        }

        .ui-mockup:hover, .ui-mockup:active {
            box-shadow: 0 20px 40px -15px rgba(0,0,0,0.6);
            transform: translateY(-5px);
            border-color: rgba(65,105,225,0.2);
        }

        .scroll-indicator {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%) translateZ(0);
            animation: float 2s infinite;
            z-index: 1000;
            color: var(--primary-blue);
            transition: opacity 0.5s;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(10, 11, 16, 0.5);
            backdrop-filter: blur(10px);
            border-radius: 50%;
            will-change: opacity;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) translateX(-50%) translateZ(0); }
            50% { transform: translateY(-15px) translateX(-50%) translateZ(0); }
        }

        .analysis-result {
            border-left: 4px solid var(--primary-blue);
            padding-left: 1.2rem;
            margin: 2rem 0;
            background: rgba(65,105,225,0.05);
            border-radius: 0 8px 8px 0;
            padding: 1.2rem;
        }

        .section-content {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            width: 100%;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-color));
            border: none;
            box-shadow: 0 4px 15px rgba(65,105,225,0.3);
            transition: all 0.3s ease;
            padding: 0.75rem 1.5rem;
            border-radius: 12px;
            font-weight: 500;
        }

        .btn-primary:hover, .btn-primary:active {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(65,105,225,0.4);
        }

        .btn-outline-primary {
            border: 2px solid var(--primary-blue);
            color: var(--primary-blue);
            background: transparent;
            transition: all 0.3s ease;
            padding: 0.75rem 1.5rem;
            border-radius: 12px;
            font-weight: 500;
        }

        .btn-outline-primary:hover, .btn-outline-primary:active {
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-color));
            border-color: transparent;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(65,105,225,0.4);
            color: white;
        }

        .alert {
            border: none;
            background: rgba(255,255,255,0.05);
            border-left: 4px solid transparent;
            border-radius: 8px;
        }

        .alert-dark {
            border-left-color: #6c757d;
        }

        .alert-info {
            border-left-color: var(--info-color);
        }

        .alert-success {
            border-left-color: var(--success-color);
            --bs-alert-color: var(--success-color);
        }

        .alert-warning {
            border-left-color: var(--warning-color);
        }

        .alert-danger {
            border-left-color: var(--danger-color);
        }

        .form-control {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            color: #f8f9fa;
            transition: all 0.3s ease;
            border-radius: 8px;
            padding: 0.75rem 1rem;
        }

        .form-control:focus {
            background: rgba(255,255,255,0.08);
            border-color: var(--primary-blue);
            box-shadow: 0 0 0 0.25rem rgba(65,105,225,0.2);
            color: #fff;
        }

        .badge {
            padding: 0.5em 0.8em;
            font-weight: 500;
            border-radius: 6px;
        }

        .badge-glow {
            animation: glow 2s infinite alternate;
        }

        @keyframes glow {
            0% { box-shadow: 0 0 5px rgba(65,105,225,0.5); }
            100% { box-shadow: 0 0 15px rgba(65,105,225,0.8); }
        }

        .navbar {
            background: rgba(10, 11, 16, 0.8);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255,255,255,0.05);
            padding: 1rem 2rem;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            transition: padding 0.3s ease;
            will-change: padding;
            transform: translateZ(0); /* Force GPU layer */
            backface-visibility: hidden;
        }

        .navbar.scrolled {
            padding: 0.5rem 1rem;
        }

        .navbar-brand {
            font-weight: 600;
            font-size: 1.25rem;
        }

        .nav-link {
            color: rgba(255,255,255,0.7);
            margin: 0 0.5rem;
            position: relative;
            transition: all 0.3s ease;
            padding: 0.5rem 0;
        }
        .nav-link.active,
        .nav-link:focus,
        .nav-link:active {
            color: #fff !important;
            font-weight: 600;
            text-shadow: 0 1px 8px rgba(65,105,225,0.15);
        }

        .nav-link:hover, .nav-link:active {
            color: #fff;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background: linear-gradient(90deg, var(--primary-blue), var(--accent-color));
            transition: width 0.3s ease;
        }

        .nav-link:hover::after, .nav-link:active::after {
            width: 100%;
        }

        .navbar-toggler {
            border: none;
            padding: 0.5rem;
            color: white;
            background: transparent;
        }

        .navbar-toggler:focus {
            box-shadow: none;
        }

        .mobile-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(10, 11, 16, 0.95);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            z-index: 1001;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .mobile-menu.active {
            opacity: 1;
            pointer-events: all;
        }

        .mobile-menu-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: transparent;
            border: none;
            color: white;
            font-size: 1.5rem;
        }

        .mobile-menu-nav {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
        }

        .mobile-menu-link {
            color: white;
            font-size: 1.5rem;
            text-decoration: none;
            position: relative;
            transition: all 0.3s ease;
        }

        .mobile-menu-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background: linear-gradient(90deg, var(--primary-blue), var(--accent-color));
            transition: width 0.3s ease;
        }

        .mobile-menu-link:hover::after, .mobile-menu-link:active::after {
            width: 100%;
        }

        .hero-title {
            font-size: clamp(2.5rem, 8vw, 5rem);
            font-weight: 800;
            letter-spacing: -0.02em;
            margin-bottom: 1.5rem;
            background: linear-gradient(90deg, #fff, var(--primary-blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
            line-height: 1.1;
        }

        .hero-subtitle {
            font-size: clamp(1rem, 4vw, 1.5rem);
            font-weight: 300;
            letter-spacing: 0.02em;
            color: rgba(255,255,255,0.7);
            margin-bottom: 3rem;
        }

        .feature-icon {
            font-size: 2rem;
            color: var(--primary-blue);
            margin-bottom: 1rem;
        }

        h2.display-5 {
            font-size: clamp(2rem, 6vw, 3rem);
            font-weight: 700;
        }

        p.lead {
            font-size: clamp(1rem, 3vw, 1.25rem);
        }

        pre {
            overflow-x: auto;
            white-space: pre;
            word-wrap: normal;
            -webkit-overflow-scrolling: touch;
        }

        code.hljs {
            padding: 1rem;
            border-radius: 8px;
        }

        @media (min-width: 768px) {
            .section-content {
                flex-direction: row;
            }
            
            .navbar-collapse {
                display: flex !important;
            }
            
            .mobile-menu, .navbar-toggler {
                display: none;
            }
        }

        @media (max-width: 767.98px) {
            .scroll-section {
                padding: 80px 1rem;
                min-height: auto;
                height: auto;
                display: block;
            }
            
            .navbar-collapse {
                display: none !important;
            }
            
            .hero-buttons .btn {
                display: block;
                width: 100%;
                margin: 0.5rem 0;
            }
            
            .code-preview {
                padding: 1rem;
                font-size: 0.85rem;
            }
            
            .ui-mockup {
                padding: 1.2rem;
            }
            
            .btn, .nav-link, .form-control {
                min-height: 44px;
            }
            
            :root {
                --section-spacing: 60px;
            }
            
            .code-preview pre {
                -webkit-overflow-scrolling: touch;
            }
            
            footer {
                text-align: center;
            }
            
            footer .col-md-4 {
                margin-bottom: 2rem;
            }
        }

        @media (min-width: 768px) and (max-width: 991.98px) {
            .scroll-section {
                padding: 80px 1.5rem;
            }
            
            .section-content {
                gap: 2rem;
            }
        }

        .fade-in {
            animation: fadeIn 0.8s ease forwards;
        }
        
        .slide-up {
            animation: slideUp 0.8s ease forwards;
        }
        
        .slide-in-right {
            animation: slideInRight 0.8s ease forwards;
        }
        
        .slide-in-left {
            animation: slideInLeft 0.8s ease forwards;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideUp {
            from { transform: translateY(30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        @keyframes slideInRight {
            from { transform: translateX(30px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        @keyframes slideInLeft {
            from { transform: translateX(-30px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        .parallax-element {
            will-change: transform;
            transition: transform 0.1s linear;
        }

        footer {
            background: linear-gradient(180deg, rgba(18, 21, 32, 0) 0%, rgba(18, 21, 32, 1) 100%);
            position: relative;
            overflow: hidden;
        }

        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0));
        }

        .footer-heading {
            color: white;
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            position: relative;
        }

        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-links li {
            margin-bottom: 0.75rem;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.6);
            text-decoration: none;
            transition: color 0.2s ease;
            font-size: 0.9rem;
            display: inline-block;
        }

        .footer-links a:hover {
            color: var(--primary-blue);
        }

        .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
            color: rgba(255, 255, 255, 0.7);
            transition: all 0.3s ease;
        }

        .social-link:hover {
            background: var(--primary-blue);
            color: white;
            transform: translateY(-3px);
        }

        .footer-newsletter {
            background: rgba(65, 105, 225, 0.05);
            border-radius: 12px;
            border: 1px solid rgba(65, 105, 225, 0.1);
        }

        .footer-bottom {
            font-size: 0.85rem;
        }

        @media (max-width: 767.98px) {
            .footer-heading {
                margin-bottom: 1rem;
                font-size: 0.95rem;
            }
            
            .footer-links li {
                margin-bottom: 0.5rem;
            }
            
            .footer-links a {
                font-size: 0.85rem;
            }
            
            .footer-newsletter {
                padding: 1.5rem !important;
            }
        }
        
        .text-muted {
            color: rgba(255, 255, 255, 0.6) !important;
        }

        .fw-bold, .report-title, h1, h2, h3, h4, h5, h6 {
            color: #fff;
        }

        .report-card {
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s ease;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.05);
        }

        .report-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
            background: rgba(255,255,255,0.05);
        }

        .report-header {
            padding: 1.2rem;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            background: rgba(255,255,255,0.02);
        }

        .report-body {
            padding: 1.2rem;
        }

        .report-footer {
            padding: 1rem;
            border-top: 1px solid rgba(255,255,255,0.05);
            background: rgba(255,255,255,0.02);
        }

        .report-title {
            color: #fff;
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
        }

        .report-meta {
            color: rgba(255,255,255,0.6);
            font-size: 0.85rem;
        }

        .report-stats {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .stat-item {
            background: rgba(255,255,255,0.05);
            padding: 0.5rem 1rem;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .stat-item i {
            color: var(--primary-blue);
        }

        .badge-ai {
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-color));
            color: white;
            padding: 0.3rem 0.6rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .badge-folder {
            background: linear-gradient(135deg, var(--info-color), #45aaf2);
            color: white;
            padding: 0.3rem 0.6rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .badge-product {
            background: linear-gradient(135deg, var(--success-color), #20bf6b);
            color: white;
            padding: 0.3rem 0.6rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .search-container {
            position: relative;
            margin-bottom: 2rem;
        }

        .search-container i {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255,255,255,0.5);
        }

        .search-input {
            padding-left: 2.5rem;
            height: 3rem;
            font-size: 1rem;
            border-radius: 8px;
        }

        .filter-btn {
            border: 2px solid rgba(255,255,255,0.2);
            color: rgba(255,255,255,0.7);
            background: transparent;
            transition: all 0.3s ease;
            border-radius: 8px;
            padding: 0.5rem 1rem;
        }

        .filter-btn:hover, .filter-btn.active {
            background: rgba(228, 206, 233, 0.1);
            color: #fff;
            border-color: rgba(255,255,255,0.3);
        }

        /* Sticky Folder Analysis Styles */
        .sticky-folder-analysis {
            position: relative;
            z-index: 10;
        }

        .sticky-container {
            position: sticky;
            top: 0;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            overflow: visible;
            padding-bottom: 2rem;
        }

        .sticky-folder-analysis {
            background: transparent;
        }

        .sticky-content {
            width: 100%;
            max-width: 1400px;
            padding: 2rem;
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .sticky-header {
            text-align: center;
            margin-bottom: 2rem;
            position: relative;
            z-index: 2;
        }

        .sticky-title {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 800;
            background: linear-gradient(90deg, #fff, var(--primary-blue), var(--accent-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
            letter-spacing: -0.02em;
        }

        .sticky-subtitle {
            font-size: 1.2rem;
            color: rgba(255,255,255,0.7);
            margin: 0;
            font-weight: 300;
        }

        .code-transformation-container {
            background: rgba(18, 21, 32, 0.8);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 24px;
            border: 1px solid rgba(255,255,255,0.1);
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
            position: relative;
        }

        .code-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 2rem;
            background: rgba(255,255,255,0.02);
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        .code-tabs {
            display: flex;
            gap: 1rem;
        }

        .code-tab {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            background: rgba(255,255,255,0.05);
            color: rgba(255,255,255,0.7);
            font-size: 0.9rem;
            font-weight: 500;
            position: relative;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .vulnerable-tab {
            border: 1px solid rgba(231, 76, 60, 0.3);
        }

        .fixed-tab {
            border: 1px solid rgba(0, 184, 148, 0.3);
        }

        .tab-indicator {
            position: absolute;
            top: -2px;
            right: -2px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .vulnerable-indicator {
            background: var(--danger-color);
            box-shadow: 0 0 10px rgba(231, 76, 60, 0.6);
        }

        .fixed-indicator {
            background: var(--success-color);
            box-shadow: 0 0 10px rgba(0, 184, 148, 0.6);
            opacity: 0;
            transform: scale(0);
        }

        .code-status {
            display: flex;
            align-items: center;
        }

        .status-badge {
            padding: 0.4rem 1rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            background: linear-gradient(135deg, var(--danger-color), #c0392b);
            color: white;
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
        }

        .code-display {
            position: relative;
            height: 650px;
            overflow: hidden;
        }

        .code-editor {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .code-content {
            padding: 2rem;
            height: 100%;
            overflow-y: auto;
            font-family: 'JetBrains Mono', 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'Source Code Pro', monospace;
        }

        .code-content pre {
            margin: 0;
            background: transparent;
            border: none;
            padding: 0;
            font-size: 0.75rem;
            line-height: 1.6;
            white-space: pre-wrap;
        }

        .code-content code {
            background: transparent;
            padding: 0;
        }

        .code-line {
            display: block;
            padding: 0.05rem 0;
            position: relative;
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 4px;
            margin: 0.05rem 0;
            white-space: pre;
        }

        /* Handle syntax highlighting interference */
        .code-content pre code .hljs {
            background: transparent !important;
            padding: 0 !important;
        }

        .code-content pre code .hljs * {
            white-space: pre !important;
            display: inline !important;
        }

        .code-content pre code .hljs .code-line {
            display: block !important;
            white-space: pre !important;
        }

        .code-line.spacer {
            color: rgba(255,255,255,0.4);
            font-weight: bold;
            text-align: center;
            margin: 0.5rem 0;
            font-size: 0.9rem;
        }

        /* Initial state - all lines visible */
        .add-line {
            opacity: 0;
            transform: translateX(20px) scale(0.98);
            background: rgba(0, 184, 148, 0.1);
            border-left: 3px solid var(--success-color);
            padding-left: 1rem;
            margin-left: -1rem;
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .code-diff-container {
            position: relative;
            transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .transforming-block {
            background: rgba(231, 76, 60, 0.1);
            border-left: 3px solid var(--danger-color);
            padding-left: 1rem;
            margin-left: -1rem;
            position: relative;
            transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
            min-height: 2rem;
        }

        .transforming-block.expanding {
            background: rgba(0, 184, 148, 0.1);
            border-left-color: var(--success-color);
            min-height: 10rem;
            padding: 0.5rem 0 0.5rem 1rem;
            margin: 0.5rem 0 0.5rem -1rem;
        }

        /* Diff-style indicators */
        .line-removed {
            background: rgba(231, 76, 60, 0.15);
            color: #ff6b6b;
            text-decoration: line-through;
            opacity: 0.7;
            transition: all 0.6s ease;
        }

        .line-added {
            background: rgba(0, 184, 148, 0.15);
            color: #51cf66;
            transform: translateX(10px);
            transition: all 0.6s ease;
        }

        .line-modified {
            background: rgba(255, 193, 7, 0.1);
            border-left: 3px solid #ffc107;
            transition: all 0.8s ease;
        }

        /* Animation states */
        .add-line.active {
            opacity: 1;
            transform: translateX(0) scale(1);
        }

        /* Character-by-character transformation styles */
        .char-old {
            opacity: 1;
            color: #ff6b6b;
            transition: all 0.3s ease;
        }

        .char-new {
            opacity: 0;
            color: #51cf66;
            transform: translateY(10px);
            transition: all 0.3s ease;
        }

        .char-old.fading {
            opacity: 0;
            transform: translateY(-10px);
        }

        .char-new.appearing {
            opacity: 1;
            transform: translateY(0);
        }

        .typing-cursor {
            display: inline-block;
            width: 2px;
            height: 1.2em;
            background: var(--primary-blue);
            animation: blink 1s infinite;
            margin-left: 1px;
        }

        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }

        .code-annotations {
            position: absolute;
            top: 0;
            right: 0;
            width: 80px;
            height: 100%;
            pointer-events: none;
            z-index: 10;
        }

        .annotation {
            position: absolute;
            right: 20px;
            width: 16px;
            height: 16px;
            cursor: pointer;
            pointer-events: all;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .annotation-indicator {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            color: white;
            position: relative;
            z-index: 2;
        }

        .vuln-annotation .annotation-indicator {
            background: var(--danger-color);
            animation: vulnPulse 2s infinite;
            box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
        }

        .secure-annotation .annotation-indicator {
            background: var(--success-color);
            opacity: 0;
            transform: scale(0);
            animation: none;
        }

        .secure-annotation.active .annotation-indicator {
            opacity: 1;
            transform: scale(1);
            animation: securePulse 2s infinite;
            box-shadow: 0 0 0 0 rgba(0, 184, 148, 0.7);
        }

        .annotation-tooltip {
            position: absolute;
            right: 25px;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0,0,0,0.95);
            color: white;
            padding: 0.6rem 1rem;
            border-radius: 8px;
            font-size: 0.75rem;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
            z-index: 20;
            border: 1px solid rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            min-width: 180px;
        }

        .annotation:hover .annotation-tooltip {
            opacity: 1;
            transform: translateY(-50%) translateX(-5px);
        }

        /* Position annotations based on line numbers */
        .annotation[data-target="4"] { top: calc(3 * 2.1rem + 2rem); }
        .annotation[data-target="8"] { top: calc(7 * 2.1rem + 2rem); }
        .annotation[data-target="15"] { top: calc(14 * 2.1rem + 2rem); }
        .annotation[data-target="18"] { top: calc(20 * 2.1rem + 2rem); }

        @keyframes vulnPulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
            }
            70% {
                transform: scale(1.1);
                box-shadow: 0 0 0 8px rgba(231, 76, 60, 0);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
            }
        }

        @keyframes securePulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(0, 184, 148, 0.7);
            }
            70% {
                transform: scale(1.1);
                box-shadow: 0 0 0 8px rgba(0, 184, 148, 0);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(0, 184, 148, 0);
            }
        }

        @keyframes vulnLinePulse {
            0% { 
                background: rgba(231, 76, 60, 0.1);
                border-left-color: var(--danger-color);
            }
            50% { 
                background: rgba(231, 76, 60, 0.2);
                border-left-color: #ff6b6b;
                transform: translateX(-5px);
            }
            100% { 
                background: rgba(231, 76, 60, 0.05);
                border-left-color: rgba(231, 76, 60, 0.3);
            }
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
            }
            70% {
                transform: scale(1.1);
                box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
            }
        }

        @keyframes securityPulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(0, 184, 148, 0.7);
            }
            70% {
                transform: scale(1.1);
                box-shadow: 0 0 0 10px rgba(0, 184, 148, 0);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(0, 184, 148, 0);
            }
        }

        .vuln-tooltip,
        .security-tooltip {
            position: absolute;
            right: 25px;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0,0,0,0.9);
            color: white;
            padding: 0.4rem 0.8rem;
            border-radius: 6px;
            font-size: 0.75rem;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            z-index: 10;
        }

        .vuln-indicator:hover .vuln-tooltip,
        .security-indicator:hover .security-tooltip {
            opacity: 1;
        }

        .transformation-progress {
            padding: 2rem;
            background: rgba(255,255,255,0.02);
            border-top: 1px solid rgba(255,255,255,0.05);
        }

        .progress-track {
            position: relative;
            height: 6px;
            background: rgba(255,255,255,0.1);
            border-radius: 3px;
            margin-bottom: 1rem;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--danger-color), var(--primary-blue), var(--success-color));
            border-radius: 3px;
            width: 0%;
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .progress-knob {
            position: absolute;
            top: 50%;
            left: 0%;
            transform: translate(-50%, -50%);
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-color));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.8rem;
            box-shadow: 0 4px 12px rgba(65,105,225,0.4);
            transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .progress-labels {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            color: rgba(255,255,255,0.6);
        }

        .analysis-summary {
            padding: 2rem;
            background: rgba(255,255,255,0.02);
        }

        .summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
        }

        .summary-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1.5rem;
            background: rgba(255,255,255,0.05);
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.1);
            transition: all 0.3s ease;
        }

        .summary-item:hover {
            background: rgba(255,255,255,0.08);
            transform: translateY(-2px);
        }

        .summary-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-color));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .summary-content h4 {
            margin: 0 0 0.5rem 0;
            font-size: 1rem;
            font-weight: 600;
            color: white;
        }

        .summary-content p {
            margin: 0;
            font-size: 0.85rem;
            color: rgba(255,255,255,0.7);
            line-height: 1.4;
        }

        .scroll-spacer {
            height: 80vh;
            pointer-events: none;
        }

        /* Transition States */
        .transformation-active .fixed-indicator {
            opacity: 1;
            transform: scale(1);
        }

        .transformation-active .vulnerable-indicator {
            opacity: 0.3;
            transform: scale(0.8);
        }

        .transformation-active .status-badge {
            background: linear-gradient(135deg, var(--success-color), #20bf6b);
            box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .sticky-content {
                padding: 1rem;
            }

            .sticky-title {
                font-size: 2rem;
                margin-bottom: 0.5rem;
            }

            .sticky-subtitle {
                font-size: 1rem;
            }

            .code-header {
                flex-direction: column;
                gap: 1rem;
                padding: 1rem;
            }

            .code-tabs {
                flex-direction: column;
                width: 100%;
            }

            .code-tab {
                justify-content: center;
            }

            .code-display {
                height: 400px;
            }

            .code-content {
                padding: 1rem;
                font-size: 0.75rem;
                line-height: 1.6;
            }

            .code-line {
                margin: 0.05rem 0;
                padding: 0.05rem 0;
            }

            .add-line, .transforming-block, .line-added, .line-removed, .line-modified {
                padding-left: 0.5rem;
                margin-left: -0.5rem;
                border-left-width: 2px;
                font-size: 0.7rem;
            }

            .transforming-block.expanding {
                min-height: 6rem;
                font-size: 0.65rem;
            }

            .typing-cursor {
                height: 0.9em;
                width: 1px;
            }

            .code-diff-container {
                font-size: 0.75rem;
                line-height: 1.4;
            }

            .summary-grid {
                grid-template-columns: 1fr;
            }

            .summary-item {
                padding: 1rem;
            }

            .code-annotations {
                display: none;
            }

            .annotation-tooltip {
                font-size: 0.7rem;
                padding: 0.4rem 0.8rem;
                min-width: 150px;
            }
        }
    </style>
</head>
<body>
    <div class="mobile-menu" id="mobileMenu">
        <button class="mobile-menu-close" id="mobileMenuClose">
            <i class="fas fa-times"></i>
        </button>
        <nav class="mobile-menu-nav">
            <a href="#folder-analysis" class="mobile-menu-link">Folder Analysis</a>
            <a href="#product-analysis" class="mobile-menu-link">Product Analysis</a>
            <a href="#ai-analysis" class="mobile-menu-link">AI Analysis</a>
            <a href="#reports" class="mobile-menu-link">Reports</a>
        </nav>
    </div>

    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="#">
                <i class="fas fa-shield-alt me-2 text-primary"></i>
                <span class="fw-bold text-white">PatchLeaks</span>
            </a>
            <button class="navbar-toggler" type="button" id="mobileMenuToggle">
                <i class="fas fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#folder-analysis">Folder Analysis</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#product-analysis">Product Analysis</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#ai-analysis">AI Analysis</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#reports">Reports</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="scroll-indicator">
        <i class="fas fa-chevron-down"></i>
    </div>

    <section class="scroll-section active" id="hero">
        <div class="section-bg-accent left parallax-element" data-parallax-speed="0.05"></div>
        <div class="container text-center">
            <h1 class="hero-title">PatchLeaks</h1>
            <p class="hero-subtitle">Zero-Day to Zero Doubt: CVE -> Patch -> PoC</p>
            <div class="mt-5 hero-buttons">
                <a href="#folder-analysis" class="btn btn-lg btn-primary mx-2 mb-2">
                    <i class="fas fa-folder-open me-2"></i>Folder Analysis
                </a>
                <a href="#product-analysis" class="btn btn-lg btn-primary mx-2 mb-2">
                    <i class="fas fa-cube me-2"></i>Product Analysis
                </a>
            </div>
            <div class="row mt-5 pt-5">
                <div class="col-md-4 mb-4 feature-item" data-animation="slide-up" data-delay="0">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h5>Vulnerability Detection</h5>
                    <p class="text-muted">Automatically detect and analyze security vulnerabilities in code changes</p>
                </div>
                <div class="col-md-4 mb-4 feature-item" data-animation="slide-up" data-delay="200">
                    <div class="feature-icon">
                        <i class="fas fa-robot"></i>
                    </div>
                    <h5>AI-Powered Analysis</h5>
                    <p class="text-muted">Leverage cutting-edge AI models to identify complex security issues</p>
                </div>
                <div class="col-md-4 mb-4 feature-item" data-animation="slide-up" data-delay="400">
                    <div class="feature-icon">
                        <i class="fas fa-history"></i>
                    </div>
                    <h5>Version Tracking</h5>
                    <p class="text-muted">Track patch changes across multiple software versions effortlessly</p>
                </div>
            </div>
        </div>
    </section>

    <section class="sticky-folder-analysis" id="sticky-folder-analysis">
        <div class="sticky-container">
            <div class="sticky-content">
                <div class="sticky-header">
                    <h2 class="sticky-title">
                        <i class="fas fa-folder-open me-3"></i>
                        Watch Security Patch in Action
                    </h2>
                </div>
                
                <div class="code-transformation-container">
                    <div class="code-header">
                        <div class="code-tabs">
                            <div class="code-tab vulnerable-tab">
                                <i class="fas fa-exclamation-triangle"></i>
                                <span>Vulnerable Code</span>
                                <span class="tab-indicator vulnerable-indicator"></span>
                            </div>
                            <div class="code-tab fixed-tab">
                                <i class="fas fa-shield-check"></i>
                                <span>Patched Code</span>
                                <span class="tab-indicator fixed-indicator"></span>
                            </div>
                        </div>
                        <div class="code-status">
                            <span class="status-badge" id="transformStatus">CVE-2024-47048 Detected</span>
                        </div>
                    </div>
                    
                    <div class="code-display">
                        <div class="code-editor">
                            <div class="code-content">
                                <div class="code-diff-container" id="codeDiffContainer">
                                    <pre><code class="hljs language-typescript" id="liveCode"></code></pre>
                                </div>
                            </div>
                            <div class="code-annotations">
                                <div class="annotation vuln-annotation" data-target="15">
                                    <div class="annotation-indicator">
                                        <i class="fas fa-exclamation-triangle"></i>
                                    </div>
                                    <div class="annotation-tooltip">
                                        <strong>CVE-2024-47048</strong><br>
                                        XSS via dangerouslySetInnerHTML
                                    </div>
                                </div>
                                <div class="annotation secure-annotation" data-target="4">
                                    <div class="annotation-indicator">
                                        <i class="fas fa-shield-check"></i>
                                    </div>
                                    <div class="annotation-tooltip">
                                        <strong>Security Fix</strong><br>
                                        DOMPurify import added
                                    </div>
                                </div>
                                <div class="annotation secure-annotation" data-target="8">
                                    <div class="annotation-indicator">
                                        <i class="fas fa-shield-check"></i>
                                    </div>
                                    <div class="annotation-tooltip">
                                        <strong>Security Fix</strong><br>
                                        Purify options imported
                                    </div>
                                </div>
                                <div class="annotation secure-annotation" data-target="18">
                                    <div class="annotation-indicator">
                                        <i class="fas fa-shield-check"></i>
                                    </div>
                                    <div class="annotation-tooltip">
                                        <strong>Security Fix</strong><br>
                                        Content sanitization applied
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="transformation-progress">
                        <div class="progress-track">
                            <div class="progress-fill" id="progressFill"></div>
                            <div class="progress-knob" id="progressKnob">
                                <i class="fas fa-shield-alt"></i>
                            </div>
                        </div>
                        <div class="progress-labels">
                            <span class="progress-label-start">Vulnerable</span>
                            <span class="progress-label-end">Secured</span>
                        </div>
                    </div>
                </div>
                
                <div class="analysis-summary">
                    <div class="summary-grid">
                        <div class="summary-item">
                            <div class="summary-icon">
                                <i class="fas fa-bug"></i>
                            </div>
                            <div class="summary-content">
                                <h4>CVE-2024-47048</h4>
                                <p>Rocket.Chat 6.12.0 and earlier allows stored XSS in the description and release notes of the marketplace and private apps.</p>
                            </div>
                        </div>
                        <div class="summary-item">
                            <div class="summary-icon">
                                <i class="fas fa-shield-alt"></i>
                            </div>
                            <div class="summary-content">
                                <h4>Security Patch</h4>
                                <p>Added DOMPurify sanitization to prevent XSS attacks</p>
                            </div>
                        </div>
                        <div class="summary-item">
                            <div class="summary-icon">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <div class="summary-content">
                                <h4>Impact Analysis</h4>
                                <p>XSS vulnerability completely mitigated with DOMPurify</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="scroll-spacer"></div>
    </section>

    <section class="scroll-section" id="folder-analysis">
        <div class="section-bg-accent right parallax-element" data-parallax-speed="0.08"></div>
        <div class="container">
            <div class="row mb-5">
                <div class="col-md-6">
                    <h2 class="display-5 fw-bold mb-3" data-animation="slide-in-left">Folder Analysis</h2>
                    <p class="lead" data-animation="slide-in-left" data-delay="200">Compare security patches between local directories with precision</p>
                </div>
            </div>
            <div class="section-content">
                <div class="code-preview flex-grow-1" data-animation="fade-in" data-delay="300">
                    <pre><code class="hljs language-diff">--- magento2-2.4.6-p8/Download.php
+++ magento2-2.4.6-p9/Download.php
@@ -81,13 +81,11 @@
         return $resultRedirect;
     }

-    // phpcs:ignore Magento2.Functions.DiscouragedFunction
-    $fileName = basename($fileName);
-
-    $exportDirectory = $this->filesystem->getDirectoryRead(...);
+    $exportDirectory = $this->filesystem->getDirectoryWrite(...);
     try {
-        $fileExist = $exportDirectory->isExist('export/' . $fileName);
+        $fileName = $exportDirectory->getDriver()->getRealPathSafety(...);
+        $fileExist = $exportDirectory->isExist('export' . $fileName);
     } catch (Throwable $e) {
         $fileExist = false;
     }</code></pre>
                    <div class="mt-3 text-muted">
                        <small><i class="fas fa-exclamation-triangle text-danger me-1"></i> Identified CVE-2024-47048: Rocket.Chat 6.12.0 and earlier allows stored XSS in the description and release notes of the marketplace and private apps.</small>
                    </div>
                </div>
                <div class="ui-mockup flex-grow-1" data-animation="fade-in" data-delay="500">
                    <h4 class="mb-4"><i class="fas fa-folder me-2 text-primary"></i>Folder Analysis</h4>
                    <div class="alert">
                        <i class="fas fa-code-compare me-2"></i>
                        Comparing versions: Magento 2.4.6-p8 → 2.4.6-p9
                    </div>
                    <div class="d-flex flex-column flex-md-row gap-3 mb-4">
                        <div class="input-group">
                            <span class="input-group-text bg-dark border-0">
                                <i class="fas fa-code-branch text-primary"></i>
                            </span>
                            <input type="text" class="form-control bg-dark text-light" 
                                   value="Magento 2.4.6-p8" readonly>
                        </div>
                        <div class="input-group">
                            <span class="input-group-text bg-dark border-0">
                                <i class="fas fa-code-branch text-primary"></i>
                            </span>
                            <input type="text" class="form-control bg-dark text-light" 
                                   value="Magento 2.4.6-p9" readonly>
                        </div>
                    </div>
                    <a href="/folder" class="btn btn-primary w-100 mb-3">
                        <i class="fas fa-search me-2"></i>Analyze Folder Versions
                    </a>
                    <div class="alert alert-info mt-3">
                        <i class="fas fa-info-circle me-2"></i>
                        Analyzes security patches between local directory versions
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="scroll-section" id="product-analysis">
        <div class="section-bg-accent left parallax-element" data-parallax-speed="0.06"></div>
        <div class="container">
            <div class="row mb-5">
                <div class="col-md-6">
                    <h2 class="display-5 fw-bold mb-3" data-animation="slide-in-right">Product Analysis</h2>
                    <p class="lead" data-animation="slide-in-right" data-delay="200">Track and analyze security patches across GitHub repositories</p>
                </div>
            </div>
            <div class="section-content">
                <div class="code-preview flex-grow-1" data-animation="fade-in" data-delay="300">
                    <pre><code class="hljs language-python">@app.route('/manage-products', methods=['POST'])
def add_product():
    product_name = request.form['product_name']
    repo_url = request.form['repo_url']
    
    products = load_products()
    products[product_name] = {
        'repo': repo_url,
        'versions': fetch_github_tags(repo_url)
    }
    save_products(products)
    return redirect('/products')</code></pre>
                    <div class="mt-3 text-muted">
                        <small><i class="fas fa-code-branch text-primary me-1"></i> Automatically caches GitHub tags for future analysis</small>
                    </div>
                </div>
                <div class="ui-mockup flex-grow-1" data-animation="fade-in" data-delay="500">
                    <h4 class="mb-4"><i class="fab fa-github me-2 text-primary"></i>Product Management</h4>
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle me-2"></i>
                        Currently managing 4 products
                    </div>
                    <div class="input-group mb-3">
                        <span class="input-group-text bg-dark border-0">
                            <i class="fas fa-box text-primary"></i>
                        </span>
                        <input type="text" class="form-control bg-dark text-light" 
                               value="Microweber" readonly>
                    </div>
                    <div class="input-group mb-3">
                        <span class="input-group-text bg-dark border-0">
                            <i class="fab fa-github text-primary"></i>
                        </span>
                        <input type="url" class="form-control bg-dark text-light" 
                               value="https://github.com/microweber/microweber" readonly>
                    </div>
                    <a href="/manage-products">
                        <button class="btn btn-primary w-100 mb-3">
                            <i class="fas fa-save me-2"></i>Save Product
                        </button>
                    </a>
                    <a href="/products" class="btn btn-outline-primary w-100">
                        <i class="fas fa-list me-2"></i>Analyze Saved Products
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section class="scroll-section" id="ai-analysis">
        <div class="section-bg-accent right parallax-element" data-parallax-speed="0.07"></div>
        <div class="container">
            <div class="row mb-5">
                <div class="col-md-6">
                    <h2 class="display-5 fw-bold mb-3" data-animation="slide-in-left">AI Analysis</h2>
                    <p class="lead" data-animation="slide-in-left" data-delay="200">Advanced AI-powered code vulnerability detection</p>
                </div>
            </div>
            <div class="section-content">
                <div class="ui-mockup flex-grow-1" data-animation="fade-in" data-delay="300">
                    <h4 class="mb-4"><i class="fas fa-robot me-2 text-primary"></i>AI Analysis Configuration</h4>
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Current model: <span class="badge bg-dark">qwen2.5-coder:3b (Ollama)</span>
                    </div>
                    <div class="mb-4">
                        <label class="form-label d-flex justify-content-between">
                            Model Temperature
                            <span class="badge bg-primary" id="tempValue">1.0</span>
                        </label>
                        <input type="range" class="form-range" 
                               min="0" max="2" step="0.1" value="1.0"
                               id="temperature">
                    </div>
                    <a href="/ai-settings" class="btn btn-outline-primary w-100 mb-3">
                        <i class="fas fa-cog me-2"></i>AI Settings
                    </a>
                    <div class="alert alert-info">
                        <i class="fas fa-lightbulb me-2"></i>
                        Higher temperature increases creativity, lower increases focus
                    </div>
                </div>
                <div class="code-preview flex-grow-1" data-animation="fade-in" data-delay="500">
                    <pre><code class="hljs language-python">def load_ai_config():
    return {
        'service': 'ollama',
        'ollama': {
            'url': 'http://localhost:11434',
            'model': 'qwen2.5-coder:3b'
        },
        'parameters': {
            'temperature': 1.0,
            'num_ctx': 8192
        }
    }</code></pre>
                    <div class="mt-3 text-muted">
                        <small><i class="fas fa-plug text-primary me-1"></i> Configuration supports multiple AI providers</small>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="scroll-section" id="reports">
        <div class="section-bg-accent left parallax-element" data-parallax-speed="0.05"></div>
        <div class="container">
            <div class="row mb-5">
                <div class="col-md-6">
                    <h2 class="display-5 fw-bold mb-3" data-animation="slide-in-right">Analysis Reports</h2>
                    <p class="lead" data-animation="slide-in-right" data-delay="200">Comprehensive security vulnerability reports</p>
                </div>
            </div>
            <div class="section-content">
                <div class="ui-mockup flex-grow-1" data-animation="fade-in" data-delay="300">
                    <h4 class="mb-4"><i class="fas fa-file-alt me-2 text-primary"></i>Saved Analysis Report</h4>
                    <div class="analysis-result">
                        <div class="mb-3">
                            <span class="badge bg-danger badge-glow me-2">CVE-2025-24406</span>
                            <span class="text-success">Patched in 2.4.6-p9</span>
                        </div>
                        <div class="mb-3">
                            <span class="badge bg-primary me-2">Magento</span>
                            <span class="text-muted d-block d-md-inline mt-1 mt-md-0">Analysis ID: b8f7be59-c281-4301-8e60-bb86a3367eb4</span>
                        </div>
                        <a href="/reports" 
                           class="btn btn-success w-100">
                            <i class="fas fa-file-export me-2"></i>Show Saved Report
                        </a>
                    </div>
                </div>
                <div class="code-preview flex-grow-1" data-animation="fade-in" data-delay="500">
                    <pre><code class="hljs language-json">{
  "analysis_id": "b8f7be59-c281-4301-8e60-bb86a3367eb4",
  "timestamp": "2025-04-18T10:57:01Z",
  "parameters": {
    "product": "Magento",
    "old_version": "2.4.6-p8",
    "new_version": "2.4.6-p9"
  },
  "findings": [
    {
      "file": "Download.php",
      "cve": "CVE-2025-24406",
      "severity": "Critical",
      "patch": "Added path safety checks",
      "status": "Resolved"
    }
  ]
}</code></pre>
                    <div class="mt-3 text-muted">
                        <small><i class="fas fa-chart-pie text-primary me-1"></i> Full report includes AI analysis and CVE details</small>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer class="py-5 mt-5">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-4 col-md-6">
                    <div class="footer-brand mb-4">
                        <a href="#" class="d-flex align-items-center text-decoration-none">
                            <i class="fas fa-shield-alt fs-3 me-2 text-primary"></i>
                            <span class="fs-4 fw-bold text-white">PatchLeaks</span>
                        </a>
                    </div>
                    <p class="text-muted mb-4">Advanced security patch analysis system for enterprise applications. Detect vulnerabilities before they become threats.</p>
                    <div class="footer-social d-flex gap-3">
                        <a href="#" class="social-link" aria-label="GitHub">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="#" class="social-link" aria-label="Twitter">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="social-link" aria-label="LinkedIn">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        <a href="#" class="social-link" aria-label="Discord">
                            <i class="fab fa-discord"></i>
                        </a>
                    </div>
                </div>
                
                <div class="col-lg-2 col-md-6 col-6">
                    <h5 class="footer-heading">Products</h5>
                    <ul class="footer-links">
                        <li><a href="#folder-analysis">Folder Analysis</a></li>
                        <li><a href="#product-analysis">Product Analysis</a></li>
                        <li><a href="#ai-analysis">AI Analysis</a></li>
                        <li><a href="#reports">Reports</a></li>
                    </ul>
                </div>
                
                <div class="col-lg-2 col-md-6 col-6">
                    <h5 class="footer-heading">Resources</h5>
                    <ul class="footer-links">
                        <li><a href="#">Documentation</a></li>
                        <li><a href="#">API Reference</a></li>
                        <li><a href="#">Tutorials</a></li>
                        <li><a href="#">Blog</a></li>
                    </ul>
                </div>
                
                <div class="col-lg-2 col-md-6 col-6">
                    <h5 class="footer-heading">Company</h5>
                    <ul class="footer-links">
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Partners</a></li>
                    </ul>
                </div>
                
                <div class="col-lg-2 col-md-6 col-6">
                    <h5 class="footer-heading">Legal</h5>
                    <ul class="footer-links">
                        <li><a href="#">Privacy</a></li>
                        <li><a href="#">Terms</a></li>
                        <li><a href="#">Security</a></li>
                        <li><a href="#">Compliance</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="footer-newsletter mt-5 p-4">
                <div class="row align-items-center">
                    <div class="col-lg-5 mb-4 mb-lg-0">
                        <h5 class="text-white mb-1">Stay updated</h5>
                        <p class="text-muted mb-0">Get the latest security updates and news</p>
                    </div>
                    <div class="col-lg-7">
                        <form class="d-flex flex-column flex-sm-row gap-2">
                            <input type="email" class="form-control" placeholder="Enter your email" aria-label="Email">
                            <button type="submit" class="btn btn-primary">Subscribe</button>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="footer-bottom d-flex flex-column flex-md-row justify-content-between align-items-center mt-5 pt-4 border-top border-secondary">
                <p class="mb-3 mb-md-0 text-muted">© 2025 PatchLeaks. All rights reserved.</p>
                <div class="d-flex gap-3 flex-wrap">
                    <a href="#" class="text-muted text-decoration-none small">Privacy Policy</a>
                    <span class="text-muted d-none d-md-inline">•</span>
                    <a href="#" class="text-muted text-decoration-none small">Terms of Service</a>
                    <span class="text-muted d-none d-md-inline">•</span>
                    <a href="#" class="text-muted text-decoration-none small">Cookie Settings</a>
                </div>
            </div>
        </div>
    </footer>

    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/notifications.js"></script>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/highlight.min.js"></script>
    <script>
        hljs.highlightAll();
        
        
        function throttle(func, limit) {
            let inThrottle;
            return function() {
                const args = arguments;
                const context = this;
                if (!inThrottle) {
                    func.apply(context, args);
                    inThrottle = true;
                    setTimeout(() => inThrottle = false, limit);
                }
            }
        }
        
        
        function debounce(func, wait) {
            let timeout;
            return function executedFunction(...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func(...args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        }
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting && !entry.target.classList.contains('active')) {
                    entry.target.classList.add('active');
                    
                    const animatedElements = entry.target.querySelectorAll('[data-animation]');
                    animatedElements.forEach(el => {
                        const delay = el.dataset.delay || 0;
                        const animation = el.dataset.animation || 'fade-in';
                        
                        setTimeout(() => {
                            el.classList.add(animation);
                        }, delay);
                    });
                }
            });
        }, { threshold: 0.15, rootMargin: '0px' });

        document.querySelectorAll('.scroll-section').forEach(section => {
            observer.observe(section);
            
            const animatedElements = section.querySelectorAll('[data-animation]');
            animatedElements.forEach(el => {
                el.classList.remove('fade-in', 'slide-up', 'slide-in-right', 'slide-in-left');
            });
        });

        document.getElementById('temperature').addEventListener('input', (e) => {
            document.getElementById('tempValue').textContent = e.target.value;
        });

        
        const handleScroll = throttle(() => {
            const scrolled = window.scrollY > 100;
            const scrollIndicator = document.querySelector('.scroll-indicator');
            const navbar = document.querySelector('.navbar');
            
            if (scrollIndicator) {
                scrollIndicator.style.opacity = scrolled ? '0' : '1';
            }
            
            if (navbar) {
                if (scrolled && !navbar.classList.contains('scrolled')) {
                    navbar.classList.add('scrolled');
                } else if (!scrolled && navbar.classList.contains('scrolled')) {
                    navbar.classList.remove('scrolled');
                }
            }
        }, 16); 

        window.addEventListener('scroll', handleScroll, { passive: true });

        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const mobileMenu = document.getElementById('mobileMenu');
                if (mobileMenu) mobileMenu.classList.remove('active');
                
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        document.getElementById('mobileMenuToggle')?.addEventListener('click', () => {
            document.getElementById('mobileMenu')?.classList.add('active');
        });
        
        document.getElementById('mobileMenuClose')?.addEventListener('click', () => {
            document.getElementById('mobileMenu')?.classList.remove('active');
        });
        
        
        if (window.innerWidth > 768) {
            let ticking = false;
            let mouseX = 0.5;
            let mouseY = 0.5;
            
            const updateParallax = () => {
                const parallaxElements = document.querySelectorAll('.parallax-element');
                parallaxElements.forEach(el => {
                    const speed = parseFloat(el.dataset.parallaxSpeed) || 0.1;
                    const x = (mouseX - 0.5) * 100 * speed;
                    const y = (mouseY - 0.5) * 100 * speed;
                    el.style.transform = `translate3d(${x}px, ${y}px, 0)`;
                });
                ticking = false;
            };
            
            document.addEventListener('mousemove', (e) => {
                mouseX = e.clientX / window.innerWidth;
                mouseY = e.clientY / window.innerHeight;
                
                if (!ticking) {
                    requestAnimationFrame(updateParallax);
                    ticking = true;
                }
            }, { passive: true });
        } else {
            
            document.querySelectorAll('.parallax-element').forEach(el => {
                el.style.transform = 'none';
            });
        }
        
        if ('ontouchstart' in window || navigator.maxTouchPoints) {
            const buttons = document.querySelectorAll('.btn');
            buttons.forEach(btn => {
                btn.addEventListener('touchstart', () => {
                    btn.style.transform = 'scale(0.98)';
                });
                
                btn.addEventListener('touchend', () => {
                    btn.style.transform = '';
                });
            });
            
            window.addEventListener('deviceorientation', (e) => {
                if (!e.beta || !e.gamma) return;
                
                const parallaxElements = document.querySelectorAll('.parallax-element');
                const tiltX = e.gamma / 90;
                const tiltY = e.beta / 90;
                
                parallaxElements.forEach(el => {
                    const speed = el.dataset.parallaxSpeed || 0.1;
                    const x = tiltX * 30 * speed;
                    const y = tiltY * 30 * speed;
                    el.style.transform = `translate(${x}px, ${y}px)`;
                });
            });
        }

        function animateCodeLines(progress, easedProgress) {
            const phases = {
                imports: { start: 0.10, end: 0.25 },
                transform: { start: 0.0, end: 0.80 },
                complete: { start: 0.80, end: 0.90 }
            };
            
            const getPhaseProgress = (phase) => {
                if (progress < phase.start) return 0;
                if (progress > phase.end) return 1;
                return (progress - phase.start) / (phase.end - phase.start);
            };
            
            const transformProgress = getPhaseProgress(phases.transform);
            
            const codeContainer = document.getElementById('codeDiffContainer');
            if (codeContainer && codeContainer.querySelector('code').innerHTML.trim() === '') {
                initializeCodeDisplay();
            }
            
            const dangerousBlock = document.getElementById('dangerous-block');
            if (dangerousBlock || codeContainer) {
                transformDangerousLineContent(dangerousBlock, transformProgress);
            }
            
            const completeProgress = getPhaseProgress(phases.complete);
            if (completeProgress > 0) {
                const securityAnnotations = document.querySelectorAll('[data-target="4"], [data-target="8"], [data-target="18"]');
                securityAnnotations.forEach(annotation => annotation.classList.add('active'));
                
                const progressKnob = document.getElementById('progressKnob');
                if (progressKnob) {
                    progressKnob.style.transform = `translate(-50%, -50%) rotate(${progress * 360}deg) scale(${1 + (completeProgress * 0.1)})`;
                    if (completeProgress > 0.5) {
                        progressKnob.style.boxShadow = `0 0 ${15 * completeProgress}px rgba(65,105,225,0.6)`;
                    }
                }
            }
        }
        
        function transformDangerousLineContent(element, progress) {
            const codeContainer = document.getElementById('codeDiffContainer');
            if (!codeContainer) return;
            
            const originalCode = {
                imports: [
                    'import &#123; ExternalLink &#125; from \'@rocket.chat/ui-client\';',
                    'import type &#123; TranslationKey &#125; from \'@rocket.chat/ui-contexts\';',
                    'import &#123; useTranslation &#125; from \'@rocket.chat/ui-contexts\';',
                    'import React from \'react\';',
                    'import ScreenshotCarouselAnchor from \'../../../components/ScreenshotCarouselAnchor\';',
                    'import type &#123; AppInfo &#125; from \'../../../definitions/AppInfo\';',
                    'import AppDetailsAPIs from \'./AppDetailsAPIs\';',
                    'import &#123; normalizeUrl &#125; from \'./normalizeUrl\';'
                ],
                vuln_line: '                    &lt;Box dangerouslySetInnerHTML=&#123;&#123; __html: isMarkdown ? detailedDescription.rendered : description &#125;&#125; withRichContent /&gt;'
            };

            const patchedCode = {
                secure_lines: [
                    '                    &lt;Box',
                    '                        dangerouslySetInnerHTML=&#123;&#123;',
                    '                            __html: isMarkdown',
                    '                                ? DOMPurify.sanitize(detailedDescription.rendered, purifyOptions)',
                    '                                : DOMPurify.sanitize(description, purifyOptions),',
                    '                        &#125;&#125;',
                    '                        withRichContent',
                    '                    /&gt;'
                ]
            };
            
            let content = '';
            const importLines = [];
            
            importLines.push(`<span class="code-line" data-line="1">${originalCode.imports[0]}</span>`);
            importLines.push(`<span class="code-line" data-line="2">${originalCode.imports[1]}</span>`);
            importLines.push(`<span class="code-line" data-line="3">${originalCode.imports[2]}</span>`);
            
            if (progress > 0.2) {
                const domPurifyOpacity = Math.min(1, (progress - 0.2) / 0.15);
                importLines.push(`<span class="code-line add-line" data-line="4" style="opacity: ${domPurifyOpacity}; transform: translateX(${20 * (1 - domPurifyOpacity)}px); background: rgba(0, 184, 148, ${domPurifyOpacity * 0.15});">import DOMPurify from 'dompurify';</span>`);
            }
            
            importLines.push(`<span class="code-line" data-line="5">${originalCode.imports[3]}</span>`);
            importLines.push(`<span class="code-line" data-line="6">${originalCode.imports[4]}</span>`);
            importLines.push(`<span class="code-line" data-line="7">${originalCode.imports[5]}</span>`);
            
            if (progress > 0.35) {
                const purifyOpacity = Math.min(1, (progress - 0.35) / 0.15);
                importLines.push(`<span class="code-line add-line" data-line="8" style="opacity: ${purifyOpacity}; transform: translateX(${20 * (1 - purifyOpacity)}px); background: rgba(0, 184, 148, ${purifyOpacity * 0.15});">import &#123; purifyOptions &#125; from '../../../lib/purifyOptions';</span>`);
            }
            
            importLines.push(`<span class="code-line" data-line="9">${originalCode.imports[6]}</span>`);
            importLines.push(`<span class="code-line" data-line="10">${originalCode.imports[7]}</span>`);
            
            content = importLines.join('');
            
            content += `<span class="code-line spacer" data-line="11">...</span>`;
            content += `<span class="code-line" data-line="12">                    &lt;Box fontScale='h4' mbe=&#123;8&#125; color='titles-labels'&gt;</span>`;
            content += `<span class="code-line" data-line="13">                        &#123;t('Description')&#125;</span>`;
            content += `<span class="code-line" data-line="14">                    &lt;/Box&gt;</span>`;
            
            if (progress < 0.5) {
                content += `<span class="code-line transforming-block" data-line="15" style="background: rgba(231, 76, 60, 0.1); border-left: 3px solid var(--danger-color);">${originalCode.vuln_line}</span>`;
            } else if (progress < 0.6) {
                const removeProgress = (progress - 0.5) / 0.1;
                content += `<span class="code-line line-removed" data-line="15" style="opacity: ${1 - removeProgress * 0.5}; text-decoration: line-through; background: rgba(231, 76, 60, ${0.15 - removeProgress * 0.1});">${originalCode.vuln_line}</span>`;
            } else {
                const transformProgress = (progress - 0.6) / 0.4;
                const totalLines = patchedCode.secure_lines.length;
                const visibleLines = Math.min(totalLines, Math.floor(transformProgress * totalLines) + 1);
                
                for (let i = 0; i < visibleLines; i++) {
                    const lineProgress = Math.max(0, Math.min(1, (transformProgress * totalLines) - i));
                    const isTyping = i === visibleLines - 1 && lineProgress < 1;
                    
                    content += `<span class="code-line line-added" data-line="${15 + i}" style="opacity: ${lineProgress}; background: rgba(0, 184, 148, ${lineProgress * 0.15}); border-left: 3px solid rgba(0, 184, 148, ${lineProgress}); transform: translateX(${10 * (1 - lineProgress)}px);">${patchedCode.secure_lines[i]}${isTyping ? '<span class="typing-cursor"></span>' : ''}</span>`;
                }
            }
            
            content += `<span class="code-line" data-line="23">                &lt;/Box&gt;</span>`;
            content += `<span class="code-line" data-line="24">                &lt;Box is='section'&gt;</span>`;
            
            codeContainer.querySelector('code').innerHTML = content;
        }

        function initializeCodeDisplay() {
            const dangerousBlock = document.getElementById('dangerous-block');
            if (dangerousBlock) {
                transformDangerousLineContent(dangerousBlock, 0);
            }
        }

        function initStickyFolderAnalysis() {
            const stickySection = document.querySelector('.sticky-folder-analysis');
            const stickyContainer = document.querySelector('.sticky-container');
            const scrollSpacer = document.querySelector('.scroll-spacer');
            const progressFill = document.getElementById('progressFill');
            const progressKnob = document.getElementById('progressKnob');
            const transformStatus = document.getElementById('transformStatus');
            
            if (!stickySection || !stickyContainer || !scrollSpacer) return;
            
            let isTransformationActive = false;
            let animationFrame = null;
            let lastScrollY = window.scrollY;
            let progressValue = 0;

            function updateTransformation() {
                const stickyRect = stickySection.getBoundingClientRect();
                const spacerRect = scrollSpacer.getBoundingClientRect();
                const viewportHeight = window.innerHeight;
                const spacerTop = spacerRect.top;
                const spacerHeight = spacerRect.height;
                const progress = Math.max(0, Math.min(1, (viewportHeight - spacerTop) / spacerHeight));
                progressValue = progress;
                
                const easeInOutCubic = (t) => {
                    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
                };
                
                const easedProgress = easeInOutCubic(progress);
                
                progressFill.style.width = `${progress * 100}%`;
                progressKnob.style.left = `${progress * 100}%`;
                
                const shouldTransform = progress > 0.3;
                
                if (shouldTransform !== isTransformationActive) {
                    isTransformationActive = shouldTransform;
                    
                    if (shouldTransform) {
                        stickyContainer.classList.add('transformation-active');
                        transformStatus.textContent = 'Vulnerability Patched ✓';
                        
                        if (navigator.vibrate) {
                            navigator.vibrate(50);
                        }
                        
                        setTimeout(() => {
                            const vulnerableTab = document.querySelector('.vulnerable-tab');
                            const fixedTab = document.querySelector('.fixed-tab');
                            
                            if (vulnerableTab && fixedTab) {
                                vulnerableTab.style.opacity = '0.5';
                                fixedTab.style.opacity = '1';
                                fixedTab.style.borderColor = 'rgba(0, 184, 148, 0.6)';
                            }
                        }, 600);
                        
                    } else {
                        stickyContainer.classList.remove('transformation-active');
                        transformStatus.textContent = 'CVE-2024-47048 Detected';
                        
                        const vulnerableTab = document.querySelector('.vulnerable-tab');
                        const fixedTab = document.querySelector('.fixed-tab');
                        
                        if (vulnerableTab && fixedTab) {
                            vulnerableTab.style.opacity = '1';
                            fixedTab.style.opacity = '0.7';
                            fixedTab.style.borderColor = 'rgba(0, 184, 148, 0.3)';
                        }
                    }
                }
                
                animateCodeLines(progress, easedProgress);
                
                animationFrame = null;
            }

            function handleScroll() {
                const stickyRect = stickySection.getBoundingClientRect();
                const scrollSection = document.getElementById('folder-analysis');
                
                if (bypassStickyLock || !(stickyRect.top <= 0 && stickyRect.bottom > 0 && progressValue < 1)) {
                    lastScrollY = window.scrollY;
                    if (!animationFrame) {
                        animationFrame = requestAnimationFrame(updateTransformation);
                    }
                    return; 
                }
                
                const stickyBottom = stickyRect.bottom + window.scrollY;
                if (window.scrollY + window.innerHeight > stickyBottom && window.scrollY > lastScrollY) {
                    window.scrollTo({ top: stickyBottom - window.innerHeight, behavior: 'auto' });
                    lastScrollY = window.scrollY;
                    return;
                }
                lastScrollY = window.scrollY;
                if (!animationFrame) {
                    animationFrame = requestAnimationFrame(updateTransformation);
                }
            }

            window.addEventListener('scroll', handleScroll, { passive: false });
            updateTransformation();
            let resizeTimeout;
            window.addEventListener('resize', () => {
                clearTimeout(resizeTimeout);
                resizeTimeout = setTimeout(updateTransformation, 100);
            });
        }
        
        document.addEventListener('DOMContentLoaded', () => {
            initializeCodeDisplay();
            setTimeout(initStickyFolderAnalysis, 100);
        });
        
        let bypassStickyLock = false;
        
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.navbar-nav .nav-link[href^="#"]').forEach(link => {
                link.addEventListener('click', function() {
                    bypassStickyLock = true;
                    setTimeout(() => { bypassStickyLock = false; }, 2000); 
                });
            });
        });

    </script>
    <script>
    
    document.addEventListener('DOMContentLoaded', function() {
        
        const sections = Array.from(document.querySelectorAll('.scroll-section[id]'));
        const navLinks = Array.from(document.querySelectorAll('.navbar-nav .nav-link[href^="#"]'));
        const sectionOffsets = new Map();
        
        
        function updateSectionOffsets() {
            sections.forEach(section => {
                sectionOffsets.set(section.id, section.offsetTop - 120);
            });
        }
        
        updateSectionOffsets();
        window.addEventListener('resize', debounce(updateSectionOffsets, 250));

        const onScroll = throttle(() => {
            const scrollY = window.scrollY;
            let current = '';
            
            
            for (const section of sections) {
                if (scrollY >= sectionOffsets.get(section.id)) {
                    current = section.id;
                }
            }

            
            navLinks.forEach(link => {
                const isActive = link.getAttribute('href') === '#' + current;
                if (isActive && !link.classList.contains('active')) {
                    link.classList.add('active');
                } else if (!isActive && link.classList.contains('active')) {
                    link.classList.remove('active');
                }
            });
        }, 100); 

        window.addEventListener('scroll', onScroll, { passive: true });
        onScroll(); 

        
        navLinks.forEach(link => {
            link.addEventListener('click', function() {
                this.blur();
            });
        });
    });
    </script>
</body>
</html>
