Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application that simulates the login interface of Roblox with a customized theme. It allows users to input a username and provides a playful experience by simulating a balance of 'Robux' and a transfer feature. The application aims to create an engaging, visually appealing environment that emphasizes user interaction while clearly indicating that it is a simulation.

## CORE FEATURES
1. **Username Input Field**: A clean input field for users to enter their usernames, styled with a minimalist aesthetic.
2. **Robux Balance Display**: A counter that simulates 'Robux', allowing users to view a customizable balance, styled prominently.
3. **Send Robux Button**: A button that triggers a simulated transfer of Robux, accompanied by an animation or pop-up alert confirming the action.
4. **Visual Simulation Warning**: A small text notification clearly stating that all interactions are purely visual and do not connect to the official Roblox platform.
5. **Responsive Design**: The application adapts seamlessly to various screen sizes, ensuring usability on both desktop and mobile devices.
6. **Minimalist Aesthetic**: The interface is designed with a focus on simplicity and clarity, enhancing user experience.

## 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 layout consists of a centered login form with the username input at the top, followed by the Robux balance display, a prominent 'Send Robux' button, and the simulation warning text at the bottom. The overall structure maintains ample white space for a clean and airy feel.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React's built-in state management (useState and useEffect)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a React project with TypeScript and install Tailwind CSS.
2. **Create the Basic Structure**: Build the main components for the username input, Robux display, and button.
3. **Implement Styling**: Use Tailwind CSS to apply the defined minimalist design specifications, ensuring responsiveness.
4. **Add State Management**: Implement state hooks to manage the input values and Robux balance.
5. **Animate Button Action**: Create a function to simulate the Robux transfer, utilizing animations or pop-ups to confirm the action.
6. **Include Simulation Warning**: Add a text element that informs users about the simulation aspect of the application.
7. **Test Responsiveness**: Ensure the application displays correctly on different device sizes and adjust styles as needed.

## USER EXPERIENCE
Users will interact with the application by entering their username into the input field, which is intuitively placed at the top of the interface. Upon entering their username, they will see a simulated balance of Robux displayed below. When users click the 'Send Robux' button, they will receive a visual confirmation through an animation and a pop-up alert. The simulation warning text will always be visible at the bottom, ensuring clarity about the application's purpose. The entire experience is designed to be smooth, engaging, and visually consistent with a light theme and minimalist design.