Merge pull request #19 from huythai855/feature/frontend-forum-page

Feature/frontend forum page

frontend/src/AppRouter.js

@@ -5,7 +5,9 @@ import Lesson from './pages/Lesson/Lesson';
 import Login from './pages/Login/Login';
 import Rankings from "./pages/Rankings/Rankings";
 import Learn from './pages/Learn/Learn';
+import Forum from './pages/Forum/Forum';
 import Coursepath from './pages/Course/Coursepath';
+import CourseDetail from './pages/Course/CourseDetail';
 import Quiz from "./pages/Lesson/Quiz/Quiz";
 
 function AppRouter() {
@@ -17,6 +19,10 @@ function AppRouter() {
           <Route path="/login" element={<Login/>} />
           <Route path="/rankings" element={<Rankings/>} />
           <Route path="/learning" element={<Learn/>} />
+          <Route path="/forum" element={<Forum/>} />
+          <Route path="/coursepath" element={<Coursepath/>} />
+          <Route path="/coursedetail" element={<CourseDetail/>} />
+          {/* <Route path="/homepage" element={<HomePage />} /> */}
           <Route path="/lesson/:id" element={<Lesson />} />
           <Route path="/quiz" element={<Quiz/>} />
           <Route path="/physic-page" element={<Coursepath/>} />

frontend/src/pages/Course/CourseDetail.css

@@ -0,0 +1,292 @@
+.physic-course {
+    background-color: #ffffff;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .physic-course .overlap-wrapper {
+    background-color: #ffffff;
+    border: 1px none;
+    height: 1081px;
+    width: 2422px;
+  }
+
+  .physic-course .overlap {
+    background-image: url(../../assets/x-1.png);
+    background-position: 50% 50%;
+    background-size: cover;
+    height: 1081px;
+    position: relative;
+  }
+
+  .physic-course .group {
+    height: 60px;
+    left: 34px;
+    position: absolute;
+    top: 90px;
+    width: 84px;
+  }
+
+  .physic-course .navbar {
+    height: 735px;
+    left: 24px;
+    position: absolute;
+    top: 210px;
+    width: 112px;
+  }
+
+  .physic-course .learn {
+    background-color: #966bd463;
+    border-radius: 26px;
+    height: 97px;
+    left: 0;
+    position: absolute;
+    top: 118px;
+    width: 112px;
+  }
+
+  .physic-course .div {
+    height: 71px;
+    left: 24px;
+    position: relative;
+    top: 24px;
+    width: 65px;
+  }
+
+  .physic-course .icon {
+    height: 49px;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 63px;
+  }
+
+  .physic-course .text-wrapper {
+    color: #0fc0f0;
+    font-family: "Montserrat", Helvetica;
+    font-size: 16px;
+    font-weight: 600;
+    height: 20px;
+    left: 15px;
+    letter-spacing: 0;
+    line-height: normal;
+    position: absolute;
+    top: 51px;
+  }
+
+  .physic-course .challenge {
+    height: 68px;
+    left: 14px;
+    position: absolute;
+    top: 265px;
+    width: 86px;
+  }
+
+  .physic-course .img {
+    height: 46px;
+    left: 10px;
+    position: absolute;
+    top: 0;
+    width: 57px;
+  }
+
+  .physic-course .text-wrapper-2 {
+    color: #0fc0f0;
+    font-family: "Montserrat", Helvetica;
+    font-size: 16px;
+    font-weight: 600;
+    height: 20px;
+    left: 0;
+    letter-spacing: 0;
+    line-height: normal;
+    position: absolute;
+    top: 48px;
+  }
+
+  .physic-course .ranking {
+    height: 75px;
+    left: 12px;
+    position: absolute;
+    top: 383px;
+    width: 81px;
+  }
+
+  .physic-course .overlap-group {
+    height: 75px;
+    position: relative;
+    width: 79px;
+  }
+
+  .physic-course .icon-2 {
+    height: 55px;
+    left: 11px;
+    position: absolute;
+    top: 0;
+    width: 53px;
+  }
+
+  .physic-course .text-wrapper-3 {
+    color: #0fc0f0;
+    font-family: "Montserrat", Helvetica;
+    font-size: 16px;
+    font-weight: 600;
+    height: 20px;
+    left: 0;
+    letter-spacing: 0;
+    line-height: normal;
+    position: absolute;
+    top: 55px;
+  }
+
+  .physic-course .overlap-group-4 {
+    height: 70px;
+    left: 11px;
+    position: absolute;
+    top: 520px;
+    width: 77px;
+  }
+
+  .physic-course .icon-3 {
+    height: 50px;
+    left: 6px;
+    position: absolute;
+    top: 0;
+    width: 63px;
+  }
+
+  .physic-course .text-wrapper-4 {
+    color: #0fc0f0;
+    font-family: "Montserrat", Helvetica;
+    font-size: 16px;
+    font-weight: 600;
+    height: 20px;
+    left: 0;
+    letter-spacing: 0;
+    line-height: normal;
+    position: absolute;
+    top: 50px;
+  }
+
+  .physic-course .shop {
+    height: 76px;
+    left: 0;
+    position: absolute;
+    top: 659px;
+    width: 82px;
+  }
+
+  .physic-course .text-wrapper-5 {
+    color: #0fc0f0;
+    font-family: "Montserrat", Helvetica;
+    font-size: 16px;
+    font-weight: 600;
+    height: 20px;
+    left: 0;
+    letter-spacing: 0;
+    line-height: normal;
+    position: absolute;
+    top: 56px;
+  }
+
+  .physic-course .icon-4 {
+    height: 53px;
+    left: 12px;
+    position: absolute;
+    top: 0;
+    width: 56px;
+  }
+
+  .physic-course .home {
+    height: 74px;
+    left: 7px;
+    position: absolute;
+    top: 0;
+    width: 85px;
+  }
+
+  .physic-course .text-wrapper-6 {
+    color: #0fc0f0;
+    font-family: "Montserrat", Helvetica;
+    font-size: 16px;
+    font-weight: 600;
+    height: 20px;
+    left: 0;
+    letter-spacing: 0;
+    line-height: normal;
+    position: absolute;
+    top: 54px;
+  }
+
+  .physic-course .icon-5 {
+    height: 50px;
+    left: 18px;
+    position: absolute;
+    top: 0;
+    width: 50px;
+  }
+
+  .physic-course .x {
+    height: 170px;
+    left: 168px;
+    object-fit: cover;
+    position: absolute;
+    top: 775px;
+    width: 159px;
+  }
+
+  .physic-course .x-level {
+    height: 173px;
+    left: 456px;
+    object-fit: cover;
+    position: absolute;
+    top: 663px;
+    width: 160px;
+  }
+
+  .physic-course .x-2 {
+    height: 168px;
+    left: 832px;
+    object-fit: cover;
+    position: absolute;
+    top: 605px;
+    width: 166px;
+  }
+
+  .physic-course .x-3 {
+    height: 191px;
+    left: 1088px;
+    object-fit: cover;
+    position: absolute;
+    top: 727px;
+    width: 190px;
+  }
+
+  .physic-course .x-4 {
+    height: 206px;
+    left: 1311px;
+    object-fit: cover;
+    position: absolute;
+    top: 346px;
+    width: 192px;
+  }
+
+  .physic-course .x-5 {
+    height: 216px;
+    left: 1686px;
+    object-fit: cover;
+    position: absolute;
+    top: 579px;
+    width: 201px;
+  }
+
+  .physic-course .x-6 {
+    height: 220px;
+    left: 2158px;
+    object-fit: cover;
+    position: absolute;
+    top: 469px;
+    width: 204px;
+  }
+

frontend/src/pages/Course/CourseDetail.js

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+import './CourseDetail.css'
+
+import Owl1 from "../../assets/group-51.png"
+import Icon1 from "../../assets/icon1.png"
+import Icon2 from "../../assets/icon2.png"
+import Icon3 from "../../assets/icon3.png"
+import Icon4 from "../../assets/icon4.png"
+import Icon5 from "../../assets/icon5.png"
+import Icon6 from "../../assets/icon6.png"
+import Level1 from "../../assets/x-level1-1.png"
+import Level2 from "../../assets/x-level2-1.png"
+import Level3 from "../../assets/x-level3-1.png"
+import Level4 from "../../assets/x-level4-1.png"
+import Level5 from "../../assets/x-level5-1.png"
+import Level6 from "../../assets/x-level6-1.png"
+import Level7 from "../../assets/x-level7-1.png"
+
+function CourseDetail() {
+  return (
+    <div className="physic-course">
+      <div className="overlap-wrapper">
+        <div className="overlap">
+          <img className="group" alt="Group" src={Owl1} />
+          <div className="navbar">
+            <div className="learn">
+              <div className="div">
+                <img className="icon" alt="Icon" src={Icon2} />
+                <div className="text-wrapper">Học</div>
+              </div>
+            </div>
+            <div className="challenge">
+              <img className="img" alt="Icon" src={Icon3} />
+              <div className="text-wrapper-2">Thử thách</div>
+            </div>
+            <div className="ranking">
+              <div className="overlap-group">
+                <img className="icon-2" alt="Icon" src={Icon4} />
+                <div className="text-wrapper-3">Xếp hạng</div>
+              </div>
+            </div>
+            <div>
+            <Link className="overlap-group-4" to="/forum">
+              <img className="icon-3" alt="Icon" src={Icon5} />
+              <div className="text-wrapper-4">Diễn đàn</div>
+              </Link>
+            </div>
+            <div className="shop">
+              <div className="text-wrapper-5">Cửa hàng</div>
+              <img className="icon-4" alt="Icon" src={Icon6} />
+            </div>
+            <div>
+            <Link className="home" to="/homepage">
+              <div className="text-wrapper-6">Trang chủ</div>
+              <img className="icon-5" alt="Icon" src={Icon1} />
+              </Link>
+            </div>
+          </div>
+          <img className="x" alt="X" src={Level1} />
+          <img className="x-level" alt="X" src={Level2} />
+          <img className="x-2" alt="X" src={Level3} />
+          <img className="x-3" alt="X" src={Level4} />
+          <img className="x-4" alt="X" src={Level5} />
+          <img className="x-5" alt="X" src={Level6} />
+          <img className="x-6" alt="X" src={Level7} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CourseDetail