Macintosh-Tools
/
jurassic-park-interface
mirror of https://github.com/Max-Stevenson/jurassic-park-interface.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Working on main vehicle display. 

- Added new imgs for vehicle display.
- Started to flesh out view.
This commit is contained in:
Max Stevenson 2020-09-10 11:04:05 -05:00
parent ef1acda569
commit 68ed22657c
8 changed files with 174 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
index.html
View File

@ -25,9 +25,91 @@
>
<div
class="inner-edge__light__no-padding main-display main-display__hidden"
id="time-display__inner"
id="vehicle-display__inner"
>
<h2>Test</h2>
<div class="vehicle-display__upper-wrapper">
<div class="vehicle-display__left-wrapper"></div>
<div class="vehicle-display__centre-wrapper">
<img src="./public/images/island.png" alt="">
</div>
<div class="vehicle-display__right-wrapper"></div>
</div>
<div class="vehicle-display__lower-wrapper">
<div class="room-info__container">
<div class="room-info__level-display">
<p class="room-info__level-text">LEVEL</p>
<p class="room-info__level-number">G</p>
</div>
<div class="room-info__title-container">
<h3 class="room-info__title">
Reserve Paddock
</h3>
<p class="room-info__subtitle">
Quadrant Dechant 09 power failure
</p>
</div>
<div class="room-info__level-display">
<p class="room-info__level-text">LEVEL</p>
<p class="room-info__level-number">G</p>
</div>
</div>
</div>
</div>
<div
class="inner-edge__light__no-padding main-display"
id="tour-display__inner"
>
<div class="tour-display__container">
<div class="tour-display__system-status__container">
<div
id="tour-display__wrapper-left"
class="tour-display__system-wrapper"
>
<h1 id="sys-one" class="tour-display__system-status">
SYSTEM SECURED
</h1>
</div>
<div class="tour-display__center-section">
<div class="tour-display__system-wrapper">
<h1 id="sys-two" class="tour-display__system-status">
SYSTEM SECURED
</h1>
</div>
<div class="tour-display__system-wrapper">
<h1
id="sys-three"
class="tour-display__system-status"
>
SYSTEM SECURED
</h1>
</div>
</div>
<div
id="tour-display__wrapper-right"
class="tour-display__system-wrapper"
>
<h1 id="sys-four" class="tour-display__system-status">
SYSTEM SECURED
</h1>
</div>
</div>
</div>
<div class="room-info__container">
<div class="room-info__level-display">
<p class="room-info__level-text">LEVEL</p>
<p class="room-info__level-number">2</p>
</div>
<div class="room-info__title-container">
<h3 class="room-info__title">Control Room / Plan View</h3>
<p class="room-info__subtitle">
drawing number - 305pcoffintunaphooter
</p>
</div>
<div class="room-info__level-display">
<p class="room-info__level-text">LEVEL</p>
<p class="room-info__level-number">2</p>
</div>
</div>
</div>
<div
class="inner-edge__light__no-padding main-display main-display__hidden"
@ -209,60 +291,10 @@
</div>
</div>
<div
class="inner-edge__light__no-padding main-display"
id="tour-display__inner"
class="inner-edge__light__no-padding main-display main-display__hidden"
id="time-display__inner"
>
<div class="tour-display__container">
<div class="tour-display__system-status__container">
<div
id="tour-display__wrapper-left"
class="tour-display__system-wrapper"
>
<h1 id="sys-one" class="tour-display__system-status">
SYSTEM SECURED
</h1>
</div>
<div class="tour-display__center-section">
<div class="tour-display__system-wrapper">
<h1 id="sys-two" class="tour-display__system-status">
SYSTEM SECURED
</h1>
</div>
<div class="tour-display__system-wrapper">
<h1
id="sys-three"
class="tour-display__system-status"
>
SYSTEM SECURED
</h1>
</div>
</div>
<div
id="tour-display__wrapper-right"
class="tour-display__system-wrapper"
>
<h1 id="sys-four" class="tour-display__system-status">
SYSTEM SECURED
</h1>
</div>
</div>
</div>
<div class="room-info__container">
<div class="room-info__level-display">
<p class="room-info__level-text">LEVEL</p>
<p class="room-info__level-number">2</p>
</div>
<div class="room-info__title-container">
<h3 class="room-info__title">Control Room / Plan View</h3>
<p class="room-info__subtitle">
drawing number - 305pcoffintunaphooter
</p>
</div>
<div class="room-info__level-display">
<p class="room-info__level-text">LEVEL</p>
<p class="room-info__level-number">2</p>
</div>
</div>
<h2>Test</h2>
</div>
</div>
<div
@ -338,50 +370,62 @@
>
<div class="video-screen__vehicle-status__wrapper">
<p class="white-font-black-background">vehicle status</p>
<p class="white-font-black-background">headlights on</p>
</div>
<div class="video-screen__vehicle-img__wrapper">
<!-- <img id="vehicle-details__tour-vehicle" src="./public/images/vehicleGraphic.png" alt=""> -->
<p class="white-font-black-background">headlights on<span class="vehicle-details__white-dot"></span></p>
</div>
<div
class="video-screen__vehicle-img__wrapper"
></div>
<div class="video-screen__vehicle-details__wrapper">
<div class="video-screen__vehicle-details__left">
<div class="vehicle-details__detail-container">
<div class="vehicle-status__active"></div>
<p class="vehicle-details__status-text white-font-black-background">EXP 4</p>
<div class="triangle-wrapper">
<div class="outer-triangle__right-blue"></div>
<div class="inner-triangle__right-blue"></div>
<div class="outer-triangle__right-blue"></div>
<div class="inner-triangle__right-blue"></div>
</div>
</div>
<div class="vehicle-details__detail-container">
<div class="vehicle-status__active"></div>
<p class="vehicle-details__status-text white-font-black-background">EXP 5</p>
<div class="triangle-wrapper">
<div class="outer-triangle__right-blue"></div>
<div class="inner-triangle__right-blue"></div>
</div>
<div class="vehicle-status__active"></div>
<p class="vehicle-details__status-text white-font-black-background">EXP 5</p>
<div class="triangle-wrapper">
<div
class="outer-triangle__right-blue"
></div>
<div
class="inner-triangle__right-blue"
></div>
</div>
</div>
<div class="vehicle-details__detail-container">
<div class="vehicle-status__inactive"></div>
<p class="vehicle-details__status-text white-font-black-background">EXP 6</p>
<div class="triangle-wrapper">
<div
class="outer-triangle__right-blue"
></div>
<div
class="inner-triangle__right-blue"
></div>
</div>
</div>
<div class="vehicle-details__detail-container">
<div class="vehicle-status__inactive"></div>
<p class="vehicle-details__status-text white-font-black-background">EXP 6</p>
<div class="triangle-wrapper">
<div class="outer-triangle__right-blue"></div>
<div class="inner-triangle__right-blue"></div>
</div>
</div>
<div class="vehicle-details__detail-container">
<div class="vehicle-status__inactive"></div>
<p class="vehicle-details__status-text white-font-black-background">EXP 7</p>
<div class="triangle-wrapper">
<div class="outer-triangle__right-blue"></div>
<div class="inner-triangle__right-blue"></div>
</div>
<p class="vehicle-details__status-text white-font-black-background">EXP 7</p>
<div class="triangle-wrapper">
<div
class="outer-triangle__right-blue"
></div>
<div
class="inner-triangle__right-blue"
></div>
</div>
</div>
</div>
<div class="vide-screen__vehicle-details__right">
<div class="vehicle-details__graphic-wrapper">
<!-- <img src="./public/images/explorerGraphic.png" alt=""> -->
</div>
<div
class="vehicle-details__graphic-wrapper"
></div>
</div>
</div>
</div>

