בקשה | סיוע בפורייקט html ב-AI
-
בביצוע
אם זה יותר יעיל אני אצרף כאן פורמט שהAI ניסח שאולי הוא יותר טוב
[הגדרת תפקיד]
פעל כמפתח 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 מסוים בקלוד, אך מכיון שיש בו המון הוראות, במסלול החינמי שלי אין אפשרות ליצור את זה, אם מישהו יש לי קלוד במסלול לא חינמי ויכול לעשות את זה אצלו (ההוראות מוכנות, צריך רק לתת את זה לקלוד ולהביא לי את מה שהוא יוצר) אשמח שיכתוב כאן ואצור איתו קשר, תודה מראש
-
האמת כבר שלחתי לקלוד אבל @צול-גאה הצדיק הקדים אותי...
יש"כ גדול.@Bugs-Bunny תעלה את מה שהוא יצר אדרבה אולי משהו יותר טוב
{עשית עם פייבל ?
אני עם אופוס} -
@Bugs-Bunny תעלה את מה שהוא יצר אדרבה אולי משהו יותר טוב
{עשית עם פייבל ?
אני עם אופוס} -
-
@Bugs-Bunny תעלה את מה שהוא יצר אדרבה אולי משהו יותר טוב
{עשית עם פייבל ?
אני עם אופוס} -
-
-
-
@ישיבישער
מה יש להסביר?
זה קישור לאתר שיש בו את זה מוכן
או אם תרצה להוריד תוריד מגיטהאב ותריץ מקומיתחשבתי אולי כדאי שהנתונים יישמרו בקוקיז ולא רק ביצוא ויבוא ?
או שזה כבר ככה?
עברתי רק מלמעלה -
-
@ישיבישער
אתה יכול להשתמש ככה
אף אחד לא רואה השינויים
הם רק אצלך
{תקפיד לייצא לפני שאתה סוגר שלא ילך לאיבוד}
אפשר גם להוריד לעבודה אופליין
וכל לראות את הקובץ בקישור לגיטהאב
שינויים פשוט תוריד ותערוך אצלך {אתה מתכוון לערוך עם גמיני? GPT ?} -
@ישיבישער
אתה יכול להשתמש ככה
אף אחד לא רואה השינויים
הם רק אצלך
{תקפיד לייצא לפני שאתה סוגר שלא ילך לאיבוד}
אפשר גם להוריד לעבודה אופליין
וכל לראות את הקובץ בקישור לגיטהאב
שינויים פשוט תוריד ותערוך אצלך {אתה מתכוון לערוך עם גמיני? GPT ?} -
-
-
@צול-גאה בבית אני משתמש בנטפרי, משום מה קלוד לא כ"כ טיפש לציית להם.
אז הם פועלים לפי רשימת מילים שחורה ומעצבנת ואם הוא מגיב באחת מהמילים האלה
הם גורמים לדף להחזיר 404 וזה מאוד מעצבן...@Bugs-Bunny
מה זה קשור עכשיו? -
שלום! נראה שהשיחה הזו מעניינת אותך, אבל עדיין אין לך חשבון.
נמאס לכם לגלול בין אותם הפוסטים בכל ביקור? כשנרשמים לחשבון, תמיד תחזרו בדיוק למקום שבו הייתם קודם, ותוכלו לבחור לקבל התראות על תגובות חדשות (בין אם במייל, ובין אם בהתראת פוש). תוכלו גם לשמור סימניות ולפרגן ב-upvote לפוסטים כדי להביע הערכה לחברי קהילה אחרים.
בעזרת התרומה שלך, הפוסט הזה יכול להיות אפילו טוב יותר 💗
הרשמה התחברות { const baseUrl = "https://www.google.co.il/search?q=site:mitmachim.top"; const m = location.pathname.match(/^\/(topic|category)\/(\d+)/); const type = m ? m[1] : null; const id = m ? m[2] : null; let searchInput; function search(path = "") { const query = searchInput.value.trim(); if (query) { window.open(`${baseUrl}${path}%20${encodeURIComponent(query)}`, "_blank"); } } let buttons = {}; buttons.searchAll = { id: "bb-search-all", label: `חיפוש ${type ? "בכל הפורום" : ""}`, className: type ? "btn-secondary" : "btn-primary", callback: () => search(), }; if (type === "topic") { buttons.searchTopic = { label: "חיפוש בנושא זה", className: "btn-primary", callback: () => search(`/topic/${id}`), }; } else if (type === "category") { buttons.searchCategory = { label: "חיפוש בקטגוריה זו", className: "btn-primary", callback: () => search(`/category/${id}`), }; } buttons.cancel = { label: "ביטול", className: "btn-default", "data-bs-dismiss": "modal" }; const dialog = bootbox.dialog({ title: '<div style="text-align:center;"><img src="/assets/uploads/files/1625950269825-mt-google.png" width="400" alt="חיפוש בגוגל"></div>', message: '<input id="bb-inp" class="bootbox-input bootbox-input-text form-control" placeholder="הקלידו כדי לחפש בגוגל" autocomplete="off"/>', buttons, backdrop: true, show: true, onEscape: true }); dialog.on("shown.bs.modal", function () { searchInput = document.getElementById("bb-inp"); if (searchInput) { searchInput.focus(); searchInput.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); const query = this.value.trim(); if (query) { search(); dialog.modal("hide"); } } else if (e.key === "Escape") { e.preventDefault(); dialog.modal("hide"); } }); } const searchAllButton = document.getElementById("bb-search-all"); if (searchAllButton) { searchAllButton.title = "לחצו על אנטר כדי לחפש"; } }); })(); void 0;){kind=link}