diff --git a/css/styles.css b/css/styles.css index 18475d2..010b263 100644 --- a/css/styles.css +++ b/css/styles.css @@ -85,6 +85,40 @@ pre { color: var(--colour-text); font-family: 'Courier New'; } +/* TODO: Refactor. */ +dialog.window { + color: unset; + position: absolute; + margin: 0; + background: none; + border: none; +} +dialog.window div.titlebar { + padding-left: 1%; + border-style: solid; + border-width: 2px; + background-color: var(--colour-sbg); + border-color: var(--colour-sbga); + cursor: grab; +} +dialog.window button { + float: right; + color: unset; + border: unset; + border-left: solid; + border-width: 1px; + border-color: var(--colour-sbga); + background-color: rgba(0, 0, 0, 0.3); + cursor: pointer; +} +dialog.window iframe { + border-top: none; + border-bottom: solid; + border-left: solid; + border-right: solid; + border-width: 2px; + border-color: var(--colour-sbga); +} .centred-text { text-align: center; } diff --git a/etc/placeholder.html b/etc/placeholder.html new file mode 100644 index 0000000..269b8be --- /dev/null +++ b/etc/placeholder.html @@ -0,0 +1,9 @@ + + + + www.madstuff.net: Placeholder + + +

Placeholder

+ + diff --git a/index.html b/index.html index 98c5c5a..573159c 100644 --- a/index.html +++ b/index.html @@ -5,10 +5,18 @@ + www.madstuff.net
+ +
+ Window + +
+ +

Welcome!

diff --git a/js/window.js b/js/window.js new file mode 100644 index 0000000..a12fd4d --- /dev/null +++ b/js/window.js @@ -0,0 +1,29 @@ +// TODO: Rewrite to support more than one window per page. + +const subwindow = document.getElementById("window"); +const titlebar = document.getElementById("window-titlebar"); + +let dragging = false; +let prevPosX; +let prevPosY; + +titlebar.addEventListener("mousedown", (event) => { + dragging = true; + prevPosX = event.clientX; + prevPosY = event.clientY; +}); + +window.addEventListener("mousemove", (event) => { + if (!dragging) + return; + const newPosX = subwindow.offsetLeft - (prevPosX - event.clientX); + const newPosY = subwindow.offsetTop - (prevPosY - event.clientY); + subwindow.style.left = newPosX + "px"; + subwindow.style.top = newPosY + "px"; + prevPosX = event.clientX; + prevPosY = event.clientY; +}); + +window.addEventListener("mouseup", (_event) => { + dragging = false; +});