Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

This PR addresses and resolves the issues as per the specified requirements: #151 #138 #150 #154

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

This PR addresses and resolves the issues as per the specified requirements: #151 #138 #150 #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 18 additions & 4 deletions eduaid_web/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion eduaid_web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,4 +43,4 @@
"devDependencies": {
"tailwindcss": "^3.4.9"
}
}
}
3 changes: 2 additions & 1 deletion eduaid_web/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,5 @@ code {
border-image: linear-gradient(to right, #ff005c, #7600f2, #00cbe7);
border-image-slice: 1;
border-radius: 2rem;
}
}

30 changes: 30 additions & 0 deletions eduaid_web/src/pages/Home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}

107 changes: 86 additions & 21 deletions eduaid_web/src/pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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;
Expand All @@ -29,6 +33,7 @@ const Home = () => {
useEffect(() => {
const storedStars = localStorage.getItem("stars");
const storedTime = localStorage.getItem("fetchTime");

if (
storedStars &&
storedTime &&
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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 ? (
Expand Down
11 changes: 11 additions & 0 deletions eduaid_web/src/pages/Text_Input.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand Down