diff --git a/src/_includes/footer.njk b/src/_includes/footer.njk index cee498f..d95ede8 100644 --- a/src/_includes/footer.njk +++ b/src/_includes/footer.njk @@ -67,7 +67,7 @@
- @@ -75,7 +75,7 @@ 🛠️ SYS_OPTIMIZE +15 - @@ -130,8 +130,8 @@
-
-
+
+
System_Log
@@ -142,7 +142,7 @@
-
+

// Terminal link established...

diff --git a/src/assets/css/style.css b/src/assets/css/style.css index ca8a66f..a5ad7be 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -730,3 +730,11 @@ a:hover { background-size: 100% 2px, 3px 100%; pointer-events: none; } +.cursor-grab:active { + cursor: grabbing; +} + +/* Prevents the terminal text from getting highlighted while you move the window */ +#matrix-console-container.is-dragging { + user-select: none; +} diff --git a/src/assets/js/script.js b/src/assets/js/script.js index 5a30244..cc244f0 100644 --- a/src/assets/js/script.js +++ b/src/assets/js/script.js @@ -358,6 +358,51 @@ function getRank(lvl) { const consoleContainer = document.getElementById('matrix-console-container'); 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; + + isDragging = true; + + // Calculate where the mouse is relative to the top-left of the console + const rect = dragContainer.getBoundingClientRect(); + offsetLeft = e.clientX - rect.left; + offsetTop = e.clientY - rect.top; + + // Change cursor to indicate moving + dragHeader.style.cursor = 'grabbing'; +}); + +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`; + dragContainer.style.top = `${y}px`; +}); + +document.addEventListener('mouseup', () => { + isDragging = false; + dragHeader.style.cursor = 'grab'; +}); + function minimizeConsole() { // Toggles the height of the output area if (consoleOutput.style.display === 'none') {