This project is a fun and engaging clock application inspired by Super Mario Bros, enhanced with study-time lofi music. The clock features animated Mario characters and elements, providing a delightful way to keep track of time while enjoying some soothing music.
Check out the live demo here.
- Mario Theme: Includes Mario-themed backgrounds, characters, and animations.
- Clock Display: Shows the current hour, minute, and second in Mario-style blocks.
- Animations: Features animations of Mario jumping, a Goomba walking, and a coin bouncing.
- Lofi Music: Includes a Spotify playlist with study-time lofi music.
- Interactive Elements: Toggleable audio icon to mute/unmute sounds.
To run this project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/SimoneMoreWare/SuperMarioBrosClockStudyTimeLofiMusic.github.io.git
-
Navigate to the project directory:
cd SuperMarioBrosClockStudyTimeLofiMusic.github.io -
Open
index.htmlin your preferred web browser.
Once you open index.html in your browser, you will see the Super Mario-themed clock with animations and music. The time is displayed in blocks, and the Spotify iframe provides continuous lofi music. Click on the audio icon to mute or unmute the sounds.
- Toggle Audio: Click the audio icon to turn sounds on or off.
- Tab Visibility: Alerts you when you switch to another tab and welcomes you back when you return.
- HTML: Structure of the webpage.
- CSS: Styling of the webpage.
- JavaScript (p5.js): Used for animations and interactive elements.
- Spotify Embed: For embedding the lofi music playlist.
This project is licensed under the MIT License. See the LICENSE file for details.
- p5.js - JavaScript library used for creative coding.
- Super Plumber Brothers Font - Font used in the project.
- OpenGameArt - Source of some game assets.