dwd-projects/bs-p2
1
0
Fork 0
generated from dwd/boilarplate-remix-tailwind-antd
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

s1

Browse Source
This commit is contained in:
Suvodip
2024-08-07 11:13:48 +05:30
parent d049614691
commit 2512a918fb
16 changed files with 660 additions and 510 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/routes/ai-quiz.tsx
View File

@@ -36,7 +36,7 @@ function toggleSection() {
export default function Index() {
const [percent, setPercent] = useState(0);
const [secondsLeft, setSecondsLeft] = useState(5);
const [secondsLeft, setSecondsLeft] = useState(10);
useEffect(() => {
const interval = setInterval(() => {
@@ -45,7 +45,7 @@ export default function Index() {
clearInterval(interval);
return 100;
}
return Math.round(prevPercent + (100 / 5)); // Round percentage
return Math.round(prevPercent + (100 / 10)); // Round percentage
});
setSecondsLeft((prevSeconds) => {
if (prevSeconds <= 1) {
@@ -76,13 +76,13 @@ export default function Index() {
<label className="text-[18px] font-[500] my-4" htmlFor="textToUse">Text to Use</label>
<p className="text-[16px] font-[500] text-[#9D9D9D]"><span id="letterLength"></span><span>/2000</span></p>
</div>
<textarea onChange={letterCount} name="queryMessage" id="queryMessage" rows="6" maxLength="200" className="focus:outline-none border-[1px] border-[#CFCFCF] rounded-[8px] p-6" placeholder="Enter the topic you’d like to generate a quiz for."></textarea>
<textarea onChange={letterCount} name="queryMessage" id="queryMessage" rows={6} maxLength={2000} className="focus:outline-none border-[1px] border-[#CFCFCF] rounded-[8px] p-6" placeholder="Enter the topic you’d like to generate a quiz for."></textarea>
</div>
<h2 className="text-[18px] font-[500] my-4">Trending</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div className="border-[1px] border-[#CFCFCF] rounded-[8px]">
<div className="bg-[#C5DCFF] rounded-t-[8px] flex justify-center place-items-center">
<img className="p-6" src="../../assets/quiz-logo.svg" alt="" />
<img className="p-6" src="/assets/quiz-logo.svg" alt="" />
</div>
<div className="flex flex-col justify-center px-3 py-2">
<h3 className="text-[14px] font-[500] ">Dr. Marie Montessori Life Journey</h3>
@@ -91,7 +91,7 @@ export default function Index() {
</div>
<div className="border-[1px] border-[#CFCFCF] rounded-[8px]">
<div className="bg-[#E2C5FF] rounded-t-[8px] flex justify-center place-items-center">
<img className="p-6" src="../../assets/quiz-logo.svg" alt="" />
<img className="p-6" src="/assets/quiz-logo.svg" alt="" />
</div>
<div className="flex flex-col justify-center px-3 py-2">
<h3 className="text-[14px] font-[500]">Montessori Methods</h3>
@@ -100,7 +100,7 @@ export default function Index() {
</div>
<div className="border-[1px] border-[#CFCFCF] rounded-[8px]">
<div className="bg-[#FFD0C5] rounded-t-[8px] flex justify-center place-items-center">
<img className="p-6" src="../../assets/quiz-logo.svg" alt="" />
<img className="p-6" src="/assets/quiz-logo.svg" alt="" />
</div>
<div className="flex flex-col justify-center px-3 py-2">
<h3 className="text-[14px] font-[500] ">Practical Methods</h3>
@@ -112,17 +112,17 @@ export default function Index() {
<div className="flex flex-col md:flex-row gap-[10px]">
<div className="drop-shadow-2xl">
<button className="inline-flex justify-center place-items-center border-[1px] border-[#CFCFCF] rounded-[8px] px-[20px] py-[12px] text-[16px] font-[500] text-[#525252]">
<img src="../../assets/button-icon.svg" alt="" /> &nbsp; Simplify Questions
<img src="/assets/button-icon.svg" alt="" /> &nbsp; Simplify Questions
</button>
</div>
<div className="drop-shadow-2xl">
<button className="inline-flex justify-center place-items-center border-[1px] border-[#CFCFCF] rounded-[8px] px-[20px] py-[12px] text-[16px] font-[500] text-[#525252]">
<img src="../../assets/button-icon.svg" alt="" /> &nbsp; Similar Topics
<img src="/assets/button-icon.svg" alt="" /> &nbsp; Similar Topics
</button>
</div>
<div className="drop-shadow-2xl">
<button className="inline-flex justify-center place-items-center border-[1px] border-[#CFCFCF] rounded-[8px] px-[20px] py-[12px] text-[16px] font-[500] text-[#525252]">
<img src="../../assets/button-icon.svg" alt="" /> &nbsp; Make it fun & easy
<img src="/assets/button-icon.svg" alt="" /> &nbsp; Make it fun & easy
</button>
</div>
</div>
@@ -138,9 +138,9 @@ export default function Index() {
<button onClick={toggleSection} className="px-[40px] py-[12px] text-[18px] font-[600] text-[#FFF] rounded-[10px] bg-[#000]">Generate Quiz</button>
</div>
</section>
<section id="loadingSection" style={{display: 'none'}} className="container mx-auto max-w-[894px] shadow-xl rounded-xl px-10 py-8 my-8">
<section id="loadingSection" style={{display: 'none'}} className="container mx-auto max-w-[894px] shadow-xl rounded-xl px-10 py-8 my-8 mt-[200px]">
<div className="flex flex-col justify-center place-items-center my-auto ">
<img src="../../assets/robot.png" alt="" />
<img src="/assets/robot.png" alt="" />
<h2 className="text-[24px] font-[500] py-3">Generating Quiz</h2>
<p className="text-[14px] font-[400] text-[#525252]">This usually takes <span>{secondsLeft}</span> seconds</p>
<div className='w-full sm:w-1/2'>