דילוג לתוכן
  • חוקי הפורום
  • פופולרי
  • לא נפתר
  • משתמשים
  • חיפוש גוגל בפורום
  • צור קשר
עיצובים
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor
  • ברירת מחדל (ללא עיצוב (ברירת מחדל))
  • ללא עיצוב (ברירת מחדל)
כיווץ
מתמחים טופ
  1. דף הבית
  2. קטגוריות בהרצה
  3. תכנות
  4. בינה מלאכותית - AI
  5. עזרה הדדית - בינה מלאכותית
  6. שיתוף | גרפי התרמה בקובץ HTML

שיתוף | גרפי התרמה בקובץ HTML

מתוזמן נעוץ נעול הועבר עזרה הדדית - בינה מלאכותית
16 פוסטים 9 כותבים 430 צפיות 12 עוקבים
  • מהישן לחדש
  • מהחדש לישן
  • הכי הרבה הצבעות
תגובה
  • תגובה כנושא
התחברו כדי לפרסם תגובה
נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
  • א א.מ.

    גרפים להתקדמות בגיוס כספים בקובץ HTML

    בס"ד

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

    1. 3 גרפים של 3 ימי גיוס כספים שבכל אחד מהם גרף של הסכום שנאסף מול סכום היעד עם סרגל התקדמות.
    2. גרף רביעי המכיל סכום יעד כולל וסכום שקלול של כל שלושת הגרפים האחרים.
    3. כל ארבעת הגרפים מסודרים במרכז המסך ומצגים באופן מסודר 2 למעלה ו2 למטה בגודל אחיד.
    4. כל גרף סכום משנה את צבעו בהתאמה לגרף סכום היעד שלידו, בין 0% עד 30% צבע אדום, בין 31% ל70% צבע כתום, בין 71% ל100% צבע ירוק, מעל 101% צבע צהוב זורח.
    5. לגרף הסיכום הכולל יש טקסט מתחתיו שמותאם ביחס ליעד הכולל, בין 0% עד 30% לא לחלום, חסר עדיין המון כסף!, בין 31% ל70% מתקדמים יפה, אבל צריך להתאמץ יותר!, בין 71% ל100% המשיכו כך, אתם ממש קרובים ליעד!, מעל 101% אין עליכם, עבדתם מעל למצופה!
    6. לכל גרף יש 3 לחצנים, 1 שינוי כותרת הגרף, 2 שינוי סכום הגרף, 3 שינוי סכום היעד בגרף.
    7. כותרת כללית לעמוד בפונט מודגש עם הצללה ועם לחצן לשינוי טקסט הכותרת ולחצן לשינוי צבע וסלידר לשינוי גודל הטקסט של הכותרת.
    8. לחצן להעלאת תמונת הרקע לעמוד מהמחשב שממורכזת למרכז המסך ומותאמת למילוי המסך.
    9. לחצן הדפסה של העמוד ללא כל הלחצנים שבעמוד אבל עם תמונת הרקע.
    10. לחצן מעבר למסך מלא שמסתיר את כל הלחצנים בעמוד.

    ואלו התוצאות:

    GPT 4o:

    dc0c70c4-c5fa-4d91-8e66-27c919f21135-image.png

    <!DOCTYPE html>
<html lang="he">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>מגבית ת"ת תשפ"ה</title>
  <style>
    html, body {
      height: 100%;
    }
    /* כיוון טקסט RTL, טקסט מיושר למרכז */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      direction: rtl;
      text-align: center;
    }
    /* container בגובה מלא וברוחב 75% מהמסך */
    .container {
      width: 75vw;
      margin: 0 auto;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }
    /* במצב מסך מלא – הגדלת המרווח בין הגרפים */
    .fullscreen-mode .chart-grid {
      gap: 50px;
    }
    /* במצב הדפסה – הגדלת המרווח בין הגרפים */
    @media print {
      .chart-grid {
        gap: 50px;
      }
      .no-print {
        display: none !important;
      }
      body {
        -webkit-print-color-adjust: exact;
      }
    }
    /* כותרת ראשית */
    .main-title {
      font-family: Arial, sans-serif;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
      margin-bottom: 20px;
      transition: font-size 0.3s;
    }
    /* כפתורים */
    .button {
      margin: 5px;
      padding: 8px 12px;
      border: none;
      border-radius: 4px;
      background-color: #007BFF;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s;
      text-decoration: none;
      display: inline-block;
    }
    .button:hover {
      background-color: #0056b3;
    }
    /* עיצוב לחצן בחירת תמונת רקע */
    #bgUpload {
      display: none;
    }
    label[for="bgUpload"] {
      cursor: pointer;
      margin: 5px;
      padding: 8px 12px;
      border-radius: 4px;
      background-color: #28a745;
      color: white;
      display: inline-block;
      transition: background-color 0.3s;
    }
    label[for="bgUpload"]:hover {
      background-color: #218838;
    }
    /* עיצוב בחירת גופן מתוך רשימת ברירת המחדל */
    .font-selection {
      display: inline-flex;
      align-items: center;
      margin: 5px 10px;
    }
    #fontSelect {
      padding: 6px;
      border-radius: 4px;
      margin-left: 5px;
    }
    /* הגדרת גריד להצגת הגרפים */
    .chart-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      width: 100%;
      justify-items: center;
    }
    /* עיצוב הגרף */
    .chart {
      background: rgba(255,255,255,0.6); /* שקיפות 60% */
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      width: 100%;
      /* הגרף יתפרס על 100% מתא הבית (כלומר, תופס את רוחב תא הגריד) */
    }
    .progress-bar-container {
      width: 100%;
      height: 30px;
      background-color: #e0e0e0;
      border-radius: 15px;
      overflow: hidden;
      margin: 10px 0;
    }
    .progress-bar {
      height: 100%;
      width: 0%;
      background-color: red;
      border-radius: 15px 0 0 15px;
      transition: width 0.5s, background-color 0.5s;
    }
    .hidden {
      display: none !important;
    }
  </style>
</head>
<body>
  <div class="container" id="container">
    <!-- כותרת ראשית -->
    <h1 class="main-title" id="mainTitle">מגבית ת"ת תשפ"ה</h1>
    <div class="no-print">
      <button class="button" onclick="changeMainTitleText()">שנה טקסט כותרת</button>
      <label for="mainTitleColorPicker" style="margin: 0 10px;">
        בחר צבע לכותרת:
        <input type="color" id="mainTitleColorPicker" oninput="changeMainTitleColor(this.value)" value="#000000">
      </label>
      <label style="margin: 0 10px;">גודל כותרת:
        <input type="range" min="20" max="80" value="32" id="titleSizeSlider" onchange="changeMainTitleSize(this.value)">
      </label>
      <!-- בחירת תמונת רקע -->
      <input type="file" id="bgUpload" accept="image/*" onchange="uploadBackground(event)">
      <label for="bgUpload">בחר תמונת רקע</label>
      <!-- בחירת גופן מתוך רשימת ברירת המחדל -->
      <div class="font-selection">
        <span>בחר גופן לכותרת:</span>
        <select id="fontSelect" onchange="changeFont(this.value)">
          <option value="Arial">Arial</option>
          <option value="Verdana">Verdana</option>
          <option value="Tahoma">Tahoma</option>
          <option value="'Times New Roman'">Times New Roman</option>
          <option value="Georgia">Georgia</option>
          <option value="'Courier New'">Courier New</option>
          <option value="Impact">Impact</option>
          <option value="'Comic Sans MS'">Comic Sans MS</option>
        </select>
      </div>
      <button class="button" onclick="printPage()">הדפס עמוד</button>
      <button class="button" onclick="toggleFullScreen()">מסך מלא</button>
    </div>
    
    <!-- גריד הגרפים -->
    <div class="chart-grid">
      <!-- גרף יום 1 -->
      <div class="chart" id="chart1">
        <h2 id="chart1Title">יום 1</h2>
        <div>נאסף: <span id="chart1Collected">0</span> / יעד: <span id="chart1Target">45000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress1"></div>
        </div>
        <div class="chart-buttons no-print">
          <button class="button" onclick="changeChartTitle(1)">שנה כותרת</button>
          <button class="button" onclick="changeChartCollected(1)">שנה סכום נאסף</button>
          <button class="button" onclick="changeChartTarget(1)">שנה סכום יעד</button>
        </div>
      </div>
      <!-- גרף יום 2 -->
      <div class="chart" id="chart2">
        <h2 id="chart2Title">יום 2</h2>
        <div>נאסף: <span id="chart2Collected">0</span> / יעד: <span id="chart2Target">50000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress2"></div>
        </div>
        <div class="chart-buttons no-print">
          <button class="button" onclick="changeChartTitle(2)">שנה כותרת</button>
          <button class="button" onclick="changeChartCollected(2)">שנה סכום נאסף</button>
          <button class="button" onclick="changeChartTarget(2)">שנה סכום יעד</button>
        </div>
      </div>
      <!-- גרף יום 3 -->
      <div class="chart" id="chart3">
        <h2 id="chart3Title">יום 3</h2>
        <div>נאסף: <span id="chart3Collected">0</span> / יעד: <span id="chart3Target">60000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress3"></div>
        </div>
        <div class="chart-buttons no-print">
          <button class="button" onclick="changeChartTitle(3)">שנה כותרת</button>
          <button class="button" onclick="changeChartCollected(3)">שנה סכום נאסף</button>
          <button class="button" onclick="changeChartTarget(3)">שנה סכום יעד</button>
        </div>
      </div>
      <!-- גרף סיכום כולל -->
      <div class="chart" id="chart4">
        <h2 id="chart4Title">סיכום כולל</h2>
        <div>סה"כ נאסף: <span id="chart4Collected">0</span> / יעד כולל: <span id="chart4Target">155000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress4"></div>
        </div>
        <div id="overallMessage" style="font-weight: bold; margin-top:10px;"></div>
        <div class="no-print" style="margin-top:10px;">
          <button class="button" onclick="changeChartTitle(4)">שנה כותרת הסיכום</button>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    /* משתנים גלובליים לגרפים עם ערכי יעד מעודכנים */
    let charts = {
      1: { title: "יום 1", collected: 0, target: 45000 },
      2: { title: "יום 2", collected: 0, target: 50000 },
      3: { title: "יום 3", collected: 0, target: 60000 }
    };

    function updateProgressBar(chartId, percentage) {
      const progressBar = document.getElementById("progress" + chartId);
      progressBar.style.width = Math.min(percentage, 100) + "%";
      let color = "";
      if (percentage <= 30) { color = "red"; }
      else if (percentage <= 70) { color = "orange"; }
      else if (percentage <= 100) { color = "green"; }
      else { color = "yellow"; }
      progressBar.style.backgroundColor = color;
    }

    function updateChartDisplay(chartId) {
      if (chartId === 4) {
        const totalCollected = charts[1].collected + charts[2].collected + charts[3].collected;
        const totalTarget = charts[1].target + charts[2].target + charts[3].target;
        document.getElementById("chart4Collected").innerText = totalCollected;
        document.getElementById("chart4Target").innerText = totalTarget;
        const percentage = totalTarget ? (totalCollected / totalTarget) * 100 : 0;
        updateProgressBar(4, percentage);
        updateOverallMessage(percentage);
      } else {
        const collected = charts[chartId].collected;
        const target = charts[chartId].target;
        document.getElementById("chart" + chartId + "Collected").innerText = collected;
        document.getElementById("chart" + chartId + "Target").innerText = target;
        const percentage = target ? (collected / target) * 100 : 0;
        updateProgressBar(chartId, percentage);
      }
    }

    function updateOverallMessage(percentage) {
      const messageEl = document.getElementById("overallMessage");
      let message = "";
      if (percentage <= 30) { message = "לא לחלום, חסר עדיין המון כסף!"; }
      else if (percentage <= 70) { message = "מתקדמים יפה, אבל צריך להתאמץ יותר!"; }
      else if (percentage <= 100) { message = "המשיכו כך, אתם ממש קרובים ליעד!"; }
      else { message = "אין עליכם, עבדתם מעל למצופה!"; }
      messageEl.innerText = message;
    }

    function changeChartTitle(chartId) {
      let promptText = chartId === 4 ? "גרף הסיכום" : "גרף " + chartId;
      let newTitle = prompt("הכנס כותרת חדשה ל" + promptText + ":", 
                             chartId === 4 ? document.getElementById("chart4Title").innerText : charts[chartId].title);
      if (newTitle !== null) {
        if (chartId === 4) {
          document.getElementById("chart4Title").innerText = newTitle;
        } else {
          charts[chartId].title = newTitle;
          document.getElementById("chart" + chartId + "Title").innerText = newTitle;
        }
      }
    }

    function changeChartCollected(chartId) {
      let newCollected = prompt("הכנס סכום נאסף חדש לגרף " + chartId + ":", charts[chartId].collected);
      if (newCollected !== null && !isNaN(newCollected)) {
        charts[chartId].collected = parseFloat(newCollected);
        updateChartDisplay(chartId);
        updateChartDisplay(4);
      }
    }

    function changeChartTarget(chartId) {
      let newTarget = prompt("הכנס סכום יעד חדש לגרף " + chartId + ":", charts[chartId].target);
      if (newTarget !== null && !isNaN(newTarget)) {
        charts[chartId].target = parseFloat(newTarget);
        updateChartDisplay(chartId);
        updateChartDisplay(4);
      }
    }

    updateChartDisplay(1);
    updateChartDisplay(2);
    updateChartDisplay(3);
    updateChartDisplay(4);

    function changeMainTitleText() {
      const newText = prompt("הכנס טקסט חדש לכותרת הראשית:", document.getElementById("mainTitle").innerText);
      if (newText !== null) {
        document.getElementById("mainTitle").innerText = newText;
      }
    }

    function changeMainTitleColor(newColor) {
      document.getElementById("mainTitle").style.color = newColor;
    }

    function changeMainTitleSize(value) {
      document.getElementById("mainTitle").style.fontSize = value + "px";
    }

    function uploadBackground(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
          document.body.style.backgroundImage = "url('" + e.target.result + "')";
        }
        reader.readAsDataURL(file);
      }
    }

    function changeFont(fontName) {
      document.getElementById("mainTitle").style.fontFamily = fontName + ", sans-serif";
    }

    function printPage() {
      const noPrintElements = document.querySelectorAll(".no-print");
      noPrintElements.forEach(el => el.classList.add("hidden"));
      window.print();
      noPrintElements.forEach(el => el.classList.remove("hidden"));
    }

    let isFullScreen = false;
    function toggleFullScreen() {
      if (!isFullScreen) {
        openFullscreen();
      } else {
        closeFullscreen();
      }
    }
    function openFullscreen() {
      const elem = document.documentElement;
      if (elem.requestFullscreen) { elem.requestFullscreen(); }
      else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); }
      else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); }
      document.querySelectorAll(".no-print").forEach(el => el.classList.add("hidden"));
      // הוספת מחלקת fullscreen-mode ל-container להגדלת המרווחים (50px) במצב מסך מלא
      document.getElementById("container").classList.add("fullscreen-mode");
      isFullScreen = true;
    }
    function closeFullscreen() {
      if (document.exitFullscreen) { document.exitFullscreen(); }
      else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); }
      else if (document.msExitFullscreen) { document.msExitFullscreen(); }
      document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
      document.getElementById("container").classList.remove("fullscreen-mode");
      isFullScreen = false;
    }
    document.addEventListener('fullscreenchange', () => {
      if (!document.fullscreenElement) {
        document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
        document.getElementById("container").classList.remove("fullscreen-mode");
        isFullScreen = false;
      }
    });
    document.addEventListener('webkitfullscreenchange', () => {
      if (!document.webkitFullscreenElement) {
        document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
        document.getElementById("container").classList.remove("fullscreen-mode");
        isFullScreen = false;
      }
    });
    document.addEventListener('msfullscreenchange', () => {
      if (!document.msFullscreenElement) {
        document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
        document.getElementById("container").classList.remove("fullscreen-mode");
        isFullScreen = false;
      }
    });
  </script>
</body>
</html>

    Grok 3:

    ae5e0adf-cbb9-40aa-8890-4c5d538189ef-image.png

    <!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>מגבית ת"ת תשפ"ה</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            transition: background-image 0.3s;
        }
        .header {
            font-size: 2em;
            font-weight: bold;
            text-shadow: 2px 2px 4px #000;
            margin-bottom: 30px;
            color: #1e3a8a;
        }
        .graph-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            max-width: 800px;
            margin-bottom: 30px;
        }
        .graph {
            width: 350px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            text-align: center;
            transition: transform 0.2s;
        }
        .graph:hover {
            transform: translateY(-2px);
        }
        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
            margin: 15px 0;
        }
        .progress {
            height: 100%;
            transition: width 0.3s, background-color 0.3s;
        }
        .summary-text {
            margin-top: 15px;
            font-weight: bold;
            color: #555;
            font-size: 1.3em;
        }
        .buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
            justify-content: center;
        }
        .graph-buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 15px;
        }
        .button {
            padding: 12px 24px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s, transform 0.2s;
        }
        .button:hover {
            background-color: #45a049;
            transform: scale(1.05);
        }
        .fullscreen-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 12px 24px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s, transform 0.2s;
        }
        .fullscreen-button:hover {
            background-color: #45a049;
            transform: scale(1.05);
        }
        input[type="range"], input[type="color"] {
            width: 120px;
            margin: 5px;
        }
        select {
            padding: 8px;
            border-radius: 8px;
            font-size: 1em;
        }
        @media print {
            .button, .fullscreen-button, .buttons, .graph-buttons, input, select { /* הסתרת כל הלחצנים ופקדים */
                display: none !important;
            }
            .graph, .progress-bar, .progress, .header, .summary-text {
                print-color-adjust: exact;
                -webkit-print-color-adjust: exact;
            }
            body {
                background-image: inherit !important;
                background-size: cover !important;
                background-position: center !important;
                background-repeat: no-repeat !important;
                background-attachment: fixed !important;
                background-color: transparent !important;
                print-background: print; /* תאימות מלאה להדפסת רקע */
            }
        }
        @media (display-mode: fullscreen) {
            .button, .fullscreen-button, .buttons, .graph-buttons, input, select { /* הסתרת פקדים במסך מלא */
                display: none !important;
            }
        }
    </style>
</head>
<body>
    <div class="header" id="header">מגבית ת"ת תשפ"ה</div>
    <div class="graph-container">
        <div class="graph" id="graph1">
            <h3 id="title1">גיוס יום 1</h3>
            <div class="progress-bar">
                <div class="progress" id="progress1" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amount1">0</span> ₪ מתוך <span id="target1">40000</span> ₪</p>
            <div class="graph-buttons">
                <button class="button" onclick="changeTitle(1)">שנה כותרת</button>
                <button class="button" onclick="changeAmount(1)">שנה סכום</button>
                <button class="button" onclick="changeTarget(1)">שנה יעד</button>
            </div>
        </div>
        <div class="graph" id="graph2">
            <h3 id="title2">גיוס יום 2</h3>
            <div class="progress-bar">
                <div class="progress" id="progress2" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amount2">0</span> ₪ מתוך <span id="target2">45000</span> ₪</p>
            <div class="graph-buttons">
                <button class="button" onclick="changeTitle(2)">שנה כותרת</button>
                <button class="button" onclick="changeAmount(2)">שנה סכום</button>
                <button class="button" onclick="changeTarget(2)">שנה יעד</button>
            </div>
        </div>
        <div class="graph" id="graph3">
            <h3 id="title3">גיוס יום 3</h3>
            <div class="progress-bar">
                <div class="progress" id="progress3" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amount3">0</span> ₪ מתוך <span id="target3">50000</span> ₪</p>
            <div class="graph-buttons">
                <button class="button" onclick="changeTitle(3)">שנה כותרת</button>
                <button class="button" onclick="changeAmount(3)">שנה סכום</button>
                <button class="button" onclick="changeTarget(3)">שנה יעד</button>
            </div>
        </div>
        <div class="graph">
            <h3>סיכום כולל</h3>
            <div class="progress-bar">
                <div class="progress" id="progressTotal" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amountTotal">0</span> ₪ מתוך <span id="targetTotal">135000</span> ₪</p>
            <p class="summary-text" id="summaryText"></p>
        </div>
    </div>
    <div class="buttons" id="controlButtons">
        <button class="button" onclick="changeHeader()">שנה כותרת</button>
        <label for="colorPicker">בחר צבע כותרת: </label>
        <input type="color" id="colorPicker" onchange="changeColor(this.value)">
        <label for="fontSizeSlider">גודל כותרת: </label>
        <input type="range" min="1" max="5" step="0.1" value="2" id="fontSizeSlider" oninput="changeFontSize(this.value)">
        <label for="fontSelect">בחר גופן: </label>
        <select id="fontSelect" onchange="changeFont(this.value)">
            <option value="Arial">Arial</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Courier New">Courier New</option>
            <option value="Georgia">Georgia</option>
            <option value="Verdana">Verdana</option>
        </select>
        <button class="button" onclick="uploadBackground()">העלה תמונת רקע</button>
        <button class="button" onclick="printPage()">הדפס עמוד</button>
    </div>
    <button class="button fullscreen-button" id="fullscreenButton" onclick="toggleFullscreen()">מסך מלא</button>

    <script>
        let amounts = [0, 0, 0]; // סכומים שנאספו מתחילים ב-0
        let targets = [40000, 45000, 50000];
        let totalTarget = targets.reduce((a, b) => a + b, 0); // חישוב דינמי של היעד הכולל

        function updateProgress() {
            amounts.forEach((amount, index) => {
                const percentage = (amount / targets[index]) * 100;
                const progress = document.getElementById(`progress${index + 1}`);
                progress.style.width = `${percentage}%`;
                progress.style.backgroundColor = getColor(percentage);
                document.getElementById(`amount${index + 1}`).textContent = Math.round(amount); // הצגת מספרים שלמים ללא עשרוניות
                document.getElementById(`target${index + 1}`).textContent = Math.round(targets[index]); // הצגת מספרים שלמים ליעד
            });

            const totalAmount = amounts.reduce((a, b) => a + b, 0);
            totalTarget = targets.reduce((a, b) => a + b, 0); // עדכון דינמי של היעד הכולל
            const totalPercentage = (totalAmount / totalTarget) * 100;
            const progressTotal = document.getElementById('progressTotal');
            progressTotal.style.width = `${totalPercentage}%`;
            progressTotal.style.backgroundColor = getColor(totalPercentage);
            document.getElementById('amountTotal').textContent = Math.round(totalAmount); // הצגת מספרים שלמים ללא עשרוניות
            document.getElementById('targetTotal').textContent = Math.round(totalTarget); // הצגת היעד הכולל כמספר שלם

            const summaryText = document.getElementById('summaryText');
            if (totalPercentage <= 30) {
                summaryText.textContent = 'לא לחלום, חסר עדיין המון כסף!';
            } else if (totalPercentage <= 70) {
                summaryText.textContent = 'מתקדמים יפה, אבל צריך להתאמץ יותר!';
            } else if (totalPercentage <= 100) {
                summaryText.textContent = 'המשיכו כך, אתם ממש קרובים ליעד!';
            } else {
                summaryText.textContent = 'אין עליכם, עבדתם מעל למצופה!';
            }
        }

        function getColor(percentage) {
            if (percentage <= 30) return 'red';
            if (percentage <= 70) return 'orange';
            if (percentage <= 100) return 'green';
            return 'yellow';
        }

        function changeHeader() {
            const newHeader = prompt('הזן כותרת חדשה:');
            if (newHeader) {
                document.getElementById('header').textContent = newHeader;
            }
        }

        function changeColor(color) {
            document.getElementById('header').style.color = color; // עדכון מיידי של צבע הכותרת בזמן אמת
        }

        function changeFontSize(value) {
            document.getElementById('header').style.fontSize = `${value}em`;
        }

        function changeFont(font) {
            document.getElementById('header').style.fontFamily = font;
        }

        function changeTitle(day) {
            const newTitle = prompt(`הזן כותרת חדשה לגיוס יום ${day}:`);
            if (newTitle) {
                document.getElementById(`title${day}`).textContent = newTitle;
            }
        }

        function changeAmount(day) {
            const newAmount = prompt(`הזן סכום חדש (ב₪, רק מספרים שלמים) לגיוס יום ${day}:`);
            if (newAmount && !isNaN(newAmount) && !newAmount.match(/[^0-9]/)) { // בדיקה שרק מספרים שלמים מותרים
                amounts[day - 1] = Math.round(parseFloat(newAmount)); // עיגול למספר שלם
                updateProgress();
            } else {
                alert('אנא הזן מספר תקין (רק ספרות שלמות, ללא נקודות או תווים אחרים).');
            }
        }

        function changeTarget(day) {
            const newTarget = prompt(`הזן סכום יעד חדש (ב₪, רק מספרים שלמים) לגיוס יום ${day}:`);
            if (newTarget && !isNaN(newTarget) && !newTarget.match(/[^0-9]/)) { // בדיקה שרק מספרים שלמים מותרים
                targets[day - 1] = Math.round(parseFloat(newTarget)); // עיגול למספר שלם
                updateProgress();
            } else {
                alert('אנא הזן מספר תקין (רק ספרות שלמות, ללא נקודות או תווים אחרים).');
            }
        }

        function uploadBackground() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.onchange = function(event) {
                const file = event.target.files[0];
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.body.style.backgroundImage = `url(${e.target.result})`;
                    document.body.style.backgroundSize = 'cover';
                    document.body.style.backgroundPosition = 'center';
                };
                reader.readAsDataURL(file);
            };
            input.click();
        }

        function printPage() {
            const controls = document.querySelectorAll('.button, .fullscreen-button, input, select'); // הסתרת כל הפקדים
            controls.forEach(control => control.style.display = 'none');
            window.print();
            controls.forEach(control => control.style.display = ''); // החזרת הפקדים לאחר ההדפסה
        }

        function toggleFullscreen() {
            const controls = document.querySelectorAll('.button, .fullscreen-button, input, select'); // הסתרת כל הפקדים
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen();
                controls.forEach(control => control.style.display = 'none');
            } else {
                document.exitFullscreen();
                controls.forEach(control => control.style.display = ''); // החזרת הפקדים לאחר יציאה ממסך מלא
            }
        }

        // הקשבה ליציאה ממצב מסך מלא והצגת הפקדים מחדש
        document.addEventListener('fullscreenchange', () => {
            const controls = document.querySelectorAll('.button, .fullscreen-button, input, select');
            if (!document.fullscreenElement) {
                controls.forEach(control => control.style.display = '');
            }
        });

        // עדכון ראשוני של הגרפים
        updateProgress();
    </script>
</body>
</html>

    Copilot:

    011b404f-ee15-49d6-abe5-ebe14b9de4b0-image.png

    <!DOCTYPE html>
