https://github.com/cloudwerx-dev/clock-widget
An elegant clock widget that combines real-time functionality with customizable gradient backgrounds. Built with vanilla JavaScript, it can be easily embedded into any website while maintaining custom settings like gradient types, fonts, and time formats.
https://github.com/cloudwerx-dev/clock-widget
Last synced: about 2 months ago
JSON representation
An elegant clock widget that combines real-time functionality with customizable gradient backgrounds. Built with vanilla JavaScript, it can be easily embedded into any website while maintaining custom settings like gradient types, fonts, and time formats.
- Host: GitHub
- URL: https://github.com/cloudwerx-dev/clock-widget
- Owner: CLOUDWERX-DEV
- Created: 2025-01-18T04:59:53.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-18T04:39:57.000Z (4 months ago)
- Last Synced: 2025-02-13T16:44:34.078Z (4 months ago)
- Homepage: https://pinkpixel.dev
- Size: 0 Bytes
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Customizable Clock Widget
A modern, customizable clock widget that can be embedded into any website. Features a sleek design with real-time updates and extensive customization options.
## Features
- **Real-time Updates**: Displays current time and date with automatic updates
- **Time Format Options**:
- 12/24 hour format toggle
- Optional seconds display
- **Customizable Design**:
- Multiple gradient types (Linear, Radial, Conic)
- Custom color picker for gradient colors
- Adjustable gradient angle
- Various font family options
- Adjustable font size
- **Responsive Layout**: Maintains appearance across different screen sizes
- **Easy Embedding**: Generate and copy embed code with one click
- **Persistent Settings**: Saves your customization preferences locally
## Usage
1. Open `index.html` in a web browser to use the widget
2. Customize the appearance using the control panel:
- Choose colors for the gradient
- Select gradient type and angle
- Pick your preferred font and size
- Set time format preferences
3. Click "Show Embed Code" to get the code for embedding in your website
4. Copy the generated code and paste it into your website's HTML
## Embedding
To embed the clock widget in your website:
1. Click the "Show Embed Code" button
2. Click "Copy Code" to copy the generated HTML and JavaScript
3. Paste the code into your website where you want the clock to appear
4. The widget will maintain all your custom settings in the embedded version
## Customization Options
### Colors and Gradient
- Primary and secondary colors using color picker
- Gradient types: Linear, Radial, or Conic
- Adjustable gradient angle (0-360 degrees)
### Typography
- Font families: IBM Plex Sans, Roboto, Montserrat, Lato, Open Sans, Poppins, Source Sans Pro, Ubuntu
- Adjustable font size (12-48px)
### Time Display
- 12/24 hour format
- Toggle seconds visibility
- Full date display with day, month, year
## Browser Support
Works in all modern browsers:
- Chrome
- Firefox
- Safari
- Edge
## Dependencies
No external dependencies required! The widget uses:
- Pure HTML5
- CSS3
- Vanilla JavaScript
- Google Fonts (loaded via CDN)
## License
MIT License - Feel free to use, modify, and distribute this code for any purpose.