Hydra

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

הוויזואליזציה

• כוס חיה — SVG עם נוזל שעולה ויורד בהתאם להתקדמות, עם גלי מים מונפשים ובועות עולות
• סטטיסטיקות חיות — סטרייק יומי, מספר פעמים שתית היום, דקות מהלגימה האחרונה
• גרף שבועי — bar chart 7 ימים, עמודות ירוקות לימים שהיעד הושג, ציאן לשאר
• Splash celebration — ויברציה + הודעה גדולה ברגע שהשגת את היעד

שימוש יומיומי

1. לחיצה אחת על כפתור הכוס המתאים — 200, 330, 500, או 750 מ"ל
2. כמות מותאמת בלחיצה על "מותאם" עם quick amounts
3. רואה מיד את הכוס מתעדכנת ואת האחוז עולה
4. לוג היום עם זמנים, אפשרות מחיקה לכל פריט
5. בסוף היום — רואה את הסטרייק עולה, או שובר אם לא הושג

טכנולוגיות

• IndexedDB multi-store — logs עם compound index על תאריך + daily_totals cached + settings
• Notifications API — תזכורות שעתיות בין 8:00-22:00 (רק אם לא שתית בשעה האחרונה)
• Vibration API — רטט קצר על כל לגימה, ארוך יותר על השגת היעד
• Service Worker — cache-first עם revalidate, עובד אופליין מלא
• PWA Install Prompt — beforeinstallprompt להתקנה כאפליקציה

חישוב חכם

• חישוב יעד מומלץ לפי משקל: 35 מ"ל לכל ק"ג משקל גוף (לחיצה אחת מחשבת)
• Streak נשבר רק אם יום שלם עבר בלי לעמוד ביעד (לא עכשיו)
• Midnight rollover — חצות מאפס את היום ושומר את הסיכום בהיסטוריה
• ממוצע / שיא / ימי הצלחה מחושבים מ-7 הימים האחרונים

עיצוב

פלטה glacier — כחול כהה (#082f49), ציאן בוהק (#22d3ee) ואייס-בלו פסטל. Glassmorphism עם backdrop-filter blur, ambient orbs נעות ברקע, micro-interactions: hover lift, tap scale, smooth spring animations של cubic-bezier.

טיפוגרפיה — Heebo לעברית + IBM Plex Mono לערכים מספריים (tabular-nums) — קריא, מדויק, מעוצב.

נסה עכשיו ב-ofir.zbang.net/hydra