✨ offline nameserver icon & more #9
5
ui/html/index.css
vendored
5
ui/html/index.css
vendored
@ -136,6 +136,7 @@ input, button {
|
|||||||
#results small.random {
|
#results small.random {
|
||||||
color: #4c5666;
|
color: #4c5666;
|
||||||
display: block;
|
display: block;
|
||||||
|
font-size: 0.8rem;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@ -144,6 +145,7 @@ input, button {
|
|||||||
border: none;
|
border: none;
|
||||||
color: #626e83;
|
color: #626e83;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
font-size: 0.8rem;
|
||||||
outline: none;
|
outline: none;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
@ -166,6 +168,9 @@ input, button {
|
|||||||
#results table tr td.status.ref {
|
#results table tr td.status.ref {
|
||||||
color: #61afef;
|
color: #61afef;
|
||||||
}
|
}
|
||||||
|
#results table tr td.status.offline {
|
||||||
|
color: #d19a66;
|
||||||
|
}
|
||||||
#results table tr td.icon {
|
#results table tr td.icon {
|
||||||
border-left: solid transparent 2rem;
|
border-left: solid transparent 2rem;
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
|
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":"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"}
|
{"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"}
|
101
ui/html/index.js
vendored
101
ui/html/index.js
vendored
@ -34,28 +34,25 @@ function dnswatch_search() {
|
|||||||
var table = '<table>\n';
|
var table = '<table>\n';
|
||||||
|
|
||||||
//// reference dns
|
//// reference dns
|
||||||
|
let first_ref = true;
|
||||||
response['data']['reference'].forEach(i => {
|
response['data']['reference'].forEach(i => {
|
||||||
// status
|
|
||||||
table += '<tr>\n';
|
table += gen_tablerow({
|
||||||
table += '<td class="status ref">\n';
|
status_color: 'ref',
|
||||||
table += `<i data-feather="${ i["status"] ? "check" : "x" }"></i>\n`;
|
status_icon: get_status_icon(i['status']),
|
||||||
table += '</td>\n';
|
dns_icon: i['icon'],
|
||||||
// provider
|
dns_name: i['name'],
|
||||||
table += '<td class="icon">\n';
|
dns_address: i['address'],
|
||||||
table += `<img class="uncolored-svg" src="${ i["icon"] }">\n`;
|
desc_color: 'ref',
|
||||||
table += '</td>\n'
|
desc_text: 'reference',
|
||||||
// name and address
|
show_help: first_ref
|
||||||
table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`;
|
})
|
||||||
// reference info
|
first_ref = false;
|
||||||
table += '<td class="desc ref">reference</td>\n';
|
|
||||||
// help button
|
|
||||||
table += '<td class="help">\n';
|
|
||||||
table += '<button><i data-feather="help-circle"></i></button>\n';
|
|
||||||
table += '</td>\n';
|
|
||||||
table += '</tr>\n'
|
|
||||||
});
|
});
|
||||||
|
|
||||||
table += '</table>';
|
table += '</table>';
|
||||||
|
|
||||||
// randomized response message
|
// randomized response message
|
||||||
if (response['data']['randomized_response']) {
|
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>Learn more</button></small>\n';
|
||||||
@ -64,28 +61,22 @@ function dnswatch_search() {
|
|||||||
if (response['data']['found']) { // only if reference confirms
|
if (response['data']['found']) { // only if reference confirms
|
||||||
table += '<table><tr></tr>\n'; // spacer
|
table += '<table><tr></tr>\n'; // spacer
|
||||||
//// search rows
|
//// search rows
|
||||||
|
let causes = [];
|
||||||
response['data']['search'].forEach(i => {
|
response['data']['search'].forEach(i => {
|
||||||
table += '<tr>\n';
|
|
||||||
// status
|
table += gen_tablerow({
|
||||||
table += `<td class="status ${ i["status"] ? "check" : "cross" }">\n`;
|
status_color: get_status_color(i['status']),
|
||||||
table += `<i data-feather="${ i["status"] ? "check" : "x" }"></i>\n`;
|
status_icon: get_status_icon(i['status']),
|
||||||
table += '</td>\n';
|
dns_icon: i['icon'],
|
||||||
// provider icon
|
dns_name: i['name'],
|
||||||
table += '<td class="icon">\n';
|
dns_address: i['address'],
|
||||||
table += `<img class="uncolored-svg" src="${ i["icon"] }">\n`;
|
desc_color: i['cause'] !== null ? 'blocked': '',
|
||||||
table += '</td>\n';
|
desc_text: get_blocked_text(i['cause']),
|
||||||
// name and address
|
show_help: i['cause'] !== null && !causes.includes(i['cause'])
|
||||||
table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`;
|
})
|
||||||
// status info
|
|
||||||
if (i['cause'] !== null) {
|
if (i['cause'] !== null) causes.push(i['cause'])
|
||||||
if (i['cause'] == 'cuii') {
|
|
||||||
table += '<td class="desc blocked">blocked by cuii</td>\n';
|
|
||||||
table += '<td class="help">\n';
|
|
||||||
table += '<button><i data-feather="help-circle"></i></button>\n';
|
|
||||||
table += '</td>\n'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
table += '</tr>\n';
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
table += '</table>';
|
table += '</table>';
|
||||||
@ -140,6 +131,38 @@ function is_valid_domain(str) {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function gen_tablerow(options) {
|
||||||
|
return `
|
||||||
|
<tr>
|
||||||
|
<td class="status ${ options.status_color }"><i data-feather="${ options.status_icon }"></i></td>
|
||||||
|
<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>' : '' }
|
||||||
|
</tr>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
// add event triggers
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
document.getElementById('dnswatch-search-submit').addEventListener('click', (event) => {
|
document.getElementById('dnswatch-search-submit').addEventListener('click', (event) => {
|
||||||
|
5
ui/jhtml-compat/index.css
vendored
5
ui/jhtml-compat/index.css
vendored
@ -137,6 +137,7 @@ input, button {
|
|||||||
#results small.random {
|
#results small.random {
|
||||||
color: #4c5666;
|
color: #4c5666;
|
||||||
display: block;
|
display: block;
|
||||||
|
font-size: 0.8rem;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@ -145,6 +146,7 @@ input, button {
|
|||||||
border: none;
|
border: none;
|
||||||
color: #626e83;
|
color: #626e83;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
font-size: 0.8rem;
|
||||||
outline: none;
|
outline: none;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
@ -167,6 +169,9 @@ input, button {
|
|||||||
#results table tr td.status.ref {
|
#results table tr td.status.ref {
|
||||||
color: #61afef;
|
color: #61afef;
|
||||||
}
|
}
|
||||||
|
#results table tr td.status.offline {
|
||||||
|
color: #d19a66;
|
||||||
|
}
|
||||||
#results table tr td.icon {
|
#results table tr td.icon {
|
||||||
border-left: solid transparent 2rem;
|
border-left: solid transparent 2rem;
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
|
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":"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"}
|
{"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"}
|
101
ui/jhtml-compat/index.js
vendored
101
ui/jhtml-compat/index.js
vendored
@ -35,28 +35,25 @@ function dnswatch_search() {
|
|||||||
var table = '<table>\n';
|
var table = '<table>\n';
|
||||||
|
|
||||||
//// reference dns
|
//// reference dns
|
||||||
|
let first_ref = true;
|
||||||
response['data']['reference'].forEach(i => {
|
response['data']['reference'].forEach(i => {
|
||||||
// status
|
|
||||||
table += '<tr>\n';
|
table += gen_tablerow({
|
||||||
table += '<td class="status ref">\n';
|
status_color: 'ref',
|
||||||
table += `<i data-feather="${ i["status"] ? "check" : "x" }"></i>\n`;
|
status_icon: get_status_icon(i['status']),
|
||||||
table += '</td>\n';
|
dns_icon: i['icon'],
|
||||||
// provider
|
dns_name: i['name'],
|
||||||
table += '<td class="icon">\n';
|
dns_address: i['address'],
|
||||||
table += `<img class="uncolored-svg" src="${ i["icon"] }">\n`;
|
desc_color: 'ref',
|
||||||
table += '</td>\n'
|
desc_text: 'reference',
|
||||||
// name and address
|
show_help: first_ref
|
||||||
table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`;
|
})
|
||||||
// reference info
|
first_ref = false;
|
||||||
table += '<td class="desc ref">reference</td>\n';
|
|
||||||
// help button
|
|
||||||
table += '<td class="help">\n';
|
|
||||||
table += '<button><i data-feather="help-circle"></i></button>\n';
|
|
||||||
table += '</td>\n';
|
|
||||||
table += '</tr>\n'
|
|
||||||
});
|
});
|
||||||
|
|
||||||
table += '</table>';
|
table += '</table>';
|
||||||
|
|
||||||
// randomized response message
|
// randomized response message
|
||||||
if (response['data']['randomized_response']) {
|
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>Learn more</button></small>\n';
|
||||||
@ -65,28 +62,22 @@ function dnswatch_search() {
|
|||||||
if (response['data']['found']) { // only if reference confirms
|
if (response['data']['found']) { // only if reference confirms
|
||||||
table += '<table><tr></tr>\n'; // spacer
|
table += '<table><tr></tr>\n'; // spacer
|
||||||
//// search rows
|
//// search rows
|
||||||
|
let causes = [];
|
||||||
response['data']['search'].forEach(i => {
|
response['data']['search'].forEach(i => {
|
||||||
table += '<tr>\n';
|
|
||||||
// status
|
table += gen_tablerow({
|
||||||
table += `<td class="status ${ i["status"] ? "check" : "cross" }">\n`;
|
status_color: get_status_color(i['status']),
|
||||||
table += `<i data-feather="${ i["status"] ? "check" : "x" }"></i>\n`;
|
status_icon: get_status_icon(i['status']),
|
||||||
table += '</td>\n';
|
dns_icon: i['icon'],
|
||||||
// provider icon
|
dns_name: i['name'],
|
||||||
table += '<td class="icon">\n';
|
dns_address: i['address'],
|
||||||
table += `<img class="uncolored-svg" src="${ i["icon"] }">\n`;
|
desc_color: i['cause'] !== null ? 'blocked': '',
|
||||||
table += '</td>\n';
|
desc_text: get_blocked_text(i['cause']),
|
||||||
// name and address
|
show_help: i['cause'] !== null && !causes.includes(i['cause'])
|
||||||
table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`;
|
})
|
||||||
// status info
|
|
||||||
if (i['cause'] !== null) {
|
if (i['cause'] !== null) causes.push(i['cause'])
|
||||||
if (i['cause'] == 'cuii') {
|
|
||||||
table += '<td class="desc blocked">blocked by cuii</td>\n';
|
|
||||||
table += '<td class="help">\n';
|
|
||||||
table += '<button><i data-feather="help-circle"></i></button>\n';
|
|
||||||
table += '</td>\n'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
table += '</tr>\n';
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
table += '</table>';
|
table += '</table>';
|
||||||
@ -141,6 +132,38 @@ function is_valid_domain(str) {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function gen_tablerow(options) {
|
||||||
|
return `
|
||||||
|
<tr>
|
||||||
|
<td class="status ${ options.status_color }"><i data-feather="${ options.status_icon }"></i></td>
|
||||||
|
<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>' : '' }
|
||||||
|
</tr>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
// add event triggers
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
document.getElementById('dnswatch-search-submit').addEventListener('click', (event) => {
|
document.getElementById('dnswatch-search-submit').addEventListener('click', (event) => {
|
||||||
|
101
ui/raw/index.js
101
ui/raw/index.js
@ -34,28 +34,25 @@ function dnswatch_search() {
|
|||||||
var table = '<table>\n';
|
var table = '<table>\n';
|
||||||
|
|
||||||
//// reference dns
|
//// reference dns
|
||||||
|
let first_ref = true;
|
||||||
response['data']['reference'].forEach(i => {
|
response['data']['reference'].forEach(i => {
|
||||||
// status
|
|
||||||
table += '<tr>\n';
|
table += gen_tablerow({
|
||||||
table += '<td class="status ref">\n';
|
status_color: 'ref',
|
||||||
table += `<i data-feather="${ i["status"] ? "check" : "x" }"></i>\n`;
|
status_icon: get_status_icon(i['status']),
|
||||||
table += '</td>\n';
|
dns_icon: i['icon'],
|
||||||
// provider
|
dns_name: i['name'],
|
||||||
table += '<td class="icon">\n';
|
dns_address: i['address'],
|
||||||
table += `<img class="uncolored-svg" src="${ i["icon"] }">\n`;
|
desc_color: 'ref',
|
||||||
table += '</td>\n'
|
desc_text: 'reference',
|
||||||
// name and address
|
show_help: first_ref
|
||||||
table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`;
|
})
|
||||||
// reference info
|
first_ref = false;
|
||||||
table += '<td class="desc ref">reference</td>\n';
|
|
||||||
// help button
|
|
||||||
table += '<td class="help">\n';
|
|
||||||
table += '<button><i data-feather="help-circle"></i></button>\n';
|
|
||||||
table += '</td>\n';
|
|
||||||
table += '</tr>\n'
|
|
||||||
});
|
});
|
||||||
|
|
||||||
table += '</table>';
|
table += '</table>';
|
||||||
|
|
||||||
// randomized response message
|
// randomized response message
|
||||||
if (response['data']['randomized_response']) {
|
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>Learn more</button></small>\n';
|
||||||
@ -64,28 +61,22 @@ function dnswatch_search() {
|
|||||||
if (response['data']['found']) { // only if reference confirms
|
if (response['data']['found']) { // only if reference confirms
|
||||||
table += '<table><tr></tr>\n'; // spacer
|
table += '<table><tr></tr>\n'; // spacer
|
||||||
//// search rows
|
//// search rows
|
||||||
|
let causes = [];
|
||||||
response['data']['search'].forEach(i => {
|
response['data']['search'].forEach(i => {
|
||||||
table += '<tr>\n';
|
|
||||||
// status
|
table += gen_tablerow({
|
||||||
table += `<td class="status ${ i["status"] ? "check" : "cross" }">\n`;
|
status_color: get_status_color(i['status']),
|
||||||
table += `<i data-feather="${ i["status"] ? "check" : "x" }"></i>\n`;
|
status_icon: get_status_icon(i['status']),
|
||||||
table += '</td>\n';
|
dns_icon: i['icon'],
|
||||||
// provider icon
|
dns_name: i['name'],
|
||||||
table += '<td class="icon">\n';
|
dns_address: i['address'],
|
||||||
table += `<img class="uncolored-svg" src="${ i["icon"] }">\n`;
|
desc_color: i['cause'] !== null ? 'blocked': '',
|
||||||
table += '</td>\n';
|
desc_text: get_blocked_text(i['cause']),
|
||||||
// name and address
|
show_help: i['cause'] !== null && !causes.includes(i['cause'])
|
||||||
table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`;
|
})
|
||||||
// status info
|
|
||||||
if (i['cause'] !== null) {
|
if (i['cause'] !== null) causes.push(i['cause'])
|
||||||
if (i['cause'] == 'cuii') {
|
|
||||||
table += '<td class="desc blocked">blocked by cuii</td>\n';
|
|
||||||
table += '<td class="help">\n';
|
|
||||||
table += '<button><i data-feather="help-circle"></i></button>\n';
|
|
||||||
table += '</td>\n'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
table += '</tr>\n';
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
table += '</table>';
|
table += '</table>';
|
||||||
@ -140,6 +131,38 @@ function is_valid_domain(str) {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function gen_tablerow(options) {
|
||||||
|
return `
|
||||||
|
<tr>
|
||||||
|
<td class="status ${ options.status_color }"><i data-feather="${ options.status_icon }"></i></td>
|
||||||
|
<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>' : '' }
|
||||||
|
</tr>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
// add event triggers
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
document.getElementById('dnswatch-search-submit').addEventListener('click', (event) => {
|
document.getElementById('dnswatch-search-submit').addEventListener('click', (event) => {
|
||||||
|
@ -1,10 +1,11 @@
|
|||||||
// variables
|
// variables
|
||||||
$c-bg: #21252b
|
$c-bg: #21252b
|
||||||
$c-blue: #61afef
|
$c-blue: #61afef
|
||||||
$c-fg: #d3d7de
|
$c-fg: #d3d7de
|
||||||
$c-green: #98c379
|
$c-green: #98c379
|
||||||
$c-red: #e06c75
|
$c-orange: #d19a66
|
||||||
$f-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Helvetica Neue', 'Helvetica', sans-serif
|
$c-red: #e06c75
|
||||||
|
$f-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Helvetica Neue', 'Helvetica', sans-serif
|
||||||
|
|
||||||
// styles
|
// styles
|
||||||
*
|
*
|
||||||
@ -126,6 +127,7 @@ input, button
|
|||||||
small.random
|
small.random
|
||||||
color: darken($c-fg, 50%)
|
color: darken($c-fg, 50%)
|
||||||
display: block
|
display: block
|
||||||
|
font-size: .8rem
|
||||||
margin-top: 1rem
|
margin-top: 1rem
|
||||||
text-align: center
|
text-align: center
|
||||||
button
|
button
|
||||||
@ -133,6 +135,7 @@ input, button
|
|||||||
border: none
|
border: none
|
||||||
color: darken($c-fg, 40%)
|
color: darken($c-fg, 40%)
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
font-size: .8rem
|
||||||
outline: none
|
outline: none
|
||||||
text-decoration: underline
|
text-decoration: underline
|
||||||
|
|
||||||
@ -149,6 +152,8 @@ input, button
|
|||||||
color: $c-red
|
color: $c-red
|
||||||
&.ref
|
&.ref
|
||||||
color: $c-blue
|
color: $c-blue
|
||||||
|
&.offline
|
||||||
|
color: $c-orange
|
||||||
td.icon
|
td.icon
|
||||||
border-left: solid transparent 2rem
|
border-left: solid transparent 2rem
|
||||||
width: 3rem
|
width: 3rem
|
||||||
|
Reference in New Issue
Block a user