mirror of
https://github.com/Max-Stevenson/jurassic-park-interface.git
synced 2024-11-19 14:32:32 +00:00
Messed around with the layout again.
- Deleted grid layout, went back to putting everything in flex.
This commit is contained in:
Max Stevenson
parent
aa8eb887c8
commit
f9014a1661
941
index.html
941
index.html
@ -17,465 +17,486 @@
|
||||
<div class="outer-edge__light" id="outer-container__outer">
|
||||
<div class="inner-edge__light" id="outer-container__inner">
|
||||
<div id="grid-container">
|
||||
<div
|
||||
class="outer-edge__dark__no-right-edge"
|
||||
id="tour-display__outer"
|
||||
>
|
||||
<div id="main-left__container">
|
||||
<div
|
||||
class="inner-edge__light__no-padding main-display main-display__hidden"
|
||||
id="power-display__inner"
|
||||
class="outer-edge__dark__no-right-edge"
|
||||
id="tour-display__outer"
|
||||
>
|
||||
<div class="power-screen__voltage-switches-container">
|
||||
<div class="toggle-switch-container">
|
||||
<p>High</p>
|
||||
<div class="toggle-switch switch-vertical">
|
||||
<input
|
||||
checked
|
||||
class="toggle-high"
|
||||
type="radio"
|
||||
name="switch-one"
|
||||
value="60"
|
||||
/>
|
||||
<input
|
||||
class="toggle-low"
|
||||
type="radio"
|
||||
name="switch-one"
|
||||
value="30"
|
||||
/>
|
||||
<span class="toggle-outside">
|
||||
<span class="toggle-inside"></span>
|
||||
</span>
|
||||
<div
|
||||
class="inner-edge__light__no-padding main-display main-display__hidden"
|
||||
id="power-display__inner"
|
||||
>
|
||||
<div class="power-screen__voltage-switches-container">
|
||||
<div class="toggle-switch-container">
|
||||
<p>High</p>
|
||||
<div class="toggle-switch switch-vertical">
|
||||
<input
|
||||
checked
|
||||
class="toggle-high"
|
||||
type="radio"
|
||||
name="switch-one"
|
||||
value="60"
|
||||
/>
|
||||
<input
|
||||
class="toggle-low"
|
||||
type="radio"
|
||||
name="switch-one"
|
||||
value="30"
|
||||
/>
|
||||
<span class="toggle-outside">
|
||||
<span class="toggle-inside"></span>
|
||||
</span>
|
||||
</div>
|
||||
<p>Low</p>
|
||||
</div>
|
||||
<div class="toggle-switch-container">
|
||||
<p>High</p>
|
||||
<div class="toggle-switch switch-vertical">
|
||||
<input
|
||||
checked
|
||||
class="toggle-high"
|
||||
type="radio"
|
||||
name="switch-two"
|
||||
value="70"
|
||||
/>
|
||||
<input
|
||||
class="toggle-low"
|
||||
type="radio"
|
||||
name="switch-two"
|
||||
value="20"
|
||||
/>
|
||||
<span class="toggle-outside">
|
||||
<span class="toggle-inside"></span>
|
||||
</span>
|
||||
</div>
|
||||
<p>Low</p>
|
||||
</div>
|
||||
<div class="toggle-switch-container">
|
||||
<p>High</p>
|
||||
<div class="toggle-switch switch-vertical">
|
||||
<input
|
||||
checked
|
||||
class="toggle-high"
|
||||
type="radio"
|
||||
name="switch-three"
|
||||
value="60"
|
||||
/>
|
||||
<input
|
||||
class="toggle-low"
|
||||
type="radio"
|
||||
name="switch-three"
|
||||
value="40"
|
||||
/>
|
||||
<span class="toggle-outside">
|
||||
<span class="toggle-inside"></span>
|
||||
</span>
|
||||
</div>
|
||||
<p>Low</p>
|
||||
</div>
|
||||
<div class="toggle-switch-container">
|
||||
<p>High</p>
|
||||
<div class="toggle-switch switch-vertical">
|
||||
<input
|
||||
checked
|
||||
class="toggle-high"
|
||||
type="radio"
|
||||
name="switch-four"
|
||||
value="100"
|
||||
/>
|
||||
<input
|
||||
class="toggle-low"
|
||||
type="radio"
|
||||
name="switch-four"
|
||||
value="40"
|
||||
/>
|
||||
<span class="toggle-outside">
|
||||
<span class="toggle-inside"></span>
|
||||
</span>
|
||||
</div>
|
||||
<p>Low</p>
|
||||
</div>
|
||||
<p>Low</p>
|
||||
</div>
|
||||
<div class="toggle-switch-container">
|
||||
<p>High</p>
|
||||
<div class="toggle-switch switch-vertical">
|
||||
<input
|
||||
checked
|
||||
class="toggle-high"
|
||||
type="radio"
|
||||
name="switch-two"
|
||||
value="70"
|
||||
/>
|
||||
<input
|
||||
class="toggle-low"
|
||||
type="radio"
|
||||
name="switch-two"
|
||||
value="20"
|
||||
/>
|
||||
<span class="toggle-outside">
|
||||
<span class="toggle-inside"></span>
|
||||
</span>
|
||||
</div>
|
||||
<p>Low</p>
|
||||
<div class="power-screen__votage-output-container">
|
||||
<p>Required voltage: 220V</p>
|
||||
<p>Current voltage: <span id="current-voltage"></span>V</p>
|
||||
</div>
|
||||
<div class="toggle-switch-container">
|
||||
<p>High</p>
|
||||
<div class="toggle-switch switch-vertical">
|
||||
<input
|
||||
checked
|
||||
class="toggle-high"
|
||||
type="radio"
|
||||
name="switch-three"
|
||||
value="60"
|
||||
/>
|
||||
<input
|
||||
class="toggle-low"
|
||||
type="radio"
|
||||
name="switch-three"
|
||||
value="40"
|
||||
/>
|
||||
<span class="toggle-outside">
|
||||
<span class="toggle-inside"></span>
|
||||
</span>
|
||||
<div class="power-screen__breaker-container">
|
||||
<div class="breaker-wrapper">
|
||||
<div class="breaker-buttons__wrapper">
|
||||
<button class="breaker-button" id="breaker-on"></button>
|
||||
<button
|
||||
class="breaker-button"
|
||||
id="breaker-off"
|
||||
></button>
|
||||
</div>
|
||||
<div class="breaker-label__wrapper">
|
||||
<h4 class="breaker-label__text">
|
||||
herbivore feeding compound
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<p>Low</p>
|
||||
</div>
|
||||
<div class="toggle-switch-container">
|
||||
<p>High</p>
|
||||
<div class="toggle-switch switch-vertical">
|
||||
<input
|
||||
checked
|
||||
class="toggle-high"
|
||||
type="radio"
|
||||
name="switch-four"
|
||||
value="100"
|
||||
/>
|
||||
<input
|
||||
class="toggle-low"
|
||||
type="radio"
|
||||
name="switch-four"
|
||||
value="40"
|
||||
/>
|
||||
<span class="toggle-outside">
|
||||
<span class="toggle-inside"></span>
|
||||
</span>
|
||||
</div>
|
||||
<p>Low</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="power-screen__votage-output-container">
|
||||
<p>Required voltage: 220V</p>
|
||||
<p>Current voltage: <span id="current-voltage"></span>V</p>
|
||||
</div>
|
||||
<div class="power-screen__breaker-container">
|
||||
<div class="breaker-wrapper">
|
||||
<div class="breaker-buttons__wrapper">
|
||||
<button class="breaker-button" id="breaker-on"></button>
|
||||
<button class="breaker-button" id="breaker-off"></button>
|
||||
<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 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 class="tour-display__system-wrapper">
|
||||
<h1 id="sys-four" class="tour-display__system-status">
|
||||
SYSTEM SECURED
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="breaker-label__wrapper">
|
||||
<h4 class="breaker-label__text">herbivore feeding compound</h4>
|
||||
</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
|
||||
class="inner-edge__light__no-padding main-display"
|
||||
id="tour-display__inner"
|
||||
class="outer-edge__light__no-right-edge"
|
||||
id="console-display"
|
||||
>
|
||||
<div class="tour-display__container">
|
||||
<div class="tour-display__system-status__container">
|
||||
<div 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 class="inner-edge__light">
|
||||
<div class="outer-edge__dark">
|
||||
<div
|
||||
class="inner-edge__light"
|
||||
id="console-display__container"
|
||||
>
|
||||
<div class="console-display__wrapper">
|
||||
<div class="screen-container__wrapper">
|
||||
<div class="screen-container__outer">
|
||||
<p class="screen-container__text">SCREEN</p>
|
||||
</div>
|
||||
<div class="triangle-wrapper">
|
||||
<div class="outer-triangle__right"></div>
|
||||
<div class="inner-triangle__right"></div>
|
||||
</div>
|
||||
<div class="buffer"></div>
|
||||
</div>
|
||||
<div class="island-container__wrapper">
|
||||
<div class="triangle-wrapper" id="island-triangle">
|
||||
<div class="outer-triangle__left"></div>
|
||||
<div class="inner-triangle__left"></div>
|
||||
</div>
|
||||
<div class="island-container__outer">
|
||||
<p class="island-container__text">
|
||||
Isla Nubar, Costa Rica
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div 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 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"
|
||||
id="console-display__container"
|
||||
>
|
||||
<div class="console-display__wrapper">
|
||||
<div class="screen-container__wrapper">
|
||||
<div class="screen-container__outer">
|
||||
<p class="screen-container__text">SCREEN</p>
|
||||
</div>
|
||||
<div class="triangle-wrapper">
|
||||
<div class="outer-triangle__right"></div>
|
||||
<div class="inner-triangle__right"></div>
|
||||
</div>
|
||||
<div class="buffer"></div>
|
||||
<div id="main-right__container">
|
||||
<div class="outer-edge__light" id="control-panel">
|
||||
<div class="inner-edge__light" id="control-panel__inner">
|
||||
<div class="control-panel__button-display">
|
||||
<div class="buttons button__depressed">
|
||||
<div class="">
|
||||
<p class="button-text__embossed small-button">
|
||||
VEHICLE
|
||||
</p>
|
||||
</div>
|
||||
<div class="island-container__wrapper">
|
||||
<div class="triangle-wrapper" id="island-triangle">
|
||||
<div class="outer-triangle__left"></div>
|
||||
<div class="inner-triangle__left"></div>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<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 small-button">POWER</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved small-button">TIME</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-panel__video-screen">
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light__no-padding">
|
||||
<div class="video-screen" id="video-screen">
|
||||
<div
|
||||
class="video-screen__tab-content"
|
||||
id="video-screen__vehicle"
|
||||
>
|
||||
<div class="video-screen_loading-spinner__wrapper">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="video-screen__tab-content video-screen__hidden"
|
||||
id="video-screen__power"
|
||||
>
|
||||
<div class="power-screen__left">
|
||||
<div
|
||||
class="power-screen__stored-energy-container"
|
||||
>
|
||||
<p class="power-button__text">Stored Energy</p>
|
||||
<h3
|
||||
class="power-screen__status-text"
|
||||
id="charge-status"
|
||||
>
|
||||
Discharged
|
||||
</h3>
|
||||
</div>
|
||||
<div class="power-screen__button-container">
|
||||
<p class="power-button__text">Push to Charge</p>
|
||||
<button id="power-charge"></button>
|
||||
</div>
|
||||
<div class="power-screen__warning-container">
|
||||
<p class="power-screen__warning-text">
|
||||
For <u>Emergency</u> Reasons,<br />The
|
||||
mechanism stored<br />
|
||||
energy may be discharged<br />
|
||||
without closing the breaker.<br />
|
||||
For this proceedure plus<br />
|
||||
Instructions prior to<br />
|
||||
cover removal<br />
|
||||
Refer to I.L 15082
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="power-screen__right">
|
||||
<div
|
||||
class="power-screen__contact-position-container"
|
||||
>
|
||||
<p class="power-button__text">
|
||||
Contact Position
|
||||
</p>
|
||||
<h3
|
||||
class="power-screen__status-text"
|
||||
id="contact-status"
|
||||
>
|
||||
Open
|
||||
</h3>
|
||||
</div>
|
||||
<div class="power-screen__button-container">
|
||||
<p class="power-button__text">Push to Close</p>
|
||||
<button id="power-close"></button>
|
||||
</div>
|
||||
<div
|
||||
class="power-screen__button-container"
|
||||
id="push-to-open-button"
|
||||
>
|
||||
<p class="power-button__text">Push to Open</p>
|
||||
<button id="power-open"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="video-screen__tab-content video-screen__hidden"
|
||||
id="video-screen___vehicle"
|
||||
>
|
||||
<h2>Tour</h2>
|
||||
</div>
|
||||
<div
|
||||
class="video-screen__tab-content video-screen__hidden"
|
||||
id="video-screen__time"
|
||||
>
|
||||
<h2>Time</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="island-container__outer">
|
||||
<p class="island-container__text">
|
||||
Isla Nubar, Costa Rica
|
||||
</div>
|
||||
</div>
|
||||
</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__light large-button">
|
||||
hold
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light__no-right-edge">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved__light large-button">
|
||||
quit
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved__light large-button">
|
||||
new
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-control__bottom">
|
||||
<div class="outer-edge__light__no-right-edge">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved__light large-button">
|
||||
Next
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light__no-right-edge">
|
||||
<div class="inner-edge__light">
|
||||
<p
|
||||
class="button-text__engraved__light large-button"
|
||||
id="rewind-button"
|
||||
>
|
||||
▶▶
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light__no-right-edge">
|
||||
<div class="inner-edge__light">
|
||||
<p
|
||||
class="button-text__engraved__light large-button"
|
||||
id="forward-button"
|
||||
>
|
||||
▶▶
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light__no-right-edge">
|
||||
<div class="inner-edge__light">
|
||||
<p
|
||||
class="button-text__engraved__light large-button"
|
||||
id="play-button"
|
||||
>
|
||||
▶
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light">
|
||||
<p
|
||||
class="button-text__engraved__light large-button"
|
||||
id="stop-button"
|
||||
>
|
||||
⬛
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light" id="control-panel">
|
||||
<div class="inner-edge__light" id="control-panel__inner">
|
||||
<div class="control-panel__button-display">
|
||||
<div class="buttons button__depressed">
|
||||
<div class="">
|
||||
<p class="button-text__embossed small-button">VEHICLE</p>
|
||||
<div class="control-panel__button-display">
|
||||
<div class="button__depressed">
|
||||
<p class="button-text__embossed small-button">glitches</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<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 small-button">POWER</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved small-button">TIME</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-panel__video-screen">
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light__no-padding">
|
||||
<div class="video-screen" id="video-screen">
|
||||
<div
|
||||
class="video-screen__tab-content"
|
||||
id="video-screen__vehicle"
|
||||
>
|
||||
<div class="video-screen_loading-spinner__wrapper">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="video-screen__tab-content video-screen__hidden"
|
||||
id="video-screen__power"
|
||||
>
|
||||
<div class="power-screen__left">
|
||||
<div class="power-screen__stored-energy-container">
|
||||
<p class="power-button__text">Stored Energy</p>
|
||||
<h3
|
||||
class="power-screen__status-text"
|
||||
id="charge-status"
|
||||
>
|
||||
Discharged
|
||||
</h3>
|
||||
</div>
|
||||
<div class="power-screen__button-container">
|
||||
<p class="power-button__text">Push to Charge</p>
|
||||
<button id="power-charge"></button>
|
||||
</div>
|
||||
<div class="power-screen__warning-container">
|
||||
<p class="power-screen__warning-text">
|
||||
For <u>Emergency</u> Reasons,<br />The mechanism
|
||||
stored<br />
|
||||
energy may be discharged<br />
|
||||
without closing the breaker.<br />
|
||||
For this proceedure plus<br />
|
||||
Instructions prior to<br />
|
||||
cover removal<br />
|
||||
Refer to I.L 15082
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="power-screen__right">
|
||||
<div
|
||||
class="power-screen__contact-position-container"
|
||||
>
|
||||
<p class="power-button__text">Contact Position</p>
|
||||
<h3
|
||||
class="power-screen__status-text"
|
||||
id="contact-status"
|
||||
>
|
||||
Open
|
||||
</h3>
|
||||
</div>
|
||||
<div class="power-screen__button-container">
|
||||
<p class="power-button__text">Push to Close</p>
|
||||
<button id="power-close"></button>
|
||||
</div>
|
||||
<div
|
||||
class="power-screen__button-container"
|
||||
id="push-to-open-button"
|
||||
>
|
||||
<p class="power-button__text">Push to Open</p>
|
||||
<button id="power-open"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="video-screen__tab-content video-screen__hidden"
|
||||
id="video-screen___vehicle"
|
||||
>
|
||||
<h2>Tour</h2>
|
||||
</div>
|
||||
<div
|
||||
class="video-screen__tab-content video-screen__hidden"
|
||||
id="video-screen__time"
|
||||
>
|
||||
<h2>Time</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-panel__button-control">
|
||||
<div class="button-control__top">
|
||||
<div class="outer-edge__light__no-right-edge">
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved__light large-button">
|
||||
hold
|
||||
</p>
|
||||
<p class="button-text__engraved small-button">maps</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light__no-right-edge">
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved__light large-button">
|
||||
quit
|
||||
</p>
|
||||
<p class="button-text__engraved small-button">system</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved small-button">emerg.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-panel__output-display">
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved__light large-button">
|
||||
new
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-control__bottom">
|
||||
<div class="outer-edge__light__no-right-edge">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved__light large-button">
|
||||
Next
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light__no-right-edge">
|
||||
<div class="inner-edge__light">
|
||||
<p
|
||||
class="button-text__engraved__light large-button"
|
||||
id="rewind-button"
|
||||
>
|
||||
▶▶
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light__no-right-edge">
|
||||
<div class="inner-edge__light">
|
||||
<p
|
||||
class="button-text__engraved__light large-button"
|
||||
id="forward-button"
|
||||
>
|
||||
▶▶
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light__no-right-edge">
|
||||
<div class="inner-edge__light">
|
||||
<p
|
||||
class="button-text__engraved__light large-button"
|
||||
id="play-button"
|
||||
>
|
||||
▶
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light">
|
||||
<p
|
||||
class="button-text__engraved__light large-button"
|
||||
id="stop-button"
|
||||
>
|
||||
⬛
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-panel__button-display">
|
||||
<div class="button__depressed">
|
||||
<p class="button-text__embossed small-button">glitches</p>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved small-button">maps</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved small-button">system</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light buttons">
|
||||
<div class="inner-edge__light">
|
||||
<p class="button-text__engraved small-button">emerg.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-panel__output-display">
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light">
|
||||
<div class="outer-edge__console">
|
||||
<div class="inner-edge__console">
|
||||
<div class="output-display__wrapper">
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">
|
||||
clear
|
||||
</p>
|
||||
<p class="output-display-content__content">
|
||||
- Ldg - Volume - JP
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">
|
||||
clear
|
||||
</p>
|
||||
<p class="output-display-content__content">
|
||||
- Boot Successful - CLEAR
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">
|
||||
clear
|
||||
</p>
|
||||
<p class="output-display-content__content">
|
||||
- Format Gabber - Chaires
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">
|
||||
clear
|
||||
</p>
|
||||
<p class="output-display-content__content">
|
||||
- Operator - Andres Ramierez dkhd
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">
|
||||
clear
|
||||
</p>
|
||||
<p class="output-display-content__content">
|
||||
- Vidnet - Camerea VC net01
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">
|
||||
clear
|
||||
</p>
|
||||
<p class="output-display-content__content">
|
||||
- Communications = Active
|
||||
</p>
|
||||
<div class="outer-edge__console">
|
||||
<div class="inner-edge__console">
|
||||
<div class="output-display__wrapper">
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">
|
||||
clear
|
||||
</p>
|
||||
<p class="output-display-content__content">
|
||||
- Ldg - Volume - JP
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">
|
||||
clear
|
||||
</p>
|
||||
<p class="output-display-content__content">
|
||||
- Boot Successful - CLEAR
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">
|
||||
clear
|
||||
</p>
|
||||
<p class="output-display-content__content">
|
||||
- Format Gabber - Chaires
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">
|
||||
clear
|
||||
</p>
|
||||
<p class="output-display-content__content">
|
||||
- Operator - Andres Ramierez dkhd
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">
|
||||
clear
|
||||
</p>
|
||||
<p class="output-display-content__content">
|
||||
- Vidnet - Camerea VC net01
|
||||
</p>
|
||||
</div>
|
||||
<div class="output-display-content__wrapper">
|
||||
<p class="output-display-content__status">
|
||||
clear
|
||||
</p>
|
||||
<p class="output-display-content__content">
|
||||
- Communications = Active
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -484,46 +505,48 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outer-edge__light">
|
||||
<div class="inner-edge__light" id="system-icons__container">
|
||||
<div id="system-icons__wrapper">
|
||||
<p class="white-font-black-background">sys icons</p>
|
||||
<div class="system-icons__icon-wrapper">
|
||||
<img
|
||||
src="./public/icons/hard-drive.png"
|
||||
width="60px"
|
||||
height="45px"
|
||||
/>
|
||||
<img
|
||||
src="./public/icons/mini-array-one.png"
|
||||
width="60px"
|
||||
height="45px"
|
||||
/>
|
||||
<img
|
||||
src="./public/icons/mini-array-two.png"
|
||||
width="60px"
|
||||
height="45px"
|
||||
/>
|
||||
<div id="trash-icon-wrapper">
|
||||
<div class="outer-edge__light" id="system-icons__container">
|
||||
<div class="inner-edge__light">
|
||||
<div id="system-icons__wrapper">
|
||||
<p class="white-font-black-background">sys icons</p>
|
||||
<div class="system-icons__icon-wrapper">
|
||||
<img
|
||||
id="trash-icon"
|
||||
src="./public/icons/trash.png"
|
||||
width="25px"
|
||||
src="./public/icons/hard-drive.png"
|
||||
width="60px"
|
||||
height="45px"
|
||||
/>
|
||||
<div
|
||||
class="outer-edge__dark modal-container modal-inactive"
|
||||
id="trash-modal"
|
||||
>
|
||||
<div class="inner-edge__dark modal-container__content">
|
||||
<p class="modal-container__text">Test</p>
|
||||
<p class="modal-container__text">Test</p>
|
||||
<p class="modal-container__text">Test</p>
|
||||
<p class="modal-container__text">Test</p>
|
||||
<button id="modal-container__close-button">
|
||||
close
|
||||
</button>
|
||||
<img
|
||||
src="./public/icons/mini-array-one.png"
|
||||
width="60px"
|
||||
height="45px"
|
||||
/>
|
||||
<img
|
||||
src="./public/icons/mini-array-two.png"
|
||||
width="60px"
|
||||
height="45px"
|
||||
/>
|
||||
<div id="trash-icon-wrapper">
|
||||
<img
|
||||
id="trash-icon"
|
||||
src="./public/icons/trash.png"
|
||||
width="25px"
|
||||
height="45px"
|
||||
/>
|
||||
<div
|
||||
class="outer-edge__dark modal-container modal-inactive"
|
||||
id="trash-modal"
|
||||
>
|
||||
<div
|
||||
class="inner-edge__dark modal-container__content"
|
||||
>
|
||||
<p class="modal-container__text">Test</p>
|
||||
<p class="modal-container__text">Test</p>
|
||||
<p class="modal-container__text">Test</p>
|
||||
<p class="modal-container__text">Test</p>
|
||||
<button id="modal-container__close-button">
|
||||
close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -28,32 +28,46 @@ body {
|
||||
}
|
||||
|
||||
#grid-container {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-columns: auto auto;
|
||||
justify-items: stretch;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#main-left__container, #main-right__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#main-left__container {
|
||||
flex: 0 0 463px;
|
||||
}
|
||||
|
||||
#main-right__container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#outer-container__outer {
|
||||
max-width: 90%;
|
||||
display: flex;
|
||||
flex: 0 0 836px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#outer-container__inner {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#console-display {
|
||||
grid-area: 4/1/5/2;
|
||||
flex: 0 0 70px;
|
||||
}
|
||||
|
||||
#control-panel {
|
||||
grid-area: 1/2/4/3;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#tour-display__outer {
|
||||
grid-area: 1/1/4/2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -585,8 +599,7 @@ body {
|
||||
|
||||
.control-panel__video-screen {
|
||||
margin-bottom: 10px;
|
||||
min-height: 267px;
|
||||
max-height: 267px;
|
||||
flex: 0 0 248px;
|
||||
}
|
||||
|
||||
.video-screen {
|
||||
@ -684,7 +697,6 @@ body {
|
||||
}
|
||||
#power-display__inner {
|
||||
flex-direction: column;
|
||||
min-width: 486.84px;
|
||||
}
|
||||
|
||||
.power-screen__button-container {
|
||||
@ -716,7 +728,7 @@ body {
|
||||
}
|
||||
|
||||
.power-button__text {
|
||||
margin: 8px 0px;
|
||||
margin: 6px 0px;
|
||||
}
|
||||
|
||||
.power-screen__contact-position-container, .power-screen__stored-energy-container {
|
||||
@ -733,7 +745,7 @@ body {
|
||||
margin: 0;
|
||||
font-size: x-small;
|
||||
padding-left: 10px;
|
||||
padding-top: 10px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.power-screen__status-text {
|
||||
@ -814,6 +826,12 @@ body {
|
||||
|
||||
#system-icons__container {
|
||||
display: flex;
|
||||
flex: 0 0 70px;
|
||||
}
|
||||
|
||||
#system-icons__container > div, #system-icons__container > div > div {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#system-icons__wrapper {
|
||||
@ -834,6 +852,7 @@ body {
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
padding: 2px;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
#trash-icon-wrapper {
|
||||
|
||||
@ -1 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../../sass/components/_buttons.scss","../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_display-text.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss","../../sass/components/_system-icons.scss","../../sass/components/_modal.scss","../../sass/components/_main-display.scss","../../sass/components/_power-screen.scss"],"names":[],"mappings":"AAkEQ;AClER;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC1BF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC7CF;EACE;;;AAGF;EACE;EACA;EACA;;;ACPF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AJrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AKtLF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AC/DF;EACE;EACA;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;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACxDF;EACE;;;AAGF;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;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtHF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;ACvKF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACzBF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;ACtCF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACxBF;EACE;;;ACEF;EACE;;;AAIF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE","file":"styles.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["../../sass/components/_buttons.scss","../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_display-text.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss","../../sass/components/_system-icons.scss","../../sass/components/_modal.scss","../../sass/components/_main-display.scss","../../sass/components/_power-screen.scss"],"names":[],"mappings":"AAkEQ;AClER;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC1BF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC3DF;EACE;;;AAGF;EACE;EACA;EACA;;;ACPF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AJrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AKtLF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AC/DF;EACE;EACA;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;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACxDF;EACE;;;AAGF;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;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtHF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;ACrKF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACzBF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AC7CF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACxBF;EACE;;;ACEF;EACE;;;AAIF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE","file":"styles.css"}
|
||||
@ -1,30 +1,44 @@
|
||||
#grid-container {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-columns: auto auto;
|
||||
justify-items: stretch;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#main-left__container, #main-right__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#main-left__container {
|
||||
flex: 0 0 463px;
|
||||
}
|
||||
|
||||
#main-right__container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#outer-container__outer {
|
||||
max-width: 90%;
|
||||
display: flex;
|
||||
flex: 0 0 836px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#outer-container__inner {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#console-display {
|
||||
grid-area: 4 / 1 / 5 / 2;
|
||||
flex: 0 0 70px;
|
||||
}
|
||||
|
||||
#control-panel {
|
||||
grid-area: 1 / 2 / 4 / 3;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#tour-display__outer {
|
||||
grid-area: 1 / 1 / 4 / 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
#system-icons__container {
|
||||
display: flex;
|
||||
flex: 0 0 70px;
|
||||
}
|
||||
|
||||
#system-icons__container > div, #system-icons__container > div > div {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#system-icons__wrapper {
|
||||
@ -20,6 +26,7 @@
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
padding: 2px;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
#trash-icon-wrapper {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
.control-panel__video-screen {
|
||||
margin-bottom: 10px;
|
||||
min-height: 267px;
|
||||
max-height: 267px;
|
||||
flex: 0 0 248px;
|
||||
}
|
||||
|
||||
.video-screen {
|
||||
@ -98,7 +97,6 @@
|
||||
|
||||
#power-display__inner {
|
||||
flex-direction: column;
|
||||
min-width: 486.84px;
|
||||
}
|
||||
|
||||
.power-screen__button-container {
|
||||
@ -130,7 +128,7 @@
|
||||
}
|
||||
|
||||
.power-button__text {
|
||||
margin: 8px 0px;
|
||||
margin: 6px 0px;
|
||||
}
|
||||
|
||||
.power-screen__contact-position-container, .power-screen__stored-energy-container {
|
||||
@ -147,7 +145,7 @@
|
||||
margin: 0;
|
||||
font-size: x-small;
|
||||
padding-left: 10px;
|
||||
padding-top: 10px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.power-screen__status-text {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user