ulve
f1d0991a77
Seven particle-based progress cards (hour, day, week, month, year, summer, fall) with work-time mode toggle and bridge days support. Light elegant design with accumulating particle animation. Express server proxies dagsmart.se API.
2.8 KiB
2.8 KiB
Aftersummer — Design Plan
Concept
A single-page web app showing temporal progress across multiple scales, with an optional work-time mode. Elegant, light, particle-based visuals.
Visual Design
- Light warm background (#f7f6f2)
- Particle accumulation: dark particles fill each card as time passes
- Elegant sans-serif typography (Inter)
- No raw percentages — contextual labels only ("42m remaining", "3 working days till summer")
Cards (7 total, stacked to fill viewport)
| Card | Normal mode | Work mode |
|---|---|---|
| Hour | 0–59 min of current hour | Same — inactive outside work hours |
| Day | 00:00–23:59 | 08:00–12:00 + 13:00–17:00 (8h) |
| Week | Mon 00:00 – Sun 23:59 | Mon–Fri, work hours only |
| Month | Calendar days | Working days in month |
| Year | Calendar days | Working days in year |
| Summer | Jan 1 → Midsommarafton progress | Working days — special state in summer |
| Fall | 1st Mon Aug → Dec 31 progress | Working days |
Card States
- active: dark particles accumulating
- not-work-time: muted grey particles, greyed label (outside work hours/days)
- summer: warm amber particles at 100% (Midsommarafton → 1st Mon Aug)
- off-season: cool grey-blue particles at 0% (fall card before fall starts)
Work Rules
- Hours: 08:00–12:00 + 13:00–17:00 (8 effective hours, lunch excluded)
- Days: Mon–Fri
- July: entirely off (covered by summer period)
- Holidays: from dagsmart.se API
- Bridge days: optional (separate toggle)
Summer / Fall Periods
- Summer: Midsommarafton (from API) → first Monday of August
- Pre-summer: Jan 1 → Midsommarafton
- Fall: first Monday of August → Dec 31
API
- Base URL:
https://api.dagsmart.se GET /holidays?year=YEAR&weekends=false→[{ date, code, name: {en, sv} }]- Note: returns holidays that fall on weekends too (e.g. Easter Saturday) — must check weekends separately
- Midsommarafton code:
midsummerEve
GET /bridge-days?year=YEAR→[{ date }](no code/name)- Cached in localStorage per year, refreshed if stale (different year)
- Proxied through local server to avoid CORS
UI Controls
- Work time toggle: switches all cards to work-mode calculations
- Bridge days toggle: visible only when work mode is on; treats bridge days as non-work
Stack
- Vanilla JS (ES modules), no framework, no build step
- Single
public/index.html+public/style.css+public/app.js - Node.js + Express server: serves static files + proxies API calls
npm startto run