Create a single-page Instructor Dashboard in HTML, CSS (Tailwind preferred), and vanilla JavaScript. Requirements: All sections must be in one HTML file, structured as blocks or grid-based layouts. Sections: Dashboard Overview – quick stats for subjects and students. Class Management – list/select classes and subjects. Grade Input – table form for entering/editing student scores. Grade Summary – computed results for the whole class. Predictive Analysis – “what-if” scenarios of grades. Reports/Export – download options (CSV, Excel, PDF). Each section must be a <section> block with a unique id. Use a sidebar or top navbar with buttons/links that toggle the visibility of sections (display: none / block). Default visible section = Dashboard Overview. Use Tailwind CSS for styling (grid, cards, spacing, colors, shadows). Keep the structure modular and organized, so future backend integration is easy. Use placeholder/sample data (fake student names, subjects, scores). No external frameworks (React/Vue) — just pure HTML, Tailwind, and JS.

Build a single-page Instructor Dashboard in HTML, Tailwind CSS, and vanilla JavaScript (no frameworks). Requirements: One HTML file only, structured as <section> blocks and toggle-able via sidebar/top nav. Sections: Dashboard Overview – summary of classes and grading schemes in use. Class/Subject Management – list of classes/sections/subjects. Each class/section has a dropdown to select a grading template (saved grading bases). Grading Base Manager (Customizable Points System) – professor can: Add/remove/edit categories (quizzes, exams, projects, recitations, etc.). Define how many assessments per category. Set custom total items (e.g., Quiz 1 = 25 points, Exam 2 = 100 points). Save the configuration as a reusable template (e.g., “Default Math Scheme”). Grade Input – dynamic table based on the chosen grading base for the selected class. Professor inputs student scores. Grade Summary – computed totals, averages, and weighted grades. Predictive Analysis – scenario calculator (“what-if I score X on Exam 2?”). Reports/Export – export results to CSV, Excel, or PDF. UI Behavior: Sidebar/nav buttons toggle which section is visible (display: none / block). Saved grading bases are stored in JavaScript arrays/objects and can be loaded via dropdown when managing classes. When a template is selected for a class, the Grade Input and Grade Summary sections auto-generate according to that template. Professors can still tweak the template per class without overwriting the global template. Data Handling: Use JavaScript objects to store grading templates. Example: gradingBases = { "Default Math Scheme": { quizzes: [{ name: "Quiz 1", total: 25 }, { name: "Quiz 2", total: 25 }], exams: [{ name: "Midterm", total: 100 }, { name: "Final", total: 100 }], projects: [{ name: "Project", total: 50 }] } } Classes/subjects reference a chosen grading base. Grade Input auto-updates summaries when scores are entered. Sample Data: 2–3 saved grading bases (Math, CS, Liberal Arts). 2–3 classes with students (10 fake students each). Default scores to showcase auto-calculations. Style: Tailwind CSS cards, grids, soft shadows, clean dashboard UI. Keep modular and expandable for backend integration later.