evanharr · leonardodg01 · Jul 31, 2022 · Jul 31, 2022 · Jul 31, 2022 · Jul 31, 2022
diff --git a/README.md b/README.md
@@ -1 +1,2 @@
-# SuperSimple3444
+# SuperSimple3444
+https://evanharr.github.io/SuperSimple3444/#/SuperSimple3444
diff --git a/public/index.html b/public/index.html
@@ -25,6 +25,26 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Car Website</title>
+    <style>
+      body {
+
+        background-color: #211D1D;
+        color: black;
+      }
+      .dark-mode {
+        background-color: #211D1D;
+        color: white;
+      }
+      .light-mode {
+        background-color: white;
+        color: black;
+      }
+      .center {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    </style>
     <script type="text/javascript">
       // Single Page Apps for GitHub Pages
       // MIT License
@@ -49,8 +69,13 @@
     </script>
     <!-- End Single Page Apps for GitHub Pages -->
   </head>
-  <body style="background-color: #211D1D">
-
+  <div class="center">
+    <button class ='dark-mode' onclick="darkMode()">Darkmode</button>
+    <button class ='dark-mode' onclick="lightMode()">LightMode</button>
+    </div>
+  <body >
+
+    <!-- style="background-color: #211D1D" -->
     <div id="root"></div>
     <div id="portal"></div>
     <!--
@@ -63,5 +88,21 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+
+    <script>
+      function darkMode() {
+        var element = document.body;
+        var content = document.getElementById("DarkModetext");
+        element.className = "dark-mode";
+        content.innerText = "Dark Mode is ON";
+      }
+      function lightMode() {
+        var element = document.body;
+        var content = document.getElementById("DarkModetext");
+        element.className = "light-mode";
+        content.innerText = "Dark Mode is OFF";
+      }
+    </script>
   </body>
+
 </html>
diff --git a/src/3d/LandCruiser.glb b/src/3d/LandCruiser.glb
diff --git a/src/Account.jsx b/src/Account.jsx
@@ -108,7 +108,7 @@ function Account (){
             sx={{
                 flexGrow: '1',
                 position: 'absolute',
-                top: '80%',
+                top: '55%',
                 left: '50%',
                 transform: 'translate(-50%, -50%)',
                 width: 600,
@@ -124,49 +124,47 @@ function Account (){
                 alignItems='center'
                 >
 
-                <Grid item paddingTop='20px'>
-                   <Typography variant="h4" color='white'>Account Information</Typography>
+                <Grid item paddingTop='10px'>
+                   <Typography variant="h3" color='white'>Account Information</Typography>  
+                </Grid>
+                <Grid item paddingTop='10px'>
+                   <Typography variant="h6" color='white'>Click the Field you wish to edit</Typography>  
                 </Grid>
-
 
                 <Grid paddingTop='10px'>
-                    <StyledPaper sx={{p: '10px'}} variant='outlined'>
-                           <Stack direction="row" spacing={30} alignItems='center' justifyContent='flex-start'>
-                           <p>Name:<br></br>
+                    <StyledPaper sx={{p: '10px'}} variant='outlined'onClick={() => {setEditNameOpen(true)}}>
+
+                           <p >Name:<br></br>
                            {firstName} &nbsp;
                            {lastName}
 
                            </p>
 
 
-
-                            <Button variant='contained' size='small' style={{background:"#00853E"}}  onClick={() => {setEditNameOpen(true)}}>Edit</Button>
 
-                            </Stack> 
+
                     </StyledPaper>
-                    <StyledPaper sx={{p: '10px'}} variant='outlined'>
-                           <Stack direction="row" spacing={30} alignItems='center'justifyContent='flex-start'>
+                    <StyledPaper sx={{p: '10px'}} variant='outlined' onClick={() => {setEditEmailOpen(true)}}>
+
                             <p>Email Address:<br></br>{email}</p>
-                            <Button variant='contained' size='small' style={{background:"#00853E"}} onClick={() => {setEditEmailOpen(true)}}>Edit</Button>
-                            </Stack> 
+
+
                     </StyledPaper>
-                    <StyledPaper sx={{p: '10px'}} variant='outlined'>
-                           <Stack direction="row" spacing={30} alignItems='center'justifyContent='flex-start'>
-                            <p>Address<br></br>{address}</p>
-                            <Button variant='contained' size='small' style={{background:"#00853E"}}  onClick={() => {setEditAddressOpen(true)}}>Edit</Button>
-                            </Stack> 
+                    <StyledPaper sx={{p: '10px'}} variant='outlined' onClick={() => {setEditAddressOpen(true)}}>
+
+                            <p>Address:<br></br>{address}</p>
+
                     </StyledPaper>
-                    <StyledPaper sx={{p: '10px'}} variant='outlined'>
-                           <Stack direction="row" spacing={30} alignItems='center'justifyContent='flex-start'>
-                            <p>Date of Birth<br></br>{DOB}</p>
-                            <Button variant='contained' size='small' style={{background:"#00853E"}} onClick={() => {setEditDOBOpen(true)}}>Edit</Button>
-                            </Stack> 
+                    <StyledPaper sx={{p: '10px'}} variant='outlined' onClick={() => {setEditDOBOpen(true)}}>
+
+                            <p>Date of Birth:<br></br>{DOB}</p>
+
                     </StyledPaper>
-                    <StyledPaper sx={{p: '10px'}} variant='outlined'>
+                    <StyledPaper sx={{p: '10px'}} variant='outlined'onClick={() => {setEditPasswordOpen(true)}}>
                            <Stack direction="row" spacing={30} alignItems='center'justifyContent='flex-start'>
                             <p>Password:<br></br>******</p>
-                            <Button variant='contained' size='small' style={{background:"#00853E"}} onClick={() => {setEditPasswordOpen(true)}}>Edit</Button>
-                            </Stack> 
+                            <Button></Button>
+                            </Stack>
                     </StyledPaper>
 
                 </Grid>
@@ -196,15 +194,15 @@ function Account (){
 
                 )}
                 {!payInfoExists && (
-                    <Button style={{color:'#00853E'}} onClick={() => {setAddPaymentOpen(true)}}>Add Payment Information</Button>
+                    <Button style={{color:'white'}} onClick={() => {setAddPaymentOpen(true)}}>Add Payment Information</Button>
                 )}
 
 
 
                 <Grid item paddingTop='20px'>
                    <Typography variant="h4" color='white'>Vehicle Configuration</Typography>
                    </Grid>
-                   <Button style={{color:'#00853E'}} onClick={() => {navigateToSavedCarConfig()}}>View Saved Vehicle Configurations</Button>
+                   <Button style={{color:'white'}} onClick={() => {navigateToSavedCarConfig()}}>View Saved Vehicle Configurations</Button>
 
 
 

diff --git a/src/AccountEdit.jsx b/src/AccountEdit.jsx
@@ -71,7 +71,7 @@ import {database} from "./firebase"
             display: 'flex',
             flexDirection: 'column',
             alignItems:"center"}}>
-            <h1 className='registerInfo'>Register</h1>
+            <h1 className='boldText'>Register</h1>
 
             <Form onSubmit={handleSubmit}>
           <Form.Group id="email">

diff --git a/src/App.js b/src/App.js
@@ -9,11 +9,13 @@ import Cart from './Cart'
 import Checkout from './Checkout'
 import CarConfig from './CarConfig'
 import SavedCarConfig from './SavedCarConfig'
+import LandCruiserConfig from './LandCruiserConfig'
 import { AuthProvider } from "./AuthContext"
 
 import Register from "./register2"
 function App() {
   return(
+
   <div>
     <HashRouter>
     <AuthProvider>
@@ -28,7 +30,7 @@ function App() {
           <Route path="/car-configuration" element={<CarConfig />}></Route>
           <Route path="/register2" element={<Register />}></Route>
           <Route path="/account-info/SavedCarConfig" element={<SavedCarConfig />}></Route>
-
+          <Route path="/LandCruiserConfig" element={<LandCruiserConfig />}></Route>
 
       </Routes>
 

diff --git a/src/CarConfig.jsx b/src/CarConfig.jsx
@@ -13,28 +13,32 @@ import { ThemeProvider } from '@mui/material/styles';
 import { Canvas } from "@react-three/fiber";
 import { Suspense } from "react";
 import { OrbitControls } from "@react-three/drei";
-import Model  from './components/Model.jsx'
+import Model  from './components/Mazda.jsx'
+import Toyota from './components/LandCruiser.jsx'
 
 import {getDatabase, set, ref , update, onValue, get,child, push} from "firebase/database";
 import {database} from "./firebase"
 import { useAuth } from "./AuthContext.js"
 import { DstAlphaFactor } from 'three';
+import { isValidFormat } from '@firebase/util';
 
-
+//Change <Model> to <Toyota> to change to other model
 function Scene(props) {
   return (
     <>
       <ambientLight intensity={0.1} />
       <directionalLight color={"white"}/>
       <OrbitControls maxDistance={18} minDistance={13}/>
       <Model color={props.color} wheelColor={props.wheelColor}/>
+
     </>
   )
 }
 
 export default function CarConfig()
 {
 
+
   const {getCurrentUser} = useAuth()
   const user = getCurrentUser()
 
@@ -91,8 +95,6 @@ export default function CarConfig()
 
 
     }
-
-
     return(
     <Grid container
     direction="row"
@@ -211,6 +213,7 @@ export default function CarConfig()
             </StyledAccordion>
 
             <ThemeProvider theme={defaultButton}>
+
               <Button variant="contained" sx={{width: "100%", marginTop: 1}} onClick= {() =>{handleSubmitConfig()}}>
                 Save Configuration
               </Button> 
@@ -225,4 +228,3 @@ export default function CarConfig()
     </Grid>
     )
 }
-
diff --git a/src/Cart.jsx b/src/Cart.jsx
@@ -5,8 +5,9 @@ import AccordionDetails from '@mui/material/AccordionDetails';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import TrimPic from './Images/Trim.png'
-import { Button, Link } from "@mui/material";
+import { Button } from "@mui/material";
 import { StyledTypography } from "./Styles/MUIStyle";
+import { Link, useNavigate } from 'react-router-dom'
 
 
 
@@ -104,7 +105,7 @@ function Cart (){
                 alignItems:'center',
 
             }} >
-                <Button variant ='contained' style={{background:'#00853E', color:'white' }} href='/checkout'>Checkout</Button>
+                <Link style={{color: 'white'}} to="/checkout"><Button variant ='contained' style={{background:'#00853E', color:'white' }}>Checkout</Button></Link>
                </Accordion>
         </div>
     )

diff --git a/src/EditAddress.jsx b/src/EditAddress.jsx
@@ -52,7 +52,7 @@ import {database} from "./firebase"
             display: 'flex',
             flexDirection: 'column',
             alignItems:"center"}}>
