mirror of
https://github.com/everett7623/nodeloc_vps_test.git
synced 2025-01-23 13:36:59 +00:00
495 lines
14 KiB
HTML
495 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>测试结果页面</title>
|
||
</head>
|
||
<body>
|
||
<div class="loading">
|
||
正在加载文件
|
||
</div>
|
||
<div class="tabs"></div>
|
||
<button class="copy-btn" data-clipboard-target="#copy-target">
|
||
复制论坛代码/Copy BBCode
|
||
</button>
|
||
<textarea id="copy-target"></textarea>
|
||
<style>
|
||
html {
|
||
--body-bg: #fff;
|
||
--muted-color: #546e7a;
|
||
--border-radius: 5px;
|
||
--primary-color: #0d47a1;
|
||
--control-bg: #bbdefb;
|
||
}
|
||
html,
|
||
body {
|
||
height: 100%;
|
||
width: 100%;
|
||
padding: 0;
|
||
margin: 0;
|
||
overflow: hidden;
|
||
}
|
||
.copy-btn {
|
||
padding: 7px;
|
||
border-radius: var(--border-radius);
|
||
background: #0d47a1;
|
||
color: #fff;
|
||
vertical-align: bottom;
|
||
outline: 0;
|
||
border: unset;
|
||
box-shadow: 1px 1px 2px black;
|
||
cursor: pointer;
|
||
position: fixed;
|
||
left: 5px;
|
||
bottom: 5px;
|
||
}
|
||
.copy-btn:active {
|
||
box-shadow: 1px 1px 2px black inset;
|
||
}
|
||
#copy-target {
|
||
margin-top: 50px;
|
||
z-index: -1;
|
||
display: none;
|
||
}
|
||
|
||
.loading,
|
||
.error {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 100px;
|
||
text-align: center;
|
||
font-size: large;
|
||
z-index: 999;
|
||
}
|
||
.error {
|
||
background-color: #ffcdd2;
|
||
}
|
||
.loading {
|
||
background-color: #e3f2fd;
|
||
}
|
||
</style>
|
||
<style>
|
||
.tabs {
|
||
position: relative;
|
||
clear: both;
|
||
padding-top: 44px;
|
||
white-space: nowrap;
|
||
overflow: auto;
|
||
height: 28px;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
}
|
||
.tabs .tab {
|
||
display: inline-block;
|
||
}
|
||
.tabs .tab:first-of-type label {
|
||
border-top-left-radius: var(--border-radius);
|
||
}
|
||
.tabs .tab:last-of-type label {
|
||
border-top-right-radius: var(--border-radius);
|
||
}
|
||
.tabs .tab label {
|
||
background: var(--body-bg);
|
||
padding: 10px 10px 7px;
|
||
border: 1px solid var(--muted-color);
|
||
margin-left: -1px;
|
||
position: relative;
|
||
left: 1px;
|
||
}
|
||
.tabs .tab [type="radio"] {
|
||
display: none;
|
||
}
|
||
.tabs .content-tab {
|
||
display: none;
|
||
position: fixed;
|
||
top: 72px;
|
||
left: 0;
|
||
background: var(--body-bg);
|
||
right: 0;
|
||
bottom: 100px;
|
||
padding: 10px 20px;
|
||
border: 1px solid var(--muted-color);
|
||
border-radius: 0 var(--border-radius) var(--border-radius)
|
||
var(--border-radius);
|
||
overflow-y: auto;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
}
|
||
.tabs [type="radio"]:checked ~ label {
|
||
background: var(--control-bg);
|
||
border-bottom: 3px solid var(--primary-color);
|
||
}
|
||
.tabs [type="radio"]:checked ~ label ~ .content-tab {
|
||
display: block;
|
||
}
|
||
</style>
|
||
<script src="https://fastly.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
|
||
<script src="https://fastly.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
|
||
<script src="https://fastly.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
|
||
<script>
|
||
function getFilePath(fileName) {
|
||
// 从 URL 中提取路径部分
|
||
const urlSegments = location.pathname.split('/');
|
||
|
||
// 动态获取年份和月份
|
||
const year = urlSegments[2]; // 第二部分为年份
|
||
const month = urlSegments[3]; // 第三部分为月份
|
||
|
||
// 构造文件路径
|
||
return `/${year}/${month}/${fileName}`;
|
||
}
|
||
|
||
const fileNameMatch =
|
||
new URLSearchParams(window.location.search).get("filename") ||
|
||
location.pathname.split("/").pop();
|
||
|
||
if (fileNameMatch) {
|
||
const fileName = decodeURIComponent(fileNameMatch);
|
||
const filePath = getFilePath(fileName);
|
||
console.log(filePath);
|
||
|
||
$.ajax({
|
||
url: filePath,
|
||
success: render
|
||
});
|
||
}
|
||
|
||
function render(data) {
|
||
$("#copy-target").val(data);
|
||
$(".loading").remove();
|
||
$(".tabs").append(
|
||
$("<div>")
|
||
.addClass("tab")
|
||
.append(
|
||
$("<input>")
|
||
.attr("type", "radio")
|
||
.attr("id", `taball`)
|
||
.attr("name", "tabs")
|
||
.attr("checked", "checked")
|
||
)
|
||
.append($("<label>").attr("for", `taball`).text("全部/All"))
|
||
.append(
|
||
$("<div>")
|
||
.addClass("content-tab")
|
||
.append(
|
||
$("<code>")
|
||
.addClass("language-bbcode")
|
||
.append($("<pre>").text(data))
|
||
)
|
||
)
|
||
);
|
||
const tags = Array.from(
|
||
data.matchAll(/\[TAB=([^\]]*)\]([^]*?)\[\/tab\]/gi)
|
||
);
|
||
|
||
tags.forEach((tagMatching, i) => {
|
||
if (tagMatching[1] && tagMatching[2]) {
|
||
const tab = $("<div>")
|
||
.addClass("tab")
|
||
.append(
|
||
$("<input>")
|
||
.attr("type", "radio")
|
||
.attr("id", `tab-${i}`)
|
||
.attr("name", "tabs")
|
||
)
|
||
.append(
|
||
$("<label>").attr("for", `tab-${i}`).text(tagMatching[1])
|
||
);
|
||
|
||
const codeContentMatching = /```([^\s]*?)([^]*)```/.exec(
|
||
tagMatching[2]
|
||
);
|
||
const contentEl = $("<div>").addClass("content-tab");
|
||
if (codeContentMatching) {
|
||
const code = $("<code>").append(
|
||
$("<pre>").text(codeContentMatching[2])
|
||
);
|
||
if (codeContentMatching[1]) {
|
||
contentEl.addClass("language-" + codeContentMatching[1]);
|
||
}
|
||
contentEl.append(code);
|
||
} else {
|
||
contentEl.text(tagMatching[2]);
|
||
}
|
||
|
||
tab.append(contentEl);
|
||
$(".tabs").append(tab);
|
||
}
|
||
});
|
||
hljs.highlightAll();
|
||
new ClipboardJS(".copy-btn");
|
||
}
|
||
|
||
function fail() {
|
||
$(".loading").attr("class", "error").text("无法加载数据文件，请检查URL");
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>测试结果页面</title>
|
||
</head>
|
||
<body>
|
||
<div class="loading">
|
||
正在加载文件
|
||
</div>
|
||
<div class="tabs"></div>
|
||
<div class="footer">
|
||
<button class="copy-btn" data-clipboard-target="#copy-target">
|
||
复制代码 / Copy
|
||
</button>
|
||
<button class="link-btn" id="visit-forum">
|
||
访问论坛 / Visit forum
|
||
</button>
|
||
</div>
|
||
<textarea id="copy-target"></textarea>
|
||
<style>
|
||
html {
|
||
--body-bg: #fff;
|
||
--muted-color: #546e7a;
|
||
--border-radius: 5px;
|
||
--primary-color: #0d47a1;
|
||
--control-bg: #bbdefb;
|
||
}
|
||
html,
|
||
body {
|
||
height: 100%;
|
||
width: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
background: url('https://s.rmimg.com/2025/01/21/b5af503d48d3cacdddd5089dabe4a76c.jpg') no-repeat center center fixed;
|
||
background-size: cover;
|
||
font-family: Arial, sans-serif;
|
||
overflow: hidden;
|
||
}
|
||
.copy-btn {
|
||
padding: 7px;
|
||
border-radius: var(--border-radius);
|
||
background: #0d47a1;
|
||
color: #fff;
|
||
vertical-align: bottom;
|
||
outline: 0;
|
||
border: unset;
|
||
box-shadow: 1px 1px 2px black;
|
||
cursor: pointer;
|
||
}
|
||
.link-btn {
|
||
padding: 7px;
|
||
border-radius: var(--border-radius);
|
||
background: #0da148;
|
||
color: #fff;
|
||
vertical-align: bottom;
|
||
outline: 0;
|
||
border: unset;
|
||
box-shadow: 1px 1px 2px black;
|
||
cursor: pointer;
|
||
}
|
||
.copy-btn:active {
|
||
box-shadow: 1px 1px 2px black inset;
|
||
}
|
||
#copy-target {
|
||
margin-top: 50px;
|
||
z-index: -1;
|
||
width: 0px;
|
||
height: 0px;
|
||
}
|
||
|
||
.loading,
|
||
.error {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 100px;
|
||
text-align: center;
|
||
font-size: large;
|
||
z-index: 999;
|
||
}
|
||
.error {
|
||
background-color: #ffcdd2;
|
||
}
|
||
.loading {
|
||
background-color: #e3f2fd;
|
||
}
|
||
</style>
|
||
<style>
|
||
.footer{
|
||
position: fixed;
|
||
bottom: 50px;
|
||
width: 1000px;
|
||
max-width: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
clear: both;
|
||
}
|
||
.tabs {
|
||
position: relative;
|
||
clear: both;
|
||
padding-top: 44px;
|
||
white-space: nowrap;
|
||
height: 28px;
|
||
max-width: 1041px;
|
||
margin: 0 auto;
|
||
}
|
||
.tabs .tab {
|
||
display: inline-block;
|
||
}
|
||
.tabs .tab:first-of-type label {
|
||
border-top-left-radius: var(--border-radius);
|
||
}
|
||
.tabs .tab:last-of-type label {
|
||
border-top-right-radius: var(--border-radius);
|
||
}
|
||
.tabs .tab label {
|
||
background: var(--body-bg);
|
||
padding: 10px 10px 7px;
|
||
border: 1px solid var(--muted-color);
|
||
margin-left: -1px;
|
||
position: relative;
|
||
left: 1px;
|
||
opacity: 68%;
|
||
}
|
||
.tabs .tab [type="radio"] {
|
||
display: none;
|
||
}
|
||
.tabs .content-tab {
|
||
display: none;
|
||
position: fixed;
|
||
top: 72px;
|
||
left: 0;
|
||
background: #000;
|
||
right: 0;
|
||
color: #fff;
|
||
bottom: 100px;
|
||
padding: 10px 20px;
|
||
border: 1px solid var(--muted-color);
|
||
border-radius: 0 var(--border-radius) var(--border-radius)
|
||
var(--border-radius);
|
||
overflow-y: auto;
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
opacity: 0.68;
|
||
|
||
}
|
||
.tabs [type="radio"]:checked ~ label {
|
||
background: var(--control-bg);
|
||
border-bottom: 3px solid var(--primary-color);
|
||
}
|
||
.tabs [type="radio"]:checked ~ label ~ .content-tab {
|
||
display: block;
|
||
}
|
||
</style>
|
||
<script src="https://fastly.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
|
||
<script src="https://fastly.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
|
||
<script src="https://fastly.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
|
||
<script>
|
||
document.getElementById('visit-forum').addEventListener('click', function () {
|
||
window.location.href = "https://www.nodeloc.com";
|
||
});
|
||
function getFilePath(fileName) {
|
||
// 从 URL 中提取路径部分
|
||
const urlSegments = location.pathname.split('/');
|
||
|
||
// 动态获取年份和月份
|
||
const year = urlSegments[2]; // 第二部分为年份
|
||
const month = urlSegments[3]; // 第三部分为月份
|
||
|
||
// 构造文件路径
|
||
return `/${year}/${month}/${fileName}`;
|
||
}
|
||
|
||
const fileNameMatch =
|
||
new URLSearchParams(window.location.search).get("filename") ||
|
||
location.pathname.split("/").pop();
|
||
|
||
if (fileNameMatch) {
|
||
const fileName = decodeURIComponent(fileNameMatch);
|
||
const filePath = getFilePath(fileName);
|
||
console.log(filePath);
|
||
|
||
$.ajax({
|
||
url: filePath,
|
||
success: render
|
||
});
|
||
}
|
||
|
||
function render(data) {
|
||
$("#copy-target").val(data);
|
||
$(".loading").remove();
|
||
$(".tabs").append(
|
||
$("<div>")
|
||
.addClass("tab")
|
||
.append(
|
||
$("<input>")
|
||
.attr("type", "radio")
|
||
.attr("id", `taball`)
|
||
.attr("name", "tabs")
|
||
.attr("checked", "checked")
|
||
)
|
||
.append($("<label>").attr("for", `taball`).text("全部/All"))
|
||
.append(
|
||
$("<div>")
|
||
.addClass("content-tab")
|
||
.append(
|
||
$("<code>")
|
||
.addClass("language-bbcode")
|
||
.append($("<pre>").text(data))
|
||
)
|
||
)
|
||
);
|
||
const tags = Array.from(
|
||
data.matchAll(/\[TAB=([^\]]*)\]([^]*?)\[\/tab\]/gi)
|
||
);
|
||
|
||
tags.forEach((tagMatching, i) => {
|
||
if (tagMatching[1] && tagMatching[2]) {
|
||
const tab = $("<div>")
|
||
.addClass("tab")
|
||
.append(
|
||
$("<input>")
|
||
.attr("type", "radio")
|
||
.attr("id", `tab-${i}`)
|
||
.attr("name", "tabs")
|
||
)
|
||
.append(
|
||
$("<label>").attr("for", `tab-${i}`).text(tagMatching[1].replace(/"/g, ""))
|
||
);
|
||
|
||
const codeContentMatching = /```([^\s]*?)([^]*)```/.exec(
|
||
tagMatching[2]
|
||
);
|
||
const contentEl = $("<div>").addClass("content-tab");
|
||
if (codeContentMatching) {
|
||
const code = $("<code>").append(
|
||
$("<pre>").text(codeContentMatching[2])
|
||
);
|
||
if (codeContentMatching[1]) {
|
||
contentEl.addClass("language-" + codeContentMatching[1]);
|
||
}
|
||
contentEl.append(code);
|
||
} else {
|
||
contentEl.text(tagMatching[2]);
|
||
}
|
||
|
||
tab.append(contentEl);
|
||
$(".tabs").append(tab);
|
||
}
|
||
});
|
||
hljs.highlightAll();
|
||
new ClipboardJS(".copy-btn");
|
||
}
|
||
|
||
function fail() {
|
||
$(".loading").attr("class", "error").text("无法加载数据文件，请检查URL");
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|