From 2e1d1f3cdd430731ce47497c65b07a069af9f728 Mon Sep 17 00:00:00 2001 From: thetek Date: Fri, 7 May 2021 15:05:08 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20offline=20nameserver=20icon=20&=20m?= =?UTF-8?q?ore=20(#9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * :adhesive_bandage: fix 'learn more' font size * :sparkles: add support for offline nameservers * :sparkles: offline nameservers & :art: table code :sparkles: support for offline nameservers :art: rework table row generation code * :adhesive_bandage: unite similar help buttons * :adhesive_bandage: fix blocked message * :package: compile html * :package: compile jhtml --- ui/html/index.css | 5 ++ ui/html/index.css.map | 2 +- ui/html/index.js | 101 +++++++++++++++++++++------------- ui/jhtml-compat/index.css | 5 ++ ui/jhtml-compat/index.css.map | 2 +- ui/jhtml-compat/index.js | 101 +++++++++++++++++++++------------- ui/raw/index.js | 101 +++++++++++++++++++++------------- ui/raw/index.sass | 17 ++++-- 8 files changed, 209 insertions(+), 125 deletions(-) diff --git a/ui/html/index.css b/ui/html/index.css index ef11ef2..0d1d3b6 100644 --- a/ui/html/index.css +++ b/ui/html/index.css @@ -136,6 +136,7 @@ input, button { #results small.random { color: #4c5666; display: block; + font-size: 0.8rem; margin-top: 1rem; text-align: center; } @@ -144,6 +145,7 @@ input, button { border: none; color: #626e83; cursor: pointer; + font-size: 0.8rem; outline: none; text-decoration: underline; } @@ -166,6 +168,9 @@ input, button { #results table tr td.status.ref { color: #61afef; } +#results table tr td.status.offline { + color: #d19a66; +} #results table tr td.icon { border-left: solid transparent 2rem; width: 3rem; diff --git a/ui/html/index.css.map b/ui/html/index.css.map index a891566..a3967ac 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;;AACA;EACC;;;AAEH;EACC;EACA;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OA3DO;EA4DP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OAlFK;;AAmFP;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,OA/GO;EAgHP;;AAEF;EACC,OAhHQ;EAiHR;EACA;EACA;;AACA;EACC;;;AAGF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEF;EACC;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OA9IK;;AA+IN;EACC,OA/IK;;AAgJN;EACC,OApJK;;AAqJP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA3JK;;AA4JN;EACC,OAhKK;;AAiKP;EACC;EACA;;AACA;EACC,kBAtKK;EAuKL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;;;AAED;EACC;IACC;;EACD;IACC","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AAUA;EACC;;;AAED;EACC,kBAbU;EAcV,OAZU;EAaV,aATU;EAUV;EACA;EACA;;;AAED;EACC,aAfU;;;AAiBX;EACC;EACA;EACA;;AACA;EACC,kBA5BS;EA6BT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;;AAEH;EACC;EACA;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OA5DQ;EA6DR;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OAnFM;;AAoFR;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,OAhHQ;EAiHR;;AAEF;EACC,OAhHS;EAiHT;EACA;EACA;;AACA;EACC;;;AAGF;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACC;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAjJM;;AAkJP;EACC,OAjJM;;AAkJP;EACC,OAvJM;;AAwJP;EACC,OAtJM;;AAuJR;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA/JM;;AAgKP;EACC,OArKM;;AAsKR;EACC;EACA;;AACA;EACC,kBA3KM;EA4KN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;;;AAED;EACC;IACC;;EACD;IACC","file":"index.css"} \ No newline at end of file diff --git a/ui/html/index.js b/ui/html/index.js index 5bc698f..84ce786 100644 --- a/ui/html/index.js +++ b/ui/html/index.js @@ -34,28 +34,25 @@ function dnswatch_search() { var table = '\n'; //// reference dns + let first_ref = true; response['data']['reference'].forEach(i => { - // status - table += '\n'; - table += '\n'; - // provider - table += '\n' - // name and address - table += `\n`; - // reference info - table += '\n'; - // help button - table += '\n'; - table += '\n' + + table += gen_tablerow({ + status_color: 'ref', + status_icon: get_status_icon(i['status']), + dns_icon: i['icon'], + dns_name: i['name'], + dns_address: i['address'], + desc_color: 'ref', + desc_text: 'reference', + show_help: first_ref + }) + first_ref = false; + }); table += '
\n'; - table += `\n`; - table += '\n'; - table += `\n`; - table += '${ i["name"] }${ i["address"] }reference\n'; - table += '\n'; - table += '
'; + // randomized response message if (response['data']['randomized_response']) { table += 'This domain uses randomized responses. \n'; @@ -64,28 +61,22 @@ function dnswatch_search() { if (response['data']['found']) { // only if reference confirms table += '\n'; // spacer //// search rows + let causes = []; response['data']['search'].forEach(i => { - table += '\n'; - // status - table += `\n'; - // provider icon - table += '\n'; - // name and address - table += `\n`; - // status info - if (i['cause'] !== null) { - if (i['cause'] == 'cuii') { - table += '\n'; - table += '\n' - } - } - table += '\n'; + + table += gen_tablerow({ + status_color: get_status_color(i['status']), + status_icon: get_status_icon(i['status']), + dns_icon: i['icon'], + dns_name: i['name'], + dns_address: i['address'], + desc_color: i['cause'] !== null ? 'blocked': '', + desc_text: get_blocked_text(i['cause']), + show_help: i['cause'] !== null && !causes.includes(i['cause']) + }) + + if (i['cause'] !== null) causes.push(i['cause']) + }); } table += '
\n`; - table += `\n`; - table += '\n'; - table += `\n`; - table += '${ i["name"] }${ i["address"] }blocked by cuii\n'; - table += '\n'; - table += '
'; @@ -140,6 +131,38 @@ function is_valid_domain(str) { +function gen_tablerow(options) { + return ` + + + + ${ options.dns_name }${ options.dns_address } + ${ options.desc_text } + ${ options.show_help ? '' : '' } + +` +} + +function get_status_color(status) { + if (status === true) return 'check' + if (status === false) return 'cross' + return 'offline' +} + +function get_status_icon(status) { + if (status === true) return 'check' + if (status === false) return 'x' + return 'wifi-off' +} + +function get_blocked_text(cause) { + if (cause == 'cuii') return 'blocked by cuii' + if (cause !== null) return `bocked: ${cause}` + return '' +} + + + // add event triggers document.addEventListener('DOMContentLoaded', () => { document.getElementById('dnswatch-search-submit').addEventListener('click', (event) => { diff --git a/ui/jhtml-compat/index.css b/ui/jhtml-compat/index.css index b0368d5..763a795 100644 --- a/ui/jhtml-compat/index.css +++ b/ui/jhtml-compat/index.css @@ -137,6 +137,7 @@ input, button { #results small.random { color: #4c5666; display: block; + font-size: 0.8rem; margin-top: 1rem; text-align: center; } @@ -145,6 +146,7 @@ input, button { border: none; color: #626e83; cursor: pointer; + font-size: 0.8rem; outline: none; text-decoration: underline; } @@ -167,6 +169,9 @@ input, button { #results table tr td.status.ref { color: #61afef; } +#results table tr td.status.offline { + color: #d19a66; +} #results table tr td.icon { border-left: solid transparent 2rem; width: 3rem; diff --git a/ui/jhtml-compat/index.css.map b/ui/jhtml-compat/index.css.map index a891566..a3967ac 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;;AACA;EACC;;;AAEH;EACC;EACA;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OA3DO;EA4DP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OAlFK;;AAmFP;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,OA/GO;EAgHP;;AAEF;EACC,OAhHQ;EAiHR;EACA;EACA;;AACA;EACC;;;AAGF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEF;EACC;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OA9IK;;AA+IN;EACC,OA/IK;;AAgJN;EACC,OApJK;;AAqJP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA3JK;;AA4JN;EACC,OAhKK;;AAiKP;EACC;EACA;;AACA;EACC,kBAtKK;EAuKL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;;;AAED;EACC;IACC;;EACD;IACC","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AAUA;EACC;;;AAED;EACC,kBAbU;EAcV,OAZU;EAaV,aATU;EAUV;EACA;EACA;;;AAED;EACC,aAfU;;;AAiBX;EACC;EACA;EACA;;AACA;EACC,kBA5BS;EA6BT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;;AACA;EACC;;;AAEH;EACC;EACA;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OA5DQ;EA6DR;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OAnFM;;AAoFR;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,OAhHQ;EAiHR;;AAEF;EACC,OAhHS;EAiHT;EACA;EACA;;AACA;EACC;;;AAGF;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACC;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAjJM;;AAkJP;EACC,OAjJM;;AAkJP;EACC,OAvJM;;AAwJP;EACC,OAtJM;;AAuJR;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA/JM;;AAgKP;EACC,OArKM;;AAsKR;EACC;EACA;;AACA;EACC,kBA3KM;EA4KN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;;;AAED;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 1b48888..1c0e95c 100644 --- a/ui/jhtml-compat/index.js +++ b/ui/jhtml-compat/index.js @@ -35,28 +35,25 @@ function dnswatch_search() { var table = '\n'; //// reference dns + let first_ref = true; response['data']['reference'].forEach(i => { - // status - table += '\n'; - table += '\n'; - // provider - table += '\n' - // name and address - table += `\n`; - // reference info - table += '\n'; - // help button - table += '\n'; - table += '\n' + + table += gen_tablerow({ + status_color: 'ref', + status_icon: get_status_icon(i['status']), + dns_icon: i['icon'], + dns_name: i['name'], + dns_address: i['address'], + desc_color: 'ref', + desc_text: 'reference', + show_help: first_ref + }) + first_ref = false; + }); table += '
\n'; - table += `\n`; - table += '\n'; - table += `\n`; - table += '${ i["name"] }${ i["address"] }reference\n'; - table += '\n'; - table += '
'; + // randomized response message if (response['data']['randomized_response']) { table += 'This domain uses randomized responses. \n'; @@ -65,28 +62,22 @@ function dnswatch_search() { if (response['data']['found']) { // only if reference confirms table += '\n'; // spacer //// search rows + let causes = []; response['data']['search'].forEach(i => { - table += '\n'; - // status - table += `\n'; - // provider icon - table += '\n'; - // name and address - table += `\n`; - // status info - if (i['cause'] !== null) { - if (i['cause'] == 'cuii') { - table += '\n'; - table += '\n' - } - } - table += '\n'; + + table += gen_tablerow({ + status_color: get_status_color(i['status']), + status_icon: get_status_icon(i['status']), + dns_icon: i['icon'], + dns_name: i['name'], + dns_address: i['address'], + desc_color: i['cause'] !== null ? 'blocked': '', + desc_text: get_blocked_text(i['cause']), + show_help: i['cause'] !== null && !causes.includes(i['cause']) + }) + + if (i['cause'] !== null) causes.push(i['cause']) + }); } table += '
\n`; - table += `\n`; - table += '\n'; - table += `\n`; - table += '${ i["name"] }${ i["address"] }blocked by cuii\n'; - table += '\n'; - table += '
'; @@ -141,6 +132,38 @@ function is_valid_domain(str) { +function gen_tablerow(options) { + return ` + + + + ${ options.dns_name }${ options.dns_address } + ${ options.desc_text } + ${ options.show_help ? '' : '' } + +` +} + +function get_status_color(status) { + if (status === true) return 'check' + if (status === false) return 'cross' + return 'offline' +} + +function get_status_icon(status) { + if (status === true) return 'check' + if (status === false) return 'x' + return 'wifi-off' +} + +function get_blocked_text(cause) { + if (cause == 'cuii') return 'blocked by cuii' + if (cause !== null) return `bocked: ${cause}` + return '' +} + + + // add event triggers document.addEventListener('DOMContentLoaded', () => { document.getElementById('dnswatch-search-submit').addEventListener('click', (event) => { diff --git a/ui/raw/index.js b/ui/raw/index.js index 5bc698f..84ce786 100644 --- a/ui/raw/index.js +++ b/ui/raw/index.js @@ -34,28 +34,25 @@ function dnswatch_search() { var table = '\n'; //// reference dns + let first_ref = true; response['data']['reference'].forEach(i => { - // status - table += '\n'; - table += '\n'; - // provider - table += '\n' - // name and address - table += `\n`; - // reference info - table += '\n'; - // help button - table += '\n'; - table += '\n' + + table += gen_tablerow({ + status_color: 'ref', + status_icon: get_status_icon(i['status']), + dns_icon: i['icon'], + dns_name: i['name'], + dns_address: i['address'], + desc_color: 'ref', + desc_text: 'reference', + show_help: first_ref + }) + first_ref = false; + }); table += '
\n'; - table += `\n`; - table += '\n'; - table += `\n`; - table += '${ i["name"] }${ i["address"] }reference\n'; - table += '\n'; - table += '
'; + // randomized response message if (response['data']['randomized_response']) { table += 'This domain uses randomized responses. \n'; @@ -64,28 +61,22 @@ function dnswatch_search() { if (response['data']['found']) { // only if reference confirms table += '\n'; // spacer //// search rows + let causes = []; response['data']['search'].forEach(i => { - table += '\n'; - // status - table += `\n'; - // provider icon - table += '\n'; - // name and address - table += `\n`; - // status info - if (i['cause'] !== null) { - if (i['cause'] == 'cuii') { - table += '\n'; - table += '\n' - } - } - table += '\n'; + + table += gen_tablerow({ + status_color: get_status_color(i['status']), + status_icon: get_status_icon(i['status']), + dns_icon: i['icon'], + dns_name: i['name'], + dns_address: i['address'], + desc_color: i['cause'] !== null ? 'blocked': '', + desc_text: get_blocked_text(i['cause']), + show_help: i['cause'] !== null && !causes.includes(i['cause']) + }) + + if (i['cause'] !== null) causes.push(i['cause']) + }); } table += '
\n`; - table += `\n`; - table += '\n'; - table += `\n`; - table += '${ i["name"] }${ i["address"] }blocked by cuii\n'; - table += '\n'; - table += '
'; @@ -140,6 +131,38 @@ function is_valid_domain(str) { +function gen_tablerow(options) { + return ` + + + + ${ options.dns_name }${ options.dns_address } + ${ options.desc_text } + ${ options.show_help ? '' : '' } + +` +} + +function get_status_color(status) { + if (status === true) return 'check' + if (status === false) return 'cross' + return 'offline' +} + +function get_status_icon(status) { + if (status === true) return 'check' + if (status === false) return 'x' + return 'wifi-off' +} + +function get_blocked_text(cause) { + if (cause == 'cuii') return 'blocked by cuii' + if (cause !== null) return `bocked: ${cause}` + return '' +} + + + // add event triggers document.addEventListener('DOMContentLoaded', () => { document.getElementById('dnswatch-search-submit').addEventListener('click', (event) => { diff --git a/ui/raw/index.sass b/ui/raw/index.sass index f4326a5..2c4a2c2 100644 --- a/ui/raw/index.sass +++ b/ui/raw/index.sass @@ -1,10 +1,11 @@ // variables -$c-bg: #21252b -$c-blue: #61afef -$c-fg: #d3d7de -$c-green: #98c379 -$c-red: #e06c75 -$f-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Helvetica Neue', 'Helvetica', sans-serif +$c-bg: #21252b +$c-blue: #61afef +$c-fg: #d3d7de +$c-green: #98c379 +$c-orange: #d19a66 +$c-red: #e06c75 +$f-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Helvetica Neue', 'Helvetica', sans-serif // styles * @@ -126,6 +127,7 @@ input, button small.random color: darken($c-fg, 50%) display: block + font-size: .8rem margin-top: 1rem text-align: center button @@ -133,6 +135,7 @@ input, button border: none color: darken($c-fg, 40%) cursor: pointer + font-size: .8rem outline: none text-decoration: underline @@ -149,6 +152,8 @@ input, button color: $c-red &.ref color: $c-blue + &.offline + color: $c-orange td.icon border-left: solid transparent 2rem width: 3rem