From ed7e904abea164c61f616a3c95899bc37d30ce8c Mon Sep 17 00:00:00 2001
From: Keep Creating Online <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Sat, 1 Feb 2025 21:37:30 -0500
Subject: [PATCH] added application form and adjusted modal flow

---
 src/components/application-form.html | 63 +++++++++++-------------
 src/components/login-modal.html      | 24 +++++++---
 src/components/profile-modal.html    |  8 ++--
 src/components/upload-modal.html     |  3 +-
 src/index.html                       | 72 ++++++++++++++++++++++++----
 src/js/app.js                        | 17 +++++++
 6 files changed, 132 insertions(+), 55 deletions(-)
diff --git a/src/components/application-form.html b/src/components/application-form.html
index a79479d..4d51fb2 100644
--- a/src/components/application-form.html
+++ b/src/components/application-form.html
@@ -8,23 +8,13 @@
     <link href="css/tailwind.min.css" rel="stylesheet" />
   </head>
   <body class="bg-gray-900 text-gray-100">
-    <!-- Button to open the modal -->
-    <div class="p-4">
-      <button
-        id="openNostrForm"
-        class="bg-blue-500 px-4 py-2 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
-      >
-        Open Nostr Form
-      </button>
-    </div>
-
-    <!-- Modal Container -->
+    <!-- Application Form Modal -->
     <div
       id="nostrFormModal"
       class="fixed inset-0 z-50 hidden"
       style="background: transparent"
     >
-      <!-- Overlay Layer with dark background and blur -->
+      <!-- Dark/blur overlay (same approach as your other modals) -->
       <div
         class="absolute inset-0 z-10"
         style="
@@ -34,18 +24,19 @@
         "
       ></div>
 
-      <!-- Modal Container -->
+      <!-- Outer container with same sizing as your video modal -->
       <div
-        class="relative modal-container h-full w-full flex items-center justify-center overflow-y-auto z-20"
+        class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
       >
+        <!-- Inner content: wide layout, matching .max-w-[90%] lg:max-w-6xl -->
         <div
-          class="modal-content bg-gray-900 w-full max-w-lg md:max-w-2xl my-0 rounded-lg overflow-hidden relative max-h-[90vh]"
+          class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
         >
-          <!-- Top Bar -->
+          <!-- Header bar (sticky) with exit button on the right -->
           <div
-            class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-300 p-4 flex items-center justify-between"
+            class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
           >
-            <h2 class="text-xl font-bold text-white">My Nostr Form</h2>
+            <h2 class="text-2xl font-bold text-white mb-0">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"
@@ -67,19 +58,15 @@
             </button>
           </div>
 
-          <!-- Modal Content -->
+          <!-- Main Content -->
           <div class="p-6">
-            <div class="flex justify-center">
+            <!-- Flexible container for the iframe -->
+            <div class="w-full" style="height: 80vh">
               <iframe
                 src="https://formstr.app/#/f/naddr1qvzqqqr4mqpzpcf63zey4c02lz9x4zkn2ny5kmz3g8v8fj9hvehyps5tuj7u272gqythwumn8ghj7un9d3shjtnwdaehgu3wvfskuep0qqsky6t5we5kgh6hdp5hgetvd9ehgh6pwpcxc6trv96xjmmwtarx7und0qc765?hideTitleImage=true"
-                height="700px"
-                width="480px"
+                class="w-full h-full"
                 frameborder="0"
-                style="
-                  border-style: none;
-                  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
-                "
-                cellspacing="0"
+                style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
               ></iframe>
             </div>
           </div>
@@ -87,19 +74,25 @@
       </div>
     </div>
 
-    <!-- Script to toggle modal -->
+    <!-- Optional Script for Opening/Closing (if you have a dedicated button) -->
     <script>
       const openBtn = document.getElementById("openNostrForm");
