nmemmertandClaude Sonnet 4.6
3c22fe05f8
- Streak tracker: server-side streak counting per kid, celebration overlay when all today's tasks are done for the first time that day - Kid themes: 5 colour palettes (blue/green/purple/orange/pink), picked via colour dots on the kid home screen; parents can set it from the Kids panel - Grading badge: Grading nav pill turns red and shows a pending count - Print worksheets: 🖨 Worksheet button per word list in admin Spelling panel; kids also get "Print my words" on the Spelling tab - Parent feedback: gold 💬 badge on Today rows with unread comments; more prominent callout styling inside the assignment view - Planner drag-and-drop: tasks can be dragged between days; PATCH /api/schedule/:id moves the task, drop zones highlight on hover Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
198 lines
8.4 KiB
HTML
198 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Homeschool</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Kid picker -->
|
|
<section id="view-home" class="view">
|
|
<h1 class="app-title">🎓 Homeschool</h1>
|
|
<p class="subtitle">Who's learning today?</p>
|
|
<div id="kid-cards" class="kid-cards"></div>
|
|
<p id="no-kids" class="hint" hidden>No kids yet — a parent needs to add them.</p>
|
|
<a class="link-btn" href="admin.html">Parent dashboard</a>
|
|
</section>
|
|
|
|
<!-- Kid home: Today's work + nav -->
|
|
<section id="view-kid" class="view" hidden>
|
|
<div class="kid-topbar">
|
|
<button class="back-btn" data-nav="home">← Switch</button>
|
|
<button id="theme-picker-btn" class="theme-picker-btn" aria-label="Pick my color">🎨</button>
|
|
</div>
|
|
<h1 id="kid-greeting"></h1>
|
|
<div id="theme-dots" class="theme-dots" hidden>
|
|
<button class="theme-dot theme-blue" data-theme="blue" title="Blue"></button>
|
|
<button class="theme-dot theme-green" data-theme="green" title="Green"></button>
|
|
<button class="theme-dot theme-purple" data-theme="purple" title="Purple"></button>
|
|
<button class="theme-dot theme-orange" data-theme="orange" title="Orange"></button>
|
|
<button class="theme-dot theme-pink" data-theme="pink" title="Pink"></button>
|
|
</div>
|
|
|
|
<div class="kid-nav">
|
|
<button class="nav-pill active" data-tab="today">📋 Today</button>
|
|
<button class="nav-pill" data-tab="courses">📚 My Courses</button>
|
|
<button class="nav-pill" data-tab="spelling">✏️ Spelling</button>
|
|
</div>
|
|
|
|
<div id="tab-today" class="tab-panel">
|
|
<div id="today-list" class="today-list"></div>
|
|
<p id="today-empty" class="hint" hidden>Nothing scheduled for today — check My Courses for anything else to work on!</p>
|
|
</div>
|
|
|
|
<div id="tab-courses" class="tab-panel" hidden>
|
|
<div id="course-cards" class="course-cards"></div>
|
|
<p id="courses-empty" class="hint" hidden>Not enrolled in any courses yet.</p>
|
|
</div>
|
|
|
|
<div id="tab-spelling" class="tab-panel" hidden>
|
|
<div id="kid-week" class="week-card"></div>
|
|
<div class="big-actions">
|
|
<button id="btn-practice" class="big-btn practice">✏️ Practice</button>
|
|
<button id="btn-test" class="big-btn test">⭐ Friday Test</button>
|
|
<button id="btn-print-list" class="big-btn print-list">🖨 Print my words</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- All-done celebration overlay -->
|
|
<div id="celebration-overlay" hidden>
|
|
<div id="celebration-content">
|
|
<div class="celebration-emoji">🎉</div>
|
|
<h2>All done for today!</h2>
|
|
<div id="streak-display"></div>
|
|
<button id="celebration-close" class="check-btn">High five! ✋</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Course detail: units + items -->
|
|
<section id="view-course" class="view" hidden>
|
|
<button class="back-btn" data-back="course">← Back</button>
|
|
<h1 id="course-title"></h1>
|
|
<div id="course-units"></div>
|
|
</section>
|
|
|
|
<!-- Lesson viewer -->
|
|
<section id="view-lesson" class="view" hidden>
|
|
<button class="back-btn" data-back="lesson">← Back</button>
|
|
<div class="item-card">
|
|
<p class="item-kicker" id="lesson-kicker"></p>
|
|
<h1 id="lesson-title"></h1>
|
|
<div id="lesson-body" class="lesson-body"></div>
|
|
<button id="lesson-done-btn" class="check-btn">Done reading ✓</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Assignment viewer -->
|
|
<section id="view-assignment" class="view" hidden>
|
|
<button class="back-btn" data-back="assignment">← Back</button>
|
|
<div class="item-card">
|
|
<p class="item-kicker" id="assignment-kicker"></p>
|
|
<h1 id="assignment-title"></h1>
|
|
<p id="assignment-points" class="points-label"></p>
|
|
<div id="assignment-body" class="lesson-body"></div>
|
|
<div id="assignment-evidence-section" hidden>
|
|
<details id="assignment-evidence-details" class="evidence-form">
|
|
<summary>📎 Add evidence (photo or notes)</summary>
|
|
<div class="evidence-inner">
|
|
<textarea id="assignment-evidence-notes" placeholder="Notes about your work…" rows="3"></textarea>
|
|
<div class="evidence-photo-row">
|
|
<button type="button" id="assignment-photo-btn" class="secondary small">📷 Add photo</button>
|
|
<input type="file" id="assignment-photo-input" accept="image/*" capture="environment" hidden>
|
|
<span id="assignment-photo-status" class="hint"></span>
|
|
</div>
|
|
<label class="checkbox-label evidence-note-label">
|
|
<select id="assignment-student-note">
|
|
<option value="">I felt good about this</option>
|
|
<option value="needs_help">🙋 I need help with this</option>
|
|
<option value="not_sure">🤔 I did it but I'm not sure</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
<button id="assignment-done-btn" class="check-btn">Mark as done ✓</button>
|
|
<div id="assignment-status" class="status-banner" hidden></div>
|
|
<div id="assignment-comment" class="parent-comment" hidden></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Quiz -->
|
|
<section id="view-quiz" class="view" hidden>
|
|
<button class="back-btn" data-back="quiz">← Back</button>
|
|
<div class="item-card">
|
|
<p class="item-kicker" id="quiz-kicker"></p>
|
|
<h1 id="quiz-title"></h1>
|
|
<form id="quiz-form"></form>
|
|
<div id="quiz-result" class="status-banner" hidden></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Flashcards -->
|
|
<section id="view-flashcards" class="view" hidden>
|
|
<button class="back-btn" data-back="flashcards">← Stop</button>
|
|
<p id="flash-progress" class="progress-label"></p>
|
|
<div class="progress-track"><div id="flash-bar" class="progress-fill"></div></div>
|
|
|
|
<div id="flash-card" class="word-card flip-card">
|
|
<p class="prompt" id="flash-deck-name"></p>
|
|
<div class="flash-face" id="flash-front"></div>
|
|
<div class="flash-face" id="flash-back" hidden></div>
|
|
<button id="flash-reveal" class="check-btn">Show answer</button>
|
|
<div id="flash-grade-buttons" class="flash-grade-row" hidden>
|
|
<button id="flash-again" class="grade-btn again">🔁 Study more</button>
|
|
<button id="flash-got-it" class="grade-btn got-it">✅ Got it!</button>
|
|
</div>
|
|
</div>
|
|
<div id="flash-done" class="done-card" hidden></div>
|
|
</section>
|
|
|
|
<!-- Practice (spelling) -->
|
|
<section id="view-practice" class="view" hidden>
|
|
<button class="back-btn" data-back="practice">← Stop</button>
|
|
<p id="practice-progress" class="progress-label"></p>
|
|
<div class="progress-track"><div id="practice-bar" class="progress-fill"></div></div>
|
|
|
|
<div id="practice-card" class="word-card">
|
|
<button id="btn-speak" class="speak-btn" title="Hear the word again">🔊 Say it again</button>
|
|
<p id="practice-prompt" class="prompt">Listen, then type the word:</p>
|
|
<div id="feedback" class="feedback"></div>
|
|
<form id="practice-form" autocomplete="off">
|
|
<input id="practice-input" class="spell-input" type="text" autocomplete="off"
|
|
autocapitalize="off" autocorrect="off" spellcheck="false" aria-label="Type the word">
|
|
<button type="submit" class="check-btn">Check ✓</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="practice-done" class="done-card" hidden></div>
|
|
</section>
|
|
|
|
<!-- Friday test (spelling) -->
|
|
<section id="view-test" class="view" hidden>
|
|
<button class="back-btn" data-back="test">← Cancel</button>
|
|
<p id="test-progress" class="progress-label"></p>
|
|
<div class="progress-track"><div id="test-bar" class="progress-fill test-fill"></div></div>
|
|
|
|
<div id="test-card" class="word-card">
|
|
<p id="test-listening" class="test-listening-state">🔊 Listen carefully…</p>
|
|
<div id="test-form-row" hidden>
|
|
<button id="btn-test-speak" class="speak-btn speak-btn-prominent">🔊 Hear it again</button>
|
|
<p class="prompt">Now spell the word:</p>
|
|
<form id="test-form" autocomplete="off">
|
|
<input id="test-input" class="spell-input" type="text" autocomplete="off"
|
|
autocapitalize="off" autocorrect="off" spellcheck="false" aria-label="Spell the word">
|
|
<button type="submit" class="check-btn">Next →</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="test-done" class="done-card" hidden></div>
|
|
</section>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|