Refactor HTML structure for improved readability and maintainability
Browse files- index.html +107 -67
index.html
CHANGED
@@ -1,89 +1,129 @@
|
|
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
-
|
4 |
-
<head>
|
5 |
<title>Private Domain Checker | ToKnow.ai</title>
|
6 |
-
<meta name="viewport" content="width=device-width, initial-scale=1"
|
7 |
-
<link
|
8 |
-
|
|
|
|
|
|
|
9 |
|
10 |
-
<body class="bg-light">
|
11 |
<div class="container-fluid mt-5">
|
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 |
-
<img class="rounded mx-auto d-block" src="https://api.visitorbadge.io/api/visitors?path=https://toknow.ai/posts/private-domain-checker" />
|
38 |
-
</p>
|
39 |
-
</div>
|
40 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
41 |
</div>
|
|
|
42 |
</div>
|
|
|
43 |
</div>
|
44 |
|
45 |
<script>
|
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 |
-
<div class="alert ${
|
73 |
-
|
74 |
-
|
|
|
|
|
|
|
|
|
75 |
</div>
|
76 |
`;
|
77 |
-
|
78 |
-
|
79 |
<div class="alert alert-warning mt-3">
|
80 |
Error checking domain
|
81 |
</div>
|
82 |
`;
|
83 |
-
|
84 |
-
|
85 |
-
|
86 |
</script>
|
87 |
-
</body>
|
88 |
-
|
89 |
-
</html>
|
|
|
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
+
<head>
|
|
|
4 |
<title>Private Domain Checker | ToKnow.ai</title>
|
5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
6 |
+
<link
|
7 |
+
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
|
8 |
+
rel="stylesheet"
|
9 |
+
/>
|
10 |
+
</head>
|
11 |
|
12 |
+
<body class="bg-light">
|
13 |
<div class="container-fluid mt-5">
|
14 |
+
<div class="row justify-content-center">
|
15 |
+
<div class="col-lg-6 col-md-8">
|
16 |
+
<div class="card">
|
17 |
+
<div class="card-body">
|
18 |
+
<h3 class="text-center">Private Domain Checker</h3>
|
19 |
+
<p class="text-center text-body-secondary">
|
20 |
+
<a
|
21 |
+
target="_blank"
|
22 |
+
href="https://toknow.ai/posts/private-domain-checker"
|
23 |
+
class="text-decoration-none text-reset"
|
24 |
+
>
|
25 |
+
<b><u>ToKnow</u></b
|
26 |
+
>.ai
|
27 |
+
</a>
|
28 |
+
</p>
|
29 |
+
<form id="searchForm" class="mb-3 mt-4">
|
30 |
+
<div class="input-group">
|
31 |
+
<input
|
32 |
+
type="text"
|
33 |
+
id="domain"
|
34 |
+
class="form-control"
|
35 |
+
placeholder="Enter domain name... eg: example.com"
|
36 |
+
required
|
37 |
+
/>
|
38 |
+
<button class="btn btn-primary" type="submit">Check</button>
|
|
|
|
|
|
|
39 |
</div>
|
40 |
+
</form>
|
41 |
+
<div id="result" class="text-center d-none">
|
42 |
+
<div
|
43 |
+
class="spinner-border text-primary d-none"
|
44 |
+
id="spinner"
|
45 |
+
></div>
|
46 |
+
<div id="resultText"></div>
|
47 |
+
</div>
|
48 |
+
<p class="text-center text-body-secondary mt-4 text-lowercase">
|
49 |
+
Protecting Against
|
50 |
+
<a
|
51 |
+
target="_blank"
|
52 |
+
href="https://toknow.ai/posts/private-domain-checker"
|
53 |
+
class="text-decoration-none text-reset"
|
54 |
+
><u>Domain Front-Running by Registrars</u></a
|
55 |
+
>
|
56 |
+
<br />
|
57 |
+
<a
|
58 |
+
target="_blank"
|
59 |
+
href="https://toknow.ai/posts/private-domain-checker"
|
60 |
+
class="text-decoration-none"
|
61 |
+
>
|
62 |
+
<i>get help or get more details</i>
|
63 |
+
</a>
|
64 |
+
<img
|
65 |
+
class="rounded mx-auto d-block"
|
66 |
+
src="https://api.visitorbadge.io/api/visitors?path=https://toknow.ai/posts/private-domain-checker"
|
67 |
+
/>
|
68 |
+
</p>
|
69 |
</div>
|
70 |
+
</div>
|
71 |
</div>
|
72 |
+
</div>
|
73 |
</div>
|
74 |
|
75 |
<script>
|
76 |
+
document.addEventListener("load", () => {
|
77 |
+
const domain = [...new URL(location.href).searchParams]
|
78 |
+
.find(([key, value]) => key?.toLowerCase()?.trim() === "domain")?.[1]
|
79 |
+
?.toLowerCase()
|
80 |
+
?.trim();
|
81 |
+
document.getElementById("domain").value = domain;
|
82 |
+
});
|
83 |
+
document.getElementById("searchForm").onsubmit = async (e) => {
|
84 |
+
e.preventDefault();
|
85 |
+
const domain = document.getElementById("domain").value;
|
86 |
+
if ((domain || "").trim().length == 0) {
|
87 |
+
return;
|
88 |
+
}
|
89 |
|
90 |
+
const result = document.getElementById("result");
|
91 |
+
const spinner = document.getElementById("spinner");
|
92 |
+
const resultText = document.getElementById("resultText");
|
93 |
|
94 |
+
result.classList.remove("d-none");
|
95 |
+
spinner.classList.remove("d-none");
|
96 |
+
resultText.innerHTML = "";
|
97 |
|
98 |
+
try {
|
99 |
+
const response = await fetch(`/check`, {
|
100 |
+
method: "POST",
|
101 |
+
headers: {
|
102 |
+
"Content-Type": "application/json",
|
103 |
+
},
|
104 |
+
body: JSON.stringify({ domain }),
|
105 |
+
});
|
106 |
+
const data = await response.json();
|
107 |
|
108 |
+
resultText.innerHTML = `
|
109 |
+
<div class="alert ${
|
110 |
+
data.available ? "alert-success" : "alert-danger"
|
111 |
+
} mt-3">
|
112 |
+
<strong>${data.domain ?? domain}</strong> is ${
|
113 |
+
data.available ? "available" : "not available"
|
114 |
+
}
|
115 |
+
${data.method ? `<br><i>(${data.method})</i>` : ""}
|
116 |
</div>
|
117 |
`;
|
118 |
+
} catch (err) {
|
119 |
+
resultText.innerHTML = `
|
120 |
<div class="alert alert-warning mt-3">
|
121 |
Error checking domain
|
122 |
</div>
|
123 |
`;
|
124 |
+
}
|
125 |
+
spinner.classList.add("d-none");
|
126 |
+
};
|
127 |
</script>
|
128 |
+
</body>
|
129 |
+
</html>
|
|