luongnv89--claude-howto
dhanya elizabath jose
47b97d1037
* feat(hooks): add SessionEnd progress logger and local progress tracker Adds a SessionEnd hook that prompts for modules studied at session end and appends a record to ~/.claude-howto-progress.json — outside the repo so progress survives git pull without being overwritten. Also adds local-progress/index.html: a self-contained visual tracker with checkboxes for all 10 modules, per-module notes, an overall progress bar, and Export/Import to sync with a local JSON backup file. Key patterns demonstrated: - SessionEnd vs Stop (fires once on exit, not after every response) - /dev/tty for interactive input in hooks (stdin carries the JSON payload) - $CLAUDE_PROJECT_DIR for portable paths (never hardcode /Users/...) - Guard clause to prevent global hook running in unrelated projects Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> * fix(hooks): address PR review — bash 3.2 compat, JSON escaping, textarea XSS - Replace pipeline+while with IFS for-loop (bash 3.2 compatible) - Pass NOTES as Python arg to avoid broken JSON on quotes/backslashes - Set textarea.value instead of innerHTML to prevent XSS from imported JSON Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
698 行
20 KiB
HTML
698 行
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Claude Code — Learning Progress</title>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root {
|
|
--bg: #0f1117;
|
|
--surface: #1a1d27;
|
|
--surface2: #22263a;
|
|
--border: #2e3350;
|
|
--accent: #6c8cff;
|
|
--accent2: #4ade80;
|
|
--text: #e2e8f0;
|
|
--muted: #8892b0;
|
|
--done: #4ade80;
|
|
--radius: 10px;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
min-height: 100vh;
|
|
padding: 2rem 1rem 4rem;
|
|
}
|
|
|
|
header {
|
|
max-width: 860px;
|
|
margin: 0 auto 2.5rem;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
header p {
|
|
color: var(--muted);
|
|
font-size: 0.9rem;
|
|
margin-top: 0.4rem;
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-top: 1.25rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
button, .import-label {
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
padding: 0.45rem 1rem;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border);
|
|
background: var(--surface2);
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
transition: background 0.15s, border-color 0.15s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
button:hover, .import-label:hover {
|
|
background: var(--border);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
#reset-btn { color: #f87171; border-color: #3a1e1e; }
|
|
#reset-btn:hover { background: #3a1e1e; border-color: #f87171; }
|
|
|
|
input[type="file"] { display: none; }
|
|
|
|
.progress-bar-wrap {
|
|
max-width: 860px;
|
|
margin: 0 auto 1.75rem;
|
|
}
|
|
|
|
.progress-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.8rem;
|
|
color: var(--muted);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.progress-meta span.pct { color: var(--accent2); font-weight: 700; font-size: 1rem; }
|
|
|
|
.bar-track {
|
|
height: 8px;
|
|
background: var(--surface2);
|
|
border-radius: 99px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bar-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--accent), var(--accent2));
|
|
border-radius: 99px;
|
|
transition: width 0.4s ease;
|
|
}
|
|
|
|
main {
|
|
max-width: 860px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.25rem;
|
|
}
|
|
|
|
.module {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.module.complete { border-color: #1a3a2a; }
|
|
|
|
.module-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.85rem;
|
|
padding: 1rem 1.25rem;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.module-header:hover { background: var(--surface2); }
|
|
|
|
.module-num {
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
color: var(--muted);
|
|
background: var(--surface2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 5px;
|
|
padding: 2px 7px;
|
|
letter-spacing: 0.5px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.module.complete .module-num {
|
|
background: #0f2d1f;
|
|
border-color: #1a3a2a;
|
|
color: var(--done);
|
|
}
|
|
|
|
.module-title {
|
|
font-weight: 600;
|
|
font-size: 0.97rem;
|
|
flex: 1;
|
|
}
|
|
|
|
.module-sub {
|
|
font-size: 0.78rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.module-chevron {
|
|
color: var(--muted);
|
|
font-size: 0.8rem;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.module.open .module-chevron { transform: rotate(90deg); }
|
|
|
|
.module-body {
|
|
display: none;
|
|
padding: 0 1.25rem 1.25rem;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.module.open .module-body { display: block; }
|
|
|
|
.items-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
padding: 0.5rem 0.65rem;
|
|
border-radius: 6px;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
transition: background 0.12s;
|
|
}
|
|
|
|
.item:hover { background: var(--surface2); border-color: var(--border); }
|
|
.item.checked { background: #0f2d1f; border-color: #1a3a2a; }
|
|
|
|
.item input[type="checkbox"] {
|
|
appearance: none;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid var(--border);
|
|
border-radius: 4px;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: background 0.12s, border-color 0.12s;
|
|
}
|
|
|
|
.item input[type="checkbox"]:checked {
|
|
background: var(--done);
|
|
border-color: var(--done);
|
|
}
|
|
|
|
.item input[type="checkbox"]:checked::after {
|
|
content: "✓";
|
|
position: absolute;
|
|
color: #0f1117;
|
|
font-size: 10px;
|
|
font-weight: 900;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.item-label {
|
|
font-size: 0.83rem;
|
|
line-height: 1.3;
|
|
color: var(--text);
|
|
}
|
|
|
|
.item.checked .item-label { color: var(--done); }
|
|
|
|
.notes-wrap {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.notes-wrap label {
|
|
font-size: 0.75rem;
|
|
color: var(--muted);
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
display: block;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
background: var(--surface2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
color: var(--text);
|
|
font-size: 0.83rem;
|
|
font-family: inherit;
|
|
padding: 0.6rem 0.75rem;
|
|
resize: vertical;
|
|
min-height: 70px;
|
|
outline: none;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
textarea:focus { border-color: var(--accent); }
|
|
|
|
.mod-progress-bar {
|
|
margin-top: 0.75rem;
|
|
height: 4px;
|
|
background: var(--surface2);
|
|
border-radius: 99px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mod-progress-fill {
|
|
height: 100%;
|
|
background: var(--done);
|
|
border-radius: 99px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.toast {
|
|
position: fixed;
|
|
bottom: 1.5rem;
|
|
right: 1.5rem;
|
|
background: var(--surface2);
|
|
border: 1px solid var(--accent);
|
|
color: var(--text);
|
|
padding: 0.65rem 1.1rem;
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
transition: opacity 0.25s, transform 0.25s;
|
|
pointer-events: none;
|
|
z-index: 100;
|
|
}
|
|
|
|
.toast.show { opacity: 1; transform: translateY(0); }
|
|
|
|
.last-saved {
|
|
font-size: 0.75rem;
|
|
color: var(--muted);
|
|
align-self: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<h1>Claude Code — Learning Progress</h1>
|
|
<p>10 modules · Progress stored in browser localStorage · Export to back up</p>
|
|
<div class="toolbar">
|
|
<button id="export-btn">Export JSON</button>
|
|
<label class="import-label" for="import-file">Import JSON</label>
|
|
<input type="file" id="import-file" accept=".json">
|
|
<button id="reset-btn">Reset All</button>
|
|
<span class="last-saved" id="last-saved"></span>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="progress-bar-wrap">
|
|
<div class="progress-meta">
|
|
<span>Overall progress</span>
|
|
<span class="pct" id="overall-pct">0%</span>
|
|
</div>
|
|
<div class="bar-track"><div class="bar-fill" id="overall-bar" style="width:0%"></div></div>
|
|
</div>
|
|
|
|
<main id="modules-container"></main>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script>
|
|
const STORAGE_KEY = 'claude-howto-progress';
|
|
|
|
const MODULES = [
|
|
{
|
|
id: '01-slash-commands',
|
|
num: '01',
|
|
title: 'Slash Commands',
|
|
subtitle: '~30 min · Quick productivity shortcuts',
|
|
items: [
|
|
'Read module README',
|
|
'/optimize — code performance analysis',
|
|
'/pr — pull request preparation',
|
|
'/commit — commit message helper',
|
|
'/generate-api-docs — API documentation',
|
|
'/setup-ci-cd — CI/CD pipeline setup',
|
|
'/push-all — push all changes workflow',
|
|
'/unit-test-expand — unit test coverage',
|
|
'/doc-refactor — documentation refactoring',
|
|
'Create your own slash command',
|
|
],
|
|
},
|
|
{
|
|
id: '02-memory',
|
|
num: '02',
|
|
title: 'Memory & CLAUDE.md',
|
|
subtitle: '~45 min · Persistent context across sessions',
|
|
items: [
|
|
'Read module README',
|
|
'Understand project-level CLAUDE.md',
|
|
'Understand directory-level CLAUDE.md',
|
|
'Understand personal CLAUDE.md',
|
|
'Create a project CLAUDE.md for your own project',
|
|
'Create a directory-specific CLAUDE.md',
|
|
'Test memory persistence across sessions',
|
|
],
|
|
},
|
|
{
|
|
id: '03-skills',
|
|
num: '03',
|
|
title: 'Skills',
|
|
subtitle: '~1 hour · Reusable auto-invoked capabilities',
|
|
items: [
|
|
'Read module README',
|
|
'code-review skill',
|
|
'brand-voice skill',
|
|
'doc-generator skill',
|
|
'refactor skill',
|
|
'claude-md skill',
|
|
'blog-draft skill',
|
|
'Create a custom skill for your workflow',
|
|
],
|
|
},
|
|
{
|
|
id: '04-subagents',
|
|
num: '04',
|
|
title: 'Subagents',
|
|
subtitle: '~1.5 hours · Specialized AI assistants',
|
|
items: [
|
|
'Read module README',
|
|
'code-reviewer agent',
|
|
'test-engineer agent',
|
|
'documentation-writer agent',
|
|
'secure-reviewer agent',
|
|
'implementation-agent',
|
|
'debugger agent',
|
|
'data-scientist agent',
|
|
'clean-code-reviewer agent',
|
|
'Run your first subagent task',
|
|
],
|
|
},
|
|
{
|
|
id: '05-mcp',
|
|
num: '05',
|
|
title: 'MCP Integrations',
|
|
subtitle: '~1 hour · Model Context Protocol',
|
|
items: [
|
|
'Read module README',
|
|
'github-mcp config',
|
|
'database-mcp config',
|
|
'filesystem-mcp config',
|
|
'multi-mcp combined config',
|
|
'Install and test one MCP server',
|
|
],
|
|
},
|
|
{
|
|
id: '06-hooks',
|
|
num: '06',
|
|
title: 'Hooks',
|
|
subtitle: '~1 hour · Event-driven automation',
|
|
items: [
|
|
'Read module README',
|
|
'format-code.sh — auto-format on write',
|
|
'pre-commit.sh — run tests before commit',
|
|
'security-scan.sh — vulnerability scanning',
|
|
'log-bash.sh — command logging',
|
|
'validate-prompt.sh — input validation',
|
|
'notify-team.sh — team notifications',
|
|
'context-tracker.py — context monitoring',
|
|
'Install a hook in settings.json',
|
|
'Observe hook firing in a session',
|
|
],
|
|
},
|
|
{
|
|
id: '07-plugins',
|
|
num: '07',
|
|
title: 'Plugins',
|
|
subtitle: '~2 hours · Bundled feature collections',
|
|
items: [
|
|
'Read module README',
|
|
'pr-review plugin — complete PR workflow',
|
|
'devops-automation plugin — Kubernetes deploy',
|
|
'documentation plugin — API docs generation',
|
|
'Understand plugin.json structure',
|
|
'Create a minimal plugin',
|
|
],
|
|
},
|
|
{
|
|
id: '08-checkpoints',
|
|
num: '08',
|
|
title: 'Checkpoints',
|
|
subtitle: '~45 min · Session snapshots & recovery',
|
|
items: [
|
|
'Read module README',
|
|
'Read checkpoint-examples.md',
|
|
'Create a checkpoint mid-task',
|
|
'Restore from a checkpoint',
|
|
'Use checkpoints for risky operations',
|
|
],
|
|
},
|
|
{
|
|
id: '09-advanced-features',
|
|
num: '09',
|
|
title: 'Advanced Features',
|
|
subtitle: '~2–3 hours · Power user capabilities',
|
|
items: [
|
|
'Read module README',
|
|
'Study config-examples.json (10+ configs)',
|
|
'planning-mode-examples — REST API planning',
|
|
'planning-mode-examples — migration planning',
|
|
'planning-mode-examples — refactoring',
|
|
'Use Plan mode on a real task',
|
|
'Try extended thinking mode',
|
|
],
|
|
},
|
|
{
|
|
id: '10-cli',
|
|
num: '10',
|
|
title: 'CLI Mastery',
|
|
subtitle: '~30 min + advanced · Command-line interface',
|
|
items: [
|
|
'Read module README',
|
|
'Learn key CLI flags (--print, --output-format)',
|
|
'Non-interactive / scripted usage',
|
|
'Pipe input/output patterns',
|
|
'Chain Claude Code in shell scripts',
|
|
'Integrate with CI/CD pipeline',
|
|
],
|
|
},
|
|
];
|
|
|
|
// ── State ──────────────────────────────────────────────────────────────────
|
|
|
|
function loadState() {
|
|
try {
|
|
return JSON.parse(localStorage.getItem(STORAGE_KEY)) || {};
|
|
} catch { return {}; }
|
|
}
|
|
|
|
function saveState(state) {
|
|
state._savedAt = new Date().toISOString();
|
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
|
|
updateLastSaved(state._savedAt);
|
|
}
|
|
|
|
function updateLastSaved(iso) {
|
|
if (!iso) return;
|
|
const el = document.getElementById('last-saved');
|
|
const d = new Date(iso);
|
|
el.textContent = `Last saved ${d.toLocaleDateString()} ${d.toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'})}`;
|
|
}
|
|
|
|
// ── Render ─────────────────────────────────────────────────────────────────
|
|
|
|
function render() {
|
|
const state = loadState();
|
|
const container = document.getElementById('modules-container');
|
|
container.innerHTML = '';
|
|
|
|
MODULES.forEach(mod => {
|
|
const modState = state[mod.id] || { checked: {}, notes: '' };
|
|
const total = mod.items.length;
|
|
const done = mod.items.filter((_, i) => modState.checked[i]).length;
|
|
const pct = total ? Math.round(done / total * 100) : 0;
|
|
const isComplete = pct === 100;
|
|
const isOpen = state[`_open_${mod.id}`];
|
|
|
|
const div = document.createElement('div');
|
|
div.className = `module${isComplete ? ' complete' : ''}${isOpen ? ' open' : ''}`;
|
|
div.dataset.id = mod.id;
|
|
|
|
div.innerHTML = `
|
|
<div class="module-header">
|
|
<span class="module-num">${mod.num}</span>
|
|
<div style="flex:1">
|
|
<div class="module-title">${mod.title}</div>
|
|
<div class="module-sub">${mod.subtitle} · ${done}/${total} done</div>
|
|
</div>
|
|
<span class="module-chevron">▶</span>
|
|
</div>
|
|
<div class="module-body">
|
|
<div class="mod-progress-bar">
|
|
<div class="mod-progress-fill" style="width:${pct}%"></div>
|
|
</div>
|
|
<div class="items-grid">
|
|
${mod.items.map((item, i) => `
|
|
<label class="item${modState.checked[i] ? ' checked' : ''}" data-idx="${i}">
|
|
<input type="checkbox" ${modState.checked[i] ? 'checked' : ''} data-mod="${mod.id}" data-idx="${i}">
|
|
<span class="item-label">${item}</span>
|
|
</label>
|
|
`).join('')}
|
|
</div>
|
|
<div class="notes-wrap">
|
|
<label>Notes</label>
|
|
<textarea data-mod="${mod.id}" placeholder="Your notes for this module…"></textarea>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Set textarea value via .value (not innerHTML) to prevent XSS from imported JSON
|
|
div.querySelector('textarea[data-mod]').value = modState.notes || '';
|
|
|
|
container.appendChild(div);
|
|
});
|
|
|
|
updateOverall(state);
|
|
updateLastSaved(state._savedAt);
|
|
bindEvents();
|
|
}
|
|
|
|
function updateOverall(state) {
|
|
let total = 0, done = 0;
|
|
MODULES.forEach(mod => {
|
|
const modState = state[mod.id] || { checked: {} };
|
|
total += mod.items.length;
|
|
done += mod.items.filter((_, i) => modState.checked[i]).length;
|
|
});
|
|
const pct = total ? Math.round(done / total * 100) : 0;
|
|
document.getElementById('overall-pct').textContent = `${pct}%`;
|
|
document.getElementById('overall-bar').style.width = `${pct}%`;
|
|
}
|
|
|
|
// ── Events ─────────────────────────────────────────────────────────────────
|
|
|
|
function bindEvents() {
|
|
document.querySelectorAll('.module-header').forEach(header => {
|
|
header.addEventListener('click', () => {
|
|
const mod = header.closest('.module');
|
|
const id = mod.dataset.id;
|
|
const state = loadState();
|
|
state[`_open_${id}`] = !mod.classList.contains('open');
|
|
saveState(state);
|
|
mod.classList.toggle('open');
|
|
mod.querySelector('.module-chevron').style.transform =
|
|
mod.classList.contains('open') ? 'rotate(90deg)' : '';
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('input[type="checkbox"][data-mod]').forEach(cb => {
|
|
cb.addEventListener('change', e => {
|
|
e.stopPropagation();
|
|
const { mod, idx } = cb.dataset;
|
|
const state = loadState();
|
|
if (!state[mod]) state[mod] = { checked: {}, notes: '' };
|
|
state[mod].checked[idx] = cb.checked;
|
|
saveState(state);
|
|
const label = cb.closest('.item');
|
|
label.classList.toggle('checked', cb.checked);
|
|
|
|
// update sub-counts without full re-render
|
|
const modEl = cb.closest('.module');
|
|
const modDef = MODULES.find(m => m.id === mod);
|
|
const modState = state[mod];
|
|
const done = modDef.items.filter((_, i) => modState.checked[i]).length;
|
|
const total = modDef.items.length;
|
|
const pct = Math.round(done / total * 100);
|
|
modEl.querySelector('.module-sub').textContent =
|
|
`${modDef.subtitle} · ${done}/${total} done`;
|
|
modEl.querySelector('.mod-progress-fill').style.width = `${pct}%`;
|
|
const isComplete = pct === 100;
|
|
modEl.classList.toggle('complete', isComplete);
|
|
const numEl = modEl.querySelector('.module-num');
|
|
numEl.style.color = isComplete ? 'var(--done)' : '';
|
|
|
|
updateOverall(state);
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('textarea[data-mod]').forEach(ta => {
|
|
ta.addEventListener('input', () => {
|
|
const mod = ta.dataset.mod;
|
|
const state = loadState();
|
|
if (!state[mod]) state[mod] = { checked: {}, notes: '' };
|
|
state[mod].notes = ta.value;
|
|
saveState(state);
|
|
});
|
|
});
|
|
}
|
|
|
|
// ── Toolbar ────────────────────────────────────────────────────────────────
|
|
|
|
document.getElementById('export-btn').addEventListener('click', () => {
|
|
const state = loadState();
|
|
const blob = new Blob([JSON.stringify(state, null, 2)], { type: 'application/json' });
|
|
const a = document.createElement('a');
|
|
a.href = URL.createObjectURL(blob);
|
|
a.download = `claude-howto-progress-${new Date().toISOString().slice(0,10)}.json`;
|
|
a.click();
|
|
showToast('Progress exported — save the file as ~/.claude-howto-progress.json');
|
|
});
|
|
|
|
document.getElementById('import-file').addEventListener('change', e => {
|
|
const file = e.target.files[0];
|
|
if (!file) return;
|
|
const reader = new FileReader();
|
|
reader.onload = ev => {
|
|
try {
|
|
const data = JSON.parse(ev.target.result);
|
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
|
|
render();
|
|
showToast('Progress imported successfully');
|
|
} catch {
|
|
showToast('Error: invalid JSON file');
|
|
}
|
|
};
|
|
reader.readAsText(file);
|
|
e.target.value = '';
|
|
});
|
|
|
|
document.getElementById('reset-btn').addEventListener('click', () => {
|
|
if (!confirm('Reset ALL progress? This cannot be undone.')) return;
|
|
localStorage.removeItem(STORAGE_KEY);
|
|
render();
|
|
showToast('Progress reset');
|
|
});
|
|
|
|
// ── Toast ──────────────────────────────────────────────────────────────────
|
|
|
|
function showToast(msg) {
|
|
const t = document.getElementById('toast');
|
|
t.textContent = msg;
|
|
t.classList.add('show');
|
|
setTimeout(() => t.classList.remove('show'), 3000);
|
|
}
|
|
|
|
// ── Init ───────────────────────────────────────────────────────────────────
|
|
|
|
render();
|
|
</script>
|
|
</body>
|
|
</html>
|