From 80e47d97024bfff4109f73012d00f7b4785acbe8 Mon Sep 17 00:00:00 2001
From: "Seyyed Ali Mohammadiyeh (Max Base)" <MaxBaseCode@Gmail.Com>
Date: Wed, 18 Mar 2026 12:11:35 +0330
Subject: [PATCH 1/3] Made the terminal resizable, move let and const to top of
 the script file

---
 src/_includes/system-log.njk |  15 +++--
 src/assets/js/script.js      | 122 +++++++++++++++++++++++++++++------
 2 files changed, 114 insertions(+), 23 deletions(-)

diff --git a/src/_includes/system-log.njk b/src/_includes/system-log.njk
index dac7092..e3f0365 100644
--- a/src/_includes/system-log.njk
+++ b/src/_includes/system-log.njk
@@ -1,24 +1,29 @@
 <button id="reopen-console-btn" onclick="reopenConsole()" class="fixed bottom-6 right-6 p-3 bg-black/80 border border-green-500/30 rounded-full text-green-500 hover:scale-110 transition-all z-[999]" title="Open System Log">
     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
 </button>
-<div id="matrix-console-container" class="fixed bottom-6 right-6 w-80 z-[1000] transition-all duration-300 ease-in-out hidden"
-     style="opacity: 0; transform: translateY(20px);">
+<div id="matrix-console-container" class="fixed bottom-6 right-6 w-80 z-[1000] transition-all duration-300 ease-in-out hidden" style="opacity: 0; transform: translateY(20px);">
     <div class="bg-black/90 backdrop-blur-xl border border-green-500/30 rounded-t-lg overflow-hidden shadow-2xl">
-
         <div class="bg-green-500/10 border-b border-green-500/30 px-3 py-2 flex justify-between items-center cursor-grab select-none">
              <div class="flex items-center gap-2">
                 <span class="text-[10px] font-mono text-green-500 uppercase tracking-widest opacity-70">System_Log</span>
             </div>
-
             <div class="flex gap-2">
                 <button onclick="minimizeConsole()" class="w-3 h-3 rounded-full bg-yellow-500/20 border border-yellow-500/50 hover:bg-yellow-500/50 transition-colors" title="Minimize"></button>
                 <button onclick="maximizeConsole()" class="w-3 h-3 rounded-full bg-green-500/20 border border-green-500/50 hover:bg-green-500/50 transition-colors" title="Maximize"></button>
                 <button onclick="closeConsole()" class="w-3 h-3 rounded-full bg-red-500/20 border border-red-500/50 hover:bg-red-500/50 transition-colors" title="Close"></button>
             </div>
         </div>
-
         <div id="matrix-console-output" class="h-48 p-3 overflow-y-auto font-mono text-[11px] leading-tight">
             <p class="text-green-500/40">// Terminal link established...</p>
         </div>
     </div>
+
+    <div class="resize-handle resize-handle-n"  style="position:absolute;top:-3px;left:8px;right:8px;height:6px;cursor:n-resize;z-index:1;"></div>
+    <div class="resize-handle resize-handle-s"  style="position:absolute;bottom:-3px;left:8px;right:8px;height:6px;cursor:s-resize;z-index:1;"></div>
+    <div class="resize-handle resize-handle-e"  style="position:absolute;right:-3px;top:8px;bottom:8px;width:6px;cursor:e-resize;z-index:1;"></div>
+    <div class="resize-handle resize-handle-w"  style="position:absolute;left:-3px;top:8px;bottom:8px;width:6px;cursor:w-resize;z-index:1;"></div>
+    <div class="resize-handle resize-handle-ne" style="position:absolute;top:-4px;right:-4px;width:10px;height:10px;cursor:ne-resize;z-index:2;"></div>
+    <div class="resize-handle resize-handle-nw" style="position:absolute;top:-4px;left:-4px;width:10px;height:10px;cursor:nw-resize;z-index:2;"></div>
+    <div class="resize-handle resize-handle-se" style="position:absolute;bottom:-4px;right:-4px;width:10px;height:10px;cursor:se-resize;z-index:2;"></div>
+    <div class="resize-handle resize-handle-sw" style="position:absolute;bottom:-4px;left:-4px;width:10px;height:10px;cursor:sw-resize;z-index:2;"></div>
 </div>
