Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed for immersive and secure reading experiences. Users will enter a temporary password to access an interactive digital book that features an elegant design and various interactive elements to enhance the reading experience.

## CORE FEATURES
1. **Security Wall**: A visually captivating login screen with a deep blue background and animated particles. Users enter a temporary password ('Luz2026') to access the main content.
2. **Interactive Digital Book**: An engaging book layout with classic serif typography and generous spacing for comfortable reading. The book features a dark theme with golden details and smooth fade-in animations.
3. **Progress Bar**: A subtle progress bar at the top that fills up as users scroll through the book, providing a clear indication of reading progress.
4. **Text Highlighting**: Text will illuminate in amber when hovered over, enhancing interactivity and focus.
5. **Background Music**: A small music icon allows users to play soft piano sounds while reading, enriching the immersive experience.
6. **Pop-up Translations**: Clicking on highlighted words will trigger a pop-up that explains their origins in Greek or Latin, adding an educational layer to the reading 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 includes a full-screen login screen followed by a main content area for the book, with a top progress bar and interactive elements integrated smoothly within the reading interface.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Use React's built-in state management or consider using Zustand for more complex state handling if needed.

## IMPLEMENTATION STEPS
1. **Set Up the Environment**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create the Security Wall**: Design the login screen with a deep blue background and animated particles. Implement the password functionality and transition to the main content area upon successful entry.
3. **Design the Digital Book Interface**: Create a component for the digital book that utilizes classic serif typography and implements the dark theme with golden details. Add the progress bar at the top.
4. **Implement Interactive Features**: Add hover effects for text highlighting, integrate the background music feature, and set up pop-up translations for highlighted words.
5. **Populate with Dummy Content**: Insert placeholder text structured into three chapters to test the layout and interactive elements.
6. **Testing and Adjustments**: Test the application for functionality, responsiveness, and aesthetic appeal, making adjustments as needed based on user feedback.

## USER EXPERIENCE
Users will first encounter a visually striking login screen where they can enter the temporary password. Upon successful entry, they will transition into the digital book interface, where they can read and interact with the text. The progress bar at the top will help track their reading progress, and interactive features such as text highlighting and pop-up translations will enrich their experience. The gentle piano music in the background will create a calming atmosphere, perfect for immersive reading. 

This comprehensive setup will ensure a user-friendly and engaging application that captures the essence of immersive reading while providing a secure environment.