forked from fdnd-task/fix-the-flow-interactive-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
groups.html
266 lines (227 loc) · 16 KB
/
groups.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
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE html>
<html lang="nl">
<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">
<title>Funda</title>
<!-- Components -->
<link rel="stylesheet" href="./styles/compontents-root.css">
<link rel="stylesheet" href="./styles/compontents-globals.css">
<link rel="stylesheet" href="./styles/compontents-fonts.css">
<link rel="stylesheet" href="./styles/compontents-main.css">
<link rel="stylesheet" href="./styles/compontents-buttons.css">
<link rel="stylesheet" href="./styles/compontents-nav.css">
<link rel="stylesheet" href="./styles/compontents-footer.css">
<link rel="stylesheet" href="./styles/compontents-media.css">
<link rel="stylesheet" href="./styles/compontents-styles.css">
<!-- Objects -->
<link rel="stylesheet" href="./styles/object-header.css">
<link rel="stylesheet" href="./styles/object-breadcrumb.css">
<link rel="stylesheet" href="./styles/object-grid.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./assets/objects/default-footer.js"></script>
<script src="./assets/objects/gridlist-houses.js"></script>
<script src="./assets/objects/default-navbar.js"></script>
</head>
<body>
<default-navbar></default-navbar>
<!-- Mobile Share -->
<div class="share-overlay" id="share-overlay">
<div class="top">
<p>Delen</p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M13.2978 12L19.7339 5.57331C19.9043 5.40295 20 5.17202 20 4.93124C20 4.69047 19.9043 4.45954 19.7339 4.28918C19.5633 4.11903 19.332 4.02346 19.0909 4.02346C18.8498 4.02346 18.6185 4.11903 18.4479 4.28918L12.0117 10.7159L5.57562 4.28918C5.49232 4.19991 5.39186 4.12831 5.28025 4.07866C5.16863 4.029 5.04814 4.00229 4.92597 4.00014C4.80379 3.99799 4.68243 4.02043 4.56913 4.06613C4.45583 4.11182 4.35291 4.17984 4.26651 4.26612C4.1801 4.35239 4.11199 4.45517 4.06622 4.5683C4.02046 4.68143 3.99799 4.80261 4.00014 4.92461C4.0023 5.0466 4.02904 5.16692 4.07877 5.27837C4.1285 5.38982 4.20021 5.49013 4.28961 5.57331L10.7257 12L4.28961 18.4267C4.20021 18.5099 4.1285 18.6102 4.07877 18.7216C4.02904 18.8331 4.0023 18.9534 4.00014 19.0754C3.99799 19.1974 4.02046 19.3186 4.06622 19.4317C4.11199 19.5448 4.1801 19.6476 4.26651 19.7339C4.35291 19.8202 4.45583 19.8882 4.56913 19.9339C4.68243 19.9796 4.80379 20.002 4.92597 19.9999C5.04814 19.9977 5.16863 19.971 5.28025 19.9213C5.39186 19.8717 5.49232 19.8001 5.57562 19.7108L12.0117 13.2841L18.4479 19.7108C18.6185 19.881 18.8498 19.9765 19.0909 19.9765C19.332 19.9765 19.5633 19.881 19.7339 19.7108C19.9043 19.5405 20 19.3095 20 19.0688C20 18.828 19.9043 18.5971 19.7339 18.4267L13.2978 12Z" fill="#999999"/>
</svg>
</div>
<!-- search bar -->
<div class="search-bar">
<input type="text" placeholder="Zoeken op email">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
<path d="M21 21.1399L15.0001 15.1399M17 10.1399C17 14.0059 13.866 17.1399 10 17.1399C6.13401 17.1399 3 14.0059 3 10.1399C3 6.2739 6.13401 3.13989 10 3.13989C13.866 3.13989 17 6.2739 17 10.1399Z" stroke="#006199" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="shared-with">
<p>Gedeeld met</p>
<div class="person">
<div class="info">
<img src="./assets/person.jpg" alt="user1">
<p>example@hotmail.com</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M13.2978 12L19.7339 5.57331C19.9043 5.40295 20 5.17202 20 4.93124C20 4.69047 19.9043 4.45954 19.7339 4.28918C19.5633 4.11903 19.332 4.02346 19.0909 4.02346C18.8498 4.02346 18.6185 4.11903 18.4479 4.28918L12.0117 10.7159L5.57562 4.28918C5.49232 4.19991 5.39186 4.12831 5.28025 4.07866C5.16863 4.029 5.04814 4.00229 4.92597 4.00014C4.80379 3.99799 4.68243 4.02043 4.56913 4.06613C4.45583 4.11182 4.35291 4.17984 4.26651 4.26612C4.1801 4.35239 4.11199 4.45517 4.06622 4.5683C4.02046 4.68143 3.99799 4.80261 4.00014 4.92461C4.0023 5.0466 4.02904 5.16692 4.07877 5.27837C4.1285 5.38982 4.20021 5.49013 4.28961 5.57331L10.7257 12L4.28961 18.4267C4.20021 18.5099 4.1285 18.6102 4.07877 18.7216C4.02904 18.8331 4.0023 18.9534 4.00014 19.0754C3.99799 19.1974 4.02046 19.3186 4.06622 19.4317C4.11199 19.5448 4.1801 19.6476 4.26651 19.7339C4.35291 19.8202 4.45583 19.8882 4.56913 19.9339C4.68243 19.9796 4.80379 20.002 4.92597 19.9999C5.04814 19.9977 5.16863 19.971 5.28025 19.9213C5.39186 19.8717 5.49232 19.8001 5.57562 19.7108L12.0117 13.2841L18.4479 19.7108C18.6185 19.881 18.8498 19.9765 19.0909 19.9765C19.332 19.9765 19.5633 19.881 19.7339 19.7108C19.9043 19.5405 20 19.3095 20 19.0688C20 18.828 19.9043 18.5971 19.7339 18.4267L13.2978 12Z" fill="#F03C30"/>
</svg>
</div>
<div class="person">
<div class="info">
<img src="./assets/person.jpg" alt="user1">
<p>example@hotmail.com</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M13.2978 12L19.7339 5.57331C19.9043 5.40295 20 5.17202 20 4.93124C20 4.69047 19.9043 4.45954 19.7339 4.28918C19.5633 4.11903 19.332 4.02346 19.0909 4.02346C18.8498 4.02346 18.6185 4.11903 18.4479 4.28918L12.0117 10.7159L5.57562 4.28918C5.49232 4.19991 5.39186 4.12831 5.28025 4.07866C5.16863 4.029 5.04814 4.00229 4.92597 4.00014C4.80379 3.99799 4.68243 4.02043 4.56913 4.06613C4.45583 4.11182 4.35291 4.17984 4.26651 4.26612C4.1801 4.35239 4.11199 4.45517 4.06622 4.5683C4.02046 4.68143 3.99799 4.80261 4.00014 4.92461C4.0023 5.0466 4.02904 5.16692 4.07877 5.27837C4.1285 5.38982 4.20021 5.49013 4.28961 5.57331L10.7257 12L4.28961 18.4267C4.20021 18.5099 4.1285 18.6102 4.07877 18.7216C4.02904 18.8331 4.0023 18.9534 4.00014 19.0754C3.99799 19.1974 4.02046 19.3186 4.06622 19.4317C4.11199 19.5448 4.1801 19.6476 4.26651 19.7339C4.35291 19.8202 4.45583 19.8882 4.56913 19.9339C4.68243 19.9796 4.80379 20.002 4.92597 19.9999C5.04814 19.9977 5.16863 19.971 5.28025 19.9213C5.39186 19.8717 5.49232 19.8001 5.57562 19.7108L12.0117 13.2841L18.4479 19.7108C18.6185 19.881 18.8498 19.9765 19.0909 19.9765C19.332 19.9765 19.5633 19.881 19.7339 19.7108C19.9043 19.5405 20 19.3095 20 19.0688C20 18.828 19.9043 18.5971 19.7339 18.4267L13.2978 12Z" fill="#F03C30"/>
</svg>
</div>
<div class="person">
<div class="info">
<img src="./assets/person.jpg" alt="user1">
<p>example@hotmail.com</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M13.2978 12L19.7339 5.57331C19.9043 5.40295 20 5.17202 20 4.93124C20 4.69047 19.9043 4.45954 19.7339 4.28918C19.5633 4.11903 19.332 4.02346 19.0909 4.02346C18.8498 4.02346 18.6185 4.11903 18.4479 4.28918L12.0117 10.7159L5.57562 4.28918C5.49232 4.19991 5.39186 4.12831 5.28025 4.07866C5.16863 4.029 5.04814 4.00229 4.92597 4.00014C4.80379 3.99799 4.68243 4.02043 4.56913 4.06613C4.45583 4.11182 4.35291 4.17984 4.26651 4.26612C4.1801 4.35239 4.11199 4.45517 4.06622 4.5683C4.02046 4.68143 3.99799 4.80261 4.00014 4.92461C4.0023 5.0466 4.02904 5.16692 4.07877 5.27837C4.1285 5.38982 4.20021 5.49013 4.28961 5.57331L10.7257 12L4.28961 18.4267C4.20021 18.5099 4.1285 18.6102 4.07877 18.7216C4.02904 18.8331 4.0023 18.9534 4.00014 19.0754C3.99799 19.1974 4.02046 19.3186 4.06622 19.4317C4.11199 19.5448 4.1801 19.6476 4.26651 19.7339C4.35291 19.8202 4.45583 19.8882 4.56913 19.9339C4.68243 19.9796 4.80379 20.002 4.92597 19.9999C5.04814 19.9977 5.16863 19.971 5.28025 19.9213C5.39186 19.8717 5.49232 19.8001 5.57562 19.7108L12.0117 13.2841L18.4479 19.7108C18.6185 19.881 18.8498 19.9765 19.0909 19.9765C19.332 19.9765 19.5633 19.881 19.7339 19.7108C19.9043 19.5405 20 19.3095 20 19.0688C20 18.828 19.9043 18.5971 19.7339 18.4267L13.2978 12Z" fill="#F03C30"/>
</svg>
</div>
</div>
</div>
<!-- Mobile navigatie -->
<div class="menu-overlay hidden" id="menu-overlay">
<!-- Alle dropdowns -->
<div class="dropdown-overlay">
<button class="dropdown-button" data-target="#submenu1">
Kopen
<img src="./assets/svg/dropdown-arrow-down.svg" alt="">
</button>
<div class="dropdown" id="submenu1">
<div class="dropdown-item">
<a href="#">Zoek een koopwoning</a>
</div>
<div class="dropdown-item">
<a href="#">Zoek een NVM-aankoopmakelaar</a>
</div>
<div class="dropdown-item">
<a href="#">Bereken je maandlasten</a>
</div>
</div>
</div>
<div class="dropdown-overlay">
<button class="dropdown-button" data-target="#submenu2">
Huren
<img src="./assets/svg/dropdown-arrow-down.svg" alt="">
</button>
<div class="dropdown" id="submenu2">
<div class="dropdown-item">
<a href="#">Zoek een huurwoning</a>
</div>
</div>
</div>
<div class="dropdown-overlay">
<button class="dropdown-button" data-target="#submenu3">
Verkopen
<img src="./assets/svg/dropdown-arrow-down.svg" alt="">
</button>
<div class="dropdown" id="submenu3">
<div class="dropdown-item">
<a href="#">Plaats je huis op Funda</a>
</div>
<div class="dropdown-item">
<a href="#">Zoek een NVM-aankoopmakelaar</a>
</div>
<div class="dropdown-item">
<a href="#">Alles wat je moet weten over Funda</a>
</div>
</div>
</div>
</div>
<main>
<!-- Breadcrumb (navigatie van de homepage) -->
<div class="breadcrumb">
<div class="breadcrumb-list">
<a href="#">Home</a>
<span>></span>
<a href="#">Groepen met Bewaarde huizen</a>
</div>
</div>
<div class="banner">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<div class="content">
<h1>Groepen met Bewaarde huizen</h1>
<p>Kies uit de groepen die je hebt aangemaakt of maak een nieuwe groep aan.</p>
<div class="buttons">
<a href="#" class="btn btn-primary">Nieuwe groep</a>
</div>
</div>
<div class="cover-img">
<img src="./assets/img/cover-houses.png" alt="banner">
</div>
</div>
<div class="content">
<div class="default-grid">
<a class="item" href="./vila.html">
<img class="banner-img" src="https://cloud.funda.nl/valentina_media/183/549/325_1440x960.jpg" alt="Bloemfonteinstraat 8 F">
<div class="img-showcase">
<img class="banner-img" src="https://cloud.funda.nl/valentina_media/174/873/686_1440x960.jpg" alt="Bloemfonteinstraat 8 F">
<img class="banner-img" src="https://cloud.funda.nl/valentina_media/171/181/403_1440x960.jpg" alt="Bloemfonteinstraat 8 F">
<img class="banner-img" src="https://cloud.funda.nl/valentina_media/181/960/078_1440x960.jpg" alt="Bloemfonteinstraat 8 F">
</div>
<div class="item-content">
<h2>Villa's</h2>
<p class="postal-address">Gedeeld met Jelte</p>
<p class="date">1 uur geleden</p>
</div>
</a>
<a class="item" href="./appartementen.html">
<img class="banner-img" src="https://cloud.funda.nl/valentina_media/179/616/847_1440x960.jpg" alt="Bloemfonteinstraat 8 F">
<div class="img-showcase">
<img class="banner-img" src="https://cloud.funda.nl/valentina_media/167/632/827_1440x960.jpg" alt="Bloemfonteinstraat 8 F">
<img class="banner-img" src="https://cloud.funda.nl/valentina_media/183/924/402_1440x960.jpg" alt="Bloemfonteinstraat 8 F">
<img class="banner-img" src="https://cloud.funda.nl/valentina_media/183/837/271_1440x960.jpg" alt="Bloemfonteinstraat 8 F">
</div>
<div class="item-content">
<h2>Vrienden appartementen</h2>
<p class="postal-address">Gedeeld met Piet en Henk</p>
<p class="date">6 dagen geleden</p>
</div>
</a>
<a class="item" href="./index.html">
<img class="banner-img" src="https://cloud.funda.nl/valentina_media/184/154/585_1440x960.jpg" alt="Bloemfonteinstraat 8 F">
<div class="img-showcase">
<img class="banner-img" src="https://cloud.funda.nl/valentina_media/184/152/945_1440x960.jpg" alt="Bloemfonteinstraat 8 F">
<img class="banner-img" src="https://cloud.funda.nl/valentina_media/184/152/026_1440x960.jpg" alt="Bloemfonteinstraat 8 F">
<img class="banner-img" src="https://cloud.funda.nl/valentina_media/184/145/570_1440x960.jpg" alt="Bloemfonteinstraat 8 F">
</div>
<div class="item-content">
<h2>Toekomstige Droomwoningen</h2>
<p class="postal-address">Nog niet gedeeld met iemand</p>
<p class="date">13 dagen geleden</p>
</div>
</a>
</div>
<div class="pager">
<p>Pagina 1 van 1</p>
<div class="pager-pages flex-center-center">
<a href="#">1</a>
</div>
</div>
</div>
</main>
<default-footer></default-footer>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function () {
// Bewaar de oorspronkelijke grid-items voor resetten
var origineleGrid = $('#grid').html();
// Verzend formulier en filter grid bij formulierinzending
$('#searchForm').submit(function (e) {
e.preventDefault(); // zodat de pagina niet herladen wordt
var zoekterm = $('#searchInput').val().toLowerCase();
// Filter de grid op basis van de zoekterm
$('#grid a.item').each(function () {
// set eerst de text in lowercase zodat de zoekterm niet hoofdlettergevoelig is
var eigendomsTitel = $(this).find('h2').text().toLowerCase();
if (eigendomsTitel.includes(zoekterm)) {
$(this).show();
} else {
$(this).hide();
}
});
});
// Reset de grid naar hoe het was zonder de filter
$('#searchForm').on('reset', function () {
$('#grid').html(origineleGrid);
});
});
</script>
</body>
<script src="./js/main.js"></script>
<script src="./js/dropdown.js"></script>
</html>