Compare commits
3 Commits
03fe6a1843
...
d583605e06
| Author | SHA1 | Date |
|---|---|---|
Eric-Paul Ickhorn
|
d583605e06 | |
|
Eric-Paul Ickhorn
|
5c089fa51c | |
|
Eric-Paul Ickhorn
|
363821c0fd |
56
index.html
56
index.html
|
|
@ -1,15 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>test</title>
|
||||
</head>
|
||||
<body>
|
||||
<script type="module">
|
||||
import init, { greet } from "./base/pkg/nemu_base.js";
|
||||
init().then(() => {
|
||||
greet("NerdEMU");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<title>Web-Test | NerdEMU</title>
|
||||
<link rel="stylesheet" href="test.css">
|
||||
</head>
|
||||
<body>
|
||||
<header id="config-button"s>
|
||||
<div class="hamburger" id="configurator-button">
|
||||
<div class="hamburger-slice"></div>
|
||||
<div class="hamburger-slice"></div>
|
||||
<div class="hamburger-slice"></div>
|
||||
<div>
|
||||
|
||||
</header>
|
||||
|
||||
<div id="configurator-modal">
|
||||
<div id="configurator-modal-background"></div>
|
||||
|
||||
<div id="configurator-modal-foreground">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
|
||||
<p id="output-title">The NerdEMU Emulator</p>
|
||||
|
||||
<canvas class="pixel-output"></canvas>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
|
||||
<script src="test.js"></script>
|
||||
<script type="module">
|
||||
import init, { greet } from "./base/pkg/nemu_base.js";
|
||||
|
||||
init().then(() => {
|
||||
greet("NerdEMU");
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,134 @@
|
|||
|
||||
* {
|
||||
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
html, body {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: #1a2b40;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
main {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header {
|
||||
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
z-index: 10;
|
||||
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-bottom-left-radius: 12px;
|
||||
|
||||
background-color: #0f141b;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
|
||||
margin-bottom: 2px;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hamburger-slice {
|
||||
|
||||
margin: 3px;
|
||||
|
||||
width: 75%;
|
||||
height: 6px;
|
||||
|
||||
background-color: #ffffff;
|
||||
border-radius: 2.5px;
|
||||
}
|
||||
|
||||
.pixel-output {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#config-button {
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.pixel-output {
|
||||
|
||||
z-index: 2;
|
||||
width: 60vw;
|
||||
max-height: 90vh;
|
||||
|
||||
/*So it's always a 16/9 aspect ratio */
|
||||
height: calc(60vw*0.5625);
|
||||
background-color: #000000;
|
||||
box-shadow: 0px 0px 8px 8px #0f141b55;
|
||||
}
|
||||
|
||||
#output-title {
|
||||
|
||||
padding-bottom: 20px;
|
||||
|
||||
font-size: 32px;
|
||||
font-weight: 1000;
|
||||
}
|
||||
|
||||
#configurator-modal {
|
||||
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
display: none;
|
||||
z-index: 4;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#configurator-modal-background {
|
||||
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
z-index: 5;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: #0f141bb0;
|
||||
}
|
||||
|
||||
#configurator-modal-foreground {
|
||||
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
z-index: 6;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
|
||||
var configuratorButton = document.getElementById("configurator-button");
|
||||
var configuratorModal = document.getElementById("configurator-modal");
|
||||
configuratorButton.onclick = onConfiguratorButtonClick;
|
||||
|
||||
var isConfiguratorShown = false;
|
||||
function onConfiguratorButtonClick(event) {
|
||||
|
||||
if(isConfiguratorShown == false) {
|
||||
configuratorModal.style.display = "block";
|
||||
isConfiguratorShown = true;
|
||||
console.log("Showing Configurator-Modal!");
|
||||
return;
|
||||
}
|
||||
configuratorModal.style.display = "none";
|
||||
isConfiguratorShown = false;
|
||||
console.log("Hiding Configurator-Modal!");
|
||||
}
|
||||
|
||||
Reference in New Issue