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

יוסף אלחנן

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

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

א.מ.

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

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

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

נחמן פלח

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

Grok 3:

Spoiler

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

סתם שמרל

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

g0527

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

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

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

פלמנמוני

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

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

מוצלח!!!

החכם השלם

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

א.מ.

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

NH.LOCAL

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

א.מ.

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

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

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

<!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>