give feedback to user about wrong links (closes #1)

- Added pattern to input field
- added error-banner in case browser messes up pattern matching.

css/global.css

@@ -2,6 +2,8 @@
     --accent: #2F0C7A;
     --marked: #2F0C7A;
     --markedfg: var(--accent-text);
+    --bannerfg: #ffc400;
+    --bannerbg: #212121;
     --headerbg: rgba(255, 255, 255, .65);
     --headerblend: lighten;
 }
@@ -17,4 +19,13 @@
 
 mark {
     color: var(--markedfg);
+}
+
+banner {
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+    border-radius: var(--standard-border-radius);
+    display: none;
+    background-color: var(--bannerfg);
+    color: var(--bannerbg);
 }

index.html

@@ -20,8 +20,10 @@ <h1 id="topBarText">Unroll Ninja</h1>
   </div>
 
   <form id="urlInputForm" action="javascript:main.unrollButton();">
-    <input type="url" id="posturl" placeholder="Link to Mastodon Thread" />
+    <input type="url" id="posturl" placeholder="Link to Mastodon Thread" pattern="^http(s)*:\/\/.*@.*\/\d*$"
+      title="Required Format: https://mastodon.example.org/@exampleUser/123" />
     <button id="startUnrollButton">Unroll</button>
+    <banner id="underInputBanner"></banner>
   </form>
 
   <div id="explainerText">

js/main.js

@@ -1,6 +1,9 @@
 var main = {
     init: function () {
-
+        //Hide banner in case it's been displayed previously
+        document.getElementById("posturl").onkeydown = function () {
+            document.getElementById("underInputBanner").style.display = "none";
+        };
     },
     unrollButton: function () {
         var postUrl = document.getElementById("posturl").value;
@@ -22,6 +25,13 @@ var main = {
             document.location = "thread?uri=" + encodeURIComponent(serverDomain) + "&id=" + encodeURIComponent(postID);
 
         } else {
+            //Normally this should never show up
+            //Because the browser is supposed to catch this.
+            //But let's better be save then sorry.
+            var banner = document.getElementById("underInputBanner");
+            banner.innerHTML = "The URL is in the wrong format.";
+            banner.style.display = "block";
         }
     }
-};
+};
+main.init();