Lovable Prompt Creator - AI Prompt Generator

```markdown
## APPLICATION OVERVIEW
دليل مسلسلات رمضان 2026 (Ramadan Series Guide 2026) is a static website designed to provide a comprehensive guide for tracking all TV series during Ramadan 2026. The application serves Arabic-speaking users with a modern and elegant interface, offering features like series filtering, detailed information, and a countdown to Ramadan.

## CORE FEATURES
- **Homepage with Countdown**: A dynamic homepage featuring a live countdown to Ramadan and a grid of highlighted series.
- **All Series Page**: A comprehensive list of all series with advanced filters for country, platform, and genre, enabling users to search and sort through the content seamlessly.
- **Series Detail Page**: A dedicated page for each series showcasing detailed information, including cast, crew, release dates, and descriptions.
- **Upcoming Series Section**: A page dedicated to upcoming series, keeping users updated with future releases.
- **Archive of Past Series**: An organized archive of past series for users to revisit and explore previous Ramadan shows.
- **About Page**: A section detailing the website’s mission, features, and contact information.

## DESIGN SPECIFICATIONS
- **Visual Style**: Modern and elegant with a dark blue theme complemented by golden accents.
- **Color Scheme**:
  ```css:root {
  --bg-primary: #0b0f1a;        /* Dark blue background */
  --bg-secondary: #151a2e;      /* Secondary dark blue */
  --bg-card: #1a1f35;           /* Card background */
  --accent-gold: #d4af37;       /* Gold accent (primary) */
  --accent-gold-light: #e5c158; /* Light gold (hover) */
  --accent-gold-dark: #b8941f;  /* Dark gold */
  --text-primary: #ffffff;      /* White text */
  --text-secondary: #b8bcc8;    /* Gray text */
  --text-muted: #7a7f8f;        /* Muted text */
  --border-color: #2a2f45;      /* Border color */
  }
  ```
- **Layout**: Container with a maximum width of 1200px, using CSS Grid for series cards that adapt responsively with breakpoints for mobile, tablet, and desktop.
- **Typography**: 
  - Font Family: 'Cairo', 'Segoe UI', Tahoma, sans-serif
  - Font Weights: 400 (regular), 600 (semi-bold), 700 (bold)
  - RTL support for Arabic text.

## TECHNICAL REQUIREMENTS
- **Framework**: Pure HTML5, CSS3, and Vanilla JavaScript (no frameworks or libraries).
- **Styling**: CSS Grid and Flexbox for layout.
- **Fonts**: Google Fonts - Cairo for Arabic text.
- **Icons**: SVG icons for various UI elements embedded directly in the code.
- **Data Structure**: A JSON-like JavaScript array in `data.js` to manage series information.

## IMPLEMENTATION STEPS
1. **Set up file structure** as outlined, creating necessary HTML files and folders for CSS, JavaScript, and assets.
2. **Develop `index.html`** to include navigation, hero section, countdown timer, and featured series grid.
3. **Create `series.html`** with filter functionality, including search input and dropdowns for country, platform, and genre.
4. **Implement `series-details.html`** to dynamically display series details based on the selected series.
5. **Design `upcoming.html`** to list future releases with an integrated countdown feature.
6. **Build `archive.html`** for past series, ensuring sorting functionality by release date.
7. **Develop `about.html`** with static content about the website and its features.
8. **Integrate JavaScript functions** for navigation, countdown timer, series loading, and filtering capabilities.
9. **Ensure responsive design** using media queries and CSS transitions for a smooth user experience.
10. **Conduct thorough testing** to ensure all features work as intended across different devices and browsers.

## USER EXPERIENCE
The application provides an intuitive user experience, allowing users to easily navigate through series with a sticky navigation bar. The homepage greets users with a visually appealing countdown timer, while the series pages offer real-time filtering and seamless transitions to detail views. Users can interact with elements like the back-to-top button and filters with smooth animations, ensuring an engaging experience throughout the site.
```