151 lines
5.1 KiB
HTML
151 lines
5.1 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>我的书架 — Ecliptic Pathfinder</title>
|
|
<meta name="description" content="个人图书阅读管理 — 阅读进度与书库展示">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
<style>{{CSS}}</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="hero">
|
|
<div class="hero-inner">
|
|
<h1>📚 我的书架</h1>
|
|
<p class="hero-sub">阅读是最好的投资</p>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 统计面板 -->
|
|
<section class="stats-bar">
|
|
<div class="stat">
|
|
<span class="stat-num">{{TOTAL}}</span>
|
|
<span class="stat-label">总计</span>
|
|
</div>
|
|
<div class="stat stat--reading">
|
|
<span class="stat-num">{{READING}}</span>
|
|
<span class="stat-label">在读</span>
|
|
</div>
|
|
<div class="stat stat--read">
|
|
<span class="stat-num">{{READ}}</span>
|
|
<span class="stat-label">已读</span>
|
|
</div>
|
|
<div class="stat stat--to-read">
|
|
<span class="stat-num">{{TO_READ}}</span>
|
|
<span class="stat-label">待读</span>
|
|
</div>
|
|
<div class="stat stat--paper">
|
|
<span class="stat-num">{{PAPER}}</span>
|
|
<span class="stat-label">纸质</span>
|
|
</div>
|
|
<div class="stat stat--ebook">
|
|
<span class="stat-num">{{EBOOK}}</span>
|
|
<span class="stat-label">电子</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 视图切换 -->
|
|
<nav class="view-nav">
|
|
<button class="view-btn active" data-view="progress">📖 阅读进度</button>
|
|
<button class="view-btn" data-view="library">📚 书库</button>
|
|
<button class="view-btn" data-view="tags">🏷️ 主题</button>
|
|
</nav>
|
|
|
|
<!-- 进度视图的子筛选 -->
|
|
<nav class="filter-nav" id="filter-progress">
|
|
<button class="filter-btn active" data-filter="all">全部</button>
|
|
<button class="filter-btn" data-filter="reading">在读</button>
|
|
<button class="filter-btn" data-filter="read">已读</button>
|
|
<button class="filter-btn" data-filter="to-read">待读</button>
|
|
</nav>
|
|
|
|
<!-- 书库视图的子筛选 -->
|
|
<nav class="filter-nav hidden" id="filter-library">
|
|
<button class="filter-btn active" data-filter="all">全部</button>
|
|
<button class="filter-btn" data-filter="paper">📕 纸质书</button>
|
|
<button class="filter-btn" data-filter="ebook">📱 电子书</button>
|
|
</nav>
|
|
|
|
<!-- 标签视图的按钮 -->
|
|
<nav class="filter-nav hidden" id="filter-tags">
|
|
<button class="filter-btn tag-btn active" data-tag="">全部</button>
|
|
{{TAG_BUTTONS}}
|
|
</nav>
|
|
|
|
<!-- 书目卡片列表 -->
|
|
<main class="book-grid">
|
|
{{BOOK_CARDS}}
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<p>Ecliptic Pathfinder · 生成于 <span id="gen-time"></span></p>
|
|
</footer>
|
|
|
|
<script>
|
|
document.getElementById('gen-time').textContent = new Date().toLocaleDateString('zh-CN');
|
|
|
|
const cards = document.querySelectorAll('.book-card');
|
|
const viewBtns = document.querySelectorAll('.view-btn');
|
|
const filterNavs = {
|
|
progress: document.getElementById('filter-progress'),
|
|
library: document.getElementById('filter-library'),
|
|
tags: document.getElementById('filter-tags'),
|
|
};
|
|
|
|
let currentView = 'progress';
|
|
let currentFilter = 'all';
|
|
let currentTag = '';
|
|
|
|
function applyFilters() {
|
|
cards.forEach(card => {
|
|
let show = true;
|
|
if (currentView === 'progress' && currentFilter !== 'all') {
|
|
show = card.dataset.status === currentFilter;
|
|
} else if (currentView === 'library' && currentFilter !== 'all') {
|
|
show = card.dataset.format === currentFilter;
|
|
} else if (currentView === 'tags' && currentTag) {
|
|
const cardTags = card.dataset.tags.split(',').map(t => t.trim());
|
|
show = cardTags.includes(currentTag);
|
|
}
|
|
card.style.display = show ? '' : 'none';
|
|
});
|
|
}
|
|
|
|
viewBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
viewBtns.forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
currentView = btn.dataset.view;
|
|
currentFilter = 'all';
|
|
currentTag = '';
|
|
Object.values(filterNavs).forEach(n => n.classList.add('hidden'));
|
|
if (filterNavs[currentView]) filterNavs[currentView].classList.remove('hidden');
|
|
// reset sub-filter active state
|
|
filterNavs[currentView]?.querySelectorAll('.filter-btn').forEach((b, i) => {
|
|
b.classList.toggle('active', i === 0);
|
|
});
|
|
applyFilters();
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('.filter-nav').forEach(nav => {
|
|
nav.addEventListener('click', e => {
|
|
const btn = e.target.closest('.filter-btn');
|
|
if (!btn) return;
|
|
nav.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
if (btn.dataset.tag !== undefined) {
|
|
currentTag = btn.dataset.tag;
|
|
currentFilter = 'all';
|
|
} else {
|
|
currentFilter = btn.dataset.filter;
|
|
}
|
|
applyFilters();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|