-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (122 loc) · 7.23 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pomodoro Clock</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/circle.css" type="text/css">
<link rel="stylesheet" href="css/styles.css" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:wght@600&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="assets/images/tomato.ico" type="image/ico">
</head>
<body>
<section class="pomodoroLength py-3">
<div class="col-11 text-center justify-content-center mx-auto">
<div class=" mx-auto col-10 m-2 py-2">
<div class="row justify-content-center text-center">
<div class="col-md-6 col-lg-3">
<p class="font-weight-bold">Session Length</p>
<i class="fas fa-arrow-up arrow fa-2x"></i>
<input disabled type="text" name="input" class="inputSessionTime text-center p-2 m-0 w-25 border-0" value="25" data-localstorage="sessionLength">
<i class="fas fa-arrow-down arrow fa-2x"></i>
</div>
<div class="col-md-6 col-lg-3">
<p class="font-weight-bold">Short Break Length</p>
<i class="fas fa-arrow-up arrow fa-2x"></i>
<input disabled type="text" name="input" class="shortBreakTime text-center p-2 m-0 w-25 border-0" value="5" data-localstorage="shortBreakLength">
<i class="fas fa-arrow-down arrow fa-2x"></i>
</div>
<div class="col-md-6 col-lg-3">
<p class="font-weight-bold">Long Break Length</p>
<i class="fas fa-arrow-up arrow fa-2x"></i>
<input disabled type="text" name="input" class="longBreakTime text-center p-2 m-0 w-25 border-0" value="10" data-localstorage="longBreakLength">
<i class="fas fa-arrow-down arrow fa-2x"></i>
</div>
<div class="col-md-6 col-lg-3 mb-sm-4">
<p class="font-weight-bold">Preferences</p>
<i class="fa fa-user-cog fa-2x" aria-hidden="true" data-toggle="modal" data-target="#modalPreferences"></i>
</div>
</div>
</div>
</div>
</section>
<section class="pomodoroSession mt-5 mt-sm-0">
<div class="col-11 mx-auto">
<div class="row text-center justify-content-center">
<div class="c100 bigger">
<div class="tomato"></div>
<!-- <span> -->
<div class="clockWrapper">
<div class="clock">
<div class="wrap">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<div class="dot"></div>
</div>
</div>
</div>
<!-- </span>-->
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
<div class="timerWrapper text-center justify-content-center">
<span class="timerLabel">Session</span>
<div class="timerLeft display-4">01:00</div>
</div>
</div>
</section>
<section class="pomodoroControls">
<div class="timerControls text-center">
<i class="fas fa-play timerControl fa-2x m-3"></i>
<i class="fas fa-pause timerControl fa-2x m-3"></i>
<i class="fas fa-sync timerControl fa-2x m-3"></i>
</div>
</section>
</div>
<!-- Modal -->
<div class="modal fade" id="modalPreferences" tabindex="-1" role="dialog" aria-labelledby="modalPreferences" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Additional Preferences</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body preferences">
<div class="custom-control custom-checkbox" style="line-height: 1.6em;">
<input type="checkbox" class="custom-control-input" id="enableNotifications">
<label class="custom-control-label" for="enableNotifications">Enable notifications</label>
</div>
<div class="custom-control custom-checkbox" style="line-height: 1.6em;">
<input type="checkbox" class="custom-control-input" id="autoStartSession">
<label class="custom-control-label" for="autoStartSession">Automatically start sessions</label>
</div>
<div class="custom-control custom-checkbox" style="line-height: 1.6em;">
<input type="checkbox" class="custom-control-input" id="autoStartBreaks">
<label class="custom-control-label" for="autoStartBreaks">Automatically start breaks</label>
</div>
<div class="custom-control custom-checkbox" style="line-height: 1.6em;">
Sound volume:
<br>
<input type="range" min="1" max="100" value="100" id="audioVolume">
</div>
</div>
</div>
</div>
</div>
<!-- override some js functions so they don't stop working if tab on browser become inactive -->
<script src="js/HackTimer.min.js"></script>
<!-- necessary for bootstrap to work -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/c2a6a7e66f.js" crossorigin="anonymous"></script>
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>