<html lang="he">
<head>
    <meta charset="UTF-8">
    <title>מגבית ת"ת תשפ"ה</title>
    <!-- שימוש בפונטים מגוגל -->
    <link href="https://fonts.googleapis.com/css?family=Assistant:400,700&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            background-size: cover;
            background-position: center;
            font-family: 'Assistant', sans-serif;
            direction: rtl;
            background-color: #f0f2f5;
        }
        h1 {
            font-size: 60px;
            font-weight: bold;
            text-shadow: 2px 2px rgba(0,0,0,0.1);
            margin: 20px 0;
            color: #333;
            transition: all 0.3s ease;
            text-align: center;
        }
        .controls {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin: 10px 0;
        }
        .controls label {
            display: flex;
            flex-direction: column; /* מסדר את הטקסט מעל הלחצן */
            align-items: center;
            margin: 10px;
            font-size: 16px;
            color: #333;
        }
        .controls button,
        .controls select,
        .controls input[type="color"],
        .controls input[type="range"] {
            margin-top: 5px;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #17a2b8;
            color: #fff;
            font-size: 16px;
            transition: background-color 0.3s, transform 0.2s;
        }
        .controls button:hover,
        .controls select:hover,
        .controls input[type="color"]:hover,
        .controls input[type="range"]:hover {
            background-color: #138496;
            transform: scale(1.05);
        }
        .graphs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 20px;
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
            box-sizing: border-box;
        }
        .graph {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.2s;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .graph:hover {
            transform: translateY(-5px);
        }
        .graph h2 {
            margin: 0 0 10px 0;
        }
        .progress-container {
            background-color: #e0e0e0;
            border-radius: 5px;
            overflow: hidden;
            height: 30px;
            width: 100%;
            max-width: 300px;
        }
        .progress-bar {
            height: 100%;
            width: 0;
            transition: width 0.5s ease-in-out;
        }
        .amounts {
            font-size: 18px;
            color: #555;
            margin: 10px 0;
        }
        .percentage {
            font-size: 16px;
            font-weight: bold;
            color: #555;
            margin: 10px 0;
        }
        .graph-buttons {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
        .graph-buttons button {
            margin: 5px;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #007BFF;
            color: #fff;
            font-size: 14px;
            transition: background-color 0.3s, transform 0.2s;
        }
        .graph-buttons button:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }
        .message {
            font-size: 18px;
            font-weight: bold;
            color: #555;
            margin-top: 15px;
        }
        .bottom-controls {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin: 20px;
        }
        .bottom-controls button {
            margin-right: 10px;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #6c757d;
            color: #fff;
            font-size: 16px;
            transition: background-color 0.3s, transform 0.2s;
        }
        .bottom-controls button:hover {
            background-color: #5a6268;
            transform: scale(1.05);
        }
        .hidden {
            display: none;
        }
        @media screen and (max-width: 800px) {
            .graphs {
                grid-template-columns: 1fr;
            }
            .bottom-controls {
                justify-content: center;
            }
        }
        /* סגנונות למצב הדפסה ומסך מלא */
        @media print, (display-mode: fullscreen) {
            body {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                /* מאפשר הדפסת צבעים ותמונות רקע */
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
                background-size: cover;
                background-position: center;
            }
            .graphs {
                width: 70%;
                min-height: 70vh;
                margin: auto;
            }
            .bottom-controls {
                display: none;
            }
        }
    </style>
</head>
<body>
    <h1 id="main-title">מגבית ת"ת תשפ"ה</h1>
    <div class="controls">
        <label>
            שנה טקסט כותרת ראשית
            <button onclick="changeTitleText()">שנה טקסט כותרת ראשית</button>
        </label>
        <label>
            בחר צבע לכותרת
            <input type="color" id="title-color-picker" value="#333333">
        </label>
        <label>
            שינוי גודל הכותרת
            <input type="range" min="30" max="100" value="60" onchange="changeTitleSize(this.value)">
        </label>
        <label>
            בחר גופן לכותרת
            <select onchange="changeTitleFont(this.value)">
                <option value="'Assistant', sans-serif">Assistant</option>
                <option value="'Arial', sans-serif">Arial</option>
                <option value="'David', sans-serif">David</option>
                <option value="'Courier New', monospace">Courier New</option>
                <!-- ניתן להוסיף פונטים נוספים -->
            </select>
        </label>
    </div>
    <div class="graphs">
        <!-- גרף יום 1 -->
        <div class="graph" id="graph1">
            <h2 id="title1">יום 1</h2>
            <p class="amounts" id="amounts1"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress1"></div>
            </div>
            <p id="percentage1" class="percentage"></p>
            <div class="graph-buttons">
                <button onclick="changeGraphTitle(1)">שנה כותרת הגרף</button>
                <button onclick="changeGraphAmount(1)">עדכן סכום שנאסף</button>
                <button onclick="changeGraphTarget(1)">ערוך סכום יעד</button>
            </div>
        </div>
        <!-- גרף יום 2 -->
        <div class="graph" id="graph2">
            <h2 id="title2">יום 2</h2>
            <p class="amounts" id="amounts2"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress2"></div>
            </div>
            <p id="percentage2" class="percentage"></p>
            <div class="graph-buttons">
                <button onclick="changeGraphTitle(2)">שנה כותרת הגרף</button>
                <button onclick="changeGraphAmount(2)">עדכן סכום שנאסף</button>
                <button onclick="changeGraphTarget(2)">ערוך סכום יעד</button>
            </div>
        </div>
        <!-- גרף יום 3 -->
        <div class="graph" id="graph3">
            <h2 id="title3">יום 3</h2>
            <p class="amounts" id="amounts3"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress3"></div>
            </div>
            <p id="percentage3" class="percentage"></p>
            <div class="graph-buttons">
                <button onclick="changeGraphTitle(3)">שנה כותרת הגרף</button>
                <button onclick="changeGraphAmount(3)">עדכן סכום שנאסף</button>
                <button onclick="changeGraphTarget(3)">ערוך סכום יעד</button>
            </div>
        </div>
        <!-- גרף סיכום כולל -->
        <div class="graph" id="graph-summary">
            <h2 id="title-summary">סיכום כולל</h2>
            <p class="amounts" id="amounts-summary"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress-summary"></div>
            </div>
            <p id="percentage-summary" class="percentage"></p>
            <p class="message" id="summary-message"></p>
            <!-- לחצן שינוי כותרת הסיכום מתחת לטקסט -->
            <div class="graph-buttons">
                <button onclick="changeSummaryTitle()">שנה כותרת הסיכום</button>
            </div>
        </div>
    </div>
    <div class="bottom-controls">
        <button onclick="toggleFullScreen()">הצג במסך מלא</button>
        <button onclick="uploadBackground()">העלה תמונת רקע</button>
        <button onclick="printPage()">הדפס את העמוד</button>
    </div>
    <script>
        // ערכי ברירת מחדל
        let graphData = [
            { id: 1, title: 'יום 1', amount: 0, target: 40000 },
            { id: 2, title: 'יום 2', amount: 0, target: 45000 },
            { id: 3, title: 'יום 3', amount: 0, target: 50000 },
        ];
        function updateGraphs() {
            let totalAmount = 0;
            let totalTarget = 0;
            graphData.forEach(graph => {
                document.getElementById('title' + graph.id).innerText = graph.title;
                let progress = document.getElementById('progress' + graph.id);
                let percentText = document.getElementById('percentage' + graph.id);
                let amountsText = document.getElementById('amounts' + graph.id);
                let percent = (graph.amount / graph.target) * 100;
                if (percent > 100) percent = 100;
                progress.style.width = percent + '%';
                progress.style.backgroundColor = getColor((graph.amount / graph.target) * 100);
                percentText.innerText = Math.round(percent) + '%';
                amountsText.innerText = `נאסף: ${graph.amount.toLocaleString()} ש"ח | יעד: ${graph.target.toLocaleString()} ש"ח`;
                totalAmount += graph.amount;
                totalTarget += graph.target;
            });
            // עדכון גרף הסיכום
            let totalPercent = (totalAmount / totalTarget) * 100;
            if (totalPercent > 100) totalPercent = 100;
            let progressSummary = document.getElementById('progress-summary');
            let percentSummaryText = document.getElementById('percentage-summary');
            let amountsSummaryText = document.getElementById('amounts-summary');
            progressSummary.style.width = totalPercent + '%';
            progressSummary.style.backgroundColor = getColor((totalAmount / totalTarget) * 100);
            percentSummaryText.innerText = Math.round(totalPercent) + '%';
            amountsSummaryText.innerText = `נאסף: ${totalAmount.toLocaleString()} ש"ח | יעד: ${totalTarget.toLocaleString()} ש"ח`;
            updateSummaryMessage((totalAmount / totalTarget) * 100);
        }
        function getColor(percent) {
            if (percent <= 30) return 'red';
            else if (percent <= 70) return 'orange';
            else if (percent <= 100) return 'green';
            else return '#FFD700'; // זהב
        }
        function updateSummaryMessage(percent) {
            let message = '';
            if (percent <= 30) message = 'לא לחלום, חסר עדיין המון כסף!';
            else if (percent <= 70) message = 'מתקדמים יפה, אבל צריך להתאמץ יותר!';
            else if (percent <= 100) message = 'המשיכו כך, אתם ממש קרובים ליעד!';
            else message = 'אין עליכם, עבדתם מעל למצופה!';
            document.getElementById('summary-message').innerText = message;
        }
        function changeGraphTitle(id) {
            let graph = graphData.find(g => g.id === id);
            let newTitle = prompt('הכנס כותרת חדשה לגרף:', graph.title);
            if (newTitle) {
                graph.title = newTitle;
                updateGraphs();
            }
        }
        function changeGraphAmount(id) {
            let graph = graphData.find(g => g.id === id);
            let newAmount = prompt('הכנס סכום שנאסף בש"ח:', graph.amount);
            if (newAmount !== null && newAmount !== '' && !isNaN(newAmount) && Number.isInteger(+newAmount)) {
                graph.amount = parseInt(newAmount);
                updateGraphs();
            } else {
                alert('אנא הכנס מספר שלם תקין.');
            }
        }
        function changeGraphTarget(id) {
            let graph = graphData.find(g => g.id === id);
            let newTarget = prompt('הכנס סכום יעד בש"ח:', graph.target);
            if (newTarget !== null && newTarget !== '' && !isNaN(newTarget) && Number.isInteger(+newTarget)) {
                graph.target = parseInt(newTarget);
                updateGraphs();
            } else {
                alert('אנא הכנס מספר שלם תקין.');
            }
        }
        function changeTitleText() {
            let newTitle = prompt('הכנס טקסט כותרת ראשית חדש:', document.getElementById('main-title').innerText);
            if (newTitle) {
                document.getElementById('main-title').innerText = newTitle;
            }
        }
        function changeSummaryTitle() {
            let newTitle = prompt('הכנס כותרת חדשה לסיכום:', document.getElementById('title-summary').innerText);
            if (newTitle) {
                document.getElementById('title-summary').innerText = newTitle;
            }
        }
        function changeTitleColor(color) {
            document.getElementById('main-title').style.color = color;
        }
        document.getElementById('title-color-picker').addEventListener('input', function() {
            changeTitleColor(this.value);
        });
        function changeTitleSize(size) {
            document.getElementById('main-title').style.fontSize = size + 'px';
        }
        function changeTitleFont(font) {
            document.getElementById('main-title').style.fontFamily = font;
        }
        function uploadBackground() {
            let input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.onchange = e => {
                let file = e.target.files[0];
                let reader = new FileReader();
                reader.onload = function(event) {
                    document.body.style.backgroundImage = 'url(' + event.target.result + ')';
                };
                reader.readAsDataURL(file);
            };
            input.click();
        }
        function printPage() {
            document.querySelectorAll('button, .controls, .graph-buttons').forEach(el => el.classList.add('hidden'));
            window.print();
            document.querySelectorAll('button, .controls, .graph-buttons').forEach(el => el.classList.remove('hidden'));
        }
        function toggleFullScreen() {
            let elem = document.documentElement;
            if (!document.fullscreenElement) {
                if (elem.requestFullscreen) {
                    elem.requestFullscreen();
                }
                document.querySelectorAll('button, .controls, .bottom-controls').forEach(el => el.classList.add('hidden'));
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
                document.querySelectorAll('button, .controls, .bottom-controls').forEach(el => el.classList.remove('hidden'));
            }
        }
        document.addEventListener('fullscreenchange', () => {
            if (!document.fullscreenElement) {
                document.querySelectorAll('button, .controls, .bottom-controls').forEach(el => el.classList.remove('hidden'));
            }
        });
        // עדכון ראשוני של הגרפים
        updateGraphs();
    </script>
</body>
</html>

    בהצלחה!
    א מנותק
    א מנותק
    ארץ הצבי
    מורחק
    כתב נערך לאחרונה על ידי
    #2
    פוסט זה נמחק!
    יוסף אלחנןי א 2 תגובות תגובה אחרונה
    0
    • א ארץ הצבי

      פוסט זה נמחק!

      יוסף אלחנןי מחובר
      יוסף אלחנןי מחובר
      יוסף אלחנן
      מדריכים
      כתב נערך לאחרונה על ידי
      #3
      פוסט זה נמחק!
      א תגובה 1 תגובה אחרונה
      1
      • יוסף אלחנןי יוסף אלחנן

        פוסט זה נמחק!

        א מנותק
        א מנותק
        ארץ הצבי
        מורחק
        כתב נערך לאחרונה על ידי
        #4

        @יוסף-אלחנן
        מה פירוש בעיות יש סינון אוטמטי על HTML?

        תגובה 1 תגובה אחרונה
        0
        • א ארץ הצבי

          פוסט זה נמחק!

          א מחובר
          א מחובר
          א.מ.
          מדריכים
          כתב נערך לאחרונה על ידי
          #5

          @ארץ-הצבי כתב בשיתוף | גרפי התרמה בקובץ HTML:

          @א-מ
          קישורים לא תקינים

          אלו קבצים להורדה.

          א תגובה 1 תגובה אחרונה
          0
          • א א.מ.

            @ארץ-הצבי כתב בשיתוף | גרפי התרמה בקובץ HTML:

            @א-מ
            קישורים לא תקינים

            אלו קבצים להורדה.

            א מנותק
            א מנותק
            ארץ הצבי
            מורחק
            כתב נערך לאחרונה על ידי ארץ הצבי
            #6

            @א-מ
            זה לא נפתח וגם לא יורד
            "הקובץ לא זמין באתר"
            אולי תעלה את זה בקובץ zip ?

            תגובה 1 תגובה אחרונה
            1
            • יוסף אלחנןי מחובר
              יוסף אלחנןי מחובר
              יוסף אלחנן
              מדריכים
              כתב נערך לאחרונה על ידי יוסף אלחנן
              #7

              סליחה, טעיתי!
              זה לא בגלל נטפרי אי אפשר להעלות קבצי HTML לפורום.

              ניסיתי עכשיו בלי נטפרי וזה עשה לי שגיאה 403

              א תגובה 1 תגובה אחרונה
              2
              • יוסף אלחנןי יוסף אלחנן

                סליחה, טעיתי!
                זה לא בגלל נטפרי אי אפשר להעלות קבצי HTML לפורום.

                ניסיתי עכשיו בלי נטפרי וזה עשה לי שגיאה 403

                א מחובר
                א מחובר
                א.מ.
                מדריכים
                כתב נערך לאחרונה על ידי
                #8

                @יוסף-אלחנן כתב בשיתוף | גרפי התרמה בקובץ HTML:

                סליחה, טעיתי!
                זה לא בגלל נטפרי אי אפשר להעלות קבצי HTML לפורום.

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

                תגובה 1 תגובה אחרונה
                2
                • א א.מ.

                  גרפים להתקדמות בגיוס כספים בקובץ HTML

                  בס"ד

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

                  1. 3 גרפים של 3 ימי גיוס כספים שבכל אחד מהם גרף של הסכום שנאסף מול סכום היעד עם סרגל התקדמות.
                  2. גרף רביעי המכיל סכום יעד כולל וסכום שקלול של כל שלושת הגרפים האחרים.
                  3. כל ארבעת הגרפים מסודרים במרכז המסך ומצגים באופן מסודר 2 למעלה ו2 למטה בגודל אחיד.
                  4. כל גרף סכום משנה את צבעו בהתאמה לגרף סכום היעד שלידו, בין 0% עד 30% צבע אדום, בין 31% ל70% צבע כתום, בין 71% ל100% צבע ירוק, מעל 101% צבע צהוב זורח.
                  5. לגרף הסיכום הכולל יש טקסט מתחתיו שמותאם ביחס ליעד הכולל, בין 0% עד 30% לא לחלום, חסר עדיין המון כסף!, בין 31% ל70% מתקדמים יפה, אבל צריך להתאמץ יותר!, בין 71% ל100% המשיכו כך, אתם ממש קרובים ליעד!, מעל 101% אין עליכם, עבדתם מעל למצופה!
                  6. לכל גרף יש 3 לחצנים, 1 שינוי כותרת הגרף, 2 שינוי סכום הגרף, 3 שינוי סכום היעד בגרף.
                  7. כותרת כללית לעמוד בפונט מודגש עם הצללה ועם לחצן לשינוי טקסט הכותרת ולחצן לשינוי צבע וסלידר לשינוי גודל הטקסט של הכותרת.
                  8. לחצן להעלאת תמונת הרקע לעמוד מהמחשב שממורכזת למרכז המסך ומותאמת למילוי המסך.
                  9. לחצן הדפסה של העמוד ללא כל הלחצנים שבעמוד אבל עם תמונת הרקע.
                  10. לחצן מעבר למסך מלא שמסתיר את כל הלחצנים בעמוד.

                  ואלו התוצאות:

                  GPT 4o:

                  dc0c70c4-c5fa-4d91-8e66-27c919f21135-image.png

                  <!DOCTYPE html>
<html lang="he">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>מגבית ת"ת תשפ"ה</title>
  <style>
    html, body {
      height: 100%;
    }
    /* כיוון טקסט RTL, טקסט מיושר למרכז */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      direction: rtl;
      text-align: center;
    }
    /* container בגובה מלא וברוחב 75% מהמסך */
    .container {
      width: 75vw;
      margin: 0 auto;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }
    /* במצב מסך מלא – הגדלת המרווח בין הגרפים */
    .fullscreen-mode .chart-grid {
      gap: 50px;
    }
    /* במצב הדפסה – הגדלת המרווח בין הגרפים */
    @media print {
      .chart-grid {
        gap: 50px;
      }
      .no-print {
        display: none !important;
      }
      body {
        -webkit-print-color-adjust: exact;
      }
    }
    /* כותרת ראשית */
    .main-title {
      font-family: Arial, sans-serif;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
      margin-bottom: 20px;
      transition: font-size 0.3s;
    }
    /* כפתורים */
    .button {
      margin: 5px;
      padding: 8px 12px;
      border: none;
      border-radius: 4px;
      background-color: #007BFF;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s;
      text-decoration: none;
      display: inline-block;
    }
    .button:hover {
      background-color: #0056b3;
    }
    /* עיצוב לחצן בחירת תמונת רקע */
    #bgUpload {
      display: none;
    }
    label[for="bgUpload"] {
      cursor: pointer;
      margin: 5px;
      padding: 8px 12px;
      border-radius: 4px;
      background-color: #28a745;
      color: white;
      display: inline-block;
      transition: background-color 0.3s;
    }
    label[for="bgUpload"]:hover {
      background-color: #218838;
    }
    /* עיצוב בחירת גופן מתוך רשימת ברירת המחדל */
    .font-selection {
      display: inline-flex;
      align-items: center;
      margin: 5px 10px;
    }
    #fontSelect {
      padding: 6px;
      border-radius: 4px;
      margin-left: 5px;
    }
    /* הגדרת גריד להצגת הגרפים */
    .chart-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      width: 100%;
      justify-items: center;
    }
    /* עיצוב הגרף */
    .chart {
      background: rgba(255,255,255,0.6); /* שקיפות 60% */
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      width: 100%;
      /* הגרף יתפרס על 100% מתא הבית (כלומר, תופס את רוחב תא הגריד) */
    }
    .progress-bar-container {
      width: 100%;
      height: 30px;
      background-color: #e0e0e0;
      border-radius: 15px;
      overflow: hidden;
      margin: 10px 0;
    }
    .progress-bar {
      height: 100%;
      width: 0%;
      background-color: red;
      border-radius: 15px 0 0 15px;
      transition: width 0.5s, background-color 0.5s;
    }
    .hidden {
      display: none !important;
    }
  </style>
</head>
<body>
  <div class="container" id="container">
    <!-- כותרת ראשית -->
    <h1 class="main-title" id="mainTitle">מגבית ת"ת תשפ"ה</h1>
    <div class="no-print">
      <button class="button" onclick="changeMainTitleText()">שנה טקסט כותרת</button>
      <label for="mainTitleColorPicker" style="margin: 0 10px;">
        בחר צבע לכותרת:
        <input type="color" id="mainTitleColorPicker" oninput="changeMainTitleColor(this.value)" value="#000000">
      </label>
      <label style="margin: 0 10px;">גודל כותרת:
        <input type="range" min="20" max="80" value="32" id="titleSizeSlider" onchange="changeMainTitleSize(this.value)">
      </label>
      <!-- בחירת תמונת רקע -->
      <input type="file" id="bgUpload" accept="image/*" onchange="uploadBackground(event)">
      <label for="bgUpload">בחר תמונת רקע</label>
      <!-- בחירת גופן מתוך רשימת ברירת המחדל -->
      <div class="font-selection">
        <span>בחר גופן לכותרת:</span>
        <select id="fontSelect" onchange="changeFont(this.value)">
          <option value="Arial">Arial</option>
          <option value="Verdana">Verdana</option>
          <option value="Tahoma">Tahoma</option>
          <option value="'Times New Roman'">Times New Roman</option>
          <option value="Georgia">Georgia</option>
          <option value="'Courier New'">Courier New</option>
          <option value="Impact">Impact</option>
          <option value="'Comic Sans MS'">Comic Sans MS</option>
        </select>
      </div>
      <button class="button" onclick="printPage()">הדפס עמוד</button>
      <button class="button" onclick="toggleFullScreen()">מסך מלא</button>
    </div>
    
    <!-- גריד הגרפים -->
    <div class="chart-grid">
      <!-- גרף יום 1 -->
      <div class="chart" id="chart1">
        <h2 id="chart1Title">יום 1</h2>
        <div>נאסף: <span id="chart1Collected">0</span> / יעד: <span id="chart1Target">45000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress1"></div>
        </div>
        <div class="chart-buttons no-print">
          <button class="button" onclick="changeChartTitle(1)">שנה כותרת</button>
          <button class="button" onclick="changeChartCollected(1)">שנה סכום נאסף</button>
          <button class="button" onclick="changeChartTarget(1)">שנה סכום יעד</button>
        </div>
      </div>
      <!-- גרף יום 2 -->
      <div class="chart" id="chart2">
        <h2 id="chart2Title">יום 2</h2>
        <div>נאסף: <span id="chart2Collected">0</span> / יעד: <span id="chart2Target">50000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress2"></div>
        </div>
        <div class="chart-buttons no-print">
          <button class="button" onclick="changeChartTitle(2)">שנה כותרת</button>
          <button class="button" onclick="changeChartCollected(2)">שנה סכום נאסף</button>
          <button class="button" onclick="changeChartTarget(2)">שנה סכום יעד</button>
        </div>
      </div>
      <!-- גרף יום 3 -->
      <div class="chart" id="chart3">
        <h2 id="chart3Title">יום 3</h2>
        <div>נאסף: <span id="chart3Collected">0</span> / יעד: <span id="chart3Target">60000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress3"></div>
        </div>
        <div class="chart-buttons no-print">
          <button class="button" onclick="changeChartTitle(3)">שנה כותרת</button>
          <button class="button" onclick="changeChartCollected(3)">שנה סכום נאסף</button>
          <button class="button" onclick="changeChartTarget(3)">שנה סכום יעד</button>
        </div>
      </div>
      <!-- גרף סיכום כולל -->
      <div class="chart" id="chart4">
        <h2 id="chart4Title">סיכום כולל</h2>
        <div>סה"כ נאסף: <span id="chart4Collected">0</span> / יעד כולל: <span id="chart4Target">155000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress4"></div>
        </div>
        <div id="overallMessage" style="font-weight: bold; margin-top:10px;"></div>
        <div class="no-print" style="margin-top:10px;">
          <button class="button" onclick="changeChartTitle(4)">שנה כותרת הסיכום</button>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    /* משתנים גלובליים לגרפים עם ערכי יעד מעודכנים */
    let charts = {
      1: { title: "יום 1", collected: 0, target: 45000 },
      2: { title: "יום 2", collected: 0, target: 50000 },
      3: { title: "יום 3", collected: 0, target: 60000 }
    };

    function updateProgressBar(chartId, percentage) {
      const progressBar = document.getElementById("progress" + chartId);
      progressBar.style.width = Math.min(percentage, 100) + "%";
      let color = "";
      if (percentage <= 30) { color = "red"; }
      else if (percentage <= 70) { color = "orange"; }
      else if (percentage <= 100) { color = "green"; }
      else { color = "yellow"; }
      progressBar.style.backgroundColor = color;
    }

    function updateChartDisplay(chartId) {
      if (chartId === 4) {
        const totalCollected = charts[1].collected + charts[2].collected + charts[3].collected;
        const totalTarget = charts[1].target + charts[2].target + charts[3].target;
        document.getElementById("chart4Collected").innerText = totalCollected;
        document.getElementById("chart4Target").innerText = totalTarget;
        const percentage = totalTarget ? (totalCollected / totalTarget) * 100 : 0;
        updateProgressBar(4, percentage);
        updateOverallMessage(percentage);
      } else {
        const collected = charts[chartId].collected;
        const target = charts[chartId].target;
        document.getElementById("chart" + chartId + "Collected").innerText = collected;
        document.getElementById("chart" + chartId + "Target").innerText = target;
        const percentage = target ? (collected / target) * 100 : 0;
        updateProgressBar(chartId, percentage);
      }
    }

    function updateOverallMessage(percentage) {
      const messageEl = document.getElementById("overallMessage");
      let message = "";
      if (percentage <= 30) { message = "לא לחלום, חסר עדיין המון כסף!"; }
      else if (percentage <= 70) { message = "מתקדמים יפה, אבל צריך להתאמץ יותר!"; }
      else if (percentage <= 100) { message = "המשיכו כך, אתם ממש קרובים ליעד!"; }
      else { message = "אין עליכם, עבדתם מעל למצופה!"; }
      messageEl.innerText = message;
    }

    function changeChartTitle(chartId) {
      let promptText = chartId === 4 ? "גרף הסיכום" : "גרף " + chartId;
      let newTitle = prompt("הכנס כותרת חדשה ל" + promptText + ":", 
                             chartId === 4 ? document.getElementById("chart4Title").innerText : charts[chartId].title);
      if (newTitle !== null) {
        if (chartId === 4) {
          document.getElementById("chart4Title").innerText = newTitle;
        } else {
          charts[chartId].title = newTitle;
          document.getElementById("chart" + chartId + "Title").innerText = newTitle;
        }
      }
    }

    function changeChartCollected(chartId) {
      let newCollected = prompt("הכנס סכום נאסף חדש לגרף " + chartId + ":", charts[chartId].collected);
      if (newCollected !== null && !isNaN(newCollected)) {
        charts[chartId].collected = parseFloat(newCollected);
        updateChartDisplay(chartId);
        updateChartDisplay(4);
      }
    }

    function changeChartTarget(chartId) {
      let newTarget = prompt("הכנס סכום יעד חדש לגרף " + chartId + ":", charts[chartId].target);
      if (newTarget !== null && !isNaN(newTarget)) {
        charts[chartId].target = parseFloat(newTarget);
        updateChartDisplay(chartId);
        updateChartDisplay(4);
      }
    }

    updateChartDisplay(1);
    updateChartDisplay(2);
    updateChartDisplay(3);
    updateChartDisplay(4);

    function changeMainTitleText() {
      const newText = prompt("הכנס טקסט חדש לכותרת הראשית:", document.getElementById("mainTitle").innerText);
      if (newText !== null) {
        document.getElementById("mainTitle").innerText = newText;
      }
    }

    function changeMainTitleColor(newColor) {
      document.getElementById("mainTitle").style.color = newColor;
    }

    function changeMainTitleSize(value) {
      document.getElementById("mainTitle").style.fontSize = value + "px";
    }

    function uploadBackground(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
          document.body.style.backgroundImage = "url('" + e.target.result + "')";
        }
        reader.readAsDataURL(file);
      }
    }

    function changeFont(fontName) {
      document.getElementById("mainTitle").style.fontFamily = fontName + ", sans-serif";
    }

    function printPage() {
      const noPrintElements = document.querySelectorAll(".no-print");
      noPrintElements.forEach(el => el.classList.add("hidden"));
      window.print();
      noPrintElements.forEach(el => el.classList.remove("hidden"));
    }

    let isFullScreen = false;
    function toggleFullScreen() {
      if (!isFullScreen) {
        openFullscreen();
      } else {
        closeFullscreen();
      }
    }
    function openFullscreen() {
      const elem = document.documentElement;
      if (elem.requestFullscreen) { elem.requestFullscreen(); }
      else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); }
      else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); }
      document.querySelectorAll(".no-print").forEach(el => el.classList.add("hidden"));
      // הוספת מחלקת fullscreen-mode ל-container להגדלת המרווחים (50px) במצב מסך מלא
      document.getElementById("container").classList.add("fullscreen-mode");
      isFullScreen = true;
    }
    function closeFullscreen() {
      if (document.exitFullscreen) { document.exitFullscreen(); }
      else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); }
      else if (document.msExitFullscreen) { document.msExitFullscreen(); }
      document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
      document.getElementById("container").classList.remove("fullscreen-mode");
      isFullScreen = false;
    }
    document.addEventListener('fullscreenchange', () => {
      if (!document.fullscreenElement) {
        document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
        document.getElementById("container").classList.remove("fullscreen-mode");
        isFullScreen = false;
      }
    });
    document.addEventListener('webkitfullscreenchange', () => {
      if (!document.webkitFullscreenElement) {
        document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
        document.getElementById("container").classList.remove("fullscreen-mode");
        isFullScreen = false;
      }
    });
    document.addEventListener('msfullscreenchange', () => {
      if (!document.msFullscreenElement) {
        document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
        document.getElementById("container").classList.remove("fullscreen-mode");
        isFullScreen = false;
      }
    });
  </script>
