Make things prettier, better sound, FAQ, icon in desktop notification

server/static/css/app.css

@@ -20,6 +20,7 @@ h1 {
     font-size: 2.5em;
 }
 
+
 h2 {
     margin-top: 20px;
     margin-bottom: 5px;
@@ -33,8 +34,10 @@ h3 {
 }
 
 p {
-    margin-top: 0;
+    margin-top: 10px;
+    margin-bottom: 20px;
     font-size: 1.1em;
+    line-height: 140%;
 }
 
 tt {
@@ -49,6 +52,8 @@ code {
     font-family: monospace;
     padding: 20px;
     border-radius: 3px;
+    margin-top: 10px;
+    margin-bottom: 10px;
 }
 
 /* Lato font (OFL), https://fonts.google.com/specimen/Lato#about,
@@ -74,3 +79,7 @@ code {
     color: darkred;
     font-style: italic;
 }
+
+#ironicCenterTagDontFreakOut {
+    color: #666;
+}

server/static/js/app.js

@@ -59,8 +59,11 @@ const subscribeInternal = (topic, delaySec) => {
         };
         eventSource.onmessage = (e) => {
             const event = JSON.parse(e.data);
-            new Notification(event.message);
             notifySound.play();
+            new Notification(topic, {
+                body: event.message,
+                icon: '/static/img/favicon.png'
+            });
         };
         topics[topic] = eventSource;
         localStorage.setItem('topics', JSON.stringify(Object.keys(topics)));
@@ -80,7 +83,7 @@ const unsubscribe = (topic) => {
 const test = (topic) => {
     fetch(`/${topic}`, {
         method: 'PUT',
-        body: `This is a test notification for topic ${topic}!`
+        body: `This is a test notification`
     })
 };