הורדת HTML עצמאי: כל הטוקנים, הרכיבים ומועד העדכון כל טוקני CSS כל האייקונים

כללים משותפים. ממשק עקבי.

ספריית העיצוב

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

כל האייקונים במוצר

66 אייקונים מתוך רישום ה-SVG של הדשבורד. אלו אותם סמלים ואותם סגנונות תצוגה של המוצר, כולל סמלי Meta ו-WhatsApp.

i-send

i-boxes

i-globe

i-plus

i-pencil

i-star

i-trash-2

i-search

i-check-check

i-x

i-chevron-down

i-triangle-alert

i-circle-check

i-circle-alert

i-circle-help

i-circle-minus

i-sparkles

i-info

i-loader

i-save

i-external-link

i-circle-user

i-more-vertical

i-link

i-map-pin

i-map

i-network

i-tag

i-maximize

i-minimize

i-eye

i-copy

i-menu

i-list

i-refresh-cw

i-chart-bar

i-target

i-meta-official

i-activity

i-table

i-cloud

i-history

i-chart-pie

i-play

i-check

i-file-text

i-lock

i-arrow-up

i-arrow-down

i-settings

i-users

i-user-plus

i-package

i-briefcase

i-folder

i-folder-plus

i-archive

i-download

i-calendar

i-flag

i-message-square

i-whatsapp

i-mail

i-arrow-right

i-multimodal

i-ai-bot

טוקני CSS משותפים

הרשימה נבנית אוטומטית מ-:root בקובץ המשותף studio.css ומציגה לכל טוקן את הערך המקורי ואת הערך המחושב.

צבעי מותג

טוקן	ערך	ערך מחושב
`--brand-red`	`#aa0000`	`#aa0000`
`--brand-gray`	`#5e5e5e`	`#5e5e5e`
`--brand-gray-light`	`#b8b8b8`	`#b8b8b8`

צבעים סמנטיים

טוקן	ערך	ערך מחושב
`--surface`	`#ffffff`	`#ffffff`
`--surface-subtle`	`#f6f7f6`	`#f6f7f6`
`--surface-selected`	`#f8eaea`	`#f8eaea`
`--ink`	`#343834`	`#343834`
`--ink-muted`	`#5e5e5e`	`#5e5e5e`
`--line`	`#e5e8e5`	`#e5e8e5`
`--line-control`	`#b8b8b8`	`#b8b8b8`
`--action`	`var(--brand-red)`	`#aa0000`
`--action-hover`	`#f2dada`	`#f2dada`
`--success`	`#276538`	`#276538`
`--warning`	`#795400`	`#795400`
`--danger`	`#aa0000`	`#aa0000`
`--wa-canvas`	`#efeae2`	`#efeae2`
`--wa-incoming`	`#ffffff`	`#ffffff`
`--wa-outgoing`	`#d9fdd3`	`#d9fdd3`
`--wa-system`	`#fff8c4`	`#fff8c4`
`--wa-date`	`#e1f3fb`	`#e1f3fb`
`--wa-read`	`#087da4`	`#087da4`
`--wa-meta`	`#687980`	`#687980`

טיפוגרפיה

טוקן	ערך	ערך מחושב	דוגמה
`--font-ui`	`Assistant,Arial,sans-serif`	`Assistant,Arial,sans-serif`	מוצג ברכיבים
`--weight-regular`	`400`	`400`	מוצג ברכיבים
`--weight-medium`	`500`	`500`	מוצג ברכיבים
`--weight-strong`	`600`	`600`	מוצג ברכיבים
`--weight-bold`	`700`	`700`	מוצג ברכיבים

ריווח

טוקן	ערך	ערך מחושב
`--space-1`	`4px`	`4px`
`--space-2`	`8px`	`8px`
`--space-3`	`12px`	`12px`
`--space-4`	`16px`	`16px`
`--space-5`	`24px`	`24px`
`--space-6`	`32px`	`32px`
`--space-7`	`48px`	`48px`
`--space-8`	`64px`	`64px`

