Update index.html

FunnyDoggs · Feb 26, 2024 · 62960ed · 62960ed
1 parent 68c4079
commit 62960ed
Showing 1 changed file with 34 additions and 41 deletions.
diff --git a/index.html b/index.html
@@ -44,6 +44,17 @@
             float: right;
             cursor: pointer;
         }
+
+        /* Resizable handle */
+        #resizable-handle {
+            width: 10px;
+            height: 10px;
+            background-color: #008080;
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            cursor: se-resize;
+        }
     </style>
 </head>
 <body>
@@ -55,56 +66,38 @@
         <div id="content">
             Welcome to Windows 1 Emulator!
         </div>
+        <div id="resizable-handle" onmousedown="initResize(event)"></div>
     </div>
 
     <script>
-        // Function to make the window draggable
-        dragElement(document.getElementById("window"));
+        // Existing script...
+
+        // Function to initialize resizing
+        function initResize(e) {
+            e.preventDefault();
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', stopResize);
+        }
 
-        function dragElement(elmnt) {
-            var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
-            if (document.getElementById(elmnt.id + "-title-bar")) {
-                // if present, the header is where you move the DIV from:
-                document.getElementById(elmnt.id + "-title-bar").onmousedown = dragMouseDown;
-            } else {
-                // otherwise, move the DIV from anywhere inside the DIV:
-                elmnt.onmousedown = dragMouseDown;
-            }
+        // Function to handle mouse movement during resizing
+        function handleMouseMove(e) {
+            e.preventDefault();
 
-            function dragMouseDown(e) {
-                e = e || window.event;
-                e.preventDefault();
-                // get the mouse cursor position at startup:
-                pos3 = e.clientX;
-                pos4 = e.clientY;
-                document.onmouseup = closeDragElement;
-                // call a function whenever the cursor moves:
-                document.onmousemove = elementDrag;
-            }
+            const windowElement = document.getElementById("window");
+            const offsetX = e.clientX - windowElement.offsetLeft;
+            const offsetY = e.clientY - windowElement.offsetTop;
 
-            function elementDrag(e) {
-                e = e || window.event;
-                e.preventDefault();
-                // calculate the new cursor position:
-                pos1 = pos3 - e.clientX;
-                pos2 = pos4 - e.clientY;
-                pos3 = e.clientX;
-                pos4 = e.clientY;
-                // set the element's new position:
-                elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
-                elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
-            }
+            const newWidth = Math.max(200, e.clientX - windowElement.offsetLeft + offsetX);
+            const newHeight = Math.max(150, e.clientY - windowElement.offsetTop + offsetY);
 
-            function closeDragElement() {
-                // stop moving when mouse button is released:
-                document.onmouseup = null;
-                document.onmousemove = null;
-            }
+            windowElement.style.width = newWidth + 'px';
+            windowElement.style.height = newHeight + 'px';
         }
 
-        // Function to close the window
-        function closeWindow() {
-            document.getElementById("window").style.display = "none";
+        // Function to stop resizing
+        function stopResize() {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', stopResize);
         }
     </script>
 </body>