89 lines
3.7 KiB
Bash
89 lines
3.7 KiB
Bash
#!/bin/bash
|
||
# Generate index navigation page for all problems
|
||
cd "$(dirname "$0")"
|
||
|
||
cat > index.html << 'HEADER'
|
||
<!DOCTYPE html>
|
||
<html lang="zh-Hans">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>LeetCode Hot 100 图解算法</title>
|
||
<link rel="stylesheet" href="shared/style.css">
|
||
<style>
|
||
.hero { text-align:center; padding:3rem 1rem; }
|
||
.hero h1 { font-size:2.5rem; margin-bottom:.5rem; }
|
||
.hero p { color:var(--text-secondary); font-size:1.1rem; }
|
||
.stats { display:flex; gap:1rem; justify-content:center; margin-top:1.5rem; flex-wrap:wrap; }
|
||
.stat-card { background:white; border:1px solid var(--border); border-radius:12px; padding:1rem 1.5rem; text-align:center; box-shadow:var(--shadow); min-width:100px; }
|
||
.stat-card .num { font-size:2rem; font-weight:800; }
|
||
.stat-card .label { font-size:.85rem; color:var(--text-secondary); }
|
||
.category { margin-bottom:2rem; }
|
||
.category h2 { font-size:1.3rem; color:var(--text); margin-bottom:.75rem; padding-bottom:.5rem; border-bottom:2px solid var(--border); }
|
||
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
|
||
.card-link { display:block; background:white; border:1px solid var(--border); border-radius:10px; padding:12px 16px; text-decoration:none; color:var(--text); transition:all .2s; box-shadow:0 1px 2px rgba(0,0,0,.04); }
|
||
.card-link:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--blue); }
|
||
.card-link .id { font-size:.8rem; color:var(--text-muted); }
|
||
.card-link .title { font-weight:600; font-size:.95rem; margin-top:2px; }
|
||
.badge { display:inline-block; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:600; }
|
||
.badge.easy { background:#dcfce7; color:#166534; }
|
||
.badge.medium { background:#fef3c7; color:#92400e; }
|
||
.badge.hard { background:#fee2e2; color:#991b1b; }
|
||
@media(max-width:768px) { .grid { grid-template-columns:1fr 1fr; } .hero h1 { font-size:1.8rem; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="hero">
|
||
<h1>🧮 LeetCode Hot 100 图解算法</h1>
|
||
<p>交互式可视化 · 逐步演示 · 每一步都看得见</p>
|
||
<div class="stats">
|
||
<div class="stat-card"><div class="num">100</div><div class="label">题目</div></div>
|
||
<div class="stat-card"><div class="num" style="color:var(--green)">25</div><div class="label">简单</div></div>
|
||
<div class="stat-card"><div class="num" style="color:#f59e0b">60</div><div class="label">中等</div></div>
|
||
<div class="stat-card"><div class="num" style="color:var(--red)">15</div><div class="label">困难</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
HEADER
|
||
|
||
# Read problems from JSON and generate cards
|
||
python3 -c "
|
||
import json
|
||
with open('shared/problems.json') as f:
|
||
probs = json.load(f)
|
||
|
||
cats = {}
|
||
for p in probs:
|
||
c = p['category']
|
||
if c not in cats: cats[c] = []
|
||
cats[c].append(p)
|
||
|
||
diff_cls = {'简单':'easy','中等':'medium','困难':'hard'}
|
||
diff_icon = {'简单':'🟢','中等':'🟡','困难':'🔴'}
|
||
|
||
for cat, plist in cats.items():
|
||
print(f'<div class=\"category\">')
|
||
print(f'<h2>{cat}（{len(plist)}题）</h2>')
|
||
print(f'<div class=\"grid\">')
|
||
for p in plist:
|
||
d = p['difficulty']
|
||
dcls = diff_cls.get(d,'medium')
|
||
did = str(p['id']).zfill(3)
|
||
print(f'<a class=\"card-link\" href=\"{p[\"slug\"]}/\">')
|
||
print(f'<span class=\"id\">#{did}</span>')
|
||
print(f'<span class=\"badge {dcls}\">{d}</span>')
|
||
print(f'<div class=\"title\">{p[\"title\"]}</div>')
|
||
print(f'</a>')
|
||
print(f'</div></div>')
|
||
" >> index.html
|
||
|
||
cat >> index.html << 'FOOTER'
|
||
<footer>Powered by QwenPaw · 图解算法 · LeetCode Hot 100</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
FOOTER
|
||
|
||
echo "✅ index.html generated"
|