samkay182/gradient-glow-navigator

1// Sample data for additional pages2const letters = [3    // A4    { 5        letter: "A", 6        title: "Apple Annie", 7        rhyme: "Annie picks apples so shiny and red,\nFilling her basket from bottom to head!",8        svg: `<path d="M250,100 Q300,50 350,100 T450,150 L400,300 Q375,350 350,325 T300,275 L200,275 Q175,350 150,325 T100,300 L50,150 Q100,50 150,100 T250,100 Z" fill="none" stroke="black" stroke-width="8"/>9              <path d="M250,100 L250,50" stroke="black" stroke-width="5"/>10              <path d="M240,50 L260,50" stroke="black" stroke-width="5"/>11              <circle cx="300" cy="150" r="30" fill="none" stroke="black" stroke-width="5"/>12              <circle cx="200" cy="150" r="30" fill="none" stroke="black" stroke-width="5"/>13              <path d="M250,175 Q275,200 250,225 T225,250" fill="none" stroke="black" stroke-width="5"/>`14    },15    // B16    {17        letter: "B",18        title: "Bubble Ben",19        rhyme: "Ben blows bubbles that bounce in the air,\nBig and small bubbles everywhere!",20        svg: `<circle cx="250" cy="150" r="100" fill="none" stroke="black" stroke-width="8"/>21              <path d="M250,50 L200,50 Q150,50 150,100 T150,200 T150,300 Q150,350 200,350 L250,350" fill="none" stroke="black" stroke-width="8"/>22              <circle cx="200" cy="150" r="40" fill="none" stroke="black" stroke-width="5"/>23              <circle cx="200" cy="250" r="40" fill="none" stroke="black" stroke-width="5"/>24              <circle cx="300" cy="200" r="20" fill="none" stroke="black" stroke-width="4"/>25              <circle cx="350" cy="250" r="15" fill="none" stroke="black" stroke-width="3"/>26              <circle cx="320" cy="100" r="25" fill="none" stroke="black" stroke-width="4"/>`27    },28    // More letters to be added...29];30 31// Navigation functions32let currentPage = 0;33 34function updatePage() {35    if (currentPage >= 0 && currentPage < letters.length) {36        const page = letters[currentPage];37        document.getElementById('currentLetter').textContent = page.letter;38        document.getElementById('currentTitle').textContent = page.title;39        document.getElementById('currentRhyme').innerHTML = page.rhyme.replace(/\n/g, '<br>');40        document.getElementById('currentIllustration').innerHTML = page.svg;41        document.getElementById('pageNum').textContent = `Page ${currentPage+1} of ${letters.length}`;42    }43}44 45function nextPage() {46    if (currentPage < letters.length - 1) {47        currentPage++;48        updatePage();49    }50}51 52function prevPage() {53    if (currentPage > 0) {54        currentPage--;55        updatePage();56    }57}58 59function printBook() {60    window.print();61}62 63// Initialize first page64document.addEventListener('DOMContentLoaded', updatePage);