Time Circles Visualization






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.
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
- Clone the repository
- Open
index.html in a modern web browser
- Click different view modes to switch between time visualizations
- Current time unit will be highlighted with passed units dimmed
Installing as a PWA on Mobile Devices
For iOS (iPhone/iPad):
- Open Safari and visit https://deadjoe.github.io/timeCircles/
- Tap the Share button (📤) at the bottom of the screen
- Scroll down and tap “Add to Home Screen”
- Give your PWA a name or keep the default name
- Tap “Add” to install the app on your home screen
For Android:
- Open Chrome and visit https://deadjoe.github.io/timeCircles/
- Tap the three-dot menu (⋮) in the top-right corner
- Tap “Add to Home screen”
- 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