Money — אפליקציית PWA למעקב הוצאות והכנסות אישיות. הקלד תנועה תוך פחות מ-5 שניות, וצפה איך הכסף שלך זורם החודש בעזרת גרף עוגה דינמי, טרנד 6 חודשים, ויעד תקציב חכם.
הזרימה המלאה
- לחץ על הכפתור הצף למטה
- הזן סכום במסך הקלט הגדול עם סמל ₪ ב-IBM Plex Mono
- בחר סוג — הוצאה (toggle ורוד) או הכנסה (toggle ירוק)
- בחר קטגוריה מ-11 קטגוריות מצוירות (אוכל, תחבורה, חשבונות, בית, קניות, בריאות, ילדים, בידור, חינוך, ביגוד, אחר) או 4 קטגוריות הכנסה (משכורת, פרילנס, מתנה, תשואה)
- שמור — התנועה נוספת לרשימה, מאזן מתעדכן, גרף עוגה רוקד
הויזואליזציה
Pie chart מקורי (SVG, ללא ספריות)
מתמטיקה של arcs: לכל קטגוריה הופך אחוז → זווית → coordinates cos/sin → SVG path A עם largeArc flag. Donut hole במרכז עם סך ההוצאות בקרם בולט. Hover לצביעה בולטת. Legend מסונן ל-8 קטגוריות מובילות עם dot, name, amount + %.
Trend chart 6 חודשים
Bar chart מקורי עם 2 עמודות לחודש (ירוק=הכנסה, ורוד=הוצאה), grid lines דקים, חודש נוכחי באופציטי 100% והשאר ב-55% — דגש ויזואלי על "איפה אני עכשיו".
יעד תקציב
Progress bar שמשתנה בצבעו לפי המצב — ירוק עד 75%, צהוב עד 100%, אדום בחריגה. מציג "נשאר X" או "חריגה X" ב-IBM Plex Mono.
פיצ'רים
- Intl.NumberFormat('he-IL', currency: 'ILS') לכל סכום — פורמט עברי תקין עם סמל ₪ במיקום הנכון
- חודשים מרובים — חיצי ניווט ‹ › למעבר בין חודשים, חודש נוכחי מודגש בכרטיס המאזן
- קיבוץ לפי תאריך — "היום", "אתמול", "לפני 3 ימים", או תאריך מלא
- פילטר 3-מצבים — הכל / רק הוצאות / רק הכנסות (לחיצה אחת מחליפה)
- Web Share API — שיתוף סיכום חודשי לוואטסאפ עם 5 קטגוריות מובילות + יחס תקציב
- מאזן צבעוני — ירוק לחיובי, אדום לשלילי, עם glow מתאים
טכנולוגיות
- Custom SVG pie chart עם donut math מקורי (
Math.cos/sin+ arc flags) - Custom SVG bar chart עם dynamic scaling + dual-bar grouping
- Intl.NumberFormat('he-IL') עם currency: 'ILS' + maximumFractionDigits: 0
- IndexedDB עם time-indexed transactions store + settings
- CSS color-mix() ל-tx-row borders בצבע הקטגוריה
- Vibration API — feedback קצר על שמירה, חזק על completion
- Web Share API עם fallback ל-clipboard
- Service Worker — cache-first עם revalidate, אופליין מלא
עיצוב
פלטה sienna + warm-cream + status colors — אסתטיקה עתיקה־financial של ספר חשבונות עור. רקע cocoa עמוק #15100a · sienna #92400e · cream #fef3c7 · ירוק #86efac להכנסה · ורוד #fb7185 להוצאה.
טיפוגרפיה — Heebo + Frank Ruhl Libre לכותרות + IBM Plex Mono לכל המספרים והסכומים (300 weight, tabular-nums, direction LTR לסכומים). Glassmorphic balance card עם gradient border, ambient sienna orbs נעות ברקע.
