fferramenta criar E-book;

Código criar livros online;

Acrescentar sempre novo ID a cada nova pagina do livro;

<!DOCTYPE html>

<html>

<meta charset="utf-8">

<pre>

<strong>

<head>

    <title>Livro Online Paginado</title>

    <style>

        .page {

            display: none;

            text-align: center;

            padding: 20px;

            background-color: lightgray;

            margin: 20px;

        }


        .active {

            display: block;

        }


        .navigation {

            margin-top: 20px;

        }

    </style>

</head>

<body>

    <div id="book">

        <div id="page1" class="page active">

            <h1>livro em construção;</h1>

            <p><img src="https://avatars.mds.yandex.net/i?id=a18ead1ba18522ddca8e0cf4fd1677cb8a8c9e66-4551895-images-thumbs&n=13"width="80%"><br>Seja feliz por favor;<br><img src="https://avatars.mds.yandex.net/i?id=2a0000018cd31b56ca65df1f93c86e25b44d-1614014-fast-images&n=13"width="80%"></p>

        </div>

        <div id="page2" class="page">

            <h1>Página 2</h1>

            <p>Conteúdo da página 2</p>

        </div>

        <div id="page3" class="page">

            <h1>Página 3</h1>

            <p>Conteúdo da página 3</p>

        </div>

        <!-- Adicione as outras páginas aqui -->

    </div>

    <div class="navigation">

        <button id="prevButton" onclick="previousPage()">Anterior</button>

        <span id="currentPage">1</span> /

        <span id="totalPages">3</span>

        <button id="nextButton" onclick="nextPage()">Próxima</button>

    </div>


    <script>

        var currentPage = 1;

        var totalPages = 3; // Ajuste o número total de páginas aqui


        function previousPage() {

            if (currentPage > 1) {

                document.getElementById("page" + currentPage).classList.remove("active");

                currentPage--;

                document.getElementById("currentPage").textContent = currentPage;

                document.getElementById("page" + currentPage).classList.add("active");

            }

        }


        function nextPage() {

            if (currentPage < totalPages) {

                document.getElementById("page" + currentPage).classList.remove("active");

                currentPage++;

                document.getElementById("currentPage").textContent = currentPage;

                document.getElementById("page" + currentPage).classList.add("active");

            }

        }

    </script>

</body>

</strong>

</pre>

</html>