4.7 KiB
Fleet Tracker 360 — Live Dashboard Concept
Created: 2026-07-12
File: /var/www/ops/tracker-mockup.html (37.9 KB, 1088 lines, pure CSS, no Tailwind)
Why pure CSS instead of Tailwind CDN
Complex CSS animations (speed donut gauge, breadcrumb trails, timeline shimmer, pulse dots) and the CSS-only mini-map with grid overlay required fine-grained control that Tailwind CDN can't express. The @apply directive is silently broken with CDN-based Tailwind. For animation-heavy dashboards like this, pure CSS is the right choice — Tailwind CDN for simpler admin tables and forms.
Mock data scenario — Cartagena trip
| Person/Asset | Status | Location | Details |
|---|---|---|---|
| Germaine | Walking (live) | Carrera 1 & Calle 47, Marbella, Cartagena | iPhone 15 Pro, 72% battery, GPS ±3m, 2.8 mph, heading 315° |
| Garrison | Offline (3h 12m) | Savannah, GA | iPhone 14, WiFi disconnected |
| 2024 Toyota 4Runner | Parked (engine off) | Airbnb, Cartagena | OBD2: 0 mph, 0 RPM, 62% fuel, 12.4V battery, 31°C coolant, 6,842 mi |
Layout grid (12-column CSS Grid)
Row 1: Hero Location (7 cols) | Alert Feed (5 cols)
Row 2: ETA Grid (8 cols) | Daily Stats (4 cols)
Row 3: Vehicle Telemetry (8) | Mini Map (4 cols)
Row 4: Device Status Row (12 cols, full width)
Responsive: 12-col → 6-col at 1100px → single column at 768px with card reordering (hero first, then alerts on mobile).
Section design
Hero Location Card
- Person avatar (initials in gradient circle), name, device info, battery
- Location block with pin icon, street address, lat/lng in monospace
- 4 metric chips: speed, activity icon, heading, GPS accuracy
- Live badge (green pulsing dot animation)
ETA Grid
- 4-column grid: Airbnb (here), Old City (18 min walk), Getsemaní (12 min), Bocagrande (32 min)
- Walking ETAs from HERE Maps Routing API v8
- Traffic badges (light/moderate/heavy) with color coding
- Active route shimmer animation
Vehicle Telemetry
- CSS donut chart for speed (SVG circle with stroke-dasharray)
- Grid of 6 gauges: speed, RPM, fuel (with bar), battery voltage, coolant temp, odometer
- Vehicle info strip: make/model, VIN (masked), status badge
- Engine-off state: all values at zero/idle
Daily Stats
- 2-column grid: miles walked, vehicle miles, steps, active time, trips
- Mini progress bars for walked/vehicle miles
- All values mock for a travel day
Alert Feed
- 5 alerts with color-coded left border (warning/amber, info/blue, ok/green)
- Includes: Garrison offline, 4Runner idle >24h, geofence approach, flight reminder, OBD2 clean scan
- Scrollable container (max-height: 260px)
Mini Map
- CSS-simulated Cartagena with Caribbean Sea gradient, landmass shape
- Grid-line overlay for map-tile feel
- Breadcrumb trail: 5 dots showing walking path + live position dot (larger, green pulse)
- Map markers: Germaine (green circle), Airbnb (house), 4Runner (car)
- Neighborhood labels: Marbella, Old City, Getsemaní, Bocagrande
- Compass rose
Device Status Row
- Horizontal chip row: iPhone 15 Pro (online green dot), iPhone 14 (offline gray dot), OBD2 dongle (idle amber dot)
- Each chip shows device name, owner, last-seen timestamp, coordinates
- Offline devices rendered at reduced opacity
Animations used
| Animation | Element | Purpose |
|---|---|---|
pulse-dot (1.8s infinite) |
Live badges, status dots | Simulates real-time data feed |
eta-shimmer (2.5s infinite) |
Active ETA value | Indicates actively updating route |
breadcrumb-blink (3s infinite) |
Trail dots on mini-map | Shows path progression |
update-flash (2s ease-out) |
Timestamp text | New data arrival indicator |
Color scheme
Matches ops portal: --bg-primary: #0f172a, --bg-card: #1e293b, --accent: #f59e0b, --success: #22c55e, --warning: #f59e0b, --danger: #ef4444, --info: #3b82f6.
Backend API mapping (for future implementation)
| API | Data | Dashboard Section |
|---|---|---|
Traccar GET /api/positions |
Lat/lng, speed, heading, accuracy | Hero card, mini-map markers |
Traccar GET /api/devices |
Device list, online/offline status, battery | Device status row |
Traccar GET /api/reports/route |
Position history | Breadcrumb trails |
| Traccar OBD2 protocol parser | Speed, RPM, fuel, voltage, temp, odometer | Telemetry gauges |
| HERE Maps Routing API v8 | Walking/driving ETAs with live traffic | ETA grid |
Traccar GET /api/events + custom pipeline |
Geofence, idle, offline alerts | Alert feed |
| Custom aggregation | Daily miles walked, vehicle miles, steps, trips, active time | Daily stats |
File permission note
Like all files under /var/www/ops/, run chmod 644 /var/www/ops/tracker-mockup.html after creation — Caddy serves these and needs read access.