timeCircles

A beautiful and interactive time visualization web application that represents the passage of time through elegant circular elements.

0
0
0
HTML
public

Time Circles Visualization

HTML5
CSS3
JavaScript
MIT License
Maintenance
PRs Welcome

A beautiful and interactive time visualization web application that represents the passage of time through elegant circular elements. This project provides an intuitive way to visualize different time scales - from hours in a day to months in a year.

Time Circles Application Screenshot

Features

  • 🕒 Multiple time visualization modes:
    • Day view (hours)
    • Week view (days)
    • Month view (days)
    • Year view (months)
  • 🎨 Modern, minimalist design with dark theme
  • ✨ Smooth animations and transitions
  • 📱 Fully responsive layout
  • 🌐 PWA (Progressive Web App) ready
  • 🎯 Real-time updates

Demo

Simply open index.html in your web browser to see the visualization in action.
Or visit the Github pages of it directly in your browser. The url is https://deadjoe.github.io/timeCircles/

Usage

  1. Clone the repository
  2. Open index.html in a modern web browser
  3. Click different view modes to switch between time visualizations
  4. Current time unit will be highlighted with passed units dimmed

Installing as a PWA on Mobile Devices

For iOS (iPhone/iPad):

  1. Open Safari and visit https://deadjoe.github.io/timeCircles/
  2. Tap the Share button (📤) at the bottom of the screen
  3. Scroll down and tap “Add to Home Screen”
  4. Give your PWA a name or keep the default name
  5. Tap “Add” to install the app on your home screen

For Android:

  1. Open Chrome and visit https://deadjoe.github.io/timeCircles/
  2. Tap the three-dot menu (⋮) in the top-right corner
  3. Tap “Add to Home screen”
  4. Follow the prompts to install the PWA

Once installed, you can launch the Time Circles app directly from your home screen like any other app!

Technical Details

The application is built using:

  • Pure HTML5
  • CSS3 with modern features (Grid, Flexbox, CSS Variables)
  • Vanilla JavaScript
  • Inter font family for typography

No external dependencies or build process required!

Browser Support

Supports all modern browsers including:

  • Chrome/Edge (latest)
  • Firefox (latest)
  • Safari (latest)
  • Mobile browsers

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Created with ❤️ by Joe

Last Updated: 2025-02-25

v0.3.3[beta]