Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to simulate the transaction screen of Roblox in dark mode, focusing on user interaction through a "Send" button. The application will allow users to send a simulated amount of Robux to a specified username, showcasing a seamless and engaging experience during live broadcasts.

## CORE FEATURES
1. **User Input Fields**: 
   - An input field for the recipient's "@Username" with a dark background and thin gray borders.
   - An input field for the "Quantity of Robux" featuring an official Robux icon for easy recognition.

2. **Interactive "Send" Button**: 
   - A prominently displayed green button that changes state upon clicking, transitioning to a loading spinner.

3. **Success Modal**: 
   - A modal that appears after the sending process, confirming the transaction with details about the Robux sent.

4. **Reset Functionality**: 
   - An invisible control panel with a "General Reset" button for quick screen clearing during live sessions.

5. **Responsive Design**: 
   - The application will be designed to maintain usability across various screen sizes.

## 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 centered layout with input fields at the top, the "Send" button prominently displayed below, and the success modal appearing in the center of the screen. The control panel will be discreetly positioned in the lower corner.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use React's Context API or Zustand for managing application state.

## IMPLEMENTATION STEPS
1. **Set up the React application**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create the main layout**: Build a centered layout with a header for the title and sections for input fields and the send button.
3. **Develop input components**: Create controlled components for the "@Username" and "Quantity of Robux" fields, ensuring they reflect the specified styles and functionality.
4. **Implement the "Send" button**: Design the button to respond to click events, including changing to a loading state and triggering the success modal.
5. **Create the success modal**: Build the modal component to display the success message and include the "OK" button for resetting the fields.
6. **Add the reset functionality**: Implement the floating control panel with the "Reset General" button to clear the screen.
7. **Test responsiveness**: Ensure the application is fully responsive and user-friendly on various devices.

## USER EXPERIENCE
Users will interact with the application by entering a username and amount of Robux in the respective fields. Upon clicking the "Send" button, the interface will simulate sending the Robux with an animated loading state, followed by a confirmation modal displaying the transaction details. Users can reset the screen at any time using the reset button in the floating control panel, allowing for quick and efficient testing during live sessions.