generate-nav.sh

#!/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"