[FEATURE REQUEST] Replace Static Pomodoro text with fully fucntional Circular CSS Timer ⏳

[Nishitbaria]

Description

The current implementation of the Pomodoro Timer in the Pomodoro section of Milan is static and lacks interactivity. To improve the user experience and provide visual feedback, we should replace the existing static text with a circular CSS timer.

Implement a circular CSS timer that dynamically updates its progress as the user starts and stops the Pomodoro timer. The circular timer should have a clear indication of the remaining time, and the color of the timer should change as the time progresses (e.g., from green to yellow to red as the time runs out).

Benefits:

• Enhances the visual appeal of the Pomodoro section.
• Provides an intuitive and engaging experience for users.
• Offers a clear representation of the remaining time, aiding users in managing their Pomodoro sessions effectively.

Tasks:

• Replace the static text with a circular CSS timer.
• Implement JavaScript functionality to update the timer based on the user's interactions.
• Add styling to change the color of the timer as the time progresses.
• Test the timer thoroughly to ensure it works correctly and handles different use cases.
• Update the documentation to reflect the changes made.

Video for Timer

https://github.com/akshitagupta15june/Moksh/assets/85815172/beb61557-df6f-44ae-81c2-81ed994406e0

[github-actions[bot]]

Congratulations, @Nishitbaria! 🎉 Thank you for creating your issue for Moksh. Your contribution is greatly appreciated and we look forward to working with you to resolve the issue. Keep up the great work! Should you have any queries or require guidance, do not hesitate to ask.

[Nishitbaria]

@akshitagupta15june ,please assign this issue to me

[Nishitbaria]

@akshitagupta15june ,please assign this issue to me,i will make pull request asap