אתר לתצוגת התקדמות ההתרמה לתתים וישיבות ללא צורך בשרת!!!

הרב

בהמשך לפוסט הזה.
מצאתי את הזמן לטפל בזה וכעת הקוד מוכן לכולם.
הבעיה היחידה שאין לי זמן לפרט איך עושים את זה מצד המערכת אני משוכנע שיהיה מי שידע להסביר לציבור.
זה עובד דרך הנקודות בימות המשיח שהוא בודק כמה נקודות יש לכל בחור ולפי זה הוא מציג במסך.
עשיתי זיהוי לפי list
הסבר כללי על הנקודות בימות המשיח כאן.
כדי להוסיף נקודות צריך להשתמש במודל הזה.
צריך להתאים אישית לדרישות שלכם בשורות 266 -280.

 <!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 {
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(120deg, #FFDAB9, #FFA07A);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
 
    .header-and-additional-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.8);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      z-index: 999;
      padding: 5px 0;
    }
 
    .header-container {
      margin: 0; 
      display: flex;
      align-items: center;
      justify-content: center;
    }
 
    #timer {
      border: 3px solid #ffac33;
      padding: 10px 15px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      background-color: #fff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      margin: 0 10px; 
    }
 
    #timer h2 {
      color: #5682a3;
      margin: 0 10px 0 0;
      font-weight: bold;
    }
 
    #timer-digits {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      margin-left: 10px;
      margin-right: 10px;
    }
 
    .timer-digit {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #f9f9f9;
      padding: 8px;
      width: 50px;
      margin: 0 5px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
 
    .timer-digit p {
      margin: 0;
      font-size: 14px;
      color: #333;
      font-weight: bold;
    }
 
    .timer-digit-label {
      font-size: 10px;
      margin-top: 2px;
      color: #5682a3;
      font-weight: normal;
    }
 
    #timer h2:last-child {
      margin-right: 10px;
      color: #5682a3;
      font-size: 14px;
      font-weight: normal;
    }
 
    .additional-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      border: 3px solid #ffac33;
      border-radius: 20px;
      padding: 10px 15px;
      background-color: #fff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      margin: 0 10px; 
    }
 
    .total-info {
      text-align: center;
      margin: 5px 0;
      font-size: 16px;
      font-weight: bold;
      color: #333;
      width: 100%;
    }
 
    .total-info span {
      color: #ffac33;
    }
 
    .progress-bar {
      position: relative;
      width: 100%;
      height: 20px;
      background-color: #e0e0e0;
      border-radius: 10px;
      overflow: hidden;
      margin-top: 8px;
    }
 
    .progress-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 0;
      background-color: #5682a3;
      transition: width 1s ease-in-out;
    }
 
    .progress-text {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      line-height: 20px;
      text-align: center;
      color: #fff;
      font-weight: bold;
    }
 
    .container2 {
      width: 100%;
      margin-top: 140px;
      padding: 0 10px;  
      box-sizing: border-box;
      display: flex;
      justify-content: center;
    }
 
    .container {
      width: 100%;
      max-width: 1400px;  
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center; 
      align-items: flex-start; 
    }
 
    .id-container {
      display: inline-block;
      width: 350px;
      border: 1px solid #ccc;
      border-radius: 10px;
      background-color: #fff;
      margin: 10px;
      padding: 15px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s ease;
    }
 
    .id-container:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }
 
    .additional-id-container {
      display: inline-block;
      width: 250px;
      border: 1px solid #ccc;
      margin: 10px;
      padding: 15px;
      border-radius: 10px;
      background-color: #5682a3;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
      color: #fff;
    }
 
    .id-container h2,
    .additional-id-container h2 {
      margin: 0 0 10px 0;
      font-size: 18px;
      color: #333;
    }
  </style>
