3 files changed, 91 insertions, 0 deletions
diff --git a/quotes/public/index.html b/quotes/public/index.html
new file mode 100644
index 0000000..abe85cc
--- /dev/null
+++ b/quotes/public/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link
+            rel="stylesheet"
+            href="https://unpkg.com/purecss@2.0.3/build/pure-min.css"
+            integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ"
+            crossorigin="anonymous"
+        />
+        <link rel="stylesheet" href="style.css" type="text/css" media="all" />
+
+        <title>Zitate</title>
+    </head>
+    <body>
+        <form class="pure-form pure-form-stacked" action="api/submit" method="post">
+            <fieldset>
+                <legend>Zitate</legend>
+                <label for="author">Author</label>
+                <select name="author" id="author"></select>
+                <label for="quote">Zitat</label>
+                <input name="quote" type="text" id="quote" placeholder="Zitat" />
+                <button type="submit" class="pure-button pure-button-primary">Hinzufügen</button>
+            </fieldset>
+        </form>
+
+        <script src="script.js" charset="utf-8"></script>
+    </body>
+</html>
diff --git a/quotes/public/script.js b/quotes/public/script.js
new file mode 100644
index 0000000..3fbc676
--- /dev/null
+++ b/quotes/public/script.js
@@ -0,0 +1,28 @@
+const dropdown = document.getElementById("author");
+
+dropdown.insertAdjacentHTML("beforeend", '<option selected="true" disabled>Author auswählen...</option>');
+
+function append(response) {
+    response.forEach((elem) => {
+        dropdown.insertAdjacentHTML(
+            "beforeend",
+            `<option ${elem["id"]}>${elem["name"]} ${elem["middlename"] ? elem["middlename"] : " "}${
+                elem["surname"]
+            }</option>`
+        );
+    });
+}
+
+// TODO: Add api list endpoint
+// fetch("/auth/api/list")
+//     .then((response) => response.json())
+//     .then((response) => append(response));
+
+const exampleJson = [
+    { id: 1, name: "Lars", middlename: null, surname: "Baum" },
+    { id: 2, name: "Marvin", middlename: null, surname: "Giraffe" },
+    { id: 3, name: "Dominik", middlename: null, surname: "Apfel" },
+    { id: 4, name: "Daniel", middlename: null, surname: "Torte" },
+];
+
+append(exampleJson);
diff --git a/quotes/public/style.css b/quotes/public/style.css
new file mode 100644
index 0000000..6ab5ef0
--- /dev/null
+++ b/quotes/public/style.css
@@ -0,0 +1,33 @@
+html,
+body {
+    padding: 0;
+    margin: 0;
+    height: 100%;
+    width: 100%;
+    background: url(https://images.unsplash.com/photo-1544829728-e5cb9eedc20e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);
+    background-size: cover;
+}
+
+form {
+    position: absolute;
+    width: 30%;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    padding: 20px;
+    border-radius: 10px;
+    background: white;
+}
+
+input,
+button,
+select {
+    width: 100%;
+}
+
+@media only screen and (max-width: 600px) {
+    form {
+        width: calc(100% - 50px);
+    }
+}