aka-nahal · aka-nahal · Jan 31, 2023
diff --git a/README.md b/README.md
diff --git a/assets.json b/assets.json
@@ -0,0 +1 @@
+[{"name":"digitalscreenwithenvironmentday-1@2x.png","url":"https://d1xzdqg8s8ggsr.cloudfront.net/63d93a64e9f3c0e8ae34667d/24449e10-42ff-4741-b9e2-5f24415949e0_1675180728839754003?Expires=-62135596800&Signature=ZwcaYnI-26hjUmSIZPr3GTLObyFwrBgDeyqBGIoMBZnaT6fZ212bns1QBzDFE4-CS--Q-jHFMGGwUPxSU-fgaUHVeCJ6LCdyDTKwOKaN1m4TLebVgXEmJBxbIq0AzRG-8qqIvkAIHS5KTosUIZUtWRB6pwihAppnb70aMs2vX~fjut6qAi5sbxeWMjrciyZ~HAd7vv5-IHyPFaAxcKjBdww5FVAgjQKUlZQW1n4zX4uzlnYf-jQxO4k19oOk3wBY5tLV~CWW9nCwzmAazdzrefZ0hKGEB0x7FfyC1P2jRKm0a1uNMJ1aCXGA8GN8SD4urGUVSmwPG9UrQxr5iwNUeA__&Key-Pair-Id=K1P54FZWCHCL6J","path":"public"}]
diff --git a/package.json b/package.json
@@ -1,39 +1,42 @@
-{
-  "name": "educator-js-codespace-template",
-  "version": "1.0.0",
-  "description": "Educator JS Codespace Template",
-  "source": "src/index.html",
-  "homepage": "https://github.com/microsoft/codespaces-teaching-template-js#readme",
-  "scripts": {
-    "start": "parcel",
-    "build": "parcel build",
-    "build-gh": "parcel build --public-url 'https://{github-username}.github.io/{repo-name}'",
-    "predeploy": "npm run build-gh",
-    "deploy": "gh-pages -d dist"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/microsoft/codespaces-teaching-template-js.git"
-  },
-  "author": "Microsoft",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/microsoft/codespaces-teaching-template-js/issues"
-  },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "eslint": "^8.23.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.7",
-    "gh-pages": "^4.0.0",
-    "html-webpack-plugin": "^5.5.0",
-    "parcel": "^2.7.0",
-    "prettier": "^2.7.1",
-    "process": "^0.11.10"
+
+  {
+    "name": "sign",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+			"@testing-library/jest-dom": "^5.16.1",
+			"@testing-library/react": "^13.3.0",
+			"@testing-library/user-event": "^13.5.0",
+			"@types/jest": "^27.0.3",
+			"@types/node": "^16.11.14",
+			"@types/react": "^18.0.17",
+			"@types/react-dom": "^18.0.6",
+			"react": "^18.2.0",
+			"react-dom": "^18.2.0",
+			"react-scripts": "5.0.1",
+			"web-vitals": "^2.1.2",
+			"react-router-dom": "^6.2.1"
+    },
+    "scripts": {
+      "start": "react-scripts start",
+      "build": "react-scripts build",
+      "test": "react-scripts test",
+      "eject": "react-scripts eject"
+    },
+    "eslintConfig": {
+
+    },
+    "browserslist": {
+      "production": [
+        ">0.2%",
+        "not dead",
+        "not op_mini all"
+      ],
+      "development": [
+        "last 1 chrome version",
+        "last 1 firefox version",
+        "last 1 safari version"
+      ]
+    }
   }
