-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
120 lines (120 loc) · 9.56 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=yes">
<meta name="description" content="PomoTimer, o site perfeito para te auxiliar na produtividade diária.">
<link rel="shortcut icon" href="assets/icon/favicon.ico" type="image/x-icon">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<meta name="theme-color" content="#F0F4EF">
<meta name="apple-mobile-web-app-status-bar-style" content="#F0F4EF">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<title>PomoTimer</title>
</head>
<body>
<main>
<section>
<head>
<nav>
<ul class="nav-bar">
<a href="#home"><div class="logo-container"><img id="logo" src="assets/svg/site-logo.svg" alt="site logo"></div></a>
<input type="checkbox" id="check"><a href="#home" style="text-decoration: none;"><h1 class="site-name">PomoTimer</h1></a>
<span class="menu">
<label for="check" class="close-menu"><img src="assets/svg/close-menu.svg" alt="close menu button" width="32px"></label>
<ul>
<li><a class="nav-button" href="pages/history.html"><img class="nav-image" src="../assets/svg/history.svg" alt="history"><h1 class="nav-label">Histórico</h1></a></li>
<li><a class="nav-button" href="#about"><img class="nav-image" src="../assets/svg/help.svg" alt="help"><h1 class="nav-label">Sobre</h1></a></li>
<span class="desktop-login">
<li><a class="nav-button" href="pages/login.html"><img class="nav-image" src="../assets/svg/user.svg" alt="account"><h1 class="nav-label">Conta</h1></a></li>
</span>
</ul>
</span>
<label for="check" class="mobile-login"><a href="pages/login.html"><img class="user-logo" src="assets/svg/user.svg" alt="login" width="32px"></a></label>
<label for="check" class="open-menu"><img src="assets/svg/open-menu.svg" alt="open menu button" width="32px"></label>
</ul>
</nav>
</head>
</section>
<section id="home">
<div class="timer-container">
<div class="circle-container">
<div class="app-counter-box">
<p>
<input class="timer-select minutes" type="text" placeholder="25" minlength="2" maxlength="2">:<input class="timer-select seconds" type="text" placeholder="00" minlength="2" maxlength="2">
</p>
</div>
<div class="control-buttons">
<button id="start-button" class="timer-button">Iniciar</button>
</div>
</div>
<div class="pause-container">
<button id="short-pause" class="timer-button pause-button">Pausa curta</button>
<button id="long-pause" class="timer-button pause-button">Pausa longa</button>
</div>
<div class="todo-list-container">
<h2>Tarefas</h2>
<div class="user-item-input">
<input type="text" placeholder="Título..." id='todo-input'>
<button onclick="newElement()" class="todo-add add-button">Adicionar</button>
</div>
</div>
<ul id="todo-list">
<li class="list-item checked" style="display: none;"></li>
</ul>
</div>
</section>
<section id="about">
<div class="about-container">
<h1>Sobre a técnica Pomodoro</h1>
<hr>
<div class="faq">
<button type="button" class="collapsible">Como funciona?<img class="expand" src="assets/svg/expand-down.svg" alt="expand"></button>
<div class="content">
<p>
A técnica Pomodoro é um método de gestão de tempo projetada para melhorar a produtividade e a concentração ao dividir o trabalho em períodos cronometrados, geralmente de 25 minutos, separados por breves pausas.<br>
<br><mark class="red">1. Defina uma tarefa:</mark> Escolha uma tarefa específica que você deseja realizar.<br>
<br><mark class="red">2. Defina o cronômetro:</mark> Configure o <mark class="red">PomoTimer</mark> (geralmente para 25 minutos, conhecido como um "pomodoro"). Esse é o período de tempo dedicado à realização da tarefa.<br>
<br><mark class="red">3. Trabalhe na tarefa:</mark> Concentre-se na tarefa escolhida sem interrupções até que o cronômetro toque.<br>
<br><mark class="red">4. Faça uma pausa curta:</mark> Após completar um pomodoro de 25 minutos, faça uma pausa curta de 5 minutos. Isso ajuda a descansar a mente e a recarregar a energia.<br>
<br><mark class="red">5. Repita o ciclo:</mark> Após cada pausa curta, reinicie o cronômetro para outro pomodoro de 25 minutos e continue trabalhando na tarefa. A cada quatro pomodoros (ou seja, após cerca de duas horas), faça uma pausa mais longa de 15 a 30 minutos.<br>
</p>
</div>
<button class="collapsible">Quem a desenvolveu?<img class="expand" src="assets/svg/expand-down.svg" alt="expand"></button>
<div class="content">
<p>A técnica Pomodoro foi desenvolvida por <mark class="red">Francesco Cirillo</mark> no final da década de 1980. Francesco Cirillo era um estudante universitário na época e criou essa técnica de gestão de tempo enquanto buscava maneiras de melhorar seu próprio foco e produtividade nos estudos.</p>
</div>
<button class="collapsible">Quais são os benefícios?<img class="expand" src="assets/svg/expand-down.svg" alt="expand"></button>
<div class="content">
<p>
A técnica Pomodoro oferece vários benefícios que podem ajudar na gestão do tempo e no aumento da produtividade. Aqui estão alguns dos principais benefícios:<br>
<br><mark class="red">1. Melhora do foco:</mark> A técnica Pomodoro ajuda a melhorar o foco ao dividir o trabalho em períodos de tempo definidos (geralmente 25 minutos). Durante esses intervalos, você se compromete a trabalhar exclusivamente na tarefa escolhida, minimizando distrações.<br>
<br><mark class="red">2. Aumento da produtividade:</mark> Ao trabalhar de maneira concentrada em intervalos curtos e cronometrados, você tende a completar tarefas de forma mais eficiente. A pressão suave do cronômetro incentiva a manutenção do ritmo e a realização de pequenos objetivos de cada vez.<br>
<br><mark class="red">3. Gestão de tempo:</mark> A técnica Pomodoro ajuda na gestão do tempo ao dividir o trabalho em segmentos gerenciáveis. Isso permite que você priorize tarefas, estime melhor o tempo necessário para concluí-las e planeje intervalos de descanso para manter a energia ao longo do dia.<br>
<br><mark class="red">4. Redução da procrastinação:</mark> A estrutura da técnica Pomodoro encoraja a ação imediata sobre as tarefas, pois você se compromete a trabalhar em pequenos blocos de tempo. Isso reduz a tendência de procrastinar, já que você está focado em completar uma única tarefa durante cada pomodoro.<br>
<br><mark class="red">5. Melhora na qualidade de vida:</mark> Com intervalos regulares de descanso (geralmente 5 minutos após cada pomodoro e pausas mais longas após quatro pomodoros), a técnica Pomodoro promove uma abordagem sustentável ao trabalho. Esses intervalos permitem que você descanse, recupere a energia e evite o esgotamento mental.<br>
</p>
</div>
<button class="collapsible">Por que o símbolo é um tomate?<img class="expand" src="assets/svg/expand-down.svg" alt="expand"></button>
<div class="content">
<p>O nome "Pomodoro" vem da palavra italiana para "tomate", pois Francesco Cirillo, criador da técnica, utilizava um timer de cozinha em formato de tomate para controlar seus períodos de trabalho, o tomate então se tornou o símbolo da técnica.</p>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="credits-container">
<div class="logo-bottom">
<img class="site-logo-bottom" src="assets/svg/site-logo.svg" alt="site-logo">
<h1 class="site-name-bottom">PomoTimer</h1>
</div>
<h2>Programe. Foque. Repita.</h2>
<p class="footer-copy">© 2024 Arthur Dantas. Todos os direitos reservados.</p>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>