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