script.js

// MAIN CONTENT & ABOUT ME
const mainContent = document.getElementById("mainContent");
const aboutDiv = document.getElementById("aboutMe");
// HOME CONTENT
const homeContent = `<p>Explore, Read, and Enjoy your journey through our stories</p>`;
// ABOUT ME CONTENT
const aboutContent = `
    <h2>About Me</h2>
    <p>I am proud to share the beautiful dreams from my imagination with you. Everything written comes entirely from the worlds I visit each night when I close my eyes. I hope you enjoy it and take the time to read it. If you have any suggestions or find any bugs on the site, please do not hesitate to contact me at "erkansoftwaredeveloper@gmail.com". Let's make our site even better.</p>
    <p>Sincerely,<br>Erkan</p>
    <p>Check out my GitHub:</p>
    <a href="https://github.com/ErkanSoftwareDeveloper" target="_blank" class="github-link">
        <img src="github-mark-white.svg" alt="GitHub" class="github-icon">
    </a>
`;
// PAGINATION ELEMENTS
const pagination = document.getElementById("pagination");
const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next");
const pageNumberInput = document.getElementById("pageNumber");
let storyData = []; // JSON variable
let currentPage = 0;
// HOME BUTTON
document.getElementById("Home").onclick = (e) => {
    e.preventDefault();
    mainContent.classList.add("home-style");
    mainContent.innerHTML = homeContent;
    mainContent.style.display = "flex";
    aboutDiv.style.display = "none";
    document.getElementById("Sag").style.display = "flex";
    pagination.style.display = "none";
};
// ABOUT BUTTON
document.getElementById("About").onclick = (e) => {
    e.preventDefault();
    mainContent.style.display = "none";
    aboutDiv.innerHTML = aboutContent;
    aboutDiv.style.display = "flex";
    document.getElementById("Sag").style.display = "none";
    pagination.style.display = "none";
};
// SIDEBAR ITEMS
document.querySelectorAll("#sectionList li").forEach(li => {
    li.onclick = () => {
        const section = li.dataset.section;
        fetch(`stories/${section}.json`)
            .then(res => res.json())
            .then(data => {
                storyData = data;
                currentPage = 0;
                showPage(currentPage);
            })
            .catch(err => console.error("JSON Error:", err));
    };
});
// SHOW PAGE FUNCTION
function showPage(index) {
    if (!storyData.length) return;
    if (index < 0) index = 0;
    if (index >= storyData.length) index = storyData.length - 1;
    currentPage = index;

    const page = storyData[index];
    const hasImage = page.image && page.image.trim() !== "";
    const hasText  = page.text  && page.text.trim()  !== "";
    const hasTitle = page.title && page.title.trim() !== "";

    let html = "";

    // SADECE resim varsa (text yok) → full page resim
    if (hasImage && !hasText) {
        html = `
            <div style="width:100%; height:100%; display:flex; justify-content:center; align-items:center;">
                <img src="${page.image}" alt="${page.title || 'Story illustration'}"
                     style="max-width:100%; max-height:100%; object-fit:contain; border-radius:10px;">
            </div>`;
    }
    // Resim VE text varsa → resim üstü, text altı
    else if (hasImage && hasText) {
        html = `
            ${hasTitle ? `<h2 class="section-title">${page.title}</h2>` : ""}
            <img src="${page.image}" alt="${page.title || 'Story illustration'}"
                 style="width:100%; max-width:500px; margin:0 auto 20px; border-radius:10px; object-fit:cover;">
            <p class="story-text">${page.text}</p>`;
    }
    // Sadece text varsa (resim yok)
    else {
        html = `
            ${hasTitle ? `<h2 class="section-title">${page.title}</h2>` : ""}
            <p class="story-text">${page.text}</p>`;
    }

    mainContent.classList.remove("home-style");
    mainContent.style.display = "flex";
    mainContent.innerHTML = html;

    aboutDiv.style.display = "none";
    document.getElementById("Sag").style.display = "flex";
    pagination.style.display = "flex";
    pageNumberInput.value = currentPage + 1;
}
// NEXT BUTTON
nextBtn.onclick = () => {
    if (currentPage < storyData.length - 1) {
        showPage(currentPage + 1);
    }
};
// PREV BUTTON
prevBtn.onclick = () => {
    if (currentPage > 0) {
        showPage(currentPage - 1);
    }
};
// PAGE INPUT ENTER
pageNumberInput.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
        let page = parseInt(pageNumberInput.value);
        if (!isNaN(page)) {
            showPage(page - 1); // index 0 based
        }
    }
});