diff --git a/src/assets/js/script.js b/src/assets/js/script.js
index a6d41a9..123110a 100644
--- a/src/assets/js/script.js
+++ b/src/assets/js/script.js
@@ -1,3 +1,34 @@
+// Variables
+let isResizing = false;
+let resizeDirection = '';
+let resizeStartX = 0;
+let resizeStartY = 0;
+let resizeStartWidth = 0;
+let resizeStartOutputHeight = 0;
+let resizeStartLeft = 0;
+let resizeStartTop = 0;
+// Load saved level or start at 0
+let currentLevel = Number(localStorage.getItem("userLevel")) || 0;
+
+// Load saved XP or start at 0
+let currentXP = parseInt(localStorage.getItem("userXP")) || 0;
+
+let isSurging = false;
+
+let audioCtx;
+
+let unlockedEggs = JSON.parse(localStorage.getItem("unlockedEggs")) || [];
+let surpriseClickCount = 0;
+let matrixActive = false;
+let destructInterval;
+
+let isDragging = false;
+let offsetLeft = 0;
+let offsetTop = 0;
+
+// Const Variables
+const MIN_CONSOLE_WIDTH = 200;
+const MIN_OUTPUT_HEIGHT = 50;
 const XP_PER_LEVEL = 45;
 
 // XP rewards for events and secrets
@@ -13,13 +44,6 @@ const XP_FOOTER_SURGE = 1000; // Footer surge secret
 const XP_BADGE_CLICK = 45; // Badge click reward
 
 const NUM_LEVELS = LEVELS.length;
