Krydev32/tkquest-reflowed
0
1<!DOCTYPE html>2<html lang="en" class="h-full" data-theme="light">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>TKQuest</title>7 <!-- Tailwind -->8 <script src="https://cdn.tailwindcss.com"></script>9 <!-- daisyUI -->10 <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />11 <!-- Font -->12 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">13 14 <!-- Add custom color theme -->15 <script>16 tailwind.config = {17 theme: {18 extend: {19 colors: {20 primary: {21 500: '#436bd9', // royal blue22 600: '#3a5fc4',23 },24 secondary: {25 500: '#9ec2f2', // light blue26 600: '#8ab1ea',27 }28 }29 }30 }31 }32 </script>33 34 <style>35 body {36 font-family: 'Inter', sans-serif;37 overflow: hidden; /* Prevent body scroll */38 }39 40 /* Ensure main area takes full viewport height and scrolls */41 #main-app-view main {42 height: 100vh; /* Full viewport height */43 overflow-y: auto; /* Allow main area to scroll independently */44 padding-left: 16rem; /* Initial padding for w-64 sidebar */45 transition: padding-left 0.3s ease-in-out; /* Smooth transition for padding */46 width: 100%; /* Ensure main takes full width relative to its container */47 }48 49 /* Style for collapsed sidebar state - applied to body */50 body.sidebar-collapsed #main-app-view main {51 padding-left: 4rem; /* Padding for collapsed w-16 sidebar */52 }53 54 /* Keep sidebar fixed and full height */55 #main-app-view aside {56 position: fixed;57 top: 0;58 left: 0;59 height: 100vh;60 z-index: 30; /* Ensure sidebar is above main content scrollbar but below modals */61 }62 63 /* Custom Theme Overrides */64 :root[data-theme="light"] {65 --p: #436bd9; /* primary-500 */66 --pc: #ffffff; /* text on primary buttons */67 --s: #9ec2f2; /* secondary-500 */68 --sc: #1d264e; /* text on secondary buttons */69 --a: #70a1ea; /* accent between primary and secondary */70 --ac: #1d264e; /* text on accent buttons */71 --n: #293b7f; /* royal-blue-900 */72 --nc: #ffffff;73 --b1: #ffffff; /* base-100 (white) */74 --b2: #f1f5fd; /* royal-blue-50 (light bg) */75 --b3: #dfeafa; /* royal-blue-100 (lighter bg) */76 --bc: #000000; /* base-content (black text) */77 --in: #70a1ea;78 --su: #4ade80; /* Use DaisyUI success color */79 --wa: #facc15;80 --er: #f43f5e;81 82 /* Custom class for blue text */83 .text-primary-blue {84 color: var(--p);85 }86 }87 88 /* Custom style for active sidebar link */89 #sidebar-menu li.active > a {90 background-color: var(--b2); /* royal-blue-50 */91 color: var(--p); /* royal-blue-600 */92 }93 #sidebar-menu li.active > a svg {94 stroke: var(--p); /* royal-blue-600 */95 }96 97 /* Ensure dropdowns have high z-index */98 .dropdown-content {99 z-index: 50 !important;100 background-color: var(--b1) !important; /* Force white background */101 }102 103 /* Custom class for content cards */104 .content-card {105 background-color: var(--b1);106 border-radius: 0.5rem; /* 8px */107 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);108 transition: all 0.2s ease-in-out;109 }110 111 /* Floating User Info Box */112 #floating-user-info {113 position: fixed;114 top: 1.5rem; /* Adjust as needed */115 right: 1.5rem; /* Adjust as needed */116 z-index: 40; /* Below dropdowns, above most content */117 }118 119 /* Ensure modals scroll internally */120 .modal-box {121 max-height: 85vh;122 overflow-y: auto;123 }124 125 /* --- Custom Progress Bar Styles --- */126 .progress-bar-container {127 width: 100%;128 background-color: var(--b3); /* Light background for the track */129 border-radius: 9999px; /* Fully rounded */130 height: 1rem; /* 16px - slightly thicker */131 overflow: hidden; /* Ensure fill stays inside */132 position: relative; /* For potential future text overlay */133 box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); /* Inner shadow for depth */134 }135 136 .progress-bar-fill {137 background: linear-gradient(to right, #4ade80, #16a34a); /* Adjusted green gradient (using DaisyUI success) */138 height: 100%;139 border-radius: 9999px;140 width: 0%; /* Start at 0 */141 transition: width 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Bouncy animation */142 /* Add subtle stripes for visual interest */143 background-image: linear-gradient(144 45deg,145 rgba(255, 255, 255, .15) 25%,146 transparent 25%,147 transparent 50%,148 rgba(255, 255, 255, .15) 50%,149 rgba(255, 255, 255, .15) 75%,150 transparent 75%,151 transparent152 );153 background-size: 1rem 1rem; /* Stripe size */154 }155 156 /* Style for the temporary Dev button */157 #dev-switch-role-btn {158 /* Positioned relative to the header */159 z-index: 100; /* Ensure it's clickable */160 }161 162 </style>163</head>164<body class="h-full bg-base-300">165 166 <!-- App Container -->167 <div id="app" class="min-h-full">168 169 <!-- 1. Authentication View (Login/Register) -->170 <div id="auth-view" class="hidden min-h-screen flex items-center justify-center p-4">171 <div class="card w-full max-w-md bg-base-100 shadow-xl">172 <div class="card-body">173 <div role="tablist" class="tabs tabs-lifted tabs-lg">174 175 <!-- Login Tab -->176 <input type="radio" name="auth_tabs" role="tab" class="tab" aria-label="Login" checked />177 <div role="tabpanel" class="tab-content bg-base-100 rounded-box p-6">178 <h2 class="text-2xl font-bold mb-6 text-center text-primary-blue">Log In to TKQuest</h2>179 <form id="login-form-element" class="space-y-4">180 <div class="form-control">181 <label class="label"><span class="label-text">Email</span></label>182 <input type="email" id="login-email" required class="input input-bordered w-full">183 </div>184 <div class="form-control">185 <label class="label"><span class="label-text">Password</span></label>186 <input type="password" id="login-password" required class="input input-bordered w-full">187 </div>188 <p id="login-error" class="text-error text-sm hidden"></p>189 <button type="submit" class="btn btn-primary w-full">Log In</button>190 </form>191 </div>192 193 <!-- Register Tab -->194 <input type="radio" name="auth_tabs" role="tab" class="tab" aria-label="Register" />195 <div role="tabpanel" class="tab-content bg-base-100 rounded-box p-6">196 <h2 class="text-2xl font-bold mb-6 text-center text-primary-blue">Create Student Account</h2>197 <form id="register-form-element" class="space-y-4">198 <div class="form-control">199 <label class="label"><span class="label-text">Full Name</span></label>200 <input type="text" id="register-name" required class="input input-bordered w-full">201 </div>202 <div class="form-control">203 <label class="label"><span class="label-text">Email</span></label>204 <input type="email" id="register-email" required class="input input-bordered w-full">205 </div>206 <div class="form-control">207 <label class="label"><span class="label-text">Password (min. 6 characters)</span></label>208 <input type="password" id="register-password" required minlength="6" class="input input-bordered w-full">209 </div>210 211 <input type="hidden" id="register-role" value="student">212 213 <div class="form-control" id="belt-level-field">214 <label class="label"><span class="label-text">Current Belt Level</span></label>215 <select id="register-belt" class="select select-bordered w-full">216 <option value="White" selected>White</option>217 <option value="Yellow">Yellow</option>218 <option value="Blue">Blue</option>219 <option value="Red">Red</option>220 <option value="Brown">Brown</option>221 </select>222 </div>223 <p id="register-error" class="text-error text-sm hidden"></p>224 <button type="submit" class="btn btn-primary w-full">Register</button>225 </form>226 </div>227 228 </div>229 </div>230 </div>231 </div>232 233 <!-- 2. Main App View -->234 <div id="main-app-view" class="hidden h-screen flex fixed inset-0 overflow-hidden">235 236 <!-- Sidebar -->237 <aside id="sidebar" class="bg-base-100 shadow-xl flex flex-col h-full z-10 transition-all duration-300 ease-in-out w-64">238 <div class="p-4 flex items-center justify-between">239 <a id="sidebar-logo" class="btn btn-ghost text-2xl font-bold text-primary-blue whitespace-nowrap overflow-hidden">TKQuest</a>240 <button id="sidebar-toggle-btn" class="btn btn-ghost btn-circle">241 <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg>242 </button>243 </div>244 <ul id="sidebar-menu" class="menu p-4 w-full text-base-content space-y-2 overflow-y-auto flex-grow">245 <!-- Links injected by JS -->246 </ul>247 <div class="mt-auto p-4 border-t border-base-200">248 <div id="user-info" class="items-center gap-2">249 <span id="user-display" class="text-sm font-medium sidebar-link-text block truncate"></span>250 <button id="logout-btn" class="btn btn-error btn-outline btn-sm w-full mt-2">251 <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>252 <span class="sidebar-link-text">Logout</span>253 </button>254 </div>255 </div>256 </aside>257 258 <!-- Floating User Info Box (Student Only) -->259 <div id="floating-user-info" class="hidden card bg-base-100 shadow-lg p-3 text-xs w-48">260 <p><span class="font-semibold">Name:</span> <span id="float-user-name">N/A</span></p>261 <p><span class="font-semibold">Belt:</span> <span id="float-user-belt">N/A</span></p>262 <p><span class="font-semibold">ID:</span> <span id="float-user-number">N/A</span></p>263 </div>264 265 <!-- Main Content Area -->266 <main class="bg-base-200 overflow-y-auto">267 <div class="py-10">268 <header class="sticky top-0 bg-base-200/80 backdrop-blur z-20 pt-2 pb-2 -mt-10">269 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">270 <h1 id="main-header" class="text-3xl font-bold leading-tight text-primary-blue">271 Dashboard272 </h1>273 <!-- Temporary Dev Button -->274 <button id="dev-switch-role-btn" class="btn btn-warning btn-sm hidden">Switch Role (Dev)</button>275 </div>276 </header>277 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8 pb-10">278 279 <!-- Page: Dashboard (Improved) -->280 <div id="dashboard-page" class="app-page hidden">281 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">282 <!-- Quick Stats -->283 <div class="card bg-base-100 shadow-md">284 <div class="card-body">285 <h2 class="card-title text-lg">Quick Stats</h2>286 <div class="space-y-1 text-sm">287 <p><span class="font-medium">Current Belt:</span> <span id="stat-current-belt">Loading...</span></p>288 <p><span class="font-medium">Lessons Completed:</span> <span id="stat-lessons-completed">Loading...</span></p>289 </div>290 </div>291 </div>292 <!-- Progress Overview (Student Only) -->293 <div id="dashboard-progress-overview" class="card bg-base-100 shadow-md hidden">294 <div class="card-body">295 <h2 class="card-title text-lg">Current Belt Progress</h2>296 <div class="progress-bar-container mt-2">297 <div id="dashboard-progress-bar-fill" class="progress-bar-fill"></div>298 </div>299 <p class="text-xs text-center mt-1"><span id="dashboard-progress-text">0%</span> completed</p>300 </div>301 </div>302 <!-- Upcoming Event -->303 <div class="card bg-base-100 shadow-md">304 <div class="card-body">305 <h2 class="card-title text-lg">Next Event</h2>306 <div id="dashboard-next-event" class="text-sm">307 <p class="opacity-60">No upcoming events scheduled.</p>308 </div>309 </div>310 </div>311 </div>312 313 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">314 <!-- Announcements -->315 <div>316 <div class="flex justify-between items-center mb-4">317 <h2 class="text-2xl font-semibold">Announcements</h2>318 <div id="instructor-actions-dashboard">319 <button id="add-announcement-btn" class="btn btn-primary btn-sm">Post Announcement</button>320 </div>321 </div>322 <div class="card bg-base-100 shadow-xl max-h-[50vh] overflow-y-auto">323 <div id="announcements-list" class="card-body space-y-4">324 <div class="announcement">325 <h3 class="font-bold">Welcome to TKQuest!</h3>326 <p class="text-sm">Get started by exploring the curriculum and completing your first lesson.</p>327 <p class="text-xs text-gray-500">Posted on: Today</p>328 </div>329 <div class="announcement">330 <h3 class="font-bold">Belt Testing Dates</h3>331 <p class="text-sm">Next belt testing will be on December 15th. Make sure to complete all requirements.</p>332 <p class="text-xs text-gray-500">Posted on: Nov 20</p>333 </div>334 </div>335 </div>336</div>337 <!-- Notifications/Recent Activity -->338 <div>339 <h2 class="text-2xl font-semibold mb-4">Recent Activity</h2>340 <div class="card bg-base-100 shadow-xl max-h-[50vh] overflow-y-auto">341 <div id="dashboard-notifications" class="card-body space-y-3 text-sm">342 <p class="opacity-60">No recent activity.</p>343 </div>344 </div>345 </div>346 </div>347 </div>348 349 <!-- Page: Curriculum -->350 <div id="lessons-page" class="app-page hidden">351 <div class="flex justify-end gap-2 mb-4" id="instructor-actions-lessons">352 <button id="edit-belt-names-btn" class="btn btn-outline">Edit Section Names</button>353 <button id="add-topic-btn" class="btn btn-secondary">Add Topic</button>354 </div>355 <div class="card bg-base-100 shadow-xl">356 <div class="card-body">357 <div id="lessons-list" class="space-y-6 pt-4">358 <p class="text-base-content opacity-60">No lessons loaded.</p>359 </div>360 </div>361 </div>362 </div>363 364 <!-- Page: My Progress (Student Only) -->365 <div id="my-progress-page" class="app-page hidden space-y-8">366 <!-- Belt Progress Checklist -->367 <div class="card bg-base-100 shadow-xl">368 <div class="card-body">369 <h2 class="card-title text-2xl mb-4">Belt Progress (<span id="checklist-belt-name">Current Belt</span>)</h2>370 <div class="flex justify-end mb-4" id="instructor-actions-checklist">371 <button id="add-checklist-item-btn" class="btn btn-primary btn-sm">Add Checklist Item</button>372 </div>373 <div id="belt-checklist" class="space-y-3 mb-4">374 <p class="opacity-60">Checklist items loading...</p>375 </div>376 <div>377 <label class="label"><span class="label-text font-medium">Progress Bar</span></label>378 <div class="progress-bar-container">379 <div id="preparedness-bar-fill" class="progress-bar-fill" style="width: 0%;"></div>380 </div>381 <p id="preparedness-message" class="text-center text-sm mt-2 font-medium hidden">You are now ready to take the belt advancement examination!</p>382 <p id="instructor-notification-status" class="text-center text-xs mt-1 text-info hidden">Instructor has been notified.</p>383 </div>384 </div>385 </div>386 <!-- History of Completed Lessons -->387 <div class="card bg-base-100 shadow-xl">388 <div class="card-body">389 <h2 class="card-title text-2xl">Completed Lessons History</h2>390 <div id="completed-lessons-history" class="space-y-2 pt-4 max-h-96 overflow-y-auto">391 <p class="opacity-60">No lessons completed yet.</p>392 </div>393 </div>394 </div>395 </div>396 397 <!-- Page: Tasks & Exercises -->398 <div id="tasks-page" class="app-page hidden space-y-8">399 <!-- Quizzes -->400 <div class="card bg-base-100 shadow-xl">401 <div class="card-body">402 <div class="flex justify-between items-center mb-4">403 <h2 class="card-title text-2xl">Quizzes</h2>404 <div id="instructor-actions-quizzes">405 <button id="add-quiz-btn" class="btn btn-primary btn-sm">Add Quiz Link</button>406 </div>407 </div>408 <div id="quiz-list" class="space-y-3">409 <p class="opacity-60">No quizzes assigned.</p>410 </div>411 </div>412 </div>413 <!-- Weekly Tasks -->414 <div class="card bg-base-100 shadow-xl">415 <div class="card-body">416 <div class="flex justify-between items-center mb-4">417 <h2 class="card-title text-2xl">Weekly Tasks (<span id="tasks-belt-name">Your Belt</span>)</h2>418 <div id="instructor-actions-tasks">419 <button id="add-task-btn" class="btn btn-primary btn-sm">Add Weekly Task</button>420 </div>421 </div>422 <div id="weekly-tasks-list" class="space-y-3">423 <p class="opacity-60">No weekly tasks assigned.</p>424 </div>425 </div>426 </div>427 <!-- Challenges -->428 <div class="card bg-base-100 shadow-xl">429 <div class="card-body">430 <div class="flex justify-between items-center mb-4">431 <h2 class="card-title text-2xl">Challenges</h2>432 <div id="instructor-actions-challenges">433 <button id="add-challenge-btn" class="btn btn-primary btn-sm">Add Challenge</button>434 </div>435 </div>436 <div id="challenges-list" class="space-y-3">437 <p class="opacity-60">No challenges available.</p>438 </div>439 </div>440 </div>441 </div>442 443 <!-- Page: Events -->444 <div id="events-page" class="app-page hidden">445 <div class="flex justify-end mb-4" id="instructor-actions-events">446 <button id="add-event-btn" class="btn btn-primary">Create Event</button>447 </div>448 <div class="card bg-base-100 shadow-xl">449 <div class="card-body">450 <h2 class="card-title text-2xl">Upcoming Events</h2>451 <div id="events-list" class="space-y-4 pt-4">452 <p class="opacity-60">No upcoming events.</p>453 </div>454 </div>455 </div>456 </div>457 458 <!-- Page: Manage Users (Instructor only) -->459 <div id="manage-users-page" class="app-page hidden">460 <div class="card bg-base-100 shadow-xl">461 <div class="card-body">462 <h2 class="card-title text-2xl">Manage Students</h2>463 <div id="student-users-list" class="space-y-3 pt-4 max-h-[70vh] overflow-y-auto">464 <p class="text-base-content opacity-60">No students found.</p>465 </div>466 </div>467 </div>468 </div>469 470 <!-- Page: Settings -->471 <div id="settings-page" class="app-page hidden">472 <div class="card bg-base-100 shadow-xl max-w-lg mx-auto">473 <div class="card-body">474 <h2 class="card-title text-2xl">Settings</h2>475 <p class="text-sm text-base-content mb-4">Your User ID: <kbd id="user-id-kbd" class="kbd kbd-sm"></kbd></p>476 477 <div class="divider">Update Profile</div>478 <form id="update-profile-form" class="space-y-4">479 <div class="form-control">480 <label class="label"><span class="label-text">Full Name</span></label>481 <input type="text" id="update-name" required class="input input-bordered w-full">482 </div>483 <button type="submit" class="btn btn-primary">Save Name</button>484 <p id="update-profile-success" class="text-success text-sm hidden">Profile updated!</p>485 </form>486 487 <div class="divider">Change Password</div>488 <form id="update-password-form" class="space-y-4">489 <div class="form-control">490 <label class="label"><span class="label-text">New Password</span></label>491 <input type="password" id="update-password" required minlength="6" class="input input-bordered w-full">492 </div>493 <p class="text-info text-sm">Note: For security, you may be asked to log in again after changing your password.</p>494 <button type="submit" class="btn btn-secondary">Update Password</button>495 <p id="update-password-error" class="text-error text-sm hidden"></p>496 <p id="update-password-success" class="text-success text-sm hidden">Password updated!</p>497 </form>498 </div>499 </div>500 </div>501 502 </div>503 </div>504 </main>505 </div>506 </div>507 508 <!-- Modals -->509 <!-- All modal dialogs remain the same as in original code -->510 <!-- ... -->511 512 <!-- Firebase SDK -->513 <script type="module">514 /* Firebase imports and initialization remain the same */515 /* ... */516 </script>517 <!-- Main Application Script -->518 <script src="script.js"></script>519 <script src="components/navbar.js"></script>520 <script src="components/footer.js"></script>521</body>522</html>