</body>
</html>

                  Grok 3:

                  ae5e0adf-cbb9-40aa-8890-4c5d538189ef-image.png

                  <!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>מגבית ת"ת תשפ"ה</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            transition: background-image 0.3s;
        }
        .header {
            font-size: 2em;
            font-weight: bold;
            text-shadow: 2px 2px 4px #000;
            margin-bottom: 30px;
            color: #1e3a8a;
        }
        .graph-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            max-width: 800px;
            margin-bottom: 30px;
        }
        .graph {
            width: 350px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            text-align: center;
            transition: transform 0.2s;
        }
        .graph:hover {
            transform: translateY(-2px);
        }
        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
            margin: 15px 0;
        }
        .progress {
            height: 100%;
            transition: width 0.3s, background-color 0.3s;
        }
        .summary-text {
            margin-top: 15px;
            font-weight: bold;
            color: #555;
            font-size: 1.3em;
        }
        .buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
            justify-content: center;
        }
        .graph-buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 15px;
        }
        .button {
            padding: 12px 24px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s, transform 0.2s;
        }
        .button:hover {
            background-color: #45a049;
            transform: scale(1.05);
        }
        .fullscreen-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 12px 24px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s, transform 0.2s;
        }
        .fullscreen-button:hover {
            background-color: #45a049;
            transform: scale(1.05);
        }
        input[type="range"], input[type="color"] {
            width: 120px;
            margin: 5px;
        }
        select {
            padding: 8px;
            border-radius: 8px;
            font-size: 1em;
        }
        @media print {
            .button, .fullscreen-button, .buttons, .graph-buttons, input, select { /* הסתרת כל הלחצנים ופקדים */
                display: none !important;
            }
            .graph, .progress-bar, .progress, .header, .summary-text {
                print-color-adjust: exact;
                -webkit-print-color-adjust: exact;
            }
            body {
                background-image: inherit !important;
                background-size: cover !important;
                background-position: center !important;
                background-repeat: no-repeat !important;
                background-attachment: fixed !important;
                background-color: transparent !important;
                print-background: print; /* תאימות מלאה להדפסת רקע */
            }
        }
        @media (display-mode: fullscreen) {
            .button, .fullscreen-button, .buttons, .graph-buttons, input, select { /* הסתרת פקדים במסך מלא */
                display: none !important;
            }
        }
    </style>
</head>
<body>
    <div class="header" id="header">מגבית ת"ת תשפ"ה</div>
    <div class="graph-container">
        <div class="graph" id="graph1">
            <h3 id="title1">גיוס יום 1</h3>
            <div class="progress-bar">
                <div class="progress" id="progress1" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amount1">0</span> ₪ מתוך <span id="target1">40000</span> ₪</p>
            <div class="graph-buttons">
                <button class="button" onclick="changeTitle(1)">שנה כותרת</button>
                <button class="button" onclick="changeAmount(1)">שנה סכום</button>
                <button class="button" onclick="changeTarget(1)">שנה יעד</button>
            </div>
        </div>
        <div class="graph" id="graph2">
            <h3 id="title2">גיוס יום 2</h3>
            <div class="progress-bar">
                <div class="progress" id="progress2" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amount2">0</span> ₪ מתוך <span id="target2">45000</span> ₪</p>
            <div class="graph-buttons">
                <button class="button" onclick="changeTitle(2)">שנה כותרת</button>
                <button class="button" onclick="changeAmount(2)">שנה סכום</button>
                <button class="button" onclick="changeTarget(2)">שנה יעד</button>
            </div>
        </div>
        <div class="graph" id="graph3">
            <h3 id="title3">גיוס יום 3</h3>
            <div class="progress-bar">
                <div class="progress" id="progress3" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amount3">0</span> ₪ מתוך <span id="target3">50000</span> ₪</p>
            <div class="graph-buttons">
                <button class="button" onclick="changeTitle(3)">שנה כותרת</button>
                <button class="button" onclick="changeAmount(3)">שנה סכום</button>
                <button class="button" onclick="changeTarget(3)">שנה יעד</button>
            </div>
        </div>
        <div class="graph">
            <h3>סיכום כולל</h3>
            <div class="progress-bar">
                <div class="progress" id="progressTotal" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amountTotal">0</span> ₪ מתוך <span id="targetTotal">135000</span> ₪</p>
            <p class="summary-text" id="summaryText"></p>
        </div>
    </div>
    <div class="buttons" id="controlButtons">
        <button class="button" onclick="changeHeader()">שנה כותרת</button>
        <label for="colorPicker">בחר צבע כותרת: </label>
        <input type="color" id="colorPicker" onchange="changeColor(this.value)">
        <label for="fontSizeSlider">גודל כותרת: </label>
        <input type="range" min="1" max="5" step="0.1" value="2" id="fontSizeSlider" oninput="changeFontSize(this.value)">
        <label for="fontSelect">בחר גופן: </label>
        <select id="fontSelect" onchange="changeFont(this.value)">
            <option value="Arial">Arial</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Courier New">Courier New</option>
            <option value="Georgia">Georgia</option>
            <option value="Verdana">Verdana</option>
        </select>
        <button class="button" onclick="uploadBackground()">העלה תמונת רקע</button>
        <button class="button" onclick="printPage()">הדפס עמוד</button>
    </div>
    <button class="button fullscreen-button" id="fullscreenButton" onclick="toggleFullscreen()">מסך מלא</button>

    <script>
        let amounts = [0, 0, 0]; // סכומים שנאספו מתחילים ב-0
        let targets = [40000, 45000, 50000];
        let totalTarget = targets.reduce((a, b) => a + b, 0); // חישוב דינמי של היעד הכולל

        function updateProgress() {
            amounts.forEach((amount, index) => {
                const percentage = (amount / targets[index]) * 100;
                const progress = document.getElementById(`progress${index + 1}`);
                progress.style.width = `${percentage}%`;
                progress.style.backgroundColor = getColor(percentage);
                document.getElementById(`amount${index + 1}`).textContent = Math.round(amount); // הצגת מספרים שלמים ללא עשרוניות
                document.getElementById(`target${index + 1}`).textContent = Math.round(targets[index]); // הצגת מספרים שלמים ליעד
            });

            const totalAmount = amounts.reduce((a, b) => a + b, 0);
            totalTarget = targets.reduce((a, b) => a + b, 0); // עדכון דינמי של היעד הכולל
            const totalPercentage = (totalAmount / totalTarget) * 100;
            const progressTotal = document.getElementById('progressTotal');
            progressTotal.style.width = `${totalPercentage}%`;
            progressTotal.style.backgroundColor = getColor(totalPercentage);
            document.getElementById('amountTotal').textContent = Math.round(totalAmount); // הצגת מספרים שלמים ללא עשרוניות
            document.getElementById('targetTotal').textContent = Math.round(totalTarget); // הצגת היעד הכולל כמספר שלם

            const summaryText = document.getElementById('summaryText');
            if (totalPercentage <= 30) {
                summaryText.textContent = 'לא לחלום, חסר עדיין המון כסף!';
            } else if (totalPercentage <= 70) {
                summaryText.textContent = 'מתקדמים יפה, אבל צריך להתאמץ יותר!';
            } else if (totalPercentage <= 100) {
                summaryText.textContent = 'המשיכו כך, אתם ממש קרובים ליעד!';
            } else {
                summaryText.textContent = 'אין עליכם, עבדתם מעל למצופה!';
            }
        }

        function getColor(percentage) {
            if (percentage <= 30) return 'red';
            if (percentage <= 70) return 'orange';
            if (percentage <= 100) return 'green';
            return 'yellow';
        }

        function changeHeader() {
            const newHeader = prompt('הזן כותרת חדשה:');
            if (newHeader) {
                document.getElementById('header').textContent = newHeader;
            }
        }

        function changeColor(color) {
            document.getElementById('header').style.color = color; // עדכון מיידי של צבע הכותרת בזמן אמת
        }

        function changeFontSize(value) {
            document.getElementById('header').style.fontSize = `${value}em`;
        }

        function changeFont(font) {
            document.getElementById('header').style.fontFamily = font;
        }

        function changeTitle(day) {
            const newTitle = prompt(`הזן כותרת חדשה לגיוס יום ${day}:`);
            if (newTitle) {
                document.getElementById(`title${day}`).textContent = newTitle;
            }
        }

        function changeAmount(day) {
            const newAmount = prompt(`הזן סכום חדש (ב₪, רק מספרים שלמים) לגיוס יום ${day}:`);
            if (newAmount && !isNaN(newAmount) && !newAmount.match(/[^0-9]/)) { // בדיקה שרק מספרים שלמים מותרים
                amounts[day - 1] = Math.round(parseFloat(newAmount)); // עיגול למספר שלם
                updateProgress();
            } else {
                alert('אנא הזן מספר תקין (רק ספרות שלמות, ללא נקודות או תווים אחרים).');
            }
        }

        function changeTarget(day) {
            const newTarget = prompt(`הזן סכום יעד חדש (ב₪, רק מספרים שלמים) לגיוס יום ${day}:`);
            if (newTarget && !isNaN(newTarget) && !newTarget.match(/[^0-9]/)) { // בדיקה שרק מספרים שלמים מותרים
                targets[day - 1] = Math.round(parseFloat(newTarget)); // עיגול למספר שלם
                updateProgress();
            } else {
                alert('אנא הזן מספר תקין (רק ספרות שלמות, ללא נקודות או תווים אחרים).');
            }
        }

        function uploadBackground() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.onchange = function(event) {
                const file = event.target.files[0];
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.body.style.backgroundImage = `url(${e.target.result})`;
                    document.body.style.backgroundSize = 'cover';
                    document.body.style.backgroundPosition = 'center';
                };
                reader.readAsDataURL(file);
            };
            input.click();
        }

        function printPage() {
            const controls = document.querySelectorAll('.button, .fullscreen-button, input, select'); // הסתרת כל הפקדים
            controls.forEach(control => control.style.display = 'none');
            window.print();
            controls.forEach(control => control.style.display = ''); // החזרת הפקדים לאחר ההדפסה
        }

        function toggleFullscreen() {
            const controls = document.querySelectorAll('.button, .fullscreen-button, input, select'); // הסתרת כל הפקדים
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen();
                controls.forEach(control => control.style.display = 'none');
            } else {
                document.exitFullscreen();
                controls.forEach(control => control.style.display = ''); // החזרת הפקדים לאחר יציאה ממסך מלא
            }
        }

        // הקשבה ליציאה ממצב מסך מלא והצגת הפקדים מחדש
        document.addEventListener('fullscreenchange', () => {
            const controls = document.querySelectorAll('.button, .fullscreen-button, input, select');
            if (!document.fullscreenElement) {
                controls.forEach(control => control.style.display = '');
            }
        });

        // עדכון ראשוני של הגרפים
        updateProgress();
    </script>
</body>
</html>

                  Copilot:

                  011b404f-ee15-49d6-abe5-ebe14b9de4b0-image.png

                  <!DOCTYPE html>
<html lang="he">
<head>
    <meta charset="UTF-8">
    <title>מגבית ת"ת תשפ"ה</title>
    <!-- שימוש בפונטים מגוגל -->
    <link href="https://fonts.googleapis.com/css?family=Assistant:400,700&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            background-size: cover;
            background-position: center;
            font-family: 'Assistant', sans-serif;
            direction: rtl;
            background-color: #f0f2f5;
        }
        h1 {
            font-size: 60px;
            font-weight: bold;
            text-shadow: 2px 2px rgba(0,0,0,0.1);
            margin: 20px 0;
            color: #333;
            transition: all 0.3s ease;
            text-align: center;
        }
        .controls {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin: 10px 0;
        }
        .controls label {
            display: flex;
            flex-direction: column; /* מסדר את הטקסט מעל הלחצן */
            align-items: center;
            margin: 10px;
            font-size: 16px;
            color: #333;
        }
        .controls button,
        .controls select,
        .controls input[type="color"],
        .controls input[type="range"] {
            margin-top: 5px;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #17a2b8;
            color: #fff;
            font-size: 16px;
            transition: background-color 0.3s, transform 0.2s;
        }
        .controls button:hover,
        .controls select:hover,
        .controls input[type="color"]:hover,
        .controls input[type="range"]:hover {
            background-color: #138496;
            transform: scale(1.05);
        }
        .graphs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 20px;
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
            box-sizing: border-box;
        }
        .graph {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.2s;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .graph:hover {
            transform: translateY(-5px);
        }
        .graph h2 {
            margin: 0 0 10px 0;
        }
        .progress-container {
            background-color: #e0e0e0;
            border-radius: 5px;
            overflow: hidden;
            height: 30px;
            width: 100%;
            max-width: 300px;
        }
        .progress-bar {
            height: 100%;
            width: 0;
            transition: width 0.5s ease-in-out;
        }
        .amounts {
            font-size: 18px;
            color: #555;
            margin: 10px 0;
        }
        .percentage {
            font-size: 16px;
            font-weight: bold;
            color: #555;
            margin: 10px 0;
        }
        .graph-buttons {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
        .graph-buttons button {
            margin: 5px;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #007BFF;
            color: #fff;
            font-size: 14px;
            transition: background-color 0.3s, transform 0.2s;
        }
        .graph-buttons button:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }
        .message {
            font-size: 18px;
            font-weight: bold;
            color: #555;
            margin-top: 15px;
        }
        .bottom-controls {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin: 20px;
        }
        .bottom-controls button {
            margin-right: 10px;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #6c757d;
            color: #fff;
            font-size: 16px;
            transition: background-color 0.3s, transform 0.2s;
        }
        .bottom-controls button:hover {
            background-color: #5a6268;
            transform: scale(1.05);
        }
        .hidden {
            display: none;
        }
        @media screen and (max-width: 800px) {
            .graphs {
                grid-template-columns: 1fr;
            }
            .bottom-controls {
                justify-content: center;
            }
        }
        /* סגנונות למצב הדפסה ומסך מלא */
        @media print, (display-mode: fullscreen) {
            body {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                /* מאפשר הדפסת צבעים ותמונות רקע */
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
                background-size: cover;
                background-position: center;
            }
            .graphs {
                width: 70%;
                min-height: 70vh;
                margin: auto;
            }
            .bottom-controls {
                display: none;
            }
        }
    </style>
</head>
<body>
    <h1 id="main-title">מגבית ת"ת תשפ"ה</h1>
    <div class="controls">
        <label>
            שנה טקסט כותרת ראשית
            <button onclick="changeTitleText()">שנה טקסט כותרת ראשית</button>
        </label>
        <label>
            בחר צבע לכותרת
            <input type="color" id="title-color-picker" value="#333333">
        </label>
        <label>
            שינוי גודל הכותרת
            <input type="range" min="30" max="100" value="60" onchange="changeTitleSize(this.value)">
        </label>
        <label>
            בחר גופן לכותרת
            <select onchange="changeTitleFont(this.value)">
                <option value="'Assistant', sans-serif">Assistant</option>
                <option value="'Arial', sans-serif">Arial</option>
                <option value="'David', sans-serif">David</option>
                <option value="'Courier New', monospace">Courier New</option>
                <!-- ניתן להוסיף פונטים נוספים -->
            </select>
        </label>
    </div>
    <div class="graphs">
        <!-- גרף יום 1 -->
        <div class="graph" id="graph1">
            <h2 id="title1">יום 1</h2>
            <p class="amounts" id="amounts1"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress1"></div>
            </div>
            <p id="percentage1" class="percentage"></p>
            <div class="graph-buttons">
                <button onclick="changeGraphTitle(1)">שנה כותרת הגרף</button>
                <button onclick="changeGraphAmount(1)">עדכן סכום שנאסף</button>
                <button onclick="changeGraphTarget(1)">ערוך סכום יעד</button>
            </div>
        </div>
        <!-- גרף יום 2 -->
        <div class="graph" id="graph2">
            <h2 id="title2">יום 2</h2>
            <p class="amounts" id="amounts2"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress2"></div>
            </div>
            <p id="percentage2" class="percentage"></p>
            <div class="graph-buttons">
                <button onclick="changeGraphTitle(2)">שנה כותרת הגרף</button>
                <button onclick="changeGraphAmount(2)">עדכן סכום שנאסף</button>
                <button onclick="changeGraphTarget(2)">ערוך סכום יעד</button>
            </div>
        </div>
        <!-- גרף יום 3 -->
        <div class="graph" id="graph3">
            <h2 id="title3">יום 3</h2>
            <p class="amounts" id="amounts3"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress3"></div>
            </div>
            <p id="percentage3" class="percentage"></p>
            <div class="graph-buttons">
                <button onclick="changeGraphTitle(3)">שנה כותרת הגרף</button>
                <button onclick="changeGraphAmount(3)">עדכן סכום שנאסף</button>
                <button onclick="changeGraphTarget(3)">ערוך סכום יעד</button>
            </div>
        </div>
        <!-- גרף סיכום כולל -->
        <div class="graph" id="graph-summary">
            <h2 id="title-summary">סיכום כולל</h2>
            <p class="amounts" id="amounts-summary"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress-summary"></div>
            </div>
            <p id="percentage-summary" class="percentage"></p>
            <p class="message" id="summary-message"></p>
            <!-- לחצן שינוי כותרת הסיכום מתחת לטקסט -->
            <div class="graph-buttons">
                <button onclick="changeSummaryTitle()">שנה כותרת הסיכום</button>
            </div>
        </div>
    </div>
    <div class="bottom-controls">
        <button onclick="toggleFullScreen()">הצג במסך מלא</button>
        <button onclick="uploadBackground()">העלה תמונת רקע</button>
        <button onclick="printPage()">הדפס את העמוד</button>
    </div>
    <script>
        // ערכי ברירת מחדל
        let graphData = [
            { id: 1, title: 'יום 1', amount: 0, target: 40000 },
            { id: 2, title: 'יום 2', amount: 0, target: 45000 },
            { id: 3, title: 'יום 3', amount: 0, target: 50000 },
        ];
        function updateGraphs() {
            let totalAmount = 0;
            let totalTarget = 0;
            graphData.forEach(graph => {
                document.getElementById('title' + graph.id).innerText = graph.title;
                let progress = document.getElementById('progress' + graph.id);
                let percentText = document.getElementById('percentage' + graph.id);
                let amountsText = document.getElementById('amounts' + graph.id);
                let percent = (graph.amount / graph.target) * 100;
                if (percent > 100) percent = 100;
                progress.style.width = percent + '%';
                progress.style.backgroundColor = getColor((graph.amount / graph.target) * 100);
                percentText.innerText = Math.round(percent) + '%';
                amountsText.innerText = `נאסף: ${graph.amount.toLocaleString()} ש"ח | יעד: ${graph.target.toLocaleString()} ש"ח`;
                totalAmount += graph.amount;
                totalTarget += graph.target;
            });
            // עדכון גרף הסיכום
            let totalPercent = (totalAmount / totalTarget) * 100;
            if (totalPercent > 100) totalPercent = 100;
            let progressSummary = document.getElementById('progress-summary');
            let percentSummaryText = document.getElementById('percentage-summary');
            let amountsSummaryText = document.getElementById('amounts-summary');
            progressSummary.style.width = totalPercent + '%';
            progressSummary.style.backgroundColor = getColor((totalAmount / totalTarget) * 100);
            percentSummaryText.innerText = Math.round(totalPercent) + '%';
            amountsSummaryText.innerText = `נאסף: ${totalAmount.toLocaleString()} ש"ח | יעד: ${totalTarget.toLocaleString()} ש"ח`;
            updateSummaryMessage((totalAmount / totalTarget) * 100);
        }
        function getColor(percent) {
            if (percent <= 30) return 'red';
            else if (percent <= 70) return 'orange';
            else if (percent <= 100) return 'green';
            else return '#FFD700'; // זהב
        }
        function updateSummaryMessage(percent) {
            let message = '';
            if (percent <= 30) message = 'לא לחלום, חסר עדיין המון כסף!';
            else if (percent <= 70) message = 'מתקדמים יפה, אבל צריך להתאמץ יותר!';
            else if (percent <= 100) message = 'המשיכו כך, אתם ממש קרובים ליעד!';
            else message = 'אין עליכם, עבדתם מעל למצופה!';
            document.getElementById('summary-message').innerText = message;
        }
        function changeGraphTitle(id) {
            let graph = graphData.find(g => g.id === id);
            let newTitle = prompt('הכנס כותרת חדשה לגרף:', graph.title);
            if (newTitle) {
                graph.title = newTitle;
                updateGraphs();
            }
        }
        function changeGraphAmount(id) {
            let graph = graphData.find(g => g.id === id);
            let newAmount = prompt('הכנס סכום שנאסף בש"ח:', graph.amount);
            if (newAmount !== null && newAmount !== '' && !isNaN(newAmount) && Number.isInteger(+newAmount)) {
                graph.amount = parseInt(newAmount);
                updateGraphs();
            } else {
                alert('אנא הכנס מספר שלם תקין.');
            }
        }
        function changeGraphTarget(id) {
            let graph = graphData.find(g => g.id === id);
            let newTarget = prompt('הכנס סכום יעד בש"ח:', graph.target);
            if (newTarget !== null && newTarget !== '' && !isNaN(newTarget) && Number.isInteger(+newTarget)) {
                graph.target = parseInt(newTarget);
                updateGraphs();
            } else {
                alert('אנא הכנס מספר שלם תקין.');
            }
        }
        function changeTitleText() {
            let newTitle = prompt('הכנס טקסט כותרת ראשית חדש:', document.getElementById('main-title').innerText);
            if (newTitle) {
                document.getElementById('main-title').innerText = newTitle;
            }
        }
        function changeSummaryTitle() {
            let newTitle = prompt('הכנס כותרת חדשה לסיכום:', document.getElementById('title-summary').innerText);
            if (newTitle) {
                document.getElementById('title-summary').innerText = newTitle;
            }
        }
        function changeTitleColor(color) {
            document.getElementById('main-title').style.color = color;
        }
        document.getElementById('title-color-picker').addEventListener('input', function() {
            changeTitleColor(this.value);
        });
        function changeTitleSize(size) {
            document.getElementById('main-title').style.fontSize = size + 'px';
        }
        function changeTitleFont(font) {
            document.getElementById('main-title').style.fontFamily = font;
        }
        function uploadBackground() {
            let input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.onchange = e => {
                let file = e.target.files[0];
                let reader = new FileReader();
                reader.onload = function(event) {
                    document.body.style.backgroundImage = 'url(' + event.target.result + ')';
                };
                reader.readAsDataURL(file);
            };
            input.click();
        }
        function printPage() {
            document.querySelectorAll('button, .controls, .graph-buttons').forEach(el => el.classList.add('hidden'));
            window.print();
            document.querySelectorAll('button, .controls, .graph-buttons').forEach(el => el.classList.remove('hidden'));
        }
        function toggleFullScreen() {
            let elem = document.documentElement;
            if (!document.fullscreenElement) {
                if (elem.requestFullscreen) {
                    elem.requestFullscreen();
                }
                document.querySelectorAll('button, .controls, .bottom-controls').forEach(el => el.classList.add('hidden'));
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
                document.querySelectorAll('button, .controls, .bottom-controls').forEach(el => el.classList.remove('hidden'));
            }
        }
        document.addEventListener('fullscreenchange', () => {
            if (!document.fullscreenElement) {
                document.querySelectorAll('button, .controls, .bottom-controls').forEach(el => el.classList.remove('hidden'));
            }
        });
        // עדכון ראשוני של הגרפים
        updateGraphs();
    </script>
</body>
</html>

                  בהצלחה!
                  נ מנותק
                  נ מנותק
                  נחמן פלח
                  כתב נערך לאחרונה על ידי
                  #9

                  @א-מ כתב בשיתוף | גרפי התרמה בקובץ HTML:

                  Grok 3:

                  Spoiler

                  לדעתי לקח בענק
                  אגב, אולי תשתף איך אפשר לתקשר איתו

                  היי

                  תגובה 1 תגובה אחרונה
                  0
                  • ס מנותק
                    ס מנותק
                    סתם שמרל
                    כתב נערך לאחרונה על ידי
                    #10

                    @א-מ ענק!
                    ככה להשוות בין כל המודלים...
                    כמובן שגרוק לקח.
                    איך ניגשים אליו?

                    G תגובה 1 תגובה אחרונה
                    0
                    • ס סתם שמרל

                      @א-מ ענק!
                      ככה להשוות בין כל המודלים...
                      כמובן שגרוק לקח.
                      איך ניגשים אליו?

                      G מנותק
                      G מנותק
                      g0527
                      כתב נערך לאחרונה על ידי
                      #11

                      @סתם-שמרל כתב בשיתוף | גרפי התרמה בקובץ HTML:

                      כמובן שגרוק לקח.
                      איך ניגשים אליו?

                      אפשר להשתמש בגרוק דרך X- טוויטר
                      לכאורה יש גם אתר, חסום בנטפרי https://x.ai/grok

                      תגובה 1 תגובה אחרונה
                      1
                      • א א.מ.

                        גרפים להתקדמות בגיוס כספים בקובץ HTML

                        בס"ד

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

                        1. 3 גרפים של 3 ימי גיוס כספים שבכל אחד מהם גרף של הסכום שנאסף מול סכום היעד עם סרגל התקדמות.
                        2. גרף רביעי המכיל סכום יעד כולל וסכום שקלול של כל שלושת הגרפים האחרים.
                        3. כל ארבעת הגרפים מסודרים במרכז המסך ומצגים באופן מסודר 2 למעלה ו2 למטה בגודל אחיד.
                        4. כל גרף סכום משנה את צבעו בהתאמה לגרף סכום היעד שלידו, בין 0% עד 30% צבע אדום, בין 31% ל70% צבע כתום, בין 71% ל100% צבע ירוק, מעל 101% צבע צהוב זורח.
                        5. לגרף הסיכום הכולל יש טקסט מתחתיו שמותאם ביחס ליעד הכולל, בין 0% עד 30% לא לחלום, חסר עדיין המון כסף!, בין 31% ל70% מתקדמים יפה, אבל צריך להתאמץ יותר!, בין 71% ל100% המשיכו כך, אתם ממש קרובים ליעד!, מעל 101% אין עליכם, עבדתם מעל למצופה!
                        6. לכל גרף יש 3 לחצנים, 1 שינוי כותרת הגרף, 2 שינוי סכום הגרף, 3 שינוי סכום היעד בגרף.
                        7. כותרת כללית לעמוד בפונט מודגש עם הצללה ועם לחצן לשינוי טקסט הכותרת ולחצן לשינוי צבע וסלידר לשינוי גודל הטקסט של הכותרת.
                        8. לחצן להעלאת תמונת הרקע לעמוד מהמחשב שממורכזת למרכז המסך ומותאמת למילוי המסך.
                        9. לחצן הדפסה של העמוד ללא כל הלחצנים שבעמוד אבל עם תמונת הרקע.
                        10. לחצן מעבר למסך מלא שמסתיר את כל הלחצנים בעמוד.

                        ואלו התוצאות:

                        GPT 4o:

                        dc0c70c4-c5fa-4d91-8e66-27c919f21135-image.png

                        <!DOCTYPE html>
<html lang="he">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>מגבית ת"ת תשפ"ה</title>
  <style>
    html, body {
      height: 100%;
    }
    /* כיוון טקסט RTL, טקסט מיושר למרכז */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      direction: rtl;
      text-align: center;
    }
    /* container בגובה מלא וברוחב 75% מהמסך */
    .container {
      width: 75vw;
      margin: 0 auto;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }
    /* במצב מסך מלא – הגדלת המרווח בין הגרפים */
    .fullscreen-mode .chart-grid {
      gap: 50px;
    }
    /* במצב הדפסה – הגדלת המרווח בין הגרפים */
    @media print {
      .chart-grid {
        gap: 50px;
      }
      .no-print {
        display: none !important;
      }
      body {
        -webkit-print-color-adjust: exact;
      }
    }
    /* כותרת ראשית */
    .main-title {
      font-family: Arial, sans-serif;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
      margin-bottom: 20px;
      transition: font-size 0.3s;
    }
    /* כפתורים */
    .button {
      margin: 5px;
      padding: 8px 12px;
      border: none;
      border-radius: 4px;
      background-color: #007BFF;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s;
      text-decoration: none;
      display: inline-block;
    }
    .button:hover {
      background-color: #0056b3;
    }
    /* עיצוב לחצן בחירת תמונת רקע */
    #bgUpload {
      display: none;
    }
    label[for="bgUpload"] {
      cursor: pointer;
      margin: 5px;
      padding: 8px 12px;
      border-radius: 4px;
      background-color: #28a745;
      color: white;
      display: inline-block;
      transition: background-color 0.3s;
    }
    label[for="bgUpload"]:hover {
      background-color: #218838;
    }
    /* עיצוב בחירת גופן מתוך רשימת ברירת המחדל */
    .font-selection {
      display: inline-flex;
      align-items: center;
      margin: 5px 10px;
    }
    #fontSelect {
      padding: 6px;
      border-radius: 4px;
      margin-left: 5px;
    }
    /* הגדרת גריד להצגת הגרפים */
    .chart-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      width: 100%;
      justify-items: center;
    }
    /* עיצוב הגרף */
    .chart {
      background: rgba(255,255,255,0.6); /* שקיפות 60% */
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      width: 100%;
      /* הגרף יתפרס על 100% מתא הבית (כלומר, תופס את רוחב תא הגריד) */
    }
    .progress-bar-container {
      width: 100%;
      height: 30px;
      background-color: #e0e0e0;
      border-radius: 15px;
      overflow: hidden;
      margin: 10px 0;
    }
    .progress-bar {
      height: 100%;
      width: 0%;
      background-color: red;
      border-radius: 15px 0 0 15px;
      transition: width 0.5s, background-color 0.5s;
    }
    .hidden {
      display: none !important;
    }
  </style>
