A premium, self-saving Neobrutalist Countdown Tracker for your milestones, deadlines, and project releases. Styled with retro pastels, bold typography, thick borders, heavy shadows, and animated Memphis decorative shapes.
🌐 Live Demo: https://umairhex.github.io/mileon/
- Singular Deadline Tracker: Focus on one key deadline at a time with instant persistent saving.
- Form Persistence: The "Set Event Details" panel remains always visible, pre-populated with active event inputs for immediate updates.
- Dynamic Days Metric Toggle: Switch between standard countdowns (Days, Hours, Minutes, Seconds) and condensed layouts (total Hours, Minutes, Seconds) on the fly.
- No-Install Local Storage: Saved targets and display settings automatically sync and load from your local browser storage.
- Timezone Detection: Shows active target timezones automatically based on browser locale.
- Celebratory Completion State: Canvas-rendered confetti rain and overlay trigger when the timer reaches zero.
- Fully Responsive Layout: Built with flexible CSS grid grids that fit snuggly into views of all heights and widths without artificial viewport stretching.
- Favicon & Complete SEO: Custom-designed embedded SVG vector favicon, custom title hierarchy, Open Graph, and Twitter Cards built-in.
The application is completely self-contained in a single, high-performance static file. You can run it locally in seconds:
- Open your terminal in the project directory.
- Run
npm install(to fetch testing dev dependencies). - Run
npm run devornpm start. - Open the displayed local server address in your web browser.
Simply double-click the index.html file to launch it directly in your web browser.
- Structure: HTML5 Semantic Elements
- Styling: Modern CSS3 (Variables, CSS Grid, Flexbox, Keyframe Animations)
- Logic: Vanilla ES6 JavaScript (Confetti Canvas particle engine, LocalStorage API, native Date operations)
Developed by Umair. Feel free to connect or reach out!
| Channel | Contact / Profile Link |
|---|---|
| umairniazidev@gmail.com | |
| umairhex | |
| 💻 GitHub | umairhex |
| 🌐 Portfolio | umairrx.dev |
| @umairhex | |
| @umairhex |