<!DOCTYPE html>

<head>

<title>אניה - לימוד שחמט</title>

<style>

* { margin: 0; padding: 0; box-sizing: border-box; }

body {

min-height: 100vh;

background: linear-gradient(145deg, #1a0f0a 0%, #2c1810 30%, #1a1a2e 70%, #0f0a1a 100%);

font-family: 'Noto Sans Hebrew', 'Segoe UI', Tahoma, sans-serif;

direction: rtl;

color: #f5e6d3;

overflow-x: hidden;

}

header {

text-align: center;

padding: 28px 20px 16px;

}

h1 {

font-size: 32px;

font-weight: 800;

background: linear-gradient(135deg, #f5c842, #d4a030, #f5e6a3);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

letter-spacing: 1px;

}

.subtitle { font-size: 14px; color: #a89080; margin-top: 4px; }

.progress-bar {

margin: 16px auto; max-width: 400px; height: 6px;

background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden;

}

.progress-fill {

height: 100%; width: 0%; border-radius: 3px;

background: linear-gradient(90deg, #d4a030, #f5c842);

transition: width 0.5s ease;

}

.progress-text { font-size: 12px; color: #a89080; margin-top: 6px; text-align: center; }

/* Menu Grid */

.grid {

display: grid; grid-template-columns: repeat(2, 1fr);

gap: 12px; padding: 8px 16px 24px;

max-width: 500px; margin: 0 auto;

}

.card {

background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));

border: 1px solid rgba(255,255,255,0.08);

border-radius: 14px; padding: 16px 12px;

cursor: pointer; transition: all 0.25s ease;

text-align: center; position: relative; overflow: hidden;

}

.card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }

.card.done {

background: linear-gradient(135deg, rgba(100,160,60,0.15), rgba(80,140,40,0.08));

border-color: rgba(100,180,60,0.3);

}

.card-check {

position: absolute; top: 8px; left: 8px;

width: 22px; height: 22px; border-radius: 50%;

background: rgba(80,180,60,0.8);

display: none; align-items: center; justify-content: center; font-size: 13px;

}

.card.done .card-check { display: flex; }

.card-icon { font-size: 32px; margin-bottom: 6px; }

.card-step { font-size: 11px; color: #d4a030; font-weight: 600; margin-bottom: 2px; }

.card-title { font-size: 14px; font-weight: 600; }

.card-sub { font-size: 11px; color: #a89080; margin-top: 2px; }

/* Lesson */

.lesson { max-width: 500px; margin: 0 auto; padding: 0 16px 32px; transition: all 0.4s ease; }

.lesson.hidden { display: none; }

.back-btn {

background: transparent; border: 1px solid rgba(255,255,255,0.15);

color: #a89080; padding: 8px 20px; border-radius: 8px;

cursor: pointer; font-size: 14px; font-family: inherit; margin-bottom: 12px;

}

.back-btn:hover { border-color: rgba(255,255,255,0.3); color: #f5e6d3; }

.lesson-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

.lesson-icon { font-size: 40px; }

.lesson-step { font-size: 12px; color: #d4a030; font-weight: 600; }

.lesson-title { font-size: 22px; font-weight: 800; margin: 0; }

.lesson-sub { font-size: 13px; color: #a89080; margin: 0; }

.board-container { display: flex; justify-content: center; margin: 20px 0; }

.board {

display: inline-grid; grid-template-columns: repeat(8, 52px);

border: 3px solid #2c1810; border-radius: 4px;

overflow: hidden; box-shadow: 0 8px 32px rgba(44,24,16,0.3);

}

.cell {

width: 52px; height: 52px;

display: flex; align-items: center; justify-content: center;

font-size: 34px; user-select: none; transition: all 0.3s ease;

}

.cell.light { background: #f0d9b5; }

.cell.dark { background: #b58863; }

.cell.hl-light { background: #b8d88a; }

.cell.hl-dark { background: #8ab848; }

.marker {

width: 14px; height: 14px; border-radius: 50%;

background: rgba(100,180,60,0.5);

}

.desc-box {

background: rgba(255,255,255,0.05); border-radius: 14px;

padding: 18px 20px; line-height: 1.8; font-size: 15px;

border: 1px solid rgba(255,255,255,0.06); margin-bottom: 20px;

}

.quiz-box {

background: rgba(245,200,66,0.05); border: 1px solid rgba(245,200,66,0.15);

border-radius: 14px; padding: 20px; margin-bottom: 20px;

}

.quiz-title { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: #f5c842; }

.quiz-q { margin: 0 0 14px; font-size: 15px; }

.option {

display: block; width: 100%; padding: 12px 16px; margin-bottom: 8px;

background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);

border-radius: 10px; color: #f5e6d3; font-size: 15px;

cursor: pointer; text-align: right; transition: all 0.25s ease; font-family: inherit;

}

.option:hover { background: rgba(255,255,255,0.1); }

.option.correct { background: rgba(80,180,60,0.2); border-color: rgba(80,180,60,0.5); }

.option.wrong { background: rgba(220,60,60,0.2); border-color: rgba(220,60,60,0.5); }

.option.locked { cursor: default; }

.result {

margin-top: 12px; padding: 12px 16px; border-radius: 10px;

font-size: 14px; font-weight: 600; display: none;

}

.result.show { display: block; }

.result.win { background: rgba(80,180,60,0.15); }

.result.lose { background: rgba(220,60,60,0.15); }

.nav-btns { display: flex; justify-content: center; gap: 12px; }

.btn {

display: inline-block; padding: 12px 32px;

background: linear-gradient(135deg, #d4a030, #f5c842);

color: #1a0f0a; border: none; border-radius: 10px;

font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit;

transition: all 0.2s ease;

}

.btn:hover { transform: scale(1.03); }

.btn.secondary { background: rgba(255,255,255,0.1); color: #f5e6d3; }

.btn.secondary:hover { background: rgba(255,255,255,0.15); }

.celebration {

text-align: center; margin-top: 24px; padding: 24px;

background: linear-gradient(135deg, rgba(245,200,66,0.1), rgba(212,160,48,0.05));

border-radius: 16px; border: 1px solid rgba(245,200,66,0.2); display: none;

}

.celebration.show { display: block; }

.celebration-icon { font-size: 48px; margin-bottom: 8px; }

.celebration h3 { margin: 0 0 8px; color: #f5c842; font-size: 20px; }

.celebration p { margin: 0; color: #a89080; font-size: 14px; }

@media (max-width: 440px) {

.board { grid-template-columns: repeat(8, 40px); }

.cell { width: 40px; height: 40px; font-size: 26px; }

.marker { width: 10px; height: 10px; }

h1 { font-size: 26px; }

}

</style>

</head>

<body>

<p class="subtitle">האפליקציה של אניה ללימוד שחמט ב-10 צעדים</p>

<p class="progress-text"><span id="completedCount">0</span>/10 שלבים הושלמו</p>

<p style="font-size:11px; color:#7a6a5a; margin-top:8px;">נוצר על ידי אמיר אביטן © כל הזכויות שמורות</p>

</header>

const PIECES = { K:"♔",Q:"♕",R:"♖",B:"♗",N:"♘",P:"♙",k:"♚",q:"♛",r:"♜",b:"♝",n:"♞",p:"♟" };

const lessons = [

{

id:1, title:"הלוח והכלים", subtitle:"הכרת לוח השחמט", icon:"♟",

description:"לוח השחמט מורכב מ-64 משבצות (8×8) בצבעים מתחלפים - בהיר וכהה. לכל שחקן 16 כלים: מלך אחד, מלכה אחת, 2 צריחים, 2 רצים, 2 פרשים ו-8 רגלים.",

board:[["r","n","b","q","k","b","n","r"],["p","p","p","p","p","p","p","p"],["","","","","","","",""],["","","","","","","",""],["","","","","","","",""],["","","","","","","",""],["P","P","P","P","P","P","P","P"],["R","N","B","Q","K","B","N","R"]],

highlights:[],

quiz:{question:"כמה משבצות יש בלוח שחמט?",options:["32","48","64","100"],answer:2}

{

id:2, title:"תנועת הרגלי", subtitle:"הכלי הבסיסי ביותר", icon:"♙",

description:"הרגלי זז קדימה משבצת אחת, אך בצעד הראשון שלו הוא יכול לזוז שתי משבצות. הרגלי אוכל באלכסון קדימה בלבד. כשהרגלי מגיע לשורה האחרונה הוא הופך לכלי חזק יותר (הכתרה).",

board:[["","","","","","","",""],["","","","","","","",""],["","","","","","","",""],["","","","","","","",""],["","","","⬡","","","",""],["","","","⬡","","","",""],["","","","P","","","",""],["","","","","","","",""]],

highlights:[[4,3],[5,3]],

quiz:{question:"כמה משבצות יכול הרגלי להתקדם בצעד הראשון שלו?",options:["1","2","3","1 או 2"],answer:3}

{

id:3, title:"תנועת הצריח", subtitle:"כוח בקווים ישרים", icon:"♖",

description:"הצריח נע בקווים ישרים - אופקית ואנכית - כמה משבצות שרוצה, כל עוד אין כלי חוסם את דרכו. הצריח הוא כלי חזק במיוחד בשורות ובטורים פתוחים.",

board:[["","","","","","","",""],["","","","⬡","","","",""],["","","","⬡","","","",""],["⬡","⬡","⬡","R","⬡","⬡","⬡","⬡"],["","","","⬡","","","",""],["","","","⬡","","","",""],["","","","⬡","","","",""],["","","","⬡","","","",""]],

highlights:[[3,0],[3,1],[3,2],[3,4],[3,5],[3,6],[3,7],[0,3],[1,3],[2,3],[4,3],[5,3],[6,3],[7,3]],

quiz:{question:"באילו כיוונים הצריח יכול לנוע?",options:["אלכסון בלבד","אופקי ואנכי","כל הכיוונים","קדימה בלבד"],answer:1}

{

id:4, title:"תנועת הרץ", subtitle:"שליטה באלכסונים", icon:"♗",

description:"הרץ נע באלכסונים בלבד, כמה משבצות שרוצה. רץ על משבצת בהירה יישאר תמיד על משבצות בהירות, ורץ על משבצת כהה יישאר תמיד על משבצות כהות. לכן שני הרצים משלימים זה את זה!",

board:[["","","","","","","","⬡"],["⬡","","","","","","⬡",""],["","⬡","","","","⬡","",""],["","","⬡","","⬡","","",""],["","","","B","","","",""],["","","⬡","","⬡","","",""],["","⬡","","","","⬡","",""],["⬡","","","","","","⬡",""]],

highlights:[[0,7],[1,0],[1,6],[2,1],[2,5],[3,2],[3,4],[5,2],[5,4],[6,1],[6,5],[7,0],[7,6]],

quiz:{question:"על כמה צבעי משבצות הרץ יכול לדרוך?",options:["1","2","כל הצבעים","תלוי במיקום"],answer:0}

{

id:5, title:"תנועת המלכה", subtitle:"הכלי החזק ביותר", icon:"♕",

description:"המלכה היא הכלי החזק ביותר על הלוח! היא משלבת את כוחות הצריח והרץ - נעה בקווים ישרים ובאלכסונים. שמרו עליה כי היא שווה כ-9 נקודות!",

board:[["","","","⬡","","","","⬡"],["⬡","","","⬡","","","⬡",""],["","⬡","","⬡","","⬡","",""],["","","⬡","⬡","⬡","","",""],["⬡","⬡","⬡","Q","⬡","⬡","⬡","⬡"],["","","⬡","⬡","⬡","","",""],["","⬡","","⬡","","⬡","",""],["⬡","","","⬡","","","⬡",""]],

highlights:[],

quiz:{question:"כמה נקודות שווה המלכה?",options:["3","5","7","9"],answer:3}

{

id:6, title:"תנועת הפרש", subtitle:"הקפיצה המיוחדת", icon:"♘",

description:"הפרש נע בצורת L - שתי משבצות בכיוון אחד ומשבצת אחת בכיוון ניצב (או להפך). הפרש הוא הכלי היחיד שיכול לקפוץ מעל כלים אחרים!",

board:[["","","","","","","",""],["","","","","","","",""],["","","⬡","","⬡","","",""],["","⬡","","","","⬡","",""],["","","","N","","","",""],["","⬡","","","","⬡","",""],["","","⬡","","⬡","","",""],["","","","","","","",""]],

highlights:[[2,2],[2,4],[3,1],[3,5],[5,1],[5,5],[6,2],[6,4]],

quiz:{question:"מה מיוחד בפרש?",options:["הוא הכי חזק","הוא קופץ מעל כלים","הוא נע רק אלכסונית","הוא לא יכול לאכול"],answer:1}

{

id:7, title:"תנועת המלך", subtitle:"הכלי החשוב ביותר", icon:"♔",

description:"המלך נע משבצת אחת בלבד לכל כיוון. למרות שהוא איטי, הוא הכלי החשוב ביותר - אם המלך שלך מקבל מט, המשחק נגמר! המלך לא יכול לזוז למשבצת מאוימת.",

board:[["","","","","","","",""],["","","","","","","",""],["","","","","","","",""],["","","⬡","⬡","⬡","","",""],["","","⬡","K","⬡","","",""],["","","⬡","⬡","⬡","","",""],["","","","","","","",""],["","","","","","","",""]],

highlights:[[3,2],[3,3],[3,4],[4,2],[4,4],[5,2],[5,3],[5,4]],

quiz:{question:"כמה משבצות המלך יכול לזוז בכל תור?",options:["1","2","3","כמה שרוצה"],answer:0}

{

id:8, title:"שח ומט", subtitle:"המטרה הסופית", icon:"⚔",

description:"שח הוא כשהמלך מאוים. המלך חייב להימלט, לחסום את האיום, או לאכול את הכלי המאיים. מט (שחמט) הוא כשהמלך בשח ואין לו מוצא - זהו סוף המשחק! זו המטרה - לתת מט למלך היריב.",

board:[["","","","","","","",""],["","","","","","","",""],["","","","","","","",""],["","","","","","","",""],["","","","","","","",""],["","","","","","","",""],["","","","","","","R",""],["","","","","","","R","k"]],

highlights:[[6,6],[7,6]],

quiz:{question:"מה קורה כשיש מט?",options:["המשחק ממשיך","תיקו","המשחק נגמר","מחליפים צדדים"],answer:2}

{

id:9, title:"הצרחה (רוקדה)", subtitle:"מהלך מיוחד", icon:"🏰",

description:"הצרחה היא מהלך מיוחד בו המלך זז שתי משבצות לכיוון הצריח, והצריח קופץ מעבר למלך. תנאים: שניהם לא זזו, אין כלים ביניהם, המלך לא בשח ולא עובר דרך משבצת מאוימת. יש הצרחה קצרה (לצד המלך) וארוכה (לצד המלכה).",

highlights:[[7,0],[7,4],[7,7]],

quiz:{question:"כמה משבצות המלך זז בהצרחה?",options:["1","2","3","4"],answer:1}

{

id:10, title:"אסטרטגיה בסיסית", subtitle:"טיפים לניצחון", icon:"🧠",

description:"טיפים חשובים: 1) שלטו במרכז הלוח - משבצות d4, d5, e4, e5. 2) פתחו את הכלים מוקדם - הוציאו פרשים ורצים לפני המלכה. 3) בצעו הצרחה מוקדם להגנה על המלך. 4) אל תזיזו את אותו כלי פעמיים בפתיחה. 5) חשבו תמיד על האיומים של היריב!",

board:[["r","n","b","q","k","b","","r"],["p","p","p","p","","p","p","p"],["","","","","","n","",""],["","","","","p","","",""],["","","","","P","","",""],["","","","","","N","",""],["P","P","P","P","","P","P","P"],["R","N","B","Q","K","B","","R"]],

highlights:[[4,4],[5,5],[3,4],[2,5]],

quiz:{question:"מה חשוב לעשות בפתיחה?",options:["להוציא את המלכה ראשונה","לשלוט במרכז","לזוז רק עם רגלים","לתקוף מיד"],answer:1}

}

];

let currentStep = 0;

let selectedAnswer = null;

let showResult = false;

let completedSteps = new Set();

function updateProgress() {

document.getElementById("progressFill").style.width = (completedSteps.size / 10 * 100) + "%";

document.getElementById("completedCount").textContent = completedSteps.size;

}

function renderBoard(board, highlights) {

let html = '<div class="board">';

for (let r = 0; r < 8; r++) {

for (let c = 0; c < 8; c++) {

const isLight = (r + c) % 2 === 0;

const isHL = highlights.some(([hr,hc]) => hr===r && hc===c);

const cell = board[r][c];

const piece = PIECES[cell] || "";

const isMarker = cell === "⬡";

let cls = "cell " + (isHL ? (isLight ? "hl-light" : "hl-dark") : (isLight ? "light" : "dark"));

html += `<div class="${cls}">`;

if (isMarker) html += '<div class="marker"></div>';

else if (piece) html += `<span style="text-shadow:1px 1px 2px rgba(0,0,0,0.2)">${piece}</span>`;

html += '</div>';

}

html += '</div>';

return html;

}

function renderMenu() {

const menu = document.getElementById("menu");

const lessonEl = document.getElementById("lesson");

menu.style.display = "grid";

lessonEl.classList.add("hidden");

let html = "";

lessons.forEach((l, idx) => {

const done = completedSteps.has(idx);

html += `

<div class="card-title">${l.title}</div>

<div class="card-sub">${l.subtitle}</div>

</div>`;

});

menu.innerHTML = html;

updateProgress();

}

function goToLesson(idx) {

currentStep = idx;

selectedAnswer = null;

showResult = false;

renderLesson();

}

function renderLesson() {

const menu = document.getElementById("menu");

const lessonEl = document.getElementById("lesson");

menu.style.display = "none";

lessonEl.classList.remove("hidden");

const l = lessons[currentStep];

let html = `

<button class="back-btn" onclick="renderMenu()">→ חזרה לתפריט</button>

<div>

<h2 class="lesson-title">${l.title}</h2>

<p class="lesson-sub">${l.subtitle}</p>

</div>

<div class="board-container">${renderBoard(l.board, l.highlights)}</div>

<div class="desc-box">${l.description}</div>

<p class="quiz-q">${l.quiz.question}</p>

${l.quiz.options.map((opt, i) => `<button class="option" onclick="handleAnswer(${i})">${opt}</button>`).join("")}

</div>

</div>

${currentStep > 0 ? `<button class="btn secondary" onclick="goToLesson(${currentStep - 1})">← הקודם</button>` : ""}

<button class="btn" onclick="nextLesson()">${currentStep < 9 ? "הבא →" : "סיום 🏆"}</button>

</div>

<h3>מזל טוב! סיימת את כל 10 השלבים!</h3>

<p>עכשיו אתה מוכן להתחיל לשחק שחמט!</p>

</div>`;

lessonEl.innerHTML = html;

if (completedSteps.size === 10 && currentStep === 9) {

document.getElementById("celebration").classList.add("show");

}

updateProgress();

}

function handleAnswer(idx) {

if (showResult) return;

selectedAnswer = idx;

showResult = true;

const l = lessons[currentStep];

const btns = document.querySelectorAll("#quizOptions .option");

btns.forEach((btn, i) => {

btn.classList.add("locked");

if (i === l.quiz.answer) btn.classList.add("correct");

else if (i === idx && idx !== l.quiz.answer) btn.classList.add("wrong");

});

const isCorrect = idx === l.quiz.answer;

if (isCorrect) completedSteps.add(currentStep);

const resultEl = document.getElementById("quizResult");

resultEl.classList.add("show", isCorrect ? "win" : "lose");

resultEl.textContent = isCorrect

? "🎉 נכון מאוד! כל הכבוד!"

: `❌ לא נכון. התשובה הנכונה: ${l.quiz.options[l.quiz.answer]}`;

updateProgress();

if (completedSteps.size === 10 && currentStep === 9) {

document.getElementById("celebration").classList.add("show");

}

function nextLesson() {

if (currentStep < 9) goToLesson(currentStep + 1);

else renderMenu();

}

// Init

renderMenu();

</script>

</body>

</html>