From 1ab7f1dd3de02d4d025a11c6248a4a841792465c Mon Sep 17 00:00:00 2001 From: thetek42 Date: Sat, 8 May 2021 11:51:52 +0200 Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=A8=20help=20button=20popups?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/raw/index.js | 45 +++++++++++++++++++++++++++++++++++++++++---- ui/raw/index.pug | 9 ++++++++- ui/raw/index.sass | 41 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 90 insertions(+), 5 deletions(-) diff --git a/ui/raw/index.js b/ui/raw/index.js index 84ce786..428ad53 100644 --- a/ui/raw/index.js +++ b/ui/raw/index.js @@ -45,7 +45,8 @@ function dnswatch_search() { dns_address: i['address'], desc_color: 'ref', desc_text: 'reference', - show_help: first_ref + show_help: first_ref, + help_type: 'reference' }) first_ref = false; @@ -55,7 +56,7 @@ function dnswatch_search() { // randomized response message if (response['data']['randomized_response']) { - table += 'This domain uses randomized responses. \n'; + table += 'This domain uses randomized responses. \n'; } if (response['data']['found']) { // only if reference confirms @@ -72,7 +73,8 @@ function dnswatch_search() { 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']) + show_help: i['cause'] !== null && !causes.includes(i['cause']), + help_type: 'blocked-' + i['cause'] }) if (i['cause'] !== null) causes.push(i['cause']) @@ -138,7 +140,7 @@ function gen_tablerow(options) { ${ options.dns_name }${ options.dns_address } ${ options.desc_text } - ${ options.show_help ? '' : '' } + ${ options.show_help ? '' : '' } ` } @@ -163,6 +165,36 @@ function get_blocked_text(cause) { +function show_modal(type) { + let msg; + switch (type) { + case 'search': + msg = 'dns-watch.org is a service that allows you to see how (mainly German) Internet Service Providers (ISPs) deal with Internet censorship. More Information
In order to test a website for availability, enter the domain into the search bar and press Enter.
Try out these examples if you are unsure: gnu.org, wikipedia.org, s.to'; + break; + case 'reference': + msg = 'In order to validate the DNS responses, we use references.
These references are from trustworthy DNS providers, such as Cloudflare or UncensoredDNS.
The responses of the DNS providers that should be tested (located in the bottom table) will be compared to the results from the references.' + break; + case 'blocked-cuii': + msg = 'This ISP (and all others with the same error message) blocked the request on behalf of CUII.
CUII is a German institution that censors parts of the Internet because of so-called copyright claims.
For more information about the CUII, read our Why? page.' + break; + case 'random': + msg = 'This domain uses randomized responses.
Some websites return different IP addresses for load balancing.
Therefore, dns-watch.org can\'t compare the results of these DNS providers and will only check for common blocking patterns.' + break; + default: + msg = `It seems like something happend that shouldn\'t have happened!
Dialog message type: ${ type }` + break; + } + + document.getElementById('modal-message').innerHTML = msg + document.getElementById('modal').style.display = 'block' +} + +function close_modal() { + document.getElementById('modal').style.display = 'none' +} + + + // add event triggers document.addEventListener('DOMContentLoaded', () => { document.getElementById('dnswatch-search-submit').addEventListener('click', (event) => { @@ -175,4 +207,9 @@ document.addEventListener('DOMContentLoaded', () => { dnswatch_search(); } }); + + window.onclick = function (event) { + if (event.target == document.getElementById('modal')) + close_modal() + } }); diff --git a/ui/raw/index.pug b/ui/raw/index.pug index b17d990..5b55d52 100644 --- a/ui/raw/index.pug +++ b/ui/raw/index.pug @@ -17,7 +17,8 @@ .buttonspacer input#dnswatch-search( type='text' placeholder='Search...' autofocus ) button#dnswatch-search-submit: i( data-feather='search' ) - button#help: i( data-feather='help-circle' ) + button#help( onclick='show_modal("search")' ) + i( data-feather='help-circle' ) small Try "gnu.org", "wikipedia.org", "s.to" or your own website! #loadani #spinner @@ -33,3 +34,9 @@ a( href='https://www.tjdev.de' ) tjdev.de span | a( href='/imprint' ) imprint + +#modal + #modal-content + #modal-close( onclick='close_modal()' ) + i( data-feather='x' ) + #modal-message diff --git a/ui/raw/index.sass b/ui/raw/index.sass index be95743..8e26698 100644 --- a/ui/raw/index.sass +++ b/ui/raw/index.sass @@ -206,6 +206,47 @@ input, button a color: darken($c-fg, 30%) +#modal + background-color: transparentize(#000, 0.4) + display: none + height: 100vh + left: 0 + overflow: auto + position: fixed + top: 0 + width: 100vw + z-index: 1000 + #modal-content + background-color: $c-bg + border-radius: .5rem + color: $c-fg + margin-left: 50% + margin-top: 25% + max-width: 30rem + padding: 2rem + transform: translate(-50%, -50%) + width: 90% + #modal-close + color: darken($c-fg, 50%) + float: right + transition: all .3s ease + &:hover, &:focus + color: darken($c-fg, 30%) + cursor: pointer + text-decoration: none + #modal-message + line-height: 1.8rem + a + color: $c-blue + text-decoration: underline + b + color: $c-blue + br + display: block + margin-top: 1.2rem + span + color: darken($c-fg, 30%) + .uncolored-svg filter: invert(.8) -- 2.30.2 From 348fbde7c5427d1c0e1b587f5c45966ca44d416e Mon Sep 17 00:00:00 2001 From: thetek42 Date: Sat, 8 May 2021 11:54:59 +0200 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=8E=A8=20update=20left=20out=20table?= =?UTF-8?q?=20generation=20code?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/raw/index.js | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/ui/raw/index.js b/ui/raw/index.js index 428ad53..6ea205d 100644 --- a/ui/raw/index.js +++ b/ui/raw/index.js @@ -93,20 +93,19 @@ function dnswatch_search() { document.getElementById('invaliddomain').style.display = 'block'; } else { var table = '\n'; - table += '\n'; - // status - table += '\n'; - // provider icon - table += '\n'; - // name and address - table += `\n`; - table += '\n'; - table += '\n'; - table += '\n'; + + table += gen_tablerow({ + status_color: 'cross', + status_icon: 'x', + dns_icon: 'x', + dns_name: `ERROR: ${ response['error'] }`, + dns_address: '', + desc_color: 'ref', + desc_text: '', + show_help: false, + help_type: '' + }) + table += '
\n'; - table += '\n'; - table += '\n'; - table += '\n'; - table += 'ERROR: ${ response["error"] }
'; } -- 2.30.2 From a0dca73b03f6f41cba9dce25fab40e61dd4a4427 Mon Sep 17 00:00:00 2001 From: thetek42 Date: Sat, 8 May 2021 11:57:44 +0200 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=8E=A8=20update=20left=20out=20table?= =?UTF-8?q?=20generation=20code?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/raw/index.js | 29 +++++++++++++---------------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/ui/raw/index.js b/ui/raw/index.js index 428ad53..f5fbf09 100644 --- a/ui/raw/index.js +++ b/ui/raw/index.js @@ -27,8 +27,6 @@ function dnswatch_search() { if (request.status >= 200 && request.status < 400) { var response = JSON.parse(this.response); - // TODO: CLEAN UP THIS MESS OF TABLE GENERATION CODE - if (response['type'] == 'success') { // success var table = '\n'; @@ -93,20 +91,19 @@ function dnswatch_search() { document.getElementById('invaliddomain').style.display = 'block'; } else { var table = '
\n'; - table += '\n'; - // status - table += '\n'; - // provider icon - table += '\n'; - // name and address - table += `\n`; - table += '\n'; - table += '\n'; - table += '\n'; + + table += gen_tablerow({ + status_color: 'cross', + status_icon: 'x', + dns_icon: 'x', + dns_name: `ERROR: ${ response['error'] }`, + dns_address: '', + desc_color: 'ref', + desc_text: '', + show_help: false, + help_type: '' + }) + table += '
\n'; - table += '\n'; - table += '\n'; - table += '\n'; - table += 'ERROR: ${ response["error"] }
'; } -- 2.30.2 From 3b73dd32b6d83d1669fb58a8e3736a43e4e397d0 Mon Sep 17 00:00:00 2001 From: thetek42 Date: Sat, 8 May 2021 11:59:46 +0200 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=93=A6=EF=B8=8F=20compile=20jhtml?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/jhtml-compat/index.css | 50 +++++++++++++++++++++++ ui/jhtml-compat/index.css.map | 2 +- ui/jhtml-compat/index.js | 74 +++++++++++++++++++++++++---------- ui/jhtml-compat/index.php | 2 +- 4 files changed, 106 insertions(+), 22 deletions(-) diff --git a/ui/jhtml-compat/index.css b/ui/jhtml-compat/index.css index 7546559..4fa23e3 100644 --- a/ui/jhtml-compat/index.css +++ b/ui/jhtml-compat/index.css @@ -239,6 +239,56 @@ input, button { color: #7c889c; } +#modal { + background-color: rgba(0, 0, 0, 0.6); + display: none; + height: 100vh; + left: 0; + overflow: auto; + position: fixed; + top: 0; + width: 100vw; + z-index: 1000; +} +#modal #modal-content { + background-color: #21252b; + border-radius: 0.5rem; + color: #d3d7de; + margin-left: 50%; + margin-top: 25%; + max-width: 30rem; + padding: 2rem; + transform: translate(-50%, -50%); + width: 90%; +} +#modal #modal-content #modal-close { + color: #4c5666; + float: right; + transition: all 0.3s ease; +} +#modal #modal-content #modal-close:hover, #modal #modal-content #modal-close:focus { + color: #7c889c; + cursor: pointer; + text-decoration: none; +} +#modal #modal-content #modal-message { + line-height: 1.8rem; +} +#modal #modal-content #modal-message a { + color: #61afef; + text-decoration: underline; +} +#modal #modal-content #modal-message b { + color: #61afef; +} +#modal #modal-content #modal-message br { + display: block; + margin-top: 1.2rem; +} +#modal #modal-content #modal-message span { + color: #7c889c; +} + .uncolored-svg { filter: invert(0.8); } diff --git a/ui/jhtml-compat/index.css.map b/ui/jhtml-compat/index.css.map index 23afff7..b2c1b48 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":"AAUA;EACC;;;AAED;EACC,kBAbU;EAcV,OAZU;EAaV,aATU;EAUV;EACA;EACA;EACA;;;AAED;EACC,aAhBU;;;AAkBX;EACC;;;AAED;EACC;EACA;EACA;;AACA;EACC,kBAhCS;EAiCT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;;AACF;EACC;;AACA;EACC;;;AAEH;EACC;EACA;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OAvEQ;EAwER;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OA9FM;;AA+FR;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,OA3HQ;EA4HR;;AAEF;EACC,OA3HS;EA4HT;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,OA5JM;;AA6JP;EACC,OA5JM;;AA6JP;EACC,OAlKM;;AAmKP;EACC,OAjKM;;AAkKR;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA1KM;;AA2KP;EACC,OAhLM;;AAiLR;EACC;EACA;;AACA;EACC,kBAtLM;EAuLN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;EACA;EACA;EACA;;AACA;EACC;;;AAEF;EACC;;;AAED;EACC;IACC;;EACD;IACC","file":"index.css"} +{"version":3,"sourceRoot":"","sources":["../raw/index.sass"],"names":[],"mappings":"AAUA;EACC;;;AAED;EACC,kBAbU;EAcV,OAZU;EAaV,aATU;EAUV;EACA;EACA;EACA;;;AAED;EACC,aAhBU;;;AAkBX;EACC;;;AAED;EACC;EACA;EACA;;AACA;EACC,kBAhCS;EAiCT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;;;AAEH;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;;AACF;EACC;;AACA;EACC;;;AAEH;EACC;EACA;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OAvEQ;EAwER;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OA9FM;;AA+FR;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,OA3HQ;EA4HR;;AAEF;EACC,OA3HS;EA4HT;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,OA5JM;;AA6JP;EACC,OA5JM;;AA6JP;EACC,OAlKM;;AAmKP;EACC,OAjKM;;AAkKR;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OA1KM;;AA2KP;EACC,OAhLM;;AAiLR;EACC;EACA;;AACA;EACC,kBAtLM;EAuLN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA;;;AAEN;EACC;EACA;EACA;EACA;;AACA;EACC;;;AAEF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC,kBA1NS;EA2NT;EACA,OA1NS;EA2NT;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;;AACF;EACC;;AACA;EACC,OA7OO;EA8OP;;AACD;EACC,OAhPO;;AAiPR;EACC;EACA;;AACD;EACC;;;AAEJ;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 1c0e95c..77ed4e1 100644 --- a/ui/jhtml-compat/index.js +++ b/ui/jhtml-compat/index.js @@ -28,8 +28,6 @@ function dnswatch_search() { if (request.status >= 200 && request.status < 400) { var response = JSON.parse(this.response); - // TODO: CLEAN UP THIS MESS OF TABLE GENERATION CODE - if (response['type'] == 'success') { // success var table = '\n'; @@ -46,7 +44,8 @@ function dnswatch_search() { dns_address: i['address'], desc_color: 'ref', desc_text: 'reference', - show_help: first_ref + show_help: first_ref, + help_type: 'reference' }) first_ref = false; @@ -56,7 +55,7 @@ function dnswatch_search() { // randomized response message if (response['data']['randomized_response']) { - table += 'This domain uses randomized responses. \n'; + table += 'This domain uses randomized responses. \n'; } if (response['data']['found']) { // only if reference confirms @@ -73,7 +72,8 @@ function dnswatch_search() { 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']) + show_help: i['cause'] !== null && !causes.includes(i['cause']), + help_type: 'blocked-' + i['cause'] }) if (i['cause'] !== null) causes.push(i['cause']) @@ -92,20 +92,19 @@ function dnswatch_search() { document.getElementById('invaliddomain').style.display = 'block'; } else { var table = '
\n'; - table += '\n'; - // status - table += '\n'; - // provider icon - table += '\n'; - // name and address - table += `\n`; - table += '\n'; - table += '\n'; - table += '\n'; + + table += gen_tablerow({ + status_color: 'cross', + status_icon: 'x', + dns_icon: 'x', + dns_name: `ERROR: ${ response['error'] }`, + dns_address: '', + desc_color: 'ref', + desc_text: '', + show_help: false, + help_type: '' + }) + table += '
\n'; - table += '\n'; - table += '\n'; - table += '\n'; - table += 'ERROR: ${ response["error"] }
'; } @@ -139,7 +138,7 @@ function gen_tablerow(options) { ${ options.dns_name }${ options.dns_address } ${ options.desc_text } - ${ options.show_help ? '' : '' } + ${ options.show_help ? '' : '' } ` } @@ -164,6 +163,36 @@ function get_blocked_text(cause) { +function show_modal(type) { + let msg; + switch (type) { + case 'search': + msg = 'dns-watch.org is a service that allows you to see how (mainly German) Internet Service Providers (ISPs) deal with Internet censorship. More Information
In order to test a website for availability, enter the domain into the search bar and press Enter.
Try out these examples if you are unsure: gnu.org, wikipedia.org, s.to'; + break; + case 'reference': + msg = 'In order to validate the DNS responses, we use references.
These references are from trustworthy DNS providers, such as Cloudflare or UncensoredDNS.
The responses of the DNS providers that should be tested (located in the bottom table) will be compared to the results from the references.' + break; + case 'blocked-cuii': + msg = 'This ISP (and all others with the same error message) blocked the request on behalf of CUII.
CUII is a German institution that censors parts of the Internet because of so-called copyright claims.
For more information about the CUII, read our Why? page.' + break; + case 'random': + msg = 'This domain uses randomized responses.
Some websites return different IP addresses for load balancing.
Therefore, dns-watch.org can\'t compare the results of these DNS providers and will only check for common blocking patterns.' + break; + default: + msg = `It seems like something happend that shouldn\'t have happened!
Dialog message type: ${ type }` + break; + } + + document.getElementById('modal-message').innerHTML = msg + document.getElementById('modal').style.display = 'block' +} + +function close_modal() { + document.getElementById('modal').style.display = 'none' +} + + + // add event triggers document.addEventListener('DOMContentLoaded', () => { document.getElementById('dnswatch-search-submit').addEventListener('click', (event) => { @@ -176,4 +205,9 @@ document.addEventListener('DOMContentLoaded', () => { dnswatch_search(); } }); + + window.onclick = function (event) { + if (event.target == document.getElementById('modal')) + close_modal() + } }); diff --git a/ui/jhtml-compat/index.php b/ui/jhtml-compat/index.php index 38bfa02..d8c2b38 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") -

dns-watch.org

by tjdev.de
\ No newline at end of file +

dns-watch.org

by tjdev.de
\ No newline at end of file -- 2.30.2