Add files via upload

zitianqin · Apr 4, 2022 · 7d87c9f · 7d87c9f
commit 7d87c9f
Show file tree

Hide file tree

Showing 4 changed files with 255 additions and 0 deletions.
diff --git a/icons/settings.png b/icons/settings.png
diff --git a/index.html 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>
diff --git a/scripts/main.js 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;
diff --git a/styling/main.css 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;
+}