-      const modal = document.getElementById("nostrFormModal");
+      const appModal = document.getElementById("nostrFormModal");
       const closeBtn = document.getElementById("closeNostrFormModal");
 
-      openBtn.addEventListener("click", () => {
-        modal.classList.remove("hidden");
-      });
+      // Open the modal
+      if (openBtn) {
+        openBtn.addEventListener("click", () => {
+          appModal.classList.remove("hidden");
+        });
+      }
 
-      closeBtn.addEventListener("click", () => {
-        modal.classList.add("hidden");
-      });
+      // Close the modal
+      if (closeBtn) {
+        closeBtn.addEventListener("click", () => {
+          appModal.classList.add("hidden");
+        });
+      }
     </script>
   </body>
 </html>
diff --git a/src/components/login-modal.html b/src/components/login-modal.html
index e179da8..c284d5e 100644
--- a/src/components/login-modal.html
+++ b/src/components/login-modal.html
@@ -3,7 +3,7 @@
   class="fixed inset-0 z-50 hidden"
   style="background: transparent"
 >
-  <!-- Dark overlay -->
+  <!-- Dark overlay with blur (unchanged) -->
   <div
     class="absolute inset-0 z-10"
     style="
@@ -13,14 +13,14 @@
     "
   ></div>
 
-  <!-- Modal container -->
+  <!-- Outer container matching video modal's flex layout & wide sizing -->
   <div
-    class="relative modal-container h-full w-full flex items-center justify-center overflow-y-auto z-20"
+    class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
   >
     <div
-      class="modal-content bg-gray-900 w-full max-w-md my-0 rounded-lg overflow-hidden relative max-h-[90vh]"
+      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
     >
-      <!-- Header -->
+      <!-- Header with the special exit button (unchanged) -->
       <div
         class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
       >
@@ -46,8 +46,20 @@
         </button>
       </div>
 
-      <!-- Body with login buttons -->
+      <!-- Body with buttons (unchanged) -->
       <div class="p-6 space-y-4">
+        <!-- Application Form button -->
+        <button
+          id="openApplicationModal"
+          class="w-full bg-indigo-500 text-white px-4 py-2 rounded-md hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+        >
+          Application Form
+        </button>
+
+        <!-- Simple horizontal rule -->
+        <div class="my-2 border-t border-gray-700"></div>
+
+        <!-- Existing login buttons -->
         <button
           id="loginNIP07"
           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"
diff --git a/src/components/profile-modal.html b/src/components/profile-modal.html
index c626888..c453d32 100644
--- a/src/components/profile-modal.html
+++ b/src/components/profile-modal.html
@@ -14,12 +14,14 @@
     "
   ></div>
 
-  <!-- Modal Container -->
+  <!-- Outer container with the same sizing approach as your other modals -->
   <div
-    class="relative modal-container h-full w-full flex items-start md:items-center justify-center overflow-y-auto z-20"
+    class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
   >
+    <!-- Inner content: wide layout, matching your video modal -->
     <div
-      class="modal-content bg-gray-900 w-full max-w-sm md:max-w-md my-0 rounded-lg overflow-hidden relative flex flex-col max-h-[90vh]"
+      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative flex flex-col"
+      style="max-height: 90vh"
     >
       <!-- Modal Header -->
       <div
diff --git a/src/components/upload-modal.html b/src/components/upload-modal.html
index c467d70..368a420 100644
--- a/src/components/upload-modal.html
+++ b/src/components/upload-modal.html
@@ -19,7 +19,8 @@
     class="relative modal-container h-full w-full flex items-start md:items-center justify-center overflow-y-auto z-20"
   >
     <div
-      class="modal-content bg-gray-900 w-full max-w-lg md:max-w-2xl my-0 rounded-lg overflow-hidden relative max-h-[90vh]"
+      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
+      style="max-height: 90vh"
     >
       <!-- Top Bar (similar to video-modal) -->
       <div
