Skip to content
New issue

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

#

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

Already on GitHub? # to your account

Improved the landing page , added a navigation bar on top , used a better font #197

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Improved the landing page , added a navigation bar on top , used a better font #197

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
fc632ba
Improved older version of Ui and now made a good looking prefesional …
justanuragmaurya Feb 9, 2025
bf6200a
added Poppins font to make it look more professional and readable
justanuragmaurya Feb 9, 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
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: 2 additions & 0 deletions eduaid_web/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
name="description"
content="Web site created using create-react-app"
/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Google fonts link -->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/aossie_logo.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
Expand Down
2 changes: 2 additions & 0 deletions eduaid_web/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ import Text_Input from "./pages/Text_Input";
import Output from "./pages/Output";
import Previous from "./pages/Previous";
import NotFound from "./pages/PageNotFound";
import Navbar from "./pages/Navbar";

function App() {
return (
<BrowserRouter>
<Navbar/>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/question-type" element={<Question_Type />} />
Expand Down
2 changes: 1 addition & 1 deletion eduaid_web/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
Expand Down
172 changes: 51 additions & 121 deletions eduaid_web/src/pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,132 +1,48 @@
import React, { useState, useEffect } from "react";
import React 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 = () => {
const [stars, setStars] = useState(null);
const [error, setError] = useState("");

async function fetchGitHubStars() {
const response = await fetch(
"https://api.github.com/repos/AOSSIE-Org/EduAid"
);
if (!response.ok) {
throw new Error("Failed to fetch stars");
}
const data = await response.json();
return data.stargazers_count;
}

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

useEffect(() => {
const storedStars = localStorage.getItem("stars");
const storedTime = localStorage.getItem("fetchTime");
if (
storedStars &&
storedTime &&
!isMoreThanOneDayOld(parseInt(storedTime))
) {
setStars(parseInt(storedStars));
} else {
fetchGitHubStars()
.then((starCount) => {
setStars(starCount);
localStorage.setItem("stars", starCount);
localStorage.setItem("fetchTime", Date.now().toString());
})
.catch((err) => {
setError("Failed to fetch stars");
});
}
}, []);

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>
<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="min-h-screen bg-black text-white/70">
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center justify-center">
<div className="flex flex-col items-center pt-32 md:pt-28 w-2/3">
<h1 className="text-7xl font-bold bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] text-transparent bg-clip-text">
EduAid
</h1>
<p className="pt-5 text-center">
Powerful and intelligent tool designed to automatically generate
short quizzes on various topics, allowing users to create engaging
and interactive assessments with ease.
</p>
</div>
<div className="flex justify-center w-full pt-10 gap-5 items-center z-10 ">
<div className="bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] p-0.5 rounded-md">
<a href="/question-type">
<button className="bg-black px-4 py-2 rounded-md flex gap-2 items-center">
Get Started <Arrow />{" "}
</button>
</a>
</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 className="w-full flex flex-col items-center mt-5 px-4 p-10">
<div className="relative">
<div className="absolute -inset-10 bg-gradient-to-br from-[#FF005C] via-[#7600F2] to-[#00CBE7] p-10 blur-3xl z-0 opacity-70 rounded-2xl animate-glow" />
<div className="relative z-10">
<div className="w-full max-w-5xl overflow-hidden rounded-lg md:rounded-xl">
<img
src="https://eb7cw7lpb6.ufs.sh/f/y8KqGYrvxK6gUkIkKc9qT5bAjYi1fe9ntJymC08P4IWwqgOH"
alt="Hero image"
/>
</div>
</div>
</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="my-10 z-10 ">
Open-source project , to contribute visit{" "}
<a className="text-blue-500 underline italic" href="#">
@github/aossie/eduaid
</a>
</div>
</div>
Expand All @@ -135,3 +51,17 @@ const Home = () => {
};

export default Home;

const Arrow = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height="16px"
viewBox="0 -960 960 960"
width="24px"
fill="#e8eaed"
>
<path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z" />
</svg>
);
};
75 changes: 75 additions & 0 deletions eduaid_web/src/pages/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import { useEffect, useState } from "react";

export default function Navbar() {
const [stars, setStars] = useState("loading");

async function fetchGitHubStars() { //fetches for stars from github and stores them in the state variable
const response = await fetch(
"https://api.github.com/repos/AOSSIE-Org/EduAid"
);
if (!response.ok) {
throw new Error("Failed to fetch stars");
}
const data = await response.json();
setStars(data.stargazers_count);
return;
}


useEffect(() => {
//calling the fetchGitHubStars() funtion when the component is loaded
fetchGitHubStars();
});

return (
<div className="flex items-center justify-between w-full text-white bg-background/95 backdrop-blur px-10 py-5 fixed z-50 border-b border-white/10">
<div className="flex gap-5 items-center w-[300px]">
<a href="/" className="flex gap-5 items-center">
<img
src="https://avatars.githubusercontent.com/u/38881995?s=200&v=4"
width={40}
alt=""
/>
<h1 className="font-black text-xl text-yellow-500 hidden md:flex">
<h1 className="text-2xl font-bold bg-gradient-to-r from-[#FF005C] via-[#7600F2] to-[#00CBE7] text-transparent bg-clip-text">
EduAid
</h1>
</h1>
</a>
</div>

<div className="hidden gap-5 md:flex flex-1 justify-center">
<a className="hover:scale-105 hover:text-white/70 transition" href="/">
Home
</a>
<a
className="hover:scale-105 hover:text-white/70 transition"
href="/history"
>
Previous Quiz
</a>
<a
className="hover:scale-105 hover:text-white/70 transition"
href="https://github.com/AOSSIE-Org/EduAid#eduaid-ai-quiz-generation-"
target="__blank"
>
About
</a>
<a
className="hover:scale-105 hover:text-white/70 transition"
href="https://github.com/AOSSIE-Org/EduAid"
target="__blank"
>
Github
</a>
</div>

<div className="w-[300px] flex justify-end">
<div className="bg-black border-white/10 border py-2 px-5 rounded-md hover:scale-105 transition flex gap-1">
<span className="hidden md:block">Github Stars: </span>
<span className="font-bold px-2">{stars}</span>⭐
</div>
</div>
</div>
);
}
17 changes: 2 additions & 15 deletions eduaid_web/src/pages/Output.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,20 +347,7 @@ const Output = () => {
<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">
<div className="font-bold text-xl text-white mt-24 mx-2">
Generated Questions
</div>
<div className="flex-1 overflow-y-auto scrollbar-hide">
Expand Down Expand Up @@ -423,7 +410,7 @@ const Output = () => {
</button>
<div
id="pdfDropdown"
className="hidden absolute bottom-full mb-1 bg-[#02000F] shadow-md text-white rounded-lg shadow-lg"
className="hidden absolute bottom-full mb-1 bg-[#02000F] shadow-md text-white rounded-lg"
>
<button
className="block w-full text-left px-4 py-2 hover:bg-gray-500 rounded-t-lg"
Expand Down
Loading