By Jacob and Felix — Public v2.2.0
A modern, sleek school timetable countdown app built in HTML, CSS, and JavaScript, featuring Picture-in-Picture (PiP) mode, live countdowns, and fully customisable gradient backgrounds.
Originally created by Jacob, developed and tested by Felix & Refined / Published by Jacob & Felix.
This app tracks your school day in real-time, showing:
- Next lesson and time remaining
- Current lesson and countdown
- Weekend detection
- Customisable PiP gradients
It is designed to be lightweight, fast, and sleek-style modern.
- Real-time countdowns for lessons, breaks, and lunch
- Automatic weekend handling with next lesson countdown
- Picture-in-Picture mode for floating above other windows
- Customisable top and bottom PiP gradient colours with auto-save
- Local week selection (Week A / Week B)
- JSON-based timetable for easy editing and expansion
- Responsive, sleek design optimised for desktops
Main timetable countdown window
Floating Picture-in-Picture mode with custom gradients
- Windows, MacOS, or Linux
- A modern browser (Edge, Chrome, or Safari recommended)
- Basic knowledge of folder placement
- Go to Starting Files and download all the files.
- Download these files into your Downloads.
- Move the files into your APPS folder which can be located in your One Drive. If you cannot locate an APPS folder, then create a new folder called APPS.
- Go to your desktop, so that you can see your Wallpaper.
- Right click on your desktop and hover your mouse over New.
- Click Shortcut and click Browse. Click your OneDrive, then your APPS folder then click start.bat and then select Confirm at the Bottom.
- Then select, Confirm or Apply again.
- Then, give your Shortcut a name. Reccomendations are Timetable or School Clock.
- After that, Click save and drag your shortcut into the preffered position.
- Once you have done that, go to your APPS folder using File Explorer.
- Double Click onto the updater.bat and let the app open correctly. This will update your app to the latest working version and also create a backup.
- Now, close File Explorer and go through the set up process onto the app.
- The app will help you create a timetable.json file. Once you have downloaded this file, open File Explorer and open Downloads.
- Right click the file and press Copy.
- Navigate to your OneDrive, then to your APPS folder and then right click the white space and select Paste
- Close File Explorer and click on the Timetable App. You should see the website.
- Press the X in the top-right corner. Go back to your desktop / wallpaper and double-click on your Timetable / School Clock Icon.
- You will see the app open with your timetable active. You can now select Week A or Week B and also Select the Gradient Colours for the Floating Pop Up (PiP)
- Then click on the white space on the website and a box will appear on your screen with your selected colours and information.
- You can now resize this box and place it anywhere on your screen.
- Well Done! Enjoy your timetable App.
- If you wish to update to the latest version, please open File Explorer, go to your APPS folder, then double-click your updater.bat. This will then give you the latest updates and features.
timetable-app/
│
├─ timetable-app.html
├─ timetable.json
├─ version.txt
├─ remote_version.txt
├─ start.bat
└─ update.bat
This app was originally designed and coded by Jacob. It is still being maintained by Jacob and please contact Jacob for More Info. This app was also created with massive help from Felix. He has helped with bug fixes, issues and also general improvements. You can contact either of us for more information or help. Due to privacy issues, our contact details are NOT avalible here.