<div class="app">
<aside class="sidebar">
<div class="brand"><span class="brand-icon">✧</span><span>TeachSpark<small>YOUR MAGICAL CLASSROOM</small></span></div>
<button class="nav active" data-view="dashboard">⌂ Dashboard</button>
<button class="nav" data-view="library">▤ Reading Library</button>
<button class="nav" data-view="subjects">✧ All Subjects</button>
<button class="nav" data-view="pets">♡ Flying Pets</button>
<button class="nav" data-view="collection">◇ My Collection</button>
<button class="nav" data-view="shop">✿ Magic Shop</button>
<div class="sidebar-note"><span class="tiny-star">✦</span><p>Every little step makes you shine!</p></div>
</aside>
<main class="main">
<header class="topbar">
<div><span class="eyebrow">YOUR MAGICAL CLASSROOM</span><h1 id="page-title">Welcome, Little Star!</h1></div>
<div class="points"><span>✧</span><div><strong id="points">250</strong><small>SPARK POINTS</small></div></div>
</header>
<section class="view active" id="dashboard">
<div class="hero">
<div class="hero-copy">
<span class="eyebrow">YOUR NEXT ADVENTURE AWAITS</span>
<h2>Learn something<br>magical today!</h2>
<p>Read stories, explore new subjects, and earn Spark Points as you learn.</p>
<button class="primary" data-go="library">Explore the library →</button>
</div>
<div class="hero-art" aria-label="A magical floating star creature">
<div class="orbit orbit-one"></div><div class="orbit orbit-two"></div>
<div class="star-creature"><span class="eye"></span><span class="eye"></span><span class="smile"></span></div>
<i class="spark s1">✦</i><i class="spark s2">✧</i><i class="spark s3">✦</i>
</div>
</div>
<div class="section-heading"><div><span class="eyebrow">PICK YOUR PATH</span><h2>Your learning space</h2></div></div>
<div class="feature-grid">
<button class="feature" data-go="library"><span class="feature-icon book-icon">▤</span><strong>Reading Library</strong><small>Open a story and read first.</small></button>
<button class="feature" data-go="subjects"><span class="feature-icon science-icon">✧</span><strong>All Subjects</strong><small>Practice skills and discover.</small></button>
<button class="feature" data-go="pets"><span class="feature-icon pet-icon">♡</span><strong>Flying Pets</strong><small>Meet your magical companions.</small></button>
</div>
<div class="notice"><span>✦</span><div><strong>Ready for your next adventure?</strong><p>Choose a book, read at your own pace, and answer questions when you're ready.</p></div></div>
</section>
<section class="view" id="library">
<div class="section-heading"><div><span class="eyebrow">STORIES FOR CURIOUS MINDS</span><h2>Reading Library</h2><p>Choose a book. Read the whole story before you begin the questions.</p></div></div>
<div class="book-grid" id="book-grid"></div>
</section>
<section class="view" id="reader">
<button class="back-button" id="back-library">← Back to library</button>
<article class="reading-card">
<div class="reading-cover" id="reading-cover"><span>✧</span></div>
<span class="eyebrow" id="book-level">READING ADVENTURE</span>
<h2 id="book-title">Book title</h2>
<p class="book-byline">A TeachSpark original story</p>
<div class="story-text" id="story-text"></div>
<div class="reading-footer">
<span id="reading-progress">Take your time. There's no rush!</span>
<button class="primary" id="start-questions">I'm ready for the questions →</button>
</div>
</article>
</section>
<section class="view" id="quiz">
<button class="back-button" id="back-reader">← Back to the book</button>
<div class="quiz-card">
<span class="eyebrow" id="quiz-label">CHECK YOUR UNDERSTANDING</span>
<h2 id="question-text">Question goes here</h2>
<div id="answer-options" class="answer-options"></div>
<p id="answer-feedback" aria-live="polite"></p>
<button class="primary" id="next-question" disabled>Check answer</button>
</div>
</section>
<section class="view" id="subjects">
<div class="section-heading"><div><span class="eyebrow">GROW YOUR KNOWLEDGE</span><h2>All Subjects</h2><p>Pick a subject to start exploring.</p></div></div>
<div class="feature-grid">
<button class="feature" data-subject="Math"><span class="feature-icon">＋</span><strong>Math</strong><small>Numbers, patterns, and problem solving</small></button>
<button class="feature" data-subject="Science"><span class="feature-icon">✧</span><strong>Science</strong><small>Explore nature and how things work</small></button>
<button class="feature" data-subject="Social Studies"><span class="feature-icon">⌖</span><strong>Social Studies</strong><small>People, places, and history</small></button>
<button class="feature" data-go="library"><span class="feature-icon">▤</span><strong>Reading</strong><small>Stories and comprehension</small></button>
</div>
<div class="notice"><span>✦</span><div><strong id="subject-message">Choose what you'd like to learn!</strong><p id="subject-detail">More practice activities can be added to each subject.</p></div></div>
</section>
<section class="view" id="pets">
<div class="section-heading"><div><span class="eyebrow">YOUR MAGICAL FRIENDS</span><h2>Flying Pets</h2><p>Your little companions love to flutter around your learning space.</p></div></div>
<div class="pet-garden">
<div class="flying-pet butterfly"><span class="wing left-wing"></span><span class="pet-body"></span><span class="wing right-wing"></span></div>
<div class="flying-pet cloud-pet"><span class="pet-face">•‿•</span></div>
<div class="flying-pet moon-pet">☾</div>
<div class="garden-message"><h3>A little magic follows you!</h3><p>Visit the Magic Shop to collect more magical friends and treasures.</p><button class="primary" data-go="shop">Visit the Magic Shop →</button></div>
</div>
</section>
<section class="view" id="collection">
<div class="section-heading"><div><span class="eyebrow">YOUR TREASURE SHELF</span><h2>My Collection</h2><p>Everything you have purchased with Spark Points.</p></div></div>
<div class="collection-grid" id="collection-grid"></div>
</section>
<section class="view" id="shop">
<div class="section-heading"><div><span class="eyebrow">SPARKLE AND DISCOVER</span><h2>Magic Shop</h2><p>Spend your Spark Points on magical treasures.</p></div></div>
<div class="shop-grid" id="shop-grid"></div>
</section>
<div id="toast" role="status" aria-live="polite"></div>
</main>
</div>