feat: move relevant card to the top

src/_templates/overview.html

@@ -21,11 +21,9 @@
     </nav>
 
     <section class="section">
-        <div class="container">
-            <div class="column is-half is-offset-one-quarter">
-                {overview_cards}
-            </div>
-        </div>
+      <div class="container">
+        <div class="column is-half is-offset-one-quarter">{overview_cards}</div>
+      </div>
     </section>
 
     <!-- Footer -->
@@ -35,4 +33,23 @@
       </div>
     </footer>
   </body>
+
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+        const userLang = "ku" || navigator.language || navigator.userLanguage;
+
+        // Normalize and check if the language is not English or German
+        if (!["en", "de", "de-DE"].includes(userLang)) {
+            // Try to find a matching card by language attribute
+            const cardToMove =
+                document.querySelector(`.card[lang^="${userLang.replace("_", "-").toLowerCase()}"]`) ||
+                document.querySelector(`.card[lang^="${userLang.split("-")[0]}"]`);
+
+            if (cardToMove) {
+                const container = cardToMove.parentNode;
+                container.insertBefore(cardToMove, container.firstChild);
+            }
+        }
+    });
+  </script>
 </html>