פינות מעוגלות

טוקן	ערך	ערך מחושב	דוגמה
`--radius-control`	`4px`	`4px`
`--radius-panel`	`8px`	`8px`

צללים

טוקן	ערך	ערך מחושב	דוגמה
`--shadow-dialog`	`0 16px 48px #22222226`	`0 16px 48px #22222226`	מוצג ברכיבים

גדלים

טוקן	ערך	ערך מחושב
`--control-height`	`32px`	`32px`
`--touch-target`	`44px`	`44px`
`--header-height`	`56px`	`56px`
`--header-height-phone`	`52px`	`52px`
`--sidebar-width`	`200px`	`200px`
`--sidebar-width-collapsed`	`60px`	`60px`

תאימות למסכים קיימים

טוקן	ערך	ערך מחושב	דוגמה
`--bg-primary`	`var(--surface)`	`#ffffff`
`--card-bg`	`var(--surface)`	`#ffffff`
`--card-border`	`var(--line)`	`#e5e8e5`
`--text-main`	`var(--ink)`	`#343834`
`--text-muted`	`var(--ink-muted)`	`#5e5e5e`
`--accent-red`	`var(--action)`	`#aa0000`
`--accent-red-hover`	`var(--action-hover)`	`#f2dada`
`--accent-green`	`var(--success)`	`#276538`
`--accent-teal`	`var(--brand-gray)`	`#5e5e5e`
`--font-hebrew`	`var(--font-ui)`	`Assistant,Arial,sans-serif`	מוצג ברכיבים
`--font-headers`	`var(--font-ui)`	`Assistant,Arial,sans-serif`	מוצג ברכיבים
`--font-english`	`var(--font-ui)`	`Assistant,Arial,sans-serif`	מוצג ברכיבים

מעטפת Studio

אותה כותרת, אותו סרגל ניווט ואותו תפריט טלפון בכל השירותים. הקבצים המשותפים הם /studio/v1/studio.css ו-/studio/v1/studio-shell.js; כל שירות טוען אחריהם רק את הסגנונות שלו. הדוגמה אינה מחוברת לשירות.

Authentico^™ Studio

user@example.com

כאן נמצא אזור העבודה של השירות. ב-Email Templates הסרגל מציג: כל התבניות, מועדפים, אשפה וניהול קטגוריות. ב-Maps: מפות, ספריית מקומות, ספריית כרטיסים, סוגי נקודות והגדרות.

כותרת 56px, 52px בטלפוןסרגל 60px במצב מכווץ (ברירת מחדל), 200px במצב פתוחפריסת טלפון עד 700px: הסרגל עובר לתפריט

רכיבי Email Templates

רכיבים ייחודיים לשירות Email Templates, מעבר למעטפת ולרכיבים המשותפים. הסגנונות שלהם שייכים לשירות ונטענים רק בתוכו (מאגר Email Templates, תיקיית dashboard/), ולכן הם מוצגים כאן ברישום בלבד.

רכיב	מזהה	תפקיד ומצבים
רשימת התבניות	`.template-list [data-template]`	שם התבנית, סוג ויעד; התבנית הנבחרת מסומנת בפס אדום. מסננים, חיפוש ויעד מעל הרשימה.
גיליון הקטלוג	`#catalogPanel`	בטלפון ובמסך צר הרשימה נפתחת בחלון; בחירת תצוגה בסרגל או בתפריט פותחת אותו.
פעולות התבנית	`.page-actions .editor-action`	תצוגה מקדימה, עריכה (פעולה ראשית), העתקה ופעולות נוספות; ברוחב צר הפעולות המשניות עוברות לתפריט "עוד".
בורר רוחב התצוגה	`.modes`	מחשב, נייד והשוואה; בטלפון אינו מוצג כי התצוגה ממילא ברוחב הטלפון.
עורך המייל	`#templateEditor`	סרגל עיצוב, שורות נמענים בסגנון Gmail (אל, עותק, עותק מוסתר) בכיוון LTR, שמירה ויצירת טיוטה ב-Gmail בלבד - ללא שליחה.
ניהול קטגוריות	`#libraryManager`	חלון עם כפתור הסגירה המשותף; העברה, הוספה ושינוי שם של קטגוריות.
אישור פעולה	`StudioShell.confirm`	לדוגמה ביטול שינויים שלא נשמרו בעורך; אותו חלון אישור כמו ב-AI Consultant.

