index.html

@@ -4,27 +4,40 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, height=device-height, initial-scale: 1">
         <title>Cypher Player Assistant</title>
+        <link rel="stylesheet" type="text/css" href="static/reset.css">
         <style>
          :root {
-             --dark-bg: black;
-             --dark-text: black;
+             /* Dark Color Scheme */
+             --dark-bg: #111111;
+             --dark-text: #eeeeee;
+             --dark-box-border: #333333;
 
-             --light-bg: white;
-             --light-text: black;
+             /* Light Color Scheme */
+             --light-bg: #eeeeee;
+             --light-text: #111111;
+             --light-box-border: #cccccc;
 
+             /* Defaults */
              --bg: var(--light-bg);
              --text: var(--light-text);
+             --box-border: var(--light-box-border);
          }
 
-         #color-scheme-toggle {
+         #color-scheme {
              display: none;
          }
 
-         #color-scheme-toggle:checked ~ #color-mode-wrapper .dark-mode-hide {
+         #color-scheme:checked ~ .color-scheme-wrapper {
+             --bg: var(--dark-bg);
+             --text: var(--dark-text);
+             --box-border: var(--dark-box-border);
+         }
+
+         #color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
              display: none;
          }
 
-         #color-scheme-toggle:checked ~ #color-mode-wrapper .light-mode-hide {
+         #color-scheme:checked ~ .color-scheme-wrapper .light-mode-hide {
              display: initial;
          }
 
@@ -37,16 +50,154 @@
          }
 
          @media(prefers-color-scheme: dark) {
+             :root {
+                 --bg: var(--dark-bg);
+                 --text: var(--dark-text);
+                 --box-border: var(--dark-box-border);
              }
 
-         @media(prefers-color-scheme: light) {
+             #color-scheme:checked ~ .color-scheme-wrapper {
+                 --bg: var(--light-bg);
+                 --text: var(--light-text);
+                 --box-border: var(--light-box-border);
+             }
+
+             #color-scheme:checked ~ .color-scheme-wrapper .dark-mode-hide {
+                 display: initial;
+             }
+
+             #color-scheme:checked ~ .color-scheme-wrapper .light-mode-hide {
+                 display: none;
+             }
+
+             .dark-mode-hide {
+                 display: none;
+             }
+
+             .light-mode-hide {
+                 display: initial;
+             }
+         }
+
+         /* Actual page style */
+
+         .color-scheme-wrapper {
+             min-height: 100vh;
+             background: var(--bg);
+             color: var(--text);
+         }
+
+         #color-scheme-changer {
+             position: fixed;
+             text-align: center;
+             top: 0;
+             right: 0;
+             font-size: 150%;
+             width: 1.5em;
+             cursor: pointer;
+         }
+
+         .color-scheme-toggle {
+             cursor: pointer;
+         }
+
+         .color-scheme-toggle span {
+             cursor: pointer;
+         }
+
+         .dark-mode-hide, .light-mode-hide {
+             cursor: pointer;
+         }
+
+         .dark-mode-hide {
+             background-color: var(--dark-bg);
+             color: var(--dark-text);
+         }
+
+         .light-mode-hide {
+             background-color: var(--light-bg);
+             color: var(--light-text);
+         }
+
+         body {
+             background-color: var(--bg);
+             color: var(--text);
+             font-family: sans-serif;
+         }
+
+         h1 {
+             width: 100%;
+             font-family: serif;
+             text-align: center;
+         }
+
+         #no-local-storage {
+             display: none;
+             color: red;
+         }
+
+         .box {
+             width: 80%;
+             border-width: 2px;
+             border-style: solid;
+             border-color: var(--box-border);
+             border-radius: 10px;
+             margin: 0 auto 1em auto;
+             padding: 1em;
+         }
+
+         #no-loaded-container {
+             text-align: center;
          }
         </style>
     </head>
     <body>
-        <input id="color-scheme-toggle" type="checkbox">
-        <div id="color-scheme-wrapper">
-            <h1>Cypher Player Assistant</h1>
+        <input id="color-scheme" type="checkbox">
+        <div class="color-scheme-wrapper">
+            <div id="color-scheme-changer">
+                <label for="color-scheme" id="color-scheme-toggle">
+                    <span class="dark-mode-hide">☽</span>
+                    <span class="light-mode-hide">☼</span>
+                </label>
             </div>
+            <h1>
+                Cypher Player Assistant
+                <span id="no-local-storage" title="Local Storage is not available. You can import/export data, but the app won’t save it between sessions!">!</span>
+            </h1>
+            <div id="no-loaded-container" class="box">
+                No character is loaded.
+            </div>
+        </div>
+        <script>
+         const checkLocalStorage = () => {
+             let storage;
+             try {
+                 storage = window.localStorage;
+                 const x = "__storage_test__";
+                 storage.setItem(x, x);
+                 storage.removeItem(x);
+
+                 return true;
+             } catch (e) {
+                 return (
+                     e instanceof DOMException &&
+                     e.name === "QuotaExceededError" &&
+                     // acknowledge QuotaExceededError only if there's something already stored
+                     storage &&
+                     storage.length !== 0
+                 );
+             }
+         };
+
+         document.addEventListener(
+             "DOMContentLoaded",
+             () => {
+                 if (!checkLocalStorage()) {
+                     document.getElementById("no-local-storage").style.display = "initial";
+                     alert("Local Storage is not available, saving and loading data will be unavailable.");
+                 }
+             },
+         );
+        </script>
     </body>
 </html>

static/reset.css

@@ -0,0 +1,50 @@
+/* CSS Reset */
+
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+ul[class], ol[class] {
+    padding: 0;
+}
+
+body, h1, h2, h3, h4, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd {
+    margin: 0;
+}
+
+body {
+    min-height: 100vh;
+    scroll-behavior: smooth;
+    text-rendering: optimizeSpeed;
+    line-height: 1.5;
+}
+
+ul[class], ol[class] {
+    list-style: none;
+}
+
+a:not([class]) {
+    text-decoration-skip-ink: auto;
+}
+
+img {
+    max-width: 100%;
+    display: block;
+}
+
+article > * + * {
+    margin-top: 1em;
+}
+
+input, button, textarea, select {
+    font: inherit;
+}
+
+@media(prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}