bitvid/components/application-form.html

<!-- components/application-form.html 
     https://bitvid.network?modal=application => open nostrFormModal
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Application Form</title>
    <!-- Include Tailwind CSS -->
    <link href="css/tailwind.generated.css" rel="stylesheet" />
  </head>
  <body class="bg-gray-900 text-gray-100">
    <!-- Application Form Modal -->
    <div
      id="nostrFormModal"
      class="bv-modal hidden items-start justify-center overflow-y-auto"
    >
      <div class="bv-modal-backdrop" data-dismiss></div>

      <!-- Inner content container -->
      <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 with updated styling -->
          <div
            class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between border-b border-gray-700"
          >
            <h2 class="text-3xl font-extrabold text-white tracking-wide pb-2">
              Application Form
            </h2>
            <button
              id="closeNostrFormModal"
              class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur 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="w-6 h-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>

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

    <!-- Optional Script for Opening/Closing the Modal -->
    <script>
      const openBtn = document.getElementById("openNostrForm");
      const appModal = document.getElementById("nostrFormModal");
      const closeBtn = document.getElementById("closeNostrFormModal");

      // Open the modal when the designated button is clicked.
      if (openBtn) {
        openBtn.addEventListener("click", () => {
          appModal.classList.remove("hidden");
        });
      }

      // Close the modal when the close button is clicked.
      if (closeBtn) {
        closeBtn.addEventListener("click", () => {
          appModal.classList.add("hidden");
        });
      }
    </script>
  </body>
</html>