Skip to content

Commit

Permalink
Add Public DNS Resolvers tables
Browse files Browse the repository at this point in the history
  • Loading branch information
@mskian
mskian committed May 12, 2024
1 parent 67caae7 commit 41be981
Show file tree
Hide file tree
Showing 2 changed files with 229 additions and 0 deletions.
136 changes: 136 additions & 0 deletions dns.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Permissions-Policy meta tags -->
<meta http-equiv="Permissions-Policy" content="interest-cohort=()">
<meta http-equiv="Permissions-Policy" content="attribution-reporting=*">
<meta http-equiv="Permissions-Policy" content="run-ad-auction=*">
<meta http-equiv="Permissions-Policy" content="join-ad-interest-group=*">
<meta http-equiv="Permissions-Policy" content="browsing-topics=*">

<meta name="theme-color" content="#c7ecee">
<link rel="shortcut icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABqklEQVQ4jZ2Tv0scURDHP7P7SGWh14mkuXJZEH8cgqUWcklAsLBbCEEJSprkD7hD/4BUISHEkMBBiivs5LhCwRQBuWgQji2vT7NeYeF7GxwLd7nl4knMwMDMfL8z876P94TMLt+8D0U0EggQSsAjwMvga8ChJAqxqjTG3m53AQTg4tXHDRH9ABj+zf6oytbEu5d78nvzcyiivx7QXBwy46XOi5z1jbM+Be+nqVfP8yzuD3FM6rzIs9YE1hqGvDf15cVunmdx7w5eYJw1pcGptC9CD4gBUuef5Ujq/BhAlTLIeFYuyfmTZgeYv+2nPt1a371P+Hm1WUPYydKf0lnePwVmh3hnlcO1uc7yvgJUDtdG8oy98kduK2KjeHI0fzCQINSXOk/vlXBUOaihAwnGWd8V5r1uhe1VIK52V6JW2D4FqHZX5lphuwEE7ooyaN7gjLMmKSwYL+pMnV+MA/6+g8RYa2Lg2RBQbj4+rll7uymLy3coiuXb5PdQVf7rKYvojAB8Lf3YUJUHfSYR3XqeLO5JXvk0dhKqSqQQoCO+s5AIxCLa2Lxc6ALcAPwS26XFskWbAAAAAElFTkSuQmCC" />

<title>DNS Resolvers</title>
<meta name="description" content="DNS Resolvers - Check the Loading Time and Connection Speed."/>

<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css" integrity="sha512-IgmDkwzs96t4SrChW29No3NXBIBv8baW490zk5aXvhCD8vuZM3yUSkbyTBcXohkySecyzIrUwiF/qV0cuPcL3Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">

<style>
html, body {
background-color: #FDA7DF;
padding-bottom: 20px;
}
body {
font-family: "Roboto Mono", monospace;
font-weight: 600;
word-wrap: break-word;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased !important;
-moz-font-smoothing: antialiased !important;
text-rendering: optimizelegibility !important;
}
/* Custom loader styles */
.loader {
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #3273dc;
border-radius: 50%;
display: inline-block;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
}

@keyframes spin {
to {
transform: rotate(360deg);
}
}

/* Adjust loading text size */
#loading-indicator {
font-size: 16px; /* Adjust as needed */
}
/* Default styles for the table */
.table-wrapper table {
width: 100%;
border-collapse: collapse;
font-family: "Roboto Mono", monospace;
font-weight: 700;
font-size: 15px;
}

/* Styles for table headers */
.table-wrapper th {
background-color: #f2f2f2;
border: 1px solid #dddddd;
padding: 8px;
text-align: left;
}

/* Styles for table cells */
.table-wrapper td {
border: 1px solid #dddddd;
padding: 8px;
text-align: left;
}

/* Media query for smaller screens (e.g., mobile devices) */
@media screen and (max-width: 600px) {
/* Modify table layout for smaller screens */
.table-wrapper table {
width: 100%; /* Ensure table occupies full width of viewport */
}
.table-wrapper th,
.table-wrapper td {
padding: 4px; /* Decrease padding for smaller screens */
font-size: 15px; /* Decrease font size for smaller screens */
font-weight: 700;
}
}
</style>

</head>
<body>
<section class="section">
<div class="container">
<h1 class="title has-text-centered is-size-6">Public DNS Resolvers</h1>
<div class="card rounded">
<div class="card-content">
<br>
<div class="table-container table-wrapper">
<table id="resolver-table" class="table is-fullwidth is-hoverable">

