Goal — אפליקציית PWA למעקב אחרי מטרות שנתיות / שבועיות. הגדר יעד, עדכן התקדמות, וקבל תחזית מדויקת מתי תגיע ליעד — מבוססת רגרסיה לינארית של 14 העדכונים האחרונים. ללא AI, ללא תלות חיצונית, מתמטיקה צרופה.
האלגוריתם — Linear Regression ETA
הזרימה הטכנית של תחזית הסיום:
- אסוף 14 עדכונים אחרונים מיומן המטרה (עם timestamps + values)
- המר לנקודות (x, y) כאשר x = ימים מהעדכון הראשון, y = הערך
- רגרסיה לינארית מקורית — פתור
y = mx + bעם least-squares:m = (n·ΣXY - ΣX·ΣY) / (n·ΣXX - ΣX²)b = (ΣY - m·ΣX) / n
- חלץ את הקצב
m(יחידות ליום) — מציג כיחידה/יום, יחידה/שבוע, או יחידה/חודש לפי הסדר גודל - פתור עבור הזמן ליעד:
x = (target - b) / m - השווה לדדליין → קבע סטטוס: 🎯 בקצב | ⚠ פיגור | ✓ הושג
יתרון: דטרמיניסטי, מהיר, יציב גם עם נתונים מעטים (מ-2 עדכונים), וניתן לעדכון בכל שינוי בלי קריאות חיצוניות.
ויזואליזציה
Circular Progress (custom SVG)
לכל מטרה — circle עם stroke-dasharray מחושב pct/100 * 2πr. מתעדכן עם transition של 1s cubic-bezier overshoot. במצב detail — circle ענק 200×200 עם gradient לפי קטגוריה.
Sparkline (custom SVG)
30 עדכונים אחרונים כקו רציף עם:
- Area fill בגרדיאנט שקוף
- Line stroke בצבע הקטגוריה
- Dots על כל נקודה (האחרון בולט יותר עם stroke כפול)
- Target line דשור צהוב עם תווית "יעד"
- אוטומטי-סקיילינג של ציר Y לפי min/max + יעד
Mini circle בכרטיסי ה-grid
אותה לוגיקה בקטן (64×64) עם % במרכז.
פיצ'רים
- 4 קטגוריות מצוירות: בריאות (ירוק), למידה (ציאן), פיננסי (צהוב), יצירה (סגול)
- 4 פילטרים: פעילות / 🎯 בקצב / ⚠ פיגור / ✓ הושגו
- Quick add —
+1,+5,+10, או הזנת ערך מותאם - מילסטונים אוטומטיים ב-25%, 50%, 75%, 100% — עם splash celebration + ויברציה
- ETA card עם תאריך משוער, קצב נוכחי, דדליין, וסטטוס מילולי בעברית
- יומן עדכונים עם delta בכל שורה (+5 ירוק, −3 ורוד) ותאריך יחסי
טכנולוגיות
- Linear regression מקורית ב-Vanilla JS (least-squares method)
- Custom SVG — circular progress (stroke-dasharray) + sparkline (dynamic scaling) + target line
- CSS color-mix() ל-glow אדפטיבי לפי קטגוריה
- IndexedDB multi-store — goals + logs (compound index על goalId) + settings
- Vibration API — feedback קצר על update, ארוך על milestone
- Service Worker — cache-first עם revalidate, אופליין מלא
- PWA installable עם 3 גדלי איקונים
עיצוב
פלטה sky-pastel + cream + status colors — אסתטיקה אופטימית של "שמיים פתוחים" וצמיחה. נבדלת מ-electric-blue (Tempo) ו-navy-aqua (Tide) ע"י גוון פסטל בהיר יותר. רקע כחול-אפור עמוק #0c1418 · sky #7dd3fc · cream #fef9c3 · ירוק להצלחה · ורוד לפיגור · צהוב לדדליין.
טיפוגרפיה — Heebo + Frank Ruhl Libre לכותרות + IBM Plex Mono לכל הערכים והמספרים (300 weight, tabular-nums, direction LTR לסכומים). Glassmorphic surfaces, ambient sky orbs נעות ברקע.
