-
-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
177 lines (173 loc) · 7.74 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
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>b23.wtf</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/nicholascw/b23.wtf/master/favicon.ico">
<link rel="icon" type="image/png" href="https://raw.githubusercontent.com/nicholascw/b23.wtf/master/favicon.png">
<script async defer src="https://buttons.github.io/buttons.js"></script>
<meta name="theme-color" content="#7952b3">
<meta property="og:image" content="https://raw.githubusercontent.com/nicholascw/b23.wtf/master/demo.png">
<meta property="og:title" content="bilibili 短链接追踪信息解决方案">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<style>
body {
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
.cover-container {
max-width: 60em;
}
.nav-masthead .nav-link {
padding: .25rem 0;
font-weight: 700;
color: rgba(255, 255, 255, .5);
background-color: transparent;
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
</style>
</head>
<body class="d-flex h-100 text-center text-white bg-dark">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0"><img src="https://raw.githubusercontent.com/nicholascw/b23.wtf/master/logo.png" style="height:1em; position:relative"> b23.wtf</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<!--<a class="nav-link active" aria-current="page" href="#">Home</a>-->
<a class="nav-link" href="https://status.b23.wtf">服务状态</a>
<a class="nav-link" href="https://github.com/nicholascw/b23.wtf/issues/new">错误报告</a>
</nav>
</header>
<main class="px-3">
<h2>无痛去除 b23.tv 追踪信息的解决方案。</h2>
<p><img src="https://raw.githubusercontent.com/nicholascw/b23.wtf/master/demo.png" style="width:100%; position:relative;padding-bottom:1em"></p>
<p class="lead">将 "tv" 改为 "tf" 后访问，或将短链接粘贴在下方。</p>
<div class="paste-input">
<input
id="paste-input"
name="paste-input"
class="form-control"
title="将 b23.tv 短链接粘贴到此处 ..."
placeholder="将 b23.tv 短链接粘贴到此处 ..."
spellcheck="false"
style="text-align:center"
required></input>
</div>
<p><div class="link-result input-group input-group-lg">
<input type="text" class="form-control" value="" id="link-result" readonly="">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">复制<br><span class="badge badge-success" style="display: none;">已复制</span></button>
<a class="btn btn-info" id="visit-link" href="/#">前往</a>
</div>
</div></p>
<p style="position:relative; margin: 3em 3em;"><span style="border-radius: 5px; background: rgba(233,233,233,0.3); padding: 0.5em;">当前节点: $(cat /etc/hostname).b23.wtf</span></p>
<p><span style="border-radius: 5px; background: rgba(147,234,245,0.45);box-shadow: 0px 0px 7px 3px rgba(193,241,245, 0.8); padding: 0.5em"><a style="color:#f5c1d2" href="https://xhs.li">xhs.li</a> 提供了面向小红书短链接的相似服务。</span></p>
</main>
<footer class="mt-auto">
<p>This service is available thanks to <a href="https://www.nicho1as.wang/">Nicholas Wang</a>, <a href="https://github.com/nicholascw/b23.wtf/graphs/contributors">other contributors</a>, and <a href="https://github.com/sponsors/nicholascw">sponsors</a>.
<br>Project source is licensed under GPLv3. <br><br>
<!-- <a href="https://github.com/nicholascw/b23.wtf">Source</a> -->
<a class="github-button" href="https://github.com/nicholascw/b23.wtf" data-color-scheme="no-preference: dark_high_contrast; light: dark_high_contrast; dark: dark_high_contrast;" data-icon="octicon-star" data-show-count="true" aria-label="Star nicholascw/b23.wtf on GitHub">Star</a>
<a class="github-button" href="https://github.com/sponsors/nicholascw" data-color-scheme="no-preference: dark_high_contrast; light: dark_high_contrast; dark: dark_high_contrast;" data-icon="octicon-heart" aria-label="Sponsor @nicholascw on GitHub">Sponsor</a>
</p>
</footer>
</div>
<script>
const pasteInput = document.getElementById('paste-input');
const outputLink = document.getElementById('link-result');
const visitButton = document.getElementById('visit-link');
// registering events of copy button
document.querySelectorAll('.link-result').forEach(container => {
const resultLink = container.querySelector('input');
const copyButton = container.querySelector('.btn-secondary');
const copiedBadge = container.querySelector('.badge');
resultLink.addEventListener('focus', () => resultLink.select());
copyButton.addEventListener('click', () => {
resultLink.select();
navigator.clipboard.writeText(resultLink.value);
copiedBadge.style.display = '';
setTimeout(() => { copiedBadge.style.display = 'none'; }, 2000);
});
});
const b23 = 'https://b23.tv';
outputLink.value = '未检测到 b23.tv 短链接';
pasteInput.addEventListener('input', () => {
const s = pasteInput.value;
const p = s.indexOf(b23);
if (p === -1) {
window.location.hash = '';
outputLink.value = '未检测到 b23.tv 短链接';
return;
}
const q = p + b23.length;
let i = q, code;
do {
i += 1;
code = s.charCodeAt(i);
} while(
(code > 47 && code < 58) // numeric (0-9)
|| (code > 64 && code < 91) // upper alpha (A-Z)
|| (code > 96 && code < 123) // lower alpha (a-z)
);
window.location.hash = s.slice(q, i);
});
const handleHash = async function () {
const hash = window.location.hash.slice(1);
outputLink.value = '正在获取真实URL...';
visitButton.href = '/#';
if (hash === '') {
outputLink.value = '未检测到 b23.tv 短链接';
return;
}
let q = new URL('/api', window.location.origin);
let search = new URLSearchParams();
search.append('full', 'b23.tv' + hash);
search.append('status', 200);
q.search = search.toString();
await fetch(q)
.then((response) => {
if (response.status !== 200) {
throw new Error('查询API发生错误');
}
return response.text();
})
.then((t) => {
outputLink.value = t;
visitButton.href = t;
})
.catch(error => {
outputLink.value = '未能获取真实URL';
visitButton.href = '/#';
});
};
window.onload = handleHash;
window.onhashchange = handleHash;
</script>
</body>
</html>