Merge PR #8

Update footer-links

Author: Michaelninder

components/miscellaneous/simple-theme-switcher.html

@@ -0,0 +1,29 @@
+<div class="relative inline-block">
+  <div class="flex items-center gap-1 rounded-full border border-gray-200 bg-white p-1 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+    <button data-theme-btn="light" onclick="__setTheme('light')" class="inline-flex size-8 items-center justify-center rounded-full text-gray-500 transition-all hover:bg-gray-100 hover:text-gray-900 focus:outline-none dark:hover:bg-gray-800 dark:hover:text-gray-100" title="Light Mode">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" /></svg>
+    </button>
+    <button data-theme-btn="dark" onclick="__setTheme('dark')" class="inline-flex size-8 items-center justify-center rounded-full text-gray-500 transition-all hover:bg-gray-100 hover:text-gray-900 focus:outline-none dark:hover:bg-gray-800 dark:hover:text-gray-100" title="Dark Mode">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" /></svg>
+    </button>
+    <button data-theme-btn="system" onclick="__setTheme('system')" class="inline-flex size-8 items-center justify-center rounded-full text-gray-500 transition-all hover:bg-gray-100 hover:text-gray-900 focus:outline-none dark:hover:bg-gray-800 dark:hover:text-gray-100" title="System Preference">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" /></svg>
+    </button>
+  </div>
+  <script>
+    (function () {
+      const applyTheme = (m) => {
+        const root = document.documentElement;
+        const isD = m === "dark" || (m === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+        root.classList.toggle("dark", isD);
+        document.querySelectorAll("[data-theme-btn]").forEach((b) => {
+          const act = b.dataset.themeBtn === m;
+          b.classList.toggle("bg-gray-100", act); b.classList.toggle("dark:bg-gray-800", act);
+          b.classList.toggle("text-primary-600", act); b.classList.toggle("dark:text-primary-400", act);
+        });
+      };
+      window.__setTheme = (m) => { localStorage.setItem("theme", m); applyTheme(m); };
+      applyTheme(localStorage.getItem("theme") || "system");
+    })();
+  </script>
+</div>

components/miscellaneous/sliding-theme-selector.html

@@ -0,0 +1,27 @@
+<div class="relative inline-block">
+  <div class="relative flex h-9 items-center rounded-full bg-slate-200 p-1 dark:bg-slate-800">
+    <div id="theme-slider" class="absolute h-7 w-7 rounded-full bg-white transition-transform duration-200 ease-out dark:bg-slate-600 shadow-sm"></div>
+    <button onclick="updateTheme('system', 0)" class="relative z-10 flex h-7 w-7 items-center justify-center text-slate-500 transition-colors hover:text-slate-900 dark:hover:text-white" title="System">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" /></svg>
+    </button>
+    <button onclick="updateTheme('light', 1)" class="relative z-10 flex h-7 w-7 items-center justify-center text-slate-500 transition-colors hover:text-slate-900 dark:hover:text-white" title="Light">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" /></svg>
+    </button>
+    <button onclick="updateTheme('dark', 2)" class="relative z-10 flex h-7 w-7 items-center justify-center text-slate-500 transition-colors hover:text-slate-900 dark:hover:text-white" title="Dark">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" /></svg>
+    </button>
+  </div>
+  <script>
+    (function () {
+      const s = document.getElementById("theme-slider");
+      window.updateTheme = (m, i) => {
+        const root = document.documentElement; localStorage.setItem("theme", m);
+        const isD = m === "dark" || (m === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+        root.classList.toggle("dark", isD);
+        if (s) s.style.transform = `translateX(${i * 28}px)`;
+      };
+      const cur = localStorage.getItem("theme") || "system";
+      const idx = { system: 0, light: 1, dark: 2 }; updateTheme(cur, idx[cur]);
+    })();
+  </script>
+</div>

config.php

@@ -1,6 +1,6 @@
 <?php
 
 return [
-    'APP_VERSION' => '1.5.1',
+    'APP_VERSION' => '1.5.5',
     'BRAND_NAME' => 'mtex.dev',
 ];

data/components.json

@@ -117,5 +117,29 @@
     "name": "Alternative Registration Form",
     "path": "components/auth/alternative-registration-form.html",
     "is_full": true
+  },
+
+
+
+  {
+    "id": "e0649c76-1d6b-466b-9938-c470860972bb",
+    "category": "miscellaneous",
+    "name": "Simple Theme Switcher",
+    "path": "components/miscellaneous/simple-theme-switcher.html",
+    "is_full": false
+  },
+  {
+    "id": "75a24245-d7f8-475c-bbef-20a205acdd1a",
+    "category": "miscellaneous",
+    "name": "Sliding Theme Selecotr",
+    "path": "components/miscellaneous/sliding-theme-selector.html",
+    "is_full": false
+  },
+  {
+    "id": "",
+    "category": "miscellaneous",
+    "name": "",
+    "path": "components/miscellaneous/",
+    "is_full": false
   }
 ]

index.php

@@ -178,17 +178,35 @@
         </div>
 
         <div class="flex items-center gap-6">
+          <a href="https://github.com/mtexdotdev/tw.mtex.dev" target="_blank" class="group flex flex-col">
+            <span class="text-[10px] uppercase tracking-wider text-slate-400 transition-colors group-hover:text-primary-500">
+              Source
+            </span>
+            <span class="text-xs font-medium text-slate-600 dark:text-slate-300">GitHub</span>
+          </a>
+          <a href="https://status.mtex.dev" target="_blank" class="group flex flex-col">
+            <span class="text-[10px] uppercase tracking-wider text-slate-400 transition-colors group-hover:text-primary-500">
+              System
+            </span>
+            <span class="text-xs font-medium text-slate-600 dark:text-slate-300">Status</span>
+          </a>
           <a href="https://fabianternis.dev" target="_blank" class="group flex flex-col">
             <span class="text-[10px] uppercase tracking-wider text-slate-400 transition-colors group-hover:text-primary-500">
               Webmaster
             </span>
             <span class="text-xs font-medium text-slate-600 dark:text-slate-300">fabianternis.dev</span>
           </a>
-          <a href="https://mtex.dev" target="_blank" class="group flex flex-col">
+          <a href="https://legal.mtex.dev" target="_blank" class="group flex flex-col">
+            <span class="text-[10px] uppercase tracking-wider text-slate-400 transition-colors group-hover:text-primary-500">
+              Legal
+            </span>
+            <span class="text-xs font-medium text-slate-600 dark:text-slate-300">Page</span>
+          </a>
+          <a href="https://legal.mtex.dev/imprint" target="_blank" class="group flex flex-col">
             <span class="text-[10px] uppercase tracking-wider text-slate-400 transition-colors group-hover:text-primary-500">
               Imprint
             </span>
-            <span class="text-xs font-medium text-slate-600 dark:text-slate-300">mtex.dev</span>
+            <span class="text-xs font-medium text-slate-600 dark:text-slate-300">legal.mtex.dev</span>
           </a>
         </div>
       </div>