</head>
<body>
  <div class="container" id="container">
    <!-- כותרת ראשית -->
    <h1 class="main-title" id="mainTitle">מגבית ת"ת תשפ"ה</h1>
    <div class="no-print">
      <button class="button" onclick="changeMainTitleText()">שנה טקסט כותרת</button>
      <label for="mainTitleColorPicker" style="margin: 0 10px;">
        בחר צבע לכותרת:
        <input type="color" id="mainTitleColorPicker" oninput="changeMainTitleColor(this.value)" value="#000000">
      </label>
      <label style="margin: 0 10px;">גודל כותרת:
        <input type="range" min="20" max="80" value="32" id="titleSizeSlider" onchange="changeMainTitleSize(this.value)">
      </label>
      <!-- בחירת תמונת רקע -->
      <input type="file" id="bgUpload" accept="image/*" onchange="uploadBackground(event)">
      <label for="bgUpload">בחר תמונת רקע</label>
      <!-- בחירת גופן מתוך רשימת ברירת המחדל -->
      <div class="font-selection">
        <span>בחר גופן לכותרת:</span>
        <select id="fontSelect" onchange="changeFont(this.value)">
          <option value="Arial">Arial</option>
          <option value="Verdana">Verdana</option>
          <option value="Tahoma">Tahoma</option>
          <option value="'Times New Roman'">Times New Roman</option>
          <option value="Georgia">Georgia</option>
          <option value="'Courier New'">Courier New</option>
          <option value="Impact">Impact</option>
          <option value="'Comic Sans MS'">Comic Sans MS</option>
        </select>
      </div>
      <button class="button" onclick="printPage()">הדפס עמוד</button>
      <button class="button" onclick="toggleFullScreen()">מסך מלא</button>
    </div>
    
    <!-- גריד הגרפים -->
    <div class="chart-grid">
      <!-- גרף יום 1 -->
      <div class="chart" id="chart1">
        <h2 id="chart1Title">יום 1</h2>
        <div>נאסף: <span id="chart1Collected">0</span> / יעד: <span id="chart1Target">45000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress1"></div>
        </div>
        <div class="chart-buttons no-print">
          <button class="button" onclick="changeChartTitle(1)">שנה כותרת</button>
          <button class="button" onclick="changeChartCollected(1)">שנה סכום נאסף</button>
          <button class="button" onclick="changeChartTarget(1)">שנה סכום יעד</button>
        </div>
      </div>
      <!-- גרף יום 2 -->
      <div class="chart" id="chart2">
        <h2 id="chart2Title">יום 2</h2>
        <div>נאסף: <span id="chart2Collected">0</span> / יעד: <span id="chart2Target">50000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress2"></div>
        </div>
        <div class="chart-buttons no-print">
          <button class="button" onclick="changeChartTitle(2)">שנה כותרת</button>
          <button class="button" onclick="changeChartCollected(2)">שנה סכום נאסף</button>
          <button class="button" onclick="changeChartTarget(2)">שנה סכום יעד</button>
        </div>
      </div>
      <!-- גרף יום 3 -->
      <div class="chart" id="chart3">
        <h2 id="chart3Title">יום 3</h2>
        <div>נאסף: <span id="chart3Collected">0</span> / יעד: <span id="chart3Target">60000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress3"></div>
        </div>
        <div class="chart-buttons no-print">
          <button class="button" onclick="changeChartTitle(3)">שנה כותרת</button>
          <button class="button" onclick="changeChartCollected(3)">שנה סכום נאסף</button>
          <button class="button" onclick="changeChartTarget(3)">שנה סכום יעד</button>
        </div>
      </div>
      <!-- גרף סיכום כולל -->
      <div class="chart" id="chart4">
        <h2 id="chart4Title">סיכום כולל</h2>
        <div>סה"כ נאסף: <span id="chart4Collected">0</span> / יעד כולל: <span id="chart4Target">155000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress4"></div>
        </div>
        <div id="overallMessage" style="font-weight: bold; margin-top:10px;"></div>
        <div class="no-print" style="margin-top:10px;">
          <button class="button" onclick="changeChartTitle(4)">שנה כותרת הסיכום</button>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    /* משתנים גלובליים לגרפים עם ערכי יעד מעודכנים */
    let charts = {
      1: { title: "יום 1", collected: 0, target: 45000 },
      2: { title: "יום 2", collected: 0, target: 50000 },
      3: { title: "יום 3", collected: 0, target: 60000 }
    };

    function updateProgressBar(chartId, percentage) {
      const progressBar = document.getElementById("progress" + chartId);
      progressBar.style.width = Math.min(percentage, 100) + "%";
      let color = "";
      if (percentage <= 30) { color = "red"; }
      else if (percentage <= 70) { color = "orange"; }
      else if (percentage <= 100) { color = "green"; }
      else { color = "yellow"; }
      progressBar.style.backgroundColor = color;
    }

    function updateChartDisplay(chartId) {
      if (chartId === 4) {
        const totalCollected = charts[1].collected + charts[2].collected + charts[3].collected;
        const totalTarget = charts[1].target + charts[2].target + charts[3].target;
        document.getElementById("chart4Collected").innerText = totalCollected;
        document.getElementById("chart4Target").innerText = totalTarget;
        const percentage = totalTarget ? (totalCollected / totalTarget) * 100 : 0;
        updateProgressBar(4, percentage);
        updateOverallMessage(percentage);
      } else {
        const collected = charts[chartId].collected;
        const target = charts[chartId].target;
        document.getElementById("chart" + chartId + "Collected").innerText = collected;
        document.getElementById("chart" + chartId + "Target").innerText = target;
        const percentage = target ? (collected / target) * 100 : 0;
        updateProgressBar(chartId, percentage);
      }
    }

    function updateOverallMessage(percentage) {
      const messageEl = document.getElementById("overallMessage");
      let message = "";
      if (percentage <= 30) { message = "לא לחלום, חסר עדיין המון כסף!"; }
      else if (percentage <= 70) { message = "מתקדמים יפה, אבל צריך להתאמץ יותר!"; }
      else if (percentage <= 100) { message = "המשיכו כך, אתם ממש קרובים ליעד!"; }
      else { message = "אין עליכם, עבדתם מעל למצופה!"; }
      messageEl.innerText = message;
    }

    function changeChartTitle(chartId) {
      let promptText = chartId === 4 ? "גרף הסיכום" : "גרף " + chartId;
      let newTitle = prompt("הכנס כותרת חדשה ל" + promptText + ":", 
                             chartId === 4 ? document.getElementById("chart4Title").innerText : charts[chartId].title);
      if (newTitle !== null) {
        if (chartId === 4) {
          document.getElementById("chart4Title").innerText = newTitle;
        } else {
          charts[chartId].title = newTitle;
          document.getElementById("chart" + chartId + "Title").innerText = newTitle;
        }
      }
    }

    function changeChartCollected(chartId) {
      let newCollected = prompt("הכנס סכום נאסף חדש לגרף " + chartId + ":", charts[chartId].collected);
      if (newCollected !== null && !isNaN(newCollected)) {
        charts[chartId].collected = parseFloat(newCollected);
        updateChartDisplay(chartId);
        updateChartDisplay(4);
      }
    }

    function changeChartTarget(chartId) {
      let newTarget = prompt("הכנס סכום יעד חדש לגרף " + chartId + ":", charts[chartId].target);
      if (newTarget !== null && !isNaN(newTarget)) {
        charts[chartId].target = parseFloat(newTarget);
        updateChartDisplay(chartId);
        updateChartDisplay(4);
      }
    }

    updateChartDisplay(1);
    updateChartDisplay(2);
    updateChartDisplay(3);
    updateChartDisplay(4);

    function changeMainTitleText() {
      const newText = prompt("הכנס טקסט חדש לכותרת הראשית:", document.getElementById("mainTitle").innerText);
      if (newText !== null) {
        document.getElementById("mainTitle").innerText = newText;
      }
    }

    function changeMainTitleColor(newColor) {
      document.getElementById("mainTitle").style.color = newColor;
    }

    function changeMainTitleSize(value) {
      document.getElementById("mainTitle").style.fontSize = value + "px";
    }

    function uploadBackground(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
          document.body.style.backgroundImage = "url('" + e.target.result + "')";
        }
        reader.readAsDataURL(file);
      }
    }

    function changeFont(fontName) {
      document.getElementById("mainTitle").style.fontFamily = fontName + ", sans-serif";
    }

    function printPage() {
      const noPrintElements = document.querySelectorAll(".no-print");
      noPrintElements.forEach(el => el.classList.add("hidden"));
      window.print();
      noPrintElements.forEach(el => el.classList.remove("hidden"));
    }

    let isFullScreen = false;
    function toggleFullScreen() {
      if (!isFullScreen) {
        openFullscreen();
      } else {
        closeFullscreen();
      }
    }
    function openFullscreen() {
      const elem = document.documentElement;
      if (elem.requestFullscreen) { elem.requestFullscreen(); }
      else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); }
      else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); }
      document.querySelectorAll(".no-print").forEach(el => el.classList.add("hidden"));
      // הוספת מחלקת fullscreen-mode ל-container להגדלת המרווחים (50px) במצב מסך מלא
      document.getElementById("container").classList.add("fullscreen-mode");
      isFullScreen = true;
    }
    function closeFullscreen() {
      if (document.exitFullscreen) { document.exitFullscreen(); }
      else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); }
      else if (document.msExitFullscreen) { document.msExitFullscreen(); }
      document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
      document.getElementById("container").classList.remove("fullscreen-mode");
      isFullScreen = false;
    }
    document.addEventListener('fullscreenchange', () => {
      if (!document.fullscreenElement) {
        document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
        document.getElementById("container").classList.remove("fullscreen-mode");
        isFullScreen = false;
      }
    });
    document.addEventListener('webkitfullscreenchange', () => {
      if (!document.webkitFullscreenElement) {
        document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
        document.getElementById("container").classList.remove("fullscreen-mode");
        isFullScreen = false;
      }
    });
    document.addEventListener('msfullscreenchange', () => {
      if (!document.msFullscreenElement) {
        document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
        document.getElementById("container").classList.remove("fullscreen-mode");
        isFullScreen = false;
      }
    });
  </script>
</body>
</html>

                        Grok 3:

                        ae5e0adf-cbb9-40aa-8890-4c5d538189ef-image.png

                        <!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>מגבית ת"ת תשפ"ה</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            transition: background-image 0.3s;
        }
        .header {
            font-size: 2em;
            font-weight: bold;
            text-shadow: 2px 2px 4px #000;
            margin-bottom: 30px;
            color: #1e3a8a;
        }
        .graph-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            max-width: 800px;
            margin-bottom: 30px;
        }
        .graph {
            width: 350px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            text-align: center;
            transition: transform 0.2s;
        }
        .graph:hover {
            transform: translateY(-2px);
        }
        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
            margin: 15px 0;
        }
        .progress {
            height: 100%;
            transition: width 0.3s, background-color 0.3s;
        }
        .summary-text {
            margin-top: 15px;
            font-weight: bold;
            color: #555;
            font-size: 1.3em;
        }
        .buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
            justify-content: center;
        }
        .graph-buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 15px;
        }
        .button {
            padding: 12px 24px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s, transform 0.2s;
        }
        .button:hover {
            background-color: #45a049;
            transform: scale(1.05);
        }
        .fullscreen-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 12px 24px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s, transform 0.2s;
        }
        .fullscreen-button:hover {
            background-color: #45a049;
            transform: scale(1.05);
        }
        input[type="range"], input[type="color"] {
            width: 120px;
            margin: 5px;
        }
        select {
            padding: 8px;
            border-radius: 8px;
            font-size: 1em;
        }
        @media print {
            .button, .fullscreen-button, .buttons, .graph-buttons, input, select { /* הסתרת כל הלחצנים ופקדים */
                display: none !important;
            }
            .graph, .progress-bar, .progress, .header, .summary-text {
                print-color-adjust: exact;
                -webkit-print-color-adjust: exact;
            }
            body {
                background-image: inherit !important;
                background-size: cover !important;
                background-position: center !important;
                background-repeat: no-repeat !important;
                background-attachment: fixed !important;
                background-color: transparent !important;
                print-background: print; /* תאימות מלאה להדפסת רקע */
            }
        }
        @media (display-mode: fullscreen) {
            .button, .fullscreen-button, .buttons, .graph-buttons, input, select { /* הסתרת פקדים במסך מלא */
                display: none !important;
            }
        }
    </style>
</head>
<body>
    <div class="header" id="header">מגבית ת"ת תשפ"ה</div>
    <div class="graph-container">
        <div class="graph" id="graph1">
            <h3 id="title1">גיוס יום 1</h3>
            <div class="progress-bar">
                <div class="progress" id="progress1" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amount1">0</span> ₪ מתוך <span id="target1">40000</span> ₪</p>
            <div class="graph-buttons">
                <button class="button" onclick="changeTitle(1)">שנה כותרת</button>
                <button class="button" onclick="changeAmount(1)">שנה סכום</button>
                <button class="button" onclick="changeTarget(1)">שנה יעד</button>
            </div>
        </div>
        <div class="graph" id="graph2">
            <h3 id="title2">גיוס יום 2</h3>
            <div class="progress-bar">
                <div class="progress" id="progress2" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amount2">0</span> ₪ מתוך <span id="target2">45000</span> ₪</p>
            <div class="graph-buttons">
                <button class="button" onclick="changeTitle(2)">שנה כותרת</button>
                <button class="button" onclick="changeAmount(2)">שנה סכום</button>
                <button class="button" onclick="changeTarget(2)">שנה יעד</button>
            </div>
        </div>
        <div class="graph" id="graph3">
            <h3 id="title3">גיוס יום 3</h3>
            <div class="progress-bar">
                <div class="progress" id="progress3" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amount3">0</span> ₪ מתוך <span id="target3">50000</span> ₪</p>
            <div class="graph-buttons">
                <button class="button" onclick="changeTitle(3)">שנה כותרת</button>
                <button class="button" onclick="changeAmount(3)">שנה סכום</button>
                <button class="button" onclick="changeTarget(3)">שנה יעד</button>
            </div>
        </div>
        <div class="graph">
            <h3>סיכום כולל</h3>
            <div class="progress-bar">
                <div class="progress" id="progressTotal" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amountTotal">0</span> ₪ מתוך <span id="targetTotal">135000</span> ₪</p>
            <p class="summary-text" id="summaryText"></p>
        </div>
    </div>
    <div class="buttons" id="controlButtons">
        <button class="button" onclick="changeHeader()">שנה כותרת</button>
        <label for="colorPicker">בחר צבע כותרת: </label>
        <input type="color" id="colorPicker" onchange="changeColor(this.value)">
        <label for="fontSizeSlider">גודל כותרת: </label>
        <input type="range" min="1" max="5" step="0.1" value="2" id="fontSizeSlider" oninput="changeFontSize(this.value)">
        <label for="fontSelect">בחר גופן: </label>
        <select id="fontSelect" onchange="changeFont(this.value)">
            <option value="Arial">Arial</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Courier New">Courier New</option>
            <option value="Georgia">Georgia</option>
            <option value="Verdana">Verdana</option>
        </select>
        <button class="button" onclick="uploadBackground()">העלה תמונת רקע</button>
        <button class="button" onclick="printPage()">הדפס עמוד</button>
    </div>
    <button class="button fullscreen-button" id="fullscreenButton" onclick="toggleFullscreen()">מסך מלא</button>

    <script>
        let amounts = [0, 0, 0]; // סכומים שנאספו מתחילים ב-0
        let targets = [40000, 45000, 50000];
        let totalTarget = targets.reduce((a, b) => a + b, 0); // חישוב דינמי של היעד הכולל

        function updateProgress() {
            amounts.forEach((amount, index) => {
                const percentage = (amount / targets[index]) * 100;
                const progress = document.getElementById(`progress${index + 1}`);
                progress.style.width = `${percentage}%`;
                progress.style.backgroundColor = getColor(percentage);
                document.getElementById(`amount${index + 1}`).textContent = Math.round(amount); // הצגת מספרים שלמים ללא עשרוניות
                document.getElementById(`target${index + 1}`).textContent = Math.round(targets[index]); // הצגת מספרים שלמים ליעד
            });

            const totalAmount = amounts.reduce((a, b) => a + b, 0);
            totalTarget = targets.reduce((a, b) => a + b, 0); // עדכון דינמי של היעד הכולל
            const totalPercentage = (totalAmount / totalTarget) * 100;
            const progressTotal = document.getElementById('progressTotal');
            progressTotal.style.width = `${totalPercentage}%`;
            progressTotal.style.backgroundColor = getColor(totalPercentage);
            document.getElementById('amountTotal').textContent = Math.round(totalAmount); // הצגת מספרים שלמים ללא עשרוניות
            document.getElementById('targetTotal').textContent = Math.round(totalTarget); // הצגת היעד הכולל כמספר שלם

            const summaryText = document.getElementById('summaryText');
            if (totalPercentage <= 30) {
                summaryText.textContent = 'לא לחלום, חסר עדיין המון כסף!';
            } else if (totalPercentage <= 70) {
                summaryText.textContent = 'מתקדמים יפה, אבל צריך להתאמץ יותר!';
            } else if (totalPercentage <= 100) {
                summaryText.textContent = 'המשיכו כך, אתם ממש קרובים ליעד!';
            } else {
                summaryText.textContent = 'אין עליכם, עבדתם מעל למצופה!';
            }
        }

        function getColor(percentage) {
            if (percentage <= 30) return 'red';
            if (percentage <= 70) return 'orange';
            if (percentage <= 100) return 'green';
            return 'yellow';
        }

        function changeHeader() {
            const newHeader = prompt('הזן כותרת חדשה:');
            if (newHeader) {
                document.getElementById('header').textContent = newHeader;
            }
        }

        function changeColor(color) {
            document.getElementById('header').style.color = color; // עדכון מיידי של צבע הכותרת בזמן אמת
        }

        function changeFontSize(value) {
            document.getElementById('header').style.fontSize = `${value}em`;
        }

        function changeFont(font) {
            document.getElementById('header').style.fontFamily = font;
        }

        function changeTitle(day) {
            const newTitle = prompt(`הזן כותרת חדשה לגיוס יום ${day}:`);
            if (newTitle) {
                document.getElementById(`title${day}`).textContent = newTitle;
            }
        }

        function changeAmount(day) {
            const newAmount = prompt(`הזן סכום חדש (ב₪, רק מספרים שלמים) לגיוס יום ${day}:`);
            if (newAmount && !isNaN(newAmount) && !newAmount.match(/[^0-9]/)) { // בדיקה שרק מספרים שלמים מותרים
                amounts[day - 1] = Math.round(parseFloat(newAmount)); // עיגול למספר שלם
                updateProgress();
            } else {
                alert('אנא הזן מספר תקין (רק ספרות שלמות, ללא נקודות או תווים אחרים).');
            }
        }

        function changeTarget(day) {
            const newTarget = prompt(`הזן סכום יעד חדש (ב₪, רק מספרים שלמים) לגיוס יום ${day}:`);
            if (newTarget && !isNaN(newTarget) && !newTarget.match(/[^0-9]/)) { // בדיקה שרק מספרים שלמים מותרים
                targets[day - 1] = Math.round(parseFloat(newTarget)); // עיגול למספר שלם
                updateProgress();
            } else {
                alert('אנא הזן מספר תקין (רק ספרות שלמות, ללא נקודות או תווים אחרים).');
            }
        }

        function uploadBackground() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.onchange = function(event) {
                const file = event.target.files[0];
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.body.style.backgroundImage = `url(${e.target.result})`;
                    document.body.style.backgroundSize = 'cover';
                    document.body.style.backgroundPosition = 'center';
                };
                reader.readAsDataURL(file);
            };
            input.click();
        }

        function printPage() {
            const controls = document.querySelectorAll('.button, .fullscreen-button, input, select'); // הסתרת כל הפקדים
            controls.forEach(control => control.style.display = 'none');
            window.print();
            controls.forEach(control => control.style.display = ''); // החזרת הפקדים לאחר ההדפסה
        }

        function toggleFullscreen() {
            const controls = document.querySelectorAll('.button, .fullscreen-button, input, select'); // הסתרת כל הפקדים
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen();
                controls.forEach(control => control.style.display = 'none');
            } else {
                document.exitFullscreen();
                controls.forEach(control => control.style.display = ''); // החזרת הפקדים לאחר יציאה ממסך מלא
            }
        }

        // הקשבה ליציאה ממצב מסך מלא והצגת הפקדים מחדש
        document.addEventListener('fullscreenchange', () => {
            const controls = document.querySelectorAll('.button, .fullscreen-button, input, select');
            if (!document.fullscreenElement) {
                controls.forEach(control => control.style.display = '');
            }
        });

        // עדכון ראשוני של הגרפים
        updateProgress();
    </script>
</body>
</html>

                        Copilot:

                        011b404f-ee15-49d6-abe5-ebe14b9de4b0-image.png

                        <!DOCTYPE html>
