الساعة العالمي

Create index.html, styles.css, and script.js. Set lang='ar' dir='rtl' on <html>. Add page title 'الساعة العالمية' and link CSS/JS files.

Add header with title 'الساعة العالمية' and subtitle 'الوقت الآن في أهم مدن العالم'. Add main clock section and city cards container section with placeholder elements.

Set up blue color palette as CSS custom properties, elegant background, RTL typography, and base resets. Add a subtle globe/world-map SVG background element.

Make the main clock the most prominent element: very large monospace digits, HH:MM:SS format, city name, and current date display. Add soft shadows and rounded container.

Create rounded card components with city name, country, flag, and local time. Arrange five cards in a responsive grid (1 column mobile, 2-3 tablet, 5 desktop). Add selected-state visual styling (highlight/border/background change).

Create a JS array of five city objects: {name, country, flag, timezone} using IANA identifiers (Africa/Casablanca, Europe/Paris, Europe/London, Europe/Moscow, America/New_York). Casablanca is the default selected city.

Write a function that takes a timezone and returns current time as HH:MM:SS (24-hour) and current date in Arabic locale. Use Intl.DateTimeFormat with timeZone option for DST-correct results.

Use one setInterval(1000) that updates the main clock and all five city card clocks simultaneously each second without page reload.

Generate five city card DOM elements from the city data array, populating name, country, flag, and live local time. Append to the cards container.

Add click handlers to each card. On click, set the selected city, visually highlight the chosen card, and immediately update the main clock to show that city's timezone, name, and date without page reload.

Verify: page loads correctly in RTL Arabic, main clock displays and ticks every second, all five city cards show correct local times, clicking a city updates the main clock instantly, DST is handled via Intl, selected card is visually distinguished, layout is responsive across mobile/tablet/desktop, and no external APIs or backend are used.

Ensure all files are self-contained (no external CDN dependencies). Confirm the project can be opened directly via index.html or deployed to any static host (e.g., GitHub Pages, Netlify).