לפני 8 ימים
בהמשך לפוסט הזה.
מצאתי את הזמן לטפל בזה וכעת הקוד מוכן לכולם.
הבעיה היחידה שאין לי זמן לפרט איך עושים את זה מצד המערכת אני משוכנע שיהיה מי שידע להסביר לציבור.
זה עובד דרך הנקודות בימות המשיח שהוא בודק כמה נקודות יש לכל בחור ולפי זה הוא מציג במסך.
עשיתי זיהוי לפי 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¬LoadLang=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>