-}
+  
diff --git a/public/digitalscreenwithenvironmentday-1@2x.png b/public/digitalscreenwithenvironmentday-1@2x.png
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000" />
+    <meta name="description" content="Web site created using Locofy" />
+    <title>sign</title>
+    <style></style>
+  </head>
+  <body style="margin: 0; line-height: normal">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,52 @@
+import {
+  Routes,
+  Route,
+  useNavigationType,
+  useLocation,
+} from "react-router-dom";
+import RegistrationPage from "./pages/RegistrationPage";
+import { useEffect } from "react";
+
+function App() {
+  const action = useNavigationType();
+  const location = useLocation();
+  const pathname = location.pathname;
+
+  useEffect(() => {
+    if (action !== "POP") {
+      window.scrollTo(0, 0);
+    }
+  }, [action, pathname]);
+
+  useEffect(() => {
+    let title = "";
+    let metaDescription = "";
+
+    switch (pathname) {
+      case "/":
+        title = "";
+        metaDescription = "";
+        break;
+    }
+
+    if (title) {
+      document.title = title;
+    }
+
+    if (metaDescription) {
+      const metaDescriptionTag = document.querySelector(
+        'head > meta[name="description"]'
+      );
+      if (metaDescriptionTag) {
+        metaDescriptionTag.content = metaDescription;
+      }
+    }
+  }, [pathname]);
+
+  return (
+    <Routes>
+      <Route path="/" element={<RegistrationPage />} />
+    </Routes>
+  );
+}
+export default App;
diff --git a/src/global.css b/src/global.css
@@ -0,0 +1,22 @@
+@import url("https://fonts.googleapis.com/css2?family=Calibri:wght@400&display=swap");
+
+body {
+  margin: 0;
+  line-height: normal;
+}
+:root {
+  /* fonts */
+  --font-calibri: Calibri;
+
+  /* font sizes */
+  --font-size-sm: 15px;
+  --font-size-base: 20px;
+
+  /* Colors */
+  --color-black: #000;
+  --color-white: #fff;
+  --color-gainsboro: #d9d9d9;
+
+  /* border radiuses */
+  --br-md: 20px;
+}
diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,20 @@
-/**
- * Entry point of application, where App is rendered within the div with the id of "app" 
- */
-
 import React from "react";
-import { render } from "react-dom";
-
+import { createRoot } from "react-dom/client";
 import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { BrowserRouter } from "react-router-dom";
+import "./global.css";
+
+const container = document.getElementById("root");
+const root = createRoot(container);
+
+root.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+);
 
