# 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.