diff --git a/bg.jpg b/bg.jpg new file mode 100644 index 0000000..b928678 Binary files /dev/null and b/bg.jpg differ diff --git a/box.html b/box.html new file mode 100644 index 0000000..764b1d2 --- /dev/null +++ b/box.html @@ -0,0 +1,2 @@ + +

HIHI oh wow

\ No newline at end of file diff --git a/drag.js b/drag.js new file mode 100644 index 0000000..d9b8730 --- /dev/null +++ b/drag.js @@ -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 = "

" + title + "

"; + + const frame = ``; + + 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); +} + +/* +
+
+

Slimekoban

+ +
+ +
+ */ \ No newline at end of file diff --git a/images/ui/joystix monospace.otf b/images/ui/joystix monospace.otf new file mode 100644 index 0000000..20a3100 Binary files /dev/null and b/images/ui/joystix monospace.otf differ diff --git a/images/ui/wallpaper1.png b/images/ui/wallpaper1.png new file mode 100644 index 0000000..fa50bda Binary files /dev/null and b/images/ui/wallpaper1.png differ diff --git a/index.html b/index.html index 22d7010..cb27d4c 100644 --- a/index.html +++ b/index.html @@ -7,43 +7,26 @@ - + - - Directory -

coming soon

+
+
+

Home

+
+
+

Hihi

+ +

Page coming soon!

+ + + + +

PossiblyAxolotl Directory

+
+ +
\ No newline at end of file diff --git a/rock.jpg b/rock.jpg deleted file mode 100644 index 94961ca..0000000 Binary files a/rock.jpg and /dev/null differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..69c9786 --- /dev/null +++ b/style.css @@ -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; +} \ No newline at end of file