<html lang="he">
<head>
    <meta charset="UTF-8">
    <title>מגבית ת"ת תשפ"ה</title>
    <!-- שימוש בפונטים מגוגל -->
    <link href="https://fonts.googleapis.com/css?family=Assistant:400,700&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            background-size: cover;
            background-position: center;
            font-family: 'Assistant', sans-serif;
            direction: rtl;
            background-color: #f0f2f5;
        }
        h1 {
            font-size: 60px;
            font-weight: bold;
            text-shadow: 2px 2px rgba(0,0,0,0.1);
            margin: 20px 0;
            color: #333;
            transition: all 0.3s ease;
            text-align: center;
        }
        .controls {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin: 10px 0;
        }
        .controls label {
            display: flex;
            flex-direction: column; /* מסדר את הטקסט מעל הלחצן */
            align-items: center;
            margin: 10px;
            font-size: 16px;
            color: #333;
        }
        .controls button,
        .controls select,
        .controls input[type="color"],
        .controls input[type="range"] {
            margin-top: 5px;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #17a2b8;
            color: #fff;
            font-size: 16px;
            transition: background-color 0.3s, transform 0.2s;
        }
        .controls button:hover,
        .controls select:hover,
        .controls input[type="color"]:hover,
        .controls input[type="range"]:hover {
            background-color: #138496;
            transform: scale(1.05);
        }
        .graphs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 20px;
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
            box-sizing: border-box;
        }
        .graph {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.2s;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .graph:hover {
            transform: translateY(-5px);
        }
        .graph h2 {
            margin: 0 0 10px 0;
        }
        .progress-container {
            background-color: #e0e0e0;
            border-radius: 5px;
            overflow: hidden;
            height: 30px;
            width: 100%;
            max-width: 300px;
        }
        .progress-bar {
            height: 100%;
            width: 0;
            transition: width 0.5s ease-in-out;
        }
        .amounts {
            font-size: 18px;
            color: #555;
            margin: 10px 0;
        }
        .percentage {
            font-size: 16px;
            font-weight: bold;
            color: #555;
            margin: 10px 0;
        }
        .graph-buttons {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
        .graph-buttons button {
            margin: 5px;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #007BFF;
            color: #fff;
            font-size: 14px;
            transition: background-color 0.3s, transform 0.2s;
        }
        .graph-buttons button:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }
        .message {
            font-size: 18px;
            font-weight: bold;
            color: #555;
            margin-top: 15px;
        }
        .bottom-controls {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin: 20px;
        }
        .bottom-controls button {
            margin-right: 10px;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #6c757d;
            color: #fff;
            font-size: 16px;
            transition: background-color 0.3s, transform 0.2s;
        }
        .bottom-controls button:hover {
            background-color: #5a6268;
            transform: scale(1.05);
        }
        .hidden {
            display: none;
        }
        @media screen and (max-width: 800px) {
            .graphs {
                grid-template-columns: 1fr;
            }
            .bottom-controls {
                justify-content: center;
            }
        }
        /* סגנונות למצב הדפסה ומסך מלא */
        @media print, (display-mode: fullscreen) {
            body {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                /* מאפשר הדפסת צבעים ותמונות רקע */
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
                background-size: cover;
                background-position: center;
            }
            .graphs {
                width: 70%;
                min-height: 70vh;
                margin: auto;
            }
            .bottom-controls {
                display: none;
            }
        }
    </style>
</head>
<body>
    <h1 id="main-title">מגבית ת"ת תשפ"ה</h1>
    <div class="controls">
        <label>
            שנה טקסט כותרת ראשית
            <button onclick="changeTitleText()">שנה טקסט כותרת ראשית</button>
        </label>
        <label>
            בחר צבע לכותרת
            <input type="color" id="title-color-picker" value="#333333">
        </label>
        <label>
            שינוי גודל הכותרת
            <input type="range" min="30" max="100" value="60" onchange="changeTitleSize(this.value)">
        </label>
        <label>
            בחר גופן לכותרת
            <select onchange="changeTitleFont(this.value)">
                <option value="'Assistant', sans-serif">Assistant</option>
                <option value="'Arial', sans-serif">Arial</option>
                <option value="'David', sans-serif">David</option>
                <option value="'Courier New', monospace">Courier New</option>
                <!-- ניתן להוסיף פונטים נוספים -->
            </select>
        </label>
    </div>
    <div class="graphs">
        <!-- גרף יום 1 -->
        <div class="graph" id="graph1">
            <h2 id="title1">יום 1</h2>
            <p class="amounts" id="amounts1"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress1"></div>
            </div>
            <p id="percentage1" class="percentage"></p>
            <div class="graph-buttons">
                <button onclick="changeGraphTitle(1)">שנה כותרת הגרף</button>
                <button onclick="changeGraphAmount(1)">עדכן סכום שנאסף</button>
                <button onclick="changeGraphTarget(1)">ערוך סכום יעד</button>
            </div>
        </div>
        <!-- גרף יום 2 -->
        <div class="graph" id="graph2">
            <h2 id="title2">יום 2</h2>
            <p class="amounts" id="amounts2"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress2"></div>
            </div>
            <p id="percentage2" class="percentage"></p>
            <div class="graph-buttons">
                <button onclick="changeGraphTitle(2)">שנה כותרת הגרף</button>
                <button onclick="changeGraphAmount(2)">עדכן סכום שנאסף</button>
                <button onclick="changeGraphTarget(2)">ערוך סכום יעד</button>
            </div>
        </div>
        <!-- גרף יום 3 -->
        <div class="graph" id="graph3">
            <h2 id="title3">יום 3</h2>
            <p class="amounts" id="amounts3"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress3"></div>
            </div>
            <p id="percentage3" class="percentage"></p>
            <div class="graph-buttons">
                <button onclick="changeGraphTitle(3)">שנה כותרת הגרף</button>
                <button onclick="changeGraphAmount(3)">עדכן סכום שנאסף</button>
                <button onclick="changeGraphTarget(3)">ערוך סכום יעד</button>
            </div>
        </div>
        <!-- גרף סיכום כולל -->
        <div class="graph" id="graph-summary">
            <h2 id="title-summary">סיכום כולל</h2>
            <p class="amounts" id="amounts-summary"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress-summary"></div>
            </div>
            <p id="percentage-summary" class="percentage"></p>
            <p class="message" id="summary-message"></p>
            <!-- לחצן שינוי כותרת הסיכום מתחת לטקסט -->
            <div class="graph-buttons">
                <button onclick="changeSummaryTitle()">שנה כותרת הסיכום</button>
            </div>
        </div>
    </div>
    <div class="bottom-controls">
        <button onclick="toggleFullScreen()">הצג במסך מלא</button>
        <button onclick="uploadBackground()">העלה תמונת רקע</button>
        <button onclick="printPage()">הדפס את העמוד</button>
    </div>
    <script>
        // ערכי ברירת מחדל
        let graphData = [
            { id: 1, title: 'יום 1', amount: 0, target: 40000 },
            { id: 2, title: 'יום 2', amount: 0, target: 45000 },
            { id: 3, title: 'יום 3', amount: 0, target: 50000 },
        ];
        function updateGraphs() {
            let totalAmount = 0;
            let totalTarget = 0;
            graphData.forEach(graph => {
                document.getElementById('title' + graph.id).innerText = graph.title;
                let progress = document.getElementById('progress' + graph.id);
                let percentText = document.getElementById('percentage' + graph.id);
                let amountsText = document.getElementById('amounts' + graph.id);
                let percent = (graph.amount / graph.target) * 100;
                if (percent > 100) percent = 100;
                progress.style.width = percent + '%';
                progress.style.backgroundColor = getColor((graph.amount / graph.target) * 100);
                percentText.innerText = Math.round(percent) + '%';
                amountsText.innerText = `נאסף: ${graph.amount.toLocaleString()} ש"ח | יעד: ${graph.target.toLocaleString()} ש"ח`;
                totalAmount += graph.amount;
                totalTarget += graph.target;
            });
            // עדכון גרף הסיכום
            let totalPercent = (totalAmount / totalTarget) * 100;
            if (totalPercent > 100) totalPercent = 100;
            let progressSummary = document.getElementById('progress-summary');
            let percentSummaryText = document.getElementById('percentage-summary');
            let amountsSummaryText = document.getElementById('amounts-summary');
            progressSummary.style.width = totalPercent + '%';
            progressSummary.style.backgroundColor = getColor((totalAmount / totalTarget) * 100);
            percentSummaryText.innerText = Math.round(totalPercent) + '%';
            amountsSummaryText.innerText = `נאסף: ${totalAmount.toLocaleString()} ש"ח | יעד: ${totalTarget.toLocaleString()} ש"ח`;
            updateSummaryMessage((totalAmount / totalTarget) * 100);
        }
        function getColor(percent) {
            if (percent <= 30) return 'red';
            else if (percent <= 70) return 'orange';
            else if (percent <= 100) return 'green';
            else return '#FFD700'; // זהב
        }
        function updateSummaryMessage(percent) {
            let message = '';
            if (percent <= 30) message = 'לא לחלום, חסר עדיין המון כסף!';
            else if (percent <= 70) message = 'מתקדמים יפה, אבל צריך להתאמץ יותר!';
            else if (percent <= 100) message = 'המשיכו כך, אתם ממש קרובים ליעד!';
            else message = 'אין עליכם, עבדתם מעל למצופה!';
            document.getElementById('summary-message').innerText = message;
        }
        function changeGraphTitle(id) {
            let graph = graphData.find(g => g.id === id);
            let newTitle = prompt('הכנס כותרת חדשה לגרף:', graph.title);
            if (newTitle) {
                graph.title = newTitle;
                updateGraphs();
            }
        }
        function changeGraphAmount(id) {
            let graph = graphData.find(g => g.id === id);
            let newAmount = prompt('הכנס סכום שנאסף בש"ח:', graph.amount);
            if (newAmount !== null && newAmount !== '' && !isNaN(newAmount) && Number.isInteger(+newAmount)) {
                graph.amount = parseInt(newAmount);
                updateGraphs();
            } else {
                alert('אנא הכנס מספר שלם תקין.');
            }
        }
        function changeGraphTarget(id) {
            let graph = graphData.find(g => g.id === id);
            let newTarget = prompt('הכנס סכום יעד בש"ח:', graph.target);
            if (newTarget !== null && newTarget !== '' && !isNaN(newTarget) && Number.isInteger(+newTarget)) {
                graph.target = parseInt(newTarget);
                updateGraphs();
            } else {
                alert('אנא הכנס מספר שלם תקין.');
            }
        }
        function changeTitleText() {
            let newTitle = prompt('הכנס טקסט כותרת ראשית חדש:', document.getElementById('main-title').innerText);
            if (newTitle) {
                document.getElementById('main-title').innerText = newTitle;
            }
        }
        function changeSummaryTitle() {
            let newTitle = prompt('הכנס כותרת חדשה לסיכום:', document.getElementById('title-summary').innerText);
            if (newTitle) {
                document.getElementById('title-summary').innerText = newTitle;
            }
        }
        function changeTitleColor(color) {
            document.getElementById('main-title').style.color = color;
        }
        document.getElementById('title-color-picker').addEventListener('input', function() {
            changeTitleColor(this.value);
        });
        function changeTitleSize(size) {
            document.getElementById('main-title').style.fontSize = size + 'px';
        }
        function changeTitleFont(font) {
            document.getElementById('main-title').style.fontFamily = font;
        }
        function uploadBackground() {
            let input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.onchange = e => {
                let file = e.target.files[0];
                let reader = new FileReader();
                reader.onload = function(event) {
                    document.body.style.backgroundImage = 'url(' + event.target.result + ')';
                };
                reader.readAsDataURL(file);
            };
            input.click();
        }
        function printPage() {
            document.querySelectorAll('button, .controls, .graph-buttons').forEach(el => el.classList.add('hidden'));
            window.print();
            document.querySelectorAll('button, .controls, .graph-buttons').forEach(el => el.classList.remove('hidden'));
        }
        function toggleFullScreen() {
            let elem = document.documentElement;
            if (!document.fullscreenElement) {
                if (elem.requestFullscreen) {
                    elem.requestFullscreen();
                }
                document.querySelectorAll('button, .controls, .bottom-controls').forEach(el => el.classList.add('hidden'));
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
                document.querySelectorAll('button, .controls, .bottom-controls').forEach(el => el.classList.remove('hidden'));
            }
        }
        document.addEventListener('fullscreenchange', () => {
            if (!document.fullscreenElement) {
                document.querySelectorAll('button, .controls, .bottom-controls').forEach(el => el.classList.remove('hidden'));
            }
        });
        // עדכון ראשוני של הגרפים
        updateGraphs();
    </script>
</body>
</html>

                        בהצלחה!
                        פלמנמוניפ מנותק
                        פלמנמוניפ מנותק
                        פלמנמוני
                        מדריכים עימוד
                        כתב נערך לאחרונה על ידי פלמנמוני
                        #12

                        @א-מ
                        ענק!!
                        אין עליך!

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

                        94dc9bfe-666a-4943-b3a6-cfc85f40dadd-image.png
                        מוצלח!!!

                        תגובה 1 תגובה אחרונה
                        1
                        • א א.מ.

                          גרפים להתקדמות בגיוס כספים בקובץ HTML

                          בס"ד

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

                          1. 3 גרפים של 3 ימי גיוס כספים שבכל אחד מהם גרף של הסכום שנאסף מול סכום היעד עם סרגל התקדמות.
                          2. גרף רביעי המכיל סכום יעד כולל וסכום שקלול של כל שלושת הגרפים האחרים.
                          3. כל ארבעת הגרפים מסודרים במרכז המסך ומצגים באופן מסודר 2 למעלה ו2 למטה בגודל אחיד.
                          4. כל גרף סכום משנה את צבעו בהתאמה לגרף סכום היעד שלידו, בין 0% עד 30% צבע אדום, בין 31% ל70% צבע כתום, בין 71% ל100% צבע ירוק, מעל 101% צבע צהוב זורח.
                          5. לגרף הסיכום הכולל יש טקסט מתחתיו שמותאם ביחס ליעד הכולל, בין 0% עד 30% לא לחלום, חסר עדיין המון כסף!, בין 31% ל70% מתקדמים יפה, אבל צריך להתאמץ יותר!, בין 71% ל100% המשיכו כך, אתם ממש קרובים ליעד!, מעל 101% אין עליכם, עבדתם מעל למצופה!
                          6. לכל גרף יש 3 לחצנים, 1 שינוי כותרת הגרף, 2 שינוי סכום הגרף, 3 שינוי סכום היעד בגרף.
                          7. כותרת כללית לעמוד בפונט מודגש עם הצללה ועם לחצן לשינוי טקסט הכותרת ולחצן לשינוי צבע וסלידר לשינוי גודל הטקסט של הכותרת.
                          8. לחצן להעלאת תמונת הרקע לעמוד מהמחשב שממורכזת למרכז המסך ומותאמת למילוי המסך.
                          9. לחצן הדפסה של העמוד ללא כל הלחצנים שבעמוד אבל עם תמונת הרקע.
                          10. לחצן מעבר למסך מלא שמסתיר את כל הלחצנים בעמוד.

                          ואלו התוצאות:

                          GPT 4o:

                          dc0c70c4-c5fa-4d91-8e66-27c919f21135-image.png

                          <!DOCTYPE html>
<html lang="he">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>מגבית ת"ת תשפ"ה</title>
  <style>
    html, body {
      height: 100%;
    }
    /* כיוון טקסט RTL, טקסט מיושר למרכז */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      direction: rtl;
      text-align: center;
    }
    /* container בגובה מלא וברוחב 75% מהמסך */
    .container {
      width: 75vw;
      margin: 0 auto;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }
    /* במצב מסך מלא – הגדלת המרווח בין הגרפים */
    .fullscreen-mode .chart-grid {
      gap: 50px;
    }
    /* במצב הדפסה – הגדלת המרווח בין הגרפים */
    @media print {
      .chart-grid {
        gap: 50px;
      }
      .no-print {
        display: none !important;
      }
      body {
        -webkit-print-color-adjust: exact;
      }
    }
    /* כותרת ראשית */
    .main-title {
      font-family: Arial, sans-serif;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
      margin-bottom: 20px;
      transition: font-size 0.3s;
    }
    /* כפתורים */
    .button {
      margin: 5px;
      padding: 8px 12px;
      border: none;
      border-radius: 4px;
      background-color: #007BFF;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s;
      text-decoration: none;
      display: inline-block;
    }
    .button:hover {
      background-color: #0056b3;
    }
    /* עיצוב לחצן בחירת תמונת רקע */
    #bgUpload {
      display: none;
    }
    label[for="bgUpload"] {
      cursor: pointer;
      margin: 5px;
      padding: 8px 12px;
      border-radius: 4px;
      background-color: #28a745;
      color: white;
      display: inline-block;
      transition: background-color 0.3s;
    }
    label[for="bgUpload"]:hover {
      background-color: #218838;
    }
    /* עיצוב בחירת גופן מתוך רשימת ברירת המחדל */
    .font-selection {
      display: inline-flex;
      align-items: center;
      margin: 5px 10px;
    }
    #fontSelect {
      padding: 6px;
      border-radius: 4px;
      margin-left: 5px;
    }
    /* הגדרת גריד להצגת הגרפים */
    .chart-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      width: 100%;
      justify-items: center;
    }
    /* עיצוב הגרף */
    .chart {
      background: rgba(255,255,255,0.6); /* שקיפות 60% */
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      width: 100%;
      /* הגרף יתפרס על 100% מתא הבית (כלומר, תופס את רוחב תא הגריד) */
    }
    .progress-bar-container {
      width: 100%;
      height: 30px;
      background-color: #e0e0e0;
      border-radius: 15px;
      overflow: hidden;
      margin: 10px 0;
    }
    .progress-bar {
      height: 100%;
      width: 0%;
      background-color: red;
      border-radius: 15px 0 0 15px;
      transition: width 0.5s, background-color 0.5s;
    }
    .hidden {
      display: none !important;
    }
  </style>
</head>
<body>
  <div class="container" id="container">
    <!-- כותרת ראשית -->
    <h1 class="main-title" id="mainTitle">מגבית ת"ת תשפ"ה</h1>
    <div class="no-print">
      <button class="button" onclick="changeMainTitleText()">שנה טקסט כותרת</button>
      <label for="mainTitleColorPicker" style="margin: 0 10px;">
        בחר צבע לכותרת:
        <input type="color" id="mainTitleColorPicker" oninput="changeMainTitleColor(this.value)" value="#000000">
      </label>
      <label style="margin: 0 10px;">גודל כותרת:
        <input type="range" min="20" max="80" value="32" id="titleSizeSlider" onchange="changeMainTitleSize(this.value)">
      </label>
      <!-- בחירת תמונת רקע -->
      <input type="file" id="bgUpload" accept="image/*" onchange="uploadBackground(event)">
      <label for="bgUpload">בחר תמונת רקע</label>
      <!-- בחירת גופן מתוך רשימת ברירת המחדל -->
      <div class="font-selection">
        <span>בחר גופן לכותרת:</span>
        <select id="fontSelect" onchange="changeFont(this.value)">
          <option value="Arial">Arial</option>
          <option value="Verdana">Verdana</option>
          <option value="Tahoma">Tahoma</option>
          <option value="'Times New Roman'">Times New Roman</option>
          <option value="Georgia">Georgia</option>
          <option value="'Courier New'">Courier New</option>
          <option value="Impact">Impact</option>
          <option value="'Comic Sans MS'">Comic Sans MS</option>
        </select>
      </div>
      <button class="button" onclick="printPage()">הדפס עמוד</button>
      <button class="button" onclick="toggleFullScreen()">מסך מלא</button>
    </div>
    
    <!-- גריד הגרפים -->
    <div class="chart-grid">
      <!-- גרף יום 1 -->
      <div class="chart" id="chart1">
        <h2 id="chart1Title">יום 1</h2>
        <div>נאסף: <span id="chart1Collected">0</span> / יעד: <span id="chart1Target">45000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress1"></div>
        </div>
        <div class="chart-buttons no-print">
          <button class="button" onclick="changeChartTitle(1)">שנה כותרת</button>
          <button class="button" onclick="changeChartCollected(1)">שנה סכום נאסף</button>
          <button class="button" onclick="changeChartTarget(1)">שנה סכום יעד</button>
        </div>
      </div>
      <!-- גרף יום 2 -->
      <div class="chart" id="chart2">
        <h2 id="chart2Title">יום 2</h2>
        <div>נאסף: <span id="chart2Collected">0</span> / יעד: <span id="chart2Target">50000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress2"></div>
        </div>
        <div class="chart-buttons no-print">
          <button class="button" onclick="changeChartTitle(2)">שנה כותרת</button>
          <button class="button" onclick="changeChartCollected(2)">שנה סכום נאסף</button>
          <button class="button" onclick="changeChartTarget(2)">שנה סכום יעד</button>
        </div>
      </div>
      <!-- גרף יום 3 -->
      <div class="chart" id="chart3">
        <h2 id="chart3Title">יום 3</h2>
        <div>נאסף: <span id="chart3Collected">0</span> / יעד: <span id="chart3Target">60000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress3"></div>
        </div>
        <div class="chart-buttons no-print">
          <button class="button" onclick="changeChartTitle(3)">שנה כותרת</button>
          <button class="button" onclick="changeChartCollected(3)">שנה סכום נאסף</button>
          <button class="button" onclick="changeChartTarget(3)">שנה סכום יעד</button>
        </div>
      </div>
      <!-- גרף סיכום כולל -->
      <div class="chart" id="chart4">
        <h2 id="chart4Title">סיכום כולל</h2>
        <div>סה"כ נאסף: <span id="chart4Collected">0</span> / יעד כולל: <span id="chart4Target">155000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress4"></div>
        </div>
        <div id="overallMessage" style="font-weight: bold; margin-top:10px;"></div>
        <div class="no-print" style="margin-top:10px;">
          <button class="button" onclick="changeChartTitle(4)">שנה כותרת הסיכום</button>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    /* משתנים גלובליים לגרפים עם ערכי יעד מעודכנים */
    let charts = {
      1: { title: "יום 1", collected: 0, target: 45000 },
      2: { title: "יום 2", collected: 0, target: 50000 },
      3: { title: "יום 3", collected: 0, target: 60000 }
    };

    function updateProgressBar(chartId, percentage) {
      const progressBar = document.getElementById("progress" + chartId);
      progressBar.style.width = Math.min(percentage, 100) + "%";
      let color = "";
      if (percentage <= 30) { color = "red"; }
      else if (percentage <= 70) { color = "orange"; }
      else if (percentage <= 100) { color = "green"; }
      else { color = "yellow"; }
      progressBar.style.backgroundColor = color;
    }

    function updateChartDisplay(chartId) {
      if (chartId === 4) {
        const totalCollected = charts[1].collected + charts[2].collected + charts[3].collected;
        const totalTarget = charts[1].target + charts[2].target + charts[3].target;
        document.getElementById("chart4Collected").innerText = totalCollected;
        document.getElementById("chart4Target").innerText = totalTarget;
        const percentage = totalTarget ? (totalCollected / totalTarget) * 100 : 0;
        updateProgressBar(4, percentage);
        updateOverallMessage(percentage);
      } else {
        const collected = charts[chartId].collected;
        const target = charts[chartId].target;
        document.getElementById("chart" + chartId + "Collected").innerText = collected;
        document.getElementById("chart" + chartId + "Target").innerText = target;
        const percentage = target ? (collected / target) * 100 : 0;
        updateProgressBar(chartId, percentage);
      }
    }

    function updateOverallMessage(percentage) {
      const messageEl = document.getElementById("overallMessage");
      let message = "";
      if (percentage <= 30) { message = "לא לחלום, חסר עדיין המון כסף!"; }
      else if (percentage <= 70) { message = "מתקדמים יפה, אבל צריך להתאמץ יותר!"; }
      else if (percentage <= 100) { message = "המשיכו כך, אתם ממש קרובים ליעד!"; }
      else { message = "אין עליכם, עבדתם מעל למצופה!"; }
      messageEl.innerText = message;
    }

    function changeChartTitle(chartId) {
      let promptText = chartId === 4 ? "גרף הסיכום" : "גרף " + chartId;
      let newTitle = prompt("הכנס כותרת חדשה ל" + promptText + ":", 
                             chartId === 4 ? document.getElementById("chart4Title").innerText : charts[chartId].title);
      if (newTitle !== null) {
        if (chartId === 4) {
          document.getElementById("chart4Title").innerText = newTitle;
        } else {
          charts[chartId].title = newTitle;
          document.getElementById("chart" + chartId + "Title").innerText = newTitle;
        }
      }
    }

    function changeChartCollected(chartId) {
      let newCollected = prompt("הכנס סכום נאסף חדש לגרף " + chartId + ":", charts[chartId].collected);
      if (newCollected !== null && !isNaN(newCollected)) {
        charts[chartId].collected = parseFloat(newCollected);
        updateChartDisplay(chartId);
        updateChartDisplay(4);
      }
    }

    function changeChartTarget(chartId) {
      let newTarget = prompt("הכנס סכום יעד חדש לגרף " + chartId + ":", charts[chartId].target);
      if (newTarget !== null && !isNaN(newTarget)) {
        charts[chartId].target = parseFloat(newTarget);
        updateChartDisplay(chartId);
        updateChartDisplay(4);
      }
    }

    updateChartDisplay(1);
    updateChartDisplay(2);
    updateChartDisplay(3);
    updateChartDisplay(4);

    function changeMainTitleText() {
      const newText = prompt("הכנס טקסט חדש לכותרת הראשית:", document.getElementById("mainTitle").innerText);
      if (newText !== null) {
        document.getElementById("mainTitle").innerText = newText;
      }
    }

    function changeMainTitleColor(newColor) {
      document.getElementById("mainTitle").style.color = newColor;
    }

    function changeMainTitleSize(value) {
      document.getElementById("mainTitle").style.fontSize = value + "px";
    }

    function uploadBackground(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
          document.body.style.backgroundImage = "url('" + e.target.result + "')";
        }
        reader.readAsDataURL(file);
      }
    }

    function changeFont(fontName) {
      document.getElementById("mainTitle").style.fontFamily = fontName + ", sans-serif";
    }

    function printPage() {
      const noPrintElements = document.querySelectorAll(".no-print");
      noPrintElements.forEach(el => el.classList.add("hidden"));
      window.print();
      noPrintElements.forEach(el => el.classList.remove("hidden"));
    }

    let isFullScreen = false;
    function toggleFullScreen() {
      if (!isFullScreen) {
        openFullscreen();
      } else {
        closeFullscreen();
      }
    }
    function openFullscreen() {
      const elem = document.documentElement;
      if (elem.requestFullscreen) { elem.requestFullscreen(); }
      else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); }
      else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); }
      document.querySelectorAll(".no-print").forEach(el => el.classList.add("hidden"));
      // הוספת מחלקת fullscreen-mode ל-container להגדלת המרווחים (50px) במצב מסך מלא
      document.getElementById("container").classList.add("fullscreen-mode");
      isFullScreen = true;
    }
    function closeFullscreen() {
      if (document.exitFullscreen) { document.exitFullscreen(); }
      else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); }
      else if (document.msExitFullscreen) { document.msExitFullscreen(); }
      document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
      document.getElementById("container").classList.remove("fullscreen-mode");
      isFullScreen = false;
    }
    document.addEventListener('fullscreenchange', () => {
      if (!document.fullscreenElement) {
        document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
        document.getElementById("container").classList.remove("fullscreen-mode");
        isFullScreen = false;
      }
    });
    document.addEventListener('webkitfullscreenchange', () => {
      if (!document.webkitFullscreenElement) {
        document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
        document.getElementById("container").classList.remove("fullscreen-mode");
        isFullScreen = false;
      }
    });
    document.addEventListener('msfullscreenchange', () => {
      if (!document.msFullscreenElement) {
        document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
        document.getElementById("container").classList.remove("fullscreen-mode");
        isFullScreen = false;
      }
    });
  </script>
</body>
</html>

                          Grok 3:

                          ae5e0adf-cbb9-40aa-8890-4c5d538189ef-image.png

                          <!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>מגבית ת"ת תשפ"ה</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            transition: background-image 0.3s;
        }
        .header {
            font-size: 2em;
            font-weight: bold;
            text-shadow: 2px 2px 4px #000;
            margin-bottom: 30px;
            color: #1e3a8a;
        }
        .graph-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            max-width: 800px;
            margin-bottom: 30px;
        }
        .graph {
            width: 350px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            text-align: center;
            transition: transform 0.2s;
        }
        .graph:hover {
            transform: translateY(-2px);
        }
        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
            margin: 15px 0;
        }
        .progress {
            height: 100%;
            transition: width 0.3s, background-color 0.3s;
        }
        .summary-text {
            margin-top: 15px;
            font-weight: bold;
            color: #555;
            font-size: 1.3em;
        }
        .buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
            justify-content: center;
        }
        .graph-buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 15px;
        }
        .button {
            padding: 12px 24px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s, transform 0.2s;
        }
        .button:hover {
            background-color: #45a049;
            transform: scale(1.05);
        }
        .fullscreen-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 12px 24px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s, transform 0.2s;
        }
        .fullscreen-button:hover {
            background-color: #45a049;
            transform: scale(1.05);
        }
        input[type="range"], input[type="color"] {
            width: 120px;
            margin: 5px;
        }
        select {
            padding: 8px;
            border-radius: 8px;
            font-size: 1em;
        }
        @media print {
            .button, .fullscreen-button, .buttons, .graph-buttons, input, select { /* הסתרת כל הלחצנים ופקדים */
                display: none !important;
            }
            .graph, .progress-bar, .progress, .header, .summary-text {
                print-color-adjust: exact;
                -webkit-print-color-adjust: exact;
            }
            body {
                background-image: inherit !important;
                background-size: cover !important;
                background-position: center !important;
                background-repeat: no-repeat !important;
                background-attachment: fixed !important;
                background-color: transparent !important;
                print-background: print; /* תאימות מלאה להדפסת רקע */
            }
        }
        @media (display-mode: fullscreen) {
            .button, .fullscreen-button, .buttons, .graph-buttons, input, select { /* הסתרת פקדים במסך מלא */
                display: none !important;
            }
        }
    </style>
