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

Jump to bottom

[Improvement] Revamped UI/UX for the Extension #19

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

[Improvement] Revamped UI/UX for the Extension #19

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
1845898
Initialised new UI
Roaster05 Mar 20, 2024
13223d4
completed ui
Roaster05 Mar 20, 2024
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
Binary file added extension/assets/Vector (1).png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added extension/assets/Vector.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added extension/assets/Wave.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added extension/assets/icons8-upload-to-cloud-24.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added extension/assets/logo1 1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
95 changes: 78 additions & 17 deletions extension/html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,81 @@
<!DOCTYPE html>
<html>
<head>
<title>EduAid: Your AI Quiz Generator</title>
<link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
<link rel="stylesheet" href="../styles/index.css">
</head>
<body>
<header>
<img src="../assets/aossie_logo32.png" alt="AOSSIE logo">
<h1>EduAid</h1>
</header>
<main>
<h2 id="welcome">Welcome to EduAid &#128640;</h2>
<p> A tool that can auto-generate short quizzes based on user input </p>
<button id="start">Fire up!</button>
</main>
<script src="../js/index.js"></script>
</body>

<head>
<title>EduAid: Your AI Quiz Generator</title>
<script src="../js/tailwindcss.js"></script>
<script src="../js/text_input.js"></script>

<style>
.loading-screen {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
}

.dot {
position: relative;
width: 1rem;
height: 1rem;
margin: 0.8em;
border-radius: 50%;
animation: anime 2s ease-out infinite;
}

.dot:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
}

@keyframes anime {
50%, 75% {
transform: scale(2.5);
}
80%, 100% {
opacity: 0;
}
}
</style>
</head>

<body class="w-[320px] h-[260px]">
<div
class="w-full h-full opacity-100 bg-gradient-to-b from-[#63a2c3] to-[#0958a2] flex flex-col items-center -z-10 transition-all duration-1000 shadow border-4 border-[#daf7f7]">
<span
class="absolute top-2 left-3 text-2xl font-bold font-sans text-sky-800">
<div class="flex">

<img width="64" height="64" src="../assets/logo1 1.png"
alt="upload-to-cloud" class="mr-12" />
EduAid
<img src="../assets/Vector.png" alt="upload-to-cloud"
class="ml-12 h-10 w-10" />
</div>
</span>
<div class="absolute top-0 left-0 h-2 w-full -z-10 bg-[#daf7f7]"></div>
<img src="../assets/Wave.png" class="w-full h-20 " />
<div class="mt-4">
<span class="text-2xl font-bold font-sans text-[#daf7f7] ml-8 mb-4">Welcome to EduAid</span>
<h2 class="text-[#daf7f7] text-md text-white-800 ml-4 align-items text-center mt-2">
A tool that can auto-generate short quizzes on the basis of the content provided.
</h2>

<button
class='cursor-pointer bg-[#daf7f7] border-t border-white-300 rounded-xl absolute bottom-1 left-24 gap-2 w-20 h-9 mb-2 ml-4 hover:bg-sky-300'
type='submit' id="start"><span class="text-blue-800 font-bold">Fire Up</span></button>
</div>
</div>

</body>
<script src="../js/index.js"></script>
</html>
114 changes: 84 additions & 30 deletions extension/html/question_generation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,87 @@
<!DOCTYPE html>
<html>
<head>
<title>Question Generation- EduAid</title>
<link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
<link rel="stylesheet" href="../styles/question_generation.css">
</head>

<body>
<header>
<img src="../assets/aossie_logo.png" alt="AOSSIE logo">
<h1>EduAid</h1>
</header>

<main>
<h3>Questions have been generated!</h3>
<div id="button-container">
<button id="view-questions-button">View</button>
<button id="save-button">Save</button>
</div>
<dialog data-modal>
<ul id="modal-question-list"></ul>
<button data-close-modal>&#10060</button>
</dialog>
</main>

<footer>
<button id="back-button">Back</button>
</footer>

<script src="../js/question_generation.js"></script>
</body>

<head>
<title>EduAid: Your AI Quiz Generator</title>
<script src="../js/tailwindcss.js"></script>
<script src="../js/text_input.js"></script>

<style>
.loading-screen {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
}

.dot {
position: relative;
width: 1rem;
height: 1rem;
margin: 0.8em;
border-radius: 50%;
animation: anime 2s ease-out infinite;
}

