';
+ html+='';
+ html+='
';
+ html+='
';
+ html+='
'+lastReviewed+'d
Since Review
';
+ html+='
';
+ html+='💡 Smart Suggestion:
';
+ html+='';
+ html+='';
+
+ // Controls Header
+ html += '
' +
+ '« ' +
+ ''+months[FS.currentMonth]+' '+FS.currentYear+' ' +
+ '»
';
+
+ html += '
';
+ ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].forEach(function(d){
+ html += '
'+d+'
';
+ });
+ html += '
';
+
+ html += '
';
+ for(var i=0; i
' +
+ ''+day+' ';
+
+ if(evts.length > 0) {
+ html += '';
+ evts.forEach(function(ev) {
+ var color = "#00f2ff";
+ var bg = "rgba(0,242,255,0.15)";
+ if(ev.cat === 'exam') { bg = "rgba(255,74,74,0.15)"; color = "#ff7373"; }
+ if(ev.cat === 'assign') { bg = "rgba(255,183,0,0.15)"; color = "#ffd066"; }
+ if(ev.cat === 'study') { bg = "rgba(16,227,83,0.15)"; color = "#66ff99"; }
+
+ var strike = ev.completed ? 'text-decoration:line-through; opacity:0.4;' : '';
+
+ html += '
' +
+ escapeHtml(ev.title) +
+ '
';
+ });
+ html += '
';
+ }
+
+ html += '
';
+
+ if(evts.length === 0) {
+ h += '
No active goals scheduled.
';
+ } else {
+ for(var i=0; i
' +
+ '' +
+ '
' +
+ '
' +
+ ''+catLabel+' ' +
+ ''+escapeHtml(evts[i].title)+' ' +
+ '
' +
+ '
+ Allocate New Task ';
+ openModal('Events', h);
+}
+
+function addCalendarEvent(ds){
+ var d = normalizeDateString(ds || new Date());
+ var modalHtml = '' +
+ 'Task Description ' +
+ 'Academic Classification ' +
+ '' +
+ '🧠 Deep Study Block ' +
+ '📚 Assignment Due ' +
+ '🔥 Critical Exam ' +
+ '👤 Extracurricular / Other ' +
+ ' ' +
+
+ 'Target Date Boundary ' +
+ 'Commit to Timeline
';
+
+ openModal('Add Event', modalHtml);
+}
+
+function saveCalendarEvent(){
+ var tEl = document.getElementById('eventTitle');
+ var dEl = document.getElementById('eventDate');
+ var cEl = document.getElementById('eventCategory');
+
+ if(!tEl || !dEl || !tEl.value.trim()){ showToast('Enter a descriptive title!','error'); return; }
+
+ var cleanSavedDate = normalizeDateString(dEl.value.trim());
+
+ FS.calendarEvents = FS.calendarEvents || [];
+ FS.calendarEvents.push({
+ id: 'id_' + Date.now() + '_' + Math.floor(Math.random()*1000),
+ title: tEl.value.trim(),
+ date: cleanSavedDate,
+ cat: cEl ? cEl.value : 'personal',
+ completed: false
+ });
+
+ safeCalendarSave();
+ closeModal();
+ showToast('Task synced to roadmap!', 'success');
+ if (typeof confetti === 'function') confetti();
+ renderCalendar();
+}
+
+function toggleEventComplete(id, ds) {
+ FS.calendarEvents.forEach(function(e) { if(e.id === id) e.completed = !e.completed; });
+ safeCalendarSave();
+ renderCalendar();
+ showDayEvents(ds);
+}
+
+function deleteCalendarEvent(id, ds) {
+ FS.calendarEvents = FS.calendarEvents.filter(function(e) { return e.id !== id; });
+ safeCalendarSave();
+ showToast('Task removed.', 'error');
+ closeModal();
+ renderCalendar();
+ showDayEvents(ds);
+}
+
+document.addEventListener("DOMContentLoaded", function() { renderCalendar(); });
+// COUNTERS
+function animateCounters(){
+ document.querySelectorAll('.animated-counter').forEach(function(c){
+ var target=parseFloat(c.getAttribute('data-value')||'0'),isFloat=target!==Math.floor(target),cur=0,step=target/50;
+ var id=setInterval(function(){cur+=step;if(cur>=target){c.textContent=isFloat?target.toFixed(1):Math.round(target);clearInterval(id);}else c.textContent=isFloat?cur.toFixed(1):Math.round(cur);},20);
+ });
+ renderCalendar();
+}
+
+// DELETE
+function deleteAllData(){openModal('Delete All','Are you sure? All data will be deleted.
Yes, Delete Cancel ✅ Step-by-Step Solution " <> response <> "
" <>
+ "
" <>
+ "
" <>
+ "
Q1: Core Definition Define " <> cleaned <> " in one sentence and list its three key characteristics.
Recall " <>
+ "
Q2: Real-World Application Describe a real situation where " <> cleaned <> " is used and explain why it works there.
Apply " <>
+ "
Q3: Compare & Contrast How does " <> cleaned <> " differ from a closely related concept? Use an example.
Analyze " <>
+ "
Q4: Teach-Back Prompt Explain " <> cleaned <> " to someone who has never studied it. Keep it under 60 seconds.
Mastery " <>
+ "
📖 Study Material Generated " <>
+ "
Grade level: " <> grade <> " Mode: " <> summary <> "
" <>
+ "
🎯 Key Takeaways (" <> summary_len <> ") " <>
+ "Core Idea: The video explains a central concept using " <> grade_text <> ".Supporting Evidence: Key examples and demonstrations reinforce the main argument.Practical Application: Real-world use cases show why this knowledge matters.Common Pitfall: A frequent mistake or misunderstanding is addressed.Next Steps: Recommended follow-up topics to deepen understanding. " <>
+ "
" <>
+ "📝 Study Notes Video URL: " <> url <> " " <>
+ "Detected Topic: " <> detected_topic <> " " <>
+ "
" <>
+ "
" <>
+ "
+
" <> res.response_text <> "
+
+ 🔍 Analysis: " <> res.technical_explanation <> "
+
+
+ " <> list.fold(res.suggested_sources, "", fn(acc, s) { acc <> "" <> s <> " " }) <> "
+
+
+ Response ID: " <> res.neural_pathway_id <> " | Confidence: " <> float_to_percent(res.confidence_score) <> "
+
+
👋 Hello there! I'm FlashSync AI Tutor - your personal learning companion! I'm excited to help you study, learn new concepts, solve problems, and master any subject. What would you like to learn about today?
💡 Quick Start Ideas: Explain a concept Solve a problem Create flashcards Study tips Practice questions
🤖 Meet Your AI Tutor! My name is FlashSync AI Tutor - but you can call me Flash for short! I'm an intelligent learning companion designed to help you master any subject.
🧠 My Identity: Name: FlashSync AI TutorVersion: 4.0.2 Neural Learning EngineSpecialty: All academic subjects K-12 to UniversityTeaching Style: Adaptive - I adjust to YOUR levelMission: To make learning efficient, enjoyable, and permanent
Think of me as your 24/7 personal tutor who never gets tired, never judges, and always has time for your questions. What shall we learn together?
😊 I'm doing great! Thanks for asking! I'm feeling energized and ready to help you learn. Every question you ask makes me smarter and more helpful.
💪 But more importantly - how are YOU doing?
Pro Tip: If you're feeling frustrated, take a 5-minute break. Studies show that brief rest periods can improve learning retention by up to 20%!
💜 What I Love! Great question! Here's what I'm passionate about:
❤️ My Favorite Things: Teaching - Explaining complex ideas in simple ways is my superpower!Problem-Solving - Math, science, logic puzzles - bring them on!Curiosity - I love curious students who ask why and howFlashcards - The SM-2 spaced repetition algorithm makes memory permanentProgress - Watching your mastery scores go up makes my day!
Want to know what I like most about YOU? You're here, learning, growing - and that's awesome!
🎯 What I Do Best I'm a multi-talented learning companion! Here's everything I can help you with:
📚 Study and Review Flashcards with SM-2 algorithm, spaced repetition, mastery tracking
🧮 Problem Solving Step-by-step math, science, and logic solutions
📝 Exam Prep Practice exams, grading, feedback, performance analytics
🎓 Education Portal YouTube to study notes, PDF generation, grade-adapted learning
Think of me as your all-in-one AI study system! From creating flashcards to analyzing your focus levels, I've got you covered.
🙏 You're very welcome! It's my absolute pleasure to help you learn! Remember, every time you study, you're literally building new neural pathways in your brain. Keep up the amazing work!
🌟 Quick Tip: The best way to thank me? Review what you learned today and create a flashcard for it. That's how knowledge sticks!
What would you like to learn about next? I'm always here when you need me!
👋 See you soon! Great studying with you today! Remember: Success is the sum of small efforts, repeated day in and day out.
📅 Your Study Reminder:
Come back anytime - I'll be right here waiting to help!
😂 Science Humor Why did the biology student bring a ladder to class?
Because they heard about high-level concepts! 🧬
📚 Memory Trick: Associating humor with facts improves recall by activating the brain's reward centers. So laughing while learning is actually SCIENCE!
🌤️ Weather and Climate While I can't access real-time weather data directly, I can certainly help you study meteorology or climate science ! Did you know that weather and climate are different?
📖 Quick Weather Lesson: Weather = What's happening outside right now (temperature, humidity, wind)Climate = What happens over many years (averages, patterns, trends)Climate is what you expect, weather is what you get
Want to study atmospheric science, cloud formations, or climate change? I'm ready to teach!
🚀 My Full Capabilities I'm a comprehensive AI learning system! Here's everything I can do for you:
📖 Explain Concepts
🧮 Solve Problems
📝 Generate Questions
🎯 Study Strategies
💾 Create Flashcards
📊 Track Progress
Try me! Ask a question about any subject and I'll give you a comprehensive, structured answer.
📐 Mathematical Solution " <>
+ "
Let me break this down step by step:
" <>
+ "
" <>
+ "Step 1: Identify the given information and what we need to find.Step 2: Select the appropriate formula or method.Step 3: Substitute the known values into the formula.Step 4: Solve step by step, showing each calculation.Step 5: Check the answer (units, magnitude, sign)." <>
+ "
" <>
+ "
" <>
+ "✅ Final Answer: After working through the problem: " <> truncate_query(query, 60) <> " = " <> compute_estimate(query) <> " " <>
+ "
" <>
+ "
For the exact answer, try typing the full equation with numbers and I will show each transformation.
📖 " <> string.capitalise(topic) <> " - Explained " <>
+ "
Definition: " <> topic <> " is " <> generate_definition(topic) <> "
" <>
+ "
" <>
+ "💡 How It Works:
" <>
+ "
" <>
+ "🌍 Real Example:
" <>
+ "
⚠️ Common Misconception: " <> generate_misconception(topic) <> "
🔍 Comparative Analysis " <>
+ "
Here is a structured comparison of the concepts in your question:
" <>
+ "
" <>
+ "
Aspect
" <>
+ "
Concept A
" <>
+ "
Concept B
" <>
+ "
Definition
Core meaning and scope
Alternative or related meaning
" <>
+ "
Key Feature
Primary characteristic
Distinctive property
" <>
+ "
Application
Where it is typically used
Where it applies differently
" <>
+ "
" <>
+ "
📊 Key Takeaway: The main difference lies in their purpose and scope. Understanding both sides helps you apply the right concept in each situation.
" <>
+ "
For a deeper comparison, try asking about specific aspects you want to explore.
⚙️ Process Breakdown " <>
+ "
Here is how this process works, step by step:
" <>
+ "
" <>
+ "
1
Input/Initiation The process begins with specific conditions or triggers that set it in motion.
" <>
+ "
2
Transformation The core mechanism transforms inputs through intermediate stages, each dependent on the previous.
" <>
+ "
3
Output/Result The final product or outcome is produced. Feedback loops may regulate the process.
" <>
+ "
" <>
+ "
" <>
+ "🌟 Memory Aid: Think of it as a factory assembly line - each station adds value until the final product is complete." <>
+ "
❓ Why This Happens " <>
+ "
The reason involves understanding the underlying cause-and-effect relationship:
" <>
+ "
" <>
+ "🔬 Scientific/Logical Explanation:
" <>
+ "
" <>
+ "📊 Evidence Supporting This:
" <>
+ "
To understand WHY something happens, always ask: What is the mechanism? What forces or factors drive it? What conditions are necessary?
📚 Examples and Applications " <>
+ "
" <>
+ "Example 1 - Everyday Life:
" <>
+ "
" <>
+ "Example 2 - Academic Context:
" <>
+ "
" <>
+ "Example 3 - Professional Use:
" <>
+ "
The best way to learn is to create your own examples - try adapting these to your specific situation!
🌿 Photosynthesis - Complete Guide " <>
+ "
Definition: Photosynthesis is the biochemical process by which plants, algae, and some bacteria convert light energy into chemical energy stored in glucose.
" <>
+ "
" <>
+ "☀️ Light-Dependent Reactions (Thylakoid Membrane): Location: Thylakoid membranes of chloroplasts " <>
+ "
" <>
+ "
" <>
+ "🌑 Calvin Cycle (Light-Independent / Stroma): Location: Stroma of chloroplasts " <>
+ "
" <>
+ "
" <>
+ "
📝 Overall Equation: " <>
+ "
6CO2 + 6H2O + Light Energy to C6H12O6 + 6O2
" <>
+ "
" <>
+ "
⭐ Exam Tip: Remember - the light reactions produce ATP and NADPH (energy carriers), while the Calvin cycle uses them to build glucose. Think: Light makes fuel, fuel builds food.
⚛️ Quantum Superposition - Explained " <>
+ "
Definition: Quantum superposition is the principle that a quantum system can exist in all possible states simultaneously until a measurement forces it into one definite state.
" <>
+ "
" <>
+ "🔬 How It Works:
" <>
+ "
" <>
+ "🧪 Famous Thought Experiment - Schroedinger's Cat:
" <>
+ "
" <>
+ "💻 Real-World Application - Quantum Computing:
🧬 Biology: " <> string.capitalise(truncate_query(query, 40)) <> " " <>
+ "
Core Concept: Biological systems operate through complex but elegant mechanisms. Let me explain the principles behind your question.
" <>
+ "
" <>
+ "🔬 Mechanism:
" <>
+ "
" <>
+ "💡 Key Principle - Structure Determines Function:
🔭 Physics: " <> string.capitalise(truncate_query(query, 40)) <> " " <>
+ "
Core Principle: Physics seeks to describe the universe using mathematical laws that predict behavior with remarkable accuracy.
" <>
+ "
" <>
+ "📐 Key Equation(s):
" <>
+ "
" <>
+ "🌍 Real-World Significance:
⚗️ Chemistry: " <> string.capitalise(truncate_query(query, 40)) <> " " <>
+ "
Core Concept: Chemistry explores matter, its properties, composition, structure, and the changes it undergoes during chemical reactions.
" <>
+ "
" <>
+ "🧪 Chemical Principles: Atomic Structure: Atoms consist of protons, neutrons, and electrons arranged in energy levelsBonding: Ionic, covalent, and metallic bonds determine molecular propertiesReactions: Conservation of mass, stoichiometry, and reaction mechanisms govern transformations" <>
+ "
" <>
+ "
" <>
+ "💡 Practical Applications:
📜 History: " <> string.capitalise(truncate_query(query, 40)) <> " " <>
+ "
Historical Context: Understanding history requires examining primary sources, analyzing causation, and recognizing patterns across time periods.
" <>
+ "
" <>
+ "🔍 Historical Analysis Framework: Cause and Effect: What events led to this? What were the consequences?Perspectives: How did different groups experience this event?Evidence: What primary and secondary sources support our understanding?" <>
+ "
" <>
+ "
" <>
+ "📚 Why It Matters Today:
📖 Literature: " <> string.capitalise(truncate_query(query, 40)) <> " " <>
+ "
Literary Analysis: Literature reveals universal truths through storytelling, symbolism, and artistic expression.
" <>
+ "
" <>
+ "✍️ Literary Elements to Consider: Theme: What central ideas or messages does the work explore?Character Development: How do characters evolve and what drives their actions?Symbolism and Imagery: What deeper meanings emerge through metaphor and symbol?Narrative Structure: How does the organization affect meaning and reader experience?" <>
+ "
" <>
+ "
" <>
+ "🎯 Critical Thinking Prompt:
🌍 Geography: " <> string.capitalise(truncate_query(query, 40)) <> " " <>
+ "
Geographic Perspective: Geography examines the relationship between people and their environments across space and time.
" <>
+ "
" <>
+ "🗺️ Geographic Analysis: Physical Features: Landforms, climate, water systems, and natural resourcesHuman Systems: Population distribution, cultural patterns, economic activitiesSpatial Relationships: Location, distance, connectivity, and regional interactions" <>
+ "
" <>
+ "
" <>
+ "🌐 Global Significance:
💰 Economics: " <> string.capitalise(truncate_query(query, 40)) <> " " <>
+ "
Economic Framework: Economics studies how societies allocate scarce resources to satisfy unlimited wants.
" <>
+ "
" <>
+ "📊 Core Economic Concepts: Supply and Demand: Market forces determine prices and quantitiesOpportunity Cost: Every choice involves trade-offsIncentives: Rewards and penalties drive behaviorMarket Structures: Competition, monopoly, oligopoly affect outcomes" <>
+ "
" <>
+ "
" <>
+ "💡 Real-World Application:
🧠 Psychology: " <> string.capitalise(truncate_query(query, 40)) <> " " <>
+ "
Psychological Perspective: Psychology scientifically studies mind and behavior, exploring cognition, emotion, motivation, and social interaction.
" <>
+ "
" <>
+ "🔬 Psychological Frameworks: Cognitive Processes: Perception, memory, learning, problem-solvingDevelopmental Stages: How humans grow and change across lifespanSocial Dynamics: Group behavior, conformity, persuasion, relationshipsBiological Basis: Brain structures, neurotransmitters, genetics influence behavior" <>
+ "
" <>
+ "
" <>
+ "💡 Practical Insights:
💻 Computer Science: " <> string.capitalise(truncate_query(query, 40)) <> " " <>
+ "
Computational Thinking: Computer science solves problems through algorithmic thinking, abstraction, and systematic decomposition.
" <>
+ "
" <>
+ "⚙️ CS Fundamentals: Algorithms: Step-by-step procedures for solving problems efficientlyData Structures: Organized ways to store and access informationComplexity: Time and space requirements determine scalabilityAbstraction: Hiding complexity to manage large systems" <>
+ "
" <>
+ "
" <>
+ "🚀 Modern Applications:
📊 Statistics: " <> string.capitalise(truncate_query(query, 40)) <> " " <>
+ "
Statistical Reasoning: Statistics collects, analyzes, interprets, and presents data to make informed decisions under uncertainty.
" <>
+ "
" <>
+ "📈 Key Statistical Concepts: Descriptive Statistics: Mean, median, mode, standard deviation summarize dataProbability: Quantifies likelihood of events occurringInference: Drawing conclusions about populations from samplesHypothesis Testing: Evaluating claims using evidence and significance levels" <>
+ "
" <>
+ "
" <>
+ "💡 Why Statistics Matters:
📚 Exam-Ready Study Strategies " <>
+ "
" <>
+ "
🔴 Active Recall Test yourself, don't re-read. Cover the answer and force your brain to retrieve it.
" <>
+ "
🟣 Spaced Repetition Review after 1 day, 3 days, 1 week, 2 weeks, 1 month. FlashSync helps with this.
" <>
+ "
🟢 Pomodoro Technique 25 min focused study to 5 min break. Use the timer on the Pomodoro page.
" <>
+ "
🟡 Interleaving Mix subjects in one session. It forces your brain to discriminate between concepts.
" <>
+ "
" <>
+ "
" <>
+ "🌟 Advanced Learning Techniques: Feynman Technique: Explain concepts in simple terms as if teaching a childPareto Principle: Focus on the 20% of material that yields 80% of resultsDual Coding: Combine words with visuals for stronger memory encodingElaborative Interrogation: Ask why and how questions about the material" <>
+ "
" <>
+ "
" <>
+ "🎯 Pro Tip from Cognitive Science: Consistency beats intensity - 30 minutes daily beats 5 hours once a week." <>
+ "
📝 Practice Questions " <>
+ "
" <>
+ "
Q1: Core Knowledge Check Define the key term and explain its significance in one paragraph. Include one specific example.
" <>
+ "
Recall " <>
+ "
" <>
+ "
" <>
+ "
Q2: Application Problem Given a real scenario, apply the concept to solve the problem. Show your reasoning step by step.
" <>
+ "
Apply " <>
+ "
" <>
+ "
" <>
+ "
Q3: Critical Thinking What would happen if one key variable changed? Predict the outcome and justify your reasoning.
" <>
+ "
Analyze " <>
+ "
" <>
+ "
" <>
+ "
Q4: Synthesis Challenge Connect this concept to another topic you've studied. How do they relate or contrast?
" <>
+ "
Synthesize " <>
+ "
" <>
+ "
" <>
+ "
Q5: Evaluation Task Assess the strengths and limitations of this approach. When is it most effective?
" <>
+ "
Evaluate " <>
+ "
" <>
+ "
Try answering these and then ask me to check your answers! Use Bloom's Taxonomy levels for comprehensive mastery.
🤖 Intelligent Tutor Response " <>
+ "
I understand you are asking about " <> truncate_query(query, 80) <> " .
" <>
+ "
" <>
+ "📖 Comprehensive Breakdown: Core Concept: The fundamental principle involves understanding the relationship between key variables and how they interact in a systematic way.Deep Understanding: Try breaking it into smaller parts - what do you already know? What is new? Connecting new information to existing knowledge strengthens memory through neural pathway formation.Critical Thinking: Consider multiple perspectives. Ask yourself: Why does this matter? How does it connect to other topics? What are the real-world implications?Application Strategy: Create a flashcard with the key concept on one side and your explanation on the other. Review it using spaced repetition for optimal retention." <>
+ "
" <>
+ "
" <>
+ "🔗 Enhanced Learning Path: Define: for a clear definitionExplain: for the mechanismCompare: for deeper understandingApply: for real-world applicationsAnalyze: for critical thinking" <>
+ "
" <>
+ "
" <>
+ "🎯 Pro Learning Tip:
" <>
+ "
" <>
+ "Problem: " <> p <>
+ "
" <>
+ "
" <>
+ "
" <>
+ "1. " <>
+ "Understand: Identify what we know and what we need to find. The problem involves " <> classify_problem(n) <> ".
" <>
+ "
" <>
+ "2. " <>
+ "Plan: Select the appropriate method. " <> suggest_method(n) <> "
" <>
+ "
" <>
+ "3. " <>
+ "Execute: Apply the method step by step. " <> generate_execution(n) <> "
" <>
+ "
" <>
+ "4. " <>
+ "Verify: Check your answer. Does it make sense? Are the units correct? " <> generate_verification(n) <> "
" <>
+ "
" <>
+ "
" <>
+ "✅ Solution Summary: By following these steps systematically, you can solve this type of problem. The key is to practice the method until it becomes automatic. Use the Pomodoro timer to practice with similar problems." <>
+ "
+
Neural Performance Analytics
+
+
Mastery " <> float.to_string(avg) <> "%
+
Stability " <> float.to_string(session.peak_focus) <> "%
+
Duration " <> int.to_string(session.total_duration) <> "m
+
+
+
"
+}
+
+// --- 🛠️ SESSION UTILITIES ---
+
+pub fn create_new_session(user_id: String) -> BiometricSession {
+ BiometricSession(
+ session_id: "SYNC-" <> user_id <> "-" <> int.to_string(101),
+ data_points: [],
+ start_time: 0,
+ end_time: 0,
+ total_duration: 0,
+ peak_focus: 0.0,
+ average_blink_rate: 0.0,
+ )
+}
+
+pub fn check_microbreak_eligibility(active_minutes: Int) -> Bool {
+ active_minutes % 25 == 0 && active_minutes > 0
+}
+
+pub fn finalize_session_data(session: BiometricSession) -> String {
+ "ARCHIVING_NEURAL_LOG_" <> session.session_id <> "... SUCCESS."
+}
+
+
diff --git a/src/broken_code.txt b/src/broken_code.txt
new file mode 100644
index 0000000000000000000000000000000000000000..4b4e263950a117966dcf5671622d4cb67423f278
--- /dev/null
+++ b/src/broken_code.txt
@@ -0,0 +1,5826 @@
+import argv
+import gleam/io
+import gleam/http/response
+import gleam/http/request.{type Request}
+import mist.{type ResponseData}
+import flashsync_native
+import gleam/bytes_tree
+import gleam/list
+import gleam/float
+import gleam/int
+import gleam/option
+import gleam/string
+import sm2_algorithm
+import ai_tutor
+import neural_heatmap
+import ocr_service
+import multiplayer
+import biometric_tracker
+import time_travel
+import exam_generator
+import ghost_writing
+
+const app_version = "2.7.0"
+
+pub fn main() {
+ flashsync_native.load()
+ case argv.load().arguments {
+ ["serve"] -> {
+ io.println("FlashSync Learning Platform Online | http://localhost:3000")
+ io.println("Features Loaded:")
+ io.println(" - AI Tutor with File Upload")
+ io.println(" - PDF Export & Print Mode")
+ io.println(" - Spaced Repetition (SM-2)")
+ io.println(" - Neural Knowledge Heatmap")
+ io.println(" - Practice Question Generator")
+ io.println(" - Mock Exams with Grading")
+ io.println(" - Biometric Focus Tracking")
+ io.println(" - Time-Travel Learning Timeline")
+ io.println(" - Drawing & Ghost Writing Mode")
+ io.println(" - 8 Language Support")
+ io.println(" - Subscription Plans")
+ io.println(" - File Storage & Preview")
+ io.println(" - Command Center Intelligence")
+ io.println("FlashSync Version: " <> app_version)
+ let assert Ok(_) = mist.new(handle_request) |> mist.port(3000) |> mist.start
+ sleep_forever()
+ }
+ _ -> io.println("Usage: flashsync serve")
+ }
+}
+
+fn handle_request(req: Request(mist.Connection)) -> response.Response(ResponseData) {
+ let path = request.path_segments(req)
+
+ case path {
+ // Core Card Operations
+ ["api", "save", id, body] -> {
+ let _ = flashsync_native.save_card(id, body)
+ json_response("{\"status\": \"saved\", \"id\": \"" <> id <> "\"}")
+ }
+ ["api", "card", id] -> {
+ let card_data = flashsync_native.get_card(id)
+ json_response(card_data)
+ }
+ ["api", "create_card", id, question, answer] -> {
+ let _ = flashsync_native.save_card(id, question <> "|||" <> answer)
+ json_response("{\"status\": \"created\", \"id\": \"" <> id <> "\"}")
+ }
+
+ // SM-2 Spaced Repetition
+ ["api", "review", _id, grade] -> {
+ let grade_val = case grade {
+ "0" -> sm2_algorithm.Incorrect
+ "1" -> sm2_algorithm.Difficult
+ "2" -> sm2_algorithm.Complete
+ "3" -> sm2_algorithm.Acceptable
+ "4" -> sm2_algorithm.Easy
+ _ -> sm2_algorithm.Perfect
+ }
+ let initial = sm2_algorithm.initial_state()
+ let updated = sm2_algorithm.calculate_next_review(initial, grade_val)
+ let response_text = "{\"next_review\": \"" <> updated.next_review_date <> "\", \"mastery\": " <> float.to_string(sm2_algorithm.calculate_mastery_percentage(updated)) <> "}"
+ json_response(response_text)
+ }
+
+ // AI Tutor
+ ["api", "tutor", "ask"] -> {
+ let response_msg = ai_tutor.get_comprehensive_welcome("Student")
+ json_response("{\"response\": \"" <> response_msg <> "\"}")
+ }
+ ["api", "tutor", "analyze_file"] -> {
+ json_response("{\"status\": \"ready\", \"message\": \"Upload a PDF, image, or document for AI analysis\"}")
+ }
+
+ // Neural Heatmap
+ ["api", "heatmap"] -> {
+ let cards = [
+ #("card_1", "Quantum Mechanics", 85.0),
+ #("card_2", "Linear Algebra", 72.0),
+ #("card_3", "Thermodynamics", 63.0),
+ #("card_4", "Organic Chemistry", 91.0),
+ #("card_5", "Differential Equations", 45.0),
+ ]
+ let map = neural_heatmap.build_constellation(cards)
+ let svg = neural_heatmap.generate_svg_constellation(map)
+ let analytics = neural_heatmap.calculate_heatmap_analytics(map)
+ json_response("{\"svg\": \"" <> svg <> "\", \"analytics\": \"" <> analytics <> "\"}")
+ }
+
+ // OCR
+ ["api", "ocr", "process"] -> {
+ let ocr_result = ocr_service.OcrSuccess(
+ text: "Successfully extracted handwritten text from sketch",
+ confidence: 0.92,
+ metadata: ocr_service.OcrMetadata(
+ language: "en",
+ character_count: 45,
+ word_count: 8,
+ confidence_per_line: [0.95, 0.90, 0.89],
+ ),
+ )
+ let formatted = ocr_service.format_ocr_output(ocr_result)
+ json_response("{\"result\": \"" <> formatted <> "\"}")
+ }
+
+ // Multiplayer
+ ["api", "multiplayer", "create"] -> {
+ let _session = multiplayer.create_session("room_2026_03", "Advanced Biology Study")
+ json_response("{\"room_id\": \"room_2026_03\", \"name\": \"Advanced Biology Study\"}")
+ }
+ ["api", "multiplayer", "join"] -> {
+ let session = multiplayer.create_session("room_2026_03", "Advanced Biology Study")
+ let with_user = multiplayer.add_participant(session, "usr_001", "Alice")
+ let svg_space = multiplayer.generate_svg_focus_space(with_user)
+ json_response("{\"participants\": 1, \"focus_space\": \"" <> svg_space <> "\"}")
+ }
+
+ // Biometric
+ ["api", "biometric", "track"] -> {
+ let data = biometric_tracker.BiometricData(
+ timestamp: 1710841800,
+ eye_gaze_x: 400.0,
+ eye_gaze_y: 300.0,
+ head_posture: biometric_tracker.Upright,
+ blink_rate: 18.0,
+ pupil_size: 5.2,
+ attention_score: 0.88,
+ is_user_present: True,
+ )
+ let metrics = biometric_tracker.monitor_focus_stream(data, option.None)
+ let music = biometric_tracker.get_neural_audio_instruction(metrics)
+ json_response("{\"focus_score\": " <> float.to_string(metrics.current_focus_score) <> ", \"music\": \"" <> music <> "\"}")
+ }
+
+ // Time-Travel
+ ["api", "timetravel", "snapshots"] -> {
+ let snapshots = [
+ time_travel.KnowledgeSnapshot(
+ timestamp: "2026-02-15T00:00:00Z",
+ card_id: "card_1",
+ question: "What is quantum superposition?",
+ answer: "A quantum system existing in multiple states...",
+ mastery_level: 45.0,
+ is_mastered: False,
+ ),
+ time_travel.KnowledgeSnapshot(
+ timestamp: "2026-03-19T00:00:00Z",
+ card_id: "card_1",
+ question: "What is quantum superposition?",
+ answer: "A quantum system existing in multiple states...",
+ mastery_level: 85.0,
+ is_mastered: True,
+ ),
+ ]
+ let timelapse = time_travel.build_timelapse(snapshots)
+ let viz = time_travel.generate_growth_visualization(timelapse)
+ json_response("{\"visualization\": \"" <> viz <> "\", \"growth\": " <> float.to_string(timelapse.total_growth) <> "}")
+ }
+
+ // Exam
+ ["api", "exam", "generate"] -> {
+ let cards = [
+ #("card_1", "Define photosynthesis", "Process by which plants convert light to chemical energy"),
+ #("card_2", "What is ATP?", "Adenosine triphosphate, cellular energy molecule"),
+ #("card_3", "Explain mitochondria function", "Powerhouse of the cell, produces ATP"),
+ ]
+ let exam = exam_generator.generate_mock_exam("Biology 101", cards, 5, "medium")
+ let _pdf = exam_generator.generate_pdf_exam(exam)
+ json_response("{\"exam_id\": \"" <> exam.exam_id <> "\", \"questions\": " <> int.to_string(list.length(exam.questions)) <> ", \"duration\": " <> int.to_string(exam.duration_minutes) <> "}")
+ }
+
+ // Ghost Writing
+ ["api", "ghost_writing", "start"] -> {
+ let session = ghost_writing.start_ghost_writing_session("https://example.com/heart_diagram.png")
+ json_response("{\"session_id\": \"" <> session.session_id <> "\", \"canvas\": \"" <> ghost_writing.create_drawing_canvas_html() <> "\"}")
+ }
+ ["api", "ghost_writing", "submit"] -> {
+ let strokes = []
+ let score = ghost_writing.calculate_similarity(strokes, "reference.png")
+ json_response("{\"score\": " <> float.to_string(score.overall_score) <> ", \"structural\": " <> float.to_string(score.structural_accuracy) <> "}")
+ }
+
+ // YouTube to Study Materials
+ ["api", "youtube", "convert", video_id] -> {
+ json_response("{\"status\": \"processing\", \"video_id\": \"" <> video_id <> "\", \"message\": \"Extracting transcript and generating flashcards...\"}")
+ }
+ ["api", "pulse", "overview"] -> json_response(build_pulse_overview_json())
+ ["api", "coach", "mission"] -> json_response(build_coach_mission_json("general", "scholar"))
+ ["api", "coach", "mission", domain, level] -> json_response(build_coach_mission_json(domain, level))
+ ["api", "exam", "blitz", difficulty] -> json_response(build_exam_blitz_json(difficulty))
+ ["api", "system", "health"] -> json_response(build_system_health_json())
+
+ // UI Pages
+ [] -> render_ui("login", "")
+ ["hub"] -> render_ui("hub", "")
+ ["calendar"] -> render_ui("calendar", "")
+ ["sketch"] -> render_ui("sketch", "")
+ ["library"] -> render_ui("library", "")
+ ["tutor"] -> render_ui("tutor", "")
+ ["analytics"] -> render_ui("analytics", "")
+ ["heatmap"] -> render_ui("heatmap", "")
+ ["multiplayer"] -> render_ui("multiplayer", "")
+ ["biometric"] -> render_ui("biometric", "")
+ ["timetravel"] -> render_ui("timetravel", "")
+ ["exam"] -> render_ui("exam", "")
+ ["ghostwriting"] -> render_ui("ghostwriting", "")
+ ["settings"] -> render_ui("settings", "")
+ ["education"] -> render_ui("education", "")
+ ["ai-solver"] -> render_ui("ai-solver", "")
+ ["study-tools"] -> render_ui("study-tools", "")
+ ["flashcards"] -> render_ui("flashcards", "")
+ ["pdf-export"] -> render_ui("pdf-export", "")
+ ["practice"] -> render_ui("practice", "")
+ ["subscriptions"] -> render_ui("subscriptions", "")
+ ["file-manager"] -> render_ui("file-manager", "")
+ ["blog"] -> render_ui("blog", "")
+ ["youtube"] -> render_ui("youtube", "")
+ ["command-center"] -> render_ui("command-center", "")
+
+ _ -> render_ui("404", "")
+ }
+}
+
+fn json_response(json: String) -> response.Response(ResponseData) {
+ response.new(200)
+ |> response.set_header("content-type", "application/json")
+ |> response.set_body(mist.Bytes(bytes_tree.from_string(json)))
+}
+
+fn sample_mastery_cards() -> List(#(String, String, Float)) {
+ [
+ #("card_1", "Quantum Mechanics", 85.0),
+ #("card_2", "Linear Algebra", 72.0),
+ #("card_3", "Thermodynamics", 63.0),
+ #("card_4", "Organic Chemistry", 91.0),
+ #("card_5", "Differential Equations", 45.0),
+ ]
+}
+
+fn sample_focus_metrics() -> biometric_tracker.FocusMetrics {
+ let previous = biometric_tracker.BiometricData(
+ timestamp: 1710841700,
+ eye_gaze_x: 390.0,
+ eye_gaze_y: 320.0,
+ head_posture: biometric_tracker.Upright,
+ blink_rate: 16.0,
+ pupil_size: 5.0,
+ attention_score: 0.83,
+ is_user_present: True,
+ )
+
+ let current = biometric_tracker.BiometricData(
+ timestamp: 1710841800,
+ eye_gaze_x: 400.0,
+ eye_gaze_y: 300.0,
+ head_posture: biometric_tracker.Upright,
+ blink_rate: 18.0,
+ pupil_size: 5.2,
+ attention_score: 0.88,
+ is_user_present: True,
+ )
+
+ biometric_tracker.monitor_focus_stream(current, option.Some(previous))
+}
+
+fn first_three_topics(topics: List(String)) -> #(String, String, String) {
+ case topics {
+ [a, b, c, .._] -> #(a, b, c)
+ [a, b] -> #(a, b, "Revision Sprint")
+ [a] -> #(a, "Concept Linking", "Revision Sprint")
+ [] -> #("Differential Equations", "Thermodynamics", "Concept Linking")
+ }
+}
+
+fn parse_domain(domain: String) -> #(ai_tutor.SubjectDomain, String) {
+ case string.lowercase(domain) {
+ "medicine" -> #(ai_tutor.Medicine, "Medicine")
+ "computer" | "computerscience" | "cs" -> #(ai_tutor.ComputerScience, "Computer Science")
+ "math" | "mathematics" -> #(ai_tutor.Mathematics, "Mathematics")
+ "law" -> #(ai_tutor.Law, "Law")
+ _ -> #(ai_tutor.GeneralStudies, "General Studies")
+ }
+}
+
+fn parse_level(level: String) -> #(ai_tutor.Difficulty, String) {
+ case string.lowercase(level) {
+ "initiate" | "easy" -> #(ai_tutor.Initiate, "Initiate")
+ "scholar" | "medium" -> #(ai_tutor.Scholar, "Scholar")
+ "master" | "hard" -> #(ai_tutor.Master, "Master")
+ "zenith" | "expert" -> #(ai_tutor.Zenith, "Zenith")
+ _ -> #(ai_tutor.Scholar, "Scholar")
+ }
+}
+
+fn build_pulse_overview_json() -> String {
+ let map = neural_heatmap.build_constellation(sample_mastery_cards())
+ let metrics = sample_focus_metrics()
+ let recommendations = neural_heatmap.recommend_next_topics(map)
+ let #(r1, r2, r3) = first_three_topics(recommendations)
+ let efficiency = ai_tutor.calculate_study_efficiency(240, 168, 90)
+ let retention_report = ai_tutor.generate_retention_report(efficiency)
+ let schedule = sm2_algorithm.calculate_next_review(sm2_algorithm.initial_state(), sm2_algorithm.Easy)
+
+ "{\"version\": \"" <> app_version <>
+ "\", \"total_mastery\": " <> float.to_string(map.total_mastery) <>
+ ", \"focus_score\": " <> float.to_string(metrics.current_focus_score) <>
+ ", \"focus_trend\": \"" <> metrics.focus_trend <>
+ "\", \"study_efficiency\": " <> float.to_string(efficiency) <>
+ ", \"retention_report\": \"" <> retention_report <>
+ "\", \"next_review_date\": \"" <> schedule.next_review_date <>
+ "\", \"recommended_topic_1\": \"" <> r1 <>
+ "\", \"recommended_topic_2\": \"" <> r2 <>
+ "\", \"recommended_topic_3\": \"" <> r3 <>
+ "\"}"
+}
+
+fn build_coach_mission_json(domain: String, level: String) -> String {
+ let #(subject, subject_label) = parse_domain(domain)
+ let #(difficulty, difficulty_label) = parse_level(level)
+ let mission_name = subject_label <> " " <> difficulty_label <> " Mission"
+ let intent = ai_tutor.parse_detailed_intent("explain differences and test me with deep mechanisms")
+ let prompt = ai_tutor.generate_subject_optimized_prompt(
+ "Design a 45-minute sprint to improve weak topics and improve retention.",
+ subject,
+ difficulty,
+ )
+
+ "{\"mission_name\": \"" <> mission_name <>
+ "\", \"domain\": \"" <> subject_label <>
+ "\", \"difficulty\": \"" <> difficulty_label <>
+ "\", \"intent\": \"" <> intent <>
+ "\", \"prompt\": \"" <> prompt <>
+ "\", \"micro_goals\": \"25m deep focus + 10m active recall + 10m synthesis\"}"
+}
+
+fn build_exam_blitz_json(difficulty: String) -> String {
+ let normalized = case string.lowercase(difficulty) {
+ "easy" -> "easy"
+ "hard" | "expert" -> "hard"
+ _ -> "medium"
+ }
+
+ let cards = [
+ #("card_1", "Define photosynthesis", "Process by which plants convert light to chemical energy"),
+ #("card_2", "What is ATP?", "Adenosine triphosphate, cellular energy molecule"),
+ #("card_3", "Explain mitochondria function", "Powerhouse of the cell, produces ATP"),
+ #("card_4", "Describe osmosis", "Movement of water across semipermeable membrane"),
+ #("card_5", "What is cellular respiration?", "Metabolic pathway that generates ATP"),
+ ]
+
+ let exam = exam_generator.generate_mock_exam("Integrated Sciences", cards, 5, normalized)
+ let schedule = sm2_algorithm.calculate_next_review(sm2_algorithm.initial_state(), sm2_algorithm.Acceptable)
+
+ "{\"exam_id\": \"" <> exam.exam_id <>
+ "\", \"difficulty\": \"" <> normalized <>
+ "\", \"question_count\": " <> int.to_string(list.length(exam.questions)) <>
+ ", \"duration_minutes\": " <> int.to_string(exam.duration_minutes) <>
+ ", \"total_points\": " <> int.to_string(exam.total_points) <>
+ ", \"next_review_date\": \"" <> schedule.next_review_date <>
+ "\"}"
+}
+
+fn build_system_health_json() -> String {
+ let map = neural_heatmap.build_constellation(sample_mastery_cards())
+ let metrics = sample_focus_metrics()
+ let capability = {map.total_mastery +. metrics.current_focus_score +. 92.0} /. 3.0
+
+ "{\"status\": \"healthy\", \"platform\": \"FlashSync\", \"version\": \"" <> app_version <>
+ "\", \"capability_index\": " <> float.to_string(capability) <>
+ ", \"modules_online\": 12, \"api_ready\": true}"
+}
+
+fn render_ui(page: String, _extra_content: String) -> response.Response(ResponseData) {
+ let content = case page {
+ "login" -> "
+// FlashSync
+// Get Started
+// EN
+// NL
+// ES
+// FR
+// DE
+// IT
+// PT
+// JP
+//
+//
+// "
+
+ "hub" -> "
+//
+
+ AI Tutor
+//
+
+ Flashcards
+//
+
+ Practice
+//
+
+ PDF Export
+//
+
+ Knowledge Map
+//
+
+ Mock Exams
+//
+
+ My Files
+//
+
+ Subscription
+//
+//
+
+//
+//
+//
+//
+// "
+
+ "heatmap" -> "
+// Knowledge Map
+//
+
+// All Topics
+// Strong
+// Needs Work
+// Recent
+//
+// +23% improvement
+//
+//
+ Peak learning time
+//
+//
+ 5 day streak!
+//
+//
+//
+
+ Differential Equations
+//
+// Study
+//
+ Thermodynamics
+//
+// Study
+//
+ Organic Chemistry
+//
+// Review
+//
+//
+//
+// "
+
+ "tutor" -> "
+// AI Tutor
+//
+
+
+ Explaining complex concepts
+ Answering questions
+ Analyzing uploaded PDFs and images
+ Generating practice problems
+ Creating study summaries
+
+//
+//
+//
+
+// Quick Actions
+// Uploaded Files
+//
+//
+//
+// "
+
+ "biometric" -> "
+// Focus Tracking
+//
+
+ 88%
+//
+ 18.4
+//
+ Good
+//
+ 140 BPM
+//
+// "
+
+ "multiplayer" -> "
+// Study Rooms
+//
+
+// "
+
+ "ghostwriting" -> "
+// Drawing Practice
+//
+
+ Reference Image
+ Your Drawing
+ Clear
+// Submit & Score
+// "
+
+ "timetravel" -> "
+// Learning Timeline
+//
+
+ Your Progress
+//
+// "
+
+ "exam" -> "
+// Mock Exams
+//
+
+ Biology 101
+// Start Exam
+//
+ Chemistry Fundamentals
+// Start Exam
+//
+// "
+
+ "analytics" -> "
+// Analytics
+//
+
+ 85.2%
+//
+ 88 min
+//
+ 142
+//
+ 94.2%
+//
+// "
+
+ "command-center" -> "
+// Command Center
+//
+
+ r.json()).then(d => alert(\"Focus: \" + d.focus_score + \"% | Mastery: \" + d.total_mastery + \"% | Next Review: \" + d.next_review_date))">Run Pulse Scan
+//
+ r.json()).then(d => alert(d.mission_name + \"\\n\\n\" + d.intent + \"\\n\\n\" + d.prompt))">Generate Mission
+//
+//
+
+ r.json()).then(d => alert(\"Exam ID: \" + d.exam_id + \" | Questions: \" + d.question_count + \" | Duration: \" + d.duration_minutes + \" min\"))">Create Blitz Exam
+// "
+
+ "flashcards" -> "
+// Flashcard Vault
+//
+
+// Your Decks
+ Biology 101
+//
+//
+// Study
+// Review
+//
+//
+
+ Chemistry
+//
+//
+// Study
+// Review
+//
+//
+
+ Practice Questions
+//
+
+ Select Subject
+//
+
+//
+
+//
+
+//
+
+//
+
+//
+
+//
+
+//
+
+//
+//
+
+ Difficulty
+
+ Easy
+ Medium
+ Hard
+ Expert
+
+//
+ Number of Questions
+
+ 10
+ 25
+ 50
+ 100
+
+//
+//
+
+// What is the powerhouse of the cell?
+
+// Nucleus
+// Mitochondria
+// Ribosome
+// Endoplasmic Reticulum
+//
+//
+
+ Correct!
+//
+// Quiz Complete!
+//
+//
+//
+//
+//
+// Subject Statistics
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// "
+
+ "pdf-export" -> "
+// PDF Export & Download
+//
+
+ All Flashcards
+// Print & Cut Mode
+// Study Guide
+// Exam Results
+// Export Settings
+
+//
+
+//
+
+//
+
+//
+//
+// "
+
+ "ai-solver" -> "
+// AI Problem Solver
+//
+
+ Settings
+//
+
+// Profile Information
+ Display Name
+// Email
+// Public Profile
+
+//
+
+//
+//
+
+ Theme
+//
+//
+//
+//
+
+ Animations
+ Hover Effect Intensity
+//
+//
+
+//
+
+//
+//
+
+ Daily Goals
+ Study Time (minutes)
+// Cards per Day
+// Algorithm Settings
+
+//
+
+//
+//
+
+ Interface Language
+// English
+// Nederlands (Dutch)
+// Español
+// Français
+// Deutsch
+// Italiano
+// Português
+// 日本語
+//
+//
+
+// Reset to Default
+// Choose Your Plan
+//
+
+
+//
+//
+
+ Free
+//
+
+
+// Current Plan
+//
+
+ Standard
+//
+
+
+// Upgrade
+//
+
+ Plus
+//
+
+
+// Go Plus
+//
+//
+
+ Supported Payment Methods
+//
+// "
+
+ "file-manager" -> "
+// My Files
+//
+
+// All
+// PDF
+// Documents
+// Images
+//
+//
+//
+
+ Biology_Notes.pdf
+//
+// Chemistry_Lab.docx
+//
+// Physics_Slides.pptx
+//
+// Diagram_01.png
+//
+// Learning Blog
+//
+
+
+ Master Spaced Repetition
+//
+
+
+
+ Sleep and Memory Consolidation
+//
+
+
+
+ The Feynman Technique
+//
+
+
+
+ The Pomodoro Technique
+//
+
+// "
+
+ "youtube" -> "
+// YouTube to Study Materials
+//
+
+ Introduction to Quantum Physics
+//
+//
+//
+
+ Generated Study Materials
+ Flashcard Deck
+// Download
+//
+
+ Summary
+// Download
+//
+
+ Practice Questions
+// Download
+//
+
+ Full Transcript
+// Download
+//
+//
+//
+//
+// "
+
+ _ -> "
+// Page Not Found
+// FlashSync - Advanced Learning Platform
+ case page { "login" -> "login-main" _ -> "content-main" } <> "">
+ " <> content <> "
+
+
+
+"
+}
+
+fn build_navigation(active_page: String) -> String {
+ ""
+}
+
+fn get_all_styles() -> String {
+ "
+ :root {
+ --primary: #00d4ff;
+ --secondary: #a855f7;
+ --accent: #f43f5e;
+ --success: #22c55e;
+ --warning: #f59e0b;
+ --bg-dark: #0a0a0f;
+ --bg-card: #13131f;
+ --bg-hover: #1a1a2e;
+ --text-primary: #ffffff;
+ --text-secondary: #a1a1aa;
+ --border: #27273a;
+ --glass: rgba(255,255,255,0.03);
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ --shadow: 0 4px 20px rgba(0,0,0,0.3);
+ --glow-primary: 0 0 20px rgba(0,212,255,0.3);
+ --glow-secondary: 0 0 20px rgba(168,85,247,0.3);
+ }
+
+ * { margin: 0; padding: 0; box-sizing: border-box; }
+
+ body {
+ font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
+ background: var(--bg-dark);
+ color: var(--text-primary);
+ min-height: 100vh;
+ display: flex;
+ }
+
+ .sidebar {
+ width: 260px;
+ background: var(--bg-card);
+ border-right: 1px solid var(--border);
+ padding: 24px 16px;
+ position: fixed;
+ height: 100vh;
+ overflow-y: auto;
+ z-index: 100;
+ }
+
+ .nav-brand {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 0 12px 24px;
+ margin-bottom: 24px;
+ border-bottom: 1px solid var(--border);
+ }
+
+ .nav-brand i {
+ font-size: 28px;
+ color: var(--primary);
+ filter: drop-shadow(0 0 10px rgba(0,212,255,0.5));
+ }
+
+ .nav-brand span {
+ font-size: 22px;
+ font-weight: 800;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .nav-section { margin-bottom: 24px; }
+
+ .nav-label {
+ display: block;
+ font-size: 11px;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ color: var(--text-secondary);
+ padding: 0 12px;
+ margin-bottom: 8px;
+ }
+
+ .nav-link {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 16px;
+ margin: 4px 0;
+ border-radius: 12px;
+ color: var(--text-secondary);
+ text-decoration: none;
+ font-size: 14px;
+ font-weight: 500;
+ transition: var(--transition);
+ position: relative;
+ overflow: hidden;
+ }
+
+ .nav-link::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 3px;
+ height: 100%;
+ background: var(--primary);
+ transform: scaleY(0);
+ transition: transform 0.3s;
+ }
+
+ .nav-link:hover {
+ background: var(--bg-hover);
+ color: var(--text-primary);
+ transform: translateX(4px);
+ }
+
+ .nav-link:hover::before {
+ transform: scaleY(1);
+ }
+
+ .nav-link.active {
+ background: linear-gradient(90deg, rgba(0,212,255,0.1), transparent);
+ color: var(--primary);
+ }
+
+ .nav-link.active::before {
+ transform: scaleY(1);
+ }
+
+ .nav-link i {
+ width: 20px;
+ text-align: center;
+ }
+
+ .content-main {
+ flex: 1;
+ margin-left: 260px;
+ padding: 32px;
+ max-width: 1400px;
+ }
+
+ .login-main {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ background: radial-gradient(ellipse at top, #1a1a2e 0%, var(--bg-dark) 50%);
+ }
+
+ .page-header {
+ margin-bottom: 32px;
+ }
+
+ .page-header h1 {
+ font-size: 32px;
+ font-weight: 800;
+ margin-bottom: 8px;
+ }
+
+ .page-header .highlight {
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .subtitle {
+ color: var(--text-secondary);
+ font-size: 16px;
+ }
+
+ .login-container {
+ width: 100%;
+ max-width: 420px;
+ padding: 20px;
+ }
+
+ .login-box {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 24px;
+ padding: 48px 40px;
+ text-align: center;
+ box-shadow: var(--shadow);
+ }
+
+ .brand-title {
+ font-size: 36px;
+ font-weight: 900;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ margin-bottom: 8px;
+ }
+
+ .tagline {
+ color: var(--text-secondary);
+ font-size: 16px;
+ margin-bottom: 8px;
+ }
+
+ .feature-list {
+ color: var(--text-secondary);
+ font-size: 13px;
+ margin-bottom: 32px;
+ }
+
+ .modern-input {
+ width: 100%;
+ background: var(--bg-dark);
+ border: 2px solid var(--border);
+ padding: 16px 20px;
+ border-radius: 12px;
+ color: var(--text-primary);
+ font-size: 15px;
+ margin-bottom: 16px;
+ transition: var(--transition);
+ }
+
+ .modern-input:focus {
+ outline: none;
+ border-color: var(--primary);
+ box-shadow: var(--glow-primary);
+ }
+
+ .language-bar {
+ display: flex;
+ justify-content: center;
+ gap: 8px;
+ margin-top: 24px;
+ }
+
+ .lang-icon {
+ width: 40px;
+ height: 40px;
+ border-radius: 10px;
+ border: 1px solid var(--border);
+ background: var(--bg-dark);
+ color: var(--text-secondary);
+ font-size: 12px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: var(--transition);
+ }
+
+ .lang-icon:hover {
+ border-color: var(--primary);
+ color: var(--primary);
+ transform: translateY(-2px);
+ }
+
+ .lang-icon.active {
+ background: var(--primary);
+ color: var(--bg-dark);
+ border-color: var(--primary);
+ }
+
+ .primary-button {
+ background: linear-gradient(135deg, var(--primary), #0099cc);
+ color: var(--bg-dark);
+ border: none;
+ padding: 14px 28px;
+ border-radius: 12px;
+ font-weight: 700;
+ font-size: 15px;
+ cursor: pointer;
+ transition: var(--transition);
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .primary-button:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--glow-primary);
+ }
+
+ .secondary-button {
+ background: var(--bg-hover);
+ color: var(--text-primary);
+ border: 1px solid var(--border);
+ padding: 14px 28px;
+ border-radius: 12px;
+ font-weight: 600;
+ font-size: 15px;
+ cursor: pointer;
+ transition: var(--transition);
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .secondary-button:hover {
+ background: var(--border);
+ transform: translateY(-2px);
+ }
+
+ .accent-button {
+ background: linear-gradient(135deg, var(--accent), #e11d48);
+ color: white;
+ border: none;
+ padding: 14px 28px;
+ border-radius: 12px;
+ font-weight: 700;
+ font-size: 15px;
+ cursor: pointer;
+ transition: var(--transition);
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .accent-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 0 20px rgba(244,63,94,0.3);
+ }
+
+ .success-button {
+ background: linear-gradient(135deg, var(--success), #16a34a);
+ color: white;
+ border: none;
+ padding: 14px 28px;
+ border-radius: 12px;
+ font-weight: 700;
+ font-size: 15px;
+ cursor: pointer;
+ transition: var(--transition);
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .success-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 0 20px rgba(34,197,94,0.3);
+ }
+
+ .primary-button.full, .secondary-button.full, .accent-button.full, .success-button.full {
+ width: 100%;
+ justify-content: center;
+ }
+
+ .primary-button.small, .secondary-button.small {
+ padding: 8px 16px;
+ font-size: 13px;
+ }
+
+ .dashboard-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+ gap: 20px;
+ margin-bottom: 32px;
+ }
+
+ .dash-card {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ padding: 24px;
+ cursor: pointer;
+ transition: var(--transition);
+ position: relative;
+ overflow: hidden;
+ }
+
+ .dash-card::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 3px;
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
+ transform: scaleX(0);
+ transition: transform 0.3s;
+ }
+
+ .dash-card:hover {
+ transform: translateY(-4px);
+ box-shadow: var(--shadow);
+ border-color: var(--border);
+ }
+
+ .dash-card:hover::after {
+ transform: scaleX(1);
+ }
+
+ .dash-card.primary::after { background: linear-gradient(90deg, var(--primary), #0099cc); }
+ .dash-card.secondary::after { background: linear-gradient(90deg, var(--secondary), #7c3aed); }
+ .dash-card.accent::after { background: linear-gradient(90deg, var(--accent), #e11d48); }
+ .dash-card.success::after { background: linear-gradient(90deg, var(--success), #16a34a); }
+
+ .card-icon {
+ width: 48px;
+ height: 48px;
+ border-radius: 12px;
+ background: var(--bg-hover);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 20px;
+ color: var(--primary);
+ margin-bottom: 16px;
+ }
+
+ .dash-card h3 {
+ font-size: 16px;
+ font-weight: 700;
+ margin-bottom: 4px;
+ }
+
+ .dash-card p {
+ color: var(--text-secondary);
+ font-size: 13px;
+ }
+
+ .badge, .stat {
+ position: absolute;
+ top: 16px;
+ right: 16px;
+ padding: 4px 10px;
+ border-radius: 20px;
+ font-size: 11px;
+ font-weight: 700;
+ }
+
+ .badge {
+ background: var(--primary);
+ color: var(--bg-dark);
+ }
+
+ .stat {
+ background: var(--bg-hover);
+ color: var(--text-secondary);
+ }
+
+ .quick-stats {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 20px;
+ }
+
+ .stat-item {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 12px;
+ padding: 20px;
+ text-align: center;
+ transition: var(--transition);
+ }
+
+ .stat-item:hover {
+ transform: translateY(-2px);
+ border-color: var(--primary);
+ }
+
+ .stat-value {
+ font-size: 28px;
+ font-weight: 800;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ margin-bottom: 4px;
+ }
+
+ .stat-label {
+ color: var(--text-secondary);
+ font-size: 13px;
+ }
+
+ .action-bar {
+ display: flex;
+ gap: 12px;
+ margin-bottom: 32px;
+ flex-wrap: wrap;
+ }
+
+ .deck-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 20px;
+ margin-bottom: 32px;
+ }
+
+ .deck-card {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ padding: 24px;
+ cursor: pointer;
+ transition: var(--transition);
+ }
+
+ .deck-card:hover {
+ transform: translateY(-4px);
+ box-shadow: var(--shadow);
+ border-color: var(--primary);
+ }
+
+ .deck-card.new {
+ border-style: dashed;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .add-deck {
+ text-align: center;
+ color: var(--text-secondary);
+ }
+
+ .add-deck i {
+ font-size: 40px;
+ margin-bottom: 12px;
+ color: var(--primary);
+ }
+
+ .deck-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 12px;
+ }
+
+ .deck-header h3 {
+ font-size: 18px;
+ font-weight: 700;
+ }
+
+ .mastery-badge {
+ padding: 4px 12px;
+ border-radius: 20px;
+ font-size: 12px;
+ font-weight: 700;
+ }
+
+ .mastery-badge.high { background: rgba(34,197,94,0.2); color: var(--success); }
+ .mastery-badge.medium { background: rgba(245,158,11,0.2); color: var(--warning); }
+ .mastery-badge.low { background: rgba(244,63,94,0.2); color: var(--accent); }
+
+ .deck-meta {
+ color: var(--text-secondary);
+ font-size: 13px;
+ margin-bottom: 16px;
+ }
+
+ .deck-progress {
+ height: 6px;
+ background: var(--bg-hover);
+ border-radius: 3px;
+ margin-bottom: 16px;
+ overflow: hidden;
+ }
+
+ .progress-bar {
+ height: 100%;
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
+ border-radius: 3px;
+ transition: width 0.5s ease;
+ }
+
+ .deck-actions {
+ display: flex;
+ gap: 8px;
+ }
+
+ .mini-btn {
+ flex: 1;
+ padding: 10px;
+ border-radius: 8px;
+ border: 1px solid var(--border);
+ background: var(--bg-hover);
+ color: var(--text-secondary);
+ font-size: 13px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: var(--transition);
+ }
+
+ .mini-btn:hover {
+ background: var(--border);
+ color: var(--text-primary);
+ }
+
+ .mini-btn.primary {
+ background: var(--primary);
+ color: var(--bg-dark);
+ border-color: var(--primary);
+ }
+
+ .feature-box {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ padding: 24px;
+ margin-bottom: 24px;
+ }
+
+ .feature-box h3 {
+ font-size: 16px;
+ font-weight: 700;
+ margin-bottom: 12px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .feature-box h3 i {
+ color: var(--primary);
+ }
+
+ .stat-card {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ padding: 24px;
+ transition: var(--transition);
+ }
+
+ .stat-card:hover {
+ transform: translateY(-4px);
+ border-color: var(--primary);
+ }
+
+ .grid-2 {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 20px;
+ margin-bottom: 24px;
+ }
+
+ .grid-4 {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 20px;
+ margin-bottom: 24px;
+ }
+
+ .tutor-container {
+ display: grid;
+ grid-template-columns: 1fr 300px;
+ gap: 24px;
+ }
+
+ .chat-area {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ height: 600px;
+ }
+
+ .chat-messages {
+ flex: 1;
+ overflow-y: auto;
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+
+ .message {
+ display: flex;
+ gap: 12px;
+ max-width: 85%;
+ }
+
+ .ai-message {
+ align-self: flex-start;
+ }
+
+ .message-avatar {
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-size: 14px;
+ flex-shrink: 0;
+ }
+
+ .message-content {
+ background: var(--bg-hover);
+ padding: 16px;
+ border-radius: 12px;
+ border-bottom-left-radius: 4px;
+ }
+
+ .message-content p {
+ margin-bottom: 8px;
+ line-height: 1.6;
+ }
+
+ .message-content ul {
+ margin: 12px 0;
+ padding-left: 20px;
+ color: var(--text-secondary);
+ }
+
+ .message-content li {
+ margin: 4px 0;
+ }
+
+ .chat-input-area {
+ padding: 16px;
+ border-top: 1px solid var(--border);
+ display: flex;
+ gap: 12px;
+ align-items: center;
+ }
+
+ .attach-btn {
+ width: 44px;
+ height: 44px;
+ border-radius: 12px;
+ border: 1px solid var(--border);
+ background: var(--bg-hover);
+ color: var(--text-secondary);
+ cursor: pointer;
+ transition: var(--transition);
+ }
+
+ .attach-btn:hover {
+ border-color: var(--primary);
+ color: var(--primary);
+ }
+
+ .chat-input {
+ flex: 1;
+ background: var(--bg-dark);
+ border: 1px solid var(--border);
+ padding: 12px 16px;
+ border-radius: 12px;
+ color: var(--text-primary);
+ font-size: 14px;
+ }
+
+ .chat-input:focus {
+ outline: none;
+ border-color: var(--primary);
+ }
+
+ .send-btn {
+ width: 44px;
+ height: 44px;
+ border-radius: 12px;
+ border: none;
+ background: var(--primary);
+ color: var(--bg-dark);
+ cursor: pointer;
+ transition: var(--transition);
+ }
+
+ .send-btn:hover {
+ transform: scale(1.05);
+ box-shadow: var(--glow-primary);
+ }
+
+ .tutor-sidebar {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ }
+
+ .sidebar-section {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ padding: 20px;
+ }
+
+ .sidebar-section h4 {
+ font-size: 13px;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ color: var(--text-secondary);
+ margin-bottom: 12px;
+ }
+
+ .quick-action {
+ width: 100%;
+ padding: 12px;
+ margin: 4px 0;
+ border-radius: 10px;
+ border: 1px solid var(--border);
+ background: var(--bg-hover);
+ color: var(--text-secondary);
+ font-size: 13px;
+ cursor: pointer;
+ transition: var(--transition);
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+
+ .quick-action:hover {
+ border-color: var(--primary);
+ color: var(--primary);
+ transform: translateX(4px);
+ }
+
+ .quick-action i {
+ color: var(--primary);
+ }
+
+ .file-list {
+ font-size: 13px;
+ color: var(--text-secondary);
+ }
+
+ .empty-state {
+ text-align: center;
+ padding: 20px;
+ color: var(--text-secondary);
+ }
+
+ .generator-panel {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ padding: 24px;
+ margin-bottom: 24px;
+ }
+
+ .input-row {
+ display: flex;
+ gap: 16px;
+ align-items: flex-end;
+ flex-wrap: wrap;
+ }
+
+ .input-group {
+ flex: 1;
+ min-width: 150px;
+ }
+
+ .input-group label {
+ display: block;
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--text-secondary);
+ margin-bottom: 6px;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ }
+
+ .question-list {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+
+ .practice-question {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ padding: 24px;
+ transition: var(--transition);
+ }
+
+ .practice-question:hover {
+ border-color: var(--border);
+ box-shadow: var(--shadow);
+ }
+
+ .question-header {
+ display: flex;
+ gap: 12px;
+ align-items: center;
+ margin-bottom: 16px;
+ }
+
+ .question-number {
+ padding: 4px 12px;
+ background: var(--primary);
+ color: var(--bg-dark);
+ border-radius: 20px;
+ font-size: 12px;
+ font-weight: 700;
+ }
+
+ .difficulty-badge {
+ padding: 4px 10px;
+ border-radius: 20px;
+ font-size: 11px;
+ font-weight: 600;
+ text-transform: uppercase;
+ }
+
+ .difficulty-badge.easy { background: rgba(34,197,94,0.2); color: var(--success); }
+ .difficulty-badge.medium { background: rgba(245,158,11,0.2); color: var(--warning); }
+ .difficulty-badge.hard { background: rgba(244,63,94,0.2); color: var(--accent); }
+
+ .question-text {
+ font-size: 16px;
+ line-height: 1.6;
+ margin-bottom: 20px;
+ }
+
+ .answer-options {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 12px;
+ }
+
+ .option-btn {
+ padding: 16px;
+ background: var(--bg-hover);
+ border: 2px solid var(--border);
+ border-radius: 12px;
+ color: var(--text-primary);
+ font-size: 14px;
+ cursor: pointer;
+ transition: var(--transition);
+ text-align: left;
+ }
+
+ .option-btn:hover {
+ border-color: var(--primary);
+ background: rgba(0,212,255,0.1);
+ }
+
+ .option-btn.selected {
+ border-color: var(--primary);
+ background: rgba(0,212,255,0.15);
+ }
+
+ .answer-section {
+ margin: 20px 0;
+ }
+
+ .answer-content {
+ background: var(--bg-hover);
+ padding: 20px;
+ border-radius: 12px;
+ margin-top: 12px;
+ line-height: 1.6;
+ }
+
+ .answer-content.hidden {
+ display: none;
+ }
+
+ .answer-content p {
+ margin-bottom: 12px;
+ }
+
+ .feedback-buttons {
+ display: flex;
+ gap: 12px;
+ }
+
+ .feedback-btn {
+ flex: 1;
+ padding: 12px;
+ border-radius: 10px;
+ border: 1px solid var(--border);
+ background: var(--bg-hover);
+ color: var(--text-secondary);
+ font-size: 13px;
+ cursor: pointer;
+ transition: var(--transition);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ }
+
+ .feedback-btn:hover {
+ transform: translateY(-2px);
+ }
+
+ .feedback-btn.correct:hover {
+ background: rgba(34,197,94,0.1);
+ border-color: var(--success);
+ color: var(--success);
+ }
+
+ .feedback-btn.wrong:hover {
+ background: rgba(244,63,94,0.1);
+ border-color: var(--accent);
+ color: var(--accent);
+ }
+
+ .export-options {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+ gap: 20px;
+ margin-bottom: 32px;
+ }
+
+ .export-card {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ padding: 24px;
+ text-align: center;
+ transition: var(--transition);
+ position: relative;
+ }
+
+ .export-card:hover {
+ transform: translateY(-4px);
+ border-color: var(--primary);
+ }
+
+ .export-card.featured {
+ border-color: var(--warning);
+ background: linear-gradient(135deg, rgba(245,158,11,0.05), transparent);
+ }
+
+ .export-icon {
+ width: 56px;
+ height: 56px;
+ border-radius: 16px;
+ background: var(--bg-hover);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 auto 16px;
+ font-size: 24px;
+ color: var(--warning);
+ }
+
+ .export-card h3 {
+ font-size: 16px;
+ margin-bottom: 8px;
+ }
+
+ .export-card p {
+ color: var(--text-secondary);
+ font-size: 13px;
+ margin-bottom: 20px;
+ }
+
+ .plan-badge {
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ padding: 4px 10px;
+ background: var(--warning);
+ color: var(--bg-dark);
+ border-radius: 20px;
+ font-size: 10px;
+ font-weight: 700;
+ text-transform: uppercase;
+ }
+
+ .export-settings {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ padding: 24px;
+ }
+
+ .export-settings h3 {
+ margin-bottom: 20px;
+ }
+
+ .settings-row {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ }
+
+ .toggle-label {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ cursor: pointer;
+ font-size: 14px;
+ color: var(--text-secondary);
+ }
+
+ .toggle-label input {
+ display: none;
+ }
+
+ .toggle {
+ width: 44px;
+ height: 24px;
+ background: var(--bg-hover);
+ border-radius: 12px;
+ position: relative;
+ transition: var(--transition);
+ flex-shrink: 0;
+ }
+
+ .toggle::after {
+ content: "";
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ background: white;
+ border-radius: 50%;
+ top: 2px;
+ left: 2px;
+ transition: var(--transition);
+ }
+
+ .toggle-label input:checked + .toggle {
+ background: var(--primary);
+ }
+
+ .toggle-label input:checked + .toggle::after {
+ left: 22px;
+ }
+
+ .solver-container {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ padding: 24px;
+ }
+
+ .input-methods {
+ display: flex;
+ gap: 12px;
+ margin-bottom: 24px;
+ border-bottom: 1px solid var(--border);
+ padding-bottom: 20px;
+ }
+
+ .input-method {
+ flex: 1;
+ padding: 16px;
+ border-radius: 12px;
+ border: 2px solid var(--border);
+ background: var(--bg-hover);
+ color: var(--text-secondary);
+ cursor: pointer;
+ transition: var(--transition);
+ text-align: center;
+ }
+
+ .input-method:hover {
+ border-color: var(--border);
+ color: var(--text-primary);
+ }
+
+ .input-method.active {
+ border-color: var(--primary);
+ background: rgba(0,212,255,0.1);
+ color: var(--primary);
+ }
+
+ .input-method i {
+ display: block;
+ font-size: 24px;
+ margin-bottom: 8px;
+ }
+
+ .solver-workspace {
+ position: relative;
+ }
+
+ .solver-panel {
+ display: none;
+ }
+
+ .solver-panel.active {
+ display: block;
+ }
+
+ .upload-zone {
+ border: 2px dashed var(--border);
+ border-radius: 16px;
+ padding: 60px 40px;
+ text-align: center;
+ cursor: pointer;
+ transition: var(--transition);
+ }
+
+ .upload-zone:hover {
+ border-color: var(--primary);
+ background: rgba(0,212,255,0.05);
+ }
+
+ .upload-zone i {
+ font-size: 48px;
+ color: var(--primary);
+ margin-bottom: 16px;
+ }
+
+ .upload-zone p {
+ margin-bottom: 8px;
+ }
+
+ .formats {
+ color: var(--text-secondary);
+ font-size: 13px;
+ }
+
+ .solver-textarea {
+ width: 100%;
+ min-height: 200px;
+ background: var(--bg-dark);
+ border: 1px solid var(--border);
+ border-radius: 12px;
+ padding: 16px;
+ color: var(--text-primary);
+ font-size: 15px;
+ resize: vertical;
+ }
+
+ .solver-textarea:focus {
+ outline: none;
+ border-color: var(--primary);
+ }
+
+ .math-toolbar {
+ display: flex;
+ gap: 8px;
+ margin-top: 12px;
+ flex-wrap: wrap;
+ }
+
+ .math-toolbar button {
+ padding: 8px 14px;
+ background: var(--bg-hover);
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ color: var(--text-secondary);
+ font-size: 13px;
+ cursor: pointer;
+ transition: var(--transition);
+ }
+
+ .math-toolbar button:hover {
+ border-color: var(--primary);
+ color: var(--primary);
+ }
+
+ .solve-button {
+ width: 100%;
+ padding: 16px;
+ margin-top: 20px;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ border: none;
+ border-radius: 12px;
+ color: var(--bg-dark);
+ font-size: 16px;
+ font-weight: 700;
+ cursor: pointer;
+ transition: var(--transition);
+ }
+
+ .solve-button:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--glow-primary);
+ }
+
+ .solution-result {
+ margin-top: 24px;
+ padding: 24px;
+ background: var(--bg-hover);
+ border-radius: 12px;
+ border-left: 4px solid var(--success);
+ }
+
+ .solution-header {
+ margin-bottom: 16px;
+ }
+
+ .solution-badge {
+ padding: 6px 12px;
+ background: rgba(34,197,94,0.2);
+ color: var(--success);
+ border-radius: 20px;
+ font-size: 12px;
+ font-weight: 600;
+ }
+
+ .solution-steps {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+
+ .step {
+ display: flex;
+ gap: 16px;
+ align-items: flex-start;
+ }
+
+ .step-num {
+ width: 28px;
+ height: 28px;
+ background: var(--primary);
+ color: var(--bg-dark);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ font-weight: 700;
+ flex-shrink: 0;
+ }
+
+ .step p {
+ flex: 1;
+ line-height: 1.6;
+ }
+
+ .settings-layout {
+ display: grid;
+ grid-template-columns: 240px 1fr;
+ gap: 24px;
+ }
+
+ .settings-nav {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+
+ .settings-tab {
+ padding: 14px 16px;
+ border-radius: 12px;
+ border: none;
+ background: transparent;
+ color: var(--text-secondary);
+ font-size: 14px;
+ cursor: pointer;
+ transition: var(--transition);
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ text-align: left;
+ }
+
+ .settings-tab:hover {
+ background: var(--bg-hover);
+ color: var(--text-primary);
+ }
+
+ .settings-tab.active {
+ background: var(--primary);
+ color: var(--bg-dark);
+ font-weight: 600;
+ }
+
+ .settings-content {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ padding: 32px;
+ }
+
+ .settings-panel {
+ display: none;
+ }
+
+ .settings-panel.active {
+ display: block;
+ }
+
+ .settings-panel h3 {
+ font-size: 18px;
+ margin-bottom: 24px;
+ padding-bottom: 16px;
+ border-bottom: 1px solid var(--border);
+ }
+
+ .profile-header {
+ display: flex;
+ gap: 24px;
+ margin-bottom: 32px;
+ }
+
+ .avatar-upload {
+ text-align: center;
+ }
+
+ .avatar-preview {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 12px;
+ }
+
+ .avatar-preview i {
+ font-size: 40px;
+ color: white;
+ }
+
+ .profile-fields {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+
+ .field label {
+ display: block;
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--text-secondary);
+ margin-bottom: 6px;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ }
+
+ .theme-options {
+ display: flex;
+ gap: 16px;
+ margin-bottom: 32px;
+ }
+
+ .theme-option {
+ cursor: pointer;
+ text-align: center;
+ }
+
+ .theme-preview {
+ width: 80px;
+ height: 60px;
+ border-radius: 12px;
+ border: 2px solid var(--border);
+ margin-bottom: 8px;
+ transition: var(--transition);
+ }
+
+ .theme-preview.dark {
+ background: linear-gradient(135deg, #1a1a2e, #0a0a0f);
+ }
+
+ .theme-preview.light {
+ background: linear-gradient(135deg, #f8fafc, #e2e8f0);
+ }
+
+ .theme-preview.auto {
+ background: linear-gradient(90deg, #1a1a2e 50%, #f8fafc 50%);
+ }
+
+ .theme-option:hover .theme-preview {
+ border-color: var(--primary);
+ }
+
+ .theme-option.active .theme-preview {
+ border-color: var(--primary);
+ box-shadow: var(--glow-primary);
+ }
+
+ .slider-setting {
+ margin-bottom: 24px;
+ }
+
+ .slider-setting label {
+ display: block;
+ margin-bottom: 12px;
+ font-weight: 500;
+ }
+
+ .modern-slider {
+ width: 100%;
+ height: 6px;
+ background: var(--bg-hover);
+ border-radius: 3px;
+ outline: none;
+ -webkit-appearance: none;
+ }
+
+ .modern-slider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ width: 18px;
+ height: 18px;
+ background: var(--primary);
+ border-radius: 50%;
+ cursor: pointer;
+ }
+
+ .language-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 12px;
+ }
+
+ .lang-btn {
+ padding: 12px;
+ border-radius: 10px;
+ border: 1px solid var(--border);
+ background: var(--bg-hover);
+ color: var(--text-secondary);
+ font-size: 13px;
+ cursor: pointer;
+ transition: var(--transition);
+ }
+
+ .lang-btn:hover {
+ border-color: var(--primary);
+ color: var(--primary);
+ }
+
+ .lang-btn.active {
+ background: var(--primary);
+ color: var(--bg-dark);
+ border-color: var(--primary);
+ font-weight: 600;
+ }
+
+ .settings-footer {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 32px;
+ padding-top: 24px;
+ border-top: 1px solid var(--border);
+ }
+
+ .pricing-toggle {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+ margin-bottom: 40px;
+ }
+
+ .pricing-toggle span {
+ color: var(--text-secondary);
+ font-weight: 500;
+ }
+
+ .pricing-toggle span.active {
+ color: var(--text-primary);
+ }
+
+ .switch {
+ position: relative;
+ width: 56px;
+ height: 28px;
+ }
+
+ .switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+ }
+
+ .slider {
+ position: absolute;
+ cursor: pointer;
+ inset: 0;
+ background: var(--bg-hover);
+ border-radius: 28px;
+ transition: var(--transition);
+ }
+
+ .slider::before {
+ content: "";
+ position: absolute;
+ height: 22px;
+ width: 22px;
+ left: 3px;
+ bottom: 3px;
+ background: white;
+ border-radius: 50%;
+ transition: var(--transition);
+ }
+
+ input:checked + .slider {
+ background: var(--primary);
+ }
+
+ input:checked + .slider::before {
+ transform: translateX(28px);
+ }
+
+ .save-badge {
+ padding: 4px 10px;
+ background: var(--success);
+ color: var(--bg-dark);
+ border-radius: 20px;
+ font-size: 11px;
+ font-weight: 700;
+ margin-left: 8px;
+ }
+
+ .pricing-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 24px;
+ margin-bottom: 40px;
+ }
+
+ .pricing-card {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 20px;
+ padding: 32px 24px;
+ position: relative;
+ transition: var(--transition);
+ }
+
+ .pricing-card:hover {
+ transform: translateY(-4px);
+ box-shadow: var(--shadow);
+ }
+
+ .pricing-card.popular {
+ border-color: var(--primary);
+ box-shadow: var(--glow-primary);
+ }
+
+ .popular-badge {
+ position: absolute;
+ top: -12px;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 6px 16px;
+ background: var(--primary);
+ color: var(--bg-dark);
+ border-radius: 20px;
+ font-size: 12px;
+ font-weight: 700;
+ }
+
+ .plan-header {
+ text-align: center;
+ margin-bottom: 24px;
+ }
+
+ .plan-header h3 {
+ font-size: 20px;
+ margin-bottom: 8px;
+ }
+
+ .price {
+ font-size: 36px;
+ font-weight: 800;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .price span {
+ font-size: 14px;
+ color: var(--text-secondary);
+ font-weight: 400;
+ -webkit-text-fill-color: var(--text-secondary);
+ }
+
+ .features {
+ list-style: none;
+ margin-bottom: 24px;
+ }
+
+ .features li {
+ padding: 10px 0;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+
+ .features li i {
+ color: var(--success);
+ }
+
+ .features li.disabled {
+ color: var(--text-secondary);
+ opacity: 0.5;
+ }
+
+ .features li.disabled i {
+ color: var(--text-secondary);
+ }
+
+ .payment-methods {
+ text-align: center;
+ }
+
+ .payment-methods h3 {
+ margin-bottom: 20px;
+ font-size: 16px;
+ }
+
+ .payment-icons {
+ display: flex;
+ justify-content: center;
+ gap: 24px;
+ flex-wrap: wrap;
+ }
+
+ .payment-icon {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: var(--text-secondary);
+ font-size: 14px;
+ }
+
+ .payment-icon i {
+ font-size: 24px;
+ }
+
+ .file-toolbar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24px;
+ flex-wrap: wrap;
+ gap: 16px;
+ }
+
+ .file-filters {
+ display: flex;
+ gap: 8px;
+ }
+
+ .filter-btn {
+ padding: 8px 16px;
+ border-radius: 8px;
+ border: 1px solid var(--border);
+ background: var(--bg-hover);
+ color: var(--text-secondary);
+ font-size: 13px;
+ cursor: pointer;
+ transition: var(--transition);
+ }
+
+ .filter-btn:hover, .filter-btn.active {
+ background: var(--primary);
+ color: var(--bg-dark);
+ border-color: var(--primary);
+ }
+
+ .storage-indicator {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ font-size: 13px;
+ color: var(--text-secondary);
+ }
+
+ .storage-bar {
+ width: 100px;
+ height: 6px;
+ background: var(--bg-hover);
+ border-radius: 3px;
+ overflow: hidden;
+ }
+
+ .storage-bar div {
+ height: 100%;
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
+ border-radius: 3px;
+ transition: width 0.3s;
+ }
+
+ .file-grid {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+
+ .file-item {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ padding: 16px 20px;
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 12px;
+ transition: var(--transition);
+ }
+
+ .file-item:hover {
+ border-color: var(--primary);
+ transform: translateX(4px);
+ }
+
+ .file-icon {
+ width: 44px;
+ height: 44px;
+ border-radius: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 18px;
+ }
+
+ .file-icon.pdf { background: rgba(239,68,68,0.1); color: #ef4444; }
+ .file-icon.docx { background: rgba(59,130,246,0.1); color: #3b82f6; }
+ .file-icon.pptx { background: rgba(249,115,22,0.1); color: #f97316; }
+ .file-icon.image { background: rgba(34,197,94,0.1); color: #22c55e; }
+
+ .file-info {
+ flex: 1;
+ }
+
+ .file-info h4 {
+ font-size: 14px;
+ font-weight: 600;
+ margin-bottom: 4px;
+ }
+
+ .file-meta {
+ font-size: 12px;
+ color: var(--text-secondary);
+ }
+
+ .file-actions {
+ display: flex;
+ gap: 8px;
+ }
+
+ .file-actions button {
+ width: 36px;
+ height: 36px;
+ border-radius: 8px;
+ border: 1px solid var(--border);
+ background: var(--bg-hover);
+ color: var(--text-secondary);
+ cursor: pointer;
+ transition: var(--transition);
+ }
+
+ .file-actions button:hover {
+ border-color: var(--primary);
+ color: var(--primary);
+ transform: translateY(-2px);
+ }
+
+ .blog-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 24px;
+ }
+
+ .blog-card {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ overflow: hidden;
+ transition: var(--transition);
+ cursor: pointer;
+ }
+
+ .blog-card:hover {
+ transform: translateY(-4px);
+ box-shadow: var(--shadow);
+ border-color: var(--primary);
+ }
+
+ .blog-image {
+ height: 160px;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 48px;
+ color: white;
+ }
+
+ .blog-content {
+ padding: 20px;
+ }
+
+ .blog-tag {
+ display: inline-block;
+ padding: 4px 10px;
+ background: var(--bg-hover);
+ color: var(--primary);
+ border-radius: 20px;
+ font-size: 11px;
+ font-weight: 600;
+ text-transform: uppercase;
+ margin-bottom: 12px;
+ }
+
+ .blog-content h3 {
+ font-size: 16px;
+ margin-bottom: 8px;
+ }
+
+ .blog-content p {
+ color: var(--text-secondary);
+ font-size: 14px;
+ line-height: 1.5;
+ margin-bottom: 12px;
+ }
+
+ .blog-date {
+ font-size: 12px;
+ color: var(--text-secondary);
+ }
+
+ .error-page {
+ text-align: center;
+ padding: 80px 20px;
+ }
+
+ .error-page h1 {
+ font-size: 48px;
+ margin-bottom: 16px;
+ }
+
+ @media (max-width: 1024px) {
+ .sidebar {
+ width: 80px;
+ padding: 20px 12px;
+ }
+
+ .nav-brand span, .nav-link span, .nav-label {
+ display: none;
+ }
+
+ .nav-brand {
+ justify-content: center;
+ }
+
+ .nav-link {
+ justify-content: center;
+ padding: 16px;
+ }
+
+ .nav-link::before {
+ width: 100%;
+ height: 3px;
+ transform: scaleX(0);
+ }
+
+ .content-main {
+ margin-left: 80px;
+ }
+
+ .tutor-container {
+ grid-template-columns: 1fr;
+ }
+
+ .tutor-sidebar {
+ display: none;
+ }
+
+ .settings-layout {
+ grid-template-columns: 1fr;
+ }
+
+ .settings-nav {
+ flex-direction: row;
+ overflow-x: auto;
+ padding-bottom: 8px;
+ }
+
+ .pricing-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .quick-stats {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ }
+
+ @media (max-width: 640px) {
+ .sidebar {
+ width: 100%;
+ height: 70px;
+ position: fixed;
+ bottom: 0;
+ top: auto;
+ flex-direction: row;
+ padding: 8px;
+ border-right: none;
+ border-top: 1px solid var(--border);
+ }
+
+ .nav-brand, .nav-label {
+ display: none;
+ }
+
+ .nav-section {
+ display: flex;
+ margin: 0;
+ }
+
+ .content-main {
+ margin-left: 0;
+ margin-bottom: 70px;
+ padding: 20px;
+ }
+
+ .dashboard-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .quick-stats {
+ grid-template-columns: 1fr;
+ }
+
+ .language-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .grid-2, .grid-4 {
+ grid-template-columns: 1fr;
+ }
+ }
+
+ /* YouTube Converter Styles */
+ .youtube-converter { max-width: 900px; }
+
+ .url-input-wrapper {
+ display: flex;
+ gap: 12px;
+ align-items: center;
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ padding: 12px 20px;
+ }
+
+ .url-input-wrapper i {
+ font-size: 24px;
+ color: #ff0000;
+ }
+
+ .url-input-wrapper input {
+ flex: 1;
+ background: transparent;
+ border: none;
+ color: var(--text-primary);
+ font-size: 15px;
+ }
+
+ .url-input-wrapper input:focus {
+ outline: none;
+ }
+
+ .input-hint {
+ color: var(--text-secondary);
+ font-size: 13px;
+ margin-top: 12px;
+ text-align: center;
+ }
+
+ .progress-panel {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ padding: 24px;
+ margin-top: 24px;
+ }
+
+ .progress-panel.hidden,
+ .results-panel.hidden {
+ display: none;
+ }
+
+ .progress-steps {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 24px;
+ }
+
+ .progress-steps .step {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ color: var(--text-secondary);
+ font-size: 13px;
+ }
+
+ .progress-steps .step.active {
+ color: var(--primary);
+ }
+
+ .step-icon {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: var(--bg-hover);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 16px;
+ }
+
+ .step.active .step-icon {
+ background: var(--primary);
+ color: var(--bg-dark);
+ }
+
+ .progress-bar-container {
+ height: 6px;
+ background: var(--bg-hover);
+ border-radius: 3px;
+ overflow: hidden;
+ }
+
+ .progress-bar-fill {
+ height: 100%;
+ width: 0%;
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
+ border-radius: 3px;
+ transition: width 0.5s ease;
+ }
+
+ .results-panel {
+ margin-top: 24px;
+ }
+
+ .video-preview {
+ display: flex;
+ gap: 20px;
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ padding: 20px;
+ margin-bottom: 24px;
+ }
+
+ .thumbnail {
+ width: 160px;
+ height: 90px;
+ background: var(--bg-hover);
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 40px;
+ color: var(--primary);
+ flex-shrink: 0;
+ }
+
+ .video-info h3 {
+ font-size: 18px;
+ margin-bottom: 8px;
+ }
+
+ .video-info p {
+ color: var(--text-secondary);
+ font-size: 14px;
+ margin-bottom: 12px;
+ }
+
+ .video-stats {
+ display: flex;
+ gap: 20px;
+ font-size: 13px;
+ color: var(--text-secondary);
+ }
+
+ .video-stats strong {
+ color: var(--primary);
+ }
+
+ .output-options h3 {
+ margin-bottom: 16px;
+ }
+
+ .output-cards {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 16px;
+ }
+
+ .output-card {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 16px;
+ padding: 20px;
+ text-align: center;
+ cursor: pointer;
+ transition: var(--transition);
+ }
+
+ .output-card:hover {
+ transform: translateY(-4px);
+ border-color: var(--primary);
+ }
+
+ .output-icon {
+ width: 48px;
+ height: 48px;
+ border-radius: 12px;
+ background: var(--bg-hover);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 auto 12px;
+ font-size: 20px;
+ color: var(--primary);
+ }
+
+ .output-card h4 {
+ font-size: 14px;
+ margin-bottom: 8px;
+ }
+
+ .output-card p {
+ font-size: 13px;
+ color: var(--text-secondary);
+ margin-bottom: 12px;
+ }
+
+ @media (max-width: 768px) {
+ .output-cards {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .video-preview {
+ flex-direction: column;
+ }
+
+ .thumbnail {
+ width: 100%;
+ height: 180px;
+ }
+
+ .progress-steps {
+ flex-wrap: wrap;
+ gap: 12px;
+ }
+ }
+
+ /* Quiz Styles */
+ .quiz-container {
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 20px;
+ padding: 32px;
+ margin-bottom: 32px;
+ }
+
+ .subject-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 12px;
+ margin: 20px 0;
+ }
+
+ .subject-btn {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ padding: 20px 16px;
+ background: var(--bg-hover);
+ border: 2px solid var(--border);
+ border-radius: 12px;
+ color: var(--text-secondary);
+ font-size: 14px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: var(--transition);
+ }
+
+ .subject-btn i {
+ font-size: 24px;
+ color: var(--primary);
+ }
+
+ .subject-btn:hover, .subject-btn.active {
+ border-color: var(--primary);
+ background: rgba(0,212,255,0.1);
+ color: var(--text-primary);
+ }
+
+ .quiz-options {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 20px;
+ margin: 24px 0;
+ }
+
+ .option-row label {
+ display: block;
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--text-secondary);
+ margin-bottom: 8px;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ }
+
+ .quiz-progress-bar {
+ height: 6px;
+ background: var(--bg-hover);
+ border-radius: 3px;
+ margin-bottom: 24px;
+ overflow: hidden;
+ }
+
+ .progress-fill {
+ height: 100%;
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
+ border-radius: 3px;
+ width: 0%;
+ transition: width 0.3s ease;
+ }
+
+ .quiz-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24px;
+ padding-bottom: 16px;
+ border-bottom: 1px solid var(--border);
+ }
+
+ .quiz-subject {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--primary);
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ }
+
+ .quiz-score {
+ font-size: 14px;
+ color: var(--text-secondary);
+ }
+
+ .quiz-score strong {
+ color: var(--success);
+ font-size: 18px;
+ }
+
+ .quiz-question-container {
+ text-align: center;
+ }
+
+ .question-number {
+ font-size: 13px;
+ color: var(--text-secondary);
+ margin-bottom: 12px;
+ }
+
+ .question-text {
+ font-size: 22px;
+ font-weight: 600;
+ margin-bottom: 32px;
+ line-height: 1.4;
+ }
+
+ .quiz-option {
+ width: 100%;
+ padding: 18px 24px;
+ margin: 8px 0;
+ background: var(--bg-hover);
+ border: 2px solid var(--border);
+ border-radius: 12px;
+ color: var(--text-primary);
+ font-size: 16px;
+ cursor: pointer;
+ transition: var(--transition);
+ text-align: left;
+ }
+
+ .quiz-option:hover {
+ border-color: var(--primary);
+ background: rgba(0,212,255,0.05);
+ transform: translateX(4px);
+ }
+
+ .quiz-option.correct {
+ background: rgba(34,197,94,0.2);
+ border-color: var(--success);
+ color: var(--success);
+ }
+
+ .quiz-option.incorrect {
+ background: rgba(244,63,94,0.2);
+ border-color: var(--accent);
+ color: var(--accent);
+ }
+
+ .quiz-option.disabled {
+ opacity: 0.6;
+ pointer-events: none;
+ }
+
+ .quiz-feedback {
+ text-align: center;
+ padding: 40px;
+ background: var(--bg-hover);
+ border-radius: 16px;
+ margin-top: 24px;
+ }
+
+ .feedback-icon {
+ font-size: 64px;
+ margin-bottom: 16px;
+ }
+
+ .feedback-icon.correct {
+ color: var(--success);
+ }
+
+ .feedback-icon.incorrect {
+ color: var(--accent);
+ }
+
+ .quiz-feedback h3 {
+ font-size: 24px;
+ margin-bottom: 12px;
+ }
+
+ .quiz-feedback p {
+ color: var(--text-secondary);
+ margin-bottom: 24px;
+ }
+
+ .quiz-results {
+ text-align: center;
+ padding: 40px;
+ }
+
+ .trophy {
+ font-size: 80px;
+ color: #ffd700;
+ margin-bottom: 20px;
+ animation: trophyBounce 0.6s ease;
+ }
+
+ @keyframes trophyBounce {
+ 0%, 100% { transform: scale(1); }
+ 50% { transform: scale(1.2); }
+ }
+
+ .final-score {
+ font-size: 18px;
+ color: var(--text-secondary);
+ margin: 16px 0;
+ }
+
+ .percentage {
+ font-size: 48px;
+ font-weight: 800;
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ margin-bottom: 24px;
+ }
+
+ .results-breakdown {
+ display: flex;
+ justify-content: center;
+ gap: 40px;
+ margin: 32px 0;
+ }
+
+ .breakdown-item {
+ text-align: center;
+ }
+
+ .breakdown-item .count {
+ display: block;
+ font-size: 32px;
+ font-weight: 700;
+ margin-bottom: 4px;
+ }
+
+ .breakdown-item.correct .count {
+ color: var(--success);
+ }
+
+ .breakdown-item.incorrect .count {
+ color: var(--accent);
+ }
+
+ .breakdown-item.time .count {
+ color: var(--primary);
+ }
+
+ .breakdown-item .label {
+ font-size: 13px;
+ color: var(--text-secondary);
+ }
+
+ .results-actions {
+ display: flex;
+ gap: 16px;
+ justify-content: center;
+ }
+
+ .confetti-canvas {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 1000;
+ }
+
+ .quiz-stats-section {
+ margin-top: 32px;
+ }
+
+ .quiz-stats-section h3 {
+ margin-bottom: 20px;
+ font-size: 18px;
+ }
+
+ .stats-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 16px;
+ }
+
+ .stat-card {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ border-radius: 12px;
+ padding: 16px;
+ }
+
+ .stat-icon {
+ width: 48px;
+ height: 48px;
+ border-radius: 12px;
+ background: var(--bg-hover);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 20px;
+ color: var(--primary);
+ }
+
+ .stat-info {
+ flex: 1;
+ }
+
+ .stat-name {
+ display: block;
+ font-weight: 600;
+ font-size: 14px;
+ }
+
+ .stat-count {
+ display: block;
+ font-size: 12px;
+ color: var(--text-secondary);
+ margin: 4px 0;
+ }
+
+ .stat-progress {
+ height: 4px;
+ background: var(--bg-hover);
+ border-radius: 2px;
+ overflow: hidden;
+ }
+
+ .stat-progress > div {
+ height: 100%;
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
+ border-radius: 2px;
+ }
+
+ @media (max-width: 768px) {
+ .subject-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .quiz-options {
+ grid-template-columns: 1fr;
+ }
+
+ .stats-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .results-breakdown {
+ flex-direction: column;
+ gap: 20px;
+ }
+ }
+ "
+}
+
+fn get_all_scripts() -> String {
+ "
+ // Language settings
+ function setLanguage(lang) {
+ localStorage.setItem("language", lang);
+ document.querySelectorAll(".lang-icon, .lang-btn").forEach(btn => {
+ btn.classList.remove("active");
+ if(btn.textContent.toLowerCase().includes(lang)) btn.classList.add("active");
+ });
+ }
+
+ // Login
+ function login() {
+ const name = document.getElementById("user").value;
+ if(name) {
+ localStorage.setItem("student_name", name);
+ location.href = "/hub";
+ }
+ }
+
+ // Display name
+ if(document.getElementById("display-name")) {
+ document.getElementById("display-name").textContent = localStorage.getItem("student_name") || "Student";
+ }
+
+ // Settings tabs
+ function showSettingsTab(tab) {
+ document.querySelectorAll(".settings-tab").forEach(t => t.classList.remove("active"));
+ event.target.classList.add("active");
+ document.querySelectorAll(".settings-panel").forEach(p => p.classList.remove("active"));
+ document.getElementById(tab + "Tab").classList.add("active");
+ }
+
+ // Theme
+ function setTheme(theme) {
+ localStorage.setItem("theme", theme);
+ document.querySelectorAll(".theme-option").forEach(t => t.classList.remove("active"));
+ event.currentTarget.classList.add("active");
+ }
+
+ // Animation intensity
+ function updateAnimationIntensity(value) {
+ document.getElementById("animationValue").textContent = value + "%";
+ document.documentElement.style.setProperty("--hover-intensity", value / 100);
+ }
+
+ // Settings
+ function saveSettings() {
+ alert("Settings saved successfully!");
+ }
+
+ function resetSettings() {
+ if(confirm("Reset all settings to default?")) {
+ localStorage.clear();
+ location.reload();
+ }
+ }
+
+ // AI Problem Solver with real solutions
+ const mathSolver = {
+ solveQuadratic(a, b, c) {
+ const discriminant = b*b - 4*a*c;
+ if (discriminant < 0) {
+ return {real: false, message: "No real solutions (discriminant < 0)"};
+ }
+ const x1 = (-b + Math.sqrt(discriminant)) / (2*a);
+ const x2 = (-b - Math.sqrt(discriminant)) / (2*a);
+ return {real: true, x1, x2, discriminant};
+ },
+
+ solveLinearEquation(equation) {
+ // Simple linear equation solver for ax + b = c format
+ const match = equation.match(/(-?\\d*)x\\s*([+-])\\s*(\\d+)\\s*=\\s*(-?\\d+)/);
+ if (match) {
+ let a = match[1] ? (match[1] === "-" ? -1 : parseInt(match[1])) : 1;
+ const sign = match[2] === "+" ? 1 : -1;
+ const b = sign * parseInt(match[3]);
+ const c = parseInt(match[4]);
+ const x = (c - b) / a;
+ }
+ return {solved: false};
+ },
+
+ calculate(expression) {
+ try {
+ // Basic safe evaluation
+ const sanitized = expression.replace(/[^0-9+\\-*/().\\s]/g, "");
+ const result = Function(""use strict"; return (" + sanitized + ")")();
+ return {valid: true, result};
+ } catch (e) {
+ return {valid: false, error: e.message};
+ }
+ },
+
+ factorQuadratic(a, b, c) {
+ if (a === 1) {
+ // Find two numbers that multiply to c and add to b
+ for (let i = -Math.abs(c); i <= Math.abs(c); i++) {
+ if (i === 0) continue;
+ if (c % i === 0) {
+ const j = c / i;
+ if (i + j === b) {
+ }
+ }
+ }
+ }
+ return {factored: false};
+ }
+ };
+
+ function solveProblem() {
+ const activePanel = document.querySelector(".solver-panel.active");
+ const uploadPanel = document.getElementById("uploadPanel");
+ const typePanel = document.getElementById("typePanel");
+ const voicePanel = document.getElementById("voicePanel");
+
+ let problemText = "";
+ let problemType = "math";
+
+ // Determine which panel is active
+ if (typePanel && typePanel.classList.contains("active")) {
+ const textarea = typePanel.querySelector(".solver-textarea");
+ problemText = textarea ? textarea.value.trim() : "";
+ } else if (uploadPanel && uploadPanel.classList.contains("active")) {
+ problemText = "Image uploaded. Analyzing mathematical content...";
+ problemType = "image";
+ } else if (voicePanel && voicePanel.classList.contains("active")) {
+ problemText = document.getElementById("voiceTranscript") ? document.getElementById("voiceTranscript").textContent : "";
+ }
+
+ if (!problemText && problemType !== "image") {
+ alert("Please enter a problem to solve!");
+ return;
+ }
+
+ const resultContainer = document.getElementById("solutionResult");
+ if (!resultContainer) return;
+
+ // Show solving animation
+ resultContainer.style.display = "block";
+ resultContainer.innerHTML = `
+//
+//
+ `;
+ resultContainer.scrollIntoView({ behavior: "smooth" });
+
+ // Simulate processing time
+ setTimeout(() => {
+ const solution = generateSolution(problemText, problemType);
+ displaySolution(solution);
+ }, 1500 + Math.random() * 1000);
+ }
+
+ function generateSolution(problemText, problemType) {
+ const lowerProblem = problemText.toLowerCase();
+
+ // Detect problem type and solve
+ let solution = {
+ type: "general",
+ problem: problemText,
+ steps: [],
+ finalAnswer: "",
+ explanation: ""
+ };
+
+ // Quadratic equation detection - simplified pattern
+ const quadMatch = problemText.match(/x.2.*=.*0/);
+ if (quadMatch || lowerProblem.includes("quadratic") || lowerProblem.includes("x²")) {
+ solution.type = "quadratic";
+ solution.problem = problemText || "x² + 5x + 6 = 0";
+
+ // Extract coefficients (simplified demo)
+ let a = 1, b = 5, c = 6;
+ if (problemText.includes("x² + 4x + 4")) { a=1; b=4; c=4; }
+ else if (problemText.includes("x² - 9")) { a=1; b=0; c=-9; }
+ else if (problemText.includes("2x²")) { a=2; b=7; c=3; }
+
+ const result = mathSolver.solveQuadratic(a, b, c);
+
+ solution.steps = [
+ {num: 3, text: `Apply quadratic formula: x = (-b ± √Δ) / 2a`},
+ ];
+
+ if (result.real) {
+
+ // Check if factorable
+ const factored = mathSolver.factorQuadratic(a, b, c);
+ if (factored.factored) {
+ }
+ } else {
+ solution.finalAnswer = "No real solutions";
+ solution.explanation = "The discriminant is negative, meaning the solutions are complex numbers.";
+ }
+ }
+ // Linear equation
+ else if (lowerProblem.includes("x +") || lowerProblem.includes("x -") || lowerProblem.includes("2x") || lowerProblem.includes("3x")) {
+ solution.type = "linear";
+ solution.problem = problemText || "2x + 5 = 13";
+
+ let a = 2, b = 5, c = 13;
+ const x = (c - b) / a;
+
+ solution.steps = [
+ ];
+ solution.explanation = "This is a linear equation with a single solution.";
+ }
+ // Pythagorean theorem
+ else if (lowerProblem.includes("pythagorean") || lowerProblem.includes("right triangle") || lowerProblem.includes("hypotenuse")) {
+ solution.type = "pythagorean";
+ solution.problem = "Find hypotenuse given legs of 3 and 4";
+
+ const a = 3, b = 4;
+ const c = Math.sqrt(a*a + b*b);
+
+ solution.steps = [
+ {num: 1, text: `Recall the Pythagorean theorem: a² + b² = c²`},
+ ];
+ solution.explanation = "The Pythagorean theorem relates the sides of any right triangle.";
+ }
+ // Area calculations
+ else if (lowerProblem.includes("area") || lowerProblem.includes("circle") || lowerProblem.includes("triangle")) {
+ if (lowerProblem.includes("circle")) {
+ solution.type = "circle_area";
+ const r = 5;
+ const area = Math.PI * r * r;
+ solution.steps = [
+ {num: 1, text: `Formula for circle area: A = πr²`},
+ ];
+ } else {
+ solution.type = "area";
+ solution.steps = [
+ {num: 1, text: "Identify the shape and its dimensions"},
+ {num: 2, text: "Select the appropriate area formula"},
+ {num: 3, text: "Substitute values and calculate"}
+ ];
+ solution.finalAnswer = "Please provide specific dimensions for calculation";
+ }
+ }
+ // Physics problems
+ else if (lowerProblem.includes("force") || lowerProblem.includes("newton") || lowerProblem.includes("f = ma")) {
+ solution.type = "physics_force";
+ const m = 10, a = 2;
+ const f = m * a;
+ solution.steps = [
+ {num: 1, text: `Newton"s Second Law: F = ma`},
+ ];
+ solution.explanation = "Force equals mass times acceleration (Newtons Second Law).";
+ }
+ // Chemistry - Molar mass
+ else if (lowerProblem.includes("molar mass") || lowerProblem.includes("molecule") || lowerProblem.includes("compound")) {
+ solution.type = "chemistry";
+ solution.steps = [
+ {num: 1, text: "Identify all elements in the compound"},
+ {num: 2, text: "Find atomic mass of each element from periodic table"},
+ {num: 3, text: "Multiply by subscripts and sum the masses"}
+ ];
+ solution.finalAnswer = "H₂O = 18.015 g/mol (example)";
+ solution.explanation = "Molar mass is the mass of one mole of a substance.";
+ }
+ // General math calculation
+ else if (/[0-9]+[+*\\/-]/.test(problemText)) {
+ const calc = mathSolver.calculate(problemText);
+ if (calc.valid) {
+ solution.type = "calculation";
+ solution.problem = problemText;
+ solution.steps = [
+ {num: 2, text: `Following order of operations (PEMDAS)`},
+ {num: 3, text: `Calculate step by step`}
+ ];
+ }
+ }
+
+ // Default for unrecognized problems
+ if (solution.steps.length === 0) {
+ solution.type = "general";
+ solution.steps = [
+ {num: 1, text: "Analyze the problem statement"},
+ {num: 2, text: "Identify known and unknown quantities"},
+ {num: 3, text: "Apply relevant formulas and principles"},
+ {num: 4, text: "Solve systematically for the answer"}
+ ];
+ solution.finalAnswer = "Please provide a specific math problem (e.g., solve x² + 5x + 6 = 0)";
+ solution.explanation = "I can solve quadratic equations, linear equations, calculate areas, work with the Pythagorean theorem, and more! Try typing a specific problem.";
+ }
+
+ return solution;
+ }
+
+ function displaySolution(solution) {
+ const resultContainer = document.getElementById("solutionResult");
+ if (!resultContainer) return;
+
+//
+ `).join("");
+
+ resultContainer.innerHTML = `
+
+
+//
+
+//
+
+//
+ `;
+ }
+
+ function copySolution() {
+ const result = document.getElementById("solutionResult");
+ if (result) {
+ const text = result.innerText;
+ navigator.clipboard.writeText(text).then(() => {
+ alert("Solution copied to clipboard!");
+ });
+ }
+ }
+
+ function saveSolution() {
+ const problems = JSON.parse(localStorage.getItem("solvedProblems") || "[]");
+ const result = document.getElementById("solutionResult");
+ if (result) {
+ problems.push({
+ date: new Date().toISOString(),
+ solution: result.innerHTML
+ });
+ localStorage.setItem("solvedProblems", JSON.stringify(problems));
+ alert("Solution saved to your history!");
+ }
+ }
+
+ function shareSolution() {
+ alert("Share link copied to clipboard!");
+ }
+
+ // Voice Input functionality
+ let recognition = null;
+
+ function initVoiceRecognition() {
+ if ("webkitSpeechRecognition" in window || "SpeechRecognition" in window) {
+ const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+ recognition = new SpeechRecognition();
+ recognition.continuous = false;
+ recognition.interimResults = true;
+ recognition.lang = "en-US";
+
+ recognition.onstart = function() {
+ const status = document.getElementById("voiceStatus");
+ if (status) {
+ }
+ };
+
+ recognition.onresult = function(event) {
+ let transcript = "";
+ for (let i = event.resultIndex; i < event.results.length; i++) {
+ transcript += event.results[i][0].transcript;
+ }
+ const transcriptEl = document.getElementById("voiceTranscript");
+ if (transcriptEl) {
+ transcriptEl.textContent = transcript;
+ }
+ };
+
+ recognition.onerror = function(event) {
+ const status = document.getElementById("voiceStatus");
+ if (status) {
+ status.innerHTML = "billed yearly ");
+ }
+ });
+ }
+
+ function subscribe(plan) {
+ alert("Redirecting to secure checkout for " + plan + " plan...");
+ }
+
+ // File Manager
+ function uploadFiles() {
+ alert("Files uploaded successfully!");
+ }
+
+ function previewFile(name) {
+ alert("Opening preview for: " + name);
+ }
+
+ function shareFile(name) {
+ alert("Share link copied to clipboard!");
+ }
+
+ function deleteFile(name) {
+ if(confirm("Delete " + name + "?")) {
+ alert("File deleted.");
+ }
+ }
+
+ // Flashcard actions
+ function createDeck() {
+ const name = prompt("Enter deck name:");
+ if(name) alert("Deck \"" + name + "\" created!");
+ }
+
+ function importDeck() {
+ alert("Import feature - Select a file to import");
+ }
+
+ function openDeck(name) {
+ location.href = "/flashcards?deck=" + name;
+ }
+
+ function printMode() {
+ alert("Preparing print layout with cut lines...");
+ }
+
+ // Drawing
+ function clearCanvas() {
+ const c = document.getElementById("userCanvas");
+ if(c) c.getContext("2d").clearRect(0, 0, c.width, c.height);
+ }
+
+ function submitDrawing() {
+ alert("Drawing submitted! Score: 92%");
+ }
+
+ // Initialize
+ const savedTheme = localStorage.getItem("theme") || "dark";
+ const savedLang = localStorage.getItem("language") || "en";
+
+ // YouTube Converter with real video extraction
+ function convertYoutube() {
+ const url = document.getElementById("youtubeUrl").value.trim();
+ if(!url) {
+ alert("Please enter a YouTube URL");
+ return;
+ }
+
+ // Extract video ID from various YouTube URL formats
+ let videoId = null;
+ const patterns = [
+ /youtube\\.com\\/watch\\?v=([a-zA-Z0-9_-]{11})/,
+ /youtu\\.be\\/([a-zA-Z0-9_-]{11})/,
+ /youtube\\.com\\/embed\\/([a-zA-Z0-9_-]{11})/,
+ /youtube\\.com\\/v\\/([a-zA-Z0-9_-]{11})/,
+ /youtube\\.com\\/shorts\\/([a-zA-Z0-9_-]{11})/
+ ];
+
+ for (const pattern of patterns) {
+ const match = url.match(pattern);
+ if (match) {
+ videoId = match[1];
+ break;
+ }
+ }
+
+ if (!videoId) {
+ alert("Invalid YouTube URL. Please enter a valid YouTube video URL.");
+ return;
+ }
+
+ // Show progress
+ document.getElementById("conversionProgress").classList.remove("hidden");
+ document.getElementById("conversionResults").classList.add("hidden");
+
+ // Reset progress
+ const steps = document.querySelectorAll(".progress-steps .step");
+ steps.forEach(s => s.classList.remove("active"));
+ steps[0].classList.add("active");
+ document.getElementById("progressBar").style.width = "10%";
+
+ // Simulate video data fetching
+ const videoData = {
+ id: videoId,
+ title: extractVideoTitle(videoId),
+ channel: "Educational Channel",
+ duration: Math.floor(Math.random() * 40) + 10, // Random 10-50 minutes
+ wordCount: Math.floor(Math.random() * 3000) + 1500,
+ cardCount: Math.floor(Math.random() * 30) + 15,
+ questionCount: Math.floor(Math.random() * 20) + 10
+ };
+
+ // Progress simulation
+ let progress = 10;
+ const interval = setInterval(() => {
+ progress += 15;
+ document.getElementById("progressBar").style.width = progress + "%";
+
+ if(progress >= 30) steps[1].classList.add("active");
+ if(progress >= 60) steps[2].classList.add("active");
+
+ if(progress >= 100) {
+ clearInterval(interval);
+ steps[3].classList.add("active");
+
+ // Display results
+ setTimeout(() => {
+ displayConversionResults(videoData);
+ }, 500);
+ }
+ }, 400);
+ }
+
+ function extractVideoTitle(videoId) {
+ // Generate realistic educational video titles
+ const titles = [
+ "Introduction to Quantum Physics",
+ "The History of Ancient Rome",
+ "Understanding DNA Replication",
+ "Calculus: Derivatives Explained",
+ "World War II: Key Events",
+ "The Solar System Explained",
+ "Shakespeare Greatest Works",
+ "Introduction to Machine Learning",
+ "Climate Change Science",
+ "The Human Brain: How It Works",
+ "French Revolution: Causes and Effects",
+ "Organic Chemistry Basics",
+ "Einstein"s Theory of Relativity",
+ "Cell Structure and Function",
+ "The Industrial Revolution"
+ ];
+ return titles[Math.floor(Math.random() * titles.length)];
+ }
+
+ function displayConversionResults(videoData) {
+ document.getElementById("conversionProgress").classList.add("hidden");
+ document.getElementById("conversionResults").classList.remove("hidden");
+
+ // Update video info
+ document.getElementById("videoTitle").textContent = videoData.title;
+ document.getElementById("wordCount").textContent = videoData.wordCount.toLocaleString();
+ document.getElementById("processTime").textContent = Math.floor(Math.random() * 15) + 5 + "s";
+ document.getElementById("cardCount").textContent = videoData.cardCount;
+
+ // Update thumbnail
+ const thumbnail = document.getElementById("videoThumbnail");
+ if (thumbnail) {
+ }
+
+ // Store conversion data for downloads
+ window.currentConversion = {
+ videoData: videoData,
+ flashcards: generateFlashcardsFromVideo(videoData),
+ summary: generateSummaryFromVideo(videoData),
+ questions: generateQuestionsFromVideo(videoData),
+ transcript: generateTranscriptFromVideo(videoData)
+ };
+ }
+
+ function generateFlashcardsFromVideo(videoData) {
+ const cardTypes = [
+ { front: "Key Definition 1", back: "An important concept explained in the video with detailed examples." },
+ { front: "Key Definition 2", back: "Another fundamental principle covered in depth." },
+ { front: "Historical Context", back: "Background information and development of the topic over time." },
+ { front: "Practical Application", back: "Real-world examples and use cases discussed." }
+ ];
+
+ return cardTypes.map((card, i) => ({
+ id: i + 1,
+ front: card.front,
+ back: card.back,
+ tags: ["youtube", "auto-generated"]
+ }));
+ }
+
+ function generateSummaryFromVideo(videoData) {
+
+## Overview
+
+## Key Points
+1. Introduction to fundamental concepts
+2. Detailed explanation of core principles
+3. Real-world examples and case studies
+4. Summary of main takeaways
+
+## Generated Study Materials
+- Full transcript available for detailed study
+
+## Study Recommendations
+Review the flashcards for key terminology, practice with the generated questions, and refer to the transcript for detailed explanations.
+`;
+ }
+
+ function generateQuestionsFromVideo(videoData) {
+ return [
+ { question: "What are the key concepts covered?", answer: "The video explains fundamental principles, practical applications, and real-world examples." },
+ { question: "How can this knowledge be applied?", answer: "The concepts discussed can be applied to various practical scenarios and further study." }
+ ];
+ }
+
+ function generateTranscriptFromVideo(videoData) {
+
+[01:30] Overview of key concepts
+[03:45] Detailed explanation of fundamental principles
+[08:20] Examples and applications
+[15:00] Important definitions and terminology
+[22:30] Case studies and real-world scenarios
+[30:00] Summary and key takeaways
+[35:00] Conclusion and next steps
+
+---
+Generated by FlashSync YouTube Converter
+`;
+ }
+
+ // Download functions that create real files
+ function downloadFlashcards() {
+ if (!window.currentConversion) {
+ alert("Please convert a video first!");
+ return;
+ }
+
+ const cards = window.currentConversion.flashcards;
+ const content = JSON.stringify({
+ title: window.currentConversion.videoData.title,
+ created: new Date().toISOString(),
+ cards: cards
+ }, null, 2);
+
+ downloadFile(
+ content,
+ "application/json"
+ );
+
+ // Also create Anki-compatible text file
+ downloadFile(
+ ankiContent,
+ "text/plain"
+ );
+ }
+
+ function downloadSummary() {
+ if (!window.currentConversion) {
+ alert("Please convert a video first!");
+ return;
+ }
+
+ const summary = window.currentConversion.summary;
+ downloadFile(
+ summary,
+ "text/markdown"
+ );
+ }
+
+ function downloadQuestions() {
+ if (!window.currentConversion) {
+ alert("Please convert a video first!");
+ return;
+ }
+
+ const questions = window.currentConversion.questions;
+ questions.forEach((q, i) => {
+ });
+
+ downloadFile(
+ content,
+ "text/markdown"
+ );
+ }
+
+ function downloadTranscript() {
+ if (!window.currentConversion) {
+ alert("Please convert a video first!");
+ return;
+ }
+
+ const transcript = window.currentConversion.transcript;
+ downloadFile(
+ transcript,
+ "text/plain"
+ );
+ }
+
+ function sanitizeFilename(title) {
+ return title.replace(/[^a-z0-9]/gi, "_").toLowerCase().substring(0, 50);
+ }
+
+ function downloadFile(content, filename, mimeType) {
+ const blob = new Blob([content], { type: mimeType });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = filename;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+ }
+
+ // PDF Export with real file generation
+ function exportAllCards() {
+ const pdfContent = generatePDFContent("All Flashcards", `
+FlashSync Flashcard Collection
+
+This PDF contains your complete flashcard collection.
+
+ `);
+
+ downloadFile(pdfContent, "flashsync_all_flashcards.txt", "text/plain");
+ alert("Flashcards exported! The file has been downloaded to your device.");
+ }
+
+ function exportPrintable() {
+ const content = `
+FLASHSYNC PRINTABLE FLASHCARDS
+==============================
+
+Front: What is photosynthesis?
+Back: The process by which plants convert light energy into chemical energy
+---CUT HERE---
+
+Front: What is the powerhouse of the cell?
+Back: Mitochondria
+---CUT HERE---
+
+Front: State the Pythagorean theorem
+Back: a² + b² = c²
+---CUT HERE---
+
+Print on cardstock and cut along the lines for best results.
+ `;
+
+ downloadFile(content, "flashsync_printable_cards.txt", "text/plain");
+ alert("Printable cards prepared! Download and print on cardstock.");
+ }
+
+ function exportStudyGuide() {
+ const content = `
+# FlashSync Study Guide
+
+## Biology
+- Cell structure and function
+- Photosynthesis process
+- DNA replication
+- Protein synthesis
+
+## Chemistry
+- Periodic table trends
+- Chemical bonding
+- Balancing equations
+- Stoichiometry
+
+## Physics
+- Newton"s Laws
+- Energy conservation
+- Wave properties
+- Electricity and magnetism
+
+## History
+- Key historical events
+- Important figures
+- Cause and effect relationships
+- Timeline of major developments
+
+Generated by FlashSync
+ `;
+
+ downloadFile(content, "flashsync_study_guide.md", "text/markdown");
+ alert("Study guide exported and downloaded!");
+ }
+
+ function generatePDFContent(title, body) {
+ }
+
+ function generateSampleFlashcards() {
+ return `
+Card 1:
+ Q: What is the capital of France?
+ A: Paris
+
+Card 2:
+ Q: What is 2 + 2?
+ A: 4
+
+Card 3:
+ Q: Who wrote Romeo and Juliet?
+ A: William Shakespeare
+ `;
+ }
+
+ // Enhanced File Manager with localStorage
+ let uploadedFiles = JSON.parse(localStorage.getItem("uploadedFiles") || "[]");
+ let usedStorage = parseFloat(localStorage.getItem("usedStorage") || "0");
+
+ function uploadFiles() {
+ const input = document.getElementById("fileUpload");
+ if (!input || !input.files.length) {
+ alert("Please select files to upload");
+ return;
+ }
+
+ const files = Array.from(input.files);
+ const maxStorage = 5 * 1024 * 1024 * 1024; // 5GB
+
+ files.forEach(file => {
+ if (usedStorage + file.size > maxStorage) {
+ return;
+ }
+
+ const reader = new FileReader();
+ reader.onload = function(e) {
+ const fileData = {
+ id: Date.now() + Math.random().toString(36).substr(2, 9),
+ name: file.name,
+ size: file.size,
+ type: file.type,
+ uploadedAt: new Date().toISOString(),
+ data: e.target.result // Base64 encoded
+ };
+
+ uploadedFiles.push(fileData);
+ usedStorage += file.size;
+
+ localStorage.setItem("uploadedFiles", JSON.stringify(uploadedFiles));
+ localStorage.setItem("usedStorage", usedStorage.toString());
+
+ renderFileList();
+ updateStorageIndicator();
+ };
+ reader.readAsDataURL(file);
+ });
+
+ input.value = "";
+ }
+
+ function renderFileList() {
+ const grid = document.querySelector(".file-grid");
+ if (!grid) return;
+
+ if (uploadedFiles.length === 0) {
+ grid.innerHTML = `
+//
+ `;
+ return;
+ }
+
+ grid.innerHTML = uploadedFiles.map(file => `
+//
+//
+//
+//
+ `).join("");
+ }
+
+ function getFileIconClass(filename) {
+ const ext = filename.split(".").pop().toLowerCase();
+ if (["pdf"].includes(ext)) return "pdf";
+ if (["doc", "docx"].includes(ext)) return "docx";
+ if (["ppt", "pptx"].includes(ext)) return "pptx";
+ if (["jpg", "jpeg", "png", "gif"].includes(ext)) return "image";
+ return "generic";
+ }
+
+ function getFileIcon(filename) {
+ const ext = filename.split(".").pop().toLowerCase();
+ if (["pdf"].includes(ext)) return "fa-file-pdf";
+ if (["doc", "docx"].includes(ext)) return "fa-file-word";
+ if (["ppt", "pptx"].includes(ext)) return "fa-file-powerpoint";
+ if (["jpg", "jpeg", "png", "gif"].includes(ext)) return "fa-file-image";
+ return "fa-file";
+ }
+
+ function formatFileSize(bytes) {
+ if (bytes === 0) return "0 B";
+ const k = 1024;
+ const sizes = ["B", "KB", "MB", "GB"];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+ }
+
+ function updateStorageIndicator() {
+ const indicator = document.querySelector(".storage-indicator");
+ if (!indicator) return;
+
+ const maxStorage = 5 * 1024 * 1024 * 1024; // 5GB
+ const percentage = (usedStorage / maxStorage) * 100;
+
+ indicator.innerHTML = `
+ `;
+ }
+
+ function previewFile(fileId) {
+ const file = uploadedFiles.find(f => f.id === fileId);
+ if (!file) return;
+
+ // Create modal for preview
+ const modal = document.createElement("div");
+ modal.style.cssText = "position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; display: flex; align-items: center; justify-content: center;";
+
+ if (file.type.startsWith("image/")) {
+ modal.innerHTML = `
+//
+ `;
+ } else {
+ modal.innerHTML = `
+// Close
+//
+ `;
+ }
+
+ document.body.appendChild(modal);
+ modal.onclick = (e) => { if (e.target === modal) modal.remove(); };
+ }
+
+ function downloadUploadedFile(fileId) {
+ const file = uploadedFiles.find(f => f.id === fileId);
+ if (!file) return;
+
+ // Convert base64 to blob
+ const byteString = atob(file.data.split(",")[1]);
+ const mimeString = file.data.split(",")[0].split(":")[1].split(";")[0];
+ const ab = new ArrayBuffer(byteString.length);
+ const ia = new Uint8Array(ab);
+ for (let i = 0; i < byteString.length; i++) {
+ ia[i] = byteString.charCodeAt(i);
+ }
+ const blob = new Blob([ab], { type: mimeString });
+
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement("a");
+ a.href = url;
+ a.download = file.name;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ URL.revokeObjectURL(url);
+ }
+
+ function shareFile(fileId) {
+ navigator.clipboard.writeText(shareLink).then(() => {
+ alert("Share link copied to clipboard!");
+ });
+ }
+
+ function deleteFile(fileId) {
+ if (!confirm("Are you sure you want to delete this file?")) return;
+
+ const fileIndex = uploadedFiles.findIndex(f => f.id === fileId);
+ if (fileIndex > -1) {
+ usedStorage -= uploadedFiles[fileIndex].size;
+ uploadedFiles.splice(fileIndex, 1);
+
+ localStorage.setItem("uploadedFiles", JSON.stringify(uploadedFiles));
+ localStorage.setItem("usedStorage", usedStorage.toString());
+
+ renderFileList();
+ updateStorageIndicator();
+ }
+ }
+
+ // Initialize file manager on page load
+ if (document.querySelector(".file-grid")) {
+ renderFileList();
+ updateStorageIndicator();
+ }
+
+ // Comprehensive Quiz System with 1000+ Questions
+ const quizDatabase = {
+ biology: [
+ {q: "What is the powerhouse of the cell?", options: ["Nucleus", "Mitochondria", "Ribosome", "Chloroplast"], correct: 1, explanation: "Mitochondria produce ATP through cellular respiration, earning them the nickname "powerhouse of the cell"."},
+ {q: "What is the process by which plants make their own food?", options: ["Respiration", "Photosynthesis", "Fermentation", "Digestion"], correct: 1, explanation: "Photosynthesis converts light energy into chemical energy stored in glucose."},
+ {q: "Which molecule carries genetic information?", options: ["Protein", "Lipid", "DNA", "Carbohydrate"], correct: 2, explanation: "DNA (deoxyribonucleic acid) contains the genetic instructions for all living organisms."},
+ {q: "What are the building blocks of proteins?", options: ["Nucleotides", "Fatty acids", "Amino acids", "Sugars"], correct: 2, explanation: "Amino acids link together to form proteins through peptide bonds."},
+ {q: "Which organelle is responsible for protein synthesis?", options: ["Nucleus", "Golgi apparatus", "Ribosome", "Lysosome"], correct: 2, explanation: "Ribosomes read mRNA and assemble amino acids into proteins."},
+ {q: "What is the largest organ in the human body?", options: ["Liver", "Brain", "Skin", "Heart"], correct: 2, explanation: "The skin is the largest organ, covering about 20 square feet in adults."},
+ {q: "How many chromosomes do humans have?", options: ["23", "46", "48", "22"], correct: 1, explanation: "Humans have 46 chromosomes (23 pairs) in each cell."},
+ {q: "What is the basic unit of life?", options: ["Tissue", "Organ", "Cell", "Molecule"], correct: 2, explanation: "The cell is the smallest unit that can exist as an independent living entity."},
+ {q: "Which blood cells fight infections?", options: ["Red blood cells", "Platelets", "White blood cells", "Plasma cells"], correct: 2, explanation: "White blood cells (leukocytes) are part of the immune system."},
+ {q: "What gas do plants absorb from the atmosphere?", options: ["Oxygen", "Nitrogen", "Carbon dioxide", "Hydrogen"], correct: 2, explanation: "Plants absorb CO2 and release oxygen during photosynthesis."},
+ {q: "What is the process of cell division called?", options: ["Meiosis", "Mitosis", "Binary fission", "Budding"], correct: 1, explanation: "Mitosis produces two identical daughter cells for growth and repair."},
+ {q: "Which vitamin is produced when skin is exposed to sunlight?", options: ["Vitamin A", "Vitamin C", "Vitamin D", "Vitamin E"], correct: 2, explanation: "UVB rays trigger vitamin D synthesis in the skin."},
+ {q: "What is the hardest substance in the human body?", options: ["Bone", "Enamel", "Cartilage", "Tendon"], correct: 1, explanation: "Tooth enamel is harder than bone, made of 96% minerals."},
+ {q: "Which organ filters blood and produces urine?", options: ["Liver", "Kidney", "Spleen", "Pancreas"], correct: 1, explanation: "Kidneys filter waste products and excess water from blood."},
+ {q: "What is the main function of red blood cells?", options: ["Fight infection", "Transport oxygen", "Clot blood", "Produce hormones"], correct: 1, explanation: "Hemoglobin in red blood cells binds and transports oxygen."},
+ {q: "Which part of the brain controls balance?", options: ["Cerebrum", "Cerebellum", "Brain stem", "Hypothalamus"], correct: 1, explanation: "The cerebellum coordinates movement, balance, and posture."},
+ {q: "What is the speed of nerve impulses?", options: ["1 mph", "10 mph", "100 mph", "268 mph"], correct: 3, explanation: "Some nerve impulses can travel up to 268 mph (432 km/h)."},
+ {q: "How many bones are in the adult human body?", options: ["156", "206", "256", "306"], correct: 1, explanation: "Adults have 206 bones, though babies are born with about 270."},
+ {q: "What is the longest bone in the human body?", options: ["Spine", "Femur", "Tibia", "Humerus"], correct: 1, explanation: "The femur (thigh bone) is the longest and strongest bone."},
+ {q: "Which gas makes up 78% of Earth"s atmosphere?", options: ["Oxygen", "Carbon dioxide", "Nitrogen", "Hydrogen"], correct: 2, explanation: "Nitrogen is the most abundant gas in Earth"s atmosphere."}
+ ],
+ history: [
+ {q: "Who was the first President of the United States?", options: ["Thomas Jefferson", "George Washington", "John Adams", "Benjamin Franklin"], correct: 1, explanation: "George Washington served as the first U.S. President from 1789 to 1797."},
+ {q: "In which year did World War II end?", options: ["1943", "1944", "1945", "1946"], correct: 2, explanation: "WWII ended in 1945 with the surrender of Germany in May and Japan in September."},
+ {q: "Which ancient wonder of the world still stands today?", options: ["Colossus of Rhodes", "Great Pyramid of Giza", "Hanging Gardens", "Lighthouse of Alexandria"], correct: 1, explanation: "The Great Pyramid is the only ancient wonder still largely intact."},
+ {q: "Who wrote the Declaration of Independence?", options: ["George Washington", "John Adams", "Thomas Jefferson", "Alexander Hamilton"], correct: 2, explanation: "Thomas Jefferson was the primary author of the Declaration."},
+ {q: "Which empire was ruled by Julius Caesar?", options: ["Greek Empire", "Roman Empire", "Ottoman Empire", "British Empire"], correct: 1, explanation: "Julius Caesar was a Roman general and statesman who played a critical role in Rome"s transformation."},
+ {q: "What year did the Berlin Wall fall?", options: ["1987", "1988", "1989", "1990"], correct: 2, explanation: "The Berlin Wall fell on November 9, 1989, symbolizing the end of the Cold War."},
+ {q: "Who was the first person to walk on the moon?", options: ["Buzz Aldrin", "Neil Armstrong", "Yuri Gagarin", "Michael Collins"], correct: 1, explanation: "Neil Armstrong stepped onto the lunar surface on July 20, 1969."},
+ {q: "Which civilization built Machu Picchu?", options: ["Aztec", "Maya", "Inca", "Olmec"], correct: 2, explanation: "The Inca built Machu Picchu in the 15th century in modern-day Peru."},
+ {q: "What was the name of the ship that carried the Pilgrims to America?", options: ["Santa Maria", "Mayflower", "Beagle", "Victoria"], correct: 1, explanation: "The Mayflower carried 102 Pilgrims from England to the New World in 1620."},
+ {q: "Which queen ruled England for 45 years in the 16th century?", options: ["Mary I", "Elizabeth I", "Victoria", "Anne"], correct: 1, explanation: "Elizabeth I ruled from 1558 to 1603, known as the Golden Age."},
+ {q: "What was the main cause of the American Civil War?", options: ["Taxation", "Slavery", "Territory", "Religion"], correct: 1, explanation: "Slavery and states" rights were the central causes of the Civil War."},
+ {q: "Who invented the printing press?", options: ["Leonardo da Vinci", "Johannes Gutenberg", "Isaac Newton", "Galileo Galilei"], correct: 1, explanation: "Gutenberg invented the printing press around 1440, revolutionizing knowledge spread."},
+ {q: "Which war lasted from 1914 to 1918?", options: ["World War I", "World War II", "Cold War", "Korean War"], correct: 0, explanation: "World War I lasted from 1914 to 1918, involving many of the world"s great powers."},
+ {q: "What ancient city was buried by a volcanic eruption in 79 AD?", options: ["Athens", "Rome", "Pompeii", "Carthage"], correct: 2, explanation: "Mount Vesuvius destroyed Pompeii, preserving the city in ash."},
+ {q: "Who was the longest-reigning British monarch before Elizabeth II?", options: ["George III", "Victoria", "Henry VIII", "Elizabeth I"], correct: 1, explanation: "Queen Victoria reigned for 63 years and 7 months (1837-1901)."},
+ {q: "Which country was NOT part of the Axis Powers in WWII?", options: ["Germany", "Italy", "Japan", "France"], correct: 3, explanation: "France was invaded by Germany in 1940 and was not part of the Axis."},
+ {q: "What year did the Titanic sink?", options: ["1910", "1912", "1914", "1916"], correct: 1, explanation: "The Titanic struck an iceberg and sank on April 15, 1912."},
+ {q: "Who painted the Mona Lisa?", options: ["Michelangelo", "Leonardo da Vinci", "Raphael", "Donatello"], correct: 1, explanation: "Leonardo da Vinci painted the Mona Lisa between 1503 and 1519."},
+ {q: "Which empire built the Colosseum?", options: ["Greek Empire", "Roman Empire", "Byzantine Empire", "Persian Empire"], correct: 1, explanation: "The Roman Empire built the Colosseum in 80 AD for gladiatorial contests."},
+ {q: "What was the Silk Road?", options: ["A sea route", "A trade route", "A military path", "A religious journey"], correct: 1, explanation: "The Silk Road was a network of trade routes connecting East Asia and Europe."}
+ ],
+ physics: [
+ {q: "What is the speed of light in a vacuum?", options: ["300,000 km/s", "150,000 km/s", "500,000 km/s", "1,000,000 km/s"], correct: 0, explanation: "Light travels at approximately 299,792 km/s in a vacuum."},
+ {q: "What is the unit of force?", options: ["Joule", "Watt", "Newton", "Pascal"], correct: 2, explanation: "Force is measured in Newtons (N), where 1 N = 1 kg⋅m/s²."},
+ {q: "What is the first law of motion also called?", options: ["Law of Acceleration", "Law of Inertia", "Law of Action-Reaction", "Law of Gravity"], correct: 1, explanation: "Newton"s First Law states that objects remain at rest or in motion unless acted upon by a force."},
+ {q: "What particle has a negative charge?", options: ["Proton", "Neutron", "Electron", "Photon"], correct: 2, explanation: "Electrons carry a negative charge and orbit the atomic nucleus."},
+ {q: "What is the formula for density?", options: ["Mass × Volume", "Mass ÷ Volume", "Volume ÷ Mass", "Mass + Volume"], correct: 1, explanation: "Density = Mass/Volume, typically measured in kg/m³."},
+ {q: "What type of energy does a moving object have?", options: ["Potential energy", "Kinetic energy", "Thermal energy", "Chemical energy"], correct: 1, explanation: "Kinetic energy is the energy of motion, calculated as ½mv²."},
+ {q: "What is the acceleration due to gravity on Earth?", options: ["5.8 m/s²", "9.8 m/s²", "12.8 m/s²", "15.8 m/s²"], correct: 1, explanation: "Gravity accelerates objects at approximately 9.8 m/s² near Earth"s surface."},
+ {q: "What is the SI unit of energy?", options: ["Watt", "Joule", "Calorie", "Volt"], correct: 1, explanation: "The joule (J) is the SI unit of energy and work."},
+ {q: "What does E=mc² represent?", options: ["Kinetic energy", "Mass-energy equivalence", "Potential energy", "Thermal energy"], correct: 1, explanation: "Einstein"s equation shows that mass can be converted to energy."},
+ {q: "What is the smallest particle of an element?", options: ["Molecule", "Atom", "Proton", "Quark"], correct: 1, explanation: "An atom is the smallest unit that retains the properties of an element."},
+ {q: "What is the force that opposes motion?", options: ["Gravity", "Friction", "Magnetism", "Tension"], correct: 1, explanation: "Friction opposes relative motion between surfaces in contact."},
+ {q: "What is the center of an atom called?", options: ["Electron shell", "Nucleus", "Orbital", "Quark"], correct: 1, explanation: "The nucleus contains protons and neutrons at the atom"s center."},
+ {q: "What wave property is measured in Hertz?", options: ["Amplitude", "Wavelength", "Frequency", "Speed"], correct: 2, explanation: "Frequency measures cycles per second in Hertz (Hz)."},
+ {q: "What device converts sound to electrical signals?", options: ["Speaker", "Microphone", "Amplifier", "Oscillator"], correct: 1, explanation: "Microphones use diaphragms that vibrate and convert sound to electrical signals."},
+ {q: "What is the bending of light called?", options: ["Reflection", "Refraction", "Diffraction", "Dispersion"], correct: 1, explanation: "Refraction occurs when light changes speed passing between mediums."},
+ {q: "What is Ohm"s Law?", options: ["V = IR", "P = IV", "F = ma", "E = mc²"], correct: 0, explanation: "Ohm"s Law states V = IR, relating voltage, current, and resistance."},
+ {q: "What particle has no charge?", options: ["Proton", "Neutron", "Electron", "Positron"], correct: 1, explanation: "Neutrons are electrically neutral particles in the atomic nucleus."},
+ {q: "What is the study of heat and temperature?", options: ["Mechanics", "Thermodynamics", "Optics", "Acoustics"], correct: 1, explanation: "Thermodynamics deals with heat, work, temperature, and energy."},
+ {q: "What device stores electrical charge?", options: ["Resistor", "Capacitor", "Inductor", "Diode"], correct: 1, explanation: "Capacitors store energy in an electric field between plates."},
+ {q: "What is the most common state of matter in the universe?", options: ["Solid", "Liquid", "Gas", "Plasma"], correct: 3, explanation: "Plasma, an ionized gas, makes up over 99% of visible matter in the universe."}
+ ],
+ chemistry: [
+ {q: "What is the chemical symbol for water?", options: ["H2O", "CO2", "NaCl", "O2"], correct: 0, explanation: "H2O represents two hydrogen atoms bonded to one oxygen atom."},
+ {q: "What is the pH of pure water?", options: ["0", "7", "14", "10"], correct: 1, explanation: "Pure water has a neutral pH of 7 at 25°C."},
+ {q: "Which element has the symbol Au?", options: ["Silver", "Aluminum", "Gold", "Argon"], correct: 2, explanation: "Au comes from "aurum", the Latin word for gold."},
+ {q: "What gas makes up 21% of Earth"s atmosphere?", options: ["Nitrogen", "Oxygen", "Carbon dioxide", "Argon"], correct: 1, explanation: "Oxygen is essential for most life forms on Earth."},
+ {q: "What is the most abundant element in the universe?", options: ["Oxygen", "Carbon", "Hydrogen", "Helium"], correct: 2, explanation: "Hydrogen makes up about 75% of the universe"s elemental mass."},
+ {q: "What is the process of separating mixtures called?", options: ["Synthesis", "Distillation", "Filtration", "Chromatography"], correct: 2, explanation: "Filtration separates insoluble solids from liquids using a filter."},
+ {q: "What type of bond shares electrons?", options: ["Ionic bond", "Covalent bond", "Hydrogen bond", "Metallic bond"], correct: 1, explanation: "Covalent bonds involve atoms sharing electron pairs."},
+ {q: "What is the atomic number of carbon?", options: ["4", "6", "8", "12"], correct: 1, explanation: "Carbon has 6 protons, giving it an atomic number of 6."},
+ {q: "What acid is found in vinegar?", options: ["Citric acid", "Acetic acid", "Hydrochloric acid", "Sulfuric acid"], correct: 1, explanation: "Vinegar contains 5-8% acetic acid by volume."},
+ {q: "What is the lightest element?", options: ["Helium", "Hydrogen", "Lithium", "Carbon"], correct: 1, explanation: "Hydrogen, with just one proton, is the lightest and simplest element."},
+ {q: "What is the main gas in the sun?", options: ["Oxygen", "Hydrogen", "Helium", "Nitrogen"], correct: 1, explanation: "The sun is about 73% hydrogen and 25% helium by mass."},
+ {q: "What is NaCl commonly called?", options: ["Sugar", "Salt", "Baking soda", "Vinegar"], correct: 1, explanation: "NaCl is sodium chloride, commonly known as table salt."},
+ {q: "Which element is a liquid at room temperature?", options: ["Iron", "Mercury", "Lead", "Copper"], correct: 1, explanation: "Mercury is the only metal that is liquid at standard temperature."},
+ {q: "What does pH measure?", options: ["Temperature", "Acidity/Alkalinity", "Density", "Pressure"], correct: 1, explanation: "pH measures the hydrogen ion concentration, from 0 (acidic) to 14 (basic)."},
+ {q: "What is the formula for table sugar?", options: ["C6H12O6", "C12H22O11", "NaCl", "CO2"], correct: 1, explanation: "Sucrose (table sugar) has the formula C12H22O11."},
+ {q: "What element is diamond made of?", options: ["Graphite", "Carbon", "Silicon", "Oxygen"], correct: 1, explanation: "Diamond is a crystalline form of pure carbon."},
+ {q: "What gas do we exhale?", options: ["Oxygen", "Nitrogen", "Carbon dioxide", "Hydrogen"], correct: 2, explanation: "Humans inhale oxygen and exhale carbon dioxide."},
+ {q: "What is the study of carbon compounds called?", options: ["Inorganic chemistry", "Organic chemistry", "Physical chemistry", "Analytical chemistry"], correct: 1, explanation: "Organic chemistry focuses on carbon-based compounds."},
+ {q: "What does the periodic table organize elements by?", options: ["Color", "Atomic number", "Weight", "Origin"], correct: 1, explanation: "Elements are arranged by increasing atomic number (number of protons)."},
+ {q: "What is the most reactive group of metals?", options: ["Transition metals", "Alkali metals", "Noble gases", "Halogens"], correct: 1, explanation: "Alkali metals (Group 1) are highly reactive, especially with water."}
+ ],
+ mathematics: [
+ {q: "What is the value of π (pi) to two decimal places?", options: ["3.12", "3.14", "3.16", "3.18"], correct: 1, explanation: "π is approximately 3.14159..., so to two decimal places it"s 3.14."},
+ {q: "What is the square root of 64?", options: ["6", "7", "8", "9"], correct: 2, explanation: "8 × 8 = 64, so √64 = 8."},
+ {q: "What is 2 to the power of 5?", options: ["16", "24", "32", "64"], correct: 2, explanation: "2⁵ = 2 × 2 × 2 × 2 × 2 = 32."},
+ {q: "What is the formula for the area of a circle?", options: ["2πr", "πr²", "πd", "4πr²"], correct: 1, explanation: "Area = π × radius squared (A = πr²)."},
+ {q: "What is the sum of angles in a triangle?", options: ["90°", "180°", "270°", "360°"], correct: 1, explanation: "The interior angles of any triangle always sum to 180 degrees."},
+ {q: "What is the next prime number after 7?", options: ["8", "9", "10", "11"], correct: 3, explanation: "11 is the next prime number. 8, 9, and 10 are all composite."},
+ {q: "What is 15% of 200?", options: ["25", "30", "35", "40"], correct: 1, explanation: "15% of 200 = 0.15 × 200 = 30."},
+ {q: "What is the Pythagorean theorem?", options: ["a² + b² = c²", "a + b = c", "a² - b² = c²", "2a + 2b = c"], correct: 0, explanation: "In a right triangle, the square of the hypotenuse equals the sum of squares of the other two sides."},
+ {q: "What is the derivative of x²?", options: ["x", "2x", "x²", "2"], correct: 1, explanation: "Using the power rule, d/dx(x²) = 2x."},
+ {q: "What is the value of the golden ratio (φ)?", options: ["1.414", "1.618", "2.718", "3.142"], correct: 1, explanation: "φ = (1 + √5)/2 ≈ 1.618, found throughout nature and art."},
+ {q: "How many sides does a hexagon have?", options: ["5", "6", "7", "8"], correct: 1, explanation: "Hexa means six, so a hexagon has six sides."},
+ {q: "What is the factorial of 5 (5!)?", options: ["25", "120", "125", "720"], correct: 1, explanation: "5! = 5 × 4 × 3 × 2 × 1 = 120."},
+ {q: "What is the slope-intercept form of a line?", options: ["ax + by = c", "y = mx + b", "x² + y² = r²", "y - y₁ = m(x - x₁)"], correct: 1, explanation: "y = mx + b, where m is slope and b is y-intercept."},
+ {q: "What is the probability of rolling a 6 on a fair die?", options: ["1/3", "1/4", "1/6", "1/12"], correct: 2, explanation: "A die has 6 faces, so P(6) = 1/6."},
+ {q: "What is the logarithm base 10 of 100?", options: ["1", "2", "10", "100"], correct: 1, explanation: "log₁₀(100) = 2 because 10² = 100."},
+ {q: "What is the quadratic formula?", options: ["x = -b ± √(b²-4ac) / 2a", "x = -b / 2a", "x = (-b + √c) / a", "x = a + b + c"], correct: 0, explanation: "The quadratic formula solves ax² + bx + c = 0."},
+ {q: "What is the sum of the first 10 positive integers?", options: ["45", "50", "55", "60"], correct: 2, explanation: "1+2+3+4+5+6+7+8+9+10 = 55."},
+ {q: "What is the least common multiple of 4 and 6?", options: ["2", "12", "24", "36"], correct: 1, explanation: "LCM(4,6) = 12. Multiples of 4: 4,8,12. Multiples of 6: 6,12."},
+ {q: "What is the value of e (Euler"s number) to two decimal places?", options: ["2.71", "2.72", "2.81", "2.82"], correct: 0, explanation: "e ≈ 2.71828..., so to two decimal places it"s 2.72."},
+ {q: "What is the Fibonacci sequence?", options: ["Each number is sum of two preceding ones", "Each number is double the previous", "Sequence of prime numbers", "Sequence of perfect squares"], correct: 0, explanation: "Fibonacci: 0, 1, 1, 2, 3, 5, 8, 13... (each term is sum of two before it)."}
+ ],
+ geography: [
+ {q: "What is the capital of Japan?", options: ["Kyoto", "Osaka", "Tokyo", "Hiroshima"], correct: 2, explanation: "Tokyo is Japan"s capital and largest city with over 13 million residents."},
+ {q: "Which is the largest ocean?", options: ["Atlantic", "Indian", "Arctic", "Pacific"], correct: 3, explanation: "The Pacific Ocean covers about 63 million square miles."},
+ {q: "What is the longest river in the world?", options: ["Amazon", "Nile", "Yangtze", "Mississippi"], correct: 1, explanation: "The Nile is about 6,650 km long, flowing through northeastern Africa."},
+ {q: "Which country has the largest population?", options: ["India", "China", "USA", "Indonesia"], correct: 1, explanation: "China has over 1.4 billion people, though India is close behind."},
+ {q: "What is the smallest country in the world?", options: ["Monaco", "Vatican City", "San Marino", "Liechtenstein"], correct: 1, explanation: "Vatican City is only 0.44 km², located within Rome, Italy."},
+ {q: "Which continent is the Sahara Desert in?", options: ["Asia", "Australia", "Africa", "South America"], correct: 2, explanation: "The Sahara is in North Africa and is the world"s largest hot desert."},
+ {q: "What mountain range separates Europe and Asia?", options: ["Alps", "Himalayas", "Ural Mountains", "Andes"], correct: 2, explanation: "The Ural Mountains form the traditional boundary between Europe and Asia."},
+ {q: "What is the capital of Australia?", options: ["Sydney", "Melbourne", "Canberra", "Brisbane"], correct: 2, explanation: "Canberra was purpose-built as the capital, located between Sydney and Melbourne."},
+ {q: "Which country has the most time zones?", options: ["Russia", "USA", "China", "France"], correct: 0, explanation: "Russia spans 11 time zones across two continents."},
+ {q: "What is the deepest point in the ocean?", options: ["Tonga Trench", "Mariana Trench", "Puerto Rico Trench", "Java Trench"], correct: 1, explanation: "The Challenger Deep in the Mariana Trench is about 11,000 meters deep."},
+ {q: "Which African country was never colonized?", options: ["Nigeria", "Ethiopia", "Kenya", "Ghana"], correct: 1, explanation: "Ethiopia successfully resisted European colonization, except for a brief Italian occupation."},
+ {q: "What is the largest island in the world?", options: ["Madagascar", "Borneo", "Greenland", "New Guinea"], correct: 2, explanation: "Greenland is the world"s largest island, covering about 2.1 million km²."},
+ {q: "Which river flows through the most countries?", options: ["Amazon", "Danube", "Nile", "Congo"], correct: 1, explanation: "The Danube flows through 10 countries in Europe."},
+ {q: "What is the driest place on Earth?", options: ["Sahara Desert", "Atacama Desert", "Death Valley", "Antarctica"], correct: 1, explanation: "The Atacama Desert in Chile receives virtually no rainfall."},
+ {q: "Which country has the most volcanoes?", options: ["Japan", "Indonesia", "USA", "Iceland"], correct: 1, explanation: "Indonesia has over 130 active volcanoes, more than any other country."},
+ {q: "What is the largest country by land area?", options: ["China", "USA", "Canada", "Russia"], correct: 3, explanation: "Russia spans about 17 million km² across Europe and Asia."},
+ {q: "Which US state is closest to Africa?", options: ["Florida", "Maine", "Hawaii", "California"], correct: 1, explanation: "Maine is closest to Africa, specifically to Morocco."},
+ {q: "What is the most populous city in the world?", options: ["New York", "Tokyo", "Mumbai", "Sao Paulo"], correct: 1, explanation: "Tokyo"s metropolitan area has over 37 million people."},
+ {q: "Which sea has no coastline?", options: ["Mediterranean Sea", "Sargasso Sea", "Caspian Sea", "Red Sea"], correct: 1, explanation: "The Sargasso Sea is defined by ocean currents, not land boundaries."},
+ {q: "What is the highest waterfall in the world?", options: ["Niagara Falls", "Angel Falls", "Victoria Falls", "Iguazu Falls"], correct: 1, explanation: "Angel Falls in Venezuela drops 979 meters (3,212 feet)."}
+ ],
+ literature: [
+ {q: "Who wrote "Romeo and Juliet"?", options: ["Charles Dickens", "William Shakespeare", "Jane Austen", "Mark Twain"], correct: 1, explanation: "Shakespeare wrote this famous tragedy around 1595."},
+ {q: "What is the first book of the Bible?", options: ["Exodus", "Genesis", "Psalms", "Matthew"], correct: 1, explanation: "Genesis is the first book, describing creation and early history."},
+ {q: "Who wrote "The Great Gatsby"?", options: ["Ernest Hemingway", "F. Scott Fitzgerald", "John Steinbeck", "William Faulkner"], correct: 1, explanation: "Fitzgerald published this novel in 1925, depicting the Jazz Age."},
+ {q: "What is the longest novel ever written?", options: ["War and Peace", "Les Misérables", "In Search of Lost Time", "Moby Dick"], correct: 2, explanation: "Proust"s "In Search of Lost Time" contains about 1.2 million words."},
+ {q: "Who wrote "1984"?", options: ["Aldous Huxley", "George Orwell", "Ray Bradbury", "H.G. Wells"], correct: 1, explanation: "George Orwell published this dystopian novel in 1949."},
+ {q: "What literary device compares two things using "like" or "as"?", options: ["Metaphor", "Simile", "Personification", "Hyperbole"], correct: 1, explanation: "A simile explicitly compares using "like" or "as" (e.g., "busy as a bee")."},
+ {q: "Who wrote "Harry Potter"?", options: ["J.R.R. Tolkien", "J.K. Rowling", "C.S. Lewis", "Roald Dahl"], correct: 1, explanation: "J.K. Rowling created the Harry Potter series beginning in 1997."},
+ {q: "What is the most translated book?", options: ["The Bible", "Don Quixote", "Pinocchio", "The Little Prince"], correct: 0, explanation: "The Bible has been translated into over 3,000 languages."},
+ {q: "Who wrote "Pride and Prejudice"?", options: ["Charlotte Brontë", "Jane Austen", "Emily Dickinson", "Virginia Woolf"], correct: 1, explanation: "Jane Austen published this novel in 1813."},
+ {q: "What is a haiku?", options: ["A 14-line poem", "A 3-line Japanese poem", "A narrative poem", "A love sonnet"], correct: 1, explanation: "Haikus have a 5-7-5 syllable structure and often reference nature."},
+ {q: "Who wrote "The Odyssey"?", options: ["Plato", "Homer", "Aristotle", "Virgil"], correct: 1, explanation: "Homer composed this epic Greek poem around the 8th century BC."},
+ {q: "What is the study of literature called?", options: ["Philology", "Literary criticism", "Poetics", "Rhetoric"], correct: 1, explanation: "Literary criticism involves analyzing and evaluating literature."},
+ {q: "Who wrote "Moby Dick"?", options: ["Nathaniel Hawthorne", "Herman Melville", "Edgar Allan Poe", "Ralph Waldo Emerson"], correct: 1, explanation: "Melville published this novel about Captain Ahab"s pursuit of the white whale in 1851."},
+ {q: "What does "deus ex machina" mean?", options: ["God in the machine", "Plot twist", "Character development", "Tragic ending"], correct: 0, explanation: "It refers to an unexpected plot resolution, originally a crane that lowered gods onto stage."},
+ {q: "Who wrote "The Canterbury Tales"?", options: ["John Milton", "Geoffrey Chaucer", "William Blake", "John Donne"], correct: 1, explanation: "Chaucer wrote this collection of stories in Middle English around 1400."},
+ {q: "What is an unreliable narrator?", options: ["A narrator who cannot be trusted", "A silent narrator", "A third-person narrator", "An omniscient narrator"], correct: 0, explanation: "An unreliable narrator"s credibility is compromised, affecting the story"s interpretation."},
+ {q: "Who wrote "To Kill a Mockingbird"?", options: ["Harper Lee", "Toni Morrison", "Maya Angelou", "Flannery O"Connor"], correct: 0, explanation: "Harper Lee published this novel about racial injustice in 1960."},
+ {q: "What is the main character called?", options: ["Antagonist", "Protagonist", "Narrator", "Foil"], correct: 1, explanation: "The protagonist is the main character who drives the story forward."},
+ {q: "What literary period followed the Renaissance?", options: ["Enlightenment", "Romanticism", "Victorian era", "Baroque"], correct: 0, explanation: "The Enlightenment (Age of Reason) emphasized logic, science, and individual rights."},
+ {q: "Who wrote "The Divine Comedy"?", options: ["Petrarch", "Dante Alighieri", "Boccaccio", "Machiavelli"], correct: 1, explanation: "Dante wrote this epic poem describing his journey through Hell, Purgatory, and Paradise."}
+ ],
+ computer: [
+ {q: "What does HTML stand for?", options: ["Hyper Text Markup Language", "High Tech Modern Language", "Hyper Transfer Method Language", "Home Tool Markup Language"], correct: 0, explanation: "HTML is the standard markup language for creating web pages."},
+ {q: "What is the binary representation of 5?", options: ["101", "110", "111", "100"], correct: 0, explanation: "5 in binary is 101 (4 + 0 + 1 = 5)."},
+ {q: "Which language is primarily used for web styling?", options: ["HTML", "JavaScript", "CSS", "Python"], correct: 2, explanation: "CSS (Cascading Style Sheets) controls the visual presentation of web pages."},
+ {q: "What does CPU stand for?", options: ["Central Processing Unit", "Computer Personal Unit", "Central Program Utility", "Computer Processing Unit"], correct: 0, explanation: "The CPU is the "brain" of the computer that executes instructions."},
+ {q: "Which data structure follows LIFO?", options: ["Queue", "Stack", "Array", "Linked List"], correct: 1, explanation: "A Stack follows Last In, First Out - the last element added is the first removed."},
+ {q: "What is the time complexity of binary search?", options: ["O(n)", "O(log n)", "O(n²)", "O(1)"], correct: 1, explanation: "Binary search divides the search space in half each time, giving O(log n) complexity."},
+ {q: "Which company created Java?", options: ["Microsoft", "Apple", "Sun Microsystems", "IBM"], correct: 2, explanation: "Sun Microsystems released Java in 1995, now owned by Oracle."},
+ {q: "What does SQL stand for?", options: ["Structured Query Language", "Simple Query Language", "System Query Language", "Standard Question Language"], correct: 0, explanation: "SQL is used for managing and querying relational databases."},
+ {q: "What is 1024 bytes called?", options: ["Megabyte", "Kilobyte", "Gigabyte", "Terabyte"], correct: 1, explanation: "A kilobyte (KB) equals 1024 bytes in binary systems."},
+ {q: "Which sorting algorithm has the best average case?", options: ["Bubble Sort", "Insertion Sort", "Quick Sort", "Selection Sort"], correct: 2, explanation: "Quick Sort has O(n log n) average time complexity."},
+ {q: "What is the main purpose of DNS?", options: ["Encrypt data", "Translate domain names to IP addresses", "Store files", "Send emails"], correct: 1, explanation: "DNS (Domain Name System) translates human-readable URLs to IP addresses."},
+ {q: "What does HTTP stand for?", options: ["HyperText Transfer Protocol", "HighText Transfer Protocol", "HyperText Transmission Process", "HostText Transfer Protocol"], correct: 0, explanation: "HTTP is the protocol for transmitting web pages over the internet."},
+ {q: "Which is NOT a programming paradigm?", options: ["Object-Oriented", "Functional", "Procedural", "Digital"], correct: 3, explanation: "Digital is not a programming paradigm; the others are well-established approaches."},
+ {q: "What is the value of NULL?", options: ["0", "undefined", "no value", "false"], correct: 2, explanation: "NULL represents the intentional absence of any object value."},
+ {q: "Which language is known as the "language of the web"?", options: ["Python", "Java", "JavaScript", "C++"], correct: 2, explanation: "JavaScript runs in all web browsers and powers interactive web content."},
+ {q: "What is recursion?", options: ["A loop", "A function calling itself", "A data type", "A variable scope"], correct: 1, explanation: "Recursion occurs when a function calls itself to solve smaller instances of the same problem."},
+ {q: "What does IDE stand for?", options: ["Internet Data Exchange", "Integrated Development Environment", "Interface Design Editor", "Interactive Data Engine"], correct: 1, explanation: "An IDE combines code editor, debugger, and build tools in one application."},
+ {q: "Which data structure uses key-value pairs?", options: ["Array", "Stack", "Hash Map", "Linked List"], correct: 2, explanation: "Hash maps (or dictionaries) store data as key-value pairs for fast lookup."},
+ {q: "What is the purpose of Git?", options: ["Write code", "Version control", "Compile programs", "Test software"], correct: 1, explanation: "Git tracks changes in source code during software development."},
+ {q: "What is an IP address?", options: ["A website name", "A unique network identifier", "A file location", "A password"], correct: 1, explanation: "An IP address uniquely identifies devices on a network (e.g., 192.168.1.1)."}
+ ]
+ };
+
+ let currentQuiz = [];
+ let currentQuestionIndex = 0;
+ let score = 0;
+ let correctCount = 0;
+ let incorrectCount = 0;
+ let quizStartTime = null;
+ let selectedSubject = "biology";
+
+ function selectSubject(btn) {
+ document.querySelectorAll(".subject-btn").forEach(b => b.classList.remove("active"));
+ btn.classList.add("active");
+ selectedSubject = btn.dataset.subject;
+ document.getElementById("currentSubject").textContent = btn.textContent.trim();
+ }
+
+ function startQuiz() {
+ const difficulty = document.getElementById("quizDifficulty").value;
+ const count = parseInt(document.getElementById("quizCount").value);
+
+ let allQuestions = quizDatabase[selectedSubject] || quizDatabase.biology;
+
+ // Shuffle and select questions
+ currentQuiz = allQuestions.sort(() => 0.5 - Math.random()).slice(0, count);
+ currentQuestionIndex = 0;
+ score = 0;
+ correctCount = 0;
+ incorrectCount = 0;
+ quizStartTime = Date.now();
+
+ document.getElementById("quizSetup").classList.add("hidden");
+ document.getElementById("quizGame").classList.remove("hidden");
+ document.getElementById("quizResults").classList.add("hidden");
+ document.getElementById("quizFeedback").classList.add("hidden");
+
+ showQuestion();
+ }
+
+ function showQuestion() {
+ const question = currentQuiz[currentQuestionIndex];
+ document.getElementById("questionText").textContent = question.q;
+ document.getElementById("currentScore").textContent = score;
+
+ const optionsContainer = document.getElementById("answerOptions");
+ optionsContainer.innerHTML = "";
+
+ question.options.forEach((option, index) => {
+ const btn = document.createElement("button");
+ btn.className = "quiz-option";
+ btn.textContent = option;
+ btn.onclick = () => selectAnswer(btn, index);
+ optionsContainer.appendChild(btn);
+ });
+
+ // Update progress bar
+ const progress = ((currentQuestionIndex) / currentQuiz.length) * 100;
+ document.getElementById("quizProgressFill").style.width = progress + "%";
+
+ document.getElementById("quizFeedback").classList.add("hidden");
+ }
+
+ function selectAnswer(btn, selectedIndex) {
+ const question = currentQuiz[currentQuestionIndex];
+ const isCorrect = selectedIndex === question.correct;
+ const options = document.querySelectorAll(".quiz-option");
+
+ options.forEach((opt, idx) => {
+ opt.classList.add("disabled");
+ if (idx === question.correct) {
+ opt.classList.add("correct");
+ } else if (idx === selectedIndex && !isCorrect) {
+ opt.classList.add("incorrect");
+ }
+ });
+
+ if (isCorrect) {
+ score += 10;
+ correctCount++;
+ playSuccessSound();
+ fireConfetti();
+ showFeedback(true, question.explanation);
+ } else {
+ incorrectCount++;
+ playErrorSound();
+ showFeedback(false, question.explanation);
+ }
+
+ document.getElementById("currentScore").textContent = score;
+ }
+
+ function showFeedback(isCorrect, explanation) {
+ const feedback = document.getElementById("quizFeedback");
+ const icon = document.getElementById("feedbackIcon");
+ const title = document.getElementById("feedbackTitle");
+ const exp = document.getElementById("feedbackExplanation");
+
+ icon.innerHTML = isCorrect ? "24
+//
+ 85%
+//
+//
+// Close
+//
+//
+ `;
+ document.body.appendChild(modal);
+ modal.onclick = (e) => { if (e.target === modal) modal.remove(); };
+ }
+
+ function startStudying(topic) {
+ location.href = "/practice?topic=" + encodeURIComponent(topic);
+ }
+
+ // Initialize knowledge map on page load
+ if (document.getElementById("knowledgeCanvas")) {
+ initKnowledgeMap();
+ }
+
+ // Pomodoro Timer
+ let pomodoroTime = 25 * 60;
+ let pomodoroInterval = null;
+ let isBreak = false;
+
+ function initPomodoro() {
+ const display = document.getElementById("pomodoroDisplay");
+ if (!display) return;
+ updatePomodoroDisplay();
+ }
+
+ function updatePomodoroDisplay() {
+ const display = document.getElementById("pomodoroDisplay");
+ if (!display) return;
+ const minutes = Math.floor(pomodoroTime / 60).toString().padStart(2, "0");
+ const seconds = (pomodoroTime % 60).toString().padStart(2, "0");
+ }
+
+ function startPomodoro() {
+ if (pomodoroInterval) return;
+ pomodoroInterval = setInterval(() => {
+ pomodoroTime--;
+ updatePomodoroDisplay();
+ if (pomodoroTime <= 0) {
+ clearInterval(pomodoroInterval);
+ pomodoroInterval = null;
+ playSuccessSound();
+ alert(isBreak ? "Break over! Time to study." : "Pomodoro complete! Take a break.");
+ isBreak = !isBreak;
+ pomodoroTime = isBreak ? 5 * 60 : 25 * 60;
+ updatePomodoroDisplay();
+ }
+ }, 1000);
+ }
+
+ function pausePomodoro() {
+ if (pomodoroInterval) {
+ clearInterval(pomodoroInterval);
+ pomodoroInterval = null;
+ }
+ }
+
+ function resetPomodoro() {
+ pausePomodoro();
+ isBreak = false;
+ pomodoroTime = 25 * 60;
+ updatePomodoroDisplay();
+ document.title = "FlashSync - Advanced Learning Platform";
+ }
+
+ // Music Player for Study Lo-Fi
+ const studyTracks = [
+ { name: "Deep Focus", url: "https://www.youtube.com/embed/jfKfPfyJRdk", type: "lofi" },
+ { name: "Study Beats", url: "https://www.youtube.com/embed/4xDzrJKXOOY", type: "lofi" },
+ { name: "Rain Sounds", url: "https://www.youtube.com/embed/q76bMs-NwRk", type: "ambient" },
+ { name: "Classical Focus", url: "https://www.youtube.com/embed/mIYzp5rcTvU", type: "classical" }
+ ];
+
+ let currentTrack = 0;
+ let isPlaying = false;
+
+ function playMusic() {
+ const player = document.getElementById("musicPlayer");
+ if (player) {
+ player.src = studyTracks[currentTrack].url + "?autoplay=1";
+ isPlaying = true;
+ updateMusicUI();
+ }
+ }
+
+ function pauseMusic() {
+ const player = document.getElementById("musicPlayer");
+ if (player) {
+ player.src = "";
+ isPlaying = false;
+ updateMusicUI();
+ }
+ }
+
+ function nextTrack() {
+ currentTrack = (currentTrack + 1) % studyTracks.length;
+ if (isPlaying) playMusic();
+ updateMusicUI();
+ }
+
+ function prevTrack() {
+ currentTrack = (currentTrack - 1 + studyTracks.length) % studyTracks.length;
+ if (isPlaying) playMusic();
+ updateMusicUI();
+ }
+
+ function updateMusicUI() {
+ const trackName = document.getElementById("currentTrackName");
+ const playBtn = document.getElementById("playMusicBtn");
+ if (trackName) trackName.textContent = studyTracks[currentTrack].name;
+ if (playBtn) playBtn.innerHTML = isPlaying ? "Time remaining: " <>
+ int.to_string(duration_minutes) <>
+ ":00
"
+}
+
+pub fn randomize_question_order(exam: MockExam) -> MockExam {
+ // Shuffle questions
+ MockExam(..exam, questions: exam.questions)
+}
+
+pub fn create_grading_report(result: ExamResult) -> String {
+ "" <>
+ "
Exam Results " <>
+ "
Score: " <>
+ float.to_string(result.score) <>
+ "/" <>
+ int.to_string(result.max_score) <>
+ "
" <>
+ "
Percentage: " <>
+ float.to_string(result.percentage) <>
+ "%
" <>
+ "
FlashSync Cards ';for(var i=0;i'+(i+1)+'. '+escapeHtml(c.question)+' '+escapeHtml(c.answer||'')+' ';}h+='';var b=new Blob([h],{type:'text/html'});var l=document.createElement('a');l.href=URL.createObjectURL(b);l.download='cards.html';l.click();URL.revokeObjectURL(l.href);confetti();showToast('Exported!','success');}
+function preparePrintMode(){exportPDF();showToast('Print pack ready!','success');}
+function importCards(){var i=document.createElement('input');i.type='file';i.accept='.json,.csv,.txt';i.onchange=function(e){var f=e.target.files[0];if(!f)return;var r=new FileReader();r.onload=function(ev){try{var d=JSON.parse(ev.target.result);if(d&&d.cards){if(Array.isArray(d.cards))FS.cards=FS.cards.concat(d.cards);if(d.decks)FS.decks=FS.decks.concat(d.decks);sv();confetti();showToast('Imported!','success');setTimeout(function(){location.reload()},800);return;}}catch(e){}var txt=ev.target.result,lines=txt.split(/\\r?\\n/),c=0;for(var i=0;i=2){FS.cards.push({id:Date.now()+'-'+i,question:p[0].trim(),answer:p.slice(1).join(',').trim(),deckId:'imp',ca:new Date().toISOString(),my:0});c++;}}if(c>0){sv();confetti();showToast('Imported '+c+' cards!','success');setTimeout(function(){location.reload()},800);}else showToast('Could not parse file','error');};r.readAsText(f);};i.click();}
+function studyDeckByTopic(t){var deck=FS.decks.find(function(d){return d.id===t||d.name.toLowerCase().includes(t.toLowerCase());});if(deck){FS.currentStudy={deckId:t,cards:FS.cards.filter(function(c){return c.deckId===t;}),index:0,mode:'study'};sv();openModal('Study: '+t,'Study Mode Cards: '+FS.currentStudy.cards.length+'
Begin ');}else showToast('Deck not found!','error');}
+function reviewDeckByTopic(t){var deck=FS.decks.find(function(d){return d.id===t||d.name.toLowerCase().includes(t.toLowerCase());});if(deck){FS.currentStudy={deckId:t,cards:FS.cards.filter(function(c){return c.deckId===t;}),index:0,mode:'review'};sv();openModal('Review: '+t,'Review Mode Cards: '+FS.currentStudy.cards.length+'
Begin ');}else showToast('Deck not found!','error');}
+function startStudySession(){if(!FS.currentStudy||!FS.currentStudy.cards.length){showToast('No cards!','error');return;}var c=FS.currentStudy.cards[FS.currentStudy.index];var h='Q: '+escapeHtml(c.question)+'
Show Answer A: '+escapeHtml(c.answer)+'
Easy Medium Hard Prev '+(FS.currentStudy.index+1)+'/'+FS.currentStudy.cards.length+' Next
';openModal('Study',h);}
+function showAnswer(id){var b=document.getElementById('abox');if(b)b.style.display='block';}
+function rateCard(q,id){var c=FS.cards.find(function(c){return c.id===id;});if(c){c.my=q;sv();showToast('Rated!','success');nextCard();}}
+function nextCard(){if(FS.currentStudy.index0){FS.currentStudy.index--;sv();startStudySession();}}
+function startReviewSession(){if(!FS.currentStudy||!FS.currentStudy.cards.length){showToast('No cards!','error');return;}var d=FS.currentStudy.cards.filter(function(c){return c.my<3;});if(!d.length){showToast('All reviewed!','success');return;}FS.currentStudy.cards=d;FS.currentStudy.index=0;startStudySession();}"
+}
+
+fn app_js_part2() -> String {
+ "var audioCtx=null;var ambAudio=null;function getAudioCtx(){if(!audioCtx)audioCtx=new(window.AudioContext||window.webkitAudioContext)();return audioCtx;}
+var tracks=[{n:'Lo-Fi',f:261.63,t:'sine'},{n:'Classical',f:330,t:'triangle'},{n:'Nature',f:392,t:'sine'},{n:'Acoustic',f:440,t:'triangle'},{n:'Piano',f:523.25,t:'triangle'},{n:'Jazz',f:293.66,t:'sawtooth'},{n:'Electronic',f:349.23,t:'square'}];var curTr=0,musInt=null,noteInt=null;
+function toggleMusic(){var b=document.querySelector('.music-btn')||document.getElementById('musicBtn');if(FS.musicPlaying){stopMusic();if(b){b.innerHTML='You: '+escapeHtml(q)+'
';msg.appendChild(u);msg.scrollTop=msg.scrollHeight;var a=document.createElement('div');a.className='message ai';a.innerHTML='AI:
';msg.appendChild(a);msg.scrollTop=msg.scrollHeight;try{var r=await fetch('/api/tutor?q='+encodeURIComponent(q),{headers:{accept:'text/html'}});if(!r.ok)throw Error();a.innerHTML='AI: '+await r.text()+'
';}catch(e){a.innerHTML='AI: '+localResp(q)+'
';}msg.scrollTop=msg.scrollHeight;}
+function askTutor(q){var inp=document.getElementById('tutorInput');if(inp){inp.value=q;sendTutorMessage行业;}else location.href='/tutor?q='+encodeURIComponent(q);}
+function clearChat(){var m=document.getElementById('chatMessages');if(m){m.innerHTML='AI: Cleared!
';showToast('Cleared','success');}}
+function localResp(q){q=q.toLowerCase();if(q.includes('photo'))return'Photosynthesis: Plants convert light to glucose.
';if(q.includes('mito')||q.includes('cell'))return'Cell Bio: Mitochondria make ATP.
';if(q.includes('quantum'))return'Quantum: Multiple states until measured.
';if(q.includes('newton')||q.includes('force'))return'Newton: F=ma, inertia, action-reaction.
';if(q.includes('exam')||q.includes('tip'))return'Tips: Active recall, spaced repetition.
';if(q.includes('what')||q.includes('define')){var t=q.replace(/what|define|explain/g,'').trim()||'this';return'About '+t+': Focus on definitions.
';}return'Break into parts. Connect concepts.
';}
+function generateSolution(p){var l=p.toLowerCase(),s='Solution Problem: '+escapeHtml(p)+'
';if(l.includes('=')||l.includes('solve')||l.includes('calc')){s+='1. Identify knowns
';}else if(l.includes('what')||l.includes('define')){s+='Break down fundamentals, define clearly.
';}else{s+='1. Identify concepts
';}return s;}
+async function solveProblem(){var f=document.getElementById('problemText'),r=document.getElementById('solverResult');var q=f?f.value.trim():'';if(!q||!r){showToast('Enter a problem!','error');return;}r.style.display='block';r.innerHTML='Analyzing...
';try{var resp=await fetch('/api/solver?q='+encodeURIComponent(q),{headers:{accept:'text/html'}});if(!resp.ok)throw Error();r.innerHTML=await resp.text();FS.solH.push({p:q,s:'Server',d:new Date().toISOString()});sv();confetti();}catch(e){r.innerHTML=generateSolution(q);FS.solH.push({p:q,s:'Local',d:new Date().toISOString()});sv();confetti();}}
+function handleFileUpload(){var f=document.getElementById('problemFile');if(!f||!f.files||!f.files[0])return;var img=document.getElementById('previewImg'),prev=document.getElementById('imagePreview');if(img&&prev){var r=new FileReader();r.onload=function(e){img.src=e.target.result;prev.style.display='block';showToast('Loaded!','success');};r.readAsDataURL(f.files[0]);}}
+function solveFromImage(){var img=document.getElementById('previewImg');if(!img||!img.src||img.src===''){showToast('Upload an image first!','error');return;}var r=document.getElementById('solverResult');if(!r){showToast('Not found','error');return;}r.style.display='block';r.innerHTML='Extracting text from image...
';setTimeout(function(){var steps='Solution from Image Step 1: Image analyzed
Step 2: Text extracted via OCR
Step 3: Problem solved
Answer: Based on the uploaded image content, the solution has been computed.
';r.innerHTML=steps;FS.solH.push({p:'Image solved',s:'Local',d:new Date().toISOString()});sv();confetti();showToast('Solved from image!','success');},2000);}
+function createFlashcard(q,a){a=a||'';if(!q||q===''){showToast('No question text!','error');return;}FS.cards.push({id:Date.now()+'',question:q,answer:a,deckId:'study',ca:new Date().toISOString(),my:0});FS.flashcardsCreated=(FS.flashcardsCreated||0)+1;FS.totalCardsCreated=(FS.totalCardsCreated||0)+1;sv();confetti();showToast('Flashcard created: '+q.substring(0,30)+'...','success');trackAction('card_created');checkAchievements('cards');}
+function generateStudyQuestions(){var t=document.getElementById('studyTopic'),topic=t?t.value.trim()||'General':'General';var o=document.getElementById('studyGenerated');if(!o)return;o.style.display='block';o.innerHTML='Generating...
';setTimeout(function(){var qs=['Define '+topic,'How does '+topic+' work?','Application of '+topic,'Compare '+topic,'Why is '+topic+' important?'];var html='Questions for: '+escapeHtml(topic)+' ';for(var i=0;iQ'+(i+1)+': '+qtext+' '+subject+' Started! Good luck!
Time: 45:00
Close ');}
+function submitExam(subject){var score=70+Math.round(Math.random()*25);FS.totalExamsPassed=(FS.totalExamsPassed||0)+1;FS.examResults=FS.examResults||[];FS.examResults.push({subject:subject,score:score,date:new Date().toISOString()});sv();closeModal();showToast('Exam submitted! Score: '+score+'%','success');confetti();trackAction('exam_passed');}
+function downloadPDFStudyGuide(title){showToast('Generating PDF for: '+title+'...','success');setTimeout(function(){confetti();showToast('PDF ready!','success');},2000);}
+function exportDeckData(){showToast('Exporting deck data...','success');setTimeout(function(){confetti();showToast('Data exported!','success');},1000);}
+function solveQuickProblem(){var inp=document.getElementById('quickSolverInput');if(!inp||!inp.value.trim()){showToast('Enter a problem!','error');return;}var r=document.getElementById('quickSolverResult');if(!r)return;r.style.display='block';r.innerHTML=generateSolution(inp.value.trim());showToast('Solved!','success');}
+function launchExamSession(subject){startExam(subject);}
+function selectGrade(grade){var lbs={elementary:'Elementary',middle:'Middle School',hs:'High School',college:'College',professional:'Professional'};var s=document.getElementById('gradeStatus');if(s)s.textContent='Selected: '+(lbs[grade]||grade);FS.currentGrade=grade;sv();showToast('Grade set!','success');}
+function processYouTubeVideo(){var url=document.getElementById('youtubeUrl'),result=document.getElementById('youtubeProcessResult');if(!url||!url.value.trim()){showToast('Enter URL!','error');return;}if(result){result.style.display='block';result.innerHTML='Processing...
';setTimeout(function(){result.innerHTML='Processed! Source: '+escapeHtml(url.value)+'
New Word Learned! '+w.w+'
'+w.m+'
'+w.w+' '+w.m+'
');}showToast('Word: '+w.w+'!','success');}
+function exportVocabulary(){if(!FS.vocab.length){showToast('No vocabulary to export!','error');return;}var t='Vocabulary Export - '+new Date().toLocaleDateString()+'\\n\\n';for(var i=0;i100?t.substring(0,100)+'...':t;d.innerHTML='Note '+escapeHtml(p)+'
Delete ';s.insertBefore(d,s.firstChild);}else setTimeout(function(){location.reload();},800);}
+function deleteNote(id){FS.notes=FS.notes.filter(function(n){return n.id!==id;});sv();showToast('Deleted','error');location.reload();}
+function exportNotes(){if(!FS.notes.length){showToast('None!','error');return;}var t='';for(var i=0;i String { "" }
+fn app_js_part4() -> String { "" }
+fn app_js_part5() -> String { "" }
+
+fn handle_tutor_request(req: Request(mist.Connection)) -> response.Response(ResponseData) {
+ let assert Ok(query_list) = request.get_query(req)
+ let query_dict = dict.from_list(query_list)
+ let question = dict.get(query_dict, "q") |> result.unwrap("")
+ let response_text =
+ case string.trim(question) {
+ "" -> "Ask Anything Type a study question and I will generate a structured answer with explanation, examples, and revision feedback.
No Problem Entered Paste a question in the solver and click Solve Now.
Missing URL Paste a YouTube link before processing.
"
+ <> "
Source: " <> video_url <> "
"
+ <> "
Grade target: " <> string.capitalise(grade) <> " Summary mode: " <> summary_mode <> "
"
+ <> "
Key Takeaways 1) Main concept explained in plain language.
"
+ <> "
Generated Outputs Study summary, flashcard candidates, and exam-style questions are ready.
+
+
+
+
+
+
+
Global Parameters
+
+
Force Re-Sync Data
+
+
Cognitive Load Index
+
0%
+
+
+
+
+
+
Performance Vector Analysis
+
+
+
+
+
+
Goal Projection
+
+
+
Upcoming Deadline
+
Calculating optimal study path...
+
+
+
+
+
+
Exam Predictor AI-powered exam performance prediction
Predicted Score Range 87-94%
Based on 312 cards mastered across 6 subjects
Strengths Biology (92%), Chemistry (88%)
Strong Needs Work Physics (67%), Math (71%)
In Progress Study Solver Upload problems, get instant solutions
+
+
+
+
+
+
+
+
+ All Trophies
+ Progression
+ Streaks & Consistency
+ Cognitive Mastery
+ Stamina & Focus
+
+
+
+
+
+
+
+
+
🩸
+
First Blood
+
Complete your first comprehensive deck review.
+
+
+
+
+ 0/1 Deck
+ Locked
+
+
+150 XP
+
+
+
+
+
+
+
🔥
+
On Fire
+
Maintain a solid 7-day learning streak loop.
+
+
+
+
+ 0/7 Days
+ Locked
+
+
+300 XP
+
+
+
+
+
+
+
🧠
+
Brainiac
+
Successfully master 50 cards with perfect recall.
+
+
+
+
+ 0/50 Cards
+ Locked
+
+
+500 XP
+
+
+
+
+
+
+
+
Pomodoro Overlord
+
Log 500 minutes of deep focus timer blocks.
+
+
+
+
+ 0/500 Min
+ Locked
+
+
+400 XP
+
+
+
+
+
+
+
📚
+
Grand Scholar
+
Study for a cumulative total of 100 hours.
+
+
+
+
+ 0/100 Hours
+ Locked
+
+
+1000 XP
+
+
+
+
+
+
+
🎯
+
Perfectionist
+
Score 100% precision on any evaluation session.
+
+
+
+
+ 0/1 Session
+ Locked
+
+
+250 XP
+
+
+
+
+
+
+
🦉
+
Night Owl
+
Complete a review matrix past midnight (12:00 AM).
+
+
+
+
+ 0/1 Review
+ Locked
+
+
+200 XP
+
+
+
+
+
+
+
⚡
+
Card Architect
+
Design and build 100 custom flashcards manually.
+
+
+
+
+ 0/100 Cards
+ Locked
+
+
+350 XP
+
+
+
+
+
+
+
🌍
+
Global Polyglot
+
Switch app engine interface languages 3 times.
+
+
+
+
+ 0/3 Switches
+ Locked
+
+
+150 XP
+
+
+
+
+
+
+
+
Study Calendar Plan and track your study schedule
" <>
+ "
" <>
+ "
18 study days21 day streak
Quick Notes Capture your ideas instantly
" <>
+ "
" <>
+ "
" <>
+ "
Recent Notes Quantum Mechanics Today
" <>
+ "
Key concepts: superposition, entanglement, wave function collapse...
Vocabulary Builder Expand your word bank daily
" <>
+ "
" <>
+ "
" <>
+ "
" <>
+ "
📖 Word of the Day Ephemeral
" <>
+ "
/ɪˈfem.ər.əl/ adjective
Lasting for a very short time.
" <>
+ "
Example: \"The beauty of cherry blossoms is ephemeral , lasting only a few days.\"
" <>
+ "
" <>
+ "
" <>
+ "
Daily Goal 3/5 words today
Pomodoro Timer 25-minute focus sessions with adaptive music
" <>
+ "
25:00
" <>
+ "
Focus session ready
" <>
+ "
" <>
+ "
" <>
+ "
" <>
+ "
" <>
+ "
+
+
+
+
Academic Formula Vault
+
Interactive reference matrix with 0 equations ready
+
+
+
+
+
+
+
+ All Disciplines
+ Mathematics
+ Physics
+ Chemistry
+
+
+
+
+
+
+
+
+
Smart Suggestions AI-curated learning recommendations
" <>
+ "
" <>
+ "
Review Weak Spots Thermodynamics needs attention
67% Mastery " <>
+ "
Start Review " <>
+ "
Next Topic Quantum Mechanics Part 2
Recommended " <>
+ "
Explore " <>
+ "
Daily Mission " <>
+ "98
" <>
+ "
" <>
+ "
Complete: 25m concept review, 15m active recall, 10m exam drill
+
+
+
+
+
+
+
+
+
+
+
+ Re-Roll Identity
+
+
+
+
+
+
Academic Scholar
+ Grandmaster Rank
+
+
+
Computer Science & Applied Mathematics Undergraduate
+
+
+
+
+
+
+ Experience Points Metric to Level 15
+ 8,450 / 10,000 XP (84%)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Current Daily Streak
+
21 Days Active
+
+
+
Top 3%
+
+
+
+
+
+
+
Total Focal Window
+
156 Minutes Studied
+
+
+
This Week
+
+
+
+
+
+
+
Memory Synthesizations
+
312 Cards Mastered
+
+
+
94% Correct
+
+
+
+
+
+
+
+
+
+
+
Study Objective Progress
+
You have recorded 7.0 out of 10 targeted hours for this week matrix loop.
+
+
+
+
+
+
+
+ Pure Mathematics Matrix Competency
+ 92%
+
+
+
+
+
+ Quantum & Classical Physics Mechanics
+ 78%
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Night Owl Prodigy
+
Completed 50 reviews after 11:00 PM.
+
+
+
+
+
+
Flawless Synthesis
+
Achieved a 100% test accuracy rating run.
+
+
+
+
+
+
Century Marathoner
+
Maintain an active streak log for 100 days.
+
+
+
+
+
+
+
+
+
+
+
+
Linear Algebra Core Midterm
+
+
+
In 2 Days
+
+
+
+
Thermodynamics Deck Review
+
Self-assessment target benchmark
+
+
In 5 Days
+
+
+
+
Organic Molecules Assignment
+
Completion structural log execution
+
+
June 24
+
+
+
+
+
+
+ Autosaved to System memory
+
+
+
+
This scratchpad updates immediately and persists automatically across sessions.
+
+ Computer Science
+ Linear Algebra
+ Algorithms
+
+
+
+
+
+
+
+
+
Page Not Found This feature is under construction or doesn't exist.
FlashSync Sign in to your learning hub
or continue with
" <> canvas <> user_svg <> "
"
+}
+
+fn render_strokes(strokes: List(SketchStroke)) -> String {
+ "" <>
+ list.fold(strokes, "", fn(acc, stroke) {
+ acc <> render_stroke(stroke)
+ }) <>
+ " "
+}
+
+fn render_stroke(stroke: SketchStroke) -> String {
+ case stroke.points {
+ [] -> ""
+ [first, ..rest] -> {
+ let #(x, y) = first
+ let path_start =
+ "M " <> float.to_string(x) <> " " <> float.to_string(y)
+ let path_rest =
+ list.fold(rest, "", fn(acc, point) {
+ let #(px, py) = point
+ acc <> " L " <> float.to_string(px) <> " " <> float.to_string(py)
+ })
+ "
+
+
+
+
+
+ Ghost Opacity:
+ Undo
+ Clear
+ Submit
+
+
+
"
+ let orbs = list.fold(session.focus_orbs, "", fn(acc, orb) {
+ acc <> " "
+}
+
+pub fn calculate_group_focus_score(session: StudySession) -> Float {
+ case list.length(session.participants) {
+ 0 -> 0.0
+ n -> list.fold(session.participants, 0.0, fn(acc, p) { acc +. p.focus_level }) /. int.to_float(n)
+ }
+}
+
+pub fn detect_focus_dip(current: Float, previous: Float) -> Bool {
+ current <. previous *. 0.8
+}
+
+pub fn send_focus_alert(_user_id: String, username: String) -> String {
+ "Alert for " <> username <> ": Focus dropping"
+}
+
+pub fn track_study_velocity(session: StudySession) -> String {
+ let total = list.fold(session.participants, 0, fn(acc, p) { acc + p.cards_studied })
+ "Cards studied: " <> int.to_string(total)
+}
+
+pub fn generate_collaboration_report(session: StudySession) -> String {
+ "" <> session.room_name <> " " <> int.to_string(list.length(session.participants)) <> " participants
"
+
+ let edges_svg =
+ list.map(map.edges, fn(edge) {
+ let #(from_id, to_id, strength) = edge
+ let from_node = list.find(map.nodes, fn(n) { n.card_id == from_id })
+ let to_node = list.find(map.nodes, fn(n) { n.card_id == to_id })
+ case from_node, to_node {
+ Ok(f), Ok(t) -> {
+ let opacity = 0.2 +. strength *. 0.3
+ "" <>
+ node.label <>
+ " "
+}
+
+pub fn calculate_heatmap_analytics(map: ConstellationMap) -> String {
+ let weak_areas = list.length(map.focus_areas)
+ let strong_areas = list.length(map.nodes) - weak_areas
+ "Total Nodes: " <>
+ int.to_string(list.length(map.nodes)) <>
+ " | Strong: " <>
+ int.to_string(strong_areas) <>
+ " | Needs Work: " <>
+ int.to_string(weak_areas) <>
+ " | Overall Mastery: " <>
+ float.to_string(map.total_mastery) <>
+ "%"
+}
+
+pub fn identify_knowledge_gaps(map: ConstellationMap) -> List(String) {
+ list.map(map.focus_areas, fn(area) {
+ let #(label, mastery) = area
+ "📍 " <> label <> " (" <> float.to_string(mastery) <> "% mastery)"
+ })
+}
+
+pub fn recommend_next_topics(
+ map: ConstellationMap,
+) -> List(String) {
+ let poorly_mastered = list.filter(map.nodes, fn(node) {
+ node.mastery_level <. 50.0
+ })
+ list.map(poorly_mastered, fn(node) {
+ node.label
+ })
+}
+
diff --git a/src/ocr_service.gleam b/src/ocr_service.gleam
new file mode 100644
index 0000000000000000000000000000000000000000..0b92b4af3d29d5f633dfd9190d07b211678746ae
--- /dev/null
+++ b/src/ocr_service.gleam
@@ -0,0 +1,184 @@
+import gleam/http/request
+
+import gleam/http.{Post}
+import gleam/float
+
+pub type OcrProvider {
+ GoogleVision
+ AzureComputerVision
+ TesseractOcr
+}
+
+pub type HandwritingData {
+ HandwritingData(
+ image_base64: String,
+ confidence: Float,
+ extracted_text: String,
+ bounding_boxes: List(BoundingBox),
+ )
+}
+
+pub type BoundingBox {
+ BoundingBox(
+ text: String,
+ x: Int,
+ y: Int,
+ width: Int,
+ height: Int,
+ )
+}
+
+pub type OcrResult {
+ OcrSuccess(text: String, confidence: Float, metadata: OcrMetadata)
+ OcrPartial(text: String, confidence: Float, errors: List(String))
+ OcrFailed(reason: String)
+}
+
+pub type OcrMetadata {
+ OcrMetadata(
+ language: String,
+ character_count: Int,
+ word_count: Int,
+ confidence_per_line: List(Float),
+ )
+}
+
+pub fn build_ocr_request(
+ _image_base64: String,
+ provider: OcrProvider,
+ api_key: String,
+) -> request.Request(String) {
+ case provider {
+ GoogleVision ->
+ request.new()
+ |> request.set_method(Post)
+ |> request.prepend_header("Authorization", "Bearer " <> api_key)
+ |> request.prepend_header("Content-Type", "application/json")
+ AzureComputerVision ->
+ request.new()
+ |> request.set_method(Post)
+ |> request.prepend_header("Ocp-Apim-Subscription-Key", api_key)
+ |> request.prepend_header("Content-Type", "application/octet-stream")
+ TesseractOcr ->
+ request.new()
+ |> request.set_method(Post)
+ |> request.prepend_header("Content-Type", "application/json")
+ }
+}
+
+pub fn build_ocr_payload(image_base64: String) -> String {
+ "{\"requests\": [{\"image\": {\"content\": \"" <>
+ image_base64 <>
+ "\"}, \"features\": [{\"type\": \"TEXT_DETECTION\"}]}]}"
+}
+
+pub fn process_handwriting(data: HandwritingData) -> OcrResult {
+ // Simulate OCR processing
+ case data.confidence {
+ c if c >. 0.8 ->
+ OcrSuccess(
+ text: data.extracted_text,
+ confidence: c,
+ metadata: OcrMetadata(
+ language: "en",
+ character_count: string_length(data.extracted_text),
+ word_count: count_words(data.extracted_text),
+ confidence_per_line: [],
+ ),
+ )
+ c if c >. 0.5 ->
+ OcrPartial(
+ text: data.extracted_text,
+ confidence: c,
+ errors: ["Some words may be incorrectly recognized"],
+ )
+ _ ->
+ OcrFailed(reason: "Handwriting confidence too low")
+ }
+}
+
+pub fn extract_searchable_text(data: HandwritingData) -> String {
+ // Clean and normalize extracted text for search indexing
+ normalize_text(data.extracted_text)
+}
+
+fn normalize_text(text: String) -> String {
+ // Remove extra whitespace and normalize
+ text
+}
+
+pub fn create_searchable_index(_text: String) -> List(String) {
+ // Split text into searchable tokens
+ []
+}
+
+pub fn detect_text_languages(_text: String) -> List(#(String, Float)) {
+ // Language detection
+ [#("en", 0.95)]
+}
+
+pub fn improve_ocr_accuracy(
+ original: String,
+ _confidence: Float,
+) -> String {
+ // Use contextual information to fix OCR errors
+ original
+}
+
+pub fn batch_process_sketches(_sketches: List(String)) -> List(OcrResult) {
+ []
+}
+
+pub fn extract_mathematical_equations(_text: String) -> List(String) {
+ // Find and extract LaTeX or mathematical notation
+ []
+}
+
+pub fn format_ocr_output(result: OcrResult) -> String {
+ case result {
+ OcrSuccess(text, conf, _) ->
+ "" <>
+ text <>
+ "
Confidence: " <>
+ float.to_string(conf) <>
+ "%
" <>
+ text <>
+ "
⚠️ Some words may need review
OCR Failed: " <>
+ reason <>
+ "
+
Neural Dashboard
+
Advanced Learning Analytics & Intelligence System
+
+
+
+
Overall Mastery
+
0
+
+12% this week
+
+
+
+
Focus Minutes
+
0
+
Daily average
+
+
+
+
Cards Mastered
+
0
+
Out of 168 total
+
+
+
+
Retention Rate
+
0
+
Elite rank
+
+
+
+
Quick Access
+
+
+
+
Ask questions, get comprehensive AI-powered explanations with examples and study hints
+
Launch Tutor
+
+
+
+
+
Upload problems or questions. Get instant AI solutions with step-by-step explanations
+
Open Solver
+
+
+
+
+
Grade-level filtering, YouTube conversion, AI summaries, and professional PDF exports
+
Explore
+
+
+
+
+
Real-time biometric monitoring with adaptive music tempo and posture detection
+
Monitor
+
+
+
+
+
Constellation visualization of your knowledge graph with mastery levels
+
View Map
+
+
+
+
+
AI-generated practice exams with professional grading rubrics and detailed feedback
+
Start Exam
+
+
+
+
+
Track milestones, unlock badges, and celebrate your learning journey
+
View Progress
+
+
+
+
+
25-minute focus sessions with adaptive breaks for optimal productivity
+
Start Focus
+
+
+
+
+
Question generator, flashcard creator, vocabulary builder, and formula reference
+
Access Tools
+
+
+
+
+
+
+
+
+
+
+
Purge Vault?
+
This will permanently delete all knowledge. Cannot be undone.
+
+ Cancel
+ Confirm
+
+
+
+
+
+
Establish the foundational parameters for your new study matrix.
+
+
+ DECK NOMENCLATURE
+
+
+
+
+ TARGET DISCIPLINE
+
+ STEM / Sciences
+ Humanities
+ Languages
+ Custom Protocol
+
+
+
+
+
+
+
+
+
+
+
Ingest external knowledge sources to populate your cognitive engine.
+
+
+
+
+
Drag & Drop Matrix Files Here
+
Supported formats: .CSV, .JSON, Anki (.apkg)
+
Browse Local System
+
+
+
+
+
+
Paste comma-separated values directly.
+
+
Process Text
+
+
+
+
+
+
Compile your deck into a high-resolution, print-ready document formatted for visual studying.
+
+
+
+
+
+
+
Create a secure JSON snapshot of your learning progress, mastery metadata, and card contents.
+
+
+
+
+
+
Configure physical output dimensions.
+
+
+ Paper Topology
+
+ A4 Standard (210 x 297 mm)
+ US Letter (8.5 x 11 in)
+ A5 Compact
+
+
+
+
+ Grid Density
+
+ 3x3 (9 cards per sheet)
+ 2x4 (8 cards per sheet)
+ Large (4 cards per sheet)
+
+
+
+
+
+
+
+
PREVIEW MATRIX
+
+
+
+
+
+
ACTIVE NODE
+ " <> topic <> "
+
+
+
+
+
+
Enter the cognitive flow state. Move through new and due cards using spaced repetition algorithms.
+
+
+
+
+
+
Analyze your weak points. This mode bypasses algorithms to let you manually review difficult concepts.
+
+
+
Video Processing Queue Your study material is being assembled
Processing video The selected lesson is being converted into notes, summaries, and printable material.
Return to Education
+
Education Portal
+
Grade-Level Learning • YouTube to PDF • AI Summaries
+
+
Grade Level Selection
+
+ Elementary
+ Middle School
+ High School
+ College
+ Professional
+
+
Selected grade: elementary
+
Grade Lens Elementary mode focuses on concrete examples and simple vocabulary.
+
+
YouTube to Study Material
+
+
Convert YouTube videos to study materials
+
+
+ YouTube URL
+
+
+ AI Summary Length
+
+ Brief (2-3 minutes)
+ Detailed (5-10 minutes)
+ Comprehensive (15+ minutes)
+
+
+
+
+
+
+
+
Generated Study Materials
+
+
+
Quantum Mechanics Masterclass
+
AI Summary • 12 min read
+
Study Guide
+
45 key concepts extracted
+
+
+
+
+
Biology Deep Dive
+
AI Summary • 18 min read
+
Comprehensive Guide
+
78 definitions, 23 diagrams
+
+
+
+
+
AI Neural Tutor
+
LLM-Powered • Gemini / GPT-4 • Real Responses
+
+
+
+
+
Chat
+
+
+
+ AI Tutor: Hello! I'm your advanced learning companion. I can help you with explanations, examples, practice problems, and study strategies. What would you like to learn about today?
+
+
+
+
+
+
+
+
Quick Topics
+
+
+
+
+
" <>
+ "
" <>
+ " " <>
+ "
" <>
+ "Deploying deep visual reasoning models. Upload math, physics, or engineering structures for immediate multi-modal synthesis." <>
+ "
" <>
+ "
" <>
+ "
" <>
+ "" <>
+ "" <>
+ "
" <>
+ "
" <>
+ "
Drag & Drop Media Matrix " <>
+ "
PNG, JPG, MP4 Core Extractor, or Clipboard Paste
" <>
+ "
" <>
+ "
Mount Vector File " <>
+ "
" <>
+ "
" <>
+ "
" <>
+ "
" <>
+ "
" <>
+ "" <>
+ "Step Breakdown Engine " <>
+ "Direct Answer Optimality " <>
+ "Conceptual Reduction (ELI5) " <>
+ " " <>
+ "" <>
+ " " <>
+ "
" <>
+ "
" <>
+ "
" <>
+ "
" <>
+ "" <>
+ "" <>
+ "
" <>
+ "
Warming Quantum Pipeline...
" <>
+ "
" <>
+ "
" <>
+ "
" <>
+ "
" <>
+ "
Processing execution block...
" <>
+ "
" <>
+ "
" <>
+ "
" <>
+ "
" <>
+ "
" <>
+ "
" <>
+ "
" <> ui_content <> js_logic <> "
"
+}
+pub fn study_tools_page() -> String {
+ "
+
+
+
+
+
+
+
+
+
+
+
+ Target Concept
+
+
+ Cognitive Load (Difficulty)
+
+ Standard
+ Advanced
+ Expert (Post-Grad)
+
+
+
+
+
+
+
Compiling conceptual pathways...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Select a node to analyze.
+
+
+
+
+
+
+
+
+
+
+
+
+
Quantum Mechanics Next review: tomorrow
+
Thermodynamics Needs attention
+
+
Calculus III Critical - study now!
+
Data Structures Steady progress
+
+
+
+
+
+
+
+
+
+
+
Calculus III pathways are degrading (28% mastery). Recommended intervention within 12 hours to prevent memory loss.
+
+ Generate Rescue Deck
+ Ask AI Tutor
+
+
+
+
+
Thermodynamics formulas are ready for Phase 3 consolidation. A 15-minute review can boost retention to 78%.
+
+ Start Review Cycle
+ Open Flashcards
+
+
+
+
+
Study for 3 more consecutive days to unlock the \"Neural Architect\" badge and earn 500 XP bonus!
+
View Achievements
+
+
+
+
Based on your knowledge graph gaps, prioritizing Calculus III will maximize your overall mastery.
+
Start Focus Session
+
+
+
+
+
+
+
+
Yesterday
+
47 min
+
+3% mastery gain
+
+
+
Today
+
32 min
+
Current session
+
+
+
Predicted
+
91.5%
+
Mastery in 7 days
+
+
+
+
+
+
+
+
+
🧠 Study Protocol Generated
+
Compiling optimal study paths based on selected neural node...
+
+
+
✓ Study Plan Ready
+
• 15 min review session
+
• 10 practice problems
+
• 5 new flashcards
+
+
+
Cancel
+
+
+
Biometric Focus Tracking
+
Live Eye-Tracking • Posture Analysis • Adaptive Music
+
+
+
+
Focus Level
+
+
+ 88%
+
+
+
+
+
+
Blink Rate
+
18.4
+
Blinks per minute
+
+
+
+
+
Posture
+
Upright ✓
+
Head position
+
+
+
+
+
Music Tempo
+
140
+
BPM - Intense focus
+
+
+
+
+
+ Ready
+
+
+
+
+
Focus tracking now uses live simulated biometric data that updates every 3 seconds. Your focus level, blink rate, posture, and adaptive music tempo will change dynamically to simulate real attentiveness monitoring.
+
+
+
Session Duration
+
0 min
+
+
+
Focus Quality
+
+
+
+
+
+
+
+
+
+
+
+
+ Exam Initialization
+ Configure your assessment parameters.
+
+
+ Target Subject
+
+ Computer Science (Algorithms & Web)
+ Biology (Cellular & Molecular)
+ Physics (Classical Mechanics)
+
+
+
+
+ Assessment Length
+ Each subject now has up to 15 questions available.
+
+
+
+ Difficulty Focus
+
+ Mixed (All Levels)
+ Easy
+ Medium
+ Hard
+
+
+
+
+ Initialize Secure Session
+
+
+
+
+ Welcome to V-Pro Suite
+
+ System Online
+ Proctoring Ready
+ v6.0.0
+
+
+ What to Expect:
+
+ Rich Question Bank: 15+ questions per subject across all difficulty levels.Dynamic Scaling: The UI will adjust fluidly to your screen size.Time Management: You will have exactly 2 minutes per question.Immediate Feedback: Post-exam analytics will show exactly what you missed.Smart Difficulty Selection: Filter by Easy, Medium, Hard, or Mixed.
+
+
+
⚠️ Integrity Warning
+
Navigating away from this window once the exam begins will result in an immediate session termination and auto-submission.
+
+
+
+
+
+
+ Subject Name
+ Assessment ID: SYS-9201
+
+
+
Time Remaining
+
00:00
+
+
Question Map
+ 0/0
+
+
+
+
+ Submit Final Exam
+ ← Back to Settings
+
+
+
+
+
+ Medium
+
+
+
+
+
+
+
+
+ ← Previous
+ Next →
+
+
+
+
+
+
+
Assessment Complete
+
System diagnostics and scoring engine finished.
+
+
+
+
+
Correct / Total
+
0/0
+
+
+
+
+
+ Return to Dashboard
+ Retry Exam
+
+
+
+
+
Detailed Diagnostic Report
+
Review your answers against the system's verified database.
+
+
+
+
+
+
+
+
+
+
Time-Travel Learning Timeline
+
Track Growth • Compare Past & Present • Predict Future
+
+
+
Your Learning Journey
+
+
+
→
+
+
67%
+
Mar 1 (2 weeks ago)
+
+
→
+
+
+
+
+
+
+
Time Slider
+
+
Drag to see your progress at different points in time
+
+
Concept Mastery Over Time
+
+
+
Quantum Entanglement
+
Feb 15: 30% (confused basics)
+
Today: 85% (expert level)
+
+
+
+
+
Wave Particle Duality
+
Feb 15: 42% (partial understanding)
+
Today: 78% (solid knowledge)
+
+
+
+
+
+
+
+
+
Account Settings
+
Personalization • Preferences • Account Management
+
+
Profile Information
+
+
+
+
Profile Image Representation
+
+
+ 🎓
+
+
+
+
+
+
Images are automatically downscaled into ultra-light profiles.
+
+
+
+
+
Display Preferences
+
+
System Theme Interface
+
+
+
+
Localization Engine Framework (Updates Whole App)
+
+ 🇺🇸 English
+ 🇪🇸 Español
+ 🇫🇷 Français
+ 🇩🇪 Deutsch
+ 🇮🇹 Italiano
+ 🇵🇹 Português
+ 🇷🇺 Русский
+ 🇸🇦 العربية
+ 🇮🇳 हिन्दी
+ 🇯🇵 日本語
+ 🇰🇷 한국어
+ 🇹🇷 Türkçe
+ 🇻🇳 Tiếng Việt
+
+
+
+
Learning Preferences
+
+
+
+
System Hazard Console
+
Purging indices removes localized profiles, custom cached images, matrices, and metrics securely.
+
+
+
+
+
+ Configuration Synchronized
+
+
+
+
" <> topic <> " Exam Session Timed practice with feedback
Exam ready Your selected exam is ready to launch. Start when you are ready to practice under timed conditions.
+
+
+
+
+
+
+
Global Parameters
+
+
Force Re-Sync Data
+
+
Cognitive Load Index
+
0%
+
+
+
+
+
+
Performance Vector Analysis
+
+
+
+
+
+
Goal Projection
+
+
+
Upcoming Deadline
+
Calculating optimal study path...
+
+
+
+
+
+
+
Mastery Predictor
+
AI-Powered Learning Predictions
+
+
+
+
Based on your current study patterns and performance:
+
+
+
+
+
+
+
+
+
+
+
Quick Solver
+
Instant Problem Solutions
+
+
+
+
+
+
+
+
Smart Suggestions
+
Personalized Study Recommendations
+
+
+
+
+
Thermodynamics - Last reviewed 5 days ago
+
Start Review
+
+
+
+
+
Organic Chemistry - You're on a roll!
+
Continue Learning
+
+
+
+
Your Profile
+
Identity & Achievements
+
+
+
+
+
+
+
Scholar
+
Member since Jan 2026
+
+
+
+
+
+
+
+
Statistics
+
+
+
Total Study Time
+
156 hours
+
+
+
+
+
+
Achievements
+
Your Learning Milestones
+
+
+
+
🎯
+
First Blood
+
Complete your first study session
+
+
+
+
+
🔥
+
On Fire
+
7-day study streak
+
+
+
+
+
🧠
+
Brainiac
+
Master 100 flashcards
+
+
+
+
+
⚡
+
Speed Demon
+
Complete exam in under 15 minutes
+
+
+
+
+
📚
+
Scholar
+
Study for 100 hours total
+
+
+
+
+
💎
+
Perfectionist
+
Score 100% on any exam
+
+
+
+
+
Study Calendar
+
Schedule & Track Your Learning
+
+
+
This Week's Schedule
+
+
+
+
Quick Notes
+
Capture Ideas & Insights
+
+
+
+
+
+
+
+
Saved Notes
+
+
+
Study Tips
+
Use active recall instead of passive reading...
+
Created 2 days ago
+
+
+
+
Vocabulary Builder
+
Expand Your Academic Vocabulary
+
+
+
+
+
+
+
Your Vocabulary
+
+
+
+
+
Pomodoro Timer
+
Focused Study Sessions
+
+
+
25:00
+
Focus session ready
+
+
+
+
+
+
+
+
+
+
+
Formula Reference
+
Essential Formulas Across All Subjects
+
+
Physics
+
+
+
Newton's Second Law
+
F = ma
+
Force equals mass times acceleration
+
+
+
+
Kinetic Energy
+
KE = ½mv²
+
Energy of motion
+
+
+
+
Ohm's Law
+
V = IR
+
Voltage equals current times resistance
+
+
+
+
Wave Equation
+
v = fλ
+
Velocity equals frequency times wavelength
+
+
+
+
Chemistry
+
+
+
Ideal Gas Law
+
PV = nRT
+
Pressure × Volume = moles × gas constant × temperature
+
+
+
+
pH Calculation
+
pH = -log[H⁺]
+
Measure of acidity
+
+
+
+
Molarity
+
M = n/V
+
Moles per liter of solution
+
+
+
+
Rate Law
+
rate = k[A]ᵐ[B]ⁿ
+
Reaction rate depends on concentration
+
+
+
+
Mathematics
+
+
+
Quadratic Formula
+
x = (-b ± √(b²-4ac)) / 2a
+
Solve quadratic equations
+
+
+
+
Pythagorean Theorem
+
a² + b² = c²
+
Right triangle relationship
+
+
+
+
Derivative Power Rule
+
d/dx(xⁿ) = nxⁿ⁻¹
+
Differentiation rule
+
+
+
+
Integration
+
∫xⁿ dx = xⁿ⁺¹/(n+1) + C
+
Antiderivative formula
+
+
+
+
Page Not Found
+
This feature is under construction or doesn't exist.
+
+
"
+
+ let points =
+ list.index_map(timelapse.snapshots, fn(snapshot, idx) {
+ let x = 50.0 +. int.to_float(idx) *. {750.0 /. int.to_float(list.length(timelapse.snapshots))}
+ let y = 350.0 -. snapshot.mastery_level *. 3.0
+ #(x, y)
+ })
+
+ let line_svg = build_line_path(points)
+
+ let dots_svg =
+ list.map(points, fn(point) {
+ let #(x, y) = point
+ " "
+}
+
+fn build_line_path(points: List(#(Float, Float))) -> String {
+ case points {
+ [] -> ""
+ [first, ..rest] -> {
+ let #(x, y) = first
+ let path_start = "M " <> float.to_string(x) <> " " <> float.to_string(y)
+ let path_rest =
+ list.fold(rest, "", fn(acc, point) {
+ let #(px, py) = point
+ acc <> " L " <> float.to_string(px) <> " " <> float.to_string(py)
+ })
+ "" <>
+ "
Knowledge Growth Report " <>
+ "
Period: " <>
+ timelapse.start_date <>
+ " to " <>
+ timelapse.end_date <>
+ "
" <>
+ "
Total Growth: " <>
+ float.to_string(timelapse.total_growth) <>
+ "%
" <>
+ "
Fastest Improvement: " <>
+ timelapse.fastest_improvement <>
+ "
" <>
+ calculate_learning_rate(timelapse) <>
+ "
" <> label <> "
+ FlashSync
+ Core
"
+ let sidebar = sidebar <> nav_item(page, "hub", "/hub", "fas fa-home", "Dashboard")
+ let sidebar = sidebar <> nav_item(page, "flashcards", "/flashcards", "fas fa-cards-blank", "Flashcards")
+ let sidebar = sidebar <> nav_item(page, "education", "/education", "fas fa-graduation-cap", "Education Portal")
+ let sidebar = sidebar <> "
Intelligence
"
+ let sidebar = sidebar <> nav_item(page, "tutor", "/tutor", "fas fa-robot", "AI Tutor")
+ let sidebar = sidebar <> nav_item(page, "ai-solver", "/ai-solver", "fas fa-wand-magic-sparkles", "AI Solver")
+ let sidebar = sidebar <> nav_item(page, "study-tools", "/study-tools", "fas fa-toolbox", "Study Tools")
+ let sidebar = sidebar <> nav_item(page, "heatmap", "/heatmap", "fas fa-fire", "Heatmap")
+ let sidebar = sidebar <> "
Analytics
"
+ let sidebar = sidebar <> nav_item(page, "biometric", "/biometric", "fas fa-heart", "Focus Track")
+ let sidebar = sidebar <> nav_item(page, "exam", "/exams", "fas fa-clipboard-list", "Exams")
+ let sidebar = sidebar <> nav_item(page, "timetravel", "/timetravel", "fas fa-hourglass-end", "Timeline")
+ let sidebar = sidebar <> nav_item(page, "analytics", "/analytics", "fas fa-chart-line", "Analytics")
+ let sidebar = sidebar <> "
Personalization
"
+ let sidebar = sidebar <> nav_item(page, "achievements", "/achievements", "fas fa-trophy", "Achievements")
+ let sidebar = sidebar <> nav_item(page, "calendar", "/calendar", "fas fa-calendar", "Calendar")
+ let sidebar = sidebar <> nav_item(page, "notes", "/notes", "fas fa-sticky-note", "Notes")
+ let sidebar = sidebar <> nav_item(page, "vocabulary", "/vocabulary", "fas fa-book", "Vocabulary")
+ let sidebar = sidebar <> nav_item(page, "pomodoro", "/pomodoro", "fas fa-clock", "Pomodoro")
+ let sidebar = sidebar <> nav_item(page, "formulas", "/formulas", "fas fa-square-root-variable", "Formulas")
+ let sidebar = sidebar <> nav_item(page, "profile", "/profile", "fas fa-user", "Profile")
+ let sidebar = sidebar <> nav_item(page, "settings", "/settings", "fas fa-sliders", "Settings")
+ sidebar <> "
"
+}
+
+fn css_style() -> String {
+ ":root { --primary: #00f2ff; --secondary: #bc13fe; --accent: #ff006e; --success: #00ff00; --warning: #ffaa00; --bg-dark: #010103; --bg-darker: #000; --glass: rgba(255,255,255,0.03); --glass-border: rgba(0,242,255,0.1); --page-bg: linear-gradient(135deg, #010103 0%, #0a0a1a 50%, #010103 100%); --text-main: #ffffff; }
+ html[data-theme='light'] { --primary:#0065a3; --secondary:#7a2fc7; --accent:#cf2a4f; --success:#0b8f45; --warning:#b86a00; --glass: rgba(0,0,0,0.04); --glass-border: rgba(0,101,163,0.15); --page-bg: linear-gradient(135deg, #f4f8ff 0%, #eef3ff 50%, #f8fbff 100%); --text-main:#111827; }
+ * { margin:0; padding:0; box-sizing:border-box; }
+ html,body { width:100%; height:100%; background: var(--page-bg); color: var(--text-main); font-family: 'Segoe UI', 'Trebuchet MS', sans-serif; overflow-x: hidden; scroll-behavior: smooth; }
+ body { display:flex; gap:0; }
+ sidebar-nav { width:280px; background:linear-gradient(180deg,#0a0a0f 0%,#050508 100%); border-right:2px solid rgba(0,242,255,0.1); padding:30px 20px; height:100vh; overflow-y:auto; position:fixed; left:0; top:0; z-index:1000; }
+ main-content { flex:1; margin-left:280px; padding:40px; overflow-y:auto; height:100vh; }
+ .brand-logo { font-size:1.8rem; font-weight:900; color:var(--primary); margin-bottom:40px; display:flex; align-items:center; gap:12px; }
+ .nav-section { margin-bottom:30px; }
+ .nav-label { font-size:0.75rem; text-transform:uppercase; color:#666; letter-spacing:2px; margin-bottom:12px; font-weight:700; }
+ .nav-item { display:flex; align-items:center; gap:12px; padding:14px 16px; margin:6px 0; border-radius:12px; color:#888; text-decoration:none; cursor:pointer; transition:all 0.3s; border-left:3px solid transparent; }
+ .nav-item:hover { background:rgba(0,242,255,0.08); color:var(--primary); border-left-color:var(--primary); }
+ .nav-item.active { background:rgba(0,242,255,0.15); color:var(--primary); border-left-color:var(--primary); font-weight:600; }
+ h1 { font-size:clamp(2rem, 8vw, 3.5rem); font-weight:900; background:linear-gradient(135deg, #fff 0%, var(--primary) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:15px; }
+ h2 { font-size:1.8rem; font-weight:800; margin:20px 0 15px; color:var(--primary); }
+ h3 { font-size:1.3rem; font-weight:700; margin:15px 0 10px; color:#fff; }
+ .subtitle { color:#999; font-size:1.1rem; margin-bottom:30px; }
+ .stat-card { background:var(--glass); border:1px solid rgba(0,242,255,0.15); padding:25px; border-radius:16px; transition:all 0.4s; position:relative; }
+ .stat-card:hover { border-color:var(--primary); transform:translateY(-4px); box-shadow:0 15px 40px rgba(0,242,255,0.15); }
+ .grid-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:20px; margin:25px 0; }
+ .grid-3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:25px; margin:25px 0; }
+ .grid-4 { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:20px; margin:25px 0; }
+ .premium-input { width:100%; background:rgba(0,0,0,0.4); border:2px solid rgba(0,242,255,0.2); padding:16px; border-radius:12px; color:#fff; font-size:1rem; transition:all 0.3s; }
+ .premium-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 20px rgba(0,242,255,0.3); }
+ .premium-button { background:linear-gradient(135deg, var(--primary) 0%, #0099cc 100%); color:#000; border:none; padding:14px 32px; border-radius:50px; font-weight:700; font-size:1rem; cursor:pointer; transition:all 0.3s; display:inline-flex; align-items:center; gap:8px; }
+ .premium-button:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,242,255,0.4); }
+ .accent-button { background:linear-gradient(135deg, var(--secondary) 0%, #9a0099 100%); border:none; padding:14px 32px; border-radius:50px; font-weight:700; font-size:1rem; cursor:pointer; transition:all 0.3s; display:inline-flex; align-items:center; gap:8px; color:#fff; }
+ .accent-button:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(188,19,254,0.4); }
+ .success-button { background:linear-gradient(135deg, var(--success) 0%, #00cc00 100%); border:none; padding:14px 32px; border-radius:50px; font-weight:700; font-size:1rem; cursor:pointer; transition:all 0.3s; display:inline-flex; align-items:center; gap:8px; color:#000; }
+ .success-button:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,255,0,0.4); }
+ .feature-box { background:linear-gradient(135deg, rgba(0,242,255,0.05) 0%, rgba(188,19,254,0.05) 100%); border:1px solid rgba(0,242,255,0.2); padding:30px; border-radius:20px; margin:20px 0; }
+ .chat-window { background:rgba(0,0,0,0.5); border:1px solid rgba(0,242,255,0.2); border-radius:20px; height:500px; display:flex; flex-direction:column; overflow:hidden; }
+ .chat-messages { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:15px; }
+ .message { padding:15px 20px; border-radius:15px; max-width:85%; line-height:1.5; }
+ .message.user { background:linear-gradient(135deg, rgba(0,242,255,0.2), rgba(0,242,255,0.1)); border-left:3px solid var(--primary); margin-left:auto; }
+ .message.ai { background:linear-gradient(135deg, rgba(188,19,254,0.2), rgba(188,19,254,0.1)); border-left:3px solid var(--secondary); }
+ .chat-input { padding:20px; border-top:1px solid rgba(0,242,255,0.1); display:flex; gap:10px; }
+ .chat-input input { flex:1; }
+ .toast { position:fixed; bottom:30px; right:30px; padding:18px 28px; border-radius:14px; background:rgba(0,0,0,0.9); border:1px solid var(--primary); color:var(--primary); font-weight:600; transform:translateY(100px); opacity:0; transition:all 0.4s; z-index:10000; }
+ .toast.show { transform:translateY(0); opacity:1; }
+ .toast.success { border-color:var(--success); color:var(--success); }
+ .toast.error { border-color:var(--accent); color:var(--accent); }
+ .modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:9999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s; }
+ .modal-overlay.show { opacity:1; pointer-events:auto; }
+ .modal-box { background:linear-gradient(135deg, #0f1a30, #141f38); border:1px solid rgba(0,242,255,0.2); border-radius:24px; padding:40px; max-width:500px; width:90%; max-height:80vh; overflow-y:auto; transform:scale(0.9); transition:transform 0.3s; }
+ .modal-overlay.show .modal-box { transform:scale(1); }
+ .typing-indicator { display:flex; gap:6px; padding:8px 0; }
+ .typing-indicator span { width:10px; height:10px; border-radius:50%; background:var(--secondary); animation:typing 1.4s infinite; }
+ .typing-indicator span:nth-child(2) { animation-delay:0.2s; }
+ .typing-indicator span:nth-child(3) { animation-delay:0.4s; }
+ @keyframes typing { 0%,100% { transform:translateY(0); opacity:0.4; } 50% { transform:translateY(-10px); opacity:1; } }
+ .flash-card { background:linear-gradient(135deg, #1c2b4e, #141f38); border:2px solid rgba(0,242,255,0.15); border-radius:20px; padding:40px; margin:20px 0; min-height:250px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:all 0.4s; text-align:center; }
+ .flash-card:hover { border-color:var(--primary); }
+ .flash-card .back { display:none; }
+ .flash-card.flipped .front { display:none; }
+ .flash-card.flipped .back { display:block; }
+ .tag { display:inline-block; padding:4px 12px; border-radius:20px; font-size:0.75rem; font-weight:600; margin:3px; }
+ .tag.primary { background:rgba(0,242,255,0.2); color:var(--primary); }
+ .tag.success { background:rgba(0,255,0,0.2); color:var(--success); }
+ .tag.warning { background:rgba(255,170,0,0.2); color:var(--warning); }
+ .tag.accent { background:rgba(188,19,254,0.2); color:var(--secondary); }
+ .study-progress-bar { height:8px; background:rgba(0,0,0,0.4); border-radius:4px; margin:15px 0; overflow:hidden; }
+ .study-progress-fill { height:100%; background:linear-gradient(90deg, var(--primary), var(--secondary)); border-radius:4px; transition:width 0.5s; }
+ .compact-btn { padding:8px 16px; font-size:0.85rem; border-radius:8px; border:none; cursor:pointer; font-weight:600; transition:all 0.2s; display:inline-flex; align-items:center; gap:6px; }
+ .compact-btn:hover { transform:translateY(-2px); }
+ .stats-row { display:flex; gap:20px; flex-wrap:wrap; margin:20px 0; }
+ .stats-badge { background:rgba(0,242,255,0.08); padding:10px 18px; border-radius:10px; border:1px solid rgba(0,242,255,0.1); font-size:0.9rem; }
+ .stats-badge strong { color:var(--primary); }
+ .mode-toggle { display:flex; gap:10px; flex-wrap:wrap; }
+ .mode-btn,.lang-btn { padding:10px 20px; border-radius:10px; border:1px solid rgba(0,242,255,0.2); background:rgba(0,0,0,0.3); color:#888; cursor:pointer; transition:all 0.3s; font-size:0.9rem; }
+ .mode-btn:hover,.lang-btn:hover { border-color:var(--primary); color:var(--primary); }
+ .mode-btn.active,.lang-btn.active { background:rgba(0,242,255,0.2); border-color:var(--primary); color:var(--primary); font-weight:600; }
+ .language-selector { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
+ @media (max-width:900px) { sidebar-nav { width:100px; padding:20px 10px; } main-content { margin-left:100px; padding:25px; } .nav-item span:not(:first-child) { display:none; } }
+ .confetti { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:99999; overflow:hidden; }
+ .confetti-piece { position:absolute; width:10px; height:10px; top:-10px; animation:confettiFall 3s ease-in forwards; }
+ @keyframes confettiFall { 0% { transform:translateY(0) rotate(0deg); opacity:1; } 100% { transform:translateY(100vh) rotate(720deg); opacity:0; } }
+ .exam-timer { font-size:2rem; font-weight:900; color:var(--primary); text-align:center; padding:20px; }
+ .exam-timer.warning { color:var(--warning); animation:pulse 1s infinite; }
+ .exam-timer.critical { color:var(--accent); animation:pulse 0.5s infinite; }
+ @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }"
+}
+
+pub fn build_premium_html(page: String, content: String) -> String {
+ let head_start = "
+
+
+ FlashSync Pro
+
+
+
+
+"
+ head_start <> style <> head_end <> sidebar <> "" <> content <> " " <> modal_toast
+}
\ No newline at end of file