From 7d87c9f33c5c2307f06b47a1ef007c55a7e4b351 Mon Sep 17 00:00:00 2001 From: Sitiam <84650698+Sitiam@users.noreply.github.com> Date: Mon, 4 Apr 2022 20:53:08 +1000 Subject: [PATCH] Add files via upload --- icons/settings.png | Bin 0 -> 15615 bytes index.html | 47 +++++++++++++++++ scripts/main.js | 83 ++++++++++++++++++++++++++++++ styling/main.css | 125 +++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 255 insertions(+) create mode 100644 icons/settings.png create mode 100644 index.html create mode 100644 scripts/main.js create mode 100644 styling/main.css diff --git a/icons/settings.png b/icons/settings.png new file mode 100644 index 0000000000000000000000000000000000000000..9284a08fe0d872104750dd42235f8f72d1035986 GIT binary patch literal 15615 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 awgs9T=~3_xFHWNMG|)YNra}iF^?v~O2nsF$ literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..bb9e442 --- /dev/null +++ b/index.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <title>Flowmo.io</title> + <link rel="stylesheet" href="styling/main.css"> + </head> + + <body> + <nav> + <h1 id="title">Flowmo</h1> + <ul> + <li><button id="switch_to_pomodoro">Switch to Pomodoro</button></li> + </ul> + + <hr style="margin:0;padding:0;background-color:black;"> + </nav> + + <div id="timer_container_container"> + <aside id="status_span">Time to focus!</aside> + <div id="timer_container"> + <div id="timer">00:00</div> + </div> + <button id="play_stop_btn"><span id="play_or_pause_span">Start</span></button> + </div> + + <article id="timer_description"> + <h1>An Online Flowtime Timer — Right in Your Browser</h1> + <br> + <h2>What is Flowtime?</h2> + <p>Flowtime is a time management technique where a stopwatch is used to track the amount of time spent working. You work on a task for as long as you need to, stopping the timer and taking a break as soon as you feel as if you start to lose concentration or feel fatigued.</p> + <p>Break times generally last one-fifth of your working time. For example, if you work for 50 minutes, you should take a 10 minute break.</p> + <br> + <h2>Why not Pomodoro?</h2> + <p>One of the disadvantages of the pomodoro technique is that the timer consistently interrupts you, preventing you from fully immersing yourself into a task.</p> + <p>Flowtime, on the other hand, does not interrupt you during a focus session, allowing you to fully concentrate on the task at hand.</p> + <br> + <h2>About this Timer</h2> + <p>This timer was created as a personal project to help boost my productivity. If you found this timer helpful, I'd highly appreciate your support. You're welcome to <a href="#">donate here</a> or <a href="#">share</a> this site.</p> + </article> + + <footer> + ©Flowmo 2022. All Rights Reserved. + </footer> + + <script src="scripts/main.js"></script> + </body> +</html> \ No newline at end of file diff --git a/scripts/main.js b/scripts/main.js new file mode 100644 index 0000000..cb60d33 --- /dev/null +++ b/scripts/main.js @@ -0,0 +1,83 @@ +function timeToString(time) { + let diffInHrs = time / 3600000; + let hh = Math.floor(diffInHrs); + + let diffInMin = (diffInHrs - hh) * 60 + 60 * hh; + let mm = Math.floor(diffInMin); + + let diffInSec = (diffInMin - mm) * 60; + let ss = Math.floor(diffInSec); + + let formattedMM = mm.toString().padStart(2, "0"); + let formattedSS = ss.toString().padStart(2, "0"); + + return `${formattedMM}:${formattedSS}`; +} + +let startTime; +let elapsedTime; +let focusTime; + +function start() { + startTime = Date.now(); + myInterval = setInterval(function printTime() { + elapsedTime = Date.now() - startTime; + document.getElementById("timer").innerHTML = timeToString(elapsedTime); + focusTime = elapsedTime / 5; + }, 100); + + play_or_pause_span.textContent = 'Stop'; + status_span.textContent = 'Time to focus!'; +} + +function stop() { + clearInterval(myInterval); + document.getElementById("timer").innerHTML = "00:00"; + elapsedTime = 0; + + play_or_pause_span.textContent = 'Start Break'; + status_span.textContent = "Let's take a break!"; +} + +function startRest() { + // Countdown Timer of 1/5th of study time. + startTime = Date.now() + focusTime; + myInterval = setInterval(function printTime() { + elapsedTime = startTime - Date.now(); + if (elapsedTime <= 0) { + stopRest(); + } + document.getElementById("timer").innerHTML = timeToString(elapsedTime); + }, 100); + play_or_pause_span.textContent = 'End Break'; +} + +function stopRest() { + clearInterval(myInterval); + document.getElementById("timer").innerHTML = "00:00"; + elapsedTime = 0; + + play_or_pause_span.textContent = 'Start'; + status_span.textContent = 'Time to focus!'; + last_cmd = 0; +} + +function startStopToggle() { + if (last_cmd == 0) { + start(); + last_cmd = 1; + } else if (last_cmd == 1) { + stop(); + document.getElementById("timer").innerHTML = timeToString(focusTime); + last_cmd = 2; + } else if (last_cmd == 2) { + startRest(); + last_cmd = 3; + } else if (last_cmd == 3) { + stopRest(); + last_cmd = 0; + } +} + +let last_cmd = 0; +play_stop_btn.onclick = startStopToggle; \ No newline at end of file diff --git a/styling/main.css b/styling/main.css new file mode 100644 index 0000000..ffb8ef4 --- /dev/null +++ b/styling/main.css @@ -0,0 +1,125 @@ +@import url('https://fonts.googleapis.com/css2?family=Cabin&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Cabin&family=M+PLUS+Rounded+1c:wght@700;800&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Cabin&family=M+PLUS+Rounded+1c:wght@700;800&family=Varela+Round&display=swap'); + +* { font-family: 'Varela Round', 'M PLUS Rounded 1c', Cabin, sans-serif; box-sizing: border-box; color: white;} + +body { + background-color: black; +} + +button { + cursor: pointer; +} + +button:hover { + background-color: rgba(255,255,255, 0.15)} + +nav { + position: absolute; + width: 99% +} + +nav > ul { + list-style: none; + padding: 0; + display: inline-block; + float: right; + margin: 5px 0; +} + +#title { + display: inline-block; + margin: 8px 10px; + font-size: 30px; +} + +nav > ul > li { + display: inline-block; + margin: 0 5px; +} + +nav > ul > li > button { + height: 40px; + font-size: 16px; + border-radius: 6px; + border: 1px solid gray; + background-color: black; + padding: 0px 10px; + color: white; +} + +#switch_to_pomodoro {} + +#timer_container_container { + text-align: center; + height: 100vh; + padding: 26vh 0 0vh 0; +} + +#status_span { + margin: 30px; + color: rgb(230,230,230); + font-size: 18px; +} + +#timer_container { + text-align: center; +} + +#timer { + font-size: 150px; + vertical-align: center; + display: inline-block; + border-radius: 50px; + background-color: rgba(255,255,255, 0.12); + padding: 20px 50px; + border: 3px solid gray; + font-weight: bold; +} + +#play_stop_btn { + hortizontal-align: center; + background-color: black; + border-radius: 15px; + border: 1px solid gray; + display: inline-block; + margin-top: 50px; + height: 50px; + width: 170px; +} + +#play_stop_btn:hover { + background-color: rgba(255,255,255, 0.15) +} + +#play_or_pause_span { + font-size: 25px; +} + +h1 { font-size: 30px; } + +#timer_description { + text-align: center; + background-color: rgba(255,255,255, 0.12); + width: 60%; + border-radius: 30px; + margin: auto; + padding: 10px 50px; +} + +#timer_description > p { + line-height: 200%; + font-size: 110%; +} + +#timer_description > ol { + list-style-position: inside; +} + +footer { + margin-top: 30px; + text-align: center; + font-size: 80%; + margin-bottom: 20px; +} \ No newline at end of file