diff --git a/ui/jhtml-compat/feather.js b/ui/jhtml-compat/feather.js
new file mode 100644
index 0000000..8c5e9ff
--- /dev/null
+++ b/ui/jhtml-compat/feather.js
@@ -0,0 +1 @@
+feather.replace()
diff --git a/ui/jhtml-compat/index.css b/ui/jhtml-compat/index.css
new file mode 100644
index 0000000..e84d57e
--- /dev/null
+++ b/ui/jhtml-compat/index.css
@@ -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 */
diff --git a/ui/jhtml-compat/index.css.map b/ui/jhtml-compat/index.css.map
new file mode 100644
index 0000000..70e9bfb
--- /dev/null
+++ b/ui/jhtml-compat/index.css.map
@@ -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"}
\ No newline at end of file
diff --git a/ui/jhtml-compat/index.js b/ui/jhtml-compat/index.js
new file mode 100644
index 0000000..bfd5620
--- /dev/null
+++ b/ui/jhtml-compat/index.js
@@ -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 = '
\n';
+ //// reference dns
+ // status
+ table += '\n';
+ table += '\n';
+ table += `\n`;
+ table += ' | \n';
+ // provider
+ table += '\n';
+ table += `\n`;
+ table += ' | \n'
+ // name and address
+ table += `${ response["data"]["reference"]["name"] }${ response["data"]["reference"]["address"] } | \n`;
+ // reference info
+ table += 'reference | \n';
+ // help button
+ table += '\n';
+ table += '\n';
+ 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`;
+ table += `\n`;
+ table += ' | \n';
+ // provider icon
+ table += '\n';
+ table += `\n`;
+ table += ' | \n';
+ // name and address
+ table += `${ i["name"] }${ i["address"] } | \n`;
+ // status info
+ if (i['cause'] !== null) {
+ if (i['cause'] == 'cuii') {
+ table += 'blocked by cuii | \n';
+ table += '\n';
+ table += '\n';
+ table += ' | \n'
+ }
+ }
+ table += '
\n';
+ });
+ }
+ table += '
';
+
+ } else { // no success
+
+ var table = '\n';
+ table += '\n';
+ // status
+ table += '\n';
+ table += '\n';
+ table += ' | \n';
+ // provider icon
+ table += '\n';
+ table += '\n';
+ table += ' | \n';
+ // name and address
+ table += `ERROR: ${ response["error"] } | \n`;
+ table += ' | \n';
+ table += ' | \n';
+ table += '
\n';
+ 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();
+ }
+ });
+});
diff --git a/ui/jhtml-compat/index.php b/ui/jhtml-compat/index.php
new file mode 100644
index 0000000..ed25c22
--- /dev/null
+++ b/ui/jhtml-compat/index.php
@@ -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")
+dnswatch
Try "gnu.org", "wikipedia.com", "s.to" or your own website!
\ No newline at end of file