hide-autor

[html]
<head>

<style type="text/css">
@font-face {
  font-family: 'Kobzar_KS';
  src: url('https://forumstatic.ru/files/0016/d8/85/45656.eot'),
   url('https://forumstatic.ru/files/0016/d8/85/28433.woff') format('woff'),
   url('https://forumstatic.ru/files/0016/d8/85/38752.ttf')  format('truetype'),
   url('https://forumstatic.ru/files/0016/d8/85/54587.svg') format('svg');
   font-weight: normal;
   font-style: normal;
}

@font-face {
  font-family: 'TrixiePro-Heavy';
  src: url('https://forumstatic.ru/files/0016/d8/85/43723.eot'),
   url('https://forumstatic.ru/files/0016/d8/85/30648.woff') format('woff'),
   url('https://forumstatic.ru/files/0016/d8/85/15579.ttf')  format('truetype'),
   url('https://forumstatic.ru/files/0016/d8/85/84435.svg') format('svg');
   font-weight: normal;
   font-style: normal;
}
</style>

  <style>
    .book_wrapper {
      position: relative;
      width: 800px;
      margin: 0 auto;
      padding: 50px 0;
    }

    #book_container {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 500px;
      background-image: url(https://forumstatic.ru/files/000d/19/7b/55725.png);
    }

    .page_spread {
       position: absolute;
       width: 100%;
       height: 100%;
       display: flex;
       /* transition: transform 0.5s ease; ← УБРАТЬ */
}

    .page {
      flex: 1;
      padding: 20px;
      box-sizing: border-box;
      background: transparent;
      overflow: hidden;
    }

    .page_left {
      transform: perspective(1000px) rotateY(0deg);
      max-width: 380px;
    }

    .page_right {
      transform: perspective(1000px) rotateY(0deg);
      max-width: 380px;
    }

    .page img{
      margin: 10px 0px 5px 35px;
      max-width: 300px;
      height: auto;
      padding: 4px;
      /*border: 1px solid #ddd;*/
      object-fit: cover;
}

     p  {
    font: 15px 'Kobzar_KS' ;
    margin: 15px 0 0 35px !important;
}

    h1 {
    font: 1.6em 'TrixiePro-Heavy' !important;
    text-align: end;
    margin: 25px 0 0 0 !important;
}

    h2{
    font: 15px 'Kobzar_KS' !important;
    text-align: end;
}

    h3 {
    font: 1.0em 'TrixiePro-Heavy' !important;
    text-align: end;
}

    /* Анимация перелистывания */
    .flipping .page_left {
      transform: perspective(1000px) rotateY(180deg);
    }

    .flipping .page_right {
      transform: perspective(1000px) rotateY(-180deg);
    }

    /* Кнопки навигации */
    #next_page_button, #prev_page_button {
      position: absolute;
      top: 80%;
      transform: translateY(-50%);
      padding: 10px;
      background: rgba(0,0,0,0.5);
      color: white;
      border-radius: 5px;
      cursor: pointer;
      z-index: 10;
    }

    #next_page_button {
      right: 20px;
    }

    #prev_page_button {
      left: 20px;
    }
  </style>
</head>

<body>
  <div class="book_wrapper">
    <a id="next_page_button">→</a>
    <a id="prev_page_button">←</a>

    <div id="book_container">

<!-- Страница 1 (левая/правая пара) -->
      <div class="page_spread active">
        <div class="page page_left">
          <img src="https://forumstatic.ru/files/0016/d8/85/29804.png" alt=" ">
        </div>
        <div class="page page_right">
          <h1>ОГЛАВЛЕНИЕ</h1>
          <h3>эпизоды</h3>
          <p>— Встреча с ведьмаком</p>
          <p>— День рождения</p>
          <p>— Признания</p>
        </div>
      </div>

      <!-- Страница 4 (левая/правая пара) -->
      <div class="page_spread active">
        <div class="page page_left">
<br><br>
          <img src="https://upforme.ru/uploads/001c/82/f2/36/472677.png" alt=" ">
<br><h2>Марблхед, лето 2025</h2>
        </div>
        <div class="page page_right">
          <h1>ДАВАЙ УЖЕ ПЕРЕЙДЁМ НА «МЫ»</h1>
          <h3>27/05/2025</h3>
          <p>В конце второго курса между парнями возникла крохотная такая, размером с Гранд-Каньон, недосказанность. Как следствие — неловкость в общении, сомнения и недоверие в тандеме ведьмака и фамильяра повлекли за собой существенный спад в их магических способностях. Едва не завалив конец семестра, парни получили настоятельную рекомендацию: дистанцию не увеличивать и по возможности восстановить прежнюю совместимость в паре. Сказать, в общем-то, было проще, чем воплотить в жизнь, но вот они здесь: едут на каникулы в родной город Нэйтана. Оба два.</p>
        </div>
      </div>

      <!-- Страница 2 (левая/правая пара) -->
      <div class="page_spread">
        <div class="page page_left">
          <img src="https://i.pinimg.com/originals/42/49/b7/4249b7a08ae9f7d3a7e2586174e83867.gif" alt=" ">
        </div>
        <div class="page page_right">
          <h1>Заголовок страницы 4</h1>
          <p>Наполнение страницы 4</p>
        </div>
      </div>
    </div>
  </div>

  <script>
document.addEventListener('DOMContentLoaded', function() {
  const bookContainer = document.getElementById('book_container');
  const pageSpreads = document.querySelectorAll('.page_spread');
  const nextBtn = document.getElementById('next_page_button');
  const prevBtn = document.getElementById('prev_page_button');
  let currentPage = 0;

  // Инициализация позиций
  pageSpreads.forEach((spread, index) => {
    spread.style.transform = `translateX(${index * 100}%)`;
  });

  function flipPage(direction) {
    // Сразу убираем класс анимации (если был)
    pageSpreads[currentPage].classList.remove('flipping');

    // Логика смены страницы
    if (direction === 'next') {
      currentPage++;
      if (currentPage >= pageSpreads.length) currentPage = 0;
    } else {
      currentPage--;
      if (currentPage < 0) currentPage = pageSpreads.length - 1;
    }

    // МГНОВЕННОЕ обновление позиций
    pageSpreads.forEach((spread, index) => {
      spread.style.transform = `translateX(${ (index - currentPage) * 100 }%)`;
    });
  }

  // Обработчики кликов
  nextBtn.addEventListener('click', () => flipPage('next'));
  prevBtn.addEventListener('click', () => flipPage('prev'));

  // Клавиатура
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight') flipPage('next');
    if (e.key === 'ArrowLeft') flipPage('prev');
  });
});

</script>
</body>
[/html]