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,101 +115,162 @@
         </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"
-            <div class="flex justify-center mb-8">
+        style="background: transparent"
-              <img
+      >
-                src="assets/svg/bitvid-logo-dark-mode.svg"
+        <!-- Dark/blur overlay -->
-                alt="BitVid Logo"
+        <div
-                class="h-16"
+          class="absolute inset-0 z-10"
-              />
+          style="
-            </div>
+            background-color: rgba(0, 0, 0, 0.9);
-            <h2 class="text-2xl font-bold mb-4 text-center text-white">
+            backdrop-filter: blur(10px);
-              Welcome to bitvid
+            -webkit-backdrop-filter: blur(10px);
-            </h2>
+          "
-            <!-- Warning Alert -->
+        ></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="bg-yellow-900/20 border border-yellow-700/50 rounded-lg p-4 mb-6 flex items-start"
+              class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
             >
-              <svg
+              <!-- If you want an X to close, you can add it here, for example:
-                class="h-5 w-5 text-yellow-500 mt-0.5 mr-3 flex-shrink-0"
+              <button
-                viewBox="0 0 24 24"
+                id="closeDisclaimerBtn"
-                fill="none"
+                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"
-                stroke="currentColor"
               >
-                <path
+                <svg
-                  stroke-linecap="round"
+                  xmlns="http://www.w3.org/2000/svg"
-                  stroke-linejoin="round"
+                  class="w-6 h-6 text-gray-300"
-                  stroke-width="2"
+                  fill="none"
-                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                  viewBox="0 0 24 24"
-                />
+                  stroke="currentColor"
-              </svg>
+                >
-              <p class="text-yellow-200">
+                  <path
-                This platform is currently in development and only supports
+                    stroke-linecap="round"
-                Chrome and Firefox-based browsers. Other browsers are not
+                    stroke-linejoin="round"
-                supported at this time. You may encounter bugs or missing
+                    stroke-width="2"
-                features. Give it a sec. Videos might take 10 to 60 seconds to
+                    d="M6 18L18 6M6 6l12 12"
-                load initially.
+                  />
-              </p>
+                </svg>
+              </button>
+              -->
             </div>
-            <div class="space-y-6 text-gray-300">
+
-              <p>
+            <!-- Main Content -->
-                bitvid is a decentralized video platform where content is shared
+            <div class="p-6">
-                directly between users. We want you to understand a few
+              <!-- Scrollable disclaimers area -->
-                important points before you continue:
+              <div
-              </p>
+                class="space-y-6 text-gray-300"
-              <div class="space-y-4">
+                style="max-height: 70vh; overflow-y: auto"
-                <div class="bg-gray-800 rounded-lg p-4">
+              >
-                  <h3 class="text-white font-semibold mb-2">
+                <!-- Example: Insert your disclaimers here -->
-                    Early Access Status
+
-                  </h3>
+                <div class="flex justify-center mb-8">
-                  <p class="text-gray-400">
+                  <img
-                    Currently, video posting is invite-only as we carefully
+                    src="assets/svg/bitvid-logo-dark-mode.svg"
-                    scale our platform. While anyone can watch videos, content
+                    alt="BitVid Logo"
-                    creation is limited to approved creators. This helps us
+                    class="h-16"
-                    maintain quality content during our early stages.
+                  />
+                </div>
+                <h2 class="text-2xl font-bold text-white mb-0">
+                  Welcome to bitvid
+                </h2>
+                <!-- Warning Alert -->
+                <div
+                  class="bg-yellow-900/20 border border-yellow-700/50 rounded-lg p-4 mb-6 flex items-start"
+                >
+                  <svg
+                    class="h-5 w-5 text-yellow-500 mt-0.5 mr-3 flex-shrink-0"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                    />
+                  </svg>
+                  <p class="text-yellow-200">
+                    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 load initially.
                   </p>
                 </div>
-                <div class="bg-gray-800 rounded-lg p-4">
+                <p>
-                  <h3 class="text-white font-semibold mb-2">
+                  bitvid is a decentralized video platform where content is
-                    Content Responsibility & Moderation
+                  shared directly between users. We want you to understand a few
-                  </h3>
+                  important points before you continue:
-                  <p class="text-gray-400">
+                </p>
-                    While we don't host videos directly, we maintain community
+
-                    standards through access control. Users who violate our
+                <div class="space-y-4">
-                    guidelines may be blocked from accessing the platform. All
+                  <div class="bg-gray-800 rounded-lg p-4">
-                    content must follow local laws and platform guidelines.
+                    <h3 class="text-white font-semibold mb-2">
-                  </p>
+                      Early Access Status
-                </div>
+                    </h3>
-                <div class="bg-gray-800 rounded-lg p-4">
+                    <p class="text-gray-400">
-                  <h3 class="text-white font-semibold mb-2">Platform Status</h3>
+                      Currently, video posting is invite-only as we carefully
-                  <p class="text-gray-400">
+                      scale our platform. While anyone can watch videos, content
-                    bitvid is a work in progress. Features may change or break,
+                      creation is limited to approved creators. This helps us
-                    and security improvements are ongoing. Your feedback and
+                      maintain quality content during our early stages.
-                    patience help us build a better platform.
+                    </p>
-                  </p>
+                  </div>
-                </div>
+                  <div class="bg-gray-800 rounded-lg p-4">
-                <div class="bg-gray-800 rounded-lg p-4">
+                    <h3 class="text-white font-semibold mb-2">
-                  <h3 class="text-white font-semibold mb-2">Get Involved</h3>
+                      Content Responsibility & Moderation
-                  <p class="text-gray-400">
+                    </h3>
-                    Are you a developer? We'd love your help! Visit our GitHub
+                    <p class="text-gray-400">
-                    repository to contribute to building the future of
+                      While we don't host videos directly, we maintain community
-                    decentralized video sharing.
+                      standards through access control. Users who violate our
-                  </p>
+                      guidelines may be blocked from accessing the platform. All
+                      content must follow local laws and platform guidelines.
+                    </p>
+                  </div>
+                  <div class="bg-gray-800 rounded-lg p-4">
+                    <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, and security improvements are ongoing. Your
+                      feedback and patience help us build a better platform.
+                    </p>
+                  </div>
+                  <div class="bg-gray-800 rounded-lg p-4">
+                    <h3 class="text-white font-semibold mb-2">Get Involved</h3>
+                    <p class="text-gray-400">
+                      Are you a developer? We'd love your help! Visit our GitHub
+                      repository to contribute to building the future of
+                      decentralized video sharing.
+                    </p>
+                  </div>
                 </div>
               </div>
+
+              <!-- 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-black transition-colors duration-200"
+                >
+                  I Understand
+                </button>
+              </div>
             </div>
           </div>
-          <div class="button-container">
-            <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"
-            >
-              I Understand
-            </button>
-          </div>
         </div>
       </div>
 
@@ -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
-      localStorage.setItem("hasSeenDisclaimer", "true");
+        if (this.modal) {
-    };
+          this.modal.classList.add("hidden");
-
+        }
-    // Only keep the accept button event listener
+        // Mark that the user has seen the disclaimer, so we don't show it again
-    this.acceptButton.addEventListener("click", closeModal);
+        localStorage.setItem("hasSeenDisclaimer", "true");
+      });
+    }
   }
 
   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();