2020-05-26 20:19:44 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<head>
|
2020-06-01 16:03:01 +00:00
|
|
|
<link
|
|
|
|
rel="stylesheet"
|
|
|
|
type="text/css"
|
2020-06-08 17:44:26 +00:00
|
|
|
href="./public/stylesheets/styles.css"
|
2020-06-01 16:03:01 +00:00
|
|
|
/>
|
2020-09-07 19:51:16 +00:00
|
|
|
<link rel="icon" href="./public/icons/JPicon.png" />
|
2020-06-09 22:51:25 +00:00
|
|
|
<link
|
|
|
|
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400;1,500;1,700&display=swap"
|
|
|
|
rel="stylesheet"
|
|
|
|
/>
|
2020-09-07 19:51:16 +00:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
2020-05-26 20:19:44 +00:00
|
|
|
</head>
|
|
|
|
<body>
|
2020-06-09 11:22:51 +00:00
|
|
|
<div id="top-level">
|
|
|
|
<div class="outer-edge__light" id="outer-container__outer">
|
|
|
|
<div class="inner-edge__light" id="outer-container__inner">
|
|
|
|
<div id="grid-container">
|
2020-06-18 09:30:06 +00:00
|
|
|
<div id="main-left__container">
|
2020-06-09 11:22:51 +00:00
|
|
|
<div
|
2020-06-18 09:30:06 +00:00
|
|
|
class="outer-edge__dark__no-right-edge"
|
|
|
|
id="tour-display__outer"
|
2020-06-09 11:22:51 +00:00
|
|
|
>
|
2020-06-28 21:58:37 +00:00
|
|
|
<div
|
|
|
|
class="inner-edge__light__no-padding main-display main-display__hidden"
|
|
|
|
id="time-display__inner"
|
|
|
|
>
|
|
|
|
<h2>Test</h2>
|
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<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">
|
2020-09-07 18:05:58 +00:00
|
|
|
<p class="breaker-active">High</p>
|
2020-06-18 09:30:06 +00:00
|
|
|
<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>
|
2020-06-16 15:26:33 +00:00
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<div class="toggle-switch-container">
|
2020-09-07 18:05:58 +00:00
|
|
|
<p class="breaker-active">High</p>
|
2020-06-18 09:30:06 +00:00
|
|
|
<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>
|
2020-06-16 15:26:33 +00:00
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<div class="toggle-switch-container">
|
2020-09-07 18:05:58 +00:00
|
|
|
<p class="breaker-active">High</p>
|
2020-06-18 09:30:06 +00:00
|
|
|
<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>
|
2020-06-16 15:26:33 +00:00
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<div class="toggle-switch-container">
|
2020-09-07 18:05:58 +00:00
|
|
|
<p class="breaker-active">High</p>
|
2020-06-18 09:30:06 +00:00
|
|
|
<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>
|
2020-06-16 15:26:33 +00:00
|
|
|
</div>
|
2020-06-16 13:04:13 +00:00
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<div class="power-screen__votage-output-container">
|
2020-09-06 23:16:22 +00:00
|
|
|
<p class="white-font-black-background">Required voltage: 220V</p>
|
|
|
|
<p class="white-font-black-background">Current voltage: <span id="current-voltage"></span>V</p>
|
2020-06-18 09:30:06 +00:00
|
|
|
</div>
|
2020-06-18 13:18:02 +00:00
|
|
|
<div class="power-screen__breaker-parent">
|
|
|
|
<div class="power-screen__breaker-container">
|
|
|
|
<div class="breaker-wrapper">
|
|
|
|
<div class="breaker-buttons__wrapper">
|
2020-06-28 21:58:37 +00:00
|
|
|
<button class="breaker-button breaker-on"></button>
|
|
|
|
<button class="breaker-button breaker-off"></button>
|
2020-06-18 13:18:02 +00:00
|
|
|
</div>
|
|
|
|
<div class="breaker-label__wrapper">
|
|
|
|
<p class="breaker-label__text">
|
|
|
|
herbivore feeding compound
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="power-screen__breaker-container">
|
|
|
|
<div class="breaker-wrapper">
|
|
|
|
<div class="breaker-buttons__wrapper">
|
2020-06-28 21:58:37 +00:00
|
|
|
<button class="breaker-button breaker-on"></button>
|
|
|
|
<button class="breaker-button breaker-off"></button>
|
2020-06-18 13:18:02 +00:00
|
|
|
</div>
|
|
|
|
<div class="breaker-label__wrapper">
|
|
|
|
<p class="breaker-label__text">
|
|
|
|
carnivore feeding compound
|
|
|
|
</p>
|
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
</div>
|
2020-06-18 13:18:02 +00:00
|
|
|
</div>
|
|
|
|
<div class="power-screen__breaker-container">
|
|
|
|
<div class="breaker-wrapper">
|
|
|
|
<div class="breaker-buttons__wrapper">
|
2020-06-28 21:58:37 +00:00
|
|
|
<button class="breaker-button breaker-on"></button>
|
|
|
|
<button class="breaker-button breaker-off"></button>
|
2020-06-18 13:18:02 +00:00
|
|
|
</div>
|
|
|
|
<div class="breaker-label__wrapper">
|
|
|
|
<p class="breaker-label__text">
|
|
|
|
visitors cntr. compound
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="power-screen__breaker-container">
|
|
|
|
<div class="breaker-wrapper">
|
|
|
|
<div class="breaker-buttons__wrapper">
|
2020-06-28 21:58:37 +00:00
|
|
|
<button class="breaker-button breaker-on"></button>
|
|
|
|
<button class="breaker-button breaker-off"></button>
|
2020-06-18 13:18:02 +00:00
|
|
|
</div>
|
|
|
|
<div class="breaker-label__wrapper">
|
|
|
|
<p class="breaker-label__text">
|
|
|
|
visitors cntr. control
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="power-screen__breaker-container">
|
|
|
|
<div class="breaker-wrapper">
|
|
|
|
<div class="breaker-buttons__wrapper">
|
2020-06-28 21:58:37 +00:00
|
|
|
<button class="breaker-button breaker-on"></button>
|
|
|
|
<button class="breaker-button breaker-off"></button>
|
2020-06-18 13:18:02 +00:00
|
|
|
</div>
|
|
|
|
<div class="breaker-label__wrapper">
|
|
|
|
<p class="breaker-label__text">
|
|
|
|
genetics / fertilizer lab
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="power-screen__breaker-container">
|
|
|
|
<div class="breaker-wrapper">
|
|
|
|
<div class="breaker-buttons__wrapper">
|
2020-06-28 21:58:37 +00:00
|
|
|
<button class="breaker-button breaker-on"></button>
|
|
|
|
<button class="breaker-button breaker-off"></button>
|
2020-06-18 13:18:02 +00:00
|
|
|
</div>
|
|
|
|
<div class="breaker-label__wrapper">
|
|
|
|
<p class="breaker-label__text">
|
|
|
|
maintenance shed / bunker
|
|
|
|
</p>
|
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
</div>
|
2020-06-17 09:59:04 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<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">
|
2020-09-07 19:51:16 +00:00
|
|
|
<div
|
|
|
|
id="tour-display__wrapper-left"
|
|
|
|
class="tour-display__system-wrapper"
|
|
|
|
>
|
2020-06-18 09:30:06 +00:00
|
|
|
<h1 id="sys-one" class="tour-display__system-status">
|
2020-06-09 11:22:51 +00:00
|
|
|
SYSTEM SECURED
|
|
|
|
</h1>
|
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<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>
|
2020-09-07 19:51:16 +00:00
|
|
|
<div
|
|
|
|
id="tour-display__wrapper-right"
|
|
|
|
class="tour-display__system-wrapper"
|
|
|
|
>
|
2020-06-18 09:30:06 +00:00
|
|
|
<h1 id="sys-four" class="tour-display__system-status">
|
2020-06-09 11:22:51 +00:00
|
|
|
SYSTEM SECURED
|
|
|
|
</h1>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<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>
|
2020-06-09 11:22:51 +00:00
|
|
|
</div>
|
2020-05-26 20:19:44 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<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>
|
2020-06-09 11:22:51 +00:00
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<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>
|
2020-06-09 11:22:51 +00:00
|
|
|
</div>
|
2020-05-27 10:25:27 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-05-26 20:19:44 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<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="">
|
2020-06-18 23:01:31 +00:00
|
|
|
<p class="button-text__embossed small-button">VEHICLE</p>
|
2020-06-18 09:30:06 +00:00
|
|
|
</div>
|
2020-06-11 12:48:40 +00:00
|
|
|
</div>
|
2020-09-02 02:39:09 +00:00
|
|
|
<div class="outer-edge__light-buttons buttons">
|
|
|
|
<div class="inner-edge__light-buttons">
|
2020-06-18 09:30:06 +00:00
|
|
|
<p class="button-text__engraved small-button">TOUR</p>
|
|
|
|
</div>
|
2020-06-01 18:20:54 +00:00
|
|
|
</div>
|
2020-09-02 02:39:09 +00:00
|
|
|
<div class="outer-edge__light-buttons buttons">
|
|
|
|
<div class="inner-edge__light-buttons">
|
2020-06-18 09:30:06 +00:00
|
|
|
<p class="button-text__engraved small-button">POWER</p>
|
|
|
|
</div>
|
2020-06-03 11:42:59 +00:00
|
|
|
</div>
|
2020-09-02 02:39:09 +00:00
|
|
|
<div class="outer-edge__light-buttons buttons">
|
|
|
|
<div class="inner-edge__light-buttons">
|
2020-06-18 09:30:06 +00:00
|
|
|
<p class="button-text__engraved small-button">TIME</p>
|
|
|
|
</div>
|
2020-06-03 11:42:59 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<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
|
2020-09-07 19:51:16 +00:00
|
|
|
class="video-screen__tab-content video-screen__hidden"
|
2020-06-18 09:30:06 +00:00
|
|
|
id="video-screen__vehicle"
|
|
|
|
>
|
2020-09-07 19:51:16 +00:00
|
|
|
<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>
|
2020-09-09 19:22:57 +00:00
|
|
|
<div class="video-screen__vehicle-img__wrapper">
|
|
|
|
<!-- <img id="vehicle-details__tour-vehicle" src="./public/images/vehicleGraphic.png" alt=""> -->
|
|
|
|
</div>
|
2020-09-08 21:11:23 +00:00
|
|
|
<div class="video-screen__vehicle-details__wrapper">
|
|
|
|
<div class="video-screen__vehicle-details__left">
|
|
|
|
<div class="vehicle-details__detail-container">
|
2020-09-09 01:51:15 +00:00
|
|
|
<div class="vehicle-status__active"></div>
|
2020-09-08 21:11:23 +00:00
|
|
|
<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>
|
|
|
|
</div>
|
2020-09-09 01:51:15 +00:00
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
</div>
|
2020-09-08 21:11:23 +00:00
|
|
|
</div>
|
|
|
|
<div class="vide-screen__vehicle-details__right">
|
2020-09-09 19:22:57 +00:00
|
|
|
<div class="vehicle-details__graphic-wrapper">
|
|
|
|
<!-- <img src="./public/images/explorerGraphic.png" alt=""> -->
|
|
|
|
</div>
|
2020-09-08 21:11:23 +00:00
|
|
|
</div>
|
2020-09-07 19:51:16 +00:00
|
|
|
</div>
|
2020-08-25 18:20:09 +00:00
|
|
|
</div>
|
2020-09-07 19:51:16 +00:00
|
|
|
<div
|
|
|
|
class="video-screen__tab-content"
|
|
|
|
id="video-screen__tour"
|
|
|
|
>
|
2020-06-18 09:30:06 +00:00
|
|
|
<div class="video-screen_loading-spinner__wrapper">
|
|
|
|
<div class="video-screen__loading-spinner"></div>
|
2020-06-14 18:06:10 +00:00
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<div class="video-screen__text-wrapper">
|
|
|
|
<h3 class="video-screen__header">
|
|
|
|
rebooting system...
|
|
|
|
</h3>
|
|
|
|
<p class="video-screen__info-text">
|
|
|
|
volume --- nedryland jp
|
2020-06-15 10:12:03 +00:00
|
|
|
</p>
|
|
|
|
</div>
|
2020-06-13 10:43:37 +00:00
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<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"
|
2020-06-16 13:04:13 +00:00
|
|
|
>
|
2020-06-18 09:30:06 +00:00
|
|
|
<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>
|
2020-06-14 18:06:10 +00:00
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<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>
|
2020-06-14 18:06:10 +00:00
|
|
|
</div>
|
2020-06-14 00:15:53 +00:00
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<div
|
|
|
|
class="video-screen__tab-content video-screen__hidden"
|
|
|
|
id="video-screen__time"
|
|
|
|
>
|
|
|
|
<h2>Time</h2>
|
|
|
|
</div>
|
2020-06-13 10:43:37 +00:00
|
|
|
</div>
|
2020-06-09 11:22:51 +00:00
|
|
|
</div>
|
2020-06-03 12:42:17 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<div class="control-panel__button-control">
|
|
|
|
<div class="button-control__top">
|
2020-09-02 14:21:13 +00:00
|
|
|
<div class="outer-edge__light__no-right-edge-buttons">
|
|
|
|
<div class="inner-edge__light-buttons">
|
2020-06-18 09:30:06 +00:00
|
|
|
<p class="button-text__engraved__light large-button">
|
|
|
|
hold
|
|
|
|
</p>
|
|
|
|
</div>
|
2020-06-09 11:22:51 +00:00
|
|
|
</div>
|
2020-09-02 14:21:13 +00:00
|
|
|
<div class="outer-edge__light__no-right-edge-buttons">
|
|
|
|
<div class="inner-edge__light-buttons">
|
2020-06-18 09:30:06 +00:00
|
|
|
<p class="button-text__engraved__light large-button">
|
|
|
|
quit
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-09-02 14:21:13 +00:00
|
|
|
<div class="outer-edge__light-buttons">
|
|
|
|
<div class="inner-edge__light-buttons">
|
2020-06-18 09:30:06 +00:00
|
|
|
<p class="button-text__engraved__light large-button">
|
|
|
|
new
|
|
|
|
</p>
|
|
|
|
</div>
|
2020-06-09 11:22:51 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<div class="button-control__bottom">
|
2020-09-02 14:21:13 +00:00
|
|
|
<div class="outer-edge__light__no-right-edge-buttons">
|
|
|
|
<div class="inner-edge__light-buttons">
|
2020-06-18 09:30:06 +00:00
|
|
|
<p class="button-text__engraved__light large-button">
|
|
|
|
Next
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-09-02 14:21:13 +00:00
|
|
|
<div class="outer-edge__light__no-right-edge-buttons">
|
|
|
|
<div class="inner-edge__light-buttons">
|
2020-06-18 09:30:06 +00:00
|
|
|
<p
|
|
|
|
class="button-text__engraved__light large-button"
|
|
|
|
id="rewind-button"
|
|
|
|
>
|
2020-09-07 19:51:16 +00:00
|
|
|
▶▶
|
2020-06-18 09:30:06 +00:00
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-09-02 14:21:13 +00:00
|
|
|
<div class="outer-edge__light__no-right-edge-buttons">
|
|
|
|
<div class="inner-edge__light-buttons">
|
2020-06-18 09:30:06 +00:00
|
|
|
<p
|
|
|
|
class="button-text__engraved__light large-button"
|
|
|
|
id="forward-button"
|
|
|
|
>
|
|
|
|
▶▶
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-09-02 14:21:13 +00:00
|
|
|
<div class="outer-edge__light__no-right-edge-buttons">
|
|
|
|
<div class="inner-edge__light-buttons">
|
2020-06-18 09:30:06 +00:00
|
|
|
<p
|
|
|
|
class="button-text__engraved__light large-button"
|
|
|
|
id="play-button"
|
|
|
|
>
|
|
|
|
▶
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-09-02 14:21:13 +00:00
|
|
|
<div class="outer-edge__light-buttons">
|
|
|
|
<div class="inner-edge__light-buttons">
|
2020-06-18 09:30:06 +00:00
|
|
|
<p
|
|
|
|
class="button-text__engraved__light large-button"
|
|
|
|
id="stop-button"
|
|
|
|
>
|
|
|
|
⬛
|
|
|
|
</p>
|
|
|
|
</div>
|
2020-06-09 11:22:51 +00:00
|
|
|
</div>
|
2020-06-03 12:42:17 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<div class="control-panel__button-display">
|
2020-06-22 22:00:55 +00:00
|
|
|
<div class="buttons button__depressed">
|
|
|
|
<div class="">
|
2020-09-07 19:51:16 +00:00
|
|
|
<p class="button-text__embossed small-button">
|
|
|
|
glitches
|
|
|
|
</p>
|
2020-06-22 22:00:55 +00:00
|
|
|
</div>
|
2020-06-09 11:22:51 +00:00
|
|
|
</div>
|
2020-09-02 18:24:50 +00:00
|
|
|
<div class="outer-edge__light-buttons buttons">
|
|
|
|
<div class="inner-edge__light-buttons">
|
2020-06-18 09:30:06 +00:00
|
|
|
<p class="button-text__engraved small-button">maps</p>
|
2020-06-09 11:22:51 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-09-02 18:24:50 +00:00
|
|
|
<div class="outer-edge__light-buttons buttons">
|
|
|
|
<div class="inner-edge__light-buttons">
|
2020-06-18 09:30:06 +00:00
|
|
|
<p class="button-text__engraved small-button">system</p>
|
2020-06-09 11:22:51 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-09-02 18:24:50 +00:00
|
|
|
<div class="outer-edge__light-buttons buttons">
|
|
|
|
<div class="inner-edge__light-buttons">
|
2020-06-18 09:30:06 +00:00
|
|
|
<p class="button-text__engraved small-button">emerg.</p>
|
2020-06-09 11:22:51 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
</div>
|
|
|
|
<div class="control-panel__output-display">
|
2020-06-09 11:22:51 +00:00
|
|
|
<div class="outer-edge__light">
|
|
|
|
<div class="inner-edge__light">
|
2020-06-18 09:30:06 +00:00
|
|
|
<div class="outer-edge__console">
|
|
|
|
<div class="inner-edge__console">
|
2020-06-28 21:58:37 +00:00
|
|
|
<div
|
|
|
|
class="output-display__wrapper"
|
2020-07-05 09:22:59 +00:00
|
|
|
id="output-display__glitches"
|
2020-06-28 21:58:37 +00:00
|
|
|
>
|
2020-06-18 09:30:06 +00:00
|
|
|
<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>
|
2020-06-09 11:22:51 +00:00
|
|
|
</div>
|
2020-07-05 09:22:59 +00:00
|
|
|
<div
|
|
|
|
class="output-display__wrapper output-display__hidden"
|
|
|
|
id="output-display__maps"
|
|
|
|
>
|
2020-09-07 19:51:16 +00:00
|
|
|
<h2>Maps</h2>
|
2020-07-05 09:22:59 +00:00
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="output-display__wrapper output-display__hidden"
|
|
|
|
id="output-display__system"
|
|
|
|
>
|
2020-09-07 19:51:16 +00:00
|
|
|
<h2>System</h2>
|
2020-07-05 09:22:59 +00:00
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
class="output-display__wrapper output-display__hidden"
|
|
|
|
id="output-display__emerg"
|
|
|
|
>
|
2020-09-07 19:51:16 +00:00
|
|
|
<h2>Emerg.</h2>
|
2020-07-05 09:22:59 +00:00
|
|
|
</div>
|
2020-06-04 11:46:44 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-06-18 09:30:06 +00:00
|
|
|
<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>
|
2020-09-07 19:51:16 +00:00
|
|
|
<img src="./public/icons/hard-drive.png" />
|
|
|
|
<img src="./public/icons/mini-array-one.png" />
|
|
|
|
<img src="./public/icons/mini-array-two.png" />
|
|
|
|
<div id="trash-icon-wrapper">
|
|
|
|
<img id="trash-icon" src="./public/icons/trash.png" />
|
|
|
|
<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>
|
2020-06-10 18:46:19 +00:00
|
|
|
</div>
|
2020-06-10 13:27:03 +00:00
|
|
|
</div>
|
2020-09-07 19:51:16 +00:00
|
|
|
</div>
|
2020-06-09 11:22:51 +00:00
|
|
|
</div>
|
2020-06-09 11:01:50 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-06-04 11:46:44 +00:00
|
|
|
</div>
|
2020-05-26 20:19:44 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-06-09 11:22:51 +00:00
|
|
|
<div class="outer-edge__light" id="instructions-panel__outer">
|
2020-06-09 15:59:22 +00:00
|
|
|
<div class="inner-edge__light" id="instructions-panel__inner">
|
|
|
|
<div class="outer-edge__dark">
|
|
|
|
<div class="inner-edge__dark">
|
|
|
|
<div class="instructions-header__container">
|
|
|
|
<h1>Welcome to Jurassic Park</h1>
|
|
|
|
</div>
|
2020-08-17 19:30:09 +00:00
|
|
|
<img id="main-logo" src="./public/images/JPlogo.jpeg" />
|
2020-06-09 15:59:22 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="outer-edge__dark">
|
|
|
|
<div class="inner-edge__dark">
|
|
|
|
<div class="instructions-header__container">
|
|
|
|
<h1>Instructions</h1>
|
2020-09-07 19:51:16 +00:00
|
|
|
<p class="instructions-text__content"></p>
|
2020-06-09 15:59:22 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="outer-edge__dark">
|
|
|
|
<div class="inner-edge__dark">
|
|
|
|
<div class="instructions-header__container">
|
2020-06-09 16:54:13 +00:00
|
|
|
<h1 id="test">Countdown Clock</h1>
|
|
|
|
<div id="countdown-timer">
|
|
|
|
<span id="countdown-timer__display"></span>
|
|
|
|
</div>
|
|
|
|
<button id="start-timer">Start</button>
|
2020-06-09 15:59:22 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-06-09 11:22:51 +00:00
|
|
|
</div>
|
2020-05-26 20:19:44 +00:00
|
|
|
</div>
|
2020-06-01 18:20:54 +00:00
|
|
|
</body>
|
2020-06-09 16:54:13 +00:00
|
|
|
<script type="text/javascript" src="./public/scripts/app.js"></script>
|
2020-06-04 16:49:02 +00:00
|
|
|
</html>
|