Initial skills documentation — 25 categories, all SKILL.md + references + scripts
This commit is contained in:
root
@@ -0,0 +1,99 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user