From 0d92060296afcfeaa37433aa152fe4b4c7341a8b Mon Sep 17 00:00:00 2001 From: Eric-Paul Ickhorn Date: Fri, 17 Mar 2023 14:48:26 +0100 Subject: [PATCH] Rewrote UI, still very basic --- index.html | 38 ++++++---- test.css | 211 +++++++++++++++++++++++++++-------------------------- 2 files changed, 130 insertions(+), 119 deletions(-) diff --git a/index.html b/index.html index 8a7da43..ad6a8f3 100644 --- a/index.html +++ b/index.html @@ -8,32 +8,38 @@ -
-
-
-
-
-
- -
+ -
-
- -
+
+
+
+

Information- / Debug - View

+
+
+ +
+
+
Primary Monitor
+ HTML5 Canvas must be supported! +
+
+ +
+
+

Control Panel

+
+
-
+
-

The NerdEMU Emulator

- -
+
diff --git a/test.css b/test.css index a925462..6e1074f 100644 --- a/test.css +++ b/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; }