add frontend demo code

App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

App.js

@@ -0,0 +1,40 @@
+import logo from './logo.svg';
+import './App.css';
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import {Box} from '@mui/material';
+import Header from './components/Header';
+import Footer from './components/Footer';
+import MainPage from './pages/MainPage/Mainpage';
+import GalleryPage from './pages/GalleryPage/GalleryPageMod';
+import RegisterPage from './pages/RegisterPage/RegisterPage';  
+
+import HomePage from './pages/StudentHomepage/StudentHomepage';
+import AssessmentPage from './pages/StudentAssessmentPage/StudentAssessmentPage';
+import ReviewPage from './pages/StudentReviewPage/StudentReviewPage';
+import ChatRoomPage from './pages/ChatRoomPage/ChatRoomPage';
+import CourseLessonPage from './pages/CourseLessonPage/CourseLessonPage';
+
+function App() {
+  return (
+    <Router>
+      <Header />
+      <Routes>
+        <Route path="/" element={<MainPage />} />
+        <Route path="/gallery" element={<GalleryPage />} />  {/* Use the correct component here */}
+        <Route path="/register" element={<RegisterPage />} />  {/* Add this route */}
+        <Route path="/student/home" element={<HomePage />} />
+        <Route path="/student/courses" element={<GalleryPage />} />
+        <Route path="/student/assessments" element={<AssessmentPage />} />
+        <Route path="/student/reviews" element={<ReviewPage />} />
+        <Route path="/chatroom" element={<ChatRoomPage />} />
+        <Route path="/student/course-lesson" element={<CourseLessonPage />} /> 
+        {/* Add more routes as needed */}
+      </Routes>
+      <Footer />
+    </Router>
+  );
+}
+
+export default App;
+

App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

