kkxp4wn6qd-cmd.github.io

[kkxp4wn6qd-cmd]

<title>收納分類管理系統（最終版）</title> <style> /* 全域樣式：淺色漸變背景 + 舒適視覺 */ body { margin: 0; padding: 20px; font-family: "Microsoft JhengHei", Arial, sans-serif; background: linear-gradient(135deg, #fafbfc 0%, #e8f4f8 100%); min-height: 100vh; color: #333; line-height: 1.6; }

    /* 核心：一類一個框框（整潔分區） */
    .category-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 22px;
        margin: 30px 0;
    }

    .category-box {
        background: #ffffff;
        padding: 22px;
        border-radius: 12px;
        box-shadow: 0 3px 12px rgba(0,0,0,0.06);
        transition: all 0.3s ease;
        position: relative;
    }

    .category-box:hover {
        box-shadow: 0 6px 18px rgba(0,0,0,0.1);
        transform: translateY(-2px);
    }

    .category-title {
        font-size: 19px;
        font-weight: bold;
        margin-bottom: 18px;
        padding-bottom: 12px;
        border-bottom: 2px solid #f0f8fb;
        color: #2d3748;
    }

    .category-items {
        list-style: none;
        padding: 0;
        margin: 0;
        max-height: 320px;
        overflow-y: auto;
    }

    .category-items li {
        padding: 9px 0;
        border-bottom: 1px solid #f5fafe;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 15px;
    }

    /* 按鈕樣式優化（保留功能+提升體驗） */
    .item-btn {
        padding: 5px 10px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        margin-left: 6px;
        transition: background 0.2s;
    }

    .edit-btn {
        background: #4299e1;
        color: white;
    }

    .edit-btn:hover {
        background: #3182ce;
    }

    .delete-btn {
        background: #e53e3e;
        color: white;
    }

    .delete-btn:hover {
        background: #c53030;
    }

    /* 後台按鈕：角落固定（不擾視線） */
    .admin-btn {
        position: fixed;
        bottom: 30px;
        right: 30px;
        padding: 14px 28px;
        background: #48bb78;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        opacity: 0.85;
        z-index: 999;
        font-size: 15px;
        box-shadow: 0 4px 12px rgba(72,187,120,0.3);
        transition: all 0.3s;
    }

    .admin-btn:hover {
        opacity: 1;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(72,187,120,0.4);
    }

    /* 密碼彈窗（簡潔安全） */
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1000;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
    }

    .modal-content {
        background: white;
        padding: 35px;
        border-radius: 12px;
        width: 340px;
        text-align: center;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }

    .modal-content h3 {
        color: #2d3748;
        margin-bottom: 25px;
        font-size: 18px;
    }

    .modal input {
        width: 88%;
        padding: 14px;
        margin: 15px 0 25px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 15px;
        outline: none;
        transition: border 0.2s;
    }

    .modal input:focus {
        border-color: #4299e1;
        box-shadow: 0 0 0 3px rgba(66,153,225,0.1);
    }

    .modal-btn {
        padding: 11px 24px;
        margin: 0 10px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 15px;
        transition: background 0.2s;
    }

    .confirm-btn {
        background: #48bb78;
        color: white;
    }

    .confirm-btn:hover {
        background: #38a169;
    }

    .cancel-btn {
        background: #e53e3e;
        color: white;
    }

    .cancel-btn:hover {
        background: #c53030;
    }

    /* 表單樣式（保留所有欄位+優化布局） */
    .form-container {
        display: none;
        background: white;
        padding: 35px;
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
        max-width: 580px;
        margin: 30px auto;
    }

    .form-container h3 {
        margin-top: 0;
        color: #2d3748;
        border-bottom: 2px solid #f0f8fb;
        padding-bottom: 12px;
        font-size: 20px;
    }

    .form-group {
        margin-bottom: 22px;
    }

    .form-group label {
        display: block;
        margin-bottom: 9px;
        font-weight: 500;
        color: #4a5568;
        font-size: 15px;
    }

    .form-group input, .form-group textarea {
        width: 100%;
        padding: 14px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        box-sizing: border-box;
        font-size: 15px;
        outline: none;
        transition: border 0.2s;
    }

    .form-group input:focus, .form-group textarea:focus {
        border-color: #4299e1;
        box-shadow: 0 0 0 3px rgba(66,153,225,0.1);
    }

    .form-group textarea {
        min-height: 100px;
        resize: vertical;
        line-height: 1.6;
    }

    .form-actions {
        text-align: right;
        margin-top: 25px;
    }

    .form-btn {
        padding: 12px 28px;
        margin-left: 12px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 15px;
        transition: background 0.2s;
    }

    .save-btn {
        background: #4299e1;
        color: white;
    }

    .save-btn:hover {
        background: #3182ce;
    }

    .close-btn {
        background: #718096;
        color: white;
    }

    .close-btn:hover {
        background: #4a5568;
    }

    /* 頁面標題（醒目不刺眼） */
    .page-title {
        text-align: center;
        color: #2d3748;
        margin: 20px 0 10px;
        font-size: 32px;
        font-weight: bold;
    }

    /* 搜尋框（保留功能+優化體驗） */
    .search-container {
        max-width: 650px;
        margin: 0 auto 35px;
        text-align: center;
    }

    .search-input {
        width: 100%;
        padding: 15px 20px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        font-size: 16px;
        background: white;
        box-shadow: 0 3px 10px rgba(0,0,0,0.04);
        outline: none;
        transition: all 0.2s;
    }

    .search-input:focus {
        border-color: #4299e1;
        box-shadow: 0 3px 12px rgba(66,153,225,0.1);
    }

    /* 提示訊息（醒目不擾人） */
    .alert {
        padding: 18px;
        margin: 25px auto;
        max-width: 650px;
        border-radius: 10px;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
    }

    .alert-success {
        background: #f0fdf4;
        color: #166534;
        border: 1px solid #dcfce7;
    }

    .alert-danger {
        background: #fee2e2;
        color: #991b1b;
        border: 1px solid #fecaca;
    }

    /* 滾動條優化（美觀+順滑） */
    ::-webkit-scrollbar {
        width: 9px;
        height: 9px;
    }
    ::-webkit-scrollbar-track {
        background: #f8fafc;
        border-radius: 6px;
    }
    ::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 6px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

    /* 備註區樣式 */
    .category-desc {
        margin-top: 18px;
        padding: 12px 15px;
        background: #f8fafc;
        border-radius: 8px;
        font-size: 14px;
        color: #64748b;
        line-height: 1.7;
    }

    .category-actions {
        margin-top: 20px;
        text-align: right;
    }
