feat: Add initial mess
This commit is contained in:
parent
1988edaafe
commit
59fa42e6c0
BIN
icons/folder.png
Normal file
BIN
icons/folder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
icons/notepad.png
Normal file
BIN
icons/notepad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 843 B |
BIN
icons/trash.png
Normal file
BIN
icons/trash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 671 B |
15
index.html
Normal file
15
index.html
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
<title>My Desktop Page</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="desktop">
|
||||||
|
</div>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
259
script.js
Normal file
259
script.js
Normal file
@ -0,0 +1,259 @@
|
|||||||
|
let highestZIndex = 100;
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
const desktop = document.querySelector(".desktop");
|
||||||
|
|
||||||
|
const shortcutData = [
|
||||||
|
{
|
||||||
|
label: "My Files",
|
||||||
|
icon: "icons/folder.png",
|
||||||
|
width: 500,
|
||||||
|
height: 400,
|
||||||
|
action: () =>
|
||||||
|
openNewWindow(
|
||||||
|
"My Files",
|
||||||
|
`<iframe src="https://98.js.org"></iframe>`,
|
||||||
|
true,
|
||||||
|
500,
|
||||||
|
400
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Notes",
|
||||||
|
icon: "icons/notepad.png",
|
||||||
|
width: 400,
|
||||||
|
height: 300,
|
||||||
|
action: () =>
|
||||||
|
openNewWindow(
|
||||||
|
"Notes",
|
||||||
|
`<textarea>hello...</textarea>`,
|
||||||
|
true,
|
||||||
|
400,
|
||||||
|
300
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Recycle Bin",
|
||||||
|
icon: "icons/trash.png",
|
||||||
|
width: 300,
|
||||||
|
height: 200,
|
||||||
|
action: () =>
|
||||||
|
openNewWindow(
|
||||||
|
"Recycle Bin",
|
||||||
|
`<p>Your trash goes here.</p>`,
|
||||||
|
false,
|
||||||
|
300,
|
||||||
|
200
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "CSS Art",
|
||||||
|
icon: "icons/folder.png",
|
||||||
|
width: 600,
|
||||||
|
height: 500,
|
||||||
|
action: () =>
|
||||||
|
openNewWindow(
|
||||||
|
"CSS Art",
|
||||||
|
`<iframe src="https://tilde.town/~dozens/cssart/quarters.html"></iframe>`,
|
||||||
|
true,
|
||||||
|
600,
|
||||||
|
600
|
||||||
|
)
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
shortcutData.forEach(({ label, icon, action }) => {
|
||||||
|
const shortcut = document.createElement("div");
|
||||||
|
shortcut.className = "shortcut";
|
||||||
|
|
||||||
|
shortcut.innerHTML = `
|
||||||
|
<img src="${icon}" alt="${label}" />
|
||||||
|
<span>${label}</span>
|
||||||
|
`;
|
||||||
|
|
||||||
|
shortcut.addEventListener("dblclick", action);
|
||||||
|
document.querySelector(".desktop").appendChild(shortcut);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
init();
|
||||||
|
|
||||||
|
function openNewWindow(title, contentHTML, fullSizeContent = false, width = 300, height = 200) {
|
||||||
|
const newWin = document.createElement("div");
|
||||||
|
newWin.className = "window";
|
||||||
|
|
||||||
|
const viewportWidth = window.innerWidth;
|
||||||
|
const viewportHeight = window.innerHeight;
|
||||||
|
const randomLeft = Math.floor(Math.random() * (viewportWidth - 320));
|
||||||
|
const randomTop = Math.floor(Math.random() * (viewportHeight - 200));
|
||||||
|
newWin.style.left = `${randomLeft}px`;
|
||||||
|
newWin.style.top = `${randomTop}px`;
|
||||||
|
|
||||||
|
newWin.innerHTML = `
|
||||||
|
<div class="titlebar">
|
||||||
|
<div class="title">${title}</div>
|
||||||
|
<button class="close-btn" aria-label="Close window">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="content">${contentHTML}</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const resizers = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
|
||||||
|
resizers.forEach(pos => {
|
||||||
|
const resizer = document.createElement("div");
|
||||||
|
resizer.className = `resizer ${pos}`;
|
||||||
|
newWin.appendChild(resizer);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.body.appendChild(newWin);
|
||||||
|
|
||||||
|
bringToFront(newWin);
|
||||||
|
|
||||||
|
const content = newWin.querySelector(".content");
|
||||||
|
content.style.width = `${width}px`;
|
||||||
|
content.style.height = `${height}px`;
|
||||||
|
|
||||||
|
if (fullSizeContent) {
|
||||||
|
content.style.padding = "0";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bring window to front when clicked
|
||||||
|
newWin.addEventListener("mousedown", () => {
|
||||||
|
bringToFront(newWin);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Dragging logic
|
||||||
|
const titlebar = newWin.querySelector(".titlebar");
|
||||||
|
let isDragging = false;
|
||||||
|
let offsetX = 0;
|
||||||
|
let offsetY = 0;
|
||||||
|
|
||||||
|
titlebar.addEventListener("mousedown", (e) => {
|
||||||
|
if (e.target.classList.contains("close-btn")) return;
|
||||||
|
isDragging = true;
|
||||||
|
const rect = newWin.getBoundingClientRect();
|
||||||
|
offsetX = e.clientX - rect.left;
|
||||||
|
offsetY = e.clientY - rect.top;
|
||||||
|
document.body.style.userSelect = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("mousemove", (e) => {
|
||||||
|
if (!isDragging) return;
|
||||||
|
newWin.style.left = `${e.clientX - offsetX}px`;
|
||||||
|
newWin.style.top = `${e.clientY - offsetY}px`;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("mouseup", () => {
|
||||||
|
if (isDragging) {
|
||||||
|
isDragging = false;
|
||||||
|
document.body.style.userSelect = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close button logic
|
||||||
|
const closeBtn = newWin.querySelector(".close-btn");
|
||||||
|
closeBtn.addEventListener("click", () => {
|
||||||
|
newWin.remove();
|
||||||
|
});
|
||||||
|
|
||||||
|
let isResizing = false;
|
||||||
|
let currentResizer = null;
|
||||||
|
|
||||||
|
const minWidth = 200;
|
||||||
|
const minHeight = 150;
|
||||||
|
|
||||||
|
const startResize = (e, resizer) => {
|
||||||
|
e.preventDefault();
|
||||||
|
isResizing = true;
|
||||||
|
currentResizer = resizer;
|
||||||
|
|
||||||
|
const rect = newWin.getBoundingClientRect();
|
||||||
|
newWin.dataset.startX = e.clientX;
|
||||||
|
newWin.dataset.startY = e.clientY;
|
||||||
|
newWin.dataset.startWidth = rect.width;
|
||||||
|
newWin.dataset.startHeight = rect.height;
|
||||||
|
newWin.dataset.startLeft = rect.left;
|
||||||
|
newWin.dataset.startTop = rect.top;
|
||||||
|
|
||||||
|
document.body.style.userSelect = "none";
|
||||||
|
};
|
||||||
|
|
||||||
|
const onMouseMove = (e) => {
|
||||||
|
if (!isResizing || !currentResizer) return;
|
||||||
|
|
||||||
|
const dx = e.clientX - newWin.dataset.startX;
|
||||||
|
const dy = e.clientY - newWin.dataset.startY;
|
||||||
|
|
||||||
|
let newWidth = parseFloat(newWin.dataset.startWidth);
|
||||||
|
let newHeight = parseFloat(newWin.dataset.startHeight);
|
||||||
|
let newLeft = parseFloat(newWin.dataset.startLeft);
|
||||||
|
let newTop = parseFloat(newWin.dataset.startTop);
|
||||||
|
|
||||||
|
switch (currentResizer) {
|
||||||
|
case 'e':
|
||||||
|
newWidth += dx;
|
||||||
|
break;
|
||||||
|
case 's':
|
||||||
|
newHeight += dy;
|
||||||
|
break;
|
||||||
|
case 'se':
|
||||||
|
newWidth += dx;
|
||||||
|
newHeight += dy;
|
||||||
|
break;
|
||||||
|
case 'w':
|
||||||
|
newWidth -= dx;
|
||||||
|
newLeft += dx;
|
||||||
|
break;
|
||||||
|
case 'n':
|
||||||
|
newHeight -= dy;
|
||||||
|
newTop += dy;
|
||||||
|
break;
|
||||||
|
case 'nw':
|
||||||
|
newWidth -= dx;
|
||||||
|
newLeft += dx;
|
||||||
|
newHeight -= dy;
|
||||||
|
newTop += dy;
|
||||||
|
break;
|
||||||
|
case 'ne':
|
||||||
|
newWidth += dx;
|
||||||
|
newHeight -= dy;
|
||||||
|
newTop += dy;
|
||||||
|
break;
|
||||||
|
case 'sw':
|
||||||
|
newWidth -= dx;
|
||||||
|
newLeft += dx;
|
||||||
|
newHeight += dy;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newWidth >= minWidth) {
|
||||||
|
newWin.style.width = `${newWidth}px`;
|
||||||
|
newWin.style.left = `${newLeft}px`;
|
||||||
|
content.style.width = `${newWidth}px`;
|
||||||
|
}
|
||||||
|
if (newHeight >= minHeight) {
|
||||||
|
newWin.style.height = `${newHeight}px`;
|
||||||
|
newWin.style.top = `${newTop}px`;
|
||||||
|
content.style.height = `${newHeight - titlebar.offsetHeight}px`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const stopResize = () => {
|
||||||
|
isResizing = false;
|
||||||
|
currentResizer = null;
|
||||||
|
document.body.style.userSelect = "";
|
||||||
|
};
|
||||||
|
|
||||||
|
resizers.forEach(pos => {
|
||||||
|
const el = newWin.querySelector(`.resizer.${pos}`);
|
||||||
|
el.addEventListener("mousedown", (e) => startResize(e, pos));
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("mousemove", onMouseMove);
|
||||||
|
document.addEventListener("mouseup", stopResize);
|
||||||
|
|
||||||
|
function bringToFront(win) {
|
||||||
|
highestZIndex++;
|
||||||
|
win.style.zIndex = highestZIndex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
156
styles.css
Normal file
156
styles.css
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
body {
|
||||||
|
font-family: Tahoma, sans-serif;
|
||||||
|
margin: 2rem;
|
||||||
|
background-color: #e0b0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window {
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid #555;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow:
|
||||||
|
0 4px 8px rgba(0, 0, 0, 0.3), /* Soft outer shadow */
|
||||||
|
inset 0 0 5px rgba(255, 255, 255, 0.1); /* Inner highlight for 3D */
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
font-family: sans-serif;
|
||||||
|
cursor: default;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: auto; /* allow flexible height */
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titlebar .title {
|
||||||
|
flex: 1;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titlebar {
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
background: linear-gradient(to bottom, #8a2be2, #6a1dbf);
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
cursor: move;
|
||||||
|
border-top-left-radius: 10px;
|
||||||
|
border-top-right-radius: 10px;
|
||||||
|
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 10px;
|
||||||
|
background: #C0C0C0;
|
||||||
|
overflow: auto;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-right: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn:hover {
|
||||||
|
color: #ffaaaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, 80px);
|
||||||
|
grid-auto-rows: 100px;
|
||||||
|
gap: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shortcut {
|
||||||
|
width: 80px;
|
||||||
|
text-align: center;
|
||||||
|
color: black;
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: sans-serif;
|
||||||
|
margin: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shortcut img {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shortcut span {
|
||||||
|
display: block;
|
||||||
|
text-shadow: 1px 1px 2px white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content textarea {
|
||||||
|
font-family: monospace;
|
||||||
|
padding: 8px;
|
||||||
|
resize: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content iframe,
|
||||||
|
.content textarea {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window .resizer {
|
||||||
|
position: absolute;
|
||||||
|
background: transparent;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Corners */
|
||||||
|
.window .resizer.nw, .window .resizer.ne,
|
||||||
|
.window .resizer.sw, .window .resizer.se {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window .resizer.nw { top: 0; left: 0; cursor: nw-resize; }
|
||||||
|
.window .resizer.ne { top: 0; right: 0; cursor: ne-resize; }
|
||||||
|
.window .resizer.sw { bottom: 0; left: 0; cursor: sw-resize; }
|
||||||
|
.window .resizer.se { bottom: 0; right: 0; cursor: se-resize; }
|
||||||
|
|
||||||
|
/* Sides */
|
||||||
|
.window .resizer.n, .window .resizer.s {
|
||||||
|
height: 6px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
cursor: ns-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window .resizer.n { top: 0; }
|
||||||
|
.window .resizer.s { bottom: 0; }
|
||||||
|
|
||||||
|
.window .resizer.e, .window .resizer.w {
|
||||||
|
width: 6px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
cursor: ew-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window .resizer.e { right: 0; }
|
||||||
|
.window .resizer.w { left: 0; }
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user