Smart Timer for Events
An intelligent timer for game events with the ability to integrate it into OBS and remove the background using custom CSS.
- OBS integration
- No Google Fonts
- Easily customizable
Please note that this project is still under development.
Check out the demo.
 |
This repository contains the source code for a responsive countdown webpage that displays the remaining time until the SC5 Christmas Event. The webpage shows a dynamic countdown in days, hours, minutes, and seconds.
- Responsive design for various screen sizes (desktop, tablet, mobile)
- Dynamic countdown to a specified date (December 24, 2025, 08:00 AM)
- Animated logo with hover effect
- Full-screen background image
- Semi-transparent countdown box with blur effect
- OBS-compatible CSS file for streaming integration
- HTML5
- CSS3 (with Flexbox and animations)
- JavaScript (Vanilla JS for the countdown)
- Webp image format for optimized loading times
/www- Contains all webpage files (HTML, images)/scripts- Contains the CSS file for OBS integration/img- Contains preview images and other media
-
Clone the repository:
git clone https://git.fastm.de/Max/SC5-Timer.git -
Open the
/www/index.htmlfile in your preferred web browser.
The /scripts directory contains a special CSS file that can be used to integrate the timer into OBS and properly crop it. Add the webpage as a browser source in OBS and apply the CSS file to display only the timer.
To change the target date of the countdown, edit the following line in the /www/index.html file:
const targetDate = new Date('2025-12-24T08:00:00+01:00');The design can be customized by editing the <style> section in the index.html file. The webpage uses responsive breakpoints for different screen sizes:
- Desktop: > 768px
- Tablet: 480px - 768px
- Mobile: < 480px
MIT License