Add animation, refactor

index.html

@@ -29,6 +29,7 @@
                     </div>
                 </div>
             </div>
+            <div class="card-listener"></div>
         </div>
         <div class="card-wrapper">
             <div class="card">
@@ -39,10 +40,13 @@
             </div>
             <div class="content-container">
                 <div class="content-wrapper">
-                    <p>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!</p>
-
+                    <div class="header">
+                        <div class="brand">Erik Feher</div>
+                        <img class="close" src="./public/next.svg"/>
+                    </div>
                 </div>
             </div>
+            <div class="card-listener"></div>
         </div>
         <div class="card-wrapper">
             <div class="card">
@@ -53,10 +57,13 @@
             </div>
             <div class="content-container">
                 <div class="content-wrapper">
-                    <p>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!</p>
-
+                    <div class="header">
+                        <div class="brand">Erik Feher</div>
+                        <img class="close" src="./public/next.svg"/>
+                    </div>
                 </div>
             </div>
+            <div class="card-listener"></div>
         </div>
         <div class="card-wrapper">
             <div class="card">
@@ -67,10 +74,13 @@
             </div>
             <div class="content-container">
                 <div class="content-wrapper">
-                    <p>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!</p>
-
+                    <div class="header">
+                        <div class="brand">Erik Feher</div>
+                        <img class="close" src="./public/next.svg"/>
+                    </div>
                 </div>
             </div>
+            <div class="card-listener"></div>
         </div>
         <div class="card-wrapper">
             <div class="card">
@@ -81,10 +91,13 @@
             </div>
             <div class="content-container">
                 <div class="content-wrapper">
-                    <p>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!</p>
-
+                    <div class="header">
+                        <div class="brand">Erik Feher</div>
+                        <img class="close" src="./public/next.svg"/>
+                    </div>
                 </div>
             </div>
+            <div class="card-listener"></div>
         </div>
     </div>
 </body>

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();
+init();
+nextPage();
+idle();

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;