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

View File

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

View File

@ -1,25 +1,30 @@
<!DOCTYPE html>
<html>
<html lang="de-DE">
<head>
<title>datatrash</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Temporärer Dateiaustausch" />
<link href="/static/index.css" rel="stylesheet" />
</head>
<body>
<main>
<h1>datatrash</h1>
<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/>
<textarea
id="text-upload"
name="text_content"
placeholder="Oder asciitrash"
rows="20"
cols="120"
></textarea>
<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">
<option value="1800">30 minuten</option>
<option value="3600">60 minuten</option>
@ -29,7 +34,7 @@
<option value="2678400">1 monat</option>
</select>
<br />
<input class="main button" type="submit" value="Hochladen" />
<input class="main button" type="submit" value="hochladen" />
</form>
</main>
</body>

View File

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

View File

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