diff --git a/templates/index.html b/templates/index.html index 10b33ba..ac3257f 100644 --- a/templates/index.html +++ b/templates/index.html @@ -60,6 +60,31 @@ .supported { margin-top: 1rem; font-size: 0.8rem; color: #636e72; } .supported span { color: #0984e3; font-weight: 600; } + /* 弹窗模态框 - 毛玻璃居中效果 */ + .modal-overlay { + position: fixed; top: 0; left: 0; right: 0; bottom: 0; + background: rgba(0, 0, 0, 0.45); + display: flex; align-items: center; justify-content: center; + z-index: 10000; + } + .modal-content { + background: rgba(255, 255, 255, 0.25); + border-radius: 16px; padding: 1.8rem 1.5rem; + text-align: center; width: 340px; max-width: 90%; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.35); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); + } + .modal-content h3 { color: #2d3436; font-size: 1.1rem; margin-bottom: 0.5rem; } + .modal-content p { color: #636e72; font-size: 0.85rem; margin-bottom: 1.2rem; line-height: 1.4; } + .modal-btn { + padding: 0.5rem 1.5rem; background: #0984e3; color: #fff; + border: none; border-radius: 8px; font-size: 0.9rem; cursor: pointer; + transition: background .2s; + } + .modal-btn:hover { background: #074c8a; } + @media (max-width: 480px) { body { padding: 1rem; } h1 { font-size: 1.2rem; } @@ -111,6 +136,20 @@ const SUPPORTED_EXTENSIONS = ['.ncm', '.kgm', '.kgma', '.vpr']; + function showModal(message) { + const existing = document.querySelector('.modal-overlay'); + if (existing) existing.remove(); + const overlay = document.createElement('div'); + overlay.className = 'modal-overlay'; + overlay.innerHTML = + ''; + document.body.appendChild(overlay); + } + // 点击上传区域选择文件 dropZone.addEventListener('click', () => fileInput.click()); @@ -143,7 +182,7 @@ for (const f of fileListObj) { const ext = f.name.slice(f.name.lastIndexOf('.')).toLowerCase(); if (!SUPPORTED_EXTENSIONS.includes(ext)) { - alert('不支持的文件格式: ' + f.name + '\\n仅支持: .ncm / .kgm / .kgma / .vpr'); + showModal('文件 "' + f.name + '" 格式不受支持
仅支持: .ncm / .kgm / .kgma / .vpr 格式的音乐文件'); continue; } if (files.some(existing => existing.name === f.name)) continue;