-            <h1 className='Edit'>Edit Address</h1>
+            <h1 className='boldText'>Edit Address</h1>
 
             <Form onSubmit={handleSubmit}>
           <Form.Group id="newAddress">

diff --git a/src/EditDOB.jsx b/src/EditDOB.jsx
@@ -52,7 +52,7 @@ import {database} from "./firebase"
             display: 'flex',
             flexDirection: 'column',
             alignItems:"center"}}>
-            <h1 className='Edit'>Edit Name</h1>
+            <h1 className='boldText'>Edit Name</h1>
 
             <Form onSubmit={handleSubmit}>
           <Form.Group id="newDOB">

diff --git a/src/EditEmail.jsx b/src/EditEmail.jsx
@@ -51,7 +51,7 @@ import {database} from "./firebase"
             display: 'flex',
             flexDirection: 'column',
             alignItems:"center"}}>
-            <h1 className='Edit'>Edit Name</h1>
+            <h1 className='boldText'>Edit Name</h1>
 
             <Form onSubmit={handleSubmit}>
           <Form.Group id="newEmail">

diff --git a/src/EditName.jsx b/src/EditName.jsx
@@ -53,7 +53,7 @@ import {database} from "./firebase"
             display: 'flex',
             flexDirection: 'column',
             alignItems:"center"}}>
