-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
70 lines (62 loc) · 3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="image" property="og:image" content="https://user-images.githubusercontent.com/70577783/150546017-788e6f61-ad36-44fa-9d96-d0e37eb9611e.png" />
<meta name="description" property="og:description" content="Pomodoro is an effective way to get this done. This website is built to full fill the same requirement with an option of setting background colour of your choice to choosing a custom time" />
<meta name="author" content="Akshitha Reddy" />
<title>Pomodoro</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="modal-container">
<div id="modal">
<button id="close">×</button>
<h3>Time (minutes)</h3>
<p>Enter time below to start a session or to take a break</p>
<div class="input-container flex">
<label for="pomodoro" class="input-label">
<input type="number" placeholder="30" name="pomodoro" id="setPomodoroTime">
</label>
</div>
<p>Pick a color</p>
<ul>
<li><button class="color color8" id="color8"></button></li>
<li><button class="color color1" id="color1"></button></li>
<li><button class="color color2" id="color2"></button></li>
<li><button class="color color3" id="color3"></button></li>
<li><button class="color color4" id="color4"></button></li>
<li><button class="color color5" id="color5"></button></li>
<li><button class="color color6" id="color6"></button></li>
<li><button class="color color7" id="color7"></button></li>
</ul>
<button type="submit" id="submit">Ok</button>
</div>
</div>
</div>
<div class="container">
<div class="mode-btns flex div1" id="mode-btns">
<button class="btn mode-btn" id="pomodoro">Pomodoro</button>
<button class="btn mode-btn" id="shortBreak">Short break</button>
<button class="btn mode-btn" id="longBreak">Long break</button>
</div>
<div class="circle2"></div>
<div class="time-container">
<div class="circle flex">
<h1 class="time pomodoroTime"></h1>
</div>
<div class="circle1"></div>
</div>
<div class="timer-phase">
<button class="phase" id="pause">Pause</button>
<button class="phase" id="start">Start</button>
<button class="phase" id="reset" onClick="history.go(0)">Reset</button></div>
<div class="settings">
<button id="settings"><img src="settings-4-24.png" alt="settings"></button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>