From db1c6676a13798ee57dbac429a1d5045b60356fb Mon Sep 17 00:00:00 2001
From: altaf-creator <dev@altafcreator.com>
Date: Thu, 30 Apr 2026 22:01:53 +0800
Subject: quite a big commit

---
 www/scripts/scroll.js | 81 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 www/scripts/scroll.js

(limited to 'www/scripts/scroll.js')

diff --git a/www/scripts/scroll.js b/www/scripts/scroll.js
new file mode 100644
index 0000000..d7ab5da
--- /dev/null
+++ b/www/scripts/scroll.js
@@ -0,0 +1,81 @@
+document.addEventListener('scroll', function () {
+	progress();
+	// hideSidebar();
+});
+
+window.addEventListener("load", function () {
+	progress();
+});
+
+nodeBigSize = "25px";
+nodeDefaultSize = "16px";
+
+function progress() {
+	const sections = document.getElementsByTagName("section");
+	const nodes = document.getElementsByClassName("node");
+
+	if (nodes[0]) {
+		for (var i = 0; i < sections.length; i++) {
+			if (isInViewport(sections[i])) {
+				nodes[i].style.width = nodeBigSize;
+				nodes[i].style.height = nodeBigSize;
+				nodes[i].style.backgroundColor = "black";
+			}
+			else {
+				nodes[i].style.width = nodeDefaultSize;
+				nodes[i].style.height = nodeDefaultSize;
+				nodes[i].style.backgroundColor = "#555";
+			}
+		}
+	}
+}
+
+function hideSidebar() {
+	const sidebar = document.getElementById("sidebar");
+	const progressContainer = document.getElementById("progressContainer");
+	const sections = document.getElementsByTagName("section");
+
+	if (!progressContainer) {
+	return;
+	}
+
+	if (screen.width <= 600) {
+		if (window.scrollY >= 100) {
+			sidebar.style.left = "-80px";
+
+			for (var i = 0; i < sections.length; i++) {
+				sections[i].style.marginLeft = 0;
+			}
+
+			if (progressContainer) {
+				progressContainer.style.left = "-11px";
+			}
+		}
+		else {
+			sidebar.style.left = "0";
+
+			for (var i = 0; i < sections.length; i++) {
+				sections[i].style.marginLeft = "70px";
+			}
+
+			if (progressContainer) {
+				progressContainer.style.left = "61px";
+			}
+		}
+	}
+	else {
+		sidebar.style.left = "0";
+		progressContainer.style.left = "61px";
+	}
+}
+
+// Imagine a line in the middle of your viewport.
+// Hence, it moves along gas you scroll.
+// If this line is inside the element, returns true, else false.
+function isInViewport(element) {
+	const rect = element.getBoundingClientRect();
+	const scroll = window.scrollY;
+	const position = window.scrollY + window.innerHeight / 2;
+	if (position < rect.bottom + scroll && position > rect.top + scroll) return true;
+	else return false;
+}
-- 
cgit v1.2.3