Macintosh-Tools/jurassic-park-interface
1
0
Fork 0
mirror of https://github.com/Max-Stevenson/jurassic-park-interface.git synced 2024-11-04 08:05:18 +00:00
Code Issues Projects Releases Wiki Activity
8f049e5438
jurassic-park-interface/index.html

435 lines
19 KiB
HTML
Raw Normal View History

Initial commit.
2020-05-26 20:19:44 +00:00
<!DOCTYPE html>
<html>
<head>
Restructure to make use of new class names.
2020-06-01 16:03:01 +00:00
<link
rel="stylesheet"
type="text/css"
Fixed the CSS hellscape created this morning.
2020-06-08 17:44:26 +00:00
href="./public/stylesheets/styles.css"
Restructure to make use of new class names.
2020-06-01 16:03:01 +00:00
/>
Started working on the power section of the game / experience. - Added the famous push to charge and push to close buttons. - Added some basic styling.
2020-06-13 10:43:37 +00:00
<link rel="icon" href="./public/icons/JPicon.png" />
Added better font support. - outlined plan for interactive nature of app. - fixed typo in screen-container_wrapper selector.
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"
/>
Initial commit.
2020-05-26 20:19:44 +00:00
</head>
<body>
Added instructions panel. - Moved entire contents into top level container for display.
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">
<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">
Layout disaster WIP
2020-06-08 11:51:45 +00:00
<div class="map-display__system-wrapper">
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<h1 id="sys-one" class="map-display__system-status">
Layout disaster WIP
2020-06-08 11:51:45 +00:00
SYSTEM SECURED
</h1>
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<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>
Layout disaster WIP
2020-06-08 11:51:45 +00:00
<div class="map-display__system-wrapper">
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<h1 id="sys-four" class="map-display__system-status">
Layout disaster WIP
2020-06-08 11:51:45 +00:00
SYSTEM SECURED
</h1>
</div>
</div>
Restructure to make use of new class names.
2020-06-01 16:03:01 +00:00
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +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>
Initial commit.
2020-05-26 20:19:44 +00:00
</div>
</div>
Finished screen interface. - Started working on room info components.
2020-05-27 10:25:27 +00:00
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<div class="outer-edge__light__no-right-edge" id="console-display">
<div class="inner-edge__light">
<div class="outer-edge__dark">
Added containers for instructions and timer components.
2020-06-09 15:59:22 +00:00
<div
class="inner-edge__light"
id="console-display__container"
>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<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>
Restructure to make use of new class names.
2020-06-01 16:03:01 +00:00
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +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>
Finished screen interface. - Started working on room info components.
2020-05-27 10:25:27 +00:00
</div>
</div>
</div>
Initial commit.
2020-05-26 20:19:44 +00:00
</div>
</div>
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<div class="outer-edge__light" id="control-panel">
<div class="inner-edge__light" id="control-panel__inner">
<div class="control-panel__button-display">
control panel top buttons functional style finished.
2020-06-11 12:48:40 +00:00
<div class="buttons button__depressed">
Switching tabs now changes video-screen content.
2020-06-12 12:23:05 +00:00
<div class="">
control panel top buttons functional style finished.
2020-06-11 12:48:40 +00:00
<p class="button-text__embossed small-button">VEHICLE</p>
</div>
Implemented Sass in project.
2020-06-01 14:33:53 +00:00
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<div class="outer-edge__light buttons">
<div class="inner-edge__light">
<p class="button-text__engraved small-button">TOUR</p>
Created grid and loading spinner elements.
2020-06-01 18:20:54 +00:00
</div>
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<div class="outer-edge__light buttons">
Started work on video screen buttons. - Fixed spelling typo.
2020-06-03 11:42:59 +00:00
<div class="inner-edge__light">
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<p class="button-text__engraved small-button">POWER</p>
Started work on video screen buttons. - Fixed spelling typo.
2020-06-03 11:42:59 +00:00
</div>
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<div class="outer-edge__light buttons">
Started work on video screen buttons. - Fixed spelling typo.
2020-06-03 11:42:59 +00:00
<div class="inner-edge__light">
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<p class="button-text__engraved small-button">TIME</p>
Started work on video screen buttons. - Fixed spelling typo.
2020-06-03 11:42:59 +00:00
</div>
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
</div>
<div class="control-panel__video-screen">
Started work on video screen buttons. - Fixed spelling typo.
2020-06-03 11:42:59 +00:00
<div class="outer-edge__light">
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<div class="inner-edge__light__no-padding">
Switching tabs now changes video-screen content.
2020-06-12 12:23:05 +00:00
<div class="video-screen" id="video-screen">
<div
class="video-screen__tab-content"
id="video-screen__reboot"
>
<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>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
</div>
Switching tabs now changes video-screen content.
2020-06-12 12:23:05 +00:00
<div
class="video-screen__tab-content video-screen__hidden"
id="video-screen__power"
>
Started working on the power section of the game / experience. - Added the famous push to charge and push to close buttons. - Added some basic styling.
2020-06-13 10:43:37 +00:00
<div class="power-screen__button-container">
<button id="power-charge"></button>
<p class="power-button__text">Push to Charge</p>
</div>
<div class="power-screen__button-container">
Added switch design for volate control.
2020-06-14 00:15:53 +00:00
<button id="power-close"></button>
<p class="power-button__text">Push to Close</p>
</div>
<div class="onoffswitch">
<input
type="checkbox"
name="onoffswitch"
class="onoffswitch-checkbox"
id="myonoffswitch"
tabindex="0"
checked
/>
<label
class="onoffswitch-label"
for="myonoffswitch"
>
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
Started working on the power section of the game / experience. - Added the famous push to charge and push to close buttons. - Added some basic styling.
2020-06-13 10:43:37 +00:00
</div>
<div
Switching tabs now changes video-screen content.
2020-06-12 12:23:05 +00:00
class="video-screen__tab-content video-screen__hidden"
id="video-screen__tour"
>
Started working on the power section of the game / experience. - Added the famous push to charge and push to close buttons. - Added some basic styling.
2020-06-13 10:43:37 +00:00
<h2>Tour</h2>
</div>
<div
Switching tabs now changes video-screen content.
2020-06-12 12:23:05 +00:00
class="video-screen__tab-content video-screen__hidden"
id="video-screen__time"
>
Started working on the power section of the game / experience. - Added the famous push to charge and push to close buttons. - Added some basic styling.
2020-06-13 10:43:37 +00:00
<h2>Time</h2>
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
</div>
Added video control buttons.
2020-06-03 12:42:17 +00:00
</div>
</div>
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<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>
Added video control buttons.
2020-06-03 12:42:17 +00:00
</div>
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<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>
Added video control buttons.
2020-06-03 12:42:17 +00:00
</div>
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
</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">
Added video control buttons.
2020-06-03 12:42:17 +00:00
<div class="inner-edge__light">
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<p class="button-text__engraved small-button">maps</p>
Added video control buttons.
2020-06-03 12:42:17 +00:00
</div>
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<div class="outer-edge__light buttons">
Added video control buttons.
2020-06-03 12:42:17 +00:00
<div class="inner-edge__light">
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<p class="button-text__engraved small-button">system</p>
Added video control buttons.
2020-06-03 12:42:17 +00:00
</div>
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<div class="outer-edge__light buttons">
Added video control buttons.
2020-06-03 12:42:17 +00:00
<div class="inner-edge__light">
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<p class="button-text__engraved small-button">emerg.</p>
Started work on video screen buttons. - Fixed spelling typo.
2020-06-03 11:42:59 +00:00
</div>
</div>
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<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>
Fixed formatting nightmare caused by prettier plugin. - Removed unicode chars and pasted in symbols. - Created own border style for console output screen.
2020-06-04 11:46:44 +00:00
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Added structural divs. - Created control panel button with styling.
2020-05-31 23:27:10 +00:00
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<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"
/>
More work in progress on the trash modal.
2020-06-10 18:46:19 +00:00
<div id="trash-icon-wrapper">
<img
id="trash-icon"
src="./public/icons/trash.png"
width="25px"
height="45px"
/>
<div
trash modal animation working fairly well.
2020-06-10 22:52:04 +00:00
class="outer-edge__dark modal-container modal-inactive"
More work in progress on the trash modal.
2020-06-10 18:46:19 +00:00
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>
Workd on Trash Modal. - Moved trash modal markup to be next to trash icon. - Basic modal logic added. - Basic modal styling added.
2020-06-10 13:27:03 +00:00
</div>
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
</div>
Basic MVP design nearly finished. - Added sys icons to bottom right (need more alignment).
2020-06-09 11:01:50 +00:00
</div>
</div>
Fixed formatting nightmare caused by prettier plugin. - Removed unicode chars and pasted in symbols. - Created own border style for console output screen.
2020-06-04 11:46:44 +00:00
</div>
Initial commit.
2020-05-26 20:19:44 +00:00
</div>
</div>
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
<div class="outer-edge__light" id="instructions-panel__outer">
Added containers for instructions and timer components.
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>
Started working on the power section of the game / experience. - Added the famous push to charge and push to close buttons. - Added some basic styling.
2020-06-13 10:43:37 +00:00
<img src="./public/images/JPlogo.jpeg" />
Added containers for instructions and timer components.
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>
</div>
</div>
</div>
<div class="outer-edge__dark">
<div class="inner-edge__dark">
<div class="instructions-header__container">
Added very basic 2 minute countdown timer logic.
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>
Added containers for instructions and timer components.
2020-06-09 15:59:22 +00:00
</div>
</div>
</div>
</div>
Added instructions panel. - Moved entire contents into top level container for display.
2020-06-09 11:22:51 +00:00
</div>
Initial commit.
2020-05-26 20:19:44 +00:00
</div>
Created grid and loading spinner elements.
2020-06-01 18:20:54 +00:00
</body>
Added very basic 2 minute countdown timer logic.
2020-06-09 16:54:13 +00:00
<script type="text/javascript" src="./public/scripts/app.js"></script>
Finished console output.
2020-06-04 16:49:02 +00:00
</html>
Reference in New Issue Copy Permalink