<tr>
<th>DNS and Domain</th>
<th>Loading Time</th>
<th>Connection Speed</th>
</tr>

<tbody>
</tbody>
</table>
</div>
</div>
<br>
<div id="loading-indicator" class="has-text-centered" style="display: none;">
<span class="loader"></span>
</div>
<br>
</div>
</div>
</section>

<script src="script.js"></script>

</body>
</html>
93 changes: 93 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
document.addEventListener('DOMContentLoaded', async function () {
const resolverTable = document.getElementById('resolver-table').getElementsByTagName('tbody')[0];
const loadingIndicator = document.getElementById('loading-indicator');

// Array of public DNS resolvers
const resolvers = [
{ name: 'Google', dnsServer: '8.8.8.8' },
{ name: 'Cloudflare', dnsServer: '1.1.1.1' },
{ name: 'Quad9', dnsServer: '9.9.9.9' },
{ name: 'OpenDNS', dnsServer: '208.67.222.222' },
{ name: 'AdGuard', dnsServer: '94.140.14.14' },
{ name: 'CleanBrowsing', dnsServer: '185.228.168.168' },
{ name: 'Mullvad (ADblock)', dnsServer: '194.242.2.3' },
{ name: 'Mullvad (base)', dnsServer: '194.242.2.4' },
// Add more resolvers as needed
];

// URLs to measure loading time and connection speed
const testUrls = ['https://www.google.com', 'https://www.bing.com', 'https://github.com', 'https://duckduckgo.com', 'https://search.brave.com'];

// Function to measure loading time and connection speed
async function measureLoadingTimeAndSpeed(urls) {
const results = [];
for (const url of urls) {
const startTime = performance.now();
try {
await fetch(url, { cache: 'no-store', mode: 'no-cors', headers: { 'X-DNS-Prefetch-Control': 'off' } });
} catch (error) {
console.error('Failed to load the webpage:', error);
results.push(null);
continue;
}
const endTime = performance.now();
const loadingTime = endTime - startTime;
const fileSize = 1; // 1 MB (Assuming the fetched resource is approximately 1MB)
const connectionSpeed = fileSize / (loadingTime / 1000); // Connection speed in Mbps
results.push({ loadingTime, connectionSpeed });
}
return results;
}

// Function to convert milliseconds to seconds or minutes
function formatTime(milliseconds) {
if (milliseconds < 1000) {
return milliseconds.toFixed(2) + ' ms';
} else if (milliseconds < 60000) {
return (milliseconds / 1000).toFixed(2) + ' secs';
} else {
return (milliseconds / 60000).toFixed(2) + ' mins';
}
}

// Function to format connection speed in Mbps or Kbps
function formatSpeed(speed) {
if (speed < 1) {
return (speed * 1000).toFixed(2) + ' Kbps';
} else {
return speed.toFixed(2) + ' Mbps';
}
}

// Populate the table with resolver data
async function populateTable() {
loadingIndicator.style.display = 'block';
for (const resolver of resolvers) {
const results = await measureLoadingTimeAndSpeed(testUrls);
let lastIpAddress = null; // Reset last IP address for each resolver
// Check if the resolver has the same IP address as the last one
if (resolver.dnsServer !== lastIpAddress) {
const ipRow = resolverTable.insertRow();
const ipCell = ipRow.insertCell();
ipCell.setAttribute('colspan', '5'); // Adjust colspan based on the number of columns in your table
ipCell.innerHTML = `<br> ${resolver.name}: ${resolver.dnsServer} <br><br>`;
lastIpAddress = resolver.dnsServer;
}
for (let i = 0; i < testUrls.length; i++) {
const { loadingTime, connectionSpeed } = results[i];
if (loadingTime !== null && connectionSpeed !== null) {
const row = resolverTable.insertRow();
row.innerHTML = `<td>${testUrls[i]}</td><td>${formatTime(loadingTime)}</td><td>${formatSpeed(connectionSpeed)}</td>`;
} else {
console.warn(`Failed to measure speed for resolver: ${resolver.name}`);
const row = resolverTable.insertRow();
row.innerHTML = `<td colspan="4" class="has-text-centered">Failed to measure speed for ${resolver.name} and ${testUrls[i]}</td>`;
}
}
}
loadingIndicator.style.display = 'none';
}

populateTable();

});

0 comments on commit 41be981

Please sign in to comment.