feat[closes #37]: add message when Javascript is disabled (#87)

Vanilla-OS · Jul 1, 2024 · 86fb923 · 86fb923
1 parent 52f0def
commit 86fb923
Showing 1 changed file with 39 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -4,13 +4,51 @@
 <head>
   <meta charset="UTF-8">
   <link rel="icon" href="/favicon.ico">
+  <link rel="stylesheet" href="/src/assets/css/index.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Chronos</title>
 </head>
 
 <body class="bg-white dark:bg-gray-900">
   <div id="app"></div>
   <script type="module" src="/src/main.ts"></script>
+
+  <noscript>
+    <div class="sticky top-0 z-50 shadow bg-white dark:bg-gray-900">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <nav class="flex justify-between items-center py-4" aria-label="main navigation">
+                <a href="/" class="router-link-active router-link-exact-active flex items-center" aria-current="page">
+                    <img class="w-7 min-w-7 h-7 min-h-7" alt="Logo" src="/logo.svg">
+                    <h1 class="text-lg font-semibold ml-2 hidden sm:block text-gray-900 dark:text-gray-100">Documentation</h1>
+                </a>
+            </nav>
+        </div>
+        <div>
+            <section class="bg-gray-100 dark:bg-gray-800 text-black dark:text-gray-200 text-center py-8">
+                <div class="container mx-auto px-4">
+                    <h1 class="text-3xl font-bold">Chronos Documentation</h1>
+                    <p class="mt-4">Collections</p>
+                </div>
+            </section>
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-8"></div>
+            </div>
+        </div>
+
+        <p class="mx-auto text-center text-xl"><strong>This website requires JavaScript to run.</strong> Please enable it to continue.</p>
+
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-8"></div>
+        </div>
+
+
+        <footer class="bg-white dark:bg-gray-900">
+            <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8 text-center">
+                <p class="text-base text-gray-600 dark:text-gray-400"><strong>Chronos</strong> by <a href="https://vanillaos.org" class="text-blue-600 dark:text-blue-400 hover:underline">Vanilla OS</a>. </p>
+            </div>
+        </footer>
+    </div>
+  </noscript>
 </body>
 
-</html>
+</html>