רכיבי Maps

רכיבים ייחודיים לשירות Maps, מעבר למעטפת ולרכיבים המשותפים. הסגנונות שלהם שייכים לשירות ונטענים רק בתוכו (מאגר authentico-maps, קובץ firebase/functions/static/maps.css), ולכן הם מוצגים כאן ברישום בלבד.

רכיב	מזהה	תפקיד ומצבים
רשימת המפות	`.maps-list`	שם, יעדים, סוג, נקודות, מצב ותאריך; פתיחה בעברית ובאנגלית; פעולות מקובצות (עריכה, שכפול, פרסום או הסתרה) והמחיקה בסוף השורה ובנפרד. בטלפון כל שורה הופכת לכרטיס.
סינון דינמי	`.maps-filters .maps-facets`	חיפוש ורשימות שחלות מיד; כל רשימה מציגה רק ערכים שמתאימים לסינון האחר, עם מספר; רשימה ריקה אינה מוצגת; "ניקוי הסינון" כשיש סינון.
לשוניות עורך המפה	`.maps-tabs`	פרטים, ימים וכרטיסים, לינות, שפות, פרסום וקישורים; כל לשונית עם כתובת משלה.
ימים וכרטיסים	`.maps-days .maps-card-row`	גרירה בתוך היום או ליום אחר, חצים ורשימת ימים; כרטיס לינה נשאר ביומו; "הועבר מיום N"; במפות לקוח תאריך לכל יום והמשך תאריכים מיום 1.
סרגל שמירה	`.maps-save-bar`	"שמירה" כפעולה הראשית היחידה במסך, צמוד לתחתית; הודעת מצב באותה שורה.
אזור מחיקה	`.maps-danger-zone`	פעולה הרסנית בסוף המסך ובנפרד, עם הסבר מה יימחק; חסומה כשמקום משמש ללינה.
סמל סוג נקודה	`.maps-glyph, .maps-glyph-plain`	הסמל מהקטלוג כמסכה (לא כקוד), בצבע משפחת הצבעים של הקטגוריה; מלא בעיגול או סמל בלבד.
טבלאות הספריות	`.maps-places, .maps-cards-table`	ספריית מקומות וספריית כרטיסים; בטלפון כל שורה הופכת לכרטיס עם תוויות; שורה מסומנת כשמגיעים מקישור.
עמודים	`.maps-list-footer .maps-pager`	טווח השורות, מספרי עמודים ובחירת מספר השורות בעמוד.
תצוגת מפה	`.maps-place-map`	מפת Google עם סמן ועיגול מקווקו לאזור; תצוגת מפה של הספרייה עם קיבוץ; כשאין מפה מוצגת הודעה והקישור ל-Google Maps.
קבוצות סוגי נקודות	`.maps-type-group, .maps-glyph-card`	סוגים לפי קטגוריה, קבוצה אחת פתוחה; כרטיסי סמלים בשלושה גדלים ובסמן מלא.
שורות שפה	`.maps-languages .maps-language-row`	סדר השפות בחצים, זמינות (במעבר השפות או בקישור ישיר בלבד), שפת פתיחה ותצוגה מקדימה של הסדר.
הודעת קריאה בלבד	`.maps-note`	עד שלב 6: השמירה והפעולות מושבתות ומוסברות בשורה אחת.

