StudyForge AI — ابنِ منصة دراسة ذكية كاملة من ملفاتك

STUDYFORGE AI Ultimate Standalone HTML Learning Platform Maximum Optimization — Complete Production Prompt 1. ROLE AND OBJECTIVE Act as an elite multidisciplinary team consisting of: * Senior Frontend Engineer * Vanilla JavaScript Architect * Educational Technology Specialist * Instructional Designer * Learning Science Researcher * AI and Document Processing Engineer * UI/UX Designer * Accessibility Specialist * Data Visualization Engineer * Quality Assurance Engineer Your mission is to build a complete, professional, intelligent, interactive study website contained in ONE standalone HTML file named index.html. The website must transform uploaded study materials into a personalized learning environment that helps students understand concepts, create summaries, practice questions, prepare for exams, organize revision, and monitor academic progress. Do not merely describe or plan the website. Build the actual working application. The application name is StudyForge AI. The interface must be Arabic-first with excellent right-to-left support and an English language option. 2. ABSOLUTE TECHNICAL REQUIREMENT The entire application must be delivered as: ONE FILE: index.html All custom code must be embedded inside this file: * HTML5 * CSS3 within <style> tags * Vanilla JavaScript within <script> tags * Inline SVG icons and graphics where appropriate The website must open directly in a compatible desktop browser by double-clicking index.html. Absolutely no mandatory: * React * Next.js * Vue * Angular * Node.js * npm * Python * Backend server * Localhost * Docker * Database installation * Terminal commands * Build process * Account registration * Paid subscription * External API keys for core offline features Avoid external CDNs and libraries wherever possible. Use native browser APIs. Do not change the single-file requirement even if another architecture would be easier. If a requested advanced feature is impossible within a standalone offline HTML file, implement the strongest honest alternative and clearly explain the limitation without compromising the rest of the application. 3. PRODUCT DESIGN PHILOSOPHY Create the experience of a premium commercial educational platform. The website must feel comparable in polish and usability to modern learning dashboards, knowledge-management tools, and interactive study applications. Design goals: * Minimal but sophisticated * Clear information hierarchy * Elegant typography * Professional educational aesthetic * Smooth interactions * Excellent readability * Fast performance * Responsive layouts * Accessible interaction * Intuitive navigation * No unnecessary complexity Use a refined color system, consistent spacing, subtle shadows, thoughtful icons, progress indicators, and clean visualizations. Include fully functional light mode and dark mode. Do not overwhelm the user with dozens of controls on one screen. 4. MAIN APPLICATION STRUCTURE Build the following functional sections: 1. الرئيسية — Dashboard 2. موادي الدراسية — My Subjects 3. مكتبة الملفات — Document Library 4. الملخصات الذكية — Smart Summaries 5. المدرس الذكي — AI Tutor 6. البطاقات التعليمية — Flashcards 7. بنك الأسئلة — Question Bank 8. الاختبارات — Exams 9. خطة الدراسة — Study Planner 10. مستواي الدراسي — Performance Analytics 11. المراجعة الذكية — Smart Revision 12. وضع التركيز — Focus Mode 13. ملاحظاتي — Notes 14. الإعدادات — Settings Every navigation item must open an actual working section. No decorative or nonfunctional buttons. 5. FIRST-TIME USER EXPERIENCE On first launch, display a polished onboarding experience. Allow the student to: * Enter a display name * Select Arabic or English * Choose a preferred theme * Add the first subject * Upload study material * Optionally enter an exam date * Set daily study goals All onboarding settings must be editable later. Do not require account creation. If onboarding is skipped, the application must remain usable. Display clear empty states before study materials are added. Never invent user grades, progress history, or uploaded course content. 6. STUDY FILE UPLOAD SYSTEM Create a professional file upload interface with: * Drag-and-drop support * File picker * Multiple-file selection * Upload status * File metadata * Extraction progress where possible * Error reporting * File removal * File organization by subject Supported input targets: * PDF * DOCX * PPTX * TXT * Markdown * CSV * XLSX * PNG * JPG * JPEG File Processing Rules Read the real content whenever browser-side parsing is supported. For plain text and suitable structured text files, implement extraction using browser-native JavaScript. For PDF, DOCX, PPTX, XLSX, and images, do not pretend their content can always be extracted using ordinary native browser APIs. If reliable parsing requires a library or OCR engine, use an optional browser-compatible integration only when it can operate under the delivery constraints. If a safe and reliable browser-side parser cannot be embedded, provide a clearly labeled manual text import alternative. Preserve original filenames, relevant page or slide references when reliably available, and educational terminology. Show the extracted text for verification. Never mark a file as successfully analyzed unless actual readable content has been obtained. Never fabricate missing sections or documents. Make it easy to edit extraction mistakes before generating learning materials. 7. AUTOMATIC COURSE ORGANIZATION Turn extracted study content into a structured learning workspace. Organize materials as: Subject → Unit → Chapter → Topic → Learning Objective Where structure can be reliably detected, automatically identify: * Headings * Subheadings * Definitions * Important terms * Formulas * Examples * Key concepts * Numbered sections * Question-and-answer structures If automatic structure detection is uncertain, allow students to correct or organize content manually. Students must be able to: * Create subjects * Rename subjects * Add chapters * Edit topics * Move learning materials * Delete content * Mark lessons complete * Add personal notes * Open the original extracted material 8. SMART SUMMARY ENGINE Build a study summary workspace. Support these modes: Quick Summary Present the most important information concisely. Detailed Summary Organize the material into readable explanations with meaningful headings. Exam Revision Notes Produce a focused revision sheet based on the available material. Key Concepts Extract important terms and ideas. Definitions Identify terms and their associated definitions. Technical Reference Collect recognizable formulas, symbols, and technical explanations. Comparison View Present supported comparisons when source material contains comparable concepts. One-Page Revision Sheet Create a compact printable overview. Bilingual Study Notes Support Arabic explanations, English explanations, and preservation of English technical terms. Accuracy Requirements In offline mode, implement transparent extractive summarization and rule-based educational content processing. Do not represent basic sentence selection or keyword extraction as advanced AI comprehension. Do not generate unsupported explanations or fabricate facts. When a full generative AI integration is available, enable more advanced paraphrasing, explanations, and synthesis. Keep the local offline study features fully functional without external AI. 9. OPTIONAL AI TUTOR Create a professional tutoring interface. Offer the following study modes: * Explain This Topic * Teach Me Step by Step * Give Me an Example * Explain My Mistake * Ask Me Questions * Simplify This Concept * Exam Preparation Coach * Source-Only Mode When a real AI integration is configured, the tutor may use actual extracted course content to provide grounded explanations. For each supported answer, present source references when available. Without an AI connection, provide useful local alternatives such as: * Search within imported notes * View definitions * Explore related sections * Open original passages * Navigate study questions * Display saved explanations Clearly indicate that these are local study tools rather than a real conversational AI model. Do not generate fake AI chat responses. The tutoring interface must handle unavailable AI services gracefully. 10. ACTIVE RECALL LEARNING SYSTEM Implement active recall as a central learning activity. Students should be able to study a topic, close the reference, and attempt to recall information independently. Supported exercises: * Definition recall * Short-answer questions * Explain in your own words * Formula recall * Concept identification * Self-assessment prompts Allow users to reveal a grounded reference answer. For open-ended offline exercises, support manual self-rating rather than pretending JavaScript can reliably perform advanced semantic grading. Record actual responses and self-assessments. Use recorded performance to guide further practice. 11. INTERACTIVE FLASHCARD SYSTEM Build a complete flashcard workspace. Card types: * Question / Answer * Term / Definition * Fill in the Blank * Formula Recall * Concept / Explanation Features: * Create cards manually * Generate cards from recognizable definitions or structured source content * Edit cards * Delete cards * Flip cards * Shuffle deck * Study by subject * Study by chapter * Favorite cards * Mark difficulty * Track review history * Schedule future reviews Include clear answer-reveal animations. Save all flashcard activity locally. 12. SPACED REPETITION ENGINE Implement a practical review scheduler. Use a transparent interval-based algorithm that adapts to student self-ratings and recorded review performance. Suggested response categories: * Again * Hard * Good * Easy Track: * Last review * Next due date * Review count * Success history * Lapses * Difficulty history Due flashcards should automatically appear in the Smart Revision section. Allow students to review overdue cards. Explain that scheduling is a heuristic and not a guarantee of permanent retention. 13. QUESTION BANK Create an interactive question management system. Supported formats: * Multiple choice * True or false * Short answer * Fill in the blank * Matching * Explanation questions Allow students to create, edit, import, and delete questions. Where sufficiently structured educational content is available, automatically generate grounded questions. Do not invent multiple-choice distractors presented as verified factual information when they cannot be safely constructed. Associate each question with: * Subject * Topic * Difficulty * Correct answer * Explanation * Source reference when available Enable subject and topic filters. 14. EXAM SIMULATOR Build a complete working examination interface. Available modes: * Quick Quiz * Practice Test * Timed Exam * Topic Test * Weakness Challenge * Comprehensive Exam Exam settings: * Number of questions * Selected subject * Selected chapters * Difficulty filters * Time limit * Question types * Randomize order * Show explanations after submission During an exam: * Display question number * Show progress * Allow navigation * Save selected answers * Display timer * Allow submission * Warn before leaving with unsaved work After submission, show: * Actual score * Correct answers * Incorrect answers * Explanations * Topic breakdown * Time spent * Recommended revision topics Automatically grade objectively structured questions. Use self-assessment or clearly labeled ungraded status for answers that require human or advanced AI evaluation. Do not fabricate exam results. 15. STUDENT PERFORMANCE DASHBOARD Build a visually professional analytics dashboard. Track actual learning activity: * Total study sessions * Recorded study time * Completed topics * Number of quizzes completed * Correct-answer percentage * Flashcards reviewed * Reviews due * Learning streak * Subject progress * Weak topics * Recent activity Use native SVG or Canvas charts. Recommended charts: * Weekly study activity * Quiz score trends * Subject comparison * Topic performance * Review activity * Study consistency calendar Charts must update when real user activity changes. Do not populate the dashboard with fictional data. 16. LEARNING MASTERY ESTIMATION Implement an explainable mastery model. Use available evidence such as: * Practice accuracy * Repeated successful attempts * Retrieval performance * Review history * Recency of successful recall Display categories: * Not Assessed * Needs Improvement * Developing * Proficient * Strong Performance Clearly distinguish between: * Lesson completion * Study time * Assessment results * Estimated mastery A completed lesson must not automatically equal full mastery. When there is insufficient data, display “Insufficient Evidence.” Avoid unrealistic precision. 17. PERSONALIZED STUDY PLANNER Create a fully interactive study planning system. Allow students to set: * Subject * Exam date * Available study days * Daily study minutes * Topic priorities * Study goals Generate study tasks based on: * Remaining topics * Topic difficulty * Available time * Weak areas * Scheduled flashcard reviews * Examination deadline Provide: * Daily plan * Weekly plan * Calendar view * Task checklist * Progress tracking * Missed-task rescheduling * Exam countdown If the required workload exceeds available time, warn the student. Never create an impossible study schedule without acknowledging the conflict. 18. EXAM READINESS CENTER Create an exam preparation dashboard. Show: * Upcoming exam * Days remaining * Topics studied * Topics not covered * Latest test results * Weak concepts * Outstanding reviews * Revision priorities Provide a clearly labeled readiness estimate based on observed performance and curriculum coverage. Do not claim to predict the actual examination grade. When the available evidence is inadequate, display an appropriate uncertainty indicator. 19. FOCUS MODE Create a distraction-free study interface. Features: * Configurable Pomodoro timer * Start / Pause / Resume / Reset * Focus session duration * Break duration * Daily goal * Session notes * Completed session history * Simple productivity statistics Ensure the timer calculates elapsed time reliably when the browser tab becomes inactive. Save completed study sessions. Use optional browser notifications only when permission has been granted and the browser supports them. 20. NOTES AND PERSONAL KNOWLEDGE Create an integrated note-taking system. Students can: * Add notes * Edit notes * Delete notes * Associate notes with subjects * Associate notes with chapters * Search notes * Favorite important notes * Export notes Support readable plain-text or lightweight Markdown-style formatting when feasible. Save notes automatically. 21. LOCAL DATA PERSISTENCE The website must save progress without requiring a server. Use: * IndexedDB for structured study data and larger records * localStorage for small settings where appropriate Save: * Subjects * Imported text * Learning objectives * Flashcards * Questions * Quiz attempts * Performance history * Study schedules * Notes * Preferences * Review history Handle storage errors gracefully. Include: * Export backup as JSON * Import backup from JSON * Reset selected data * Delete all local study data * Confirmation for destructive actions Explain that local data remains tied to the browser/device and can disappear if browser storage is cleared. Do not claim automatic synchronization between devices. 22. LANGUAGE SUPPORT Default interface: Arabic. Provide a working language switcher between Arabic and English. Arabic mode: * RTL layout * Arabic labels * Appropriate text alignment * Correct navigation positioning English mode: * LTR layout * English labels * Consistent component positioning Keep academic English terminology intact where translation could reduce technical accuracy. Do not automatically claim to translate complete academic documents without actual translation support. 23. PROFESSIONAL RESPONSIVE DESIGN Create carefully optimized layouts for: * Desktop * Laptop * iPad * iPhone * Android phones Desktop: * Sidebar navigation * Multi-column dashboard * Spacious document reader * Wide charts Tablet: * Adaptive sidebar * Optimized cards * Touch-friendly interface Mobile: * Collapsible navigation * Compact cards * Readable typography * Comfortable buttons * Optimized forms and quizzes Avoid horizontal scrolling in ordinary content. Use accessible color contrast. Respect reduced-motion preferences. 24. ADVANCED UI COMPONENTS Implement reusable interface components using Vanilla JavaScript. Include: * Modal dialogs * Toast notifications * Loading indicators * Empty states * Confirmation dialogs * Search inputs * Filter controls * Progress bars * Tabs * Accordions * Tooltips where useful * Responsive cards * Interactive tables * Theme switcher * Language switcher Each component must have functional behavior. Do not introduce unnecessary complexity merely to increase the number of components. 25. SMART GLOBAL SEARCH Implement a unified search feature. Search across available: * Subjects * Chapters * Extracted document text * Flashcards * Questions * Notes Display grouped search results. Allow navigation directly to the selected item. Use appropriate local text matching and filtering. Do not present ordinary keyword search as semantic AI search. 26. STUDY STATISTICS AND INSIGHTS Generate useful feedback based on recorded activity. Examples: * Your lowest-scoring topic is X. * You have Y flashcards due for review. * Your recent quiz accuracy increased. * You have several unfinished chapters. * Your examination is approaching. * You have not reviewed a particular topic recently. Each insight must be supported by actual saved information. Do not invent motivational statistics or achievements. 27. OPTIONAL ACHIEVEMENT SYSTEM Create a lightweight gamification system. Possible achievements: * First completed lesson * First completed quiz * Seven recorded study days * Completed flashcard review target * Finished a chapter * Improved performance on a repeated assessment Achievements must be based on real activity. Keep gamification secondary to learning. 28. STUDY CONTENT SOURCE INTEGRITY For every generated study resource, preserve the connection to its source where reasonably available. Use: * Filename * Subject * Chapter * Section * Page number only when reliably extracted Distinguish between: 1. Original source content 2. Extractive summaries 3. Rule-based generated exercises 4. Personal notes 5. Externally generated AI content Never fabricate references. Allow the student to inspect supporting source text. 29. EDUCATIONAL METHODOLOGY Use established learning principles. Prioritize: * Active recall * Retrieval practice * Spaced repetition * Practice testing * Timely corrective feedback * Self-explanation * Worked examples when appropriate * Distributed study sessions * Metacognitive reflection Do not rely on passive rereading as the primary learning method. If web research is available during project design, consult authoritative academic research to validate the chosen learning workflow. Prioritize original research, systematic reviews, and scholarly publications. Do not invent studies or imply that a particular algorithm has been scientifically validated if it has not. Do not make unsupported claims about guaranteed academic improvement. 30. SECURITY AND PRIVACY Treat imported files and extracted text as untrusted input. Never execute JavaScript embedded in imported content. Use safe text rendering. Validate imported backup files. Prevent injection into dynamically generated HTML. Do not send documents to external services without the user enabling and understanding that functionality. Never store external AI API secrets insecurely in production-facing browser code. Keep core offline functionality independent of cloud services. 31. OPTIONAL AI INTEGRATION ARCHITECTURE The application may include an optional AI settings panel. Advanced AI features may include: * Generative summaries * Conversational tutoring * Advanced explanations * AI-generated examination questions * Semantic evaluation of written answers However, a static standalone HTML file cannot securely contain secret API keys for a cloud AI provider. Do not embed private credentials in the application. Clearly explain when a secure backend or external proxy would be required for safe multi-user or production AI integration. The standalone offline application must remain fully functional when advanced AI is disabled. Do not sacrifice the single-file deliverable in order to claim unsupported AI functionality. 32. PERFORMANCE OPTIMIZATION Keep the application responsive and efficient. Requirements: * Avoid blocking the interface during lengthy operations. * Optimize large lists and tables. * Debounce expensive search operations where appropriate. * Minimize unnecessary DOM updates. * Use efficient local storage access. * Handle large file limitations explicitly. * Prevent duplicate event listeners. * Avoid memory leaks. * Provide useful error feedback. * Preserve application state when switching sections. 33. QUALITY ASSURANCE Before delivery, check all major workflows. Test: 1. Initial launch 2. Arabic layout 3. English layout 4. Theme switching 5. Subject creation 6. Supported document import 7. Manual text import 8. Summary generation 9. Flashcard creation 10. Flashcard review 11. Quiz creation 12. Quiz submission 13. Score calculation 14. Performance updates 15. Study planning 16. Focus timer 17. Local persistence 18. Backup export 19. Backup restoration 20. Mobile responsiveness 21. Empty states 22. Error handling Do not claim to have completed tests that could not actually be executed. Never leave nonfunctional primary controls. 34. DEVELOPMENT PRIORITIES Implement the application in this priority order: Priority 1 — Foundation * Single HTML application * Professional layout * RTL/LTR support * Theme switching * Navigation * Local persistence Priority 2 — Study Content * Subjects * File import * Manual text import * Document organization * Source viewer Priority 3 — Learning Tools * Summaries * Flashcards * Question bank * Quizzes * Exam simulator Priority 4 — Learning Progress * Assessment history * Performance charts * Weak-topic tracking * Spaced repetition Priority 5 — Productivity * Study planner * Focus timer * Notes * Search * Backup and restore Priority 6 — Optional Advanced Features * AI integrations * Advanced file parsers * Additional visualizations * Further accessibility improvements Prioritize completing functional core workflows over producing numerous incomplete features. 35. REQUIRED END-TO-END BEHAVIOR The finished website should support this realistic student journey: 1. Open index.html directly. 2. Select Arabic or English. 3. Add a subject. 4. Upload a supported study document or paste study text. 5. Review the extracted content. 6. Organize chapters and topics. 7. Generate supported local summaries and study materials. 8. Study the lesson. 9. Practice with flashcards. 10. Answer quiz questions. 11. Receive actual assessment results. 12. View updated performance statistics. 13. Identify weak areas. 14. Schedule future revision. 15. Complete another learning session. 16. Close the browser. 17. Reopen the same file. 18. Continue with locally saved progress. Every step must be supported by actual application functionality. 36. OUTPUT AND DELIVERY RULES Build the application, not merely a concept document. The final deliverable must be: index.html Containing: * Complete HTML structure * Embedded CSS * Embedded JavaScript * All custom application logic * All required inline icons and graphics * No mandatory external dependencies for offline core functionality If the environment supports writing files, create the actual downloadable index.html file. If file creation is unavailable, provide the complete source code. Do not omit sections with statements such as: * “Continue implementing here” * “Insert logic later” * “TODO” * “Connect this button” * “Add your own functionality” Do not present incomplete features as finished. If implementation size exceeds the available response or execution capacity, prioritize a smaller but genuinely working application and explicitly identify deferred features. Do not silently replace the actual working application with a project outline. 37. FINAL SUCCESS CRITERIA The application is successful when: * It consists of one HTML file. * It opens without installation on a compatible desktop browser. * Its offline core does not require the internet. * The Arabic interface is polished and usable. * Navigation works. * Study materials can be imported through supported methods. * Study content can be organized and reviewed. * Flashcards and quizzes function correctly. * Student performance is saved and displayed. * Study planning and spaced repetition function. * The design responds to different screen sizes. * Data can be backed up and restored. * No unsupported AI functionality is misrepresented as working. FINAL EXECUTION COMMAND Build StudyForge AI now. Create the most complete, professional, and functional educational platform possible under the strict constraint of a SINGLE standalone index.html file. Use modern HTML5, CSS3, and Vanilla JavaScript. Preserve all practical study, revision, assessment, analytics, and productivity features. Implement actual working interactions and persistent local data. Ensure the website is Arabic-first, responsive, visually polished, and immediately usable without installing software. Do not stop at planning. Create the complete working file.