Brochure - SkyPeople Training

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Brochure Book Viewer</title>
  <style>
    * {
      box-sizing: border-box;
    }

    :root {
      --bg: #f3f0ea;
      --panel: #ffffff;
      --text: #1f1f1f;
      --muted: #666;
      --border: #d7d0c7;
      --shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
      --radius: 18px;
    }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background: linear-gradient(180deg, #f7f4ef 0%, #ece6dd 100%);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 24px;
    }

    .brochure-app {
      width: min(1200px, 100%);
      background: rgba(255, 255, 255, 0.52);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.7);
      border-radius: 24px;
      padding: 24px;
      box-shadow: var(--shadow);
    }

    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .toolbar h1 {
      margin: 0;
      font-size: 1.5rem;
      line-height: 1.2;
    }

    .toolbar p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 0.95rem;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    button {
      border: 1px solid var(--border);
      background: var(--panel);
      color: var(--text);
      padding: 12px 16px;
      border-radius: 999px;
      cursor: pointer;
      font-size: 0.95rem;
      transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
      box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    }

    button:hover {
      transform: translateY(-1px);
      background: #faf8f5;
    }

    button:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      transform: none;
    }

    .page-indicator {
      min-width: 120px;
      text-align: center;
      font-weight: 600;
      color: var(--muted);
    }

    .book-shell {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .book {
      position: relative;
      width: min(100%, 980px);
      aspect-ratio: 16 / 10;
      perspective: 2200px;
    }

    .book-spread {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-radius: var(--radius);
      overflow: hidden;
      background: #efe7db;
      box-shadow: var(--shadow);
    }

    .page {
      position: relative;
      background: #fff;
      overflow: hidden;
      border: 1px solid #e6dfd5;
    }

    .page.left {
      border-right: none;
      border-radius: var(--radius) 0 0 var(--radius);
    }

    .page.right {
      border-left: none;
      border-radius: 0 var(--radius) var(--radius) 0;
    }

    .page::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 22px;
      pointer-events: none;
    }

    .page.left::after {
      right: 0;
      background: linear-gradient(to left, rgba(0,0,0,0.08), transparent);
    }

    .page.right::after {
      left: 0;
      background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);
    }

    .page img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
    }

    .page-number {
      position: absolute;
      bottom: 12px;
      font-size: 0.85rem;
      color: #6f6a62;
      background: rgba(255,255,255,0.86);
      padding: 6px 10px;
      border-radius: 999px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    }

    .page.left .page-number {
      left: 14px;
    }

    .page.right .page-number {
      right: 14px;
    }

    .page.empty {
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #fcfbf9 0%, #f3eee6 100%);
      color: #8b847a;
      font-size: 1rem;
      padding: 24px;
      text-align: center;
    }

    .flip-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      display: none;
    }

    .flip-layer.active {
      display: block;
    }

    .flipper {
      position: absolute;
      top: 0;
      width: 50%;
      height: 100%;
      transform-style: preserve-3d;
      transform-origin: left center;
    }

    .flipper.next {
      right: 0;
      transform-origin: left center;
      animation: flipNext 0.8s ease forwards;
    }

    .flipper.prev {
      left: 0;
      transform-origin: right center;
      animation: flipPrev 0.8s ease forwards;
    }

    .flipper-face {
      position: absolute;
      inset: 0;
      backface-visibility: hidden;
      background: #fff;
      overflow: hidden;
      border: 1px solid #e6dfd5;
    }

    .flipper-face img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .flipper-face.front {
      transform: rotateY(0deg);
    }

    .flipper-face.back {
      transform: rotateY(180deg);
    }

    .flipper.next .front,
    .flipper.next .back {
      border-radius: 0 var(--radius) var(--radius) 0;
    }

    .flipper.prev .front,
    .flipper.prev .back {
      border-radius: var(--radius) 0 0 var(--radius);
    }

    .hint {
      margin-top: 16px;
      color: var(--muted);
      font-size: 0.92rem;
      text-align: center;
    }

    @keyframes flipNext {
      0% { transform: rotateY(0deg); }
      100% { transform: rotateY(-180deg); }
    }

    @keyframes flipPrev {
      0% { transform: rotateY(0deg); }
      100% { transform: rotateY(180deg); }
    }

    @media (max-width: 820px) {
      .book {
        aspect-ratio: 3 / 4;
      }

      .book-spread {
        grid-template-columns: 1fr;
      }

      .page.left {
        display: none;
      }

      .page.right {
        border-left: 1px solid #e6dfd5;
        border-radius: var(--radius);
      }

      .flip-layer .flipper {
        width: 100%;
        left: 0;
        right: auto;
        transform-origin: left center;
      }

      .flipper.prev {
        transform-origin: right center;
      }

      .flipper.next .front,
      .flipper.next .back,
      .flipper.prev .front,
      .flipper.prev .back {
        border-radius: var(--radius);
      }
    }
  </style>
