<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <title>Tikboo</title>

  <!-- =========================================================
       HEAD / SEO / META (LOCK ZONE S2 – 1:1)
       ========================================================= -->
  <meta name="robots" content="index,follow" />
  <meta name="description" content="Tikboo is a live video platform where fans influence what creators make next. Discover a world of live streams and real connections.">
  <link rel="canonical" href="https://tikboo.com/" />

  <!-- =========================================================
       Site Name / Structured Data
       ========================================================= -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "Tikboo",
    "url": "https://tikboo.com/"
  }
  </script>

  <!-- =========================================================
       OG / Twitter
       ========================================================== -->
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Tikboo">
  <meta property="og:title" content="Tikboo">
  <meta property="og:description" content="Tikboo is a live video platform where fans influence what creators make next. Discover a world of live streams and real connections.">
  <meta property="og:url" content="https://tikboo.com/">
  <meta property="og:image" content="https://tikboo.com/assets/swipe-og.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Tikboo">
  <meta name="twitter:description" content="Tikboo is a live video platform where fans influence what creators make next. Discover a world of live streams and real connections.">
  <meta name="twitter:image" content="https://tikboo.com/assets/swipe-og.png">
  <meta name="twitter:url" content="https://tikboo.com/">

  <!-- =========================================================
       Icons / Analytics
       ========================================================== -->
  <meta name="google-site-verification" content="8x53RZUH8MhYK0f3LFtuQu5bOBKhqNUwMOjMUYvX4Rk" />

  <link rel="icon" type="image/png" sizes="16x16" href="/assets/swipe-16x16.PNG">
  <link rel="icon" type="image/png" sizes="32x32" href="/assets/swipe-32x32.PNG">
  <link rel="icon" type="image/png" sizes="48x48" href="/assets/swipe-48x48.PNG">
  <link rel="apple-touch-icon" sizes="180x180" href="/assets/swipe-180x180.PNG">
  <meta name="theme-color" content="#000000" />

  <!-- === GOOGLE ANALYTICS (GA4) === -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-WPM9NZKJ0T"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-WPM9NZKJ0T');
  </script>

  <!-- =========================================================
       APP CSS
       ========================================================== -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Sora:wght@500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/assets/css/app.css" />
</head>

<body class="is-swipe-page">

  <!-- LANDSCAPE LOCK -->
  <div class="landscape-lock" aria-hidden="true">
    <div class="landscape-lock__inner">
      <div class="landscape-lock__icon">↻</div>
      <div class="landscape-lock__title">Rotate your phone</div>
      <div class="landscape-lock__text">Tikboo is built for vertical swipe.</div>
    </div>
  </div>

  <!-- =========================================================
       HTML: Age Gate (LOCK ZONE S1 – 1:1)
       ========================================================== -->
