Upload 2 files

templates/index.html

@@ -352,6 +352,9 @@
                 display: flex;
                 align-items: center;
                 justify-content: space-around;
+                z-index: 1000;
+                background: var(--sidebar-bg);
+                box-shadow: 0 -2px 10px var(--shadow-color);
             }
 
             .logo {
@@ -361,23 +364,37 @@
             .nav-item {
                 flex: 1;
                 margin: 0 5px;
-                padding: 8px;
-                flex-direction: column;
+                padding: 8px 15px;
+                flex-direction: row;
+                align-items: center;
                 font-size: 12px;
+                height: 40px;
+                border-radius: 8px;
             }
 
             .nav-item i {
-                margin: 0 0 5px 0;
+                margin: 0 8px 0 0;
+                font-size: 16px;
+            }
+
+            .nav-item-text {
+                display: block;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
             }
 
             .main-content {
                 margin-left: 0;
-                margin-bottom: 60px;
+                margin-bottom: 70px;
                 padding-top: 90px;
+                padding-bottom: 70px;
+                min-height: calc(100vh - 70px);
             }
 
             .header {
                 left: 0;
+                z-index: 999;
             }
 
             .search-container {
@@ -387,13 +404,73 @@
             .upload-btn {
                 right: 20px;
                 bottom: 80px;
+                z-index: 1001;
             }
 
             .file-grid {
                 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
             }
+
+            .view-toggle {
+                right: 20px;
+                gap: 8px;
+            }
+
+            .upload-progress {
+                bottom: 70px;
+                right: 20px;
+                max-width: calc(100vw - 40px);
+                z-index: 1001;
+            }
+        }
+        .action-buttons {
+            position: absolute;
+            right: 30px;
+            top: calc(var(--header-height) + 20px);
+            display: flex;
+            gap: 16px;
+            align-items: center;
+            z-index: 10;
+        }
+
+        .action-btn {
+            padding: 8px 15px;
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            background: var(--card-bg);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: var(--text);
+        }
+
+        .action-btn:hover {
+            border-color: var(--primary-glow);
+            box-shadow: 0 2px 8px var(--shadow-color);
         }
 
+        .action-btn i {
+            font-size: 16px;
+            color: var(--primary-glow);
+        }
+
+        @media (max-width: 768px) {
+            .action-buttons {
+                right: 20px;
+                gap: 8px;
+            }
+
+            .action-btn {
+                padding: 6px 12px;
+                font-size: 12px;
+            }
+
+            .action-btn i {
+                font-size: 14px;
+            }
+        }
         /* 拖拽上传区域样式 */
         .drag-overlay {
             position: fixed;
@@ -413,25 +490,63 @@
 
         /* 面包屑导航 */
         .breadcrumb {
-            margin-bottom: 20px;
-            display: flex;
+            margin: 20px 0;
+            padding: 12px 16px;
+            display: inline-flex;
             align-items: center;
+            flex-wrap: wrap;
             gap: 8px;
             font-size: 14px;
+            background: var(--card-bg);
+            border-radius: 8px;
+            box-shadow: 0 2px 8px var(--shadow-color);
+            width: auto;
+            min-width: min-content;
         }
 
         .breadcrumb-item {
             cursor: pointer;
             color: var(--text);
-            transition: color 0.3s ease;
+            transition: all 0.3s ease;
+            padding: 4px 8px;
+            border-radius: 4px;
+            display: inline-flex;  /* Changed from flex to inline-flex */
+            align-items: center;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
         .breadcrumb-item:hover {
             color: var(--primary-glow);
+            background: rgba(255, 149, 128, 0.1);
         }
 
         .breadcrumb-separator {
             color: var(--border-color);
+            margin: 0 4px;
+            user-select: none;
+        }
+
+        @media (max-width: 768px) {
+            .breadcrumb {
+                padding: 8px 12px;
+                margin: 12px 0;
+                font-size: 12px;
+                overflow-x: auto;
+                -webkit-overflow-scrolling: touch;
+                scrollbar-width: none;
+                -ms-overflow-style: none;
+            }
+
+            .breadcrumb::-webkit-scrollbar {
+                display: none;
+            }
+
+            .breadcrumb-item {
+                padding: 4px 6px;
+                max-width: 150px;
+            }
         }
         /* 加载指示器样式 */
         .loading-indicator {
@@ -716,6 +831,106 @@
             justify-content: center;
             transition: all 0.3s ease;
         }
+        .cancel-download {
+            padding: 4px 8px;
+            border: none;
+            background: #ff4444;
+            color: white;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 12px;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            transition: all 0.3s ease;
+        }
+
+        .cancel-download:hover {
+            background: #ff6666;
+            transform: translateY(-1px);
+        }
+
+        .stats-row {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 4px;
+        }
+
+        .download-stats {
+            font-size: 12px;
+            color: #666;
+            margin-top: 8px;
+        }
+        .file-item.selectable {
+            position: relative;
+            cursor: pointer;
+        }
+
+        .file-item.selectable::before {
+            content: '';
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            width: 20px;
+            height: 20px;
+            border: 2px solid var(--border-color);
+            border-radius: 4px;
+            background: white;
+            z-index: 1;
+        }
+
+        .file-item.selected::before {
+            background: var(--primary-glow);
+            border-color: var(--primary-glow);
+        }
+
+        .file-item.selected::after {
+            content: '\f00c';
+            font-family: 'Font Awesome 6 Free';
+            font-weight: 900;
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            width: 20px;
+            height: 20px;
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 2;
+        }
+
+        .multi-select-btn.active {
+            background: linear-gradient(45deg, var(--primary-glow), var(--secondary-glow));
+            color: white;
+            border-color: transparent;
+        }
+        .batch-operations {
+            display: flex;
+            gap: 8px;
+            margin-left: 16px;
+        }
+
+        .folder-name-input {
+            width: 100%;
+            padding: 8px 12px;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            margin: 16px 0;
+            font-size: 14px;
+        }
+
+        .folder-name-input:focus {
+            outline: none;
+            border-color: var(--primary-glow);
+            box-shadow: 0 0 0 2px rgba(255, 149, 128, 0.2);
+        }
+
+        .multi-select-btn.active {
+            background: linear-gradient(45deg, var(--primary-glow), var(--secondary-glow));
+            color: white;
+            border-color: transparent;
+        }
     </style>
 </head>
 <body>
@@ -760,6 +975,14 @@
 
         <!-- 主内容区 -->
         <main class="main-content">
+            <!-- 面包屑导航 -->
+            <div class="breadcrumb">
+                <span class="breadcrumb-item" data-path="/">根目录</span>
+            </div>
+            <button class="action-btn create-folder-btn">
+                <i class="fas fa-folder-plus"></i>
+                <span>新建文件夹</span>
+            </button>
             <!-- 视图切换按钮 -->
             <div class="view-toggle">
                 <button class="view-btn active" data-view="grid">
@@ -770,10 +993,7 @@
                 </button>
             </div>
 
-            <!-- 面包屑导航 -->
-            <div class="breadcrumb">
-                <span class="breadcrumb-item" data-path="/">根目录</span>
-            </div>
+            
 
             <!-- 文件容器 -->
             <div class="file-container">
@@ -789,9 +1009,6 @@
 
         <!-- 上传进度条 -->
         <div class="upload-progress">
-            <div class="progress-bar">
-                <div class="progress-fill"></div>
-            </div>
         </div>
     </div>
 
@@ -827,6 +1044,8 @@
         // 文件管理类
         class FileManager {
             constructor() {
+                this.selectedFiles = new Set();
+                this.isMultiSelectMode = false;
                 this.currentPath = '/';
                 this.currentView = 'grid';
                 this.currentFileType = 'all';
@@ -860,6 +1079,16 @@
 
                 // 拖拽上传
                 this.initDragAndDrop();
+                // 新建文件夹按钮监听
+                const createFolderBtn = document.querySelector('.create-folder-btn');
+                createFolderBtn.addEventListener('click', () => this.showCreateFolderDialog());
+
+                // 添加多选按钮
+                const multiSelectBtn = document.createElement('button');
+                multiSelectBtn.className = 'action-btn multi-select-btn';
+                multiSelectBtn.innerHTML = '<i class="fas fa-check-square"></i><span>多选</span>';
+                multiSelectBtn.addEventListener('click', () => this.toggleMultiSelectMode());
+                document.querySelector('.view-toggle').prepend(multiSelectBtn);
             }
 
             // 加载文件列表
@@ -902,6 +1131,14 @@
                 const element = document.createElement('div');
                 element.className = `file-item ${this.currentView}`;
                 
+                // 添加多选模式相关的类
+                if (this.isMultiSelectMode) {
+                    element.classList.add('selectable');
+                    if (this.selectedFiles.has(file)) {
+                        element.classList.add('selected');
+                    }
+                }
+                
                 const icon = this.getFileIcon(file.type, file.file_type);
                 const size = this.formatFileSize(file.size);
                 
@@ -924,13 +1161,41 @@
                     `;
                 }
 
-                // 添加事件监听
-                element.addEventListener('click', () => this.handleFileClick(file));
-                element.addEventListener('contextmenu', (e) => this.showFileMenu(e, file));
+                // 事件处理逻辑
+                if (this.isMultiSelectMode) {
+                    // 多选模式下的点击处理
+                    element.addEventListener('click', (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        
+                        if (file.type === 'directory') {
+                            // 文件夹仍然保持导航功能
+                            this.currentPath = file.path;
+                            this.loadFiles();
+                        } else {
+                            // 文件切换选中状态
+                            if (this.selectedFiles.has(file)) {
+                                this.selectedFiles.delete(file);
+                                element.classList.remove('selected');
+                            } else {
+                                this.selectedFiles.add(file);
+                                element.classList.add('selected');
+                            }
+                        }
+                    });
+                } else {
+                    // 普通模式下的点击处理
+                    element.addEventListener('click', () => this.handleFileClick(file));
+                }
+
+                // 右键菜单处理
+                element.addEventListener('contextmenu', (e) => {
+                    e.preventDefault();
+                    this.showFileMenu(e, file);
+                });
                 
                 return element;
             }
-
             // 处理文件点击
             handleFileClick(file) {
                 if (file.type === 'directory') {
@@ -1174,24 +1439,130 @@
             // 文件下载
             async downloadFile(file) {
                 try {
-                    const response = await fetch(`/api/files/download/${file.path}`);
+                    const uploadProgress = document.querySelector('.upload-progress');
+                    const progressItem = document.createElement('div');
+                    progressItem.className = 'progress-item';
+                    progressItem.innerHTML = `
+                        <div class="file-info">
+                            <span class="filename">${file.path.split('/').pop()}</span>
+                            <button class="cancel-download">
+                                <i class="fas fa-times"></i> 取消
+                            </button>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill"></div>
+                        </div>
+                        <div class="download-stats">
+                            <div class="stats-row">
+                                <span class="progress-text">0%</span>
+                                <span class="downloaded-size">0 MB / 0 MB</span>
+                            </div>
+                            <div class="stats-row">
+                                <span class="speed">等待开始...</span>
+                            </div>
+                        </div>
+                    `;
+
+                    uploadProgress.style.display = 'block';
+                    uploadProgress.appendChild(progressItem);
+
+                    const progressFill = progressItem.querySelector('.progress-fill');
+                    const progressText = progressItem.querySelector('.progress-text');
+                    const speedElement = progressItem.querySelector('.speed');
+                    const sizeElement = progressItem.querySelector('.downloaded-size');
+                    const cancelButton = progressItem.querySelector('.cancel-download');
+
+                    const controller = new AbortController();
+                    let isDownloadCancelled = false;
+
+                    cancelButton.onclick = () => {
+                        controller.abort();
+                        isDownloadCancelled = true;
+                        progressItem.remove();
+                        if (!uploadProgress.hasChildNodes()) {
+                            uploadProgress.style.display = 'none';
+                        }
+                    };
+
+                    const response = await fetch(`/api/files/download/${file.path}`, {
+                        signal: controller.signal
+                    });
+
                     if (!response.ok) throw new Error('Download failed');
+
+                    const contentLength = response.headers.get('content-length');
+                    const total = parseInt(contentLength, 10);
+                    const reader = response.body.getReader();
                     
-                    const blob = await response.blob();
-                    const url = URL.createObjectURL(blob);
-                    const a = document.createElement('a');
-                    a.href = url;
-                    a.download = file.path.split('/').pop();
-                    document.body.appendChild(a);
-                    a.click();
-                    document.body.removeChild(a);
-                    URL.revokeObjectURL(url);
+                    let receivedLength = 0;
+                    let lastTime = Date.now();
+                    let lastReceived = 0;
+                    let currentSpeed = 0;
+                    let lastSpeedUpdate = Date.now();
+                    const chunks = [];
+
+                    while (true) {
+                        const {done, value} = await reader.read();
+                        
+                        if (done || isDownloadCancelled) break;
+                        
+                        chunks.push(value);
+                        receivedLength += value.length;
+                        
+                        const percent = (receivedLength / total) * 100;
+                        progressFill.style.width = `${percent.toFixed(1)}%`;
+                        progressText.textContent = `${percent.toFixed(1)}%`;
+                        
+                        const now = Date.now();
+                        if (now - lastSpeedUpdate >= 1000) {
+                            const timeElapsed = (now - lastTime) / 1000;
+                            const receivedSinceLastTime = receivedLength - lastReceived;
+                            
+                            if (timeElapsed > 0) {
+                                currentSpeed = receivedSinceLastTime / timeElapsed;
+                                if (currentSpeed > 0) {
+                                    speedElement.textContent = `${this.formatFileSize(currentSpeed)}/s`;
+                                }
+                            }
+                            
+                            lastTime = now;
+                            lastReceived = receivedLength;
+                            lastSpeedUpdate = now;
+                        }
+                        
+                        sizeElement.textContent = `${this.formatFileSize(receivedLength)} / ${this.formatFileSize(total)}`;
+                    }
+
+                    if (!isDownloadCancelled) {
+                        const blob = new Blob(chunks);
+                        const url = URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.href = url;
+                        a.download = file.path.split('/').pop();
+                        document.body.appendChild(a);
+                        a.click();
+                        document.body.removeChild(a);
+                        URL.revokeObjectURL(url);
+
+                        progressItem.remove();
+                        if (!uploadProgress.hasChildNodes()) {
+                            uploadProgress.style.display = 'none';
+                        }
+                    }
+
                 } catch (error) {
-                    console.error('Error downloading file:', error);
-                    this.showError('下载文件失败');
+                    const uploadProgress = document.querySelector('.upload-progress');
+                    if (error.name === 'AbortError') {
+                        this.showMessage('下载已取消');
+                    } else {
+                        console.error('Error downloading file:', error);
+                        this.showError('下载文件失败');
+                    }
+                    if (!uploadProgress.hasChildNodes()) {
+                        uploadProgress.style.display = 'none';
+                    }
                 }
             }
-
             // 文件上传处理
             async handleFileUpload(files) {
                 const uploadProgress = document.querySelector('.upload-progress');
@@ -1527,6 +1898,167 @@
                     }, 2000);
                 }, 100);
             }
+
+            // 添加多选模式切换按钮
+            addMultiSelectButton() {
+                const multiSelectBtn = document.createElement('button');
+                multiSelectBtn.className = 'multi-select-btn';
+                multiSelectBtn.innerHTML = '<i class="fas fa-check-square"></i> 多选';
+                multiSelectBtn.onclick = () => this.toggleMultiSelectMode();
+                
+                document.querySelector('.view-toggle').appendChild(multiSelectBtn);
+            }
+
+            // 切换多选模式
+            toggleMultiSelectMode() {
+                this.isMultiSelectMode = !this.isMultiSelectMode;
+                this.selectedFiles.clear();
+                
+                // 更新按钮状态
+                const multiSelectBtn = document.querySelector('.multi-select-btn');
+                multiSelectBtn.classList.toggle('active');
+                
+                // 更新按钮文本
+                if (this.isMultiSelectMode) {
+                    // 显示批量操作按钮
+                    this.showBatchOperations();
+                    multiSelectBtn.innerHTML = '<i class="fas fa-check-square"></i><span>退出多选</span>';
+                } else {
+                    // 隐藏批量操作按钮
+                    this.hideBatchOperations();
+                    multiSelectBtn.innerHTML = '<i class="fas fa-check-square"></i><span>多选</span>';
+                }
+                
+                this.renderFiles();
+            }
+            showBatchOperations() {
+                const batchOpsContainer = document.createElement('div');
+                batchOpsContainer.className = 'batch-operations';
+                batchOpsContainer.innerHTML = `
+                    <button class="action-btn batch-download-btn">
+                        <i class="fas fa-download"></i><span>批量下载</span>
+                    </button>
+                    <button class="action-btn batch-delete-btn">
+                        <i class="fas fa-trash"></i><span>批量删除</span>
+                    </button>
+                `;
+                
+                document.querySelector('.view-toggle').appendChild(batchOpsContainer);
+                
+                // 绑定事件
+                batchOpsContainer.querySelector('.batch-download-btn').onclick = () => this.batchDownload();
+                batchOpsContainer.querySelector('.batch-delete-btn').onclick = () => this.batchDelete();
+            }
+
+            hideBatchOperations() {
+                const batchOps = document.querySelector('.batch-operations');
+                if (batchOps) {
+                    batchOps.remove();
+                }
+            }
+            // 批量下载
+            async batchDownload() {
+                for (const file of this.selectedFiles) {
+                    await this.downloadFile(file);
+                }
+            }
+
+            // 批量删除
+            async batchDelete() {
+                const confirmed = await this.showConfirmDialog(
+                    '批量删除',
+                    `确定要删除选中的 ${this.selectedFiles.size} 个文件吗？此操作不可恢复。`
+                );
+                
+                if (confirmed) {
+                    for (const file of this.selectedFiles) {
+                        await this.deleteFile(file);
+                    }
+                }
+            }
+            async createFolder(folderName) {
+                try {
+                    const response = await fetch('/api/files/create_folder', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            path: this.currentPath,
+                            name: folderName
+                        })
+                    });
+
+                    if (!response.ok) {
+                        throw new Error('Failed to create folder');
+                    }
+
+                    await this.loadFiles();
+                    this.showMessage('文件夹创建成功');
+                    
+                } catch (error) {
+                    console.error('Error creating folder:', error);
+                    this.showError('创建文件夹失败');
+                }
+            }
+
+            // 显示创建文件夹对话框
+            async showCreateFolderDialog() {
+                const modal = document.createElement('div');
+                modal.className = 'confirm-modal';
+                modal.innerHTML = `
+                    <div class="confirm-content">
+                        <h3>新建文件夹</h3>
+                        <div class="input-container">
+                            <input type="text" 
+                                class="folder-name-input" 
+                                placeholder="请输入文件夹名称"
+                                maxlength="255">
+                        </div>
+                        <div class="confirm-buttons">
+                            <button class="confirm-cancel">取消</button>
+                            <button class="confirm-ok">创建</button>
+                        </div>
+                    </div>
+                `;
+                
+                document.body.appendChild(modal);
+                const input = modal.querySelector('.folder-name-input');
+                input.focus();
+                
+                try {
+                    const folderName = await new Promise((resolve) => {
+                        const handleCreateFolder = () => {
+                            const name = input.value.trim();
+                            if (name) {
+                                resolve(name);
+                            }
+                            modal.remove();
+                        };
+                        
+                        const handleCancel = () => {
+                            resolve(null);
+                            modal.remove();
+                        };
+                        
+                        modal.querySelector('.confirm-ok').onclick = handleCreateFolder;
+                        modal.querySelector('.confirm-cancel').onclick = handleCancel;
+                        
+                        input.onkeyup = (e) => {
+                            if (e.key === 'Enter') handleCreateFolder();
+                            if (e.key === 'Escape') handleCancel();
+                        };
+                    });
+
+                    if (folderName) {
+                        await this.createFolder(folderName);
+                    }
+                } catch (error) {
+                    console.error('Error creating folder:', error);
+                    this.showError('创建文件夹失败');
+                }
+            }
+
         }
         // 初始化文件管理器
         new FileManager();

templates/login.html

@@ -1,127 +1,138 @@
-<!DOCTYPE html>
-<html lang="zh">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>登录 - 云存储</title>
-    <style>
-        :root {
-            --primary-glow: #ff9580;
-            --secondary-glow: #ffd700;
-            --background: #ffffff;
-            --text: #333333;
-            --card-bg: #ffffff;
-            --border-color: #e0e0e0;
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: var(--background);
-            color: var(--text);
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .login-container {
-            background: var(--card-bg);
-            padding: 40px;
-            border-radius: 15px;
-            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
-            width: 100%;
-            max-width: 400px;
-            transition: all 0.3s ease;
-        }
-        .login-container:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
-        }
-        .login-title {
-            text-align: center;
-            margin-bottom: 30px;
-            font-size: 24px;
-            color: var(--text);
-        }
-        .login-form {
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-        }
-        .password-input {
-            width: 100%;
-            padding: 12px 20px;
-            border: 2px solid var(--border-color);
-            border-radius: 25px;
-            font-size: 16px;
-            transition: all 0.3s ease;
-        }
-        .password-input:focus {
-            outline: none;
-            border-color: var(--primary-glow);
-            box-shadow: 0 0 10px rgba(255, 149, 128, 0.3);
-        }
-        .login-button {
-            width: 100%;
-            padding: 12px 20px;
-            border: none;
-            border-radius: 25px;
-            background: linear-gradient(45deg, var(--primary-glow), var(--secondary-glow));
-            color: white;
-            font-size: 16px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-        .login-button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(255, 149, 128, 0.4);
-        }
-        .error-message {
-            color: #ff4444;
-            text-align: center;
-            margin-top: 10px;
-            display: none;
-        }
-    </style>
-</head>
-<body>
-    <div class="login-container">
-        <h1 class="login-title"> Cloud Vault的登录界面(云盘)</h1>
-        <p class="login-title">没错在这输一下密码，密码1234</p>
-        <form class="login-form" id="loginForm">
-            <input type="password" class="password-input" placeholder="请输入访问密码" required>
-            <button type="submit" class="login-button">登录</button>
-        </form>
-        <div class="error-message" id="errorMessage">密码错误，请重试</div>
-    </div>
-
-    <script>
-        document.getElementById('loginForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const password = document.querySelector('.password-input').value;
-            const errorMessage = document.getElementById('errorMessage');
-            
-            try {
-                const response = await fetch('/login', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/x-www-form-urlencoded',
-                    },
-                    body: `password=${encodeURIComponent(password)}`
-                });
-                if (response.ok) {
-                    window.location.href = '/';
-                } else {
-                    errorMessage.style.display = 'block';
-                }
-            } catch (error) {
-                console.error('Login failed:', error);
-                errorMessage.style.display = 'block';
-            }
-        });
-    </script>
-</body>
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>登录 - 云存储</title>
+    <style>
+        :root {
+            --primary-glow: #ff9580;
+            --secondary-glow: #ffd700;
+            --background: #ffffff;
+            --text: #333333;
+            --card-bg: #ffffff;
+            --border-color: #e0e0e0;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: var(--background);
+            color: var(--text);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .login-container {
+            background: var(--card-bg);
+            padding: 40px;
+            border-radius: 15px;
+            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 400px;
+            transition: all 0.3s ease;
+        }
+
+        .login-container:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+        }
+
+        .login-title {
+            text-align: center;
+            margin-bottom: 30px;
+            font-size: 24px;
+            color: var(--text);
+        }
+
+        .login-form {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .password-input {
+            width: 100%;
+            padding: 12px 20px;
+            border: 2px solid var(--border-color);
+            border-radius: 25px;
+            font-size: 16px;
+            transition: all 0.3s ease;
+        }
+
+        .password-input:focus {
+            outline: none;
+            border-color: var(--primary-glow);
+            box-shadow: 0 0 10px rgba(255, 149, 128, 0.3);
+        }
+
+        .login-button {
+            width: 100%;
+            padding: 12px 20px;
+            border: none;
+            border-radius: 25px;
+            background: linear-gradient(45deg, var(--primary-glow), var(--secondary-glow));
+            color: white;
+            font-size: 16px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .login-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(255, 149, 128, 0.4);
+        }
+
+        .error-message {
+            color: #ff4444;
+            text-align: center;
+            margin-top: 10px;
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="login-container">
+        <h1 class="login-title"> Cloud Vault的登录界面，没错在这输一下密码，密码1234</h1>
+        <form class="login-form" id="loginForm">
+            <input type="password" class="password-input" placeholder="请输入访问密码" required>
+            <button type="submit" class="login-button">登录</button>
+        </form>
+        <div class="error-message" id="errorMessage">密码错误，请重试</div>
+    </div>
+
+    <script>
+        document.getElementById('loginForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const password = document.querySelector('.password-input').value;
+            const errorMessage = document.getElementById('errorMessage');
+            
+            try {
+                const response = await fetch('/login', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded',
+                    },
+                    body: `password=${encodeURIComponent(password)}`
+                });
+
+                if (response.ok) {
+                    window.location.href = '/';
+                } else {
+                    errorMessage.style.display = 'block';
+                }
+            } catch (error) {
+                console.error('Login failed:', error);
+                errorMessage.style.display = 'block';
+            }
+        });
+    </script>
+</body>
 </html>