updated modals, forms, UI flow

src/components/bug-fix-form.html

@@ -0,0 +1,56 @@
+<!-- components/general-feedback-form.html -->
+<div
+  id="bugFixModal"
+  class="fixed inset-0 z-50 hidden"
+  style="background: transparent"
+>
+  <!-- Dark/blur overlay -->
+  <div
+    class="absolute inset-0 z-10"
+    style="
+      background-color: rgba(0, 0, 0, 0.9);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    "
+  ></div>
+
+  <div
+    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-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
+    >
+      <!-- Header bar (sticky) with exit button -->
+      <div
+        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
+      >
+        <h2 class="text-2xl font-bold text-white mb-0">Bug Fix Form</h2>
+        <button
+          id="closeBugFixModal"
+          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>
+
+      <div class="p-6">
+        <div class="w-full" style="height: 80vh">
+          <iframe></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/components/content-appeals-form.html

@@ -0,0 +1,56 @@
+<!-- components/content-appeals-form.html -->
+<div
+  id="contentAppealsModal"
+  class="fixed inset-0 z-50 hidden"
+  style="background: transparent"
+>
+  <!-- Dark/blur overlay -->
+  <div
+    class="absolute inset-0 z-10"
+    style="
+      background-color: rgba(0, 0, 0, 0.9);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    "
+  ></div>
+
+  <div
+    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-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
+    >
+      <!-- Header bar (sticky) with exit button -->
+      <div
+        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
+      >
+        <h2 class="text-2xl font-bold text-white mb-0">Content Appeals Form</h2>
+        <button
+          id="closeContentAppealsModal"
+          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>
+
+      <div class="p-6">
+        <div class="w-full" style="height: 80vh">
+          <iframe></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/components/feature-request-form.html

@@ -0,0 +1,56 @@
+<!-- components/feature-request-form.html -->
+<div
+  id="featureRequestModal"
+  class="fixed inset-0 z-50 hidden"
+  style="background: transparent"
+>
+  <!-- Dark/blur overlay -->
+  <div
+    class="absolute inset-0 z-10"
+    style="
+      background-color: rgba(0, 0, 0, 0.9);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    "
+  ></div>
+
+  <div
+    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-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
+    >
+      <!-- Header bar (sticky) with exit button -->
+      <div
+        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
+      >
+        <h2 class="text-2xl font-bold text-white mb-0">Feature Request Form</h2>
+        <button
+          id="closeFeatureRequestModal"
+          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>
+
+      <div class="p-6">
+        <div class="w-full" style="height: 80vh">
+          <iframe></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/components/general-feedback-form.html

@@ -0,0 +1,58 @@
+<!-- components/general-feedback-form.html -->
+<div
+  id="generalFeedbackModal"
+  class="fixed inset-0 z-50 hidden"
+  style="background: transparent"
+>
+  <!-- Dark/blur overlay -->
+  <div
+    class="absolute inset-0 z-10"
+    style="
+      background-color: rgba(0, 0, 0, 0.9);
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    "
+  ></div>
+
+  <div
+    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-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
+    >
+      <!-- Header bar (sticky) with exit button -->
+      <div
+        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
+      >
+        <h2 class="text-2xl font-bold text-white mb-0">
+          General Feedback Form
+        </h2>
+        <button
+          id="closeGeneralFeedbackModal"
+          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>
+
+      <div class="p-6">
+        <div class="w-full" style="height: 80vh">
+          <iframe></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/css/style.css

@@ -323,7 +323,7 @@ footer a:hover {
   inset: 0;
   background-color: rgb(0 0 0 / 0.9);
   z-index: 50;
-  display: none; /* hidden by default */
+  /* remove display: none; */
   flex-direction: column;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -331,7 +331,6 @@ footer a:hover {
 
 #disclaimerModal .modal-content {
   width: 100%;
-  height: 100%;
   display: flex;
   flex-direction: column;
   background-color: var(--color-bg);
@@ -376,16 +375,6 @@ footer a:hover {
     justify-content: center;
   }
 
-  #disclaimerModal .modal-content {
-    width: 100%;
-    height: auto;
-    max-width: 42rem;
-    max-height: 90vh;
-    border-radius: 0.5rem;
-    overflow: hidden;
-    margin: auto;
-  }
-
   #disclaimerModal .modal-scroll {
     max-height: calc(90vh - 5rem);
   }

src/index.html

@@ -95,6 +95,7 @@
         id="errorContainer"
         class="hidden bg-red-100 text-red-900 p-4 rounded-md mb-4"
       ></div>
+
       <!-- Success Container -->
       <div
         id="successContainer"
@@ -114,10 +115,66 @@
         </h2>
       </div>
 
