webapp/templates/help.html

{% extends "base.html" %}

{% block title %}Help - {{ settings.app_name }}{% endblock %}

{% block head %}
<style>
    /* Scroll margin for anchor links */
    [id] {
        scroll-margin-top: 5rem;
    }

    /* Active sidebar link highlighting */
    .sidebar-link.active {
        color: #2563eb;
        background-color: #eff6ff;
        font-weight: 500;
    }

    .sidebar-link {
        transition: all 0.15s ease;
    }

    .sidebar-link:hover {
        background-color: #f3f4f6;
    }

    .sidebar-sub-link {
        padding-left: 2rem !important;
        font-size: 0.8125rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
    <div class="flex gap-8">
        <!-- Sticky Sidebar (hidden on mobile) -->
        <aside class="hidden lg:block w-64 flex-shrink-0">
            <nav class="sticky top-20 space-y-1 max-h-[calc(100vh-6rem)] overflow-y-auto pb-8">
                <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wide px-3 py-2">Contents</h2>

                <!-- Single Input Entry -->
                <a href="#single-input" class="sidebar-link block px-3 py-2 text-sm text-gray-700 rounded-md">
                    1. Single Input Entry
                </a>
                <a href="#tutorial" class="sidebar-link sidebar-sub-link block px-3 py-2 text-gray-600 rounded-md">
                    Tutorial
                </a>
                <a href="#exon-requirements" class="sidebar-link sidebar-sub-link block px-3 py-2 text-gray-600 rounded-md">
                    Exon Entry Requirements
                </a>
                <a href="#file-uploads" class="sidebar-link sidebar-sub-link block px-3 py-2 text-gray-600 rounded-md">
                    Accepted File Formats
                </a>

                <!-- Mutagenesis Analysis -->
                <a href="#mutagenesis" class="sidebar-link block px-3 py-2 text-sm text-gray-700 rounded-md">
                    2. Mutagenesis Analysis
                </a>

                <!-- Comparing Sequences -->
                <a href="#comparing" class="sidebar-link block px-3 py-2 text-sm text-gray-700 rounded-md">
                    3. Comparing Sequences
                </a>

                <!-- User Data Storage -->
                <a href="#user-data" class="sidebar-link block px-3 py-2 text-sm text-gray-700 rounded-md">
                    4. User Data Storage
                </a>
                <a href="#tokens" class="sidebar-link sidebar-sub-link block px-3 py-2 text-gray-600 rounded-md">
                    Access Tokens
                </a>
                <a href="#account-login" class="sidebar-link sidebar-sub-link block px-3 py-2 text-gray-600 rounded-md">
                    Account Login
                </a>

                <!-- History -->
                <a href="#history" class="sidebar-link block px-3 py-2 text-sm text-gray-700 rounded-md">
                    5. History
                </a>

                <!-- Understanding Results -->
                <a href="#results" class="sidebar-link block px-3 py-2 text-sm text-gray-700 rounded-md">
                    6. Understanding Results
                </a>
                <a href="#psi-values" class="sidebar-link sidebar-sub-link block px-3 py-2 text-gray-600 rounded-md">
                    PSI Values
                </a>
                <a href="#force-plot" class="sidebar-link sidebar-sub-link block px-3 py-2 text-gray-600 rounded-md">
                    Force Plot
                </a>

                <!-- FAQ -->
                <a href="#faq" class="sidebar-link block px-3 py-2 text-sm text-gray-700 rounded-md">
                    7. FAQ
                </a>
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 min-w-0">
            <!-- Header -->
            <div class="mb-10">
                <h1 class="text-3xl font-bold text-gray-900">Help & Documentation</h1>
                <p class="mt-4 text-lg text-gray-600">
                    Everything to know about the RNA Splicing Predictor
                </p>
            </div>

            <!-- ==================== SECTION 1: Single Input Entry ==================== -->
            <section id="single-input" class="mb-12">
                <h2 class="text-2xl font-bold text-gray-900 mb-6 pb-2 border-b border-gray-200">
                    1. Single Input Entry
                </h2>

                <!-- Tutorial Subsection -->
                <div id="tutorial" class="mb-8">
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">Tutorial</h3>
                    <p class="text-gray-600 mb-4">
                        Follow these steps to make a first prediction:
                    </p>

                    <div class="space-y-6">
                        <!-- Step 1 -->
                        <div class="flex items-start">
                            <span class="flex-shrink-0 flex items-center justify-center h-8 w-8 rounded-full bg-primary-600 text-white font-bold text-sm">1</span>
                            <div class="ml-4">
                                <h4 class="font-medium text-gray-900">Prepare the Sequence</h4>
                                <p class="text-gray-600 mt-1">
                                    A 70-nucleotide exon sequence containing only A, C, G, T characters is required.
                                </p>
                            </div>
                        </div>

                        <!-- Step 2 -->
                        <div class="flex items-start">
                            <span class="flex-shrink-0 flex items-center justify-center h-8 w-8 rounded-full bg-primary-600 text-white font-bold text-sm">2</span>
                            <div class="ml-4">
                                <h4 class="font-medium text-gray-900">Enter the Sequence</h4>
                                <p class="text-gray-600 mt-1">
                                    Go to the <a href="/input" class="text-primary-600 hover:text-primary-800">Predict page</a> and paste the sequence. Use "Try Example" if no sequence is available.
                                </p>
                            </div>
                        </div>

                        <!-- Step 3 -->
                        <div class="flex items-start">
                            <span class="flex-shrink-0 flex items-center justify-center h-8 w-8 rounded-full bg-primary-600 text-white font-bold text-sm">3</span>
                            <div class="ml-4">
                                <h4 class="font-medium text-gray-900">Submit and Wait</h4>
                                <p class="text-gray-600 mt-1">
                                    Click "Predict PSI" to submit. The model adds flanking sequences, predicts secondary structure, and computes PSI.
                                </p>
                            </div>
                        </div>

                        <!-- Step 4 -->
                        <div class="flex items-start">
                            <span class="flex-shrink-0 flex items-center justify-center h-8 w-8 rounded-full bg-primary-600 text-white font-bold text-sm">4</span>
                            <div class="ml-4">
                                <h4 class="font-medium text-gray-900">View Results</h4>
                                <p class="text-gray-600 mt-1">
                                    Results include PSI value, RNA structure, MFE, and interactive visualizations showing position contributions.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Exon Requirements Subsection -->
                <div id="exon-requirements" class="mb-8">
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">Exon Entry Requirements</h3>

                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <ul class="space-y-4 text-gray-600">
                            <li>
                                <span class="font-medium text-gray-900">Exactly 70 nucleotides</span> — The model was trained on 70nt exons. 10nt flanking sequences are added automatically.
                            </li>
                            <li>
                                <span class="font-medium text-gray-900">Valid characters only</span> — Only A, C, G, T accepted. RNA sequences (with U) should be converted to DNA (U → T).
                            </li>
                            <li>
                                <span class="font-medium text-gray-900">No spaces or headers</span> — Enter raw sequence only. No FASTA headers, spaces, line breaks, or numbers.
                            </li>
                        </ul>
                    </div>

                    <div class="mt-4 bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm font-medium text-gray-700 mb-2">Valid Example</h4>
                        <code class="block bg-white p-3 rounded border text-sm font-mono break-all">
                            GGTAGTACGCCAATTCGCCGGTGCCGCGAGCCAGAGGCTACCAAAACTTGACAAGCCTACATATACTACT
                        </code>
                    </div>
                </div>

                <!-- File Uploads Subsection -->
                <div id="file-uploads" class="mb-8">
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">Accepted File Upload Formats</h3>

                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <p class="text-gray-600 mb-4">For batch predictions, files can be uploaded in these formats:</p>

                        <div class="space-y-4">
                            <div class="border-l-4 border-primary-500 pl-4">
                                <h4 class="font-medium text-gray-900">FASTA (.fasta, .fa)</h4>
                                <pre class="mt-2 bg-gray-50 p-3 rounded text-sm font-mono text-gray-700">>Sequence_1
GGTAGTACGCCAATTCGCCGGTGCCGCGAGCCAGAGGCTACCAAAACTTGACAAGCCTACATATACTACT
>Sequence_2
CTACCACCTCCCAAGCTTACACACTGTTTGATGAAAGGTCGCCACAACGTTCCCTCACCCCTAGTCTCGC</pre>
                            </div>

                            <div class="border-l-4 border-primary-500 pl-4">
                                <h4 class="font-medium text-gray-900">CSV (.csv)</h4>
                                <p class="text-gray-600 text-sm mt-1">Must have columns: <code class="bg-gray-100 px-1 rounded">name</code> and <code class="bg-gray-100 px-1 rounded">sequence</code></p>
                                <pre class="mt-2 bg-gray-50 p-3 rounded text-sm font-mono text-gray-700">name,sequence
Sequence_1,GGTAGTACGCCAATTCGCCGGTGCCGCGAGCCAGAGGCTACCAAAACTTGACAAGCCTACATATACTACT
Sequence_2,CTACCACCTCCCAAGCTTACACACTGTTTGATGAAAGGTCGCCACAACGTTCCCTCACCCCTAGTCTCGC</pre>
                            </div>

                            <div class="border-l-4 border-primary-500 pl-4">
                                <h4 class="font-medium text-gray-900">Plain Text (.txt)</h4>
                                <p class="text-gray-600 text-sm mt-1">One sequence per line (names auto-generated)</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- ==================== SECTION 2: Mutagenesis Analysis ==================== -->
            <section id="mutagenesis" class="mb-12">
                <h2 class="text-2xl font-bold text-gray-900 mb-6 pb-2 border-b border-gray-200">
                    2. Mutagenesis Analysis
                </h2>

                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <p class="text-gray-600 mb-4">
                        The mutagenesis feature generates all possible single-point mutations for the input sequence and predicts PSI for each variant.
                    </p>

                    <ul class="space-y-3 text-gray-600 mb-6">
                        <li><span class="font-medium text-gray-900">210 mutations generated</span> — 70 positions x 3 alternate nucleotides per position</li>
                        <li><span class="font-medium text-gray-900">Delta PSI calculation</span> — Shows how each mutation affects splicing relative to the reference</li>
                        <li><span class="font-medium text-gray-900">Heatmap visualization</span> — Color-coded view of mutation effects across all positions</li>
                    </ul>

                    <div>
                        <a href="/mutagenesis" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700">
                            Try Mutagenesis Analysis
                            <svg class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                            </svg>
                        </a>
                    </div>
                </div>
            </section>

            <!-- ==================== SECTION 3: Comparing Sequences ==================== -->
            <section id="comparing" class="mb-12">
                <h2 class="text-2xl font-bold text-gray-900 mb-6 pb-2 border-b border-gray-200">
                    3. Comparing Sequences
                </h2>

                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <p class="text-sm font-medium text-gray-500 mb-2">Coming Soon</p>
                    <p class="text-gray-600">
                        Sequence comparison features are planned for a future release. This will allow side-by-side comparison of multiple sequences and their predicted PSI values.
                    </p>
                </div>
            </section>

            <!-- ==================== SECTION 4: User Data Storage ==================== -->
            <section id="user-data" class="mb-12">
                <h2 class="text-2xl font-bold text-gray-900 mb-6 pb-2 border-b border-gray-200">
                    4. User Data Storage
                </h2>

                <!-- Tokens Subsection -->
                <div id="tokens" class="mb-8">
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">Access Tokens</h3>

                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <p class="text-gray-600 mb-4">
                            Access tokens allow saving and retrieving prediction history without creating an account.
                        </p>

                        <ul class="space-y-2 text-gray-600 mb-4">
                            <li>Generated automatically on first use</li>
                            <li>Stored in the browser's local storage</li>
                            <li>Use the same token across devices by copying it</li>
                        </ul>

                        <p class="text-gray-600">
                            <span class="font-medium">Important:</span> Keep the token safe! Clearing browser data or using a new device means the token will be needed to access history.
                        </p>
                    </div>
                </div>

                <!-- Account Login Subsection -->
                <div id="account-login" class="mb-8">
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">Account Login</h3>

                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <p class="text-gray-600 mb-4">
                            Create an account for more convenient access to prediction history.
                        </p>

                        <ul class="space-y-2 text-gray-600 mb-4">
                            <li>Access history from any device</li>
                            <li>Link existing token to the account</li>
                            <li>Secure password-based authentication</li>
                        </ul>

                        <p class="text-gray-600">
                            <span class="font-medium">Tip:</span> Click the "Login" button in the top navigation bar. Enter an email and password - if no account exists, one will be created automatically.
                        </p>
                    </div>
                </div>
            </section>

            <!-- ==================== SECTION 5: History ==================== -->
            <section id="history" class="mb-12">
                <h2 class="text-2xl font-bold text-gray-900 mb-6 pb-2 border-b border-gray-200">
                    5. History
                </h2>

                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <p class="text-gray-600 mb-4">
                        The <a href="/history" class="text-primary-600 hover:text-primary-800">History page</a> shows all past predictions.
                    </p>

                    <ul class="space-y-2 text-gray-600 mb-4">
                        <li><span class="font-medium">Search</span> — Find predictions by job title, sequence ID, or sequence content</li>
                        <li><span class="font-medium">Filter</span> — Filter by date range or PSI value</li>
                        <li><span class="font-medium">Export</span> — Download selected sequences as CSV</li>
                    </ul>

                    <p class="text-gray-600">
                        <span class="font-medium">Note:</span> Results are stored for 7 days. Download results if needed for longer retention.
                    </p>
                </div>
            </section>

            <!-- ==================== SECTION 6: Understanding Results ==================== -->
            <section id="results" class="mb-12">
                <h2 class="text-2xl font-bold text-gray-900 mb-6 pb-2 border-b border-gray-200">
                    6. Understanding Results
                </h2>

                <!-- PSI Values Subsection -->
                <div id="psi-values" class="mb-8">
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">Interpreting PSI Values</h3>

                    <p class="text-gray-600 mb-4">
                        PSI (Percent Spliced In) indicates the proportion of transcripts that include the exon. Values range from 0 to 1.
                    </p>

                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">PSI Range</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Interpretation</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Meaning</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 text-sm text-gray-900">0.8 - 1.0</td>
                                    <td class="px-6 py-4 text-sm text-gray-900">High Inclusion</td>
                                    <td class="px-6 py-4 text-sm text-gray-600">Exon almost always included</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 text-sm text-gray-900">0.3 - 0.8</td>
                                    <td class="px-6 py-4 text-sm text-gray-900">Variable</td>
                                    <td class="px-6 py-4 text-sm text-gray-600">Alternatively spliced</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 text-sm text-gray-900">0.0 - 0.3</td>
                                    <td class="px-6 py-4 text-sm text-gray-900">High Skipping</td>
                                    <td class="px-6 py-4 text-sm text-gray-600">Exon usually skipped</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Force Plot Subsection -->
                <div id="force-plot" class="mb-8">
                    <h3 class="text-xl font-semibold text-gray-900 mb-4">Understanding the Force Plot</h3>

                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <p class="text-gray-600 mb-4">
                            The force plot shows how each position contributes to the final PSI prediction.
                        </p>

                        <div class="space-y-3">
                            <div class="flex items-start">
                                <span class="w-20 text-sm font-medium text-gray-500">X-axis</span>
                                <span class="text-gray-600">Position (1-90). Exon spans 11-80, flanking regions at 1-10 and 81-90.</span>
                            </div>
                            <div class="flex items-start">
                                <span class="w-20 text-sm font-medium text-gray-500">Y-axis</span>
                                <span class="text-gray-600">Contribution to PSI. Positive = inclusion, negative = skipping.</span>
                            </div>
                            <div class="flex items-start">
                                <span class="w-20 text-sm font-medium text-gray-500">Colors</span>
                                <span class="text-gray-600">Green indicates inclusion, red indicates skipping.</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- ==================== SECTION 7: FAQ ==================== -->
            <section id="faq" class="mb-12">
                <h2 class="text-2xl font-bold text-gray-900 mb-6 pb-2 border-b border-gray-200">
                    7. Frequently Asked Questions
                </h2>

                <div class="space-y-4">
                    <!-- FAQ Item 1 -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <button class="faq-toggle w-full px-6 py-4 text-left flex justify-between items-center" onclick="toggleFaq(this)">
                            <span class="font-medium text-gray-900">Why must my sequence be exactly 70 nucleotides?</span>
                            <svg class="h-5 w-5 text-gray-500 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div class="faq-content hidden px-6 pb-4 text-gray-600">
                            The model was trained on the ES7 library of synthetic exons, all exactly 70 nucleotides. The model adds 10nt flanking sequences to create a 90nt window. Different length sequences cannot be processed.
                        </div>
                    </div>

                    <!-- FAQ Item 2 -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <button class="faq-toggle w-full px-6 py-4 text-left flex justify-between items-center" onclick="toggleFaq(this)">
                            <span class="font-medium text-gray-900">Can I use RNA sequences with U?</span>
                            <svg class="h-5 w-5 text-gray-500 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div class="faq-content hidden px-6 pb-4 text-gray-600">
                            The model accepts DNA sequences (ACGT). Convert U to T before submission. The system will auto-convert if an RNA sequence is pasted.
                        </div>
                    </div>

                    <!-- FAQ Item 3 -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <button class="faq-toggle w-full px-6 py-4 text-left flex justify-between items-center" onclick="toggleFaq(this)">
                            <span class="font-medium text-gray-900">What cell type was the model trained on?</span>
                            <svg class="h-5 w-5 text-gray-500 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div class="faq-content hidden px-6 pb-4 text-gray-600">
                            The model was trained on HeLa cell data. Predictions may vary for other cell types, though core splicing signals are generally conserved.
                        </div>
                    </div>

                    <!-- FAQ Item 4 -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <button class="faq-toggle w-full px-6 py-4 text-left flex justify-between items-center" onclick="toggleFaq(this)">
                            <span class="font-medium text-gray-900">How accurate is the prediction?</span>
                            <svg class="h-5 w-5 text-gray-500 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div class="faq-content hidden px-6 pb-4 text-gray-600">
                            On the test set, the model achieves R² ≈ 0.85 and correlation ≈ 0.92. Accuracy may vary for natural exons or sequences different from training data.
                        </div>
                    </div>

                    <!-- FAQ Item 5 -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <button class="faq-toggle w-full px-6 py-4 text-left flex justify-between items-center" onclick="toggleFaq(this)">
                            <span class="font-medium text-gray-900">What is MFE (Minimum Free Energy)?</span>
                            <svg class="h-5 w-5 text-gray-500 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div class="faq-content hidden px-6 pb-4 text-gray-600">
                            MFE is the thermodynamic stability of the predicted RNA secondary structure in kcal/mol. More negative = more stable. Stable structures can sometimes inhibit splicing.
                        </div>
                    </div>

                    <!-- FAQ Item 6 -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                        <button class="faq-toggle w-full px-6 py-4 text-left flex justify-between items-center" onclick="toggleFaq(this)">
                            <span class="font-medium text-gray-900">How long are results stored?</span>
                            <svg class="h-5 w-5 text-gray-500 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div class="faq-content hidden px-6 pb-4 text-gray-600">
                            Results are stored for 7 days. Download results (CSV/JSON) for longer retention.
                        </div>
                    </div>
                </div>
            </section>

            <!-- Still Need Help -->
            <section class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-2">Still Need Help?</h2>
                <ul class="text-gray-600 space-y-2">
                    <li><a href="/methodology" class="text-primary-600 hover:text-primary-800">Methodology</a> — Technical details about the model</li>
                    <li><a href="/docs" class="text-primary-600 hover:text-primary-800">API Documentation</a> — Programmatic access</li>
                    <li><a href="https://github.com/Sachin1801/interpretable-splicing-model" target="_blank" class="text-primary-600 hover:text-primary-800">GitHub</a> — Report issues or contribute</li>
                </ul>
            </section>
        </main>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function toggleFaq(button) {
        const content = button.nextElementSibling;
        const icon = button.querySelector('svg');
        content.classList.toggle('hidden');
        icon.classList.toggle('rotate-180');
    }

    // Highlight active sidebar link on scroll
    document.addEventListener('DOMContentLoaded', function() {
        const sections = document.querySelectorAll('section[id], div[id]');
        const sidebarLinks = document.querySelectorAll('.sidebar-link');

        function updateActiveLink() {
            let currentSection = '';
            const scrollPos = window.scrollY + 100;

            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                if (scrollPos >= sectionTop) {
                    currentSection = section.getAttribute('id');
                }
            });

            sidebarLinks.forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href') === '#' + currentSection) {
                    link.classList.add('active');
                }
            });
        }

        window.addEventListener('scroll', updateActiveLink);
        updateActiveLink();
    });
</script>
{% endblock %}