-render(<App></App>, document.getElementById("app"));
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/src/pages/RegistrationPage.js b/src/pages/RegistrationPage.js
@@ -0,0 +1,36 @@
+import { useCallback } from "react";
+import styles from "./RegistrationPage.module.css";
+
+const RegistrationPage = () => {
+  const onDontHaveAnClick = useCallback(() => {
+    // Please sync "Registration page" to the project
+  }, []);
+
+  return (
+    <div className={styles.registrationPage}>
+      <img
+        className={styles.digitalScreenWithEnvironmenIcon}
+        alt=""
+        src="../digitalscreenwithenvironmentday-1@2x.png"
+      />
+      <div className={styles.welcomeBack}>Welcome back</div>
+      <div className={styles.pleaseEnterYour}>Please enter your detail</div>
+      <form className={styles.sign}>
+        <div className={styles.signChild} />
+        <div className={styles.signItem} />
+        <div className={styles.email}>Email</div>
+        <div className={styles.password}>Password</div>
+        <div className={styles.signInner} />
+        <div className={styles.rememberMe}>Remember Me</div>
+        <div className={styles.dontHaveAn} onClick={onDontHaveAnClick}>
+          Don’t have an account ? Sign up
+        </div>
+        <div className={styles.forgotPassword}>Forgot password</div>
+        <div className={styles.rectangleDiv} />
+        <div className={styles.signIn}>Sign In</div>
+      </form>
+    </div>
+  );
+};
+
+export default RegistrationPage;
diff --git a/src/pages/RegistrationPage.module.css b/src/pages/RegistrationPage.module.css
@@ -0,0 +1,120 @@
+.digitalScreenWithEnvironmenIcon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 773px;
+  height: 1024px;
+  object-fit: cover;
+}
+.pleaseEnterYour,
+.welcomeBack {
+  position: absolute;
+  top: 209px;
+  left: 929px;
+}
+.pleaseEnterYour {
+  top: 284px;
+  left: 1011px;
+  font-size: var(--font-size-base);
+}
+.signChild,
+.signItem {
+  position: absolute;
+  top: 30px;
+  left: 10px;
+  border-radius: var(--br-md);
+  background-color: var(--color-gainsboro);
+  width: 390px;
+  height: 54px;
+}
+.signItem {
+  top: 154px;
+}
+.email,
+.password {
+  position: absolute;
+  top: 0;
+  left: 10px;
+  font-size: var(--font-size-base);
+  font-family: var(--font-calibri);
+  color: var(--color-white);
+  text-align: center;
+}
+.password {
+  top: 120px;
+}
+.signInner {
+  position: absolute;
+  top: 241px;
+  left: 0;
+  border-radius: 50px;
+  background-color: var(--color-gainsboro);
+  width: 19px;
+  height: 19px;
+}
+.rememberMe {
+  top: 242px;
+  left: 26px;
+  font-size: var(--font-size-sm);
+}
+.dontHaveAn,
+.forgotPassword,
+.rememberMe {
+  position: absolute;
+  font-family: var(--font-calibri);
+  color: var(--color-white);
+  text-align: center;
+}
+.dontHaveAn {
+  top: 397px;
+  left: 72px;
+  font-size: var(--font-size-base);
+  cursor: pointer;
+}
+.forgotPassword {
+  top: 242px;
+  left: 298px;
+  font-size: var(--font-size-sm);
+}
+.rectangleDiv {
+  top: 304px;
+  left: 7px;
+  border-radius: 30px;
+  background-color: #14ff00;
+  border: 1px solid var(--color-black);
+  box-sizing: border-box;
+  width: 390px;
+  height: 58px;
+}
+.rectangleDiv,
+.sign,
+.signIn {
+  position: absolute;
+}
+.signIn {
+  top: 322px;
+  left: 166px;
+  font-size: var(--font-size-base);
+  font-family: var(--font-calibri);
+  color: var(--color-black);
+  text-align: center;
+}
+.sign {
+  top: 373px;
+  left: 919px;
+  width: 400px;
+  height: 421px;
+}
+.registrationPage {
+  position: relative;
+  background-color: #265518;
+  border: 2px solid var(--color-black);
+  box-sizing: border-box;
+  width: 100%;
+  height: 1024px;
+  overflow: hidden;
+  text-align: center;
+  font-size: 60px;
+  color: var(--color-white);
+  font-family: var(--font-calibri);
+}
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
@@ -0,0 +1,15 @@
+import { ReportHandler } from "web-vitals";
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		[{"name":"digitalscreenwithenvironmentday-1@2x.png","url":"https://d1xzdqg8s8ggsr.cloudfront.net/63d93a64e9f3c0e8ae34667d/24449e10-42ff-4741-b9e2-5f24415949e0_1675180728839754003?Expires=-62135596800&Signature=ZwcaYnI-26hjUmSIZPr3GTLObyFwrBgDeyqBGIoMBZnaT6fZ212bns1QBzDFE4-CS--Q-jHFMGGwUPxSU-fgaUHVeCJ6LCdyDTKwOKaN1m4TLebVgXEmJBxbIq0AzRG-8qqIvkAIHS5KTosUIZUtWRB6pwihAppnb70aMs2vX~fjut6qAi5sbxeWMjrciyZ~HAd7vv5-IHyPFaAxcKjBdww5FVAgjQKUlZQW1n4zX4uzlnYf-jQxO4k19oOk3wBY5tLV~CWW9nCwzmAazdzrefZ0hKGEB0x7FfyC1P2jRKm0a1uNMJ1aCXGA8GN8SD4urGUVSmwPG9UrQxr5iwNUeA__&Key-Pair-Id=K1P54FZWCHCL6J","path":"public"}]