https://github.com/simonemoreware/supermariobrosclockstudytimelofimusic.github.io
Clock with super mario bros theme to study better with lofi music
https://github.com/simonemoreware/supermariobrosclockstudytimelofimusic.github.io
Last synced: about 1 year ago
JSON representation
Clock with super mario bros theme to study better with lofi music
- Host: GitHub
- URL: https://github.com/simonemoreware/supermariobrosclockstudytimelofimusic.github.io
- Owner: SimoneMoreWare
- License: mit
- Created: 2024-07-21T16:37:46.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-22T17:10:44.000Z (almost 2 years ago)
- Last Synced: 2024-07-23T02:47:17.484Z (almost 2 years ago)
- Language: JavaScript
- Homepage: https://simonemoreware.github.io/SuperMarioBrosClockStudyTimeLofiMusic.github.io/
- Size: 400 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Super Mario Bros Clock Study Time Lofi Music
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.
## Table of Contents
- [Demo](#demo)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Technologies](#technologies)
- [License](#license)
- [Acknowledgments](#acknowledgments)
## Demo
Check out the live demo [here](https://simonemoreware.github.io/SuperMarioBrosClockStudyTimeLofiMusic.github.io/).
## Features
- **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.
## Installation
To run this project locally, follow these steps:
1. Clone the repository:
```bash
git clone https://github.com/SimoneMoreWare/SuperMarioBrosClockStudyTimeLofiMusic.github.io.git
```
2. Navigate to the project directory:
```bash
cd SuperMarioBrosClockStudyTimeLofiMusic.github.io
```
3. Open `index.html` in your preferred web browser.
## Usage
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.
### Controls
- **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.
## Technologies
- **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.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Acknowledgments
- [p5.js](https://p5js.org/) - JavaScript library used for creative coding.
- [Super Plumber Brothers Font](https://www.dafont.com/super-plumber-brothers.font) - Font used in the project.
- [OpenGameArt](https://opengameart.org/) - Source of some game assets.