.dot:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
}

@keyframes anime {
50%, 75% {
transform: scale(2.5);
}
80%, 100% {
opacity: 0;
}
}
</style>
</head>

<body class="w-[320px] h-[370px]">
<div
class="w-full h-full opacity-100 bg-gradient-to-b from-[#63a2c3] to-[#0958a2] flex flex-col items-center -z-10 transition-all duration-1000 shadow border-4 border-[#daf7f7]">
<span
class="absolute top-2 left-3 text-2xl font-bold font-sans text-sky-800">
<div class="flex">

<img width="64" height="64" src="../assets/logo1 1.png"
alt="upload-to-cloud" class="mr-12" />
EduAid
<img src="../assets/Vector.png" alt="upload-to-cloud"
class="ml-12 h-10 w-10" />
</div>
</span>
<div class="absolute top-0 left-0 h-2 w-full -z-10 bg-[#daf7f7]"></div>

<img src="../assets/Wave.png" class="w-full h-20 " />

<span id="mid-text" class="text-xl font-sans text-[#daf7f7] mt-4">Questions have been generated!</span>
<div id="button-container">
<button id="view-questions-button"class='hover:bg-sky-300 cursor-pointer bg-[#daf7f7] border-t border-zinc-300 rounded-xl absolute bottom-1 left-5 gap-2 w-16 h-9 mb-2 ml-4' ><span class="text-blue-800 font-bold">View</span></button>
<button id="save-button" class=' hover:bg-sky-300 cursor-pointer bg-[#daf7f7] border-t border-zinc-300 rounded-xl absolute bottom-1 left-28 gap-2 w-16 h-9 mb-2 ml-4'><span class="text-blue-800 font-bold">Save</span></button>
</div>
<dialog data-modal class="w-full bg-[#daf7f7] h-48 rounded-md border-t border-zinc-300 mb-4 mt-28 absolute p-3">
<ul id="modal-question-list"></ul>
<button data-close-modal><button id="back-button" class='relative hover:bg-sky-300 cursor-pointer bg-gradient-to-b from-[#63a2c3] to-[#0958a2] border-t border-zinc-300 rounded-xl bottom-1 left-24 gap-2 w-16 h-9 mt-4'><span class="text-white font-bold">Close</span></button></button>
</dialog>
</main>

<footer>
<button id="back-button" class=' hover:bg-sky-300 cursor-pointer bg-[#daf7f7] border-t border-zinc-300 rounded-xl absolute bottom-1 left-52 gap-2 w-16 h-9 mb-2 ml-4'><span class="text-blue-800 font-bold">Back</span></button>
</footer>
</div>

</body>
<script src="../js/question_generation.js"></script>
</html>
134 changes: 102 additions & 32 deletions extension/html/text_input.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,105 @@
<!DOCTYPE html>
<html>
<head>
<title>EduAid: Text Input</title>
<!-- <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
<link rel="stylesheet" href="./popup.css"> -->
<script src="../pdfjs-3.9.179-dist/build/pdf.js"></script>
<link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
<link rel="stylesheet" href="../styles/text_input.css">
</head>
<body>
<header>
<img src="../assets/aossie_logo32.png" alt="AOSSIE logo">
<h1>EduAid</h1>
</header>
<main>
<h3>Generate QnA</h3>
<textarea id="text-input" placeholder="Paste your text here"></textarea>
<div>
<input type="file" id="file-upload" accept=".pdf" hidden>
<label for="file-upload" id="upload-label">Upload PDF &#128196</label>
</div>
<div class="button-container">
<button id="back-button">Back</button>
<button id="next-button">Next</button>
</div>
<!-- ******************* -->
<div id="loading-screen" class="loading-screen">
<div class="loading-spinner"></div>
</div>
<!-- ****************** -->
</main>
<script src="../js/text_input.js"></script>
</body>

<head>
<title>EduAid: Your AI Quiz Generator</title>
<script src="../js/tailwindcss.js"></script>
<script src="../js/text_input.js"></script>

<style>
.loading-screen {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
}

.dot {
position: relative;
width: 1rem;
height: 1rem;
margin: 0.8em;
border-radius: 50%;
animation: anime 2s ease-out infinite;
}

.dot:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
}

@keyframes anime {
50%, 75% {
transform: scale(2.5);
}
80%, 100% {
opacity: 0;
}
}
</style>
</head>

