296 lines
14 KiB
HTML
296 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Android开发网址管理器</title>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔗</text></svg>">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- 顶部导航栏 -->
|
||
<header class="header">
|
||
<div class="logo">
|
||
<i class="fas fa-link"></i>
|
||
<h1>Android开发网址管理器</h1>
|
||
</div>
|
||
<div class="header-controls">
|
||
<button id="themeToggle" class="btn-icon" title="切换主题">
|
||
<i class="fas fa-moon"></i>
|
||
</button>
|
||
<button id="importBtn" class="btn-secondary" title="导入数据">
|
||
<i class="fas fa-file-import"></i> 导入
|
||
</button>
|
||
<button id="exportBtn" class="btn-primary" title="导出数据">
|
||
<i class="fas fa-file-export"></i> 导出
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 主内容区域 -->
|
||
<main class="main-content">
|
||
<!-- 左侧边栏 - 分类管理 -->
|
||
<aside class="sidebar">
|
||
<div class="sidebar-header">
|
||
<h2><i class="fas fa-folder"></i> 分类</h2>
|
||
<button id="addCategoryBtn" class="btn-icon" title="添加分类">
|
||
<i class="fas fa-plus"></i>
|
||
</button>
|
||
</div>
|
||
<div class="categories-list" id="categoriesList">
|
||
<!-- 分类将通过JavaScript动态生成 -->
|
||
<div class="category-item active" data-id="all">
|
||
<i class="fas fa-globe"></i>
|
||
<span>全部网址</span>
|
||
<span class="count-badge">0</span>
|
||
</div>
|
||
<div class="category-item" data-id="favorites">
|
||
<i class="fas fa-star"></i>
|
||
<span>收藏夹</span>
|
||
<span class="count-badge">0</span>
|
||
</div>
|
||
<div class="category-item" data-id="recent">
|
||
<i class="fas fa-history"></i>
|
||
<span>最近访问</span>
|
||
<span class="count-badge">0</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tags-section">
|
||
<h3><i class="fas fa-tags"></i> 常用标签</h3>
|
||
<div class="tags-container" id="tagsContainer">
|
||
<!-- 标签将通过JavaScript动态生成 -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stats-section">
|
||
<h3><i class="fas fa-chart-bar"></i> 统计</h3>
|
||
<div class="stats">
|
||
<div class="stat-item">
|
||
<span class="stat-label">总网址数</span>
|
||
<span class="stat-value" id="totalUrls">0</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">分类数</span>
|
||
<span class="stat-value" id="totalCategories">0</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">收藏数</span>
|
||
<span class="stat-value" id="totalFavorites">0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 右侧主区域 -->
|
||
<section class="content-area">
|
||
<!-- 工具栏 -->
|
||
<div class="toolbar">
|
||
<div class="search-box">
|
||
<i class="fas fa-search"></i>
|
||
<input type="text" id="searchInput" placeholder="搜索网址、标题或标签...">
|
||
<button id="clearSearch" class="btn-icon" title="清除搜索">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
<div class="view-controls">
|
||
<button id="gridViewBtn" class="btn-icon active" title="网格视图">
|
||
<i class="fas fa-th-large"></i>
|
||
</button>
|
||
<button id="listViewBtn" class="btn-icon" title="列表视图">
|
||
<i class="fas fa-list"></i>
|
||
</button>
|
||
<button id="addUrlBtn" class="btn-primary">
|
||
<i class="fas fa-plus"></i> 添加网址
|
||
</button>
|
||
<button id="bulkActionsBtn" class="btn-secondary" title="批量操作">
|
||
<i class="fas fa-tasks"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 网址显示区域 -->
|
||
<div class="urls-container grid-view" id="urlsContainer">
|
||
<!-- 网址卡片将通过JavaScript动态生成 -->
|
||
<div class="empty-state" id="emptyState">
|
||
<i class="fas fa-bookmark fa-3x"></i>
|
||
<h3>暂无网址</h3>
|
||
<p>点击"添加网址"按钮开始添加您的第一个网址</p>
|
||
<button id="addFirstUrlBtn" class="btn-primary">
|
||
<i class="fas fa-plus"></i> 添加第一个网址
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 批量操作面板 -->
|
||
<div class="bulk-actions-panel" id="bulkActionsPanel">
|
||
<div class="bulk-header">
|
||
<span id="selectedCount">已选择 0 个项目</span>
|
||
<div class="bulk-buttons">
|
||
<button id="bulkOpenBtn" class="btn-secondary">
|
||
<i class="fas fa-external-link-alt"></i> 批量打开
|
||
</button>
|
||
<button id="bulkDeleteBtn" class="btn-danger">
|
||
<i class="fas fa-trash"></i> 批量删除
|
||
</button>
|
||
<button id="bulkCancelBtn" class="btn-icon">
|
||
<i class="fas fa-times"></i> 取消
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- 快捷键提示 -->
|
||
<div class="shortcuts-hint">
|
||
<i class="fas fa-keyboard"></i> 快捷键提示: Ctrl+F (搜索), Ctrl+N (新建), Ctrl+S (保存), Esc (取消)
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模态框 - 添加/编辑网址 -->
|
||
<div class="modal" id="urlModal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="modalTitle">添加网址</h2>
|
||
<button class="close-modal">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="urlForm">
|
||
<div class="form-group">
|
||
<label for="urlTitle"><i class="fas fa-heading"></i> 标题 *</label>
|
||
<input type="text" id="urlTitle" required placeholder="例如：Android开发者文档">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="urlAddress"><i class="fas fa-link"></i> 网址 *</label>
|
||
<input type="url" id="urlAddress" required placeholder="https://developer.android.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="urlDescription"><i class="fas fa-align-left"></i> 描述</label>
|
||
<textarea id="urlDescription" rows="3" placeholder="网址的简要描述..."></textarea>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="urlCategory"><i class="fas fa-folder"></i> 分类</label>
|
||
<select id="urlCategory">
|
||
<option value="">选择分类</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="urlIcon"><i class="fas fa-icons"></i> 图标</label>
|
||
<select id="urlIcon">
|
||
<option value="fas fa-globe">🌐 网站</option>
|
||
<option value="fas fa-book">📚 文档</option>
|
||
<option value="fas fa-tools">🛠️ 工具</option>
|
||
<option value="fas fa-code">💻 代码</option>
|
||
<option value="fas fa-comments">💬 社区</option>
|
||
<option value="fas fa-palette">🎨 设计</option>
|
||
<option value="fas fa-video">🎥 视频</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label><i class="fas fa-tags"></i> 标签</label>
|
||
<div class="tags-input-container">
|
||
<div class="tags-display" id="tagsDisplay"></div>
|
||
<input type="text" id="tagsInput" placeholder="输入标签后按回车添加">
|
||
</div>
|
||
</div>
|
||
<div class="form-group checkbox-group">
|
||
<label>
|
||
<input type="checkbox" id="urlFavorite">
|
||
<i class="fas fa-star"></i> 添加到收藏夹
|
||
</label>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn-secondary close-modal">取消</button>
|
||
<button type="submit" form="urlForm" class="btn-primary">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模态框 - 添加分类 -->
|
||
<div class="modal" id="categoryModal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>添加分类</h2>
|
||
<button class="close-modal">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="categoryForm">
|
||
<div class="form-group">
|
||
<label for="categoryName">分类名称 *</label>
|
||
<input type="text" id="categoryName" required placeholder="例如：开发文档">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="categoryColor">颜色</label>
|
||
<input type="color" id="categoryColor" value="#3498db">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="categoryIcon">图标</label>
|
||
<select id="categoryIcon">
|
||
<option value="fas fa-folder">📁 文件夹</option>
|
||
<option value="fas fa-book">📚 文档</option>
|
||
<option value="fas fa-code">💻 代码</option>
|
||
<option value="fas fa-tools">🛠️ 工具</option>
|
||
<option value="fas fa-comments">💬 社区</option>
|
||
<option value="fas fa-video">🎥 视频</option>
|
||
</select>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn-secondary close-modal">取消</button>
|
||
<button type="submit" form="categoryForm" class="btn-primary">创建</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 导入/导出模态框 -->
|
||
<div class="modal" id="importExportModal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="importExportTitle">导入/导出数据</h2>
|
||
<button class="close-modal">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="import-export-tabs">
|
||
<button class="tab-btn active" data-tab="export">导出数据</button>
|
||
<button class="tab-btn" data-tab="import">导入数据</button>
|
||
</div>
|
||
|
||
<div class="tab-content active" id="exportTab">
|
||
<p>将您的所有网址数据导出为JSON文件：</p>
|
||
<div class="data-preview">
|
||
<pre id="exportDataPreview"></pre>
|
||
</div>
|
||
<button id="downloadJsonBtn" class="btn-primary">
|
||
<i class="fas fa-download"></i> 下载JSON文件
|
||
</button>
|
||
</div>
|
||
|
||
<div class="tab-content" id="importTab">
|
||
<p>从JSON文件导入网址数据：</p>
|
||
<div class="file-upload-area" id="fileUploadArea">
|
||
<i class="fas fa-cloud-upload-alt fa-3x"></i>
|
||
<p>拖放JSON文件到这里，或点击选择文件</p>
|
||
<input type="file" id="jsonFileInput" accept=".json">
|
||
</div>
|
||
<div class="import-warning">
|
||
<i class="fas fa-exclamation-triangle"></i>
|
||
<p>注意：导入数据将覆盖当前的所有数据，请先备份！</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|