</head>
<body>
  <div class="brochure-app">
    <div class="toolbar">
      <div>
        <h1>Training Brochure</h1>
        <p>Browse your brochure like a book directly on your website.</p>
      </div>

      <div class="controls">
        <button id="prevBtn" type="button">Previous</button>
        <div class="page-indicator" id="pageIndicator">Page 1 of 8</div>
        <button id="nextBtn" type="button">Next</button>
      </div>
    </div>

    <div class="book-shell">
      <div class="book" id="book">
        <div class="book-spread">
          <div class="page left" id="leftPage"></div>
          <div class="page right" id="rightPage"></div>
        </div>

        <div class="flip-layer" id="flipLayer"></div>
      </div>
    </div>

    <div class="hint">Tip: replace the sample image paths in the code with your brochure pages. For the best result, export each brochure page as a JPG or PNG.</div>
  </div>

  <script>
    // Replace these with your real brochure page image files.
    // Example:
    // 'images/brochure-page-1.jpg'
    // Replace these with your real brochure page image files.
    // Example using your brochure name:
    // 'images/SkyPeople-Brochure-2026/page-1.jpg'
    const pages = [
      'images/SkyPeople-Brochure-2026/page-1.jpg',
      'images/SkyPeople-Brochure-2026/page-2.jpg',
      'images/SkyPeople-Brochure-2026/page-3.jpg',
      'images/SkyPeople-Brochure-2026/page-4.jpg',
      'images/SkyPeople-Brochure-2026/page-5.jpg',
      'images/SkyPeople-Brochure-2026/page-6.jpg',
      'images/SkyPeople-Brochure-2026/page-7.jpg',
      'images/SkyPeople-Brochure-2026/page-8.jpg'
    ];

    const leftPage = document.getElementById('leftPage');
    const rightPage = document.getElementById('rightPage');
    const pageIndicator = document.getElementById('pageIndicator');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const flipLayer = document.getElementById('flipLayer');

    let currentSpread = 0;
    let isAnimating = false;

    function isMobile() {
      return window.innerWidth <= 820;
    }

    function createPageHTML(src, pageNumber, side) {
      if (!src) {
        return `<div class="page empty">End of brochure</div>`;
      }

      return `
        <img decoding="async" src="${src}" alt="Brochure page ${pageNumber}" />
        <div class="page-number">${pageNumber}</div>
      `;
    }

    function getSpreadSize() {
      return isMobile() ? 1 : 2;
    }

    function getTotalViews() {
      return Math.ceil(pages.length / getSpreadSize());
    }

    function renderSpread() {
      const spreadSize = getSpreadSize();
      const leftIndex = currentSpread * spreadSize;
      const rightIndex = leftIndex + 1;

      if (isMobile()) {
        leftPage.style.display = 'none';
        rightPage.innerHTML = createPageHTML(pages[leftIndex], leftIndex + 1, 'right');
      } else {
        leftPage.style.display = 'block';
        leftPage.innerHTML = createPageHTML(pages[leftIndex], leftIndex + 1, 'left');
        rightPage.innerHTML = createPageHTML(pages[rightIndex], rightIndex + 1, 'right');
      }

      const shownPage = isMobile() ? leftIndex + 1 : `${leftIndex + 1}-${Math.min(rightIndex + 1, pages.length)}`;
      pageIndicator.textContent = `Page ${shownPage} of ${pages.length}`;

      prevBtn.disabled = currentSpread === 0 || isAnimating;
      nextBtn.disabled = currentSpread >= getTotalViews() - 1 || isAnimating;
    }

    function animateFlip(direction) {
      if (isAnimating) return;
      isAnimating = true;
      renderSpread();

      const spreadSize = getSpreadSize();
      const currentIndex = currentSpread * spreadSize;
      const nextSpread = direction === 'next' ? currentSpread + 1 : currentSpread - 1;
      const nextIndex = nextSpread * spreadSize;

      let frontImage = '';
      let backImage = '';

      if (isMobile()) {
        frontImage = direction === 'next' ? pages[currentIndex] : pages[currentIndex];
        backImage = direction === 'next' ? pages[nextIndex] : pages[nextIndex];
      } else {
        frontImage = direction === 'next' ? pages[currentIndex + 1] : pages[currentIndex];
        backImage = direction === 'next' ? pages[nextIndex] : pages[nextIndex + 1];
      }

      flipLayer.className = 'flip-layer active';
      flipLayer.innerHTML = `
        <div class="flipper ${direction}">
          <div class="flipper-face front">
            <img decoding="async" src="${frontImage || 'https://placehold.co/1200x1600?text=Page'}" alt="Turning page front" />
          </div>
          <div class="flipper-face back">
            <img decoding="async" src="${backImage || 'https://placehold.co/1200x1600?text=Page'}" alt="Turning page back" />
          </div>
        </div>
      `;

      setTimeout(() => {
        currentSpread = nextSpread;
        flipLayer.className = 'flip-layer';
        flipLayer.innerHTML = '';
        isAnimating = false;
        renderSpread();
      }, 800);
    }

    prevBtn.addEventListener('click', () => {
      if (currentSpread > 0) animateFlip('prev');
    });

    nextBtn.addEventListener('click', () => {
      if (currentSpread < getTotalViews() - 1) animateFlip('next');
    });

    window.addEventListener('keydown', (event) => {
      if (event.key === 'ArrowRight' && currentSpread < getTotalViews() - 1) {
        animateFlip('next');
      }
      if (event.key === 'ArrowLeft' && currentSpread > 0) {
        animateFlip('prev');
      }
    });

    let touchStartX = 0;
    let touchEndX = 0;

    document.getElementById('book').addEventListener('touchstart', (event) => {
      touchStartX = event.changedTouches[0].screenX;
    }, { passive: true });

    document.getElementById('book').addEventListener('touchend', (event) => {
      touchEndX = event.changedTouches[0].screenX;
      const diff = touchStartX - touchEndX;

      if (Math.abs(diff) < 40) return;

      if (diff > 0 && currentSpread < getTotalViews() - 1) {
        animateFlip('next');
      }

      if (diff < 0 && currentSpread > 0) {
        animateFlip('prev');
      }
    }, { passive: true });

    window.addEventListener('resize', () => {
      currentSpread = 0;
      renderSpread();
    });

    renderSpread();
  </script>
<script defer src="/.cloud/rum/otel-rum-exporter.js?v=1.0.1"></script>
</body>
</html>