A full-stack productivity web application designed with a high-fidelity, skeuomorphic cyber-airport terminal aesthetic. It combines itinerary management (note-taking) with a "Chronometer" (Pomodoro-style focus timer).
- Create, Read, Update, Delete trip records with auto-sync
- Category organization — Flights, Hotels, Packing, Transit, Ideas
- Live stats — Word and byte (character) tracking
- Persistent storage via localStorage (
AEROSYNC_DATA)
- Cyberpunk digital display housing
- Three modes: Lounge Period (45 min), Boarding Wait (25 min), Gate Transit (5 min)
- Initiate / Reset controls
- Status tracking for total cycles and records
- Simulated real-time departure board with realistic status updates (On Time, Boarding, Gate Open, Gate Close, Delayed, Departed)
- Digital HUD decoding character animation effect
- Dynamic neon marquee ticker
| Layer | Technology |
|---|---|
| Frontend | Vanilla HTML / CSS / JS |
| Styling | CSS3 Custom Properties, Glassmorphism, Neon Glows |
| Typography | Inter (UI), IBM Plex Mono (Data) |
| Storage | localStorage (persistent) |
- Download
Noteflow.html - Double-click the file to open it in Chrome or any modern browser.
- Everything works offline instantly with no build step required.
- Click + NEW REC in the Manifest panel to create a new record.
- Click any trip card to open and edit its details in the Active Record terminal.
- Use the category filter tabs to filter records by type.
- Hover a trip card and click ✕ to delete it.
- Changes are auto-saved after a brief delay.
- Select a mode: Lounge Period, Boarding Wait, or Gate Transit.
- Click INITIATE to begin the countdown.
- Click again to pause, RESET to restart.
- Cycles and total records are tracked in the Status Footer.
All manifest records and statistics are saved to localStorage under the key AEROSYNC_DATA. Data survives page refreshes and browser restarts. No backend or account required.
Cyber-airport terminal aesthetic with dark backgrounds, cyan neon accents, and glassmorphism panels. Features dynamic elements like decoding characters and sweeping light effects.