From 2b83deeccb75f7b91172c75f2b37ac07f225fc2a Mon Sep 17 00:00:00 2001 From: Brian Ou <43121684+jindoridodi@users.noreply.github.com> Date: Wed, 8 Apr 2026 10:02:33 -0700 Subject: [PATCH] home page and assessment page --- frontend/index.html | 2 +- frontend/package-lock.json | 42 ++++++++----- frontend/src/App.css | 119 ++++++++++++++++++++++++++++-------- frontend/src/App.tsx | 61 ++++++++++-------- frontend/src/Assessment.tsx | 47 ++++++++++++++ frontend/src/Home.tsx | 35 +++++++++++ frontend/src/index.css | 67 +------------------- package-lock.json | 6 ++ 8 files changed, 244 insertions(+), 135 deletions(-) create mode 100644 frontend/src/Assessment.tsx create mode 100644 frontend/src/Home.tsx create mode 100644 package-lock.json diff --git a/frontend/index.html b/frontend/index.html index 072a57e..d849113 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,7 +4,7 @@ - frontend + CodeSCE
diff --git a/frontend/package-lock.json b/frontend/package-lock.json index a21dccb..8196b99 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -57,6 +57,7 @@ "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", @@ -1570,6 +1571,7 @@ "integrity": "sha512-GYDxsZi3ChgmckRT9HPU0WEhKLP08ev/Yfcq2AstjrDASOYCSXeyjDsHg4v5t4jOj7cyDX3vmprafKlWIG9MXQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -1580,6 +1582,7 @@ "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -1639,6 +1642,7 @@ "integrity": "sha512-XZzOmihLIr8AD1b9hL9ccNMzEMWt/dE2u7NyTY9jJG6YNiNthaD5XtUHVF2uCXZ15ng+z2hT3MVuxnUYhq6k1g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.57.0", "@typescript-eslint/types": "8.57.0", @@ -1793,9 +1797,9 @@ } }, "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.4.tgz", - "integrity": "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==", + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz", + "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==", "dev": true, "license": "MIT", "dependencies": { @@ -1912,6 +1916,7 @@ "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1990,9 +1995,9 @@ } }, "node_modules/brace-expansion": { - "version": "1.1.12", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz", - "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==", + "version": "1.1.13", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.13.tgz", + "integrity": "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==", "dev": true, "license": "MIT", "dependencies": { @@ -2020,6 +2025,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -2241,6 +2247,7 @@ "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -2503,9 +2510,9 @@ } }, "node_modules/flatted": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.1.tgz", - "integrity": "sha512-IxfVbRFVlV8V/yRaGzk0UVIcsKKHMSfYw66T/u4nTwlWteQePsxe//LjudR1AMX4tZW3WFCh3Zqa/sjlqpbURQ==", + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz", + "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==", "dev": true, "license": "ISC" }, @@ -2922,11 +2929,12 @@ "license": "ISC" }, "node_modules/picomatch": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", - "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", + "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -2988,6 +2996,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -3183,6 +3192,7 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -3264,11 +3274,12 @@ } }, "node_modules/vite": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz", - "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz", + "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", @@ -3390,6 +3401,7 @@ "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==", "dev": true, "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/frontend/src/App.css b/frontend/src/App.css index b9d355d..bd0ee3c 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,42 +1,107 @@ -#root { - max-width: 1280px; +.app-container { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; +} + +.start-card { + width: 100%; + max-width: 360px; margin: 0 auto; - padding: 2rem; text-align: center; } -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; +.assessment-page { + width: 100%; + max-width: none; } -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); + +.assessment-container { + align-items: stretch; + justify-content: flex-start; + padding: 0; } -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); + +.assessment-layout { + display: grid; + grid-template-columns: 1fr 2fr; + gap: 0; + margin: 0.75rem 0; + min-height: calc(100vh - 6rem); } -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.question-section { + border-right: 1px solid #c7c7c7; + padding: 0.75rem; } -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } +.right-section { + display: flex; + flex-direction: column; +} + +.answer-section { + padding: 0.75rem; +} + +.results-section { + border-top: 1px solid #c7c7c7; + padding: 0.75rem; +} + +.results-section h2 { + margin-top: 0; +} + +.answer-section textarea { + width: 100%; + min-height: 220px; + resize: vertical; } -.card { - padding: 2em; +.start-card h1 { + margin-top: 0; } -.read-the-docs { - color: #888; +.form-row { + display: flex; + gap: 0.5rem; + justify-content: center; +} + +.form-row input { + flex: 1; + padding: 0.35rem 0.5rem; +} + +.form-row button { + padding: 0.35rem 0.75rem; +} + +.message { + margin: 0.5rem 0 0; +} + +.error { + color: #b00020; +} + +@media (max-width: 480px) { + .form-row { + flex-direction: column; + } +} + +@media (max-width: 800px) { + .assessment-layout { + grid-template-columns: 1fr; + min-height: auto; + } + + .question-section { + border-right: 0; + border-bottom: 1px solid #c7c7c7; + } } diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 3d7ded3..8ff5453 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,34 +1,43 @@ import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' -import './App.css' +import Assessment from './Assessment' +import Home from './Home' function App() { - const [count, setCount] = useState(0) + const [page, setPage] = useState<'home' | 'assessment'>('home') + const [name, setName] = useState('') + const [solution, setSolution] = useState('') + const [error, setError] = useState('') + + const handleStart = () => { + const trimmedName = name.trim() + + if (!trimmedName) { + setError('Enter name') + return + } + + setError('') + console.log(trimmedName) + setPage('assessment') + } + + if (page === 'assessment') { + return ( + setPage('home')} + /> + ) + } return ( - <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

- + ) } diff --git a/frontend/src/Assessment.tsx b/frontend/src/Assessment.tsx new file mode 100644 index 0000000..42c8e3a --- /dev/null +++ b/frontend/src/Assessment.tsx @@ -0,0 +1,47 @@ +import './App.css' + +type AssessmentProps = { + solution: string + onSolutionChange: (solution: string) => void + onBack: () => void +} + +function Assessment({ solution, onSolutionChange, onBack }: AssessmentProps) { + return ( +
+
+

CodeSCE Assessment

+ +
+
+

+ Placeholder question text +

+
+ +
+
+