新增嵌入式代码块；优化通知书推送时机
This commit is contained in:
anian
@@ -0,0 +1,315 @@
|
||||
<style>
|
||||
.store * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Inter", "Microsoft YaHei", Arial;
|
||||
}
|
||||
|
||||
.store {
|
||||
--primary: #50C878;
|
||||
--primary-light: #90EE90;
|
||||
--primary-dark: #3A9156;
|
||||
--danger: #E74C3C;
|
||||
--bg: #F9FFFB;
|
||||
--shadow: 0 12px 30px rgba(80, 200, 120, .12);
|
||||
--radius: 18px;
|
||||
padding: 26px 14px;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.store .container {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 24px;
|
||||
border-radius: var(--radius);
|
||||
background: #fff;
|
||||
box-shadow: var(--shadow);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.store .top-bar {
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
background: linear-gradient(90deg, #8ef5b4, #50C878, #3A9156);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.store .title {
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #2C3E50;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
/* 搜索 */
|
||||
.store .tag-container {
|
||||
margin: 10px 0
|
||||
}
|
||||
|
||||
.store .tag-search-wrapper {
|
||||
position: relative;
|
||||
margin-bottom: 6px
|
||||
}
|
||||
|
||||
#tag-search {
|
||||
width: 100%;
|
||||
padding: 7px 12px 7px 34px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #c9efd6;
|
||||
outline: none;
|
||||
background: #fafffb;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.store .search-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 10px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* 标签居中 */
|
||||
.store .tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #c9efd6;
|
||||
background: rgba(144, 238, 144, .08);
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.store .tag-item {
|
||||
padding: 5px 7px;
|
||||
border-radius: 9px;
|
||||
border: 1px solid #90ee90;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
color: #2c6e49;
|
||||
transition: .25s;
|
||||
}
|
||||
|
||||
.store .tag-item:hover {
|
||||
background: linear-gradient(135deg, #90ee90, #50c878);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 无结果提示 */
|
||||
.store .no-result {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #7f8c8d;
|
||||
font-size: 13px;
|
||||
padding: 8px 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 输入框 */
|
||||
.store .input-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
#file-path {
|
||||
flex: 1;
|
||||
padding: 8px 14px;
|
||||
border-radius: 12px;
|
||||
border: 2px solid #e8f7ec;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#submit-btn {
|
||||
padding: 10px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, #50c878, #3a9156);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 底部提示（改成浅黄色系） */
|
||||
.store .tips {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
color: #a97400;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 215, 0, .12);
|
||||
border: 1px solid rgba(243, 156, 18, .25);
|
||||
}
|
||||
|
||||
/* 手机端 */
|
||||
@media(max-width:520px) {
|
||||
.store {
|
||||
padding: 14px
|
||||
}
|
||||
|
||||
.store .container {
|
||||
padding: 22px 18px;
|
||||
max-width: 95%
|
||||
}
|
||||
|
||||
.store .title {
|
||||
font-size: 22px
|
||||
}
|
||||
|
||||
.store .input-group {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
#submit-btn {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.store .tag-list {
|
||||
max-height: 120px
|
||||
}
|
||||
}
|
||||
|
||||
/* Toast */
|
||||
.custom-toast {
|
||||
position: fixed;
|
||||
top: 26px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-80px);
|
||||
background: #2ECC71;
|
||||
color: #fff;
|
||||
padding: 12px 20px;
|
||||
border-radius: 10px;
|
||||
transition: .4s;
|
||||
opacity: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.toast-show {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
background: #E74C3C
|
||||
}
|
||||
|
||||
.toast-warning {
|
||||
background: #F39C12
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="store">
|
||||
<div class="container">
|
||||
<div class="top-bar"></div>
|
||||
|
||||
<h1 class="title">Anian的储物柜</h1>
|
||||
|
||||
<div class="tag-container">
|
||||
<div class="tag-search-wrapper">
|
||||
<span class="search-icon">🔍</span>
|
||||
<input id="tag-search" placeholder="搜索标签">
|
||||
</div>
|
||||
|
||||
<div class="tag-list">
|
||||
<div class="tag-item" data-value="test.zip">测试压缩包</div>
|
||||
<div class="tag-item" data-value="docs/report.pdf">示例报告</div>
|
||||
<div class="tag-item" data-value="images/banner.jpg">横幅图片</div>
|
||||
<div class="tag-item" data-value="software/setup.exe">安装程序</div>
|
||||
|
||||
<div class="no-result" id="noResult">没有匹配的结果</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input id="file-path" placeholder="请输入路径" autocomplete="off">
|
||||
<button id="submit-btn">访问 / 下载</button>
|
||||
</div>
|
||||
|
||||
<p class="tips">⚠️ 错误过多将可能被封禁</p>
|
||||
</div>
|
||||
|
||||
<div class="custom-toast" id="customToast"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function initializeStoreEvents() {
|
||||
const container = document.querySelector(".store");
|
||||
if (!container || container.dataset.init === "1") return;
|
||||
container.dataset.init = "1";
|
||||
|
||||
const input = document.getElementById('file-path');
|
||||
const btn = document.getElementById('submit-btn');
|
||||
const toast = document.getElementById('customToast');
|
||||
const tagItems = document.querySelectorAll('.tag-item');
|
||||
const tagSearch = document.getElementById('tag-search');
|
||||
const noResult = document.getElementById('noResult');
|
||||
|
||||
function showToast(msg, type = 'warning') {
|
||||
toast.textContent = msg;
|
||||
toast.className = 'custom-toast toast-' + type + ' toast-show';
|
||||
setTimeout(() => toast.classList.remove('toast-show'), 2600);
|
||||
}
|
||||
|
||||
tagItems.forEach(t => {
|
||||
t.onclick = () => {
|
||||
input.value = t.dataset.value;
|
||||
showToast('已填入 ' + t.dataset.value, 'success');
|
||||
};
|
||||
});
|
||||
|
||||
tagSearch.oninput = () => {
|
||||
const k = tagSearch.value.toLowerCase();
|
||||
let visible = 0;
|
||||
|
||||
tagItems.forEach(t => {
|
||||
const show = t.textContent.toLowerCase().includes(k) ||
|
||||
t.dataset.value.toLowerCase().includes(k);
|
||||
t.style.display = show ? 'inline-flex' : 'none';
|
||||
if (show) visible++;
|
||||
});
|
||||
|
||||
noResult.style.display = visible === 0 ? 'block' : 'none';
|
||||
};
|
||||
|
||||
function check(url) {
|
||||
return new Promise(r => {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('HEAD', url, true);
|
||||
xhr.timeout = 5000;
|
||||
xhr.onload = () => r(xhr.status === 200);
|
||||
xhr.onerror = () => r(false);
|
||||
xhr.ontimeout = () => r(false);
|
||||
xhr.send();
|
||||
});
|
||||
}
|
||||
|
||||
async function go() {
|
||||
const v = input.value.trim();
|
||||
if (!v) return showToast('请输入路径');
|
||||
const url = '/' + v;
|
||||
btn.textContent = '检测中...';
|
||||
btn.disabled = true;
|
||||
const ok = await check(url);
|
||||
if (ok) {
|
||||
showToast('资源存在，跳转中', 'success');
|
||||
setTimeout(() => location.href = url, 700);
|
||||
} else showToast('资源不存在', 'error');
|
||||
setTimeout(() => { btn.textContent = '访问 / 下载'; btn.disabled = false }, 700);
|
||||
}
|
||||
|
||||
btn.onclick = go;
|
||||
input.onkeydown = e => { if (e.key === 'Enter') go(); };
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", initializeStoreEvents);
|
||||
document.addEventListener("pjax:complete", initializeStoreEvents);
|
||||
</script>
|
||||
Reference in New Issue
Block a user