diff --git a/index.html b/index.html index 913bd1a..4b3adfe 100644 --- a/index.html +++ b/index.html @@ -11,8 +11,8 @@
-
-
+
+

@@ -55,7 +55,7 @@

-
+
@@ -108,7 +108,18 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
@@ -120,5 +131,5 @@
- + diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css index b381685..c04d7e1 100644 --- a/public/stylesheets/styles.css +++ b/public/stylesheets/styles.css @@ -1,4 +1,6 @@ -* { +*, +*::before, +*::after { box-sizing: border-box; } @@ -7,7 +9,7 @@ body { margin: 0 100px; } -.outer-edge__light, .outer-edge__light-no-right-edge { +.outer-edge__light, .outer-edge__light__no-right-edge { border-left: solid 1px #585356; border-top: solid 1px #585356; border-right: solid 1px #c8c8c8; @@ -16,7 +18,7 @@ body { background-color: #797979; } -.inner-edge__light { +.inner-edge__light, .inner-edge__light__no-padding { border-bottom: solid 2px #4a4546; border-right: solid 2px #4a4546; border-left: solid 2px #c8c8c8; @@ -31,7 +33,7 @@ body { border-top: solid 2px #A7A8AE; } -.outer-edge__dark, .outer-edge__dark-no-right-edge { +.outer-edge__dark, .outer-edge__dark__no-right-edge { border-left: solid 1px #302a2a; border-top: solid 1px #302a2a; border-right: solid 1px #c1c2c6; @@ -39,11 +41,15 @@ body { border-radius: 1px; } -.outer-edge__dark-no-right-edge { +.inner-edge__light__no-padding { + padding: 0px; +} + +.outer-edge__dark__no-right-edge { border-right: none; } -.outer-edge__light-no-right-edge { +.outer-edge__light__no-right-edge { border-right: none; } @@ -67,7 +73,7 @@ body { .button__depressed { width: fit-content; - box-shadow: inset 0 0 2px #4C4C4C; + box-shadow: inset 0 0 8px #4C4C4C; } .map-display__system-wrapper { @@ -83,15 +89,17 @@ body { } .map-display__container { - width: 500px; border-bottom: 8px solid #438149; border-top: 8px solid #438149; display: flex; height: 500px; justify-content: space-between; + background-color: black; + background-size: 40px 40px; + background-image: linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px); } -.system-text { +.map-display__system-status { max-width: fit-content; background: #438149; color: #ededed; @@ -307,4 +315,50 @@ body { margin: 0px; } +.video-screen { + background-color: #606971; + display: flex; + flex-direction: column; + align-items: center; +} + +.video-screen__loading-spinner { + width: 40px; + height: 40px; + position: relative; + border-radius: 50%; + overflow: hidden; + border: 1px solid black; + /* borders on it too */ +} + +.video-screen__loading-spinner::before, +.video-screen__loading-spinner::after { + content: ""; + position: absolute; + height: 100%; + width: 50%; + top: 0; +} + +.video-screen__loading-spinner::before { + left: 0; + background: linear-gradient(#000e0d, #000e0d 50%, #f9fb07 50%); +} + +.video-screen__loading-spinner::after { + left: 50%; + background: linear-gradient(#f9fb07, #f9fb07 50%, #000e0d 50%); +} + +.video-screen_loading-spinner__wrapper { + background-color: #40c14c; + border: 2px solid black; + display: flex; + align-items: center; + justify-content: center; + width: fit-content; + padding: 5px; +} + /*# sourceMappingURL=styles.css.map */ diff --git a/public/stylesheets/styles.css.map b/public/stylesheets/styles.css.map index 4e80186..6b1a6fe 100644 --- a/public/stylesheets/styles.css.map +++ b/public/stylesheets/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../sass/base/_base.scss","../../sass/components/_borders.scss","../../sass/components/_buttons.scss","../../sass/components/_display-text.scss","../../sass/components/_layout.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;ACNF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;;;ACvCF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;ACpBF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACrCF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;ACrBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtDF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../sass/base/_base.scss","../../sass/components/_borders.scss","../../sass/components/_buttons.scss","../../sass/components/_display-text.scss","../../sass/components/_layout.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;ACRF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AC5CF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;ACpBF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACxCF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;ACrBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtDF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AChHF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;AAAyB;;;AAG3B;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"styles.css"} \ No newline at end of file diff --git a/sass/base/_base.scss b/sass/base/_base.scss index ff2e7bd..18460cc 100644 --- a/sass/base/_base.scss +++ b/sass/base/_base.scss @@ -1,8 +1,10 @@ -* { +*, +*::before, +*::after { box-sizing: border-box; } body { background: black; margin: 0 100px; -} \ No newline at end of file +} diff --git a/sass/components/_borders.scss b/sass/components/_borders.scss index 58acb68..6c03428 100644 --- a/sass/components/_borders.scss +++ b/sass/components/_borders.scss @@ -30,12 +30,17 @@ border-radius: 1px; } -.outer-edge__dark-no-right-edge { +.inner-edge__light__no-padding { + @extend .inner-edge__light; + padding: 0px; +} + +.outer-edge__dark__no-right-edge { @extend .outer-edge__dark; border-right: none; } -.outer-edge__light-no-right-edge { +.outer-edge__light__no-right-edge { @extend .outer-edge__light; border-right: none; } diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss index 7135636..a5631d2 100644 --- a/sass/components/_buttons.scss +++ b/sass/components/_buttons.scss @@ -18,6 +18,6 @@ .button__depressed { width: fit-content; - box-shadow: inset 0 0 2px #4C4C4C; + box-shadow: inset 0 0 8px #4C4C4C; } diff --git a/sass/components/_display-text.scss b/sass/components/_display-text.scss index ee12094..0c3a545 100644 --- a/sass/components/_display-text.scss +++ b/sass/components/_display-text.scss @@ -11,15 +11,18 @@ } .map-display__container { - width: 500px; border-bottom: 8px solid #438149; border-top: 8px solid #438149; display: flex; height: 500px; justify-content: space-between; + background-color: black; + background-size: 40px 40px; + background-image: linear-gradient(to right, white 1px, transparent 1px), + linear-gradient(to bottom, white 1px, transparent 1px); } -.system-text { +.map-display__system-status { max-width: fit-content; background: #438149; color: #ededed; diff --git a/sass/components/_video-screen.scss b/sass/components/_video-screen.scss new file mode 100644 index 0000000..a7f0134 --- /dev/null +++ b/sass/components/_video-screen.scss @@ -0,0 +1,45 @@ +.video-screen { + background-color: #606971; + display: flex; + flex-direction: column; + align-items: center; +} + +.video-screen__loading-spinner { + width: 40px; + height: 40px; + position: relative; + border-radius: 50%; + overflow: hidden; + border: 1px solid black; /* borders on it too */ +} + +.video-screen__loading-spinner::before, +.video-screen__loading-spinner::after { + content: ''; + position: absolute; + height: 100%; + width: 50%; + top: 0; +} +.video-screen__loading-spinner::before { + left: 0; + background: linear-gradient(#000e0d, #000e0d 50%, #f9fb07 50%); +} +.video-screen__loading-spinner::after { + left: 50%; + background: linear-gradient(#f9fb07, #f9fb07 50%, #000e0d 50%); +} + +.video-screen_loading-spinner__wrapper { + background-color: #40c14c; + border: 2px solid black; + display: flex; + align-items: center; + justify-content: center; + width: fit-content; + padding: 5px; +} + +.video-screen__info-text { +} diff --git a/sass/styles.scss b/sass/styles.scss index f427072..5412854 100644 --- a/sass/styles.scss +++ b/sass/styles.scss @@ -5,4 +5,5 @@ @import "./components/display-text"; @import "./components/layout"; @import "./components/level-info"; -@import "./components/screen-display"; \ No newline at end of file +@import "./components/screen-display"; +@import "./components/video-screen"; \ No newline at end of file