A minimalist, high-performance countdown application designed for large screens, presentations, and immersive displays.

• Minimalist Aesthetic: Premium dark mode design with high-contrast typography.
• Configurable Timer: Set custom event titles, optional subtitles, and target date/time.
• Immersive Full-Screen: Automatically enters full-screen mode for a distraction-free experience.
• Responsive Design: Adapts seamlessly to various screen sizes and orientations.
• Visual Assets: Integrated logo and background support for brand alignment.
• "Time's Up" Alert: Clear visual notification once the countdown reaches zero.

• React 19: Modern UI library for efficient rendering.
• TypeScript: Type-safe development for better maintainability.
• Vite: Ultra-fast build tool and development server.
• Tailwind CSS 4: Utility-first styling with modern CSS features.

• src/components/: UI components for configuration and display.
• src/hooks/: Custom hooks for countdown logic and fullscreen management.
• src/utils/: Helper functions for time formatting.
• src/assets/: Visual branding assets (logo, background).

• Node.js (v18 or higher recommended)
• npm or yarn

1. Clone the repository:

   git clone <repository-url>
   cd countdown

2. Install dependencies:

   npm install

Start the development server:

npm run dev

Open your browser to http://localhost:5173 to view the app.

1. Configuration: On the home screen, enter your event Title, a Target Time, and an optional Subtitle.
2. Start: Click "Start Countdown" to begin.
3. Display: The app will transition to the countdown view and attempt to enter full-screen mode.
4. Fullscreen Toggle: Double-click anywhere on the display to toggle full-screen manually.
5. Back to Config: Hover over the top-left area and click "Esc to Config" (or use the browser back button) to modify settings.
6. Time's Up: When the timer hits zero, a "TIME'S UP" message will be displayed.