From 4e6170f3d7a7234389480df57a5b4b94c01bbd77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Erik=20Feh=C3=A9r?= Date: Thu, 23 Oct 2025 13:53:27 +0200 Subject: [PATCH] Add animation, refactor --- index.html | 29 +++++++++++++++------- script.js | 70 ++++++++++++++++++++++++++++++++++++++++++------------ styles.css | 15 ++++++++++++ 3 files changed, 91 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index 1c0c529..8014fde 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,7 @@ +
@@ -39,10 +40,13 @@
-

Hello! I'm Erik Fehér, a passionate software developer with a knack for creating innovative solutions. With a background in computer science and years of experience in the tech industry, I specialize in building web applications that are both user-friendly and efficient. When I'm not coding, you can find me exploring the latest tech trends or contributing to open-source projects. Let's connect and create something amazing together!

- +
+
Erik Feher
+ +
+
@@ -53,10 +57,13 @@
-

Hello! I'm Erik Fehér, a passionate software developer with a knack for creating innovative solutions. With a background in computer science and years of experience in the tech industry, I specialize in building web applications that are both user-friendly and efficient. When I'm not coding, you can find me exploring the latest tech trends or contributing to open-source projects. Let's connect and create something amazing together!

- +
+
Erik Feher
+ +
+
@@ -67,10 +74,13 @@
-

Hello! I'm Erik Fehér, a passionate software developer with a knack for creating innovative solutions. With a background in computer science and years of experience in the tech industry, I specialize in building web applications that are both user-friendly and efficient. When I'm not coding, you can find me exploring the latest tech trends or contributing to open-source projects. Let's connect and create something amazing together!

- +
+
Erik Feher
+ +
+
@@ -81,10 +91,13 @@
-

Hello! I'm Erik Fehér, a passionate software developer with a knack for creating innovative solutions. With a background in computer science and years of experience in the tech industry, I specialize in building web applications that are both user-friendly and efficient. When I'm not coding, you can find me exploring the latest tech trends or contributing to open-source projects. Let's connect and create something amazing together!

- +
+
Erik Feher
+ +
+
diff --git a/script.js b/script.js index d09764d..a6d63a9 100644 --- a/script.js +++ b/script.js @@ -1,25 +1,27 @@ function init() { const cards = document.getElementsByClassName('card-wrapper'); - console.log(cards[0]); // Logs the first card-wrapper elementű for (let i = 0; i < cards.length; i++) { - cards[i].addEventListener('click', function() { - for (let j = 0; j < cards.length; j++) { - if (j === i) { - cards[j].classList.remove('hidden'); - cards[j].classList.add('active'); - cards[j].getElementsByClassName('content-wrapper')[0].classList.add('visible'); - continue; - } - cards[j].getElementsByClassName('content-wrapper')[0].classList.remove('visible'); - cards[j].classList.add('hidden'); - cards[j].classList.remove('active'); - } - }); + const cardListener = cards[i].getElementsByClassName('card-listener')[0]; + cardListener.addEventListener('click', () => openCard(cards, i)); } } +function openCard(cards, i) { + for (let j = 0; j < cards.length; j++) { + if (j === i) { + cards[j].classList.remove('hidden'); + cards[j].classList.add('active'); + cards[j].getElementsByClassName('content-wrapper')[0].classList.add('visible'); + continue; + } + cards[j].getElementsByClassName('content-wrapper')[0].classList.remove('visible'); + cards[j].classList.add('hidden'); + cards[j].classList.remove('active'); + } +} + function addInProgress() { if (window.location.href.indexOf('127.0.0.1') === -1) { const warning = document.createElement('div'); @@ -32,5 +34,43 @@ function addInProgress() { } } +function nextPage() { + const nextButtons = document.getElementsByClassName('close'); + const cards = document.getElementsByClassName('card-wrapper'); + + for (let i = 0; i < nextButtons.length; i++) { + nextButtons[i].addEventListener('click', function() { + + cards[(i+1) % nextButtons.length].classList.remove('hidden'); + cards[(i+1) % nextButtons.length].classList.add('active'); + cards[(i+1) % nextButtons.length].getElementsByClassName('content-wrapper')[0].classList.add('visible'); + + cards[i].getElementsByClassName('content-wrapper')[0].classList.remove('visible'); + cards[i].classList.add('hidden'); + cards[i].classList.remove('active'); + }); + } +} + +function idle() { + let idleTime = 61; + const cards = document.getElementsByClassName('card-wrapper'); + let cardIndex = 0; + setInterval(function() { + idleTime+=2; + if (idleTime > 1) { + openCard(cards, cardIndex++ % cards.length); + } + }, 10000); + + document.onclick = document.onm = function() { + console.log('User active, resetting idle timer.'); + idleTime = 0; + }; +} + + addInProgress(); -init(); \ No newline at end of file +init(); +nextPage(); +idle(); \ No newline at end of file diff --git a/styles.css b/styles.css index bcb6e1b..bae1b5d 100644 --- a/styles.css +++ b/styles.css @@ -12,6 +12,7 @@ --base-content-background-color: #ffffff20; --content-wrap-padding: 16px; --header-margin-bottom: 20px; + --content-container-height: calc(100dvh - (2 * var(--card-gap))); font-family: "BBH Sans Bogle", sans-serif; font-weight: 400; @@ -28,6 +29,20 @@ html, body { height: 100dvh; } +.card-listener { + position: relative; + display: block; + width: 100%; + height: var(--content-container-height); + top: calc(-1 * (100dvh - (2 * var(--card-gap))) - var(--label-height) - var(--content-container-height)); + z-index: 9999; +} + +.active > .card-listener { + top: calc(-1 * (100dvh - (2 * var(--card-gap))) - var(--label-height) + 20px); +} + + #container { display: flex; justify-content: space-around;