mckabue commited on
Commit
216167a
·
1 Parent(s): 56a0355

Refactor HTML structure for improved readability and maintainability

Browse files
Files changed (1) hide show
  1. 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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
- </head>
 
 
 
9
 
10
- <body class="bg-light">
11
  <div class="container-fluid mt-5">
12
- <div class="row justify-content-center">
13
- <div class="col-lg-6 col-md-8">
14
- <div class="card">
15
- <div class="card-body">
16
- <h3 class="text-center">Private Domain Checker</h3>
17
- <p class="text-center text-body-secondary">
18
- <a target="_blank" href="https://toknow.ai/posts/private-domain-checker" class="text-decoration-none text-reset">
19
- <b><u>ToKnow</u></b>.ai
20
- </a>
21
- </p>
22
- <form id="searchForm" class="mb-3 mt-4">
23
- <div class="input-group">
24
- <input type="text" id="domain" class="form-control" placeholder="Enter domain name... eg: example.com" required/>
25
- <button class="btn btn-primary" type="submit">Check</button>
26
- </div>
27
- </form>
28
- <div id="result" class="text-center d-none">
29
- <div class="spinner-border text-primary d-none" id="spinner"></div>
30
- <div id="resultText"></div>
31
- </div>
32
- <p class="text-center text-body-secondary mt-4 text-lowercase">
33
- Protecting Against <a target="_blank" href="https://toknow.ai/posts/private-domain-checker" class="text-decoration-none text-reset"><u>Domain Front-Running by Registrars</u></a> <br>
34
- <a target="_blank" href="https://toknow.ai/posts/private-domain-checker" class="text-decoration-none">
35
- <i>get help or get more details</i>
36
- </a>
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
- document.getElementById('searchForm').onsubmit = async (e) => {
47
- e.preventDefault();
48
- const domain = document.getElementById('domain').value;
49
- if ((domain || '').trim().length == 0){
50
- return;
51
- }
 
 
 
 
 
 
 
52
 
53
- const result = document.getElementById('result');
54
- const spinner = document.getElementById('spinner');
55
- const resultText = document.getElementById('resultText');
56
 
57
- result.classList.remove('d-none');
58
- spinner.classList.remove('d-none');
59
- resultText.innerHTML = '';
60
 
61
- try {
62
- const response = await fetch(`/check`, {
63
- method: 'POST',
64
- headers: {
65
- 'Content-Type': 'application/json'
66
- },
67
- body: JSON.stringify({ domain })
68
- });
69
- const data = await response.json();
70
 
71
- resultText.innerHTML = `
72
- <div class="alert ${data.available ? 'alert-success' : 'alert-danger'} mt-3">
73
- <strong>${data.domain ?? domain}</strong> is ${data.available ? 'available' : 'not available'}
74
- ${data.method ? `<br><i>(${data.method})</i>` : ''}
 
 
 
 
75
  </div>
76
  `;
77
- } catch (err) {
78
- resultText.innerHTML = `
79
  <div class="alert alert-warning mt-3">
80
  Error checking domain
81
  </div>
82
  `;
83
- }
84
- spinner.classList.add('d-none');
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>