Add preliminary control panel design

control-station/src/App.tsx

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

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

@@ -0,0 +1,20 @@
+import "./controlpanel.css";
+
+export default function ControlPanel() {
+	return (
+		<div className="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/controlpanel.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 {
+	padding: 10px 10px 10px 10px;
+	min-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,10 @@
+import "./navbar.css";
+import HX from "@/data/images/HX Logo.svg";
+export default function Navbar() {
+	return (
+		<header className="navbar">
+			<img alt="HX logo" src={HX} style={{ height: "60px" }} />
+			HyperXite
+		</header>
+	);
+}

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

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

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

@@ -0,0 +1,4 @@
+import "./sensorboxct.css";
+export default function Camera() {
+	return <div className="camera"></div>;
+}

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

@@ -0,0 +1,15 @@
+import "./sensorboxct.css";
+
+export default function Console() {
+	return (
+		<div className="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">Force Stop Sent</li>
+			</ul>
+		</div>
+	);
+}

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

@@ -0,0 +1,15 @@
+import SensorContainer from "./Sensors/SensorsContainer";
+import "./sensorboxct.css";
+import Camera from "./Camera";
+import Console from "./Console";
+export default function SensorBoxContainer() {
+	return (
+		<div className="sensorboxcontainer">
+			<SensorContainer />
+			<div style={{ width: "50%" }}>
+				<Camera />
+				<Console />
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,9 @@
+import "./sensorbox.css";
+export default function SensorBox() {
+	return (
+		<div className="sensorbox">
+			<h1 style={{ textAlign: "center", height: "10%" }}>Title</h1>
+			<h1 className="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 className="SensorContainer">
+			<SensorBox />
+			<SensorBox />
+			<SensorBox />
+			<SensorBox />
+			<SensorBox />
+			<SensorBox />
+		</div>
+	);
+}

control-station/src/components/SensorBoxes/Sensors/sensorbox.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/sensorboxct.css

@@ -0,0 +1,44 @@
+.sensorboxcontainer {
+	display: flex;
+	flex-grow: 1;
+}
+.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;
+	overflow-y: auto;
+}
+
+.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;
+	position: relative;
+}

control-station/src/components/index.ts

@@ -1 +1 @@
-export { default as Status } from "./Status/Status";
+export { default as Status } from "./status/Status";

control-station/src/index.css

@@ -1,15 +1,7 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
 :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%;
+	font-family: "Roboto", sans-serif;
+}
+body {
+	margin: 0 0 0 0;
 }

control-station/vite.config.ts

@@ -7,6 +7,7 @@ export default defineConfig({
 	resolve: {
 		alias: {
 			"@/": "/src/",
+			"$/":"/public/"
 		},
 	},
 });