From 4b2781fba1b8f7a03d5f32a7b55fd3528fb80017 Mon Sep 17 00:00:00 2001 From: thetek42 <80534748+thetek42@users.noreply.github.com> Date: Fri, 2 Apr 2021 20:41:09 +0200 Subject: [PATCH] :sparkles: upload index frontend --- ui/raw/feather.js | 1 + ui/raw/index.js | 111 +++++++++++++++++++++++++++++++++++ ui/raw/index.pug | 16 ++++++ ui/raw/index.sass | 144 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 272 insertions(+) create mode 100644 ui/raw/feather.js create mode 100644 ui/raw/index.js create mode 100644 ui/raw/index.pug create mode 100644 ui/raw/index.sass diff --git a/ui/raw/feather.js b/ui/raw/feather.js new file mode 100644 index 0000000..8c5e9ff --- /dev/null +++ b/ui/raw/feather.js @@ -0,0 +1 @@ +feather.replace() diff --git a/ui/raw/index.js b/ui/raw/index.js new file mode 100644 index 0000000..0c4e962 --- /dev/null +++ b/ui/raw/index.js @@ -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 = '\n'; + //// reference dns + // status + table += '\n'; + table += '\n'; + // provider + table += '\n' + // name and address + table += `\n`; + // reference info + table += '\n'; + // help button + table += '\n'; + table += '\n' + + if (response['data']['reference']['found']) { // only if reference confirms + table += '\n'; // spacer + //// search rows + response['data']['search'].forEach(i => { + console.log(i); + table += '\n'; + // status + table += `\n'; + // provider icon + table += '\n'; + // name and address + table += `\n`; + // status info + if (i['cause'] !== null) { + if (i['cause'] == 'cuii') { + table += '\n'; + table += '\n' + } + } + table += '\n'; + }); + } + table += '
\n'; + table += `\n`; + table += '\n'; + table += `\n`; + table += '${ response["data"]["reference"]["name"] }${ response["data"]["reference"]["address"] }reference\n'; + table += '\n'; + table += '
\n`; + table += `\n`; + table += '\n'; + table += `\n`; + table += '${ i["name"] }${ i["address"] }blocked by cuii\n'; + table += '\n'; + table += '
'; + + } else { // no success + + var table = '\n'; + table += '\n'; + // status + table += '\n'; + // provider icon + table += '\n'; + // name and address + table += `\n`; + table += '\n'; + table += '\n'; + table += '\n'; + table += '
\n'; + table += '\n'; + table += '\n'; + table += '\n'; + table += 'ERROR: ${ response["error"] }
'; + + } + + 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(); + } + }); +}); diff --git a/ui/raw/index.pug b/ui/raw/index.pug new file mode 100644 index 0000000..75b6303 --- /dev/null +++ b/ui/raw/index.pug @@ -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 diff --git a/ui/raw/index.sass b/ui/raw/index.sass new file mode 100644 index 0000000..a8ab05f --- /dev/null +++ b/ui/raw/index.sass @@ -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