</head>
<body>
  <div class="header-and-additional-container">
    <div class="header-container">
      <div id="timer">
        <h2>נותרו לנו עוד:</h2>
        <div id="timer-digits">
          <div class="timer-digit">
            <p id="days-left">0</p>
            <p class="timer-digit-label">ימים</p>
          </div>
          <div class="timer-digit">
            <p id="hours-left">0</p>
            <p class="timer-digit-label">שעות</p>
          </div>
          <div class="timer-digit">
            <p id="minutes-left">0</p>
            <p class="timer-digit-label">דקות</p>
          </div>
          <div class="timer-digit">
            <p id="seconds-left">0</p>
            <p class="timer-digit-label">שניות</p>
          </div>
          <div class="timer-digit">
            <p id="milliseconds-left">0</p>
            <p class="timer-digit-label">ח' שניה</p>
          </div>
        </div>
        <h2 id="timer-goal-text"></h2>
      </div>
    </div>
    <div class="additional-container">
      <div class="total-info" id="total-points"></div>
      <div class="total-info" id="missing-points"></div>
      <div class="total-info" id="percentage-of-goal"></div>
      <div class="progress-bar" id="progress-total-bar">
        <div class="progress-fill" id="progress-total-fill"></div>
        <div class="progress-text" id="progress-total-text"></div>
      </div>
    </div>
  </div>
 
  <div class="container2">
    <div class="container">
      <div id="points-container"></div>
    </div>
  </div>
 
  <script>
    /*****************************************
     *       הגדרות מרכזיות לעריכה קלה       *
     *****************************************/
    // מספר מערכת
    var SYSTEM_NUMBER   = "0773137777";
    //סיסמה
    var SYSTEM_PASSWORD = "123456";
    // יעד פרטי לכל בחור
    var INDIVIDUAL_GOAL = 2500;
    // יעד כללי
    var TOTAL_GOAL = 350000;
    // תאריך יעד לסיום ההתרמה (פורמט: YYYY-MM-DD HH:MM:SS)
    var END_DATE = "2025-03-16 23:59:59";
 
    // מפת תעודות זהות לשמות (דוגמה)
    var idToNameMap = {
      "000": "אברהם אברהמי",
      "001": "ישראל ישראלי",
      "002": "ברוך ברוכי",
      // אפשר להוסיף כמה שתרצו...
    };
 
    /*****************************************
     *          פונקציות עדכון נתונים        *
     *****************************************/
    function getPointsTotal() {
      // יוצרים את ה-URL על בסיס המספר והסיסמה
      var url = "https://www.call2all.co.il/ym/api/RenderYMGRFile?token=" 
                + SYSTEM_NUMBER + ":" + SYSTEM_PASSWORD 
                + "&wath=ivr2:/Points/Split/points_total.ymgr&convertType=json&notLoadLang=1";
      
      var xhr2 = new XMLHttpRequest();
      xhr2.open("GET", url, true);
      xhr2.onreadystatechange = function () {
        if (xhr2.readyState === 4) {
          if (xhr2.status === 200) {
            var response = JSON.parse(xhr2.responseText);
            displayPointsTotal(response.data);
          } else {
            console.error('אירעה בעיה בבקשה. סטטוס:', xhr2.status);
          }
        }
      };
      xhr2.send();
    }
 
    function displayPointsTotal(data) {
      // מיון לפי מי שגייס יותר
      data.sort(function(a, b) {
        return parseFloat(b.PointsTotalAll) - parseFloat(a.PointsTotalAll);
      });
 
      var pointsContainer = document.getElementById('points-container');
      pointsContainer.innerHTML = '';
 
      var totalPoints = 0;
 
      data.forEach(function(item) {
        var id = item.EnterId;
        var pointsTotalAll = parseFloat(item.PointsTotalAll);
 
        // חישוב מה חסר להגיע ליעד הפרטי
        var difference = pointsTotalAll <= INDIVIDUAL_GOAL ? INDIVIDUAL_GOAL - pointsTotalAll : 0;
 
        // חישוב אחוז התקדמות ליעד הפרטי
        var percentage = (pointsTotalAll / INDIVIDUAL_GOAL) * 100;
        var percentageWidth = Math.min(percentage, 100);
 
        // בדיקת שם לפי מפת ה-ID, אם לא קיים מציגים את ה-ID כמות שהוא
        var name = idToNameMap[id] || id;
 
        totalPoints += pointsTotalAll;
 
        // בניית כרטיס המידע למשתתף
        var idContainer = document.createElement('div');
        idContainer.classList.add('id-container');
 
        var idText = document.createElement('div');
        var boldName = document.createElement('strong');
        boldName.textContent = name;
        idText.appendChild(document.createTextNode('הבחור החשוב '));
        idText.appendChild(boldName);
        idText.appendChild(document.createTextNode(' נ"י'));
 
        var pointsText = document.createElement('div');
        var boldPointsTotalAll = document.createElement('strong');
        boldPointsTotalAll.textContent = pointsTotalAll.toFixed(2);
        pointsText.appendChild(document.createTextNode('אסף עד כה: '));
        pointsText.appendChild(boldPointsTotalAll);
        pointsText.appendChild(document.createTextNode(' שקלים'));
 
        var differenceText = document.createElement('div');
        var boldDifference = document.createElement('strong');
        boldDifference.textContent = difference.toFixed(2);
        differenceText.appendChild(document.createTextNode('נותרו לו עוד: '));
        differenceText.appendChild(boldDifference);
        differenceText.appendChild(document.createTextNode(' שקלים כדי להגיע ליעד של ' + INDIVIDUAL_GOAL + ' שקלים'));
 
        // פס התקדמות אישי
        var progressBarContainer = document.createElement('div');
        progressBarContainer.classList.add('progress-bar');
 
        var progressBarFill = document.createElement('div');
        progressBarFill.classList.add('progress-fill');
        progressBarFill.style.width = percentageWidth.toFixed(2) + '%';
 
        var progressText = document.createElement('div');
        progressText.classList.add('progress-text');
        progressText.textContent = percentage.toFixed(2) + '%';
 
        progressBarContainer.appendChild(progressBarFill);
        progressBarContainer.appendChild(progressText);
 
        idContainer.appendChild(idText);
        idContainer.appendChild(pointsText);
        idContainer.appendChild(differenceText);
        idContainer.appendChild(progressBarContainer);
 
        pointsContainer.appendChild(idContainer);
      });
 
      // סה"כ כל התרומות
      var totalPointsElement = document.getElementById('total-points');
      totalPointsElement.textContent = 'סך כל התרומות: ' + totalPoints.toFixed(2) + ' שקלים';
 
      // חסר ליעד הכללי
      var missing = TOTAL_GOAL - totalPoints;
      var percentageOfGoal = (totalPoints / TOTAL_GOAL) * 100;
 
      var missingText = document.getElementById('missing-points');
      missingText.textContent = 'חסר ליעד: ' 
                                + (missing > 0 ? missing.toFixed(2) : 0) 
                                + ' שקלים';
 
      // עדכון הפסים של היעד הכללי
      var progressTotalFill = document.getElementById('progress-total-fill');
      var progressTotalText = document.getElementById('progress-total-text');
      progressTotalFill.style.width = Math.min(percentageOfGoal, 100).toFixed(2) + '%';
      progressTotalText.textContent = 'אחוז מתוך היעד: ' + percentageOfGoal.toFixed(2) + '%';
    }
 
    /*****************************************
     *          פונקציית טיימר לספירה        *
     *****************************************/
    function updateCountdown() {
      var now = new Date();
      var targetDate = new Date(END_DATE); 
      var millisecondsLeft = targetDate - now;
 
      // אם התאריך כבר עבר, מאפסים
      if (millisecondsLeft < 0) {
        document.getElementById("days-left").textContent = 0;
        document.getElementById("hours-left").textContent = 0;
        document.getElementById("minutes-left").textContent = 0;
        document.getElementById("seconds-left").textContent = 0;
        document.getElementById("milliseconds-left").textContent = 0;
        return;
      }
 
      var secondsLeft = Math.floor(millisecondsLeft / 1000);
      var minutesLeft = Math.floor(secondsLeft / 60);
      var hoursLeft = Math.floor(minutesLeft / 60);
      var daysLeft = Math.floor(hoursLeft / 24);
 
      document.getElementById("days-left").textContent = daysLeft;
      document.getElementById("hours-left").textContent = hoursLeft % 24;
      document.getElementById("minutes-left").textContent = minutesLeft % 60;
      document.getElementById("seconds-left").textContent = secondsLeft % 60;
      document.getElementById("milliseconds-left").textContent = millisecondsLeft % 1000;
 
      // מתזמנים קריאה חוזרת לעדכון
      setTimeout(updateCountdown, 100);
    }
 
    /*****************************************
     *          גלילה אוטומטית (אופציונלי)   *
     *****************************************/
    var scrollInterval;
 
    function startScrollDown() {
      scrollInterval = setInterval(function() {
        window.scrollBy(0, 1);
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
          clearInterval(scrollInterval);
          setTimeout(startScrollUp, 500);
        }
      }, 20);
    }
 
    function startScrollUp() {
      scrollInterval = setInterval(function() {
        window.scrollBy(0, -1);
        if (window.scrollY === 0) {
          clearInterval(scrollInterval);
          setTimeout(startScrollDown, 500);
        }
      }, 20);
    }
 
    /*****************************************
     *        הפעלה ראשונית של הקוד          *
     *****************************************/
    window.onload = function() {
      // טקסט שמופיע אחרי "נותרו לנו עוד... להגעה ליעד"
      var timerGoalText = document.getElementById('timer-goal-text');
      timerGoalText.textContent = 'להגעה ליעד של ' + TOTAL_GOAL.toLocaleString() + ' ש"ח בעזרת השם.';
 
      // התחלת עדכוני API
      getPointsTotal();
      // רענון אחת ל-100 שניות (אפשר לשנות)
      setInterval(getPointsTotal, 100000);
 
      // הפעלת הספירה לאחור
      updateCountdown();
 
      // גלילה אוטומטית (אם רוצים)
      startScrollDown();
    };
  </script>
