-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
214 lines (183 loc) · 11.8 KB
/
index.html
File metadata and controls
214 lines (183 loc) · 11.8 KB
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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!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">
<meta name="description" content="A minimal period tracker web app">
<meta name="author" content="Ritu">
<meta name="theme-color" content="#0099FF">
<meta name="robots" content="noindex,nofollow">
<title> RITU </title>
<link rel="icon apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" type="image/png">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="css/main.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<svg style="position: absolute; width: 0; height: 0;" width="50 px" height="50 px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-home" viewBox="0 0 32 32">
<title>home</title>
<path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
</symbol>
<symbol id="icon-edit" viewBox="0 0 32 32">
<title>edit</title>
<path d="M12 20l4-2 14-14-2-2-14 14-2 4zM9.041 27.097c-0.989-2.085-2.052-3.149-4.137-4.137l3.097-8.525 4-2.435 12-12h-6l-12 12-6 20 20-6 12-12v-6l-12 12-2.435 4z"></path>
</symbol>
<symbol id="icon-calendar" viewBox="0 0 32 32">
<title>calendar</title>
<path d="M10 12h4v4h-4zM16 12h4v4h-4zM22 12h4v4h-4zM4 24h4v4h-4zM10 24h4v4h-4zM16 24h4v4h-4zM10 18h4v4h-4zM16 18h4v4h-4zM22 18h4v4h-4zM4 18h4v4h-4zM26 0v2h-4v-2h-14v2h-4v-2h-4v32h30v-32h-4zM28 30h-26v-22h26v22z"></path>
</symbol>
<symbol id="icon-settings" viewBox="0 0 32 32">
<title>settings</title>
<path d="M29.181 19.070c-1.679-2.908-0.669-6.634 2.255-8.328l-3.145-5.447c-0.898 0.527-1.943 0.829-3.058 0.829-3.361 0-6.085-2.742-6.085-6.125h-6.289c0.008 1.044-0.252 2.103-0.811 3.070-1.679 2.908-5.411 3.897-8.339 2.211l-3.144 5.447c0.905 0.515 1.689 1.268 2.246 2.234 1.676 2.903 0.672 6.623-2.241 8.319l3.145 5.447c0.895-0.522 1.935-0.82 3.044-0.82 3.35 0 6.067 2.725 6.084 6.092h6.289c-0.003-1.034 0.259-2.080 0.811-3.038 1.676-2.903 5.399-3.894 8.325-2.219l3.145-5.447c-0.899-0.515-1.678-1.266-2.232-2.226zM16 22.479c-3.578 0-6.479-2.901-6.479-6.479s2.901-6.479 6.479-6.479c3.578 0 6.479 2.901 6.479 6.479s-2.901 6.479-6.479 6.479z"></path>
</symbol>
<symbol id="icon-delete" viewBox="0 0 32 32">
<title>delete</title>
<path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
<path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
</symbol>
<symbol id="icon-log" viewBox="0 0 32 32">
<title>log</title>
<path d="M12 2h20v4h-20v-4zM12 14h20v4h-20v-4zM12 26h20v4h-20v-4zM0 4c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4zM0 16c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4zM0 28c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4z"></path>
</symbol>
<symbol id="icon-next" viewBox="0 0 32 32">
<title>next</title>
<path d="M6 4l20 12-20 12z"></path>
</symbol>
<symbol id="icon-prev" viewBox="0 0 32 32">
<title>prev</title>
<path d="M26 4l-20 12 20 12z"></path>
</symbol>
<symbol id="icon-checked" viewBox="0 0 32 32">
<title>checked</title>
<path d="M28 0h-24c-2.2 0-4 1.8-4 4v24c0 2.2 1.8 4 4 4h24c2.2 0 4-1.8 4-4v-24c0-2.2-1.8-4-4-4zM14 24.828l-7.414-7.414 2.828-2.828 4.586 4.586 9.586-9.586 2.828 2.828-12.414 12.414z"></path>
</symbol>
<symbol id="icon-unchecked" viewBox="0 0 32 32">
<title>unchecked</title>
<path d="M28 0h-24c-2.2 0-4 1.8-4 4v24c0 2.2 1.8 4 4 4h24c2.2 0 4-1.8 4-4v-24c0-2.2-1.8-4-4-4zM28 28h-24v-24h24v24z"></path>
</symbol>
<symbol id="icon-plus" viewBox="0 0 32 32">
<title>plus</title>
<path d="M31 12h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1v11h-11c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h11v11c0 0.552 0.448 1 1 1h6c0.552 0 1-0.448 1-1v-11h11c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1z"></path>
</symbol>
<symbol id="icon-minus" viewBox="0 0 32 32">
<title>minus</title>
<path d="M0 13v6c0 0.552 0.448 1 1 1h30c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1h-30c-0.552 0-1 0.448-1 1z"></path>
</symbol>
<symbol id="icon-moon" viewBox="0 0 32 32">
<title>moon-stars</title>
<path d="M18.214 11.762l-1.214 3.238-1.214-3.238-2.286-0.762 2.286-0.762 1.214-3.238 1.214 3.238 2.286 0.762-2.286 0.762zM22.214 18.238l-1.214-3.238-1.214 3.238-2.286 0.762 2.286 0.762 1.214 3.238 1.214-3.238 2.286-0.762-2.286-0.762zM14.836 22.331v0c0.088-0.351 0.142-0.716 0.158-1.091-0.468 0.165-0.971 0.254-1.495 0.254-2.485 0-4.5-2.015-4.5-4.5 0-0.524 0.090-1.027 0.254-1.495-0.374 0.016-0.739 0.070-1.091 0.158-2.392 0.597-4.163 2.76-4.163 5.336 0 3.038 2.462 5.5 5.5 5.5 2.577 0 4.739-1.772 5.337-4.163zM5 20.995c0-1.961 1.255-3.63 3.005-4.246-0.004 0.081-0.005 0.163-0.005 0.246 0 3.038 2.462 5.5 5.5 5.5 0.082 0 0.164-0.002 0.246-0.005-0.616 1.751-2.284 3.005-4.246 3.005-2.485 0-4.5-2.015-4.5-4.5v0zM26.867 12.429l1.633 0.571-1.633 0.571-0.867 2.429-0.867-2.429-1.633-0.571 1.633-0.571 0.867-2.429 0.867 2.429z"></path>
</symbol>
<symbol id="icon-cancel-circle" viewBox="0 0 32 32">
<title>cancel-circle</title>
<path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13z"></path>
<path d="M21 8l-5 5-5-5-3 3 5 5-5 5 3 3 5-5 5 5 3-3-5-5 5-5z"></path>
</symbol>
<symbol id="icon-offline" viewBox="0 0 32 32">
<title>airplane</title>
<path d="M24 19.999l-5.713-5.713 13.713-10.286-4-4-17.141 6.858-5.397-5.397c-1.556-1.556-3.728-1.928-4.828-0.828s-0.727 3.273 0.828 4.828l5.396 5.396-6.858 17.143 4 4 10.287-13.715 5.713 5.713v7.999h4l2-6 6-2v-4l-7.999 0z"></path>
</symbol>
</defs>
</svg>
<nav class="main-nav navbar navbar-expand-sm " style="background-color: #000000;">
<ul class="main-nav__list">
<li class="main-nav__item">
<a class="main-nav__link" href="#/home"><svg class="icon main-nav__icon"><use xlink:href="#icon-home"></use></svg></a></li>
<li class="main-nav__item">
<a class="main-nav__link" href="#/calendar"><svg class="icon main-nav__icon"><use xlink:href="#icon-calendar"></use></svg></a></li>
<li class="main-nav__item">
<a class="main-nav__link" href="#/log"><svg class="icon main-nav__icon"><use xlink:href="#icon-log"></use></svg></a></li>
<li class="main-nav__item">
<a class="main-nav__link" href="#/settings"><svg class="icon main-nav__icon"><use xlink:href="#icon-settings"></use></svg></a></li>
</ul>
</nav>
<main class="main-content">
<!-- HOME -->
<section id="home" class="main-section main-section--home">
<div class="home__wrapper">
<div id="home-calc">
<div class="home__calc">Next Mensus Expected: <span id="next" class="home__next"> </span></div>
<div class="home__calc">Days Remaining: <span id="countdown" class="home__countdown"> </span></div>
<div class="home__calc">Period day: <span id="counter" class="home__counter"> </span></div>
</div>
<button class="home__add" id="home-add">Last Mensus Date <span class="home__add__tap">Tap here</span></button>
<form class="add-form" id="add-form">
<input type="date" id="add-date" class="add-form__date" required>
<input type="reset" value="Cancel" class="add-form__button">
<input type="submit" value="Save" class="add-form__button">
</form>
</div>
</section>
<!-- CALENDAR -->
<section id="calendar" class="main-section">
<div id="calendar-data"></div>
</section>
<!-- LOG -->
<section id="log" class="main-section">
<div class="log-average">
<span id="average" class="log-average__counter"> </span> Days in your average cycle
</div>
<!-- <button class="log__add" id="log-add">Add entry</button> -->
<form class="add-form" id="add-form">
<input type="date" id="add-date" class="add-form__date" required>
<input type="reset" value="Cancel" class="add-form__button">
<input type="submit" value="Save" class="add-form__button">
</form>
<div id="log-data"></div>
</section>
<!-- SETTINGS -->
<section id="settings" class="main-section main-section--settings">
<div class="settings">
<button class="settings__option settings__button" style="display:none;" onclick="giulia()">Load test data</button>
<button class="settings__option settings__button" id="delete-all">Delete all data</button>
<button class="settings__option settings__button" style="display:none;" id="gcal-connect"><span id="gcal-connect-on">Connect Google account</span><span id="gcal-connect-off" style="display:none">Disconnect <strong id="gcal-connect-user"></strong></span></button>
<!-- <button class="settings__option settings__button">Disconnect Google account</button> -->
<div class="input-checkbox">
<input type="checkbox" class="input-checkbox__check" id="settings-week-start">
<label class="input-checkbox__label settings__option settings__button" for="settings-week-start">Mon-Sun calendar<svg class="icon input-checkbox__icon"><use xlink:href="#icon-unchecked" class="input-checkbox__icon__unchecked"></use><use xlink:href="#icon-checked" class="input-checkbox__icon__checked"></use></svg></label>
</div>
<div class="input-checkbox">
<input type="checkbox" class="input-checkbox__check" id="settings-extended-month">
<label class="input-checkbox__label settings__option settings__button" for="settings-extended-month">Show extended month<svg class="icon input-checkbox__icon"><use xlink:href="#icon-unchecked" class="input-checkbox__icon__unchecked"></use><use xlink:href="#icon-checked" class="input-checkbox__icon__checked"></use></svg></label>
</div>
<div class="settings__option">Period length
<div class="input-number js-number">
<button class="input-number__button js-number__sub"><svg class="icon input-number__icon"><use xlink:href="#icon-minus"></use></svg></button>
<input type="number" class="input-number__input js-number__input" id="settings-period-length" min="1">
<button class="input-number__button js-number__add"><svg class="icon input-number__icon"><use xlink:href="#icon-plus"></use></svg></button>
</div>
</div>
<div class="settings__option">Cycle length
<div class="input-number js-number">
<button class="input-number__button js-number__sub"><svg class="icon input-number__icon"><use xlink:href="#icon-minus"></use></svg></button>
<input type="number" class="input-number__input js-number__input" id="settings-cycle-length" min="1">
<button class="input-number__button js-number__add"><svg class="icon input-number__icon"><use xlink:href="#icon-plus"></use></svg></button>
</div>
</div>
<p class="settings__info">
Created for Learning Purpose!!
</p>
</div>
</section>
<!-- ALERTS -->
<div id="alerts" class="alerts-wrapper"></div>
</main>
<script src="vendor/moment-2.13.0.min.js"></script>
<script src="js/settings.js"></script>
<script src="js/helpers.js"></script>
<script src="js/config.js"></script>
<script src="js/gcal.js"></script>
<script src="js/model.js"></script>
<script src="js/template.js"></script>
<script src="js/view.js"></script>
<script src="js/controller.js"></script>
<!-- <script src="js/mine.js"></script> -->
<script src="js/app.js"></script>
</body>
</html>