A sleek, responsive time tools web application featuring a modern Clock and Stopwatch with glassmorphism UI design, live updates, and beautiful animations. Built with HTML, CSS, JavaScript, and Bootstrap 5.
DEPI Time Tools is a modern web app that displays real‑time clock and stopwatch functionality. It features a glassmorphism interface, animated geometric backgrounds, Bootstrap 5 responsiveness, and a professional UX with accessible, semantic HTML.
- HTML5, CSS3, JavaScript (ES6+)
- Bootstrap 5.3.3
- CSS Grid, Flexbox, CSS Custom Properties,
backdrop-filter - Browser APIs: DOM,
setInterval,Intl.DateTimeFormat - Design System: custom color palette via CSS variables
- Real‑time clock with HH:MM:SS updates and date display
- High-precision stopwatch with millisecond accuracy
- Lap time recording system for multiple measurements
- Glassmorphism UI with animated geometric shapes
- Responsive mobile‑first layout (Bootstrap 5)
- Tab navigation between Clock and Stopwatch modes
- Accessible: ARIA labels & semantic structure
- Cross‑browser fallbacks for modern CSS
- LinkedIn Post: coming soon
# 1) Clone
git clone https://github.com/Ahmed-Maher77/DEPI-Time-Tools__Clock-and-Stopwatch.git
cd DEPI-Time-Tools__Clock-and-Stopwatch
# 2) Run locally
Open index.html directly in the browser
# 3) Features available
- Clock: Real-time display with date and timezone
- Stopwatch: High-precision timing with lap recording- 🧑💻 Portfolio: https://ahmedmaher-portfolio.vercel.app/
- 🔗 LinkedIn: https://www.linkedin.com/in/ahmed-maher-algohary
- 📧 Email: ahmedmaher.dev1@gmail.com
Contributions, suggestions, and bug reports are welcome. Feel free to open issues or pull requests.
If you found this project helpful or inspiring, please consider giving it a ⭐. Your support helps me grow and share more open-source projects like this!