forked from cmda-minor-web/web-app-from-scratch-2223
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
181 lines (162 loc) · 18.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food Specialist</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,300;0,400;0,700;1,300;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="public/dist/css/all.css">
<meta name="theme-color" content="#000000">
</head>
<body>
<dialog class="home" aria-expanded="true">
<h1 class="title title--h1">Food Specialist</h1>
<button class="cta cta--home">Start Exploring</button>
<svg class="icon icon--apple" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 466.969 466.969">
<g>
<g>
<path d="M426.58,128.224C385.759,82.41,313.114,66.3,256.14,87.913c-1.213-7.449-3.328-14.438-6.091-20.968
c45.582,16.227,104.152-2.124,127.033-46.402C333.271-7.383,270.38,8.428,240.184,48.92C219.012,17.678,185.49,1.001,183.436,0
l-20.71,42.542c0.398,0.194,33.715,17.124,44.163,43.828C138.517,62.871,51.856,92.393,20.13,159.243
c-15.881,33.462-15.291,69.628-9.882,105.46c4.954,32.822,12.909,65.525,26.426,95.939c17.143,38.57,44.366,73.359,83.148,91.738
c35.297,16.727,76.362,18.402,113.821,8.426c59.977,15.971,123.419,0.139,164.406-47.518
c28.46-33.09,44.077-75.547,53.309-117.665C463.961,238.119,468.521,175.291,426.58,128.224z M195.667,297.732
c0,0-19.248-1.937-32.034-24.309c-12.126-21.214-4.687-39.939-4.687-39.939s19.909,3.094,32.035,24.309
C203.767,280.165,195.667,297.732,195.667,297.732z M303.541,273.314c-12.606,22.474-31.838,24.563-31.838,24.563
s-8.241-17.502,4.366-39.976c11.954-21.311,31.838-24.563,31.838-24.563S315.496,252.003,303.541,273.314z"/>
<path d="M426.58,128.224C453.547,158.487,398.479,96.685,426.58,128.224L426.58,128.224z"/>
</g>
</g>
</svg>
<p class="home__subtitle">The master in protein</p>
<!-- BLOBBIES -->
<svg class="blob blob--tr" viewBox="0 0 121 134" xmlns="http://www.w3.org/2000/svg">
<path d="M98 0.992188H121V64C121 64 119.908 89.5892 117.108 97.3891C114.208 105.089 101.608 108.189 90.8081 116.289C80.0081 124.289 71.1081 137.289 64.9081 132.489C58.7081 127.789 55.2081 105.189 52.5081 92.4891C49.7081 79.7893 47.6081 77.0891 38.8081 74.0891C30.0081 71.0892 14.6081 67.8891 6.90806 60.2892C-0.79194 52.6893 -0.591938 40.589 2.50806 27.8892C5.70806 15.0893 12.6 2.39362 23 0.993636C23 1 78 0.992664 78 0.992664L98 0.992188Z"/>
</svg>
<svg class="blob blob--bl" viewBox="0 0 127 118" xmlns="http://www.w3.org/2000/svg">
<path d="M93.4922 57.7997C101.392 68.4997 115.592 61.8997 122.192 63.0997C128.692 64.2997 127.392 73.2997 124.792 80.8997C122.292 88.4997 118.392 94.5997 115.492 102C112.592 109.4 110.3 117.8 105 117H0C0 117 79.0922 93.1997 65.7922 98.7997C52.3922 104.4 0 117 0 117V82V67.5V25C6.1 12.2 24.2922 14.2997 38.6922 7.29971C53.1922 0.299705 67.9922 -4.6003 76.1922 6.9997C84.2922 18.6997 85.6922 46.9997 93.4922 57.7997Z"/>
</svg>
</dialog>
<header class="header">
<h2 class="title title--h2">Food Specialist</h2>
<svg class="icon icon--apple" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 466.969 466.969">
<g>
<g>
<path d="M426.58,128.224C385.759,82.41,313.114,66.3,256.14,87.913c-1.213-7.449-3.328-14.438-6.091-20.968
c45.582,16.227,104.152-2.124,127.033-46.402C333.271-7.383,270.38,8.428,240.184,48.92C219.012,17.678,185.49,1.001,183.436,0
l-20.71,42.542c0.398,0.194,33.715,17.124,44.163,43.828C138.517,62.871,51.856,92.393,20.13,159.243
c-15.881,33.462-15.291,69.628-9.882,105.46c4.954,32.822,12.909,65.525,26.426,95.939c17.143,38.57,44.366,73.359,83.148,91.738
c35.297,16.727,76.362,18.402,113.821,8.426c59.977,15.971,123.419,0.139,164.406-47.518
c28.46-33.09,44.077-75.547,53.309-117.665C463.961,238.119,468.521,175.291,426.58,128.224z M195.667,297.732
c0,0-19.248-1.937-32.034-24.309c-12.126-21.214-4.687-39.939-4.687-39.939s19.909,3.094,32.035,24.309
C203.767,280.165,195.667,297.732,195.667,297.732z M303.541,273.314c-12.606,22.474-31.838,24.563-31.838,24.563
s-8.241-17.502,4.366-39.976c11.954-21.311,31.838-24.563,31.838-24.563S315.496,252.003,303.541,273.314z"/>
<path d="M426.58,128.224C453.547,158.487,398.479,96.685,426.58,128.224L426.58,128.224z"/>
</g>
</g>
</svg>
</header>
<main class="page">
<section class="collapsible-header">
<h2 class="title title--h1">Ontdek producten</h2>
<button class="cta cta--icon barcode__control barcode__control--discloser">
Scan een barcode
<svg class="icon icon--camera" viewBox="0 0 101 81" xmlns="http://www.w3.org/2000/svg">
<path d="M31.4914 1.46623C32.4296 0.527696 33.7022 0.000283424 35.0293 0H65.0545C66.3815 0.000283424 67.6542 0.527696 68.5924 1.46623L77.1346 10.0084H90.0754C92.7298 10.0084 95.2755 11.0628 97.1524 12.9398C99.0293 14.8167 100.084 17.3624 100.084 20.0168V70.0587C100.084 72.713 99.0293 75.2587 97.1524 77.1356C95.2755 79.0126 92.7298 80.067 90.0754 80.067H10.0084C7.35399 80.067 4.80832 79.0126 2.93139 77.1356C1.05445 75.2587 0 72.713 0 70.0587V20.0168C0 17.3624 1.05445 14.8167 2.93139 12.9398C4.80832 11.0628 7.35399 10.0084 10.0084 10.0084H22.9492L31.4914 1.46623ZM37.1011 10.0084L28.5589 18.5505C27.6207 19.4891 26.348 20.0165 25.0209 20.0168H10.0084V70.0587H90.0754V20.0168H75.0628C73.7358 20.0165 72.4631 19.4891 71.5249 18.5505L62.9827 10.0084H37.1011ZM50.0419 32.5272C47.3875 32.5272 44.8418 33.5817 42.9649 35.4586C41.088 37.3356 40.0335 39.8812 40.0335 42.5356C40.0335 45.19 41.088 47.7357 42.9649 49.6126C44.8418 51.4895 47.3875 52.544 50.0419 52.544C52.6963 52.544 55.242 51.4895 57.1189 49.6126C58.9958 47.7357 60.0503 45.19 60.0503 42.5356C60.0503 39.8812 58.9958 37.3356 57.1189 35.4586C55.242 33.5817 52.6963 32.5272 50.0419 32.5272ZM30.0251 42.5356C30.0251 37.2268 32.134 32.1355 35.8879 28.3816C39.6418 24.6278 44.7331 22.5189 50.0419 22.5189C55.3507 22.5189 60.442 24.6278 64.1959 28.3816C67.9498 32.1355 70.0587 37.2268 70.0587 42.5356C70.0587 47.8444 67.9498 52.9357 64.1959 56.6896C60.442 60.4435 55.3507 62.5524 50.0419 62.5524C44.7331 62.5524 39.6418 60.4435 35.8879 56.6896C32.134 52.9357 30.0251 47.8444 30.0251 42.5356Z"></path>
</svg>
</button>
</section>
<section class="search">
<form class="search__form">
<input type="text" class="search__input" name="search" placeholder="Zoek op product">
<button class="search__control cta cta--no-padding">
<div class="icon icon--loading"></div>
<svg class="icon icon--search" viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg">
<path d="M12.3307 20.667C7.73573 20.667 3.9974 16.9287 3.9974 12.3337C3.9974 7.73866 7.73573 4.00033 12.3307 4.00033C16.9257 4.00033 20.6641 7.73866 20.6641 12.3337C20.6641 14.0303 20.1491 15.6037 19.2757 16.922C18.6557 17.857 17.8541 18.6587 16.9191 19.2787C15.6024 20.152 14.0274 20.667 12.3307 20.667ZM21.6657 19.312C23.1241 17.3637 23.9974 14.9537 23.9974 12.3337C23.9974 5.89033 18.7741 0.666992 12.3307 0.666992C5.8874 0.666992 0.664062 5.89033 0.664062 12.3337C0.664062 18.777 5.8874 24.0003 12.3307 24.0003C14.9507 24.0003 17.3607 23.127 19.3091 21.6687L26.1524 28.512L28.5091 26.1553L21.6657 19.312Z"></path>
</svg>
</button>
</form>
<p class="search__count">Totaal: 0 items</p>
<section class="search__results">
<div class="icon icon--loading icon--loading-results"></div>
</section>
<section class="paginator">
<button class="paginator__control" value="previous">
<svg class="icon icon--arrow icon--arrow-right" viewBox="0 0 101 88" xmlns="http://www.w3.org/2000/svg">
<path d="M48.2086 85.6646C47.0356 86.8373 45.4448 87.4961 43.7861 87.4961C42.1274 87.4961 40.5367 86.8373 39.3636 85.6646L1.83168 48.1327C0.658984 46.9597 -1.89417e-05 45.3689 -1.90867e-05 43.7102C-1.92317e-05 42.0515 0.658984 40.4607 1.83168 39.2877L39.3636 1.7558C40.5434 0.616296 42.1235 -0.0142026 43.7636 -2.70571e-06C45.4037 0.0142972 46.9726 0.672198 48.1324 1.832C49.2922 2.9917 49.9501 4.56069 49.9643 6.20079C49.9786 7.84089 49.3481 9.421 48.2086 10.6008L21.3545 37.4549L93.8287 37.4549C95.4877 37.4549 97.0787 38.1139 98.2518 39.287C99.4249 40.4601 100.084 42.0512 100.084 43.7102C100.084 45.3692 99.4249 46.9603 98.2518 48.1334C97.0787 49.3065 95.4877 49.9655 93.8287 49.9655L21.3545 49.9655L48.2086 76.8196C49.3813 77.9926 50.0401 79.5834 50.0401 81.2421C50.0401 82.9008 49.3813 84.4916 48.2086 85.6646Z"/>
</svg>
</button>
<button class="paginator__control" value="first">1</button>
<button class="paginator__control" value="two">2</button>
<button class="paginator__control" value="three">3</button>
<button class="paginator__control" value="four">4</button>
<button class="paginator__control" value="five">5</button>
<button class="paginator__control" value="six">...</button>
<button class="paginator__control" value="last">10</button>
<button class="paginator__control" value="next">
<svg class="icon icon--arrow icon--arrow-left" viewBox="0 0 101 88" xmlns="http://www.w3.org/2000/svg">
<path d="M48.2086 85.6646C47.0356 86.8373 45.4448 87.4961 43.7861 87.4961C42.1274 87.4961 40.5367 86.8373 39.3636 85.6646L1.83168 48.1327C0.658984 46.9597 -1.89417e-05 45.3689 -1.90867e-05 43.7102C-1.92317e-05 42.0515 0.658984 40.4607 1.83168 39.2877L39.3636 1.7558C40.5434 0.616296 42.1235 -0.0142026 43.7636 -2.70571e-06C45.4037 0.0142972 46.9726 0.672198 48.1324 1.832C49.2922 2.9917 49.9501 4.56069 49.9643 6.20079C49.9786 7.84089 49.3481 9.421 48.2086 10.6008L21.3545 37.4549L93.8287 37.4549C95.4877 37.4549 97.0787 38.1139 98.2518 39.287C99.4249 40.4601 100.084 42.0512 100.084 43.7102C100.084 45.3692 99.4249 46.9603 98.2518 48.1334C97.0787 49.3065 95.4877 49.9655 93.8287 49.9655L21.3545 49.9655L48.2086 76.8196C49.3813 77.9926 50.0401 79.5834 50.0401 81.2421C50.0401 82.9008 49.3813 84.4916 48.2086 85.6646Z"/>
</svg>
</button>
</section>
</section>
</main>
<dialog class="detailpage">
<section>
<img width="100%" class="detailpage__image" src="" alt="product-foto">
<section class="detailpage__content">
<h2 class="detailpage__title title title--h2">Titel product</h2>
<h2 class="detailpage__brand title title--h3">Product Merk</h2>
<p class="detailpage__quantity">Hoeveelheid</p>
<p class="detailpage__ingredients">Ingredienten</p>
<p class="detailpage__allergens">Allergenen</p>
<p class="detailpage__countries">Beschikbare landen</p>
<section class="detailpage__protein">
<img src="public/assets/images/protein.png" class="detailpage__protein-image">
<p class="detailpage__protein-score">Hoeveelheid eiwitten</p>
</section>
<section class="detailpage__scores">
<img class="detailpage__nutriscore" alt="Nutriment score">
<img class="detailpage__novascore" alt="Nova score">
<img class="detailpage__ecoscore" alt="Eco score">
</section>
<p class="detailpage__barcode"></p>
</section>
<table class="detailpage__table"></table>
</section>
<button class="detailpage__control">
<svg class="icon icon--cross" viewBox="0 0 91 91" xmlns="http://www.w3.org/2000/svg">
<path d="M1.90147 1.98266C3.11935 0.765153 4.77093 0.0811917 6.49301 0.0811917C8.21509 0.0811917 9.86667 0.765153 11.0845 1.98266L45.4594 36.3575L79.8343 1.98266C80.4333 1.36238 81.15 0.867625 81.9423 0.52726C82.7346 0.186895 83.5868 0.00773855 84.4492 0.000245209C85.3115 -0.00724813 86.1667 0.15707 86.9648 0.483614C87.7629 0.810158 88.4881 1.29239 89.0978 1.90216C89.7076 2.51194 90.1898 3.23705 90.5164 4.03519C90.8429 4.83333 91.0072 5.68851 90.9998 6.55083C90.9923 7.41315 90.8131 8.26535 90.4727 9.05769C90.1324 9.85003 89.6376 10.5667 89.0173 11.1657L54.6425 45.5406L89.0173 79.9154C90.2003 81.1403 90.8549 82.7808 90.8401 84.4836C90.8253 86.1864 90.1423 87.8153 88.9382 89.0194C87.7341 90.2235 86.1052 90.9065 84.4024 90.9213C82.6996 90.9361 81.0591 90.2815 79.8343 89.0985L45.4594 54.7237L11.0845 89.0985C9.85969 90.2815 8.21919 90.9361 6.51638 90.9213C4.81357 90.9065 3.1847 90.2235 1.98058 89.0194C0.776469 87.8153 0.093458 86.1864 0.0786611 84.4836C0.0638641 82.7808 0.718466 81.1403 1.90147 79.9154L36.2763 45.5406L1.90147 11.1657C0.683961 9.94786 0 8.29628 0 6.5742C0 4.85212 0.683961 3.20054 1.90147 1.98266Z"/>
</svg>
</button>
</dialog>
<dialog class="barcode" aria-expanded="false">
<h2 class="title title--h1">Scan een barcode</h2>
<section class="barcode__observer">
<video class="barcode__video"></video>
<canvas class="barcode__display barcode__display--overlay"></canvas>
</section>
<p class="support">Gescande barcode: <span class="support__boolean">geen</span></p>
<button id="redirect" class="cta barcode__control barcode__control--redirect">
Open product
<svg class="icon icon--camera" viewBox="0 0 101 81" xmlns="http://www.w3.org/2000/svg">
<path d="M31.4914 1.46623C32.4296 0.527696 33.7022 0.000283424 35.0293 0H65.0545C66.3815 0.000283424 67.6542 0.527696 68.5924 1.46623L77.1346 10.0084H90.0754C92.7298 10.0084 95.2755 11.0628 97.1524 12.9398C99.0293 14.8167 100.084 17.3624 100.084 20.0168V70.0587C100.084 72.713 99.0293 75.2587 97.1524 77.1356C95.2755 79.0126 92.7298 80.067 90.0754 80.067H10.0084C7.35399 80.067 4.80832 79.0126 2.93139 77.1356C1.05445 75.2587 0 72.713 0 70.0587V20.0168C0 17.3624 1.05445 14.8167 2.93139 12.9398C4.80832 11.0628 7.35399 10.0084 10.0084 10.0084H22.9492L31.4914 1.46623ZM37.1011 10.0084L28.5589 18.5505C27.6207 19.4891 26.348 20.0165 25.0209 20.0168H10.0084V70.0587H90.0754V20.0168H75.0628C73.7358 20.0165 72.4631 19.4891 71.5249 18.5505L62.9827 10.0084H37.1011ZM50.0419 32.5272C47.3875 32.5272 44.8418 33.5817 42.9649 35.4586C41.088 37.3356 40.0335 39.8812 40.0335 42.5356C40.0335 45.19 41.088 47.7357 42.9649 49.6126C44.8418 51.4895 47.3875 52.544 50.0419 52.544C52.6963 52.544 55.242 51.4895 57.1189 49.6126C58.9958 47.7357 60.0503 45.19 60.0503 42.5356C60.0503 39.8812 58.9958 37.3356 57.1189 35.4586C55.242 33.5817 52.6963 32.5272 50.0419 32.5272ZM30.0251 42.5356C30.0251 37.2268 32.134 32.1355 35.8879 28.3816C39.6418 24.6278 44.7331 22.5189 50.0419 22.5189C55.3507 22.5189 60.442 24.6278 64.1959 28.3816C67.9498 32.1355 70.0587 37.2268 70.0587 42.5356C70.0587 47.8444 67.9498 52.9357 64.1959 56.6896C60.442 60.4435 55.3507 62.5524 50.0419 62.5524C44.7331 62.5524 39.6418 60.4435 35.8879 56.6896C32.134 52.9357 30.0251 47.8444 30.0251 42.5356Z"></path>
</svg>
</button>
<button class="barcode__control barcode__control--start cta">
<span>Start met scannen</span>
<svg class="icon icon--camera" viewBox="0 0 101 81" xmlns="http://www.w3.org/2000/svg">
<path d="M31.4914 1.46623C32.4296 0.527696 33.7022 0.000283424 35.0293 0H65.0545C66.3815 0.000283424 67.6542 0.527696 68.5924 1.46623L77.1346 10.0084H90.0754C92.7298 10.0084 95.2755 11.0628 97.1524 12.9398C99.0293 14.8167 100.084 17.3624 100.084 20.0168V70.0587C100.084 72.713 99.0293 75.2587 97.1524 77.1356C95.2755 79.0126 92.7298 80.067 90.0754 80.067H10.0084C7.35399 80.067 4.80832 79.0126 2.93139 77.1356C1.05445 75.2587 0 72.713 0 70.0587V20.0168C0 17.3624 1.05445 14.8167 2.93139 12.9398C4.80832 11.0628 7.35399 10.0084 10.0084 10.0084H22.9492L31.4914 1.46623ZM37.1011 10.0084L28.5589 18.5505C27.6207 19.4891 26.348 20.0165 25.0209 20.0168H10.0084V70.0587H90.0754V20.0168H75.0628C73.7358 20.0165 72.4631 19.4891 71.5249 18.5505L62.9827 10.0084H37.1011ZM50.0419 32.5272C47.3875 32.5272 44.8418 33.5817 42.9649 35.4586C41.088 37.3356 40.0335 39.8812 40.0335 42.5356C40.0335 45.19 41.088 47.7357 42.9649 49.6126C44.8418 51.4895 47.3875 52.544 50.0419 52.544C52.6963 52.544 55.242 51.4895 57.1189 49.6126C58.9958 47.7357 60.0503 45.19 60.0503 42.5356C60.0503 39.8812 58.9958 37.3356 57.1189 35.4586C55.242 33.5817 52.6963 32.5272 50.0419 32.5272ZM30.0251 42.5356C30.0251 37.2268 32.134 32.1355 35.8879 28.3816C39.6418 24.6278 44.7331 22.5189 50.0419 22.5189C55.3507 22.5189 60.442 24.6278 64.1959 28.3816C67.9498 32.1355 70.0587 37.2268 70.0587 42.5356C70.0587 47.8444 67.9498 52.9357 64.1959 56.6896C60.442 60.4435 55.3507 62.5524 50.0419 62.5524C44.7331 62.5524 39.6418 60.4435 35.8879 56.6896C32.134 52.9357 30.0251 47.8444 30.0251 42.5356Z"></path>
</svg>
</button>
<button class="barcode__control barcode__control--pageclose cta cta--no-padding">
<svg class="icon icon--cross" viewBox="0 0 91 91" xmlns="http://www.w3.org/2000/svg">
<path d="M1.90147 1.98266C3.11935 0.765153 4.77093 0.0811917 6.49301 0.0811917C8.21509 0.0811917 9.86667 0.765153 11.0845 1.98266L45.4594 36.3575L79.8343 1.98266C80.4333 1.36238 81.15 0.867625 81.9423 0.52726C82.7346 0.186895 83.5868 0.00773855 84.4492 0.000245209C85.3115 -0.00724813 86.1667 0.15707 86.9648 0.483614C87.7629 0.810158 88.4881 1.29239 89.0978 1.90216C89.7076 2.51194 90.1898 3.23705 90.5164 4.03519C90.8429 4.83333 91.0072 5.68851 90.9998 6.55083C90.9923 7.41315 90.8131 8.26535 90.4727 9.05769C90.1324 9.85003 89.6376 10.5667 89.0173 11.1657L54.6425 45.5406L89.0173 79.9154C90.2003 81.1403 90.8549 82.7808 90.8401 84.4836C90.8253 86.1864 90.1423 87.8153 88.9382 89.0194C87.7341 90.2235 86.1052 90.9065 84.4024 90.9213C82.6996 90.9361 81.0591 90.2815 79.8343 89.0985L45.4594 54.7237L11.0845 89.0985C9.85969 90.2815 8.21919 90.9361 6.51638 90.9213C4.81357 90.9065 3.1847 90.2235 1.98058 89.0194C0.776469 87.8153 0.093458 86.1864 0.0786611 84.4836C0.0638641 82.7808 0.718466 81.1403 1.90147 79.9154L36.2763 45.5406L1.90147 11.1657C0.683961 9.94786 0 8.29628 0 6.5742C0 4.85212 0.683961 3.20054 1.90147 1.98266Z"/>
</svg>
</button>
</dialog>
<script src="./public/dist/scripts/main.js"></script>
</body>
</html>