From b5058eb7ff8c110bc24a64d02bc42e0a9dc267f5 Mon Sep 17 00:00:00 2001 From: Marvin Borner Date: Fri, 29 Jan 2021 21:14:36 +0100 Subject: It's no secret that our code is a mess --- secrets/public/index.html | 44 ++++++++++++++++++++++++++ secrets/public/script.js | 27 ++++++++++++++++ secrets/public/style.css | 78 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 149 insertions(+) create mode 100644 secrets/public/index.html create mode 100644 secrets/public/script.js create mode 100644 secrets/public/style.css (limited to 'secrets/public') 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 @@ + + + + + + + + + Zitate + + +
+ Home + Logout +
+ +
+
+
+ Es ist kein Geheimnis, dass... + + +
+
+ +

Es ist kein Geheimnis, dass...

+ +
+ + + + 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", + `
  • ${elem["secret"]}${ + elem["owner"] ? '

  • ' : "" + }`, + ); + + 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%); + } +} -- cgit v1.2.3