-      <!-- Disclaimer Modal (inline markup; adjust as needed) -->
+      <!-- Disclaimer Modal (wide, matching other modals) -->
-      <div id="disclaimerModal" class="hidden">
+      <div
-        <div class="modal-content">
+        id="disclaimerModal"
-          <div class="modal-scroll">
+        class="fixed inset-0 z-50 hidden"
+        style="background: transparent"
+      >
+        <!-- Dark/blur overlay -->
+        <div
+          class="absolute inset-0 z-10"
+          style="
+            background-color: rgba(0, 0, 0, 0.9);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+          "
+        ></div>
+
+        <!-- Outer container with wide layout, just like content-appeals-form -->
+        <div
+          class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
+        >
+          <!-- The .modal-content, same classes: bg-gray-900, w-full max-w-[90%], etc. -->
+          <div
+            class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
+          >
+            <!-- Sticky top bar, if you want a top heading or 'X' button up here -->
+            <div
+              class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
+            >
+              <!-- If you want an X to close, you can add it here, for example:
+              <button
+                id="closeDisclaimerBtn"
+                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">
+              <!-- Scrollable disclaimers area -->
+              <div
+                class="space-y-6 text-gray-300"
+                style="max-height: 70vh; overflow-y: auto"
+              >
+                <!-- Example: Insert your disclaimers here -->
+
                 <div class="flex justify-center mb-8">
                   <img
                     src="assets/svg/bitvid-logo-dark-mode.svg"
@@ -125,7 +182,7 @@
                     class="h-16"
                   />
                 </div>
-            <h2 class="text-2xl font-bold mb-4 text-center text-white">
+                <h2 class="text-2xl font-bold text-white mb-0">
                   Welcome to bitvid
                 </h2>
                 <!-- Warning Alert -->
@@ -149,16 +206,16 @@
                     This platform is currently in development and only supports
                     Chrome and Firefox-based browsers. Other browsers are not
                     supported at this time. You may encounter bugs or missing
-                features. Give it a sec. Videos might take 10 to 60 seconds to
+                    features. Give it a sec. Videos might take 10 to 60 seconds
-                load initially.
+                    to load initially.
                   </p>
                 </div>
-            <div class="space-y-6 text-gray-300">
                 <p>
-                bitvid is a decentralized video platform where content is shared
+                  bitvid is a decentralized video platform where content is
-                directly between users. We want you to understand a few
+                  shared directly between users. We want you to understand a few
                   important points before you continue:
                 </p>
+
                 <div class="space-y-4">
                   <div class="bg-gray-800 rounded-lg p-4">
                     <h3 class="text-white font-semibold mb-2">
@@ -183,11 +240,13 @@
                     </p>
                   </div>
                   <div class="bg-gray-800 rounded-lg p-4">
-                  <h3 class="text-white font-semibold mb-2">Platform Status</h3>
+                    <h3 class="text-white font-semibold mb-2">
+                      Platform Status
+                    </h3>
                     <p class="text-gray-400">
-                    bitvid is a work in progress. Features may change or break,
+                      bitvid is a work in progress. Features may change or
-                    and security improvements are ongoing. Your feedback and
+                      break, and security improvements are ongoing. Your
-                    patience help us build a better platform.
+                      feedback and patience help us build a better platform.
                     </p>
                   </div>
                   <div class="bg-gray-800 rounded-lg p-4">
@@ -200,17 +259,20 @@
                   </div>
                 </div>
               </div>
-          </div>
+
-          <div class="button-container">
+              <!-- Button at bottom -->
+              <div class="mt-6">
                 <button
                   id="acceptDisclaimer"
-              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 focus:ring-offset-gray-900 transition-colors duration-200"
+                  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 focus:ring-offset-black transition-colors duration-200"
                 >
                   I Understand
                 </button>
               </div>
             </div>
           </div>
+        </div>
+      </div>
 
       <!-- Footer -->
       <footer class="mt-auto pb-8 text-center px-4">
@@ -343,15 +405,21 @@
         }
       }
 
-      // Load the login modal and application form modal
       Promise.all([
+        // Existing modals
         loadModal("components/login-modal.html"),
         loadModal("components/application-form.html"),
+        loadModal("components/content-appeals-form.html"),
+
+        // New forms
+        loadModal("components/general-feedback-form.html"),
+        loadModal("components/feature-request-form.html"),
+        loadModal("components/bug-fix-form.html"),
       ]).then(() => {
-        console.log("Modals loaded (login-modal, application-form)");
+        console.log("Modals loaded.");
 
         //
-        // 1) Top nav login button => open the login modal
+        // 1) Login button => open login modal
         //
         const loginNavBtn = document.getElementById("loginButton");
         if (loginNavBtn) {
@@ -364,7 +432,7 @@
         }
 
         //
-        // 2) Close button on the login modal
+        // 2) Close login modal
         //
         const closeLoginBtn = document.getElementById("closeLoginModal");
         if (closeLoginBtn) {
@@ -377,7 +445,7 @@
         }
 
         //
-        // 3) “Application Form” button inside the login modal => open the application form
+        // 3) “Application Form” button => open application form
         //
         const openAppFormBtn = document.getElementById("openApplicationModal");
         if (openAppFormBtn) {
@@ -396,7 +464,7 @@
         }
 
         //
-        // 4) Close button on the application form modal
+        // 4) Close application form
         //
         const closeNostrFormBtn = document.getElementById(
           "closeNostrFormModal"
@@ -409,6 +477,114 @@
             }
           });
         }
