[הגדרת תפקיד]
פעל כמפתח Front-End בכיר (Senior Front-End Developer) המתמחה בבניית מערכות ניהול וממשקים אינטראקטיביים (SaaS / Web Apps). עליך ליצור קובץ HTML אחד בלבד, מלא ועובד, הכולל CSS ו-JavaScript.

[תיאור המשימה]
צור מערכת אינטראקטיבית לניהול ושיבוץ מקומות ישיבה עבור מבנה המחולק לבית מדרש ועזרת נשים, כולל חלונות עריכת פרטים, שינוי מצבי תשלום/סטטוס, ויצוא נתונים מותאם ל-PDF (מפה ויזואלית) ול-Excel.

[דרישות חובה - Architecture & Output Standards]

קוד מלא בלבד: ספק את הקוד המלא מתחילתו ועד סופו (מ- ועד ) ללא שום חלקים חסרים, ללא הערות מקצרות וללא קטעי קוד חלקיים.

תמיכה מלאה בעברית ו-RTL:

lang="he", dir="rtl".

charset="UTF-8".

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

נגישות וסטנדרטים: שימוש באלמנטים סמנטיים, מזהי ID ברורים למבנה הנתונים.

[מבנה הנתונים והממשק הויזואלי (Layout & Seating Plan)]

חלוקת המרחב:

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

מיקום השולחנות במרכז: מימין ומשמאל שולחנות של 4 מקומות (מסופררים 1, 2, 3, 4). במרכז שני טורים של סטנדרים עם 2 מקומות בכל סטנדר (מסופררים 1, 2). המספור נעשה לפי שורות (שורה א', שורה ב', שורה ג' וכו').

