-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathshopping-list.html
209 lines (200 loc) · 14.7 KB
/
shopping-list.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
<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.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet"
/>
<link rel="icon" type="image/png" href="./favicon.png" />
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" href="style.css" />
<title>TodoApp | shopping list</title>
</head>
<body>
<div class="container">
<header class="header">
<h1 class="header__title header__title--mobile">Shopping list</h1>
<h1 class="header__title header__title--desktop">
<span class="app__logo"
><svg
width="52"
height="52"
viewBox="0 0 52 52"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M46.25 0.6875L14.8625 35.1969L5.75 28.2781H0.6875L14.8625 51.3125L51.3125 0.6875H46.25Z"
fill="#3BDCB5"
/>
</svg>
</span>
<span class="app__name"
>ToDo<span class="app__subname">App</span></span
>
<span class="app__catchphrase">Let's organize</span>
</h1>
<nav class="menu">
<button class="menu__hamburger">
<svg
width="40"
height="36"
viewBox="0 0 40 36"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M39.1406 0.714844H14.9219C14.707 0.714844 14.5312 0.890625 14.5312 1.10547V3.83984C14.5312 4.05469 14.707 4.23047 14.9219 4.23047H39.1406C39.3555 4.23047 39.5312 4.05469 39.5312 3.83984V1.10547C39.5312 0.890625 39.3555 0.714844 39.1406 0.714844ZM39.1406 21.418H14.9219C14.707 21.418 14.5312 21.5938 14.5312 21.8086V24.543C14.5312 24.7578 14.707 24.9336 14.9219 24.9336H39.1406C39.3555 24.9336 39.5312 24.7578 39.5312 24.543V21.8086C39.5312 21.5938 39.3555 21.418 39.1406 21.418ZM39.1406 31.7695H0.859375C0.644531 31.7695 0.46875 31.9453 0.46875 32.1602V34.8945C0.46875 35.1094 0.644531 35.2852 0.859375 35.2852H39.1406C39.3555 35.2852 39.5312 35.1094 39.5312 34.8945V32.1602C39.5312 31.9453 39.3555 31.7695 39.1406 31.7695ZM39.1406 11.0664H0.859375C0.644531 11.0664 0.46875 11.2422 0.46875 11.457V14.1914C0.46875 14.4062 0.644531 14.582 0.859375 14.582H39.1406C39.3555 14.582 39.5312 14.4062 39.5312 14.1914V11.457C39.5312 11.2422 39.3555 11.0664 39.1406 11.0664Z"
fill="#FBFBFB"
/>
</svg>
</button>
<ul class="menu__items">
<li class="menu__item">
<a href="/user" class="menu__link"
><span class="menu__icon"
><svg
width="48"
height="50"
viewBox="0 0 48 50"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23.5492 19.7483C26.3034 19.7483 28.335 17.7665 28.335 15.0743C28.335 12.3821 26.3034 10.4004 23.5492 10.4004C20.7974 10.4004 18.7634 12.3821 18.7634 15.0743C18.7634 17.7665 20.7974 19.7483 23.5492 19.7483ZM23.5492 22.0852C18.2633 22.0852 13.9776 25.8524 13.9776 30.4983V31.4004H33.1208V30.4983C33.1208 25.8524 28.8351 22.0852 23.5492 22.0852Z"
fill="#6E6E6E"
/>
<path
d="M42.6667 0H5.33333C2.392 0 0 2.2425 0 5V37.5C0 40.2575 2.392 42.5 5.33333 42.5H16L24 50L32 42.5H42.6667C45.608 42.5 48 40.2575 48 37.5V5C48 2.2425 45.608 0 42.6667 0ZM29.3333 37.5L24 42.5L18.6667 37.5H5.33333V5H42.6667L42.672 37.5H29.3333Z"
fill="#6E6E6E"
/></svg
></span>
<span class="menu__name"> My Profile </span>
</a>
</li>
<li class="menu__item">
<a href="todo-list.html" class="menu__link"
><span class="menu__icon"
><svg
width="48"
height="50"
viewBox="0 0 48 50"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.7851 12.1286C21.9448 12.2944 22.0714 12.4915 22.1579 12.7085C22.2443 12.9254 22.2888 13.158 22.2888 13.3929C22.2888 13.6277 22.2443 13.8603 22.1579 14.0773C22.0714 14.2942 21.9448 14.4913 21.7851 14.6571L15.7851 20.9071C15.4728 21.2321 15.0522 21.419 14.6109 21.429C14.1696 21.439 13.7416 21.2712 13.416 20.9607L10.8446 18.5143C10.6698 18.3587 10.5269 18.1681 10.4243 17.9538C10.3217 17.7396 10.2616 17.506 10.2474 17.267C10.2332 17.028 10.2653 16.7885 10.3418 16.5627C10.4183 16.3369 10.5376 16.1294 10.6926 15.9526C10.8476 15.7758 11.0352 15.6333 11.2441 15.5335C11.4531 15.4338 11.6792 15.3788 11.9089 15.3719C12.1387 15.365 12.3675 15.4063 12.5816 15.4933C12.7957 15.5804 12.9909 15.7114 13.1554 15.8786L14.5166 17.1714L19.3577 12.1286C19.517 11.9623 19.7061 11.8303 19.9144 11.7403C20.1227 11.6503 20.3459 11.604 20.5714 11.604C20.7969 11.604 21.0202 11.6503 21.2285 11.7403C21.4367 11.8303 21.6259 11.9623 21.7851 12.1286ZM21.7851 32.5143C22.107 32.179 22.2879 31.7242 22.2879 31.25C22.2879 30.7758 22.107 30.321 21.7851 29.9857C21.4632 29.6504 21.0267 29.462 20.5714 29.462C20.1162 29.462 19.6796 29.6504 19.3577 29.9857L14.5166 35.0286L13.1554 33.7357C12.8172 33.4346 12.3799 33.2822 11.9358 33.3108C11.4918 33.3394 11.0758 33.5467 10.7758 33.8889C10.4757 34.2311 10.3152 34.6814 10.328 35.1447C10.3409 35.6079 10.5261 36.0478 10.8446 36.3714L13.416 38.8179C13.7414 39.1273 14.1687 39.2944 14.6092 39.2844C15.0497 39.2745 15.4696 39.0882 15.7817 38.7643L21.7817 32.5143H21.7851ZM25.7143 33.9286C25.7143 33.455 25.8949 33.0008 26.2164 32.6659C26.5379 32.331 26.9739 32.1429 27.4286 32.1429H36C36.4547 32.1429 36.8907 32.331 37.2122 32.6659C37.5337 33.0008 37.7143 33.455 37.7143 33.9286C37.7143 34.4022 37.5337 34.8564 37.2122 35.1913C36.8907 35.5261 36.4547 35.7143 36 35.7143H27.4286C26.9739 35.7143 26.5379 35.5261 26.2164 35.1913C25.8949 34.8564 25.7143 34.4022 25.7143 33.9286ZM27.4286 14.2857C26.9739 14.2857 26.5379 14.4739 26.2164 14.8087C25.8949 15.1436 25.7143 15.5978 25.7143 16.0714C25.7143 16.545 25.8949 16.9992 26.2164 17.3341C26.5379 17.669 26.9739 17.8571 27.4286 17.8571H36C36.4547 17.8571 36.8907 17.669 37.2122 17.3341C37.5337 16.9992 37.7143 16.545 37.7143 16.0714C37.7143 15.5978 37.5337 15.1436 37.2122 14.8087C36.8907 14.4739 36.4547 14.2857 36 14.2857H27.4286ZM0 5.35714C0 3.93634 0.541835 2.57373 1.50631 1.56907C2.47078 0.564412 3.77889 0 5.14286 0H42.8571C44.2211 0 45.5292 0.564412 46.4937 1.56907C47.4582 2.57373 48 3.93634 48 5.35714V44.6429C48 46.0637 47.4582 47.4263 46.4937 48.4309C45.5292 49.4356 44.2211 50 42.8571 50H5.14286C3.77889 50 2.47078 49.4356 1.50631 48.4309C0.541835 47.4263 0 46.0637 0 44.6429V5.35714ZM5.14286 3.57143C4.6882 3.57143 4.25217 3.75957 3.93067 4.09445C3.60918 4.42934 3.42857 4.88354 3.42857 5.35714V44.6429C3.42857 45.1165 3.60918 45.5707 3.93067 45.9055C4.25217 46.2404 4.6882 46.4286 5.14286 46.4286H42.8571C43.3118 46.4286 43.7478 46.2404 44.0693 45.9055C44.3908 45.5707 44.5714 45.1165 44.5714 44.6429V5.35714C44.5714 4.88354 44.3908 4.42934 44.0693 4.09445C43.7478 3.75957 43.3118 3.57143 42.8571 3.57143H5.14286Z"
fill="#6E6E6E"
/>
</svg>
</span>
<span class="menu__name"> ToDo Lists </span></a
>
</li>
<li class="menu__item">
<a
href="/shopping-list.html"
class="menu__link menu__link--active"
>
<span class="menu__icon">
<svg
width="50"
height="48"
viewBox="0 0 50 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M48.027 34.029H14.8367L16.5032 30.4054L44.1924 30.3518C45.1287 30.3518 45.9313 29.6378 46.0985 28.6501L49.9331 5.73596C50.0334 5.13499 49.883 4.51618 49.5151 4.04611C49.3333 3.81477 49.1065 3.62842 48.8505 3.49999C48.5945 3.37156 48.3154 3.30412 48.0326 3.30234L12.8079 3.17739L12.507 1.66605C12.3175 0.70212 11.5037 0 10.5785 0H1.96745C1.44565 0 0.945222 0.221292 0.576253 0.615195C0.207284 1.0091 0 1.54335 0 2.10041C0 2.65747 0.207284 3.19172 0.576253 3.58562C0.945222 3.97953 1.44565 4.20082 1.96745 4.20082H8.98451L10.2999 10.8769L13.5381 27.6147L9.36908 34.8799C9.15258 35.1918 9.02217 35.5623 8.99263 35.9492C8.96308 36.3362 9.03556 36.7243 9.20187 37.0695C9.53628 37.7776 10.2107 38.2239 10.9575 38.2239H14.4577C13.7115 39.2819 13.3085 40.5707 13.3096 41.8951C13.3096 45.2629 15.8734 48 19.028 48C22.1826 48 24.7464 45.2629 24.7464 41.8951C24.7464 40.5682 24.334 39.2771 23.5983 38.2239H32.5772C31.831 39.2819 31.428 40.5707 31.429 41.8951C31.429 45.2629 33.9929 48 37.1475 48C40.3021 48 42.8659 45.2629 42.8659 41.8951C42.8659 40.5682 42.4535 39.2771 41.7178 38.2239H48.0326C49.1138 38.2239 50 37.2837 50 36.1235C49.9968 35.567 49.7875 35.0345 49.4179 34.6421C49.0482 34.2497 48.5482 34.0293 48.027 34.029ZM13.6272 7.31871L45.7195 7.43176L42.5761 26.2224L17.3671 26.27L13.6272 7.31871ZM19.028 43.7754C18.0582 43.7754 17.2667 42.9305 17.2667 41.8951C17.2667 40.8598 18.0582 40.0149 19.028 40.0149C19.9978 40.0149 20.7892 40.8598 20.7892 41.8951C20.7892 42.3938 20.6037 42.8721 20.2734 43.2247C19.9431 43.5773 19.4951 43.7754 19.028 43.7754ZM37.1475 43.7754C36.1777 43.7754 35.3862 42.9305 35.3862 41.8951C35.3862 40.8598 36.1777 40.0149 37.1475 40.0149C38.1173 40.0149 38.9087 40.8598 38.9087 41.8951C38.9087 42.3938 38.7231 42.8721 38.3929 43.2247C38.0626 43.5773 37.6146 43.7754 37.1475 43.7754Z"
fill="#3BDCB5"
/>
</svg>
</span>
<span class="menu__name"> Shopping List </span>
</a>
</li>
<li class="menu__item">
<a href="countdown.html" class="menu__link"
><span class="menu__icon"
><svg
width="55"
height="48"
viewBox="0 0 55 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M54.5077 17.6683H38.7541C38.4834 17.6683 38.2618 17.8963 38.2618 18.1749V21.2149C38.2618 21.4936 38.4834 21.7216 38.7541 21.7216H54.5077C54.7785 21.7216 55 21.4936 55 21.2149V18.1749C55 17.8963 54.7785 17.6683 54.5077 17.6683ZM46.2617 26.2816H38.7541C38.4834 26.2816 38.2618 26.5096 38.2618 26.7882V29.8282C38.2618 30.1069 38.4834 30.3349 38.7541 30.3349H46.2617C46.5325 30.3349 46.754 30.1069 46.754 29.8282V26.7882C46.754 26.5096 46.5325 26.2816 46.2617 26.2816ZM25.7267 12H23.0621C22.6806 12 22.3729 12.3167 22.3729 12.7093V28.4159C22.3729 28.6439 22.4775 28.8529 22.656 28.9859L31.8189 35.8638C32.1266 36.0918 32.5573 36.0285 32.7789 35.7118L34.3604 33.4888V33.4825C34.5819 33.1658 34.5142 32.7225 34.2065 32.4945L26.4097 26.6932V12.7093C26.4159 12.3167 26.102 12 25.7267 12Z"
fill="#6E6E6E"
/>
<path
d="M46.0316 33.9363H42.4008C42.0491 33.9363 41.7161 34.1144 41.5277 34.409C40.7299 35.6429 39.8003 36.7847 38.7324 37.8282C36.8919 39.6269 34.7499 41.0388 32.3691 42.021C29.9005 43.04 27.281 43.5556 24.5799 43.5556C21.8726 43.5556 19.2531 43.04 16.7908 42.021C14.41 41.0388 12.268 39.6269 10.4275 37.8282C8.58699 36.0296 7.14222 33.9363 6.13717 31.6098C5.09442 29.2034 4.56677 26.6436 4.56677 23.9979C4.56677 21.3521 5.09442 18.7984 6.13717 16.3859C7.14222 14.0594 8.58699 11.9661 10.4275 10.1675C12.268 8.36886 14.41 6.95697 16.7908 5.97478C19.2531 4.95577 21.8789 4.44012 24.5799 4.44012C27.2873 4.44012 29.9067 4.95577 32.3691 5.97478C34.7499 6.95697 36.8919 8.36886 38.7324 10.1675C39.8003 11.2111 40.7299 12.3528 41.5277 13.5867C41.7161 13.8814 42.0491 14.0594 42.4008 14.0594H46.0316C46.465 14.0594 46.7414 13.6174 46.5467 13.2429C42.4511 5.28111 34.1468 0.10623 24.8752 0.00187245C11.3006 -0.163871 0.0251693 10.6954 4.29147e-05 23.9488C-0.0250835 37.2267 10.9866 48 24.5737 48C33.9647 48 42.4071 42.8067 46.5467 34.7528C46.7414 34.3783 46.4588 33.9363 46.0316 33.9363Z"
fill="#6E6E6E"
/>
</svg>
</span>
<span class="menu__name"> Countdown </span>
</a>
</li>
</ul>
</nav>
</header>
<section class="items">
<div class="items__add add-product">
<input
class="items__add-label"
type="text"
name="add-item"
id=""
placeholder="Add item..."
/>
<button class="items__add-btn">
<svg
width="24"
height="24"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 15V8M8 8V1M8 8H15M8 8H1"
stroke="#333333"
stroke-width="1"
stroke-linecap="round"
/>
</svg>
</button>
</div>
<h2 class="items__name">Products:</h2>
<ul class="items__list products"></ul>
</section>
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-firestore.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyAwIKdRbH4N4Fs1YdlycqNDMj5l7gOVdk4",
authDomain: "todologin-50b18.firebaseapp.com",
projectId: "todologin-50b18",
storageBucket: "todologin-50b18.appspot.com",
messagingSenderId: "103493385629",
appId: "1:103493385629:web:6be0a00aed8af4ddc9c374",
measurementId: "G-48WQCQSCXJ",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="./main.js"></script>
</body>
</html>