forked from neri/datatrash
update css, fix some a11y issues
This commit is contained in:
parent
b553bd621b
commit
b0b03f32a4
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue