update

src/css/style.css

@@ -88,7 +88,6 @@ header img {
 }
 
 /* Modal Player */
-/* Base Modal Styles */
 #playerModal {
   position: fixed;
   inset: 0;
@@ -304,3 +303,91 @@ footer a {
 footer a:hover {
   text-decoration: underline;
 }
+
+/* Disclaimer Modal Styles */
+#disclaimerModal {
+  position: fixed;
+  inset: 0;
+  background-color: rgb(0 0 0 / 0.9);
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+#disclaimerModal .modal-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-bg);
+}
+
+#disclaimerModal .modal-scroll {
+  padding: 1.5rem;
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* Disclaimer Modal Scrollbar */
+#disclaimerModal .modal-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+#disclaimerModal .modal-scroll::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+#disclaimerModal .modal-scroll::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 4px;
+}
+
+#disclaimerModal .modal-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+/* Disclaimer Modal Button Container */
+#disclaimerModal .button-container {
+  padding: 1rem 1.5rem;
+  background-color: #1a2234;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Responsive Adjustments for Disclaimer Modal */
+@media (min-width: 768px) {
+  #disclaimerModal {
+    padding: 2rem;
+    align-items: center;
+    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
+    ); /* Account for button container and padding */
+  }
+}
+
+/* Mobile-specific styles for Disclaimer Modal */
+@media (max-width: 767px) {
+  #disclaimerModal {
+    padding: 0;
+  }
+
+  #disclaimerModal .modal-content {
+    min-height: 100vh;
+    border-radius: 0;
+  }
+}

src/index.html

@@ -298,15 +298,9 @@
       </div>
 
       <!-- Disclaimer Modal -->
-      <div
+      <div id="disclaimerModal" class="hidden">
-        id="disclaimerModal"
+        <div class="modal-content">
-        class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4"
+          <div class="modal-scroll">
-      >
-        <div
-          class="bg-gray-900 rounded-lg max-w-2xl w-full relative overflow-hidden"
-        >
-          <!-- Content -->
-          <div class="p-6 text-white">
             <!-- Logo -->
             <div class="flex justify-center mb-8">
               <img
@@ -316,7 +310,7 @@
               />
             </div>
 
-            <h2 class="text-2xl font-bold mb-4 text-center">
+            <h2 class="text-2xl font-bold mb-4 text-center text-white">
               Welcome to bitvid
             </h2>
 
@@ -395,16 +389,16 @@
                 </div>
               </div>
             </div>
+          </div>
 
-            <!-- Action Button -->
+          <!-- Action Button in fixed container -->
-            <div class="mt-6">
+          <div class="button-container">
-              <button
+            <button
-                id="acceptDisclaimer"
+              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-gray-900 transition-colors duration-200"
-              >
+            >
-                I Understand
+              I Understand
-              </button>
+            </button>
-            </div>
           </div>
         </div>
       </div>