Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as a Progressive Web App (PWA) designed for enhanced usability on iOS devices. It addresses critical UI/UX issues related to the Dynamic Island in iOS and implements a Master PIN security feature to ensure user data protection. The application will provide a seamless experience similar to native apps while ensuring robust security measures.

## CORE FEATURES
1. **Dynamic Safe Area Adjustment**: Automatically adjusts the layout to accommodate the Dynamic Island, ensuring that essential UI components are not obstructed by the status bar. This is achieved by setting dynamic padding in the header using Tailwind CSS.

2. **Master PIN Lock Screen**: A dark, minimalist Lock Screen component that prompts users to set a Master PIN upon first access. This PIN is securely stored and verified locally, enhancing security without server latency.

3. **Auto-Lock Feature**: The application will require users to re-enter their Master PIN if the app is backgrounded, providing an additional layer of security against unauthorized access.

4. **User-Friendly Onboarding**: A streamlined onboarding process that guides users through setting up their Master PIN and understanding the app's features.

5. **Responsive Design**: Ensures that the application is fully functional across various iOS devices, adapting to different screen sizes while maintaining usability.

## 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 feature a top header with dynamic padding, a central content area for the Lock Screen and onboarding, and a footer for navigation links.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: React Context API (for managing user authentication state and PIN storage)

## IMPLEMENTATION STEPS
1. **Set Up React Project**: Create a new React project using TypeScript and install necessary dependencies, including Tailwind CSS and shadcn/ui.

2. **Configure Tailwind CSS**: Set up Tailwind CSS with the required configuration to enable dynamic padding using the `safe-area-inset-top` environment variable.

3. **Create LockScreen Component**: Develop the LockScreen.tsx component with a simple numpad UI for PIN entry. Include a form for setting up the Master PIN on the first use.

4. **Implement Safe Area Adjustment**: Modify the index.html file to include `viewport-fit=cover` in the viewport meta tag and apply dynamic padding in the Header/StatusBar component.

5. **Handle Auto-Lock Logic**: Implement logic to detect when the app goes to the background and prompt for the Master PIN upon returning to the foreground.

6. **User Onboarding Process**: Create a user onboarding flow that guides users through setting up the Master PIN and explains the app's functionalities.

7. **Testing and Iteration**: Rigorously test the application on different iOS devices to ensure the layout adjusts correctly and the security features work as intended.

## USER EXPERIENCE
Users will initially be greeted with a clean, minimalist Lock Screen requiring them to set a Master PIN. After setting it up, they can access the app's main features. If the app is minimized, users will be required to enter their PIN again upon returning, ensuring their data is secure. The application will be intuitive, focusing on simplicity and ease of navigation, with clear prompts and feedback throughout the user interactions.