Rewrote UI, still very basic
This commit is contained in:
Eric-Paul Ickhorn
parent
d583605e06
commit
0d92060296
34
index.html
34
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>
|
||||
<noscript>THIS PAGE DOES NOT WORK WITHOUT JAVASCRIPT!</noscript>
|
||||
|
||||
</header>
|
||||
<div class="horizontal-aligner">
|
||||
<div class="info-view generic-panel">
|
||||
<div class="header">
|
||||
<p>Information- / Debug - View</p>
|
||||
</div>
|
||||
|
||||
<div id="configurator-modal">
|
||||
<div id="configurator-modal-background"></div>
|
||||
|
||||
<div id="configurator-modal-foreground">
|
||||
</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>
|
||||
|
|
|
|||
209
test.css
209
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 {
|
||||
|
||||
padding-bottom: 20px;
|
||||
|
||||
font-size: 32px;
|
||||
font-weight: 1000;
|
||||
.generic-panel {
|
||||
|
||||
min-width: 150px;
|
||||
height: 100%;
|
||||
|
||||
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