<!DOCTYPE html>

<html lang="nl">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta name="robots" content="noindex, nofollow">

  <title>OUT OF MANY</title>

  <style>

    * {

      box-sizing: border-box;

      margin: 0;

      padding: 0;

    }

    body {

      background-color: #050505;

      color: #e0e0e0;

      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

      min-height: 100vh;

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

      padding: 20px;

    }

    .container {

      max-width: 900px;

      width: 100%;

      text-align: center;

    }

    #gate {

      display: flex;

      flex-direction: column;

      align-items: center;

      gap: 20px;

    }

    h1 {

      font-size: 0.9rem;

      letter-spacing: 0.2em;

      text-transform: uppercase;

      color: #666;

      font-weight: 400;

    }

    p.warning {

      font-size: 0.85rem;

      color: #888;

      max-width: 420px;

      line-height: 1.5;

    }

    input[type="password"] {

      background: transparent;

      border: 1px solid #333;

      color: #fff;

      padding: 12px 16px;

      font-size: 1rem;

      text-align: center;

      letter-spacing: 0.1em;

      outline: none;

      transition: border-color 0.3s;

    }

    input[type="password"]:focus {

      border-color: #888;

    }

    button {

      background: #e0e0e0;

      border: none;

      color: #000;

      padding: 10px 24px;

      font-size: 0.8rem;

      letter-spacing: 0.1em;

      text-transform: uppercase;

      cursor: pointer;

      font-weight: 600;

    }

    button:hover {

      background: #fff;

    }

    #error-msg {

      color: #ff4d4d;

      font-size: 0.8rem;

      display: none;

    }

    #vault {

      display: none;

      width: 100%;

      animation: fadeIn 1s ease-in-out;

    }

    .video-wrapper {

      position: relative;

      width: 100%;

      background: #000;

      border: 1px solid #1a1a1a;

      box-shadow: 0 0 30px rgba(0,0,0,0.8);

    }

    video {

      width: 100%;

      max-height: 80vh;

      display: block;

      outline: none;

    }

    .meta-info {

      margin-top: 20px;

      text-align: left;

      font-size: 0.8rem;

      color: #555;

      line-height: 1.6;

    }

    @keyframes fadeIn {

      from { opacity: 0; }

      to { opacity: 1; }

    }

  </style>

</head>

<body>

  <div class="container">

    <!-- INGANG / POORT -->

    <div id="gate">

      <h1>[ AFGESCHERMDE ZONE ]</h1>

      <p class="warning">Deze omgeving bevat ongecensureerd videowerk, rauwe registraties en menselijke anatomie. Voer de toegangscode in om door te gaan.</p>

      <form onsubmit="checkAccess(event)">

        <input type="password" id="passcode" placeholder="TOEGANGSCODE" autocomplete="off">

        <br><br>

        <button type="submit">Betreden</button>

      </form>

      <div id="error-msg">Ongeldige code. Toegang geweigerd.</div>

    </div>

    <!-- HET AFGESCHERMDE GEDEELTE MET VIDEO -->

    <div id="vault">

      <div class="video-wrapper">

        <video id="myVideo" controls controlsList="nodownload">

          <source src="Videoshop_2026-09-07_01-30-03-657.MOV" type="video/quicktime">

          <source src="Videoshop_2026-09-07_01-30-03-657.MOV" type="video/mp4">

          Je browser ondersteunt deze videoplayer niet.

        </video>

      </div>

      <div class="meta-info">

        <p><strong>REGISTRATIE #01</strong> — OUT OF MANY</p>

        <p>Audio/Video opname. Ongecensureerd.</p>

      </div>

    </div>

  </div>

  <script>

    // Wachtwoord om de video te bekijken (pas eventueel aan)

    const SECRET_CODE = "BAARMOEDER"; 

    function checkAccess(e) {

      e.preventDefault();

      const input = document.getElementById('passcode').value;

      const error = document.getElementById('error-msg');

      if (input === SECRET_CODE) {

        document.getElementById('gate').style.display = 'none';

        document.getElementById('vault').style.display = 'block';

      } else {

        error.style.display = 'block';

        document.getElementById('passcode').value = '';

      }

    }

  </script>

</body>

</html>