in single file

Create a minimalist, professional, and entirely browser-based study application designed to help users efficiently learn and master material for professional certifications. The app will focus on two core functionalities: interactive document exploration and scenario-based simulation/quizzing. All AI-powered features must leverage Gemini Assist. All data persistence will utilize browser storage, ensuring user data remains on their device and enabling offline capabilities.
2. Target User:
Professionals studying for various certification exams who need a focused tool to understand their study materials (uploaded as PDFs) and test their knowledge through practical scenarios.
3. Core Design Philosophy:
Minimalist & Focused: Prioritize core utility. No unnecessary features, gamification, or complex dashboards.
Clean & Professional UI: The interface should be intuitive, uncluttered, and distraction-free.
User-Centric: The user should always feel in control and understand how to navigate the app's core functions easily.
4. Key Technologies to Utilize:
AI Engine: All AI-driven content generation, analysis, and explanations must be powered by Gemini Assist.
Data Storage: Exclusively use browser storage:
IndexedDB: For primary data (PDFs, topic structures, explanations, questions, simulation results).
Local Storage: For persistent user settings.
Session Storage: For temporary session data (e.g., in-progress quiz state).
Frontend Framework: (Developer/AI to choose a suitable modern JavaScript framework like React, Vue, or Angular, or vanilla JS if preferred for simplicity, optimized for performance and responsiveness).
5. Detailed Feature Breakdown:
A. Study Library & PDF Management:
1. PDF Upload: Users can upload PDF documents which constitute their study material.
2. Storage: Uploaded PDFs should be stored in IndexedDB (e.g., as Blobs).
3. Display: The app will display a "Study Library" – a clean list of all uploaded PDF titles.
4. Document Interaction: Clicking on a PDF title in the library will present the user with two clear, primary buttons:
* [ Explore This Document ]
* [ Start a Simulation ]
B. Topic Explorer (Accessed via [ Explore This Document ] button):
1. UI Layout: A two-panel interface.
* Left Panel ("Table of Contents" Panel): This panel is for navigation.
* Gemini Assist (PDF Analysis & Outline Generation): Upon selecting a PDF, Gemini Assist will analyze its structure (e.g., table of contents, headings) to generate a hierarchical, expandable/collapsible outline of main ideas (e.g., chapters) and sub-ideas (e.g., sections). This outline will be displayed here. Users can click [+] icons to expand topics and see sub-topics.
* Right Panel ("Briefing" Panel): This panel displays content.
* Gemini Assist (Explanation Generation): When a user clicks on a specific topic or sub-topic in the Left Panel, Gemini Assist will generate a detailed explanation for that selected topic. This explanation must be derived solely from the content of the uploaded PDF related to that topic. The explanation should be clear, concise, and may include key points or simplified concepts. This explanation will be displayed in the Right Panel.
2. Contextual Action Button: At the top of the Right "Briefing" Panel (when a topic's explanation is displayed), include a button:
* [ ▷ Start a Simulation on "[Selected Topic Name]" ]
* Clicking this button will navigate the user to the "Quick Setup" screen (Feature C.1) for the Simulation Engine, with the "Focus Area" pre-selected to the currently viewed topic.
C. Hybrid Simulation Engine (Accessed via [ Start a Simulation ] button or the contextual button in Topic Explorer):
1. C.1. Quick Setup Screen:
* A small, clean pop-up/modal will appear.
* Options:
* Number of Questions: User selects from predefined options (e.g., 10, 25, 50). Default to 10.
* Focus Area (Optional): A dropdown menu populated by Gemini Assist with the main ideas/chapters from the selected PDF. Defaults to "All Topics" (meaning questions can come from anywhere in the document). If accessed from Topic Explorer, this will be pre-filled.
* A [Begin] button starts the simulation.
2. C.2. Simulation Interface:
* Layout: Clean, distraction-free, displaying one question at a time.
* Gemini Assist (Scenario-Based Question Generation): Based on the user's "Quick Setup" choices (number of questions, focus area), Gemini Assist will generate scenario-based Multiple Choice (3-4 options) and True/False questions. These questions and their scenarios must be derived solely from the content of the uploaded PDF.
* Progression: Users select an answer and move to the next question.
* No Immediate Feedback: Do not show "Correct" or "Incorrect" after each question.
* Progress Indicator: Display progress (e.g., "Question 3 of 10").
3. C.3. Results Summary Screen:
* Displayed after the user answers the final question.
* Content: A simple message like: "Simulation Complete. You answered [X] out of [Y] questions correctly."
* Action Button: A single button: [ Review After-Action Report ].
4. C.4. After-Action Report:
* Accessible via the button on the Results Summary screen.
* Layout: A scrollable report detailing each question from the simulation.
* For each question, display:
* The original mini-scenario and the question text.
* The user's selected answer.
* The correct answer.
* A clear indicator of ✅ Correct or ❌ Incorrect.
* Gemini Assist (Explanation & Citation): A detailed explanation for why the answer is correct or incorrect. This explanation must be generated by Gemini Assist and specifically cite the relevant information or evidence directly from the user's uploaded PDF (e.g., "As stated in [PDF Name], page [X], section [Y]...").
6. Data Storage Implementation Details:
* IndexedDB:
* Store uploaded PDF files (e.g., as Blobs).
* Store the Gemini Assist generated hierarchical topic/sub-topic structure for each PDF.
* Store Gemini Assist generated explanations for each topic/sub-topic.
* Store Gemini Assist generated questions (scenario, question, options, correct answer, explanation) for potential reuse or review.
* Store user's simulation history: which PDF, focus area, questions asked, user's answers, score, and the full After-Action Report.
* Local Storage:
* User preferences like default number of questions for simulations.
* ID/name of the last PDF viewed, so the app can optionally highlight it on return.
* Session Storage:
* Temporary state for an active, in-progress simulation. This includes the current question number and the user's answers so far for that specific session. This data is used to potentially recover the session if the user accidentally refreshes the page. This data should be cleared once a simulation is completed or abandoned.
7. UI/UX Considerations:
Maintain a consistent, professional look and feel throughout the application.
Ensure navigation is intuitive and flows logically between the Library, Topic Explorer, and Simulation Engine.
Loading states should be clear when Gemini Assist is processing (e.g., analyzing PDF, generating explanations/questions).
The application must be responsive and work well on typical desktop browser sizes.
8. Error Handling (Basic):
Gracefully handle PDF upload errors (e.g., invalid file type, file too large if limits are imposed).
Handle potential errors from Gemini Assist API calls with user-friendly messages.
Please proceed to build the "Certification Study Companion" based on these specifications.
This prompt should provide a very clear roadmap for an AI development tool. Let me know if you'd like any part of it adjusted!