diff --git a/src/App.js b/src/App.js index 6ba9882..b44f88e 100644 --- a/src/App.js +++ b/src/App.js @@ -26,6 +26,7 @@ function App() { + } /> } /> } /> } /> diff --git a/src/assets/MapGif.gif b/src/assets/MapGif.gif new file mode 100644 index 0000000..a4a41a6 Binary files /dev/null and b/src/assets/MapGif.gif differ diff --git a/src/assets/RoverGif.gif b/src/assets/RoverGif.gif new file mode 100644 index 0000000..c789247 Binary files /dev/null and b/src/assets/RoverGif.gif differ diff --git a/src/assets/ThermalGif.gif b/src/assets/ThermalGif.gif new file mode 100644 index 0000000..01b089e Binary files /dev/null and b/src/assets/ThermalGif.gif differ diff --git a/src/assets/astronautstream.gif b/src/assets/astronautstream.gif new file mode 100644 index 0000000..635745a Binary files /dev/null and b/src/assets/astronautstream.gif differ diff --git a/src/pages-style/constant.css b/src/pages-style/constant.css index 2f897e8..0c09d00 100644 --- a/src/pages-style/constant.css +++ b/src/pages-style/constant.css @@ -1,31 +1,142 @@ +* { + box-sizing: border-box; +} + .container { - display: flex; - height: 100vh; - } - - .column { - flex: 1; - border-left: 1px solid; - padding: 5px; - text-align: center; /* Center the content within each column */ - } - - .column h3 { - margin: 5px 0; - } - - .column p { - text-align: left; /* Justify text to the left within paragraphs */ - margin: 0; /* Remove default margin for paragraphs */ - padding: 0; /* Remove default padding for paragraphs */ - } - - .column ol { - text-align: left; /* Justify text to the left within ordered lists */ - padding-left: 20px; /* Add some left padding for better visual separation */ - } - - .column ol li { - margin-bottom: 8px; /* Adjust margin between list items */ - } - \ No newline at end of file + display: flex; + height: 85vh; +} + +.subContainer { + display: flex; + height: 50%; +} + +.data { + background: green; + height: 12.5%; + display: flex; + align-items: center; + justify-content: center; + padding: 5px; + margin: 0; + border-bottom: 1px solid black; +} + +.column.Mission { + position: relative; +} + +.map-title { + position: absolute; + top: 5%; + left: 50%; + transform: translate(-50%, -50%); + background: transparent; + padding: 10px; + font-weight: bold; +} + +.twoTasks { + height: 12%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0px; + margin: 0; + border-bottom: 1px solid black; +} + +.taskContainer { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + position: relative; + width: 100%; + height: 100%; /* Set the height to 100% to cover the entire height of twoTasks */ +} + +.taskContainer + .taskContainer::before { + content: ''; + position: absolute; + height: 100%; + width: 1px; + background-color: black; + left: 0; +} + +.timer-container { + background-color: blue; + text-align: center; + font-weight: bold; + display: flex; + align-items: center; + justify-content: center; + height: 50px; +} + +.column { + flex: 1; + border-left: 1px solid; + padding: 0px; + text-align: center; +} + +.column h3 { + margin: 0; +} + +.column p { + text-align: left; + margin: 0; + padding: 0; +} + +.column ol { + text-align: left; + padding-left: 20px; +} + +.column ol li { + margin-bottom: 8px; +} + +.lmccImg { + max-width: 70%; + height: auto; +} + +.header-banner { + background: lightblue; + padding: 5px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; +} + +.smallHB { + background: lightblue; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + padding: 5px; + margin: 0; +} + +.gif-container { + max-width: 100%; + height: auto; + padding: 0; + margin: 0; +} + +.gif-container img { + display: block; + width: 100%; + height: auto; + margin: 0; + padding: 0; +} diff --git a/src/pages-style/rocks.css b/src/pages-style/rocks.css index e69de29..d43d59a 100644 --- a/src/pages-style/rocks.css +++ b/src/pages-style/rocks.css @@ -0,0 +1,31 @@ +.warning-modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + } + +.warning-modal-content { + background-color: lightcoral; + padding: 20px; + border-radius: 8px; +} + +button { + display: block; + margin: 0 auto; +} + +.close { + position: absolute; + top: 10px; + right: 10px; + cursor: pointer; +} + + diff --git a/src/pages/constant.js b/src/pages/constant.js index 199338e..01f8965 100644 --- a/src/pages/constant.js +++ b/src/pages/constant.js @@ -1,38 +1,186 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import './../pages-style/constant.css'; -import LMCCMockup from '../assets/LMCC Mockup.png'; - +import AstronautGif from '../assets/astronautstream.gif'; +import RoverGif from '../assets/RoverGif.gif'; +import ThermalGif from '../assets/ThermalGif.gif'; +import MapGif from '../assets/MapGif.gif'; function Constant() { + const [timer, setTimer] = useState(0); + const [isRunning, setIsRunning] = useState(false); + + useEffect(() => { + let interval; + + if (isRunning) { + interval = setInterval(() => { + setTimer((prevTimer) => prevTimer + 1); + }, 1000); + } else { + clearInterval(interval); + } + + return () => clearInterval(interval); + }, [isRunning]); + + const startTimer = () => { + setIsRunning(true); + }; + + const stopTimer = () => { + setIsRunning(false); + }; + + const resetTimer = () => { + setTimer(0); + setIsRunning(false); + }; + + const formatTime = (timeInSeconds) => { + const hours = Math.floor(timeInSeconds / 3600); + const minutes = Math.floor((timeInSeconds % 3600) / 60); + const seconds = timeInSeconds % 60; + + return `${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; + }; + + return (
+ {/* Column 1: Astronaut */}
-

Astronaut

-

This section will display the following:

-
    -
  1. Astronaut Biometrics
    2. -
  2. State of Oxygen and Suit data
    3. -
  3. A video feed of the Astronauts POV
    4. -
+
+

Astronaut Data

+
+
+ Astronaut POV GIF +
+
+
+
+

Suit Data

+
+
+ Oxygen Tank Level:  + 45 + % +
+
+ Air Seal:  + Good +
+
+ Electronic Connections:  + Good +
+
+ Network Connection:  + Poor +
+
+ Fan Speed:  + Good +
+
+ Water Level:  + Mid +
+
+
+
+

Biometrics

+
+
+ Blood Oxygen:  + 98 + % +
+
+ Heartrate:  + 120 + bpm +
+
+ Respiratory Rate:  + 17 + bpm +
+
+ Body Temp:  + 98.9 + *F +
+
+ Blood Pressure:  + 140/90 + mmHg +
+
+ Stress Level:  + HIGH! +
+
+
+ + {/* Column 2: Mission */}
-

Mission

-

This section will display the following:

-
    -
  1. The Map with checkpoints
    2. -
  2. Elapsed Mission Time
    3. -
  3. Mission Objective Checklist
    4. -
- LMCCMockup +
+

Mission

+
+
+

Map

+ Map GIF +
+
+

Mission Timer: {formatTime(timer)}

+ + + +
+
+
+ Egress:  + Completed +
+
+ Rock Scanning:  + Not Started +
+
+
+
+ Navigation:  + Completed +
+
+ Rover:  + Not Started +
+
+
+
+ Equipment:  + In Progress +
+
+ Ingress:  + Not Started +
+
+ + {/* Column 3: Rover */}
-

Rover

-

This section will display the following:

-
    -
  1. Rover Camera Feed
    2. -
  2. State of Rover battery, connection, tire pressure
    3. -
  3. Rover Thermal Camera Feed
    4. -
+
+

Rover

+
+
+ Rover POV GIF +
+
+ Rover Thermal POV GIF +
diff --git a/src/pages/rocks.js b/src/pages/rocks.js index 256bf93..12c3a13 100644 --- a/src/pages/rocks.js +++ b/src/pages/rocks.js @@ -1,15 +1,28 @@ -import React from 'react'; +import React, { useState } from 'react'; import './../pages-style/rocks.css'; + import { ProcedureList } from '../helpers/ProcedureList'; import ProcedureItem from '../components/ProcedureItem'; function rocks() { + + +function Rocks() { + const [showWarning, setShowWarning] = useState(false); + + const handleShowWarning = () => { + setShowWarning(true); + }; + + const handleCloseWarning = () => { + setShowWarning(false); + }; + return (

Rocks

This page will display samples that have been collected, and what samples should be kept

{ProcedureList.map((Item, key) =>{ - return ( + + + {showWarning && ( +
+
+ × +

Warning: Are you sure you want to proceed?

+ +
+
+ )}
); } -export default rocks; \ No newline at end of file +export default Rocks;