mirror of
https://github.com/c9fe/22120.git
synced 2024-10-28 06:32:28 +01:00
110 lines
2.5 KiB
HTML
110 lines
2.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<meta charset=utf-8>
|
||
|
|
<title>Your HTML Library</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
font-family: sans-serif;
|
||
|
|
background: lavenderblush;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
display: table;
|
||
|
|
margin: 0 auto;
|
||
|
|
background: silver;
|
||
|
|
padding: 0.5em;
|
||
|
|
box-shadow: 0 1px 1px purple;
|
||
|
|
}
|
||
|
|
form {
|
||
|
|
}
|
||
|
|
fieldset {
|
||
|
|
border: thin solid purple;
|
||
|
|
}
|
||
|
|
button, input, output {
|
||
|
|
}
|
||
|
|
input.long {
|
||
|
|
width: 100%;
|
||
|
|
min-width: 250px;
|
||
|
|
}
|
||
|
|
output {
|
||
|
|
font-size: smaller;
|
||
|
|
color: purple;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
h2 {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<h1>22120</h1>
|
||
|
|
<h2>Internet Offline Library</h2>
|
||
|
|
<p>
|
||
|
|
View <a href=/archive_index.html>the index</a>
|
||
|
|
</p>
|
||
|
|
<form method=GET action=/search>
|
||
|
|
<fieldset>
|
||
|
|
<legend>Search your archive</legend>
|
||
|
|
<input type=search name=query placeholder="search your library">
|
||
|
|
<button>Search</button>
|
||
|
|
</fieldset>
|
||
|
|
</form>
|
||
|
|
<form method=POST action=/mode>
|
||
|
|
<fieldset>
|
||
|
|
<legend>Save or Serve: Mode Control</legend>
|
||
|
|
<p>
|
||
|
|
<label>
|
||
|
|
<input type=radio name=mode value=save>
|
||
|
|
Save
|
||
|
|
</label>
|
||
|
|
<label>
|
||
|
|
<input type=radio name=mode value=serve>
|
||
|
|
Serve
|
||
|
|
</label>
|
||
|
|
<output name=notification>
|
||
|
|
<p>
|
||
|
|
<button>Change mode</button>
|
||
|
|
<script>
|
||
|
|
{
|
||
|
|
const form = document.currentScript.closest('form');
|
||
|
|
form.notification.value = "Getting current mode...";
|
||
|
|
setTimeout(showCurrentMode, 1000);
|
||
|
|
|
||
|
|
async function showCurrentMode() {
|
||
|
|
const mode = await fetch('/mode').then(r => r.text());
|
||
|
|
form.notification.value = "";
|
||
|
|
form.querySelector(`[name="mode"][value="${mode}"]`).checked = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</fieldset>
|
||
|
|
</form>
|
||
|
|
<form method=POST action=/base_path>
|
||
|
|
<fieldset>
|
||
|
|
<legend>File system path of archive</legend>
|
||
|
|
<p>
|
||
|
|
Set the path to where your archive folder will go
|
||
|
|
<br>
|
||
|
|
<small>The default is your home directory</small>
|
||
|
|
<p>
|
||
|
|
<label>
|
||
|
|
Base path
|
||
|
|
<input class=long type=text name=base_path placeholder="A folder path...">
|
||
|
|
</label>
|
||
|
|
<p>
|
||
|
|
<button>Change base path</button>
|
||
|
|
<script>
|
||
|
|
{
|
||
|
|
const form = document.currentScript.closest('form');
|
||
|
|
showCurrentLibraryPath();
|
||
|
|
|
||
|
|
form.base_path.onchange = e => {
|
||
|
|
self.target = e.target;
|
||
|
|
}
|
||
|
|
async function showCurrentLibraryPath() {
|
||
|
|
const base_path = await fetch('/base_path').then(r => r.text());
|
||
|
|
form.querySelector(`[name="base_path"]`).value = base_path;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</fieldset>
|
||
|
|
</form>
|