diff --git a/src/index.html b/src/index.html
index 1f03f2b..663c94f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -325,7 +325,7 @@
       </footer>
     </div>
 
-    <!-- Load external modal components -->
+    <!-- Load external modal components + attach event listeners -->
     <script>
       async function loadModal(url) {
         try {
@@ -343,24 +343,76 @@
         }
       }
 
-      // Just load the login modal (or any others), without adding event listeners here.
-      // The logic to open/close the modal is all in app.js now.
-      Promise.all([loadModal("components/login-modal.html")]).then(() => {
-        console.log("Modals loaded (login-modal.html, etc.)");
-        // Now that the login-modal is definitely in the DOM:
-        const closeBtn = document.getElementById("closeLoginModal");
-        if (closeBtn) {
-          closeBtn.addEventListener("click", () => {
+      // Load the login modal and application form modal
+      Promise.all([
+        loadModal("components/login-modal.html"),
+        loadModal("components/application-form.html"),
+      ]).then(() => {
+        console.log("Modals loaded (login-modal, application-form)");
+
+        //
+        // 1) Top nav login button => open the login modal
+        //
+        const loginNavBtn = document.getElementById("loginButton");
+        if (loginNavBtn) {
+          loginNavBtn.addEventListener("click", () => {
+            const loginModal = document.getElementById("loginModal");
+            if (loginModal) {
+              loginModal.classList.remove("hidden");
+            }
+          });
+        }
+
+        //
+        // 2) Close button on the login modal
+        //
+        const closeLoginBtn = document.getElementById("closeLoginModal");
+        if (closeLoginBtn) {
+          closeLoginBtn.addEventListener("click", () => {
             const loginModal = document.getElementById("loginModal");
             if (loginModal) {
               loginModal.classList.add("hidden");
             }
           });
         }
+
+        //
+        // 3) “Application Form” button inside the login modal => open the application form
+        //
+        const openAppFormBtn = document.getElementById("openApplicationModal");
+        if (openAppFormBtn) {
+          openAppFormBtn.addEventListener("click", () => {
+            // Hide the login modal first
+            const loginModal = document.getElementById("loginModal");
+            if (loginModal) {
+              loginModal.classList.add("hidden");
+            }
+            // Now show the application form modal
+            const appModal = document.getElementById("nostrFormModal");
+            if (appModal) {
+              appModal.classList.remove("hidden");
+            }
+          });
+        }
+
+        //
+        // 4) Close button on the application form modal
+        //
+        const closeNostrFormBtn = document.getElementById(
+          "closeNostrFormModal"
+        );
+        if (closeNostrFormBtn) {
+          closeNostrFormBtn.addEventListener("click", () => {
+            const appModal = document.getElementById("nostrFormModal");
+            if (appModal) {
+              appModal.classList.add("hidden");
+            }
+          });
+        }
       });
     </script>
 
-    <!-- Scripts -->
+    <!-- Other Scripts -->
     <script src="js/libs/nostr.bundle.js"></script>
     <script type="module" src="js/config.js"></script>
     <script type="module" src="js/lists.js"></script>
diff --git a/src/js/app.js b/src/js/app.js
index 9821278..60d2802 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -454,6 +454,23 @@ class bitvidApp {
       console.log("[popstate] user navigated back/forward; cleaning modal...");
       await this.hideModal();
     });
+
+    // Event delegation for the “Application Form” button inside the login modal
+    document.addEventListener("click", (event) => {
+      if (event.target && event.target.id === "openApplicationModal") {
+        // 1) Hide the login modal
+        const loginModal = document.getElementById("loginModal");
+        if (loginModal) {
+          loginModal.classList.add("hidden");
+        }
+
+        // 2) Show the application modal
+        const appModal = document.getElementById("nostrFormModal");
+        if (appModal) {
+          appModal.classList.remove("hidden");
+        }
+      }
+    });
   }
 
   /**
