changed files

2025-06-20 17:02:25 +00:00 · 2024-10-14 11:48:35 -04:00 · 2024-10-14 11:48:35 -04:00 · 997e70841e
commit 997e70841e
15 changed files with 170 additions and 0 deletions
--- a/LICENSE.txt
+++ b/LICENSE.txt
@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Kyle Lewis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@ -0,0 +1,16 @@
+# Pomodoro Countdown Timer
+
+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/.
--- a/asset/alarm-clock-short.mp3
+++ b/asset/alarm-clock-short.mp3
--- a/asset/alarmclock.mp3
+++ b/asset/alarmclock.mp3
--- a/asset/android-chrome-192x192.png
+++ b/asset/android-chrome-192x192.png
--- a/asset/android-chrome-512x512.png
+++ b/asset/android-chrome-512x512.png
--- a/asset/apple-touch-icon.png
+++ b/asset/apple-touch-icon.png
--- a/asset/favicon-16x16.png
+++ b/asset/favicon-16x16.png
--- a/asset/favicon-32x32.png
+++ b/asset/favicon-32x32.png
--- a/asset/favicon.ico
+++ b/asset/favicon.ico
--- a/asset/geometricbg.png
+++ b/asset/geometricbg.png
--- a/asset/site.webmanifest
+++ b/asset/site.webmanifest
@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
--- a/index.html
+++ b/index.html
@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="dark">
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <link rel="stylesheet" href="pomodoro.css">
+        <link rel="stylesheet" href="https://unpkg.com/papercss@latest/dist/paper.min.css">
+        <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>
+    <body>
+        <div class="paper" id="container">
+            <h4>Game Switch Timer</h4>
+            <div id="timer">
+                <label id="timerText"></label>
+            </div>
+
+            <div id="controls">
+                <!-- <button class="btn-danger-outline" name="changegame" onclick="countdown(1500);"></button>
+                <button class="btn-success-outline" name="shortBreak" onclick="countdown(300);">Short Break</button> -->
+                <button class="btn-secondary-outline" name="longBreak" onclick="countdown(600);">Start Timer</button>
+                <button class="btn-block btn-primary-outline" name="stop" onclick="stopTimer();">STOP</button>
+            </div>
+
+            <audio id="alarm" src="asset/alarm-clock-short.mp3" preload="auto"></audio>
+            <script src="pomodoro.js"></script>
+
+        </div>
+
+    <footer>
+        <a href="https://github.com/BinaryDigitDev/game-timer">Code</a>
+    </footer>
+    </body>
+</html>
--- a/pomodoro.css
+++ b/pomodoro.css
@ -0,0 +1,32 @@
+html {
+    background-image: url("asset/geometricbg.png");
+    background-color: black;
+}
+
+#timer label {
+    font-size: xx-large;
+}
+
+#container button {
+    margin: 8px 0px;
+}
+
+#container {
+    position: fixed;
+    left: 50%;
+    text-align: center;
+    padding: 10px;
+    transform: translate(-50%, 0%);
+}
+
+#controls {
+    margin: 10px;
+}
+
+footer {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+}
--- a/pomodoro.js
+++ b/pomodoro.js
@ -0,0 +1,64 @@
+/*jslint esversion: 6 */
+let timerEventId;
+
+function publishTimer(timer) {
+    "use strict";
+
+    const timerElement = document.getElementById("timerText");
+    timerElement.innerHTML = timer;
+    document.title = "[" + timer + "] Pomodoro Timer";
+}
+
+function stopTimer() {
+    const alarmElement = document.getElementById("alarm");
+
+    clearInterval(timerEventId);
+    alarmElement.pause();
+    publishTimer('00:00');
+};
+
+function countdown(interval) {
+    "use strict";
+
+    const alarmElement = document.getElementById("alarm");
+
+    let endTime;
+
+    function formatTimeSegment(segment) {
+        if (segment.toString().length < 2) {
+            segment = "0" + segment;
+        }
+
+        return segment;
+    };
+
+    function setTimer() {
+        let formattedTime, timeLeft, hours, minutes, seconds;
+        timeLeft = new Date(endTime - Date.now());
+
+        if (timeLeft.getTime() < 1000) {
+            formattedTime = "00:00";
+            publishTimer(formattedTime);
+            clearInterval(timerEventId);
+            alarmElement.currentTime = 0;
+            alarmElement.play();
+        } else {
+            hours = timeLeft.getUTCHours();
+            minutes = formatTimeSegment(timeLeft.getUTCMinutes());
+            seconds = formatTimeSegment(timeLeft.getUTCSeconds());
+            formattedTime = (hours ? hours + ":" + minutes : minutes) + ":" + seconds;
+            publishTimer(formattedTime);
+        }
+    };
+
+    clearInterval(timerEventId);
+    alarmElement.pause();
+    endTime = Date.now() + (1000 * interval) + 1000;
+    timerEventId = setInterval(setTimer, 100);
+};
+
+window.onload = function () {
+    "use strict";
+
+    stopTimer();
+};
				`@ -0,0 +1 @@`
				`{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}`