From 2abe8b8b35a043df48b93f752c3e9c78559d8677 Mon Sep 17 00:00:00 2001 From: thetek42 Date: Sat, 3 Apr 2021 12:41:32 +0200 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=92=AB=20loading=20animation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/raw/index.js | 8 ++++++++ ui/raw/index.pug | 3 +++ ui/raw/index.sass | 22 ++++++++++++++++++++++ 3 files changed, 33 insertions(+) diff --git a/ui/raw/index.js b/ui/raw/index.js index 0c4e962..3560bd9 100644 --- a/ui/raw/index.js +++ b/ui/raw/index.js @@ -1,4 +1,8 @@ function dnswatch_search() { + // activate spinner + document.getElementById('loadani').style.visibility = 'visible'; + document.getElementById('loadani').style.display = 'block'; + // get domain var domain = document.getElementById('dnswatch-search').value.toLowerCase(); @@ -89,6 +93,10 @@ function dnswatch_search() { document.getElementById('results').innerHTML = table; feather.replace(); } + + // deactivate spinner + document.getElementById('loadani').style.visibility = 'hidden'; + document.getElementById('loadani').style.display = 'none'; } request.send(`domain=${ window.btoa(domain) }`); diff --git a/ui/raw/index.pug b/ui/raw/index.pug index 75b6303..682afa2 100644 --- a/ui/raw/index.pug +++ b/ui/raw/index.pug @@ -12,5 +12,8 @@ button#dnswatch-search-submit: i( data-feather='search' ) button#help: i( data-feather='help-circle' ) small Try "gnu.org", "wikipedia.com", "s.to" or your own website! + #loadani + #spinner + span loading... #results diff --git a/ui/raw/index.sass b/ui/raw/index.sass index a8ab05f..da194e2 100644 --- a/ui/raw/index.sass +++ b/ui/raw/index.sass @@ -95,6 +95,22 @@ input, button margin-top: 1rem color: darken($c-fg, 30%) + #loadani + display: none + margin-top: 1rem + visibility: hidden + #spinner + animation: 1s linear infinite spinner + border: 2px solid transparent + border-bottom: 2px solid $c-blue + border-radius: .5rem + display: inline-block + height: 1rem + width: 1rem + span + color: $c-blue + margin-left: .5rem + #results table margin-left: 25vw @@ -142,3 +158,9 @@ input, button height: 1.2rem vertical-align: -.2rem width: 1.2rem + +@keyframes spinner + 0% + transform: rotate(0deg) + 100% + transform: rotate(360deg) -- 2.30.2 From 03ad7ad1b1bf6b991786d9bf12a0feab88798048 Mon Sep 17 00:00:00 2001 From: thetek42 Date: Sat, 3 Apr 2021 12:42:10 +0200 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=93=A6=20compile=20vanilla=20html/css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/html/index.css | 27 +++++++++++++++++++++++++++ ui/html/index.css.map | 2 +- ui/html/index.html | 2 +- ui/html/index.js | 8 ++++++++ 4 files changed, 37 insertions(+), 2 deletions(-) diff --git a/ui/html/index.css b/ui/html/index.css index 72931dd..a091ac3 100644 --- a/ui/html/index.css +++ b/ui/html/index.css @@ -101,6 +101,24 @@ input, button { margin-top: 1rem; color: #7c889c; } +#search #loadani { + display: none; + margin-top: 1rem; + visibility: hidden; +} +#search #loadani #spinner { + animation: 1s linear infinite spinner; + border: 2px solid transparent; + border-bottom: 2px solid #61afef; + border-radius: 0.5rem; + display: inline-block; + height: 1rem; + width: 1rem; +} +#search #loadani span { + color: #61afef; + margin-left: 0.5rem; +} #results table { margin-left: 25vw; @@ -164,4 +182,13 @@ input, button { width: 1.2rem; } +@keyframes spinner { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + /*# sourceMappingURL=index.css.map */ diff --git a/ui/html/index.css.map b/ui/html/index.css.map index 70e9bfb..6f9d86a 100644 --- a/ui/html/index.css.map +++ b/ui/html/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AASA;EACC;;;AAED;EACC,kBAZS;EAaT,OAXS;EAYT,aATS;EAUT;EACA;EACA;;;AAED;EACC,aAfS;;;AAiBV;EACC;EACA;EACA;;AACA;EACC,kBA3BQ;EA4BR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;;AAEF;EACC;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OAxDO;EAyDP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OA/EK;;AAgFP;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAvGK;;AAwGN;EACC,OAxGK;;AAyGN;EACC,OA7GK;;AA8GP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OApHK;;AAqHN;EACC,OAzHK;;AA0HP;EACC;EACA;;AACA;EACC,kBA/HK;EAgIL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AASA;EACC;;;AAED;EACC,kBAZS;EAaT,OAXS;EAYT,aATS;EAUT;EACA;EACA;;;AAED;EACC,aAfS;;;AAiBV;EACC;EACA;EACA;;AACA;EACC,kBA3BQ;EA4BR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;;AAEF;EACC;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OAxDO;EAyDP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OA/EK;;AAgFP;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OA5GO;EA6GP;;;AAGF;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAvHK;;AAwHN;EACC,OAxHK;;AAyHN;EACC,OA7HK;;AA8HP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OApIK;;AAqIN;EACC,OAzIK;;AA0IP;EACC;EACA;;AACA;EACC,kBA/IK;EAgJL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;IACC;;EACD;IACC","file":"index.css"} \ No newline at end of file diff --git a/ui/html/index.html b/ui/html/index.html index 8793bda..0445748 100644 --- a/ui/html/index.html +++ b/ui/html/index.html @@ -3,4 +3,4 @@ -

dnswatch

+

dnswatch

diff --git a/ui/html/index.js b/ui/html/index.js index 0c4e962..3560bd9 100644 --- a/ui/html/index.js +++ b/ui/html/index.js @@ -1,4 +1,8 @@ function dnswatch_search() { + // activate spinner + document.getElementById('loadani').style.visibility = 'visible'; + document.getElementById('loadani').style.display = 'block'; + // get domain var domain = document.getElementById('dnswatch-search').value.toLowerCase(); @@ -89,6 +93,10 @@ function dnswatch_search() { document.getElementById('results').innerHTML = table; feather.replace(); } + + // deactivate spinner + document.getElementById('loadani').style.visibility = 'hidden'; + document.getElementById('loadani').style.display = 'none'; } request.send(`domain=${ window.btoa(domain) }`); -- 2.30.2 From 9ddb9ed628d69e75a350989b38c2bb5968b473f1 Mon Sep 17 00:00:00 2001 From: thetek42 Date: Sat, 3 Apr 2021 12:42:52 +0200 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=93=A6=20compile=20jhtml?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/jhtml-compat/index.css | 27 +++++++++++++++++++++++++++ ui/jhtml-compat/index.css.map | 2 +- ui/jhtml-compat/index.js | 8 ++++++++ ui/jhtml-compat/index.php | 2 +- 4 files changed, 37 insertions(+), 2 deletions(-) diff --git a/ui/jhtml-compat/index.css b/ui/jhtml-compat/index.css index e84d57e..b2bb553 100644 --- a/ui/jhtml-compat/index.css +++ b/ui/jhtml-compat/index.css @@ -102,6 +102,24 @@ input, button { margin-top: 1rem; color: #7c889c; } +#search #loadani { + display: none; + margin-top: 1rem; + visibility: hidden; +} +#search #loadani #spinner { + animation: 1s linear infinite spinner; + border: 2px solid transparent; + border-bottom: 2px solid #61afef; + border-radius: 0.5rem; + display: inline-block; + height: 1rem; + width: 1rem; +} +#search #loadani span { + color: #61afef; + margin-left: 0.5rem; +} #results table { margin-left: 25vw; @@ -165,4 +183,13 @@ input, button { width: 1.2rem; } +@keyframes spinner { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + /*# sourceMappingURL=index.css.map */ diff --git a/ui/jhtml-compat/index.css.map b/ui/jhtml-compat/index.css.map index 70e9bfb..6f9d86a 100644 --- a/ui/jhtml-compat/index.css.map +++ b/ui/jhtml-compat/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AASA;EACC;;;AAED;EACC,kBAZS;EAaT,OAXS;EAYT,aATS;EAUT;EACA;EACA;;;AAED;EACC,aAfS;;;AAiBV;EACC;EACA;EACA;;AACA;EACC,kBA3BQ;EA4BR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;;AAEF;EACC;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OAxDO;EAyDP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OA/EK;;AAgFP;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAvGK;;AAwGN;EACC,OAxGK;;AAyGN;EACC,OA7GK;;AA8GP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OApHK;;AAqHN;EACC,OAzHK;;AA0HP;EACC;EACA;;AACA;EACC,kBA/HK;EAgIL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AASA;EACC;;;AAED;EACC,kBAZS;EAaT,OAXS;EAYT,aATS;EAUT;EACA;EACA;;;AAED;EACC,aAfS;;;AAiBV;EACC;EACA;EACA;;AACA;EACC,kBA3BQ;EA4BR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;;AAEF;EACC;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OAxDO;EAyDP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OA/EK;;AAgFP;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACD;EACC,OA5GO;EA6GP;;;AAGF;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAvHK;;AAwHN;EACC,OAxHK;;AAyHN;EACC,OA7HK;;AA8HP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OApIK;;AAqIN;EACC,OAzIK;;AA0IP;EACC;EACA;;AACA;EACC,kBA/IK;EAgJL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;IACC;;EACD;IACC","file":"index.css"} \ No newline at end of file diff --git a/ui/jhtml-compat/index.js b/ui/jhtml-compat/index.js index bfd5620..1735ffe 100644 --- a/ui/jhtml-compat/index.js +++ b/ui/jhtml-compat/index.js @@ -1,5 +1,9 @@ *stop() function dnswatch_search() { + // activate spinner + document.getElementById('loadani').style.visibility = 'visible'; + document.getElementById('loadani').style.display = 'block'; + // get domain var domain = document.getElementById('dnswatch-search').value.toLowerCase(); @@ -90,6 +94,10 @@ function dnswatch_search() { document.getElementById('results').innerHTML = table; feather.replace(); } + + // deactivate spinner + document.getElementById('loadani').style.visibility = 'hidden'; + document.getElementById('loadani').style.display = 'none'; } request.send(`domain=${ window.btoa(domain) }`); diff --git a/ui/jhtml-compat/index.php b/ui/jhtml-compat/index.php index ed25c22..62377c2 100644 --- a/ui/jhtml-compat/index.php +++ b/ui/jhtml-compat/index.php @@ -5,4 +5,4 @@ *js("///index.js") *js("https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js") *postjs("///feather.js") -

dnswatch

\ No newline at end of file +

dnswatch

\ No newline at end of file -- 2.30.2