diff options
| author | Marvin Borner | 2021-01-29 21:14:36 +0100 |
|---|---|---|
| committer | Marvin Borner | 2021-01-29 21:14:36 +0100 |
| commit | b5058eb7ff8c110bc24a64d02bc42e0a9dc267f5 (patch) | |
| tree | 44dc8b82fb9f6f254c001b4800f8efc9654b7847 /secrets/public | |
| parent | f9ccf6ed47254edf7c1fb6231212bd4b4d6c8356 (diff) | |
It's no secret that our code is a mess
Diffstat (limited to 'secrets/public')
| -rw-r--r-- | secrets/public/index.html | 44 | ||||
| -rw-r--r-- | secrets/public/script.js | 27 | ||||
| -rw-r--r-- | secrets/public/style.css | 78 |
3 files changed, 149 insertions, 0 deletions
diff --git a/secrets/public/index.html b/secrets/public/index.html new file mode 100644 index 0000000..5aa734d --- /dev/null +++ b/secrets/public/index.html @@ -0,0 +1,44 @@ +<!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> + <div class="pure-menu pure-menu-horizontal"> + <a href="/" class="pure-menu-item pure-menu-link">Home</a> + <a href="/auth/api/logout" class="pure-menu-item pure-menu-link">Logout</a> + </div> + + <main> + <form class="pure-form pure-form-stacked" action="api/add" method="post"> + <fieldset> + <legend>Es ist kein Geheimnis, dass...</legend> + <input + name="secret" + type="text" + id="secret" + placeholder="Kein Geheimnis" + maxlength="255" + required + /> + <button type="submit" class="pure-button pure-button-primary">Hinzufügen</button> + </fieldset> + </form> + + <p>Es ist kein Geheimnis, dass...</p> + <ul id="list"></ul> + </main> + + <script src="script.js" charset="utf-8"></script> + </body> +</html> diff --git a/secrets/public/script.js b/secrets/public/script.js new file mode 100644 index 0000000..881df3a --- /dev/null +++ b/secrets/public/script.js @@ -0,0 +1,27 @@ +const list = document.getElementById("list"); + +function appendsecret(response) { + response.forEach((elem) => { + list.insertAdjacentHTML( + "beforeend", + `<li><span class="text">${elem["secret"]}</span>${ + elem["owner"] ? ' <span class="delete-btn" data-id="' + elem["id"] + '"></span></li><hr>' : "" + }`, + ); + + const span = document.querySelector(`li span[data-id="${elem["id"]}"]`); + if (span) + span.addEventListener("click", (event) => { + if (!confirm("Bist du dir sicher, dass du das Zitat löschen willst?")) return; + fetch("api/delete/" + event.target.getAttribute("data-id"), { method: "DELETE" }) + .then((response) => response.text()) + .then((response) => { + if (response == "ok") event.target.parentNode.remove(); + }); + }); + }); +} + +fetch("api/list") + .then((response) => response.json()) + .then((response) => appendsecret(response)); diff --git a/secrets/public/style.css b/secrets/public/style.css new file mode 100644 index 0000000..8e759da --- /dev/null +++ b/secrets/public/style.css @@ -0,0 +1,78 @@ +html, +body { + padding: 0; + margin: 0; + height: 100%; + width: 100%; + color: #424242; + line-height: 1.6; + background-color: #eec0c6; + background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%); +} + +div { + background: white; +} + +main { + position: absolute; + max-height: calc(100% - 140px); + overflow-y: auto; + width: 50%; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + padding: 20px; + border-radius: 10px; + background: white; +} + +button:not([type="submit"]) { + background-color: #eee; + color: #444; + cursor: pointer; + padding: 18px; + width: 100%; + border: none; + text-align: left; + outline: none; + font-size: 15px; +} + +li { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + vertical-align: top; + margin: 10px 0; +} + +ul { + padding-left: 5px; +} + +span.text { + word-break: break-all; + width: 90%; +} + +span.delete-btn { + cursor: pointer; + background: url("/feather/icons/trash.svg") no-repeat center; + width: 10%; + height: auto; +} + +input, +button, +select { + width: 100%; + color: #424242; +} + +@media only screen and (max-width: 700px) { + main { + width: calc(100% - 20%); + } +} |