+
+        //
+        // 5) ?modal=appeals => open content appeals form
+        //
+        const urlParams = new URLSearchParams(window.location.search);
+        const modalParam = urlParams.get("modal");
+        if (modalParam === "appeals") {
+          const appealsModal = document.getElementById("contentAppealsModal");
+          if (appealsModal) {
+            appealsModal.classList.remove("hidden");
+          }
+        }
+
+        //
+        // 6) Close content appeals modal
+        //
+        const closeAppealsBtn = document.getElementById(
+          "closeContentAppealsModal"
+        );
+        if (closeAppealsBtn) {
+          closeAppealsBtn.addEventListener("click", () => {
+            const appealsModal = document.getElementById("contentAppealsModal");
+            if (appealsModal) {
+              appealsModal.classList.add("hidden");
+            }
+          });
+        }
+
+        //
+        // 7) Show disclaimer modal on page load, hide on "I Understand"
+        //
+        const disclaimerModal = document.getElementById("disclaimerModal");
+        const acceptDisclaimerBtn = document.getElementById("acceptDisclaimer");
+        if (disclaimerModal) {
+          // Show immediately
+          disclaimerModal.classList.remove("hidden");
+          if (acceptDisclaimerBtn) {
+            acceptDisclaimerBtn.addEventListener("click", () => {
+              disclaimerModal.classList.add("hidden");
+            });
+          }
+        }
+
+        //
+        // 8) Query param checks for the three new forms
+        //
+        //    ?modal=feedback => open generalFeedbackModal
+        //    ?modal=feature => open featureRequestModal
+        //    ?modal=bug => open bugFixModal
+        //
+        if (modalParam === "feedback") {
+          const feedbackModal = document.getElementById("generalFeedbackModal");
+          if (feedbackModal) {
+            feedbackModal.classList.remove("hidden");
+          }
+        } else if (modalParam === "feature") {
+          const featureModal = document.getElementById("featureRequestModal");
+          if (featureModal) {
+            featureModal.classList.remove("hidden");
+          }
+        } else if (modalParam === "bug") {
+          const bugModal = document.getElementById("bugFixModal");
+          if (bugModal) {
+            bugModal.classList.remove("hidden");
+          }
+        }
+
+        //
+        // 9) Close buttons for the three new forms
+        //
+        //    general feedback
+        const closeFeedbackBtn = document.getElementById(
+          "closeGeneralFeedbackModal"
+        );
+        if (closeFeedbackBtn) {
+          closeFeedbackBtn.addEventListener("click", () => {
+            const feedbackModal = document.getElementById(
+              "generalFeedbackModal"
+            );
+            if (feedbackModal) {
+              feedbackModal.classList.add("hidden");
+            }
+          });
+        }
+
+        //    feature request
+        const closeFeatureBtn = document.getElementById(
+          "closeFeatureRequestModal"
+        );
+        if (closeFeatureBtn) {
+          closeFeatureBtn.addEventListener("click", () => {
+            const featureModal = document.getElementById("featureRequestModal");
+            if (featureModal) {
+              featureModal.classList.add("hidden");
+            }
+          });
+        }
+
+        //    bug fix
+        const closeBugBtn = document.getElementById("closeBugFixModal");
+        if (closeBugBtn) {
+          closeBugBtn.addEventListener("click", () => {
+            const bugModal = document.getElementById("bugFixModal");
+            if (bugModal) {
+              bugModal.classList.add("hidden");
+            }
+          });
+        }
       });
     </script>
 

src/js/disclaimer.js

@@ -2,28 +2,35 @@ class DisclaimerModal {
   constructor() {
     this.modal = document.getElementById("disclaimerModal");
     this.acceptButton = document.getElementById("acceptDisclaimer");
+    // If user previously dismissed the disclaimer, we'll store "true" in localStorage:
     this.hasSeenDisclaimer = localStorage.getItem("hasSeenDisclaimer");
 
+    // Set up the click event for the "I Understand" button
     this.setupEventListeners();
   }
 
   setupEventListeners() {
-    const closeModal = () => {
+    if (this.acceptButton) {
-      this.modal.style.display = "none";
+      this.acceptButton.addEventListener("click", () => {
-      document.body.style.overflow = "unset";
+        // Hide the disclaimer by adding the "hidden" class
+        if (this.modal) {
+          this.modal.classList.add("hidden");
+        }
+        // Mark that the user has seen the disclaimer, so we don't show it again
         localStorage.setItem("hasSeenDisclaimer", "true");
-    };
+      });
-
+    }
-    // Only keep the accept button event listener
-    this.acceptButton.addEventListener("click", closeModal);
   }
 
   show() {
+    // Only show it if the user hasn't seen it before
     if (!this.hasSeenDisclaimer) {
-      this.modal.style.display = "flex";
+      if (this.modal) {
-      document.body.style.overflow = "hidden";
+        this.modal.classList.remove("hidden");
+      }
     }
   }
 }
 
+// Export an instance that you can import in your main script
 export const disclaimerModal = new DisclaimerModal();