145 lines
6.0 KiB
HTML
145 lines
6.0 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>ToolsShow - 工具展示站</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap"
|
|
rel="stylesheet"
|
|
>
|
|
<link rel="stylesheet" href="./styles.css">
|
|
</head>
|
|
<body>
|
|
<header class="header-wrap">
|
|
<div class="container header">
|
|
<a class="brand" href="#" aria-label="ToolsShow 首页">
|
|
<span class="brand-mark">
|
|
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<path d="M4 6.5C4 5.67 4.67 5 5.5 5H18.5C19.33 5 20 5.67 20 6.5V17.5C20 18.33 19.33 19 18.5 19H5.5C4.67 19 4 18.33 4 17.5V6.5Z" stroke="currentColor" stroke-width="1.8"/>
|
|
<path d="M8 9H16M8 12H16M8 15H13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
<span>ToolsShow</span>
|
|
</a>
|
|
<nav class="nav" aria-label="主导航">
|
|
<a href="#tools">工具列表</a>
|
|
<a href="#tools">分类浏览</a>
|
|
<a href="#tools">工具中心</a>
|
|
<button
|
|
id="overviewBtn"
|
|
type="button"
|
|
class="nav-btn"
|
|
aria-controls="overviewModal"
|
|
aria-expanded="false"
|
|
>
|
|
站点概览
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container main-content">
|
|
<section class="hero">
|
|
<div class="hero-main">
|
|
<div class="search-row">
|
|
<label class="search-box" for="searchInput">
|
|
<span class="sr-only">搜索工具</span>
|
|
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="1.8"/>
|
|
<path d="M16.5 16.5L21 21" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
|
|
</svg>
|
|
<input id="searchInput" type="search" placeholder="搜索名称、描述、标签..." autocomplete="off">
|
|
</label>
|
|
<label class="sr-only" for="categorySelect">按分类筛选</label>
|
|
<select id="categorySelect" class="select">
|
|
<option value="all">全部分类</option>
|
|
</select>
|
|
<button id="resetBtn" type="button" class="btn btn-primary">重置筛选</button>
|
|
</div>
|
|
<div id="hotKeywords" class="hot-keywords">
|
|
<span>热门搜索：</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="tools">
|
|
<div class="tools-layout">
|
|
<aside class="category-sidebar" aria-label="分类导航">
|
|
<h2 class="sidebar-title">分类导航</h2>
|
|
<p class="sidebar-tip">点击分类可快速筛选工具</p>
|
|
<div id="categorySidebarList" class="category-sidebar-list"></div>
|
|
</aside>
|
|
|
|
<div class="tools-main">
|
|
<div class="toolbar">
|
|
<p id="resultTip">正在加载工具数据...</p>
|
|
<label class="sr-only" for="sortSelect">排序方式</label>
|
|
<select id="sortSelect" class="select">
|
|
<option value="popular">按下载量排序</option>
|
|
<option value="latest">按更新时间排序</option>
|
|
<option value="name">按名称排序</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="toolGrid" class="tool-grid" aria-live="polite"></div>
|
|
|
|
<div id="pagination" class="pagination">
|
|
<button id="prevBtn" type="button" class="btn">上一页</button>
|
|
<span id="pageText">第 1 页</span>
|
|
<button id="nextBtn" type="button" class="btn">下一页</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="detailModal" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="detailTitle">
|
|
<div class="modal">
|
|
<div class="modal-head">
|
|
<h2 id="detailTitle">工具详情</h2>
|
|
<button id="closeModalBtn" type="button" class="icon-btn" aria-label="关闭详情">
|
|
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<p id="detailDescription"></p>
|
|
<ul id="detailMeta" class="meta-list"></ul>
|
|
<h3>核心能力</h3>
|
|
<ul id="detailFeatures" class="feature-list"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="overviewModal" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="overviewTitle">
|
|
<div class="modal">
|
|
<div class="modal-head">
|
|
<h2 id="overviewTitle">站点概览</h2>
|
|
<button id="closeOverviewModalBtn" type="button" class="icon-btn" aria-label="关闭站点概览">
|
|
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<p>展示站当前统计信息与核心能力说明。</p>
|
|
<div class="kpi-grid">
|
|
<div><strong id="kpiTotal">0</strong><span>工具总数</span></div>
|
|
<div><strong id="kpiCategories">0</strong><span>分类数量</span></div>
|
|
<div><strong id="kpiDownloads">0</strong><span>累计使用</span></div>
|
|
<div><strong id="kpiFiltered">0</strong><span>当前结果</span></div>
|
|
</div>
|
|
<ul class="tips">
|
|
<li>浏览：分页展示工具卡片</li>
|
|
<li>搜索：实时匹配关键词</li>
|
|
<li>获取：支持模拟下载与网页直达</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast" class="toast" role="status" aria-live="polite"></div>
|
|
<script src="./app.js"></script>
|
|
</body>
|
|
</html>
|