refactor(docs): extract inline scripts to main.js and simplify HTML

Author: YazanAmmar

docs/index.html

@@ -179,7 +179,7 @@
 
     <!-- Hero -->
     <main
-      class="max-w-7xl mx-auto px-6 py-16 sm:py-20 lg:py-28 grid grid-cols-1 lg:grid-cols-[1.02fr_0.98fr] gap-16 xl:gap-24 items-center relative"
+      class="max-w-7xl mx-auto px-6 py-16 sm:py-20 lg:py-28 min-h-[calc(90vh-65px)] grid grid-cols-1 lg:grid-cols-[1.02fr_0.98fr] gap-16 xl:gap-24 items-center relative"
     >
       <div class="max-w-2xl">
         <div class="flex justify-center sm:justify-start">
@@ -295,9 +295,6 @@ <h3 class="text-limitra-dark dark:text-limitra-light font-black text-xl">
                   <p class="text-sm font-bold text-limitra-dark dark:text-limitra-light">
                     Daily Video Limit
                   </p>
-                  <p class="text-xs text-gray-500 dark:text-limitra-muted mt-1">
-                    Stops the feed after your limit.
-                  </p>
                 </div>
                 <div
                   class="text-1xl font-black font-mono text-limitra-dark dark:text-limitra-light"
@@ -310,9 +307,6 @@ <h3 class="text-limitra-dark dark:text-limitra-light font-black text-xl">
                   <p class="text-sm font-bold text-limitra-dark dark:text-limitra-light">
                     Time Limit
                   </p>
-                  <p class="text-xs text-gray-500 dark:text-limitra-muted mt-1">
-                    Keeps sessions intentional.
-                  </p>
                 </div>
                 <div
                   class="text-1xl font-black font-mono text-limitra-dark dark:text-limitra-light"
@@ -355,7 +349,7 @@ <h3 class="text-limitra-dark dark:text-limitra-light font-black text-xl">
               <div
                 class="min-w-24 text-center border-2 border-limitra-dark dark:border-limitra-light bg-white dark:bg-limitra-dark px-3 py-2 shadow-[2px_2px_0px_0px_var(--color-limitra-dark)] dark:shadow-[2px_2px_0px_0px_var(--color-limitra-light)]"
               >
-                <p class="text-[10px] font-mono font-bold text-limitra-accent">SOON</p>
+                <p class="text-[11px] font-mono font-bold text-limitra-accent">01:24:00</p>
               </div>
             </div>
           </div>
@@ -880,248 +874,6 @@ <h3 class="text-lg font-bold mb-4 text-limitra-dark dark:text-limitra-light">
         </div>
       </div>
     </footer>
