<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SecureKey Vault - 安全密钥管理系统</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="notification-container" id="notification-container"></div>
<header>
<div class="header-left">
<h1><i class="fas fa-shield-alt"></i> SecureKey Vault</h1>
<p class="subtitle">安全存储和管理所有密钥，实时保护，自动保存</p>
</div>
<button class="settings-btn" id="settings-btn">
<i class="fas fa-cog"></i> 设置
</button>
</header>
<div class="app-container">
<div class="sidebar">
<div class="search-box">
<input type="text" id="search-input" placeholder="搜索密钥...">
<button id="search-btn"><i class="fas fa-search"></i> 搜索</button>
</div>
<div class="key-list-header">
<h3><i class="fas fa-key"></i> 存储的密钥</h3>
<div class="key-count" id="key-count">0 个密钥</div>
</div>
<div class="keys-container" id="keys-container">
<div class="no-keys">
<i class="fas fa-key"></i>
<p>尚未添加密钥，点击下方按钮创建第一个密钥</p>
</div>
</div>
<div style="margin-top: auto; padding-top: 15px;">
<button id="add-new-key" class="btn-secondary" style="width: 100%">
<i class="fas fa-plus"></i> 新建密钥
</button>
</div>
</div>
<div class="main-content" id="main-content">
<div class="welcome-screen" id="welcome-screen">
<div class="welcome-icon">
<i class="fas fa-lock"></i>
</div>
<h2 class="welcome-title">欢迎使用 SecureKey Vault</h2>
<p class="welcome-subtitle">安全存储和管理您的所有密钥、API凭证和敏感信息。所有数据都经过加密并仅存储在您的设备上。</p>
<div class="welcome-actions">
<button id="start-adding" class="btn-primary">
<i class="fas fa-plus"></i> 添加第一个密钥
</button>
<button class="btn-secondary">
<i class="fas fa-book"></i> 查看使用指南
</button>
</div>
</div>
<div class="edit-section" id="edit-section">
<h3 class="section-title"><i class="fas fa-edit"></i> 密钥编辑</h3>
<form id="key-edit-form">
<input type="hidden" id="key-id">
<div class="form-group">
<label for="key-name">密钥名称 <span class="required">*</span></label>
<input type="text" id="key-name" placeholder="为密钥提供一个描述性名称" required>
</div>
<div class="form-group">
<label for="key-type">密钥类型 <span class="required">*</span></label>
<select id="key-type" required>
<option value="">选择密钥类型</option>
<option value="API">API 密钥</option>
<option value="DB">数据库凭证</option>
<option value="SSH">SSH 密钥</option>
<option value="加密">加密密钥</option>
<option value="其他">其他</option>
</select>
</div>
<div class="form-group">
<label for="key-value">密钥值 <span class="required">*</span></label>
<div style="display: flex; gap: 10px;">
<input type="password" id="key-value" placeholder="输入密钥内容" style="flex: 1;" required>
<button type="button" id="reveal-key" class="btn-secondary small-btn">
<i class="fas fa-eye"></i>
</button>
</div>
</div>
<div class="form-group">
<label for="key-notes">备注信息</label>
<textarea id="key-notes" rows="3" placeholder="密钥描述、使用说明或其他相关信息"></textarea>
</div>
<div class="form-group">
<label>创建日期</label>
<div id="key-created" style="padding: 12px 15px; background: rgba(0,0,0,0.2); border-radius:8px;">
密钥保存后自动生成
</div>
</div>
<div class="key-actions">
<button type="button" id="save-key" class="btn-primary">
<i class="fas fa-save"></i> 保存更改
</button>
<button type="button" id="clear-form" class="btn-secondary">
<i class="fas fa-eraser"></i> 清除内容
</button>
<button type="button" id="delete-key" class="btn-danger">
<i class="fas fa-trash-alt"></i> 删除密钥
</button>
</div>
</form>
</div>
</div>
</div>
<div class="settings-overlay" id="settings-overlay"></div>
<div class="settings-panel" id="settings-panel">
<div class="settings-header">
<h2 class="settings-title"><i class="fas fa-cog"></i> 系统设置</h2>
<button class="close-settings" id="close-settings">
<i class="fas fa-times"></i>
</button>
</div>
<div class="settings-group">
<h3 class="settings-group-title"><i class="fas fa-palette"></i> 主题设置</h3>
<div class="theme-options">
<div class="theme-option default active" data-theme="default">
<span>默认</span>
</div>
<div class="theme-option dark-blue" data-theme="dark-blue">
<span>深蓝</span>
</div>
<div class="theme-option deep-purple" data-theme="deep-purple">
<span>深紫</span>
</div>
<div class="theme-option forest" data-theme="forest">
<span>森林</span>
</div>
<div class="theme-option ocean" data-theme="ocean">
<span>海洋</span>
</div>
<div class="theme-option sunset" data-theme="sunset">
<span>日落</span>
</div>
</div>
</div>
<div class="settings-group">
<h3 class="settings-group-title"><i class="fas fa-font"></i> 字体设置</h3>
<div class="font-options">
<div class="font-option segoe active" data-font="segoe">
<h4>Segoe UI</h4>
<p>默认系统字体，清晰易读</p>
</div>
<div class="font-option roboto" data-font="roboto">
<h4>Roboto</h4>
<p>现代无衬线字体，简洁优雅</p>
</div>
<div class="font-option open-sans" data-font="open-sans">
<h4>Open Sans</h4>
<p>友好易读，适合长文本</p>
</div>
<div class="font-option montserrat" data-font="montserrat">
<h4>Montserrat</h4>
<p>几何风格，现代感强</p>
</div>
</div>
</div>
<div class="settings-group">
<h3 class="settings-group-title"><i class="fas fa-lock"></i> 安全设置</h3>
<div class="form-group">
<label for="auto-lock">自动锁定时间</label>
<select id="auto-lock">
<option value="5">5分钟不活动</option>
<option value="10" selected>10分钟不活动</option>
<option value="30">30分钟不活动</option>
<option value="60">1小时不活动</option>
<option value="0">从不自动锁定</option>
</select>
</div>
<div class="form-group">
<label for="encryption-level">加密级别</label>
<select id="encryption-level">
<option value="aes128">AES-128 (标准)</option>
<option value="aes256" selected>AES-256 (高)</option>
</select>
</div>
</div>
<div class="settings-group">
<h3 class="settings-group-title"><i class="fas fa-save"></i> 数据管理</h3>
<button class="btn-secondary" style="width: 100%; margin-bottom: 15px;">
<i class="fas fa-download"></i> 导出所有密钥
</button>
<button class="btn-secondary" style="width: 100%; margin-bottom: 15px;">
<i class="fas fa-upload"></i> 导入密钥
</button>
<button class="btn-danger" style="width: 100%;">
<i class="fas fa-trash-alt"></i> 清除所有数据
</button>
</div>
</div>
<div class="status-bar">
<i class="fas fa-lock"></i>
<span id="save-status">安全级别：最高 | 自动保存状态：<span id="save-timer">已启用</span></span>
</div>
<script src="index.js"></script>
</body>
</html>
index.html
style.css
index.js