Merge pull request #2 from software-students-spring2024/frontend

created basic landing page and login page without functionality

frontend/package.json

@@ -12,6 +12,7 @@
     "framer-motion": "^11.1.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.1.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

frontend/public/index.html

@@ -10,11 +10,6 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

frontend/src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

frontend/src/App.js

@@ -3,10 +3,11 @@ import "./App.css";
 
 import { ChakraProvider } from "@chakra-ui/react";
 import Home from "./Pages/Home/Home";
+import { theme } from "./Theme/theme";
 
 function App() {
   return (
-    <ChakraProvider>
+    <ChakraProvider theme={theme}>
       <Home />
     </ChakraProvider>
   );

frontend/src/Components/FadeUp.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+const FadeInUpBox = ({ children, delay }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 25 }} // start state
+      animate={{ opacity: 1, y: 0 }} // end state
+      transition={{
+        duration: 1.2,
+        delay: delay,
+        ease: [0.6, -0.05, 0.01, 0.99],
+      }}
+      exit={{
+        opacity: 0,
+        y: -10,
+        transition: { duration: 0.8, ease: [0.6, -0.05, 0.01, 0.99] },
+      }}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default FadeInUpBox;

frontend/src/Pages/Home/Home.js

@@ -1,9 +1,28 @@
-import { VStack, Text } from "@chakra-ui/react";
+import { useState } from "react";
+import { VStack, Center } from "@chakra-ui/react";
+
+// import components
+import Landing from "./Landing";
+import Login from "./Login";
+import { AnimatePresence } from "framer-motion";
 
 export default function Home() {
+  /**
+   * stages:
+   * "" - empty string is the home landing page
+   * "login" - login page
+   * "signup" - signup page
+   */
+  const [stage, setStage] = useState("");
+
   return (
-    <VStack>
-      <Text>hi</Text>
+    <VStack bgGradient="linear(to-r, #F5F5DC, #D8CAB8)" height="100vh" p={50}>
+      <Center height="100%">
+        <AnimatePresence>
+          {stage == "" && <Landing setStage={setStage} key="landing" />}
+          {stage == "login" && <Login setStage={setStage} key="login" />}
+        </AnimatePresence>
+      </Center>
     </VStack>
   );
 }

frontend/src/Pages/Home/Landing.js

@@ -0,0 +1,84 @@
+import { VStack, Heading, Text, Button, Icon, HStack } from "@chakra-ui/react";
+import { FiSmile } from "react-icons/fi";
+import FadeInUpBox from "../../Components/FadeUp";
+
+const Landing = ({ setStage }) => {
+  const delay = 0.5;
+
+  return (
+    <VStack position="absolute">
+      <FadeInUpBox delay={delay}>
+        <Heading fontSize={64} color="brand.700" fontWeight="900">
+          met guessr
+        </Heading>
+      </FadeInUpBox>
+
+      <FadeInUpBox delay={delay + 0.1}>
+        <Text
+          fontSize="lg"
+          color="brand.600"
+          width={400}
+          align="center"
+          mb={10}
+          mt={5}
+          fontWeight="500"
+        >
+          Guessing game for art pieces in the Metropolitan Museum of Art!
+        </Text>
+      </FadeInUpBox>
+
+      <FadeInUpBox delay={delay + 0.2}>
+        <Button
+          borderRadius={25}
+          size="lg"
+          colorScheme="brand"
+          rightIcon={<Icon as={FiSmile} />}
+          _hover={{
+            shadow: "lg",
+            transform: "translateY(-5px)",
+            transition: "0.2s",
+          }}
+          onClick={() => {
+            setStage("login");
+          }}
+        >
+          Play as Guest
+        </Button>
+      </FadeInUpBox>
+
+      <FadeInUpBox delay={delay + 0.3}>
+        <HStack mt={10}>
+          <Button
+            borderRadius={20}
+            colorScheme="brand"
+            _hover={{
+              shadow: "lg",
+              transform: "translateY(-5px)",
+              transition: "0.2s",
+            }}
+            onClick={() => {
+              setStage("login");
+            }}
+          >
+            Login
+          </Button>
+          <Button
+            borderRadius={20}
+            color="brand.700"
+            variant="text"
+            _hover={{
+              color: "brand.500",
+            }}
+            onClick={() => {
+              setStage("login");
+            }}
+          >
+            Sign Up
+          </Button>
+        </HStack>
+      </FadeInUpBox>
+    </VStack>
+  );
+};
+
+export default Landing;

