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

Plant

יומן השקיית צמחים — איורי SVG ייחודיים לכל סוג, סטטוס חי, ומעקב היסטוריה

Plant

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

האיורים — שישה סוגי צמחים

כל סוג צמח מצויר במקור עם SVG vanilla — בלי קבצי תמונה, הכל וקטור שמדורג לכל גודל. הצבע משתנה לפי הסטטוס:

  • קקטוס — גוף מרכזי עם 2 זרועות, פרח קטן בקצה, קווי גוף אנכיים
  • סוקולנט — רוזטה של 8+ עלי חוד שיוצאת מהמרכז, layered transparency
  • שרך — 5 עלוות מקושתות עם leaflets קטנים לאורך כל אחת
  • עלים (מונסטרה) — 3 עלי אובל גדולים על גזעים מתפצלים, וריאדים פנימיים
  • פרח — גזע ירוק עם 2 עלים בצד, כותרת 5-עלי-כותרת ורודה ומרכז צהוב
  • עשב/תבלין — 10+ עלים עגולים קטנים על 3 גזעים — תחושת באזיליקום

הכל יושב על עציץ טראקוטה עם gradient + אדמה חומה.

תזכורות חכמות

  • תדירות מותאמת לכל צמח — קקטוס פעם בחודש, פרח כל 3 ימים, עשב כל יומיים
  • 4 רמות סטטוס עם אנימציות:
    • דחוף (אדום, dot מנצנץ) — מעבר לתדירות
    • היום/מחר (צהוב) — בטווח של יום
    • בסדר (ירוק בהיר) — אמצע התדירות
    • טרי (ירוק בוהק) — הושקה זה עתה
  • פילטר מהיר — דחוף / היום / בסדר / הכל
  • מיון אוטומטי — דחופים תמיד למעלה

פרטי הצמח

מודאל מפורט לכל צמח:

  • מונה גדול של ימים מההשקה האחרונה
  • בר התקדמות עם צבע דינמי לפי סטטוס
  • היסטוריית השקיות מלאה עם תאריכים ושעות
  • כפתור "השקיתי עכשיו" שמעדכן ב-IndexedDB ומקפיץ ויברציה

טכנולוגיות

  • 6 איורי SVG מקוריים מקודדים ב-template strings — צבע leaves דינמי לפי הסטטוס הנוכחי, גרדיאנטים ייחודיים לעציץ
  • CSS color-mix() ל-glow אדפטיבי לכל כרטיס
  • IndexedDB multi-store — plants + logs (compound index על plantId) + localStorage ל-streak
  • Vibration API — pattern קצר על השקה
  • Service Worker — cache-first עם revalidate, אופליין מלא
  • PWA installable עם 3 גדלי איקונים

עיצוב

פלטה sage-mint + warm earth — טבעי ואורגני, נבדל מ-lime (Notes) ו-forest-emerald (Whitenoise). רקע יער עמוק (#0a1410), מנטה בוהקת (#86efac), טראקוטה לעציצים (#9a3412).

טיפוגרפיה — Heebo + Frank Ruhl Libre לכותרות (סריף אורגני) + IBM Plex Mono למספרי ימים. Glassmorphic surfaces, ambient orbs ירוקות נעות ברקע.

האפליקציה מגיעה עם 6 צמחים זרעים מוכנים: מונסטרה, בזיליקום, קקטוס בר, סחלב, שרך בוסטון, הוואורתיה.

פתח את Plant ב-ofir.zbang.net/plant

· TECHNOLOGY ·
PWA Custom SVG IndexedDB CSS color-mix Vibration API Service Worker Frank Ruhl Libre Heebo

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

· YOUR PROJECT NEXT ·

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

בוא נדבר