halo-theme-pix/embed-code/page/store.html

<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>