Educate

HTML Education File Requirements

Each education HTML file must be a self-contained, single-file interactive document (all CSS and JS inline, no external dependencies). Use this structure:

Header

• File name and one-line summary of what it does and why it exists
• A "Prerequisites" callout linking to other education files the reader should understand first

Source Code Display

• Show the FULL source code of the file with syntax highlighting (use a <pre><code> block with inline CSS for Kotlin syntax coloring)
• Line numbers on the left side
• Clickable annotations: specific lines/blocks should be highlighted and clickable, expanding an explanation panel below or beside the code

Concept Sections (collapsible)

For each non-trivial concept, pattern, or function in the file, create a collapsible <details><summary> section containing:

• What it is — name the pattern/API/syntax
• Why it's here — what problem does it solve in this specific context
• How it works — explain the mechanics. Use analogies to C/embedded concepts where helpful
• What breaks if you change it — consequences of removing or modifying this code
• Code example — a minimal standalone example if the concept is reusable

"Alien Syntax" Quick Reference

A sticky/floating reference table at the top-right (or toggleable sidebar) listing every piece of Kotlin/Android/Compose syntax in the file that would look unfamiliar to a C developer, with one-line explanations.

Connections

• Visual or listed connections to other files: what calls this, what this depends on
• Links to the corresponding education HTML files for connected files

Interactive Features

• Dark theme by default (matches the app's design philosophy)
• Collapsible sections so the reader can drill into what they need
• Copy buttons on code blocks
• Smooth scroll to sections when clicking internal links
• Search/filter for concept sections if there are more than 5

Style Guide

• Dark background (#1a1a2e or similar dark blue-gray), light text
• Syntax highlighting colors: keywords in purple/blue, strings in green, comments in gray, types in teal
• Clean, modern, readable — generous spacing, max-width content area
• Mobile-friendly (the dev might read on a phone)
• Use a monospace font for code (system monospace stack)
• Accent color for interactive elements (highlights, buttons) — use a weather-appropriate blue/teal

education/INDEX.html

• Dark themed landing page
• Cards/grid layout linking to every education file
• Organized by directory
• Each card shows: file name, one-line description, list of key concepts covered
• A "Start Here" section pointing to kotlin-intro.html and MainActivity.html
• Search/filter functionality

Quality Bar

• Every education file should be something the developer can open in a browser and spend 15 minutes learning from
• Teach the why not just the what
• Cross-reference liberally — link to other education files when a concept was explained there first
• Don't repeat the Kotlin intro basics — link to kotlin-intro.html instead