| 80 | ]; |
| 81 | |
| 82 | // Update the guide dialog with the current page's content and image. |
| 83 | function updateGuide() { |
| 84 | const guideText = document.getElementById("guide-text"); |
| 85 | const guideImage = document.getElementById("guide-image"); |
| 86 | const backButton = document.getElementById("guide-back-button"); |
| 87 | const nextButton = document.getElementById("guide-next-button"); |
| 88 | const progressFill = document.getElementById("guide-progress-fill"); |
| 89 | const progressText = document.getElementById("guide-progress-text"); |
| 90 | |
| 91 | const page = guidePages[currentPage]; |
| 92 | |
| 93 | // Update progress indicator |
| 94 | const progress = ((currentPage + 1) / guidePages.length) * 100; |
| 95 | if (progressFill) { |
| 96 | progressFill.style.width = `${progress}%`; |
| 97 | } |
| 98 | if (progressText) { |
| 99 | progressText.textContent = `Page ${currentPage + 1} of ${guidePages.length}`; |
| 100 | } |
| 101 | |
| 102 | // Fade out the current content |
| 103 | guideText.style.opacity = 0; |
| 104 | guideImage.style.opacity = 0; |
| 105 | |
| 106 | // Set a timeout to allow the fade-out to complete before changing content |
| 107 | setTimeout(() => { |
| 108 | // Clear existing contents before adding new content |
| 109 | guideText.innerHTML = ''; |
| 110 | |
| 111 | // For pages 2 and 3 (indexes 1 and 2) show a two-column layout (image on left, text on right) |
| 112 | if (currentPage === 1 || currentPage === 2) { |
| 113 | // Create a two-column container |
| 114 | const twoColumnContainer = document.createElement("div"); |
| 115 | twoColumnContainer.className = "guide-two-column"; |
| 116 | |
| 117 | // Create the image element |
| 118 | const imgElement = document.createElement("img"); |
| 119 | imgElement.src = page.image; |
| 120 | imgElement.alt = page.title; |
| 121 | |
| 122 | // Create a text container for the title and content |
| 123 | const textContainer = document.createElement("div"); |
| 124 | textContainer.className = "guide-text-content"; |
| 125 | textContainer.innerHTML = `<h3>${page.title}</h3><p>${page.content}</p>`; |
| 126 | |
| 127 | // Append to two-column container |
| 128 | twoColumnContainer.appendChild(imgElement); |
| 129 | twoColumnContainer.appendChild(textContainer); |
| 130 | guideText.appendChild(twoColumnContainer); |
| 131 | |
| 132 | // Hide the standalone guideImage element (not used in this layout) |
| 133 | guideImage.style.display = "none"; |
| 134 | } else { |
| 135 | // Default layout: show title and content in guideText, and if an image exists, display it. |
| 136 | guideText.innerHTML = `<h3>${page.title}</h3><p>${page.content}</p>`; |
| 137 | if (page.image) { |
| 138 | guideImage.src = page.image; |
| 139 | guideImage.alt = page.title; |