diff --git a/frontend/index.html b/frontend/index.html index e4b78eae..3ccd19a4 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,9 +2,8 @@ - - Vite + React + TS + Delphi
diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 4a9cfdb0..1d2f7617 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8,8 +8,10 @@ "name": "frontend", "version": "0.0.0", "dependencies": { + "bulma": "^0.9.4", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^5.0.1", "react-router-dom": "^6.22.2" }, "devDependencies": { @@ -1737,6 +1739,11 @@ "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, + "node_modules/bulma": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz", + "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==" + }, "node_modules/call-bind": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", @@ -3869,6 +3876,14 @@ "react": "^18.2.0" } }, + "node_modules/react-icons": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz", + "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 2649e602..b1609003 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,8 +10,10 @@ "preview": "vite preview" }, "dependencies": { + "bulma": "^0.9.4", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^5.0.1", "react-router-dom": "^6.22.2" }, "devDependencies": { diff --git a/frontend/public/delphi_favicon.png b/frontend/public/delphi_favicon.png new file mode 100644 index 00000000..401d0b9f Binary files /dev/null and b/frontend/public/delphi_favicon.png differ diff --git a/frontend/public/delphi_favicon_circle.png b/frontend/public/delphi_favicon_circle.png new file mode 100644 index 00000000..63fcadbb Binary files /dev/null and b/frontend/public/delphi_favicon_circle.png differ diff --git a/frontend/public/delphi_favicon_nobg.png b/frontend/public/delphi_favicon_nobg.png new file mode 100644 index 00000000..e2bdf510 Binary files /dev/null and b/frontend/public/delphi_favicon_nobg.png differ diff --git a/frontend/public/delphi_full.png b/frontend/public/delphi_full.png new file mode 100644 index 00000000..08e33c63 Binary files /dev/null and b/frontend/public/delphi_full.png differ diff --git a/frontend/public/delphi_full_circle.png b/frontend/public/delphi_full_circle.png new file mode 100644 index 00000000..dc65a306 Binary files /dev/null and b/frontend/public/delphi_full_circle.png differ diff --git a/frontend/public/delphi_full_nobg.png b/frontend/public/delphi_full_nobg.png new file mode 100644 index 00000000..8211bb44 Binary files /dev/null and b/frontend/public/delphi_full_nobg.png differ diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg deleted file mode 100644 index e7b8dfb1..00000000 --- a/frontend/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/App.css b/frontend/src/App.css deleted file mode 100644 index b9d355df..00000000 --- a/frontend/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/frontend/src/assets/styles/mainpage.css b/frontend/src/assets/styles/mainpage.css new file mode 100644 index 00000000..bc03ac9b --- /dev/null +++ b/frontend/src/assets/styles/mainpage.css @@ -0,0 +1,41 @@ +.main-header { + width: 100vw; + height: 8vh; + background-color: #9c9afd; +} + +.main-nav { + height: 100%; + + img { + background-color: #5f63c8; + height: 100%; + } +} + +.main-content { + width: 100vw; + height: 92vh; +} + +.side-bar { + width: 4.15vw; + background-color: #6a74ce; + + li { + height: 10vh; + display: flex; + justify-content: center; + align-items: center; + padding: 5%; + } +} + +.icon { + height: 50%; +} + +img { + max-width: 100%; + height: auto; +} \ No newline at end of file diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx new file mode 100644 index 00000000..7c900e71 --- /dev/null +++ b/frontend/src/components/Header.tsx @@ -0,0 +1,17 @@ +import {JSX} from "react"; +import {RiAccountPinBoxLine} from "react-icons/ri"; + +export function Header(): JSX.Element { + return ( + + ) +} diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx new file mode 100644 index 00000000..d0ef519c --- /dev/null +++ b/frontend/src/components/Sidebar.tsx @@ -0,0 +1,16 @@ +import {JSX} from "react"; +import { IoHomeSharp } from "react-icons/io5"; +import { PiProjectorScreen, PiFolder } from "react-icons/pi"; + +export function Sidebar(): JSX.Element { + return ( + + ) +} + diff --git a/frontend/src/index.css b/frontend/src/index.css index 6119ad9a..edf89c3b 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,68 +1,5 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { +* { + padding: 0; margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} + box-sizing: border-box; +} \ No newline at end of file diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index 2912f985..3467c88e 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -8,6 +8,8 @@ import LoginScreen from "./pages/login/LoginScreen.tsx"; import HomeAdmin from "./pages/admin/HomeAdmin.tsx"; import HomeStudent from "./pages/student/HomeStudent.tsx"; import HomeTeacher from "./pages/teacher/HomeTeacher.tsx"; +import 'bulma/css/bulma.min.css'; +import './assets/styles/mainpage.css' const router = createBrowserRouter([ { @@ -33,7 +35,7 @@ const router = createBrowserRouter([ } ]); ReactDOM.createRoot(document.getElementById('root')!).render( - - - , + + + , ) diff --git a/frontend/src/pages/student/HomeStudent.tsx b/frontend/src/pages/student/HomeStudent.tsx index 19404c00..4cd01e87 100644 --- a/frontend/src/pages/student/HomeStudent.tsx +++ b/frontend/src/pages/student/HomeStudent.tsx @@ -1,7 +1,21 @@ import {JSX} from "react"; +import {Header} from "../../components/Header.tsx"; +import {Sidebar} from "../../components/Sidebar.tsx"; export default function HomeStudent(): JSX.Element { return ( - <>Homescreen for a student + <> +
+
+
+
+
+ +
+
+ <>Homescreen for a student +
+
+ ) } \ No newline at end of file