sam/Hyperia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding dashboard, changing front page

Browse Source
This commit is contained in:
metacryst
2025-10-12 17:56:07 -05:00
parent d02103a0bc
commit 8a6f3da116
11 changed files with 225 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
ui/site/index.html
View File

@@ -1,23 +1,79 @@
<!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">
<script src="_/code/util.js"></script>
<script type="module">
import "./components/ProfileButton.js"
import "./components/InputBox.js"
import "./components/Sidebar.js"
<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;
}
import ConnectionHandler from "./ws/ConnectionHandler.js"
window.ConnectionHandler = new ConnectionHandler()
</script>
</head>
<body>
<profile-button style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw"></profile-button>
<input-box></input-box>
<side-bar></side-bar>
</body>
#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)
}
.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%)
}
</style>
<script src="_/code/util.js"></script>
<script type="module">
import "./components/ProfileButton.js"
import "./components/InputBox.js"
import "./components/Sidebar.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>
<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;"/>
<img src="_/images/divider.svg" style="width: 40vw; position: fixed; bottom: 2em; left: 50vw; transform: translateX(-50%)"/>
<div id="menu-bar" style="display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 2.3em; transform: translateX(-50%)">
<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>
</div>
</body>
</html>