mirror of
https://github.com/Max-Stevenson/jurassic-park-interface.git
synced 2024-06-01 21:41:31 +00:00
Working on main vehicle display.
- Added new imgs for vehicle display. - Started to flesh out view.
This commit is contained in:
parent
ef1acda569
commit
68ed22657c
210
index.html
210
index.html
|
@ -25,9 +25,91 @@
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="inner-edge__light__no-padding main-display main-display__hidden"
|
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>
|
||||||
<div
|
<div
|
||||||
class="inner-edge__light__no-padding main-display main-display__hidden"
|
class="inner-edge__light__no-padding main-display main-display__hidden"
|
||||||
|
@ -209,60 +291,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="inner-edge__light__no-padding main-display"
|
class="inner-edge__light__no-padding main-display main-display__hidden"
|
||||||
id="tour-display__inner"
|
id="time-display__inner"
|
||||||
>
|
>
|
||||||
<div class="tour-display__container">
|
<h2>Test</h2>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
@ -338,50 +370,62 @@
|
||||||
>
|
>
|
||||||
<div class="video-screen__vehicle-status__wrapper">
|
<div class="video-screen__vehicle-status__wrapper">
|
||||||
<p class="white-font-black-background">vehicle status</p>
|
<p class="white-font-black-background">vehicle status</p>
|
||||||
<p class="white-font-black-background">headlights on</p>
|
<p class="white-font-black-background">headlights on<span class="vehicle-details__white-dot"></span></p>
|
||||||
</div>
|
|
||||||
<div class="video-screen__vehicle-img__wrapper">
|
|
||||||
<!-- <img id="vehicle-details__tour-vehicle" src="./public/images/vehicleGraphic.png" alt=""> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="video-screen__vehicle-img__wrapper"
|
||||||
|
></div>
|
||||||
<div class="video-screen__vehicle-details__wrapper">
|
<div class="video-screen__vehicle-details__wrapper">
|
||||||
<div class="video-screen__vehicle-details__left">
|
<div class="video-screen__vehicle-details__left">
|
||||||
<div class="vehicle-details__detail-container">
|
<div class="vehicle-details__detail-container">
|
||||||
<div class="vehicle-status__active"></div>
|
<div class="vehicle-status__active"></div>
|
||||||
<p class="vehicle-details__status-text white-font-black-background">EXP 4</p>
|
<p class="vehicle-details__status-text white-font-black-background">EXP 4</p>
|
||||||
<div class="triangle-wrapper">
|
<div class="triangle-wrapper">
|
||||||
<div class="outer-triangle__right-blue"></div>
|
<div class="outer-triangle__right-blue"></div>
|
||||||
<div class="inner-triangle__right-blue"></div>
|
<div class="inner-triangle__right-blue"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="vehicle-details__detail-container">
|
<div class="vehicle-details__detail-container">
|
||||||
<div class="vehicle-status__active"></div>
|
<div class="vehicle-status__active"></div>
|
||||||
<p class="vehicle-details__status-text white-font-black-background">EXP 5</p>
|
<p class="vehicle-details__status-text white-font-black-background">EXP 5</p>
|
||||||
<div class="triangle-wrapper">
|
<div class="triangle-wrapper">
|
||||||
<div class="outer-triangle__right-blue"></div>
|
<div
|
||||||
<div class="inner-triangle__right-blue"></div>
|
class="outer-triangle__right-blue"
|
||||||
</div>
|
></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>
|
||||||
<div class="vehicle-details__detail-container">
|
<div class="vehicle-details__detail-container">
|
||||||
<div class="vehicle-status__inactive"></div>
|
<div class="vehicle-status__inactive"></div>
|
||||||
<p class="vehicle-details__status-text white-font-black-background">EXP 6</p>
|
<p class="vehicle-details__status-text white-font-black-background">EXP 7</p>
|
||||||
<div class="triangle-wrapper">
|
<div class="triangle-wrapper">
|
||||||
<div class="outer-triangle__right-blue"></div>
|
<div
|
||||||
<div class="inner-triangle__right-blue"></div>
|
class="outer-triangle__right-blue"
|
||||||
</div>
|
></div>
|
||||||
</div>
|
<div
|
||||||
<div class="vehicle-details__detail-container">
|
class="inner-triangle__right-blue"
|
||||||
<div class="vehicle-status__inactive"></div>
|
></div>
|
||||||
<p class="vehicle-details__status-text white-font-black-background">EXP 7</p>
|
</div>
|
||||||
<div class="triangle-wrapper">
|
|
||||||
<div class="outer-triangle__right-blue"></div>
|
|
||||||
<div class="inner-triangle__right-blue"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="vide-screen__vehicle-details__right">
|
<div class="vide-screen__vehicle-details__right">
|
||||||
<div class="vehicle-details__graphic-wrapper">
|
<div
|
||||||
<!-- <img src="./public/images/explorerGraphic.png" alt=""> -->
|
class="vehicle-details__graphic-wrapper"
|
||||||
</div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
BIN
public/images/ctrlRoom.png
Normal file
BIN
public/images/ctrlRoom.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 156 KiB |
BIN
public/images/island.png
Normal file
BIN
public/images/island.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 712 KiB |
|
@ -810,12 +810,20 @@ body {
|
||||||
justify-content: space-between;
|
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 {
|
.video-screen__vehicle-status__wrapper p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
font-size: 1.25vw;
|
font-size: 1.25vw;
|
||||||
padding: 0.25vw 1vw 0 1vw;
|
padding: 0.25vw 1vw 0 1vw;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-screen__info-text {
|
.video-screen__info-text {
|
||||||
|
@ -1251,4 +1259,19 @@ body {
|
||||||
flex: 1;
|
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 */
|
/*# sourceMappingURL=styles.css.map */
|
||||||
|
|
File diff suppressed because one or more lines are too long
14
sass/components/_vehicle-display.scss
Normal file
14
sass/components/_vehicle-display.scss
Normal 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;
|
||||||
|
}
|
|
@ -106,12 +106,20 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vehicle-details__white-dot {
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: white;
|
||||||
|
width: .5vw;
|
||||||
|
height: .5vw;
|
||||||
|
}
|
||||||
|
|
||||||
.video-screen__vehicle-status__wrapper p {
|
.video-screen__vehicle-status__wrapper p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
font-size: 1.25vw;
|
font-size: 1.25vw;
|
||||||
padding: 0.25vw 1vw 0 1vw;
|
padding: 0.25vw 1vw 0 1vw;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-screen__info-text {
|
.video-screen__info-text {
|
||||||
|
|
|
@ -15,3 +15,4 @@
|
||||||
@import "./components/main-display";
|
@import "./components/main-display";
|
||||||
@import "./components/power-screen";
|
@import "./components/power-screen";
|
||||||
@import "./components/map-images";
|
@import "./components/map-images";
|
||||||
|
@import "./components/vehicle-display";
|
Loading…
Reference in New Issue
Block a user