Some fixes

Some fixes, some things still completely wrong.
androidand · Apr 11, 2023 · c09fcd1 · c09fcd1
1 parent 9c2ed8e
commit c09fcd1
Show file tree

Hide file tree

Showing 5 changed files with 335 additions and 0 deletions.
diff --git a/compile-sass.sh b/compile-sass.sh
@@ -0,0 +1,9 @@
+#!/bin/bash
+
+if ! command -v node-sass &> /dev/null; then
+  echo "node-sass is not installed. Please install it globally using:"
+  echo "npm install -g node-sass"
+  exit 1
+fi
+
+node-sass styles.scss styles.css
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Windows 3.11 Window</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="window">
+    <div class="window-header">
+      <div class="system-menu">
+        <button class="system-menu-button">-</button>
+      </div>
+      <div class="title">Window Title</div>
+      <div class="controls">
+        <div class="window-controls">
+          <div class="window-control">
+            <button class="minimize"></button>
+          </div>
+          <div class="window-control">
+            <button class="maximize"></button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="window-content">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fringilla lacinia tincidunt.</p>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,45 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const windowHeader = document.querySelector('.window-header');
+  const windowContent = document.querySelector('.window-content');
+  const closeButton = document.querySelector('.close');
+  const minimizeButton = document.querySelector('.minimize');
+  const maximizeButton = document.querySelector('.maximize');
+
+  let isDragging = false;
+  let startX, startY, initialX, initialY;
+
+  windowHeader.addEventListener('mousedown', (e) => {
+    isDragging = true;
+    startX = e.clientX;
+    startY = e.clientY;
+    initialX = windowHeader.parentElement.offsetLeft;
+    initialY = windowHeader.parentElement.offsetTop;
+  });
+
+  document.addEventListener('mousemove', (e) => {
+    if (!isDragging) return;
+    windowHeader.parentElement.style.left = initialX + (e.clientX - startX) + 'px';
+    windowHeader.parentElement.style.top = initialY + (e.clientY - startY) + 'px';
+  });
+
+  document.addEventListener('mouseup', () => {
+    isDragging = false;
+  });
+
+  // closeButton.addEventListener('click', () => {
+  //   windowHeader.parentElement.style.display = 'none';
+  // });
+
+  minimizeButton.addEventListener('click', () => {
+    windowContent.style.display = windowContent.style.display === 'none' ? 'block' : 'none';
+  });
+
+  maximizeButton.addEventListener('click', () => {
+    const windowElement = windowHeader.parentElement;
+    if (windowElement.classList.contains('maximized')) {
+      windowElement.classList.remove('maximized');
+    } else {
+      windowElement.classList.add('maximized');
+    }
+  });
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,81 @@
+.window {
+  background-color: white;
+  font-family: "Courier New", monospace;
+  position: absolute;
+  top: 50px;
+  left: 50px;
+  padding: 2px;
+  border: 1px solid black;
+  box-shadow: inset 0 0 0 1px black, 1px 1px 0 1px #ffffff, 2px 2px 0 1px #404040, -1px -1px 0 1px #c0c0c0; }
+
+.window-header {
+  background-color: #0000a0;
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  padding: 4px;
+  font-weight: bold;
+  user-select: none;
+  cursor: move;
+  position: relative;
+  z-index: 2;
+  font-family: "Pixel", monospace;
+  font-size: 14px;
+  height: 14px; }
+
+.caption {
+  margin: 0; }
+
+.window-content {
+  background-color: white;
+  padding: 8px;
+  position: relative;
+  z-index: 1; }
+
+.window-controls {
+  display: flex;
+  align-items: center;
+  height: 100%; }
+
+.window-control {
+  display: flex;
+  align-items: center;
+  justify-content: center; }
+
+.minimize {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-color: #c0c0c0;
+  background-repeat: no-repeat;
+  border: 1px solid black;
+  border-top-color: white;
+  border-left-color: white;
+  box-shadow: 1px 1px 0 1px #808080;
+  margin-left: 1px;
+  background-position: center;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" width="8" height="8" fill="black"><polygon points="0,2 8,2 4,6" /></svg>'); }
+  .minimize:active {
+    background-color: #808080;
+    border-color: #808080;
+    box-shadow: none;
+    transform: translate(1px, 1px); }
+
+.maximize {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-color: #c0c0c0;
+  background-repeat: no-repeat;
+  border: 1px solid black;
+  border-top-color: white;
+  border-left-color: white;
+  box-shadow: 1px 1px 0 1px #808080;
+  margin-left: 1px;
+  background-position: center;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" width="8" height="8" fill="black"><polygon points="0,6 8,6 4,2"/></svg>'); }
+  .maximize:active {
+    background-color: #808080;
+    border-color: #808080;
+    box-shadow: none;
+    transform: translate(1px, 1px); }
diff --git a/styles.scss b/styles.scss
@@ -0,0 +1,167 @@
+$borderColorDark: #404040;
+$borderColorLight: #c0c0c0;
+$borderColorWhite: #ffffff;
+$headerColor: #0000a0;
+$buttonColor: #c0c0c0;
+
+// .window {
+//   background-color: white;
+//   font-family: "Courier New", monospace;
+//   position: absolute;
+//   top: 50px;
+//   left: 50px;
+//   padding: 2px;
+//   border: 1px solid black;
+//   box-shadow: inset 0 0 0 1px black, 1px 1px 0 1px #808080, 2px 2px 0 1px #c0c0c0, 3px 3px 0 1px #808080;
+// }
+// .window {
+//   background-color: white;
+//   font-family: "Courier New", monospace;
+//   position: absolute;
+//   top: 50px;
+//   left: 50px;
+//   padding: 2px;
+//   border: 1px solid black;
+//   box-shadow: inset 0 0 0 1px black,
+//     1px 1px 0 1px $borderColorLight,
+//     2px 2px 0 1px $borderColorWhite,
+//     -1px -1px 0 1px $borderColorDark;
+// }
+// .window {
+//   background-color: white;
+//   font-family: "Courier New", monospace;
+//   position: absolute;
+//   top: 50px;
+//   left: 50px;
+//   padding: 2px;
+//   border: 1px solid black;
+//   box-shadow: inset 0 0 0 1px black,
+//               1px 1px 0 1px $borderColorWhite,
+//               -1px -1px 0 1px $borderColorDark,
+//               2px 2px 0 1px $borderColorLight;
+// }
+.window {
+  background-color: white;
+  font-family: "Courier New", monospace;
+  position: absolute;
+  top: 50px;
+  left: 50px;
+  padding: 2px;
+  border: 1px solid black;
+  box-shadow: inset 0 0 0 1px black,
+              1px 1px 0 1px $borderColorWhite,
+              2px 2px 0 1px $borderColorDark,
+              -1px -1px 0 1px $borderColorLight;
+}
+
+
+
+
+.window-header {
+  background-color: $headerColor;
+  color: if(lightness($headerColor) > 50%, black, white);
+  display: flex;
+  justify-content: space-between;
+  padding: 4px;
+  font-weight: bold;
+  user-select: none;
+  cursor: move;
+  position: relative;
+  z-index: 2;
+  font-family: "Pixel", monospace;
+  font-size: 14px;
+  height: 14px;
+}
+
+.caption {
+  margin: 0;
+}
+
+// .window-controls {
+//   display: flex;
+//   align-items: center;
+// }
+// .window-controls {
+//   display: flex;
+//   align-items: center;
+//   height: 100%;
+// }
+
+
+
+.window-content {
+  background-color: white;
+  padding: 8px;
+  position: relative;
+  z-index: 1;
+}
+
+@mixin button-styles {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-color: $buttonColor;
+  background-repeat: no-repeat;
+  border: 1px solid black;
+  border-top-color: white;
+  border-left-color: white;
+  box-shadow: 1px 1px 0 1px #808080;
+  margin-left: 1px;
+
+  &:active {
+    background-color: #808080;
+    border-color: #808080;
+    box-shadow: none;
+    transform: translate(1px, 1px);
+  }
+}
+
+.window-controls {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.window-control {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.minimize {
+  @include button-styles;
+  background-position: center;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" width="8" height="8" fill="black"><polygon points="0,2 8,2 4,6" /></svg>');
+
+}
+
+.maximize {
+  @include button-styles;
+  background-position: center;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" width="8" height="8" fill="black"><polygon points="0,6 8,6 4,2"/></svg>');
+}
+
+// .minimize:after {
+//   content: "";
+//   display: block;
+//   width: 8px;
+//   height: 2px;
+//   background-color: black;
+//   position: absolute;
+//   top: 50%;
+//   left: 50%;
+//   transform: translate(-50%, -50%);
+//   border-radius: 0; // To remove the rounded corners
+// }
+// .minimize:after {
+//   content: "";
+//   display: block;
+//   width: 8px;
+//   height: 2px;
+//   background-color: black;
+//   position: absolute;
+//   top: 50%;
+//   left: 50%;
+//   transform: translate(-50%, -50%);
+//   border-radius: 0; // To remove the rounded corners
+// }