Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a minimalist tool designed to allow users to upload two .srt subtitle files, merge them, and select specific timestamps from the second file to align with the first. The focus is on simplicity and user experience, facilitating quick and efficient subtitle merging.

## CORE FEATURES
1. **File Upload**: Users can upload two .srt files using a simple drag-and-drop interface or file selector.
2. **Timestamp Selection**: Users can view the timestamps from the second subtitle file and select which ones to merge with the first file.
3. **Merge Operation**: Once selections are made, users can execute the merge, combining the selected timestamps into a single .srt file.
4. **Download Merged File**: After merging, users can download the resulting combined subtitle file easily.
5. **Preview Functionality**: Users can preview subtitles from both files side by side before merging to ensure accuracy.
6. **Simple User Interface**: A clean layout with minimal distractions to focus on the merging task.

## 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 centered upload area at the top, followed by a timestamp selection section, a preview area, and action buttons (merge and download) at the bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Redux (or React Context API) for managing the state of uploaded files and user selections.

## IMPLEMENTATION STEPS
1. **Setup Project**: Create a new React project with TypeScript and install Tailwind CSS.
2. **Install Dependencies**: Add necessary libraries including shadcn/ui and Redux (if chosen for state management).
3. **Create Components**:
   - **FileUpload**: Component for handling file uploads.
   - **TimestampSelector**: Component for displaying and selecting timestamps from the second subtitle file.
   - **MergeButton**: Component to trigger the merge action.
   - **DownloadButton**: Component to download the merged file.
   - **Preview**: Component to show previews of both subtitle files.
4. **Implement State Management**: Use Redux or Context API to manage the file uploads and selected timestamps.
5. **Merge Logic**: Implement the logic for merging the subtitle files based on selected timestamps.
6. **Styling**: Apply Tailwind CSS to style components according to the design specifications.
7. **Testing**: Conduct tests to ensure file uploads, merging, and downloads work as expected.
8. **Deployment**: Deploy the application to a hosting service (like Vercel or Netlify).

## USER EXPERIENCE
Users will interact with a straightforward interface, starting by uploading their .srt files. They will select timestamps from the second subtitle file, preview both files, and execute the merge operation. The app will provide clear feedback throughout the process, ensuring users know when their files are being processed and when the merged file is ready for download. The design will be responsive, ensuring usability across different devices.