neri
/
datatrash
1
0
Fork 1
Code Issues 7 Pull Requests Releases Wiki Activity

update css, fix some a11y issues

This commit is contained in:
neri 2020-08-03 02:41:36 +02:00
parent b553bd621b
commit b0b03f32a4
4 changed files with 29 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
static/index.css
View File

@ -1,10 +1,13 @@
:root {
--fg: #e9e9e9;
}
body { body {
background-color: #222222; background-color: #222222;
margin: 0; margin: 0;
} }
main { main {
color: #dddddd; color: var(--fg);
font-family: sans; font-family: sans;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
@ -13,7 +16,7 @@ main {
h1 > a, h1 > a,
h1 > a:visited { h1 > a:visited {
color: #dddddd; color: var(--fg);
} }
a { a {
@ -25,7 +28,9 @@ a:visited {
} }
label { label {
display: inline-block;
margin-right: 0.25em; margin-right: 0.25em;
margin-bottom: 0.5em;
} }
input, input,
@ -33,9 +38,9 @@ select,
textarea, textarea,
.button { .button {
background-color: #222222; background-color: #222222;
color: #dddddd; color: var(--fg);
padding: 0.5rem; padding: 0.5rem;
border: 2px solid #dddddd; border: 2px solid var(--fg);
border-radius: 5px; border-radius: 5px;
margin-bottom: 1rem; margin-bottom: 1rem;
max-width: calc(100vw - 3rem - 4px); max-width: calc(100vw - 3rem - 4px);
@ -50,7 +55,7 @@ a.button {
} }
a.button:visited { a.button:visited {
color: #dddddd; color: var(--fg);
} }
.button:hover { .button:hover {
@ -58,7 +63,7 @@ a.button:visited {
} }
.button.main { .button.main {
background-color: green; background-color: #007600;
} }
.button.main:hover { .button.main:hover {

15
static/index.html
View File

@ -1,25 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="de-DE">
<head> <head>
<title>datatrash</title> <title>datatrash</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Temporärer Dateiaustausch" />
<link href="/static/index.css" rel="stylesheet" /> <link href="/static/index.css" rel="stylesheet" />
</head> </head>
<body> <body>
<main> <main>
<h1>datatrash</h1> <h1>datatrash</h1>
<form action="/upload" method="POST" enctype="multipart/form-data"> <form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="content" /> <label for="file-upload">datei</label>
<br/>
<input id="file-upload" type="file" name="content" />
<br />
<label for="text-upload">oder asciitrash</label>
<br/> <br/>
<textarea <textarea
id="text-upload"
name="text_content" name="text_content"
placeholder="Oder asciitrash"
rows="20" rows="20"
cols="120" cols="120"
></textarea> ></textarea>
<br /> <br />
<label for="validity_secs">Gültig für</label> <label for="validity_secs">gültig für</label>
<select id="validity_secs" name="validity_secs"> <select id="validity_secs" name="validity_secs">
<option value="1800">30 minuten</option> <option value="1800">30 minuten</option>
<option value="3600">60 minuten</option> <option value="3600">60 minuten</option>
@ -29,7 +34,7 @@
<option value="2678400">1 monat</option> <option value="2678400">1 monat</option>
</select> </select>
<br /> <br />
<input class="main button" type="submit" value="Hochladen" /> <input class="main button" type="submit" value="hochladen" />
</form> </form>
</main> </main>
</body> </body>

4
template/upload.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="de-DE">
<head> <head>
<title>datatrash</title> <title>datatrash</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -10,7 +10,7 @@
<main> <main>
<h1><a href="/">datatrash</a></h1> <h1><a href="/">datatrash</a></h1>
<p> <p>
Datei-Link: datei-link:
<a href="{url}"> <a href="{url}">
{url} {url}
</a> </a>

12
template/view.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="de-DE">
<head> <head>
<title>datatrash</title> <title>datatrash</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -11,22 +11,22 @@
<h1><a href="/">datatrash</a></h1> <h1><a href="/">datatrash</a></h1>
<textarea id="text" rows="20" cols="120" readonly>{text}</textarea> <textarea id="text" rows="20" cols="120" readonly>{text}</textarea>
<br /> <br />
<a class="main button" href="?raw">Herunterladen</a> <a class="main button" href="?raw">herunterladen</a>
<button id="copy" class="button" onclick="copyToClipboard()"> <button id="copy" class="button" onclick="copyToClipboard()">
Text kopieren text kopieren
</button> </button>
</main> </main>
<script lang="javascript"> <script lang="javascript">
function copyToClipboard() { function copyToClipboard() {
const button = document.getElementById("copy"); const button = document.getElementById("copy");
if (!navigator.clipboard) { if (!navigator.clipboard) {
button.innerText = "Nicht unterstützt"; button.innerText = "nicht unterstützt";
return; return;
} }
const textarea = document.getElementById("text"); const textarea = document.getElementById("text");
navigator.clipboard.writeText(textarea.value).then( navigator.clipboard.writeText(textarea.value).then(
_ => { button.innerText = "Kopiert!"; }, _ => { button.innerText = "kopiert!"; },
_ => { button.innerText = "Nicht unterstützt"; }, _ => { button.innerText = "nicht unterstützt"; },
); );
} }
</script> </script>