Grasscutters/MojoFrontend
2
0
Fork 0
mirror of https://github.com/SpikeHD/MojoFrontend.git synced 2024-11-16 07:29:23 +00:00
Code Issues Projects Releases Wiki Activity

page switching

Browse Source
This commit is contained in:
SpikeHD 2022-05-03 03:12:30 -07:00
parent cfe868f498
commit 052e13f469
7 changed files with 97 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
console.html
View File

@ -1,23 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/console.css" />
<script src="scripts/onload.js"></script>
<script src="scripts/console.js"></script>
</head>
<body>
<div id="main">
<div id="titleBar">
Mojo Console
Mojo Console <img src="" id="logo" />
</div>
<div id="right">
<div id="sidebar">
<div class="sidebarItem" data-value="players">Players</div>
<div class="sidebarItem" data-value="server">Server</div>
</div>
<iframe id="content" src="pages/default.html"></iframe>
</div>
</div>
</body>
<!-- Styling -->
<style>
</style>
<!-- Javascript -->
<script>
</script>
</html>

9
pages/default.html Normal file
View File

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../styles/console.css" />
</head>
</html>
<div>
This is the default page!
</div>

9
pages/players.html Normal file
View File

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../styles/console.css" />
</head>
</html>
<div>
This is the players page!
</div>

9
pages/server.html Normal file
View File

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../styles/console.css" />
</head>
</html>
<div>
This is the server page!
</div>

5
scripts/console.js
View File

@ -20,4 +20,9 @@ function sendCommand(payload){
// Sending data with the request
client.send(data);
}
function switchPage(page) {
const iframe = document.getElementById("content");
iframe.src = `pages/${page}.html`;
}

58
styles/console.css
View File

@ -1,12 +1,28 @@
html {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
iframe {
border: none;
}
#logo {
height: 20px;
}
#main {
background-color: #fff;
color: #000;
font-size: 12px;
font-weight: bold;
padding: 5px;
text-align: center;
width: 100%;
@ -14,6 +30,42 @@ body {
overflow: hidden;
}
#right {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 100vh;
}
#titleBar {
font-size: 1.2em;
font-size: 3em;
padding: 20px;
text-align: left;
font-weight: bold;
}
#sidebar {
display: flex;
flex-direction: column;
height: 100%;
width: 200px;
background-color: #eee;
}
.sidebarItem {
font-size: 1.4em;
padding: 20px;
border-bottom: 1px solid #ccc;
transition: background 0.2s ease-in-out;
}
.sidebarItem:hover {
background: #ccc;
cursor: pointer;
}
#content {
height: 100%;
width: 100%;
}

0
styles/console_dark.css Normal file
View File