Add preliminary control panel design

control-station/src/App.tsx

@@ -1,11 +1,13 @@
-import { Dashboard } from "@/views";
-
-import "./App.css";
+import ControlPanel from "./components/ControlPanel/ControlPanel";
+import Navbar from "./components/Navbar/Navbar";
+import SensorBoxContainer from "./components/SensorBoxes/SensorBoxContainer";
 
 function App() {
 	return (
 		<main>
-			<Dashboard />
+			<Navbar />
+			<SensorBoxContainer />
+			<ControlPanel />
 		</main>
 	);
 }

control-station/src/components/ControlPanel/ControlPanel.tsx

@@ -0,0 +1,11 @@
+import "./style.css"
+export default function ControlPanel(){
+    return(
+        <div id="controlpanel">
+            <button id="start" className="button">Start</button>
+            <button id="stop" className="button">Stop</button>
+            <button id="force" className="button">Force Stop</button>
+            <button id="load" className="button">Load</button>
+        </div>
+    )
+}

control-station/src/components/ControlPanel/style.css

@@ -0,0 +1,30 @@
+#controlpanel{
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background-color: black;
+    height: 9%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+.button{
+    height: 60px;
+    width: 200px;
+    border-radius: 10px;
+    font-size: 1.5rem;
+    color: white;
+}
+#start{
+    background-color: rgb(35, 128, 30);
+}
+#stop{
+    background-color: rgb(235, 63, 51);
+}
+#force{
+    background-color: rgb(149, 46, 46);
+}
+#load{
+    background-color: rgb(0, 101, 188);
+}

control-station/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,9 @@
+import "./style.css"
+import HX from "../../../public/Data/Images/HX Logo.png"
+export default function Navbar(){
+    return(
+        <header id="navbar">
+            <img src={HX} style={{height:"60px"}}/>
+            HyperXite</header>
+    )
+}

control-station/src/components/Navbar/style.css

@@ -0,0 +1,11 @@
+#navbar{
+    height: 10%;
+    font-size: 2rem;
+    background-color: black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: 700;
+
+}

control-station/src/components/SensorBoxes/Camera&Console/CCcontainer.tsx

@@ -0,0 +1,11 @@
+import "./style.css"
+import Camera from "./Camera";
+import Console from "./Console";
+export default function CCcontainer(){
+    return(
+        <div id="CCcontainer">
+            <Camera />
+            <Console />
+        </div>
+    )
+}

control-station/src/components/SensorBoxes/Camera&Console/Camera.tsx

@@ -0,0 +1,8 @@
+import "./style.css"
+export default function Camera(){
+    return(
+        <div id="camera">
+
+        </div>
+    )
+}

control-station/src/components/SensorBoxes/Camera&Console/Console.tsx

@@ -0,0 +1,15 @@
+export default function Console(){
+    return(
+        <div id="console">
+        <h1>Console</h1>
+        <ul className="console-list">
+            <li className="console-list-item">Start Sent</li>
+            <li className="console-list-item">Stop Sent</li>
+            <li className="console-list-item">Load Sent</li>
+            <li className="console-list-item">Start Sent</li>
+            <li className="console-list-item">Force Stop Sent</li>
+            <li className="console-list-item">Load Sent</li>
+        </ul>
+    </div>
+    )
+}

control-station/src/components/SensorBoxes/Camera&Console/style.css

@@ -0,0 +1,39 @@
+#camera{
+    height:45%;
+    background-color: rgb(143, 143, 143);
+    border-radius: 20px;
+    margin:1% 1% 2% 1%;
+    border: 1px solid black;
+}
+#CCcontainer{
+    width: 50vw;
+}
+
+#console{
+    height: 50%;
+    background-color: rgb(255, 255, 255);
+    border-radius: 20px;
+    margin: 2% 1% 1% 1%;
+    border: 1px solid black;
+}
+
+#console > h1{
+    text-align: center;
+    font-size: 2.6rem;
+}
+
+.console-list{
+    margin: 0;
+    padding: 0;
+}
+
+.console-list-item{
+    border-bottom: 0.5px solid rgb(170, 170, 170);
+    text-decoration: none;
+    list-style-type: none;
+    font-size: 0.9rem;
+    padding-left: 4%;
+    margin-top: 1%;
+    font-family: 'Ubuntu Mono', monospace;
+
+}

control-station/src/components/SensorBoxes/SensorBoxContainer.tsx

@@ -0,0 +1,11 @@
+import CCcontainer from "./Camera&Console/CCcontainer"
+import SensorContainer from "./Sensors/SensorsContainer"
+import "./style.css"
+export default function SensorBoxContainer(){
+    return(
+        <div id="sensorboxcontainer">
+            <SensorContainer />
+            <CCcontainer />
+        </div>
+    )
+}

control-station/src/components/SensorBoxes/Sensors/SensorBox.tsx

@@ -0,0 +1,9 @@
+import "./style.css"
+export default function SensorBox(){
+    return(
+        <div id="sensorbox">
+            <h1 style={{textAlign:"center",height:"10%"}}>Title</h1>
+            <h1 id="sensor-value">0</h1>
+        </div>
+    )
+}

control-station/src/components/SensorBoxes/Sensors/SensorsContainer.tsx

@@ -0,0 +1,14 @@
+import SensorBox from "./SensorBox";
+
+export default function SensorContainer(){
+    return(
+        <div id="SensorContainer">
+            <SensorBox />
+            <SensorBox />
+            <SensorBox />
+            <SensorBox />
+            <SensorBox />
+            <SensorBox />
+        </div>
+    )
+}

control-station/src/components/SensorBoxes/Sensors/style.css

@@ -0,0 +1,25 @@
+#sensorbox{
+    height: 25vh;
+    width: 40%;
+    border-radius: 15px;
+    margin-top: 1%;
+    margin-bottom: 1%;
+    background: #e0e0e0;
+}
+#SensorContainer{
+    width: 65vw;
+    height: 80%;
+    height: auto;
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    flex-basis: 50%;
+}
+
+#sensor-value{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 90%;
+    font-size: 3rem;
+}

control-station/src/components/SensorBoxes/style.css

@@ -0,0 +1,4 @@
+#sensorboxcontainer{
+    display: flex;
+    flex-grow: 1;
+}

control-station/src/index.css

@@ -1,15 +1,5 @@
-:root {
-	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-	line-height: 1.5;
-	font-weight: 400;
-
-	color-scheme: light dark;
-	color: rgba(255, 255, 255, 0.87);
-	background-color: #242424;
-
-	font-synthesis: none;
-	text-rendering: optimizeLegibility;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-text-size-adjust: 100%;
-}
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+*{
+	margin: 0 0 0 0;
+	font-family: 'Roboto', sans-serif;
+}