Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
imvbh committed Nov 7, 2023
1 parent 0d7de4a commit bae2788
Showing 1 changed file with 30 additions and 1 deletion.
31 changes: 30 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,30 @@
# FlipClock
# FlipClock

**FlipClock** is a web-based clock with a realistic flipping animation. It offers a clean and minimalist design with several key features:

- **Smooth Flips:** FlipClock achieves smooth flips by animating each digit's top and bottom halves separately.
- **12-Hour and 24-Hour Support:** Easily toggle between 12-hour and 24-hour time formats.
- **Toggle Seconds:** Enable or disable the display of seconds on the clock.
- **Day/Night Mode:** The interface adapts to the time of day for optimal viewing.
- **Fullscreen Mode:** Double-tap for an immersive full-screen experience.
- **Auto Hide Buttons:** Buttons disappear after 2 seconds of inactivity for an uncluttered view.

## Logic behind flips
FlipClock achieves smooth flips by animating the top and bottom halves of each digit separately.
The flip function handles the animation of each digit by creating top and bottom flip elements and updating the displayed number.

## Usage

1. Include FlipClock JavaScript and CSS files in your HTML.
2. Add a `<div>` with the class "flip-card" to display the clock.
3. Customize the clock's appearance, buttons, and functionality as needed.

## Contributions

Feel free to contribute, open issues, or propose enhancements.

## License

FlipClock is open-source make sure to give proper credits on usage.

Enjoy using FlipClock and elevate your web application's timekeeping experience!

0 comments on commit bae2788

Please sign in to comment.