🕰️ Analog Clock Web App

A beautifully designed, interactive analog clock web application featuring a sleek analog clock crafted with Adobe Illustrator, customizable themes, and sound effects. Perfect for adding elegance to your browser.

Live Demo

---

✨ Features

• Smooth Analog Clock: Real-time hour, minute, and second hands.
• Customizable Themes: Switch between light and dark modes.
• Optional Sound Effects: Toggle ticking sounds for an immersive experience.
• Responsive Design: Seamless performance across all screen sizes.
• Intuitive Controls: Easily toggle themes and sounds via tooltips.
• Well-Structured CSS: Modular styles for maintainability.

---

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Edge, Brave).
• Node.js (optional, for local development).

Installation

1. Clone the repository:

   git clone https://github.com/waiz3ple/wall-clock.git

2. Navigate to the project directory:

   cd wall-clock

3. Install dependencies (if applicable):

   npm install

4. Run locally:

   npm run dev

---

🛠️ Usage

• Toggle Theme: Click the settings icon (⚙️) to switch between light and dark modes.
• Enable/Disable Sound: Use the sound toggle in the tooltip.
• Close Tooltip: Click outside the tooltip or the close button to dismiss it.

---

🎨 Customization

Themes

Modify variables.css to adjust light and dark modes.

Sounds

Replace clock-ticking.wav in the assets/sounds folder with your preferred audio file.

Modular CSS Structure

• fonts.css: Custom fonts.
• variables.css: Theme and color variables.
• base.css: Global styles.
• clock.css: Clock-specific styles.
• checkbox.css: Toggle switch styles.
• tooltip.css: Tooltip styles.
• media-queries.css: Responsive adjustments.
• animations.css: Keyframe animations.
• settings-icon.css: Settings icon styles.

---

🌐 Browser Support

Tested on:

• Google Chrome
• Mozilla Firefox
• Brave
• Opera
• Microsoft Edge

🛠️ CI/CD for GitHub Pages

Automatically deploys to GitHub Pages when the main branch is built. The dist folder is generated and deployed.

---

🚀 Areas for Improvement

• Desktop Screen Saver Mode: Convert the app into a screensaver for Windows and macOS.
• Alarm Feature: Add an alarm clock option with customizable alerts.
• Additional Themes: Introduce more theme options, including seasonal and custom backgrounds.
• Widget Support: Develop a widget version for desktops and mobile devices.

---

🤝 Contributing

1. Fork the repository.
2. Create a new branch (git checkout -b feature/YourFeature).
3. Commit your changes (git commit -m 'Add some feature').
4. Push to the branch (git push origin feature/YourFeature).
5. Open a pull request.

---

📜 License

Licensed under the MIT License.
Please do not claim this project as your own.

---

👤 Author

• Wasiu Ramoni
• GitHub: @waiz3ple
• Twitter: @waiz3ple
• Telegram: t.me/waiz3ple

---

Enjoy your time with the Analog Clock App! ⏰