</style>

你的瀏覽器不支援音頻播放

<!-- 頁面標題 -->
<h1 class="page-title">收納分類管理系統</h1>

<!-- 搜尋功能（全域搜尋分類/項目） -->
<div class="search-container">
    <input type="text" class="search-input" id="searchInput" placeholder="輸入關鍵字搜尋分類或項目..." onkeyup="searchItems()">
</div>

<!-- 提示訊息區 -->
<div id="alertBox" class="alert" style="display: none;"></div>

<!-- 核心：分類展示區（一類一個框，包含所有原始資料） -->
<div class="category-container" id="categoryContainer">
    <!-- 原始200+條資料會自動渲染在這裡 -->
</div>

<!-- 後台管理按鈕（右下角加密入口） -->
<button class="admin-btn" onclick="openAdminModal()">後台管理（新增/修改/刪除）</button>

<!-- 密碼驗證彈窗 -->
<div class="modal" id="passwordModal">
    <div class="modal-content">
        <h3>管理員身份驗證</h3>
        <input type="password" id="adminPwd" placeholder="請輸入管理員密碼">
        <div>
            <button class="modal-btn confirm-btn" onclick="verifyPassword()">確認</button>
            <button class="modal-btn cancel-btn" onclick="closeModal()">取消</button>
        </div>
    </div>
</div>