מותג וטיפוגרפיה

סמל Authentico

public/logo.png הוא נכס הלוגו שמוצג במוצר ובספרייה.

אדום ראשי
#AA0000

טקסט משני
#5E5E5E

אפור בהיר
#B8B8B8

Assistant

מילים ברורות. מקום לחשוב.
A clear place to work.

משקלים: 400 טקסט, 500 כפתורים וכותרות מסך, 600 כותרות סעיף וחלון וכפתור ראשי, 700 הדגשות. הגופן מתארח באתר Studio (רישיון SIL Open Font License) ומשמש את כל השירותים.

32px גובה כפתור; 44px לכפתור הסגירה ולפקדי מגע ייעודיים בטלפון4px רדיוס שדה ופקד8px רדיוס משטח

כותרות עמוד וחיפוש

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

בכל שדה RTL אייקון החיפוש נמצא בתחילת השורה, מימין לטקסט.

פעולות ושדות

היררכיית פעולות

לחצו לבדיקת מצב המיקוד. לא תתבצע פעולה בשרת.

בחירה יחידה

אותו רכיב לבחירת תקופה, סינון ומקור. האפשרות הנבחרת מסומנת כפעולה ראשית.

לשוניות בתוך עמוד

במקום עמוד ארוך: כל חלק בלשונית משלו. אותו רכיב בניהול WhatsApp, בעלויות ובעוזר AI.

אייקון כשיש צורך

קו אחיד, ללא קישוטים.

דוחות: תקופה ועלויות

סרגל תקופה

נתונים לתקופה: ⁦17.9.2026 - 16.10.2026⁩

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

טבלת עלויות

מודל / סוג חיוב	עלות
Google Gemini	$24.78
gemini-3.8-flash	$24.78
קלט · טקסט	$13.30
לא מסווגExample unknown billing line	$0.12
קלט · אודיו	$0.00

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

מצב המידע נשאר ברור

לא נבדקטועןהבדיקה הושלמהדורש בדיקההטעינה נכשלה

אין פריטים להצגה

מצב ריק מופיע רק לאחר שהטעינה הסתיימה בהצלחה.

לא ניתן לטעון את המידע

שגיאת חיבור אינה אפס ואינה תוצאה תקינה.

שיחה, טבלה וחלון פעולה

דוגמת טיפוגרפיה לשיחה בלבד

טקסט הודעה לדוגמה

תשובה קריאה, עם רווחים וקצב שורות נוח.

Model ID: example-model-id

חלון נגיש

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

מבנה טבלה לדוגמה
רכיב	שימוש
כפתור	פעולה ברורה
תג מצב	טקסט וצבע

כרטיסי פעולות

כל הפעולות משתמשות באותו רכיב ייצור. הכותרת, השדות והסטטוס משתנים לפי היעד. לחצו על שורת הפרטים כדי לפתוח ולסגור. אלו נתוני דוגמה בלבד ולא מתבצעת פעולה בשרת.

CRM

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

Google Chat

מסירת הודעות

דוגמת רכיב בלבד. אין כאן הודעות אמיתיות או סטטוסים שנקראו מ-Meta.

פתח דוגמת סטטוסים

התקבל ב-Meta: הבקשה התקבלה, המסירה עדיין לא אושרה.

נמסר / נקרא: מוצגים רק לאחר קבלת אירוע מתאים מ-Meta.

נכשל / לא זמין: כשל מסירה וכשל בטעינת מידע הם מצבים שונים.

ביטול שליחה

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

הקלטות קוליות

מצבי רכיב בלבד, ללא הקלטות לקוחות וללא בקשות לשרת. במוצר ההקלטה נטענת רק לאחר לחיצה.

דוגמת נגן ללא קובץ שמע.

אין להציג שגיאה כאישור שההקלטה נשמרה בענן.