changed to NES theme

This commit is contained in:
BinaryDigitDev 2024-10-14 17:59:41 -04:00
parent a65cc9f6b1
commit f7fdfc1314
4 changed files with 44 additions and 19 deletions

View File

@ -1 +1,20 @@
# Countdown Timer # Gamer Countdown Timer
Edited from my [pomodoro-timer](https://github.com/BinaryDigitDev/pomodoro-timer) repo for KilobyteKeith's game stream!
<hr>
I've forked Bear's awesome [pomodoro-timer](https://github.com/SpectacledBear/pomodoro-timer) project and added styling with [PaperCSS](https://www.getpapercss.com/) and a new alarm sound from [Pixabay](https://pixabay.com/sound-effects/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=6402). Tomato favicon via [Twemoji](https://github.com/twitter/twemoji).
<hr>
I created this simple HTML page to assist me in using the Pomodoro technique. It provides a countdown timer based on the three activities outlined in this technique.
For more information on the Pomodoro technique, please check its [website](http://pomodorotechnique.com/).
## Licensing
For more information on licensing for this code, please read the LICENSE.txt file included in this repository.
The alarm sound is licensed using a [CC BY-NC 4.0 license](http://creativecommons.org/licenses/by-nc/4.0/). The original file was downloaded from http://www.orangefreesounds.com/alarm-clock-ringing/.

BIN
favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -1,27 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="dark"> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="pomodoro.css"> <link rel="stylesheet" href="pomodoro.css">
<link rel="stylesheet" href="https://unpkg.com/papercss@latest/dist/paper.min.css"> <link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
<link rel="apple-touch-icon" sizes="180x180" href="asset/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="asset/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="asset/favicon-16x16.png">
<link rel="manifest" href="asset/site.webmanifest">
</head> </head>
<body> <body>
<div class="paper" id="container"> <div id="container">
<h4>Game Switch Timer</h4> <h3 class="title">Game Switch Timer</h3>
<div id="timer"> <div class="nes-container is-dark">
<p>
<h3 id="timer">
<label id="timerText"></label> <label id="timerText"></label>
</h3>
</p>
</div> </div>
<div id="controls"> <div id="controls">
<!-- <button class="btn-danger-outline" name="changegame" onclick="countdown(1500);"></button> --> <!-- <button class="btn-danger-outline" name="changegame" onclick="countdown(1500);"></button> -->
<button class="btn-success-outline" name="shortBreak" onclick="countdown(600);">10 Min</button> <button class="nes-btn is-primary" onclick="countdown(600);">10 Min</button>
<button class="btn-secondary-outline" name="longBreak" onclick="countdown(900);">15 Min</button> <button class="nes-btn is-warning" onclick="countdown(900);">15 Min</button>
<button class="btn-block btn-primary-outline" name="stop" onclick="stopTimer();">STOP</button> <br>
<button class="nes-btn is-error" onclick="stopTimer();">STOP</button>
</div> </div>
<audio id="alarm" src="asset/SEGA.mp3" preload="auto"></audio> <audio id="alarm" src="asset/SEGA.mp3" preload="auto"></audio>
@ -30,7 +32,9 @@
</div> </div>
<footer> <footer>
<a href="https://github.com/BinaryDigitDev/gametimer">Code</a> <a href="https://twitch.tv/KilobyteKeith"><i class="nes-icon twitch is-medium"></i></a>
<a href="https://github.com/BinaryDigitDev/gametimer"> <i class="nes-icon github is-medium"></i></a>
</footer> </footer>
<br>
</body> </body>
</html> </html>

View File

@ -1,8 +1,10 @@
html { @import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
background-image: url("asset/geometricbg.png");
background-color: black; * {
font-family: "Press Start 2P";
} }
#timer label { #timer label {
font-size: xx-large; font-size: xx-large;
} }