-// Load saved level or start at 0
-let currentLevel = Number(localStorage.getItem("userLevel")) || 0;
-
-// Load saved XP or start at 0
-let currentXP = parseInt(localStorage.getItem("userXP")) || 0;
-
-let isSurging = false;
 
 function getContrastYIQ(hexcolor) {
   hexcolor = hexcolor.replace("#", "");
@@ -29,11 +53,10 @@ function getContrastYIQ(hexcolor) {
   var yiq = (r * 299 + g * 587 + b * 114) / 1000;
   return yiq >= 128 ? "black" : "white";
 }
+
 /**
  * 1. RETRO SOUND ENGINE
  */
-let audioCtx;
-
 function initAudio() {
   try {
     if (!audioCtx) {
@@ -104,11 +127,6 @@ function playSound(type) {
   }
 }
 
-let unlockedEggs = JSON.parse(localStorage.getItem("unlockedEggs")) || [];
-let surpriseClickCount = 0;
-let matrixActive = false;
-let destructInterval;
-
 function getRank(lvl) {
   const numericLevel = Number(lvl) || 0;
 
@@ -132,10 +150,6 @@ const consoleOutput = document.getElementById("matrix-console-output");
 const dragContainer = document.getElementById("matrix-console-container");
 const dragHeader = dragContainer.querySelector(".bg-green-500\\/10"); // Selects the header bar
 
-let isDragging = false;
-let offsetLeft = 0;
-let offsetTop = 0;
-
 dragHeader.addEventListener("mousedown", (e) => {
   // Prevent dragging when clicking the minimize/close buttons
   if (e.target.tagName === "BUTTON") return;
@@ -174,6 +188,78 @@ document.addEventListener("mouseup", () => {
   dragHeader.style.cursor = "grab";
 });
 
+dragContainer.querySelectorAll('.resize-handle').forEach(handle => {
+  handle.addEventListener('mousedown', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    isResizing = true;
+
+    resizeDirection = [...handle.classList]
+      .find(c => c.startsWith('resize-handle-') && c !== 'resize-handle')
+      ?.replace('resize-handle-', '') || 'se';
+
+    const rect = dragContainer.getBoundingClientRect();
+    resizeStartX = e.clientX;
+    resizeStartY = e.clientY;
+    resizeStartWidth = rect.width;
+    resizeStartLeft = rect.left;
+    resizeStartTop = rect.top;
+    resizeStartOutputHeight = consoleOutput.offsetHeight;
+
+    dragContainer.style.bottom = 'auto';
+    dragContainer.style.right = 'auto';
+    dragContainer.style.left = `${rect.left}px`;
+    dragContainer.style.top = `${rect.top}px`;
+
+    dragContainer.classList.remove('transition-all', 'duration-300', 'ease-in-out');
+    document.body.style.userSelect = 'none';
+    document.body.style.cursor = handle.style.cursor;
+  });
+});
+
+document.addEventListener('mousemove', (e) => {
+  if (!isResizing) return;
+
+  const dx = e.clientX - resizeStartX;
+  const dy = e.clientY - resizeStartY;
+  const dir = resizeDirection;
+
+  // Horizontal
+  if (dir.includes('e')) {
+    dragContainer.style.width = `${Math.max(MIN_CONSOLE_WIDTH, resizeStartWidth + dx)}px`;
+  }
+  if (dir.includes('w')) {
+    const newW = resizeStartWidth - dx;
+    if (newW >= MIN_CONSOLE_WIDTH) {
+      dragContainer.style.width = `${newW}px`;
+      dragContainer.style.left = `${resizeStartLeft + dx}px`;
+    }
+  }
+
+  // Vertical — only the output area grows/shrinks, header stays fixed
+  if (dir.includes('s')) {
+    consoleOutput.style.height = `${Math.max(MIN_OUTPUT_HEIGHT, resizeStartOutputHeight + dy)}px`;
+  }
+  if (dir.includes('n')) {
+    const newH = resizeStartOutputHeight - dy;
+    if (newH >= MIN_OUTPUT_HEIGHT) {
+      consoleOutput.style.height = `${newH}px`;
+      dragContainer.style.top = `${resizeStartTop + dy}px`;
+    }
+  }
+});
+
+document.addEventListener('mouseup', () => {
+  if (!isResizing) return;
+  isResizing = false;
+  resizeDirection = '';
+  document.body.style.userSelect = '';
+  document.body.style.cursor = '';
+  // Restore CSS transition
+  dragContainer.classList.add('transition-all', 'duration-300', 'ease-in-out');
+});
+
 function minimizeConsole() {
   // Toggles the height of the output area
   if (consoleOutput.style.display === "none") {

From a73b9ff6be1350c9f30d3eb64cd23027b27fcd9e Mon Sep 17 00:00:00 2001
From: "Seyyed Ali Mohammadiyeh (Max Base)" <MaxBaseCode@Gmail.Com>
Date: Wed, 18 Mar 2026 13:20:41 +0330
Subject: [PATCH 2/3] clean

---
 src/assets/js/script.js | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/assets/js/script.js b/src/assets/js/script.js
index 123110a..b9fee06 100644
--- a/src/assets/js/script.js
+++ b/src/assets/js/script.js
@@ -168,15 +168,12 @@ dragHeader.addEventListener("mousedown", (e) => {
 document.addEventListener("mousemove", (e) => {
   if (!isDragging) return;
 
-  // Calculate new position
   let x = e.clientX - offsetLeft;
   let y = e.clientY - offsetTop;
 
-  // Boundary Check (Optional: keeps it inside the screen)
   x = Math.max(0, Math.min(x, window.innerWidth - dragContainer.offsetWidth));
   y = Math.max(0, Math.min(y, window.innerHeight - dragContainer.offsetHeight));
 
-  // Apply position and remove Tailwind's 'bottom' and 'right' so they don't fight the 'top'/'left'
   dragContainer.style.bottom = "auto";
   dragContainer.style.right = "auto";
   dragContainer.style.left = `${x}px`;
@@ -225,7 +222,6 @@ document.addEventListener('mousemove', (e) => {
   const dy = e.clientY - resizeStartY;
   const dir = resizeDirection;
 
-  // Horizontal
   if (dir.includes('e')) {
     dragContainer.style.width = `${Math.max(MIN_CONSOLE_WIDTH, resizeStartWidth + dx)}px`;
   }
@@ -237,7 +233,6 @@ document.addEventListener('mousemove', (e) => {
     }
   }
 
-  // Vertical — only the output area grows/shrinks, header stays fixed
   if (dir.includes('s')) {
     consoleOutput.style.height = `${Math.max(MIN_OUTPUT_HEIGHT, resizeStartOutputHeight + dy)}px`;
   }
@@ -256,12 +251,10 @@ document.addEventListener('mouseup', () => {
   resizeDirection = '';
   document.body.style.userSelect = '';
   document.body.style.cursor = '';
-  // Restore CSS transition
   dragContainer.classList.add('transition-all', 'duration-300', 'ease-in-out');
 });
 
 function minimizeConsole() {
-  // Toggles the height of the output area
   if (consoleOutput.style.display === "none") {
     consoleOutput.style.display = "block";
     consoleContainer.style.width = "20rem"; // w-80
@@ -272,10 +265,8 @@ function minimizeConsole() {
 }
 
 function maximizeConsole() {
-  // Toggles a full-screen-ish mode
   consoleContainer.classList.toggle("console-maximized");
 
-  // Adjust height when maximized
   if (consoleContainer.classList.contains("console-maximized")) {
     consoleOutput.style.height = "70vh";
     consoleOutput.style.display = "block";
@@ -303,16 +294,13 @@ function reopenConsole() {
   const container = document.getElementById("matrix-console-container");
   const reopenBtn = document.getElementById("reopen-console-btn");
 
-  // Show the console
   container.classList.remove("hidden");
 
-  // Trigger reflow for animation
   void container.offsetWidth;
 
   container.style.opacity = "1";
   container.style.transform = "translateY(0)";
 
-  // Hide the reopen button
   if (reopenBtn) reopenBtn.classList.add("hidden");
 }
 

From 3741fc29f05d66778bccd2fefd2a46e5ca6fea53 Mon Sep 17 00:00:00 2001
From: "Seyyed Ali Mohammadiyeh (Max Base)" <MaxBaseCode@Gmail.Com>
Date: Thu, 19 Mar 2026 10:59:13 +0330
Subject: [PATCH 3/3] run pre-commit

---
 src/assets/js/script.js | 45 +++++++++++++++++++++++------------------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/assets/js/script.js b/src/assets/js/script.js
index b9fee06..2c67c73 100644
--- a/src/assets/js/script.js
+++ b/src/assets/js/script.js
@@ -1,6 +1,6 @@
 // Variables
 let isResizing = false;
-let resizeDirection = '';
+let resizeDirection = "";
 let resizeStartX = 0;
 let resizeStartY = 0;
 let resizeStartWidth = 0;
@@ -185,16 +185,17 @@ document.addEventListener("mouseup", () => {
   dragHeader.style.cursor = "grab";
 });
 
-dragContainer.querySelectorAll('.resize-handle').forEach(handle => {
-  handle.addEventListener('mousedown', (e) => {
+dragContainer.querySelectorAll(".resize-handle").forEach((handle) => {
+  handle.addEventListener("mousedown", (e) => {
     e.preventDefault();
     e.stopPropagation();
 
     isResizing = true;
 
-    resizeDirection = [...handle.classList]
-      .find(c => c.startsWith('resize-handle-') && c !== 'resize-handle')
-      ?.replace('resize-handle-', '') || 'se';
+    resizeDirection =
+      [...handle.classList]
+        .find((c) => c.startsWith("resize-handle-") && c !== "resize-handle")
+        ?.replace("resize-handle-", "") || "se";
 
     const rect = dragContainer.getBoundingClientRect();
     resizeStartX = e.clientX;
@@ -204,28 +205,32 @@ dragContainer.querySelectorAll('.resize-handle').forEach(handle => {
     resizeStartTop = rect.top;
     resizeStartOutputHeight = consoleOutput.offsetHeight;
 
-    dragContainer.style.bottom = 'auto';
-    dragContainer.style.right = 'auto';
+    dragContainer.style.bottom = "auto";
+    dragContainer.style.right = "auto";
     dragContainer.style.left = `${rect.left}px`;
     dragContainer.style.top = `${rect.top}px`;
 
-    dragContainer.classList.remove('transition-all', 'duration-300', 'ease-in-out');
-    document.body.style.userSelect = 'none';
+    dragContainer.classList.remove(
+      "transition-all",
+      "duration-300",
+      "ease-in-out",
+    );
+    document.body.style.userSelect = "none";
     document.body.style.cursor = handle.style.cursor;
   });
 });
 
-document.addEventListener('mousemove', (e) => {
+document.addEventListener("mousemove", (e) => {
   if (!isResizing) return;
 
   const dx = e.clientX - resizeStartX;
   const dy = e.clientY - resizeStartY;
   const dir = resizeDirection;
 
-  if (dir.includes('e')) {
+  if (dir.includes("e")) {
     dragContainer.style.width = `${Math.max(MIN_CONSOLE_WIDTH, resizeStartWidth + dx)}px`;
   }
-  if (dir.includes('w')) {
+  if (dir.includes("w")) {
     const newW = resizeStartWidth - dx;
     if (newW >= MIN_CONSOLE_WIDTH) {
       dragContainer.style.width = `${newW}px`;
@@ -233,10 +238,10 @@ document.addEventListener('mousemove', (e) => {
     }
   }
 
-  if (dir.includes('s')) {
+  if (dir.includes("s")) {
     consoleOutput.style.height = `${Math.max(MIN_OUTPUT_HEIGHT, resizeStartOutputHeight + dy)}px`;
   }
-  if (dir.includes('n')) {
+  if (dir.includes("n")) {
     const newH = resizeStartOutputHeight - dy;
     if (newH >= MIN_OUTPUT_HEIGHT) {
       consoleOutput.style.height = `${newH}px`;
@@ -245,13 +250,13 @@ document.addEventListener('mousemove', (e) => {
   }
 });
 
-document.addEventListener('mouseup', () => {
+document.addEventListener("mouseup", () => {
   if (!isResizing) return;
   isResizing = false;
-  resizeDirection = '';
-  document.body.style.userSelect = '';
-  document.body.style.cursor = '';
-  dragContainer.classList.add('transition-all', 'duration-300', 'ease-in-out');
+  resizeDirection = "";
+  document.body.style.userSelect = "";
+  document.body.style.cursor = "";
+  dragContainer.classList.add("transition-all", "duration-300", "ease-in-out");
 });
 
 function minimizeConsole() {