Update legal.html

MYXXdev · MYXXdev · commit 36800e64a78b · 2024-08-05T20:09:34.000-06:00
diff --git a/MYXXfm/pages/legal.html b/MYXXfm/pages/legal.html
@@ -65,24 +65,50 @@
             border-bottom-color: transparent;
             text-decoration: underline;
         }
+        /* Spinner styles */
+        .fade-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: black;
+            opacity: 1; /* Initially visible */
+            transition: opacity 0.5s ease-out; /* Adjust timing and easing as needed */
+            z-index: 9999; /* Ensure it sits on top of other content */
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .spinner {
+            border: 8px solid rgba(0, 0, 0, 0.1); /* Light grey border */
+            border-radius: 50%;
+            border-top: 8px solid #EFD500; /* Spinner color */
+            width: 10vw; /* Responsive width (10% of viewport width) */
+            height: 10vw; /* Responsive height (10% of viewport width) */
+            max-width: 100px; /* Maximum width */
+            max-height: 100px; /* Maximum height */
+            animation: spin 1s linear infinite; /* Adjust animation duration */
+            margin-top: 40px; /* Adjust margin to move spinner down */
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
         @media (max-width: 768px) {
-            .container {
-                padding: 20px 40px; /* Adjusted padding for smaller screens */
-                margin: 10px; /* Adjusted margin for smaller gap on mobile */
-            }
-            h1 {
-                font-size: 22px;
-            }
-            h2 {
-                font-size: 20px;
-            }
-            p {
-                font-size: 14px;
+            .spinner {
+                width: 10vw; /* Adjust size for smaller screens */
+                height: 10vw;
+                max-width: 80px; /* Maximum width */
+                max-height: 80px; /* Maximum height */
             }
         }
     </style>
 </head>
 <body>
+    <div class="fade-overlay">
+        <div class="spinner"></div>
+    </div>
     <div class="container">
         <p><strong>Last updated: August 5, 2024</strong></p>
 
@@ -147,5 +173,18 @@ <h1>Contact Us</h1>
             <li>By phone: (970) 989-6999</li>
         </ul>
     </div>
+
+    <script>
+        // Automatically fade out after a set time
+        setTimeout(() => {
+            const overlay = document.querySelector('.fade-overlay');
+            overlay.style.opacity = 0;
+            // Optional: Remove overlay after fade-out to clean up
+            setTimeout(() => {
+                overlay.style.display = 'none';
+                document.body.style.overflow = 'auto'; // Restore scrollbars
+            }, 500); // Adjust the total duration before fading out
+        }, 2000); // Adjust the time before starting fade-out (reduced to 2 seconds)
+    </script>
 </body>
 </html>
