Add ScoutNav.css and ScoutNav.jsx

package.json

@@ -17,6 +17,7 @@
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
     "router-dom": "^2.2.11",
+    "src": "^1.1.2",
     "web-vitals": "^2.1.4"
   },
   "homepage": "https://excaliburfrc.github.io/ExcaliScout",

src/App.js

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Scouting from './Pages/Scouting/Scouting.jsx';
 import Login from './Pages/Login/Login.jsx';
 import ScoutNav from './Pages/Nav/ScoutNav.jsx';
+import PitScouting from './Pages/Scouting/Pit/PitScouting';
 
 
 
@@ -13,7 +14,7 @@ function App() {
                 <Route path="/Scouting" element={<Scouting />} />
                 <Route path="/Login" element={<Login />} />
                 <Route path="/Scouting/ScoutNav" element={<ScoutNav />} />
-
+                <Route path="/Scouting/PitScouting" element={<PitScouting />} />
             </Routes>
         </Router>
     );

src/Pages/Nav/ScoutNav.css

@@ -1,47 +0,0 @@
-body {
-    font-family: "Assistant SemiBold", serif;
-}
-
-label, h3 {
-    font-family: "Copperplate Gothic Light", serif;
-    color: #d4af37;
-}
-
-BUtton {
-    font-size: 24px;
-    width: 80%;
-    height: 100px;
-    background: url('https://www.firstinspires.org/sites/default/files/uploads/hero_headers/header-image_1.jpg');
-    background-size: cover;
-    background-position: center;
-    color: white;
-    font-size: 1.5em;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-}
-
-
-.button-container {
-    max-width: 780px;
-    width: 100%;
-    margin: 0 auto;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    padding: 0 10px;
-}
-
-.resizable-button {
-    width: 30%;
-    max-width: 250px;
-    height: auto;
-    font-size: larger;
-    margin: 10px;
-    box-sizing: border-box;
-}
-
-.Autonomus {
-    width: 80px;
-    height: 40px;
-}

src/Pages/Nav/ScoutNav.jsx

@@ -8,22 +8,27 @@ function ScoutNav() {
         <div>
             <Navbar />
             <br/>
-            {LoginForm()}
+            {ScoutNavigate()}
         </div>
     );
 }
 
-function LoginForm() {
+function ScoutNavigate() {
     return (
         <div>
             <h2>Select your Scouting Type:</h2>
-
             <br/>
-            <button style={{ background: 'url(https://www.firstinspires.org/sites/default/files/uploads/hero_headers/header-image_1.jpg)' }}>
-                Regular Scouting
-            </button>
+            <button onClick={handleClickScout}>Regular Scout</button>
+            <br/>
+            <button>Pit Scout</button>
+            <br/>
+            <button>Super Scout</button>
         </div>
     );
 }
 
+const handleClickScout = () => {
+    window.location.href = '/Scouting';
+};
+
 export default ScoutNav;

src/Pages/Scouting/Game/Teleop.jsx

@@ -87,12 +87,7 @@ function TeleField({ formData, setFormData }) {
                 Change Mode
             </button>
 
-            <button onClick={() => {
-                const csvData = exportCSV();
-                console.log(csvData);
-            }} style={{ position: 'absolute', top: '50px', left: '10px', zIndex: '10' }}>
-                Export CSV
-            </button>
+
 
         </div>
     );

src/Pages/Scouting/Pit/PitScouting.css

@@ -0,0 +1,7 @@
+input, label {
+    margin: 5px; /* Adjust margin as needed */
+    display: block;
+    text-align: center;
+    font-weight: bold;
+    box-sizing: border-box; /* Include padding and border in element's total width and height */
+}

src/Pages/Scouting/Pit/PitScouting.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Navbar from "C:/code/my-app/src/Pages/Navbar/Navbar.jsx";
+import "./PitScouting.css";
+
+function PitScouting() {
+    return (
+        <div>
+            <Navbar />
+            <br/>
+            {ScoutNavigate()}
+        </div>
+    );
+}
+
+function ScoutNavigate() {
+    return (
+        <div>
+            <label htmlFor="Sname">Name:</label><br/>
+            <input type="text" id="Sname" name="Name"/><br/>
+            <br/>
+        </div>
+    );
+}
+
+const handleClickScout = () => {
+    window.location.href = '/Scouting';
+};
+
+export default PitScouting;

src/Pages/Scouting/Scouting.jsx

@@ -3,7 +3,6 @@ import QRCode from "qrcode.react";
 import "./Scouting.css";
 import Navbar from "../Navbar/Navbar";
 import TeleField from "./Game/Teleop";
-import Papa from "papaparse";
 
 function ScoutingForm() {
     const [formData, setFormData] = useState({