Add MVP frontend scaffold with FastAPI + HTMX + TailwindCSS

- Created complete frontend structure with Jinja2 templates
- Implemented three main pages: Dashboard, Fleet Roster, and Unit Detail
- Added HTMX auto-refresh for real-time updates (10s interval)
- Integrated dark/light mode toggle with localStorage persistence
- Built responsive card-based UI with sidebar navigation
- Created API endpoints for status snapshot, roster, unit details, and photos
- Added mock data service for development (emit_status_snapshot)
- Implemented tabbed interface on unit detail page (Photos, Map, History)
- Integrated Leaflet maps for unit location visualization
- Configured static file serving and photo management
- Updated requirements.txt with Jinja2 and aiofiles
- Reorganized backend structure into routers and services
- Added comprehensive FRONTEND_README.md documentation

Frontend features:
- Auto-refreshing dashboard with fleet summary and alerts
- Sortable fleet roster table (prioritizes Missing > Pending > OK)
- Unit detail view with status, deployment info, and notes
- Photo gallery with thumbnail navigation
- Interactive maps showing unit coordinates
- Consistent styling with brand colors (orange, navy, burgundy)

Ready for integration with real Series3 emitter data.

templates/roster.html

@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+
+{% block title %}Fleet Roster - Seismo Fleet Manager{% endblock %}
+
+{% block content %}
+<div class="mb-8">
+    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Fleet Roster</h1>
+    <p class="text-gray-600 dark:text-gray-400 mt-1">Real-time status of all seismograph units</p>
+</div>
+
+<!-- Auto-refresh roster every 10 seconds -->
+<div hx-get="/partials/roster-table" hx-trigger="load, every 10s" hx-swap="innerHTML">
+    <!-- Initial loading state -->
+    <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
+        <div class="flex items-center justify-center py-12">
+            <div class="animate-pulse flex space-x-4">
+                <div class="flex-1 space-y-4 py-1">
+                    <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4"></div>
+                    <div class="space-y-2">
+                        <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded"></div>
+                        <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-5/6"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endblock %}