frontend/src/Pages/Home/Login.js

@@ -0,0 +1,134 @@
+import { useState } from "react";
+import {
+  VStack,
+  Input,
+  Icon,
+  Button,
+  HStack,
+  InputGroup,
+  InputLeftElement,
+  Text,
+} from "@chakra-ui/react";
+import { FiArrowLeft, FiArrowRight, FiLock, FiUser } from "react-icons/fi";
+import FadeInUpBox from "../../Components/FadeUp";
+import { AnimatePresence } from "framer-motion";
+
+const Login = ({ setStage }) => {
+  const delay = 0.5;
+
+  const [error, setError] = useState(""); // error for input handling
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const loginValidated = () => {
+    if (username == "") {
+      setError("Please enter a username!");
+      return false;
+    } else if (password == "") {
+      setError("Please enter a password!");
+      return false;
+    }
+    return true;
+  };
+
+  // handle login
+  const handleLogin = () => {
+    // handle error
+    const isValidLogin = loginValidated();
+    if (!isValidLogin) return;
+
+    alert("do something");
+  };
+
+  return (
+    <VStack position="absolute">
+      {/* back to landing screen */}
+      <FadeInUpBox delay={delay}>
+        <Button
+          variant="text"
+          leftIcon={<Icon as={FiArrowLeft} />}
+          ml={-3}
+          onClick={() => {
+            setStage("");
+          }}
+        >
+          Back
+        </Button>
+        <VStack width={300}></VStack>
+      </FadeInUpBox>
+
+      {/* login input */}
+      <FadeInUpBox delay={delay + 0.1}>
+        <VStack width={300} mt={3}>
+          {/* username */}
+          <InputGroup>
+            <InputLeftElement>
+              <Icon color="brand.500" as={FiUser} />
+            </InputLeftElement>
+            <Input
+              variant="outlined"
+              placeholder="username"
+              width="100%"
+              onChange={(e) => {
+                setUsername(e.target.value);
+                setError("");
+              }}
+            />
+          </InputGroup>
+
+          {/* password */}
+          <InputGroup>
+            <InputLeftElement>
+              <Icon color="brand.500" as={FiLock} />
+            </InputLeftElement>
+            <Input
+              variant="outlined"
+              placeholder="password"
+              type="password"
+              width="100%"
+              onChange={(e) => {
+                setPassword(e.target.value);
+                setError("");
+              }}
+            />
+          </InputGroup>
+        </VStack>
+      </FadeInUpBox>
+
+      <FadeInUpBox delay={delay + 0.2}>
+        <HStack gap={5} justifyContent="left" mt={10}>
+          <Button
+            colorScheme="brand"
+            borderRadius={20}
+            rightIcon={<Icon as={FiArrowRight} />}
+            _hover={{
+              shadow: "lg",
+              transform: "translateY(-5px)",
+              transition: "0.2s",
+            }}
+            onClick={handleLogin}
+          >
+            Login
+          </Button>
+          <Button color="brand.700" variant="text">
+            Sign Up
+          </Button>
+        </HStack>
+      </FadeInUpBox>
+
+      <VStack mt={10} height={20}>
+        <AnimatePresence>
+          {error !== "" && (
+            <FadeInUpBox key="errorText">
+              <Text color="red.500" fontWeight="600">
+                {error}
+              </Text>
+            </FadeInUpBox>
+          )}
+        </AnimatePresence>
+      </VStack>
+    </VStack>
+  );
+};
+
+export default Login;