update stylesheet (#26)

okie dokie

Author: sojs-coder

components/chead.html

@@ -18,6 +18,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 <link rel="stylesheet" href="/assets/styles/home.css" />
 <link rel="stylesheet" href="/assets/styles/master.css" />
+<link rel="stylesheet" href="/assets/styles/theme-1.css" />
+<link rel="stylesheet" href="/assets/styles/theme-2.css" />
+<link rel="stylesheet" href="/assets/styles/theme-3.css" />
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
   integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
   crossorigin="anonymous" referrerpolicy="no-referrer" />

components/lightDarkToggle.html

@@ -1,20 +1,10 @@
-<div class = "cc lightDarkToggle">
-    <input type="checkbox" class="cc checkbox" id="checkbox">
-    <label for="checkbox" class="cc checkbox-label">
-        <i class="cc fas fa-moon"></i>
-        <i class="cc fas fa-sun"></i>
-        <span class="cc ball"></span>
-    </label>
+<div class="theme-switcher">
+    <select id="theme-select">
+        <option value="classic">Classic</option>
+        <option value="future">Future</option>
+        <option value="vintage">Vintage</option>
+        <option value="ocean">Ocean</option>
+    </select>
 </div>
 
-<script src = "/assets/scripts/lightDarkToggle.js"></script>
-<!-- 
-<script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
-<script>
-  kofiWidgetOverlay.draw('ccported', {
-    'type': 'floating-chat',
-    'floating-chat.donateButton.text': 'Support me',
-    'floating-chat.donateButton.background-color': '#323842',
-    'floating-chat.donateButton.text-color': '#fff'
-  });
-</script> -->
+<script src="/assets/scripts/lightDarkToggle.js"></script>

static/assets/scripts/helpers.js

@@ -631,7 +631,7 @@ async function enforceDonationLockout() {
         const currentDomain = window.location.hostname;
 
         // If current host is not in allowedHosts, show complete lockout and disable access
-        // if (!allowedHosts.includes(currentDomain)) {
+        if (!allowedHosts.includes(currentDomain)) {
             document.body.innerHTML = `
                 <div style="display:flex;align-items:center;justify-content:center;height:100vh;background:#111;color:#fff;font-family:sans-serif;text-align:center;">
                     <div>
@@ -646,7 +646,7 @@ async function enforceDonationLockout() {
             document.body.style.userSelect = "none";
             window.locked = true;
             return;
-        // }
+        }
     } catch (err) {
         console.error('Failed to check donation status:', err);
     }

static/assets/scripts/lightDarkToggle.js

@@ -1,10 +1,18 @@
-const theme = localStorage.getItem("[ns_ccported]_theme") || "light";
-const lightDarkToggle = document.querySelector(".cc.lightDarkToggle .cc.checkbox");
-if(theme == "dark"){
-    document.body.classList.add("dark");
-    lightDarkToggle.checked = true;
-}
-checkbox.addEventListener("change", (e) => {
-    document.body.classList.toggle("dark");
-    localStorage.setItem("[ns_ccported]_theme", document.body.classList.contains("dark") ? "dark" : "light");
-})
+
+document.addEventListener('DOMContentLoaded', () => {
+    const themeSelect = document.getElementById('theme-select');
+    const body = document.body;
+    const setTheme = (theme) => {
+        body.classList.remove('classic', 'future', 'vintage', 'ocean');
+        body.classList.add(theme);
+        localStorage.setItem('theme', theme);
+        themeSelect.value = theme;
+    };
+
+    themeSelect.addEventListener('change', () => {
+        setTheme(themeSelect.value);
+    });
+
+    const savedTheme = localStorage.getItem('theme') || 'vintage';
+    setTheme(savedTheme);
+});