📦 compile for jhtml
This commit is contained in:
parent
29f19aa90b
commit
71db246658
1
ui/jhtml-compat/feather.js
Normal file
1
ui/jhtml-compat/feather.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
feather.replace()
|
168
ui/jhtml-compat/index.css
Normal file
168
ui/jhtml-compat/index.css
Normal file
@ -0,0 +1,168 @@
|
|||||||
|
*stop()
|
||||||
|
* {
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
background-color: #21252b;
|
||||||
|
color: #d3d7de;
|
||||||
|
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", "Helvetica", sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, button {
|
||||||
|
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", "Helvetica", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
height: 4rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
#header button {
|
||||||
|
background-color: #21252b;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
color: #4c5666;
|
||||||
|
cursor: pointer;
|
||||||
|
float: right;
|
||||||
|
height: 3rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
width: 3rem;
|
||||||
|
}
|
||||||
|
#header button:hover {
|
||||||
|
background-color: #2c3139;
|
||||||
|
color: #99a2b2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
margin-bottom: 5rem;
|
||||||
|
margin-top: 5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#title h1 {
|
||||||
|
font-size: 4rem;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#search #searchbar .buttonspacer {
|
||||||
|
display: inline-block;
|
||||||
|
width: 3.5rem;
|
||||||
|
}
|
||||||
|
#search #searchbar input {
|
||||||
|
background-color: #2c3139;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.5rem 0 0 0.5rem;
|
||||||
|
color: #d3d7de;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 300;
|
||||||
|
height: 3rem;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
#search #searchbar input:focus {
|
||||||
|
background-color: #373e48;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
#search #searchbar button {
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 3rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
vertical-align: bottom;
|
||||||
|
width: 3rem;
|
||||||
|
}
|
||||||
|
#search #searchbar button#dnswatch-search-submit {
|
||||||
|
background-color: #373e48;
|
||||||
|
border-radius: 0 0.5rem 0.5rem 0;
|
||||||
|
color: #7c889c;
|
||||||
|
}
|
||||||
|
#search #searchbar button#dnswatch-search-submit:hover {
|
||||||
|
background-color: #424a56;
|
||||||
|
color: #d3d7de;
|
||||||
|
}
|
||||||
|
#search #searchbar button#help {
|
||||||
|
background-color: transparent;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
color: #4c5666;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
#search #searchbar button#help:hover {
|
||||||
|
background-color: #2c3139;
|
||||||
|
color: #99a2b2;
|
||||||
|
}
|
||||||
|
#search small {
|
||||||
|
display: block;
|
||||||
|
margin-top: 1rem;
|
||||||
|
color: #7c889c;
|
||||||
|
}
|
||||||
|
|
||||||
|
#results table {
|
||||||
|
margin-left: 25vw;
|
||||||
|
margin-top: 5rem;
|
||||||
|
width: 50vw;
|
||||||
|
}
|
||||||
|
#results table tr {
|
||||||
|
height: 3rem;
|
||||||
|
}
|
||||||
|
#results table tr td.status {
|
||||||
|
width: 3rem;
|
||||||
|
}
|
||||||
|
#results table tr td.status.check {
|
||||||
|
color: #98c379;
|
||||||
|
}
|
||||||
|
#results table tr td.status.cross {
|
||||||
|
color: #e06c75;
|
||||||
|
}
|
||||||
|
#results table tr td.status.ref {
|
||||||
|
color: #61afef;
|
||||||
|
}
|
||||||
|
#results table tr td.icon {
|
||||||
|
border-left: solid transparent 2rem;
|
||||||
|
width: 5rem;
|
||||||
|
}
|
||||||
|
#results table tr td.name small {
|
||||||
|
color: #7c889c;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
#results table tr td.desc {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
#results table tr td.desc.blocked {
|
||||||
|
color: #e06c75;
|
||||||
|
}
|
||||||
|
#results table tr td.desc.ref {
|
||||||
|
color: #61afef;
|
||||||
|
}
|
||||||
|
#results table tr td.help {
|
||||||
|
text-align: right;
|
||||||
|
width: 3rem;
|
||||||
|
}
|
||||||
|
#results table tr td.help button {
|
||||||
|
background-color: #21252b;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
color: #4c5666;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 2rem;
|
||||||
|
padding: 0.4rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
width: 2.1rem;
|
||||||
|
}
|
||||||
|
#results table tr td.help button:hover {
|
||||||
|
background-color: #2c3139;
|
||||||
|
color: #99a2b2;
|
||||||
|
}
|
||||||
|
#results table tr td.help button svg {
|
||||||
|
height: 1.2rem;
|
||||||
|
vertical-align: -0.2rem;
|
||||||
|
width: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=index.css.map */
|
1
ui/jhtml-compat/index.css.map
Normal file
1
ui/jhtml-compat/index.css.map
Normal file
@ -0,0 +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;;;AAEF;EACC;;AAEC;EACC;EACA;;AACD;EACC;EACA;EACA;EACA,OAxDO;EAyDP;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACF;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;EACA,OA/EK;;AAgFP;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAEJ;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;;AACA;EACC,OAvGK;;AAwGN;EACC,OAxGK;;AAyGN;EACC,OA7GK;;AA8GP;EACC;EACA;;AACD;EACC;EACA;;AACD;EACC;;AACA;EACC,OApHK;;AAqHN;EACC,OAzHK;;AA0HP;EACC;EACA;;AACA;EACC,kBA/HK;EAgIL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACD;EACC;EACA;EACA","file":"index.css"}
|
112
ui/jhtml-compat/index.js
Normal file
112
ui/jhtml-compat/index.js
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
*stop()
|
||||||
|
function dnswatch_search() {
|
||||||
|
// get domain
|
||||||
|
var domain = document.getElementById('dnswatch-search').value.toLowerCase();
|
||||||
|
|
||||||
|
// send api request
|
||||||
|
var request = new XMLHttpRequest();
|
||||||
|
request.open('POST', 'https://dns-watch.org/search', true);
|
||||||
|
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
||||||
|
|
||||||
|
request.onload = function() {
|
||||||
|
if (request.status >= 200 && request.status < 400) {
|
||||||
|
var response = JSON.parse(this.response);
|
||||||
|
console.log(response);
|
||||||
|
|
||||||
|
if (response['type'] == 'success') { // success
|
||||||
|
|
||||||
|
var table = '<table>\n';
|
||||||
|
//// reference dns
|
||||||
|
// status
|
||||||
|
table += '<tr>\n';
|
||||||
|
table += '<td class="status ref">\n';
|
||||||
|
table += `<i data-feather="${ response["data"]["reference"]["found"] ? "check" : "x" }"></i>\n`;
|
||||||
|
table += '</td>\n';
|
||||||
|
// provider
|
||||||
|
table += '<td class="icon">\n';
|
||||||
|
table += `<i data-feather="${ response["data"]["reference"]["icon"] }"></i>\n`;
|
||||||
|
table += '</td>\n'
|
||||||
|
// name and address
|
||||||
|
table += `<td class="name">${ response["data"]["reference"]["name"] }<small>${ response["data"]["reference"]["address"] }</small></td>\n`;
|
||||||
|
// reference info
|
||||||
|
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'
|
||||||
|
|
||||||
|
if (response['data']['reference']['found']) { // only if reference confirms
|
||||||
|
table += '<tr></tr>\n'; // spacer
|
||||||
|
//// search rows
|
||||||
|
response['data']['search'].forEach(i => {
|
||||||
|
console.log(i);
|
||||||
|
table += '<tr>\n';
|
||||||
|
// status
|
||||||
|
table += `<td class="status ${ i["matching"] ? "check" : "cross" }">\n`;
|
||||||
|
table += `<i data-feather="${ i["matching"] ? "check" : "x" }"></i>\n`;
|
||||||
|
table += '</td>\n';
|
||||||
|
// provider icon
|
||||||
|
table += '<td class="icon">\n';
|
||||||
|
table += `<i data-feather="${ i["icon"] }"></i>\n`;
|
||||||
|
table += '</td>\n';
|
||||||
|
// name and address
|
||||||
|
table += `<td class="name">${ i["name"] }<small>${ i["address"] }</small></td>\n`;
|
||||||
|
// status info
|
||||||
|
if (i['cause'] !== null) {
|
||||||
|
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>';
|
||||||
|
|
||||||
|
} else { // no success
|
||||||
|
|
||||||
|
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 += '</table>';
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('results').innerHTML = table;
|
||||||
|
feather.replace();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
request.send(`domain=${ window.btoa(domain) }`);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// add event triggers
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
document.getElementById('dnswatch-search-submit').addEventListener('click', (event) => {
|
||||||
|
dnswatch_search();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('dnswatch-search').addEventListener('keyup', (event) => {
|
||||||
|
if (event.keyCode === 13) {
|
||||||
|
event.preventDefault();
|
||||||
|
dnswatch_search();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
8
ui/jhtml-compat/index.php
Normal file
8
ui/jhtml-compat/index.php
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
*title("dnswatch")
|
||||||
|
*icon()
|
||||||
|
*style("///index.css")
|
||||||
|
*style("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;700&display=swap")
|
||||||
|
*js("///index.js")
|
||||||
|
*js("https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js")
|
||||||
|
*postjs("///feather.js")
|
||||||
|
<div id="header"><button><i data-feather="globe"></i></button><button><i data-feather="sun"></i></button></div><div id="title"><h1>dnswatch</h1></div><div id="search"><div id="searchbar"><div class="buttonspacer"></div><input id="dnswatch-search" type="text" placeholder="Search..."/><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.com", "s.to" or your own website!</small></div><div id="results"></div>
|
Reference in New Issue
Block a user