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

Started work on video screen buttons.

Browse Source 
- Fixed spelling typo.
This commit is contained in:
Max Stevenson 2020-06-03 12:42:59 +01:00
parent e1fad0cce9
commit 449c8f7076
7 changed files with 104 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
index.html
View File

@ -88,27 +88,27 @@
</div>
<div class="outer-edge__light" id="control-panel">
<div class="inner-edge__light">
<div class="control-pannel__button-display">
<div class="control-panel__button-display">
<div class="button__depressed">
<p class="button-text__embossed">VEHICLE</p>
<p class="button-text__embossed small-button">VEHICLE</p>
</div>
<div class="outer-edge__light buttons">
<div class="inner-edge__light">
<p class="button-text__engraved">TOUR</p>
<p class="button-text__engraved small-button">TOUR</p>
</div>
</div>
<div class="outer-edge__light buttons">
<div class="inner-edge__light">
<p class="button-text__engraved">POWER</p>
<p class="button-text__engraved small-button">POWER</p>
</div>
</div>
<div class="outer-edge__light buttons">
<div class="inner-edge__light">
<p class="button-text__engraved">TIME</p>
<p class="button-text__engraved small-button">TIME</p>
</div>
</div>
</div>
<div class="control-pannel__video-screen">
<div class="control-panel__video-screen">
<div class="outer-edge__light">
<div class="inner-edge__light__no-padding">
<div class="video-screen">
@ -116,16 +116,39 @@
<div class="video-screen__loading-spinner"></div>
</div>
<div class="video-screen__text-wrapper">
<h3 class="video-screen__header">rebooting system...</h3>
<p class="video-screen__info-text">volume --- nedryland jp</p>
<h3 class="video-screen__header">
rebooting system...
</h3>
<p class="video-screen__info-text">
volume --- nedryland jp
</p>
</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>
<div class="control-panel__button-control">
<div class="button-control__top">
<div class="outer-edge__light__no-right-edge">
<div class="inner-edge__light">
<p class="button-text__engraved large-button">hold</p>
</div>
</div>
<div class="outer-edge__light__no-right-edge">
<div class="inner-edge__light">
<p class="button-text__engraved large-button">quit</p>
</div>
</div>
<div class="outer-edge__light">
<div class="inner-edge__light">
<p class="button-text__engraved large-button">new</p>
</div>
</div>
</div>
<div class="control-panel__bottom"></div>
</div>
<div class="control-panel__button-display"></div>
<div class="control-panel__output-display"></div>
</div>
</div>
<div class="outer-edge__light" id="system-icons">

37
public/stylesheets/styles.css
View File

@ -53,7 +53,7 @@ body {
border-right: none;
}
.control-pannel__button-display {
.control-panel__button-display {
display: flex;
align-items: center;
}
@ -62,18 +62,30 @@ body {
text-shadow: 1px 1px 0px #616161, 2px 1px 0px #aeb5b5;
color: transparent;
margin: 0;
text-transform: uppercase;
text-align: center;
}
.button-text__embossed {
color: #bfbfbf;
text-shadow: 1px 1px 1px #565656;
padding: 5px;
margin: 0;
text-transform: uppercase;
text-align: center;
}
.button__depressed {
width: fit-content;
box-shadow: inset 0 0 8px #4C4C4C;
padding: 5px;
}
.small-button {
padding: 0px 10px;
}
.large-button {
padding: 2px 20px;
}
.map-display__system-wrapper {
@ -315,11 +327,16 @@ body {
margin: 0px;
}
.control-panel__video-screen {
margin-bottom: 5px;
}
.video-screen {
background-color: #606971;
display: flex;
flex-direction: column;
align-items: center;
padding: 50px 20px;
}
.video-screen__loading-spinner {
@ -376,6 +393,22 @@ body {
.video-screen__info-text {
font-style: italic;
text-transform: uppercase;
font-weight: bold;
}
.control-panel__button-control {
display: flex;
flex-direction: column;
}
.button-control__top {
display: flex;
flex-direction: row;
}
.button-control__top > div {
flex: 1;
background-color: #9CA193;
}
/*# 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","../../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;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;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","../../sass/components/_control-panel.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;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AChCF;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;;;AAGF;EACE;EACA;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;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AC/DF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA","file":"styles.css"}

16
sass/components/_buttons.scss
View File

@ -1,4 +1,4 @@
.control-pannel__button-display {
.control-panel__button-display {
display: flex;
align-items: center;
}
@ -7,17 +7,29 @@
text-shadow: 1px 1px 0px #616161, 2px 1px 0px #aeb5b5;
color: transparent;
margin: 0;
text-transform: uppercase;
text-align: center;
}
.button-text__embossed {
color: #bfbfbf;
text-shadow: 1px 1px 1px #565656;
padding: 5px;
margin: 0;
text-transform: uppercase;
text-align: center;
}
.button__depressed {
width: fit-content;
box-shadow: inset 0 0 8px #4C4C4C;
padding: 5px;
}
.small-button {
padding: 0px 10px;
}
.large-button {
padding: 2px 20px;
}

14
sass/components/_control-panel.scss Normal file
View File

@ -0,0 +1,14 @@
.control-panel__button-control {
display: flex;
flex-direction: column;
}
.button-control__top {
display: flex;
flex-direction: row;
}
.button-control__top > div {
flex: 1;
background-color: #9CA193;
}

4
sass/components/_video-screen.scss
View File

@ -1,3 +1,7 @@
.control-panel__video-screen {
margin-bottom: 5px;
}
.video-screen {
background-color: #606971;
display: flex;

3
sass/styles.scss
View File

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