Added to Constant

columbiaspace · Feb 18, 2024 · 307e509 · 307e509
1 parent e527c3c
commit 307e509
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 25 deletions.
diff --git a/src/assets/MapGif.gif b/src/assets/MapGif.gif
diff --git a/src/assets/RoverGif.gif b/src/assets/RoverGif.gif
diff --git a/src/assets/ThermalGif.gif b/src/assets/ThermalGif.gif
diff --git 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
@@ -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 (
     <div>
       <div className="container">
+        {/* Column 1: Astronaut */}
         <div className="column Astronaut">
           <div className="header-banner">
             <h2>Astronaut Data</h2>
@@ -19,38 +21,91 @@ function Constant() {
               <div className="smallHB">
                 <h3>Suit Data</h3>
               </div>
+              <div className="data">
+                <span>Oxygen Tank Level:&nbsp;</span>
+                <span>45</span>
+                <span>%</span>
+              </div>
+              <div className="data">
+                <span>Air Seal:&nbsp;</span>
+                <span>Good</span>
+              </div>
+              <div className="data">
+                <span>Electronic Connections:&nbsp;</span>
+                <span>Good</span>
+              </div>
+              <div className="data">
+                <span>Network Connection:&nbsp;</span>
+                <span>Poor</span>
+              </div>
+              <div className="data">
+                <span>Fan Speed:&nbsp;</span>
+                <span>Good</span>
+              </div>
+              <div className="data">
+                <span>Water Level:&nbsp;</span>
+                <span>Mid</span>
+              </div>
             </div>
             <div className="column Biometrics">
               <div className="smallHB">
                 <h3>Biometrics</h3>
               </div>
-              <p>This section will display the following:</p>
-              <ol>
-                <li>Astronaut Biometrics</li>
-                <li>State of Oxygen and Suit data</li>
-                <li>A GIF of the Astronaut's POV</li>
-              </ol>
+              <div className="data">
+                <span>Blood Oxygen:&nbsp;</span>
+                <span>98</span>
+                <span>%</span>
+              </div>
+              <div className="data">
+                <span>Heartrate:&nbsp;</span>
+                <span>120</span>
+                <span>bpm</span>
+              </div>
+              <div className="data">
+                <span>Respiratory Rate:&nbsp;</span>
+                <span>17</span>
+                <span>bpm</span>
+              </div>
+              <div className="data">
+                <span>Body Temp:&nbsp;</span>
+                <span>98.9</span>
+                <span>*F</span>
+              </div>
+              <div className="data">
+                <span>Blood Pressure:&nbsp;</span>
+                <span>140/90</span>
+                <span>mmHg</span>
+              </div>
+              <div className="data">
+                <span>Stress Level:&nbsp;</span>
+                <span>HIGH!</span>
+              </div>
             </div>
           </div>
         </div>
+
+        {/* Column 2: Mission */}
         <div className="column Mission">
-          <h3>Mission</h3>
-          <p>This section will display the following:</p>
-          <ol>
-            <li>The Map with checkpoints</li>
-            <li>Elapsed Mission Time</li>
-            <li>Mission Objective Checklist</li>
-          </ol>
-          <img className="lmccImg" src={LMCCMockup} alt="LMCCMockup" />
+          <div className="header-banner">
+            <h2>Mission</h2>
+          </div>
+          <div className="gif-container">
+            <h2 className="map-title">Map</h2>
+            <img src={MapGif} alt="Map GIF" />
+          </div>
         </div>
+
+        {/* Column 3: Rover */}
         <div className="column Rover">
-          <h3>Rover</h3>
-          <p>This section will display the following:</p>
-          <ol>
-            <li>Rover Camera Feed</li>
-            <li>State of Rover battery, connection, tire pressure</li>
-            <li>Rover Thermal Camera Feed</li>
-          </ol>
+          <div className="header-banner">
+            <h2>Rover</h2>
+          </div>
+          <div className="gif-container">
+            <img src={RoverGif} alt="Rover POV GIF" />
+          </div>
+          <div className="gif-container">
+            <img src={ThermalGif} alt="Rover Thermal POV GIF" />
+          </div>
         </div>
       </div>
     </div>