forked from bbs-archive/bbs-archive.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
177 lines (150 loc) · 6.03 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
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>MCBBS 复活赛</title>
<link rel="stylesheet" href="style.css">
<style>
.container {
margin: auto;
max-width: 80%;
display: flex;
flex-direction: column;
text-align: center;
}
h1 {
margin: 5px 0;
margin-bottom: 8px;
font-size: 5em;
border: 3px solid rgb(65, 38, 34);
background-color: #ffffff89;
border-radius: 5px;
padding: 0.25rem 0.75rem;
}
@media only screen and (max-width: 768px) {
.container {
max-width: 100%;
margin-top: 0;
}
.search-container {
width: 100%;
}
.nav-tabs {
justify-content: center;
}
@media only screen and (max-width: 768px) {
.search-container {
width: 100%;
}
}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.container {
max-width: 90%;
align-items: center;
}
.search-container {
width: 100%;
}
h1 {
margin: 2rem 0;
}
}
@media only screen and (min-width: 1025px) {
.container {
max-width: 80%;
align-items: center;
}
h1 {
margin: 4.5rem 0;
}
.search-container {
width: 80%;
}
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="container">
<h1>MCBBS 复活赛</h1>
<div class="notice hidden"></div>
<div class="search-container">
<div class="nav-tabs">
<button class="nav-item active">搜索</button>
<button class="nav-item">跳转</button>
</div>
<div class="tabs">
<div class="tab active input-group">
<input id="search-input" type="text" placeholder="在此搜索（目前仅支持搜索标题哦）">
<button class="btn-search">搜索</button>
</div>
<div class="tab input-group">
<input id="jump-input" type="text" placeholder="输入 tid 进行跳转">
<button class="btn-jump">跳转</button>
</div>
</div>
</div>
<p>【瑞典路透社1145年1月4日讯】近日，MCBBS 在与科比进行的复活赛中胜出，现在牢玩家们可以在这个网站上搜索 MCBBS 的帖子记录。致敬传奇论坛 MCBBS！</p>
<p>如果您喜欢我们的网站，请到<a href="https://github.com/bbs-archive/bbs-archive.github.io">我们的github仓库</a>给我们点个star，或者将这个网站分享给你的好友！</p>
<p style="font-size:small;color:#3f3f3f">因为没有搜索服务器，目前的搜索仅支持标题，并需要需要下载约 17m 的索引文件，各位可以耐心等待。<br>
文章存档源文件在 <a
href="https://github.com/bbs-archive/mcbbs">https://github.com/bbs-archive/mcbbs</a>。如果有愿意出服务器做全文搜索 API
的，请和我们联系。谢谢大家的支持！邮箱：<a href="mailto:[email protected]">[email protected]</a></p>
<img style="width: 100%;max-width: 100%;" src="src/ed85e90.jpg" />
</div>
<script>
const jumpTo = (URL) => {
window.location.assign(URL);
}
document.addEventListener('DOMContentLoaded', () => {
const navItems = document.querySelectorAll('.search-container .nav-tabs .nav-item');
const tabs = document.querySelectorAll('.search-container .tabs .tab');
navItems.forEach((item, index) => {
item.addEventListener('click', () => {
navItems.forEach(item => item.classList.remove('active'))
tabs.forEach(tab => tab.classList.remove('active'));
item.classList.add('active');
tabs[index].classList.add('active');
})
})
const btnSearch = document.querySelector('.btn-search');
const btnJump = document.querySelector('.btn-jump');
const notice = document.querySelector('.notice');
const jumpSearch = () => {
const input = btnSearch.parentElement.querySelector('#search-input');
const text = input.value;
const param = new URLSearchParams();
param.append('s', text);
const URL = `search.html?${param.toString()}`;
jumpTo(URL);
};
btnSearch.addEventListener('click', jumpSearch);
document.querySelector('#search-input').onkeydown = (event) => {
if (event.key === 'Enter') {
jumpSearch();
}
};;
const jumpThread = () => {
const input = btnJump.parentElement.querySelector('#jump-input');
const text = input.value;
if (!/^[0-9]+$/.test(text)) {
notice.classList.remove('hidden')
notice.textContent = "TID 必须是纯数字";
return;
}
const URL = `thread.html?t=${text}`;
jumpTo(URL)
}
btnJump.addEventListener('click', jumpThread);
document.querySelector('#jump-input').onkeydown = (event) => {
if (event.key === 'Enter') {
jumpThread();
}
};
});
</script>
</body>
</html>