Create a complete, polished, highly interactive Rust learnin...

Prompt

Create a complete, polished, highly interactive Rust learning + interview-preparation experience as EXACTLY ONE standalone `index.html` file. IMPORTANT IMPLEMENTATION RULES - Output ONLY one complete `index.html`. - Everything must be inside that file: - HTML - CSS inside <style> - JavaScript inside <script> - SVG - NO React - NO TypeScript - NO JSX/TSX - NO Tailwind - NO Vite/Webpack/Parcel - NO npm/package.json/build process - The file must work by opening it directly in a modern browser. - CDN libraries are allowed. - Use vanilla JavaScript. - Use GSAP + ScrollTrigger from CDN for major animations and scroll-driven storytelling. - Do not use React-specific Framer Motion. If motion utilities are needed, use browser-compatible vanilla Motion APIs or GSAP. - Do not create separate CSS, JS, SVG, or component files. GOAL Build something that feels like an interactive developer tool/laboratory rather than a normal documentation website. The experience should teach Rust through: 1. Visual explanations 2. Interactive questions 3. Animated diagrams 4. Compiler-style feedback 5. Rust vs JavaScript mental-model comparisons 6. Interview questions 7. Small interactive challenges 8. Scroll-driven storytelling The user should understand not just Rust syntax, but WHY Rust works the way it does. VISUAL STYLE Theme: "Rust Compiler Laboratory" Use a dark developer-tool aesthetic: - deep dark background - terminal/editor-inspired panels - subtle grids - code blocks - glowing accents - monospace typography for code - clean modern UI - restrained glassmorphism - subtle borders - excellent spacing - professional, not gimmicky Use animated micro-interactions everywhere appropriate: - buttons - cards - tabs - code lines - answer selections - progress indicators - hover states - SVG nodes - compiler diagnostics Animations should feel purposeful and fast. HERO Create a dramatic hero section: "THINK LIKE THE BORROW CHECKER." Subtitle: "Learn Rust by understanding ownership, memory, concurrency, and the compiler's mental model." Include: - animated Rust/code visualization - floating ownership/reference nodes - CTA: "Start Learning" - CTA: "Enter Interview Mode" Use GSAP/ScrollTrigger for entrance and scroll effects. LEARNING STRUCTURE Create a long scrollytelling experience with these sections: 1. Rust's Superpower 2. Ownership 3. Move Semantics 4. Copy vs Move 5. Borrowing 6. Mutable Borrowing 7. References 8. Lifetimes 9. Structs 10. Enums 11. Pattern Matching 12. Traits 13. Generics 14. Option<T> 15. Result<T, E> 16. Error Handling 17. Iterators 18. Closures 19. Smart Pointers 20. Rc / Arc 21. Mutex / Interior Mutability 22. Threads 23. Send + Sync 24. Async/Await 25. Zero-Cost Abstractions 26. Rust vs JavaScript Mental Models 27. Interview Arena Each major section should contain: - concise explanation - Rust code example - animated visualization - "What happens?" question - explanation after interaction - interview takeaway OWNERSHIP VISUALIZATION Create an interactive SVG memory visualization. Show: Stack Heap Variable Value Owner Animate a variable moving from one owner to another. Example: let a = String::from("hello"); let b = a; Visually show: a -> String then a becomes invalid b -> String Explain that ownership is transferred rather than duplicated. Add buttons: - Move - Clone - Borrow Each button should animate the corresponding behavior. COPY VS MOVE Create an interactive comparison: let a = 5; let b = a; versus: let a = String::from("hello"); let b = a; Visually show why integers can be copied while String ownership is moved. BORROWING Create a visual ownership graph: Owner ↓ Value Then: Owner ↓ &Value Then: Owner ↓ &mut Value Animate references appearing/disappearing. Demonstrate: fn calculate_length(s: &String) -> usize and: fn change(s: &mut String) Explain immutable vs mutable borrowing and the rule that prevents conflicting mutable/immutable references. LIFETIMES Create an animated SVG timeline. Show: - variable creation - reference creation - reference usage - variable destruction Visually demonstrate that a reference cannot outlive the value it references. Do not overcomplicate lifetime syntax. Focus on the mental model. STRUCTS + ENUMS + MATCH Create interactive cards showing: struct User { name: String, age: u32, } and: enum Message { Quit, Move { x: i32, y: i32 }, Write(String), } Then animate pattern matching: match message { Message::Quit => ... Message::Move { x, y } => ... Message::Write(text) => ... } TRAITS + GENERICS Create a visual "contract" diagram. Trait: Display Types: User Product Order Show each type implementing the same behavior. Then explain generics using: fn largest<T>(list: &[T]) -> T Keep explanations interview-oriented. OPTION + RESULT Create interactive state machines. Option: Some(value) None Result: Ok(value) Err(error) Use animated transitions between states. Compare mentally with JavaScript: null/undefined throw/catch but explicitly explain that Rust's approach is typed and encourages explicit handling. ITERATORS Create an animated pipeline: data ↓ iter() ↓ map() ↓ filter() ↓ collect() Example: let result: Vec<_> = numbers .iter() .map(|x| x * 2) .filter(|x| *x > 5) .collect(); Animate each element moving through the pipeline. SMART POINTERS Create visual explanations for: - Box<T> - Rc<T> - Arc<T> - RefCell<T> - Mutex<T> Show ownership/reference-count relationships visually. CONCURRENCY Create an interactive thread visualization. Show: Thread A Thread B Shared Data Then visualize: Arc Mutex Send Sync Explain why Rust prevents common data races at compile time. ASYNC Create an animated async task scheduler. Show: Task ↓ Future ↓ Poll ↓ Pending ↓ Ready Compare the mental model with JavaScript Promise/async-await, while explaining important Rust differences. RUST VS JAVASCRIPT Create an interactive comparison table. Include: JavaScript → Rust Garbage Collector → Ownership/Borrowing null/undefined → Option<T> throw/catch → Result<T,E> Array.map() → Iterator::map() interface → trait Promise → Future async/await → async/await object → struct union-like values → enum runtime memory safety → compile-time memory safety For every comparison, explain where the analogy breaks. INTERACTIVE COMPILER Create a fake compiler diagnostic system. The user sees Rust code with an intentional error. Example: let s = String::from("hello"); let t = s; println!("{}", s); When clicking "Compile": show an animated compiler error panel. Example visual: error[E0382]: borrow of moved value: `s` Then explain: - what happened - why it happened - how to fix it Possible fixes: - clone - borrow - restructure ownership IMPORTANT: Do NOT pretend that the browser is actually compiling Rust unless you implement a real Rust compiler/backend. This is a simulated compiler experience. BORROW CHECKER GAME Create a mini-game. Give the user several variables/references and ask: "Is this valid Rust?" Examples should test: - move after move - multiple immutable borrows - mutable + immutable borrow - dangling reference - lifetime mismatch - ownership transfer Answers: VALID INVALID After answering, animate the ownership graph and explain the result. INTERVIEW ARENA Create at least 60 Rust interview questions. Categories: - Beginner - Intermediate - Advanced Important topics: - ownership - borrowing - references - lifetimes - move semantics - Copy - Clone - traits - generics - enums - pattern matching - Option - Result - error handling - iterators - closures - smart pointers - Rc - Arc - Mutex - RefCell - Send - Sync - threads - channels - async - Future - pinning - zero-cost abstractions - memory layout - stack vs heap - dynamic dispatch vs static dispatch Question format: { id, concept, difficulty, code, question, options, correctAnswer, explanation, followUp } Question UI should include: - question - code - 4 options - confidence selector - submit - animated correct/incorrect state - explanation - follow-up interview question - next question Allow keyboard shortcuts: 1 / 2 / 3 / 4 = answer Enter = submit N = next R = retry Space = continue ADAPTIVE INTERVIEW MODE Track: - correct answers - incorrect answers - confidence - topic performance - difficulty Use localStorage. If the user repeatedly answers ownership questions correctly, increase difficulty. If they struggle with lifetimes, surface more lifetime questions. CODE REPAIR MODE Give broken Rust code. Example: fn main() { let s = String::from("hello"); let r = &s; drop(s); println!("{}", r); } Ask: "What is wrong?" Then allow the user to choose or type a repair. Show compiler-style feedback. PROGRESS SYSTEM Create a persistent progress dashboard. Track: - concepts learned - questions answered - accuracy - streak - confidence - strongest topic - weakest topic Persist using localStorage. Include animated progress rings/bars. COMMAND PALETTE Add Ctrl/Cmd + K. Commands: - Go to Ownership - Go to Borrowing - Go to Lifetimes - Go to Traits - Go to Concurrency - Open Interview Arena - Toggle animations - Reset progress FINAL SECTION Create a final "Rust in One Screen" visualization. Use a large interactive SVG knowledge graph: Rust ├── Ownership │ ├── Move │ ├── Copy │ └── Clone ├── Borrowing │ ├── & │ └── &mut ├── Lifetimes ├── Types │ ├── Struct │ ├── Enum │ └── Trait ├── Error Handling │ ├── Option │ └── Result ├── Collections ├── Iterators ├── Smart Pointers └── Concurrency ├── Send ├── Sync ├── Arc └── Mutex Nodes should animate on hover/click and reveal concise explanations. DESIGN DETAILS Use: - sticky navigation - section progress indicator - animated code blocks - syntax highlighting - SVG diagrams - tooltips - scroll-triggered reveals - parallax where appropriate - subtle particle/grid effects - smooth transitions - responsive cards - mobile-friendly layout Use GSAP ScrollTrigger heavily for: - pinned diagrams - scrubbed animations - section transitions - SVG path animations - timeline storytelling Respect prefers-reduced-motion. ACCESSIBILITY Include: - semantic HTML - keyboard navigation - visible focus states - aria labels where needed - sufficient contrast - reduced-motion support PERFORMANCE Keep the page performant: - avoid huge SVGs - avoid unnecessary animation loops - animate transform/opacity where possible - clean up listeners/timers - use IntersectionObserver where GSAP is unnecessary - do not create excessive DOM nodes CONTENT QUALITY Rust explanations should be technically accurate and interview-oriented. Do not turn every concept into a huge textbook explanation. Prefer: Mental Model → Example → Visualization → Question → Interview Tip The experience should feel like: "LeetCode + Rust Book + interactive compiler + developer tool" FINAL OUTPUT REQUIREMENT Return ONE complete standalone `index.html`. No explanation outside the file. No pseudocode. No TODOs. No placeholder sections. No "implement later" comments. Everything must be functional when the HTML file is opened directly in a browser.

A system prompt was added to support web rendering