-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
94 lines (76 loc) · 4.22 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="PomoJS" />
<meta property="og:url" content="https://pomojs.ignisdev.xyz/" />
<meta property="og:description" content="PomoJS is a simple pomodoro timer written in vanilla JavaScript. It is designed to be as minimal as possible, while still being functional." />
<link rel="icon" type="image/png" href="images/icon-black.png" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/png" href="images/icon-white.png" media="(prefers-color-scheme: dark)">
<meta name="title" content="PomoJS">
<meta name="author" content="Ignis621">
<meta name="keywords" content="Pomodoro, Minimal, Simple, Minimalistic, No-fuss">
<meta name="darkreader-lock">
<meta name="theme-color" content="#e2e2f3" />
<meta name="description" content="PomoJS is a simple pomodoro timer written in JavaScript. It is designed to be as minimal as possible, while still being functional.">
<link rel="stylesheet" href="style.css" type="text/css"/>
<title>PomoJS</title>
</head>
<body class="idle">
<div class="section" id="pomodoro-container">
<div id="pomodoro">
<div id="js-warning" class="minisection warning">
<p>This site uses JavaScript to run the timer. If you have JavaScript disabled, the timer will not work. <a href="https://enable-javascript.com/">Learn how to enable JS</a></p>
</div>
<div id="state" class="minisection">
<div id="status">Let's get some work done</div>
<div id="timer">PomoJS</div>
</div>
<form id="intervals" class="minisection">
<label for="work-length">Work Interval Length:</label>
<input type="number" id="work-length" value="25">
<br>
<label for="short-break-length">Short Break Length:</label>
<input type="number" id="short-break-length" value="5">
<br>
<label for="long-break-length">Long Break Length:</label>
<input type="number" id="long-break-length" value="15">
<br>
<label for="num-short-breaks">Short Breaks Until Long Break:</label>
<input type="number" id="num-short-breaks" value="4">
</form>
<div id="controls" class="minisection">
<button id="start-btn">Start</button>
<button id="pause-btn" class="disabled">Pause</button>
<button id="stop-btn"class="disabled">Stop</button>
</div>
</div>
</div>
<div class="section" id="about">
<div id="about-text">
<h1>The Pomodoro Technique</h1>
<p>
The Pomodoro technique is a time-management strategy that helps you work more efficiently by breaking down your work into focused 25-minute sessions, each followed by short breaks. These consecutive work sessions are then capped off with a longer break to help rejuvenate your energy levels. It's designed to help you work with better focus, avoid distractions, and maintain a sustainable pace throughout the day.
</p>
<p>Whether you're studying for an exam, working on a big project, or simply trying to get more done during your day, the Pomodoro technique is a proven method for staying on track and achieving your goals.</p>
<h1>About the project</h1>
<p>
PomoJS is a simple pomodoro timer written in vanilla JavaScript. It is designed to be as minimal as possible, while still being functional. It's also designed to be as lightweight as possible, so it can be used on any device.
</p>
<p>
PomoJS is open source, and can be found on <a href="https://github.com/Ignis621/PomoJS">GitHub</a>.
</p>
<p>This site uses:</p>
<ul>
<li>The <a href="https://github.com/catppuccin/catppuccin">Catppuccin</a> (Mocha) color palette</li>
<li><a href="https://m2.material.io/design/sound/sound-resources.html">Material Product Sounds</a> by Google</li>
<li>Favicon from <a href="https://feathericons.com/">Feather Icons</a></li>
</ul>
</div>
</div>
<script src="pomodoro.js"></script>
<script src="warnings.js"></script>
</body>
</html>