-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
76 lines (76 loc) · 4.52 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
<!DOCTYPE html>
<html class="no-js" lang="en" data-selected-theme="blue">
<head>
<meta charset="utf-8" />
<title>Productivity Timer</title>
<meta name="description" content="Productivity Timer" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
</head>
<body>
<div class="page-wrapper" id="pageWrapper">
<header>
<div class="header-container slide-in-right">
<div class="theme-switcher">
<button data-theme="blue" aria-pressed="true"><span>Blue</span></button>
<button data-theme="red" aria-pressed="false"><span>Red</span></button>
<button data-theme="mono" aria-pressed="false"><span>Mono</span></button>
</div>
</div>
</header>
<div class="main-container">
<div class="timer-container" id="timerContainer">
<h1 class="timerDisplay" id="timerDisplay">25:00</h1>
<footer>
<div class="buttons-container">
<button id="focusButton" class="button button-focus" title="Start focus session">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M19.376 12.4158L8.77735 19.4816C8.54759 19.6348 8.23715 19.5727 8.08397 19.3429C8.02922 19.2608 8 19.1643 8 19.0656V4.93408C8 4.65794 8.22386 4.43408 8.5 4.43408C8.59871 4.43408 8.69522 4.4633 8.77735 4.51806L19.376 11.5838C19.6057 11.737 19.6678 12.0474 19.5146 12.2772C19.478 12.3321 19.4309 12.3792 19.376 12.4158Z"
></path>
</svg>
</button>
<button id="shortBreakButton" class="button button-break" title="Take a short break">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M2 12C2 6.47715 6.47715 2 12 2 15.0159 2 17.72 3.33509 19.5534 5.44648L22 3V9H16L18.1351 6.86543C16.6676 5.11383 14.4639 4 12 4 7.58172 4 4 7.58172 4 12 4 16.4183 7.58172 20 12 20 16.4183 20 20 16.4183 20 12H22C22 17.5228 17.5228 22 12 22 6.47715 22 2 17.5228 2 12ZM14.5 10V8.5H9.5V12.75H12.625C12.9702 12.75 13.25 13.0298 13.25 13.375 13.25 13.7202 12.9702 14 12.625 14H9.5V15.5H12.625C13.7986 15.5 14.75 14.5486 14.75 13.375 14.75 12.2014 13.7986 11.25 12.625 11.25H11V10H14.5Z"
></path>
</svg>
</button>
<button id="longBreakButton" class="button button-break" title="Take a long break">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12 2C6.47715 2 2 6.47715 2 12 2 17.5228 6.47715 22 12 22 17.5228 22 22 17.5228 22 12H20C20 16.4183 16.4183 20 12 20 7.58172 20 4 16.4183 4 12 4 7.58172 7.58172 4 12 4 14.7498 4 17.1755 5.38734 18.6155 7.50024L16 7.5V8.5H12V12.75H14.875C15.2202 12.75 15.5 13.0298 15.5 13.375 15.5 13.7202 15.2202 14 14.875 14H12V15.5H14.875C16.0486 15.5 17 14.5486 17 13.375 17 12.2014 16.0486 11.25 14.875 11.25H13.5V10H16.75V9.5H22V3.5H20L20.0001 5.99918C18.1757 3.57075 15.2713 2 12 2ZM8.5 8.5H10V15.5H8.5V8.5Z"
></path>
</svg>
</button>
<button id="timerReset" class="button button-stop" title="Reset the session">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M6 5H18C18.5523 5 19 5.44772 19 6V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18V6C5 5.44772 5.44772 5 6 5Z"
></path>
</svg>
</button>
</div>
</footer>
</div>
<audio id="timerSound" preload="auto">
<source src="audio/timer.ogg" type="audio/ogg" />
<source src="audio/timer.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<audio id="tickingSound" preload="auto">
<source src="audio/ticking.ogg" type="audio/ogg" />
<source src="audio/ticking.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>
<script type="module" src="script.js"></script>
</div>
</body>
</html>