האזור הצדדי (עזרת נשים): ממוקם בצד שמאל לכל אורך המבנה, מופרד בקו גבול ויזואלי ברור. מתוכנן לאורך וכולל 11 שולחנות, שבכל אחד 3 מקומות (מסופררים 1, 2, 3). המספור נעשה לפי שולחנות (שולחן א', שולחן ב' וכו').

תצוגת המקום על גבי המפה:

כל מקום מציג על גבי המפה רק את השם הפרטי ושם המשפחה (אם שובץ).

צבע המקום: ירוק אם שולם, אדום אם תפוס אך לא שולם, וצבע ניטרלי/אפור אם פנוי.

[אינטראקטיביות וחלון ניהול (Modal Dialog)]
בלחיצה על כל מקום יפתח חלון קופץ (Modal) לעריכת הפרטים:

שורה 1: תואר לפני (ברירת מחדל: "ה"ה").

שורה 2: שם פרטי.

שורה 3: שם משפחה.

שורה 4: תואר אחרי (ברירת מחדל: "הי"ו").

שורה 5: טלפון.

שורה 6: הערות.

כפתורי פעולה בתוך החלון:

"שמירה": שמירת הפרטים ועדכון המפה.

"שולם": סימון המקום כמשולם והפיכתו לירוק.

"פינוי מקום": מחיקת הנתונים והפיכת המקום לפנוי.

"ביטול": סגירת החלון ללא שינוי.

[מנגנון יצוא נתונים (Export Features)]

בחירת אירוע / מועד (Dropdown):

אפשרות בחירה בין: "ראש השנה" לבין "יום הכיפורים".

הכותרת הדינמית ביצוא: "שיבוץ מקומות [האירוע הנבחר] בית מדרש תפארת יהודה".

יצוא מפה (PDF / Print):

אפשרות ליצוא נפרד של מפת בית המדרש ומפת עזרת הנשים.

המפה ביצוא תהיה בפריסה לרוחב (Landscape) ותשמור על המבנה המדויק של האולם.

עיצוב ויזואלי דינמי לפי המועד שנבחר:

עבור ראש השנה: גווני חום, שמנת וזהב.

עבור יום הכיפורים: גווני זהב מלכותי ולבן.

יצוא לטבלה (Excel / CSV):

אפשרות ליצוא נפרד לבית המדרש ולעזרת הנשים.

הטבלה תכלול עמודות מופרדות:

עמודה 1: שורה / שולחן.

עמודה 2: מספר מקום.

עמודה 3: שם מלא כולל תארים (לדוגמה: "ה"ה אברהם כהן הי"ו").

הטבלה תכלול כותרת מתאימה לפי המועד שנבחר (ראש השנה / יום הכיפורים).

[עיצוב וסטיילינג (CSS)]

כלול את ה-CSS בתוך תגית <style> ב-HEAD.

השתמש ב-CSS Variables עבור ניהול פלטות הצבעים (מצב עבודה רגיל, מצב יצוא ראש השנה, ומצב יצוא יום כיפור).

העיצוב יכלול התאמות להדפסה (@media print) כדי להבטיח שהיצוא הוויזואלי מופק באופן מושלם לרוחב הדף.

[בדיקת איכות לפני פלט]

ודא שכל הלוגיקה של ה-DOM וה-Modal עובדת באופן מלא ב-Vanilla JS (ללא ספריות חיצוניות חסרות).

ודא שהקוד כולל את כל המבנה הנדרש ומודפס עד הסוף.

קובץ html על פי ההוראות הבאות: קובץ סידור מקומות לבית מדרש לימים נוראים

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

א. הבית מדרש מחולק לשניים, בית מדרש ועזרת נשים

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

בצד שמאל של הבית מדרש - לכל אורך הבית מדרש יש עזרה נשים, תעשה קו מפריד בין הבית מדרש לבין העזרת נשים, וביצוא שיהיה אפשרות של יצוא נפרד לבית מדרש ולעזרת נשים, שיהיה אפשרות לייצא שני מפות נפרדות, כאמור העזרת נשים היא לאורך ולא לרוחב יש בה 11 שולחנות בכל שולחן 3 מקומות, (זה בנתיים, בהמשך אביא פרטים יותר מדוייקים)

המקומות לא יהיו מסודרים לפי מיספור אלא לפי מיקום, דהיינו שורה א שורה ב שורה ג שורה ד במקומות שיש ארבע מקומות תכתוב 1 2 3 4 ובמקום שיש שנים תכתוב 1 2 ובמקום שיש שלש תכתוב 1 2 3 בעזרת נשים המספור הוא לפי שולחנות מלעמלה ללמטה, דהיינו שולחן א שולחן ב וכו

בתוכנה יהיה על כל מקום חלון נפתח , שבה נוכל למלאות את הפרטים של האברך, שורה 1 תואר לפני שורה 2 שם פרטי שורה 3 שם משפחה שורה 4 תואר אחרי, תואר לפני ותואר אחרי בבררית מחדל יהיו תואר לפני: ה"ה תואר אחרי: הי"ו , שורה 5 טלפון שורה 6 הערות, ועוד שלש כפתורים: שולם . פינוי מקום. שמירה. ביטול, אם שולם המקום יצבע בירוק ואם לא המקום יהיה צבוע באדום, בתוכנה יהיה מוצג רק השם פרטי והמשפחה על המקום שהוא תפס, וביצוא יהיה מסודר עם התארים שקבענו, חשוב שהיצוא לפידיאף יהיה לרוחב עם הצורה המדוייקת של הבית מדרש כלומר מפה שכל אחד יוכל לראות את המקום שלו, תעשה שיהיה יצוא לא שחור לבן אלא צבעוני בגווני חום שמנת זהב, עם הכותרת שיבוץ מקומות ראש השנה בית מדרש תפארת יהודה, או כותרת שיבוץ מקומות יום הכיפורים בית מדרש תפארת יהודה, ביצוא יהיה אפשרות לבחור האם זה עבור ראש השנה או יום כיפור, ליום כיפור נעשה גוונים אחרים ביצוא - גווני זהב מלכותי עם לבן, בנוסף ליצוא פי די אף יהיה אפשרות של יצוא לטבלת אקסל שיהיה כתוב שורה ומספר מקום ושם פרטים ומשפחה כולל תואר לפני ואחרי , לדוגמא: שורה א מקום 1 ה"ה אברהם כהן הי"ו וכו' שורה בריבוע אחד מקום בריבוע שני שם משפחה ותארים בריבוע שלישי, שיהיה אפשרות ליצוא טבלה נפרדת לבית מדרש וטבלה נפרדת לנשים עם הפרטים שלהם, וכן אפשרות לייצוא טבלה עם כותרת לראש השנה ויצוא של טבלה עם כותרת ליום הכיפורים