Skip to content

Commit 62702dd

Browse files
code-nevescode-neves
authored
Add files via upload
1 parent b5fb940 commit 62702dd

21 files changed

+1104
-1
lines changed

‎README.md

-1
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-
# PoTi

‎assets/audio/breaknoti.mp3

73.2 KB
Binary file not shown.

‎assets/audio/focusnoti.mp3

92.9 KB
Binary file not shown.

‎assets/bg-overlay.png

2.07 MB
Loading

‎assets/favicon.ico

1.12 KB
Binary file not shown.

‎css/style.css

+238
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
border: none;
8+
font-family: 'Urbanist', sans-serif;
9+
-webkit-font-smoothing: antialiased;
10+
-moz-osx-font-smoothing: grayscale;
11+
text-rendering: optimizeLegibility;
12+
}
13+
14+
:root{
15+
font-size:10px;
16+
}
17+
html{
18+
height: 100dvh;
19+
}
20+
body{
21+
background-color: #000000;
22+
color: #ffffff;
23+
color-scheme: dark;
24+
mix-blend-mode: difference;
25+
26+
height: 100%;
27+
28+
transition: 1s background-color ease;
29+
}
30+
main{
31+
height: 100%;
32+
padding: 16px 0;
33+
34+
display: flex;
35+
justify-content: space-between;
36+
align-items: center;
37+
flex-direction: column;
38+
gap: 16px;
39+
40+
41+
background-image: url('../assets/bg-overlay.png');
42+
background-size: cover;
43+
background-repeat: no-repeat;
44+
background-position: center;
45+
46+
& h1{
47+
width: 120px;
48+
font-size: 5rem;
49+
line-height: 0.9;
50+
font-family: 'Poppins', sans-serif;
51+
font-weight: 500;
52+
}
53+
& h2{
54+
font-size: 2.4rem;
55+
font-weight: 400;
56+
}
57+
}
58+
header{
59+
width: 100%;
60+
padding: 0 8%;
61+
height: 54px;
62+
display: flex;
63+
justify-content: space-between;
64+
align-items: center;
65+
gap: 64px;
66+
67+
.top-but-cont{
68+
display: flex;
69+
gap: 16px;
70+
}
71+
}
72+
#timerDisplay{
73+
mix-blend-mode: hard-light;
74+
width: 100%;
75+
text-align: center;
76+
font-size: calc(24rem + 15vw);
77+
font-weight: 600;
78+
transition: 0.2s all ease;
79+
line-height: 0.8;
80+
}
81+
.but-container{
82+
display: flex;
83+
gap: 16px;
84+
height: 54px;
85+
overflow: visible;
86+
& button{
87+
line-height: 1;
88+
font-size: 2.8rem;
89+
padding: 8px 28px;
90+
background-color: rgba(240, 248, 255, 0);
91+
outline: solid 2px rgba(240, 248, 255, 0.2);
92+
border-radius: 999px;
93+
transition: all 0.15s ease-in-out;
94+
&:hover{
95+
background-color: rgba(240, 248, 255, 0.2);
96+
transform: translateY(-4px);
97+
transition: all 0.2s ease-in-out;
98+
}
99+
&:active{
100+
transform: scale(0.8);
101+
transition: all 0.1s ease-in-out;
102+
outline: solid 4px rgba(255, 255, 255, 0.4);
103+
}
104+
&:disabled{
105+
opacity: 0.6;
106+
pointer-events: none;
107+
transform: scale(0.9);
108+
transition: all 0.2s ease-in-out;
109+
}
110+
}
111+
}
112+
.focus-container, .break-container{
113+
display: flex;
114+
gap: 4px;
115+
align-items: center;
116+
justify-content: center;
117+
font-size: 2.4rem;
118+
& h1{
119+
font-size: 4.8rem;
120+
font-weight: 600;
121+
}
122+
& label{
123+
font-size: 2.4rem;
124+
font-weight: 400;
125+
}
126+
& input{
127+
font-size: 2.4rem;
128+
font-weight: 400;
129+
background-color: #ffffff1e;
130+
border-radius: 999px;
131+
max-width: 80px;
132+
padding:4px 16px;
133+
}
134+
}
135+
136+
137+
#updateDuration{
138+
font-size: 2.8rem;
139+
padding: 4px 12px;
140+
background-color: rgba(240, 248, 255, 0);
141+
border-radius: 999px;
142+
outline: solid 2px rgba(240, 248, 255, 0.2);
143+
transition: all 0.15s ease-in-out;
144+
&:hover{
145+
background-color: rgba(255, 255, 255, 0.218);
146+
transform: translateY(-4px);
147+
transition: all 0.2s ease-in-out;
148+
}
149+
&:active{
150+
transform: scale(0.8);
151+
transition: all 0.1s ease-in-out;
152+
outline: solid 3px rgba(255, 255, 255, 0.4);
153+
}
154+
}
155+
.focus-mode {
156+
background-color: #fff;
157+
mix-blend-mode: difference;
158+
transition: 1s background-color ease-out;
159+
}
160+
.focus-mode *{
161+
color: #ffffff !important;
162+
outline-color: rgb(255, 255, 255) !important;
163+
}
164+
165+
.break-mode *{
166+
color: #fff !important;
167+
outline-color: #fff !important;
168+
}
169+
.break-mode{
170+
mix-blend-mode: luminosity;
171+
background-color: #292929;
172+
transition: 1s background-color ease;
173+
}
174+
#statusMessage{
175+
font-size: 2.9rem;
176+
}
177+
/* add a media query for devices smaller than 1024 of width */
178+
@media (max-width: 1024px) {
179+
180+
main{
181+
& h1{
182+
font-size: 3.2rem;
183+
width: fit-content;
184+
}
185+
& h2{
186+
display: none;
187+
}
188+
}
189+
#timerDisplay{
190+
font-size: calc(6rem + 18vw);
191+
}
192+
header{
193+
padding: 0 9%;
194+
flex-direction: column;
195+
align-items: start ;
196+
height: auto;
197+
gap:16px;
198+
.top-but-cont{
199+
gap: 8px;
200+
width: 100%;
201+
flex-direction: column;
202+
justify-content: start;
203+
align-items: start;
204+
}
205+
}
206+
#updateDuration{
207+
font-size: 18px;
208+
}
209+
.but-container{
210+
gap: 8px;
211+
height: 40px;
212+
& button{
213+
font-size: 1.8rem;
214+
font-weight: bold;
215+
216+
padding:0px 28px;
217+
}
218+
}
219+
.focus-container, .break-container{
220+
221+
& h1{
222+
font-size: 1.6rem;
223+
}
224+
& input{
225+
font-size: 1.6rem;
226+
width: 40px;
227+
padding: 4px 8px;
228+
}
229+
& button{
230+
font-size: 1.6rem;
231+
width: 100%;
232+
}
233+
& label{
234+
font-size: 1.6rem;
235+
}
236+
}
237+
238+
}

