131 lines
4.9 KiB
HTML
131 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Hyperia</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" href="_/icons/logo.svg">
|
|
<link rel="stylesheet" href="_/code/shared.css">
|
|
<style>
|
|
body {
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#painting {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
margin: 0px;
|
|
background-image:url('_/images/the_return.webp');
|
|
background-size: cover;
|
|
background-position: 48% 65%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#menu-bar {
|
|
color: var(--tan);
|
|
transform: translateX(-50%);
|
|
transition: transform .3s;
|
|
}
|
|
#menu-bar.minimized {
|
|
color: var(--accent);
|
|
transform: translate(-50%, 55%);
|
|
border: 1px solid var(--accent);
|
|
padding-left: 2em; padding-right: 2em;
|
|
}
|
|
#divider.minimized {
|
|
display: none;
|
|
}
|
|
|
|
.app {
|
|
cursor: default;
|
|
transition: transform .3s, text-decoration .3s;
|
|
padding: 0.5em;
|
|
border-radius: 5px;
|
|
text-underline-offset: 5px;
|
|
}
|
|
.app:hover {
|
|
text-decoration: underline;
|
|
transform: translateY(-5%)
|
|
}
|
|
.app.touched {
|
|
text-decoration: underline;
|
|
transform: translateY(0%)
|
|
}
|
|
.app.selected {
|
|
text-decoration: underline;
|
|
transform: translateY(-10%)
|
|
}
|
|
</style>
|
|
<script src="_/code/util.js"></script>
|
|
<script type="module">
|
|
import "./components/ProfileButton.js"
|
|
import "./components/InputBox.js"
|
|
import "./components/Sidebar.js"
|
|
import "./components/AppWindow.js"
|
|
|
|
import ConnectionHandler from "./ws/ConnectionHandler.js"
|
|
window.ConnectionHandler = new ConnectionHandler()
|
|
</script>
|
|
<script>
|
|
const img = new Image();
|
|
img.src = "_/images/the_return.webp";
|
|
|
|
img.onload = () => {
|
|
document.getElementById('loading-wrapper').style.display = 'block';
|
|
};
|
|
|
|
// Optional: fallback if image fails
|
|
img.onerror = () => {
|
|
console.error("Background image failed to load.");
|
|
document.getElementById('loading-wrapper').style.display = 'block';
|
|
};
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="loading-wrapper" style="display: none;">
|
|
<div id="painting"></div>
|
|
<app-window></app-window>
|
|
<profile-button style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw"></profile-button>
|
|
<img src="_/icons/logo.svg" style="width: 3.5em; position: fixed; left: 3em; top: 2em;"/>
|
|
<div id="menu-bar" style="display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 2.3em;">
|
|
<p class="app">Forum</p>
|
|
<p class="app">Messages</p>
|
|
<p class="app">Market</p>
|
|
<p class="app">Security</p>
|
|
<p class="app">Jobs</p>
|
|
</div>
|
|
<img id="divider" src="_/images/divider.svg" style="width: 40vw; position: fixed; bottom: 2em; left: 50vw; transform: translateX(-50%)"/>
|
|
<script>
|
|
Array.from(document.querySelectorAll(".app")).forEach((el) => {
|
|
el.addEventListener("mousedown", (e) => {
|
|
el.classList.add("touched")
|
|
})
|
|
})
|
|
window.addEventListener("mouseup", (e) => {
|
|
let target = e.target
|
|
if(!target.matches("p.app")) {
|
|
return
|
|
}
|
|
$("p.app").forEach((el) => {
|
|
if(el.innerText !== target.innerText) {
|
|
el.classList.remove("selected")
|
|
}
|
|
})
|
|
|
|
target.classList.remove("touched")
|
|
if(target.classList.contains("selected")) {
|
|
target.classList.remove("selected")
|
|
$("#menu-bar").classList.remove("minimized")
|
|
$("#divider").classList.remove("minimized")
|
|
$("app-window").close()
|
|
} else {
|
|
target.classList.add("selected")
|
|
$("#menu-bar").classList.add("minimized")
|
|
$("#divider").classList.add("minimized")
|
|
$("app-window").open(target.innerText)
|
|
}
|
|
})
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html> |