</head>
<body>
    <div class="header" id="header">מגבית ת"ת תשפ"ה</div>
    <div class="graph-container">
        <div class="graph" id="graph1">
            <h3 id="title1">גיוס יום 1</h3>
            <div class="progress-bar">
                <div class="progress" id="progress1" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amount1">0</span> ₪ מתוך <span id="target1">40000</span> ₪</p>
            <div class="graph-buttons">
                <button class="button" onclick="changeTitle(1)">שנה כותרת</button>
                <button class="button" onclick="changeAmount(1)">שנה סכום</button>
                <button class="button" onclick="changeTarget(1)">שנה יעד</button>
            </div>
        </div>
        <div class="graph" id="graph2">
            <h3 id="title2">גיוס יום 2</h3>
            <div class="progress-bar">
                <div class="progress" id="progress2" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amount2">0</span> ₪ מתוך <span id="target2">45000</span> ₪</p>
            <div class="graph-buttons">
                <button class="button" onclick="changeTitle(2)">שנה כותרת</button>
                <button class="button" onclick="changeAmount(2)">שנה סכום</button>
                <button class="button" onclick="changeTarget(2)">שנה יעד</button>
            </div>
        </div>
        <div class="graph" id="graph3">
            <h3 id="title3">גיוס יום 3</h3>
            <div class="progress-bar">
                <div class="progress" id="progress3" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amount3">0</span> ₪ מתוך <span id="target3">50000</span> ₪</p>
            <div class="graph-buttons">
                <button class="button" onclick="changeTitle(3)">שנה כותרת</button>
                <button class="button" onclick="changeAmount(3)">שנה סכום</button>
                <button class="button" onclick="changeTarget(3)">שנה יעד</button>
            </div>
        </div>
        <div class="graph">
            <h3>סיכום כולל</h3>
            <div class="progress-bar">
                <div class="progress" id="progressTotal" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amountTotal">0</span> ₪ מתוך <span id="targetTotal">135000</span> ₪</p>
            <p class="summary-text" id="summaryText"></p>
        </div>
    </div>
    <div class="buttons" id="controlButtons">
        <button class="button" onclick="changeHeader()">שנה כותרת</button>
        <label for="colorPicker">בחר צבע כותרת: </label>
        <input type="color" id="colorPicker" onchange="changeColor(this.value)">
        <label for="fontSizeSlider">גודל כותרת: </label>
        <input type="range" min="1" max="5" step="0.1" value="2" id="fontSizeSlider" oninput="changeFontSize(this.value)">
        <label for="fontSelect">בחר גופן: </label>
        <select id="fontSelect" onchange="changeFont(this.value)">
            <option value="Arial">Arial</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Courier New">Courier New</option>
            <option value="Georgia">Georgia</option>
            <option value="Verdana">Verdana</option>
        </select>
        <button class="button" onclick="uploadBackground()">העלה תמונת רקע</button>
        <button class="button" onclick="printPage()">הדפס עמוד</button>
    </div>
    <button class="button fullscreen-button" id="fullscreenButton" onclick="toggleFullscreen()">מסך מלא</button>

    <script>
        let amounts = [0, 0, 0]; // סכומים שנאספו מתחילים ב-0
        let targets = [40000, 45000, 50000];
        let totalTarget = targets.reduce((a, b) => a + b, 0); // חישוב דינמי של היעד הכולל

        function updateProgress() {
            amounts.forEach((amount, index) => {
                const percentage = (amount / targets[index]) * 100;
                const progress = document.getElementById(`progress${index + 1}`);
                progress.style.width = `${percentage}%`;
                progress.style.backgroundColor = getColor(percentage);
                document.getElementById(`amount${index + 1}`).textContent = Math.round(amount); // הצגת מספרים שלמים ללא עשרוניות
                document.getElementById(`target${index + 1}`).textContent = Math.round(targets[index]); // הצגת מספרים שלמים ליעד
            });

            const totalAmount = amounts.reduce((a, b) => a + b, 0);
            totalTarget = targets.reduce((a, b) => a + b, 0); // עדכון דינמי של היעד הכולל
            const totalPercentage = (totalAmount / totalTarget) * 100;
            const progressTotal = document.getElementById('progressTotal');
            progressTotal.style.width = `${totalPercentage}%`;
            progressTotal.style.backgroundColor = getColor(totalPercentage);
            document.getElementById('amountTotal').textContent = Math.round(totalAmount); // הצגת מספרים שלמים ללא עשרוניות
            document.getElementById('targetTotal').textContent = Math.round(totalTarget); // הצגת היעד הכולל כמספר שלם

            const summaryText = document.getElementById('summaryText');
            if (totalPercentage <= 30) {
                summaryText.textContent = 'לא לחלום, חסר עדיין המון כסף!';
            } else if (totalPercentage <= 70) {
                summaryText.textContent = 'מתקדמים יפה, אבל צריך להתאמץ יותר!';
            } else if (totalPercentage <= 100) {
                summaryText.textContent = 'המשיכו כך, אתם ממש קרובים ליעד!';
            } else {
                summaryText.textContent = 'אין עליכם, עבדתם מעל למצופה!';
            }
        }

        function getColor(percentage) {
            if (percentage <= 30) return 'red';
            if (percentage <= 70) return 'orange';
            if (percentage <= 100) return 'green';
            return 'yellow';
        }

        function changeHeader() {
            const newHeader = prompt('הזן כותרת חדשה:');
            if (newHeader) {
                document.getElementById('header').textContent = newHeader;
            }
        }

        function changeColor(color) {
            document.getElementById('header').style.color = color; // עדכון מיידי של צבע הכותרת בזמן אמת
        }

        function changeFontSize(value) {
            document.getElementById('header').style.fontSize = `${value}em`;
        }

        function changeFont(font) {
            document.getElementById('header').style.fontFamily = font;
        }

        function changeTitle(day) {
            const newTitle = prompt(`הזן כותרת חדשה לגיוס יום ${day}:`);
            if (newTitle) {
                document.getElementById(`title${day}`).textContent = newTitle;
            }
        }

        function changeAmount(day) {
            const newAmount = prompt(`הזן סכום חדש (ב₪, רק מספרים שלמים) לגיוס יום ${day}:`);
            if (newAmount && !isNaN(newAmount) && !newAmount.match(/[^0-9]/)) { // בדיקה שרק מספרים שלמים מותרים
                amounts[day - 1] = Math.round(parseFloat(newAmount)); // עיגול למספר שלם
                updateProgress();
            } else {
                alert('אנא הזן מספר תקין (רק ספרות שלמות, ללא נקודות או תווים אחרים).');
            }
        }

        function changeTarget(day) {
            const newTarget = prompt(`הזן סכום יעד חדש (ב₪, רק מספרים שלמים) לגיוס יום ${day}:`);
            if (newTarget && !isNaN(newTarget) && !newTarget.match(/[^0-9]/)) { // בדיקה שרק מספרים שלמים מותרים
                targets[day - 1] = Math.round(parseFloat(newTarget)); // עיגול למספר שלם
                updateProgress();
            } else {
                alert('אנא הזן מספר תקין (רק ספרות שלמות, ללא נקודות או תווים אחרים).');
            }
        }

        function uploadBackground() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.onchange = function(event) {
                const file = event.target.files[0];
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.body.style.backgroundImage = `url(${e.target.result})`;
                    document.body.style.backgroundSize = 'cover';
                    document.body.style.backgroundPosition = 'center';
                };
                reader.readAsDataURL(file);
            };
            input.click();
        }

        function printPage() {
            const controls = document.querySelectorAll('.button, .fullscreen-button, input, select'); // הסתרת כל הפקדים
            controls.forEach(control => control.style.display = 'none');
            window.print();
            controls.forEach(control => control.style.display = ''); // החזרת הפקדים לאחר ההדפסה
        }

        function toggleFullscreen() {
            const controls = document.querySelectorAll('.button, .fullscreen-button, input, select'); // הסתרת כל הפקדים
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen();
                controls.forEach(control => control.style.display = 'none');
            } else {
                document.exitFullscreen();
                controls.forEach(control => control.style.display = ''); // החזרת הפקדים לאחר יציאה ממסך מלא
            }
        }

        // הקשבה ליציאה ממצב מסך מלא והצגת הפקדים מחדש
        document.addEventListener('fullscreenchange', () => {
            const controls = document.querySelectorAll('.button, .fullscreen-button, input, select');
            if (!document.fullscreenElement) {
                controls.forEach(control => control.style.display = '');
            }
        });

        // עדכון ראשוני של הגרפים
        updateProgress();
    </script>
</body>
</html>

                          Copilot:

                          011b404f-ee15-49d6-abe5-ebe14b9de4b0-image.png

                          <!DOCTYPE html>
<html lang="he">
<head>
    <meta charset="UTF-8">
    <title>מגבית ת"ת תשפ"ה</title>
    <!-- שימוש בפונטים מגוגל -->
    <link href="https://fonts.googleapis.com/css?family=Assistant:400,700&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            background-size: cover;
            background-position: center;
            font-family: 'Assistant', sans-serif;
            direction: rtl;
            background-color: #f0f2f5;
        }
        h1 {
            font-size: 60px;
            font-weight: bold;
            text-shadow: 2px 2px rgba(0,0,0,0.1);
            margin: 20px 0;
            color: #333;
            transition: all 0.3s ease;
            text-align: center;
        }
        .controls {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin: 10px 0;
        }
        .controls label {
            display: flex;
            flex-direction: column; /* מסדר את הטקסט מעל הלחצן */
            align-items: center;
            margin: 10px;
            font-size: 16px;
            color: #333;
        }
        .controls button,
        .controls select,
        .controls input[type="color"],
        .controls input[type="range"] {
            margin-top: 5px;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #17a2b8;
            color: #fff;
            font-size: 16px;
            transition: background-color 0.3s, transform 0.2s;
        }
        .controls button:hover,
        .controls select:hover,
        .controls input[type="color"]:hover,
        .controls input[type="range"]:hover {
            background-color: #138496;
            transform: scale(1.05);
        }
        .graphs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 20px;
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
            box-sizing: border-box;
        }
        .graph {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.2s;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .graph:hover {
            transform: translateY(-5px);
        }
        .graph h2 {
            margin: 0 0 10px 0;
        }
        .progress-container {
            background-color: #e0e0e0;
            border-radius: 5px;
            overflow: hidden;
            height: 30px;
            width: 100%;
            max-width: 300px;
        }
        .progress-bar {
            height: 100%;
            width: 0;
            transition: width 0.5s ease-in-out;
        }
        .amounts {
            font-size: 18px;
            color: #555;
            margin: 10px 0;
        }
        .percentage {
            font-size: 16px;
            font-weight: bold;
            color: #555;
            margin: 10px 0;
        }
        .graph-buttons {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
        .graph-buttons button {
            margin: 5px;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #007BFF;
            color: #fff;
            font-size: 14px;
            transition: background-color 0.3s, transform 0.2s;
        }
        .graph-buttons button:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }
        .message {
            font-size: 18px;
            font-weight: bold;
            color: #555;
            margin-top: 15px;
        }
        .bottom-controls {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin: 20px;
        }
        .bottom-controls button {
            margin-right: 10px;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #6c757d;
            color: #fff;
            font-size: 16px;
            transition: background-color 0.3s, transform 0.2s;
        }
        .bottom-controls button:hover {
            background-color: #5a6268;
            transform: scale(1.05);
        }
        .hidden {
            display: none;
        }
        @media screen and (max-width: 800px) {
            .graphs {
                grid-template-columns: 1fr;
            }
            .bottom-controls {
                justify-content: center;
            }
        }
        /* סגנונות למצב הדפסה ומסך מלא */
        @media print, (display-mode: fullscreen) {
            body {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                /* מאפשר הדפסת צבעים ותמונות רקע */
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
                background-size: cover;
                background-position: center;
            }
            .graphs {
                width: 70%;
                min-height: 70vh;
                margin: auto;
            }
            .bottom-controls {
                display: none;
            }
        }
    </style>
</head>
<body>
    <h1 id="main-title">מגבית ת"ת תשפ"ה</h1>
    <div class="controls">
        <label>
            שנה טקסט כותרת ראשית
            <button onclick="changeTitleText()">שנה טקסט כותרת ראשית</button>
        </label>
        <label>
            בחר צבע לכותרת
            <input type="color" id="title-color-picker" value="#333333">
        </label>
        <label>
            שינוי גודל הכותרת
            <input type="range" min="30" max="100" value="60" onchange="changeTitleSize(this.value)">
        </label>
        <label>
            בחר גופן לכותרת
            <select onchange="changeTitleFont(this.value)">
                <option value="'Assistant', sans-serif">Assistant</option>
                <option value="'Arial', sans-serif">Arial</option>
                <option value="'David', sans-serif">David</option>
                <option value="'Courier New', monospace">Courier New</option>
                <!-- ניתן להוסיף פונטים נוספים -->
            </select>
        </label>
    </div>
    <div class="graphs">
        <!-- גרף יום 1 -->
        <div class="graph" id="graph1">
            <h2 id="title1">יום 1</h2>
            <p class="amounts" id="amounts1"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress1"></div>
            </div>
            <p id="percentage1" class="percentage"></p>
            <div class="graph-buttons">
                <button onclick="changeGraphTitle(1)">שנה כותרת הגרף</button>
                <button onclick="changeGraphAmount(1)">עדכן סכום שנאסף</button>
                <button onclick="changeGraphTarget(1)">ערוך סכום יעד</button>
            </div>
        </div>
        <!-- גרף יום 2 -->
        <div class="graph" id="graph2">
            <h2 id="title2">יום 2</h2>
            <p class="amounts" id="amounts2"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress2"></div>
            </div>
            <p id="percentage2" class="percentage"></p>
            <div class="graph-buttons">
                <button onclick="changeGraphTitle(2)">שנה כותרת הגרף</button>
                <button onclick="changeGraphAmount(2)">עדכן סכום שנאסף</button>
                <button onclick="changeGraphTarget(2)">ערוך סכום יעד</button>
            </div>
        </div>
        <!-- גרף יום 3 -->
        <div class="graph" id="graph3">
            <h2 id="title3">יום 3</h2>
            <p class="amounts" id="amounts3"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress3"></div>
            </div>
            <p id="percentage3" class="percentage"></p>
            <div class="graph-buttons">
                <button onclick="changeGraphTitle(3)">שנה כותרת הגרף</button>
                <button onclick="changeGraphAmount(3)">עדכן סכום שנאסף</button>
                <button onclick="changeGraphTarget(3)">ערוך סכום יעד</button>
            </div>
        </div>
        <!-- גרף סיכום כולל -->
        <div class="graph" id="graph-summary">
            <h2 id="title-summary">סיכום כולל</h2>
            <p class="amounts" id="amounts-summary"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress-summary"></div>
            </div>
            <p id="percentage-summary" class="percentage"></p>
            <p class="message" id="summary-message"></p>
            <!-- לחצן שינוי כותרת הסיכום מתחת לטקסט -->
            <div class="graph-buttons">
                <button onclick="changeSummaryTitle()">שנה כותרת הסיכום</button>
            </div>
        </div>
    </div>
    <div class="bottom-controls">
        <button onclick="toggleFullScreen()">הצג במסך מלא</button>
        <button onclick="uploadBackground()">העלה תמונת רקע</button>
        <button onclick="printPage()">הדפס את העמוד</button>
    </div>
    <script>
        // ערכי ברירת מחדל
        let graphData = [
            { id: 1, title: 'יום 1', amount: 0, target: 40000 },
            { id: 2, title: 'יום 2', amount: 0, target: 45000 },
            { id: 3, title: 'יום 3', amount: 0, target: 50000 },
        ];
        function updateGraphs() {
            let totalAmount = 0;
            let totalTarget = 0;
            graphData.forEach(graph => {
                document.getElementById('title' + graph.id).innerText = graph.title;
                let progress = document.getElementById('progress' + graph.id);
                let percentText = document.getElementById('percentage' + graph.id);
                let amountsText = document.getElementById('amounts' + graph.id);
                let percent = (graph.amount / graph.target) * 100;
                if (percent > 100) percent = 100;
                progress.style.width = percent + '%';
                progress.style.backgroundColor = getColor((graph.amount / graph.target) * 100);
                percentText.innerText = Math.round(percent) + '%';
                amountsText.innerText = `נאסף: ${graph.amount.toLocaleString()} ש"ח | יעד: ${graph.target.toLocaleString()} ש"ח`;
                totalAmount += graph.amount;
                totalTarget += graph.target;
            });
            // עדכון גרף הסיכום
            let totalPercent = (totalAmount / totalTarget) * 100;
            if (totalPercent > 100) totalPercent = 100;
            let progressSummary = document.getElementById('progress-summary');
            let percentSummaryText = document.getElementById('percentage-summary');
            let amountsSummaryText = document.getElementById('amounts-summary');
            progressSummary.style.width = totalPercent + '%';
            progressSummary.style.backgroundColor = getColor((totalAmount / totalTarget) * 100);
            percentSummaryText.innerText = Math.round(totalPercent) + '%';
            amountsSummaryText.innerText = `נאסף: ${totalAmount.toLocaleString()} ש"ח | יעד: ${totalTarget.toLocaleString()} ש"ח`;
            updateSummaryMessage((totalAmount / totalTarget) * 100);
        }
        function getColor(percent) {
            if (percent <= 30) return 'red';
            else if (percent <= 70) return 'orange';
            else if (percent <= 100) return 'green';
            else return '#FFD700'; // זהב
        }
        function updateSummaryMessage(percent) {
            let message = '';
            if (percent <= 30) message = 'לא לחלום, חסר עדיין המון כסף!';
            else if (percent <= 70) message = 'מתקדמים יפה, אבל צריך להתאמץ יותר!';
            else if (percent <= 100) message = 'המשיכו כך, אתם ממש קרובים ליעד!';
            else message = 'אין עליכם, עבדתם מעל למצופה!';
            document.getElementById('summary-message').innerText = message;
        }
        function changeGraphTitle(id) {
            let graph = graphData.find(g => g.id === id);
            let newTitle = prompt('הכנס כותרת חדשה לגרף:', graph.title);
            if (newTitle) {
                graph.title = newTitle;
                updateGraphs();
            }
        }
        function changeGraphAmount(id) {
            let graph = graphData.find(g => g.id === id);
            let newAmount = prompt('הכנס סכום שנאסף בש"ח:', graph.amount);
            if (newAmount !== null && newAmount !== '' && !isNaN(newAmount) && Number.isInteger(+newAmount)) {
                graph.amount = parseInt(newAmount);
                updateGraphs();
            } else {
                alert('אנא הכנס מספר שלם תקין.');
            }
        }
        function changeGraphTarget(id) {
            let graph = graphData.find(g => g.id === id);
            let newTarget = prompt('הכנס סכום יעד בש"ח:', graph.target);
            if (newTarget !== null && newTarget !== '' && !isNaN(newTarget) && Number.isInteger(+newTarget)) {
                graph.target = parseInt(newTarget);
                updateGraphs();
            } else {
                alert('אנא הכנס מספר שלם תקין.');
            }
        }
        function changeTitleText() {
            let newTitle = prompt('הכנס טקסט כותרת ראשית חדש:', document.getElementById('main-title').innerText);
            if (newTitle) {
                document.getElementById('main-title').innerText = newTitle;
            }
        }
        function changeSummaryTitle() {
            let newTitle = prompt('הכנס כותרת חדשה לסיכום:', document.getElementById('title-summary').innerText);
            if (newTitle) {
                document.getElementById('title-summary').innerText = newTitle;
            }
        }
        function changeTitleColor(color) {
            document.getElementById('main-title').style.color = color;
        }
        document.getElementById('title-color-picker').addEventListener('input', function() {
            changeTitleColor(this.value);
        });
        function changeTitleSize(size) {
            document.getElementById('main-title').style.fontSize = size + 'px';
        }
        function changeTitleFont(font) {
            document.getElementById('main-title').style.fontFamily = font;
        }
        function uploadBackground() {
            let input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.onchange = e => {
                let file = e.target.files[0];
                let reader = new FileReader();
                reader.onload = function(event) {
                    document.body.style.backgroundImage = 'url(' + event.target.result + ')';
                };
                reader.readAsDataURL(file);
            };
            input.click();
        }
        function printPage() {
            document.querySelectorAll('button, .controls, .graph-buttons').forEach(el => el.classList.add('hidden'));
            window.print();
            document.querySelectorAll('button, .controls, .graph-buttons').forEach(el => el.classList.remove('hidden'));
        }
        function toggleFullScreen() {
            let elem = document.documentElement;
            if (!document.fullscreenElement) {
                if (elem.requestFullscreen) {
                    elem.requestFullscreen();
                }
                document.querySelectorAll('button, .controls, .bottom-controls').forEach(el => el.classList.add('hidden'));
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
                document.querySelectorAll('button, .controls, .bottom-controls').forEach(el => el.classList.remove('hidden'));
            }
        }
        document.addEventListener('fullscreenchange', () => {
            if (!document.fullscreenElement) {
                document.querySelectorAll('button, .controls, .bottom-controls').forEach(el => el.classList.remove('hidden'));
            }
        });
        // עדכון ראשוני של הגרפים
        updateGraphs();
    </script>
</body>
</html>

                          בהצלחה!
                          ה מנותק
                          ה מנותק
                          החכם השלם
                          כתב נערך לאחרונה על ידי
                          #13

                          @א-מ תודה רבה!
                          אגב, יש אופציה לעשות שיהיה ניתן להוסיף ימים?

                          א 2 תגובות תגובה אחרונה
                          0
                          • ה החכם השלם

                            @א-מ תודה רבה!
                            אגב, יש אופציה לעשות שיהיה ניתן להוסיף ימים?

                            א מחובר
                            א מחובר
                            א.מ.
                            מדריכים
                            כתב נערך לאחרונה על ידי א.מ.
                            #14

                            @החכם-השלם לא, אבל אתה יכול לנסות בעצמך עם הכלי שהכי התרשמת ממנו...

                            תגובה 1 תגובה אחרונה
                            1
                            • א א.מ.

                              גרפים להתקדמות בגיוס כספים בקובץ HTML

                              בס"ד

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

                              1. 3 גרפים של 3 ימי גיוס כספים שבכל אחד מהם גרף של הסכום שנאסף מול סכום היעד עם סרגל התקדמות.
                              2. גרף רביעי המכיל סכום יעד כולל וסכום שקלול של כל שלושת הגרפים האחרים.
                              3. כל ארבעת הגרפים מסודרים במרכז המסך ומצגים באופן מסודר 2 למעלה ו2 למטה בגודל אחיד.
                              4. כל גרף סכום משנה את צבעו בהתאמה לגרף סכום היעד שלידו, בין 0% עד 30% צבע אדום, בין 31% ל70% צבע כתום, בין 71% ל100% צבע ירוק, מעל 101% צבע צהוב זורח.
                              5. לגרף הסיכום הכולל יש טקסט מתחתיו שמותאם ביחס ליעד הכולל, בין 0% עד 30% לא לחלום, חסר עדיין המון כסף!, בין 31% ל70% מתקדמים יפה, אבל צריך להתאמץ יותר!, בין 71% ל100% המשיכו כך, אתם ממש קרובים ליעד!, מעל 101% אין עליכם, עבדתם מעל למצופה!
                              6. לכל גרף יש 3 לחצנים, 1 שינוי כותרת הגרף, 2 שינוי סכום הגרף, 3 שינוי סכום היעד בגרף.
                              7. כותרת כללית לעמוד בפונט מודגש עם הצללה ועם לחצן לשינוי טקסט הכותרת ולחצן לשינוי צבע וסלידר לשינוי גודל הטקסט של הכותרת.
                              8. לחצן להעלאת תמונת הרקע לעמוד מהמחשב שממורכזת למרכז המסך ומותאמת למילוי המסך.
                              9. לחצן הדפסה של העמוד ללא כל הלחצנים שבעמוד אבל עם תמונת הרקע.
                              10. לחצן מעבר למסך מלא שמסתיר את כל הלחצנים בעמוד.

                              ואלו התוצאות:

                              GPT 4o:

                              dc0c70c4-c5fa-4d91-8e66-27c919f21135-image.png

                              <!DOCTYPE html>
<html lang="he">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>מגבית ת"ת תשפ"ה</title>
  <style>
    html, body {
      height: 100%;
    }
    /* כיוון טקסט RTL, טקסט מיושר למרכז */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      direction: rtl;
      text-align: center;
    }
    /* container בגובה מלא וברוחב 75% מהמסך */
    .container {
      width: 75vw;
      margin: 0 auto;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }
    /* במצב מסך מלא – הגדלת המרווח בין הגרפים */
    .fullscreen-mode .chart-grid {
      gap: 50px;
    }
    /* במצב הדפסה – הגדלת המרווח בין הגרפים */
    @media print {
      .chart-grid {
        gap: 50px;
      }
      .no-print {
        display: none !important;
      }
      body {
        -webkit-print-color-adjust: exact;
      }
    }
    /* כותרת ראשית */
    .main-title {
      font-family: Arial, sans-serif;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
      margin-bottom: 20px;
      transition: font-size 0.3s;
    }
    /* כפתורים */
    .button {
      margin: 5px;
      padding: 8px 12px;
      border: none;
      border-radius: 4px;
      background-color: #007BFF;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s;
      text-decoration: none;
      display: inline-block;
    }
    .button:hover {
      background-color: #0056b3;
    }
    /* עיצוב לחצן בחירת תמונת רקע */
    #bgUpload {
      display: none;
    }
    label[for="bgUpload"] {
      cursor: pointer;
      margin: 5px;
      padding: 8px 12px;
      border-radius: 4px;
      background-color: #28a745;
      color: white;
      display: inline-block;
      transition: background-color 0.3s;
    }
    label[for="bgUpload"]:hover {
      background-color: #218838;
    }
    /* עיצוב בחירת גופן מתוך רשימת ברירת המחדל */
    .font-selection {
      display: inline-flex;
      align-items: center;
      margin: 5px 10px;
    }
    #fontSelect {
      padding: 6px;
      border-radius: 4px;
      margin-left: 5px;
    }
    /* הגדרת גריד להצגת הגרפים */
    .chart-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      width: 100%;
      justify-items: center;
    }
    /* עיצוב הגרף */
    .chart {
      background: rgba(255,255,255,0.6); /* שקיפות 60% */
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      width: 100%;
      /* הגרף יתפרס על 100% מתא הבית (כלומר, תופס את רוחב תא הגריד) */
    }
    .progress-bar-container {
      width: 100%;
      height: 30px;
      background-color: #e0e0e0;
      border-radius: 15px;
      overflow: hidden;
      margin: 10px 0;
    }
    .progress-bar {
      height: 100%;
      width: 0%;
      background-color: red;
      border-radius: 15px 0 0 15px;
      transition: width 0.5s, background-color 0.5s;
    }
    .hidden {
      display: none !important;
    }
  </style>
