✨ help button pop up (#11)
* ✨ help button popups * 🎨 update left out table generation code * 📦️ compile jhtml
This commit is contained in:
GitHub
parent
13ba942648
commit
5bffecf09e
50
ui/html/index.css
vendored
50
ui/html/index.css
vendored
@ -238,6 +238,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);
|
||||
}
|
||||
|
||||
2
ui/html/index.css.map
vendored
2
ui/html/index.css.map
vendored
@ -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"}
|
||||
2
ui/html/index.html
vendored
2
ui/html/index.html
vendored
@ -6,4 +6,4 @@
|
||||
<meta content="utf-8" http-equiv="encoding">
|
||||
<script src="index.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
||||
<div id="content"><div id="header"><a href="https://github.com/tjdev-de/dns-watch"><button class="spaceleft"><i data-feather="github"></i></button></a><button><i data-feather="globe"></i></button><button><i data-feather="sun"></i></button></div><div id="title"><h1>dns-watch<span>.org</span></h1><span>by <a href="https://www.tjdev.de">tjdev.de</a></span></div><div id="search"><div id="searchbar"><div class="buttonspacer"></div><input id="dnswatch-search" type="text" placeholder="Search..." autofocus="autofocus"/><button id="dnswatch-search-submit"><i data-feather="search"></i></button><button id="help"><i data-feather="help-circle"></i></button></div><small>Try "gnu.org", "wikipedia.org", "s.to" or your own website!</small><div id="loadani"><div id="spinner"></div><span>loading...</span></div><div id="invaliddomain"><i data-feather="x"></i><span>invalid domain.</span></div></div><div id="results"></div></div><div id="footer"><span>dns-watch.org by </span><a href="https://www.tjdev.de">tjdev.de</a><span> | </span><a href="/imprint">imprint</a></div><script src="feather.js"></script>
|
||||
<div id="content"><div id="header"><a href="https://github.com/tjdev-de/dns-watch"><button class="spaceleft"><i data-feather="github"></i></button></a><button><i data-feather="globe"></i></button><button><i data-feather="sun"></i></button></div><div id="title"><h1>dns-watch<span>.org</span></h1><span>by <a href="https://www.tjdev.de">tjdev.de</a></span></div><div id="search"><div id="searchbar"><div class="buttonspacer"></div><input id="dnswatch-search" type="text" placeholder="Search..." autofocus="autofocus"/><button id="dnswatch-search-submit"><i data-feather="search"></i></button><button id="help" onclick="show_modal("search")"><i data-feather="help-circle"></i></button></div><small>Try "gnu.org", "wikipedia.org", "s.to" or your own website!</small><div id="loadani"><div id="spinner"></div><span>loading...</span></div><div id="invaliddomain"><i data-feather="x"></i><span>invalid domain.</span></div></div><div id="results"></div></div><div id="footer"><span>dns-watch.org by </span><a href="https://www.tjdev.de">tjdev.de</a><span> | </span><a href="/imprint">imprint</a></div><div id="modal"><div id="modal-content"><div id="modal-close" onclick="close_modal()"><i data-feather="x"></i></div><div id="modal-message"></div></div></div><script src="feather.js"></script>
|
||||
|
||||
74
ui/html/index.js
vendored
74
ui/html/index.js
vendored
@ -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 = '<table>\n';
|
||||
@ -45,7 +43,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 +54,7 @@ function dnswatch_search() {
|
||||
|
||||
// randomized response message
|
||||
if (response['data']['randomized_response']) {
|
||||
table += '<small class="random">This domain uses randomized responses. <button>Learn more</button></small>\n';
|
||||
table += '<small class="random">This domain uses randomized responses. <button onclick="show_modal(\'random\')">Learn more</button></small>\n';
|
||||
}
|
||||
|
||||
if (response['data']['found']) { // only if reference confirms
|
||||
@ -72,7 +71,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'])
|
||||
@ -91,20 +91,19 @@ function dnswatch_search() {
|
||||
document.getElementById('invaliddomain').style.display = 'block';
|
||||
} else {
|
||||
var table = '<table>\n';
|
||||
table += '<tr>\n';
|
||||
// status
|
||||
table += '<td class="status cross">\n';
|
||||
table += '<i data-feather="x"></i>\n';
|
||||
table += '</td>\n';
|
||||
// provider icon
|
||||
table += '<td class="icon">\n';
|
||||
table += '<i data-feather="x"></i>\n';
|
||||
table += '</td>\n';
|
||||
// name and address
|
||||
table += `<td class="name">ERROR: ${ response["error"] }</td>\n`;
|
||||
table += '<td class="desc ref"></td>\n';
|
||||
table += '<td class="help"></td>\n';
|
||||
table += '</tr>\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 += '</table>';
|
||||
}
|
||||
|
||||
@ -138,7 +137,7 @@ function gen_tablerow(options) {
|
||||
<td class="icon"><img class="uncolored-svg" src="${ options.dns_icon }"></td>
|
||||
<td class="name">${ options.dns_name }<small>${ options.dns_address }</small></td>
|
||||
<td class="desc ${ options.desc_color }">${ options.desc_text }</td>
|
||||
${ options.show_help ? '<td class="help"><button><i data-feather="help-circle"></i></button></td>' : '' }
|
||||
${ options.show_help ? '<td class="help"><button onclick="show_modal(\''+options.help_type+'\')"><i data-feather="help-circle"></i></button></td>' : '' }
|
||||
</tr>
|
||||
`
|
||||
}
|
||||
@ -163,6 +162,36 @@ function get_blocked_text(cause) {
|
||||
|
||||
|
||||
|
||||
function show_modal(type) {
|
||||
let msg;
|
||||
switch (type) {
|
||||
case 'search':
|
||||
msg = '<b>dns-watch.org</b> is a service that allows you to see how (mainly German) Internet Service Providers (ISPs) deal with Internet censorship. <a href="/why">More Information</a><br>In order to test a website for availability, enter the domain into the search bar and press Enter.<br><span>Try out these examples if you are unsure: gnu.org, wikipedia.org, s.to</span>';
|
||||
break;
|
||||
case 'reference':
|
||||
msg = 'In order to validate the DNS responses, we use <b>references</b>.<br>These references are from trustworthy DNS providers, such as Cloudflare or UncensoredDNS.<br>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 <b>CUII</b>.<br>CUII is a German institution that censors parts of the Internet because of so-called copyright claims.<br>For more information about the CUII, read our <a href="/why">Why?</a> page.'
|
||||
break;
|
||||
case 'random':
|
||||
msg = 'This domain uses <b>randomized responses</b>.<br>Some websites return different IP addresses for load balancing.<br>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!<br><span>Dialog message type: ${ type }</span>`
|
||||
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()
|
||||
}
|
||||
});
|
||||
|
||||
50
ui/jhtml-compat/index.css
vendored
50
ui/jhtml-compat/index.css
vendored
@ -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);
|
||||
}
|
||||
|
||||
2
ui/jhtml-compat/index.css.map
vendored
2
ui/jhtml-compat/index.css.map
vendored
@ -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"}
|
||||
74
ui/jhtml-compat/index.js
vendored
74
ui/jhtml-compat/index.js
vendored
@ -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 = '<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 += '<small class="random">This domain uses randomized responses. <button>Learn more</button></small>\n';
|
||||
table += '<small class="random">This domain uses randomized responses. <button onclick="show_modal(\'random\')">Learn more</button></small>\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 = '<table>\n';
|
||||
table += '<tr>\n';
|
||||
// status
|
||||
table += '<td class="status cross">\n';
|
||||
table += '<i data-feather="x"></i>\n';
|
||||
table += '</td>\n';
|
||||
// provider icon
|
||||
table += '<td class="icon">\n';
|
||||
table += '<i data-feather="x"></i>\n';
|
||||
table += '</td>\n';
|
||||
// name and address
|
||||
table += `<td class="name">ERROR: ${ response["error"] }</td>\n`;
|
||||
table += '<td class="desc ref"></td>\n';
|
||||
table += '<td class="help"></td>\n';
|
||||
table += '</tr>\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 += '</table>';
|
||||
}
|
||||
|
||||
@ -139,7 +138,7 @@ function gen_tablerow(options) {
|
||||
<td class="icon"><img class="uncolored-svg" src="${ options.dns_icon }"></td>
|
||||
<td class="name">${ options.dns_name }<small>${ options.dns_address }</small></td>
|
||||
<td class="desc ${ options.desc_color }">${ options.desc_text }</td>
|
||||
${ options.show_help ? '<td class="help"><button><i data-feather="help-circle"></i></button></td>' : '' }
|
||||
${ options.show_help ? '<td class="help"><button onclick="show_modal(\''+options.help_type+'\')"><i data-feather="help-circle"></i></button></td>' : '' }
|
||||
</tr>
|
||||
`
|
||||
}
|
||||
@ -164,6 +163,36 @@ function get_blocked_text(cause) {
|
||||
|
||||
|
||||
|
||||
function show_modal(type) {
|
||||
let msg;
|
||||
switch (type) {
|
||||
case 'search':
|
||||
msg = '<b>dns-watch.org</b> is a service that allows you to see how (mainly German) Internet Service Providers (ISPs) deal with Internet censorship. <a href="/why">More Information</a><br>In order to test a website for availability, enter the domain into the search bar and press Enter.<br><span>Try out these examples if you are unsure: gnu.org, wikipedia.org, s.to</span>';
|
||||
break;
|
||||
case 'reference':
|
||||
msg = 'In order to validate the DNS responses, we use <b>references</b>.<br>These references are from trustworthy DNS providers, such as Cloudflare or UncensoredDNS.<br>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 <b>CUII</b>.<br>CUII is a German institution that censors parts of the Internet because of so-called copyright claims.<br>For more information about the CUII, read our <a href="/why">Why?</a> page.'
|
||||
break;
|
||||
case 'random':
|
||||
msg = 'This domain uses <b>randomized responses</b>.<br>Some websites return different IP addresses for load balancing.<br>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!<br><span>Dialog message type: ${ type }</span>`
|
||||
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()
|
||||
}
|
||||
});
|
||||
|
||||
2
ui/jhtml-compat/index.php
vendored
2
ui/jhtml-compat/index.php
vendored
@ -5,4 +5,4 @@
|
||||
*js("///index.js")
|
||||
*js("https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js")
|
||||
*postjs("///feather.js")
|
||||
<div id="content"><div id="header"><a href="https://github.com/tjdev-de/dns-watch"><button class="spaceleft"><i data-feather="github"></i></button></a><button><i data-feather="globe"></i></button><button><i data-feather="sun"></i></button></div><div id="title"><h1>dns-watch<span>.org</span></h1><span>by <a href="https://www.tjdev.de">tjdev.de</a></span></div><div id="search"><div id="searchbar"><div class="buttonspacer"></div><input id="dnswatch-search" type="text" placeholder="Search..." autofocus="autofocus"/><button id="dnswatch-search-submit"><i data-feather="search"></i></button><button id="help"><i data-feather="help-circle"></i></button></div><small>Try "gnu.org", "wikipedia.org", "s.to" or your own website!</small><div id="loadani"><div id="spinner"></div><span>loading...</span></div><div id="invaliddomain"><i data-feather="x"></i><span>invalid domain.</span></div></div><div id="results"></div></div><div id="footer"><span>dns-watch.org by </span><a href="https://www.tjdev.de">tjdev.de</a><span> | </span><a href="/imprint">imprint</a></div>
|
||||
<div id="content"><div id="header"><a href="https://github.com/tjdev-de/dns-watch"><button class="spaceleft"><i data-feather="github"></i></button></a><button><i data-feather="globe"></i></button><button><i data-feather="sun"></i></button></div><div id="title"><h1>dns-watch<span>.org</span></h1><span>by <a href="https://www.tjdev.de">tjdev.de</a></span></div><div id="search"><div id="searchbar"><div class="buttonspacer"></div><input id="dnswatch-search" type="text" placeholder="Search..." autofocus="autofocus"/><button id="dnswatch-search-submit"><i data-feather="search"></i></button><button id="help" onclick="show_modal("search")"><i data-feather="help-circle"></i></button></div><small>Try "gnu.org", "wikipedia.org", "s.to" or your own website!</small><div id="loadani"><div id="spinner"></div><span>loading...</span></div><div id="invaliddomain"><i data-feather="x"></i><span>invalid domain.</span></div></div><div id="results"></div></div><div id="footer"><span>dns-watch.org by </span><a href="https://www.tjdev.de">tjdev.de</a><span> | </span><a href="/imprint">imprint</a></div><div id="modal"><div id="modal-content"><div id="modal-close" onclick="close_modal()"><i data-feather="x"></i></div><div id="modal-message"></div></div></div>
|
||||
@ -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 = '<table>\n';
|
||||
@ -45,7 +43,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 +54,7 @@ function dnswatch_search() {
|
||||
|
||||
// randomized response message
|
||||
if (response['data']['randomized_response']) {
|
||||
table += '<small class="random">This domain uses randomized responses. <button>Learn more</button></small>\n';
|
||||
table += '<small class="random">This domain uses randomized responses. <button onclick="show_modal(\'random\')">Learn more</button></small>\n';
|
||||
}
|
||||
|
||||
if (response['data']['found']) { // only if reference confirms
|
||||
@ -72,7 +71,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'])
|
||||
@ -91,20 +91,19 @@ function dnswatch_search() {
|
||||
document.getElementById('invaliddomain').style.display = 'block';
|
||||
} else {
|
||||
var table = '<table>\n';
|
||||
table += '<tr>\n';
|
||||
// status
|
||||
table += '<td class="status cross">\n';
|
||||
table += '<i data-feather="x"></i>\n';
|
||||
table += '</td>\n';
|
||||
// provider icon
|
||||
table += '<td class="icon">\n';
|
||||
table += '<i data-feather="x"></i>\n';
|
||||
table += '</td>\n';
|
||||
// name and address
|
||||
table += `<td class="name">ERROR: ${ response["error"] }</td>\n`;
|
||||
table += '<td class="desc ref"></td>\n';
|
||||
table += '<td class="help"></td>\n';
|
||||
table += '</tr>\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 += '</table>';
|
||||
}
|
||||
|
||||
@ -138,7 +137,7 @@ function gen_tablerow(options) {
|
||||
<td class="icon"><img class="uncolored-svg" src="${ options.dns_icon }"></td>
|
||||
<td class="name">${ options.dns_name }<small>${ options.dns_address }</small></td>
|
||||
<td class="desc ${ options.desc_color }">${ options.desc_text }</td>
|
||||
${ options.show_help ? '<td class="help"><button><i data-feather="help-circle"></i></button></td>' : '' }
|
||||
${ options.show_help ? '<td class="help"><button onclick="show_modal(\''+options.help_type+'\')"><i data-feather="help-circle"></i></button></td>' : '' }
|
||||
</tr>
|
||||
`
|
||||
}
|
||||
@ -163,6 +162,36 @@ function get_blocked_text(cause) {
|
||||
|
||||
|
||||
|
||||
function show_modal(type) {
|
||||
let msg;
|
||||
switch (type) {
|
||||
case 'search':
|
||||
msg = '<b>dns-watch.org</b> is a service that allows you to see how (mainly German) Internet Service Providers (ISPs) deal with Internet censorship. <a href="/why">More Information</a><br>In order to test a website for availability, enter the domain into the search bar and press Enter.<br><span>Try out these examples if you are unsure: gnu.org, wikipedia.org, s.to</span>';
|
||||
break;
|
||||
case 'reference':
|
||||
msg = 'In order to validate the DNS responses, we use <b>references</b>.<br>These references are from trustworthy DNS providers, such as Cloudflare or UncensoredDNS.<br>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 <b>CUII</b>.<br>CUII is a German institution that censors parts of the Internet because of so-called copyright claims.<br>For more information about the CUII, read our <a href="/why">Why?</a> page.'
|
||||
break;
|
||||
case 'random':
|
||||
msg = 'This domain uses <b>randomized responses</b>.<br>Some websites return different IP addresses for load balancing.<br>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!<br><span>Dialog message type: ${ type }</span>`
|
||||
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()
|
||||
}
|
||||
});
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user