bitvid/components/feature-request-form.html

<!-- components/feature-request-form.html
//    https://bitvid.network?modal=feature => open featureRequestModal
-->
<div
  id="featureRequestModal"
  class="bv-modal hidden items-start justify-center overflow-y-auto"
>
  <div class="bv-modal-backdrop" data-dismiss></div>

  <div
    class="bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
  >
    <!-- Header bar (sticky) with updated title styling -->
    <div
      class="sticky top-0 flex items-center justify-between border-b border-gray-700 bg-gradient-to-b from-black/80 to-transparent p-4"
    >
      <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-white">
        Feature Request Form
      </h2>
      <button
        id="closeFeatureRequestModal"
        class="flex h-10 w-10 items-center justify-center rounded-full bg-black/50 transition-all duration-200 backdrop-blur hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6 text-gray-300"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>
    </div>

    <div class="p-6">
      <div class="w-full" style="height: 80vh">
        <iframe
          src="./components/iframe_forms/iframe-request-form.html"
          class="h-full w-full"
          frameborder="0"
          style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
        ></iframe>
      </div>
    </div>
  </div>
</div>