Add Assignment Page and Update Header; Replace Background Image

src/components/Header.jsx

@@ -17,6 +17,9 @@ const Header = () => {
           <li>
             <Link to="/login">Login</Link>
           </li>
+          <li>
+            <Link to="/assignment">Assignment</Link>
+          </li>
         </ul>
       </nav>
     </header>

src/pages/AssignmentPage.jsx

@@ -0,0 +1,107 @@
+// Page - Assignment
+import { useEffect, useState } from 'react';
+import '../scss/styles.scss';
+
+const AssignmentPage = () => {
+    const [files, setFiles] = useState([]);
+    
+    useEffect(() => {
+        document.title = 'Assignment';
+    }, []);
+
+    const handleFileChange = (e) => {
+        if (e.target.files) {
+            const newFiles = Array.from(e.target.files);
+            setFiles(prevFiles => [...prevFiles, ...newFiles]);
+        }
+    };
+
+    const handleRemoveFile = (index) => {
+        setFiles(prevFiles => prevFiles.filter((_, i) => i !== index));
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Here you would typically send the files to a server
+        console.log('Files to submit:', files);
+        alert('Assignment submitted successfully!');
+    };
+
+    return (
+        <main className="assignment-page">
+            <section>
+                <div className="assignment-header">
+                    <h2>Assignment Submission</h2>
+                    <div className="due-date">
+                        <p>Due on Jan 16, 2025 11:59 PM</p>
+                    </div>
+                </div>
+                
+                <div className="assignment-container">
+                    <div className="assignment-info">
+                        <h3>Submit Assignment</h3>
+                        <p className="files-count">({files.length}) file(s) to submit</p>
+                        <p className="submission-note">After uploading, you must click Submit to complete the submission.</p>
+                    </div>
+                    
+                    <div className="file-upload-section">
+                        <div className="upload-buttons">
+                            <label className="file-upload-btn">
+                                <input 
+                                    type="file" 
+                                    multiple 
+                                    onChange={handleFileChange} 
+                                    style={{ display: 'none' }}
+                                />
+                                Add a File
+                            </label>
+                            <button className="record-audio-btn">Record Audio</button>
+                            <button className="record-video-btn">Record Video</button>
+                        </div>
+                        
+                        {files.length > 0 && (
+                            <div className="files-list">
+                                <h4>Selected Files:</h4>
+                                <ul>
+                                    {files.map((file, index) => (
+                                        <li key={index} className="file-item">
+                                            <span className="file-name">{file.name}</span>
+                                            <span className="file-size">({(file.size / 1024).toFixed(2)} KB)</span>
+                                            <button 
+                                                className="remove-file-btn"
+                                                onClick={() => handleRemoveFile(index)}
+                                            >
+                                                Remove
+                                            </button>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </div>
+                        )}
+                    </div>
+                    
+                    <div className="comments-section">
+                        <h4>Comments</h4>
+                        <textarea 
+                            placeholder="Add a comment (optional)"
+                            rows="4"
+                        ></textarea>
+                    </div>
+                    
+                    <div className="submission-buttons">
+                        <button 
+                            className="submit-btn"
+                            onClick={handleSubmit}
+                            disabled={files.length === 0}
+                        >
+                            Submit
+                        </button>
+                        <button className="cancel-btn">Cancel</button>
+                    </div>
+                </div>
+            </section>
+        </main>
+    );
+};
+
+export default AssignmentPage;

src/routers/AppRouter.jsx

@@ -11,6 +11,7 @@ import HomePage from "../pages/HomePage";
 import LoginPage from "../pages/LoginPage";
 import PageCodeEditor from "../pages/CodeEditor";
 import PageNotFound from "../pages/PageNotFound";
+import AssignmentPage from "../pages/AssignmentPage";
 import Hero from "../components/Hero";
 import Navbar from "../components/Navbar";
 import Services from "../components/Services";
@@ -39,6 +40,7 @@ const AppRouter = () => {
               </ProtectedRoute>
             }
           />
+          <Route path="/assignment" element={<AssignmentPage />} />
           <Route path="*" element={<PageNotFound />} />
         </Routes>
 

src/scss/page/_login.scss

@@ -29,7 +29,7 @@
 
 body {
   background: transparent;
-  background-image: url("../../../public/images/grid-background.png");
+  background-image: url("../../../public/images/grid-background.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

src/scss/page/assignment.scss

@@ -0,0 +1,198 @@
+// Assignment Page Styling
+
+.assignment-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+
+  section {
+    width: 100%;
+    max-width: 900px;
+  }
+
+  .assignment-header {
+    margin-bottom: 2rem;
+    border-bottom: 1px solid #e0e0e0;
+    padding-bottom: 1rem;
+
+    h2 {
+      font-size: 3rem;
+      margin-bottom: 1rem;
+      color: #ffffff;
+    }
+
+    .due-date {
+      color: #c6c6c6;
+      font-size: 1.2rem;
+    }
+  }
+
+  .assignment-container {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 2rem;
+
+    .assignment-info {
+      margin-bottom: 2rem;
+
+      h3 {
+        font-size: 1.4rem;
+        margin-bottom: 0.5rem;
+        color: #333;
+      }
+
+      .files-count {
+        font-size: 1rem;
+        margin-bottom: 0.5rem;
+      }
+
+      .submission-note {
+        font-size: 0.9rem;
+        color: #666;
+      }
+    }
+
+    .file-upload-section {
+      margin-bottom: 2rem;
+
+      .upload-buttons {
+        display: flex;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+        flex-wrap: wrap;
+
+        .file-upload-btn,
+        .record-audio-btn,
+        .record-video-btn {
+          background-color: #f5f5f5;
+          border: 1px solid #ddd;
+          border-radius: 4px;
+          padding: 0.6rem 1rem;
+          cursor: pointer;
+          font-size: 0.9rem;
+          transition: all 0.2s ease;
+          color: #333;
+
+          &:hover {
+            background-color: #e9e9e9;
+          }
+        }
+      }
+
+      .files-list {
+        background-color: #f9f9f9;
+        border-radius: 6px;
+        padding: 1rem;
+
+        h4 {
+          margin-bottom: 0.8rem;
+          font-size: 1rem;
+        }
+
+        ul {
+          list-style: none;
+          padding: 0;
+
+          .file-item {
+            display: flex;
+            align-items: center;
+            padding: 0.5rem 0;
+            border-bottom: 1px solid #eee;
+
+            &:last-child {
+              border-bottom: none;
+            }
+
+            .file-name {
+              flex-grow: 1;
+              font-weight: 500;
+            }
+
+            .file-size {
+              color: #777;
+              margin: 0 1rem;
+              font-size: 0.8rem;
+            }
+
+            .remove-file-btn {
+              background-color: transparent;
+              border: none;
+              color: #ff5252;
+              cursor: pointer;
+              font-size: 0.8rem;
+              padding: 0.3rem 0.6rem;
+
+              &:hover {
+                text-decoration: underline;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .comments-section {
+      margin-bottom: 2rem;
+
+      h4 {
+        margin-bottom: 0.8rem;
+        font-size: 1rem;
+      }
+
+      textarea {
+        width: 100%;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        padding: 0.8rem;
+        font-family: inherit;
+        resize: vertical;
+
+        &:focus {
+          outline: none;
+          border-color: #4a90e2;
+        }
+      }
+    }
+
+    .submission-buttons {
+      display: flex;
+      gap: 1rem;
+
+      .submit-btn,
+      .cancel-btn {
+        padding: 0.7rem 1.5rem;
+        border-radius: 4px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+
+      .submit-btn {
+        background-color: #4a90e2;
+        color: white;
+        border: none;
+
+        &:hover {
+          background-color: #3a7bc8;
+        }
+
+        &:disabled {
+          background-color: #a0c3e8;
+          cursor: not-allowed;
+        }
+      }
+
+      .cancel-btn {
+        background-color: transparent;
+        border: 1px solid #ddd;
+        color: #666;
+
+        &:hover {
+          background-color: #f5f5f5;
+        }
+      }
+    }
+  }
+}

src/scss/styles.scss

@@ -13,6 +13,7 @@
 @use "./page//home";
 @use "./page//login";
 @use "./page/code_editor";
+@use "./page/assignment";
 
 // Utilities
 @use "./utilities/utility-classes";