login

cometvisor/src/GlassCard.js

@@ -0,0 +1,22 @@
+import { useTheme } from "@emotion/react";
+import { Box, BoxProps, createTheme, ThemeProvider } from "@mui/material";
+
+const theme = createTheme({
+    glass: {
+      backgroundColor: "rgba(255, 255, 255, 0.3)",
+      backgroundImage: "linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0))",
+      backdropFilter: `blur(7px)`,
+      boxShadow: "10px 10px 10px rgba(30, 30, 30, 0.1)",
+      borderLeft: "solid 1px rgba(255, 255, 255, 0.3)",
+      borderYop: "solid 1px rgba(255, 255, 255, 0.8)",
+    },
+});
+
+export function GlassCard() {
+  const classes = useTheme()();
+  return (
+    <Box
+      className={theme.glass}
+    />
+  );
+}

cometvisor/src/MainPages/Login.js

@@ -0,0 +1,104 @@
+import { Box, TextField, Drawer, Button, CssBaseline, Link, Paper, Grid, Typography } from '@mui/material';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import * as React from 'react';
+import "./login.css";
+import { GlassCard } from "../GlassCard";
+
+const theme = createTheme();
+
+const Login = (props) => {
+    return (
+        <ThemeProvider theme={theme}>
+            <Drawer
+                variant="permanent"
+                anchor="left"
+            >
+                <Grid container component="main" sx={{ height: '100vh' }}>
+                    <Grid item
+                        xs={false}
+                        sm={4}
+                        md={7}
+                        sx={{
+                            backgroundSize: 'cover',
+                            backgroundPosition: 'center',
+                        }}
+                    >
+                        <Grid item
+                            style={{
+                                width: "100vw",
+                                height: "13vh",
+                                display: "flex",
+                                flexDirection: "row",
+                            }}
+                        >
+                            <img className="photo" src={process.env.PUBLIC_URL + "utdfintechlogo1.png"} />
+                            <label className="logoText">
+                                Comet
+                                <br />
+                                Visor
+                            </label>
+                        </Grid>
+                        <img className="welcomePhoto" src={process.env.PUBLIC_URL + "logingraphicblue1.png"} />
+                    </Grid>
+                    <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
+                        <Box className="infoCard"> 
+                            <Typography variant="h5" className="loginHeader">
+                                Welcome Back,
+                            </Typography>
+                            <Typography className="lowerLoginHeader">
+                                Sign in
+                            </Typography>
+                            <Box component="form" noValidate sx={{ mt: 1 }}>
+                                <TextField
+                                    className="textField"
+                                    margin="normal"
+                                    required
+                                    id="email"
+                                    label="EMAIL ADDRESS"
+                                    name="email"
+                                    autoComplete="email"
+                                    autoFocus
+                                />
+                                <br />
+                                <TextField
+                                    className="textField"
+                                    margin="normal"
+                                    required
+                                    name="password"
+                                    label="PASSWORD"
+                                    type="password"
+                                    id="password"
+                                    autoComplete="current-password"
+                                />
+                                <br />
+                                <Button
+                                    type="submit"
+                                    variant="contained"
+                                    className="loginButton"
+                                    sx={{ mt: 3, mb: 2 }}
+                                >
+                                    Log In
+                                </Button>
+                                <Grid item className="noAcc">
+                                    <label> Don't have an account? </label>
+                                    <Link href="#">
+                                        {"Sign Up"}
+                                    </Link>
+                                </Grid>
+                                <Grid item className="noAcc">
+                                    <Grid item xs>
+                                        <Link href="#">
+                                            Forgot your password?
+                                        </Link>
+                                    </Grid>
+                                </Grid>
+
+                            </Box>
+                        </Box>
+                    </Grid>
+                </Grid>
+            </Drawer>
+        </ThemeProvider>
+    );
+}
+export default Login;

cometvisor/src/MainPages/index.js

@@ -9,6 +9,7 @@ import Homepage from "./Homepage";
 import Informatives from "./Informatives";
 import Research from "./Research";
 import Settings from "./Settings";
+import Login from "./Login";
 import ProfileBar from "./Components/profileBar";
 
 const theme = createTheme({
@@ -162,7 +163,11 @@ export default() => {
               }}
             >
               <div className="button">
-                <Typography className="btnText" sx={{ color: pink[500] }}>
+                <Typography 
+                className="btnText" 
+                component={Link}
+                to="/login"
+                sx={{ color: pink[500], textDecoration: 'none' }}>
                   Sign out
                 </Typography>
                 <div className="btnTwo">
@@ -183,8 +188,9 @@ export default() => {
             <Route path="/settings" component={Settings} />
             <Route path="/research" component={Research} />
             <Route path="/informatives" component={Informatives} />
+            <Route path="/login" component={Login} />
           </Switch>
         </main>
       </div>
     );
-}
+  }

cometvisor/src/MainPages/login.css

@@ -0,0 +1,76 @@
+.photo {
+    height: 100px;
+    width: 100px;
+    padding-left: 20px;
+    padding-top: 20px;
+}
+
+.logoText {
+    padding-top: 33px;
+    font-family: Avenir;
+    font-style: normal;
+    font-weight: 800;
+    font-size: 36px;
+    text-align:left;
+    line-height: 95.6%;
+    /* or 34px */
+
+
+    color: #000000;
+}
+
+.welcomePhoto {
+    padding-top: 50px;
+    padding-left: 10px;
+}
+
+/* Info Card */
+.infoCard {
+    height: 100%;
+    background: linear-gradient(152.97deg, rgba(112, 112, 112, 0.2) 0%, rgba(181, 181, 181, 0) 100%);
+    backdrop-filter: blur(42px);
+    /* Note: backdrop-filter has minimal browser support */
+}
+
+
+.loginHeader {
+    padding-top: 300px;
+
+    font-family: Avenir;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 24px;
+
+    color: #000000;
+}
+
+.lowerLoginHeader {
+    font-family: Avenir;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 16px;
+
+    color: #949494;
+}
+
+.textField {
+    width: 313px;
+    height: 54px;
+}
+
+.loginButton {
+    background: linear-gradient(277.48deg, #00827F -4.46%, #2596FF 125.88%);
+    border-radius: 10px;
+    width : 20%;
+}
+
+.noAcc {
+    font-family: Avenir;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 16px;
+    /* or 20px */
+
+
+    color: #949494;
+}