פקח-נייד — Design System

צבעים

פלטת הצבעים בנויה משלוש שכבות: צבעי מותג (Navy), צבעי רמזור סמנטיים (אדום/כתום/ירוק), וצבעי UI ניטרליים.

צבעי מותג - Navy

#0A1E3F

Navy 900

--navy-900

#1B3A6B

Navy 700 (ראשי)

--navy-700

#2756A8

Navy 500

--navy-500

#EEF2FF

Navy 100

--navy-100

צבעי רמזור - סמנטיים

#E53935

Red 500 - עדיפות גבוהה

--red-500

#FFEBEE

Red 50 - רקע

--red-50

#FB8C00

Orange 500 - עדיפות בינונית

--orange-500

#FFF3E0

Orange 50 - רקע

--orange-50

#43A047

Green 500 - עדיפות נמוכה

--green-500

#E8F5E9

Green 50 - רקע

--green-50

צבעים ניטרליים - UI

#1A1A2E

Gray 900 - טקסט ראשי

--gray-900

#444444

Gray 700 - טקסט משני

--gray-700

#888888

Gray 500

--gray-500

#AAAAAA

Gray 400 - תוויות

--gray-400

#E2E8F0

Border Light

--border-light

#F5F7FA

Gray 50 - רקע דף

--gray-50

#2979FF

Blue Accent - מיקום פקח

--blue-accent

#00838F

Teal 500

--teal-500

גרדיאנטים

Primary Gradient

כפתורים ראשיים

