WIP: Web UI improvements

This commit is contained in:
Philipp Heckel 2021-11-04 10:55:34 -04:00
parent 5948f39a53
commit 644ffa1420
6 changed files with 129 additions and 22 deletions

View file

@ -33,10 +33,9 @@
<h1><img src="static/img/ntfy.png" alt="ntfy"/><br/>ntfy.sh - simple HTTP-based pub-sub</h1>
<p>
<b>ntfy</b> (pronounce: <i>notify</i>) is a simple HTTP-based <a href="https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern">pub-sub</a> notification service.
It allows you to send <b>notifications to your phone or desktop via scripts from any computer</b>, entirely <b>without signup or cost</b>.
It's also <a href="https://github.com/binwiederhier/ntfy">open source</a> if you want to run your own.
It allows you to send notifications <a href="https://play.google.com/store/apps/details?id=io.heckel.ntfy">to your phone</a> or desktop via scripts from any computer,
entirely <b>without signup or cost</b>. It's also <a href="https://github.com/binwiederhier/ntfy">open source</a> if you want to run your own.
</p>
<p id="error"></p>
<h2>Publishing messages</h2>
<p>
@ -65,21 +64,24 @@
<a href="https://developer.mozilla.org/en-US/docs/Web/API/EventSource">EventSource</a>, a JSON feed, or raw feed.
</p>
<h3>Subscribe via web</h3>
<p>
If you subscribe to a topic via this web UI in the field below, messages published to any subscribed topic
will show up as <b>desktop notification</b>.
</p>
<form id="subscribeForm">
<p>
<label for="topicField">Subscribe to topic:</label>
<input type="text" id="topicField" placeholder="Letters, numbers, _ and -" pattern="[-_A-Za-z]{1,64}" />
<input type="submit" id="subscribeButton" value="Subscribe" />
</p>
</form>
<p id="topicsHeader">Topics:</p>
<ul id="topicsList"></ul>
<audio id="notifySound" src="static/sound/mixkit-message-pop-alert-2354.mp3"></audio>
<div id="subscribeBox">
<form id="subscribeForm">
<h3>Subscribe via web</h3>
<p id="error"></p>
<p>
Messages published to topics subscribed here will show up as <b>desktop notification</b>.
Topics are not password-protected, so choose a name that's not easy to guess. Once subscribed, you can
publish messages via PUT/POST.
</p>
<p>
<input type="text" id="topicField" autocomplete="off" placeholder="Topic name, e.g. phil_alerts" pattern="[-_A-Za-z]{1,64}" />
<button id="subscribeButton">Subscribe</button>
</p>
</form>
<p id="topicsHeader"><b>Subscribed topics:</b></p>
<ul id="topicsList"></ul>
<audio id="notifySound" src="static/sound/mixkit-message-pop-alert-2354.mp3"></audio>
</div>
<h3>Subscribe via phone</h3>
<p>