From bae2788ef1eb7162c8b6faad8b24abd7aa896c11 Mon Sep 17 00:00:00 2001 From: Vaibhav <86156611+imvbh@users.noreply.github.com> Date: Tue, 7 Nov 2023 10:38:15 +0530 Subject: [PATCH] Update README.md --- README.md | 31 ++++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 2d41a11..4d588cc 100644 --- a/README.md +++ b/README.md @@ -1 +1,30 @@ -# FlipClock \ No newline at end of file +# 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 `
` 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!