Update index.html

m0ver · m0ver · commit c6341dcc7bfa · 2025-01-08T22:54:47.000+08:00
diff --git a/index.html b/index.html
@@ -6,13 +6,19 @@
     <title>tinystruct framework</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <style>
+        :root {
+            --background: #f5f5f5;
+            --text: #000000;
+        }
+
         /* General Styles */
         body {
             font-family: 'Roboto', Arial, sans-serif;
             margin: 0;
             padding: 0;
-            background-color: #f5f5f5;
-            color: #333;
+            background-color: var(--background);
+            color: var(--text);
+            transition: background-color 0.3s, color 0.3s;
         }
 
         /* Navigation Bar */
@@ -76,6 +82,14 @@
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
         }
 
+        .dark .container, .dark nav, .dark button {
+            background: #000000;
+        }
+
+        .dark li {
+            background: black;
+        }
+
         h1, h2 {
             color: #4b3c6e;
         }
@@ -218,6 +232,15 @@
             .language-select {
                 margin: 0.5rem 0;
             }
+
+            .hamburger {
+                order: 1; /* Keep hamburger on the right */
+            }
+
+            nav button {
+                margin-right: 10px;
+                order: 0; /* Move the theme toggle button first */
+            }
         }
 
         .terminal {
@@ -264,6 +287,73 @@
         .urls a:hover {
             text-decoration: underline;
         }
+
+        .dark {
+            --background: #121212;
+            --text: #f5f5f5;
+        }
+
+        .w-5 {
+            width: 2.0rem;
+        }
+        .h-5 {
+            height: 2.0rem;
+        }
+
+        .dark\:hidden:is(.dark *) {
+            display: none;
+        }
+
+        .dark\:block:is(.dark *) {
+            display: block;
+        }
+
+        .dark\:hover\:bg-white\/5:hover:is(.dark *) {
+            background-color: hsla(0, 0%, 100%, .05);
+        }
+
+        .hover\:bg-zinc-900\/5:hover {
+            background-color: rgba(24, 24, 27, .05);
+        }
+
+        .stroke-white {
+            stroke: #fff;
+        }
+
+        .stroke-zinc-900 {
+            stroke: #18181b;
+        }
+
+        .hidden {
+            display: none;
+        }
+
+        .transition {
+            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+            transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+            transition-timing-function: cubic-bezier(.4,0,.2,1);
+            transition-duration: .15s;
+        }
+        .rounded-md {
+            border: 0 solid;
+            border-radius: .375rem;
+        }
+        .justify-center {
+            justify-content: center;
+        }
+        .items-center {
+            align-items: center;
+        }
+        .w-6 {
+            width: 2.0rem;
+        }
+        .h-6 {
+            height: 2.0rem;
+        }
+        .flex {
+            display: flex;
+        }
     </style>
 </head>
 <body>
@@ -272,11 +362,21 @@ <h1>
         <img src="https://avatars.githubusercontent.com/u/3723144?s=48&v=4" alt="tinystruct logo">
         tinystruct
     </h1>
+
     <div class="hamburger" onclick="toggleMenu()">
         <div></div>
         <div></div>
         <div></div>
     </div>
+    <button type="button" class="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5" aria-label="Switch to light theme" onclick="toggleTheme()">
+        <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" class="h-5 w-5 stroke-zinc-900 dark:hidden">
+            <path d="M12.5 10a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"></path>
+            <path stroke-linecap="round" d="M10 5.5v-1M13.182 6.818l.707-.707M14.5 10h1M13.182 13.182l.707.707M10 15.5v-1M6.11 13.889l.708-.707M4.5 10h1M6.11 6.111l.708.707"></path>
+        </svg>
+        <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" class="hidden h-5 w-5 stroke-white dark:block">
+            <path d="M15.224 11.724a5.5 5.5 0 0 1-6.949-6.949 5.5 5.5 0 1 0 6.949 6.949Z"></path>
+        </svg>
+    </button>
     <div class="menu">
         <a href="#about" class="lang" data-en="What is tinystruct?" data-fr="Qu'est-ce que tinystruct?" data-de="Was ist tinystruct?" data-zh="什么是 tinystruct?">What is tinystruct?</a>
         <a href="#features" class="lang" data-en="Features" data-fr="Caractéristiques" data-de="Funktionen" data-zh="特点">Features</a>
@@ -289,6 +389,14 @@ <h1>
             <option value="de">Deutsch</option>
             <option value="zh">中文</option>
         </select>
+
+        <a href="https://github.com/tinystruct/tinystruct" target="_blank" class="github-star" title="Star tinystruct on GitHub">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" width="16" height="16">
+                <path d="M12 .587l3.668 7.435 8.2 1.19-5.934 5.787 1.4 8.169L12 18.896l-7.334 3.872 1.4-8.169L.132 9.212l8.2-1.19L12 .587z"/>
+            </svg>
+            Star us on Github
+        </a>
+
     </div>
 </nav>
 <div class="container" id="about">
@@ -528,7 +636,7 @@ <h2 id="installation" class="lang" data-en="Installation and Getting Started" da
     typeMainCommands();
 
     // Check if DeviceMotion is supported
-    if (window.DeviceMotionEvent) {
+/*    if (window.DeviceMotionEvent) {
         console.log("DeviceMotion is supported on this device.");
 
         // Add an event listener for device motion
@@ -573,8 +681,25 @@ <h2 id="installation" class="lang" data-en="Installation and Getting Started" da
     } else {
         console.log("DeviceMotion is not supported on this device.");
         alert("Your device does not support DeviceMotion.");
+    }*/
+
+    function toggleTheme() {
+        // Toggle the 'dark' class on the <html> element
+        document.documentElement.classList.toggle('dark');
+        // Optionally save the current theme to localStorage for persistence
+        const isDark = document.documentElement.classList.contains('dark');
+        localStorage.setItem('theme', isDark ? 'dark' : 'light');
     }
 
+    // Initialize theme on page load
+    document.addEventListener('DOMContentLoaded', () => {
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'dark') {
+            document.documentElement.classList.add('dark');
+        }
+    });
+
+
 </script>
 </body>
 </html>