</body>
</html>

אA

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

יב

@אA תכניס את זה במסמך טקסט רגיל. שמור בשם, עם סיומת .html
ותפעיל את הקובץ html.

אA

@יב
באיזה קובץ להכניס?
בפנקס רשימות ובוורד אין את הסיומת הזו

מערכת קמפיינים

@אA
אם אין לך עורך קוד (כמו ויזואל סטודיו) תכניס לפנקס רשימות ואחר כך תשנה את מה שצריך לשנות לפי המערכת שלך
ואז תשנה את הסיומת של txt לhtml

צבי ד"צ

@אA תכניס בפנקס רשימות.
אתה פשוט צריך לדעת איך משנים סיומת. איזה ווינדוס יש לך? אם יש לך 11, זה ב"תצוגה" "הצג" ושם תבחר לראות סיומות קבצים, ואז אתה יכול גם לשנות אותם בשנה שם של הקובץ.

אA

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

צבי ד"צ

@אA זה תשאל את @הרב
אגב, אתה יכול תמיד לערוך את הקובץ בפתח באמצעות פנקס רשימות

אA

@הרב

@אA כתב באתר לתצוגת התקדמות ההתרמה לתתים וישיבות ללא צורך בשרת!!!:

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

אני צודק?

אA

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

צבי ד"צ

