2 files changed, 98 insertions, 0 deletions
diff --git a/js/pomo/index.html b/js/pomo/index.html
new file mode 100644
index 0000000..3117b30
--- /dev/null
+++ b/js/pomo/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Pomodoro Timer</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+        #pomoCanvas {
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="pomoCanvas"></canvas>
+    <script src="pomo.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/pomo/pomo.js b/js/pomo/pomo.js
new file mode 100644
index 0000000..716d98b
--- /dev/null
+++ b/js/pomo/pomo.js
@@ -0,0 +1,77 @@
+const canvas = document.getElementById('pomoCanvas');
+const ctx = canvas.getContext('2d');
+
+const resizeCanvas = () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+};
+
+window.addEventListener('resize', resizeCanvas);
+resizeCanvas();
+
+Notification.requestPermission().then(function (permission) {
+    if (permission === 'granted') {
+        console.log('Notification permission granted.');
+    } else {
+        console.log('Unable to get permission to notify.');
+    }
+});
+
+let isRunning = false;
+let intervalId = null;
+// const duration = 10;
+const duration = 25 * 60; // 25 minutes
+let progress = 0;
+let isPaused = false;
+
+const draw = () => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    ctx.fillStyle = progress === duration ? '#17B169' : '#ff6347';
+    ctx.fillRect(0, 0, (progress / duration) * canvas.width, canvas.height);
+
+    ctx.fillStyle = 'black';
+    ctx.font = '30px Arial';
+    ctx.textAlign = 'center';
+    if (isPaused) {
+        ctx.fillText('Paused', canvas.width / 2, canvas.height / 2);
+    } else if (progress === duration) {
+        ctx.fillText('🍅', canvas.width / 2, canvas.height / 2);
+         new Notification('Pomo', {
+            body: 'Take a rest!',
+            icon: 'https://eli.li/_assets/_images/pomo-tomato.png'
+        });
+    } else {
+        const minutes = Math.floor(progress / 60);
+        const seconds = ('0' + (progress % 60)).slice(-2);
+        ctx.fillText(`${minutes}:${seconds}`, canvas.width / 2, canvas.height / 2);
+    }
+};
+
+const update = () => {
+    if (progress < duration) {
+        progress++;
+        draw();
+    } else {
+        clearInterval(intervalId);
+        isRunning = false;
+    }
+};
+
+window.addEventListener('keydown', (event) => {
+    if (event.code === 'Space' || event.code === 'Enter') {
+        if (isRunning) {
+            clearInterval(intervalId);
+            isRunning = false;
+            isPaused = true;
+        } else {
+            if (progress === duration) {
+                progress = 0;
+            }
+            isPaused = false;
+            intervalId = setInterval(update, 1000);
+            isRunning = true;
+        }
+        draw();
+    }
+});