CourseLessonPage/CourseLessonPage.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Box, Typography, IconButton, Paper } from '@mui/material';
+import ReactPlayer from 'react-player';
+import Sidebar from '../../components/Sidebar';
+import { ArrowBack as ArrowBackIcon, ArrowForward as ArrowForwardIcon } from '@mui/icons-material';
+
+const CourseLessonPage = () => {
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <Sidebar />
+      <Box sx={{ flexGrow: 1, p: 4, display: 'flex' }}>
+        {/* Video Pane */}
+        <Box sx={{ width: '960px', height: '640px', maxWidth: '960px', maxHeight: '640px' }}>
+          <ReactPlayer
+            url="https://www.youtube.com/watch?v=wPfC7oAXOE4&pp=ygUfb2x5bXBpY3MgaG9uZyBrb25nIGZlbmNpbmcgZ29sZA%3D%3D"
+            width="100%"
+            height="100%"
+            controls
+          />
+        </Box>
+
+        {/* Right Pane */}
+        <Box sx={{ flexGrow: 1, ml: 4, width: '40%' }}>
+          <Paper sx={{ p: 2 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
+              <IconButton>
+                <ArrowBackIcon />
+              </IconButton>
+              <Typography variant="h6">Chapter 1</Typography>
+              <IconButton>
+                <ArrowForwardIcon />
+              </IconButton>
+            </Box>
+            <Typography variant="body1">
+              Placeholder text for Chapter 1. This is where the content of the chapter will be displayed.
+            </Typography>
+          </Paper>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default CourseLessonPage;

GalleryPage/GalleryPageMod.js

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import {
+  Box,
+  Grid,
+  Typography,
+  Button,
+  Modal,
+  Paper,
+  Divider,
+} from '@mui/material';
+
+const galleryItems = [
+  {
+    image: 'https://via.placeholder.com/300',
+    title: 'Course 1',
+    description: 'Brief description of Course 1.',
+    detailedText: 'This is more detailed information about Course 1.',
+    price: '$99',
+  },
+  {
+    image: 'https://via.placeholder.com/300',
+    title: 'Course 2',
+    description: 'Brief description of Course 2.',
+    detailedText: 'This is more detailed information about Course 2.',
+    price: '$199',
+  },
+  {
+    image: 'https://via.placeholder.com/300',
+    title: 'Course 3',
+    description: 'Brief description of Course 3.',
+    detailedText: 'This is more detailed information about Course 3.',
+    price: '$299',
+  },
+  {
+    image: 'https://via.placeholder.com/300',
+    title: 'Course 4',
+    description: 'Brief description of Course 4.',
+    detailedText: 'This is more detailed information about Course 4.',
+    price: '$299',
+  },
+  {
+    image: 'https://via.placeholder.com/300',
+    title: 'Course 5',
+    description: 'Brief description of Course 5.',
+    detailedText: 'This is more detailed information about Course 5.',
+    price: '$299',
+  },
+  {
+    image: 'https://via.placeholder.com/300',
+    title: 'Course 6',
+    description: 'Brief description of Course 6.',
+    detailedText: 'This is more detailed information about Course 6.',
+    price: '$299',
+  },
+  {
+    image: 'https://via.placeholder.com/300',
+    title: 'Course 7',
+    description: 'Brief description of Course 7.',
+    detailedText: 'This is more detailed information about Course 7.',
+    price: '$299',
+  },
+
+];
+
+const GalleryPage = () => {
+  const [open, setOpen] = useState(false);
+  const [selectedItem, setSelectedItem] = useState(null);
+
+  const handleOpen = (item) => {
+    setSelectedItem(item);
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <Box sx={{ p: 4 }}>
+      <Grid container spacing={4}>
+        {galleryItems.map((item, index) => (
+          <Grid item xs={12} md={4} key={index}>
+            <Paper elevation={3} sx={{ p: 2 }}>
+              <img
+                src={item.image}
+                alt={item.title}
+                style={{ width: '100%', height: 'auto', marginBottom: 8 }}
+              />
+              <Typography variant="h6" gutterBottom>
+                {item.title}
+              </Typography>
+              <Typography variant="body2" color="textSecondary" paragraph>
+                {item.description}
+              </Typography>
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={() => handleOpen(item)}
+              >
+                Learn More
+              </Button>
+            </Paper>
+          </Grid>
+        ))}
+      </Grid>
+
+      {/* Modal for expanded view */}
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-title"
+        aria-describedby="modal-description"
+        sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+      >
+        <Paper elevation={6} sx={{ p: 4, width: '80%', maxWidth: 800 }}>
+          {selectedItem && (
+            <Box display="flex" alignItems="center">
+              <Box sx={{ width: '50%', pr: 2 }}>
+                <img
+                  src={selectedItem.image}
+                  alt={selectedItem.title}
+                  style={{ width: '100%', height: 'auto' }}
+                />
+              </Box>
+              <Box sx={{ width: '50%' }}>
+                <Typography
+                  id="modal-title"
+                  variant="h5"
+                  gutterBottom
+                  align="left"
+                >
+                  {selectedItem.title}
+                </Typography>
+                <Typography
+                  id="modal-description"
+                  variant="body1"
+                  paragraph
+                  align="left"
+                >
+                  {selectedItem.detailedText}
+                </Typography>
+                <Divider sx={{ my: 2 }} />
+                <Box display="flex" justifyContent="space-between">
+                  <Typography variant="h6">{selectedItem.price}</Typography>
+                  <Button variant="contained" color="secondary">
+                    Register
+                  </Button>
+                </Box>
+              </Box>
+            </Box>
+          )}
+        </Paper>
+      </Modal>
+    </Box>
+  );
+};
+
+export default GalleryPage;

MainPage/Mainpage.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Box, Button, Typography, Container } from '@mui/material';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import Slider from 'react-slick';
+import { styled } from '@mui/material/styles';
+
+// Styled button for registration
+const RegisterButton = styled(Button)(({ theme }) => ({
+  backgroundColor: 'yellow',
+  color: 'black',
+  position: 'absolute',
+  bottom: theme.spacing(2),
+  right: theme.spacing(2),
+  '&:hover': {
+    backgroundColor: 'orange',
+  },
+}));
+
+const MainPage = () => {
+  // Settings for the image slideshow
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+  };
+
+  return (
+    <Container maxWidth="lg">
+      {/* Section 1: Image Slideshow with Registration Button */}
+      <Box sx={{ position: 'relative', marginBottom: 4 }}>
+        <Slider {...settings}>
+          <div>
+            <img src="https://via.placeholder.com/1200x400" alt="Slide 1" style={{ width: '100%' }} />
+          </div>
+          <div>
+            <img src="https://via.placeholder.com/1200x400" alt="Slide 2" style={{ width: '100%' }} />
+          </div>
+          <div>
+            <img src="https://via.placeholder.com/1200x400" alt="Slide 3" style={{ width: '100%' }} />
+          </div>
+        </Slider>
+        <RegisterButton variant="contained">Register</RegisterButton>
+      </Box>
+
+      {/* Section 2: Vertical Images with Placeholder Text */}
+      <Box sx={{ display: 'flex', flexDirection: 'row', gap: 2, marginBottom: 4 }}>
+        <Box sx={{ flex: 1, textAlign: 'center' }}>
+          <img src="https://via.placeholder.com/300x300" alt="Image 1" style={{ width: '100%' }} />
+          <Typography variant="body1">Placeholder Text 1</Typography>
+        </Box>
+        <Box sx={{ flex: 1, textAlign: 'center' }}>
+          <img src="https://via.placeholder.com/300x300" alt="Image 2" style={{ width: '100%' }} />
+          <Typography variant="body1">Placeholder Text 2</Typography>
+        </Box>
+        <Box sx={{ flex: 1, textAlign: 'center' }}>
+          <img src="https://via.placeholder.com/300x300" alt="Image 3" style={{ width: '100%' }} />
+          <Typography variant="body1">Placeholder Text 3</Typography>
+        </Box>
+      </Box>
+
+      {/* Section 3: Blank Section */}
+      <Box sx={{ height: 400, border: '1px solid gray' }}>
+        {/* Blank Section */}
+      </Box>
+    </Container>
+  );
+};
+
+export default MainPage;