Skip to content

Commit 84f0aa5

Browse files
Nero978Nero978
committed
Add download functionality to the application
1 parent 9df22d2 commit 84f0aa5

File tree

2 files changed

+328
-0
lines changed

2 files changed

+328
-0
lines changed

‎download.html

+280
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
<!DOCTYPE html>
2+
<html lang="zh">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
8+
<link rel="stylesheet" href="css/main.css">
9+
<link rel="stylesheet" href="css/check.css">
10+
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
11+
<meta name="keywords" content="RX工作室,Miracle Town,MT服务器,Minecraft,我的世界服务器,我的世界服务器">
12+
<meta name="description"
13+
content="Miracle Town，官方中文译名“奇迹之城”，是由一群热爱 Minecraft 的玩家自行搭建的非营利性纯净生电向服务器。我们期待用我们的热爱，能创造属于我们梦想中的奇迹之城，探索田园牧歌式的人类宜居家园。">
14+
<title>下载 | Miracle Town</title>
15+
</head>
16+
17+
<body>
18+
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top nav-origin" id="nav" data-bs-theme="dark">
19+
<div class="container">
20+
<a class="navbar-brand" href="//mtsmc.net">
21+
<img src="./img/logo-white.png" id="nav-logo" alt="Logo" width="200" height="auto" class="d-inline-block align-text-top">
22+
</a>
23+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
24+
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
25+
aria-label="Toggle navigation">
26+
<span class="navbar-toggler-icon"></span>
27+
</button>
28+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
29+
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
30+
<li class="nav-item">
31+
<a class="nav-link active" aria-current="page" href="//mtsmc.net">首页</a>
32+
</li>
33+
<li class="nav-item">
34+
<a class="nav-link" href="//wiki.mtsmc.net">Wiki</a>
35+
</li>
36+
<li class="nav-item">
37+
<a class="nav-link" href="//satellite.mtsmc.net">云图</a>
38+
</li>
39+
<li class="nav-item">
40+
<a class="nav-link" href="//museum.mtsmc.net">博物馆</a>
41+
</li>
42+
<li class="nav-item">
43+
<a class="nav-link" href="//wiki.mtsmc.net/rule">市民公约</a>
44+
</li>
45+
</ul>
46+
<a id="navbar-join-btn" target="_blank" href="https://docs.qq.com/form/page/DWUh5cmphZk1ad2dp"
47+
class="d-flex btn btn-outline-light" type="button">
48+
<i class="bi bi-send"></i>申请问卷
49+
</a>
50+
</div>
51+
</div>
52+
</nav>
53+
54+
<section>
55+
<div class="modal fade" id="loading" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
56+
aria-labelledby="staticBackdropLabel" aria-hidden="true">
57+
<div class="modal-dialog modal-dialog-centered">
58+
<div class="modal-content">
59+
<div class="modal-header">
60+
<h1 class="modal-title fs-5" id="staticBackdropLabel">正在处理</h1>
61+
</div>
62+
<div class="modal-body text-center">
63+
<div class="spinner-border m-3 text-primary" role="status" style="width: 3rem; height: 3rem">
64+
<span class="visually-hidden">Loading...</span>
65+
</div>
66+
<p class="my-0 mt-2">请稍后...</p>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
72+
<div class="modal fade" id="success" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
73+
aria-labelledby="staticBackdropLabel" aria-hidden="true">
74+
<div class="modal-dialog modal-dialog-centered">
75+
<div class="modal-content">
76+
<div class="modal-header">
77+
<h1 class="modal-title fs-5 text-success fw-bold" id="myModalLabel">你已获得下载权限</h1>
78+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
79+
</div>
80+
<div class="modal-body">
81+
<div class="text-center text-success fw-bold display-1">
82+
<i class="bi bi-check2-circle"></i>
83+
</div>
84+
<br>
85+
一封包含下载链接的邮件已发送至你的邮箱，请注意查收。若长时间未收到，请检查垃圾箱。
86+
</div>
87+
<div class="modal-footer">
88+
<a href="//mtsmc.net" target="_blank" class="btn btn-primary">
89+
<i class="bi bi-box-arrow-up-right"></i>前往首页
90+
</a>
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
96+
<div class="modal fade" id="invalid" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
97+
aria-labelledby="staticBackdropLabel" aria-hidden="true">
98+
<div class="modal-dialog modal-dialog-centered">
99+
<div class="modal-content">
100+
<div class="modal-header">
101+
<h1 class="modal-title fs-5 text-danger fw-bold" id="myModalLabel">下载通道已关闭</h1>
102+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
103+
</div>
104+
<div class="modal-body">
105+
<div class="text-center text-danger fw-bold display-1">
106+
<i class="bi bi-person-x"></i>
107+
</div>
108+
<br>
109+
你来晚了~本次下载通道已关闭。
110+
</div>
111+
<div class="modal-footer">
112+
<a href="https://jq.qq.com/?_wv=1027&k=Gllh6gt6" target="_blank"
113+
class="btn btn-secondary">联系我们</a>
114+
</div>
115+
</div>
116+
</div>
117+
</div>
118+
119+
<div class="modal fade" id="error" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
120+
aria-labelledby="staticBackdropLabel" aria-hidden="true">
121+
<div class="modal-dialog modal-dialog-centered">
122+
<div class="modal-content">
123+
<div class="modal-header">
124+
<h1 class="modal-title fs-5 text-danger fw-bold" id="myModalLabel">Oooo...出了点问题！</h1>
125+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
126+
</div>
127+
<div class="modal-body">
128+
<div class="text-center text-danger fw-bold display-1">
129+
<i class="bi bi-bug"></i>
130+
</div>
131+
<br>
132+
API 服务器出现了一些问题，暂时无法下载。请稍后再试，或加入我们的 QQ 群联系管理员。
133+
</div>
134+
<div class="modal-footer">
135+
<a href="https://jq.qq.com/?_wv=1027&k=Gllh6gt6" target="_blank"
136+
class="btn btn-primary">
137+
<i class="bi bi-box-arrow-up-right"></i>联系我们
138+
</a>
139+
</div>
140+
</div>
141+
</div>
142+
</div>
143+
</section>
144+
145+
146+
<section class="container-fluid px-0">
147+
<div class="banner w-100 d-flex align-items-center">
148+
<h1 class="mx-auto text-center text-white fw-bold">存档下载 <span class="badge bg-secondary">S2</span></h1>
149+
</div>
150+
<div class="container">
151+
<div class="card shadow-lg px-5 py-4 check-area">
152+
<div class="row row-cols-1 row-cols-md-2">
153+
<div class="col my-3 d-flex">
154+
<img src="img/folder.png" class="w-100 mx-auto" alt="">
155+
</div>
156+
<div class="col my-3 d-flex flex-column text-center">
157+
<div class="my-auto">
158+
<p>填写你的信息，以获得下载权限。</p>
159+
<p class="text-danger">请注意，本存档著作权归全体 MT 玩家所有，请勿未经许可擅自用作商业用途！</p>
160+
<p class="text-danger">下载开放时间：即日起至2024.2.5，如有需要请尽快下载。</p>
161+
<form novalidate>
162+
<div class="input-group input-group-lg has-validation mb-3">
163+
<span class="input-group-text" id="inputGroupPrepend">
164+
<i class="bi bi-person-circle mx-0"></i>
165+
</span>
166+
<input type="text" class="form-control" id="username"
167+
aria-describedby="inputGroupPrepend" placeholder="游戏 ID" required>
168+
<div class="invalid-feedback">
169+
请输入你的游戏 ID。
170+
</div>
171+
</div>
172+
<div class="input-group input-group-lg has-validation">
173+
<span class="input-group-text" id="inputGroupPrepend">
174+
<i class="bi bi-envelope"></i>
175+
</span>
176+
<input type="text" class="form-control" id="email"
177+
aria-describedby="inputGroupPrepend" placeholder="邮箱" required>
178+
<div class="invalid-feedback">
179+
请输入你的邮箱。
180+
</div>
181+
</div>
182+
<button class="btn btn-primary my-3" id="post-btn" type="submit">查询</button>
183+
</form>
184+
185+
</div>
186+
</div>
187+
</div>
188+
</div>
189+
</div>
190+
</section>
191+
192+
<footer class="container">
193+
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-5 pt-5 mt-5 border-top">
194+
<div class="col mb-3">
195+
<a href="//mtsmc.net" class="d-flex align-items-center mb-3 text-decoration-none">
196+
<img class="img-fluid footer-logo" src="img/logo.png" alt="">
197+
</a>
198+
<h5 class="text-center">田园牧歌 我们的家园</h5>
199+
</div>
200+
201+
<div class="col mb-3"></div>
202+
203+
<div class="col mb-3">
204+
<h5>站点</h5>
205+
<ul class="nav flex-column">
206+
<li class="nav-item mb-2"><a href="//mtsmc.net" class="nav-link p-0 text-body-secondary">主站</a>
207+
</li>
208+
<li class="nav-item mb-2"><a href="//wiki.mtsmc.net"
209+
class="nav-link p-0 text-body-secondary">Wiki</a></li>
210+
<li class="nav-item mb-2"><a href="//museum.mtsmc.net"
211+
class="nav-link p-0 text-body-secondary">博物馆</a></li>
212+
<li class="nav-item mb-2"><a href="//satellite.mtsmc.net"
213+
class="nav-link p-0 text-body-secondary">卫星云图</a></li>
214+
<li class="nav-item mb-2"><a href="//status.rxgzs.cn"
215+
class="nav-link p-0 text-body-secondary">服务状态</a></li>
216+
</ul>
217+
</div>
218+
219+
<div class="col mb-3">
220+
<h5>联系我们</h5>
221+
<ul class="nav flex-column">
222+
<li class="nav-item mb-2"><a href="//url.rxgzs.cn/tucao"
223+
class="nav-link p-0 text-body-secondary">报告问题</a></li>
224+
<li class="nav-item mb-2"><a href="https://github.com/Miracle-Town"
225+
class="nav-link p-0 text-body-secondary">Github</a></li>
226+
<li class="nav-item mb-2"><a href="https://jq.qq.com/?_wv=1027&k=Gllh6gt6"
227+
class="nav-link p-0 text-body-secondary">QQ群 992530110</a></li>
228+
<li class="nav-item mb-2"><a href="mailto:[email protected]" class="nav-link p-0 text-body-secondary">邮箱
229+
[email protected]</a></li>
230+
<li class="nav-item mb-2"><a href="tel:4000542188"
231+
class="nav-link p-0 text-body-secondary">400-054-2188</a></li>
232+
</ul>
233+
</div>
234+
235+
<div class="col mb-3">
236+
<h5>关于我们</h5>
237+
<ul class="nav flex-column">
238+
<li class="nav-item mb-2"><a href="//rxgzs.cn" class="nav-link p-0 text-body-secondary">RX工作室</a>
239+
</li>
240+
<li class="nav-item mb-2"><a href="//open.rxgzs.cn/join"
241+
class="nav-link p-0 text-body-secondary">工作机会</a></li>
242+
<li class="nav-item mb-2"><a href="//wiki.mtsmc.net/history"
243+
class="nav-link p-0 text-body-secondary">大事记</a></li>
244+
<li class="nav-item mb-2"><a href="//open.rxgzs.cn"
245+
class="nav-link p-0 text-body-secondary">开放平台</a></li>
246+
<li class="nav-item mb-2"><a href="//light.rxgzs.cn"
247+
class="nav-link p-0 text-body-secondary">Minecraft Light</a></li>
248+
</ul>
249+
</div>
250+
</div>
251+
<div class="copyright text-center pb-5 text-body-secondary">
252+
<small>
253+
<p>
254+
<a class="text-decoration-none text-reset" href="//wiki.mtsmc.net/rule" target="_blank">市民公约</a>
255+
|
256+
<a class="text-decoration-none text-reset" href="//rxgzs.cn/clause" target="_blank">服务条款</a>
257+
|
258+
<a class="text-decoration-none text-reset" href="//rxgzs.cn/privacy" target="_blank">隐私政策</a> |
259+
<a class="text-decoration-none text-reset" href="//rxgzs.cn/" target="_blank">湖南阿尔克斯网络科技有限公司</a>
260+
|
261+
<a class="text-decoration-none text-reset" href="https://beian.miit.gov.cn/"
262+
target="_blank">湘ICP备2022013019号-1</a>
263+
<br>
264+
Copyright © 2016~2023 <a class="text-decoration-none text-reset" href="https://rxgzs.cn"
265+
target="_blank">RX Studio</a> All rights reserved.
266+
<br>
267+
Operated by RX Studio Web Group.
268+
<br>
269+
<i class="bi bi-git"></i>Version: {{VERSION}}
270+
</p>
271+
</small>
272+
</div>
273+
</footer>
274+
275+
<script src="bootstrap/bootstrap.bundle.min.js"></script>
276+
<script src="js/main.js"></script>
277+
<script src="js/download.js"></script>
278+
</body>
279+
280+
</html>

