Compare commits
2 Commits
| Author | SHA1 | Date |
|---|---|---|
Eric-Paul I
|
95506a7700 | |
|
Eric-Paul Ickhorn
|
0d92060296 |
|
|
@ -0,0 +1,166 @@
|
|||
|
||||
* {
|
||||
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
html, body, main {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#configurator {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
width: 85vw;
|
||||
height: 85vw;
|
||||
|
||||
max-width: 85vh;
|
||||
max-height: 85vh;
|
||||
}
|
||||
|
||||
.config-step > .header {
|
||||
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
top: -32px;
|
||||
|
||||
height: 32px;
|
||||
|
||||
background-color: #161819;
|
||||
color: #fff;
|
||||
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: 650;
|
||||
|
||||
}
|
||||
|
||||
.config-step > .content {
|
||||
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
top: -32px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.config-step > .content > .inner-pane {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#pane-choose-configurator {
|
||||
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
|
||||
background-color: #1e2122;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#configurator-chooser-background {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#configurator-chooser-preset-background {
|
||||
|
||||
position: relative;
|
||||
bottom: 0%;
|
||||
right: 0%;
|
||||
z-index: 2;
|
||||
|
||||
width: 99%;
|
||||
height: 99%;
|
||||
|
||||
clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
|
||||
|
||||
background-color: #242728;
|
||||
}
|
||||
|
||||
#configurator-chooser-preset-background:hover {
|
||||
|
||||
background-color: #2f3436;
|
||||
}
|
||||
|
||||
#configurator-chooser-own-systems-background {
|
||||
|
||||
position: relative;
|
||||
bottom: 98%;
|
||||
right: -1%;
|
||||
|
||||
width: 99%;
|
||||
height: 99%;
|
||||
|
||||
clip-path: polygon(100% 100%, 0% 100%, 100% 0%);
|
||||
|
||||
background-color: #242728;
|
||||
}
|
||||
|
||||
#configurator-chooser-own-systems-background:hover {
|
||||
|
||||
background-color: #2f3436;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#button-choose-preset-configurator {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
top: -70%;
|
||||
left: 22.5%;
|
||||
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
font-weight: 1000;
|
||||
}
|
||||
|
||||
#button-choose-own-systems-configurator {
|
||||
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
top: -40%;
|
||||
left: 60%;
|
||||
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
font-weight: 1000;
|
||||
}
|
||||
|
||||
#main-desktop-container {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
background-color: #373939;
|
||||
}
|
||||
|
||||
#control-bar {
|
||||
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: 16;
|
||||
|
||||
width: 48px;
|
||||
height: 100%;
|
||||
|
||||
background-color: #1e2122;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>NEMU | nerdcult.net emulator</title>
|
||||
|
||||
<link rel="stylesheet" href="configurator.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main id="main-desktop-container">
|
||||
|
||||
<aside id="control-bar">
|
||||
|
||||
|
||||
|
||||
</aside>
|
||||
|
||||
<section id="configurator">
|
||||
|
||||
<div class="config-step" id="pane-choose-configurator">
|
||||
|
||||
<div class="header">
|
||||
System Type
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="inner-pane">
|
||||
|
||||
<div id="configurator-chooser-background">
|
||||
<div id="configurator-chooser-preset-background"></div>
|
||||
<div id="configurator-chooser-own-systems-background"></div>
|
||||
</div>
|
||||
|
||||
<div id="button-choose-preset-configurator"> <p>Preset</p> </div>
|
||||
<div id="button-choose-own-systems-configurator"> <p>Own</p> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
|
||||
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
38
index.html
38
index.html
|
|
@ -8,32 +8,38 @@
|
|||
<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>
|
||||
<noscript>THIS PAGE DOES NOT WORK WITHOUT JAVASCRIPT!</noscript>
|
||||
|
||||
<div id="configurator-modal">
|
||||
<div id="configurator-modal-background"></div>
|
||||
|
||||
<div id="configurator-modal-foreground">
|
||||
<div class="horizontal-aligner">
|
||||
<div class="info-view generic-panel">
|
||||
<div class="header">
|
||||
<p>Information- / Debug - View</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="monitor-view">
|
||||
<div class="monitor" id="primary-monitor">
|
||||
<div class="info-header">Primary Monitor</div>
|
||||
<canvas class="output">HTML5 Canvas must be supported!</canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-view generic-panel">
|
||||
<div class="header">
|
||||
<p>Control Panel</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div id="configurator">
|
||||
|
||||
<p id="output-title">The NerdEMU Emulator</p>
|
||||
|
||||
<canvas class="pixel-output"></canvas>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script src="test.js"></script>
|
||||
|
|
|
|||
211
test.css
211
test.css
|
|
@ -1,134 +1,139 @@
|
|||
|
||||
* {
|
||||
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
html, body {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: #1a2b40;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
main {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
.horizontal-aligner {
|
||||
|
||||
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;
|
||||
flex-direction: row;
|
||||
|
||||
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 {
|
||||
|
||||
|
||||
.generic-panel {
|
||||
|
||||
padding-bottom: 20px;
|
||||
min-width: 150px;
|
||||
height: 100%;
|
||||
|
||||
font-size: 32px;
|
||||
font-weight: 1000;
|
||||
background-color: #2c3046;
|
||||
border-right: solid 1px #1c1e24;
|
||||
border-left: solid 1px #1c1e24;
|
||||
}
|
||||
|
||||
#configurator-modal {
|
||||
.generic-panel > .header {
|
||||
|
||||
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;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: 750;
|
||||
|
||||
background-color: #1c1e24;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.info-view {
|
||||
|
||||
min-width: 100px;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.control-view {
|
||||
|
||||
min-width: 100px;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.monitor-view {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
width: 100%;
|
||||
min-width: 400px;
|
||||
height: 100%;
|
||||
|
||||
background-color: #080808;
|
||||
}
|
||||
|
||||
.monitor {
|
||||
|
||||
width: 50vw;
|
||||
height: auto;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
|
||||
background-color: #1c1e24;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.monitor > .info-header {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
height: 24px;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: 750;
|
||||
|
||||
background-color: #1c1e24;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.monitor > .output {
|
||||
|
||||
width: 100%;
|
||||
height: calc(50vw * 0.5625);
|
||||
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
noscript {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
|
|
|||
Reference in New Issue