This repository has been archived by the owner on May 2, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 81
/
Copy pathcollect.html
143 lines (128 loc) · 4.37 KB
/
collect.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
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- Bootstrap -->
<link
rel="stylesheet"
type="text/css"
href="bootstrap/css/bootstrap.min.css"
/>
<!-- FontAwesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"
/>
<!-- TC-stylesheet -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="icon" href="./img/clock64.png" />
<title>TC - Collect</title>
</head>
<body>
<div class="d-flex flex-column align-items-center px-2 tc-container">
<!-- Top row (Menu button, Page name, Info button) -->
<div class="d-flex justify-content-between w-100 tc-blue my-5">
<section>
<!-- Navigation/burger menu starts-->
<div class="topnav">
<a href="./menu.html" class="active">...</a>
<a
href="menu.html"
href="javascript:void(0);"
class="icon tc-blue"
onclick="toggleNavLinks()"
>
<i class="fa fa-bars"></i>
</a>
</div>
<!-- Navigation/burger menu ends -->
</section>
<!-- Collect title in the centre of page -->
<h5 class="text-uppercase tc-blue align-self-center">Collect</h5>
<!-- Button for ellipsis (still needs to be activated) -->
<button type="button" class="tc-nav-btn tc-blue">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
<!-- save project modal -->
<div class="popup-container bg-white" id="save-project">
<a href="collect.html" class="tc-exit-btn mr-auto pl-3">
<i class="fas fa-arrow-left tc-blue"></i>
</a>
<h4 class="tc-blue font-weight-bold">Save to project</h4>
<div class="circle">
<div class="inner-circle d-flex justify-content-center">
<h5 class="add-time tc-blue align-self-center">01:10</h5>
</div>
</div>
<p class="date-modal tc-blue"></p>
<div class="custom-select-wrapper d-flex flex-column">
<div class="d-flex custom-select-box pr-3">
<span class="placeholder">Select Project</span>
<div class="chevron-arrow"></div>
</div>
<div class="options-list">
<div class="custom-option">101 - Awesome GP</div>
<div class="custom-option">102 - Project 2</div>
<div class="custom-option">103 - Delivery</div>
<div class="custom-option">104 - Food Blog</div>
</div>
</div>
<div class="d-flex">
<div class="btn save-btn text-white btn-padding faded-blue-bg">
SAVE
</div>
<div class="btn edit-btn tc-blue btn-padding">EDIT</div>
</div>
</div>
<!-- Date and time-->
<p class="date"></p>
<p class="time tc-blue"></p>
<!-- Timer -->
<div class="w-100 text-center my-5">
<p>Total Time:</p>
<p id="totalTime">00:00:00</p>
<button
type="button"
id="startBtn"
class="tc-circle-btn tc-grey rounded-circle"
data-toggle="start"
>
Start
</button>
<!-- <button type="button" id="breakBtn" class="breakBtn tc-circle-btn tc-grey rounded-circle">Break</button> -->
<div class="my-5 d-flex w-100 justify-content-between">
<button
type="button"
id="stopBtn"
class="tc-circle-btn tc-grey rounded-circle"
>
Stop
</button>
<div id="tm">
<p id="workingStage" class="tc-red">Let's Get Started</p>
<h2 id="timer" class="h1 tc-blue align-self-center">00:00:00</h2>
</div>
<button
type="button"
id="resetBtn"
class="tc-circle-btn tc-grey rounded-circle"
>
Reset
</button>
</div>
<button
type="button"
class="tc-circle-btn tc-grey tc-faded-btn rounded-circle"
>
Manual
</button>
</div>
</div>
<script src="js/date.js"></script>
<script src="js/timer.js"></script>
<script src="js/menus.js"></script>
</body>
</html>