bitvid/components/disclaimer.html

<!-- Disclaimer Modal (wide, matching other modals) -->
<div
  id="disclaimerModal"
  class="fixed inset-0 z-50 hidden"
  style="background: transparent"
>
  <!-- Dark/blur overlay -->
  <div
    class="absolute inset-0 z-10"
    style="
      background-color: rgba(0, 0, 0, 0.9);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    "
  ></div>

  <!-- Outer container with wide layout, just like content-appeals-form -->
  <div
    class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
  >
    <!-- The .modal-content, same classes: bg-gray-900, w-full max-w-[90%], etc. -->
    <div
      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
    >
      <!-- Sticky top bar, if you want a top heading or 'X' button up here -->
      <div
        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
      >        
      </div>

      <!-- Main Content -->
      <div class="p-6">
        <!-- Scrollable disclaimers area -->
        <div
          class="space-y-6 text-gray-300"
          style="max-height: 70vh; overflow-y: auto"
        >
          <!-- Example: Insert your disclaimers here -->

          <div class="flex justify-center mb-8">
            <img
              src="assets/svg/bitvid-logo-dark-mode.svg"
              alt="BitVid Logo"
              class="h-16"
            />
          </div>
          <h2 class="text-2xl font-bold text-white mb-0">Welcome to bitvid</h2>
          <!-- Warning Alert -->
          <div
            class="bg-yellow-900/20 border border-yellow-700/50 rounded-lg p-4 mb-6 flex items-start"
          >
            <svg
              class="h-5 w-5 text-yellow-500 mt-0.5 mr-3 flex-shrink-0"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
              />
            </svg>
            <p class="text-yellow-200">
              This platform is currently in development and only supports Chrome
              and Firefox-based browsers. Other browsers are not supported at
              this time. You may encounter bugs or missing features. Give it a
              sec. Videos might take 10 to 60 seconds to load initially.
            </p>
          </div>
          <p>
            bitvid is a decentralized video platform where content is shared
            directly between users. We want you to understand a few important
            points before you continue:
          </p>

          <div class="space-y-4">
            <div class="bg-gray-800 rounded-lg p-4">
              <h3 class="text-white font-semibold mb-2">Early Access Status</h3>
              <p class="text-gray-400">
                Currently, video posting is invite-only as we carefully scale
                our platform. While anyone can watch videos, content creation is
                limited to approved creators. This helps us maintain quality
                content during our early stages.
              </p>
            </div>
            <div class="bg-gray-800 rounded-lg p-4">
              <h3 class="text-white font-semibold mb-2">
                Content Responsibility & Moderation
              </h3>
              <p class="text-gray-400">
                While we don't host videos directly, we maintain community
                standards through access control. Users who violate our
                guidelines may be blocked from accessing the platform. All
                content must follow local laws and platform guidelines.
              </p>
            </div>
            <div class="bg-gray-800 rounded-lg p-4">
              <h3 class="text-white font-semibold mb-2">Platform Status</h3>
              <p class="text-gray-400">
                bitvid is a work in progress. Features may change or break, and
                security improvements are ongoing. Your feedback and patience
                help us build a better platform.
              </p>
            </div>
            <div class="bg-gray-800 rounded-lg p-4">
              <h3 class="text-white font-semibold mb-2">Get Involved</h3>
              <p class="text-gray-400">
                Are you a developer? We'd love your help! Visit our GitHub
                repository to contribute to building the future of decentralized
                video sharing.
              </p>
            </div>
          </div>
        </div>

        <!-- Button at bottom -->
        <div class="mt-6">
          <button
            id="acceptDisclaimer"
            class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-black transition-colors duration-200"
          >
            I Understand
          </button>
        </div>
      </div>
    </div>
  </div>
</div>