የአባቶች ምዕራፍ

[gezedavid]

<title>הספר שלי</title> <style> body { font-family: sans-serif; background: #f4f4f9; display: flex; flex-direction: column; align-items: center; padding: 20px; } .card { background: white; padding: 20px; border-radius: 15px; shadow: 0 4px 6px rgba(0,0,0,0.1); max-width: 500px; width: 100%; min-height: 400px; } .content { font-size: 18px; line-height: 1.6; margin-bottom: 20px; } .controls { display: flex; gap: 10px; width: 100%; justify-content: center; } button { padding: 10px 20px; border: none; border-radius: 8px; background: #007bff; color: white; cursor: pointer; font-size: 16px; } button:disabled { background: #ccc; } </style>

<div class="card">
    <h2 id="chapter-title">פרק 1</h2>
    <div id="chapter-content" class="content">כאן תכתוב את התוכן של פרק 1...</div>
    
    <div class="controls">
        <button onclick="prevChapter()" id="prevBtn">הקודם</button>
        <button onclick="nextChapter()" id="nextBtn">דילוג לפרק הבא</button>
    </div>
</div>

<script>
    const chapters = [
        { title: "פרק 1", content: "התוכן של פרק 1 מתחיל כאן..." },
        { title: "פרק 2", content: "התוכן של פרק 2 מתחיל כאן..." },
        { title: "פרק 3", content: "התוכן של פרק 3..." },
        { title: "פרק 4", content: "התוכן של פרק 4..." },
        { title: "פרק 5", content: "התוכן של פרק 5..." },
        { title: "פרק 6", content: "פרק אחרון!" }
    ];

    let currentIdx = 0;

    function updateUI() {
        document.getElementById('chapter-title').innerText = chapters[currentIdx].title;
        document.getElementById('chapter-content').innerText = chapters[currentIdx].content;
        document.getElementById('prevBtn').disabled = currentIdx === 0;
        document.getElementById('nextBtn').innerText = currentIdx === chapters.length - 1 ? "סיום" : "דילוג לפרק הבא";
    }

    function nextChapter() {
        if (currentIdx < chapters.length - 1) {
            currentIdx++;
            updateUI();
        }
    }

    function prevChapter() {
        if (currentIdx > 0) {
            currentIdx--;
            updateUI();
        }
    }
</script>