-
-    <!-- Theme toggle -->
-    <script>
-      const themeToggleBtn = document.getElementById('themeToggle');
-      const sunIcon = document.getElementById('sunIcon');
-      const moonIcon = document.getElementById('moonIcon');
-      function applyTheme(isDark) {
-        document.documentElement.classList.toggle('dark', isDark);
-        sunIcon.classList.toggle('hidden', !isDark);
-        moonIcon.classList.toggle('hidden', isDark);
-        localStorage.theme = isDark ? 'dark' : 'light';
-      }
-      const isDark =
-        localStorage.theme === 'dark' ||
-        (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
-      applyTheme(isDark);
-      themeToggleBtn.addEventListener('click', () =>
-        applyTheme(!document.documentElement.classList.contains('dark')),
-      );
-    </script>
-
-    <!-- Copy wallet address -->
-    <script>
-      function fallbackCopy(text) {
-        const ta = document.createElement('textarea');
-        ta.value = text;
-        ta.style.cssText = 'position:fixed;opacity:0';
-        document.body.appendChild(ta);
-        ta.focus();
-        ta.select();
-        try {
-          document.execCommand('copy');
-          return true;
-        } catch {
-          return false;
-        } finally {
-          document.body.removeChild(ta);
-        }
-      }
-      const copyToClipboard = async (text) => {
-        try {
-          await navigator.clipboard.writeText(text);
-          return true;
-        } catch {
-          return fallbackCopy(text);
-        }
-      };
-      document.addEventListener('DOMContentLoaded', () => {
-        const copyBtn = document.getElementById('copyBtn');
-        const walletAddress = document.getElementById('walletAddress');
-        let clickCount = 0,
-          spamResetTimer = null,
-          resetTextTimer = null,
-          isSpamming = false;
-        copyBtn.addEventListener('click', async () => {
-          clickCount++;
-          clearTimeout(spamResetTimer);
-          spamResetTimer = setTimeout(() => {
-            clickCount = 0;
-          }, 2000);
-          if (clickCount >= 10) {
-            isSpamming = true;
-            copyBtn.textContent = 'THAAAAAAAANKS!!!';
-            clearTimeout(resetTextTimer);
-            resetTextTimer = setTimeout(() => {
-              isSpamming = false;
-              copyBtn.textContent = 'Copy Address';
-              clickCount = 0;
-            }, 2000);
-            return;
-          }
-          if (isSpamming) {
-            clearTimeout(resetTextTimer);
-            resetTextTimer = setTimeout(() => {
-              isSpamming = false;
-              copyBtn.textContent = 'Copy Address';
-              clickCount = 0;
-            }, 2000);
-            return;
-          }
-          const success = await copyToClipboard(walletAddress.textContent?.trim());
-          copyBtn.textContent = success ? 'Copied!' : 'Failed!';
-          clearTimeout(resetTextTimer);
-          resetTextTimer = setTimeout(() => {
-            if (!isSpamming) copyBtn.textContent = 'Copy Address';
-          }, 2000);
-        });
-      });
-      const preloadedQRs = {};
-      function preloadQRs() {
-        wallets.forEach((w) => {
-          const img = new Image();
-          img.src = w.qr;
-          preloadedQRs[w.qr] = img;
-        });
-      }
-      const wallets = [
-        {
-          label: 'USDT (TRC20)',
-          address: 'THxLYXCCzJrDZbL39MnZUrgtgm3HSx2NUg',
-          network: 'Send only via (TRC20) network',
-          qr: './assets/qr-usdt.png',
-        },
-        {
-          label: 'BTC',
-          address: '133R2PeTSCeymBireCWZ4uJxhjFYZQSje7',
-          network: 'Send only via Bitcoin (BTC) network',
-          qr: './assets/qr-btc.png',
-        },
-        {
-          label: 'Ethereum (ERC20)',
-          address: '0xaba5b53b6e11c6210d51f53dc6728ab47c4f3f1b',
-          network: 'Send only via Ethereum (ERC20) network',
-          qr: './assets/qr-eth.png',
-        },
-      ];
-      document.addEventListener('DOMContentLoaded', () => {
-        preloadQRs();
-        setQR(wallets[0].qr);
-      });
-      function setQR(src) {
-        const img = document.getElementById('qrImage');
-        if (preloadedQRs[src]) {
-          img.src = preloadedQRs[src].src;
-        }
-      }
-      const walletLabel = document.getElementById('walletLabel');
-      const walletAddress = document.getElementById('walletAddress');
-      const networkHint = document.getElementById('networkHint');
-      const qrImage = document.getElementById('qrImage');
-      const tabs = document.querySelectorAll('.wallet-tab');
-      tabs.forEach((tab) => {
-        tab.addEventListener('click', () => {
-          tabs.forEach((t) => t.classList.remove('active-tab'));
-          tab.classList.add('active-tab');
-          const index = parseInt(tab.dataset.index);
-          const w = wallets[index];
-          walletLabel.textContent = w.label;
-          walletAddress.textContent = w.address;
-          networkHint.textContent = w.network;
-          setQR(w.qr);
-        });
-      });
-    </script>
-
-    <!-- Floating nav on scroll -->
-    <script>
-      (function () {
-        const nav = document.getElementById('mainNav');
-        const NAV_SCROLL_THRESHOLD = 80;
-        function onScroll() {
-          if (window.matchMedia('(max-width: 767px)').matches) {
-            nav.classList.remove('nav-floating');
-            return;
-          }
-          if (window.scrollY > NAV_SCROLL_THRESHOLD) {
-            nav.classList.add('nav-floating');
-          } else {
-            nav.classList.remove('nav-floating');
-          }
-        }
-        window.addEventListener('scroll', onScroll, { passive: true });
-        window.addEventListener('resize', onScroll);
-        onScroll();
-      })();
-    </script>
-
-    <!-- Time-waster modal -->
-    <div
-      id="timeWasterModal"
-      class="fixed inset-0 z-100 hidden items-center justify-center bg-black/50 backdrop-blur-sm p-4"
-    >
-      <div
-        id="modalContent"
-        class="relative bg-white dark:bg-limitra-dark border-4 border-limitra-dark dark:border-limitra-light px-8 py-12 sm:px-14 sm:py-16 max-w-2xl w-full shadow-[12px_12px_0px_0px_var(--color-limitra-accent)] text-center transform scale-95 opacity-0 transition-all duration-300"
-      >
-        <div
-          class="absolute -top-5 -left-5 bg-limitra-accent text-white font-mono font-extrabold text-base px-6 py-1.5 border-[3px] border-limitra-dark dark:border-limitra-light rotate-[-5deg] shadow-[4px_4px_0px_0px_var(--color-limitra-dark)] dark:shadow-[4px_4px_0px_0px_var(--color-limitra-light)] tracking-[2px] uppercase z-10"
-        >
-          BLOCKED
-        </div>
-        <h3
-          class="text-4xl font-black text-limitra-dark dark:text-limitra-light mb-6 uppercase tracking-tighter"
-        >
-          Time Waster Detected
-        </h3>
-        <p
-          class="text-limitra-dark dark:text-limitra-light font-extrabold text-xl mb-12 leading-snug tracking-tight"
-        >
-          We built Limitra™ to stop you from wasting time. Yet, here you are, spending over 10
-          minutes just scrolling through a landing page. The irony is real. Install it and go do
-          something useful.
-        </p>
-        <button
-          id="closeModalBtn"
-          class="brutal-btn-primary w-full py-5 text-xl tracking-wider uppercase"
-        >
-          FINE, I'LL INSTALL IT
-        </button>
-      </div>
-    </div>
-
-    <!-- Time waster timer -->
-    <script>
-      const IDLE_TIME_LIMIT = 600000; // 10 min
-      const modal = document.getElementById('timeWasterModal');
-      const modalContent = document.getElementById('modalContent');
-      const closeBtn = document.getElementById('closeModalBtn');
-      let idleTimer,
-        remainingTime = IDLE_TIME_LIMIT,
-        startTime,
-        hasShownModal = false;
-      function startTimer() {
-        if (hasShownModal) return;
-        startTime = Date.now();
-        idleTimer = setTimeout(showModal, remainingTime);
-      }
-      function pauseTimer() {
-        if (hasShownModal) return;
-        clearTimeout(idleTimer);
-        remainingTime -= Date.now() - startTime;
-      }
-      function showModal() {
-        hasShownModal = true;
-        modal.classList.remove('hidden');
-        modal.classList.add('flex');
-        setTimeout(() => {
-          modalContent.classList.remove('scale-95', 'opacity-0');
-          modalContent.classList.add('scale-100', 'opacity-100');
-        }, 10);
-      }
-      closeBtn.addEventListener('click', () => {
-        modal.classList.add('hidden');
-        modal.classList.remove('flex');
-        modalContent.classList.add('scale-95', 'opacity-0');
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-      });
-      document.addEventListener('visibilitychange', () => {
-        document.hidden ? pauseTimer() : startTimer();
-      });
-      startTimer();
-      window.addEventListener('beforeunload', () => clearTimeout(idleTimer));
-    </script>
+    <script src="./js/main.js" defer></script>
   </body>
 </html>