-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
171 lines (166 loc) · 11.1 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Monitor de hábitos</title>
<link
rel="icon"
href="https://cdn-icons-png.flaticon.com/512/4631/4631275.png"
/>
<link rel="stylesheet" href="./style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@600;800&family=Roboto+Mono:wght@700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./assets/logo.css" />
<script src="https://unpkg.com/@phosphor-icons/web"></script>
</head>
<body>
<header>
<div class="wrapper">
<!-- logo animated with css -->
<div id="logo">
<svg
width="151"
height="84"
viewBox="0 0 151 84"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.9773 56.0682V71H2.64205V36.0909H10.7045V49.625H10.9943C11.5852 48.0114 12.5511 46.75 13.892 45.8409C15.2443 44.9318 16.8977 44.4773 18.8523 44.4773C20.6932 44.4773 22.2955 44.8864 23.6591 45.7045C25.0227 46.5114 26.0795 47.6534 26.8295 49.1307C27.5909 50.608 27.9659 52.3352 27.9545 54.3125V71H19.6193V55.9489C19.6307 54.4943 19.267 53.358 18.5284 52.5398C17.7898 51.7216 16.75 51.3125 15.4091 51.3125C14.5341 51.3125 13.7614 51.5057 13.0909 51.892C12.4318 52.267 11.9148 52.8068 11.5398 53.5114C11.1761 54.2159 10.9886 55.0682 10.9773 56.0682ZM40.5384 71.4432C38.8679 71.4432 37.3849 71.1648 36.0895 70.608C34.8054 70.0398 33.7884 69.1875 33.0384 68.0511C32.2997 66.9034 31.9304 65.4659 31.9304 63.7386C31.9304 62.2841 32.1861 61.0568 32.6974 60.0568C33.2088 59.0568 33.9134 58.2443 34.8111 57.6193C35.7088 56.9943 36.7429 56.5227 37.9134 56.2045C39.0838 55.875 40.3338 55.6534 41.6634 55.5398C43.152 55.4034 44.3509 55.2614 45.2599 55.1136C46.169 54.9545 46.8281 54.733 47.2372 54.4489C47.6577 54.1534 47.8679 53.7386 47.8679 53.2045V53.1193C47.8679 52.2443 47.5668 51.5682 46.9645 51.0909C46.3622 50.6136 45.5497 50.375 44.527 50.375C43.4247 50.375 42.5384 50.6136 41.8679 51.0909C41.1974 51.5682 40.7713 52.2273 40.5895 53.0682L32.902 52.7955C33.1293 51.2045 33.7145 49.7841 34.6577 48.5341C35.6122 47.2727 36.919 46.2841 38.5781 45.5682C40.2486 44.8409 42.2543 44.4773 44.5952 44.4773C46.2656 44.4773 47.8054 44.6761 49.2145 45.0739C50.6236 45.4602 51.8509 46.0284 52.8963 46.7784C53.9418 47.517 54.7486 48.4261 55.3168 49.5057C55.8963 50.5852 56.1861 51.8182 56.1861 53.2045V71H48.3452V67.3523H48.1406C47.6747 68.2386 47.0781 68.9886 46.3509 69.6023C45.6349 70.2159 44.7884 70.6761 43.8111 70.983C42.8452 71.2898 41.7543 71.4432 40.5384 71.4432ZM43.1122 65.9886C44.0099 65.9886 44.8168 65.8068 45.5327 65.4432C46.2599 65.0795 46.8395 64.5795 47.2713 63.9432C47.7031 63.2955 47.919 62.5455 47.919 61.6932V59.2045C47.6804 59.3295 47.3906 59.4432 47.0497 59.5455C46.7202 59.6477 46.3565 59.7443 45.9588 59.8352C45.5611 59.9261 45.152 60.0057 44.7315 60.0739C44.3111 60.142 43.9077 60.2045 43.5213 60.2614C42.7372 60.3864 42.0668 60.5795 41.5099 60.8409C40.9645 61.1023 40.544 61.4432 40.2486 61.8636C39.9645 62.2727 39.8224 62.7614 39.8224 63.3295C39.8224 64.1932 40.1293 64.8523 40.7429 65.3068C41.3679 65.7614 42.1577 65.9886 43.1122 65.9886ZM61.2827 71V36.0909H69.6179V49.3011H69.7884C70.1293 48.5057 70.6122 47.7386 71.2372 47C71.8736 46.2614 72.6804 45.6591 73.6577 45.1932C74.6463 44.7159 75.8281 44.4773 77.2031 44.4773C79.0213 44.4773 80.7202 44.9545 82.2997 45.9091C83.8906 46.8636 85.1747 48.3352 86.152 50.3239C87.1293 52.3125 87.6179 54.8466 87.6179 57.9261C87.6179 60.892 87.1463 63.375 86.2031 65.375C85.2713 67.375 84.0099 68.875 82.419 69.875C80.8395 70.875 79.0838 71.375 77.152 71.375C75.8338 71.375 74.6918 71.1591 73.7259 70.7273C72.7599 70.2955 71.9474 69.7273 71.2884 69.0227C70.6406 68.3182 70.1406 67.5625 69.7884 66.7557H69.5327V71H61.2827ZM69.4474 57.9091C69.4474 59.3182 69.6349 60.5455 70.0099 61.5909C70.3963 62.6364 70.9474 63.4489 71.6634 64.0284C72.3906 64.5966 73.2599 64.8807 74.2713 64.8807C75.294 64.8807 76.1634 64.5966 76.8793 64.0284C77.5952 63.4489 78.1349 62.6364 78.4986 61.5909C78.8736 60.5455 79.0611 59.3182 79.0611 57.9091C79.0611 56.5 78.8736 55.2784 78.4986 54.2443C78.1349 53.2102 77.5952 52.4091 76.8793 51.8409C76.1747 51.2727 75.3054 50.9886 74.2713 50.9886C73.2486 50.9886 72.3793 51.267 71.6634 51.8239C70.9474 52.3807 70.3963 53.1761 70.0099 54.2102C69.6349 55.2443 69.4474 56.4773 69.4474 57.9091ZM91.9858 71V44.8182H100.321V71H91.9858ZM96.1619 41.767C94.9915 41.767 93.9858 41.3807 93.1449 40.608C92.304 39.8239 91.8835 38.8807 91.8835 37.7784C91.8835 36.6875 92.304 35.7557 93.1449 34.983C93.9858 34.1989 94.9915 33.8068 96.1619 33.8068C97.3438 33.8068 98.3494 34.1989 99.179 34.983C100.02 35.7557 100.44 36.6875 100.44 37.7784C100.44 38.8807 100.02 39.8239 99.179 40.608C98.3494 41.3807 97.3438 41.767 96.1619 41.767ZM120.405 44.8182V50.9545H103.888V44.8182H120.405ZM107.348 38.5455H115.683V62.767C115.683 63.2784 115.763 63.6932 115.922 64.0114C116.092 64.3182 116.337 64.5398 116.655 64.6761C116.973 64.8011 117.354 64.8636 117.797 64.8636C118.115 64.8636 118.45 64.8352 118.803 64.7784C119.166 64.7102 119.439 64.6534 119.621 64.608L120.882 70.625C120.484 70.7386 119.922 70.8807 119.195 71.0511C118.479 71.2216 117.621 71.3295 116.621 71.375C114.666 71.4659 112.99 71.2386 111.592 70.6932C110.206 70.1364 109.143 69.2727 108.405 68.1023C107.678 66.9318 107.325 65.4602 107.348 63.6875V38.5455ZM147.188 52.8125L139.534 53.017C139.455 52.4716 139.239 51.9886 138.886 51.5682C138.534 51.1364 138.074 50.8011 137.506 50.5625C136.949 50.3125 136.301 50.1875 135.562 50.1875C134.597 50.1875 133.773 50.3807 133.091 50.767C132.42 51.1534 132.091 51.6761 132.102 52.3352C132.091 52.8466 132.295 53.2898 132.716 53.6648C133.148 54.0398 133.915 54.3409 135.017 54.5682L140.062 55.5227C142.676 56.0227 144.619 56.8523 145.892 58.0114C147.176 59.1705 147.824 60.7045 147.835 62.6136C147.824 64.4091 147.29 65.9716 146.233 67.3011C145.188 68.6307 143.756 69.6648 141.938 70.4034C140.119 71.1307 138.04 71.4943 135.699 71.4943C131.96 71.4943 129.011 70.7273 126.852 69.1932C124.705 67.6477 123.477 65.5795 123.17 62.9886L131.403 62.7841C131.585 63.7386 132.057 64.4659 132.818 64.9659C133.58 65.4659 134.551 65.7159 135.733 65.7159C136.801 65.7159 137.67 65.517 138.341 65.1193C139.011 64.7216 139.352 64.1932 139.364 63.5341C139.352 62.9432 139.091 62.4716 138.58 62.1193C138.068 61.7557 137.267 61.4716 136.176 61.267L131.608 60.3977C128.983 59.9205 127.028 59.0398 125.744 57.7557C124.46 56.4602 123.824 54.8125 123.835 52.8125C123.824 51.0625 124.29 49.5682 125.233 48.3295C126.176 47.0795 127.517 46.125 129.256 45.4659C130.994 44.8068 133.045 44.4773 135.409 44.4773C138.955 44.4773 141.75 45.2216 143.795 46.7102C145.841 48.1875 146.972 50.2216 147.188 52.8125Z"
fill="white"
data-darkreader-inline-fill=""
style="--darkreader-inline-fill: #ffffff"
class="svg-elem-1"
></path>
<rect
x="0.5"
y="0.5"
width="15"
height="15"
rx="3.5"
fill="#18181B"
stroke="#27272A"
data-darkreader-inline-fill=""
data-darkreader-inline-stroke=""
style="
--darkreader-inline-fill: transparent;
--darkreader-inline-stroke: #ffffff;
"
class="svg-elem-2"
></rect>
<rect
x="20.5"
y="0.5"
width="15"
height="15"
rx="3.5"
fill="#4C1D95"
stroke="#6D28D9"
data-darkreader-inline-fill=""
data-darkreader-inline-stroke=""
style="
--darkreader-inline-fill: transparent;
--darkreader-inline-stroke: #6934bc;
"
class="svg-elem-3"
></rect>
<rect
x="40.5"
y="0.5"
width="15"
height="15"
rx="3.5"
fill="#5B21B6"
stroke="#7C3AED"
data-darkreader-inline-fill=""
data-darkreader-inline-stroke=""
style="
--darkreader-inline-fill: transparent;
--darkreader-inline-stroke: #703cca;
"
class="svg-elem-4"
></rect>
<rect
x="60.5"
y="0.5"
width="15"
height="15"
rx="3.5"
fill="#6D28D9"
stroke="#8B5CF6"
data-darkreader-inline-fill=""
data-darkreader-inline-stroke=""
style="
--darkreader-inline-fill: transparent;
--darkreader-inline-stroke: #764fd1;
"
class="svg-elem-5"
></rect>
<rect
x="80.5"
y="0.5"
width="15"
height="15"
rx="3.5"
fill="#7C3AED"
stroke="#A78BFA"
data-darkreader-inline-fill=""
data-darkreader-inline-stroke=""
style="
--darkreader-inline-fill: transparent;
--darkreader-inline-stroke: #856ad4;
"
class="svg-elem-6"
></rect>
<rect
x="100.5"
y="0.5"
width="15"
height="15"
rx="3.5"
fill="#8B5CF6"
stroke="#C4B5FD"
data-darkreader-inline-fill=""
data-darkreader-inline-stroke=""
style="
--darkreader-inline-fill: #6d4db4;
--darkreader-inline-stroke: #9483d6;
"
class="svg-elem-7"
></rect>
</svg>
</div>
<button title="Limpar registros">
<i class="ph-light ph-arrows-counter-clockwise"></i>
<span>Limpar registros</span>
</button>
</div>
</header>
<main>
<div id="outHabits"></div>
<form id="habits">
<div class="habits">
<div class="habit" data-name="run">></div>
<div class="habit" data-name="water"></div>
<div class="habit" data-name="gym"></div>
<div class="habit" data-name="sleep"></div>
<div class="habit" data-name="stude"></div>
<div class="habit" data-name="food"></div>
</div>
<div class="days"></div>
</form>
</main>
<script src="https://cdn.jsdelivr.net/gh/maykbrito/libs/NLWSetup/source/NLWSetup.js"></script>
<script src="./script.js"></script>
</body>
<script src="./app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles@2.0.6/tsparticles.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-stars@2/tsparticles.preset.stars.bundle.min.js"></script>
<script src="./assets/particles.js"></script>
</html>