<!-- 新增/修改表單（保留所有原始欄位） -->
<div class="form-container" id="editForm">
    <h3 id="formTitle">新增分類項目</h3>
    <div class="form-group">
        <label for="catName">分類名稱 <span style="color: #e53e3e;">*</span></label>
        <input type="text" id="catName" placeholder="請輸入分類名稱（例如：收納容器）" required>
    </div>
    <div class="form-group">
        <label for="catItems">分類項目（多個項目用逗號分隔）<span style="color: #e53e3e;">*</span></label>
        <input type="text" id="catItems" placeholder="請輸入項目（例如：玻璃盒,塑膠盒,鐵盒）" required>
    </div>
    <div class="form-group">
        <label for="catDesc">分類備註（選填）</label>
        <textarea id="catDesc" rows="3" placeholder="請輸入分類備註說明（例如：適用場景、材質特性等）..."></textarea>
    </div>
    <div class="form-actions">
        <button class="form-btn save-btn" onclick="saveCategory()">儲存</button>
        <button class="form-btn close-btn" onclick="closeForm()">關閉</button>
    </div>
</div>

<script>
    // ========== 替換這裡為你的200+條原始資料 ==========
    // 格式：id（唯一標識）、category（分類名稱）、items（項目數組）、desc（備註）
    const originalDatabase = [
        { 
            id: 1, 
            category: "收納容器", 
            items: ["玻璃盒", "塑膠盒", "鐵盒", "紙盒", "木盒", "鋁盒", "陶瓷盒"], 
            desc: "基礎收納容器，涵蓋多種材質，適用於居家、辦公、廚房等場景" 
        },
        { 
            id: 2, 
            category: "廚房收納", 
            items: ["調料架", "保鮮盒", "鍋具收納架", "餐具籃", "油瓶架", "砧板收納架", "筷子筒", "保溫杯收納盒"], 
            desc: "廚房專用收納工具，防油防水易清潔，提升廚房空間利用率" 
        },
        { 
            id: 3, 
            category: "衣櫃收納", 
            items: ["衣架", "收納箱", "抽屜分隔盒", "防塵套", "褲架", "領帶收納盒", "內衣收納格", "鞋子收納盒"], 
            desc: "衣櫃整理專用，節省空間、易分類，防止衣物灰塵沾染" 
        },
        { 
            id: 4, 
            category: "辦公室收納", 
            items: ["文件夾", "筆筒", "收納櫃", "線材收納盒", "印表機紙收納架", "名片盒", "便利貼收納盒", "書立"], 
            desc: "辦公桌/辦公室整理工具，提升工作效率，保持桌面整潔" 
        },
        { 
            id: 5, 
            category: "浴室收納", 
            items: ["洗漱台收納架", "毛巾架", "沐浴露收納盒", "牙刷收納筒", "馬桶刷收納架"], 
            desc: "浴室專用，防潮防銹，方便收納洗漱用品" 
        },
        // ========== 繼續添加你的剩餘原始資料 ==========
        // { 
        //     id: 6, 
        //     category: "你的分類名稱", 
        //     items: ["項目1", "項目2", "項目3"...], 
        //     desc: "你的備註說明" 
        // },
        // ... 直到添加完所有200+條資料
    ];

    // 全局變量
    let currentEditId = null; // 當前編輯的分類ID
    const ADMIN_PASSWORD = "admin123"; // 管理員密碼（可自行修改）

    // 頁面加載初始化
    window.onload = function() {
        // 1. 啟動背景音樂（1秒後解除靜音，避免瀏覽器限制）
        setTimeout(() => {
            const music = document.getElementById('bg-music');
            music.muted = false;
            music.volume = 0.18; // 低音量，不影響操作
        }, 1200);

        // 2. 渲染所有原始資料（一類一個框）
        renderAllCategories(originalDatabase);
    };

    // ========== 核心功能：渲染所有分類（一類一個框） ==========
    function renderAllCategories(data) {
        const container = document.getElementById('categoryContainer');
        container.innerHTML = '';

        if (data.length === 0) {
            container.innerHTML = `
                <div style="grid-column: 1/-1; text-align: center; padding: 80px 20px; color: #64748b; font-size: 18px;">
                    暫無分類資料，請點擊右下角「後台管理」新增
                </div>
            `;
            return;
        }

        // 遍歷資料生成每個分類框
        data.forEach(item => {
            const categoryBox = document.createElement('div');
            categoryBox.className = 'category-box';
            categoryBox.dataset.id = item.id;

            // 組裝分類框內容（包含項目、備註、操作按鈕）
            categoryBox.innerHTML = `
                <div class="category-title">${item.category}</div>
                <ul class="category-items">
                    ${item.items.map((subItem, idx) => `
                        <li>
                            <span>${subItem}</span>
                            <div>
                                <button class="item-btn edit-btn" onclick="editSingleItem(${item.id}, ${idx})">編輯</button>
                                <button class="item-btn delete-btn" onclick="deleteSingleItem(${item.id}, ${idx})">刪除</button>
                            </div>
                        </li>
                    `).join('')}
                </ul>
                <div class="category-desc">
                    <strong>備註：</strong>${item.desc || '無特殊備註'}
                </div>
                <div class="category-actions">
                    <button class="item-btn edit-btn" onclick="editWholeCategory(${item.id})">編輯分類</button>
                    <button class="item-btn delete-btn" onclick="deleteWholeCategory(${item.id})">刪除分類</button>
                </div>
            `;

            container.appendChild(categoryBox);
        });
    }

    // ========== 保留原始功能：搜尋分類/項目 ==========
    function searchItems() {
        const searchKey = document.getElementById('searchInput').value.trim().toLowerCase();
        if (!searchKey) {
            renderAllCategories(originalDatabase);
            hideAlert();
            return;
        }

        // 匹配分類名稱或項目
        const filteredData = originalDatabase.filter(item => {
            const catMatch = item.category.toLowerCase().includes(searchKey);
            const itemMatch = item.items.some(subItem => subItem.toLowerCase().includes(searchKey));
            return catMatch || itemMatch;
        });

        if (filteredData.length === 0) {
            showAlert(`未找到包含「${searchKey}」的內容，請更換搜尋詞`, 'danger');
            container.innerHTML = `
                <div style="grid-column: 1/-1; text-align: center; padding: 80px 20px; color: #64748b; font-size: 18px;">
                    未找到與「${searchKey}」相關的內容
                </div>
            `;
        } else {
            renderAllCategories(filteredData);
            hideAlert();
        }
    }

    // ========== 保留原始功能：提示訊息 ==========
    function showAlert(message, type) {
        const alertBox = document.getElementById('alertBox');
        alertBox.textContent = message;
        alertBox.className = `alert alert-${type}`;
        alertBox.style.display = 'block';

        setTimeout(() => hideAlert(), 3500);
    }

    function hideAlert() {
        document.getElementById('alertBox').style.display = 'none';
    }

    // ========== 加密後台：密碼驗證 ==========
    function openAdminModal() {
        document.getElementById('passwordModal').style.display = 'flex';
        document.getElementById('adminPwd').value = '';
    }

    function closeModal() {
        document.getElementById('passwordModal').style.display = 'none';
    }

    function verifyPassword() {
        const inputPwd = document.getElementById('adminPwd').value.trim();
        if (inputPwd === ADMIN_PASSWORD) {
            closeModal();
            // 判斷是新增還是修改（修改時已儲存currentEditId）
            if (currentEditId) {
                const targetData = originalDatabase.find(item => item.id === currentEditId);
                openForm('修改', targetData);
            } else {
                openForm('新增');
            }
        } else {
            showAlert('密碼錯誤！請重新輸入', 'danger');
            document.getElementById('adminPwd').value = '';
        }
    }

    // ========== 保留原始功能：新增/修改表單 ==========
    function openForm(type, data = null) {
        const form = document.getElementById('editForm');
        const formTitle = document.getElementById('formTitle');

        if (type === '新增') {
            currentEditId = null;
            formTitle.textContent = '新增分類項目';
            document.getElementById('catName').value = '';
            document.getElementById('catItems').value = '';
            document.getElementById('catDesc').value = '';
        } else if (type === '修改') {
            formTitle.textContent = `修改分類：${data.category}`;
            document.getElementById('catName').value = data.category;
            document.getElementById('catItems').value = data.items.join(',');
            document.getElementById('catDesc').value = data.desc || '';
        }

        form.style.display = 'block';
        form.scrollIntoView({ behavior: 'smooth' });
    }

    function closeForm() {
        document.getElementById('editForm').style.display = 'none';
        currentEditId = null;
    }

    // ========== 保留原始功能：儲存分類（新增/修改） ==========
    function saveCategory() {
        const catName = document.getElementById('catName').value.trim();
        const catItems = document.getElementById('catItems').value.trim();
        const catDesc = document.getElementById('catDesc').value.trim();

        // 表單驗證
        if (!catName) {
            showAlert('分類名稱不能為空！', 'danger');
            return;
        }
        if (!catItems) {
            showAlert('分類項目不能為空！', 'danger');
            return;
        }

        const itemsArray = catItems.split(',').map(item => item.trim()).filter(item => item);

        if (currentEditId === null) {
            // 新增：生成唯一ID
            const newId = originalDatabase.length > 0 
                ? Math.max(...originalDatabase.map(item => item.id)) + 1 
                : 1;
            originalDatabase.push({ id: newId, category: catName, items: itemsArray, desc: catDesc });
            showAlert('新增分類成功！', 'success');
        } else {
            // 修改：更新原有數據
            const index = originalDatabase.findIndex(item => item.id === currentEditId);
            if (index !== -1) {
                originalDatabase[index] = { id: currentEditId, category: catName, items: itemsArray, desc: catDesc };
                showAlert('修改分類成功！', 'success');
            }
        }

        renderAllCategories(originalDatabase);
        closeForm();
    }

    // ========== 保留原始功能：編輯單個項目 ==========
    function editSingleItem(catId, itemIdx) {
        const targetCat = originalDatabase.find(item => item.id === catId);
        if (targetCat) {
            const oldItem = targetCat.items[itemIdx];
            const newItem = prompt('請輸入修改後的項目名稱：', oldItem);
            if (newItem && newItem.trim()) {
                targetCat.items[itemIdx] = newItem.trim();
                renderAllCategories(originalDatabase);
                showAlert('修改項目成功！', 'success');
            }
        }
    }

    // ========== 保留原始功能：刪除單個項目 ==========
    function deleteSingleItem(catId, itemIdx) {
        const targetCat = originalDatabase.find(item => item.id === catId);
        if (targetCat && confirm(`確定要刪除「${targetCat.items[itemIdx]}」嗎？`)) {
            targetCat.items.splice(itemIdx, 1);
            // 項目清空時提示是否刪除分類
            if (targetCat.items.length === 0) {
                if (confirm('該分類已無項目，是否一併刪除整個分類？')) {
                    deleteWholeCategory(catId);
                    return;
                }
            }
            renderAllCategories(originalDatabase);
            showAlert('刪除項目成功！', 'success');
        }
    }

    // ========== 保留原始功能：編輯整個分類 ==========
    function editWholeCategory(catId) {
        const targetData = originalDatabase.find(item => item.id === catId);
        if (targetData) {
            currentEditId = catId;
            openAdminModal(); // 需驗證密碼後才能修改
        }
    }

    // ========== 保留原始功能：刪除整個分類 ==========
    function deleteWholeCategory(catId) {
        const targetData = originalDatabase.find(item => item.id === catId);
        if (targetData && confirm(`確定要刪除「${targetData.category}」整個分類嗎？刪除後無法復原！`)) {
            // 密碼驗證
            openAdminModal();
            // 密碼正確後執行刪除
            document.getElementById('passwordModal').onclose = () => {
                const index = originalDatabase.findIndex(item => item.id === catId);
                if (index !== -1) {
                    originalDatabase.splice(index, 1);
                    renderAllCategories(originalDatabase);
                    showAlert('刪除分類成功！', 'success');
                }
            };
        }
    }
</script>