AOSSIE-Org#151 AOSSIE-Org#138 AOSSIE-Org#150

These active are now fixed

eduaid_web/package.json

@@ -43,4 +43,4 @@
   "devDependencies": {
     "tailwindcss": "^3.4.9"
   }
-}
+}

eduaid_web/src/index.css

@@ -22,4 +22,5 @@ code {
   border-image: linear-gradient(to right, #ff005c, #7600f2, #00cbe7);
   border-image-slice: 1;
   border-radius: 2rem;
-}
+}
+

eduaid_web/src/pages/Home.css

@@ -0,0 +1,30 @@
+/* Side Panel Styles */
+.side-panel {
+    background-color: #1e1e2f;
+    color: white;
+    padding: 20px;
+    width: 250px; /* Narrow side panel */
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    transition: transform 0.3s ease-in-out;
+    transform: translateX(-100%); /* Hidden by default */
+    box-shadow: 4px 0px 6px rgba(0, 0, 0, 0.3); /* Subtle shadow */
+    border-radius: 0 20px 20px 0;
+  }
+
+  .side-panel.open {
+    transform: translateX(0); /* Slide in */
+  }
+
+  .side-panel ul {
+    padding: 0;
+    list-style: none;
+  }
+
+  .side-panel ul li {
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+

eduaid_web/src/pages/Home.jsx

@@ -9,7 +9,10 @@ import { FaGithub } from "react-icons/fa";
 const Home = () => {
   const [stars, setStars] = useState(null);
   const [error, setError] = useState("");
+  const [isSidePanelOpen, setIsSidePanelOpen] = useState(false); // State to toggle side panel
+  const [pastQuizzes, setPastQuizzes] = useState([]); // State to hold past quizzes
 
+  // Function to fetch GitHub stars
   async function fetchGitHubStars() {
     const response = await fetch(
       "https://api.github.com/repos/AOSSIE-Org/EduAid"
@@ -21,6 +24,7 @@ const Home = () => {
     return data.stargazers_count;
   }
 
+  // Function to check if data is older than a day
   function isMoreThanOneDayOld(timestamp) {
     const oneDay = 24 * 60 * 60 * 1000; // One day in milliseconds
     return Date.now() - timestamp > oneDay;
@@ -29,6 +33,7 @@ const Home = () => {
   useEffect(() => {
     const storedStars = localStorage.getItem("stars");
     const storedTime = localStorage.getItem("fetchTime");
+
     if (
       storedStars &&
       storedTime &&
@@ -42,15 +47,76 @@ const Home = () => {
           localStorage.setItem("stars", starCount);
           localStorage.setItem("fetchTime", Date.now().toString());
         })
-        .catch((err) => {
+        .catch(() => {
           setError("Failed to fetch stars");
         });
     }
+
+    // Fetch and display past quizzes from localStorage
+    const storedQuizzes = JSON.parse(localStorage.getItem("pastQuizzes")) || [];
+    setPastQuizzes(storedQuizzes);
   }, []);
 
+  // Toggle the side panel open/close
+  const toggleSidePanel = () => {
+    setIsSidePanelOpen(!isSidePanelOpen);
+  };
+
+  // Reset stored quizzes
+  const resetQuizHistory = () => {
+    localStorage.removeItem("pastQuizzes");
+    setPastQuizzes([]);
+  };
+
   return (
     <div className="popup w-screen h-screen bg-[#02000F] flex justify-center items-center">
-      <div className="w-full h-full bg-cust bg-opacity-50 bg-custom-gradient">
+      <div className="w-full h-full bg-cust bg-opacity-50 bg-custom-gradient relative">
+        {/* Hamburger Menu for Toggling the Side Panel */}
+        <div
+          className="absolute top-4 right-10 text-white text-3xl cursor-pointer"
+          onClick={toggleSidePanel}
+        >
+          &#9776; {/* Hamburger Icon */}
+        </div>
+
+        {/* Side Panel */}
+        {isSidePanelOpen && (
+          <div className="side-panel fixed top-0 left-0 h-full bg-[#0f040c] p-6 w-[250px] z-10 shadow-lg rounded-r-xl">
+            <div className="flex justify-between items-center">
+              <img src={logo} alt="Aossie Logo" className="w-12 mb-4" />
+              <div
+                className="text-white cursor-pointer text-xl"
+                onClick={toggleSidePanel}
+              >
+                &times; {/* Close Icon */}
+              </div>
+            </div>
+
+            <h2 className="text-white text-lg font-semibold mb-4">Past Quizzes</h2>
+            <ul className="text-white text-sm">
+              {pastQuizzes.length === 0 ? (
+                <li>No past quizzes found.</li>
+              ) : (
+                pastQuizzes.slice(0, 5).map((quiz, index) => (
+                  <li key={index} className="mb-2">
+                    <div>
+                      <strong>{quiz.topic}</strong> - {quiz.numQuestions} questions
+                      <br />
+                      Difficulty: {quiz.difficulty} | Created on: {quiz.createdAt}
+                    </div>
+                  </li>
+                ))
+              )}
+            </ul>
+            <button
+              onClick={resetQuizHistory}
+              className="mt-4 text-white bg-red-500 px-4 py-2 rounded-md hover:bg-red-700"
+            >
+              Clear History
+            </button>
+          </div>
+        )}
+
         <div>
           <img src={logo} alt="logo" className="w-24 my-6 mx-6 block" />
           <div className="text-7xl text-center font-extrabold">
@@ -69,26 +135,25 @@ const Home = () => {
             </div>
           </div>
           <div className="flex flex-col items-end">
-            <div className="my-6">
-              <div className="flex items-center rounded-l-2xl w-fit px-6 py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] justify-center gap-4">
-                <img src={starsImg} width={32} height={16} alt="" />
-                <div className="text-white text-xl">Doc/Audio Input</div>
-              </div>
-            </div>
-            <div className="my-4">
-              <div className="flex items-center rounded-l-2xl w-fit px-6 py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] justify-center gap-4">
-                <img src={starsImg} width={32} height={16} alt="" />
-                <div className="text-white text-xl">In-depth questions gen</div>
-              </div>
-            </div>
-            <div className="my-4">
-              <div className="flex items-center rounded-l-2xl w-fit px-6 py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] justify-center gap-4">
-                <img src={starsImg} width={32} height={16} alt="" />
-                <div className="text-white text-xl">
-                  Dynamic Google Form Integration
+            {[{ text: "Doc/Audio Input", id: 1 }, { text: "In-depth questions gen", id: 2 }, { text: "Dynamic Google Form Integration", id: 3 }].map((feature) => (
+              <div
+                key={feature.id}
+                className="my-4 group relative transition-all duration-300 transform hover:scale-105 md:hover:scale-110 hover:shadow-lg hover:bg-opacity-90"
+              >
+                <div className="flex items-center rounded-l-2xl w-fit px-6 py-3 bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] group-hover:shadow-md justify-center gap-4">
+                  <img
+                    src={starsImg}
+                    width={32}
+                    height={16}
+                    alt=""
+                    className="group-hover:animate-spin"
+                  />
+                  <div className="text-white text-xl group-hover:text-[#FFD700]">
+                    {feature.text}
+                  </div>
                 </div>
               </div>
-            </div>
+            ))}
           </div>
           <div className="flex justify-center gap-6">
             <div className="mt-8 rounded-2xl">
@@ -114,7 +179,7 @@ const Home = () => {
             rel="noopener noreferrer"
             className="group"
           >
-            <div className="bg-[#45454599] mt-10 w-fit mx-auto px-4 py-3 rounded-xl flex gap-4 items-center group-hover:bg-[#5a5a5a99] transition-colors duration-300">
+            <div className="bg-[#333333] mt-10 w-fit mx-auto px-4 py-3 rounded-xl flex gap-4 items-center group-hover:bg-[#444444] transition-colors duration-300">
               <img src={gitStar} className="" width={28} height={12} alt="" />
               <div className="text-white font-semibold">
                 {stars !== null ? (

eduaid_web/src/pages/Text_Input.jsx

@@ -161,6 +161,17 @@ const Text_Input = () => {
     }
   };
 
+  const quizzes = JSON.parse(localStorage.getItem('quizzes')) || [];
+const newQuiz = {
+  quizTitle: "Sample Quiz",
+  numberOfQuestions: 10,
+  difficulty: "Medium",
+  creationDate: new Date().toISOString(),
+  context: "This quiz covers advanced Python concepts."
+};
+quizzes.push(newQuiz);
+localStorage.setItem('quizzes', JSON.stringify(quizzes));
+
   return (
     <div className="popup bg-[#02000F] bg-custom-gradient min-h-screen">
       {loading && (