From b0b03f32a4725eed8d253ac2ac2008d79c8a9c59 Mon Sep 17 00:00:00 2001
From: neri <neri@ctdo.de>
Date: Mon, 3 Aug 2020 02:41:36 +0200
Subject: [PATCH] update css, fix some a11y issues

---
 static/index.css     | 17 +++++++++++------
 static/index.html    | 15 ++++++++++-----
 template/upload.html |  4 ++--
 template/view.html   | 12 ++++++------
 4 files changed, 29 insertions(+), 19 deletions(-)
diff --git a/static/index.css b/static/index.css
index 0923a96..d8818bb 100644
--- a/static/index.css
+++ b/static/index.css
@@ -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 {
diff --git a/static/index.html b/static/index.html
index ce2e145..1f9428f 100644
--- a/static/index.html
+++ b/static/index.html
@@ -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>
diff --git a/template/upload.html b/template/upload.html
index ff1c2a7..12aef04 100644
--- a/template/upload.html
+++ b/template/upload.html
@@ -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>
diff --git a/template/view.html b/template/view.html
index 0deb0a0..2ec3fe3 100644
--- a/template/view.html
+++ b/template/view.html
@@ -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>
