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

revamped whole UI #141

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+315 −446
Open

revamped whole UI #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8e8c40c
revamped whole UI
Rishab87 Jan 13, 2025
a4a5e84
changed app.test.js
Rishab87 Jan 13, 2025
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
19 changes: 16 additions & 3 deletions eduaid_web/src/App.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,21 @@
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
test('renders EduAid title and start button', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();

// Check for the EduAid title
const eduElement = screen.getByText(/Edu/i);
const aidElement = screen.getByText(/Aid/i);
expect(eduElement).toBeInTheDocument();
expect(aidElement).toBeInTheDocument();

// Check for the "Let's get Started" button
const startButton = screen.getByText(/Let's get Started/i);
expect(startButton).toBeInTheDocument();

// Check for the description text
const descriptionElement = screen.getByText(/A tool that can auto-generate short quizzes based on user input/i);
expect(descriptionElement).toBeInTheDocument();
});

8 changes: 0 additions & 8 deletions eduaid_web/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,4 @@ body {
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

.border-gradient {
border-width: 2px;
border-style: solid;
border-image: linear-gradient(to right, #ff005c, #7600f2, #00cbe7);
border-image-slice: 1;
border-radius: 2rem;
}
133 changes: 51 additions & 82 deletions eduaid_web/src/pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
import React, { useState, useEffect } from "react";
import "../index.css";
import logo from "../assets/aossie_logo.png";
import starsImg from "../assets/stars.png";
import arrow from "../assets/arrow.png";
import gitStar from "../assets/gitStar.png";
import { FaGithub } from "react-icons/fa";

const Home = () => {
Expand All @@ -22,7 +18,7 @@ const Home = () => {
}

function isMoreThanOneDayOld(timestamp) {
const oneDay = 24 * 60 * 60 * 1000; // One day in milliseconds
const oneDay = 24 * 60 * 60 * 1000;
return Date.now() - timestamp > oneDay;
}

Expand All @@ -49,89 +45,62 @@ const Home = () => {
}, []);

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>
<img src={logo} alt="logo" className="w-24 my-6 mx-6 block" />
<div className="text-7xl text-center font-extrabold">
<span className="bg-gradient-to-r from-[#FF005C] to-[#7600F2] text-transparent bg-clip-text">
Edu
</span>
<span className="bg-gradient-to-r from-[#7600F2] to-[#00CBE7] text-transparent bg-clip-text">
Aid
</span>
<div className="min-h-screen bg-white flex flex-col justify-between">
<header className="p-4 sm:p-6">
<img src={logo} alt="AOSSIE logo" className="w-16 sm:w-24" />
</header>

<main className="flex-grow flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
<h1 className="text-4xl sm:text-5xl font-bold mb-4 sm:mb-6">
<span className="text-green-600">Edu</span>
<span className="text-yellow-500">Aid</span>
</h1>

<p className="text-lg sm:text-xl text-center mb-6 sm:mb-8 max-w-2xl">
A tool that can auto-generate short quizzes based on user input
</p>

<div className="space-y-3 sm:space-y-4 text-center mb-8 sm:mb-12 w-full max-w-md">
<div className="bg-yellow-100 rounded-lg p-3 hover:scale-90 transition-all duration-200">
<span className="font-semibold">Doc/Audio Input</span>
</div>
<div className="text-white text-[1.5rem] text-center my-4">
<div>A tool that can auto-generate short quizzes</div>
<div className="flex text-center justify-center gap-4">
based on user input{" "}
<img src={starsImg} width={32} height={12} alt="" />
</div>
<div className="bg-yellow-100 rounded-lg p-3 hover:scale-90 transition-all duration-200">
<span className="font-semibold">In-depth questions gen</span>
</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
</div>
</div>
</div>
<div className="bg-yellow-100 rounded-lg p-3 hover:scale-90 transition-all duration-200">
<span className="font-semibold">Dynamic Google Form Integration</span>
</div>
<div className="flex justify-center gap-6">
<div className="mt-8 rounded-2xl">
<a href="question-type">
<button className="items-center text-lg flex justify-center gap-4 text-white px-6 py-3 mx-auto mt-6 border-gradient hover:wave-effect rounded-md">
Let’s get Started{" "}
<img src={arrow} width={28} height={24} alt="" />
</button>
</a>
</div>
<div className="mt-8 rounded-2xl">
<a href="history">
<button className="items-center text-lg flex justify-center gap-4 text-white px-6 py-3 mx-auto mt-6 border-gradient hover:wave-effect rounded-md">
Your previous Work!
<img src={arrow} width={28} height={24} alt="" />
</button>
</a>
</div>
</div>
<a
href="https://github.com/AOSSIE-Org/EduAid"
target="_blank"
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">
<img src={gitStar} className="" width={28} height={12} alt="" />
<div className="text-white font-semibold">
{stars !== null ? (
<span className="flex text-2xl">
{stars}
<FaGithub size={36} className="ml-6" />
</span>
) : (
<span>{error}</span>
)}
</div>
</div>
</div>

<div className="flex flex-col sm:flex-row gap-4 w-full max-w-md">
<a href="question-type" className="w-full sm:w-1/2">
<button className="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-4 rounded transition duration-300">
Let's get Started
</button>
</a>
<a href="history" className="w-full sm:w-1/2">
<button className="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-4 rounded transition duration-300">
Your previous Work!
</button>
</a>
</div>
</div>
</main>

<footer className="p-4 sm:p-6 flex justify-center">
<a
href="https://github.com/AOSSIE-Org/EduAid"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg transition duration-300"
>
<FaGithub size={24} />
<span className="font-semibold">
{stars !== null ? stars : error}
</span>
</a>
</footer>
</div>
);
};

