bitvid/views/channel-profile.html

<section class="channel-profile-container">
  <!-- Modified banner wrapper for taller, rounded style -->
  <div class="profile-banner relative mb-6 rounded-lg shadow-lg">
    <!-- Increase the default height classes -->
    <img
      id="channelBanner"
      class="w-full h-48 md:h-64 object-cover rounded-lg"
      src=""
      alt="Banner"
    />
    <div class="absolute inset-0 bg-black bg-opacity-50 rounded-lg"></div>

    <div
      class="absolute bottom-4 left-4 right-4 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between"
    >
      <div class="flex items-center">
        <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-white">
          <img
            id="channelAvatar"
            src="assets/svg/default-profile.svg"
            alt="Avatar"
            class="w-full h-full object-cover"
          />
        </div>
        <div class="ml-4 text-white">
          <h2 id="channelName" class="text-xl font-bold">User Name</h2>
          <p id="channelNpub" class="text-sm opacity-80">npub...</p>
        </div>
      </div>
      <div class="flex flex-col items-end gap-3 self-start sm:self-end">
        <div class="flex items-center gap-2">
          <div class="relative" data-channel-zap-wrapper>
            <button
              id="zapButton"
              type="button"
              class="icon-button"
              aria-label="Open zap dialog"
              aria-haspopup="dialog"
              aria-expanded="false"
              aria-controls="zapControls"
            >
              <img
                src="assets/svg/lightning-bolt.svg"
                alt="Zap"
                class="icon-image"
              />
            </button>
            <div
              id="zapControls"
              class="zap-popover hidden"
              role="dialog"
              aria-hidden="true"
              aria-label="Channel zap dialog"
            >
              <div
                class="zap-popover__content w-72 max-w-[calc(100vw-2rem)] rounded-lg p-4 shadow-lg"
              >
                <div class="mb-3 flex items-center justify-between gap-4">
                  <h3
                    class="text-xs font-semibold uppercase tracking-wide text-gray-300"
                  >
                    Send a zap
                  </h3>
                  <button
                    type="button"
                    id="zapCloseBtn"
                    class="text-gray-400 transition-colors hover:text-gray-200"
                    aria-label="Close zap dialog"
                  >
                    ✕
                  </button>
                </div>
                <p
                  id="zapWalletPrompt"
                  class="mb-3 hidden text-sm text-gray-200"
                  aria-hidden="true"
                >
                  Connect a wallet in
                  <button
                    type="button"
                    id="zapWalletLink"
                    class="font-semibold text-blue-300 underline decoration-dotted transition-colors hover:text-blue-200"
                  >
                    Wallet Connect settings
                  </button>
                  to send zaps.
                </p>
                <form id="zapForm" class="space-y-3">
                  <div>
                    <label
                      for="zapAmountInput"
                      id="zapAmountLabel"
                      class="mb-2 block text-xs font-semibold uppercase tracking-wide text-gray-300"
                    >
                      Zap amount (sats)
                    </label>
                    <input
                      id="zapAmountInput"
                      type="number"
                      min="1"
                      step="1"
                      inputmode="numeric"
                      class="w-full rounded border border-gray-600 bg-gray-800 px-3 py-2 text-sm text-gray-100 focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400"
                      placeholder="Enter sats"
                      aria-labelledby="zapAmountLabel"
                    />
                  </div>
                  <p
                    id="zapSplitSummary"
                    class="text-sm text-gray-300"
                    aria-live="polite"
                  >
                    Enter an amount to view the split.
                  </p>
                  <p
                    id="zapStatus"
                    class="text-xs text-gray-400"
                    role="status"
                    aria-live="polite"
                  ></p>
                  <ul id="zapReceipts" class="space-y-2 text-xs text-gray-300"></ul>
                  <div class="flex items-center justify-end gap-2">
                    <button
                      type="submit"
                      id="zapSendBtn"
                      class="rounded bg-blue-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
                      aria-label="Send a zap"
                    >
                      Send
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <button
            id="channelShareBtn"
            type="button"
            class="icon-button"
            aria-label="Share channel"
          >
            <img
              src="assets/svg/share-video.svg"
              alt="Share channel"
              class="icon-image"
            />
          </button>
          <div
            class="relative inline-block overflow-visible"
            data-more-menu-wrapper="true"
          >
            <button
              id="channelMoreBtn"
              type="button"
              class="icon-button"
              aria-haspopup="true"
              aria-expanded="false"
              aria-label="Channel options"
              data-more-dropdown="channel-profile"
            >
              <img src="assets/svg/ellipsis.svg" alt="More" class="w-5 h-5" />
            </button>
            <div
              id="moreDropdown-channel-profile"
              class="hidden absolute right-0 top-12 w-48 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
              role="menu"
              data-more-menu="true"
            >
              <div class="py-1">
                <button
                  class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
                  data-action="copy-npub"
                  data-context="channel-profile"
                >
                  Copy npub
                </button>
                <button
                  class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
                  data-action="blacklist-author"
                  data-context="channel-profile"
                  data-blacklist-menu="true"
                >
                  Blacklist channel
                </button>
                <button
                  class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
                  data-action="block-author"
                  data-context="channel-profile"
                >
                  Block channel
                </button>
                <button
                  class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
                  data-action="report"
                  data-context="channel-profile"
                >
                  Report
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Basic profile details: about text, website, LN address -->
  <div class="profile-details px-4 mt-4">
    <p id="channelAbout" class="mb-2 text-gray-700"></p>
    <a
      id="channelWebsite"
      href="#"
      target="_blank"
      class="block text-blue-500 hover:underline mb-2"
      >Website</a
    >
    <p id="channelLightning" class="text-sm text-gray-500"></p>
  </div>

  <!-- Area for Subscribe/Unsubscribe button -->
  <div class="px-4 my-4">
    <div id="subscribeBtnArea" class="hidden"></div>
  </div>

  <hr class="my-6" />

  <h3 class="text-lg font-bold mb-4 text-gray-700">Videos by This User</h3>
  <div
    id="channelVideoList"
    class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8"
  >
    <!-- User’s videos will go here -->
  </div>
</section>