-            <h1 className='Edit'>Edit Name</h1>
+            <h1 className='boldText'>Edit Name</h1>
 
             <Form onSubmit={handleSubmit}>
           <Form.Group id="newFirstName">

diff --git a/src/EditPassword.jsx b/src/EditPassword.jsx
@@ -67,7 +67,7 @@ import {database} from "./firebase"
             display: 'flex',
             flexDirection: 'column',
             alignItems:"center"}}>
-            <h1 className='Edit'>Edit Name</h1>
+            <h1 className='boldText'>Edit Name</h1>
 
             <Form onSubmit={handleSubmit}>
 

diff --git a/src/EditPayment.jsx b/src/EditPayment.jsx
@@ -57,7 +57,7 @@ import {database} from "./firebase"
             display: 'flex',
             flexDirection: 'column',
             alignItems:"center"}}>
-            <h1 className='Edit'>Edit Payment</h1>
+            <h1 className='boldText'>Edit Payment</h1>
 
             <Form onSubmit={handleSubmit}>
           <Form.Group id="newCardNumber">

diff --git a/src/Home.jsx b/src/Home.jsx
@@ -1,12 +1,33 @@
 import {React,} from 'react';
 import Background from './Images/Background.png'
+import {Box, Button} from '@mui/material';
+import { Link } from 'react-router-dom';
+
+import { ThemeProvider } from '@mui/material/styles';
+import { defaultButton } from './Styles/MUIStyle';
+import './Styles/style.css'
 
 function Home(){
 
     return(
 
-    <div style={{background: `url(${Background})`, height: '90vh', backgroundSize:'cover'}}>
-
+    <div style={{background: `url(${Background})`, height: '90vh', backgroundSize:'cover'}} alt = 'Blue toyota camry driving on road in desert area'>
+        <Box
+        sx={{backgroundColor: '#30303090', position: 'absolute',
+        width: '20%', height: '20%',
+        left: '10%', top:'15%'}}
+        >
+            <h1 className='boldText' style={{left:'15%', position: 'absolute'}}>
+                Brand new car
+            </h1>
+            <ThemeProvider theme={defaultButton}>
+              <Link style={{color: 'white', width: "100%", top:'60%', left:'15%', position: 'absolute'}} to="/car-configuration">
+                <Button  variant="contained" sx={{width: "50%", fontSize: 16, fontWeight: '700', textTransform: 'none',}}>
+                  Build Now
+                </Button>
+              </Link>
+            </ThemeProvider>
+        </Box>
     </div>
     )
 }

diff --git a/src/Images/LandCruiserTrim.png b/src/Images/LandCruiserTrim.png
diff --git a/src/Images/Trim.png b/src/Images/Trim.png
diff --git a/src/Images/carIcon.jsx b/src/Images/carIcon.jsx
@@ -3,7 +3,7 @@ import carIconLogo from './carIconLogo.svg'
 
 function carIcon(){
     return(
-        <img src={carIconLogo} width='60px' height='47px'/>
+        <img src={carIconLogo} width='60px' height='47px' alt = "white outline of car and carkey"/>
     )
 }
 export default carIcon