@אA אגב שינית בקוד את המספר מערכת וסיסמה וכו', נכון?

אA

@צבי-ד-צ
כן. אבל הוא עדיין לא קולט את העידכון אפי' שבטלפון הוא כן עודכן

הרב

@אA
עשיתי זיהוי לפי list

	<!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 {
	margin: 0;
	padding: 0;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: linear-gradient(120deg, #FFDAB9, #FFA07A);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	}

	.header-and-additional-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.8);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	z-index: 999;
	padding: 5px 0;
	}

	.header-container {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	#timer {
	border: 3px solid #ffac33;
	padding: 10px 15px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	background-color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	margin: 0 10px;
	}

	#timer h2 {
	color: #5682a3;
	margin: 0 10px 0 0;
	font-weight: bold;
	}

	#timer-digits {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	margin-left: 10px;
	margin-right: 10px;
	}

	.timer-digit {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: #f9f9f9;
	padding: 8px;
	width: 50px;
	margin: 0 5px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.timer-digit p {
	margin: 0;
	font-size: 14px;
	color: #333;
	font-weight: bold;
	}

	.timer-digit-label {
	font-size: 10px;
	margin-top: 2px;
	color: #5682a3;
	font-weight: normal;
	}

	#timer h2:last-child {
	margin-right: 10px;
	color: #5682a3;
	font-size: 14px;
	font-weight: normal;
	}

	.additional-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	border: 3px solid #ffac33;
	border-radius: 20px;
	padding: 10px 15px;
	background-color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	margin: 0 10px;
	}

	.total-info {
	text-align: center;
	margin: 5px 0;
	font-size: 16px;
	font-weight: bold;
	color: #333;
	width: 100%;
	}

	.total-info span {
	color: #ffac33;
	}

	.progress-bar {
	position: relative;
	width: 100%;
	height: 20px;
	background-color: #e0e0e0;
	border-radius: 10px;
	overflow: hidden;
	margin-top: 8px;
	}

	.progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	background-color: #5682a3;
	transition: width 1s ease-in-out;
	}

	.progress-text {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	line-height: 20px;
	text-align: center;
	color: #fff;
	font-weight: bold;
	}

	.container2 {
	width: 100%;
	margin-top: 140px;
	padding: 0 10px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	}

	.container {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	}

	.id-container {
	display: inline-block;
	width: 350px;
	border: 1px solid #ccc;
	border-radius: 10px;
	background-color: #fff;
	margin: 10px;
	padding: 15px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease;
	}

	.id-container:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
	}

	.additional-id-container {
	display: inline-block;
	width: 250px;
	border: 1px solid #ccc;
	margin: 10px;
	padding: 15px;
	border-radius: 10px;
	background-color: #5682a3;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
	color: #fff;
	}

	.id-container h2,
	.additional-id-container h2 {
	margin: 0 0 10px 0;
	font-size: 18px;
	color: #333;
	}
	</style>
	</head>
	<body>
	<div class="header-and-additional-container">
	<div class="header-container">
	<div id="timer">
	<h2>נותרו לנו עוד:</h2>
	<div id="timer-digits">
	<div class="timer-digit">
	<p id="days-left">0</p>
	<p class="timer-digit-label">ימים</p>
	</div>
	<div class="timer-digit">
	<p id="hours-left">0</p>
	<p class="timer-digit-label">שעות</p>
	</div>
	<div class="timer-digit">
	<p id="minutes-left">0</p>
	<p class="timer-digit-label">דקות</p>
	</div>
	<div class="timer-digit">
	<p id="seconds-left">0</p>
	<p class="timer-digit-label">שניות</p>
	</div>
	<div class="timer-digit">
	<p id="milliseconds-left">0</p>
	<p class="timer-digit-label">ח' שניה</p>
	</div>
	</div>
	<h2 id="timer-goal-text"></h2>
	</div>
	</div>
	<div class="additional-container">
	<div class="total-info" id="total-points"></div>
	<div class="total-info" id="missing-points"></div>
	<div class="total-info" id="percentage-of-goal"></div>
	<div class="progress-bar" id="progress-total-bar">
	<div class="progress-fill" id="progress-total-fill"></div>
	<div class="progress-text" id="progress-total-text"></div>
	</div>
	</div>
	</div>

	<div class="container2">
	<div class="container">
	<div id="points-container"></div>
	</div>
	</div>

	<script>
	/*****************************************
	* הגדרות מרכזיות לעריכה קלה *
	*****************************************/
	// מספר מערכת
	var SYSTEM_NUMBER = "0773137777";
	//סיסמה
	var SYSTEM_PASSWORD = "123456";
	// יעד פרטי לכל בחור
	var INDIVIDUAL_GOAL = 2500;
	// יעד כללי
	var TOTAL_GOAL = 350000;
	// תאריך יעד לסיום ההתרמה (פורמט: YYYY-MM-DD HH:MM:SS)
	var END_DATE = "2025-03-16 23:59:59";

	// מפת תעודות זהות לשמות (דוגמה)
	var idToNameMap = {
	"000": "אברהם אברהמי",
	"001": "ישראל ישראלי",
	"002": "ברוך ברוכי",
	// אפשר להוסיף כמה שתרצו...
	};

	/*****************************************
	* פונקציות עדכון נתונים *
	*****************************************/
	function getPointsTotal() {
	// יוצרים את ה-URL על בסיס המספר והסיסמה
	var url = "https://www.call2all.co.il/ym/api/RenderYMGRFile?token="
	+ SYSTEM_NUMBER + ":" + SYSTEM_PASSWORD
	+ "&wath=ivr2:/Points/Split/points_total.ymgr&convertType=json&notLoadLang=1";

	var xhr2 = new XMLHttpRequest();
	xhr2.open("GET", url, true);
	xhr2.onreadystatechange = function () {
	if (xhr2.readyState === 4) {
	if (xhr2.status === 200) {
	var response = JSON.parse(xhr2.responseText);
	displayPointsTotal(response.data);
	} else {
	console.error('אירעה בעיה בבקשה. סטטוס:', xhr2.status);
	}
	}
	};
	xhr2.send();
	}

	function displayPointsTotal(data) {
	// מיון לפי מי שגייס יותר
	data.sort(function(a, b) {
	return parseFloat(b.PointsTotalAll) - parseFloat(a.PointsTotalAll);
	});

	var pointsContainer = document.getElementById('points-container');
	pointsContainer.innerHTML = '';

	var totalPoints = 0;

	data.forEach(function(item) {
	var id = item.EnterId;
	var pointsTotalAll = parseFloat(item.PointsTotalAll);

	// חישוב מה חסר להגיע ליעד הפרטי
	var difference = pointsTotalAll <= INDIVIDUAL_GOAL ? INDIVIDUAL_GOAL - pointsTotalAll : 0;

	// חישוב אחוז התקדמות ליעד הפרטי
	var percentage = (pointsTotalAll / INDIVIDUAL_GOAL) * 100;
	var percentageWidth = Math.min(percentage, 100);

	// בדיקת שם לפי מפת ה-ID, אם לא קיים מציגים את ה-ID כמות שהוא
	var name = idToNameMap[id] \|\| id;

	totalPoints += pointsTotalAll;

	// בניית כרטיס המידע למשתתף
	var idContainer = document.createElement('div');
	idContainer.classList.add('id-container');

	var idText = document.createElement('div');
	var boldName = document.createElement('strong');
	boldName.textContent = name;
	idText.appendChild(document.createTextNode('הבחור החשוב '));
	idText.appendChild(boldName);
	idText.appendChild(document.createTextNode(' נ"י'));

	var pointsText = document.createElement('div');
	var boldPointsTotalAll = document.createElement('strong');
	boldPointsTotalAll.textContent = pointsTotalAll.toFixed(2);
	pointsText.appendChild(document.createTextNode('אסף עד כה: '));
	pointsText.appendChild(boldPointsTotalAll);
	pointsText.appendChild(document.createTextNode(' שקלים'));

	var differenceText = document.createElement('div');
	var boldDifference = document.createElement('strong');
	boldDifference.textContent = difference.toFixed(2);
	differenceText.appendChild(document.createTextNode('נותרו לו עוד: '));
	differenceText.appendChild(boldDifference);
	differenceText.appendChild(document.createTextNode(' שקלים כדי להגיע ליעד של ' + INDIVIDUAL_GOAL + ' שקלים'));

	// פס התקדמות אישי
	var progressBarContainer = document.createElement('div');
	progressBarContainer.classList.add('progress-bar');

	var progressBarFill = document.createElement('div');
	progressBarFill.classList.add('progress-fill');
	progressBarFill.style.width = percentageWidth.toFixed(2) + '%';

	var progressText = document.createElement('div');
	progressText.classList.add('progress-text');
	progressText.textContent = percentage.toFixed(2) + '%';

	progressBarContainer.appendChild(progressBarFill);
	progressBarContainer.appendChild(progressText);

	idContainer.appendChild(idText);
	idContainer.appendChild(pointsText);
	idContainer.appendChild(differenceText);
	idContainer.appendChild(progressBarContainer);

	pointsContainer.appendChild(idContainer);
	});

	// סה"כ כל התרומות
	var totalPointsElement = document.getElementById('total-points');
	totalPointsElement.textContent = 'סך כל התרומות: ' + totalPoints.toFixed(2) + ' שקלים';

	// חסר ליעד הכללי
	var missing = TOTAL_GOAL - totalPoints;
	var percentageOfGoal = (totalPoints / TOTAL_GOAL) * 100;

	var missingText = document.getElementById('missing-points');
	missingText.textContent = 'חסר ליעד: '
	+ (missing > 0 ? missing.toFixed(2) : 0)
	+ ' שקלים';

	// עדכון הפסים של היעד הכללי
	var progressTotalFill = document.getElementById('progress-total-fill');
	var progressTotalText = document.getElementById('progress-total-text');
	progressTotalFill.style.width = Math.min(percentageOfGoal, 100).toFixed(2) + '%';
	progressTotalText.textContent = 'אחוז מתוך היעד: ' + percentageOfGoal.toFixed(2) + '%';
	}

	/*****************************************
	* פונקציית טיימר לספירה *
	*****************************************/
	function updateCountdown() {
	var now = new Date();
	var targetDate = new Date(END_DATE);
	var millisecondsLeft = targetDate - now;

	// אם התאריך כבר עבר, מאפסים
	if (millisecondsLeft < 0) {
	document.getElementById("days-left").textContent = 0;
	document.getElementById("hours-left").textContent = 0;
	document.getElementById("minutes-left").textContent = 0;
	document.getElementById("seconds-left").textContent = 0;
	document.getElementById("milliseconds-left").textContent = 0;
	return;
	}

	var secondsLeft = Math.floor(millisecondsLeft / 1000);
	var minutesLeft = Math.floor(secondsLeft / 60);
	var hoursLeft = Math.floor(minutesLeft / 60);
	var daysLeft = Math.floor(hoursLeft / 24);

	document.getElementById("days-left").textContent = daysLeft;
	document.getElementById("hours-left").textContent = hoursLeft % 24;
	document.getElementById("minutes-left").textContent = minutesLeft % 60;
	document.getElementById("seconds-left").textContent = secondsLeft % 60;
	document.getElementById("milliseconds-left").textContent = millisecondsLeft % 1000;

	// מתזמנים קריאה חוזרת לעדכון
	setTimeout(updateCountdown, 100);
	}

	/*****************************************
	* גלילה אוטומטית (אופציונלי) *
	*****************************************/
	var scrollInterval;

	function startScrollDown() {
	scrollInterval = setInterval(function() {
	window.scrollBy(0, 1);
	if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
	clearInterval(scrollInterval);
	setTimeout(startScrollUp, 500);
	}
	}, 20);
	}

	function startScrollUp() {
	scrollInterval = setInterval(function() {
	window.scrollBy(0, -1);
	if (window.scrollY === 0) {
	clearInterval(scrollInterval);
	setTimeout(startScrollDown, 500);
	}
	}, 20);
	}

	/*****************************************
	* הפעלה ראשונית של הקוד *
	*****************************************/
	window.onload = function() {
	// טקסט שמופיע אחרי "נותרו לנו עוד... להגעה ליעד"
	var timerGoalText = document.getElementById('timer-goal-text');
	timerGoalText.textContent = 'להגעה ליעד של ' + TOTAL_GOAL.toLocaleString() + ' ש"ח בעזרת השם.';

	// התחלת עדכוני API
	getPointsTotal();
	// רענון אחת ל-100 שניות (אפשר לשנות)
	setInterval(getPointsTotal, 100000);

	// הפעלת הספירה לאחור
	updateCountdown();

	// גלילה אוטומטית (אם רוצים)
	startScrollDown();
	};
	</script>
	</body>
	</html>