BIN
public/images/ctrlRoom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

BIN
public/images/island.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 712 KiB

23
public/stylesheets/styles.css
View File

@ -810,12 +810,20 @@ body {
justify-content: space-between;
}
.vehicle-details__white-dot {
border-radius: 50%;
background-color: white;
width: 0.5vw;
height: 0.5vw;
}
.video-screen__vehicle-status__wrapper p {
margin: 0;
text-transform: none;
font-size: 1.25vw;
padding: 0.25vw 1vw 0 1vw;
font-weight: 600;
align-items: center;
}
.video-screen__info-text {
@ -1251,4 +1259,19 @@ body {
flex: 1;
}
#vehicle-display__inner {
flex-direction: column;
}
.vehicle-display__upper-wrapper {
display: flex;
flex-direction: row;
flex: 1;
}
.vehicle-display__lower-wrapper {
display: flex;
flex: 1;
}
/*# sourceMappingURL=styles.css.map */

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

File diff suppressed because one or more lines are too long

14
sass/components/_vehicle-display.scss Normal file
View File

@ -0,0 +1,14 @@
#vehicle-display__inner {
flex-direction: column;
}
.vehicle-display__upper-wrapper {
display: flex;
flex-direction: row;
flex: 1;
}
.vehicle-display__lower-wrapper {
display: flex;
flex: 1;
}

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

@ -106,12 +106,20 @@
justify-content: space-between;
}
.vehicle-details__white-dot {
border-radius: 50%;
background-color: white;
width: .5vw;
height: .5vw;
}
.video-screen__vehicle-status__wrapper p {
margin: 0;
text-transform: none;
font-size: 1.25vw;
padding: 0.25vw 1vw 0 1vw;
font-weight: 600;
align-items: center;
}
.video-screen__info-text {

1
sass/styles.scss
View File

@ -15,3 +15,4 @@
@import "./components/main-display";
@import "./components/power-screen";
@import "./components/map-images";
@import "./components/vehicle-display";