NJUPT-SAST · BQXBQX · Feb 24, 2024 · Feb 16, 2024 · Feb 16, 2024 · Feb 17, 2024
diff --git a/packages/competition/index.html b/packages/competition/index.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="./public/LogoNoText.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>SASTOJ</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/packages/competition/package.json b/packages/competition/package.json
@@ -13,10 +13,12 @@
   },
   "dependencies": {
     "@sast/oj-ui": "workspace:^",
+    "axios": "^1.6.7",
     "localforage": "^1.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.0",
+    "swr": "^2.2.5",
     "zustand": "^4.4.7"
   },
   "devDependencies": {

diff --git a/packages/competition/public/LogoNoText.svg b/packages/competition/public/LogoNoText.svg
diff --git a/packages/competition/public/vite.svg b/packages/competition/public/vite.svg
diff --git a/packages/competition/src/App.css b/packages/competition/src/App.css
diff --git a/packages/competition/src/App.scss b/packages/competition/src/App.scss
@@ -0,0 +1,50 @@
+@import url("./reset.css");
+
+* {
+  // color variables
+  --primary-color: #0078d4;
+  --primary-color-rgb: 0, 120, 212;
+  --primary-color-background-rgb: 219, 236, 249;
+  --secondary-color: #71afe5;
+  --danger-color: #ff0000;
+  --danger-color-rgb: 255, 0, 0;
+  --danger-color-background-rgb: 255, 245, 245;
+  --warning-color: #ffb900;
+  --warning-color-rgb: 255, 185, 0;
+  --warning-color-background-rgb: 255, 252, 245;
+  --success-color: #00c853;
+  --success-color-rgb: 0, 200, 83;
+  --success-color-background-rgb: 245, 253, 248;
+  --white-color: #ffffff;
+  --black-color: #121212;
+  --black-color-rgb: 18, 18, 18;
+  --title-shadow: #f3f3f3;
+  --shadow-color: rgb(128, 128, 128);
+  --shadow-color-rgb: 128, 128, 128;
+  --dark-color: rgb(30, 30, 30);
+  --small-font-size: 12px;
+  --medium-font-size: 16px;
+  --large-font-size: 20px;
+  font-family: sans-serif;
+  --background-blue: #ecf2ff;
+  --border-white: #f1f1f1;
+  --pale-white: #fcfcfc;
+  --divider-color: #d9d9d9;
+}
+
+::-webkit-scrollbar {
+  all: unset;
+  width: 4px;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--shadow-color);
+  border-radius: 2px;
+}
+
+::-webkit-scrollbar-track {
+  margin: 5px;
+}
+
+.stopMove {
+  overflow: hidden;
+}
diff --git a/packages/competition/src/App.tsx b/packages/competition/src/App.tsx
@@ -1,23 +1,10 @@
-import { useState } from "react";
-import { Button, Sheet, SheetWrapper } from "../../ui/dist";
-import "./App.css";
-
+import { RouterProvider } from "react-router-dom";
+import "./App.scss";
+import router from "./utils/router";
 function App() {
-  const [visible, setVisible] = useState<boolean>(false);
   return (
     <>
-      <SheetWrapper>
-        <div style={{ width: "100vw", backgroundColor: "white" }}>
-          {/* <div style={{ height: "19900px" }}></div> */}
-          <Button onClick={() => setVisible(true)}>test</Button>
-          <div style={{ height: "19900px" }}></div>
-        </div>
-      </SheetWrapper>
-      <Sheet
-        visible={visible}
-        onCancel={() => setVisible(false)}
-        width={500}
-      ></Sheet>
+      <RouterProvider router={router}></RouterProvider>
     </>
   );
 }

