create initial page

This commit is contained in:
PossiblyAxolotl 2024-08-15 16:09:42 -06:00
parent e8bb6c4c2d
commit a5950007cd
8 changed files with 291 additions and 35 deletions

BIN
bg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

2
box.html Normal file
View file

@ -0,0 +1,2 @@
<h1>HIHI oh wow</h1>

142
drag.js Normal file
View file

@ -0,0 +1,142 @@
let mousedown = 0;
let selected = null;
let zIndex = 0
/* CLAMP */
function clampPos() {
if (selected) {
const sPosX = Number(selected.style.left.replace("px", ""));
const sPosY = Number(selected.style.top.replace("px", ""));
const lPad = -selected.offsetWidth / 2;
const rPad = window.innerWidth - selected.offsetWidth / 2;
const tPad = 0;
if (sPosX < lPad) {selected.style.left = lPad + "px"};
if (sPosX > rPad) {selected.style.left = rPad + "px"};
if (sPosY < tPad) {selected.style.top = tPad + "px"};
if (selected) {
selected.getElementsByTagName("iframe")[0].style.pointerEvents = "all";
}
selected = null;
if (mouseDown > 0) {mouseDown--;};
}
}
addEventListener("touchend", clampPos);
addEventListener("mouseup", clampPos);
/* DESKTOP */
let mouseDown = 0
addEventListener("mousedown", event => {
const t = event.target
if (t.classList.contains("drag")) {
selected = t.parentElement;
};
if (t.parentElement.classList.contains("drag")) {
selected = t.parentElement.parentElement;
};
if (selected) {
selected.getElementsByTagName("iframe")[0].style.pointerEvents = "none";
zIndex ++;
selected.style.zIndex = zIndex;
}
mouseDown ++;
});
addEventListener("mousemove", event => {
if (selected && mouseDown > 0) {
let curL = selected.style.left.replace("px", "");
let curT = selected.style.top.replace("px", "");
curL = Number(curL);
curT = Number(curT);
selected.style.left = (curL + event.movementX) + "px";
selected.style.top = (curT + event.movementY) + "px";
}
})
/* MOBILE */
let initialTouchPosition = { x: 0, y: 0 };
addEventListener("touchstart", event => {
const t = event.target;
if (t.classList.contains("drag")) {
selected = t.parentElement;
}
if (t.parentElement.classList.contains("drag")) {
selected = t.parentElement.parentElement;
}
if (selected) {
zIndex ++;
selected.style.zIndex = zIndex;
}
initialTouchPosition = {
x: event.touches[0].clientX,
y: event.touches[0].clientY
};
});
addEventListener("touchmove", event => {
console.log(event)
if (selected) {
let curL = selected.style.left.replace("px", "");
let curT = selected.style.top.replace("px", "");
curL = Number(curL);
curT = Number(curT);
selected.style.left = (curL + event.touches[0].clientX - initialTouchPosition.x) + "px";
selected.style.top = (curT + event.touches[0].clientY - initialTouchPosition.y) + "px";
initialTouchPosition = {
x: event.touches[0].clientX,
y: event.touches[0].clientY
};
}
});
/* CREATE WINDOW */
function createWindow(url, title, width, height) {
const win = document.createElement("div");
win.className = "window";
const head = document.createElement("div");
head.classList = "header drag";
head.innerHTML = "<p>" + title + "</p><button onclick='this.parentNode.parentNode.remove()'>x</button>";
const frame = `<iframe class='content' src='${url}' width='${width}' height='${height}'></iframe>`;
win.appendChild(head);
win.innerHTML += frame;
win.style.left = ((window.innerWidth / 2) - (Number(width.replace("px","")) / 2)) + "px";
win.style.top = ((window.innerHeight / 2) - (Number(height.replace("px","")) / 2)) + "px";
zIndex ++;
win.style.zIndex = zIndex;
document.body.appendChild(win);
}
/*
<div class="window">
<div class="header drag">
<p>Slimekoban</p>
<button onclick="this.parentNode.parentNode.remove()">x</button>
</div>
<iframe class="content" src="https://www.possiblyaxolotl.com" width="800px" height="500px"></iframe>
</div>
*/

Binary file not shown.

BIN
images/ui/wallpaper1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 MiB

View file

@ -7,43 +7,26 @@
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style>
* {
padding: 0;
margin: 0;
<link rel="stylesheet" href="style.css">
overflow: hidden;
}
img {
width:100lvw;
height:100lvh;
padding:0;
margin:0;
}
a {
position:absolute;
top:2px;
z-index: 1;
left:2px;
color:white;
text-shadow: 2px 2px 4px black;
}
p {
position:absolute;
top:20px;
z-index: 1;
left:2px;
color:white;
text-shadow: 2px 2px 4px black;
}
</style>
<script src="drag.js" defer></script>
</head>
<body>
<img src="rock.jpg" />
<a href="https://directory.possiblyaxolotl.com">Directory</a>
<p>coming soon</p>
<div class="body">
<div class="header">
<p>Home</p>
</div>
<div class="content">
<h1>Hihi</h1>
<p>Page coming soon!</p>
<button onclick="createWindow('https://www.possiblyaxolotl.com', 'possiblyaxolotl', '800px', '500px')">Created by PossiblyAxolotl</button>
<button onclick="createWindow('box.html', 'test box', '400px', '200px')">Another window</button>
<p><a href="https://directory.possiblyaxolotl.com">PossiblyAxolotl Directory</a></p>
</div>
</div>
</body>
</html>

BIN
rock.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

129
style.css Normal file
View file

@ -0,0 +1,129 @@
@font-face {
font-family: "PC";
src: url("/images/ui/joystix monospace.otf");
font-smooth: never;
}
p, h1, button {
font-family: "PC", monospace;
}
@keyframes appear {
0% {
transform: scale(0%);
}
100% {
transform:scale(100%);
}
}
.window {
animation: appear cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s;
position: absolute;
border: outset 4px white;
background:white;
text-align: center;
padding:0;
margin:0;
max-width: 100vw;
left:200px;
top:200px;
box-shadow: 4px 4px rgba(0,0,0,0.5), 0px 0px 4px rgba(0,0,0,0.5);
}
.body {
border: outset 4px white;
background:white;
text-align: center;
padding:0;
margin:auto;
margin-top: 64px;
max-width: 800px;
width: calc(100% - 48px);
box-shadow: 4px 4px rgba(0,0,0,0.5);
margin-bottom: 8px;
}
@media only screen and (max-width:800px) {
.body {
margin-top: 24px;
}
}
.header {
background-color: #4592b5;
color: white;
border-bottom: inset 4px rgb(219, 219, 219);
display: flex;
padding:3px;
padding-bottom: 2px;
touch-action: none;
}
.drag {
cursor: move;
}
.header p {
margin:0;
padding:0;
margin-left:4px;
margin-right:auto;
text-shadow: 2px 2px rgba(0,0,0,0.5);
}
.content {
border: inset 4px white;
max-width: calc(100vw - 24px);
}
button, button:hover {
border: outset white 4px;
background-color: white;
color:black;
text-align: center;
box-shadow: 0px 0px 2px rgba(0,0,0,0.25);
}
.header button, .header button:hover {
width: 18px;
height: 18px;
padding:0;
margin:0;
border: outset white 2px;
}
button:active {
border: inset white 4px;
background-color: lightgray;
}
.header button:active {
border: inset white 2px;
}
body, html {
background: url("images/ui/wallpaper1.png");
overflow-x: hidden;
width: 100vw;
max-width: 99vw;
padding:0;
margin:0;
}