‎dist/app.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// app.ts
2+
import { PomodoroTimer, PomodoroMode } from './timers/PomodoroTimer.js';
3+
class PomodoroApp {
4+
constructor() {
5+
this.pomodoro = new PomodoroTimer(25, 5, this.handleModeChange.bind(this));
6+
}
7+
handleModeChange(mode) {
8+
const statusMessage = document.getElementById('statusMessage');
9+
if (statusMessage) {
10+
switch (mode) {
11+
case PomodoroMode.Focus:
12+
console.log('1');
13+
statusMessage.textContent = 'Focus on the task';
14+
break;
15+
case PomodoroMode.Break:
16+
console.log('2');
17+
statusMessage.textContent = 'Take a break';
18+
break;
19+
case PomodoroMode.None:
20+
console.log('3');
21+
statusMessage.textContent = 'Click to start';
22+
break;
23+
}
24+
}
25+
}
26+
}
27+
const app = new PomodoroApp();

‎dist/index.js

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { PomodoroTimer, PomodoroMode } from './timers/PomodoroTimer.js';
2+
import { PomodoroUIManager } from './ui/UiManager.js';
3+
const uiManager = new PomodoroUIManager();
4+
// Declare HTML elements
5+
const workDurationInput = document.getElementById('workDurationInput');
6+
const breakDurationInput = document.getElementById('breakDurationInput');
7+
const updateDurationButton = document.getElementById('updateDuration');
8+
const startButton = document.getElementById('startButton');
9+
const stopButton = document.getElementById('stopButton');
10+
const resetButton = document.getElementById('resetButton');
11+
const timerDisplay = document.getElementById('timerDisplay');
12+
// Function to update the background color based on the mode
13+
function updateBackgroundColor(mode) {
14+
const bgBody = document.querySelector('body');
15+
if (bgBody) {
16+
bgBody.classList.remove('focus-mode', 'break-mode', 'transition-mode', 'none-mode');
17+
switch (mode) {
18+
case PomodoroMode.Focus:
19+
bgBody.classList.add('focus-mode');
20+
break;
21+
case PomodoroMode.Break:
22+
bgBody.classList.add('break-mode');
23+
break;
24+
case PomodoroMode.None:
25+
break;
26+
default:
27+
break;
28+
}
29+
}
30+
}
31+
const pomodoro = new PomodoroTimer(25, 5, (mode) => {
32+
updateBackgroundColor(mode);
33+
uiManager.handleModeChange(mode);
34+
});
35+
// Function to update work duration
36+
function updateDuration() {
37+
if (!pomodoro.isTimerActive) {
38+
const newWorkDuration = parseInt(workDurationInput.value, 10);
39+
const newBreakDuration = parseInt(breakDurationInput.value, 10);
40+
if (!isNaN(newWorkDuration) && !isNaN(newBreakDuration)) {
41+
pomodoro.updateDuration(newWorkDuration, newBreakDuration);
42+
console.log('Updated work duration to', newWorkDuration);
43+
console.log('Updated break duration to', newBreakDuration);
44+
}
45+
}
46+
}
47+
// Add event listener to the "Update" button for updating durations
48+
if (updateDurationButton) {
49+
updateDurationButton.addEventListener('click', updateDuration);
50+
}
51+
// Add event listeners to buttons
52+
if (startButton) {
53+
startButton.addEventListener('click', () => {
54+
pomodoro.start();
55+
updateBackgroundColor(pomodoro.actualMode);
56+
console.log('Timer started');
57+
console.log('Start button found');
58+
console.log(pomodoro.isTimerActive);
59+
const startButton = document.getElementById('startButton');
60+
startButton.disabled = true; // Disable the button
61+
console.log('Disabled start button');
62+
});
63+
}
64+
if (stopButton) {
65+
stopButton.addEventListener('click', () => {
66+
pomodoro.stop();
67+
updateBackgroundColor(PomodoroMode.None);
68+
const startButton = document.getElementById('startButton');
69+
startButton.disabled = false;
70+
});
71+
}
72+
if (resetButton) {
73+
resetButton.addEventListener('click', () => {
74+
pomodoro.reset();
75+
updateBackgroundColor(PomodoroMode.None);
76+
const startButton = document.getElementById('startButton');
77+
startButton.disabled = false;
78+
});
79+
}

0 commit comments

Comments
 (0)