diff --git a/css/global.css b/css/global.css index 47e7a34..364301d 100644 --- a/css/global.css +++ b/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); } \ No newline at end of file diff --git a/index.html b/index.html index 7b0c44f..8b1a197 100644 --- a/index.html +++ b/index.html @@ -20,8 +20,10 @@

Unroll Ninja

- + +
diff --git a/js/main.js b/js/main.js index 4982d4e..c17787b 100644 --- a/js/main.js +++ b/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"; } } -}; \ No newline at end of file +}; +main.init(); \ No newline at end of file