linear-gradient(135deg, #1B3A6B, #2756A8)

Dark Gradient

Hero / Splash

linear-gradient(170deg, #1B3A6B, #0A1E3F)

BG Gradient

רקע דסקטופ

radial-gradient(ellipse at top, #1B3A6B, #0D2447)

טיפוגרפיה

הפונט הראשי הוא Heebo - פונט עברי מ-Google Fonts. הוא תומך במשקלים 300-900 ונותן מראה נקי ומודרני ב-RTL.

סולם הפונט

Splash Title

30px / 900

פקח-נייד

App Name

24px / 900

פקח-נייד

Route Number

24px / 900

480

Big Metric

36px / 900

47%

Header Title

17px / 700

הגדרות

Metric Value

17px / 700

1.2 ק"מ

Button Text

16-17px / 700

כניסה למערכת

User Name

16px / 700

יוסי כהן

Input / Body

15px / 400

שדרות רוטשילד 42, תל אביב

Row Item

15px / 400

רדיוס תצוגה

Direction

14px / 400

יפו ← תל אביב מרכז

Stop Value

14px / 600

כיכר דיזנגוף

Alert Pill

13px / 700

3 אדומים

Chip / Op

13px / 500-700

מטרופולין

Form Label

13px / 600

מספר עובד / שם משתמש

Filter Tab

12px / 700

אדום (3)

Caption / Label

11px / 400-700

% אי-תיקוף (ממוצע קו)

Section Label

11px / 700 / uppercase

תצוגה

משקלי פונט בשימוש

משקל	ערך	שימוש	דוגמה
Light	`300`	לא בשימוש פעיל (זמין כרזרבה)	טקסט דק
Regular	`400`	גוף טקסט, שדות קלט, כיוונים	טקסט רגיל
Medium	`500`	צ'יפים, סיידבר	טקסט בינוני
SemiBold	`600`	תוויות טופס, ערכי תחנות, כפתורי רדיוס	טקסט חצי-עבה
Bold	`700`	כפתורים, כותרות, התראות, טאבים פילטר	טקסט עבה
ExtraBold	`800`	אווטאר ראשי תיבות	טקסט חזק
Black	`900`	שם אפליקציה, מספרי קו, מדדים גדולים	טקסט שחור

טעינת הפונט: יש לטעון את Heebo מ-Google Fonts עם כל המשקלים הנדרשים:
https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900

ריווח וגודל

ריווח מבוסס על מכפלות של 4px. הגדלים העיקריים:

שם	ערך	שימוש
2xs	`4px`	מרווח מינימלי, gaps פנימיים
xs	`8px`	מרווח בין אייקונים, gaps קטנים
sm	`12px`	padding פנימי, מרווחי רשימה
md	`16px`	padding צדדי ראשי, gap בין רכיבים
lg	`20px`	padding של bottom sheet body
xl	`24px`	padding של טפסים, hero sections
2xl	`28px`	padding עליון של login hero

גדלי אלמנטים קבועים

אלמנט	גובה / גודל
Status Bar	`52px`
Icon Button	`36 x 36px`
Settings Icon	`32 x 32px`
FAB (Floating Action)	`48 x 48px`
User Avatar	`52 x 52px`
Login App Icon	`76 x 76px`
Splash Icon	`96 x 96px`
Bus Marker Circle	`44 x 44px`
Inspector Dot	`18 x 18px`
Toggle	`44 x 26px`
Phone Frame	`390 x 844px`

צללים ורדיוס

צללים

Shadow SM

0 2px 10px rgba(0,0,0,0.06)

כרטיסים, הגדרות

Shadow MD

0 4px 18-20px rgba(27,58,107,0.38)

כפתורים ראשיים

Shadow LG

0 -8px 32px rgba(0,0,0,0.18)

Bottom Sheet

FAB Shadow

0 4px 18px rgba(0,0,0,0.22)

FAB, סימני מפה

רדיוס פינות

8px

SM - אייקונים

10px

כפתורי אייקון

12px

MD - pills, meta

14px

LG - כפתורים, inputs

18px

XL - כרטיסים

20px

Pill - טאבים, צ'יפים

24px

Bottom Sheet top

50%

Full - עיגולים

כפתורים

כל הכפתורים משתמשים ב-font-family: 'Heebo' ויש להם אנימציית scale על לחיצה.

כפתור ראשי (Primary)

/* btn-login / btn-nav */
background: linear-gradient(135deg, #1B3A6B 0%, #2756A8 100%);
border-radius: 14px;
font-size: 16-17px; font-weight: 700;
box-shadow: 0 4px 18-20px rgba(27,58,107,0.38);
padding: 15px;
/* :active */ transform: scale(0.98); opacity: 0.9;

כפתור משני (Secondary)

/* btn-biometric */
background: white;
border: 1.5px solid #E2E8F0;
border-radius: 14px;
font-size: 14px; color: #444;
padding: 13px;

כפתור סכנה (Danger)

/* btn-logout */
background: white;
border: 1.5px solid #E53935;
color: #E53935;
border-radius: 14px;
/* :hover */ background: #FFF5F5;

כפתורי אייקון

/* icon-btn / btn-back */
width: 36px; height: 36px;
border-radius: 10px;
background: rgba(255,255,255,0.14);
/* :hover */ background: rgba(255,255,255,0.24);

FAB - Floating Action Button

/* fab-loc */
width: 48px; height: 48px; border-radius: 50%;
background: white;
box-shadow: 0 4px 18px rgba(0,0,0,0.22);
color: #1B3A6B;
/* :active */ transform: scale(0.9);

כפתור סגירה

/* bs-x */
width: 30px; height: 30px; border-radius: 50%;
background: #F5F5F5; color: #666;

כפתורי בחירה (Radius Group)

/* r-btn */
padding: 5px 12px; border-radius: 20px;
border: 1.5px solid #E0E0E0;
font-size: 12px; font-weight: 600;
/* .on */ background: #1B3A6B; border-color: #1B3A6B; color: white;

שדות קלט

שדות קלט עם אייקון מימין (RTL), רדיוס 14px, ומסגרת שמשתנה ב-focus.

שדה קלט סטנדרטי

מספר עובד / שם משתמש

סיסמה

שדה ריק

/* form-input */
padding: 14px 46px 14px 14px; /* extra right for icon */
border: 1.5px solid #E2E8F0;
border-radius: 14px;
font-size: 15px; direction: rtl;

/* :focus */
border-color: #1B3A6B;
box-shadow: 0 0 0 3px rgba(27,58,107,0.1);

/* ::placeholder */ color: #C0C0C0;

/* Icon positioning (RTL - right side) */
position: absolute; right: 14px; top: 50%;
color: #AAA; font-size: 16px;

RTL Input: ב-RTL, ה-padding הגדול הוא מימין (עבור האייקון), לא משמאל. האייקון ממוקם ב-right: 14px ולא left.

תוויות טופס

אלמנט	סגנון	דוגמה
Form Label	`13px / 600 / #444`	מספר עובד / שם משתמש
Placeholder	`15px / 400 / #C0C0C0`	לדוגמה: 12345
Input Value	`15px / 400 / #1A1A2E`	יוסי_פקח
Helper Link	`13px / 400 / #1B3A6B`	שכחתי סיסמה

מפריד "או"

או

כרטיסים

כרטיסים הם הקונטיינרים הראשיים לתוכן. רקע לבן, רדיוס 18px, צל עדין.

כרטיס הגדרות

רדיוס תצוגה

התראות Push

רענון אוטומטי (30 שנ')

/* settings-card2 */
background: white;
border-radius: 18px;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
overflow: hidden;

/* s-row (each row) */
padding: 14px 16px;
border-bottom: 1px solid #F5F5F5; /* except last */

כרטיס משתמש

י

יוסי כהן

מ.ע. 12345 · פקח שטח

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

/* user-card */
border-radius: 18px; padding: 16px;
gap: 14px; display: flex;

/* user-av (avatar) */
width/height: 52px; border-radius: 50%;
background: linear-gradient(135deg, #1B3A6B, #2756A8);
font-size: 22px; font-weight: 800;

כרטיס אי-תיקוף (Evasion Card)

% אי-תיקוף (ממוצע קו)

47%

נתונים מ-30 הימים האחרונים

עדיפות גבוהה

% אי-תיקוף (ממוצע קו)

28%

נתונים מ-30 הימים האחרונים

עדיפות בינונית

% אי-תיקוף (ממוצע קו)

8%

נתונים מ-30 הימים האחרונים

עדיפות נמוכה

/* bs-evasion-card */
border-radius: 16px; padding: 14px 16px;
display: flex; justify-content: space-between;

/* Background variants */
.evc-red { background: #FFEBEE }
.evc-orange { background: #FFF3E0 }
.evc-green { background: #E8F5E9 }

תיבות מטא-דאטה

מרחק

210 מ'

זמן הגעה משוער

1 דק'

/* bs-meta-box */
flex: 1; background: #F5F7FA;
border-radius: 12px; padding: 12px 14px;

תחנה הבאה (Stop Pill)

תחנה הבאה

כיכר דיזנגוף

תגיות וצ'יפים

גלולת התראה (Alert Pill)

3 אדומים

בטווח 2 ק"מ

/* red-alert-pill */
background: #E53935; color: white;
padding: 5px 12px; border-radius: 20px;
font-size: 13px; font-weight: 700;
animation: pulseAlert 2.4s ease-in-out infinite;

צ'יפי עדיפות (Priority Chips)

עדיפות גבוהה

עדיפות בינונית

עדיפות נמוכה

/* bs-priority-chip */
padding: 7px 14px; border-radius: 20px;
font-size: 12px; font-weight: 700;

.chip-red { background: #E53935 }
.chip-orange { background: #FB8C00 }
.chip-green { background: #43A047 }

צ'יפי מפעילים (Operator Chips)

/* op-chip (default) */
padding: 6px 14px; border-radius: 20px;
border: 1.5px solid #E0E0E0;
font-size: 13px; font-weight: 500; color: #555;

/* op-chip.on (active) */
background: #EEF2FF; border-color: #1B3A6B;
color: #1B3A6B; font-weight: 700;

טאבי פילטר (Filter Tabs)

מצב לא פעיל (Inactive)

/* ftab (inactive) */
color: rgba(255,255,255,0.65);
background: rgba(255,255,255,0.1);

/* Active variants */
.active-all { background: white; color: #1B3A6B }
.active-red { background: #E53935; color: white }
.active-orange { background: #FB8C00; color: white }
.active-green { background: #43A047; color: white }

ניווט

Header - מסך מפה

3 אדומים

בטווח 2 ק"מ

/* map-header */
background: #1B3A6B;
padding: 0 16px;
z-index: 300;

/* Structure: */
/* Row 1: Alert pill + icon buttons */
/* Row 2: Filter tabs (horizontally scrollable) */

Header - מסך הגדרות

הגדרות

RTL: כפתור החזרה ב-RTL משתמש בחץ ימינה (fa-arrow-right) כי הניווט "אחורה" הוא ימינה.

רשימות

שורות הגדרות (Settings Rows)

גרסת אפליקציה

1.0.0 (Pilot)

עדכון אחרון

לפני 7 דק'

מקור נתונים

APC + AFC

כותרת סקשן

תצוגה

/* sec-title */
font-size: 11px; font-weight: 700;
color: #AAA; letter-spacing: 0.8px;
text-transform: uppercase;

צבעי אייקוני הגדרות

Class	צבע	שימוש
`.si-blue`	`#1B3A6B`	תצוגה, רדיוס
`.si-orange`	`#FB8C00`	התראות
`.si-teal`	`#00838F`	רענון, סנכרון
`.si-gray`	`#90A4AE`	מידע כללי
`.si-red`	`#E53935`	פעולות מסוכנות

מתגים

Toggle Switch

ON

OFF

/* toggle (ON state) */
width: 44px; height: 26px;
background: #43A047; border-radius: 13px;
/* knob: 20x20px, right: 3px (RTL) */

/* toggle.off (OFF state) */
background: #DDDDDD;
/* knob moves to: right: 21px (RTL) */

RTL: ב-RTL הכדור של ה-toggle נמצא מימין כשהוא ON ומשמאל כשהוא OFF. זה היפוך ממקרה LTR. ב-CSS זה מתבטא ב-right: 3px (ON) ו-right: 21px (OFF).

Bottom Sheet

Bottom Sheet עולה מלמטה עם אנימציה. כולל Drag handle, כותרת עם מספר קו, ותוכן מידע.

מבנה Bottom Sheet

5 · דן

יפו ← תל אביב מרכז

תחנה הבאה

כיכר דיזנגוף

% אי-תיקוף (ממוצע קו)

47%

נתונים מ-30 הימים האחרונים

עדיפות גבוהה

מרחק

210 מ'

זמן הגעה משוער

1 דק'

/* bs (Bottom Sheet container) */
position: absolute; bottom: 0;
border-radius: 24px 24px 0 0;
box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
transform: translateY(100%); /* hidden */
transition: transform 0.32s cubic-bezier(0.34,1.08,0.64,1);

/* bs.on (visible) */
transform: translateY(0);

/* Overlay behind sheet */
background: rgba(0,0,0,0.35);
backdrop-filter: blur(2px);

סימנים במפה

סימני אוטובוס (Bus Markers)

5

Red - 30%+

66

Orange - 15-29%

18

Green - 0-14%

Inspector

/* bm-circle */
width/height: 44px; border-radius: 50%;
border: 2.5px solid white;
box-shadow: 0 3px 10px rgba(0,0,0,0.28);

.bm-red { background: #E53935 }
.bm-orange { background: #FB8C00 }
.bm-green { background: #43A047 }

/* bm-label (route number) */
background: rgba(20,20,40,0.85);
font-size: 11px; font-weight: 700;
padding: 2px 8px; border-radius: 10px;
backdrop-filter: blur(4px);

/* Red marker has pulse animation */
.bm-red::after {
border: 2px solid rgba(229,57,53,0.4);
animation: markerPulse 2s ease-in-out infinite;
}

מערכת רמזור (Traffic Light)

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

טבלת מיפוי צבעים

דירוג	טווח	צבע ראשי	רקע כרטיס	תווית	CSS Classes
אדום	30%+	`#E53935`	`#FFEBEE`	עדיפות גבוהה	`.bm-red` `.evc-red` `.pct-red` `.chip-red`
כתום	15-29%	`#FB8C00`	`#FFF3E0`	עדיפות בינונית	`.bm-orange` `.evc-orange` `.pct-orange` `.chip-orange`
ירוק	0-14%	`#43A047`	`#E8F5E9`	עדיפות נמוכה	`.bm-green` `.evc-green` `.pct-green` `.chip-green`

איפה הצבע מופיע

רכיב	שימוש בצבע	הערה
Bus Marker Circle	background-color של העיגול	אדום כולל אנימציית pulse
Bottom Sheet Dot	background-color של הנקודה ליד מספר הקו	14x14px
Evasion Card	background-color של כרטיס האחוז (גוון בהיר)	Red 50 / Orange 50 / Green 50
Percentage Number	color של המספר הגדול	36px / 900 weight
Priority Chip	background-color של הצ'יפ	עם טקסט לבן
Filter Tab (active)	background-color של הטאב הפעיל	רק כשנבחר

אנימציות סמנטיות

אנימציה	רכיב	פרמטרים
pulseAlert	Alert Pill (כותרת אדומים)	`2.4s ease-in-out infinite` - box-shadow pulse
markerPulse	Bus Markers (אדום בלבד)	`2s ease-in-out infinite` - ring scale + fade
fillBar	Splash loading bar	`1.9s ease-in-out forwards` - width 0 to 100%

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

RTL - ימין לשמאל

האפליקציה כולה בעברית ומשתמשת בכיוון RTL. להלן הכללים העיקריים:

כללי RTL

נושא	כלל	דוגמה
כיוון HTML	חובה להוסיף `dir="rtl"` ו-`lang="he"` ב-tag של html	<html lang="he" dir="rtl">
אייקון Input	ממוקם מימין (right), לא משמאל	right: 14px ולא left
Padding Input	ריפוד גדול מימין (עבור האייקון)	padding: 14px 46px 14px 14px
כפתור "חזרה"	חץ ימינה (כי "אחורה" = ימינה ב-RTL)	fa-arrow-right
חצי כיוון	בזרימת שלבים, חצים שמאלה (←)	יפו ← תל אביב מרכז
Toggle Knob	ON = ימין, OFF = שמאל (הפוך מ-LTR)	right: 3px (ON)
Flex Direction	ב-RTL, flex items מסודרים מימין לשמאל אוטומטית	אין צורך לשנות flex-direction
Sidebar Nav Active	border-right (לא left) כי הסיידבר מימין	border-right: 3px solid
Code Blocks	קוד תמיד LTR	direction: ltr; text-align: left;

שגיאה נפוצה: לעולם לא להשתמש בחץ ימינה (→) לזרימת שלבים בעברית. הזרימה היא מימין לשמאל, לכן חץ שמאלה (←) הוא הנכון.

לא נכון: יפו → תל אביב מרכז
נכון: יפו ← תל אביב מרכז

מבנה עמוד

מבנה מסכים

האפליקציה בנויה כ-Single Page Application עם 4 מסכים שמוצגים לפי מצב. כל מסך הוא flex column שתופס את כל הגובה.

מסך	מבנה	רקע	הערות
Splash	Centered flex	`linear-gradient(170deg, #1B3A6B, #0A1E3F)`	Loading bar + footer absolute
Login	Hero (gradient) + Form (scroll)	`#F5F7FA`	Hero 28px padding, Form 22px padding
Map	Header (fixed) + Map (flex:1) + FAB + Sheet	`#E8ECF0`	Map ב-z-index 0, Header ב-300, Sheet ב-700
Settings	Header (fixed) + Scroll content	`#F5F7FA`	Gap 20px בין כרטיסים

מבנה Phone Frame

/* Phone Frame - Desktop Preview */
.phone-frame {
  width: 390px; height: 844px; /* iPhone 14 Pro dimensions */
  border-radius: 50px;
  display: flex; flex-direction: column;
}

/* Dynamic Island */
.phone-frame::before {
  width: 100px; height: 26px;
  border-radius: 14px;
  top: 8px; z-index: 10000;
}

/* Mobile override - fullscreen */
@media (max-width: 430px) {
  width: 100vw; height: 100dvh;
  border-radius: 0;
}

Z-Index Stack

Z-Index	רכיב
`10000`	Dynamic Island (phone-frame::before)
`700`	Bottom Sheet
`600`	Overlay
`500`	FAB
`300`	Map Header
`200`	Status Bar
`0`	Map (Leaflet)

ספריות חיצוניות

ספריה	גרסה	שימוש
Heebo	Google Fonts	פונט ראשי (עברית)
Font Awesome	6.5.0	אייקונים (fas prefix)
Leaflet	1.9.4	מפה אינטראקטיבית

אייקוני Font Awesome בשימוש

fa-bus

exclamation-circle

fa-route

map-marker

location-arrow

diamond-turn

sync-alt

fa-cog

fa-bell

sign-in

sign-out

fingerprint

id-badge

fa-lock

arrow-right

fa-times

circle-notch

fa-signal

fa-wifi

battery

fa-info

fa-server

fa-database

פקח-נייד Design System

צבעים

צבעי מותג - Navy

צבעי רמזור - סמנטיים

צבעים ניטרליים - UI

גרדיאנטים

טיפוגרפיה

ריווח וגודל

צללים ורדיוס

צללים

רדיוס פינות

כפתורים

שדות קלט

כרטיסים

תגיות וצ'יפים

ניווט

רשימות

מתגים

Bottom Sheet

סימנים במפה

מערכת רמזור (Traffic Light)

RTL - ימין לשמאל

מבנה עמוד