Globe World Clock Date Time Converter

You are a world-class full-stack web developer and 3D designer. Build a beautiful, interactive World Clock Time Converter web app with the following exact specifications. The entire project must be a single, self-contained HTML file (HTML + CSS + vanilla JavaScript only, no external dependencies except three.js via CDN). It must work offline after the first load. Core Features & UI Requirements: Central Interactive 3D Globe Use Three.js (load via CDN) to render a high-quality rotating 3D Earth in the center of the screen. Realistic Earth texture (day/night + clouds optional but preferred). Smooth dragging with mouse/touch to rotate the globe in any direction (orbit controls style, but the globe itself spins, camera stays fixed). Inertia/momentum on drag release (feels natural). Timezone Detection on Hover & Click Pre-load a built-in timezone map (use tz.db or simplified GeoJSON with major cities/timezones – include at least 400 major cities covering all 400+ IANA timezones). When the user hovers over or drags the globe near a country/city, subtly highlight the region and show a small floating label with city name and current local time. On click/tap: lock that location as selected → a glowing marker (small pulsing dot or flag) appears on the globe at that exact coordinates, and the location is added to the comparison list on the right. Right-side Comparison Panel Clean, modern vertical list titled “Selected Timezones”. Each entry shows: Country flag emoji + City/Region name Large current local time (24-hour format by default, toggle for 12-hour) Date and day of week Timezone name (e.g., Europe/London) Offset from UTC (e.g., UTC+0 or UTC-5) “Remove” button All selected times update live every second. Maximum 12 items. Top Control Bar Current UTC time prominently displayed. “Now” mode (default) vs “Custom time” mode: – When user clicks a date-time picker, switch to custom mode. – All clocks show the chosen date/time instead of real-time. – A “Back to Now” button appears. 12/24 hour toggle. “Add current location” button (uses browser geolocation to add user’s own timezone). Visual Polish Dark mode by default (space-like background with subtle stars). Smooth animations, glass-morphism cards, soft glows. Mobile-friendly and fully responsive. When multiple cities are selected, optionally draw faint curved lines (great-circle arcs) between them on the globe. Technical Requirements Single HTML file only. All code (HTML, CSS, JS) inside one file. Use Intl.DateTimeFormat for accurate timezone calculations (no external libraries needed). Include a compact list of major cities with name, country, lat, lng, and IANA timezone string (embed as a JS object/array). Raycasting to detect which city is under the mouse when clicking. Bonus (if possible within one file) Day/night shading on the globe based on current or selected time. Subtle atmospheric glow. Deliver the complete, ready-to-run single HTML file. Title it “World Clock Globe”. Make it visually stunning and buttery smooth.