✨ upload index frontend
This commit is contained in:
parent
86cd1e70b3
commit
4b2781fba1
1
ui/raw/feather.js
Normal file
1
ui/raw/feather.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
feather.replace()
|
111
ui/raw/index.js
Normal file
111
ui/raw/index.js
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
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();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
16
ui/raw/index.pug
Normal file
16
ui/raw/index.pug
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
#header
|
||||||
|
button: i( data-feather='globe' )
|
||||||
|
button: i( data-feather='sun' )
|
||||||
|
|
||||||
|
#title
|
||||||
|
h1 dnswatch
|
||||||
|
|
||||||
|
#search
|
||||||
|
#searchbar
|
||||||
|
.buttonspacer
|
||||||
|
input#dnswatch-search( type='text' placeholder='Search...' )
|
||||||
|
button#dnswatch-search-submit: i( data-feather='search' )
|
||||||
|
button#help: i( data-feather='help-circle' )
|
||||||
|
small Try "gnu.org", "wikipedia.com", "s.to" or your own website!
|
||||||
|
|
||||||
|
#results
|
144
ui/raw/index.sass
Normal file
144
ui/raw/index.sass
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
// variables
|
||||||
|
$c-bg: #21252b
|
||||||
|
$c-blue: #61afef
|
||||||
|
$c-fg: #d3d7de
|
||||||
|
$c-green: #98c379
|
||||||
|
$c-red: #e06c75
|
||||||
|
$f-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Helvetica Neue', 'Helvetica', sans-serif
|
||||||
|
|
||||||
|
// styles
|
||||||
|
*
|
||||||
|
box-sizing: border-box !important
|
||||||
|
|
||||||
|
html, body
|
||||||
|
background-color: $c-bg
|
||||||
|
color: $c-fg
|
||||||
|
font-family: $f-sans
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
overflow-x: hidden
|
||||||
|
|
||||||
|
input, button
|
||||||
|
font-family: $f-sans
|
||||||
|
|
||||||
|
#header
|
||||||
|
height: 4rem
|
||||||
|
padding: .5rem
|
||||||
|
width: 100vw
|
||||||
|
button
|
||||||
|
background-color: $c-bg
|
||||||
|
border: none
|
||||||
|
border-radius: .5rem
|
||||||
|
color: darken($c-fg, 50%)
|
||||||
|
cursor: pointer
|
||||||
|
float: right
|
||||||
|
height: 3rem
|
||||||
|
transition: all .3s ease
|
||||||
|
width: 3rem
|
||||||
|
&:hover
|
||||||
|
background-color: lighten($c-bg, 5%)
|
||||||
|
color: darken($c-fg, 20%)
|
||||||
|
|
||||||
|
#title
|
||||||
|
margin-bottom: 5rem
|
||||||
|
margin-top: 5rem
|
||||||
|
text-align: center
|
||||||
|
h1
|
||||||
|
font-size: 4rem
|
||||||
|
font-weight: 200
|
||||||
|
|
||||||
|
#search
|
||||||
|
text-align: center
|
||||||
|
#searchbar
|
||||||
|
.buttonspacer
|
||||||
|
display: inline-block
|
||||||
|
width: 3.5rem
|
||||||
|
input
|
||||||
|
background-color: lighten($c-bg, 5%)
|
||||||
|
border: none
|
||||||
|
border-radius: .5rem 0 0 .5rem
|
||||||
|
color: $c-fg
|
||||||
|
font-size: 1.5rem
|
||||||
|
font-weight: 300
|
||||||
|
height: 3rem
|
||||||
|
padding: .5rem 1rem
|
||||||
|
transition: all .3s ease
|
||||||
|
vertical-align: bottom
|
||||||
|
&:focus
|
||||||
|
background-color: lighten($c-bg, 10%)
|
||||||
|
outline: none
|
||||||
|
button
|
||||||
|
border: none
|
||||||
|
cursor: pointer
|
||||||
|
height: 3rem
|
||||||
|
transition: all .3s ease
|
||||||
|
vertical-align: bottom
|
||||||
|
width: 3rem
|
||||||
|
&#dnswatch-search-submit
|
||||||
|
background-color: lighten($c-bg, 10%)
|
||||||
|
border-radius: 0 .5rem .5rem 0
|
||||||
|
color: darken($c-fg, 30%)
|
||||||
|
&:hover
|
||||||
|
background-color: lighten($c-bg, 15%)
|
||||||
|
color: $c-fg
|
||||||
|
&#help
|
||||||
|
background-color: transparent
|
||||||
|
border-radius: .5rem
|
||||||
|
color: darken($c-fg, 50%)
|
||||||
|
margin-left: .5rem
|
||||||
|
&:hover
|
||||||
|
background-color: lighten($c-bg, 5%)
|
||||||
|
color: darken($c-fg, 20%)
|
||||||
|
|
||||||
|
small
|
||||||
|
display: block
|
||||||
|
margin-top: 1rem
|
||||||
|
color: darken($c-fg, 30%)
|
||||||
|
|
||||||
|
#results
|
||||||
|
table
|
||||||
|
margin-left: 25vw
|
||||||
|
margin-top: 5rem
|
||||||
|
width: 50vw
|
||||||
|
tr
|
||||||
|
height: 3rem
|
||||||
|
td.status
|
||||||
|
width: 3rem
|
||||||
|
&.check
|
||||||
|
color: $c-green
|
||||||
|
&.cross
|
||||||
|
color: $c-red
|
||||||
|
&.ref
|
||||||
|
color: $c-blue
|
||||||
|
td.icon
|
||||||
|
border-left: solid transparent 2rem
|
||||||
|
width: 5rem
|
||||||
|
td.name small
|
||||||
|
color: darken($c-fg, 30%)
|
||||||
|
margin-left: 1rem
|
||||||
|
td.desc
|
||||||
|
text-align: right
|
||||||
|
&.blocked
|
||||||
|
color: $c-red
|
||||||
|
&.ref
|
||||||
|
color: $c-blue
|
||||||
|
td.help
|
||||||
|
text-align: right
|
||||||
|
width: 3rem
|
||||||
|
button
|
||||||
|
background-color: $c-bg
|
||||||
|
border: none
|
||||||
|
border-radius: .5rem
|
||||||
|
color: darken($c-fg, 50%)
|
||||||
|
cursor: pointer
|
||||||
|
height: 2rem
|
||||||
|
padding: .4rem
|
||||||
|
transition: all .3s ease
|
||||||
|
width: 2.1rem
|
||||||
|
&:hover
|
||||||
|
background-color: lighten($c-bg, 5%)
|
||||||
|
color: darken($c-fg, 20%)
|
||||||
|
svg
|
||||||
|
height: 1.2rem
|
||||||
|
vertical-align: -.2rem
|
||||||
|
width: 1.2rem
|
Reference in New Issue
Block a user