-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
188 lines (166 loc) · 8.17 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Track your daily habits</title>
<link rel="stylesheet" href="css/calendar.css" type="text/css">
<link rel="stylesheet" href="css/home.css" type="text/css">
<link rel="stylesheet" href="css/modal.css" type="text/css">
<link rel="stylesheet" href="css/pop_up_dropdown.css" type="text/css">
<script rel="script" defer src="js/dao.js"></script>
<script rel="script" defer src="js/calendar.js"></script>
<script rel="script" defer src="js/home.js"></script>
<script rel="script" defer src="js/streaks.js"></script>
<script rel="script" defer src="js/modal.js"></script>
<script rel="script" defer src="js/pop_up_dropdown.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<header class="home">
<img src="images/Logo.png" alt="Logotype that reads 'Track your daily habits'" class="logo">
</header>
<!-- Will be filled dynamicly with JS -->
<section id="habit-btn-container">
</section>
<div class="arrows-month-container">
<button class="calendar-arrow" id="arrow-left">
<svg width="126" height="60" viewBox="0 0 126 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Arrow" d="M2.16323 27.1716C0.601129 28.7337 0.601129 31.2663 2.16323 32.8284L27.6191 58.2843C29.1812 59.8464 31.7138 59.8464 33.2759 58.2843C34.838 56.7222 34.838 54.1895 33.2759 52.6274L10.6485 30L33.2759 7.37258C34.838 5.81049 34.838 3.27783 33.2759 1.71573C31.7138 0.153632 29.1812 0.153632 27.6191 1.71573L2.16323 27.1716ZM125.008 26L4.99165 26V34L125.008 34V26Z" fill="#333846"/>
</svg>
</button>
<div class="current-month"></div>
<button class="calendar-arrow" id="arrow-right">
<svg width="126" height="60" viewBox="0 0 126 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Arrow" d="M2.16323 27.1716C0.601129 28.7337 0.601129 31.2663 2.16323 32.8284L27.6191 58.2843C29.1812 59.8464 31.7138 59.8464 33.2759 58.2843C34.838 56.7222 34.838 54.1895 33.2759 52.6274L10.6485 30L33.2759 7.37258C34.838 5.81049 34.838 3.27783 33.2759 1.71573C31.7138 0.153632 29.1812 0.153632 27.6191 1.71573L2.16323 27.1716ZM125.008 26L4.99165 26V34L125.008 34V26Z" fill="#333846"/>
</svg>
</button>
</div>
<div class="habit-calendar-container">
<p></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p class="days"></p>
<p></p>
<p class="dates">01</p>
<p class="dates">02</p>
<p class="dates">03</p>
<p class="dates">04</p>
<p class="dates">05</p>
<p class="dates">06</p>
<p class="dates">07</p>
<p class="dates">08</p>
<p class="dates">09</p>
<p class="dates">10</p>
<p class="dates">11</p>
<p class="dates">12</p>
<p class="dates">13</p>
<p class="dates">14</p>
<p class="dates">15</p>
<p class="dates">16</p>
<p class="dates">17</p>
<p class="dates">18</p>
<p class="dates">19</p>
<p class="dates">20</p>
<p class="dates">21</p>
<p class="dates">22</p>
<p class="dates">23</p>
<p class="dates">24</p>
<p class="dates">25</p>
<p class="dates">26</p>
<p class="dates">27</p>
<p class="dates">28</p>
<p class="dates">29</p>
<p class="dates">30</p>
<p class="dates">31</p>
</div>
<!-- Will be filled dynamicly with JS -->
<div id="calendar-habits-container">
</div>
<button class="habit-btn plus-btn calendar">+</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h1 id="modal-title">Add habit</h1>
<div class="input-container">
<label for="name">Name</label>
<input type="text" id="createHabitName" name="name" class="text-input" required>
</div>
<div class="input-container dropOption">
<div class="dropdown" id="dropdownColor">
<button class="dropbtn" id="dropColor" onclick="showDropdown(1)">
<div class="arrow-container">
<div class="dropdownText" id="downTestColor">
Pick a color
</div>
<div class="arrowDrop" id="arrowColor">
<svg width="193" height="172" viewBox="0 0 193 172" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="dropdownArrow" d="M83.5097 159.5L7.81387 28.391C0.140625 15.1005 15.0138 0.227341 28.3043 7.90063L84.0001 40.0566C91.7351 44.5224 101.265 44.5224 109 40.0566L164.696 7.90063C177.986 0.227371 192.86 15.1005 185.186 28.391L109.49 159.5C103.717 169.5 89.2832 169.5 83.5097 159.5Z" fill="black" stroke="black" stroke-width="10"/>
</svg>
</div>
</div>
</button>
<div class="dropdownContent hidden" id="color"></div>
</div>
</div>
<div class="input-container dropOption">
<div class="dropdown icon">
<button class="dropbtn" id="dropIcon" onclick="showDropdown(2)">
<div class="arrow-container">
<div class="dropdownText" id="downTextIcon">
Pick an icon
</div>
<div class="arrowDrop" id="arrowIcon">
<svg class="actualArrow" width="193" height="172" viewBox="0 0 193 172" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="dropdownArrow" d="M83.5097 159.5L7.81387 28.391C0.140625 15.1005 15.0138 0.227341 28.3043 7.90063L84.0001 40.0566C91.7351 44.5224 101.265 44.5224 109 40.0566L164.696 7.90063C177.986 0.227371 192.86 15.1005 185.186 28.391L109.49 159.5C103.717 169.5 89.2832 169.5 83.5097 159.5Z" fill="black" stroke="black" stroke-width="10"/>
</svg>
</div>
</div>
</button>
<div class="dropdownContent hidden" id="icon"></div>
</div>
</div>
<div class="input-container">
<textarea type="text" id="createHabitDescription" name="description"
ng-model="loremIpsum" ng-keyup="autoExpand($event)" placeholder="Description..."></textarea>
</div>
<div class="add-habit-btn-container">
<button class="add-habit-btn">Add habit</button>
<button class="update-habit-btn hideBtn" id="updateButton">Update habit</button>
<button class="remove-habit-btn hideBtn" id="removeButton">Remove habit</button>
</div>
</div>
</div>
<footer></footer>
</body>
</html>