export default Home;
export default Home;
141 changes: 63 additions & 78 deletions eduaid_web/src/pages/Output.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react";
import { PDFDocument } from "pdf-lib";
import "../index.css";
import logo from "../assets/aossie_logo.png";
import { FaFilePdf, FaGoogle } from "react-icons/fa";

const Output = () => {
const [qaPairs, setQaPairs] = useState([]);
Expand Down Expand Up @@ -244,87 +244,72 @@ const Output = () => {
};

return (
<div className="popup w-full h-full bg-[#02000F] flex justify-center items-center">
<div className="w-full h-full bg-cust bg-opacity-50 bg-custom-gradient">
<div className="flex flex-col h-full">
<a href="/">
<div className="flex items-end gap-[2px]">
<img src={logo} alt="logo" className="w-16 my-4 ml-4 block" />
<div className="text-2xl mb-3 font-extrabold">
<span className="bg-gradient-to-r from-[#FF005C] to-[#7600F2] text-transparent bg-clip-text">
Edu
</span>
<span className="bg-gradient-to-r from-[#7600F2] to-[#00CBE7] text-transparent bg-clip-text">
Aid
</span>
</div>
</div>
</a>
<div className="font-bold text-xl text-white mt-3 mx-2">
Generated Questions
<div className="min-h-screen bg-white flex flex-col">
<header className="bg-green-50 p-4 flex justify-between items-center">
<a href="/" className="flex items-center gap-2">
<img src={logo} alt="logo" className="w-12 sm:w-16" />
<div className="text-xl sm:text-2xl font-extrabold">
<span className="text-green-600">Edu</span>
<span className="text-yellow-500">Aid</span>
</div>
<div className="flex-1 overflow-y-auto scrollbar-hide">
{qaPairs &&
qaPairs.map((qaPair, index) => {
const combinedOptions = qaPair.options
? [...qaPair.options, qaPair.answer]
: [qaPair.answer];
const shuffledOptions = shuffleArray(combinedOptions);
return (
<div
key={index}
className="px-2 bg-[#d9d9d90d] border-black border my-1 mx-2 rounded-xl py-2"
>
<div className="text-[#E4E4E4] text-sm">
Question {index + 1}
</div>
<div className="text-[#FFF4F4] text-[1rem] my-1">
{qaPair.question}
</div>
{qaPair.question_type !== "Boolean" && (
<>
<div className="text-[#E4E4E4] text-sm">Answer</div>
<div className="text-[#FFF4F4] text-[1rem]">
{qaPair.answer}
</div>
{qaPair.options && qaPair.options.length > 0 && (
<div className="text-[#FFF4F4] text-[1rem]">
{shuffledOptions.map((option, idx) => (
<div key={idx}>
<span className="text-[#E4E4E4] text-sm">
Option {idx + 1}:
</span>{" "}
<span className="text-[#FFF4F4] text-[1rem]">
{option}
</span>
</div>
))}
</div>
)}
</>
</a>
<h1 className="text-lg sm:text-xl font-bold text-gray-800">Generated Questions</h1>
</header>

<main className="flex-grow p-4 sm:p-6 lg:p-8 overflow-y-auto">
<div className="space-y-4 mb-8">
{qaPairs && qaPairs.map((qaPair, index) => {
const combinedOptions = qaPair.options
? [...qaPair.options, qaPair.answer]
: [qaPair.answer];
const shuffledOptions = shuffleArray(combinedOptions);
return (
<div
key={index}
className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 shadow-sm"
>
<h2 className="text-lg font-semibold text-gray-800 mb-2">
Question {index + 1}
</h2>
<p className="text-gray-700 mb-2">{qaPair.question}</p>
{qaPair.question_type !== "Boolean" && (
<>
<h3 className="font-semibold text-gray-700 mt-2 mb-1">Answer</h3>
<p className="text-gray-600 mb-2">{qaPair.answer}</p>
{qaPair.options && qaPair.options.length > 0 && (
<div>
<h3 className="font-semibold text-gray-700 mb-1">Options</h3>
<ul className="list-disc list-inside text-gray-600">
{shuffledOptions.map((option, idx) => (
<li key={idx}>{option}</li>
))}
</ul>
</div>
)}
</div>
);
})}
</div>
<div className="items-center flex justify-center gap-6 mx-auto">
<button
className="bg-[#518E8E] items-center flex gap-1 my-2 font-semibold text-white px-2 py-2 rounded-xl"
onClick={generateGoogleForm}
>
Generate Google form
</button>
<button
className="bg-[#518E8E] items-center flex gap-1 my-2 font-semibold text-white px-2 py-2 rounded-xl"
onClick={generatePDF}
>
Generate PDF
</button>
</div>
</>
)}
</div>
);
})}
</div>
</div>
</main>

<footer className="bg-green-50 p-4 flex justify-center gap-4">
<button
className="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 flex items-center gap-2"
onClick={generateGoogleForm}
>
<FaGoogle /> Generate Google Form
</button>
<button
className="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded transition duration-300 flex items-center gap-2"
onClick={generatePDF}
>
<FaFilePdf /> Generate PDF
</button>
</footer>
</div>
);
};

export default Output;
export default Output;
Loading