nerdcult
/
nemu-old
Archived
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rewrote UI, still very basic

This commit is contained in:
Eric-Paul Ickhorn 2023-03-17 14:48:26 +01:00
parent d583605e06
commit 0d92060296
2 changed files with 130 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
index.html
View File

@ -8,32 +8,38 @@
<link rel="stylesheet" href="test.css"> <link rel="stylesheet" href="test.css">
</head> </head>
<body> <body>
<header id="config-button"s> <noscript>THIS PAGE DOES NOT WORK WITHOUT JAVASCRIPT!</noscript>
<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 class="horizontal-aligner">
<div id="configurator-modal-background"></div> <div class="info-view generic-panel">
<div class="header">
<div id="configurator-modal-foreground"> <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>
</div> </div>
<main> <div id="configurator">
<p id="output-title">The NerdEMU Emulator</p>
<canvas class="pixel-output"></canvas>
</main> </div>
</body> </body>
<script src="test.js"></script> <script src="test.js"></script>

211
test.css
View File

@ -1,134 +1,139 @@
* { * {
margin: 0px;
padding: 0px; padding: 0px;
margin: 0px;
} }
html, body { html, body {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #1a2b40;
color: #ffffff;
} }
main {
width: 100%; .horizontal-aligner {
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
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%; width: 100%;
height: 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; 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; background-color: #2c3046;
font-weight: 1000; border-right: solid 1px #1c1e24;
border-left: solid 1px #1c1e24;
} }
#configurator-modal { .generic-panel > .header {
position: fixed; display: flex;
right: 0px; flex-direction: row;
top: 0px; align-items: center;
display: none; justify-content: space-around;
z-index: 4;
width: 100%;
width: 100%; height: 24px;
height: 100%;
} font-size: 16px;
font-weight: 750;
#configurator-modal-background {
background-color: #1c1e24;
position: fixed; color: #ffffff;
right: 0px; }
top: 0px;
z-index: 5;
width: 100%; .info-view {
height: 100%;
min-width: 100px;
background-color: #0f141bb0; width: 50%;
} height: 100%;
#configurator-modal-foreground {
}
position: fixed;
right: 0px; .control-view {
top: 0px;
z-index: 6; 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%; width: 100%;
height: 100%; height: 100%;
background-color: #000000;
color: #ffffff;
} }