mirror of
https://github.com/michivonah/website-v2.git
synced 2025-12-22 20:46:29 +01:00
602 lines
32 KiB
HTML
602 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-CH">
|
|
<head>
|
|
<title>Michi von Ah - My personal website</title>
|
|
<meta name="mobile-web-app-title" content="Michi">
|
|
<meta name="apple-mobile-web-app-title" content="Michi">
|
|
<link id="favicon" rel="icon" type="image/png" href="assets/logo/favicon_256.png">
|
|
<link rel="icon" type="image/svg+xml" href="assets/logo/logo_black.svg">
|
|
<link rel="shortcut icon" type="image/png" href="assets/logo/favicon_256.png">
|
|
<link rel="apple-touch-icon" href="assets/logo/favicon_256.png">
|
|
<link rel="apple-touch-icon" sizes="152x152" href="assets/logo/favicon_256.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="assets/logo/favicon_256.png">
|
|
<link rel="apple-touch-icon" sizes="167x167" href="assets/logo/favicon_256.png">
|
|
<link rel="canonical" href="https://michivonah.ch">
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
|
<script src="script.js"></script>
|
|
<script src="https://unpkg.com/akar-icons-fonts"></script>
|
|
<link rel="stylesheet" type="text/css" href="style.css"/>
|
|
<link rel="stylesheet" type="text/css" href="https://unpkg.com/aos@2.3.1/dist/aos.css"/>
|
|
<meta charset="UTF-8">
|
|
<meta name="description" content="Hi! I'm Michi von Ah and this is my website.">
|
|
<meta name="keywords" content="Michi, Michi von Ah, von Ah, personalwebsite, website, Michael von Ah, von Ah Michael, von Ah Michi, mva, mivo, Michi v.A., Informatiker, informatics, IT, portfolio, webdev, developer, lifestyle, Webdeveloper, Develoment, 3K">
|
|
<meta name="author" content="Michi von Ah">
|
|
<meta name="robots" content="index">
|
|
<meta http-equiv="expires" content="43200">
|
|
|
|
<meta property="og:title" content="Michi von Ah">
|
|
<meta property="og:description" content="Hi! I'm Michi von Ah and this is my website.">
|
|
<meta property="og:image" content="assets/logo/favicon_256.png">
|
|
<meta property="og:image:type" content="image/jpeg">
|
|
<meta property="og:url" content="https://michivonah.ch/">
|
|
<meta property="og:site_name" content="Michi von Ah">
|
|
<meta property="twitter:title" content="Michi von Ah">
|
|
<meta property="twitter:description" content="Hi! I'm Michi von Ah and this is my website.">
|
|
<meta property="twitter:image" content="assets/logo/favicon_256.png">
|
|
<meta name="twitter:image:alt" content="Michi von Ah">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@michivonah">
|
|
<meta name="twitter:creator" content="@michivonah">
|
|
|
|
<meta name="theme-color" content="#3498db">
|
|
<meta name="mobile-web-app-status-bar-style" content="#2980b9">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="#2980b9">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<link rel="manifest" href="manifest.json">
|
|
<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=Open+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<script async src="https://data.mchvnh.ch/tracker.js" data-ackee-server="https://data.mchvnh.ch" data-ackee-domain-id="2fa92ac6-891f-43ab-89ea-5da435c777af"></script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div id="loadingScreen">
|
|
<div id="loader">
|
|
</div>
|
|
</div>
|
|
|
|
<nav id="navbar">
|
|
<div class="inner-width">
|
|
<a href="#" onclick="scrollToTop();"><img id="logoImg" src="assets/logo/logo_white.svg" alt="Logo" title="Logo"></a>
|
|
<div id="closeNavbarPlaceholder" onclick="closeNavbar();">
|
|
<i class="ai-cross"></i>
|
|
</div>
|
|
<div id="navbar-links">
|
|
<a href="#" onclick="closeNavbar();" class="navLink">Home</a>
|
|
<a href="#about" onclick="closeNavbar();" class="navLink">About me</a>
|
|
<a href="#socialmedia" onclick="closeNavbar();" class="navLink">Socialmedia</a>
|
|
<a href="#projects" onclick="closeNavbar();" class="navLink">Projects</a>
|
|
<a href="#faq" onclick="closeNavbar();" class="navLink">FAQ</a>
|
|
<!-- <a href="#contact" onclick="closeNavbar();" class="navLink">Contact me</a> -->
|
|
</div>
|
|
<a id="toggleNav" onclick="toggleSection('navbar-links', 'flex'); toggleSection('closeNavbarPlaceholder', 'block');"><i id="toggle-nav-icon" class="ai-text-align-right"></i></a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div id="content">
|
|
<div id="home">
|
|
<div>
|
|
<h1 id="homeTitle">Michi von Ah</h1>
|
|
<p>I'm a boy from switzerland.</p>
|
|
<button onclick="scrollDown();">Scroll down!</button>
|
|
</div>
|
|
<div>
|
|
<img id="homeImg" src="assets/bitmoji.png" alt="Bitmoji" title="Bitmoji">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="about" class="section">
|
|
<div class="inner-width">
|
|
<h1 class="sectionTitle">About me</h1>
|
|
<div id="aboutContent">
|
|
<div id="aboutText" data-aos="fade-left">
|
|
<p>Hi, my name is <b>Michi von Ah</b> and I'm <b><var id="age">loading...</var></b> years old. I'm interested in smartphones, computers and electromobility (mainly Tesla). In my free time I like to be on the <b>computer</b> and program something (for example this website), <b>go for a walk</b> or bake a <b>cake</b>. I also like to listen to <b>music and podcasts</b>. Besides, I'm an Apple fan and would love to have a Tesla someday. This is my website and here you can find some stuff I created. Good Luck!</p>
|
|
<p><b>Funfact:</b> This website consists of a total of just over <u>1′827</u> lines of code.</p>
|
|
<div id="aboutSocial">
|
|
<a href="https://www.instagram.com/michivonah/"><i class="ai-instagram-fill" data-hover="#8a3ab9"></i></a>
|
|
<a href="https://twitter.com/michivonah"><i class="ai-twitter-fill" data-hover="#1DA1F2"></i></a>
|
|
<a href="https://fb.com/vonahmichi"><i class="ai-facebook-fill" data-hover="#4267B2"></i></a>
|
|
<a href="https://github.com/michivonah"><i class="ai-github-fill" data-hover="#4078c0"></i></a>
|
|
<a href="https://spotify.michivonah.ch"><i class="ai-spotify-fill" data-hover="#1DB954"></i></a>
|
|
<a href="https://in.michivonah.ch"><i class="ai-linkedin-fill" data-hover="#0072b1"></i></a>
|
|
</div>
|
|
</div>
|
|
<div id="aboutImg" data-aos="fade-right">
|
|
<img src="assets/images/michi2_blob.png" alt="Michi von Ah" title="A picture of me" id="aboutImgImg" onclick="document.getElementById('aboutImgImg').style.animation = 'shake 250ms ease';">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="socialmedia" class="section" data-aos="fade-left">
|
|
<div class="inner-width">
|
|
<h1 class="sectionTitle">Socialmedia</h1>
|
|
<p>Click on the tabs to switch between them.</p>
|
|
|
|
<div id="socialSelection">
|
|
<input type="radio" id="smInstagram" class="smRadioInput" name="socialmedia" value="instagram" onchange="toggleSocialmedia();">
|
|
<label for="smInstagram" class="smRadioLabel">Instagram <i class="ai-instagram-fill"></i></label>
|
|
|
|
<input type="radio" id="smInstagram2" class="smRadioInput" name="socialmedia" value="instagram2" onchange="toggleSocialmedia();" checked>
|
|
<label for="smInstagram2" class="smRadioLabel">Instagram <i class="ai-instagram-fill"></i></label>
|
|
|
|
<input type="radio" id="smTwitter" class="smRadioInput" name="socialmedia" value="twitter" onchange="toggleSocialmedia();">
|
|
<label for="smTwitter" class="smRadioLabel" style="display: none;">Twitter <i class="ai-twitter-fill"></i></label>
|
|
|
|
<input type="radio" id="smGithub" class="smRadioInput" name="socialmedia" value="github" onchange="toggleSocialmedia();">
|
|
<label for="smGithub" class="smRadioLabel">GitHub <i class="ai-github-fill"></i></label>
|
|
|
|
<input type="radio" id="smLinkedin" class="smRadioInput" name="socialmedia" value="linkedin" onchange="toggleSocialmedia();">
|
|
<label for="smLinkedin" class="smRadioLabel" style="display: none;">LinkedIn <i class="ai-linkedin-fill"></i></label>
|
|
</div>
|
|
|
|
<div id="socialInstagram" class="socialTab">
|
|
<div id="insta1Container">
|
|
<div>
|
|
<h3>Instagram @michivonah</h3>
|
|
<ul>
|
|
<li>220+ Followers</li>
|
|
<li>10+ Posts</li>
|
|
<li>Lifestyle, Travel & me</li>
|
|
</ul>
|
|
<button onclick="window.open('https://instagram.com/michivonah')">Follow!</button>
|
|
<button onclick="showQrcode('assets/socialmedia/insta-code.png', 'insta1Img', 'assets/socialmedia/michi_pb.jpeg');">Show QR-Code</button>
|
|
</div>
|
|
<div>
|
|
<img src="assets/socialmedia/michi_pb.jpeg" alt="Michi" title="A picture of me" id="insta1Img">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="socialInstagram2" class="socialTab">
|
|
<div id="insta2Container">
|
|
<div>
|
|
<h3>Instagram @vompictures</h3>
|
|
<ul>
|
|
<li>20+ Followers</li>
|
|
<li>20+ Posts</li>
|
|
<li>280+ Likes (in total)</li>
|
|
<li>13+ Likes (average per post)</li>
|
|
<li>Photography, Nature, Switzerland</li>
|
|
</ul>
|
|
<button onclick="window.open('https://instagram.com/vompictures')">Follow now!</button>
|
|
</div>
|
|
<div id="insta2FirstImgContainer">
|
|
<div id="insta2FirstImage" class="insta2FirstImg" data-location="Giswilerstock">
|
|
<img class="insta2Img1" src="assets/socialmedia/img14.jpeg" alt="Giswilerstock" title="Giswilerstock">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="insta2ImgContainer">
|
|
<div class="insta2ImgDiv" data-location="Sachseln">
|
|
<img class="insta2Img" src="assets/socialmedia/img7.jpeg" alt="Sachseln" title="Sachseln">
|
|
</div>
|
|
<div class="insta2ImgDiv" data-location="Giswilerstock">
|
|
<img class="insta2Img" src="assets/socialmedia/img15.jpeg" alt="Giswilerstock" title="Giswilerstock">
|
|
</div>
|
|
<div class="insta2ImgDiv" data-location="Lugano">
|
|
<img class="insta2Img" src="assets/socialmedia/img20.jpg" alt="Lugano" title="Lugano">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="socialTwitter" class="socialTab">
|
|
<h3>Twitter @michivonah</h3>
|
|
<div>
|
|
<div>
|
|
<ul>
|
|
<li>150+ Tweets</li>
|
|
</ul>
|
|
</div>
|
|
<!--<div>
|
|
<img src="assets/tweets/tweet1.png" alt="Tweet" title="Tweet">
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
|
|
<div id="socialGithub" class="socialTab">
|
|
<div id="githubContainer">
|
|
<div>
|
|
<h3>GitHub @michivonah</h3>
|
|
<ul>
|
|
<li>20+ public repos</li>
|
|
<li>Languages: HTML, CSS & JavaScript</li>
|
|
<li>1′360+ Commits</li>
|
|
<button onclick="window.open('https://github.michivonah.ch')">Read my code!</button>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<img src="assets/socialmedia/code-snippet-v2.png" alt="Code Snippet" title="Code Snippet from my news app">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="socialLinkedin" class="socialTab">
|
|
<h3>LinkedIn Michi von Ah</h3>
|
|
<ul>
|
|
<li></li>
|
|
<li>Competence tests: HTML & CSS</li>
|
|
</ul>
|
|
<!-- <img src="" alt="LinkedIn"> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="projects" class="section" title="Hehehehe you found a easteregg">
|
|
<div class="inner-width">
|
|
<h1 class="sectionTitle">Projects</h1>
|
|
|
|
<div id="projectContainer">
|
|
<div id="projectRow1" class="projectRow"> <!-- ROW 1 for Projects -->
|
|
<div class="project" data-aos="fade-right">
|
|
<img src="assets/projects/escaperoom-logo.png" alt="Michi's Escape Room Logo" title="Michi's Escape Room">
|
|
<h3>Michi's Escape Room</h3>
|
|
<p>As a final project for school, I programmed an Escape Room game. For this I used the programming languages HTML, CSS and JavaScript. If you want to know more about the development process of my game, click <a class="link" href="https://michivonah.notion.site/Michi-s-Escape-Room-9ba11f6e71a6449b9bdc222cd7c7f647">here <i class="ai-link-out"></i></a>. If you want to play it, click the button below. Good luck.</p>
|
|
<button onclick="window.open('https://escape.michivonah.ch?source=michivonah-website')">Open <i class="ai-link-out"></i></button>
|
|
</div>
|
|
|
|
<div class="project" data-aos="fade-right">
|
|
<img src="assets/projects/jassen.png" alt="Jassen by Michi" title="Jassen by Michi">
|
|
<h3>Jassen</h3>
|
|
<p>I have programmed a Jass game in which you play with three computer opponents. You can set how fast the opponents play and what their names are. The game can be installed on your smartphone or tablet as a PWA.</p>
|
|
<button onclick="window.open('https://jass.von-ah.me?source=michivonah-website')">Open <i class="ai-link-out"></i></button>
|
|
</div>
|
|
|
|
<div class="project" data-aos="fade-right">
|
|
<img src="assets/projects/news-logo.png" alt="News App Logo" title="N3WS App">
|
|
<h3>N3WS App</h3>
|
|
<p>I have created a simple RSS feed reader. It helps you to manage your news. You can use it on any device and install it as a PWA (Progressive web app). There may still be some bugs and errors as the app is still under development. As soon as the final version is ready, you will find it here.</p>
|
|
<button onclick="window.open('https://news.michivonah.ch?source=michivonah-website')">Open <i class="ai-link-out"></i></button>
|
|
</div>
|
|
</div>
|
|
<div id="projectRow2" class="projectRow"> <!-- ROW 2 for Projects -->
|
|
<div class="project" data-aos="fade-left">
|
|
<img src="assets/projects/pw-generator.png" alt="Password Generator Logo" title="Password Generator">
|
|
<h3>Password Generator</h3>
|
|
<p>I‘ve programmed a simple and minimalistic password generator. You can choose from different password types and copy the password afterwards.</p>
|
|
<button onclick="window.open('https://passwords.michivonah.ch?source=michivonah-website')">Open <i class="ai-link-out"></i></button>
|
|
</div>
|
|
|
|
<div class="project" data-aos="fade-left">
|
|
<img src="assets/projects/math-tools.png" alt="Math Tools Logo" title="Math Tools">
|
|
<h3>Math Tools</h3>
|
|
<p>I have created a collection of different math tools. It is not finished yet and not all tools work yet. However, I improve it from time to time.</p>
|
|
<button onclick="window.open('https://math-tools.app?source=michivonah-website')">Open <i class="ai-link-out"></i></button>
|
|
</div>
|
|
|
|
<div class="project" data-aos="fade-left">
|
|
<img src="assets/jump.png" alt="Bitmoji" title="Michi's Blog">
|
|
<h3>Michi′s Blog</h3>
|
|
<p>I have created a blog with Notion. There I write small texts from time to time. The blog is written in German.</p>
|
|
<button onclick="window.open('https://blog.michivonah.ch?source=michivonah-website')">Open <i class="ai-link-out"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="faq" class="section" data-aos="fade-right">
|
|
<div class="inner-width">
|
|
<h1 class="sectionTitle" title="This are some questions.">FAQ - Frequently Asked Questions</h1>
|
|
<p>Click on the question to display the answer.</p>
|
|
<div>
|
|
<div class="faqObject" onclick="toggleQuestion();">
|
|
<i class="ai-chevron-down faq-icon"></i>
|
|
<h3 class="faq-question">Did you programed this website yourself?</h3>
|
|
<p class="faqAnswer">Yes, I programmed this website myself using HTML, CSS and JavaScript programming languages.</p>
|
|
</div>
|
|
|
|
<div class="faqObject" onclick="toggleQuestion();">
|
|
<i class="ai-chevron-down faq-icon"></i>
|
|
<h3 class="faq-question">How did you get into computers?</h3>
|
|
<p class="faqAnswer">I came to computers because I have been interested in computers and other technology since I was very young. When I was a kid, I always wanted my own laptop and often made laptops, printers and more out of cardboard. I was finally able to fulfill my dream of having my own laptop in the second grade.</p>
|
|
</div>
|
|
|
|
<div class="faqObject" onclick="toggleQuestion();">
|
|
<i class="ai-chevron-down faq-icon"></i>
|
|
<h3 class="faq-question">Which countries would you like to visit?</h3>
|
|
<p class="faqAnswer">I would love to visit many countries and places like Sydney, California, Las Vegas, Los Angeles and Dublin.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="contact" class="section" data-aos="fade-left">
|
|
<div class="inner-width">
|
|
<h1 class="sectionTitle">Contact me</h1>
|
|
<p>If you want contact me, fill out this form or send a mail to <a class="link" href="mailto:info@michivonah.ch">info@michivonah.ch</a>.</p>
|
|
<form action="#" method="post" id="contact-form">
|
|
<input type="hidden" name="_redirect" value="https://michivonah.ch/?formSubmitted=true"/>
|
|
<div id="contactNames">
|
|
<input id="surname-field" type="text" name="surname" placeholder="Your Surname" required>
|
|
<input id="lastname-field" type="text" name="lastname" placeholder="Your Lastname" required>
|
|
</div>
|
|
<input id="email-field" type="email" name="mail" placeholder="Your E-Mail Adress" required>
|
|
<input id="subject-field" type="text" name="subject" placeholder="Subject" autocomplete="false">
|
|
<textarea id="message-text" placeholder="Your Text" minlength="6" required name="message"></textarea>
|
|
<input id="terms" type="checkbox" name="terms" required>
|
|
<!-- <label for="terms" id="termsLabel"><p>I accept that my form submissions will be shared with the formspark service to organize them. You can find out how your data is treated at formspark in their <a class="link" href="https://formspark.io/legal/privacy-policy/">privacy policy <i class="ai-link-out"></i></a>.</p></label> -->
|
|
<label for="terms" id="termsLabel"><p>I accept that the information I provide in the form will be shared with the WhatsApp Business API to send a message. You can find out how the data is processed by WhatsApp in the <a class="link" href="https://www.whatsapp.com/legal/business-data-processing-terms">WhatsApp privacy policy <i class="ai-link-out"></i></a>.</p></label>
|
|
<input id="honeypot" type="checkbox" name="honeypot" hidden>
|
|
<label for="honeypot" id="honeypotLabel" hidden></label>
|
|
<button id="submitContactForm" name="submit" type="button" onclick="checkForm();">Send <i class="ai-send"></i></button>
|
|
</form>
|
|
<p>Hint: The form is currently disabled because the site is stil under construction. It can still change.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="footer" data-aos="fade-up">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#3498DB" fill-opacity="1" d="M0,288L48,272C96,256,192,224,288,197.3C384,171,480,149,576,165.3C672,181,768,235,864,250.7C960,267,1056,245,1152,250.7C1248,256,1344,288,1392,304L1440,320L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
|
|
<div id="footerContent">
|
|
<p></p>
|
|
<a href="https://legal.michivonah.ch">Legal</a>
|
|
<a href="#footerExpanded" onclick="toggleSection('footerExpanded', 'flex');">Copyright</a>
|
|
<a class="socialLink" href="https://www.instagram.com/michivonah/"><i class="ai-instagram-fill"></i></a>
|
|
<a class="socialLink" href="https://twitter.com/michivonah"><i class="ai-twitter-fill"></i></a>
|
|
<a class="socialLink" href="https://fb.com/vonahmichi"><i class="ai-facebook-fill"></i></a>
|
|
</div>
|
|
|
|
<div id="footerExpanded">
|
|
<div id="imprint">
|
|
<h3>Imprint <i class="ai-paper navicons"></i></h3>
|
|
<p><i class="ai-person"></i> Michael von Ah</p>
|
|
<p><i class="ai-location"></i> Obwalden, Switzerland</p>
|
|
<p><i class="ai-envelope"></i> info@michivonah.ch</p>
|
|
<p><i class="ai-phone"></i> 078 247 15 16 (for messages, don′t use for calling)</p>
|
|
</div>
|
|
|
|
<div id="copyright">
|
|
<h3>Copyright <i class="ai-copy navicons"></i></h3>
|
|
<p>The content of this page was created by me or I have the rights to use it here.</p>
|
|
<p>Used resources from others:</p>
|
|
<ul>
|
|
<li>Animate on Scroll Library - michalsnik.github.io/aos</li>
|
|
<li>Akar Icons - akaricons.com</li>
|
|
<li>Google Fonts - fonts.google.com</li>
|
|
<li>BGjar - bgjar.com</li>
|
|
<li>Get Waves - getwaves.io</li>
|
|
<li>Blobmaker - blobmaker.app</li>
|
|
<li>codeimg - codeimg.io</li>
|
|
<li>Tutorials from unleashed-design.de</li>
|
|
</ul>
|
|
<p>All information without guarantee.</p>
|
|
</div>
|
|
|
|
<p style="display:none;">© 2022</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="cookieBanner">
|
|
<div id="cookieImg">
|
|
<p id="cookieIcon">🍪</p>
|
|
</div>
|
|
<div id="cookieHint">
|
|
<h3>Hey, this site uses cookies!</h3>
|
|
<p>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.</p>
|
|
<button onclick="useCookie(true)">Accept!</button>
|
|
<button onclick="useCookie(false)">Stop!</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="scroll-top">
|
|
<i class="ai-chevron-up"></i>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
// 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";
|
|
}
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|