Skip to content

Latest commit

 

History

History
126 lines (90 loc) · 3.29 KB

README.md

File metadata and controls

126 lines (90 loc) · 3.29 KB

🕰️ 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

Wall Clock Screenshot

✨ 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

Enjoy your time with the Analog Clock App! ⏰