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/pages-style/constant.css b/src/pages-style/constant.css index 5975d26..d7fd0ac 100644 --- a/src/pages-style/constant.css +++ b/src/pages-style/constant.css @@ -7,11 +7,35 @@ height: 100vh; } -.subContainer{ +.subContainer { display: flex; - height: 100%; + height: 60%; } +.data { + background: green; + height: 10%; + display: flex; + align-items: center; + justify-content: center; + padding: 5px; + margin: 0; + border-bottom: 1px solid black; +} + +.column.Mission { + position: relative; /* Set the position to relative for absolute positioning within */ +} + +.map-title { + position: absolute; + top: 7%; /* Adjust the top position as needed */ + left: 50%; /* Adjust the left position as needed */ + transform: translate(-50%, -50%); /* Center the title */ + background: rgba(255, 255, 255, 0.5); /* Translucent white background */ + padding: 10px; + font-weight: bold; +} .column { flex: 1; border-left: 1px solid; diff --git a/src/pages/constant.js b/src/pages/constant.js index 00e5f6e..b5e45d2 100644 --- a/src/pages/constant.js +++ b/src/pages/constant.js @@ -1,12 +1,14 @@ import React 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() { return (
+ {/* Column 1: Astronaut */}

Astronaut Data

@@ -19,38 +21,91 @@ function Constant() {

Suit Data

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

Biometrics

-

This section will display the following:

-
    -
  1. Astronaut Biometrics
  2. -
  3. State of Oxygen and Suit data
  4. -
  5. A GIF of the Astronaut's POV
  6. -
+
+ 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. -
  3. Elapsed Mission Time
  4. -
  5. Mission Objective Checklist
  6. -
- LMCCMockup +
+

Mission

+
+
+

Map

+ Map GIF +
+ + {/* Column 3: Rover */}
-

Rover

-

This section will display the following:

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

Rover

+
+
+ Rover POV GIF +
+
+ Rover Thermal POV GIF +