Refactor web frontend and remove unnecessary dependencies.
- Eliminate frontend JS build step completely: (remove dep: NodeJS, npx, tailwind, postcss, autoprefixer) - Declutter and cleanup index.html (8.49 KB to 3.4 KB) = ~60% savings. - Replace tailwind with custom CSS (10.64 KB to 1.96 KB) = ~81% savings. - Remove Google font (~100 KB) as there is very little text on the page. - Refactor and cleanup main.js and remove tailwind styling logic. (2.82 KB to 1.12 KB) = ~60% savings. - Net static asset reduction = 21.95 KB to 6.48 KB = ~70% savings apart from the 100+ KB elimination of Google fonts.pull/18/head
Kailash Nadh
Karan Sharma
parent
0dc61ac8ec
commit
b8ba782cf3
10
Makefile
10
Makefile
|
|
@ -9,18 +9,10 @@ VERSION := ${HASH}
|
|||
build-cli:
|
||||
go build -o ${CLI_BIN} -ldflags="-X 'main.buildVersion=${VERSION}' -X 'main.buildDate=${BUILD_DATE}'" ./cmd/doggo/cli/
|
||||
|
||||
.PHONY: build-frontend
|
||||
build-frontend:
|
||||
cd cmd/doggo/api && NODE_ENV=production npx tailwindcss build -o ./assets/tailwind.css
|
||||
|
||||
.PHONY: build-api
|
||||
build-api:
|
||||
go build -o ${API_BIN} -ldflags="-X 'main.buildVersion=${VERSION}' -X 'main.buildDate=${BUILD_DATE}'" ./cmd/doggo/api/
|
||||
|
||||
.PHONY: deps
|
||||
deps:
|
||||
cd cmd/doggo/api && npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
|
||||
|
||||
.PHONY: build
|
||||
build: build-api build-cli
|
||||
|
||||
|
|
@ -29,7 +21,7 @@ run-cli: build-cli ## Build and Execute the CLI binary after the build step.
|
|||
${CLI_BIN}
|
||||
|
||||
.PHONY: run-api
|
||||
run-api: build-frontend build-api ## Build and Execute the API binary after the build step.
|
||||
run-api: build-api ## Build and Execute the API binary after the build step.
|
||||
${API_BIN} --config config-api-sample.toml
|
||||
|
||||
.PHONY: clean
|
||||
|
|
|
|||
|
|
@ -1,154 +1,90 @@
|
|||
const $ = document.querySelector.bind(document);
|
||||
const $new = document.createElement.bind(document);
|
||||
const apiURL = "/api/lookup/";
|
||||
const isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
|
||||
|
||||
function handleNSChange() {
|
||||
if ($('select[name=ns]').value == "custom") {
|
||||
$('div[id=custom_ns]').classList.remove("hidden");
|
||||
$('div[id=ns]').classList.add("hidden");
|
||||
} else {
|
||||
$('div[id=custom_ns]').classList.add("hidden");
|
||||
$('div[id=ns]').classList.remove("hidden");
|
||||
$('input[name=ns]').placeholder = $('select[name=ns]').value;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Source: https://stackoverflow.com/a/1026087.
|
||||
function capitalizeFirstLetter(string) {
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
handleNSChange();
|
||||
});
|
||||
const $show = (el) => {
|
||||
el.classList.remove('hidden');
|
||||
};
|
||||
const $hide = (el) => {
|
||||
el.classList.add('hidden');
|
||||
};
|
||||
|
||||
const apiURL = '/api/lookup/';
|
||||
|
||||
(function () {
|
||||
const fields = ['name', 'address', 'type', 'ttl', 'rtt', 'nameserver'];
|
||||
const fields = ['name', 'address', 'type', 'ttl', 'rtt'];
|
||||
|
||||
// createRow creates a table row with the given cell values.
|
||||
function createRow(item) {
|
||||
const tr = $new('tr');
|
||||
fields.forEach((f) => {
|
||||
const td = $new('td');
|
||||
td.classList.add("px-6", "py-4", "whitespace-nowrap", "text-sm");
|
||||
if (f == "ttl" || f == "rtt" || f == "nameserver") {
|
||||
td.classList.add("text-gray-500");
|
||||
} else {
|
||||
td.classList.add("text-gray-900");
|
||||
}
|
||||
if (f == "name") {
|
||||
td.classList.add("font-semibold");
|
||||
}
|
||||
if (f == "type") {
|
||||
td.innerHTML = '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">' + item[f] + '</span>';
|
||||
} else {
|
||||
td.innerText = item[f];
|
||||
}
|
||||
td.innerText = item[f];
|
||||
td.classList.add(f);
|
||||
tr.appendChild(td);
|
||||
});
|
||||
return tr;
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const tbody = $('#table tbody'),
|
||||
tbl = $('#table');
|
||||
tbody.innerHTML = '';
|
||||
$hide(tbl);
|
||||
|
||||
// `createList` creates a table row with the given cell values.
|
||||
function createList(item) {
|
||||
const ul = $new('ul');
|
||||
ul.classList.add("m-4", "block", "bg-indigo-100");
|
||||
fields.forEach((f) => {
|
||||
const li = $new('li');
|
||||
const span = $new('span');
|
||||
span.classList.add("p-2", "text-gray-500", "font-semibold");
|
||||
span.innerText = capitalizeFirstLetter(f) + ': ' + item[f]
|
||||
li.appendChild(span);
|
||||
ul.appendChild(li);
|
||||
});
|
||||
return ul;
|
||||
}
|
||||
const q = $('input[name=q]').value.trim(),
|
||||
typ = $('select[name=type]').value,
|
||||
addr = $('input[name=address]').value.trim();
|
||||
|
||||
function prepareNSAddr(ns) {
|
||||
switch (ns) {
|
||||
// If it's a custom nameserver, get the value from the user's input.
|
||||
case "custom":
|
||||
return $('input[name=custom_ns]').value.trim()
|
||||
// Else get it from the select dropdown field.
|
||||
default:
|
||||
return $('select[name=ns]').value.trim()
|
||||
}
|
||||
}
|
||||
// Post to the API.
|
||||
const req = await fetch(apiURL, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ query: [q,], type: [typ,], nameservers: [addr,] })
|
||||
});
|
||||
|
||||
const postForm = body => {
|
||||
return fetch(apiURL, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body
|
||||
});
|
||||
};
|
||||
const res = await req.json();
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const tbl = $('table tbody');
|
||||
const list = $('div[id=mobile-answers-sec]');
|
||||
tbl.innerHTML = '';
|
||||
list.innerHTML = '';
|
||||
|
||||
$('p[id=empty-name-sec]').classList.add("hidden");
|
||||
const errSec = $('div[id=api-error-sec]');
|
||||
errSec.classList.add("hidden");
|
||||
|
||||
const q = $('input[name=q]').value.trim(), typ = $('select[name=type]').value;
|
||||
const ns = $('select[name=ns]').value;
|
||||
|
||||
if (!q) {
|
||||
$('p[id=empty-name-sec]').classList.remove("hidden");
|
||||
throw ('Invalid query name.');
|
||||
}
|
||||
|
||||
if (!q || !typ || !ns) {
|
||||
throw ('Invalid or empty query params.');
|
||||
}
|
||||
|
||||
const nsAddr = prepareNSAddr(ns);
|
||||
const body = JSON.stringify({ query: [q,], type: [typ,], nameservers: [nsAddr,] });
|
||||
|
||||
const response = await postForm(body);
|
||||
const res = await response.json();
|
||||
if (res.status != "success") {
|
||||
// get error message from body or default to response statusText
|
||||
if (res.status != 'success') {
|
||||
const error = (res && res.message) || response.statusText;
|
||||
errSec.classList.remove("hidden");
|
||||
errSec.innerHTML = '<p class="text-xl text-red-500">' + error + '</p>'
|
||||
throw (error);
|
||||
throw(error);
|
||||
return;
|
||||
}
|
||||
|
||||
if (res.data[0].answers == null) {
|
||||
const errSec = $('div[id=api-error-sec]');
|
||||
errSec.classList.remove("hidden");
|
||||
errSec.innerHTML = '<p class="text-xl text-red-500">' + 'No records found!' + '</p>'
|
||||
return null;
|
||||
throw('No records found.');
|
||||
return;
|
||||
}
|
||||
|
||||
$('div[id=answer_sec]').classList.remove("hidden");
|
||||
|
||||
if (isMobile === true) {
|
||||
list.classList.remove("hidden");
|
||||
res.data[0].answers.forEach((item) => {
|
||||
console.log("appending", item)
|
||||
list.appendChild(createList(item));
|
||||
});
|
||||
|
||||
} else {
|
||||
res.data[0].answers.forEach((item) => {
|
||||
tbl.appendChild(createRow(item));
|
||||
});
|
||||
}
|
||||
res.data[0].answers.forEach((item) => {
|
||||
tbody.appendChild(createRow(item));
|
||||
});
|
||||
|
||||
$show(tbl);
|
||||
};
|
||||
|
||||
document.querySelector('form').addEventListener('submit', handleSubmit);
|
||||
// Capture the form submit.
|
||||
$('#form').onsubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const msg = $('#message');
|
||||
$hide(msg);
|
||||
|
||||
try {
|
||||
await handleSubmit();
|
||||
} catch(e) {
|
||||
msg.innerText = e.toString();
|
||||
$show(msg);
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
|
||||
// Change the address on ns change.
|
||||
const ns = $("#ns"), addr = $("#address");
|
||||
addr.value = ns.value;
|
||||
|
||||
ns.onchange = (e) => {
|
||||
addr.value = e.target.value;
|
||||
if(addr.value === "") {
|
||||
addr.focus();
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
|
@ -0,0 +1,195 @@
|
|||
:root {
|
||||
--primary: #4338ca;
|
||||
--secondary: #333;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Segoe UI", "Helvetica Neue", Inter, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary);
|
||||
}
|
||||
a:hover {
|
||||
color: #111;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
input, select, button {
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ddd;
|
||||
font-size: 1.3rem;
|
||||
padding: 10px 15px;
|
||||
width: 100%;
|
||||
}
|
||||
input:focus, select:focus {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
button {
|
||||
border-color: var(--primary);
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
padding: 10px 30px;
|
||||
}
|
||||
button:focus,
|
||||
button:hover {
|
||||
border-color: var(--secondary);
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.box {
|
||||
box-shadow: 1px 1px 4px #eee;
|
||||
border: 1px solid #eee;
|
||||
padding: 30px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin: 60px auto 30px auto;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.logo span {
|
||||
color: var(--primary);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.row .field {
|
||||
flex: 50%;
|
||||
}
|
||||
.row .field:last-child {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.submit {
|
||||
text-align: right;
|
||||
}
|
||||
.help {
|
||||
color: #666;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
#message {
|
||||
color: #ff3300;
|
||||
}
|
||||
|
||||
table.box {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
table th {
|
||||
background: #f9fafb;
|
||||
color: #666;
|
||||
font-size: 0.875em;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
table th, tbody td {
|
||||
padding: 10px 15px;
|
||||
text-align: left;
|
||||
}
|
||||
td.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
th.type, td.type {
|
||||
text-align: center;
|
||||
}
|
||||
td.type {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: 60px 0 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
footer a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.main {
|
||||
margin: 60px 30px 30px 30px;
|
||||
}
|
||||
.box {
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: block;
|
||||
}
|
||||
.field {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
.row .field:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
.submit button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
table th {
|
||||
width: 100%;
|
||||
}
|
||||
table tr {
|
||||
border-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
table td {
|
||||
border: 1px solid #eee;
|
||||
margin: 0 -1px -1px 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
word-wrap:break-word;
|
||||
}
|
||||
table th.type, table td.type {
|
||||
text-align: left;
|
||||
}
|
||||
table td span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,175 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Doggo DNS</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
|
||||
|
||||
<link href="assets/tailwind.css" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link href="assets/style.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<noscript>
|
||||
<div class="noscript">
|
||||
<h2>This service requires Javascript</h2>
|
||||
<p>Please enable JavaScript so that the form data can be sent to the API backend.</p>
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
<body class="p-10 max-w-screen-lg m-auto min-h-screen flex flex-col">
|
||||
<header class="mt-10">
|
||||
<h1 class="text-5xl font-black text-center"><span class="text-indigo-700">Doggo</span> DNS</h1>
|
||||
<body>
|
||||
<div class="main">
|
||||
<header>
|
||||
<h1 class="logo"><span>Doggo</span> DNS</h1>
|
||||
</header>
|
||||
<main id="app" class="main flex flex-col flex-grow">
|
||||
<form>
|
||||
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col my-2">
|
||||
<div class="-mx-3 md:flex mb-6">
|
||||
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
|
||||
<label>
|
||||
Domain Name
|
||||
</label>
|
||||
<input required autofocus name="q" type="text" placeholder="domain.tld"
|
||||
class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
|
||||
<p id="empty-name-sec" class="hidden text-red-500 text-xs">Please enter a domain name to
|
||||
query.
|
||||
</p>
|
||||
</div>
|
||||
<div class="md:w-1/2 px-3">
|
||||
<label>
|
||||
Query Type
|
||||
</label>
|
||||
<select name="type"
|
||||
class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
|
||||
<option default>A</option>
|
||||
<option>AAAA</option>
|
||||
<option>CAA</option>
|
||||
<option>CNAME</option>
|
||||
<option>MX</option>
|
||||
<option>NAPTR</option>
|
||||
<option>NS</option>
|
||||
<option>PTR</option>
|
||||
<option>SOA</option>
|
||||
<option>SRV</option>
|
||||
<option>TXT</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="-mx-3 md:flex">
|
||||
<div class="md:w-1/2 px-3 mb-6 md:mb-0">
|
||||
<label>
|
||||
Nameserver
|
||||
</label>
|
||||
<select name="ns" onchange="handleNSChange()"
|
||||
class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
|
||||
<option default value="tcp://1.1.1.1:53">Cloudflare</option>
|
||||
<option value="https://cloudflare-dns.com/dns-query">Cloudflare (DOH)</option>
|
||||
<option value="tcp://8.8.8.8:53">Google</option>
|
||||
<option value="tcp://9.9.9.9:53">Quad9</option>
|
||||
<option value="custom">Custom</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="md:w-1/2 px-3">
|
||||
<label for="grid-zip">
|
||||
Address
|
||||
</label>
|
||||
<div id="custom_ns" class="hidden">
|
||||
<input name="custom_ns" type="text" placeholder="Enter Nameserver address"
|
||||
class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
|
||||
<p class="mt-2 text-grey-darker text-xs">To use different protocols like DOH, DOT etc. refer
|
||||
to the
|
||||
instructions <a class="font-semibold"
|
||||
href="https://github.com/mr-karan/doggo#transport-options">here</a>.</p>
|
||||
</div>
|
||||
<div id="ns">
|
||||
<input readonly name="ns" type="text"
|
||||
class="bg-gray-50 w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 text-right">
|
||||
<button class="w-full sm:w-auto flex-none bg-indigo-700 hover:bg-indigo-500
|
||||
text-white text-lg leading-6 font-semibold py-3 px-6 border border-transparent rounded
|
||||
focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-indigo-700 focus:outline-none
|
||||
transition-colors duration-400">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!--Responses-->
|
||||
<div id="answer_sec" class="hidden mt-12 flex flex-col">
|
||||
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8 sm:block hidden">
|
||||
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
||||
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
|
||||
Name
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
|
||||
Address
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
|
||||
Type
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
|
||||
TTL
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
|
||||
RTT
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
|
||||
Nameserver
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<!--tr is added by JS-->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<form method="post" id="form" class="box">
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<label for="domain">Domain name</label>
|
||||
<input id="domain" name="q" placeholder="domain.tld" required autofocus />
|
||||
</div>
|
||||
<!--On Mobile-->
|
||||
<div id="mobile-answers-sec" class="hidden">
|
||||
<div class="field">
|
||||
<label for="type">Query type</label>
|
||||
<select id="type" name="type">
|
||||
<option default>A</option>
|
||||
<option>AAAA</option>
|
||||
<option>CAA</option>
|
||||
<option>CNAME</option>
|
||||
<option>MX</option>
|
||||
<option>NAPTR</option>
|
||||
<option>NS</option>
|
||||
<option>PTR</option>
|
||||
<option>SOA</option>
|
||||
<option>SRV</option>
|
||||
<option>TXT</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--No Answers-->
|
||||
<div id="no-answers-sec" class="hidden mt-12 text-center">
|
||||
<p class="text-xl text-gray-900">Oops! Found no records for this query.</p>
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<label for="ns">Nameserver</label>
|
||||
<select id="ns" name="ns">
|
||||
<option default value="tcp://1.1.1.1:53">Cloudflare</option>
|
||||
<option value="https://cloudflare-dns.com/dns-query">Cloudflare (DOH)</option>
|
||||
<option value="tcp://8.8.8.8:53">Google</option>
|
||||
<option value="tcp://9.9.9.9:53">Quad9</option>
|
||||
<option value="">Custom</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="address">Nameserver address</label>
|
||||
<input id="address" name="address" type="text" placeholder="tcp://your-ip"
|
||||
required pattern="(tcp|udp|tls|https):\/\/(.*)" />
|
||||
<p class="help">
|
||||
To use different protocols like DOH, DOT etc. refer to the instructions
|
||||
<a href="https://github.com/mr-karan/doggo#transport-options">here</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Show Error-->
|
||||
<div id="api-error-sec" class="hidden mt-12 text-center">
|
||||
<div class="row">
|
||||
<div class="field"><p id="message"></p></div>
|
||||
<div class="field submit">
|
||||
<button type="submit">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</main>
|
||||
<!--Responses-->
|
||||
<table class="box hidden" id="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Address</th>
|
||||
<th class="type">Type</th>
|
||||
<th>TTL</th>
|
||||
<th>RTT</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
|
||||
<footer class="p-10">
|
||||
<div class="container mx-auto flex flex-col items-center justify-center">
|
||||
<p class="text-xl font-bold">Built with <span style=" color: #4338ca;">♥</span> by <a
|
||||
href="https://mrkaran.dev"><span class="text-indigo-700 font-semibold">mrkaran</span></a></p>
|
||||
<p class="text-center"><a href="https://github.com/mr-karan/doggo">Source Code</a></p>
|
||||
<footer >
|
||||
<div>
|
||||
<p>Built with
|
||||
<span>♥</span> by
|
||||
<a href="https://mrkaran.dev"><strong>mrkaran</strong></a>
|
||||
</p>
|
||||
<p><a href="https://github.com/mr-karan/doggo">Source Code</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="assets/main.js"> </script>
|
||||
</body>
|
||||
|
||||
<noscript>
|
||||
<div class="noscript">
|
||||
<h2>This service requires Javascript</h2>
|
||||
<p>Please enable JavaScript so that the form data can be sent to the API backend.</p>
|
||||
</div>
|
||||
</noscript>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue