Create script.js

script.js

@@ -0,0 +1,209 @@
+// Timeline data
+const timelineData = [
+    {
+        year: 1900,
+        title: "SSA begins tracking mortality data",
+        description: "Social Security Administration's Office of the Chief Actuary begins tracking historical death probabilities.",
+        category: "policy"
+    },
+    {
+        year: 1984,
+        title: "Social Security disability standards updated",
+        description: "Amendments mandate development of new disability standards for mental disorders.",
+        category: "policy"
+    },
+    {
+        year: 1991,
+        title: "Corpus callosum findings in ADHD",
+        description: "Hynd et al. identify smaller corpus callosum in children with ADHD.",
+        category: "neuroimaging"
+    },
+    {
+        year: 2002,
+        title: "Brain volume reductions in ADHD",
+        description: "Castellanos et al. find significant reductions in cerebral and cerebellar volumes in children with ADHD.",
+        category: "neuroimaging"
+    },
+    {
+        year: 2007,
+        title: "Cortical thickness delay in ADHD",
+        description: "Shaw et al. demonstrate children with ADHD reach peak cortical thickness ~3 years later.",
+        category: "neuroimaging"
+    },
+    {
+        year: 2017,
+        title: "Brain volume confirmation",
+        description: "Hoogman et al. confirm smaller brain volumes in ADHD through mega-analysis.",
+        category: "neuroimaging"
+    },
+    {
+        year: 2019,
+        title: "27 genome-wide significant risk loci",
+        description: "Demontis et al. identify genetic associations with ADHD.",
+        category: "genetics"
+    },
+    {
+        year: 2021,
+        title: "International Consensus Statement",
+        description: "Faraone et al. publish comprehensive review affirming ADHD as valid diagnosis.",
+        category: "treatment"
+    },
+    {
+        year: 2024,
+        title: "Brain connectivity findings",
+        description: "Norman et al. re-analyze fMRI data revealing altered connections in ADHD.",
+        category: "neuroimaging"
+    }
+];
+
+// Researchers data
+const researchersData = [
+    {
+        name: "Castellanos et al.",
+        contribution: "Longitudinal brain volume studies in ADHD",
+        category: "neuroimaging"
+    },
+    {
+        name: "Shaw et al.",
+        contribution: "Cortical maturation delay in ADHD",
+        category: "neuroimaging"
+    },
+    {
+        name: "Hoogman et al.",
+        contribution: "Mega-analyses of brain structure in ADHD",
+        category: "neuroimaging"
+    },
+    {
+        name: "Demontis et al.",
+        contribution: "Genome-wide association studies in ADHD",
+        category: "genetics"
+    },
+    {
+        name: "Faraone et al.",
+        contribution: "International consensus statements on ADHD",
+        category: "treatment"
+    }
+];
+
+// Cases data
+const casesData = [
+    {
+        name: "Caustin Lee McLaughlin",
+        description: "Case study illustrating genetic profile and disability claims process",
+        category: "policy"
+    },
+    {
+        name: "Shelley C. v. SSA",
+        description: "Landmark case reversing SSA's denial of ADHD disability benefits",
+        category: "policy"
+    }
+];
+
+// Initialize the page
+document.addEventListener('DOMContentLoaded', function() {
+    renderTimeline();
+    renderResearchers();
+    renderCases();
+    setupFilterButtons();
+});
+
+function renderTimeline() {
+    const container = document.getElementById('timeline-items');
+    
+    timelineData.sort((a, b) => a.year - b.year).forEach(item => {
+        const itemElement = document.createElement('div');
+        itemElement.className = `timeline-item ${item.category}`;
+        
+        itemElement.innerHTML = `
+            <div class="timeline-dot"></div>
+            <div class="bg-white p-6 rounded-lg shadow-md relative card-hover transition-all duration-300">
+                <div class="absolute -left-2 top-6 w-4 h-4 bg-indigo-600 transform rotate-45"></div>
+                <div class="flex items-center mb-2">
+                    <span class="inline-block px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm font-medium">${item.year}</span>
+                    <span class="ml-2 px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs font-medium">${item.category}</span>
+                </div>
+                <h3 class="text-xl font-semibold text-gray-800 mb-2">${item.title}</h3>
+                <p class="text-gray-600">${item.description}</p>
+            </div>
+        `;
+        
+        container.appendChild(itemElement);
+    });
+}
+
+function renderResearchers() {
+    const container = document.getElementById('researchers-list');
+    
+    researchersData.forEach(researcher => {
+        const itemElement = document.createElement('div');
+        itemElement.className = `researcher-item ${researcher.category} bg-gray-50 p-4 rounded-lg`;
+        
+        itemElement.innerHTML = `
+            <h4 class="font-bold text-indigo-700">${researcher.name}</h4>
+            <p class="text-gray-600 text-sm">${researcher.contribution}</p>
+            <span class="inline-block mt-2 px-2 py-1 bg-indigo-100 text-indigo-800 rounded-full text-xs font-medium">${researcher.category}</span>
+        `;
+        
+        container.appendChild(itemElement);
+    });
+}
+
+function renderCases() {
+    const container = document.getElementById('cases-list');
+    
+    casesData.forEach(caseItem => {
+        const itemElement = document.createElement('div');
+        itemElement.className = `case-item ${caseItem.category} bg-gray-50 p-4 rounded-lg`;
+        
+        itemElement.innerHTML = `
+            <h4 class="font-bold text-indigo-700">${caseItem.name}</h4>
+            <p class="text-gray-600 text-sm">${caseItem.description}</p>
+            <span class="inline-block mt-2 px-2 py-1 bg-indigo-100 text-indigo-800 rounded-full text-xs font-medium">${caseItem.category}</span>
+        `;
+        
+        container.appendChild(itemElement);
+    });
+}
+
+function setupFilterButtons() {
+    const filterButtons = document.querySelectorAll('.filter-btn');
+    
+    filterButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            // Update active state
+            filterButtons.forEach(btn => btn.classList.remove('active', 'bg-indigo-600', 'text-white'));
+            filterButtons.forEach(btn => btn.classList.add('bg-gray-200', 'text-gray-700'));
+            this.classList.add('active', 'bg-indigo-600', 'text-white');
+            this.classList.remove('bg-gray-200', 'text-gray-700');
+            
+            // Filter items
+            const category = this.dataset.category;
+            filterItems(category);
+        });
+    });
+}
+
+function filterItems(category) {
+    const timelineItems = document.querySelectorAll('.timeline-item');
+    const researcherItems = document.querySelectorAll('.researcher-item');
+    const caseItems = document.querySelectorAll('.case-item');
+    
+    if (category === 'all') {
+        timelineItems.forEach(item => item.style.display = 'block');
+        researcherItems.forEach(item => item.style.display = 'block');
+        caseItems.forEach(item => item.style.display = 'block');
+        return;
+    }
+    
+    timelineItems.forEach(item => {
+        item.style.display = item.classList.contains(category) ? 'block' : 'none';
+    });
+    
+    researcherItems.forEach(item => {
+        item.style.display = item.classList.contains(category) ? 'block' : 'none';
+    });
+    
+    caseItems.forEach(item => {
+        item.style.display = item.classList.contains(category) ? 'block' : 'none';
+    });
+}