mirror of
https://github.com/Max-Stevenson/jurassic-park-interface.git
synced 2024-06-08 08:33:39 +00:00
Switching tabs now changes video-screen content.
This commit is contained in:
parent
5da5e9f21c
commit
569a828d39
47
index.html
47
index.html
|
@ -106,7 +106,7 @@
|
|||
<div class="inner-edge__light" id="control-panel__inner">
|
||||
<div class="control-panel__button-display">
|
||||
<div class="buttons button__depressed">
|
||||
<div class="">
|
||||
<div class="">
|
||||
<p class="button-text__embossed small-button">VEHICLE</p>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -129,18 +129,41 @@
|
|||
<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 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>
|
||||
</div>
|
||||
<div
|
||||
class="video-screen__tab-content video-screen__hidden"
|
||||
id="video-screen__power"
|
||||
>
|
||||
<h2>power</h2>
|
||||
</div>
|
||||
<div
|
||||
class="video-screen__tab-content video-screen__hidden"
|
||||
id="video-screen__tour"
|
||||
>
|
||||
<h2>Tour</h2>
|
||||
</div>
|
||||
<div
|
||||
class="video-screen__tab-content video-screen__hidden"
|
||||
id="video-screen__time"
|
||||
>
|
||||
<h2>Time</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -26,14 +26,12 @@ document.getElementById("start-timer").addEventListener("click", () => {
|
|||
////////////////////////
|
||||
|
||||
// Control panel buttons
|
||||
// .control-panel__button-display
|
||||
|
||||
const topControlPanelButtons = document.getElementsByClassName(
|
||||
"control-panel__button-display"
|
||||
)[0].children;
|
||||
for (let i = 0; i < topControlPanelButtons.length; i++) {
|
||||
let button = topControlPanelButtons[i];
|
||||
button.addEventListener("click", () => {
|
||||
button.addEventListener("click", event => {
|
||||
for (let k = 0; k < topControlPanelButtons.length; k++) {
|
||||
let prevButton = topControlPanelButtons[k];
|
||||
if (prevButton.classList.contains("button__depressed")) {
|
||||
|
@ -57,15 +55,25 @@ for (let i = 0; i < topControlPanelButtons.length; i++) {
|
|||
button.firstElementChild
|
||||
.querySelector("p")
|
||||
.classList.remove("button-text__engraved");
|
||||
// find depressed styling in children
|
||||
// remove depressed styling and embossed styling from previous button
|
||||
// add inner edge light and engraved styling
|
||||
// remove engrave styling from para
|
||||
// remove inner edge light styling from div
|
||||
// add depressed styling to div
|
||||
// add embossed styling to para
|
||||
//
|
||||
changeVideoScreenTab(event);
|
||||
});
|
||||
}
|
||||
////////////////////////
|
||||
|
||||
// Video screen tab change
|
||||
const changeVideoScreenTab = event => {
|
||||
let selectedTab = event.currentTarget.lastElementChild.firstElementChild.innerHTML.toLowerCase();
|
||||
const tabContentElements = document.getElementsByClassName(
|
||||
"video-screen__tab-content"
|
||||
);
|
||||
|
||||
for (let i = 0; i < tabContentElements.length; i++) {
|
||||
if (tabContentElements[i].id === `video-screen__${selectedTab}`) {
|
||||
tabContentElements[i].style.display = "block";
|
||||
} else {
|
||||
tabContentElements[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
};
|
||||
////////////////////////
|
||||
|
||||
|
|
|
@ -509,6 +509,15 @@ body {
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.video-screen__hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#video-screen__reboot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.video-screen__info-text {
|
||||
font-style: italic;
|
||||
text-transform: uppercase;
|
||||
|
|
|
@ -1 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_buttons.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"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACrBF;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;;;ACrEF;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;;;ACtCF;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;;;AAGF;EACE;EACA;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;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;ACnFJ;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","file":"styles.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_buttons.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"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACrBF;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;;;ACrEF;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;;;ACtCF;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;;;AAGF;EACE;EACA;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;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AC5FJ;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","file":"styles.css"}
|
|
@ -23,8 +23,4 @@
|
|||
transform-origin: bottom right;
|
||||
transform: translate(-600px, -500px);
|
||||
transition: all 500ms linear 0s;
|
||||
}
|
||||
|
||||
.modal-container__content {
|
||||
|
||||
}
|
|
@ -70,6 +70,16 @@
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.video-screen__hidden {
|
||||
display: none
|
||||
}
|
||||
|
||||
#video-screen__reboot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.video-screen__info-text {
|
||||
font-style: italic;
|
||||
text-transform: uppercase;
|
||||
|
|
Loading…
Reference in New Issue
Block a user