#motivation-master-app { –primary: #15803d; –secondary: #22c55e; –bg-light: #f0fdf4; –white: #ffffff; –text-dark: #064e3b; –border: #dcfce7; direction: rtl; font-family: 'Segoe UI', system-ui, sans-serif; max-width: 650px; margin: 25px auto; background: var(–bg-light); border-radius: 24px; box-shadow: 0 12px 35px rgba(21, 128, 61, 0.15); border: 1px solid var(–border); overflow: hidden; } .app-header { background: linear-gradient(135deg, var(–primary), #166534); color: white; padding: 30px 20px; text-align: center; } .app-header h2 { margin: 0; font-size: 1.8rem; } .tabs-wrapper { background: #d1fae5; padding: 8px; display: flex; gap: 8px; } .tab { flex: 1; text-align: center; padding: 12px; cursor: pointer; font-weight: 700; border-radius: 12px; transition: 0.3s; color: #065f46; background: rgba(255,255,255,0.5); } .tab.active { background: white; color: var(–primary); box-shadow: 0 4px 10px rgba(0,0,0,0.05); } .app-content { padding: 25px; } .label-style { display: block; margin-bottom: 10px; font-weight: 700; color: var(–text-dark); } .styled-select, .styled-input { width: 100%; padding: 15px; border: 2px solid #6ee7b7; border-radius: 16px; font-size: 1rem; margin-bottom: 20px; box-sizing: border-box; outline: none; } .card-result { background: white; border-radius: 20px; padding: 20px; margin-bottom: 20px; border-right: 5px solid var(–secondary); box-shadow: 0 5px 15px rgba(0,0,0,0.03); display: none; } .text-preview { font-size: 1.1rem; line-height: 1.5; font-weight: 600; color: #1f2937; margin-bottom: 15px; } .btn-action { background: var(–primary); color: white; border: none; padding: 12px 20px; border-radius: 12px; cursor: pointer; font-weight: 700; transition: 0.2s; width: 100%; margin-top: 10px; } .btn-action:hover { background: #166534; } /* Preview Modal / Overlay */ #previewOverlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 1000; justify-content: center; align-items: center; flex-direction: column; padding: 20px; box-sizing: border-box; } #previewContainer { max-width: 90%; max-height: 70vh; border-radius: 15px; overflow: hidden; box-shadow: 0 0 30px rgba(0,0,0,0.5); } #previewContainer img { width: 100%; height: auto; display: block; } .preview-btns { margin-top: 20px; display: flex; gap: 15px; width: 100%; max-width: 400px; } .btn-download { background: var(–secondary); flex: 1; } .btn-close { background: #ef4444; flex: 1; } #canvas-container { display: none; } const siteLogo = "https://www.yoursuccesstoolbox.com/wp-content/uploads/2025/08/20250812_171947_0000.png"; const siteUrl = "www.yoursuccesstoolbox.com"; const cardImages = [ 'https://www.yoursuccesstoolbox.com/wp-content/uploads/2025/11/Watercolor-9-3.jpg', 'https://www.yoursuccesstoolbox.com/wp-content/uploads/2025/11/Watercolor-6-4.jpg', 'https://www.yoursuccesstoolbox.com/wp-content/uploads/2025/11/Watercolor-2-1.jpg', 'https://www.yoursuccesstoolbox.com/wp-content/uploads/2025/11/Watercolor-1-5.jpg', 'https://www.yoursuccesstoolbox.com/wp-content/uploads/2025/11/Watercolor-3-2.jpg', 'https://www.yoursuccesstoolbox.com/wp-content/uploads/2025/11/Watercolor-4-5.jpg', 'https://www.yoursuccesstoolbox.com/wp-content/uploads/2025/11/Watercolor-5-7.jpg', 'https://www.yoursuccesstoolbox.com/wp-content/uploads/2025/11/Watercolor-7-4.jpg', 'https://www.yoursuccesstoolbox.com/wp-content/uploads/2025/11/Watercolor-8-2.jpg', 'https://www.yoursuccesstoolbox.com/wp-content/uploads/2025/11/Watercolor-10-5.jpg' ]; const lib = { home: [ { a: "🚿 מקלחת", o1: "הגיע זמן המקלחת. האם תרצה להיכנס עכשיו או בעוד 5 דקות בדיוק?", o2: "מקלחת טובה עוזרת לגוף להירגע. אתה מעדיף זרם חזק או מים רגועים?" }, { a: "🧹 סידור החדר", o1: "אני רואה שיש דברים על הרצפה. מתי יתאים לך לארגן אותם – עכשיו או אחרי התכנית?", o2: "כשחדר מאורגן, הרבה יותר קל למצוא את מה שאתה אוהב. איך תרצה שנתחיל?" }, { a: "📚 שיעורי בית", o1: "אני סומכת עליך שתדע לנהל את הזמן. איפה הכי נוח לך לשבת היום על המטלות?", o2: "השלמת המשימות תעזור לך להרגיש בטוחה יותר בחומר. איך אני יכולה לסייע?" }, { a: "🪥 צחצוח שיניים", o1: "הגיע הזמן לשמור על השיניים. תרצה לצחצח לפני הפיג'מה או אחריה?", o2: "שיניים חזקות הן המפתח לחיוך בריא. בוא נראה אם נגיע לכל הפינות היום!" }, { a: "📱 הפסקת מסכים", o1: "זמן המסך מסתיים. תרצי לכבות בעצמך עכשיו או שאזכיר לך בעוד דקה?", o2: "המוח זקוק למנוחה כדי לישון טוב ולחלום. מה הפעילות הבאה שנעשה יחד?" }, { a: "🍽️ ארוחת ערב", o1: "השולחן מוכן. אתה מעדיף לשבת בכיסא הרגיל או במקום אחר היום?", o2: "ארוחה יחד היא הזדמנות להטעין אנרגיה ולדבר. איזה מאכל הכי מסקרן אותך הערב?" }, { a: "🧸 איסוף משחקים", o1: "הגיע זמן איסוף. האם תרצה לאסוף קודם את הלגו או את המכוניות?", o2: "כשהמשחקים חוזרים למקום הם נשמרים שלמים. בוא נחזיר אותם יחד למקום." }, { a: "👕 לבישת בגדים", o1: "בוקר טוב! האם תרצה לבחור את החולצה הירוקה או הכחולה היום?", o2: "התארגנות זריזה תשאיר לנו זמן לעוד משחק קטן לפני שיוצאים. איך נתחיל?" }, { a: "👟 נעילת נעליים", o1: "אנחנו יוצאים. תרצה לנעול נעליים לבד או שנעשה תחרות 'מי מוכן ראשון'?", o2: "נעילת נעליים היא הצעד האחרון בדרך להרפתקה בחוץ. בוא נצא לדרך!" }, { a: "🌙 הליכה לישון", o1: "הגיע זמן לישון. האם תרצה שנקרא סיפור אחד ארוך או שניים קצרים?", o2: "הגוף שלך זקוק למנוחה כדי לצמוח ולהתחזק. אני כאן לידך עד שתרדם בכיף." } ], school: [ { a: "🤫 שמירה על שקט", o1: "כדי שנתקדם, אני מזמין אתכם לבחור את הדרך שבה נייצר שקט ברגע זה.", o2: "שקט מאפשר לכל אחד לשמוע את המחשבות שלו. מי מוכן להוביל את רגע ההקשבה?" }, { a: "✍️ התחלת משימה", o1: "המשימה לפניכם. תעדיפו להתחיל מהחלק המאתגר או מהחלק המוכר יותר?", o2: "התחלת העבודה היא הדרך להראות את השליטה בחומר. אני כאן לכל שאלה." }, { a: "🎒 איסוף ציוד", o1: "אנחנו מסיימים. תרצו לאסוף את הציוד האישי עכשיו או שנעשה איסוף משותף?", o2: "ארגון המרחב מראה כבוד למקום שבו אנו לומדים. בואו נחזיר הכל למקום." }, { a: "🤝 עבודה בקבוצות", o1: "איך תרצו לחלק ביניכם את התפקידים בקבוצה כדי שכולם יבואו לידי ביטוי?", o2: "למידה משותפת מאפשרת ללמוד אחד מהשני. בהצלחה בשיתוף הפעולה." }, { a: "👂 הקשבה בשיעור", o1: "אני מזמינה אתכם לרגע ריכוז. תרצו שנסכם את הנקודות יחד או שכל אחד יכתוב לעצמו?", o2: "הקשבה פעילה היא המפתח להבנה עמוקה. בואו ננסה להבין את העיקר יחד." }, { a: "🪑 ישיבה במקומות", o1: "השיעור מתחיל. מי מוכן להראות שהוא כבר במקום שלו ומוכן לצאת לדרך?", o2: "כאשר כולנו יושבים, האנרגיה בחדר הופכת ללמידה. אני מחכה לראות את כולם מוכנים." }, { a: "🙋‍♂️ הצבעה לפני דיבור", o1: "יש לנו הרבה רעיונות חשובים. איך נבטיח שכל אחד יקבל את הבמה שלו בצורה מכבדת?", o2: "הצבעה מאפשרת לי לתת לכל אחד מכם את מלוא ההקשבה שמגיעה לו. מי הראשון שרוצה לשתף?" }, { a: "📓 כתיבה במחברת", o1: "האם תרצו לתעד את הרעיונות בראשי פרקים או בטבלה מאורגנת?", o2: "התיעוד במחברת הוא הזיכרון שלכם לעתיד. זה עוזר לכם לארגן את המחשבות בצורה ברורה." }, { a: "🆘 עזרה לחבר", o1: "מי מרגיש שהוא סיים ויכול להציע עזרה לחבר שזקוק לחיזוק?", o2: "כשאתם מסבירים לחבר, אתם בעצם הופכים למומחים גדולים יותר בחומר בעצמכם." }, { a: "🚶‍♂️ עמידה בטור", o1: "אנחנו יוצאים למסדרון. האם תעדיפו לצעוד בשקט מוחלט או בשיחה בלחש?", o2: "הדרך שבה אנו נעים בבית הספר מייצגת את הכיתה שלנו. בואו נלך בצורה מכובדת." } ] }; let currentCtx = 'home'; function updateCtx(ctx, el) { currentCtx = ctx; document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); el.classList.add('active'); const menu = document.getElementById('actionMenu'); menu.innerHTML = '– בחר פעולה –'; lib[ctx].forEach((item, i) => menu.options.add(new Option(item.a, i))); menu.options.add(new Option("✏️ אחר (הקלדה חופשית)…", "custom")); handleSelect(); } function handleSelect() { const val = document.getElementById('actionMenu').value; const res = document.getElementById('results'); const custom = document.getElementById('customArea'); res.style.display = 'none'; custom.style.display = (val === 'custom') ? 'block' : 'none'; if (val !== "" && val !== "custom") { document.getElementById('res1').innerText = lib[currentCtx][val].o1; document.getElementById('res2').innerText = lib[currentCtx][val].o2; res.style.display = 'block'; document.getElementById('card1').style.display = 'block'; document.getElementById('card2').style.display = 'block'; } } function generateCustom() { const act = document.getElementById('customInput').value.trim(); if (!act) return; document.getElementById('res1').innerText = `אני סומך עליך שתמצא את הדרך הטובה ביותר לביצוע "${act}". איך תרצה להתחיל?`; document.getElementById('res2').innerText = `ביצוע "${act}" הוא הזדמנות מצוינת לגלות כמה אתה מסוגל ועצמאי.`; document.getElementById('results').style.display = 'block'; document.getElementById('card1').style.display = 'block'; document.getElementById('card2').style.display = 'block'; } function preparePreview(id) { const text = document.getElementById(id).innerText; const canvas = document.getElementById('cardCanvas'); const ctx = canvas.getContext('2d'); const bgImg = new Image(); bgImg.crossOrigin = "Anonymous"; bgImg.src = cardImages[Math.floor(Math.random() * cardImages.length)]; bgImg.onload = function() { ctx.drawImage(bgImg, 0, 0, 1080, 1080); ctx.fillStyle = "rgba(0, 0, 0, 0.5)"; ctx.fillRect(0, 0, 1080, 1080); ctx.font = 'bold 52px "Segoe UI", sans-serif'; ctx.fillStyle = '#ffffff'; ctx.textAlign = 'center'; ctx.direction = 'rtl'; wrapText(ctx, text, 540, 480, 900, 75); const logo = new Image(); logo.crossOrigin = "Anonymous"; logo.src = siteLogo; logo.onload = function() { ctx.drawImage(logo, 880, 880, 150, 150); ctx.font = '600 32px "Segoe UI"'; ctx.fillStyle = 'rgba(255,255,255,0.8)'; ctx.fillText(siteUrl, 540, 1010); document.getElementById('previewImage').src = canvas.toDataURL(); document.getElementById('previewOverlay').style.display = 'flex'; }; }; } function wrapText(ctx, text, x, y, maxWidth, lineHeight) { const words = text.split(' '); let line = ", lines = []; for (let n = 0; n maxWidth && n > 0) { lines.push(line); line = words[n] + ' '; } else line = testLine; } lines.push(line); let startY = y – ((lines.length – 1) * lineHeight) / 2; lines.forEach((l, i) => ctx.fillText(l, x, startY + (i * lineHeight))); } function closePreview() { document.getElementById('previewOverlay').style.display = 'none'; } function downloadGenerated() { const link = document.createElement('a'); link.download = 'motivation-card.png'; link.href = document.getElementById('previewImage').src; link.click(); } window.onload = () => updateCtx('home', document.querySelector('.tab'));