From 01ad54a5b7c7191e2fc39fa8172f38ce2bb3418a Mon Sep 17 00:00:00 2001 From: Dhruv <51574716+Illusion47586@users.noreply.github.com> Date: Tue, 31 Dec 2024 00:37:16 +0530 Subject: [PATCH] added Dark mode to website and styled it up a little (#778) * added dark mode * added css and js files --- assets/bx-chevron-down.svg | 1 + css/main.css | 131 ++++++++++++++++++++++++++ css/main.css.map | 9 ++ index.html | 182 +++++++++++++++---------------------- js/darkmode.js | 36 ++++++++ js/index.js | 62 +++++++++++++ scss/main.scss | 122 +++++++++++++++++++++++++ 7 files changed, 432 insertions(+), 111 deletions(-) create mode 100644 assets/bx-chevron-down.svg create mode 100644 css/main.css create mode 100644 css/main.css.map create mode 100644 js/darkmode.js create mode 100644 js/index.js create mode 100644 scss/main.scss diff --git a/assets/bx-chevron-down.svg b/assets/bx-chevron-down.svg new file mode 100644 index 0000000..44d9156 --- /dev/null +++ b/assets/bx-chevron-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..7355967 --- /dev/null +++ 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 */ \ No newline at end of file diff --git a/css/main.css.map b/css/main.css.map new file mode 100644 index 0000000..b49e3c9 --- /dev/null +++ b/css/main.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "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", + "sources": [ + "../scss/main.scss" + ], + "names": [], + "file": "main.css" +} \ No newline at end of file diff --git a/index.html b/index.html index b78bed1..37d822d 100644 --- a/index.html +++ b/index.html @@ -1,125 +1,85 @@ - - + + AGC scans viewer - + + + + +
+
+ + + + + + + + Images hosted by + Ibiblio and the Virtual + AGC project + +
+ + +
- 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"; - } - - - - -
- - - - - - - - Images hosted by - Ibiblio - and the Virtual AGC project - -
+ + + diff --git a/js/darkmode.js b/js/darkmode.js new file mode 100644 index 0000000..0185523 --- /dev/null +++ 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); +} diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..5d25bcd --- /dev/null +++ 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"; +} diff --git a/scss/main.scss b/scss/main.scss new file mode 100644 index 0000000..fd27c03 --- /dev/null +++ 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; +}