From 644ffa1420b6d03dcf300cc080e7bcb9548ba5bb Mon Sep 17 00:00:00 2001 From: Philipp Heckel Date: Thu, 4 Nov 2021 10:55:34 -0400 Subject: [PATCH] WIP: Web UI improvements --- server/index.html | 38 ++++----- server/static/css/app.css | 102 ++++++++++++++++++++++++ server/static/img/clear_black_24dp.svg | 1 + server/static/img/delete_black_24dp.svg | 1 + server/static/img/send_black_24dp.svg | 1 + server/static/js/app.js | 8 +- 6 files changed, 129 insertions(+), 22 deletions(-) create mode 100644 server/static/img/clear_black_24dp.svg create mode 100644 server/static/img/delete_black_24dp.svg create mode 100644 server/static/img/send_black_24dp.svg diff --git a/server/index.html b/server/index.html index 45531dfb..3cbef71f 100644 --- a/server/index.html +++ b/server/index.html @@ -33,10 +33,9 @@

ntfy
ntfy.sh - simple HTTP-based pub-sub

ntfy (pronounce: notify) is a simple HTTP-based pub-sub notification service. - It allows you to send notifications to your phone or desktop via scripts from any computer, entirely without signup or cost. - It's also open source if you want to run your own. + It allows you to send notifications to your phone or desktop via scripts from any computer, + entirely without signup or cost. It's also open source if you want to run your own.

-

Publishing messages

@@ -65,21 +64,24 @@ EventSource, a JSON feed, or raw feed.

-

Subscribe via web

-

- If you subscribe to a topic via this web UI in the field below, messages published to any subscribed topic - will show up as desktop notification. -

-
-

- - - -

-
-

Topics:

- - +
+
+

Subscribe via web

+

+

+ Messages published to topics subscribed here will show up as desktop notification. + Topics are not password-protected, so choose a name that's not easy to guess. Once subscribed, you can + publish messages via PUT/POST. +

+

+ + +

+
+

Subscribed topics:

+ + +

Subscribe via phone

diff --git a/server/static/css/app.css b/server/static/css/app.css index f171f4fb..cc9a67b9 100644 --- a/server/static/css/app.css +++ b/server/static/css/app.css @@ -60,6 +60,7 @@ code { margin-bottom: 20px; } + /* Lato font (OFL), https://fonts.google.com/specimen/Lato#about, embedded with the help of https://google-webfonts-helper.herokuapp.com/fonts/lato?subsets=latin */ @@ -87,3 +88,104 @@ code { #ironicCenterTagDontFreakOut { color: #666; } + +/* Subscribe box */ + +button { + background: #3a9784; + border: none; + border-radius: 3px; + padding: 3px 5px; + color: white; + cursor: pointer; +} + +button:hover { + background: #317f6f; + padding: 5px; +} + +ul { + padding-left: 1em; + list-style-type: none; + padding-bottom: 0; + margin: 0; +} + +li { + padding: 4px 0; + margin: 4px 0; + font-size: 0.9em; +} + +@media only screen and (min-width: 1600px) { + #subscribeBox { + position: fixed; + top: 180px; + right: 10px; + width: 300px; + border-left: 4px solid #3a9784; + padding: 10px; + } + + #subscribeBox h3 { + margin-top: 0; + margin-bottom: 5px; + font-size: 1.1em; + } + + #subscribeBox #topicsHeader { + margin-bottom: 0; + } + + #subscribeBox p { + font-size: 0.9em; + margin-bottom: 10px; + } + + #subscribeBox ul { + margin: 0; + padding: 0; + } + + #subscribeBox input { + height: 18px; + border-radius: 3px; + border: none; + border-bottom: 1px solid #aaa; + } + + #subscribeBox input:focus { + border-bottom: 2px solid #3a9784; + outline: none; + } + + #subscribeBox li { + margin: 3px 0; + padding: 0; + } + + #subscribeBox li img { + width: 15px; + height: 15px; + vertical-align: bottom; + } + + #subscribeBox button { + font-size: 0.7em; + background: #3a9784; + border-radius: 3px; + padding: 3px 5px; + color: white; + cursor: pointer; + border-top: solid transparent 2px; + border-bottom: solid transparent 2px; + } + + #subscribeBox button:hover { + background: #317f6f; + } + +} + + diff --git a/server/static/img/clear_black_24dp.svg b/server/static/img/clear_black_24dp.svg new file mode 100644 index 00000000..b2ddadb4 --- /dev/null +++ b/server/static/img/clear_black_24dp.svg @@ -0,0 +1 @@ + diff --git a/server/static/img/delete_black_24dp.svg b/server/static/img/delete_black_24dp.svg new file mode 100644 index 00000000..58c6697d --- /dev/null +++ b/server/static/img/delete_black_24dp.svg @@ -0,0 +1 @@ + diff --git a/server/static/img/send_black_24dp.svg b/server/static/img/send_black_24dp.svg new file mode 100644 index 00000000..36d0c895 --- /dev/null +++ b/server/static/img/send_black_24dp.svg @@ -0,0 +1 @@ + diff --git a/server/static/js/app.js b/server/static/js/app.js index b1b78a56..24d4f5d0 100644 --- a/server/static/js/app.js +++ b/server/static/js/app.js @@ -40,7 +40,7 @@ const subscribeInternal = (topic, delaySec) => { if (!topicEntry) { topicEntry = document.createElement('li'); topicEntry.id = `topic-${topic}`; - topicEntry.innerHTML = `${topic} `; + topicEntry.innerHTML = `${topic} `; topicsList.appendChild(topicEntry); } topicsHeader.style.display = ''; @@ -48,7 +48,7 @@ const subscribeInternal = (topic, delaySec) => { // Open event source let eventSource = new EventSource(`${topic}/sse`); eventSource.onopen = () => { - topicEntry.innerHTML = `${topic} `; + topicEntry.innerHTML = `${topic} `; delaySec = 0; // Reset on successful connection }; eventSource.onerror = (e) => { @@ -83,7 +83,7 @@ const unsubscribe = (topic) => { const test = (topic) => { fetch(`/${topic}`, { method: 'PUT', - body: `This is a test notification` + body: `This is a test notification sent from the Ntfy Web UI. It was sent at ${new Date().toString()}.` }) }; @@ -101,7 +101,7 @@ const showNotificationDeniedError = () => { showError("You have blocked desktop notifications for this website. Please unblock them and refresh to use the web-based desktop notifications."); }; -subscribeForm.onsubmit = function () { +subscribeButton.onclick = function () { if (!topicField.value) { return false; }