A zero-dependency, single-file habit tracking web app with beautiful consistency matrices and a dark editorial aesthetic.

• Track up to 5 habits — each assigned a distinct accent color
• Daily check-ins — tap the pill button to log today's completion instantly
• Three matrix views with different time scopes and layouts
• Streak tracking — current streak, best streak, 7-day rate, and perfect days
• Persistent storage — all data lives in localStorage, no backend needed
• Zero dependencies — one self-contained HTML file, no build tools, no npm

Four quarterly panels (Q1 · Q2 · Q3 · Q4) displayed side by side.

         Q1                  Q2                  Q3                  Q4
  [habit headers]    [habit headers]    [habit headers]    [habit headers]
  Jan 01  ■ □ ■ □ □  |  Apr 01  □ ■ ■ □ ■  |  Jul 01  ■ ■ □ □ ■  |  Oct 01  □ □ ■ ■ □
  Jan 02  □ ■ □ ■ ■  |  Apr 02  ■ □ □ ■ □  |  Jul 02  □ ■ ■ □ □  |  Oct 02  ■ □ □ ■ ■
  ...                |  ...               |  ...               |  ...

• Rows = days, Columns = habits
• Habit names displayed as vertical column headers
• Day labels every ~20 rows; "Today" highlighted in amber
• Quarters: 91 · 91 · 91 · 92 days

Four weekly blocks (~7–8 days each) stacked vertically.

  [habit headers]
  Mon 1   ■ □ ■ □ □
  Tue 2   □ ■ □ ■ ■
  ...
  ─────────────────
  [habit headers]
  Mon 8   ■ ■ □ □ ■
  ...

• Rows = days (with weekday + day number label), Columns = habits
• Each block gets its own header row for easy scanning
• Horizontal dividers between blocks
• Parts: 8 · 7 · 7 · 8 days

A single horizontal grid.

             Sun  Mon  Tue  Wed  Thu  Fri  Sat
  Morning Run  ■    □    ■    ■    □    ■    □
  Read 30 min  □    ■    ■    □    ■    □    ■
  Meditate     ■    ■    □    ■    ■    □    □
  No Sugar     □    □    ■    □    □    ■    ■
  Sleep 8 hrs  ■    □    □    ■    □    ■    □

• Rows = habits, Columns = days
• Weekday labels above each column
• Today's column highlighted in amber

No installation required. Download habit-tracker.html and open it in any modern browser:

# Clone the repo
git clone https://github.com/your-username/streak-habit-tracker.git
cd streak-habit-tracker

# Open directly
open habit-tracker.html        # macOS
start habit-tracker.html       # Windows
xdg-open habit-tracker.html    # Linux

Or serve locally:

python3 -m http.server 8080
# then visit http://localhost:8080/habit-tracker.html

streak-habit-tracker/
├── habit-tracker.html   # Entire app — HTML, CSS, JS in one file
└── README.md

Habit colors: Amber · Coral · Teal · Purple · Green

All data is stored in the browser via localStorage — no account, no server, no internet required after the initial font load.

Backup / restore via browser console:

// Export
copy(JSON.stringify({
  habits: JSON.parse(localStorage.sk2_habits),
  logs:   JSON.parse(localStorage.sk2_logs)
}))

// Import (paste your backup JSON as `data`)
localStorage.sk2_habits = JSON.stringify(data.habits);
localStorage.sk2_logs   = JSON.stringify(data.logs);
location.reload();

Change the habit limit — edit MAX near the top of the <script>:

const MAX = 5; // increase to allow more habits

Change matrix split sizes — edit the slice indices in renderMatrix():

// Yearly quarters (currently 91/91/91/92)
const quarters = [allDates.slice(0,91), allDates.slice(91,182), ...];

// Monthly parts (currently 8/7/7/8)
const parts = [dates.slice(0,8), dates.slice(8,15), ...];

Change accent/habit colors — edit the COLORS array:

const COLORS = ['#f5a623','#ff6b6b','#4ecdc4','#c77dff','#52c78a'];

Requires localStorage support (all modern browsers).

PRs welcome! Ideas for future features:

• Export to CSV / PNG snapshot
• Habit categories or emoji icons
• Custom color picker
• Weekly reminders via Web Notifications API
• PWA / offline-first support
• Dark/light theme toggle

MIT — free to use, modify, and distribute.

Built with ☕ and obsessive attention to grids.