diff --git a/packages/competition/src/_variables.scss b/packages/competition/src/_variables.scss
@@ -0,0 +1,16 @@
+//absolute center
+@mixin absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+//flex center
+@mixin flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+$cubic-bezier: cubic-bezier(0.215, 0.61, 0.355, 1);
diff --git a/packages/competition/src/assets/404.png b/packages/competition/src/assets/404.png
diff --git a/packages/competition/src/assets/logo.svg b/packages/competition/src/assets/logo.svg
diff --git a/packages/competition/src/assets/react.svg b/packages/competition/src/assets/react.svg
diff --git a/packages/competition/src/components/login/loginCard/index.module.scss b/packages/competition/src/components/login/loginCard/index.module.scss
@@ -0,0 +1,45 @@
+.card {
+  background-color: transparent !important;
+  background: linear-gradient(to bottom right, var(--white-color), transparent);
+  background-position: 50% 50%;
+  background-size: 2000% 2000%;
+  box-shadow:
+    inset -5px -5px 240px 0px rgba(255, 255, 255, 0.02),
+    inset 5px 5px 4px 0px rgba(255, 255, 255, 0.35) !important;
+  backdrop-filter: blur(42px);
+  border: 1px solid var(--divider-color);
+  .header-container {
+    display: flex;
+    flex-direction: column;
+    font-weight: bolder;
+    gap: 10px;
+    font-size: 16px;
+    color: var(--shadow-color);
+  }
+  .footer-container {
+    width: 100%;
+    .divider-container {
+      padding: 12px 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 12px;
+      color: var(--shadow-color);
+      div {
+        flex-grow: 1;
+        height: 1px;
+        background-color: var(--divider-color);
+      }
+    }
+    .other-way-container {
+      display: flex;
+      flex-direction: row;
+      gap: 50px;
+      button {
+        flex-grow: 1;
+        height: 50px;
+        font-weight: 1000;
+      }
+    }
+  }
+}
diff --git a/packages/competition/src/components/login/loginCard/index.tsx b/packages/competition/src/components/login/loginCard/index.tsx
@@ -0,0 +1,48 @@
+import { Button, Card } from "@sast/oj-ui";
+import Logo from "../../logo";
+import styles from "./index.module.scss";
+import LoginCardContent from "./loginCardContent";
+
+const LoginCard = () => {
+  return (
+    <>
+      <Card
+        className={styles.card}
+        size="small"
+        header={
+          <>
+            <div className={styles["header-container"]}>
+              <Logo width={300}></Logo>
+              <span>LOGIN HERE</span>
+            </div>
+          </>
+        }
+        mainContent={<LoginCardContent />}
+        footer={
+          <>
+            <div className={styles["footer-container"]}>
+              <div className={styles["divider-container"]}>
+                <div />
+                <span>Or continue with</span>
+                <div />
+              </div>
+              <div className={styles["other-way-container"]}>
+                <Button color="border">
+                  <span>Link</span>
+                </Button>
+                <Button color="border">
+                  <span>Link</span>
+                </Button>
+                <Button color="border">
+                  <span>Link</span>
+                </Button>
+              </div>
+            </div>
+          </>
+        }
+      ></Card>
+    </>
+  );
+};
+
+export default LoginCard;
diff --git a/packages/competition/src/components/login/loginCard/loginCardContent/icon/error.tsx b/packages/competition/src/components/login/loginCard/loginCardContent/icon/error.tsx
@@ -0,0 +1,37 @@
+import styles from "./icon.module.scss";
+const Error = () => {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="25"
+        height="25"
+        viewBox="0 0 24 24"
+        className={styles.icon}
+      >
+        <line
+          className={styles.cross1}
+          x1="5"
+          y1="5"
+          x2="19"
+          y2="19"
+          stroke="white"
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+        <line
+          className={styles.cross2}
+          x1="19"
+          y1="5"
+          x2="5"
+          y2="19"
+          stroke="white"
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+      </svg>
+    </>
+  );
+};
+
+export default Error;
diff --git a/packages/competition/src/components/login/loginCard/loginCardContent/icon/icon.module.scss b/packages/competition/src/components/login/loginCard/loginCardContent/icon/icon.module.scss
@@ -0,0 +1,30 @@
+@use "../../../../../variables" as *;
+$animation-duration: 300ms;
+$animation-delay: 500ms;
+@mixin svg-animation($delay) {
+  stroke-dasharray: 24;
+  stroke-dashoffset: 24;
+  animation: draw-success-icon $animation-duration linear forwards;
+  animation-delay: $delay;
+}
+.icon {
+  @include absolute-center;
+  .success {
+    @include svg-animation($animation-delay);
+  }
+  .cross1 {
+    @include svg-animation($animation-delay);
+  }
+  .cross2 {
+    @include svg-animation($animation-delay * 2);
+  }
+}
+
+@keyframes draw-success-icon {
+  50% {
+    stroke-dashoffset: 18;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}