OB
אופיר ברנס
Builder · TLV
חזרה לכל הפרויקטים
PWA · 2026 · Personal Project

Focus

PWA לטיימר Pomodoro מעוצב — סשני פוקוס, היסטוריה, סטריק יומי, גרף 14 ימים

Focus

על האפליקציה

Focus היא אפליקציית רשת מתקדמת (PWA) שמיישמת את טכניקת Pomodoro המוכחת — סשני פוקוס של 25 דקות מופרדים בהפסקות של 5 דקות, ואחרי 4 סשנים — הפסקה ארוכה.

לחץ "התחל" → המסך הופך לטיימר עגול ענק שמתמלא בקצב מסונכרן, צליל מעבר עדין מסמן את סוף השלב, רטט עדין מאשר. אחרי כל סשן הוא נשמר עם תגית ("עבודה", "לימודים", "קריאה") אם רצית — ובסוף יום אתה רואה כמה דקות של פוקוס אמיתי הספקת.

פוקוס לא נמדד בשעות — הוא נמדד בסשנים שלא נשברו.

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

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

ארבע variations של פוקוס

  • קלאסי 25/5 — Pomodoro המקורי של פרנצ'סקו צ'יריו, 4 סשנים → הפסקה ארוכה.
  • ארוך 50/10 — לעבודה עמוקה (Deep Work) שדורשת כניסה לזרימה.
  • עצים 90/20 — Ultradian rhythm — תואם למחזור הביולוגי של ריכוז.
  • קצר 15/3 — לפיצוצי משימה קטנות (admin, אימיילים, ניקיון).

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

  • טיימר עגול ענק — SVG עם stroke-dasharray מתעדכן ב-60fps, צבע משתנה לפי שלב (סגול לפוקוס, ירוק להפסקה קצרה, זהב להפסקה ארוכה).
  • תיוג סשנים — לכל סשן אפשר להוסיף שם ("פיתוח", "כתיבה", "קריאה"). בסטטיסטיקה רואים אילו תגיות מובילות.
  • סטריק יומי — pill בראש המסך עם 🔥 וסטריק ימים רצופים + דקות פוקוס היום.
  • Heatmap 14 ימים — visualization 4-רמתי לפי כמות סשנים יומית.
  • אוטו-המשך — אופציונלי, ממשיך אוטומטית לשלב הבא בלי לחיצה.
  • מצב "השהה" / "דלג" — שליטה מלאה במהלך סשן.

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

  • Web Audio API chime — נוצר בזמן אמת, 3 oscillators ב-C-E-G עם envelope של 40ms attack ו-exponential decay 850ms.
  • Wake Lock API — מסך לא ננעל, re-acquire אוטומטי על visibilitychange.
  • Notifications API — push notifications כשהאפליקציה ברקע (אם המשתמש מאשר).
  • Vibration API — דפוסי רטט שונים בכל מעבר שלב ([100,60,100,60,200] בסוף, [20,40,30] בהתחלה).
  • IndexedDB — sessions store + settings store, persistent על פני ביקורים.
  • Service Worker — cache shell, runtime stale-while-revalidate, notificationclick handler.
  • requestAnimationFrame loop — דיוק במילישנייה, לא setInterval שיכול להחמיץ.

עיצוב

  • פלטה — violet #8b5cf6 + lavender #a78bfa + pink #ec4899 accent + mint #10b981 להפסקות.
  • רקע ambient — שני orb blurs מרחפים אנימטיבית עם grid עדין.
  • Glassmorphic UI — backdrop-filter blur saturate על כל הכרטיסים והמודלים.
  • Sheet modals — הגדרות + סטטיסטיקה נפתחים מלמטה כמו iOS native.

הפילוסופיה

מי שאומר "אני לא מצליח להתרכז" באמת אומר "לא ניסיתי לעבוד 25 דקות רצופות בלי לבדוק את הטלפון".

טכניקת Pomodoro מוכחת מחקרית מאז שנות ה-80. הסוד הוא לעצור — לקחת הפסקה לפני שהמוח מתעייף, לא אחרי. Focus רק מסייע לך לראות את הזמן עובר ולסמן את הסוף.

כל הנתונים נשארים רק במכשיר שלך. שום דבר לא נשלח לשרת.

· TECHNOLOGY ·
PWA Vanilla JS Web Audio API Wake Lock API Notifications API Vibration API IndexedDB Service Worker SVG Animation requestAnimationFrame

פרויקטים קשורים.

· YOUR PROJECT NEXT ·

הפרויקט הבא שלך?

בוא נדבר