From 00ec2abc707131ce347c41cd30261f467976f1d9 Mon Sep 17 00:00:00 2001 From: michivonah Date: Sat, 7 Sep 2024 17:38:35 +0200 Subject: [PATCH] improvements in code structure --- index.html | 238 +------------------------------------------------- main.js | 208 +++++++++++++++++++++++++++++++++++++++++++ manifest.json | 8 +- style.css | 51 +---------- 4 files changed, 215 insertions(+), 290 deletions(-) create mode 100644 main.js diff --git a/index.html b/index.html index 48d02e5..b7df70f 100644 --- a/index.html +++ b/index.html @@ -13,8 +13,8 @@ - + @@ -45,9 +45,6 @@ - - - @@ -348,14 +345,6 @@

Contact me

-
-

Imprint

-

Michael von Ah

-

Obwalden, Switzerland

-

info@michivonah.ch

-

078 247 15 16 (for messages, don′t use for calling)

-
-
-
-
-

🍪

-
-
-

Hey, this site uses cookies!

-

Don't worry, no cookies are used at the moment. This is just a preparation of the hint for later. Because at the moment this website is still under development.

- - -
-
-
- - - diff --git a/main.js b/main.js new file mode 100644 index 0000000..4b49664 --- /dev/null +++ b/main.js @@ -0,0 +1,208 @@ + // Loading + window.addEventListener('load', () => { + document.getElementById('scroll-top').style.display = "none"; + // check if site is released + //var timeToRelease = new Date('August 7, 2022 12:00:00').getTime() - new Date().getTime(); + //if(timeToRelease > 0 && window.location.hostname == 'michivonah.ch') window.location = "https://michivonah.ch/countdown.html"; + age(16, 9, 2005); + toggleSocialmedia(); + // Check cookie banner + //localStorage.removeItem('cookies'); + if(localStorage.getItem('cookies') != null){ + document.getElementById('cookieBanner').style.display = "none"; + } + // random home img + randomHomeImg(); + AOS.init({disable: 'mobile'}); + //AOS.init({disable: true}); + // hide loadingscreen + document.getElementById('loadingScreen').style.display = "none"; + }); + + document.getElementById('scroll-top').addEventListener("click", function(){ + scrollToTop(); + }); + + function scrollToTop(){ + window.scroll(0, 0); + } + + function scrollDown(){ + window.scroll(0, window.innerHeight - 56); + } + + function toggleSection(sectionName, type){ + var section = document.getElementById(sectionName); + if(section.style.display == "block" || section.style.display == "flex"){ + section.style.display = "none"; + } + else{ + section.style.display = type; + } + } + + + function toggleClass(className){ + var elements = document.getElementsByClassName(className); + for(var i = 0; i < elements.length; i++){ + if(elements[i].style.display == "block"){ + elements[i].style.display = "none"; + } + else{ + elements[i].style.display = "block"; + } + } + } + + function closeNavbar(){ + if(document.getElementById('closeNavbarPlaceholder').style.display == "block"){ + document.getElementById("navbar-links").style.display = "none"; + document.getElementById("closeNavbarPlaceholder").style.display = "none"; + } + } + + function toggleSocialmedia(){ + var tabs = document.getElementsByClassName('socialTab'); + for(var i = 0; i < tabs.length; i++){ + var currentTabId = tabs[i].id; + var currentRadioButton = currentTabId.replace("social", "sm");; + var state = document.getElementById(currentRadioButton).checked; + if(state == true) document.getElementById(tabs[i].id).style.display = "block"; + else document.getElementById(tabs[i].id).style.display = "none"; + } + } + + function toggleQuestion(){ + if(event.target.tagName == "DIV"){ + if(event.target.getElementsByTagName('p')[0].style.display == "none"){ + event.target.getElementsByTagName('p')[0].style.display = "block"; + event.target.getElementsByTagName('i')[0].style.transform = "rotate(180deg)"; + } + else{ + event.target.getElementsByTagName('p')[0].style.display = "none"; + event.target.getElementsByTagName('i')[0].style.transform = "rotate(0deg)"; + } + } + else if(event.target.tagName == "H3" || event.target.tagName == "I"){ + if(event.target.parentElement.getElementsByTagName('p')[0].style.display == "none"){ + event.target.parentElement.getElementsByTagName('p')[0].style.display = "block"; + event.target.parentElement.getElementsByTagName('i')[0].style.transform = "rotate(180deg)"; + } + else{ + event.target.parentElement.getElementsByTagName('p')[0].style.display = "none"; + event.target.parentElement.getElementsByTagName('i')[0].style.transform = "rotate(0deg)"; + } + } + else console.log("An error occurred while opening this section. Element: {0}", event.target); + } + + function checkForm(){ + console.log(); + var requiredFields = ['surname-field', 'lastname-field', 'email-field', 'message-text', 'terms']; + var errorCount = 0; + for(var i = 0; i < requiredFields.length; i++){ + var currentElement = document.getElementById(requiredFields[i]); + currentElement.style.animation = null; + if(currentElement.checkValidity() == true){ + currentElement.style.background = "var(--theme1)"; + currentElement.style.animation = null; + } + else{ + currentElement.classList.add("animate"); + currentElement.style.background = "var(--red)"; + currentElement.style.animation = "shake 250ms ease"; + currentElement.classList.remove("animate"); + errorCount++; + } + } + if(document.getElementById('honeypot').checked === true) errorCount++; + if(errorCount <= 0){ + var name = document.getElementById('surname-field').value + " " + document.getElementById('lastname-field').value; + sendWhatsapp(name, document.getElementById('email-field').value, document.getElementById('subject-field').value, document.getElementById('message-text').value); + //document.getElementById("contact-form").submit(); + } + } + + function useCookie(usersChoice){ + let cookieBanner = document.getElementById('cookieBanner'); + cookieBanner.style.display = "none"; + if(usersChoice == true){ + localStorage.setItem('cookies', true); + } + else{ + localStorage.setItem('cookies', false); + } + } + + function showQrcode(src, imgId, old){ + // src = 'assets/socialmedia/insta-code.png' + // old = assets/socialmedia/michi_pb.jpeg + // img = document.getElementById('insta1Img') + var src = "https://api.qrserver.com/v1/create-qr-code/?size=900x900&format=png&margin=0&data=http://insta.michivonah.ch/"; + var image = document.getElementById(imgId).src; + if(image != src) document.getElementById(imgId).src = src; + else document.getElementById(imgId).src = old; + } + + function sendWhatsapp(name, mail, subject, text){ + var mail = mail.replaceAll('@', '%40'); + var subject = subject.replaceAll(' ', '%20'); + var text = text.replaceAll(' ', '%20'); + var text = text.replaceAll('?', '%3F'); + var text = text.replaceAll('!', '%21'); + var whatsappUrl = "https://wa.me/41782471516?text=Name%3A%20" + name + "%0AE-Mail%3A%20" + mail + "%0ASubject%3A%20" + subject + "%0AMessage%3A%20" + text; + window.open(whatsappUrl); + } + + function randomHomeImg(){ + var homeImg = document.getElementById('homeImg'); + var num = Math.floor(Math.random() * (4 - 1) + 1); + homeImg.src = "assets/bitmojis/home_" + num + ".png"; + } + + function age(birthday, birthmonth, birthyear){ + var birthmonth = birthmonth - 1; + var ageText = document.getElementById('age'); + var date = new Date(); + var year = date.getFullYear(); + if(date.getMonth() == birthmonth){ + if(date.getDate() >= birthday){ + ageText.innerHTML = Number(year) - birthyear; + } + else{ + ageText.innerHTML = Number(year) - birthyear - 1; + } + } + else if(date.getMonth() >= birthmonth){ + ageText.innerHTML = Number(year) - birthyear; + } + else if(date.getMonth() <= birthmonth){ + ageText.innerHTML = Number(year) - birthyear - 1; + } + } + + window.addEventListener('scroll', function(e) { + var navbar = document.getElementById('navbar'); + var scrollTop = document.getElementById('scroll-top'); + if(this.scrollY > 20){ + navbar.style.background = "var(--theme1)"; + navbar.style.color = "#fff"; + scrollTop.style.display = "flex"; + } + else{ + if(window.innerWidth <= 640){ + if(document.getElementById('navbar-links').style.display == "block"){ + navbar.style.background = "var(--theme1)"; + scrollTop.style.display = "none"; + } + else{ + navbar.style.background = "transparent"; + scrollTop.style.display = "none"; + } + } + else{ + navbar.style.background = "transparent"; + scrollTop.style.display = "none"; + } + } + }); \ No newline at end of file diff --git a/manifest.json b/manifest.json index 6f14ac7..4ea9f49 100644 --- a/manifest.json +++ b/manifest.json @@ -10,21 +10,21 @@ "display": "standalone", "icons": [ { - "src": "https://michivonah.ch/icons/logo/favicon_128.png", + "src": "https://michivonah.ch/assets/logo/favicon_128.png", "sizes": "96x96" }, { - "src": "https://michivonah.ch/icons/logo/favicon_256.png", + "src": "https://michivonah.ch/assets/logo/favicon_256.png", "sizes": "144x144", "type": "image/png" }, { - "src": "https://michivonah.ch/icons/logo/favicon_256.png", + "src": "https://michivonah.ch/assets/logo/favicon_256.png", "sizes": "192x192", "type": "image/png" }, { - "src": "https://michivonah.ch/icons/logo/favicon_256.png", + "src": "https://michivonah.ch/assets/logo/favicon_256.png", "sizes": "256x256", "type": "image/png" } diff --git a/style.css b/style.css index f0f292c..3bc81f9 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); + html{scroll-behavior: smooth;} body{ @@ -818,55 +820,6 @@ body{ border-radius: 50%; } - - /* Privacy Banner */ - #cookieBanner{ - display: none; /* FLEX */ - width: 100%; - height: auto; - min-height: 200px; - color: #fff; - background: var(--theme1); - font-size: 1rem; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-around; - position: fixed; - bottom: 0; - left: 0; - } - - #cookieBanner div{ - max-width: 50%; - } - - #cookieIcon{ - font-size: 6rem; - user-select: none; - margin: 0; - } - - #cookieBanner button{ - width: 30%; - min-width: 80px; - height: auto; - background: #F3AD61; - color: #6D4534; - border: 2px solid #F3AD61; - border-radius: 4px; - margin: 10px; - padding: 8px; - font-size: 14px; - font-weight: bold; - transition: var(--transition); - } - - #cookieBanner button:hover{ - background: #6D4534; - color: #F3AD61; - border-color: #6D4534; - } - /* Scroll to the top button */ #scroll-top{ width: 40px;