bitvid/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>bitvid | Decentralized Video Sharing</title>

    <meta
      name="description"
      content="bitvid is a decentralized video hub that prioritizes URL-first playback with WebTorrent fallback so your audience can stream reliably."
    />
    <meta name="robots" content="index,follow" />

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="bitvid - Decentralized Video Sharing" />
    <meta
      property="og:description"
      content="Share videos and follow creators freely, in a truly decentralized way."
    />
    <meta property="og:image" content="assets/jpg/bitvid.jpg" />
    <meta property="og:url" content="https://bitvid.network" />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="en_US" />

    <!-- App Icons -->
    <link rel="icon" href="assets/favicon.ico" sizes="any" />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="assets/png/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="assets/png/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="assets/png/favicon-16x16.png"
    />
    <link rel="manifest" href="/site.webmanifest" />
    <meta name="theme-color" content="#0f172a" />

    <!-- Styles -->
    <!--
      Cache busting: keep these query strings in sync with config/asset-version.js
      so browsers pick up the latest sidebar markup and styling without
      hard-refreshing around CDN caches.
    -->
    <script src="js/tracking.js?v=2024.10.29" defer></script>
    <link href="css/tailwind.generated.css?v=2024.10.29" rel="stylesheet" />
    <link href="css/style.css?v=2024.10.29" rel="stylesheet" />
    <link href="css/markdown.css?v=2024.10.29" rel="stylesheet" />
  </head>
  <body class="sidebar-collapsed">
    <!--
      SIDEBAR CONTAINER:
      The <aside id="sidebar"> inside handles visibility.
      By default, no special position or z-index on #sidebarContainer.
    -->
    <div id="sidebarContainer">
      <!-- components/sidebar.html gets injected here -->
    </div>

    <div id="sidebarOverlay" class="md:hidden" aria-hidden="true"></div>

    <!--
      MAIN CONTENT:
      Desktop spacing now follows the --sidebar-width custom property so the layout stays in
      sync with the collapsible rail. On mobile we float the sidebar over the content and dim
      the background overlay.
    -->
    <!--
      `fade-in` is scrubbed by js/index.js after the first animation so that
      re-rendering views does not cause the shell to flicker. Only apply it to
      elements that should animate exactly once on initial paint.
    -->

    <div
      id="app"
      class="px-4 py-8 min-h-screen flex flex-col fade-in"
      data-sidebar-state="collapsed"
    >
      <!-- Header -->
      <header class="mb-8 flex items-center w-full">
        <!-- Mobile hamburger button (hidden on md+) -->
        <!-- New button -->
        <!--
          Mobile menu button: uses `fade-in` to match the rest of the chrome.
          The JS animation cleanup removes the helper classes once the entrance
          finishes to prevent flashes on future sidebar toggles.
        -->
        <button
          id="mobileMenuBtn"
          class="md:hidden ml-2 mr-4 flex items-center justify-center w-10 h-10 rounded-full bg-transparent hover:bg-transparent focus:outline-none focus:ring-2 focus:ring-[#0f172a] z-[60] fade-in"
          type="button"
          aria-expanded="false"
          aria-controls="sidebar"
          aria-label="Toggle navigation menu"
        >
          <img
            src="assets/svg/mobile-sidebar-menu-icon.svg"
            alt="Mobile Sidebar Menu Icon"
            class="w-6 h-6"
          />
        </button>
        <!-- Logo -->
        <!-- Logo fades in once on initial load. -->
        <a
          href="index.html"
          aria-label="Return to the bitvid home page"
          class="fade-in fade-in-delay-100"
        >
          <img
            src="assets/svg/bitvid-logo-light-mode.svg"
            alt="bitvid logo"
            class="h-16"
          />
        </a>

        <!-- Buttons on the far right -->

        <!-- Header action buttons share the fade-in treatment for consistency. -->

        <div class="ml-auto flex items-center space-x-4 fade-in fade-in-delay-200">
          <!-- Login Button -->
          <button
            id="loginButton"
            class="btn focus-ring h-12 w-12 rounded-full p-0"
          >
            <img
              src="assets/svg/default-profile.svg"
              alt="Profile Icon"
              class="w-9 h-9"
            />
          </button>

          <!-- Upload Button (hidden by default) -->
          <button
            id="uploadButton"
            class="hidden btn focus-ring h-12 w-12 rounded-full p-0 text-xl font-bold leading-none"
          >
            +
          </button>

          <!-- Profile Button (hidden by default) -->
          <button
            id="profileButton"
            class="hidden btn-ghost focus-ring h-12 w-12 rounded-full p-0"
          >
            <div class="w-10 h-10 rounded-full overflow-hidden">
              <img
                id="profileAvatar"
                src="assets/svg/default-profile.svg"
                alt="Profile"
                class="w-full h-full object-cover"
              />
            </div>
          </button>
        </div>
      </header>

      <!-- Notification Portal -->
      <div
        id="notificationPortal"
        role="region"
        aria-live="polite"
        aria-label="System notifications"
      >
        <!-- Error Container -->
        <div
          id="errorContainer"
          class="hidden bg-red-100 text-red-900 p-4 rounded-md mb-4"
        ></div>

        <!-- Status Container -->
        <div
          id="statusContainer"
          class="hidden status-banner"
          role="status"
          aria-live="polite"
        >
          <span class="status-spinner" aria-hidden="true"></span>
          <span class="status-message" data-status-message></span>
        </div>

        <!-- Success Container -->
        <div
          id="successContainer"
          class="hidden bg-green-100 text-green-900 p-4 rounded-md mb-4"
        ></div>
      </div>

      <!-- Dynamic views (like most-recent-videos.html, etc.) -->
      <main id="viewContainer" class="flex-grow mb-8"></main>

      <!-- Modal Container (external modals) -->
      <div id="modalContainer"></div>

      <!-- Tagline / Slogan -->

      <!-- Tagline fade matches the cards. -->

      <div class="text-center mb-8 fade-in fade-in-delay-300">
        <h2 class="text-2xl font-bold text-gray-500 tracking-wide">
          seed. zap. subscribe.
        </h2>
      </div>
    </div>

    <!-- Additional Scripts -->
    <!-- Bootstraps nostr-tools before other modules rely on nostrToolsReady -->
      <script type="module" src="js/nostrToolsBootstrap.js?v=2024.10.29"></script>
      <script type="module" src="js/config.js?v=2024.10.29"></script>
      <script type="module" src="js/lists.js?v=2024.10.29"></script>
      <script type="module" src="js/accessControl.js?v=2024.10.29"></script>
      <script type="module" src="js/webtorrent.js?v=2024.10.29"></script>
      <script type="module" src="js/nostr.js?v=2024.10.29"></script>
    <script type="module" src="js/viewManager.js?v=2024.10.29"></script>
    <script type="module" src="js/bootstrap.js?v=2024.10.29"></script>
    <script type="module" src="js/disclaimer.js?v=2024.10.29"></script>
    <script type="module" src="js/index.js?v=2024.10.29"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
  </body>
</html>