mirror of
https://github.com/Max-Stevenson/jurassic-park-interface.git
synced 2024-11-03 01:09:33 +00:00
363 lines
15 KiB
HTML
363 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
href="./public/stylesheets/styles.css"
|
|
/>
|
|
</head>
|
|
<body>
|
|
<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">
|
|
<div
|
|
class="outer-edge__dark__no-right-edge"
|
|
id="map-display__outer"
|
|
>
|
|
<div
|
|
class="inner-edge__light__no-padding"
|
|
id="map-display__inner"
|
|
>
|
|
<div class="map-display__container">
|
|
<div class="map-display__system-status__container">
|
|
<div class="map-display__system-wrapper">
|
|
<h1 id="sys-one" class="map-display__system-status">
|
|
SYSTEM SECURED
|
|
</h1>
|
|
</div>
|
|
<div class="map-display__center-section">
|
|
<div class="map-display__system-wrapper">
|
|
<h1 id="sys-two" class="map-display__system-status">
|
|
SYSTEM SECURED
|
|
</h1>
|
|
</div>
|
|
<div class="map-display__system-wrapper">
|
|
<h1 id="sys-three" class="map-display__system-status">
|
|
SYSTEM SECURED
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div class="map-display__system-wrapper">
|
|
<h1 id="sys-four" class="map-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>
|
|
<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>
|
|
</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="button__depressed">
|
|
<p class="button-text__embossed small-button">VEHICLE</p>
|
|
</div>
|
|
<div class="outer-edge__light buttons">
|
|
<div class="inner-edge__light">
|
|
<p class="button-text__engraved 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">
|
|
<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>
|
|
</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 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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"
|
|
/>
|
|
<img
|
|
src="./public/icons/trash.png"
|
|
width="25px"
|
|
height="45px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="outer-edge__light" id="instructions-panel__outer">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="outer-edge__dark">
|
|
<div class="inner-edge__dark">
|
|
<div class="instructions-header__container">
|
|
<h1>Instructions</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="outer-edge__dark">
|
|
<div class="inner-edge__dark">
|
|
<div class="instructions-header__container">
|
|
<h1 id="test">Countdown Clock</h1>
|
|
<div id="countdown-timer">
|
|
<span id="countdown-timer__display"></span>
|
|
</div>
|
|
<button id="start-timer">Start</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript" src="./public/scripts/app.js"></script>
|
|
</html>
|