Website overhaul completed

src/js/overview.js

@@ -0,0 +1,57 @@
+// Counter animation for stats
+document.addEventListener("DOMContentLoaded", function () {
+  const counters = document.querySelectorAll(".stat-number");
+  let hasCounted = false;
+
+  function animateCounters() {
+    if (hasCounted) return;
+
+    counters.forEach((counter) => {
+      const target = parseInt(counter.getAttribute("data-count"));
+      const duration = 2000; // 2 seconds
+      const frameDuration = 1000 / 60; // 60 frames per second
+      const totalFrames = Math.round(duration / frameDuration);
+      let frame = 0;
+
+      const counterInterval = setInterval(() => {
+        frame++;
+        const progress = frame / totalFrames;
+        const currentCount = Math.round(target * progress);
+
+        counter.textContent = currentCount;
+
+        if (frame === totalFrames) {
+          clearInterval(counterInterval);
+        }
+      }, frameDuration);
+
+      counter.classList.add("animated");
+    });
+
+    hasCounted = true;
+  }
+
+  // Check if element is in viewport
+  function isInViewport(element) {
+    const rect = element.getBoundingClientRect();
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <=
+        (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+  }
+
+  // Check on scroll and on load
+  function checkCounters() {
+    const statsContainer = document.querySelector(".stats-container");
+    if (statsContainer && isInViewport(statsContainer)) {
+      animateCounters();
+      window.removeEventListener("scroll", checkCounters);
+    }
+  }
+
+  window.addEventListener("scroll", checkCounters);
+  checkCounters(); // Check on page load
+});