⏰ Live Time & Date - Minimal Digital Clock

A beautiful, minimal real-time digital clock with clean design, smooth animations, and modern web technologies.

✨ Features

🎨 Minimal Design

• Clean and modern UI with subtle glassmorphism effects
• Minimal typography using Inter and JetBrains Mono fonts
• Smooth animations with reduced motion support
• Professional color system with automatic dark mode
• Modern footer design with animated gradient text effects
• Focus on readability and user experience

🚀 Modern Technologies

• CSS Custom Properties (CSS Variables) for consistent theming
• Advanced CSS Grid & Flexbox layouts
• Modern JavaScript ES6+ with class-based architecture
• Performance optimizations with efficient animations
• Minimal bundle size for fast loading
• Enhanced SEO with structured data and comprehensive meta tags

📱 Responsive Excellence

• Mobile-first design approach
• Fluid typography with clamp() functions
• Dynamic viewport units (dvh, dvw) for modern browsers
• Orientation-aware layouts for landscape/portrait modes
• Ultra-wide screen support with additional floating elements

♿ Accessibility & Performance

• WCAG 2.1 AA compliant with proper ARIA attributes
• Keyboard navigation support (Alt+T for time, Alt+D for date)
• Screen reader compatibility with live announcements
• Reduced motion support for users with vestibular disorders
• High contrast mode and light/dark theme support
• Performance optimized with efficient animations and lazy loading

🎯 Advanced Features

• Real-time updates with performance-optimized intervals
• Page visibility API for battery optimization
• Dynamic document title updates in browser tab
• Smooth element transitions with scale and fade effects
• Error handling and graceful fallbacks
• Developer-friendly console logging with ASCII art

🛠️ Technologies Used

Frontend

• HTML5 - Semantic markup with accessibility attributes
• CSS3 - Advanced features including:
  • CSS Custom Properties (Variables)
  • CSS Grid & Flexbox
  • Backdrop filters & blur effects
  • Complex animations & keyframes
  • Responsive design with media queries
  • Modern pseudo-selectors & functions
• JavaScript ES6+ - Modern features including:
  • Classes & modules
  • Arrow functions & template literals
  • Async/await & Promises
  • Destructuring & spread operators
  • Page Visibility API

Design System

• Color System - Semantic color tokens with 50-950 scales
• Typography Scale - Consistent sizing with clamp() functions
• Spacing System - 8px grid-based spacing scale
• Shadow System - Layered shadows for depth perception
• Animation System - Performance-optimized transitions

🎨 Design Highlights

Minimal Design Effects

backdrop-filter: blur(10px);
background: var(--surface);
border: 1px solid var(--border);
transition: all var(--transition-normal);

Smooth Animations

• Subtle Hover Effects - Clean interaction feedback
• Smooth Transitions - Performance-optimized animations
• Blinking Separator - Gentle time indicator
• Focus States - Clear accessibility indicators
• Dark Mode Support - Automatic system preference detection

Performance Optimizations

• Minimal CSS - Lightweight and efficient styling
• Reduced JavaScript - Essential functionality only
• Prefers-reduced-motion - Accessibility support
• System Font Fallbacks - Fast font loading

📱 Responsive Breakpoints

Device	Screen Size	Features
Mobile Portrait	320px - 480px	Stacked layout, simplified animations
Mobile Landscape	481px - 768px	Optimized for landscape orientation
Tablet	481px - 1024px	Balanced layout with hover effects
Desktop	1025px - 1440px	Full feature set with animations
Large Desktop	1441px+	Enhanced with additional elements
Ultra-wide	1921px+	Extra floating elements and spacing

🚀 Getting Started

Quick Start

1. Clone the repository

   git clone https://github.com/chinmayjha/Live-time.git
   cd Live-time

2. Open in browser

   open index.html
   # or
   python -m http.server 8000  # For local development

3. Customize (Optional)

   • Edit CSS custom properties in :root for theming
   • Modify animations in the CSS file
   • Extend JavaScript functionality as needed

Development

# Install a local server (optional)
npm install -g live-server

# Start development server
live-server .

# The app will open at http://localhost:8080

🎯 Browser Support

Browser	Version	Support Level
Chrome	90+	Full Support ✅
Firefox	88+	Full Support ✅
Safari	14+	Full Support ✅
Edge	90+	Full Support ✅
Opera	76+	Full Support ✅

Advanced Features:

• Backdrop filters: Chrome 76+, Safari 9+
• CSS Custom Properties: All modern browsers
• CSS Grid: Chrome 57+, Firefox 52+, Safari 10.1+

♿ Accessibility Features

• Semantic HTML with proper heading structure
• ARIA labels for screen readers
• Keyboard navigation with custom shortcuts
• Focus management for interactive elements
• Reduced motion support
• High contrast mode compatibility
• Color blindness friendly design

🤝 Contributing

Contributions are always welcome! Here's how you can help:

Code Contributions

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Make your changes
4. Commit your changes (git commit -m 'Add some AmazingFeature')
5. Push to the branch (git push origin feature/AmazingFeature)
6. Open a Pull Request

Other Ways to Contribute

• 🐛 Report bugs
• 💡 Suggest new features
• 📝 Improve documentation
• 🌍 Add translations
• 🎨 Design improvements

📄 License

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

👨‍💻 Author

Chinmay Jha

• 🌐 Website: chinmayjha.tech
• 💼 GitHub: @chinmayjha
• 📧 Email: chinmayjha2021@gmail.com

---

⭐ Star this repository if you found it helpful!

Made with ❤️ by Chinmay Jha

© 2025 Chinmay Jha. All rights reserved.