-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
392 lines (347 loc) · 22.3 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
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lindenhof</title>
<!-- Main CSS + Slick Slider CSS Files -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Montserrat:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
</head>
<body>
<!-- Header start -->
<div>
<div class="bg-image">
<header class="container">
<div class="logo">
<h2 id="logo">Lindenhof</h2>
</div>
<div class="language ">
<label for="language"><svg width="15" height="15" viewBox="0 0 15 15" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.5 0C3.35786 0 0 3.35786 0 7.5C0 11.6421 3.35786 15 7.5 15C11.6421 15 15 11.6421 15 7.5C15 3.35786 11.6421 0 7.5 0ZM1.19729 5.90436C1.06845 6.41489 1 6.94945 1 7.5C1 10.5736 3.1333 13.1489 6 13.8261V13.2071L5 12.2071V10.7071L4 9.70711V8.5C4 8.22386 4.22386 8 4.5 8H8.5C9.32843 8 10 8.67157 10 9.5V10.0118C10.5109 10.0849 10.9151 10.4891 10.9882 11H12.9782C13.625 9.9897 14 8.78864 14 7.5C14 4.79606 12.349 2.47775 10 1.49818V2.5C10 3.32843 9.32846 4 8.50004 4H7.50004C7.2239 4 7.00004 4.22386 7.00004 4.5C7.00004 5.32843 6.32846 6 5.50004 6H5.00004V6.70711L4.5607 7.14645C3.97491 7.73223 3.02516 7.73223 2.43938 7.14645L1.19729 5.90436Z"
fill="white" />
</svg>
</label>
<select name="language" id="language">
<option value="en">English</option>
<option value="german" selected>German</option>
<option value="french">French</option>
</select>
</div>
</header>
<main class="container">
<section class="main-section">
<h1 id="title">Hotel room directory</h1>
<P id="paragraph">Welcome you at the Hotel Lindenhof by Crossworld AG, Dear guests, on the following
page you will
find
some information regarding your stay, If you have any question, don’t hesitate to contact us</P>
<div class="search-section">
<input class="search-input" type="text" placeholder="" />
<button type="button" id="serach-btn">Search</button>
</div>
</section>
</main>
</div>
<!-- Services Section -->
<section class="services container">
<h2 class="section-title" id="title">Our Best Services</h2>
<div id="list" class="list-data">
</div>
</section>
<!-- Slider Section -->
<section class="slider-wrapper">
<div class="slider container">
<div class="slider-contain">
<div class="slideshow-container">
<div class="mySlides fade">
<img src="assets/images/slider/1.jpg" style="width:100%">
<!-- <div class="text">Caption</div> -->
</div>
<div class="mySlides fade">
<img src="assets/images/slider/2.jpg" style="width:100%">
<!-- <div class="text">Caption</div> -->
</div>
<div class="mySlides fade">
<img src="assets/images/slider/3.jpg" style="width:100%">
<!-- <div class="text">Caption</div> -->
</div>
<a class="prev" onclick="plusSlides(-1)">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M35.5408 17.7162C35.5408 27.5006 27.609 35.4324 17.8246 35.4324C8.04022 35.4324 0.108398 27.5006 0.108398 17.7162C0.108399 7.93182 8.04022 -8.55379e-07 17.8246 0C27.609 8.55378e-07 35.5408 7.93182 35.5408 17.7162ZM15.4623 24.1109L9.06765 17.7163L15.4623 11.3217L17.1326 12.992L13.5894 16.5351L26.0922 16.5351L26.0922 18.8973L13.5892 18.8973L17.1326 22.4406L15.4623 24.1109Z"
fill="#FFF7EC" />
</svg>
</a>
<a class="next" onclick="plusSlides(1)">
<svg width="36" height="36" viewBox="0 0 36 36" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.268596 17.9847C0.268597 8.1838 8.21383 0.238556 18.0148 0.238553C27.8157 0.23855 35.761 8.18379 35.761 17.9847C35.761 27.7857 27.8157 35.7309 18.0148 35.7309C8.21384 35.7309 0.268598 27.7857 0.268596 17.9847ZM20.3811 11.5792L26.7866 17.9846L20.3811 24.3901L18.708 22.7169L22.2571 19.1678L9.73323 19.1678L9.73324 16.8017L22.2574 16.8017L18.708 13.2523L20.3811 11.5792Z"
fill="#FFF7EC" />
</svg>
</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</div>
<div class="slider-data">
<h2 id="s_title">Toursit office interlaken</h2>
<p id="s_subtitle">Why the Holiday Region Interlaken is always worth visiting</p>
<ul>
<li id="s_line1">Enjoy beautifully panoramic views of lakes and mountains</li>
<li id="s_line2">Visit unique day-trip destinations</li>
<li id="s_line3">Discover Europe’s number one destination for adventure sports</li>
<li id="s_line4">Attend conferences and events with a magnificent backdrop</li>
</ul>
<a class="view" href="https://www.brienzersee.ch/en/destinations/lake-brienz/brienz-surroundings"
target="_blank" id="s_button">View</a>
</div>
</div>
</section>
</div>
<!-- Footer for Copyright and stuff like that, a little fame for me... -->
<div class="footer-h">
<div class="bg-right"></div>
<footer class="footer container">
<div class="left ">
<h2 class="section-title" id="b_title">Business card</h2>
<ul class="business">
<li onclick="openMap()">
<svg width="23" height="26" viewBox="0 0 23 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.84615 11.2667C8.84615 9.83266 10.0348 8.66739 11.5 8.66739C12.9652 8.66739 14.1538 9.83266 14.1538 11.2667C14.1538 12.7008 12.9652 13.8661 11.5 13.8661C10.0348 13.8661 8.84615 12.7008 8.84615 11.2667Z"
fill="#59443E" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 11.2667C0 5.04494 5.15053 0 11.5 0C17.8495 0 23 5.04494 23 11.2667C23 15.9045 20.6323 19.5788 18.0965 22.063C16.8257 23.308 15.4944 24.2732 14.3542 24.932C13.7844 25.2612 13.2518 25.5199 12.7889 25.6991C12.3518 25.8682 11.893 26 11.5 26C11.107 26 10.6482 25.8682 10.2111 25.6991C9.74816 25.5199 9.21562 25.2612 8.6458 24.932C7.50556 24.2732 6.17433 23.308 4.90353 22.063C2.36774 19.5788 0 15.9045 0 11.2667ZM11.5 6.933C9.05876 6.933 7.07692 8.8737 7.07692 11.2667C7.07692 13.6597 9.05874 15.6004 11.5 15.6004C13.9413 15.6004 15.9231 13.6597 15.9231 11.2667C15.9231 8.8737 13.9412 6.933 11.5 6.933Z"
fill="#59443E" />
</svg>
<div>
<a class="address" id="a_line1">Hotel Lindenhof by Crossworld AG, Lindenhofweg 15</a>
<a class="address" id="a_line">
3855 Brienz, Switzerland</a>
</div>
</li>
<li>
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3.66667 0C1.64162 0 0 1.64162 0 3.66667V6.6C0 15.1052 6.89481 22 15.4 22H18.3333C20.3584 22 22 20.3584 22 18.3333V16.3064C22 15.4732 21.5292 14.7114 20.7839 14.3387L17.2405 12.567C16.043 11.9683 14.5929 12.569 14.1695 13.8391L13.7328 15.1492C13.5669 15.647 13.0562 15.9434 12.5417 15.8405C9.32108 15.1964 6.80364 12.6789 6.15952 9.45832C6.05661 8.94378 6.35295 8.43313 6.85076 8.26719L8.47675 7.7252C9.56734 7.36167 10.1942 6.21977 9.91536 5.10451L9.05584 1.66642C8.811 0.687054 7.93104 0 6.92153 0H3.66667Z"
fill="#59443E" />
</svg>
<div>
<a href="tel:+41339522030">+41 33 952 20 30</a>
</div>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
<path fill="#59443E" d="M21 23h-18l3-6h2.203l-1.967 4h11.527l-1.956-4h2.193l3 6zm-18.236-4h-2.764v-14h4v-4h16v4h4v14h-2.764l-2-4h-14.472l-2 4zm13.236-8h-2v1h2v-1zm0-2h-2v1h2v-1zm3 2h-2v1h2v-1zm0-2h-2v1h2v-1zm-13-4h12v-2h-12v2zm-1 7h7v-3h-7v3z"/>
</svg>
<div>
<a href="fax:+41.33.9522033" style="margin-top: 0.5em;">+41 33 952 20 40</a>
</div>
</li>
<li>
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 11C0 4.92487 4.92487 0 11 0C17.0751 0 22 4.92487 22 11C22 17.0751 17.0751 22 11 22C4.92487 22 0 17.0751 0 11ZM1.46667 11C1.46667 6.22003 4.98455 2.2617 9.57252 1.57282L10.2667 1.9199V2.48012L9.20539 3.01077C8.97158 3.12767 8.81768 3.36021 8.80143 3.62111C8.78519 3.88202 8.90906 4.13184 9.12657 4.27685L11.3266 5.74352C11.447 5.82383 11.5886 5.86668 11.7333 5.86668H12.4667C12.8717 5.86668 13.2 5.53836 13.2 5.13335V4.40001H13.9333V5.13335C13.9333 5.32784 14.0106 5.51437 14.1481 5.65189L14.6667 6.17044V7.02959L14.3629 7.33335H13.3731L10.5946 5.9441C10.3882 5.84087 10.1452 5.84087 9.93873 5.9441L8.6269 6.60001H6.60002C6.26351 6.60001 5.97019 6.82903 5.88858 7.15549L5.15524 10.0888C5.09277 10.3387 5.16599 10.6031 5.34814 10.7852L7.54814 12.9852C7.60387 13.041 7.66823 13.0873 7.73873 13.1226L8.80002 13.6532V15.4C8.80002 15.5945 8.87728 15.781 9.0148 15.9186L9.53335 16.4371V17.6C9.53335 17.7139 9.55986 17.8261 9.61077 17.928L10.3441 19.3946C10.4683 19.6431 10.7222 19.8 11 19.8H12.4667C12.7119 19.8 12.9408 19.6775 13.0769 19.4735L14.5435 17.2735C14.5604 17.2482 14.5757 17.2218 14.5893 17.1946L15.3226 15.728C15.3735 15.6261 15.4 15.5139 15.4 15.4V14.1778L17.4534 11.44C17.62 11.2178 17.6468 10.9205 17.5226 10.6721L17.3199 10.2667H18.3333C18.7384 10.2667 19.0667 9.93836 19.0667 9.53335V8.80001H20.2782C20.4451 9.50624 20.5333 10.2428 20.5333 11C20.5333 16.2651 16.2651 20.5333 11 20.5333C5.73489 20.5333 1.46667 16.2651 1.46667 11Z"
fill="#59443E" />
</svg>
<a href="https://www.lindenhof.com" target="_blank">www.lindenhof.com</a>
</li>
<li>
<svg width="21" height="19" viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 2.19231C0 0.981529 0.940202 0 2.1 0H18.9C20.0598 0 21 0.981529 21 2.19231V3.95723L10.5 10.1231L0 3.95721V2.19231Z"
fill="#59443E" />
<path
d="M0 5.6341V16.8077C0 18.0185 0.940203 19 2.1 19H18.9C20.0598 19 21 18.0185 21 16.8077V5.63413L10.5 11.8L0 5.6341Z"
fill="#59443E" />
</svg>
<a href="mailto:[email protected]">[email protected]</a>
</li>
</ul>
</div>
<div class="right ">
<!-- <h2 class="section-title">Other Hotel info</h2> -->
<div class="scanner-section">
<img src="assets/images/scanner.jpg" alt="scanner" width="150" height="150" />
<div class="scanner-content">
<h5 id="head">Scan QR</h5>
<p id="desc">To get the system on your smartphone</p>
</div>
</div>
<div class="media">
<h3 id="fs_title">Social Media</h3>
<ul>
<li>
<a href="https://www.facebook.com/gartenhotellindenhof" target="_blank">
<svg width="20" height="19" viewBox="0 0 20 19" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M0 9.5104C0 4.25795 4.47715 0 10 0C15.5228 0 20 4.25795 20 9.5104C20 14.5498 15.8787 18.6737 10.6667 19V11.4125H13.3333V10.1444H10.6667V8.24235C10.6667 7.19186 11.5621 6.34027 12.6667 6.34027H13.3333V5.07221H12.6667C10.8257 5.07221 9.33333 6.49153 9.33333 8.24235V10.1444H6.66667V11.4125H9.33333V19C4.12131 18.6737 0 14.5498 0 9.5104Z"
fill="#59443E" />
</svg>
</a>
</li>
<li>
<a href="https://www.instagram.com/lindenhofbrienz/" target="_blank">
<svg width="19" height="19" viewBox="0 0 19 19" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9.5 6.33333C7.7511 6.33333 6.33333 7.7511 6.33333 9.5C6.33333 11.2489 7.7511 12.6667 9.5 12.6667C11.2489 12.6667 12.6667 11.2489 12.6667 9.5C12.6667 7.7511 11.2489 6.33333 9.5 6.33333Z"
fill="#59443E" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.7 0C2.55198 0 0 2.55198 0 5.7V13.3C0 16.448 2.55198 19 5.7 19H13.3C16.448 19 19 16.448 19 13.3V5.7C19 2.55198 16.448 0 13.3 0H5.7ZM5.06667 9.5C5.06667 7.05154 7.05154 5.06667 9.5 5.06667C11.9485 5.06667 13.9333 7.05154 13.9333 9.5C13.9333 11.9485 11.9485 13.9333 9.5 13.9333C7.05154 13.9333 5.06667 11.9485 5.06667 9.5ZM13.9333 5.06667H15.2V3.8H13.9333V5.06667Z"
fill="#59443E" />
</svg>
</a>
</li>
</ul>
<!-- <h3 class="weather-title">Weather</h3>
<div class="weather">
<figure>
<img src="./assets/images/1.svg" alt="" width="50" height="50" />
<div class="content">
<h6>40 C</h6>
<p>Wed, 09-21</p>
</div>
</figure>
<figure>
<img src="./assets/images/2.svg" alt="" width="50" height="50" />
<div class="content">
<h6>21 C</h6>
<p>Thu, 10-21</p>
</div>
</figure>
</div> -->
</div>
</div>
</footer>
</div>
<!-- End footer -->
<!-- --------------------------<Scripts>---------------------------------- -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
getData('german');
$('select').on('change', function () {
getData(this.value);
});
function refresh() {
setTimeout(() => {
$('.accordion-toggle').on('click', function (event) {
event.preventDefault();
// create accordion variables
var accordion = $(this);
var accordionContent = accordion.next('.accordion-content');
// toggle accordion link open class
accordion.toggleClass("open");
// toggle accordion content
accordionContent.slideToggle(250);
});
// get input field and add 'keyup' event listener
let searchInput = document.querySelector('.search-input');
searchInput.addEventListener('keyup', search);
// get all title
let titles = document.querySelectorAll('.list-data .title_id');
let searchTerm = '';
let tit = '';
function search(e) {
// get input fieled value and change it to lower case
searchTerm = e.target.value.toLowerCase();
titles.forEach((title) => {
// navigate to p in the title, get its value and change it to lower case
tit = title.textContent.toLowerCase();
// it search term not in the title's title hide the title. otherwise, show it.
tit.includes(searchTerm) ? title.style.display = 'block' : title.style.display = 'none';
});
}
}, 1000);
}
function getData(value) {
let url = 'assets/js/' + value + '.json'
$.getJSON(url, function (data) {
$('#logo').html(data.header.logo);
$('.main-section #title').html(data.hero_section.title);
$('.main-section #paragraph').html(data.hero_section.paragraph);
$('.main-section #serach-btn').html(data.hero_section.button);
$('.services #title').html(data.best_services.title);
$('.footer #b_title').html(data.footer.title);
$('.footer #fs_title').html(data.footer.social_title);
$('.footer #a_label').html(data.footer.address.label);
$('.footer #a_line').html(data.footer.address.line);
$('.footer #a_line1').html(data.footer.address.line1);
$('.footer #n_call').html(data.footer.number.Call);
$('.footer #n_label').html(data.footer.number.label);
$('.footer #website').html(data.footer.website.label);
$('.slider #s_title').html(data.slider.title);
$('.slider #s_subtitle').html(data.slider.sub_title);
$('.slider #s_line1').html(data.slider.line1);
$('.slider #s_line2').html(data.slider.line2);
$('.slider #s_line3').html(data.slider.line3);
$('.slider #s_line4').html(data.slider.line4);
$('.slider #s_button').html(data.slider.button);
$('.scanner-section #head').html(data.qr.title);
$('.scanner-section #desc').html(data.qr.description);
$(".services #list").remove();
$('.services').append('<div id="list" class="list-data"></div>');
data.best_services.list.forEach(function (item, index) {
$(".services #list").append(`<div class="accordion-container title_id">
<a class="accordion-toggle">
<img src="${item.img}" alt="" width="40" height="40" />
<h2 class="title_id">${item.title}</h2></a>
<div class="accordion-content">
<div class="describe">
<h3>${item.title}</h3>
<p>${item.paragraph} </p>
</div>
</div>
</div>`);
});
refresh();
});
}
</script>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
function openMap(){
window.open('https://maps.app.goo.gl/cJJGbvhcdwzJNNgd8','_blank')
}
</script>
</body>
</html>