Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to generate HTML documents based on PDF revisions with different questions on the same topic. It will provide students grade 7 with a seamless way to convert and modify content from PDF files into editable HTML formats, allowing for easy customization and updates.

## CORE FEATURES
1. **PDF Upload**: Users can upload PDF files containing questions, which the application will read and process.
2. **HTML Generation**: The application will convert the content from the uploaded PDF into an editable HTML format while retaining the structure and context.
3. **Question Customization**: Users can modify the generated HTML questions, adding or removing questions as needed within the same topic.
4. **Preview Mode**: Provides a live preview of the HTML content as changes are made, allowing users to see real-time updates.
5. **Download Option**: Users can download the edited HTML file once they are satisfied with their changes.
6. **User Authentication**: Users can create accounts to save their uploaded PDFs and generated HTML files for future access.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: The main layout will consist of a header, a central content area for the upload and editing tools, a sidebar for navigation, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Query for managing data fetching and state

## IMPLEMENTATION STEPS
1. **Set Up Environment**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui for components.
2. **Create Components**:
   - **Header**: Design a header with the application title and navigation links.
   - **PDF Upload Component**: Create a component to handle file uploads.
   - **HTML Editor Component**: Implement a text editor for users to modify the HTML content.
   - **Preview Component**: Build a live preview area to showcase HTML changes.
   - **Footer**: Add a footer with contact information.
3. **Integrate PDF Processing**: Use a library like pdf.js to read and extract content from uploaded PDFs.
4. **Implement User Authentication**: Set up user accounts to store uploaded files and generated HTML.
5. **Add Download Functionality**: Implement a feature to download the edited HTML files.
6. **Test and Optimize**: Conduct thorough testing to ensure all features work correctly and optimize for performance and responsiveness.

## USER EXPERIENCE
Users will interact with the application by uploading their PDF files, which will be processed to display the questions in an editable format. They will be able to customize the questions, see live previews of their changes, and download the final HTML document. The interface will be intuitive, with clear prompts and an easy navigation structure, making the overall experience smooth and user-friendly.