diff --git a/compile-sass.sh b/compile-sass.sh new file mode 100755 index 0000000..612c1ee --- /dev/null +++ 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 new file mode 100644 index 0000000..b26010f --- /dev/null +++ b/index.html @@ -0,0 +1,33 @@ + + + + + + Windows 3.11 Window + + + +
+
+
+ +
+
Window Title
+
+
+
+ +
+
+ +
+
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fringilla lacinia tincidunt.

+
+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..38bf13f --- /dev/null +++ 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 new file mode 100644 index 0000000..16f50b1 --- /dev/null +++ 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,'); } + .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,'); } + .maximize:active { + background-color: #808080; + border-color: #808080; + box-shadow: none; + transform: translate(1px, 1px); } diff --git a/styles.scss b/styles.scss new file mode 100644 index 0000000..2e2991f --- /dev/null +++ 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,'); + +} + +.maximize { + @include button-styles; + background-position: center; + background-image: url('data:image/svg+xml;utf8,'); +} + +// .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 +// }