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