Added video feed (gif)

columbiaspace · Feb 18, 2024 · e527c3c · e527c3c
1 parent 730d579
commit e527c3c
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 38 deletions.
diff --git a/src/assets/astronautstream.gif b/src/assets/astronautstream.gif
diff --git a/src/pages-style/constant.css b/src/pages-style/constant.css
@@ -1,31 +1,85 @@
+* {
+  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 */
-  }
-
+  display: flex;
+  height: 100vh;
+}
+
+.subContainer{
+  display: flex;
+  height: 100%;
+}
+
+.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;
+  /* 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 */
+}
+
+.lmccImg {
+  max-width: 70%;
+  /* Adjust this value as needed */
+  height: auto;
+  /* Maintain aspect ratio */
+}
+
+.header-banner {
+  background: lightblue;
+  padding: 5px;
+  /* Adjust the padding to reduce vertical space */
+  height: 40px;
+  /* Adjust the height to reduce vertical space */
+  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; /* Ensure the image behaves as a block element */
+  width: 100%; /* Make sure the image takes the full width of its container */
+  height: auto;
+  margin: 0;
+  padding: 0;
+}
diff --git a/src/pages/constant.js b/src/pages/constant.js
@@ -1,19 +1,37 @@
 import React from 'react';
 import './../pages-style/constant.css';
 import LMCCMockup from '../assets/LMCC Mockup.png';
+import AstronautGif from '../assets/astronautstream.gif';
 
 function Constant() {
   return (
     <div>
       <div className="container">
         <div className="column Astronaut">
-          <h3>Astronaut</h3>
-          <p>This section will display the following:</p>
-          <ol>
-            <li>Astronaut Biometrics</li>
-            <li>State of Oxygen and Suit data</li>
-            <li>A video feed of the Astronauts POV</li>
-          </ol>
+          <div className="header-banner">
+            <h2>Astronaut Data</h2>
+          </div>
+          <div className="gif-container">
+            <img src={AstronautGif} alt="Astronaut POV GIF" />
+          </div>
+          <div className="subContainer">
+            <div className="column SuitData">
+              <div className="smallHB">
+                <h3>Suit Data</h3>
+              </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>
+          </div>
         </div>
         <div className="column Mission">
           <h3>Mission</h3>
@@ -23,7 +41,7 @@ function Constant() {
             <li>Elapsed Mission Time</li>
             <li>Mission Objective Checklist</li>
           </ol>
-          <img src={LMCCMockup} alt="LMCCMockup" />
+          <img className="lmccImg" src={LMCCMockup} alt="LMCCMockup" />
         </div>
         <div className="column Rover">
           <h3>Rover</h3>