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

Tally

PWA למונה רב-ערוצי — סופרים אנשים, חזרות, פריטים. tap מהיר עם רטט, היסטוריה 7 ימים

Tally

על האפליקציה

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

bouncer במועדון? סופר באימון? מורה שסופרת ידיים? צופה ציפורים? Tally עוקב אחרי כל ספירה, שומר היסטוריה של 7 הימים האחרונים, ומציג מי המונה הפעיל ביותר.

מה שאתה לא סופר — אתה לא יודע.

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

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

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

  • מונים מרובים — צור כמה מונים שאתה רוצה, כל אחד עם שם משלו ואחד מ-10 צבעים.
  • + ו-− מהיר — כפתורים גדולים בכל מונה, רטט קצר על כל לחיצה (haptic feedback).
  • לחץ ארוך → פרטים — סטטיסטיקה: סך הקלקות, היום, קצב לדקה (ב-5 דקות אחרונות), גרף 7 ימים.
  • Event log — כל לחיצה נשמרת בנפרד עם timestamp, מאפשר ניתוח retroactive.
  • סיכומי דשבורד — total counts, מונים פעילים, היום — בראש המסך.
  • גיבוי JSON — ייצוא של counters + events במלואם.
  • עריכה בכל זמן — שנה שם/צבע, אפס מונה, מחק לחלוטין.

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

  • IndexedDB עם 2 storescounters ו-events. event store עם index על counterId למחיקה bulk-cascade דרך cursor walk.
  • Vibration patterns15ms על increment, [10,20] על decrement (haptic chain).
  • Long-press detection — touch + mouse עם 550ms threshold, vibration 40ms על trigger.
  • In-place DOM update — אחרי כל tap, רק הערך המסוים מתעדכן (לא re-render מלא של הרשימה) — תגובה מיידית גם עם 50+ counters.
  • Per-counter color דרך CSS --c variable + color-mix() לטינטים אוטומטיים.
  • Service Worker — cache shell + runtime stale-while-revalidate.
  • Vanilla JS, אפס תלויות — כ-30KB total.

עיצוב

  • פלטה crimson#dc2626 red-600 + #fca5a5 rose-light + #fef3c7 cream accent. רקע deep wine #1a0606.
  • Counter cards עם border ימני בצבע ייחודי + radial glow פינתי.
  • Tap flash — אנימציה רכה של background color בכל tap, מאשרת ויזואלית את הספירה.
  • Color picker של 10 פלטות צבע (crimson, orange, amber, lime, emerald, teal, sky, indigo, violet, pink).

שימושים

  • Bouncers — כניסות לחנות, מועדון, אירוע
  • מורים — תלמידים שהשיבו, ידיים שהורמו
  • ספורטאים — חזרות, סטים, סבבים
  • צופי ציפורים — זיהויים בטיול
  • בודקי איכות — מוצרים תקינים/פגומים בקו ייצור
  • סופרי קולות — ערב בחירות

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

· TECHNOLOGY ·
PWA Vanilla JS IndexedDB (multi-store) Event log Vibration API Long-press detection Service Worker CSS color-mix Touch + Mouse events

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

· YOUR PROJECT NEXT ·

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

בוא נדבר