added Dark mode to website and styled it up a little (#778)

* added dark mode * added css and js files
2025-02-13 16:24:37 +00:00 · 2024-12-31 00:37:16 +05:30 · 2024-12-31 00:37:16 +05:30 · 01ad54a5b7
commit 01ad54a5b7
parent 4f51f408a1
7 changed files with 432 additions and 111 deletions
--- a/assets/bx-chevron-down.svg
+++ b/assets/bx-chevron-down.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.293 9.293L12 13.586 7.707 9.293 6.293 10.707 12 16.414 17.707 10.707z"/></svg>
--- a/css/main.css
+++ b/css/main.css
@ -0,0 +1,131 @@
+:root {
+  --accent-color: #e3e3e39a;
+  --link-color: #9e1bd6;
+  --bg-color: white;
+}
+
+a {
+  color: var(--link-color, #9e1bd6);
+}
+
+body {
+  margin: 1rem;
+  font-size: 16px;
+  font-family: "IBM Plex Mono", monospace;
+  background-color: var(--bg-color, white);
+}
+
+.header {
+  margin-bottom: -0.5rem;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -ms-flex-line-pack: center;
+      align-content: center;
+}
+
+button {
+  font: inherit;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  padding: 10px;
+  height: -webkit-min-content;
+  height: -moz-min-content;
+  height: min-content;
+  background-color: var(--accent-color, #e3e3e39a);
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+form {
+  font-family: "IBM Plex Mono", monospace;
+}
+
+form select {
+  font-family: "IBM Plex Mono", monospace;
+  font-size: inherit;
+  -moz-appearance: none;
+       appearance: none;
+  padding: 10px;
+  padding-right: 30px;
+  background-color: var(--accent-color, #e3e3e39a);
+  border: none;
+  border-radius: 5px;
+  line-height: 1;
+  background: url("../assets/bx-chevron-down.svg") no-repeat right var(--accent-color, #e3e3e39a);
+  -webkit-appearance: none;
+  background-position: 97%;
+  margin-right: 10px;
+  margin-bottom: 1rem;
+}
+
+form input {
+  font-family: "IBM Plex Mono", monospace;
+  padding: 10px;
+  background-color: var(--accent-color, #e3e3e39a);
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  line-height: 1;
+  margin-bottom: 1rem;
+}
+
+form input:not(:last-child) {
+  margin-right: 10px;
+}
+
+form input[type="button"] {
+  min-width: 80px;
+}
+
+form input[type="text"] {
+  text-align: center;
+  font-weight: 500;
+  min-width: 160px;
+  border: var(--accent-color, #e3e3e39a) solid 2px;
+  background: transparent;
+  cursor: text;
+}
+
+form input[type="text"]:active, form input[type="text"]:hover {
+  background-color: transparent;
+}
+
+img {
+  min-width: 100%;
+  height: auto;
+}
+
+.invert {
+  -webkit-filter: invert(100%) contrast(120%);
+          filter: invert(100%) contrast(120%);
+}
+
+select,
+input {
+  cursor: pointer;
+}
+
+span {
+  font-weight: 500;
+  margin-left: 1rem;
+  vertical-align: middle;
+}
+
+.hover:hover {
+  background-color: #fff;
+}
+
+.muted-color {
+  color: var(--accent-color);
+}
+
+.white {
+  color: white;
+}
+/*# sourceMappingURL=main.css.map */
--- a/css/main.css.map
+++ b/css/main.css.map
@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "../scss/main.scss"
+    ],
+    "names": [],
+    "file": "main.css"
+}
--- a/index.html
+++ b/index.html
@ -1,125 +1,85 @@
-<!DOCTYPE html>
-
 <html>
  <head>
+    <script
+      type="text/javascript"
+      src="https://codesandbox.io/public/sse-hooks/sse-hooks.js"
+    ></script>
+
    <title>AGC scans viewer</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <script>
-      const COMANCHE055 = "Comanche055";
-      const LUMINARY099 = "Luminary099";
-      const COMANCHE055_PAGES = 1751;
-      const LUMINARY099_PAGES = 1743;
+    <script src="js/index.js"></script>
+    <link
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="css/main.css" /></head
+  ><span id="warning-container"><i data-reactroot=""></i></span>
+  <body
+    onload="showPage()"
+    data-new-gr-c-s-check-loaded="14.973.0"
+    style="cursor: default"
+  >
+    <div class="header">
+      <form name="form" onsubmit="return false" id="form">
+        <select name="directory" onchange="changeDir()">
+          <option>Comanche055</option>
+          <option>Luminary099</option>
+        </select>
+        <input type="button" onclick="showFirst()" value="First" />
+        <input type="button" onclick="showPrevious()" value="Previous" />
+        <input
+          type="text"
+          name="pagenum"
+          onchange="changePage(this.value)"
+          size="5"
+          maxlength="4"
+          value="1"
+        />
+        <input type="button" onclick="showNext()" value="Next" />
+        <input type="button" onclick="showLast()" value="Last" />
+        <span>
+          Images hosted by
+          <a href="https://www.ibiblio.org/apollo">Ibiblio</a> and the Virtual
+          AGC project
+        </span>
+      </form>
+      <script src="js/darkmode.js"></script>
+      <button id="switch" onclick="lightDark(this)">Dark Mode</button>
+    </div>

-      function changeDir() {
-        showPage();
-      }
-
-      function showFirst() {
-        changePage(1);
-      }
-
-      function showLast() {
-        const directory = document.form.directory.value;
-        if (directory === COMANCHE055) changePage(COMANCHE055_PAGES);
-        else if (directory === LUMINARY099) changePage(LUMINARY099_PAGES);
-      }
-
-      function showPrevious() {
-        const newpage = parseInt(document.form.pagenum.value) - 1;
-        if (newpage >= 1) {
-          changePage(newpage);
-        }
-      }
-
-      function showNext() {
-        const newpage = parseInt(document.form.pagenum.value) + 1;
-        const directory = document.form.directory.value;
-        if (
-          (directory === COMANCHE055 && newpage <= COMANCHE055_PAGES) ||
-          (directory === LUMINARY099 && newpage <= LUMINARY099_PAGES)
-        ) {
-          changePage(newpage);
-        }
-      }
-
-      function changePage(page) {
-        document.form.pagenum.value = parseInt(page);
-        showPage();
-      }
-
-      function showPage() {
-        let page = parseInt(document.form.pagenum.value);
-        const directory = document.form.directory.value;
-
-        if (page < 1) {
-          document.form.pagenum.value = 1;
-          page = 1;
-        } else if (directory === COMANCHE055 && page > COMANCHE055_PAGES) {
-          document.form.pagenum.value = COMANCHE055_PAGES;
-          page = COMANCHE055_PAGES;
-        } else if (directory === LUMINARY099 && page > LUMINARY099_PAGES) {
-          document.form.pagenum.value = LUMINARY099_PAGES;
-          page = LUMINARY099_PAGES;
-        }
-
-        const formattedPage = page.toString().padStart(4, "0");
-        const imageURL = `https://www.ibiblio.org/apollo/ScansForConversion/${directory}/${formattedPage}.jpg`;
-        document.image.src = imageURL;
-        document.body.style.cursor = "progress";
-      }
-    </script>
-    <style>
-      body {
-        margin: 1rem;
-      }
-      form {
-        margin-bottom: 1rem;
-      }
-      img {
-        min-width: 100%;
-        height: auto;
-      }
-      select,
-      input {
-        cursor: pointer;
-      }
-      span {
-        margin-left: 1rem;
-        vertical-align: middle;
-      }
-    </style>
-  </head>
-  <body onLoad="showPage()">
-    <form name="form" onSubmit="return false">
-      <select name="directory" onChange="changeDir()">
-        <option>Comanche055</option>
-        <option>Luminary099</option>
-      </select>
-      <input type="button" onClick="showFirst()" value="First" />
-      <input type="button" onClick="showPrevious()" value="Previous" />
-      <input
-        type="text"
-        name="pagenum"
-        onChange="changePage(this.value)"
-        size="5"
-        maxlength="4"
-        value="1"
-      />
-      <input type="button" onClick="showNext()" value="Next" />
-      <input type="button" onClick="showLast()" value="Last" />
-      <span>
-        Images hosted by
-        <a href="https://www.ibiblio.org/apollo">Ibiblio</a>
-        and the Virtual AGC project
-      </span>
-    </form>
    <img
      name="image"
-      onLoad="this.title=this.src;document.body.style.cursor='default'"
+      onload="this.title=this.src;document.body.style.cursor='default'"
      width="1314"
      height="1000"
+      src="https://www.ibiblio.org/apollo/ScansForConversion/Comanche055/0002.jpg"
+      title="https://www.ibiblio.org/apollo/ScansForConversion/Comanche055/0002.jpg"
    />
+    <script
+      crossorigin=""
+      type="text/javascript"
+      src="https://codesandbox.io/static/js/watermark-button.ccc763f75.js"
+    ></script>
+
+    <iframe
+      id="sb__open-sandbox20"
+      style="
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 16px;
+        right: 16px;
+        border: none;
+        width: 118px;
+        height: 36px;
+        z-index: 9999999999999;
+      "
+    ></iframe>
  </body>
 </html>
--- a/js/darkmode.js
+++ b/js/darkmode.js
@ -0,0 +1,36 @@
+const darkBG = "#141414";
+const darkLink = "#ff1c5c";
+const darkText = "Dark Mode";
+const darkColor = "black";
+
+const lightBG = "white";
+const lightLink = "#9e1bd6";
+const lightText = "Light Mode";
+const lightColor = "white";
+
+darkMode = false;
+
+function lightDark(s) {
+  let root = document.documentElement;
+  document.querySelector("img").classList.toggle("invert");
+  document.querySelector("button").classList.toggle("hover");
+  document.querySelector("form select").classList.toggle("hover");
+  document
+    .querySelectorAll("form input")
+    .forEach((e) => e.classList.toggle("hover"));
+  document.querySelector("form input[type='text']").classList.toggle("white");
+  document.querySelector("form span").classList.toggle("muted-color");
+  if (!darkMode) {
+    darkMode = true;
+    s.innerText = lightText;
+    root.style.setProperty("--link-color", darkLink);
+    root.style.setProperty("--bg-color", darkBG);
+  } else {
+    darkMode = false;
+    s.innerText = darkText;
+    root.style.setProperty("--link-color", lightLink);
+    root.style.setProperty("--bg-color", lightBG);
+  }
+
+  console.log(darkMode);
+}
--- a/js/index.js
+++ b/js/index.js
@ -0,0 +1,62 @@
+const COMANCHE055 = "Comanche055";
+const LUMINARY099 = "Luminary099";
+const COMANCHE055_PAGES = 1751;
+const LUMINARY099_PAGES = 1743;
+
+function changeDir() {
+  showPage();
+}
+
+function showFirst() {
+  changePage(1);
+}
+
+function showLast() {
+  const directory = document.form.directory.value;
+  if (directory === COMANCHE055) changePage(COMANCHE055_PAGES);
+  else if (directory === LUMINARY099) changePage(LUMINARY099_PAGES);
+}
+
+function showPrevious() {
+  const newpage = parseInt(document.form.pagenum.value) - 1;
+  if (newpage >= 1) {
+    changePage(newpage);
+  }
+}
+
+function showNext() {
+  const newpage = parseInt(document.form.pagenum.value) + 1;
+  const directory = document.form.directory.value;
+  if (
+    (directory === COMANCHE055 && newpage <= COMANCHE055_PAGES) ||
+    (directory === LUMINARY099 && newpage <= LUMINARY099_PAGES)
+  ) {
+    changePage(newpage);
+  }
+}
+
+function changePage(page) {
+  document.form.pagenum.value = parseInt(page);
+  showPage();
+}
+
+function showPage() {
+  let page = parseInt(document.form.pagenum.value);
+  const directory = document.form.directory.value;
+
+  if (page < 1) {
+    document.form.pagenum.value = 1;
+    page = 1;
+  } else if (directory === COMANCHE055 && page > COMANCHE055_PAGES) {
+    document.form.pagenum.value = COMANCHE055_PAGES;
+    page = COMANCHE055_PAGES;
+  } else if (directory === LUMINARY099 && page > LUMINARY099_PAGES) {
+    document.form.pagenum.value = LUMINARY099_PAGES;
+    page = LUMINARY099_PAGES;
+  }
+
+  const formattedPage = page.toString().padStart(4, "0");
+  const imageURL = `https://www.ibiblio.org/apollo/ScansForConversion/${directory}/${formattedPage}.jpg`;
+  document.image.src = imageURL;
+  document.body.style.cursor = "progress";
+}
--- a/scss/main.scss
+++ b/scss/main.scss
@ -0,0 +1,122 @@
+:root {
+  --accent-color: #e3e3e39a;
+  --link-color: #9e1bd6;
+  --bg-color: white;
+}
+
+a {
+  color: var(--link-color, #9e1bd6);
+}
+
+body {
+  margin: 1rem;
+  font-size: 16px;
+  font-family: "IBM Plex Mono", monospace;
+  background-color: var(--bg-color, white);
+}
+
+.header {
+  margin-bottom: -0.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+}
+
+button {
+  font: inherit;
+  appearance: none;
+  padding: 10px;
+  height: min-content;
+  background-color: var(--accent-color, #e3e3e39a);
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+form {
+  font-family: "IBM Plex Mono", monospace;
+
+  & select {
+    font-family: "IBM Plex Mono", monospace;
+    font-size: inherit;
+    appearance: none;
+    padding: 10px;
+    padding-right: 30px;
+    background-color: var(--accent-color, #e3e3e39a);
+    border: none;
+    border-radius: 5px;
+    line-height: 1;
+    background: url("../assets/bx-chevron-down.svg") no-repeat right
+      var(--accent-color, #e3e3e39a);
+    -webkit-appearance: none;
+    background-position: 97%;
+    margin-right: 10px;
+    margin-bottom: 1rem;
+  }
+
+  & input {
+    font-family: "IBM Plex Mono", monospace;
+    padding: 10px;
+    background-color: var(--accent-color, #e3e3e39a);
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    line-height: 1;
+    margin-bottom: 1rem;
+
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+
+    &[type="button"] {
+      min-width: 80px;
+    }
+
+    &[type="text"] {
+      text-align: center;
+      font-weight: 500;
+      min-width: 160px;
+      border: var(--accent-color, #e3e3e39a) solid 2px;
+      background: transparent;
+      cursor: text;
+      &:active,
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+img {
+  min-width: 100%;
+  height: auto;
+}
+
+.invert {
+  filter: invert(100%) contrast(120%);
+}
+
+select,
+input {
+  cursor: pointer;
+}
+
+span {
+  font-weight: 500;
+  margin-left: 1rem;
+  vertical-align: middle;
+}
+
+.hover {
+  &:hover {
+    background-color: #fff;
+  }
+}
+
+.muted-color {
+  color: var(--accent-color);
+}
+
+.white {
+  color: white;
+}
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.293 9.293L12 13.586 7.707 9.293 6.293 10.707 12 16.414 17.707 10.707z"/></svg>`