Fix: shields.io badges, light/dark theme support, remove status column

index.html

@@ -6,63 +6,73 @@
     <title>EdgeFirst AI — Spatial Perception at the Edge</title>
     <style>
         :root {
-            --primary: #1a1a2e;
-            --accent: #0f3460;
-            --highlight: #e94560;
-            --text: #eee;
-            --muted: #aaa;
-            --card-bg: #16213e;
+            --bg: #fff;
+            --text: #1a1a2e;
+            --muted: #555;
+            --accent: #e94560;
+            --border: #e0e0e0;
+            --card-bg: #f8f9fa;
+            --card-border: #e94560;
+        }
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --bg: #1a1a2e;
+                --text: #eee;
+                --muted: #aaa;
+                --border: rgba(255,255,255,0.1);
+                --card-bg: #16213e;
+            }
         }
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: var(--primary);
+            background: var(--bg);
             color: var(--text);
             line-height: 1.6;
         }
         .container { max-width: 900px; margin: 0 auto; padding: 2rem; }
         h1 { font-size: 2rem; margin-bottom: 0.25rem; }
-        h2 { font-size: 1.3rem; margin-top: 2rem; margin-bottom: 0.75rem; color: var(--highlight); }
+        h2 { font-size: 1.3rem; margin-top: 2rem; margin-bottom: 0.75rem; color: var(--accent); }
         .tagline { color: var(--muted); font-size: 1.1rem; margin-bottom: 1.5rem; }
         .description { margin-bottom: 1.5rem; }
-        .badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0; }
-        .badge {
-            background: var(--accent);
-            padding: 0.3rem 0.75rem;
-            border-radius: 4px;
-            font-size: 0.85rem;
-            white-space: nowrap;
-        }
+        .badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.5rem 0; }
+        .badges img { height: 22px; }
         .links { display: flex; gap: 1rem; margin: 1.5rem 0; flex-wrap: wrap; }
         .links a {
-            color: var(--highlight);
+            color: var(--accent);
             text-decoration: none;
             padding: 0.5rem 1rem;
-            border: 1px solid var(--highlight);
+            border: 1px solid var(--accent);
             border-radius: 4px;
             transition: all 0.2s;
         }
-        .links a:hover { background: var(--highlight); color: #fff; }
+        .links a:hover { background: var(--accent); color: #fff; }
         .arch-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
         .arch-table th, .arch-table td {
             text-align: left;
             padding: 0.5rem 0.75rem;
-            border-bottom: 1px solid rgba(255,255,255,0.1);
+            border-bottom: 1px solid var(--border);
+        }
+        .arch-table th { color: var(--accent); font-size: 0.85rem; text-transform: uppercase; }
+        .roadmap-tag {
+            font-size: 0.75rem;
+            padding: 0.1rem 0.4rem;
+            border-radius: 3px;
+            background: #7c3aed;
+            color: #fff;
+            vertical-align: middle;
+            margin-left: 0.3rem;
         }
-        .arch-table th { color: var(--highlight); font-size: 0.85rem; text-transform: uppercase; }
-        .status { font-size: 0.8rem; padding: 0.15rem 0.5rem; border-radius: 3px; }
-        .stable { background: #1b5e20; }
-        .roadmap { background: #4a148c; }
         .model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin: 1rem 0; }
         .model-card {
             background: var(--card-bg);
             padding: 1rem;
             border-radius: 6px;
-            border-left: 3px solid var(--highlight);
+            border-left: 3px solid var(--card-border);
         }
         .model-card h3 { font-size: 1rem; margin-bottom: 0.25rem; }
         .model-card .meta { color: var(--muted); font-size: 0.85rem; }
-        .model-card a { color: var(--highlight); text-decoration: none; }
+        .model-card a { color: var(--accent); text-decoration: none; }
         .footer { margin-top: 3rem; text-align: center; color: var(--muted); font-size: 0.85rem; }
         .footer a { color: var(--muted); }
     </style>
@@ -85,12 +95,12 @@
 
         <h2>Supported Hardware</h2>
         <div class="badges">
-            <span class="badge">NXP i.MX 8M Plus</span>
-            <span class="badge">NXP i.MX 93</span>
-            <span class="badge">NXP i.MX 95</span>
-            <span class="badge">NXP Ara240</span>
-            <span class="badge">RPi5 + Hailo-8/8L</span>
-            <span class="badge">NVIDIA Jetson</span>
+            <img src="https://img.shields.io/badge/NXP-i.MX_8M_Plus-0072CE?style=flat-square" alt="NXP i.MX 8M Plus">
+            <img src="https://img.shields.io/badge/NXP-i.MX_93-0072CE?style=flat-square" alt="NXP i.MX 93">
+            <img src="https://img.shields.io/badge/NXP-i.MX_95-0072CE?style=flat-square" alt="NXP i.MX 95">
+            <img src="https://img.shields.io/badge/NXP-Ara240-0072CE?style=flat-square" alt="NXP Ara240">
+            <img src="https://img.shields.io/badge/RPi5-Hailo--8%2F8L-C51A4A?style=flat-square" alt="RPi5 + Hailo-8/8L">
+            <img src="https://img.shields.io/badge/NVIDIA-Jetson-76B900?style=flat-square" alt="NVIDIA Jetson">
         </div>
 
         <h2>Architecture</h2>
@@ -98,27 +108,22 @@
             <tr>
                 <th>Layer</th>
                 <th>Description</th>
-                <th>Status</th>
             </tr>
             <tr>
                 <td><strong>Foundation</strong></td>
                 <td>Hardware abstraction, video I/O, accelerated inference delegates</td>
-                <td><span class="status stable">Stable</span></td>
             </tr>
             <tr>
                 <td><strong>Zenoh</strong></td>
                 <td>Modular perception pipeline over Zenoh pub/sub</td>
-                <td><span class="status stable">Stable</span></td>
             </tr>
             <tr>
                 <td><strong>GStreamer</strong></td>
                 <td>Spatial perception elements for GStreamer / NNStreamer</td>
-                <td><span class="status stable">Stable</span></td>
             </tr>
             <tr>
                 <td><strong>ROS 2</strong></td>
-                <td>Native ROS 2 nodes extending Zenoh microservices</td>
-                <td><span class="status roadmap">Roadmap</span></td>
+                <td>Native ROS 2 nodes extending Zenoh microservices <span class="roadmap-tag">Roadmap</span></td>
             </tr>
         </table>