';
}
@@ -138,7 +137,7 @@ function gen_tablerow(options) {
${ options.dns_name }${ options.dns_address }
${ options.desc_text }
- ${ options.show_help ? '
' : '' }
+ ${ options.show_help ? '
' : '' }
`
}
@@ -163,6 +162,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 +204,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.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 = '
';
}
@@ -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")
-
Try "gnu.org", "wikipedia.org", "s.to" or your own website!
loading...
invalid domain.
\ No newline at end of file
diff --git a/ui/raw/index.js b/ui/raw/index.js
index 84ce786..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 = '
';
}
@@ -138,7 +137,7 @@ function gen_tablerow(options) {
${ options.dns_name }${ options.dns_address }
${ options.desc_text }
- ${ options.show_help ? '
' : '' }
+ ${ options.show_help ? '
' : '' }
`
}
@@ -163,6 +162,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 +204,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)