Habit

על האפליקציה

Habit היא אפליקציית מעקב הרגלים יומיים. לכל הרגל יש שם, סמל וצבע משלו. כל יום שעמדת בו — סמן, הסטריק שלך גדל, וההתמדה שלך הופכת לויזואל ענק שמראה לך כמה אתה עקבי.

לא צריך להתחיל גדול. צריך להתחיל היום.

לחצו לנסות בעצמכם → ofir.zbang.net/habit

האפליקציה רצה כאן בייצור — אפשר להתקין על המסך הבית. עובדת אוף-ליין מהפעם הראשונה.

יכולות מרכזיות

• Heatmap 365 ימים בסגנון GitHub contributions — 53 שבועות × 7 ימים = 371 תאים. כל יום מסומן בעוצמת צבע.
• Streak counter live — חישוב סטריק נוכחי וסטריק שיא בכל פתיחה. מאפשר day-grace (מותר לסמן את אתמול אם לא סימנת היום).
• Today progress ring — circular SVG progress גדול בראש המסך, מציג כמה הרגלים סימנת היום מתוך הסך.
• Confetti celebration — בכל milestone (7/14/30/60/100/365 ימים) — 30 חלקיקים מתעופפים + רטט ייחודי.
• 8 צבעים + 12 סמלים — אישיות לכל הרגל.
• Last-7 mini-bar בכל card — תצוגה מהירה של השבוע האחרון.
• Detail bottom sheet — סטריק נוכחי, סטריק שיא, סך סימונים, אחוז התמדה (מאז יצירת ההרגל), heatmap מלא של 365 ימים.
• גלובל stats — סך הרגלים, סך סימונים, ימים מתחילת השימוש, סטריק שיא בכל הזמנים, גרף 7 ימים אחרונים.

ארכיטקטורת ה-PWA

• IndexedDB עם 2 stores — habits ו-checks. ה-checks store יש לו 3 indexes: habitId, date, [habitId, date] (compound unique) — מאפשר lookup מהיר ב-dbCheckExists(habitId, date).
• Cascade delete — מחיקת habit מחקה גם את כל ה-checks שלו דרך dbDelByIndex(CHECKS, 'habitId', habitId) עם cursor walk.
• Streak algorithm — לולאה שמאחרת יום-יום אחורה מהיום הנוכחי, סופרת ימים רצופים. תומך ב-grace period (אם היום עוד לא סימנת אבל אתמול סימנת — הסטריק עדיין ספיר).
• Heatmap rendering — 53 weeks × 7 days, מתחיל מ-Sunday לפני 364 ימים, מותאם לתצוגת RTL/LTR גם יחד.
• Confetti animation — Element.animate() API עם 30 divs צבעוניים, trajectories ב-cubic-bezier.
• CSS color-mix — לכל הרגל יש --c color, ה-card משתמש ב-color-mix(in srgb, var(--c) 12%, transparent) לרקע, גוונים אוטומטיים.
• Vanilla JS, אפס תלויות, כ-32KB total.

עיצוב

• פלטה sage-mint pastel — #86efac sage + #bbf7d0 mint-light + #16a34a emerald-deep. רקע #0f1f17 deep forest-charcoal.
• 3 ambient orbs — sage + emerald + butter-yellow accent, blur 90px, drift אנימציה איטית.
• Custom SVG check icon — לא emoji.
• Glassmorphic cards עם backdrop-filter blur+saturate.
• Color-coded per habit — 8 פלטות לבחירה (sage, sky, lavender, rose, amber, peach, pink, mint), כל card מקבל border ימני וטבע גלוי.

מי משתמש?

• כל מי שרוצה לבנות הרגל חדש — שתיית מים, ריצה, מדיטציה, קריאה, תרגול שפה.
• כל מי שרוצה לראות שיש לו שיטה — heatmap מציג שאתה לא לבד עם ההתמדה שלך.
• כל מי שמתאמן ב-deep work — סימנת 100 ימים רצופים? יש לך מודלים ביולוגיים שתומכים בהמשך.

הכל נשמר רק במכשיר שלך. אפס שרתים, אפס tracking, אפס subscription.