Macintosh-Tools/jurassic-park-interface
1
0
Fork 0
mirror of https://github.com/Max-Stevenson/jurassic-park-interface.git synced 2024-06-17 08:29:31 +00:00
Code Issues Projects Releases Wiki Activity

Created grid and loading spinner elements.

Browse Source
This commit is contained in:
Max Stevenson 2020-06-01 19:20:54 +01:00
parent 033f3537b4
commit 8025330f37
9 changed files with 144 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
index.html
View File

@ -11,8 +11,8 @@
<div class="outer-edge__light">
<div class="inner-edge__light">
<div id="grid-container">
<div class="outer-edge__dark-no-right-edge" id="map-display">
<div class="inner-edge__light">
<div class="outer-edge__dark__no-right-edge" id="map-display">
<div class="inner-edge__light__no-padding">
<div class="map-display__container">
<div class="map-display__system-wrapper">
<h1 id="sys-one" class="map-display__system-status">
@ -55,7 +55,7 @@
</div>
</div>
</div>
<div class="outer-edge__light-no-right-edge" id="console-display">
<div class="outer-edge__light__no-right-edge" id="console-display">
<div class="inner-edge__light">
<div class="outer-edge__dark">
<div class="inner-edge__light">
@ -108,7 +108,18 @@
</div>
</div>
</div>
<div class="control-pannel__video-screen"></div>
<div class="control-pannel__video-screen">
<div class="outer-edge__light">
<div class="inner-edge__light__no-padding">
<div class="video-screen">
<div class="video-screen_loading-spinner__wrapper">
<div class="video-screen__loading-spinner"></div>
</div>
<div class="video-screen__info-text"></div>
</div>
</div>
</div>
</div>
<div class="control-pannel__button-control"></div>
<div class="control-pannel__button-display"></div>
<div class="control-pannel__output-display"></div>
@ -120,5 +131,5 @@
</div>
</div>
</div>
</body>
</body>
</html>

72
public/stylesheets/styles.css
View File

@ -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 */

2
public/stylesheets/styles.css.map
View File

@ -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"}
{"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"}

6
sass/base/_base.scss
View File

@ -1,8 +1,10 @@
* {
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background: black;
margin: 0 100px;
}
}

9
sass/components/_borders.scss
View File

@ -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;
}

2
sass/components/_buttons.scss
View File

@ -18,6 +18,6 @@
.button__depressed {
width: fit-content;
box-shadow: inset 0 0 2px #4C4C4C;
box-shadow: inset 0 0 8px #4C4C4C;
}

7
sass/components/_display-text.scss
View File

@ -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;

45
sass/components/_video-screen.scss Normal file
View File

@ -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 {
}

3
sass/styles.scss
View File

@ -5,4 +5,5 @@
@import "./components/display-text";
@import "./components/layout";
@import "./components/level-info";
@import "./components/screen-display";
@import "./components/screen-display";
@import "./components/video-screen";