ADD: Brightness functionality

frontend/src/components/Settings/QuickSettings.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import ThemeSetting from "./ThemeSetting";
 import { useTheme } from "../../context/ThemeContext";
 import { useQuickSettings } from "../../context/QuickSettingsContext";
+import Screenshot from "../functionality/Screenshot"
+import BrightnessControl from "../functionality/BrightnessControl";
 
 const QuickSettings: React.FC = () => {
   const { theme } = useTheme();
@@ -19,6 +21,9 @@ const QuickSettings: React.FC = () => {
       <div id="quick-settings-menu" className="flex flex-col flex-grow my-8 gap-4">
         <ThemeSetting />
       </div>
+        <Screenshot />
+        <BrightnessControl />
+
     </div>
   );
 };

frontend/src/components/functionality/BrightnessControl.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { useBrightness } from "../../context/BrightnessContext";
+
+const BrightnessControl: React.FC = () => {
+  const { brightness, setBrightness } = useBrightness();
+
+  const handleBrightnessChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    {/* Set brightness based on the value. Calls BrightnessContext too */}
+    setBrightness(Number(event.target.value));
+  };
+
+  return (
+    <div className="flex flex-col items-center p-4">
+      <h2 className="text-lg font-semibold mb-2">Brightness Control</h2>
+        {/* Changes based on the range of input */}
+      <input
+        type="range"
+        min="0"
+        max="200"
+        value={brightness}
+        onChange={handleBrightnessChange}
+        className="w-60 cursor-pointer"
+      />
+
+      <p className="mt-2 text-sm">Brightness: {brightness}%</p>
+    </div>
+  );
+};
+
+export default BrightnessControl;

frontend/src/components/functionality/Screenshot.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import html2canvas from "html2canvas";
+
+const Screenshot: React.FC = () => {
+  const captureScreenshot = async () => {
+    const targetElement = document.getElementById("root"); // Capture entire HTML document
+
+    if (!targetElement) {
+      console.error("Target element not found");
+      return;
+    }
+
+    try {
+      // Ensure everything is visible before capturing
+      document.body.style.overflow = "visible";
+      document.documentElement.style.overflow = "visible";
+
+      const canvas = await html2canvas(targetElement, {
+        useCORS: true, // Enables external image capture (CORS-safe)
+        scale: 2, // Higher resolution screenshot
+        backgroundColor: "#fff", // Ensures non-transparent background
+        windowWidth: document.documentElement.scrollWidth, // Capture full width
+        windowHeight: document.documentElement.scrollHeight, // Capture full height
+      });
+
+      // Restore overflow settings
+      document.body.style.overflow = "";
+      document.documentElement.style.overflow = "";
+
+      const image = canvas.toDataURL("image/png");
+      const link = document.createElement("a");
+      link.href = image;
+      link.download = `screenshot-${Date.now()}.png`;
+      link.click();
+    } catch (error) {
+      console.error("Screenshot capture failed:", error);
+    }
+  };
+
+  return (
+    <button
+      onClick={captureScreenshot}
+      className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition"
+    >
+      Capture Full Page Screenshot
+    </button>
+  );
+};
+
+export default Screenshot;