-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
245 lines (215 loc) · 14.9 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
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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!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="Giulia Alfonsi - @electric_g">
<meta name="theme-color" content="#0099FF">
<meta name="robots" content="noindex,nofollow">
<title>Period Tracker</title>
<link rel="shortcut icon" href="images/favicon.ico" sizes="any">
<link rel="icon" href="images/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="manifest" href="manifest.webmanifest">
<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#0099ff">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1">
<defs>
<symbol id="icon-home" viewBox="0 0 32 32">
<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">
<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">
<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">
<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">
<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">
<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">
<path d="M6 4l20 12-20 12z"></path>
</symbol>
<symbol id="icon-prev" viewBox="0 0 32 32">
<path d="M26 4l-20 12 20 12z"></path>
</symbol>
<symbol id="icon-up" viewBox="0 0 32 32">
<path d="M4 26l12-20 12 20z"></path>
</symbol>
<symbol id="icon-down" viewBox="0 0 32 32">
<path d="M28 6l-12 20-12-20z"></path>
</symbol>
<symbol id="icon-checked" viewBox="0 0 32 32">
<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">
<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">
<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">
<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">
<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">
<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">
<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>
<symbol id="icon-today" viewBox="0 0 32 32">
<path d="M24.411 17.214l-9.143 9.143c-0.232 0.214-0.589 0.214-0.821 0l-5.143-5.143c-0.214-0.232-0.214-0.589 0-0.804l0.821-0.821c0.214-0.214 0.571-0.214 0.804 0l3.929 3.929 7.929-7.929c0.232-0.214 0.589-0.214 0.804 0l0.821 0.821c0.214 0.214 0.214 0.571 0 0.804zM3.429 29.714h25.143v-18.286h-25.143v18.286zM10.286 8v-5.143c0-0.321-0.25-0.571-0.571-0.571h-1.143c-0.321 0-0.571 0.25-0.571 0.571v5.143c0 0.321 0.25 0.571 0.571 0.571h1.143c0.321 0 0.571-0.25 0.571-0.571zM24 8v-5.143c0-0.321-0.25-0.571-0.571-0.571h-1.143c-0.321 0-0.571 0.25-0.571 0.571v5.143c0 0.321 0.25 0.571 0.571 0.571h1.143c0.321 0 0.571-0.25 0.571-0.571zM30.857 6.857v22.857c0 1.25-1.036 2.286-2.286 2.286h-25.143c-1.25 0-2.286-1.036-2.286-2.286v-22.857c0-1.25 1.036-2.286 2.286-2.286h2.286v-1.714c0-1.571 1.286-2.857 2.857-2.857h1.143c1.571 0 2.857 1.286 2.857 2.857v1.714h6.857v-1.714c0-1.571 1.286-2.857 2.857-2.857h1.143c1.571 0 2.857 1.286 2.857 2.857v1.714h2.286c1.25 0 2.286 1.036 2.286 2.286z"></path>
</symbol>
</defs>
</svg>
<header class="main-header">
<h1 class="main-header__title"><svg class="icon main-header__title__icon" focusable="false" aria-hidden="true"><use href="#icon-moon"></use></svg>Period Tracker v<span id="version">0</span></h1>
<div class="main-header__status"><svg id="status-icon-offline" class="icon main-header__status__icon" focusable="false" aria-hidden="true"><use href="#icon-offline"></use></svg></div>
</header>
<nav class="main-nav">
<ul class="main-nav__list">
<li class="main-nav__item">
<a class="main-nav__link" href="#/home"><svg class="icon main-nav__icon" focusable="false" aria-hidden="true"><use href="#icon-home"></use></svg>home</a></li>
<li class="main-nav__item">
<a class="main-nav__link" href="#/calendar"><svg class="icon main-nav__icon" focusable="false" aria-hidden="true"><use href="#icon-calendar"></use></svg>calendar</a></li>
<li class="main-nav__item">
<a class="main-nav__link" href="#/log"><svg class="icon main-nav__icon" focusable="false" aria-hidden="true"><use href="#icon-log"></use></svg>log</a></li>
<li class="main-nav__item">
<a class="main-nav__link" href="#/settings"><svg class="icon main-nav__icon" focusable="false" aria-hidden="true"><use href="#icon-settings"></use></svg>settings</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: <time id="next" class="home__next"> </time></div>
<div class="home__calc">days left: <span id="countdown" class="home__countdown"> </span></div>
<div class="home__calc">period day: <span id="counter" class="home__counter"> </span></div>
</div>
<button type="button" class="home__add add-form__toggle" id="home-add" form="add-form--home">Period just started <span class="home__add__tap">tap here</span></button>
<form class="add-form" id="add-form--home">
<input type="date" name="add-date" class="add-form__date" required aria-label="New period starting date">
<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 main-section--calendar">
<div id="calendar-data" class="calendar-data"></div>
</section>
<!-- LOG -->
<section id="log" class="main-section main-section--log">
<div class="log-average">
<span id="average" class="log-average__counter"> </span> Days in your average cycle
</div>
<button type="button" class="log__add add-form__toggle settings__button" form="add-form--log">Add entry</button>
<form class="add-form" id="add-form--log">
<input type="date" name="add-date" class="add-form__date" required aria-label="New entry starting date">
<input type="reset" value="Cancel" class="add-form__button">
<input type="submit" value="Save" class="add-form__button">
</form>
<div>
<table class="log-list">
<tbody id="log-data"></tbody>
<tfoot>
<tr id="edit-form--log-tr" class="log-list__item--edit-form">
<td colspan="4">
<form class="edit-form" id="edit-form--log">
<input type="hidden" name="edit-id">
<input type="date" name="edit-date" class="add-form__date" required aria-label="Entry starting date">
<input type="reset" value="Cancel" class="add-form__button">
<input type="submit" value="Save" class="add-form__button">
</form>
</td>
</tr>
</tfoot>
</table>
</div>
</section>
<!-- SETTINGS -->
<section id="settings" class="main-section main-section--settings">
<div class="settings">
<label class="settings__option settings__button" for="import-data">Import from backup<input type="file" id="import-data" accept=".txt"></label>
<button class="settings__option settings__button" id="export-data">Export to backup</button>
<button class="settings__option settings__button" id="share-data">Share data to…</button>
<button class="settings__option settings__button" id="delete-all">Delete all data</button>
<div class="input-checkbox">
<label for="settings-week-start" class="input-checkbox__label settings__option settings__button">
<input type="checkbox" id="settings-week-start" class="input-checkbox__check">
<span>Mon-Sun calendar</span>
<svg class="icon input-checkbox__icon" focusable="false" aria-hidden="true">
<use href="#icon-unchecked" class="input-checkbox__icon__unchecked"></use><use href="#icon-checked" class="input-checkbox__icon__checked"></use>
</svg>
</label>
</div>
<div class="input-checkbox">
<label for="settings-extended-month" class="input-checkbox__label settings__option settings__button">
<input type="checkbox" id="settings-extended-month" class="input-checkbox__check">
<span>Show extended month</span>
<svg class="icon input-checkbox__icon" focusable="false" aria-hidden="true">
<use href="#icon-unchecked" class="input-checkbox__icon__unchecked"></use><use href="#icon-checked" class="input-checkbox__icon__checked"></use>
</svg>
</label>
</div>
<div class="settings__option"><label for="settings-period-length">Period length</label>
<div class="input-number js-number">
<button class="input-number__button js-number__sub" aria-label="Decrease period length by 1"><svg class="icon input-number__icon" focusable="false" aria-hidden="true"><use 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" aria-label="Increase period length by 1"><svg class="icon input-number__icon" focusable="false" aria-hidden="true"><use href="#icon-plus"></use></svg></button>
</div>
</div>
<div class="settings__option"><label for="settings-cycle-length">Cycle length</label>
<div class="input-number js-number">
<button class="input-number__button js-number__sub" aria-label="Decrease cycle length by 1"><svg class="icon input-number__icon" focusable="false" aria-hidden="true"><use 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" aria-label="Increase cycle length by 1"><svg class="icon input-number__icon" focusable="false" aria-hidden="true"><use href="#icon-plus"></use></svg></button>
</div>
</div>
<p class="settings__info">
Developed by <a href="https://github.com/electricg" target="_blank">Giulia Alfonsi</a>.<br>
This is just a personal app with minimal functionalities.<br>
Live demo at <a href="https://electricg.github.io/period-tracker/" target="_blank">electricg.github.io/period-tracker/</a> and source code on <a href="https://github.com/electricg/period-tracker" target="_blank">GitHub</a>
</p>
</div>
</section>
<!-- NOT FOUND -->
<section id="not-found" class="main-section main-section--not-found">
<p>The section you are trying to access does not exist. <br> Go back to the <a href="#/home">home</a></p>
</section>
<!-- ALERTS -->
<div id="alerts" class="alerts-wrapper"></div>
</main>
<script src="vendor/moment-2.29.4.min.js"></script>
<script src="js/dates.js"></script>
<script src="js/settings.js"></script>
<script src="js/helpers.js"></script>
<script src="js/storage.js"></script>
<script src="js/config.js"></script>
<script src="js/model.js"></script>
<script src="js/calendar.js"></script>
<script src="js/template.js"></script>
<script src="js/view.js"></script>
<script src="js/controller.js"></script>
<script src="js/offline.js"></script>
<script src="js/app.js"></script>
</body>
</html>