Files
Hyperia/ui/site/index.html
2025-10-18 23:02:30 -05:00

64 lines
2.3 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;
}
</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>