<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TeachSpark ✨ Learn it. Share it. Shine.</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sky-decor" aria-hidden="true">
<span class="sky-star s1">✦</span><span class="sky-star s2">✧</span>
<span class="sky-star s3">✦</span><span class="sky-star s4">✧</span>
<span class="sky-star s5">✦</span>
<div class="cloud cloud-a"></div><div class="cloud cloud-b"></div>
</div>
<header class="topbar">
<a href="#" class="brand" data-page="home">
<span class="brand-mark">📖<i>✦</i></span>
<span><strong>TeachSpark</strong><small>Learn it. Share it. Shine.</small></span>
</a>
<div class="top-actions">
<div class="points-pill">⭐ <b id="points">1250</b> <span>Points</span></div>
<button class="round-action" data-page="shop" aria-label="Open shop">🛒</button>
<button class="round-action" data-page="pets" aria-label="My pets">🐾</button>
</div>
</header>
<div class="app-layout">
<aside class="sidebar">
<div class="sidebar-logo">✨<span>YOUR UNIVERSE</span></div>
<button class="nav-link active" data-page="home"><span>⌂</span> Home</button>
<button class="nav-link" data-page="reading"><span>📖</span> Reading</button>
<button class="nav-link" data-page="subjects"><span>🌎</span> Subjects</button>
<button class="nav-link" data-page="quiz"><span>🧠</span> Quizzes</button>
<button class="nav-link" data-page="mini"><span>✨</span> Mini Lessons</button>
<button class="nav-link" data-page="shop"><span>🎁</span> Shop</button>
<button class="nav-link" data-page="pets"><span>🐾</span> My Pets</button>
<button class="nav-link" data-page="progress"><span>🏆</span> Progress</button>
<div class="sidebar-motto">Small steps<br>create<br><strong>big dreams.</strong><br>♡</div>
<div class="sidebar-pet">🧚</div>
</aside>
<main class="main-column">
<section class="hero">
<div class="hero-copy">
<span class="eyebrow hero-eyebrow">✦ YOUR MAGICAL LEARNING ADVENTURE ✦</span>
<h1>Welcome to<br><span>TeachSpark!</span></h1>
<p>Explore every subject. Master every skill.<br>Your future is limitless! ⭐</p>
<button class="hero-button" data-page="subjects">Explore the Universe <span>→</span></button>
</div>
<div class="hero-art" aria-label="Magical flying pet">
<div class="castle">🏰</div>
<div class="hero-orbit orbit-one"></div>
<div class="hero-orbit orbit-two"></div>
<div class="hero-dragon">🐉</div>
<span class="hero-spark hs-one">✦</span>
<span class="hero-spark hs-two">⭐</span>
<span class="hero-spark hs-three">✧</span>
</div>
</section>
<div class="flying-layer" id="flyingPets" aria-label="Your pets flying around"></div>
<section class="quick-grid">
<button class="quick-card" data-page="reading">
<span class="quick-art book-art">📖</span><strong>Reading</strong>
<small>Build your reading skills<br>with fun lessons and practice.</small><span class="card-arrow">›</span>
</button>
<button class="quick-card" data-page="subjects">
<span class="quick-art globe-art">🌎</span><strong>Subjects</strong>
<small>Explore every subject<br>in the universe!</small><span class="card-arrow">›</span>
</button>
<button class="quick-card" data-page="quiz">
<span class="quick-art brain-art">🧠</span><strong>Quizzes</strong>
<small>Test your knowledge<br>and earn points!</small><span class="card-arrow">›</span>
</button>
<button class="quick-card" data-page="mini">
<span class="quick-art cap-art">🎓</span><strong>Mini Lessons</strong>
<small>Create and share<br>short lessons!</small><span class="card-arrow">›</span>
</button>
</section>
<section class="daily-card">
<div class="daily-copy">
<div class="daily-title"><span>⭐</span><div><span class="eyebrow">DAILY CHALLENGE</span><h2>Let's make your brain sparkle!</h2></div></div>
<h3 id="dailyQuestion">What is the main idea of a passage?</h3>
<p>The ocean is home to many amazing creatures. Whales, dolphins, and fish live in different parts of the ocean. Each one plays an important role in the ecosystem.</p>
</div>
<div class="daily-answer-area">
<div id="dailyAnswers"></div>
<p id="dailyFeedback" class="feedback" aria-live="polite"></p>
</div>
</section>
<section class="reading-preview">
<div class="section-heading">
<div><span class="eyebrow">WORDS OPEN WORLDS</span><h2>📚 All Reading Topics <span class="topic-count" id="topicCount">181+</span></h2></div>
<button class="view-all" data-page="reading">View All →</button>
</div>
<div class="topic-grid" id="homeTopics"></div>
</section>
<section class="progress-preview">
<div class="section-heading"><h2>🏆 My Progress</h2><button class="view-all" data-page="progress">View Details →</button></div>
<div class="stats-grid">
<div class="stat-card"><span class="stat-icon gold">⭐</span><div><small>Points</small><strong id="homePoints">1250</strong></div></div>
<div class="stat-card"><span class="stat-icon blue">📚</span><div><small>Skills Explored</small><strong id="homeLessons">0</strong></div></div>
<div class="stat-card"><span class="stat-icon pink">🧠</span><div><small>Quizzes Done</small><strong id="homeQuizzes">0</strong></div></div>
<div class="stat-card"><span class="stat-icon green">✅</span><div><small>Correct Answers</small><strong id="homeCorrect">0</strong></div></div>
</div>
</section>
<section class="teacher-banner">
<span class="teacher-icon">👩🏫</span>
<div><strong>For My Reading Teacher</strong><p>Explore reading skills, quizzes, and mini-lessons.</p></div>
<button class="view-all" data-page="reading">Explore →</button>
</section>
<section class="page" id="page-reading">
<div class="page-heading"><span class="eyebrow">WORDS OPEN WORLDS</span><h1>📚 Reading Universe</h1><p>Discover reading skills, explore examples, and practise what you learn.</p></div>
<div class="filter-row">
<input type="search" id="readingSearch" placeholder="🔎 Search reading topics..." aria-label="Search reading topics">
<select id="readingFilter" aria-label="Filter by reading category"><option value="all">All categories</option></select>
</div>
<div class="topic-grid" id="allReadingTopics"></div>
<div class="detail-panel" id="readingDetail"><span class="big-emoji">📖</span><h2>Choose a topic!</h2><p>Click any reading topic to start exploring.</p></div>
</section>
<section class="page" id="page-subjects">
<div class="page-heading"><span class="eyebrow">THE UNIVERSE IS YOUR CLASSROOM</span><h1>🌎 Explore All Subjects</h1><p>There are so many wonderful things to learn.</p></div>
<input type="search" id="subjectSearch" placeholder="🔎 Search subjects or topics..." aria-label="Search subjects">
<div class="subject-grid" id="subjectGrid"></div>
<div class="detail-panel" id="subjectDetail"><h2>Pick a subject above!</h2><p>Its starter topics will appear here.</p></div>
</section>
<section class="page" id="page-quiz">
<div class="page-heading"><span class="eyebrow">EVERY ANSWER MAKES YOU STRONGER</span><h1>🧠 Spark Quizzes</h1><p>Choose a reading skill and earn points by practising.</p></div>
<div class="detail-panel quiz-panel">
<label for="quizTopic">Choose a topic</label><select id="quizTopic"></select>
<div id="quizArea"><span class="big-emoji">🌟</span><h2>Ready to shine?</h2><p>Answer questions to earn 10 Spark Points for correct answers.</p></div>
<button class="main-button" id="startQuiz">Start Quiz ✨</button>
</div>
</section>
<section class="page" id="page-mini">
<div class="page-heading"><span class="eyebrow">SHARE WHAT YOU KNOW</span><h1>✨ Mini Lesson Studio</h1><p>Create a tiny lesson to teach someone something new.</p></div>
<div class="detail-panel">
<label for="miniTitle">Lesson title</label><input id="miniTitle" maxlength="80" placeholder="Example: The Magic of Main Ideas">
<label for="miniSubject">Subject</label><input id="miniSubject" maxlength="50" placeholder="Example: Reading">
<label for="miniBody">Your lesson</label><textarea id="miniBody" rows="5" placeholder="Explain the idea in your own words..."></textarea>
<button class="main-button" id="saveMiniLesson">Save My Lesson ✨</button>
<p id="miniMessage" class="feedback" aria-live="polite"></p>
<div id="miniLessonList"></div>
</div>
</section>
<section class="page" id="page-shop">
<div class="page-heading"><span class="eyebrow">MAGICAL TREASURES</span><h1>🛍️ Spark Shop</h1><p>Spend pretend points on pets and special items.</p></div>
<div class="shop-page-balance">⭐ Your balance: <strong id="shopBalance">1250</strong> Spark Points</div>
<div class="shop-tabs">
<button class="shop-tab active" data-filter="all">Everything</button>
<button class="shop-tab" data-filter="pet">🐲 Pets</button>
<button class="shop-tab" data-filter="accessory">🪽 Accessories</button>
<button class="shop-tab" data-filter="background">🌈 Backgrounds</button>
</div>
<div id="shopGrid" class="shop-grid"></div>
<p class="fine-print">✨ These are pretend points and virtual items. There are no real-money purchases.</p>
</section>
<section class="page" id="page-pets">
<div class="page-heading"><span class="eyebrow">YOUR MAGICAL FRIENDS</span><h1>🐾 My Flying Pets</h1><p>Choose a pet and give it a special name.</p></div>
<div class="pet-grid" id="petGrid"></div>
<div class="detail-panel">
<h2>💖 Name your active pet</h2><p id="activePetInfo">Your friend is waiting for a name.</p>
<div class="rename-row"><input id="petNameInput" maxlength="20" placeholder="Enter a pet name"><button class="main-button" id="renamePet">Save Name</button></div>
</div>
</section>
<section class="page" id="page-progress">
<div class="page-heading"><span class="eyebrow">LOOK HOW FAR YOU'VE COME</span><h1>🏆 My Progress</h1><p>Every lesson is a little victory.</p></div>
<div class="stats-grid big-stats">
<div class="stat-card"><span class="stat-icon gold">⭐</span><div><small>Spark Points</small><strong id="progressPoints">1250</strong></div></div>
<div class="stat-card"><span class="stat-icon blue">📚</span><div><small>Skills Explored</small><strong id="progressLessons">0</strong></div></div>
<div class="stat-card"><span class="stat-icon pink">🧠</span><div><small>Quizzes Taken</small><strong id="progressQuizzes">0</strong></div></div>
<div class="stat-card"><span class="stat-icon green">✅</span><div><small>Correct Answers</small><strong id="progressCorrect">0</strong></div></div>
</div>
<div class="detail-panel"><h2>🎁 My Treasure Collection</h2><div id="collection"></div><button class="soft-button" data-page="shop">Visit the Shop →</button></div>
</section>
</main>
<aside class="right-rail">
<section class="rail-panel shop-rail">
<div class="rail-title"><h2>✨ Spark Shop</h2><button data-page="shop">View All</button></div>
<div class="rail-balance"><span>⭐</span><strong id="railPoints">1250 Points</strong><button data-page="shop">Shop Now</button></div>
<div class="featured-pet">
<div class="featured-art" id="featuredPetArt">🐉</div>
<div class="featured-info"><strong id="featuredPetName">Zephyr</strong><small>Flying Dragon</small><span>⭐ 800</span><button data-page="shop">Explore</button></div>
</div>
<div class="rail-title subrail-title"><h3>🐾 My Pets</h3><button data-page="pets">View All</button></div>
<div class="mini-pets" id="miniPets"></div>
<div class="rail-title subrail-title"><h3>🎁 Featured Items</h3><button data-page="shop">View All</button></div>
<div class="featured-items" id="featuredItems"></div>
<button class="shop-promo" data-page="shop"><span class="promo-pet">🧚</span><span><strong>Earn points, get cool items, and let your pets fly!</strong><small>Visit the Shop →</small></span></button>
</section>
<section class="rail-panel teacher-rail">
<div class="teacher-icon">📝</div><div><strong>For My Reading Teacher</strong><p>Explore lessons, quizzes, and mini-lessons.</p><button data-page="reading">Explore resources →</button></div>
</section>
</aside>
</div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<footer>TeachSpark <span>✦</span> Learn it. Share it. Shine. <span>✦</span></footer>
<script src="script.js"></script>
</body>
</html>