You are an expert educational software engineer, UI/UX desig...

Prompt

You are an expert educational software engineer, UI/UX designer, science educator, and JavaScript animator. Your task is to build a COMPLETE interactive virtual laboratory for the CBSE Class 9 chapter: "Exploring Mixtures and Their Separation" Generate ONE COMPLETE HTML FILE containing everything. Requirements: • HTML + CSS + Vanilla JavaScript only. • No external libraries. • No CDNs. • No images. • No SVG files from outside. • No external fonts. • Everything must work completely offline. • Everything should be drawn using HTML5 Canvas, SVG created inside the HTML, CSS and JavaScript. • Produce production-quality code. • Comment the code properly. ================================================== GENERAL DESIGN ================================================== Create a beautiful modern science laboratory. White clean educational theme. Responsive. Looks like an actual virtual chemistry lab. Smooth animations (60 FPS). Professional educational design. Beautiful buttons. Rounded cards. Transitions. Glassmorphism where appropriate. Everything should feel premium. ================================================== HOME SCREEN ================================================== Create laboratory benches. Each experiment appears as an experiment card. Experiments: 1. Filtration 2. Evaporation 3. Crystallization 4. Distillation 5. Separating Funnel 6. Sublimation 7. Paper Chromatography Clicking opens that experiment. Provide Back button. ================================================== FOR EVERY EXPERIMENT ================================================== Every experiment must include: • Introduction • Aim • Apparatus • Principle • Procedure • Interactive Simulation • Particle View • Observation • Explanation • Conclusion • Real-life Applications • Common Mistakes • Quiz ================================================== INTERACTION ================================================== Students should actually perform experiments. Examples: Filtration Students drag • Funnel • Filter paper • Beaker Then pour mixture. Animate water flowing. Animate sand remaining. Show residue. Show filtrate. Particle view must show: Large sand particles blocked. Small water molecules passing. -------------------------------------------------- Evaporation Students control burner. Slider: Low flame Medium flame High flame Animate: Water molecules escaping. Salt remaining. Steam. Particle view. -------------------------------------------------- Crystallization Students heat. Prepare saturated solution. Cool slowly. Control cooling speed. Observe crystal growth. Fast cooling produces small crystals. Slow cooling produces large crystals. -------------------------------------------------- Distillation Interactive apparatus. Students assemble apparatus. Round-bottom flask. Thermometer. Condenser. Receiver flask. If assembled incorrectly, experiment fails. Animate: Boiling. Steam. Condensation. Collection of distilled water. Particle view. -------------------------------------------------- Separating Funnel Oil + Water. Students shake. Wait. Layers reform. Open stopcock. Drain lower layer. If stopcock remains open too long, upper layer also drains. -------------------------------------------------- Sublimation Mixture: Camphor + Sand. Heat. Camphor becomes vapour. Deposits on cool funnel. Sand remains. Particle animation. -------------------------------------------------- Paper Chromatography Students place ink spot. Dip paper. Animate solvent front. Colours separate. Different inks produce different colour bands. ================================================== PARTICLE VIEW ================================================== Every experiment must include a toggle. Normal View Particle View Particle View must animate: Water molecules. Salt ions. Sugar particles. Sand particles. Oil droplets. Ink molecules. Steam molecules. Crystal formation. Everything should move naturally. ================================================== TEACHER MODE ================================================== Teacher Mode ON/OFF. Shows: Scientific explanation. Extra notes. Common misconceptions. Board exam tips. ================================================== STUDENT MODE ================================================== Hide explanations. Students predict: "What happens next?" Reveal answer after prediction. ================================================== QUIZ MODE ================================================== At end of every experiment. 5 interactive MCQs. Instant feedback. Score. Restart. ================================================== MISTAKE MODE ================================================== Allow incorrect actions. Examples: Wrong filter paper. Too much heating. Removing condenser. Wrong stopcock timing. No cooling. Simulation should explain WHY it failed. ================================================== SOUND ================================================== Use JavaScript-generated sounds only. Water. Boiling. Click. Success. Wrong answer. ================================================== ANIMATIONS ================================================== Everything animated. Liquid flow. Steam. Particle motion. Crystal growth. Layer formation. Colour diffusion. Smooth transitions. ================================================== EDUCATIONAL QUALITY ================================================== Target audience: CBSE Class 9. Concepts must be scientifically accurate. Every experiment should help students understand not only WHAT happens but WHY it happens. Avoid rote learning. Focus on conceptual understanding. ================================================== FINAL OUTPUT ================================================== Output ONLY ONE COMPLETE HTML FILE. Do not explain anything. Do not shorten the code. Do not use placeholders. Generate the complete production-ready virtual chemistry laboratory.

A system prompt was added to support web rendering