create initial page

box.html

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

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 = "<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>
+    */

index.html

@@ -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>

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;
+}