• 📱 Mobile-First Design: Optimized exclusively for smartphones and tablets with touch-friendly controls
• 🌍 GPS Timezone Detection: Automatically detects your timezone based on GPS coordinates with high accuracy (10-20m)
• ⚡ Dual-Time Display: Beautiful circular analog clock with both device time and selected timezone
• 🔍 Timezone Picker: Tap to search and select from hundreds of timezones worldwide
• 📍 Location Information: Real-time GPS coordinates, accuracy, and timezone details
• 🎨 Modern UI: Circular glassmorphic clock design with gradient backgrounds and smooth animations
• 🌙 Time Difference: Instant calculation of time difference between zones
• 📲 Native Apps: Full Android and iOS support via Capacitor
• 🔒 Privacy-First: All data processed locally on device, no server transmission
• ♿ Accessible: ARIA roles, reduced-motion support, and keyboard navigation
• 🌐 Offline-Ready: Works without internet connection once loaded

• Smartphones: Android 8.0+, iOS 13+
• Tablets: iPad, Android tablets (7" - 12")
• Screen Sizes: 320px - 1024px width
• Orientations: Portrait (primary), Landscape

• Desktop browsers (will show mobile-only notice)
• Devices wider than 1024px
• Legacy devices (Android < 8.0, iOS < 13)tch - Mobile World Clock

Chrono Watch is a beautiful world clock app designed exclusively for smartphones and tablets. Built with React and Capacitor, it combines a stunning circular analog clock with GPS-powered timezone detection, providing an elegant timekeeping experience optimized for mobile devices.

🚨 Mobile-Only App: This application is designed exclusively for smartphones and tablets. Desktop browsers will display a mobile-only notice directing users to access the app from their mobile device.

• Dual-view timekeeping: a precision analog clock flanked by device and selected-zone digital readouts, plus a breakdown of how far the selected zone is ahead or behind your device time.
• Timezone picker built into the clock: tap the “Selected Zone” tile to open a searchable modal and jump across the globe instantly.
• GPS integration powered by the browser Geolocation API with comprehensive error handling, accuracy reporting, and retry controls.
• Responsive, mobile-first layout with safe-area support for modern devices and fine-tuned glassmorphism styling.
• Offline-ready experience that keeps ticking even without connectivity, whether you deploy to the web or package natively.
• Accessible experience featuring ARIA roles, reduced-motion fallbacks, and keyboard-friendly controls.

npm install
npm start

The app will be available at http://localhost:3000.

npm test

Unit tests cover the key dashboard areas and validate the geolocation integration.

1. Click or tap the bottom digital tile on the clock labeled “Selected Zone”.
2. Use the modal search to pick any supported timezone.
3. The Date card updates with the region name, identifier, UTC offset, and the difference relative to your device time.

1. Build the web assets that Capacitor will embed:

   npm run build

2. (First-time setup) add the native platforms after installing the new dependencies:

   npx cap add android
   npx cap add ios

3. Sync the compiled assets into the native shells whenever you make changes:

   npm run cap:sync

1. Open the Android project:

   npm run cap:open:android

2. Android Studio will launch; from there you can run on an emulator/device or assemble a release APK/AAB.

1. Open the iOS workspace:

   npm run cap:open:ios

2. Xcode opens ready for simulator testing, signing, and App Store packaging.

Tip: For live-reload during device testing, temporarily set a dev server URL inside capacitor.config.json, run npm start, and use npx cap run.

• Location access is optional; deny it to keep using the clock without GPS data.
• No location data leaves the device—everything runs locally on the device, whether you build for the web or package natively.

• React 18 + Hooks
• Custom hooks for device time and GPS management
• PropTypes for runtime safety
• React 18 with Hooks
• Capacitor 5 for native Android/iOS shells
• Custom hooks for device time and GPS management
• PropTypes for runtime safety
• Create React App build pipeline

Issues and pull requests are welcome! Please open a ticket describing the enhancement or bugfix you have in mind.