<!doctype html><!DOCTYPE html>
<html>
<head>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello, world</title>
</head>
<body>
<main>
<h1>Hello, world.</h1>
<p>Every good idea starts somewhere.</p>
</main>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LearnBloom — Pastel Student Learning Suite</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Top Navigation Bar -->
<header class="app-header">
<div class="header-container">
<div class="brand">
<div class="brand-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
</div>
<div>
<h1 class="brand-title">LearnBloom</h1>
<p class="brand-sub">Study Buddy • Quiz Arena • Speaking Coach</p>
</div>
</div>
<!-- Navigation Tabs -->
<nav class="nav-tabs" role="tablist">
<button class="nav-btn active" data-tab="dashboard-view" role="tab" aria-selected="true">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
Overview
</button>
<button class="nav-btn" data-tab="study-buddy-view" role="tab" aria-selected="false">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
Study Buddy
</button>
<button class="nav-btn" data-tab="quiz-arena-view" role="tab" aria-selected="false">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
Quiz Arena
</button>
<button class="nav-btn" data-tab="speech-coach-view" role="tab" aria-selected="false">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg>
Speaking Coach
</button>
</nav>
<!-- Quick Action: Saved Notes Drawer Toggle -->
<button id="toggle-notes-btn" class="pill-btn butter-pill">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
<span>My Notes (<span id="header-notes-count">0</span>)</span>
</button>
</div>
</header>
<!-- Main Container -->
<main class="main-content">
<!-- ================= VIEW 1: DASHBOARD OVERVIEW ================= -->
<section id="dashboard-view" class="view-panel active">
<div class="welcome-banner">
<div>
<h2>Welcome to LearnBloom 🌸</h2>
<p>Your calm, pastel companion for conceptual learning, active quiz recall, and confident public speaking.</p>
</div>
<div class="banner-badge">100% Free & Offline Ready</div>
</div>
<!-- Quick Stats Cards -->
<div class="stats-grid">
<div class="stat-card lavender-card">
<span class="stat-label">Saved Study Notes</span>
<h3 id="stat-notes" class="stat-val">0</h3>
<p class="stat-desc">Concepts organized</p>
</div>
<div class="stat-card sage-card">
<span class="stat-label">Quizzes Completed</span>
<h3 id="stat-quizzes" class="stat-val">0</h3>
<p class="stat-desc" id="stat-avg-score">Avg Score: --%</p>
</div>
<div class="stat-card peach-card">
<span class="stat-label">Speeches Practiced</span>
<h3 id="stat-speeches" class="stat-val">0</h3>
<p class="stat-desc" id="stat-speech-words">0 total words</p>
</div>
<div class="stat-card butter-card">
<span class="stat-label">Confidence Streak</span>
<h3 id="stat-streak" class="stat-val">1 Day</h3>
<p class="stat-desc">Keep blooming daily</p>
</div>
</div>
<!-- Quick Hub Links -->
<div class="dashboard-hub">
<div class="hub-box">
<div class="hub-header">
<h4>Ready to Learn?</h4>
<span class="tag lavender-tag">Study Buddy</span>
</div>
<p>Explore built-in bite-sized lessons with clear explanations, concrete analogies, and instant mini-tests.</p>
<button class="action-btn lavender-pill switch-tab" data-target="study-buddy-view">Go to Lessons →</button>
</div>
<div class="hub-box">
<div class="hub-header">
<h4>Test Your Knowledge</h4>
<span class="tag sage-tag">Quiz Arena</span>
</div>
<p>Take pre-made topic tests or create your own custom 4-option quizzes with personalized explanations.</p>
<button class="action-btn sage-pill switch-tab" data-target="quiz-arena-view">Launch Quiz Arena →</button>
</div>
<div class="hub-box">
<div class="hub-header">
<h4>Find Your Voice</h4>
<span class="tag peach-tag">Speaking Coach</span>
</div>
<p>Draft speeches, monitor speaking pace, run the audio countdown timer, and track body language readiness.</p>
<button class="action-btn peach-pill switch-tab" data-target="speech-coach-view">Start Practicing →</button>
</div>
</div>
</section>
<!-- ================= VIEW 2: STUDY BUDDY ================= -->
<section id="study-buddy-view" class="view-panel">
<div class="section-header">
<div>
<h2>Smart Study Buddy</h2>
<p class="section-subtitle">Deep dive into concepts, grasp real-world analogies, and save key takeaways instantly.</p>
</div>
<!-- Topic Selector Dropdown -->
<div class="topic-picker-container">
<label for="lesson-select">Choose Topic:</label>
<select id="lesson-select" class="custom-select"></select>
</div>
</div>
<!-- Study Lesson Display Area -->
<div class="lesson-layout">
<article class="lesson-main-card">
<div class="lesson-meta-bar">
<span id="lesson-badge" class="tag lavender-tag">Biology</span>
<span id="lesson-read-time" class="read-estimate">⏱ 4 min read</span>
</div>
<h2 id="lesson-title" class="lesson-title">Loading Lesson...</h2>
<!-- Explanation Section -->
<div class="lesson-section">
<h4 class="section-mini-heading">
<span class="icon-circle lavender-circle">💡</span>
Concept Explanation
</h4>
<div id="lesson-explanation" class="rich-text-content"></div>
</div>
<!-- Real World Example Section -->
<div class="lesson-section peach-callout">
<h4 class="section-mini-heading">
<span class="icon-circle peach-circle">🌍</span>
Real-World Intuitive Example
</h4>
<p id="lesson-example"></p>
</div>
<!-- Quick Summary Takeaway -->
<div class="lesson-section butter-callout">
<h4 class="section-mini-heading">
<span class="icon-circle butter-circle">📝</span>
Quick Summary
</h4>
<ul id="lesson-summary" class="summary-list"></ul>
</div>
<!-- Interactive Lesson Practice Checkpoint -->
<div class="lesson-section sage-callout">
<h4 class="section-mini-heading">
<span class="icon-circle sage-circle">🎯</span>
Quick Practice Question
</h4>
<p id="practice-question" class="practice-q-text"></p>
<div id="practice-options" class="practice-options-grid"></div>
<div id="practice-feedback" class="practice-feedback-box hidden"></div>
</div>
<!-- Lesson Action Footer -->
<div class="lesson-actions-bar">
<button id="save-concept-note-btn" class="primary-btn sage-pill">
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
Save Key Summary to My Notes
</button>
<button id="custom-note-prompt-btn" class="outline-btn lavender-pill">
+ Write Custom Note for This Lesson
</button>
</div>
</article>
</div>
</section>
<!-- ================= VIEW 3: QUIZ ARENA ================= -->
<section id="quiz-arena-view" class="view-panel">
<div class="section-header">
<div>
<h2>Quiz Creator & Arena</h2>
<p class="section-subtitle">Challenge yourself with built-in curriculum banks or construct custom 4-option quizzes.</p>
</div>
<div class="quiz-nav-actions">
<button id="btn-show-quiz-list" class="action-btn butter-pill">Browse Quizzes</button>
<button id="btn-show-quiz-builder" class="action-btn lavender-pill">+ Create New Quiz</button>
<button id="btn-show-quiz-history" class="action-btn sage-pill">View Score History</button>
</div>
</div>
<!-- Subview A: Quiz Catalog -->
<div id="quiz-catalog-section" class="quiz-subview">
<div class="catalog-grid" id="quizzes-container">
<!-- Dynamically populated quiz cards -->
</div>
</div>
<!-- Subview B: Interactive Quiz Runner -->
<div id="quiz-runner-section" class="quiz-subview hidden">
<div class="runner-card">
<div class="runner-header">
<div>
<span id="runner-badge" class="tag lavender-tag">Science</span>
<h3 id="runner-quiz-title" class="runner-title">General Science</h3>
</div>
<div class="runner-progress-wrap">
<span id="runner-progress-label">Question 1 of 5</span>
<div class="progress-bar-bg">
<div id="runner-progress-fill" class="progress-bar-fill" style="width: 20%;"></div>
</div>
</div>
</div>
<div class="runner-body">
<h4 id="runner-question-text" class="question-text">Question goes here...</h4>
<div id="runner-options-grid" class="quiz-options-container">
<!-- 4 Options rendered here -->
</div>
</div>
<div id="runner-feedback" class="runner-feedback-msg hidden"></div>
<div class="runner-footer">
<button id="runner-quit-btn" class="danger-btn">Quit Quiz</button>
<button id="runner-next-btn" class="primary-btn sage-pill" disabled>Next Question →</button>
</div>
</div>
</div>
<!-- Subview C: Quiz Results & Review Screen -->
<div id="quiz-results-section" class="quiz-subview hidden">
<div class="results-card">
<div class="results-score-badge">
<span id="results-percentage">80%</span>
<span id="results-score-fraction">4 of 5 Correct</span>
</div>
<h3 id="results-verdict">Great Job! 🌟</h3>
<p id="results-feedback-message">You have a strong understanding of these core concepts.</p>
<div class="results-actions">
<button id="results-retry-btn" class="primary-btn lavender-pill">🔄 Retry This Quiz</button>
<button id="results-back-btn" class="outline-btn sage-pill">Back to All Quizzes</button>
</div>
<hr class="soft-divider" />
<h4>Detailed Question Review & Explanations</h4>
<div id="results-review-list" class="review-list"></div>
</div>
</div>
<!-- Subview D: Quiz Creator Form -->
<div id="quiz-builder-section" class="quiz-subview hidden">
<div class="builder-card">
<h3>Create a Custom Quiz</h3>
<p class="builder-subtitle">Design your personalized quiz. Each question includes 4 choices and an explanation for accurate review.</p>
<form id="create-quiz-form" class="custom-form">
<div class="form-row-2">
<div class="form-group">
<label for="new-quiz-title">Quiz Title *</label>
<input type="text" id="new-quiz-title" placeholder="e.g. World Capitals or Python Basics" required />
</div>
<div class="form-group">
<label for="new-quiz-category">Subject Category</label>
<input type="text" id="new-quiz-category" placeholder="e.g. History, Math, Tech" value="General" required />
</div>
</div>
<hr class="soft-divider" />
<!-- Questions Form Container -->
<div id="custom-questions-wrap">
<!-- Render dynamic question blocks here -->
</div>
<div class="builder-actions-row">
<button type="button" id="add-question-block-btn" class="outline-btn butter-pill">
+ Add Another Question
</button>
<div class="right-btns">
<button type="button" id="cancel-builder-btn" class="outline-btn">Cancel</button>
<button type="submit" class="primary-btn sage-pill">Save & Publish Quiz</button>
</div>
</div>
</form>
</div>
</div>
<!-- Subview E: Quiz History Log -->
<div id="quiz-history-section" class="quiz-subview hidden">
<div class="history-card">
<div class="history-header">
<h3>Your Quiz Attempt History</h3>
<button id="clear-quiz-history-btn" class="danger-btn">Clear History</button>
</div>
<div id="quiz-history-list" class="history-list">
<!-- Dynamically populated from localStorage -->
</div>
</div>
</div>
</section>
<!-- ================= VIEW 4: PUBLIC SPEAKING COACH ================= -->
<section id="speech-coach-view" class="view-panel">
<div class="section-header">
<div>
<h2>Public Speaking Coach</h2>
<p class="section-subtitle">Draft your presentation, monitor speech pace, run the audio countdown, and complete your pre-speech checklist.</p>
</div>
<button id="generate-prompt-btn" class="pill-btn peach-pill">
✨ Random Speech Prompt
</button>
</div>
<!-- Speech Prompt Notice (when generated) -->
<div id="speech-prompt-banner" class="prompt-alert hidden">
<strong>Suggested Topic:</strong>
<span id="speech-prompt-text"></span>
<button id="dismiss-prompt-btn" class="close-tiny">×</button>
</div>
<div class="speech-workbench-grid">
<!-- Left Column: Speech Drafter & Metrics -->
<div class="speech-left-col">
<div class="card workbench-card">
<div class="card-title-row">
<h4>Speech Draft & Pacing</h4>
<button id="save-speech-draft-btn" class="action-btn sage-pill">💾 Save Speech</button>
</div>
<input type="text" id="speech-title-input" class="speech-title-box" placeholder="Speech Title (e.g., The Future of Renewable Energy)" />
<textarea id="speech-body-input" class="speech-textarea" placeholder="Start typing your speech here... Practice pacing, pauses, and rhetorical hooks. Watch the word and time counters update in real-time!"></textarea>
<!-- Realtime Metrics Bar -->
<div class="metrics-bar">
<div class="metric-item">
<span class="m-val" id="metric-word-count">0</span>
<span class="m-lbl">Words</span>
</div>
<div class="metric-item">
<span class="m-val" id="metric-char-count">0</span>
<span class="m-lbl">Characters</span>
</div>
<div class="metric-item highlight-metric">
<span class="m-val" id="metric-speaking-time">0:00</span>
<span class="m-lbl">Estimated Duration (@ 130 wpm)</span>
</div>
</div>
</div>
<!-- Post-Speech Reflection Log Form -->
<div class="card reflection-card">
<h4>Post-Practice Reflection Journal</h4>
<p class="small-text">Reflect right after rehearsing to lock in confidence gains.</p>
<form id="speech-reflection-form">
<div class="form-row-2">
<div class="form-group">
<label for="reflect-rating">How confident did you feel? (1 - 5):</label>
<select id="reflect-rating" class="custom-select">
<option value="5">⭐⭐⭐⭐⭐ 5 - Extremely Confident</option>
<option value="4">⭐⭐⭐⭐ 4 - Good flow, minor pauses</option>
<optgr. aria-activedescendant