forked from SukkaLab/cfdc
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·143 lines (131 loc) · 5.71 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="https://cdn.jsdelivr.net/npm/[email protected]">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
<title>Cloudflare Data Center - Sukka's Lab</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]">
<style>
</style>
</head>
<body>
<div class="container">
<section class="section">
<h1 class="sk-text-center title">Cloudflare Data Center</h1>
<div class="box sk-center" style="max-width: 500px">
<p id="cfdc-info" class="sk-pb-4"></p>
<div class="field">
<div class="control">
<input id="cfdc-search-input" class="input" type="text" placeholder="Input codename">
<p class="help">Cloudflare Data Center Code Name</p>
</div>
<p id="cfdc-search-output" class="sk-mt-2"></p>
</div>
<br>
<div class="field">
<div class="control">
<input id="cfdc-search-any-input" class="input" type="text" placeholder="Input keyword">
<p class="help">Use keyword to search Cloudflare Data Centers</p>
</div>
<div id="cfdc-search-any-output" class="sk-mt-2"></div>
</div>
</div>
</section>
</div>
<script>
const _get = (url) =>
fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}).then(resp => Promise.all([resp.ok, resp.status, resp.json(), resp.headers])
).then(([ok, status, json, headers]) => {
if (ok) {
let data = {
ok,
status,
data: json,
headers
}
return data;
} else {
throw new Error(JSON.stringify(json.error));
}
}).catch(error => {
throw error;
});
let CFDC = {
data: [],
current: ``,
input: document.getElementById('cfdc-search-input'),
inputAny: document.getElementById('cfdc-search-any-input'),
getData: () => {
_get('cfdc.json')
.then(resp => {
CFDC.data = resp.data;
CFDC.current = (resp.headers.get('cf-ray') || '').split('-')[1];
CFDC.regListener();
CFDC.showInfo();
})
},
showInfo: () => {
let dcInfo = (CFDC.data[CFDC.current] || []);
let html = `Your currently have hit: ${CFDC.current}<br>${dcInfo.name}<br>${dcInfo.cnName}`;
document.getElementById('cfdc-info').innerHTML = html;
},
search: () => {
if (CFDC.input.value.length === 3) {
let dcInfo = CFDC.data[CFDC.input.value.toUpperCase()];
if (dcInfo) {
let html = `${CFDC.input.value.toUpperCase()}<br>${dcInfo.name}<br>${dcInfo.cnName}`;
document.getElementById('cfdc-search-output').innerHTML = html;
} else {
document.getElementById('cfdc-search-output').innerHTML = '';
}
} else {
document.getElementById('cfdc-search-output').innerHTML = '';
}
},
searchAny: () => {
if (CFDC.inputAny.value.length === 0) {
document.getElementById('cfdc-search-any-output').innerHTML = '';
} else {
let keyword = CFDC.inputAny.value.toLowerCase(),
result = [],
html = '';
for (i in CFDC.data) {
let x = `${i.toLowerCase()} ${CFDC.data[i].name.toLowerCase()} ${CFDC.data[i].cnName}`;
if (x.indexOf(keyword.toLowerCase()) !== -1) {
result.push(`${i}@${CFDC.data[i].name}@${CFDC.data[i].cnName}`)
}
}
html += '<table class="table is-fullwidth">'
let num = 0;
for (i of result) {
num++;
let x = i.split('@');
html += `<tr><td class="sk-text-center">${num}</td><td>${x[0]}</td><td>${x[1]}</td><td>${x[2]}</td></tr>`;
}
html += `</table>`;
document.getElementById('cfdc-search-any-output').innerHTML = `<p>There are ${num} data center(s) match the keyword</p>${html}`;
}
},
regListener: () => {
if (CFDC.input.value.length === 3) {
CFDC.search();
CFDC.input.addEventListener('input', CFDC.search);
} else {
CFDC.input.addEventListener('input', CFDC.search);
}
CFDC.inputAny.addEventListener('input', CFDC.searchAny);
},
};
CFDC.getData();
</script>
<script>window.ga_tid = "UA-122669675-3", window.ga_api = "https://d.skk.moe/p/"</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</body>
</html>