https://www.drolaszkitti.hu/js/main.js

1//-------------------head css link + favicon----------
2document.querySelector("head").innerHTML += `
3  <link rel="stylesheet" href="./css/cookies.css">
4  <link rel="stylesheet" href="./css/style.css">
5  <link rel="icon" type="image/png" sizes="32x32" href="./img/favicon/favicon-32x32.png">
6`
7
8//-------------------header---------------------------
9document.querySelector(".js-header").innerHTML = `
10  <div class="header-logo">Dr. Olasz Kitti</div>
11  <nav class="nav">
12      <input type="checkbox" id="nav-checkbox" class="nav-checkbox js-nav-checkbox">
13      <label for="nav-checkbox" class="nav-checkbox-button">
14              <span class="nav-checkbox-line"></span>
15              <span class="nav-checkbox-line"></span>
16              <span class="nav-checkbox-line"></span>
17              <span class="nav-hidden-label">Fries menu</span>
18      </label>
19      <ul class="nav-list js-nav-list">
20          <li><a class="nav-list-item" href="./#introduction">Bemutatkozás</a></li>
21          <li><a class="nav-list-item" href="./#dermatology-cosmetology">Bőrgyógyászat kozmetológia</a></li>
22          <li><a class="nav-list-item" href="./#medical-aesthetics">Orvosesztétika</a></li>
23          <li><a class="nav-list-item" href="./#pricelist">Árlista</a></li>
24          <li><a class="nav-list-item" href="#contact">Elérhetőség</a></li>
25      </ul>
26  </nav>
27`;
28
29//-------------------footer---------------------------
30document.querySelector(".js-footer").innerHTML = `
31  <div class="contact">
32  <div>
33      <h2>Elérhetőség:</h2>
34      <ul>
35          <li>Bőrgyógyászati és Esztétikai Rendelő</li>
36          <li class="right-ul">6000 Kecskemét, Bocskai u. 9.</li>
37          <li>Telefonos bejelentkezés: 
38          <li class="right-ul">+36-20-454-4352 (8-17h)</li>
39          <li>Lézeres kezelés bejelentkezés:
40          <li class="right-ul">+36-30-194-9448</li>
41          <li>Weboldal:</li>
42          <li class="right-ul"><a href="https://drolaszkitti.hu">drolaszkitti.hu</a></li>
43          <li>E-mail:</li>
44          <li class="right-ul"><a href="mailto:[email protected]">[email protected]</a></li>
45          <li>Facebook:</li>
46          <li class="right-ul"><a href="https://www.facebook.com/people/Dr-Olasz-Kitti-B%C5%91rgy%C3%B3gy%C3%A1szati-%C3%A9s-kozmetol%C3%B3giai-mag%C3%A1nrendel%C5%91/100075973518941/" target="_blank">link</a></li>
47      </ul>
48  </div>
49  <div>
50      <iframe title="google map" class="map" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d5451.201886812899!2d19.696378!3d46.910566!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4743da19c2ac043d%3A0x75363cd4824d484e!2zRHIuT2xhc3ogS2l0dGkgQsWRcmd5w7NnecOhc3phdGkgw6lzIGtvem1ldG9sb2dpYWkgbWFnw6FucmVuZGVsxZE!5e0!3m2!1shu!2shu!4v1681371682270!5m2!1shu!2shu" width="500" height="350" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
51  </div>
52  <ul> 
53    <li><a href="./dataprivacy.html">Adatkezelési tájékoztató</a></li>
54    <li><a href="./cookie.html">Süti tájékoztató</a></li>
55    <li><a href="./impression.html">Impresszum</a></li>
56  </ul>
57  </div>
58  <div class="copyright">&copy; 2023 Bőrgyógyászati és Esztétikai Rendelő - Dr. Olasz Kitti - Minden jog fenntartva.</div>
59`;
60
61//-------------Cookie popup----------------------
62document.querySelector(".cookies-container").innerHTML = `
63  <h2>Süti tájékoztató</h2>
64  <div class="cookies-content">
65    <p>Ez a weboldal sütiket használ, hogy a biztonságos böngészés mellett a legjobb felhasználói élményt nyújthassa. Az „Elfogadom” gombra kattintva Ön beleegyezik a sütik használatába. <a href="./cookie.html"> Sütikről bővebben...</a></p>
66  </div>
67  <div class="cookies-buttons">
68    <button class="cookies-button" id="acceptCookiesBtn">Elfogadom</button>
69    <button class="cookies-button" id="declineCookiesBtn">Elutasítom</button>
70  </div>
71`;
72
73
74
75let menuItems = document.querySelector(".js-nav-list");
76let menuCheckBox = document.querySelector(".js-nav-checkbox");
77let backToTopButton = document.querySelector(".back-to-top");
78let menuItem = document.querySelectorAll(".nav-list-item");
79let scrollSpyItems = document.querySelectorAll(".js-scrollspy");
80
81//---------------------mobil menu closes---------------------------------------
82menuItems.addEventListener("click", closeMobilMenu);
83function closeMobilMenu(){
84    menuCheckBox.checked = false;

85}
86//--------------------if you scroll, active menu item changes------------------
87function scrollSpy(){
88  scrollSpyItems.forEach(sec =>{
89    let top = window.scrollY,
90        offset = sec.offsetTop - 100,
91        height = sec.offsetHeight,
92        id = sec.getAttribute("id");
93    if (top >= offset && top < offset + height){
94      menuItem.forEach(links =>{
95      links.classList.remove("active-nav-item");
96      if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
97        document.querySelector(".nav-list li:last-child a").classList.add("active-nav-item");
98      } else if (id === "landing-section") {
99        return;
100      } else document.querySelector("header nav a[href*=" + id + "]").classList.add("active-nav-item");
101      })
102    }
103  })
104}
105
106//-------------------back to top header logo------------
107let headerLogo = document.querySelector(".header-logo");
108headerLogo.addEventListener("click", backToTop); //call backToTop function
109
110//--------------------back to top button----------------
111window.onscroll = function () {
112  scrollFunction();
113  scrollSpy();
114};
115function scrollFunction() {
116  if (
117    document.body.scrollTop > 200 ||
118    document.documentElement.scrollTop > 200
119  ) {
120    backToTopButton.classList.remove('back-to-top-hide');
121  } else {
122    backToTopButton.classList.add('back-to-top-hide');
123  }
124}
125backToTopButton.addEventListener("click", backToTop);
126function backToTop() {
127  document.body.scrollTop = 0;
128  document.documentElement.scrollTop = 0;
129}