Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a password guessing simulator, designed to demonstrate the process of generating random password attempts until the correct password is found. It serves educational purposes by illustrating basic programming concepts like loops, conditionals, and randomization.

## CORE FEATURES
1. **Password Input**: Users can input the password they wish to "hack" for demonstration purposes.
2. **Random Password Generation**: The application generates random passwords using a defined set of characters (numbers and letters).
3. **Attempt Tracking**: The app tracks and displays the number of attempts taken to guess the password.
4. **Real-Time Feedback**: Users receive immediate feedback on each attempt, showcasing the guessed password.
5. **User-Friendly Interface**: Designed for simplicity and ease of use, allowing users to focus on the password guessing process.

## 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**: A single-column layout with a prominent hero section at the top for password input, followed by a section displaying attempts and feedback, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required, as the app's state can be managed through local component state.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript support.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Components**:
   - **PasswordInput**: A component for users to enter the password.
   - **PasswordGuesser**: A component that handles the password guessing logic and displays attempts and results.
   - **App**: The main component that utilizes the above components and manages the layout.
4. **Implement Logic**:
   - In the `PasswordGuesser` component, implement the random password generation logic.
   - Track and display the number of attempts.
5. **Styling**: Use Tailwind CSS to style components according to the design specifications.
6. **Testing**: Ensure all functionalities work as expected and provide a smooth user experience.

## USER EXPERIENCE
Users will interact with the application by entering a password they want to test against. They will see each attempt displayed in real-time, along with the total number of attempts taken to guess the password. The minimalist design allows users to focus on the functionality without distractions, making it easy to follow the guessing process. The application is responsive, ensuring a seamless experience across various devices.