Update style and behaviors

app.py

@@ -34,7 +34,7 @@ class TransformersTimelineParser:
         self.modalities = {
             "text": {
                 "name": "Text Models",
-                "color": "#8B5CF6",  # Soft purple
+                "color": "#F59E0B",  # Soft amber
                 "models": [
                     "albert",
                     "apertus",
@@ -303,7 +303,7 @@ class TransformersTimelineParser:
             },
             "audio": {
                 "name": "Audio Models",
-                "color": "#F59E0B",  # Soft amber
+                "color": "#8B5CF6",  # Soft purple
                 "models": [
                     "audio-spectrogram-transformer",
                     "bark",
@@ -479,7 +479,7 @@ class TransformersTimelineParser:
             if model_name in modality_info["models"]:
                 return {"key": modality_key, "name": modality_info["name"], "color": modality_info["color"]}
         # Default to text if not found (most common)
-        return {"key": "text", "name": "Text Models", "color": "#8B5CF6"}
+        return {"key": "text", "name": "Text Models", "color": "#F59E0B"}
 
     def parse_release_date_from_file(self, file_path: str) -> Optional[Dict[str, str]]:
         """Parse the release date line from a model documentation file."""
@@ -909,7 +909,7 @@ def create_timeline_template():
 
         body {
             font-family: 'Inter', system-ui, -apple-system, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
             min-height: 100vh;
             color: #333;
             display: flex;
@@ -1028,8 +1028,8 @@ def create_timeline_template():
 
         .input-group input:focus {
             outline: none;
-            border-color: #667eea;
-            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+            border-color: #d97706;
+            box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1);
         }
 
         .modality-group {
@@ -1106,7 +1106,6 @@ def create_timeline_template():
         }
 
         .modality-checkbox:hover {
-            transform: translateY(-2px);
             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
             border-color: currentColor;
         }
@@ -1118,7 +1117,6 @@ def create_timeline_template():
         .modality-checkbox.checked {
             background: rgba(255, 255, 255, 0.95);
             border-color: currentColor;
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
         }
 
         .modality-checkbox.checked::before {
@@ -1193,7 +1191,6 @@ def create_timeline_template():
         }
 
         .task-checkbox:hover {
-            transform: translateY(-2px);
             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
             border-color: currentColor;
         }
@@ -1205,7 +1202,6 @@ def create_timeline_template():
         .task-checkbox.checked {
             background: rgba(255, 255, 255, 0.95);
             border-color: currentColor;
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
         }
 
         .task-checkbox.checked::before {
@@ -1267,13 +1263,13 @@ def create_timeline_template():
         }
 
         .btn-primary {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
             color: white;
         }
 
         .btn-primary:hover {
             transform: translateY(-2px);
-            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
+            box-shadow: 0 8px 20px rgba(217, 119, 6, 0.3);
         }
 
         .btn-secondary {
@@ -1342,18 +1338,18 @@ def create_timeline_template():
             justify-content: center;
             cursor: pointer;
             font-size: 1.2rem;
-            color: #667eea;
-            border: 2px solid rgba(102, 126, 234, 0.2);
+            color: #d97706;
+            border: 2px solid rgba(217, 119, 6, 0.2);
             backdrop-filter: blur(10px);
             transition: all 0.2s ease;
             z-index: 10;
         }
 
         .nav-arrow:hover {
-            background: rgba(102, 126, 234, 0.1);
-            border-color: #667eea;
+            background: rgba(217, 119, 6, 0.1);
+            border-color: #d97706;
             transform: translateY(-50%) scale(1.1);
-            box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
+            box-shadow: 0 4px 16px rgba(217, 119, 6, 0.3);
         }
 
         .nav-arrow.left {
@@ -1390,18 +1386,18 @@ def create_timeline_template():
             cursor: pointer;
             font-size: 1.1rem;
             font-weight: 600;
-            color: #667eea;
-            border: 2px solid rgba(102, 126, 234, 0.2);
+            color: #d97706;
+            border: 2px solid rgba(217, 119, 6, 0.2);
             backdrop-filter: blur(10px);
             transition: all 0.2s ease;
             user-select: none;
         }
 
         .zoom-btn:hover {
-            background: rgba(102, 126, 234, 0.1);
-            border-color: #667eea;
+            background: rgba(217, 119, 6, 0.1);
+            border-color: #d97706;
             transform: scale(1.1);
-            box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
+            box-shadow: 0 4px 16px rgba(217, 119, 6, 0.3);
         }
 
         .zoom-btn:active {
@@ -1413,9 +1409,9 @@ def create_timeline_template():
             border-radius: 6px;
             padding: 4px 8px;
             font-size: 0.75rem;
-            color: #667eea;
+            color: #d97706;
             font-weight: 500;
-            border: 1px solid rgba(102, 126, 234, 0.2);
+            border: 1px solid rgba(217, 119, 6, 0.2);
         }
 
         .timeline-line {
@@ -1424,7 +1420,7 @@ def create_timeline_template():
             left: 0;
             right: 0;
             height: 4px;
-            background: linear-gradient(90deg, #667eea, #764ba2);
+            background: linear-gradient(90deg, #fbbf24, #d97706);
             border-radius: 2px;
             transform: translateY(-50%);
         }
@@ -1458,7 +1454,7 @@ def create_timeline_template():
             bottom: 0;
             width: 2px;
             background: #9ca3af;
-            opacity: 0.6;
+            opacity: 0.8;
             pointer-events: none;
             z-index: 1; /* In background, below everything */
         }
@@ -1482,7 +1478,7 @@ def create_timeline_template():
         }
 
         .date-marker.year {
-            opacity: 0.8;
+            opacity: 0.9;
             background: #6b7280;
             width: 3px;
         }
@@ -1496,11 +1492,11 @@ def create_timeline_template():
         }
 
         .date-marker.quarter {
-            opacity: 0.5;
+            opacity: 0.7;
         }
 
         .date-marker.month {
-            opacity: 0.4;
+            opacity: 0.8;
         }
 
         .timeline-dot {
@@ -1516,11 +1512,11 @@ def create_timeline_template():
         }
 
         .timeline-item:nth-child(odd) .timeline-dot {
-            border-color: #667eea;
+            border-color: #fbbf24;
         }
 
         .timeline-item:nth-child(even) .timeline-dot {
-            border-color: #764ba2;
+            border-color: #d97706;
         }
 
         .timeline-label {
@@ -1544,7 +1540,7 @@ def create_timeline_template():
             cursor: pointer;
         }
 
-        .timeline-label:hover {
+        .timeline-label:not(.expanded):hover {
             background: rgba(255, 255, 255, 0.98);
             box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15),
                         0 0 4px var(--modality-color, #8B5CF6);
@@ -1560,8 +1556,8 @@ def create_timeline_template():
             text-align: left;
             z-index: 9999 !important; /* Much higher than all other elements */
             transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2),
-                        0 0 8px var(--modality-color, #8B5CF6);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+            user-select: text;
         }
 
         /* Cards above axis - expand downward with TOP edge fixed */
@@ -1723,6 +1719,26 @@ def create_timeline_template():
             transform: translateY(-1px);
         }
 
+        .timeline-label.expanded .learn-more {
+            pointer-events: auto;
+            cursor: pointer;
+        }
+
+        .timeline-label.expanded .model-description a {
+            pointer-events: auto;
+            cursor: pointer;
+        }
+
+        .timeline-label.expanded .description-content {
+            pointer-events: auto;
+            cursor: text;
+        }
+
+        .timeline-label.expanded .model-tasks {
+            pointer-events: none;
+            cursor: default;
+        }
+
         .model-tasks {
             margin: 0.5rem 0;
             padding: 0.4rem 0.6rem;
@@ -1763,7 +1779,7 @@ def create_timeline_template():
         /* Above the axis - wave pattern */
         .timeline-item.above-1 .timeline-label {
             bottom: 60px;
-            border-left: 3px solid #667eea;
+            border-left: 3px solid #fbbf24;
         }
 
         .timeline-item.above-1 .timeline-connector {
@@ -1773,7 +1789,7 @@ def create_timeline_template():
 
         .timeline-item.above-2 .timeline-label {
             bottom: 120px;
-            border-left: 3px solid #667eea;
+            border-left: 3px solid #fbbf24;
         }
 
         .timeline-item.above-2 .timeline-connector {
@@ -1783,7 +1799,7 @@ def create_timeline_template():
 
         .timeline-item.above-3 .timeline-label {
             bottom: 180px;
-            border-left: 3px solid #667eea;
+            border-left: 3px solid #fbbf24;
         }
 
         .timeline-item.above-3 .timeline-connector {
@@ -1794,7 +1810,7 @@ def create_timeline_template():
         /* Below the axis - wave pattern */
         .timeline-item.below-1 .timeline-label {
             top: 60px;
-            border-left: 3px solid #764ba2;
+            border-left: 3px solid #d97706;
         }
 
         .timeline-item.below-1 .timeline-connector {
@@ -1804,7 +1820,7 @@ def create_timeline_template():
 
         .timeline-item.below-2 .timeline-label {
             top: 120px;
-            border-left: 3px solid #764ba2;
+            border-left: 3px solid #d97706;
         }
 
         .timeline-item.below-2 .timeline-connector {
@@ -1814,7 +1830,7 @@ def create_timeline_template():
 
         .timeline-item.below-3 .timeline-label {
             top: 180px;
-            border-left: 3px solid #764ba2;
+            border-left: 3px solid #d97706;
         }
 
         .timeline-item.below-3 .timeline-connector {
@@ -1824,9 +1840,9 @@ def create_timeline_template():
 
         .timeline-date {
             font-size: 0.65rem;
-            color: #666;
+            color: #9ca3af;
             margin-top: 0.3rem;
-            font-weight: 400;
+            font-weight: 500;
         }
 
         .date-controls {
@@ -1876,8 +1892,8 @@ def create_timeline_template():
 
         .date-input-group input:focus {
             outline: none;
-            border-color: #667eea;
-            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
+            border-color: #d97706;
+            box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
             transform: translateY(-1px);
         }
 
@@ -1904,7 +1920,7 @@ def create_timeline_template():
         .stat-number {
             font-size: 1.2rem;
             font-weight: 600;
-            color: #667eea;
+            color: #d97706;
             display: block;
         }
 
@@ -1928,7 +1944,7 @@ def create_timeline_template():
             width: 20px;
             height: 20px;
             border: 2px solid #e2e8f0;
-            border-top: 2px solid #667eea;
+            border-top: 2px solid #d97706;
             border-radius: 50%;
             animation: spin 1s linear infinite;
             margin-left: 1rem;
@@ -2125,6 +2141,40 @@ def create_timeline_template():
             }
         }
 
+        function formatDate(dateString) {
+            if (!dateString || dateString === 'Unknown Date') return 'Unknown Date';
+
+            try {
+                const date = new Date(dateString);
+                return date.toLocaleDateString('en-US', {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric'
+                });
+            } catch (error) {
+                return dateString; // Return original if parsing fails
+            }
+        }
+
+        function createFaintColor(hexColor) {
+            // Remove # if present
+            hexColor = hexColor.replace('#', '');
+
+            // Parse RGB values
+            const r = parseInt(hexColor.substr(0, 2), 16);
+            const g = parseInt(hexColor.substr(2, 2), 16);
+            const b = parseInt(hexColor.substr(4, 2), 16);
+
+            // Reduce saturation by mixing with a lighter gray (keeping brightness)
+            const lightGray = 200; // Light gray to maintain brightness
+            const desaturatedR = Math.floor(r * 0.6 + lightGray * 0.4);
+            const desaturatedG = Math.floor(g * 0.6 + lightGray * 0.4);
+            const desaturatedB = Math.floor(b * 0.6 + lightGray * 0.4);
+
+            // Add some opacity (70%)
+            return `rgba(${desaturatedR}, ${desaturatedG}, ${desaturatedB}, 0.7)`;
+        }
+
         function markdownToHtml(markdown) {
             if (!markdown) return '';
 
@@ -2250,7 +2300,7 @@ def create_timeline_template():
 
                 // Ensure the model name is always displayed
                 const modelName = model.display_name || model.model_name || 'Unknown Model';
-                const modelDate = model.transformers_date || 'Unknown Date';
+                const modelDate = formatDate(model.transformers_date || 'Unknown Date');
                 const description = model.description || 'No description available.';
 
                 // Set initial compact content (no tasks, description, or learn more)
@@ -2272,6 +2322,11 @@ def create_timeline_template():
                 label.addEventListener('click', (e) => {
                     e.stopPropagation();
 
+                    // Don't toggle if clicking inside an expanded card
+                    if (label.classList.contains('expanded')) {
+                        return;
+                    }
+
                     // Close any other expanded cards
                     document.querySelectorAll('.timeline-label.expanded').forEach(otherLabel => {
                         if (otherLabel !== label) {
@@ -2637,6 +2692,11 @@ def create_timeline_template():
                     return;
                 }
 
+                // Ignore clicks inside expanded cards to allow text selection
+                if (e.target.closest('.timeline-label.expanded')) {
+                    return;
+                }
+
                 isDragging = true;
                 startX = e.clientX;
                 startOffset = timelineOffset;
@@ -2679,6 +2739,11 @@ def create_timeline_template():
                     return;
                 }
 
+                // Ignore touches inside expanded cards to allow text selection
+                if (e.target.closest('.timeline-label.expanded')) {
+                    return;
+                }
+
                 isDragging = true;
                 startX = e.touches[0].clientX;
                 startOffset = timelineOffset;
@@ -2954,26 +3019,35 @@ def create_timeline_template():
 
             // Close expanded cards when clicking outside
             document.addEventListener('click', (e) => {
-                if (!e.target.closest('.timeline-label')) {
-                    document.querySelectorAll('.timeline-label.expanded').forEach(label => {
-                        label.classList.remove('expanded');
+                // Don't close if clicking inside an expanded card
+                if (e.target.closest('.timeline-label.expanded')) {
+                    return;
+                }
 
-                        // Restore compact content
-                        setTimeout(() => {
-                            label.innerHTML = `
-                                <div class="model-title">${label.dataset.modelName}</div>
-                                <div class="timeline-date">${label.dataset.modelDate}</div>
-                            `;
+                // Don't close if clicking on a timeline label (non-expanded)
+                if (e.target.closest('.timeline-label:not(.expanded)')) {
+                    return;
+                }
 
-                            // Reset positioning after content change
-                            setTimeout(() => {
-                                label.style.top = '';
-                                label.style.bottom = '';
-                                label.parentElement.style.zIndex = '';
-                            }, 50);
+                // Close all expanded cards
+                document.querySelectorAll('.timeline-label.expanded').forEach(label => {
+                    label.classList.remove('expanded');
+
+                    // Restore compact content
+                    setTimeout(() => {
+                        label.innerHTML = `
+                            <div class="model-title">${label.dataset.modelName}</div>
+                            <div class="timeline-date">${label.dataset.modelDate}</div>
+                        `;
+
+                        // Reset positioning after content change
+                        setTimeout(() => {
+                            label.style.top = '';
+                            label.style.bottom = '';
+                            label.parentElement.style.zIndex = '';
                         }, 50);
-                    });
-                }
+                    }, 50);
+                });
             });
 
             // Initialize filters collapsible panel