+
+
+
+
+
+
+
+ The NerdEMU Emulator
+
+
+
+
+
+
+
+
diff --git a/test.css b/test.css
new file mode 100644
index 0000000..a925462
--- /dev/null
+++ b/test.css
@@ -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%;
+}
+
diff --git a/test.js b/test.js
new file mode 100644
index 0000000..f97faf9
--- /dev/null
+++ b/test.js
@@ -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!");
+}
+