100 lines
4.7 KiB
Markdown
100 lines
4.7 KiB
Markdown
# 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.
|