This commit is contained in:
+74
-82
@@ -1,96 +1,88 @@
|
||||
#!/bin/sh
|
||||
# Auto-generate index.html navigation page based on subdirectories
|
||||
#!/bin/bash
|
||||
# Generate index navigation page for all problems
|
||||
cd "$(dirname "$0")"
|
||||
|
||||
TARGET_DIR="${1:-.}"
|
||||
OUTPUT="${TARGET_DIR}/index.html"
|
||||
|
||||
cat > "$OUTPUT" << 'HEADER'
|
||||
cat > index.html << 'HEADER'
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<html lang="zh-Hans">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>图解算法 - 导航</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #e4e9f2 50%, #dfe6ed 100%);
|
||||
min-height: 100vh;
|
||||
color: #1e293b;
|
||||
padding: 2rem;
|
||||
}
|
||||
.container { max-width: 800px; margin: 0 auto; }
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #1e293b;
|
||||
}
|
||||
.subtitle { color: #64748b; margin-bottom: 2rem; font-size: 1.1rem; }
|
||||
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
|
||||
.card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
text-decoration: none;
|
||||
color: #1e293b;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.card:hover {
|
||||
background: #faf5ff;
|
||||
border-color: #c4b5fd;
|
||||
box-shadow: 0 4px 12px rgba(139,92,246,0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.card-icon { font-size: 1.5rem; }
|
||||
.card-title { font-weight: 600; font-size: 1rem; }
|
||||
.card-dir { color: #94a3b8; font-size: 0.8rem; }
|
||||
.empty { color: #94a3b8; font-style: italic; }
|
||||
footer { margin-top: 3rem; text-align: center; color: #94a3b8; font-size: 0.85rem; }
|
||||
</style>
|
||||
<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">
|
||||
<h1>📚 图解算法</h1>
|
||||
<p class="subtitle">知识可视化集合</p>
|
||||
<div class="grid">
|
||||
<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
|
||||
|
||||
# Scan subdirectories with index.html
|
||||
for dir in "$TARGET_DIR"/*/; do
|
||||
[ -d "$dir" ] || continue
|
||||
name=$(basename "$dir")
|
||||
[ "$name" = ".git" ] && continue
|
||||
[ "$name" = ".gitea" ] && continue
|
||||
[ -f "$dir/index.html" ] || continue
|
||||
# Read problems from JSON and generate cards
|
||||
python3 -c "
|
||||
import json
|
||||
with open('shared/problems.json') as f:
|
||||
probs = json.load(f)
|
||||
|
||||
# Try to extract title from index.html
|
||||
title=$(grep -oP '(?<=<title>)[^<]+' "$dir/index.html" 2>/dev/null | head -1)
|
||||
[ -z "$title" ] && title="$name"
|
||||
cats = {}
|
||||
for p in probs:
|
||||
c = p['category']
|
||||
if c not in cats: cats[c] = []
|
||||
cats[c].append(p)
|
||||
|
||||
echo " <a class=\"card\" href=\"/$name/\">" >> "$OUTPUT"
|
||||
echo " <span class=\"card-icon\">📄</span>" >> "$OUTPUT"
|
||||
echo " <div>" >> "$OUTPUT"
|
||||
echo " <div class=\"card-title\">$title</div>" >> "$OUTPUT"
|
||||
echo " <div class=\"card-dir\">/$name</div>" >> "$OUTPUT"
|
||||
echo " </div>" >> "$OUTPUT"
|
||||
echo " </a>" >> "$OUTPUT"
|
||||
done
|
||||
diff_cls = {'简单':'easy','中等':'medium','困难':'hard'}
|
||||
diff_icon = {'简单':'🟢','中等':'🟡','困难':'🔴'}
|
||||
|
||||
# Check if any cards were added
|
||||
if ! grep -q 'class="card"' "$OUTPUT"; then
|
||||
echo ' <p class="empty">暂无页面</p>' >> "$OUTPUT"
|
||||
fi
|
||||
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 >> "$OUTPUT" << 'FOOTER'
|
||||
</div>
|
||||
<footer>Powered by QwenPaw · 图解算法</footer>
|
||||
</div>
|
||||
cat >> index.html << 'FOOTER'
|
||||
<footer>Powered by QwenPaw · 图解算法 · LeetCode Hot 100</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
FOOTER
|
||||
|
||||
echo "✅ index.html generated"
|
||||
|
||||
Reference in New Issue
Block a user