-
-
Notifications
You must be signed in to change notification settings - Fork 20
/
index.html
227 lines (217 loc) · 11.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="Experience the only web-based DNS Speed Test. Find the fastest DNS server for your location without any installations or downloads.">
<meta name="keywords" content="DNS Speed Test, DNS Server, Fast DNS, Internet Speed, DNS Performance">
<meta name="author" content="@SilviuStroe">
<title>Fastest DNS Speed Test - Find Optimal DNS Server | No Install</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.spinner {
display: inline-block;
position: relative;
width: 70px;
height: 70px;
vertical-align: middle;
}
.dot {
position: absolute;
width: 10px;
height: 10px;
background-color: #3498db;
border-radius: 50%;
animation: dot-blink 2s linear infinite;
}
.dot-1 {
left: 30%;
top: 50%;
animation-delay: -1.6s;
}
.dot-2 {
left: 50%;
top: 30%;
animation-delay: -0.8s;
}
.dot-3 {
left: 70%;
top: 50%;
animation-delay: 0s;
}
@keyframes dot-blink {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
</style>
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="favicon/site.webmanifest">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "SoftwareApplication",
"name": "DNS Speed Test",
"description": "Discover the fastest DNS server for your specific location with our advanced DNS Speed Test tool. Enhance your browsing speed and internet reliability effortlessly.",
"url": "https://dnsspeedtest.online/",
"author": {
"@type": "Person",
"name": "@SilviuStroe"
},
"applicationCategory": "WebApplication",
"operatingSystem": "All",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/2.0.1/chartjs-plugin-zoom.min.js"></script>
</head>
<body class="pt-20 font-sans text-center p-5 bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200">
<div class="flex justify-center items-center">
<div class="w-full md:w-2/3 mx-auto">
<h1 id="cta" class="text-4xl text-blue-500 font-bold mb-2 text-center dark:text-blue-300">
DNS Speed Test Benchmark - Find the Fastest DNS Server for Your Location
</h1>
</div>
</div>
<p class="text-lg mx-auto mb-5 leading-relaxed max-w-xl dark:text-gray-300">Optimize your internet experience by finding
the fastest DNS server for your location. Just click the button below to start the test.</p>
<button id="checkButton"
class="bg-green-500 text-white py-3 px-6 text-lg rounded-lg shadow-lg transform transition duration-300 ease-in-out hover:scale-105 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-700 focus:ring-opacity-50 mb-5 dark:bg-green-600 dark:hover:bg-green-800">
Check DNS Speed
</button>
<div class="absolute top-5 right-5">
<div class="group relative inline-block">
<button id="editButton"
class="bg-white text-2xl text-white bg-transparent border-none rounded-full w-10 h-10 flex justify-center items-center shadow-lg">
🛠️
</button>
<span class="pointer-events-none absolute top-full right-0 transform translate-y-2 w-max bg-black text-white text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity">
Edit hosts list
</span>
</div>
</div>
<div id="loadingMessage" class="hidden"></div>
<!-- Modal -->
<div id="websiteModal" class="hidden fixed z-50 inset-0 flex items-center justify-center bg-black bg-opacity-60">
<div class="modal-content relative bg-white pt-4 pb-2 px-4 rounded-lg shadow-xl w-full sm:w-11/12 md:w-1/2 mx-auto my-2 sm:my-4 overflow-hidden dark:bg-gray-700 dark:text-white">
<span class="close absolute top-2 right-2 text-3xl font-bold text-gray-500 hover:text-black cursor-pointer p-1 dark:text-gray-200 dark:hover:text-white">×</span>
<h2 class="text-2xl sm:text-3xl mb-2 sm:mb-4 font-semibold dark:text-gray-200">Edit DNS Test Hosts</h2>
<p class="mb-2 sm:mb-4 text-base sm:text-lg leading-relaxed dark:text-gray-300">
Add or remove hostnames to tailor DNS server testing. Incorporate websites you frequently visit or popular
services to refine the accuracy of your DNS speed test.
</p>
<!-- Scrollable List Container -->
<div class="overflow-auto max-h-[50vh] sm:max-h-[60vh]"> <!-- Adjust max height as needed -->
<ul id="websiteList" class="list-none p-0">
<!-- Dynamic list items will be added here -->
</ul>
</div>
<div class="flex mt-2 sm:mt-4 justify-center">
<input type="text" id="newWebsite"
class="py-2 mr-2 px-4 w-3/4 border-2 border-gray-400 rounded focus:border-blue-500 focus:outline-none transition duration-200 ease-in-out placeholder-gray-600 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400"
placeholder="Add new hostname...">
<button id="addHostname"
class="py-2 px-6 bg-green-500 text-white rounded hover:bg-green-600 text-lg dark:bg-green-700 dark:hover:bg-green-900">
Add
</button>
</div>
</div>
</div>
<div id="dnsResults" aria-live="polite" class="mt-5 overflow-x-auto">
<table id="resultsTable" class="w-full border-collapse table-fixed">
<thead>
<tr>
<th class="w-1/3 py-2 px-4 text-left border-b border-gray-300 bg-blue-200 text-gray-700 cursor-pointer dark:bg-gray-800 dark:text-gray-200">
DNS Server
</th>
<th onclick="sortTable(1)"
class="py-2 px-4 text-center border-b border-gray-300 bg-blue-200 text-gray-700 cursor-pointer dark:bg-gray-800 dark:text-gray-200">
Min (ms) ↕
</th>
<th onclick="sortTable(2)"
class="py-2 px-4 text-center border-b border-gray-300 bg-blue-200 text-gray-700 cursor-pointer dark:bg-gray-800 dark:text-gray-200">
Median (ms) ↕
</th>
<th onclick="sortTable(3)"
class="py-2 px-4 text-center border-b border-gray-300 bg-blue-200 text-gray-700 cursor-pointer dark:bg-gray-800 dark:text-gray-200">
Average (ms) ↕
</th>
<th onclick="sortTable(4)"
class="py-2 px-4 text-center border-b border-gray-300 bg-blue-200 text-gray-700 cursor-pointer dark:bg-gray-800 dark:text-gray-200">
Max (ms) ↕
</th>
</tr>
</thead>
<tbody class="text-gray-800 dark:text-gray-200">
<!-- Table rows will be dynamically added here -->
</tbody>
</table>
</div>
<div id="chartContainer" class="hidden w-4/5 mx-auto mt-5 hidden">
<canvas id="dnsChart" class="w-full h-96"></canvas>
<button id="resetZoom"
class="mt-3 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">
Reset Zoom
</button>
</div>
<div id="disclaimer"
class="mt-10 px-5 py-4 bg-white border border-gray-300 rounded text-left max-w-4xl mx-auto leading-relaxed space-y-4 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200">
<h2 class="text-2xl text-blue-500 mb-4 dark:text-blue-400">Disclaimer</h2>
<p>This <strong>DNS Speed Test tool</strong> operates client-side, directly testing DNS servers from your local
environment to ensure <strong>accurate real-world results</strong>. It supports <strong>DNS over HTTPS
(DoH)</strong>, enhancing privacy and security by encrypting DNS requests and responses.</p>
<p>Local network conditions like latency and bandwidth can influence <strong>DNS speed test results</strong>. Our
tool measures DNS resolution speed from your <strong>current location and network environment</strong>, offering
a personalized performance assessment.</p>
<p><strong>Warm-Up Phase:</strong> To ensure the most accurate results, our tool initiates a warm-up phase before
the actual DNS speed test. This phase prepares the DNS servers and stabilizes network conditions, which is
crucial for consistent and reliable measurements. Please note that this process adds a short additional delay to
the total test duration, contributing to the overall accuracy of the test results.</p>
<p><strong>Note on Result Accuracy:</strong> Factors such as browser processing and network variability can affect
test results, potentially causing discrepancies compared to other methods. For example, browser-based tests
might show different timings due to overheads like HTTP(S) request handling. We recommend conducting multiple
tests under various conditions for a more comprehensive evaluation.</p>
<p>Our tool's strength lies in its <strong>comprehensive range of DNS servers</strong> and <strong>user-friendly
interface</strong>, suitable for both technical and non-technical users. While we strive for accuracy, the
results are indicative and should be used as a guide to help users choose the best DNS server options based on
relative performance in their specific conditions.</p>
</div>
<footer class="text-center py-3 mt-3 bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-400 relative">
<div class="container mx-auto px-4 py-5 text-center">
<p class="mb-4">© 2024 - DNSSpeedTest.online. All Rights Reserved.</p>
<div class="flex justify-center space-x-4">
<a rel="noopener noreferrer" class="github-button" href="https://github.com/BrainicHQ/DoHSpeedTest"
data-color-scheme="no-preference: light; light: light; dark: dark;" data-show-count="true"
aria-label="Star BrainicHQ/DoHSpeedTest on GitHub">Star</a>
<a href="https://www.buymeacoffee.com/silviu" target="_blank" rel="noopener noreferrer"
aria-label="Support me on Buy Me a Coffee"
class="text-blue-500 hover:underline dark:hover:text-blue-300">
☕️ Support this project
</a>
<a href="https://brainic.io/?utm_source=dnsspeedtest" target="_blank" title="software company in romania"
aria-label="Software development services"
class="text-blue-500 hover:underline dark:hover:text-blue-300">
💻 Custom Software Solutions
</a>
</div>
</div>
</footer>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="script.js"></script>
</body>
</html>