</head>
<body>
  <div class="container" id="container">
    <!-- כותרת ראשית -->
    <h1 class="main-title" id="mainTitle">מגבית ת"ת תשפ"ה</h1>
    <div class="no-print">
      <button class="button" onclick="changeMainTitleText()">שנה טקסט כותרת</button>
      <label for="mainTitleColorPicker" style="margin: 0 10px;">
        בחר צבע לכותרת:
        <input type="color" id="mainTitleColorPicker" oninput="changeMainTitleColor(this.value)" value="#000000">
      </label>
      <label style="margin: 0 10px;">גודל כותרת:
        <input type="range" min="20" max="80" value="32" id="titleSizeSlider" onchange="changeMainTitleSize(this.value)">
      </label>
      <!-- בחירת תמונת רקע -->
      <input type="file" id="bgUpload" accept="image/*" onchange="uploadBackground(event)">
      <label for="bgUpload">בחר תמונת רקע</label>
      <!-- בחירת גופן מתוך רשימת ברירת המחדל -->
      <div class="font-selection">
        <span>בחר גופן לכותרת:</span>
        <select id="fontSelect" onchange="changeFont(this.value)">
          <option value="Arial">Arial</option>
          <option value="Verdana">Verdana</option>
          <option value="Tahoma">Tahoma</option>
          <option value="'Times New Roman'">Times New Roman</option>
          <option value="Georgia">Georgia</option>
          <option value="'Courier New'">Courier New</option>
          <option value="Impact">Impact</option>
          <option value="'Comic Sans MS'">Comic Sans MS</option>
        </select>
      </div>
      <button class="button" onclick="printPage()">הדפס עמוד</button>
      <button class="button" onclick="toggleFullScreen()">מסך מלא</button>
    </div>
    
    <!-- גריד הגרפים -->
    <div class="chart-grid">
      <!-- גרף יום 1 -->
      <div class="chart" id="chart1">
        <h2 id="chart1Title">יום 1</h2>
        <div>נאסף: <span id="chart1Collected">0</span> / יעד: <span id="chart1Target">45000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress1"></div>
        </div>
        <div class="chart-buttons no-print">
          <button class="button" onclick="changeChartTitle(1)">שנה כותרת</button>
          <button class="button" onclick="changeChartCollected(1)">שנה סכום נאסף</button>
          <button class="button" onclick="changeChartTarget(1)">שנה סכום יעד</button>
        </div>
      </div>
      <!-- גרף יום 2 -->
      <div class="chart" id="chart2">
        <h2 id="chart2Title">יום 2</h2>
        <div>נאסף: <span id="chart2Collected">0</span> / יעד: <span id="chart2Target">50000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress2"></div>
        </div>
        <div class="chart-buttons no-print">
          <button class="button" onclick="changeChartTitle(2)">שנה כותרת</button>
          <button class="button" onclick="changeChartCollected(2)">שנה סכום נאסף</button>
          <button class="button" onclick="changeChartTarget(2)">שנה סכום יעד</button>
        </div>
      </div>
      <!-- גרף יום 3 -->
      <div class="chart" id="chart3">
        <h2 id="chart3Title">יום 3</h2>
        <div>נאסף: <span id="chart3Collected">0</span> / יעד: <span id="chart3Target">60000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress3"></div>
        </div>
        <div class="chart-buttons no-print">
          <button class="button" onclick="changeChartTitle(3)">שנה כותרת</button>
          <button class="button" onclick="changeChartCollected(3)">שנה סכום נאסף</button>
          <button class="button" onclick="changeChartTarget(3)">שנה סכום יעד</button>
        </div>
      </div>
      <!-- גרף סיכום כולל -->
      <div class="chart" id="chart4">
        <h2 id="chart4Title">סיכום כולל</h2>
        <div>סה"כ נאסף: <span id="chart4Collected">0</span> / יעד כולל: <span id="chart4Target">155000</span></div>
        <div class="progress-bar-container">
          <div class="progress-bar" id="progress4"></div>
        </div>
        <div id="overallMessage" style="font-weight: bold; margin-top:10px;"></div>
        <div class="no-print" style="margin-top:10px;">
          <button class="button" onclick="changeChartTitle(4)">שנה כותרת הסיכום</button>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    /* משתנים גלובליים לגרפים עם ערכי יעד מעודכנים */
    let charts = {
      1: { title: "יום 1", collected: 0, target: 45000 },
      2: { title: "יום 2", collected: 0, target: 50000 },
      3: { title: "יום 3", collected: 0, target: 60000 }
    };

    function updateProgressBar(chartId, percentage) {
      const progressBar = document.getElementById("progress" + chartId);
      progressBar.style.width = Math.min(percentage, 100) + "%";
      let color = "";
      if (percentage <= 30) { color = "red"; }
      else if (percentage <= 70) { color = "orange"; }
      else if (percentage <= 100) { color = "green"; }
      else { color = "yellow"; }
      progressBar.style.backgroundColor = color;
    }

    function updateChartDisplay(chartId) {
      if (chartId === 4) {
        const totalCollected = charts[1].collected + charts[2].collected + charts[3].collected;
        const totalTarget = charts[1].target + charts[2].target + charts[3].target;
        document.getElementById("chart4Collected").innerText = totalCollected;
        document.getElementById("chart4Target").innerText = totalTarget;
        const percentage = totalTarget ? (totalCollected / totalTarget) * 100 : 0;
        updateProgressBar(4, percentage);
        updateOverallMessage(percentage);
      } else {
        const collected = charts[chartId].collected;
        const target = charts[chartId].target;
        document.getElementById("chart" + chartId + "Collected").innerText = collected;
        document.getElementById("chart" + chartId + "Target").innerText = target;
        const percentage = target ? (collected / target) * 100 : 0;
        updateProgressBar(chartId, percentage);
      }
    }

    function updateOverallMessage(percentage) {
      const messageEl = document.getElementById("overallMessage");
      let message = "";
      if (percentage <= 30) { message = "לא לחלום, חסר עדיין המון כסף!"; }
      else if (percentage <= 70) { message = "מתקדמים יפה, אבל צריך להתאמץ יותר!"; }
      else if (percentage <= 100) { message = "המשיכו כך, אתם ממש קרובים ליעד!"; }
      else { message = "אין עליכם, עבדתם מעל למצופה!"; }
      messageEl.innerText = message;
    }

    function changeChartTitle(chartId) {
      let promptText = chartId === 4 ? "גרף הסיכום" : "גרף " + chartId;
      let newTitle = prompt("הכנס כותרת חדשה ל" + promptText + ":", 
                             chartId === 4 ? document.getElementById("chart4Title").innerText : charts[chartId].title);
      if (newTitle !== null) {
        if (chartId === 4) {
          document.getElementById("chart4Title").innerText = newTitle;
        } else {
          charts[chartId].title = newTitle;
          document.getElementById("chart" + chartId + "Title").innerText = newTitle;
        }
      }
    }

    function changeChartCollected(chartId) {
      let newCollected = prompt("הכנס סכום נאסף חדש לגרף " + chartId + ":", charts[chartId].collected);
      if (newCollected !== null && !isNaN(newCollected)) {
        charts[chartId].collected = parseFloat(newCollected);
        updateChartDisplay(chartId);
        updateChartDisplay(4);
      }
    }

    function changeChartTarget(chartId) {
      let newTarget = prompt("הכנס סכום יעד חדש לגרף " + chartId + ":", charts[chartId].target);
      if (newTarget !== null && !isNaN(newTarget)) {
        charts[chartId].target = parseFloat(newTarget);
        updateChartDisplay(chartId);
        updateChartDisplay(4);
      }
    }

    updateChartDisplay(1);
    updateChartDisplay(2);
    updateChartDisplay(3);
    updateChartDisplay(4);

    function changeMainTitleText() {
      const newText = prompt("הכנס טקסט חדש לכותרת הראשית:", document.getElementById("mainTitle").innerText);
      if (newText !== null) {
        document.getElementById("mainTitle").innerText = newText;
      }
    }

    function changeMainTitleColor(newColor) {
      document.getElementById("mainTitle").style.color = newColor;
    }

    function changeMainTitleSize(value) {
      document.getElementById("mainTitle").style.fontSize = value + "px";
    }

    function uploadBackground(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
          document.body.style.backgroundImage = "url('" + e.target.result + "')";
        }
        reader.readAsDataURL(file);
      }
    }

    function changeFont(fontName) {
      document.getElementById("mainTitle").style.fontFamily = fontName + ", sans-serif";
    }

    function printPage() {
      const noPrintElements = document.querySelectorAll(".no-print");
      noPrintElements.forEach(el => el.classList.add("hidden"));
      window.print();
      noPrintElements.forEach(el => el.classList.remove("hidden"));
    }

    let isFullScreen = false;
    function toggleFullScreen() {
      if (!isFullScreen) {
        openFullscreen();
      } else {
        closeFullscreen();
      }
    }
    function openFullscreen() {
      const elem = document.documentElement;
      if (elem.requestFullscreen) { elem.requestFullscreen(); }
      else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); }
      else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); }
      document.querySelectorAll(".no-print").forEach(el => el.classList.add("hidden"));
      // הוספת מחלקת fullscreen-mode ל-container להגדלת המרווחים (50px) במצב מסך מלא
      document.getElementById("container").classList.add("fullscreen-mode");
      isFullScreen = true;
    }
    function closeFullscreen() {
      if (document.exitFullscreen) { document.exitFullscreen(); }
      else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); }
      else if (document.msExitFullscreen) { document.msExitFullscreen(); }
      document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
      document.getElementById("container").classList.remove("fullscreen-mode");
      isFullScreen = false;
    }
    document.addEventListener('fullscreenchange', () => {
      if (!document.fullscreenElement) {
        document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
        document.getElementById("container").classList.remove("fullscreen-mode");
        isFullScreen = false;
      }
    });
    document.addEventListener('webkitfullscreenchange', () => {
      if (!document.webkitFullscreenElement) {
        document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
        document.getElementById("container").classList.remove("fullscreen-mode");
        isFullScreen = false;
      }
    });
    document.addEventListener('msfullscreenchange', () => {
      if (!document.msFullscreenElement) {
        document.querySelectorAll(".no-print").forEach(el => el.classList.remove("hidden"));
        document.getElementById("container").classList.remove("fullscreen-mode");
        isFullScreen = false;
      }
    });
  </script>
</body>
</html>

                              Grok 3:

                              ae5e0adf-cbb9-40aa-8890-4c5d538189ef-image.png

                              <!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>מגבית ת"ת תשפ"ה</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            transition: background-image 0.3s;
        }
        .header {
            font-size: 2em;
            font-weight: bold;
            text-shadow: 2px 2px 4px #000;
            margin-bottom: 30px;
            color: #1e3a8a;
        }
        .graph-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            max-width: 800px;
            margin-bottom: 30px;
        }
        .graph {
            width: 350px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            text-align: center;
            transition: transform 0.2s;
        }
        .graph:hover {
            transform: translateY(-2px);
        }
        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
            margin: 15px 0;
        }
        .progress {
            height: 100%;
            transition: width 0.3s, background-color 0.3s;
        }
        .summary-text {
            margin-top: 15px;
            font-weight: bold;
            color: #555;
            font-size: 1.3em;
        }
        .buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
            justify-content: center;
        }
        .graph-buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 15px;
        }
        .button {
            padding: 12px 24px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s, transform 0.2s;
        }
        .button:hover {
            background-color: #45a049;
            transform: scale(1.05);
        }
        .fullscreen-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 12px 24px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s, transform 0.2s;
        }
        .fullscreen-button:hover {
            background-color: #45a049;
            transform: scale(1.05);
        }
        input[type="range"], input[type="color"] {
            width: 120px;
            margin: 5px;
        }
        select {
            padding: 8px;
            border-radius: 8px;
            font-size: 1em;
        }
        @media print {
            .button, .fullscreen-button, .buttons, .graph-buttons, input, select { /* הסתרת כל הלחצנים ופקדים */
                display: none !important;
            }
            .graph, .progress-bar, .progress, .header, .summary-text {
                print-color-adjust: exact;
                -webkit-print-color-adjust: exact;
            }
            body {
                background-image: inherit !important;
                background-size: cover !important;
                background-position: center !important;
                background-repeat: no-repeat !important;
                background-attachment: fixed !important;
                background-color: transparent !important;
                print-background: print; /* תאימות מלאה להדפסת רקע */
            }
        }
        @media (display-mode: fullscreen) {
            .button, .fullscreen-button, .buttons, .graph-buttons, input, select { /* הסתרת פקדים במסך מלא */
                display: none !important;
            }
        }
    </style>
</head>
<body>
    <div class="header" id="header">מגבית ת"ת תשפ"ה</div>
    <div class="graph-container">
        <div class="graph" id="graph1">
            <h3 id="title1">גיוס יום 1</h3>
            <div class="progress-bar">
                <div class="progress" id="progress1" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amount1">0</span> ₪ מתוך <span id="target1">40000</span> ₪</p>
            <div class="graph-buttons">
                <button class="button" onclick="changeTitle(1)">שנה כותרת</button>
                <button class="button" onclick="changeAmount(1)">שנה סכום</button>
                <button class="button" onclick="changeTarget(1)">שנה יעד</button>
            </div>
        </div>
        <div class="graph" id="graph2">
            <h3 id="title2">גיוס יום 2</h3>
            <div class="progress-bar">
                <div class="progress" id="progress2" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amount2">0</span> ₪ מתוך <span id="target2">45000</span> ₪</p>
            <div class="graph-buttons">
                <button class="button" onclick="changeTitle(2)">שנה כותרת</button>
                <button class="button" onclick="changeAmount(2)">שנה סכום</button>
                <button class="button" onclick="changeTarget(2)">שנה יעד</button>
            </div>
        </div>
        <div class="graph" id="graph3">
            <h3 id="title3">גיוס יום 3</h3>
            <div class="progress-bar">
                <div class="progress" id="progress3" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amount3">0</span> ₪ מתוך <span id="target3">50000</span> ₪</p>
            <div class="graph-buttons">
                <button class="button" onclick="changeTitle(3)">שנה כותרת</button>
                <button class="button" onclick="changeAmount(3)">שנה סכום</button>
                <button class="button" onclick="changeTarget(3)">שנה יעד</button>
            </div>
        </div>
        <div class="graph">
            <h3>סיכום כולל</h3>
            <div class="progress-bar">
                <div class="progress" id="progressTotal" style="width: 0%;"></div>
            </div>
            <p>סכום שנאסף: <span id="amountTotal">0</span> ₪ מתוך <span id="targetTotal">135000</span> ₪</p>
            <p class="summary-text" id="summaryText"></p>
        </div>
    </div>
    <div class="buttons" id="controlButtons">
        <button class="button" onclick="changeHeader()">שנה כותרת</button>
        <label for="colorPicker">בחר צבע כותרת: </label>
        <input type="color" id="colorPicker" onchange="changeColor(this.value)">
        <label for="fontSizeSlider">גודל כותרת: </label>
        <input type="range" min="1" max="5" step="0.1" value="2" id="fontSizeSlider" oninput="changeFontSize(this.value)">
        <label for="fontSelect">בחר גופן: </label>
        <select id="fontSelect" onchange="changeFont(this.value)">
            <option value="Arial">Arial</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Courier New">Courier New</option>
            <option value="Georgia">Georgia</option>
            <option value="Verdana">Verdana</option>
        </select>
        <button class="button" onclick="uploadBackground()">העלה תמונת רקע</button>
        <button class="button" onclick="printPage()">הדפס עמוד</button>
    </div>
    <button class="button fullscreen-button" id="fullscreenButton" onclick="toggleFullscreen()">מסך מלא</button>

    <script>
        let amounts = [0, 0, 0]; // סכומים שנאספו מתחילים ב-0
        let targets = [40000, 45000, 50000];
        let totalTarget = targets.reduce((a, b) => a + b, 0); // חישוב דינמי של היעד הכולל

        function updateProgress() {
            amounts.forEach((amount, index) => {
                const percentage = (amount / targets[index]) * 100;
                const progress = document.getElementById(`progress${index + 1}`);
                progress.style.width = `${percentage}%`;
                progress.style.backgroundColor = getColor(percentage);
                document.getElementById(`amount${index + 1}`).textContent = Math.round(amount); // הצגת מספרים שלמים ללא עשרוניות
                document.getElementById(`target${index + 1}`).textContent = Math.round(targets[index]); // הצגת מספרים שלמים ליעד
            });

            const totalAmount = amounts.reduce((a, b) => a + b, 0);
            totalTarget = targets.reduce((a, b) => a + b, 0); // עדכון דינמי של היעד הכולל
            const totalPercentage = (totalAmount / totalTarget) * 100;
            const progressTotal = document.getElementById('progressTotal');
            progressTotal.style.width = `${totalPercentage}%`;
            progressTotal.style.backgroundColor = getColor(totalPercentage);
            document.getElementById('amountTotal').textContent = Math.round(totalAmount); // הצגת מספרים שלמים ללא עשרוניות
            document.getElementById('targetTotal').textContent = Math.round(totalTarget); // הצגת היעד הכולל כמספר שלם

            const summaryText = document.getElementById('summaryText');
            if (totalPercentage <= 30) {
                summaryText.textContent = 'לא לחלום, חסר עדיין המון כסף!';
            } else if (totalPercentage <= 70) {
                summaryText.textContent = 'מתקדמים יפה, אבל צריך להתאמץ יותר!';
            } else if (totalPercentage <= 100) {
                summaryText.textContent = 'המשיכו כך, אתם ממש קרובים ליעד!';
            } else {
                summaryText.textContent = 'אין עליכם, עבדתם מעל למצופה!';
            }
        }

        function getColor(percentage) {
            if (percentage <= 30) return 'red';
            if (percentage <= 70) return 'orange';
            if (percentage <= 100) return 'green';
            return 'yellow';
        }

        function changeHeader() {
            const newHeader = prompt('הזן כותרת חדשה:');
            if (newHeader) {
                document.getElementById('header').textContent = newHeader;
            }
        }

        function changeColor(color) {
            document.getElementById('header').style.color = color; // עדכון מיידי של צבע הכותרת בזמן אמת
        }

        function changeFontSize(value) {
            document.getElementById('header').style.fontSize = `${value}em`;
        }

        function changeFont(font) {
            document.getElementById('header').style.fontFamily = font;
        }

        function changeTitle(day) {
            const newTitle = prompt(`הזן כותרת חדשה לגיוס יום ${day}:`);
            if (newTitle) {
                document.getElementById(`title${day}`).textContent = newTitle;
            }
        }

        function changeAmount(day) {
            const newAmount = prompt(`הזן סכום חדש (ב₪, רק מספרים שלמים) לגיוס יום ${day}:`);
            if (newAmount && !isNaN(newAmount) && !newAmount.match(/[^0-9]/)) { // בדיקה שרק מספרים שלמים מותרים
                amounts[day - 1] = Math.round(parseFloat(newAmount)); // עיגול למספר שלם
                updateProgress();
            } else {
                alert('אנא הזן מספר תקין (רק ספרות שלמות, ללא נקודות או תווים אחרים).');
            }
        }

        function changeTarget(day) {
            const newTarget = prompt(`הזן סכום יעד חדש (ב₪, רק מספרים שלמים) לגיוס יום ${day}:`);
            if (newTarget && !isNaN(newTarget) && !newTarget.match(/[^0-9]/)) { // בדיקה שרק מספרים שלמים מותרים
                targets[day - 1] = Math.round(parseFloat(newTarget)); // עיגול למספר שלם
                updateProgress();
            } else {
                alert('אנא הזן מספר תקין (רק ספרות שלמות, ללא נקודות או תווים אחרים).');
            }
        }

        function uploadBackground() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.onchange = function(event) {
                const file = event.target.files[0];
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.body.style.backgroundImage = `url(${e.target.result})`;
                    document.body.style.backgroundSize = 'cover';
                    document.body.style.backgroundPosition = 'center';
                };
                reader.readAsDataURL(file);
            };
            input.click();
        }

        function printPage() {
            const controls = document.querySelectorAll('.button, .fullscreen-button, input, select'); // הסתרת כל הפקדים
            controls.forEach(control => control.style.display = 'none');
            window.print();
            controls.forEach(control => control.style.display = ''); // החזרת הפקדים לאחר ההדפסה
        }

        function toggleFullscreen() {
            const controls = document.querySelectorAll('.button, .fullscreen-button, input, select'); // הסתרת כל הפקדים
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen();
                controls.forEach(control => control.style.display = 'none');
            } else {
                document.exitFullscreen();
                controls.forEach(control => control.style.display = ''); // החזרת הפקדים לאחר יציאה ממסך מלא
            }
        }

        // הקשבה ליציאה ממצב מסך מלא והצגת הפקדים מחדש
        document.addEventListener('fullscreenchange', () => {
            const controls = document.querySelectorAll('.button, .fullscreen-button, input, select');
            if (!document.fullscreenElement) {
                controls.forEach(control => control.style.display = '');
            }
        });

        // עדכון ראשוני של הגרפים
        updateProgress();
    </script>
</body>
</html>

                              Copilot:

                              011b404f-ee15-49d6-abe5-ebe14b9de4b0-image.png

                              <!DOCTYPE html>
<html lang="he">
<head>
    <meta charset="UTF-8">
    <title>מגבית ת"ת תשפ"ה</title>
    <!-- שימוש בפונטים מגוגל -->
    <link href="https://fonts.googleapis.com/css?family=Assistant:400,700&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            background-size: cover;
            background-position: center;
            font-family: 'Assistant', sans-serif;
            direction: rtl;
            background-color: #f0f2f5;
        }
        h1 {
            font-size: 60px;
            font-weight: bold;
            text-shadow: 2px 2px rgba(0,0,0,0.1);
            margin: 20px 0;
            color: #333;
            transition: all 0.3s ease;
            text-align: center;
        }
        .controls {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin: 10px 0;
        }
        .controls label {
            display: flex;
            flex-direction: column; /* מסדר את הטקסט מעל הלחצן */
            align-items: center;
            margin: 10px;
            font-size: 16px;
            color: #333;
        }
        .controls button,
        .controls select,
        .controls input[type="color"],
        .controls input[type="range"] {
            margin-top: 5px;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #17a2b8;
            color: #fff;
            font-size: 16px;
            transition: background-color 0.3s, transform 0.2s;
        }
        .controls button:hover,
        .controls select:hover,
        .controls input[type="color"]:hover,
        .controls input[type="range"]:hover {
            background-color: #138496;
            transform: scale(1.05);
        }
        .graphs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 20px;
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
            box-sizing: border-box;
        }
        .graph {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.2s;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .graph:hover {
            transform: translateY(-5px);
        }
        .graph h2 {
            margin: 0 0 10px 0;
        }
        .progress-container {
            background-color: #e0e0e0;
            border-radius: 5px;
            overflow: hidden;
            height: 30px;
            width: 100%;
            max-width: 300px;
        }
        .progress-bar {
            height: 100%;
            width: 0;
            transition: width 0.5s ease-in-out;
        }
        .amounts {
            font-size: 18px;
            color: #555;
            margin: 10px 0;
        }
        .percentage {
            font-size: 16px;
            font-weight: bold;
            color: #555;
            margin: 10px 0;
        }
        .graph-buttons {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
        .graph-buttons button {
            margin: 5px;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #007BFF;
            color: #fff;
            font-size: 14px;
            transition: background-color 0.3s, transform 0.2s;
        }
        .graph-buttons button:hover {
            background-color: #0056b3;
            transform: scale(1.05);
        }
        .message {
            font-size: 18px;
            font-weight: bold;
            color: #555;
            margin-top: 15px;
        }
        .bottom-controls {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin: 20px;
        }
        .bottom-controls button {
            margin-right: 10px;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #6c757d;
            color: #fff;
            font-size: 16px;
            transition: background-color 0.3s, transform 0.2s;
        }
        .bottom-controls button:hover {
            background-color: #5a6268;
            transform: scale(1.05);
        }
        .hidden {
            display: none;
        }
        @media screen and (max-width: 800px) {
            .graphs {
                grid-template-columns: 1fr;
            }
            .bottom-controls {
                justify-content: center;
            }
        }
        /* סגנונות למצב הדפסה ומסך מלא */
        @media print, (display-mode: fullscreen) {
            body {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                /* מאפשר הדפסת צבעים ותמונות רקע */
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
                background-size: cover;
                background-position: center;
            }
            .graphs {
                width: 70%;
                min-height: 70vh;
                margin: auto;
            }
            .bottom-controls {
                display: none;
            }
        }
    </style>
</head>
<body>
    <h1 id="main-title">מגבית ת"ת תשפ"ה</h1>
    <div class="controls">
        <label>
            שנה טקסט כותרת ראשית
            <button onclick="changeTitleText()">שנה טקסט כותרת ראשית</button>
        </label>
        <label>
            בחר צבע לכותרת
            <input type="color" id="title-color-picker" value="#333333">
        </label>
        <label>
            שינוי גודל הכותרת
            <input type="range" min="30" max="100" value="60" onchange="changeTitleSize(this.value)">
        </label>
        <label>
            בחר גופן לכותרת
            <select onchange="changeTitleFont(this.value)">
                <option value="'Assistant', sans-serif">Assistant</option>
                <option value="'Arial', sans-serif">Arial</option>
                <option value="'David', sans-serif">David</option>
                <option value="'Courier New', monospace">Courier New</option>
                <!-- ניתן להוסיף פונטים נוספים -->
            </select>
        </label>
    </div>
    <div class="graphs">
        <!-- גרף יום 1 -->
        <div class="graph" id="graph1">
            <h2 id="title1">יום 1</h2>
            <p class="amounts" id="amounts1"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress1"></div>
            </div>
            <p id="percentage1" class="percentage"></p>
            <div class="graph-buttons">
                <button onclick="changeGraphTitle(1)">שנה כותרת הגרף</button>
                <button onclick="changeGraphAmount(1)">עדכן סכום שנאסף</button>
                <button onclick="changeGraphTarget(1)">ערוך סכום יעד</button>
            </div>
        </div>
        <!-- גרף יום 2 -->
        <div class="graph" id="graph2">
            <h2 id="title2">יום 2</h2>
            <p class="amounts" id="amounts2"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress2"></div>
            </div>
            <p id="percentage2" class="percentage"></p>
            <div class="graph-buttons">
                <button onclick="changeGraphTitle(2)">שנה כותרת הגרף</button>
                <button onclick="changeGraphAmount(2)">עדכן סכום שנאסף</button>
                <button onclick="changeGraphTarget(2)">ערוך סכום יעד</button>
            </div>
        </div>
        <!-- גרף יום 3 -->
        <div class="graph" id="graph3">
            <h2 id="title3">יום 3</h2>
            <p class="amounts" id="amounts3"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress3"></div>
            </div>
            <p id="percentage3" class="percentage"></p>
            <div class="graph-buttons">
                <button onclick="changeGraphTitle(3)">שנה כותרת הגרף</button>
                <button onclick="changeGraphAmount(3)">עדכן סכום שנאסף</button>
                <button onclick="changeGraphTarget(3)">ערוך סכום יעד</button>
            </div>
        </div>
        <!-- גרף סיכום כולל -->
        <div class="graph" id="graph-summary">
            <h2 id="title-summary">סיכום כולל</h2>
            <p class="amounts" id="amounts-summary"></p>
            <div class="progress-container">
                <div class="progress-bar" id="progress-summary"></div>
            </div>
            <p id="percentage-summary" class="percentage"></p>
            <p class="message" id="summary-message"></p>
            <!-- לחצן שינוי כותרת הסיכום מתחת לטקסט -->
            <div class="graph-buttons">
                <button onclick="changeSummaryTitle()">שנה כותרת הסיכום</button>
            </div>
        </div>
    </div>
    <div class="bottom-controls">
        <button onclick="toggleFullScreen()">הצג במסך מלא</button>
        <button onclick="uploadBackground()">העלה תמונת רקע</button>
        <button onclick="printPage()">הדפס את העמוד</button>
    </div>
    <script>
        // ערכי ברירת מחדל
        let graphData = [
            { id: 1, title: 'יום 1', amount: 0, target: 40000 },
            { id: 2, title: 'יום 2', amount: 0, target: 45000 },
            { id: 3, title: 'יום 3', amount: 0, target: 50000 },
        ];
        function updateGraphs() {
            let totalAmount = 0;
            let totalTarget = 0;
            graphData.forEach(graph => {
                document.getElementById('title' + graph.id).innerText = graph.title;
                let progress = document.getElementById('progress' + graph.id);
                let percentText = document.getElementById('percentage' + graph.id);
                let amountsText = document.getElementById('amounts' + graph.id);
                let percent = (graph.amount / graph.target) * 100;
                if (percent > 100) percent = 100;
                progress.style.width = percent + '%';
                progress.style.backgroundColor = getColor((graph.amount / graph.target) * 100);
                percentText.innerText = Math.round(percent) + '%';
                amountsText.innerText = `נאסף: ${graph.amount.toLocaleString()} ש"ח | יעד: ${graph.target.toLocaleString()} ש"ח`;
                totalAmount += graph.amount;
                totalTarget += graph.target;
            });
            // עדכון גרף הסיכום
            let totalPercent = (totalAmount / totalTarget) * 100;
            if (totalPercent > 100) totalPercent = 100;
            let progressSummary = document.getElementById('progress-summary');
            let percentSummaryText = document.getElementById('percentage-summary');
            let amountsSummaryText = document.getElementById('amounts-summary');
            progressSummary.style.width = totalPercent + '%';
            progressSummary.style.backgroundColor = getColor((totalAmount / totalTarget) * 100);
            percentSummaryText.innerText = Math.round(totalPercent) + '%';
            amountsSummaryText.innerText = `נאסף: ${totalAmount.toLocaleString()} ש"ח | יעד: ${totalTarget.toLocaleString()} ש"ח`;
            updateSummaryMessage((totalAmount / totalTarget) * 100);
        }
        function getColor(percent) {
            if (percent <= 30) return 'red';
            else if (percent <= 70) return 'orange';
            else if (percent <= 100) return 'green';
            else return '#FFD700'; // זהב
        }
        function updateSummaryMessage(percent) {
            let message = '';
            if (percent <= 30) message = 'לא לחלום, חסר עדיין המון כסף!';
            else if (percent <= 70) message = 'מתקדמים יפה, אבל צריך להתאמץ יותר!';
            else if (percent <= 100) message = 'המשיכו כך, אתם ממש קרובים ליעד!';
            else message = 'אין עליכם, עבדתם מעל למצופה!';
            document.getElementById('summary-message').innerText = message;
        }
        function changeGraphTitle(id) {
            let graph = graphData.find(g => g.id === id);
            let newTitle = prompt('הכנס כותרת חדשה לגרף:', graph.title);
            if (newTitle) {
                graph.title = newTitle;
                updateGraphs();
            }
        }
        function changeGraphAmount(id) {
            let graph = graphData.find(g => g.id === id);
            let newAmount = prompt('הכנס סכום שנאסף בש"ח:', graph.amount);
            if (newAmount !== null && newAmount !== '' && !isNaN(newAmount) && Number.isInteger(+newAmount)) {
                graph.amount = parseInt(newAmount);
                updateGraphs();
            } else {
                alert('אנא הכנס מספר שלם תקין.');
            }
        }
        function changeGraphTarget(id) {
            let graph = graphData.find(g => g.id === id);
            let newTarget = prompt('הכנס סכום יעד בש"ח:', graph.target);
            if (newTarget !== null && newTarget !== '' && !isNaN(newTarget) && Number.isInteger(+newTarget)) {
                graph.target = parseInt(newTarget);
                updateGraphs();
            } else {
                alert('אנא הכנס מספר שלם תקין.');
            }
        }
        function changeTitleText() {
            let newTitle = prompt('הכנס טקסט כותרת ראשית חדש:', document.getElementById('main-title').innerText);
            if (newTitle) {
                document.getElementById('main-title').innerText = newTitle;
            }
        }
        function changeSummaryTitle() {
            let newTitle = prompt('הכנס כותרת חדשה לסיכום:', document.getElementById('title-summary').innerText);
            if (newTitle) {
                document.getElementById('title-summary').innerText = newTitle;
            }
        }
        function changeTitleColor(color) {
            document.getElementById('main-title').style.color = color;
        }
        document.getElementById('title-color-picker').addEventListener('input', function() {
            changeTitleColor(this.value);
        });
        function changeTitleSize(size) {
            document.getElementById('main-title').style.fontSize = size + 'px';
        }
        function changeTitleFont(font) {
            document.getElementById('main-title').style.fontFamily = font;
        }
        function uploadBackground() {
            let input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.onchange = e => {
                let file = e.target.files[0];
                let reader = new FileReader();
                reader.onload = function(event) {
                    document.body.style.backgroundImage = 'url(' + event.target.result + ')';
                };
                reader.readAsDataURL(file);
            };
            input.click();
        }
        function printPage() {
            document.querySelectorAll('button, .controls, .graph-buttons').forEach(el => el.classList.add('hidden'));
            window.print();
            document.querySelectorAll('button, .controls, .graph-buttons').forEach(el => el.classList.remove('hidden'));
        }
        function toggleFullScreen() {
            let elem = document.documentElement;
            if (!document.fullscreenElement) {
                if (elem.requestFullscreen) {
                    elem.requestFullscreen();
                }
                document.querySelectorAll('button, .controls, .bottom-controls').forEach(el => el.classList.add('hidden'));
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
                document.querySelectorAll('button, .controls, .bottom-controls').forEach(el => el.classList.remove('hidden'));
            }
        }
        document.addEventListener('fullscreenchange', () => {
            if (!document.fullscreenElement) {
                document.querySelectorAll('button, .controls, .bottom-controls').forEach(el => el.classList.remove('hidden'));
            }
        });
        // עדכון ראשוני של הגרפים
        updateGraphs();
    </script>
</body>
</html>

                              בהצלחה!
                              NH.LOCALN מנותק
                              NH.LOCALN מנותק
                              NH.LOCAL
                              מדריכים
                              כתב נערך לאחרונה על ידי
                              #15

                              @א-מ ממליץ לנסות את העבודה שלך עם קלוד הוא ככל הנראה המודל הטוב ביותר כיום לעיצוב אתרים

                              לכל הפרוייקטים שלי
                              https://nhlocal.github.io

                              תגובה 1 תגובה אחרונה
                              3
                              • ה החכם השלם

                                @א-מ תודה רבה!
                                אגב, יש אופציה לעשות שיהיה ניתן להוסיף ימים?

                                א מחובר
                                א מחובר
                                א.מ.
                                מדריכים
                                כתב נערך לאחרונה על ידי
                                #16

                                @החכם-השלם כתב בשיתוף | גרפי התרמה בקובץ HTML:

                                @א-מ תודה רבה!
                                אגב, יש אופציה לעשות שיהיה ניתן להוסיף ימים?

                                היה לי זמן מיותר...
                                (נעשה באמצעות GPT 4o)

                                25b31056-5054-494c-b5bb-022e678ee8db-image.png

                                <!DOCTYPE html>
<html lang="he">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>מערכת ניהול גיוס כספים</title>
  <!-- כולל ספריית Chart.js להצגה אינטראקטיבית -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    :root {
      --primary-gradient: linear-gradient(45deg, #6a11cb, #2575fc);
      --button-hover: linear-gradient(45deg, #2575fc, #6a11cb);
      --light-bg: #fff;
      --light-text: #000;
      --dark-bg: #1e1e1e;
      --dark-text: #e0e0e0;
    }
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      direction: rtl;
      background-color: var(--light-bg);
      color: var(--light-text);
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    body.dark-mode {
      background-color: var(--dark-bg);
      color: var(--dark-text);
    }
    /* מצב נגישות מתקדם - הגדלת גופן וטווח קריאה */
    .accessibility-mode {
      font-size: 18px;
      line-height: 1.6;
    }
    /* הודעות התראה */
    #notification {
      position: fixed;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255, 0, 0, 0.8);
      color: #fff;
      padding: 10px 20px;
      border-radius: 5px;
      opacity: 0;
      z-index: 3000;
      transition: opacity 0.5s ease;
    }
    .header {
      text-align: center;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
      margin-top: 20px;
      font-size: 32px;
    }
    .header-controls {
      text-align: center;
      margin: 10px 0;
    }
    .header-controls label {
      margin: 0 5px;
      font-size: 14px;
    }
    .header-controls input[type="color"],
    .header-controls input[type="range"],
    .header-controls select,
    .header-controls button {
      margin: 0 5px;
      padding: 8px 12px;
      font-size: 14px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: transform 0.3s ease;
    }
    .header-controls button {
      background: var(--primary-gradient);
      color: white;
    }
    .header-controls button:hover,
    .header-controls select:hover,
    .header-controls input[type="color"]:hover,
    .header-controls input[type="range"]:hover {
      transform: scale(1.05);
    }
    /* סמן שבלחצני בחירת צבע וגופן לא יודפסו או יוצגו במסך מלא */
    .no-print {
      /* יודפס רק אם לא במצב full screen (כמו גם במצב הדפסה) */
    }
    @media print {
      .no-print { display: none !important; }
      /* הסתרת סרגל ההתקדמות בכל גרף בעת הדפסה */
      .progress-bar { display: none !important; }
    }
    /* כפתורי סטנדרט – עבור לחצני הוספת יום ועיצוב הכותרת */
    .standard-button {
      margin: 5px;
      background: var(--primary-gradient);
      color: white;
      padding: 8px 12px;
      border: none;
      border-radius: 5px;
      font-size: 14px;
      cursor: pointer;
      transition: transform 0.3s ease, background 0.3s ease;
    }
    .standard-button:hover {
      transform: scale(1.05);
      background: var(--button-hover);
    }
    /* Advanced Settings Modal */
    #advancedSettingsModal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 2000;
    }
    #advancedSettingsModal .modal-content {
      background: var(--light-bg);
      color: var(--light-text);
      margin: 50px auto;
      padding: 20px;
      border-radius: 10px;
      width: 300px;
      position: relative;
    }
    body.dark-mode #advancedSettingsModal .modal-content {
      background: var(--dark-bg);
      color: var(--dark-text);
    }
    #advancedSettingsModal h3 {
      margin-top: 0;
    }
    #advancedSettingsModal button {
      background: var(--primary-gradient);
      color: white;
      border: none;
      border-radius: 5px;
      padding: 5px 10px;
      cursor: pointer;
      transition: transform 0.3s ease;
    }
    #advancedSettingsModal button:hover {
      transform: scale(1.05);
    }
    #closeAdvancedSettings {
      position: absolute;
      top: 5px;
      right: 5px;
      background: #ccc;
      color: #000;
    }
    .container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 20px;
      width: 90%;
      max-width: 1200px;
      margin: 20px auto;
    }
    /* התאמה למובייל */
    @media (max-width: 600px) {
      .container {
        grid-template-columns: 1fr;
      }
    }
    .graph {
      border: 1px solid #ccc;
      padding: 15px;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      background: var(--light-bg);
      opacity: 0.9;
      transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    }
    body.dark-mode .graph {
      background: var(--dark-bg);
      color: var(--dark-text);
    }
    .graph:hover {
      transform: scale(1.02);
      opacity: 1;
    }
    .graph-title {
      font-size: 1.2em;
      margin-bottom: 10px;
      cursor: move;
    }
    .progress-bar {
      position: relative;
      width: 100%;
      height: 30px;
      background: #eee;
      border-radius: 5px;
      overflow: hidden;
      margin-bottom: 5px;
    }
    .progress {
      height: 100%;
      width: 0%;
      text-align: center;
      line-height: 30px;
      color: white;
      transition: width 0.5s ease, background-color 0.5s ease;
    }
    .graph-sums {
      font-size: 14px;
      margin-bottom: 10px;
    }
    .graph-buttons button {
      margin: 5px;
      background: var(--primary-gradient);
      color: white;
      padding: 8px 12px;
      border: none;
      border-radius: 5px;
      font-size: 14px;
      cursor: pointer;
      transition: transform 0.3s ease, background 0.3s ease;
    }
    .graph-buttons button:hover:not([disabled]) {
      transform: scale(1.05);
      background: var(--button-hover);
    }
    .graph-buttons button[disabled] {
      background: #ccc;
      cursor: not-allowed;
    }
    .control-buttons {
      position: fixed;
      bottom: 10px;
      left: 10px;
      z-index: 1000;
    }
    .control-buttons button {
      margin: 5px;
      background: var(--primary-gradient);
      color: white;
      padding: 8px 12px;
      border: none;
      border-radius: 5px;
      font-size: 14px;
      cursor: pointer;
      transition: transform 0.3s ease, background 0.3s ease;
    }
    .control-buttons button:hover {
      transform: scale(1.05);
      background: var(--button-hover);
    }
    /* בעת הדפסה או מסך מלא – הסתרת כל הלחצנים */
    @media print {
      button, input, select {
        display: none !important;
      }
    }
    .hide-buttons button,
    .hide-buttons input,
    .hide-buttons select {
      display: none !important;
    }
  </style>
