Compare commits
No commits in common. "d583605e06836c64c0dcfecfc4a0dc537f7aa3be" and "03fe6a1843dfd25d94f1ff864eefb3d9a3c9f2ae" have entirely different histories.
d583605e06
...
03fe6a1843
56
index.html
56
index.html
|
|
@ -1,47 +1,15 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html lang="en-US">
|
<html lang="en-US">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
<title>test</title>
|
||||||
<title>Web-Test | NerdEMU</title>
|
</head>
|
||||||
<link rel="stylesheet" href="test.css">
|
<body>
|
||||||
</head>
|
<script type="module">
|
||||||
<body>
|
import init, { greet } from "./base/pkg/nemu_base.js";
|
||||||
<header id="config-button"s>
|
init().then(() => {
|
||||||
<div class="hamburger" id="configurator-button">
|
greet("NerdEMU");
|
||||||
<div class="hamburger-slice"></div>
|
});
|
||||||
<div class="hamburger-slice"></div>
|
</script>
|
||||||
<div class="hamburger-slice"></div>
|
</body>
|
||||||
<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>
|
</html>
|
||||||
|
|
|
||||||
134
test.css
134
test.css
|
|
@ -1,134 +0,0 @@
|
||||||
|
|
||||||
* {
|
|
||||||
|
|
||||||
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%;
|
|
||||||
}
|
|
||||||
|
|
||||||
19
test.js
19
test.js
|
|
@ -1,19 +0,0 @@
|
||||||
|
|
||||||
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