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

182
index.html
View File

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