</head>
<body>
  <!-- הודעות התראה -->
  <div id="notification" role="alert" aria-live="assertive"></div>
  
  <!-- כותרת ראשית -->
  <div class="header" id="pageHeader" tabindex="0">מגבית ת"ת תשפ"ה</div>
  
  <!-- בקרים לכותרת -->
  <div class="header-controls">
    <button id="changeHeaderText" aria-label="שנה את כותרת העמוד">שנה כותרת</button>
    <label for="headerColorPicker">בחר צבע כותרת:</label>
    <input type="color" id="headerColorPicker" class="no-print" value="#000000" aria-label="בחר צבע לכותרת">
    <!-- הגדלת טווח הגודל לכותרת מ-20 עד 100 -->
    <input type="range" id="headerFontSize" min="20" max="100" value="32" aria-label="שנה את גודל הכותרת">
    <label for="headerFontSelect">בחר גופן:</label>
    <select id="headerFontSelect" class="no-print" aria-label="בחר גופן לכותרת">
      <option value="Arial">Arial</option>
      <option value="David">David</option>
      <option value="Frank Ruhl Libre">Frank Ruhl Libre</option>
      <option value="Miriam">Miriam</option>
      <option value="Tahoma">Tahoma</option>
    </select>
    <button id="openAdvancedSettings" aria-label="פתח הגדרות מתקדמות">הגדרות מתקדמות</button>
  </div>
  
  <!-- תיבת הגדרות מתקדמות -->
  <div id="advancedSettingsModal" aria-modal="true" role="dialog">
    <div class="modal-content">
      <h3>הגדרות מתקדמות</h3>
      <div>
        <input type="checkbox" id="toggleInteractiveCharts" checked aria-label="הצג גרפים אינטראקטיביים">
        <label for="toggleInteractiveCharts">הצג גרפים אינטראקטיביים</label>
      </div>
      <div style="margin-top:10px;">
        <label for="animationSpeed">מהירות אנימציה (שניות):</label>
        <input type="range" id="animationSpeed" min="0.1" max="1.0" step="0.1" value="0.5" aria-label="כוון מהירות אנימציה">
        <span id="animationSpeedValue">0.5</span>s
      </div>
      <!-- לחצן מעבר בין מצב כהה לבהיר בתוך ההגדרות המתקדמות -->
      <div style="margin-top:10px;">
        <button id="toggleDarkMode" class="standard-button" aria-label="החלף בין מצב כהה לבהיר">מצב כהה/בהיר</button>
      </div>
      <!-- הגדרות נגישות נוספות -->
      <div style="margin-top:10px;">
        <input type="checkbox" id="enableAccessibility" aria-label="הפעל מצב נגישות מתקדם">
        <label for="enableAccessibility">הפעל מצב נגישות מתקדם</label>
      </div>
      <div style="margin-top:10px;">
        <button id="showInstructions" class="standard-button" aria-label="הצג הוראות שימוש">הצג הוראות שימוש</button>
      </div>
      <button id="closeAdvancedSettings" aria-label="סגור הגדרות מתקדמות">X</button>
    </div>
  </div>
  
  <!-- מכולת הגרפים -->
  <div class="container" id="graphContainer">
    <!-- הגרפים נבנים דינאמית -->
  </div>
  
  <!-- לחצן להוספת יום חדש (ברירת מחדל 2 ימים, ניתן להוסיף עוד) -->
  <div style="text-align: center; margin: 20px;">
    <button id="addGraph" class="standard-button" aria-label="הוסף יום גיוס חדש">הוסף יום נוסף</button>
  </div>
  
  <!-- לחצנים נוספים להעלאת רקע, הדפסה, מסך מלא, ייצוא, ייבוא ואיפוס נתונים -->
  <div class="control-buttons">
    <button id="uploadBackground" aria-label="העלה תמונת רקע">העלה רקע</button>
    <input type="file" id="backgroundInput" accept="image/*" style="display:none;">
    <button id="printPage" aria-label="הדפס את הדף">הדפס</button>
    <button id="fullscreenToggle" aria-label="מעבר למסך מלא">מסך מלא</button>
    <button id="exportData" aria-label="ייצא נתוני גיוס כספים">ייצא נתונים</button>
    <button id="importData" aria-label="ייבא נתוני גיוס כספים">ייבא נתונים</button>
    <input type="file" id="importInput" accept="application/json" style="display:none;">
    <button id="resetData" aria-label="אפס את כל הנתונים">אפס נתונים</button>
  </div>
  
  <script>
    // משתנים גלובליים
    let graphs = [];
    let showInteractiveCharts = true;
    let animationSpeed = 0.5;
    let chartInstances = [];
    
    // Drag and drop global variable
    let draggedIndex = null;
    
    // פונקציית הודעות – מציגה התראה למשתמש
    function showNotification(message) {
      const notificationDiv = document.getElementById('notification');
      notificationDiv.innerText = message;
      notificationDiv.style.opacity = 1;
      setTimeout(() => {
        notificationDiv.style.transition = "opacity 1s ease";
        notificationDiv.style.opacity = 0;
      }, 2000);
    }
    
    // פונקציה ליצירת גרף
    function createGraph(title, collected, target) {
      return { title: title, collected: collected, target: target };
    }
    
    // אתחול נתוני ברירת מחדל: 2 ימים עם יעד 40,000 ש"ח לכל יום
    function defaultData() {
      let defaultGraphs = [];
      for (let i = 0; i < 2; i++) {
        defaultGraphs.push(createGraph("יום " + (i + 1), 0, 40000));
      }
      defaultGraphs.push(createGraph("סיכום כולל", 0, 0));
      return defaultGraphs;
    }
    
    // טעינת נתונים מ-LocalStorage או אתחול ברירת מחדל
    function loadData() {
      const storedData = localStorage.getItem('donationDays');
      if (storedData) {
        try {
          let data = JSON.parse(storedData);
          if (Array.isArray(data)) {
            graphs = data.map(item => createGraph(item.title, item.collected, item.target));
          }
        } catch(e) {
          showNotification("שגיאה בטעינת הנתונים");
        }
      }
      if (graphs.length === 0) {
        graphs = defaultData();
      }
      if (graphs[graphs.length - 1].title !== "סיכום כולל") {
        graphs.push(createGraph("סיכום כולל", 0, 0));
      }
      updateSummary();
    }
    
    // שמירת הנתונים (ללא גרף הסיכום) ב-LocalStorage
    function saveData() {
      const dataToSave = graphs.slice(0, graphs.length - 1);
      localStorage.setItem('donationDays', JSON.stringify(dataToSave));
    }
    
    // איפוס הנתונים (מחזיר את הנתונים לברירת מחדל)
    function resetData() {
      if (confirm("האם אתה בטוח שברצונך לאפס את כל הנתונים?")) {
        graphs = defaultData();
        updateSummary();
        renderGraphs();
        saveData();
        showNotification("הנתונים אופסו");
      }
    }
    
    // חישוב גרף הסיכום: סכום שנאסף הוא סכום כל הימים, והיעד הכולל הוא סכום היעדים של כל הימים
    function updateSummary() {
      let summaryGraph = graphs[graphs.length - 1];
      let totalCollected = 0, totalTarget = 0;
      for (let i = 0; i < graphs.length - 1; i++) {
        totalCollected += graphs[i].collected;
        totalTarget += graphs[i].target;
      }
      summaryGraph.collected = totalCollected;
      summaryGraph.target = totalTarget;
    }
    
    // פונקציות Drag & Drop
    function handleDragStart(e) {
      draggedIndex = e.currentTarget.dataset.index;
      e.dataTransfer.effectAllowed = 'move';
    }
    function handleDragOver(e) {
      e.preventDefault();
      e.dataTransfer.dropEffect = 'move';
    }
    function handleDrop(e) {
      e.stopPropagation();
      const targetIndex = e.currentTarget.dataset.index;
      if (draggedIndex !== null && targetIndex !== undefined && draggedIndex !== targetIndex && targetIndex < graphs.length - 1) {
        const draggedItem = graphs.splice(draggedIndex, 1)[0];
        graphs.splice(targetIndex, 0, draggedItem);
        updateSummary();
        renderGraphs();
        saveData();
      }
      draggedIndex = null;
    }
    
    // רינדור הגרפים והצגת נתונים עם גרפים אינטראקטיביים (באמצעות Chart.js)
    function renderGraphs() {
      updateSummary();
      chartInstances.forEach(instance => {
        if (instance) instance.destroy();
      });
      chartInstances = [];
      
      const container = document.getElementById('graphContainer');
      container.innerHTML = "";
      graphs.forEach((graph, index) => {
        const graphDiv = document.createElement('div');
        graphDiv.className = "graph";
        graphDiv.dataset.index = index;
        if (index < graphs.length - 1) {
          graphDiv.setAttribute("draggable", "true");
          graphDiv.addEventListener('dragstart', handleDragStart);
          graphDiv.addEventListener('dragover', handleDragOver);
          graphDiv.addEventListener('drop', handleDrop);
        }
        const titleDiv = document.createElement('div');
        titleDiv.className = "graph-title";
        titleDiv.innerText = graph.title;
        titleDiv.setAttribute("tabindex", "0");
        graphDiv.appendChild(titleDiv);
        
        const progressBar = document.createElement('div');
        progressBar.className = "progress-bar";
        const progress = document.createElement('div');
        progress.className = "progress";
        progressBar.appendChild(progress);
        graphDiv.appendChild(progressBar);
        
        const sumsDiv = document.createElement('div');
        sumsDiv.className = "graph-sums";
        sumsDiv.innerText = "נאסף: " + graph.collected + " ש\"ח | יעד: " + graph.target + " ש\"ח";
        graphDiv.appendChild(sumsDiv);
        
        if (showInteractiveCharts) {
          const canvas = document.createElement('canvas');
          canvas.id = "chart-" + index;
          canvas.style.margin = "10px auto";
          canvas.style.maxWidth = "100%";
          graphDiv.appendChild(canvas);
        }
        
        if (index === graphs.length - 1) {
          const summaryText = document.createElement('div');
          summaryText.className = "summary-text";
          summaryText.style.marginTop = "10px";
          graphDiv.appendChild(summaryText);
        }
        
        const btnContainer = document.createElement('div');
        btnContainer.className = "graph-buttons";
        
        const changeTitleBtn = document.createElement('button');
        changeTitleBtn.innerText = "שנה כותרת";
        changeTitleBtn.setAttribute("aria-label", "שנה כותרת הגרף");
        changeTitleBtn.addEventListener('click', function(){
          let newTitle = prompt("הכנס כותרת חדשה:", graph.title);
          if (newTitle !== null) {
            graph.title = newTitle;
            renderGraphs();
            saveData();
          }
        });
        btnContainer.appendChild(changeTitleBtn);
        
        if (index !== graphs.length - 1) {
          const changeCollectedBtn = document.createElement('button');
          changeCollectedBtn.innerText = "שנה סכום נאסף";
          changeCollectedBtn.setAttribute("aria-label", "שנה סכום נאסף");
          changeCollectedBtn.addEventListener('click', function(){
            let newCollected = prompt("הכנס סכום נאסף (מספר שלם בש\"ח):", graph.collected);
            if (newCollected !== null && !isNaN(newCollected) && Number.isInteger(+newCollected)) {
              graph.collected = parseInt(newCollected);
              updateSummary();
              renderGraphs();
              saveData();
            } else {
              showNotification("יש להזין מספר שלם.");
            }
          });
          btnContainer.appendChild(changeCollectedBtn);
          
          const changeTargetBtn = document.createElement('button');
          changeTargetBtn.innerText = "שנה סכום יעד";
          changeTargetBtn.setAttribute("aria-label", "שנה סכום יעד");
          changeTargetBtn.addEventListener('click', function(){
            let newTarget = prompt("הכנס סכום יעד (מספר שלם בש\"ח):", graph.target);
            if (newTarget !== null && !isNaN(newTarget) && Number.isInteger(+newTarget)) {
              graph.target = parseInt(newTarget);
              updateSummary();
              renderGraphs();
              saveData();
            } else {
              showNotification("יש להזין מספר שלם.");
            }
          });
          btnContainer.appendChild(changeTargetBtn);
        }
        
        const deleteBtn = document.createElement('button');
        deleteBtn.innerText = "מחק גרף";
        deleteBtn.setAttribute("aria-label", "מחק גרף זה");
        if (index === graphs.length - 1) {
          deleteBtn.disabled = true;
          deleteBtn.title = "לא ניתן למחוק את גרף הסיכום";
        } else {
          deleteBtn.addEventListener('click', function(){
            graphs.splice(index, 1);
            updateSummary();
            renderGraphs();
            saveData();
          });
        }
        btnContainer.appendChild(deleteBtn);
        
        graphDiv.appendChild(btnContainer);
        container.appendChild(graphDiv);
        
        let percentage = graph.target > 0 ? Math.round((graph.collected / graph.target) * 100) : 0;
        progress.style.width = (percentage > 100 ? 100 : percentage) + "%";
        progress.style.transitionDuration = animationSpeed + "s";
        progress.innerText = graph.collected + " / " + graph.target;
        let color = "";
        if (percentage <= 30) {
          color = "red";
        } else if (percentage <= 70) {
          color = "orange";
        } else if (percentage <= 100) {
          color = "green";
        } else {
          color = "yellow";
        }
        progress.style.backgroundColor = color;
        
        if (index === graphs.length - 1) {
          const summaryText = graphDiv.querySelector('.summary-text');
          let summaryMessage = "";
          if (percentage <= 30) {
            summaryMessage = "לא לחלום, חסר עדיין המון כסף!";
          } else if (percentage <= 70) {
            summaryMessage = "מתקדמים יפה, אבל צריך להתאמץ יותר!";
          } else if (percentage <= 100) {
            summaryMessage = "המשיכו כך, אתם ממש קרובים ליעד!";
          } else {
            summaryMessage = "אין עליכם, עבדתם מעל למצופה!";
          }
          summaryText.innerText = summaryMessage;
        }
        
        if (showInteractiveCharts) {
          const ctx = document.getElementById("chart-" + index);
          if (ctx) {
            let chartData = {
              labels: ["נאסף", "עוד נדרש"],
              datasets: [{
                data: [graph.collected, Math.max(graph.target - graph.collected, 0)],
                backgroundColor: [color, '#ccc']
              }]
            };
            let chartOptions = {
              responsive: true,
              animation: {
                duration: animationSpeed * 1000
              },
              plugins: {
                legend: {
                  display: true,
                  position: 'bottom'
                }
              }
            };
            let chartInstance = new Chart(ctx, {
              type: 'doughnut',
              data: chartData,
              options: chartOptions
            });
            chartInstances[index] = chartInstance;
          }
        }
      });
    }
    
    // בקרים לכותרת הדף
    document.getElementById('changeHeaderText').addEventListener('click', function(){
      let newText = prompt("הכנס כותרת חדשה:", document.getElementById('pageHeader').innerText);
      if (newText !== null) {
        document.getElementById('pageHeader').innerText = newText;
      }
    });
    document.getElementById('headerColorPicker').addEventListener('input', function(){
      document.getElementById('pageHeader').style.color = this.value;
    });
    document.getElementById('headerFontSize').addEventListener('input', function(){
      let size = this.value;
      document.getElementById('pageHeader').style.fontSize = size + "px";
    });
    document.getElementById('headerFontSelect').addEventListener('change', function(){
      document.getElementById('pageHeader').style.fontFamily = this.value;
    });
    
    // Dark/Light mode toggle בתוך ההגדרות המתקדמות
    document.getElementById('toggleDarkMode').addEventListener('click', function(){
      document.body.classList.toggle('dark-mode');
    });
    
    // בקרים להגדרות מתקדמות
    document.getElementById('openAdvancedSettings').addEventListener('click', function(){
      document.getElementById('advancedSettingsModal').style.display = "block";
    });
    document.getElementById('closeAdvancedSettings').addEventListener('click', function(){
      document.getElementById('advancedSettingsModal').style.display = "none";
    });
    document.getElementById('toggleInteractiveCharts').addEventListener('change', function(){
      showInteractiveCharts = this.checked;
      renderGraphs();
    });
    document.getElementById('animationSpeed').addEventListener('input', function(){
      animationSpeed = parseFloat(this.value);
      document.getElementById('animationSpeedValue').innerText = this.value;
      renderGraphs();
    });
    document.getElementById('enableAccessibility').addEventListener('change', function(){
      if (this.checked) {
        document.body.classList.add('accessibility-mode');
      } else {
        document.body.classList.remove('accessibility-mode');
      }
    });
    document.getElementById('showInstructions').addEventListener('click', function(){
      alert("הוראות שימוש:\n1. שנה את כותרת העמוד והגדרות הכותרת.\n2. הוסף/עדכן ימים, שנה סכומים, וגרור לשינוי סדר.\n3. השתמש בייצוא/ייבוא נתונים לאחסון ושיתוף.\n4. השתמש בהגדרות מתקדמות להתאמת חווית המשתמש ולשיפור הנגישות.");
    });
    
    // העלאת תמונת רקע
    document.getElementById('uploadBackground').addEventListener('click', function(){
      document.getElementById('backgroundInput').click();
    });
    document.getElementById('backgroundInput').addEventListener('change', function(){
      const file = this.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
          document.body.style.backgroundImage = "url('" + e.target.result + "')";
        }
        reader.readAsDataURL(file);
      }
    });
    
    // כפתור הדפסה
    document.getElementById('printPage').addEventListener('click', function(){
      window.print();
    });
    
    // כפתור למסך מלא – והחזרת לחצנים ביציאה
    document.getElementById('fullscreenToggle').addEventListener('click', function(){
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen();
        document.body.classList.add('hide-buttons');
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
          document.body.classList.remove('hide-buttons');
        }
      }
    });
    document.addEventListener('fullscreenchange', function() {
      if (!document.fullscreenElement) {
        document.body.classList.remove('hide-buttons');
      }
    });
    
    // כפתור לייצוא נתונים כקובץ JSON
    document.getElementById('exportData').addEventListener('click', function(){
      const dataToExport = graphs.slice(0, graphs.length - 1);
      const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(dataToExport, null, 2));
      const downloadAnchor = document.createElement('a');
      downloadAnchor.setAttribute("href", dataStr);
      downloadAnchor.setAttribute("download", "donation_data.json");
      document.body.appendChild(downloadAnchor);
      downloadAnchor.click();
      downloadAnchor.remove();
    });
    
    // כפתור לייבוא נתונים
    document.getElementById('importData').addEventListener('click', function(){
      document.getElementById('importInput').click();
    });
    document.getElementById('importInput').addEventListener('change', function(){
      const file = this.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
          try {
            let importedData = JSON.parse(e.target.result);
            if (Array.isArray(importedData)) {
              graphs = importedData.map(item => createGraph(item.title, item.collected, item.target));
              graphs = graphs.map(day => ({ title: day.title, collected: day.collected, target: 40000 }));
              graphs.push(createGraph("סיכום כולל", 0, 0));
              updateSummary();
              renderGraphs();
              saveData();
              showNotification("ייבוא נתונים בוצע בהצלחה");
            } else {
              showNotification("קובץ הנתונים אינו בפורמט הנכון");
            }
          } catch(err) {
            showNotification("שגיאה בקריאת קובץ הנתונים");
          }
        }
        reader.readAsText(file);
      }
    });
    
    // כפתור לאיפוס הנתונים
    document.getElementById('resetData').addEventListener('click', function(){
      resetData();
    });
    
    // כפתור להוספת יום חדש (יום חדש יקבל יעד 40,000 ש"ח)
    document.getElementById('addGraph').addEventListener('click', function(){
      graphs.splice(graphs.length - 1, 0, createGraph("יום חדש", 0, 40000));
      renderGraphs();
      saveData();
    });
    
    // טעינה והרצה בעת עליית הדף
    loadData();
    renderGraphs();
    
    // רישום Service Worker (לשיפור ביצועים וקאשינג)
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('sw.js').then(function(registration) {
        console.log('Service Worker רשום בהצלחה עם טווח: ', registration.scope);
      }).catch(function(error) {
        console.log('רישום Service Worker נכשל: ', error);
      });
    }
    
    // Analytics – ניתן להוסיף כאן קוד לניטור (למשל, Google Analytics)
  </script>
</body>
</html>

                                תגובה 1 תגובה אחרונה
                                3

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