From be24402a04d466e0840da2a2c96ab9507af1d7b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Orzech?= <pawel@pawelorzech.pl>
Date: Sat, 28 Jun 2025 01:32:34 +0200
Subject: [PATCH] Update index.html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

   * Usunąłem animacje "Thanos snap" z CSS i JavaScript.
   * Dodałem nowe klasy CSS: fade-out i fade-in, które odpowiadają za płynne zanikanie i pojawianie
     się elementów.
   * Zmodyfikowałem funkcję setLanguage w JavaScript, aby używała tych klas. Teraz, gdy zmieniasz
     język, tekst będzie płynnie zanikał, a następnie pojawiał się w nowym języku.
---
 index.html | 70 ++++++++++++++----------------------------------------
 1 file changed, 18 insertions(+), 52 deletions(-)

diff --git a/index.html b/index.html
index 812f4f1..24ab997 100644
--- a/index.html
+++ b/index.html
@@ -61,27 +61,14 @@
             box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* More prominent shadow for active */
         }
 
-        /* Thanos Snap Animations */
-        @keyframes snap-out {
-            0% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); }
-            100% { opacity: 0; transform: scale(0.5) translateY(50px) rotate(30deg); filter: blur(5px); }
+        /* Fade animation for language change */
+        .fade-out {
+            opacity: 0;
+            transition: opacity 0.3s ease-out;
         }
-
-        @keyframes snap-in {
-            0% { opacity: 0; transform: scale(0.5) translateY(-50px) rotate(-30deg); filter: blur(5px); }
-            100% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); filter: blur(0); }
-        }
-
-        .snap-out-char {
-            display: inline-block;
-            animation: snap-out 0.6s forwards;
-            will-change: transform, opacity, filter;
-        }
-
-        .snap-in-char {
-            display: inline-block;
-            animation: snap-in 0.6s forwards;
-            will-change: transform, opacity, filter;
+        .fade-in {
+            opacity: 1;
+            transition: opacity 0.3s ease-in;
         }
     </style>
 </head>
@@ -144,42 +131,21 @@
 
             elementsToTranslate.forEach(el => {
                 const key = el.getAttribute('data-translate-key');
-                const currentText = el.innerHTML;
                 const newText = translations[lang][key];
 
-                // If the text is the same, no animation needed
-                if (currentText === newText) {
-                    return;
+                if (el.innerHTML === newText) {
+                    return; // No change, no animation needed
                 }
 
-                // Create spans for current text and animate out
-                let delay = 0;
-                const chars = currentText.split('');
-                el.innerHTML = ''; // Clear current content
-
-                chars.forEach((char, index) => {
-                    const span = document.createElement('span');
-                    span.className = 'snap-out-char';
-                    span.style.animationDelay = `${delay}ms`;
-                    span.textContent = char;
-                    el.appendChild(span);
-                    delay += 30; // Delay for each character
-                });
-
-                // After animation out, replace with new text and animate in
+                el.classList.add('fade-out');
                 setTimeout(() => {
-                    el.innerHTML = ''; // Clear after snap-out
-                    let newDelay = 0;
-                    const newChars = newText.split('');
-                    newChars.forEach((char, index) => {
-                        const span = document.createElement('span');
-                        span.className = 'snap-in-char';
-                        span.style.animationDelay = `${newDelay}ms`;
-                        span.textContent = char;
-                        el.appendChild(span);
-                        newDelay += 30; // Delay for each new character
-                    });
-                }, delay + 100); // Wait for all snap-out animations + a little extra
+                    el.innerHTML = newText;
+                    el.classList.remove('fade-out');
+                    el.classList.add('fade-in');
+                    setTimeout(() => {
+                        el.classList.remove('fade-in');
+                    }, 300); // Remove fade-in class after animation
+                }, 300); // Wait for fade-out to complete
             });
 
             document.getElementById('lang-pl').classList.toggle('active', lang === 'pl');
@@ -229,4 +195,4 @@
     </script>
 
 </body>
-</html>
+</html>
\ No newline at end of file