84 lines
2.9 KiB
HTML
84 lines
2.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;
|
|
}
|
|
|
|
#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/quill.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 src="./components/AppMenu.js"></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;"/>
|
|
<script>AppMenu()</script>
|
|
<img id="divider" src="_/images/divider.svg" style="width: 40vw; position: fixed; bottom: 2em; left: 50vw; transform: translateX(-50%)"/>
|
|
</div>
|
|
</body>
|
|
</html> |