Embed

<div id="ebookContainer" style="background:#111; color:#eee; font-family:Georgia, serif; padding:4vw; max-width:800px; margin:auto;">
  <div id="pageContent" style="min-height:300px; white-space:pre-line;"></div>
  <div style="text-align:center; margin-top:2em;">
    <button id="prevBtn" style="padding:10px 20px; margin-right:1em; background:#333; color:#fff;">Previous</button>
    <button id="nextBtn" style="padding:10px 20px; background:#333; color:#fff;">Next</button>
  </div>
  <div style="text-align:center; margin-top:1em;" id="pageIndicator"></div>
</div>

<script>
const pages = [
  "<h2>Welcome to Pentacle</h2><p>The new era of interactive magazines begins here.</p>",
  "<h2>✈️ Travel: Wander Rituals</h2><p>Lisbon's sidewalks tell stories. Every shadow has flavor, every light has rhythm.</p>",
  "<h2>💻 Tech: Digital Skin</h2><p>Your screen doesn’t just glow — it listens, it responds, it learns to love.</p>",
  "<h2>👗 Fashion: Fabric of Form</h2><p>Fashion is not what you wear, it’s how your story chooses to be seen.</p>",
  "<h2>🚘 Cars: Machines That Move Me</h2><p>Torque, elegance, rebellion. Cars are love letters from steel to freedom.</p>",
  "<h2>🍽️ Food: Edible Love</h2><p>Food is not fuel. It is art, ritual, and touch.</p>"
];

let currentPage = 0;
const pageContent = document.getElementById("pageContent");
const pageIndicator = document.getElementById("pageIndicator");

function showPage(index) {
  pageContent.innerHTML = pages[index];
  pageIndicator.innerText = `Page ${index + 1} of ${pages.length}`;
  document.getElementById("prevBtn").disabled = index === 0;
  document.getElementById("nextBtn").disabled = index === pages.length - 1;
}

document.getElementById("prevBtn").onclick = () => {
  if (currentPage > 0) {
    currentPage--;
    showPage(currentPage);
  }
};

document.getElementById("nextBtn").onclick = () => {
  if (currentPage < pages.length - 1) {
    currentPage++;
    showPage(currentPage);
  }
};

showPage(currentPage);
</script>