<body class="w-[320px] h-[370px]">
<div
class="w-full h-full opacity-100 bg-gradient-to-b from-[#63a2c3] to-[#0958a2] flex flex-col items-center -z-10 transition-all duration-1000 shadow border-4 border-[#daf7f7]">
<span
class="absolute top-2 left-3 text-2xl font-bold font-sans text-sky-800">
<div class="flex">

<img width="64" height="64" src="../assets/logo1 1.png"
alt="upload-to-cloud" class="mr-12" />
EduAid
<img src="../assets/Vector.png" alt="upload-to-cloud"
class="ml-12 h-10 w-10" />
</div>
</span>
<div class="absolute top-0 left-0 h-2 w-full -z-10 bg-[#daf7f7]"></div>

<img src="../assets/Wave.png" class="w-full h-20 " />
<span id="mid-text" class="text-xl font-sans text-[#daf7f7] mt-4">Enter text to generate your
Quiz</span>
<div id="loading-screen" style="display: none;">
<div class="mr-48">
<div class="flex mt-2 absolute mb-4">
<div class="dot"
style="background-color: #0080ff; animation-delay: 0s;"></div>
<div class="dot"
style="background-color: #3399ff; animation-delay: 0.2s;"></div>
<div class="dot"
style="background-color: #66b2ff; animation-delay: 0.4s;"></div>
<div class="dot"
style="background-color: #99ccff; animation-delay: 0.6s;"></div>
<div class="dot"
style="background-color: #cce5ff; animation-delay: 0.8s;"></div>
</div>
</div>
</div>
<textarea id="text-input" placeholder="Paste your text here" class=' w-5/6 bg-[#daf7f7] h-32 rounded-md border-t border-zinc-300 mb-4 mt-44 absolute p-3'></textarea>
<div class="flex">
<input type="file" id="file-upload" accept=".pdf" hidden>
<button for="file-upload"
class='hover:bg-sky-300 cursor-pointer bg-[#daf7f7] border-t border-zinc-300 rounded-xl absolute bottom-1 left-2 gap-2 w-9 h-9 mb-2 ml-4'
type='submit'> <img src="../assets/Vector (1).png"
class="left-3"></button>
<button
class='hover:bg-sky-300 cursor-pointer bg-[#daf7f7] border-t border-zinc-300 rounded-xl absolute bottom-1 left-20 gap-2 w-20 h-9 mb-2 ml-4'
type='submit' id="back-button"><span class="text-blue-800 font-bold">Back</span></button>
<button
class='hover:bg-sky-300 cursor-pointer bg-[#daf7f7] border-t border-zinc-300 rounded-xl absolute bottom-1 left-44 gap-2 w-20 h-9 mb-2 ml-4'
type='submit' id="next-button"><span class="text-blue-800 font-bold">Next</span></button>
</div>

</div>

</body>
<script src="../js/text_input.js"></script>
</html>
1 change: 1 addition & 0 deletions extension/js/question_generation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ document.addEventListener("DOMContentLoaded", function(){
modalQuestionList.appendChild(questionElement)
}
modal.showModal();
document.getElementById("mid-text").textContent="";
});

modalClose.addEventListener("click", function(){
Expand Down
63 changes: 63 additions & 0 deletions extension/js/tailwindcss.js
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion extension/js/text_input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ document.addEventListener("DOMContentLoaded", function () {
const textInput = document.getElementById("text-input");
const fileInput = document.getElementById("file-upload");
const loadingScreen = document.getElementById("loading-screen");
const midText = document.getElementById("mid-text")


fileInput.addEventListener("change", async function () {
Expand All @@ -29,7 +30,8 @@ document.addEventListener("DOMContentLoaded", function () {
});

nextButton.addEventListener("click", async function () {
loadingScreen.style.display = "flex"
midText.textContent="Generating your Quiz"
loadingScreen.style.display = "block"
const inputText = textInput.value;

if (inputText.trim() === "" && fileInput.files.length > 0) {
Expand Down
4 changes: 3 additions & 1 deletion extension/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,9 @@
"./js/text_input.js",
".js/view_questions.js",
"./js/question_generation.js",
"./assets/aossie_logo.png"
"./assets/aossie_logo.png",
"./html/popup.html",
"/js/tailwindcss.js"
],
"matches": ["<all_urls>"]
}
Expand Down
Loading