madison/madstuff-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add windows

Browse source
This commit is contained in:
madison 2026-04-13 22:28:49 +01:00
parent 2db96e7c50
commit 098a96e133
4 changed files with 80 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

34
css/styles.css
View file

@ -85,6 +85,40 @@ pre {
color: var(--colour-text); color: var(--colour-text);
font-family: 'Courier New'; 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 { .centred-text {
text-align: center; text-align: center;
} }

9
etc/placeholder.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>www.madstuff.net: Placeholder</title>
</head>
<body style="background-color: black;">
<h1 style="color: white;">Placeholder</h1>
</body>
</html>

8
index.html
View file

@ -5,10 +5,18 @@
<link rel="stylesheet" href="/css/styles.css" type="text/css"> <link rel="stylesheet" href="/css/styles.css" type="text/css">
<link rel="icon" type="image/png" sizes="32x32" href="/third-party/media/images/favicon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/third-party/media/images/favicon.png">
<script defer src="/js/include.js"></script> <script defer src="/js/include.js"></script>
<script defer src="/js/window.js"></script>
<title>www.madstuff.net</title> <title>www.madstuff.net</title>
</head> </head>
<body> <body>
<div include="/html-prefabs/banner-index.html"></div> <div include="/html-prefabs/banner-index.html"></div>
<dialog open closedby="none" id="window" class="window">
<div id="window-titlebar" class="titlebar">
<small>Window</small>
<button command="close" commandfor="window">X</button>
</div>
<iframe src="/etc/placeholder.html" frameborder="0"></iframe>
</dialog>
<main> <main>
<section> <section>
<h2>Welcome!</h2> <h2>Welcome!</h2>

29
js/window.js Normal file
View file

@ -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;
});