<div id="gateOverlay" aria-modal="true" role="dialog" data-nosnippet>
  <main class="wrap">
    <section class="card" id="gate" data-nosnippet>
      <div class="top-g">
        <div class="age-system">
          <div class="gate-brand">
            <img class="gate-logo" src="/assets/swipe-logo.PNG" alt="Swipe">
          </div>
        </div>
      </div>

        <div style="text-align:center; padding: 0 20px;" data-nosnippet>
          <p class="legal" data-nosnippet>
            <span>By entering Tikboo, you confirm you are</span>
            <span>18+ adults only and acknowledge the content</span>
            <span>is sexually explicit.</span>
          </p>
        </div>

        <div class="bottom">
          <button class="enterBtn" id="enterBtn" type="button">
            <span class="enterTop">ENTER</span>
            <span class="enterBottom">I’m over 18</span>
          </button>

          <div class="consent" data-nosnippet>
            <a class="consent-pill" href="/legal/cookies.html">
              ACCEPT ALL COOKIES
            </a>

            <a class="consent-pill" href="/legal/terms-and-conditions.html">
              TERMS AND CONDITIONS
            </a>

            <a class="consent-pill" href="/legal/privacy-policy.html">
              PRIVACY POLICY
            </a>
          </div>
        </div>
      </section>
    </main>
  </div>

  <!-- =========================================================
       HTML: Video Stack (LOCK ZONE S3)
       ========================================================== -->
  <div id="video-stack">
    <div id="layerPrev" class="twincher-layer">
      <video id="videoPrev" playsinline></video>
      <img id="imgPrev" alt="" draggable="false" />

      <aside class="side" aria-label="Actions">
        <div class="stack avatar-stack">
          <button class="avatarBtn" aria-label="Avatar">
            <span class="avatar-ring">
              <img class="avatar" src="/assets/profile.jpeg" alt="Avatar" />
            </span>
          </button>
        </div>

        <div class="stack">
          <button class="likeBtn" aria-label="Like">
            <img src="assets/icons/heart.svg" class="icon-heart" alt="">
          </button>
          <div class="count">875</div>
        </div>

        <div class="stack">
          <button aria-label="Talk">
            <img src="assets/icons/talk.svg" class="icon-talk" alt="">
          </button>
          <div class="count">47</div>
        </div>

        <div class="stack">
          <button aria-label="Bookmark">
            <img src="assets/icons/bookmark.svg" class="icon-bookmark" alt="">
          </button>
          <div class="count">203</div>
        </div>

        <div class="stack">
          <button aria-label="Share">
            <img src="assets/icons/share.svg" class="icon-share" alt="">
          </button>
          <div class="count">112</div>
        </div>

        <div class="stack">
          <button aria-label="More">
            <img src="assets/icons/dots.svg" class="icon-dots" alt="">
          </button>
        </div>
      </aside>
    </div>

    <div id="layerCurrent" class="twincher-layer">

      <div id="db-video-wrapper" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:none;"></div>

      <video id="videoCurrent" playsinline></video>
      <img id="playOverlay" src="/assets/icons/play.svg" alt="" />
      <img id="imgCurrent" alt="" draggable="false" />

      <aside class="side" aria-label="Actions">
        <div class="stack avatar-stack">
          <button class="avatarBtn" aria-label="Avatar">
            <span class="avatar-ring">
              <img class="avatar" src="/assets/profile.jpeg" alt="Avatar" />
            </span>
          </button>
        </div>

        <div class="stack">
          <button class="likeBtn" aria-label="Like">
            <img src="assets/icons/heart.svg" class="icon-heart" alt="">
          </button>
          <div class="count">875</div>
        </div>

        <div class="stack">
          <button aria-label="Talk">
            <img src="assets/icons/talk.svg" class="icon-talk" alt="">
          </button>
          <div class="count">47</div>
        </div>

        <div class="stack">
          <button aria-label="Bookmark">
            <img src="assets/icons/bookmark.svg" class="icon-bookmark" alt="">
          </button>
          <div class="count">203</div>
        </div>

        <div class="stack">
          <button id="shareBtn" aria-label="Share">
            <img src="assets/icons/share.svg" class="icon-share" alt="">
          </button>
          <div class="count">112</div>
        </div>

        <div class="stack">
          <button aria-label="More">
            <img src="assets/icons/dots.svg" class="icon-dots" alt="">
          </button>
        </div>
      </aside>
    </div>

    <div id="layerNext" class="twincher-layer">
      <video id="videoNext" playsinline></video>
      <img id="imgNext" alt="" draggable="false" />

      <aside class="side" aria-label="Actions">
        <div class="stack avatar-stack">
          <button class="avatarBtn" aria-label="Avatar">
            <span class="avatar-ring">
              <img class="avatar" src="/assets/profile.jpeg" alt="Avatar" />
            </span>
          </button>
        </div>

        <div class="stack">
          <button class="likeBtn" aria-label="Like">
            <img src="assets/icons/heart.svg" class="icon-heart" alt="">
          </button>
          <div class="count">875</div>
        </div>

        <div class="stack">
          <button aria-label="Talk">
            <img src="assets/icons/talk.svg" class="icon-talk" alt="">
          </button>
          <div class="count">47</div>
        </div>

        <div class="stack">
          <button aria-label="Bookmark">
            <img src="assets/icons/bookmark.svg" class="icon-bookmark" alt="">
          </button>
          <div class="count">203</div>
        </div>

        <div class="stack">
          <button id="shareBtn" aria-label="Share">
            <img src="assets/icons/share.svg" class="icon-share" alt="">
          </button>
          <div class="count">112</div>
        </div>

        <div class="stack">
          <button aria-label="More">
            <img src="assets/icons/dots.svg" class="icon-dots" alt="">
          </button>
        </div>
      </aside>
    </div>
  </div>

  <!-- =========================================================
       TOP UI: LIVE
       ========================================================== -->
  <div class="top">
    <img src="/assets/icons/live.png" alt="Live">
  </div>

  <main class="stage" aria-label="Hero"></main>

  <!-- =========================================================
       PROFILE MODAL
       ========================================================== -->
  <div id="profileModal" class="modal-backdrop" role="dialog" aria-modal="true">
    <div class="modal">
      <div class="modal-header">
        <h2 class="modal-title">Your profile</h2>
        <button class="modal-close" id="closeProfile" aria-label="Close">
          <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 6L18 18" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
            <path d="M18 6L6 18" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
      </div>
      <div style="padding:20px; text-align:center;">
        <p>Sign in or create your profile to save likes and unlock more.</p>
        <div class="actions" style="justify-content:center; gap:10px;">
          <button class="btn secondary">Sign in</button>
          <button class="btn primary">Create profile</button>
        </div>
        <div class="note">Adults only. Simple placeholder — full access flow later.</div>
      </div>
    </div>
  </div>

  <!-- =========================================================
       BOTTOM NAV (LOCK ZONE S5)
       ========================================================== -->
  <nav class="nav" aria-label="Primary">
    <div class="seek-wrap" id="seekWrap" aria-hidden="true">
      <div class="seek-time" id="seekTime">
        <span class="t-cur">00:00</span><span class="t-sep"> / </span><span class="t-tot">00:00</span>
      </div>

      <div class="seek-pill" id="seekPill">
        <div class="seek-fill" id="seekFill"></div>
      </div>
    </div>

    <ul>
      <li><button aria-label="Home"><img src="/assets/icons/home.svg" class="nav-icon" alt=""></button></li>
      <li><button aria-label="Search"><img src="assets/icons/search.svg" class="nav-icon" alt=""></button></li>

      <li>
        <button aria-label="Add" class="add-btn">
          <span class="pill pill-left"></span>
          <span class="pill pill-right"></span>
          <span class="pill pill-core">
            <img src="assets/icons/plus.svg" class="add-plus-svg" alt="">
          </span>
        </button>
      </li>

      <li><button aria-label="Messages"><img src="assets/icons/messages.svg" class="nav-icon" alt=""></button></li>
      <li><button id="profileBtn" aria-label="Profile"><img src="assets/icons/user.svg" class="nav-icon" alt=""></button></li>
    </ul>
  </nav>

  <!-- =========================================================
       APP JS
       ========================================================== -->

  <!-- DEVICE VIRTUAL VIEWPORT SYSTEM — classifier only -->
  <script>
  (function(){

    const MASTER_W = 430;
    const MASTER_H = 932;

    const vw = window.innerWidth;
    const vh = window.innerHeight;
    const dpr = window.devicePixelRatio || 1;
    const ratio = vh / vw;

    const scaleX = vw / MASTER_W;
    const scaleY = vh / MASTER_H;

    const ua = navigator.userAgent || "";
    const isIOS = /iPhone|iPad|iPod/i.test(ua);
    const isAndroid = /Android/i.test(ua);

    const body = document.body;
    const root = document.documentElement;

    root.style.setProperty('--vw-scale', scaleX);
    root.style.setProperty('--vh-scale', scaleY);
    root.style.setProperty('--device-vw', vw);
    root.style.setProperty('--device-vh', vh);
    root.style.setProperty('--device-dpr', dpr);
    root.style.setProperty('--device-ratio', ratio);

    body.classList.add('device-runtime-ready');

    if (
      Math.abs(vw - MASTER_W) <= 2 &&
      Math.abs(vh - MASTER_H) <= 4
    ) {
      body.classList.add('device-master');
    } else {
      body.classList.add('device-non-master');
    }

    if (vw <= 390) {
      body.classList.add('device-small');
    }

    if (vh <= 760) {
      body.classList.add('device-short');
    }

    if (vh >= 850 && vw <= 430) {
      body.classList.add('device-tall');
    }

    if (isIOS) {
      body.classList.add('device-ios');
    }

    if (isAndroid) {
      body.classList.add('device-android');
    }

  })();
  </script>

  <script src="/assets/js/swipe.js" defer></script>
  <script type="module" src="/assets/js/app.js"></script>

  <script>
  (async function () {
    try {
      const r = await fetch('db.json');
      const db = await r.json();

      if (db && db.length > 0) {

        const video = db[0];

        const wrap = document.getElementById('db-video-wrapper');
        const nativePlayer = document.getElementById('videoCurrent');
        const playOverlay = document.getElementById('playOverlay');

        /* =========================================================
           VARIANTA A — Native MP4 z Cloudflare R2
           ========================================================= */
        if (video.type === "native_r2" && video.video_url) {

          if (nativePlayer) {
            nativePlayer.src = video.video_url;
            nativePlayer.style.display = 'block';
            nativePlayer.load();
          }

          if (wrap) {
            wrap.style.display = 'none';
            wrap.innerHTML = '';
          }
        }

        /* =========================================================
           VARIANTA B — Embed iframe fallback
           ========================================================= */
        else if (video.type === "embed" && video.embed_url) {

          if (wrap) {
            wrap.style.display = 'block';

            wrap.innerHTML = `
              <iframe
                src="${video.embed_url}"
                style="width:100%;height:100%;border:none;"
                allowfullscreen>
              </iframe>
            `;
          }

          if (nativePlayer) {
            nativePlayer.pause();
            nativePlayer.removeAttribute('src');
            nativePlayer.load();
            nativePlayer.style.display = 'none';
          }

          if (playOverlay) {
            playOverlay.style.display = 'none';
          }
        }
      }

    } catch (e) {
      console.error("Tikboo DB Sync Error", e);
    }
  })();
  </script>

</body>
</html>
