diff --git a/public/css/style.css b/public/css/style.css
index a44b5d0..725dd42 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -13,7 +13,15 @@ body {
#main-window {
max-width: 600px;
}
-
+@media (pointer:coarse) {
+ body {
+ overflow: scroll !important;
+ }
+ #main-window {
+ margin-right: 10px;
+ margin-bottom: 10px;
+ }
+}
.window-body {
padding: 10px;
}
@@ -59,3 +67,15 @@ li {
align-items: end;
justify-content: right;
}
+body {
+ overflow: hidden;
+}
+* {
+ /* no this is not to protect my content or whatever. this is just to make draggable windows work in a non deranged way */
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
\ No newline at end of file
diff --git a/public/js/drag.js b/public/js/drag.js
new file mode 100644
index 0000000..decfaee
--- /dev/null
+++ b/public/js/drag.js
@@ -0,0 +1,56 @@
+// wow i love being fake programmer
+// source: https://jams.hackclub.com/batch/webOS/part-3
+function dragElement(element) {
+ // Step 2: Set up variables to keep track of the element's position.
+ var initialX = 0;
+ var initialY = 0;
+ var currentX = 0;
+ var currentY = 0;
+
+ // Step 3: Check if there is a special header element associated with the draggable element.
+ if (document.getElementById("title-bar")) {
+ // Step 4: If present, assign the `dragMouseDown` function to the header's `onmousedown` event.
+ // This allows you to drag the window around by its header.
+ document.getElementById("title-bar").onmousedown = startDragging;
+ } else {
+ // Step 5: If not present, assign the function directly to the draggable element's `onmousedown` event.
+ // This allows you to drag the window by holding down anywhere on the window.
+ element.onmousedown = startDragging;
+ }
+
+ // Step 6: Define the `startDragging` function to capture the initial mouse position and set up event listeners.
+ function startDragging(e) {
+ e = e || window.event;
+ e.preventDefault();
+ // Step 7: Get the mouse cursor position at startup.
+ initialX = e.clientX;
+ initialY = e.clientY;
+ // Step 8: Set up event listeners for mouse movement (`elementDrag`) and mouse button release (`closeDragElement`).
+ document.onmouseup = stopDragging;
+ document.onmousemove = dragElement;
+ }
+
+ // Step 9: Define the `elementDrag` function to calculate the new position of the element based on mouse movement.
+ function dragElement(e) {
+ e = e || window.event;
+ e.preventDefault();
+ // Step 10: Calculate the new cursor position.
+ currentX = initialX - e.clientX;
+ currentY = initialY - e.clientY;
+ initialX = e.clientX;
+ initialY = e.clientY;
+ // Step 11: Update the element's new position by modifying its `top` and `left` CSS properties.
+ console.log(element.offsetTop);
+ console.log(currentX);
+ element.style.top = (element.offsetTop - currentY) + "px";
+ element.style.left = (element.offsetLeft - currentX) + "px";
+ }
+
+ // Step 12: Define the `stopDragging` function to stop tracking mouse movement by removing the event listeners.
+ function stopDragging() {
+ document.onmouseup = null;
+ document.onmousemove = null;
+ console.log(element.offsetTop - currentY);
+ console.log(element.offsetLeft - currentX);
+ }
+}
\ No newline at end of file
diff --git a/public/js/index.js b/public/js/index.js
index bf45d1c..ffe2ae6 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -64,3 +64,6 @@ function showCredits() {
document.getElementById("credits").style.display = "block";
document.getElementById("credits-button").style.display = "none";
}
+document.addEventListener("DOMContentLoaded", () => {
+ dragElement(document.getElementById("main-window"));
+});
\ No newline at end of file
diff --git a/views/index.ejs b/views/index.ejs
index 033e26f..8c37188 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -18,9 +18,10 @@
+
-