‎js/download.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
//初始化所有弹窗实体
2+
var loadingModal = new bootstrap.Modal(document.getElementById('loading'));
3+
var successModal = new bootstrap.Modal(document.getElementById('success'));
4+
var invalidModal = new bootstrap.Modal(document.getElementById('invalid'));
5+
var errorModal = new bootstrap.Modal(document.getElementById('error'));
6+
7+
//验证用户表单输入
8+
document.getElementById("post-btn").addEventListener("click", function (event) {
9+
const form = document.querySelector("form");
10+
if (!form.checkValidity()) {
11+
event.preventDefault();
12+
form.classList.add("was-validated");
13+
} else {
14+
event.preventDefault();
15+
downloadRequest();
16+
}
17+
});
18+
19+
//请求后端API
20+
function downloadRequest() {
21+
loadingModal.show();
22+
setTimeout(function () {
23+
username = document.getElementById("username").value;
24+
email = document.getElementById("email").value;
25+
26+
requestUrl = "https://api.mtsmc.net/download/send?name=" + username + "&email=" + email;
27+
28+
fetch(requestUrl)
29+
.then(response => response.json())
30+
.then(result => {
31+
if (result.status == "200") {
32+
loadingModal.hide();
33+
successModal.show();
34+
} else if (result.status == "403") {
35+
loadingModal.hide();
36+
invalidModal.show();
37+
} else {
38+
loadingModal.hide();
39+
errorModal.show();
40+
}
41+
})
42+
.catch(error => {
43+
console.log('error', error);
44+
loadingModal.hide();
45+
errorModal.show();
46+
});
47+
}, 1000);
48+
}

0 commit comments

Comments
 (0)