ryan/Apollo-11
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* added dark mode

* added css and js files
This commit is contained in:
Dhruv
2024-12-31 00:37:16 +05:30
committed by GitHub
parent 4f51f408a1
commit 01ad54a5b7
7 changed files with 432 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/bx-chevron-down.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 174 B

131
css/main.css Normal file
View File

@@ -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 */

9
css/main.css.map Normal file
View File

@@ -0,0 +1,9 @@
{
"version": 3,
"mappings": "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",
"sources": [
"../scss/main.scss"
],
"names": [],
"file": "main.css"
}

156
index.html
View File

@@ -1,125 +1,85 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<script
type="text/javascript"
src="https://codesandbox.io/public/sse-hooks/sse-hooks.js"
></script>
<title>AGC scans viewer</title> <title>AGC scans viewer</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script> <script src="js/index.js"></script>
const COMANCHE055 = "Comanche055"; <link
const LUMINARY099 = "Luminary099"; href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap"
const COMANCHE055_PAGES = 1751; rel="stylesheet"
const LUMINARY099_PAGES = 1743; />
<link
function changeDir() { href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css"
showPage(); rel="stylesheet"
} />
<link rel="stylesheet" href="css/main.css" /></head
function showFirst() { ><span id="warning-container"><i data-reactroot=""></i></span>
changePage(1); <body
} onload="showPage()"
data-new-gr-c-s-check-loaded="14.973.0"
function showLast() { style="cursor: default"
const directory = document.form.directory.value; >
if (directory === COMANCHE055) changePage(COMANCHE055_PAGES); <div class="header">
else if (directory === LUMINARY099) changePage(LUMINARY099_PAGES); <form name="form" onsubmit="return false" id="form">
} <select name="directory" onchange="changeDir()">
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>Comanche055</option>
<option>Luminary099</option> <option>Luminary099</option>
</select> </select>
<input type="button" onClick="showFirst()" value="First" /> <input type="button" onclick="showFirst()" value="First" />
<input type="button" onClick="showPrevious()" value="Previous" /> <input type="button" onclick="showPrevious()" value="Previous" />
<input <input
type="text" type="text"
name="pagenum" name="pagenum"
onChange="changePage(this.value)" onchange="changePage(this.value)"
size="5" size="5"
maxlength="4" maxlength="4"
value="1" value="1"
/> />
<input type="button" onClick="showNext()" value="Next" /> <input type="button" onclick="showNext()" value="Next" />
<input type="button" onClick="showLast()" value="Last" /> <input type="button" onclick="showLast()" value="Last" />
<span> <span>
Images hosted by Images hosted by
<a href="https://www.ibiblio.org/apollo">Ibiblio</a> <a href="https://www.ibiblio.org/apollo">Ibiblio</a> and the Virtual
and the Virtual AGC project AGC project
</span> </span>
</form> </form>
<script src="js/darkmode.js"></script>
<button id="switch" onclick="lightDark(this)">Dark Mode</button>
</div>
<img <img
name="image" name="image"
onLoad="this.title=this.src;document.body.style.cursor='default'" onload="this.title=this.src;document.body.style.cursor='default'"
width="1314" width="1314"
height="1000" 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> </body>
</html> </html>

36
js/darkmode.js Normal file
View File

@@ -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);
}

62
js/index.js Normal file
View File

@@ -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";
}

122
scss/main.scss Normal file
View File

@@ -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;
}