From c0cc3b13f4424eb562016030a832e3131956e0dc Mon Sep 17 00:00:00 2001 From: Ojas Date: Tue, 25 Mar 2025 22:11:10 -0400 Subject: [PATCH 1/6] This took way too long, I'm sorry --- .../FrontPage/course/Choice.module.css | 80 +++++++++++++++++++ .../_components/FrontPage/course/Course.tsx | 42 ++++++++++ src/app/_components/FrontPage/course/index.ts | 1 + .../_components/FrontPage/index.module.css | 58 ++++++++++++++ src/app/_components/FrontPage/index.tsx | 60 ++++++++++++++ src/app/_components/shared/Header/Header.tsx | 8 +- src/app/front/layout.tsx | 20 +++++ src/app/front/loading.tsx | 3 + src/app/front/page.tsx | 28 +++++++ 9 files changed, 299 insertions(+), 1 deletion(-) create mode 100644 src/app/_components/FrontPage/course/Choice.module.css create mode 100644 src/app/_components/FrontPage/course/Course.tsx create mode 100644 src/app/_components/FrontPage/course/index.ts create mode 100644 src/app/_components/FrontPage/index.module.css create mode 100644 src/app/_components/FrontPage/index.tsx create mode 100644 src/app/front/layout.tsx create mode 100644 src/app/front/loading.tsx create mode 100644 src/app/front/page.tsx diff --git a/src/app/_components/FrontPage/course/Choice.module.css b/src/app/_components/FrontPage/course/Choice.module.css new file mode 100644 index 00000000..196c2c28 --- /dev/null +++ b/src/app/_components/FrontPage/course/Choice.module.css @@ -0,0 +1,80 @@ +.courseCard { + display: flex; + flex-direction: column; + height: 95px; + width: 344px; + justify-content: center; + align-items: center; + border: 2px solid var(--coolDark); + border-radius: 16px; + box-shadow: 0px 4px 0px 0px var(--coolAccentBg); + cursor: pointer; + background: white; + +} + +.selectedcourseContainer { + display: flex; + flex-direction: column; + height: 95px; + width: 344px; + justify-content: center; + align-items: center; + border: 2px solid var(--coolDark); + border-radius: 16px; + box-shadow: 0px 4px 0px 0px black; + cursor: pointer; + background: var(--coolAccentBg); +} + +.correctcourse { + background-color: var(--faintSuccess); + border: 2px solid var(--success); + box-shadow: 0px 4px 0px 0px var(--success); +} + +.incorrectcourse { + background-color: var(--faintFailure); + border: 2px solid var(--failure); + box-shadow: 0px 4px 0px 0px var(--failure); +} + +@media screen and (max-height: 840px) { + .courseContainer, + .selectedcourseContainer { + height: 80px; + } +} +@media screen and (max-height: 750px) { + .courseContainer, + .selectedcourseContainer { + height: 64px; + } +} + +.questionLabel { + font-family: var(--font-poppins), sans-serif; + font-weight: 700; + font-size: 22px; + line-height: 33px; + color: var(--primary); + text-align: left; +} + +.courseText { + font-family: var(--font-poppins), sans-serif; + font-weight: 400; + font-size: 20px; + line-height: 30px; + text-align: center; + color: var(--primary); +} + +.selectedcourseText { + font-family: var(--font-poppins), sans-serif; + font-weight: 400; + font-size: 20px; + line-height: 30px; + text-align: center; + color: white; +} diff --git a/src/app/_components/FrontPage/course/Course.tsx b/src/app/_components/FrontPage/course/Course.tsx new file mode 100644 index 00000000..a7ebf4f5 --- /dev/null +++ b/src/app/_components/FrontPage/course/Course.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import styles from "./Choice.module.css"; + +interface CourseProps { + title: string; + progress: number; + totalProgress: number; + urlToCourse: string; +} + +export const Course: React.FC = ({ + title, + progress, + totalProgress, + urlToCourse, +}) => { + const progressPercentage = (progress / totalProgress) * 100; + const isCompleted = progress === totalProgress; + + return ( +
+
+

{title}

+ + {progress}/{totalProgress} + +
+ +
+
+
+ + + {isCompleted ? "Review" : progress > 0 ? "Continue" : "Start Quiz"} + +
+ ); +}; + diff --git a/src/app/_components/FrontPage/course/index.ts b/src/app/_components/FrontPage/course/index.ts new file mode 100644 index 00000000..a880d064 --- /dev/null +++ b/src/app/_components/FrontPage/course/index.ts @@ -0,0 +1 @@ +export { Course } from "./Course"; diff --git a/src/app/_components/FrontPage/index.module.css b/src/app/_components/FrontPage/index.module.css new file mode 100644 index 00000000..9c703a18 --- /dev/null +++ b/src/app/_components/FrontPage/index.module.css @@ -0,0 +1,58 @@ +.container { + display: flex; + flex-direction: column; + position: absolute; + overflow: hidden; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.subContainer { + + position: absolute; + top: 200px; + display: flex; + max-height: 723px; + height: calc(100% - 104px - 120px); + width: 100%; + z-index: 1; + overflow-y: auto; + flex-direction: column; + align-items: center; + bottom: 120px; + + padding: 5px; + +} + +/* Course{ + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + margin-top: 20px; +} */ + +.subContainerReview { + position: absolute; + margin-top: 20px; + top: 104px; + display: flex; + max-height: 723px; + height: calc(100% - 104px - 120px); + width: 100%; + z-index: 1; + overflow-y: auto; + flex-direction: column; + align-items: center; + bottom: 120px; +} + +/* adjust for smaller header on very small screens (iPhone SE) */ +@media screen and (max-height: 750px) { + .subContainer { + top: 60px; + } +} diff --git a/src/app/_components/FrontPage/index.tsx b/src/app/_components/FrontPage/index.tsx new file mode 100644 index 00000000..7697ce65 --- /dev/null +++ b/src/app/_components/FrontPage/index.tsx @@ -0,0 +1,60 @@ +"use client"; + +import styles from "./index.module.css"; +import { Header } from "../shared/Header/Header"; +import { TypeLabel } from "../shared/TypeLabel/TypeLabel"; +import { theme, labelStyles } from "../../../styles/index"; +import { Background } from "../shared/Background/Background"; +import { Navbar } from "../shared/Navbar/Navbar"; +import { useState, useEffect } from "react"; +import expressions from "../../data/quiz.json"; +import { Course } from "./course"; +export const FrontPage: React.FC = () => { + + + return ( +
+ +
+ +
+ + + + + + + + + + +
+ +
+ ); +}; diff --git a/src/app/_components/shared/Header/Header.tsx b/src/app/_components/shared/Header/Header.tsx index b27021ea..f7903fbe 100644 --- a/src/app/_components/shared/Header/Header.tsx +++ b/src/app/_components/shared/Header/Header.tsx @@ -3,16 +3,22 @@ import styles from "./Header.module.css"; interface TitleProps { title: string; color: string; + subtitle?: string; typeLabel?: JSX.Element; } -export const Header: React.FC = ({ title, color, typeLabel }) => { +export const Header: React.FC = ({ title, color, typeLabel, subtitle }) => { return (
+

{title}

+

+ {subtitle} +

+
{typeLabel}
diff --git a/src/app/front/layout.tsx b/src/app/front/layout.tsx new file mode 100644 index 00000000..0b762f5c --- /dev/null +++ b/src/app/front/layout.tsx @@ -0,0 +1,20 @@ +import { type Metadata } from "next"; +import { TRPCReactProvider } from "~/trpc/react"; + +export const metadata: Metadata = { + title: "LiteraLingo", + description: "Quiz", + icons: [{ rel: "icon", type: "image/svg+xml", url: "/favicon.svg" }], +}; + +export default function RootLayout({ + children, +}: Readonly<{ children: React.ReactNode }>) { + return ( + + + {children} + + + ); +} diff --git a/src/app/front/loading.tsx b/src/app/front/loading.tsx new file mode 100644 index 00000000..99672a08 --- /dev/null +++ b/src/app/front/loading.tsx @@ -0,0 +1,3 @@ +export default function Loading() { + return

Loading...

; +} diff --git a/src/app/front/page.tsx b/src/app/front/page.tsx new file mode 100644 index 00000000..6dd158aa --- /dev/null +++ b/src/app/front/page.tsx @@ -0,0 +1,28 @@ +import { HydrateClient } from "~/trpc/server"; +import { Poppins, Baloo_2 } from "next/font/google"; +import { QuizPage } from "../_components/QuizPage"; +import { FrontPage } from "../_components/FrontPage"; + +const poppins = Poppins({ + subsets: ["latin"], + display: "swap", + variable: "--font-poppins", + weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"], +}); + +const baloo_2 = Baloo_2({ + subsets: ["latin"], + display: "swap", + variable: "--font-baloo-2", + weight: ["400", "500", "600", "700", "800"], +}); + +export default async function Home() { + return ( + +
+ +
+ + ); +} From 9e90c6938b6478b711a1ede220471412bb17ef54 Mon Sep 17 00:00:00 2001 From: Ojas Date: Tue, 25 Mar 2025 22:28:45 -0400 Subject: [PATCH 2/6] Updated Header --- src/app/_components/shared/Header/Header.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/_components/shared/Header/Header.tsx b/src/app/_components/shared/Header/Header.tsx index f7903fbe..e2c78bbf 100644 --- a/src/app/_components/shared/Header/Header.tsx +++ b/src/app/_components/shared/Header/Header.tsx @@ -12,12 +12,12 @@ export const Header: React.FC = ({ title, color, typeLabel, subtitle
-

- {title} -

-

- {subtitle} -

+

+ {title} +

+

+ {subtitle} +

{typeLabel}
From ec244f6d2722448994fd46050b809589ced4b7f3 Mon Sep 17 00:00:00 2001 From: Ojas Date: Tue, 25 Mar 2025 22:30:13 -0400 Subject: [PATCH 3/6] Updated Header --- src/app/_components/shared/Header/Header.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/_components/shared/Header/Header.tsx b/src/app/_components/shared/Header/Header.tsx index e2c78bbf..97d899d3 100644 --- a/src/app/_components/shared/Header/Header.tsx +++ b/src/app/_components/shared/Header/Header.tsx @@ -15,9 +15,11 @@ export const Header: React.FC = ({ title, color, typeLabel, subtitle

{title}

-

- {subtitle} -

+ {subtitle && ( +

+ {subtitle} +

+ )}
{typeLabel}
From 2ee976ae6f469c2d3b320f4559658e1e3a0dc108 Mon Sep 17 00:00:00 2001 From: Ojas Date: Tue, 25 Mar 2025 23:14:09 -0400 Subject: [PATCH 4/6] Updated styles (I AM ALMOST DONE) --- .../FrontPage/course/Choice.module.css | 93 ++++++++++++++++++- .../_components/FrontPage/course/Course.tsx | 35 ++++--- .../_components/FrontPage/index.module.css | 4 +- src/app/_components/FrontPage/index.tsx | 20 ++-- 4 files changed, 125 insertions(+), 27 deletions(-) diff --git a/src/app/_components/FrontPage/course/Choice.module.css b/src/app/_components/FrontPage/course/Choice.module.css index 196c2c28..b7c93012 100644 --- a/src/app/_components/FrontPage/course/Choice.module.css +++ b/src/app/_components/FrontPage/course/Choice.module.css @@ -1,18 +1,105 @@ .courseCard { display: flex; - flex-direction: column; + flex-direction: row; height: 95px; - width: 344px; - justify-content: center; + width: 300px; + justify-content: space-between; align-items: center; + text-align: center; border: 2px solid var(--coolDark); border-radius: 16px; box-shadow: 0px 4px 0px 0px var(--coolAccentBg); cursor: pointer; background: white; + padding: 0 16px; + + margin-top: 20px; } +.courseHeader { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.courseTitle { + text-align: center; + font-family: var(--font-poppins), sans-serif; + font-weight: 700; + font-size: 19px; + color: var(--primary); + margin: 0; +} + +.courseProgress { + font-family: var(--font-poppins), sans-serif; + font-weight: 400; + font-size: 14px; + color: var(--secondary); +} + +.progressBar { + position: relative; + width: 100px; + height: 12px; + background: var(--faintGrey); + border-radius: 25px; + overflow: hidden; + margin: 8px 0; +} + +.progressWrapper { + display: flex; + + justify-content: space-between; +} + +.progressFill { + height: 100%; + background: var(--coolAccentBg); + border-radius: 4px; + transition: width 0.3s ease; +} + +.startBtn, +.reviewBtn { + display: inline-block; + width: 80px; + height: 25px; + padding: 8px 16px; + font-family: var(--font-poppins), sans-serif; + font-weight: 500; + font-size: 18px; + text-align: center; + text-decoration: none; + border-radius: 25px; + cursor: pointer; + transition: background-color 0.3s ease, color 0.3s ease; +} + +.startBtn { + background: var(--warm); + color: var(--white); + border: none; +} + +/* .startBtn:hover { + background: #d9534f; +} */ + +.reviewBtn { + background: var(--warm); + color: var(--white); + border: none; +} + +/* .reviewBtn:hover { + background: #5cb85c; +} */ + + .selectedcourseContainer { display: flex; flex-direction: column; diff --git a/src/app/_components/FrontPage/course/Course.tsx b/src/app/_components/FrontPage/course/Course.tsx index a7ebf4f5..c18edf1d 100644 --- a/src/app/_components/FrontPage/course/Course.tsx +++ b/src/app/_components/FrontPage/course/Course.tsx @@ -19,18 +19,31 @@ export const Course: React.FC = ({ return (
-
-

{title}

- - {progress}/{totalProgress} - -
+
+

{title}

+ + + +
Progress
+ +
+ +
+
+
+ + + {progress}/{totalProgress} + + + + + +
- From f445301ef2dbf54559bf84387fcd70291455e229 Mon Sep 17 00:00:00 2001 From: Ojas Date: Wed, 26 Mar 2025 10:53:19 -0400 Subject: [PATCH 5/6] I think this is a final commit to frontend of the frontpage. I might be wrong. --- .../FrontPage/course/Choice.module.css | 12 ++++++------ .../_components/FrontPage/course/Course.tsx | 18 +++++++++++++++--- src/app/_components/FrontPage/index.tsx | 12 +++++++++++- 3 files changed, 32 insertions(+), 10 deletions(-) diff --git a/src/app/_components/FrontPage/course/Choice.module.css b/src/app/_components/FrontPage/course/Choice.module.css index b7c93012..7502c227 100644 --- a/src/app/_components/FrontPage/course/Choice.module.css +++ b/src/app/_components/FrontPage/course/Choice.module.css @@ -6,11 +6,11 @@ justify-content: space-between; align-items: center; text-align: center; - border: 2px solid var(--coolDark); + /* border: 2px solid var(--warmYellow); */ border-radius: 16px; - box-shadow: 0px 4px 0px 0px var(--coolAccentBg); + /* box-shadow: 0px 4px 0px 0px; */ cursor: pointer; - background: white; + /* background: var(--faintYellow); */ padding: 0 16px; margin-top: 20px; @@ -35,9 +35,9 @@ .courseProgress { font-family: var(--font-poppins), sans-serif; - font-weight: 400; - font-size: 14px; - color: var(--secondary); + font-weight: 600; + font-size: 12px; + color: var(--primary); } .progressBar { diff --git a/src/app/_components/FrontPage/course/Course.tsx b/src/app/_components/FrontPage/course/Course.tsx index c18edf1d..739f1755 100644 --- a/src/app/_components/FrontPage/course/Course.tsx +++ b/src/app/_components/FrontPage/course/Course.tsx @@ -6,6 +6,8 @@ interface CourseProps { progress: number; totalProgress: number; urlToCourse: string; + bgColour: string; + borderColour: string; } export const Course: React.FC = ({ @@ -13,12 +15,22 @@ export const Course: React.FC = ({ progress, totalProgress, urlToCourse, + bgColour, + borderColour, + }) => { const progressPercentage = (progress / totalProgress) * 100; const isCompleted = progress === totalProgress; return ( - ); diff --git a/src/app/_components/FrontPage/index.tsx b/src/app/_components/FrontPage/index.tsx index e31e972b..5fd48e08 100644 --- a/src/app/_components/FrontPage/index.tsx +++ b/src/app/_components/FrontPage/index.tsx @@ -26,13 +26,17 @@ export const FrontPage: React.FC = () => { { /> { /> Date: Thu, 10 Apr 2025 17:33:34 -0400 Subject: [PATCH 6/6] Make the frontpage `\quiz` and each quiz a subpage `\quiz\[quiz]` --- src/app/_components/FrontPage/index.tsx | 13 +++++-------- .../_components/QuizPage/StatusInfo/StatusInfo.tsx | 11 +++++++---- src/app/{front => quiz/[quiz]}/layout.tsx | 0 src/app/{front => quiz/[quiz]}/loading.tsx | 0 src/app/{front => quiz/[quiz]}/page.tsx | 5 ++--- src/app/quiz/page.tsx | 4 ++-- 6 files changed, 16 insertions(+), 17 deletions(-) rename src/app/{front => quiz/[quiz]}/layout.tsx (100%) rename src/app/{front => quiz/[quiz]}/loading.tsx (100%) rename src/app/{front => quiz/[quiz]}/page.tsx (82%) diff --git a/src/app/_components/FrontPage/index.tsx b/src/app/_components/FrontPage/index.tsx index 5fd48e08..a4733b58 100644 --- a/src/app/_components/FrontPage/index.tsx +++ b/src/app/_components/FrontPage/index.tsx @@ -2,12 +2,9 @@ import styles from "./index.module.css"; import { Header } from "../shared/Header/Header"; -import { TypeLabel } from "../shared/TypeLabel/TypeLabel"; -import { theme, labelStyles } from "../../../styles/index"; +import { theme } from "../../../styles/index"; import { Background } from "../shared/Background/Background"; import { Navbar } from "../shared/Navbar/Navbar"; -import { useState, useEffect } from "react"; -import expressions from "../../data/quiz.json"; import { Course } from "./course"; export const FrontPage: React.FC = () => { @@ -30,7 +27,7 @@ export const FrontPage: React.FC = () => { borderColour={theme.colors.warmYellow} title="Simile" progress={0} - totalProgress={15} urlToCourse={""} + totalProgress={15} urlToCourse={"/quiz/simile"} /> { title="Metaphor" progress={2} - totalProgress={15} urlToCourse={""} + totalProgress={15} urlToCourse={"/quiz/metaphor"} /> { title="Idiom" progress={15} - totalProgress={15} urlToCourse={""} + totalProgress={15} urlToCourse={"/quiz/idiom"} /> { title="Random" progress={0} - totalProgress={15} urlToCourse={""} + totalProgress={15} urlToCourse={"/quiz/random"} />
diff --git a/src/app/_components/QuizPage/StatusInfo/StatusInfo.tsx b/src/app/_components/QuizPage/StatusInfo/StatusInfo.tsx index 21aac687..5546594c 100644 --- a/src/app/_components/QuizPage/StatusInfo/StatusInfo.tsx +++ b/src/app/_components/QuizPage/StatusInfo/StatusInfo.tsx @@ -3,6 +3,7 @@ import { IoCloseOutline } from "react-icons/io5"; import { theme } from "../../../../styles/index"; import { ProgressBar } from "./ProgressBar"; import { StarInfo } from "./StarInfo"; +import Link from 'next/link' interface StatusInfoProps { completed: number; @@ -12,10 +13,12 @@ interface StatusInfoProps { export const StatusInfo: React.FC = ({ completed, total }) => { return (
- + + +
diff --git a/src/app/front/layout.tsx b/src/app/quiz/[quiz]/layout.tsx similarity index 100% rename from src/app/front/layout.tsx rename to src/app/quiz/[quiz]/layout.tsx diff --git a/src/app/front/loading.tsx b/src/app/quiz/[quiz]/loading.tsx similarity index 100% rename from src/app/front/loading.tsx rename to src/app/quiz/[quiz]/loading.tsx diff --git a/src/app/front/page.tsx b/src/app/quiz/[quiz]/page.tsx similarity index 82% rename from src/app/front/page.tsx rename to src/app/quiz/[quiz]/page.tsx index 6dd158aa..fe2d7117 100644 --- a/src/app/front/page.tsx +++ b/src/app/quiz/[quiz]/page.tsx @@ -1,7 +1,6 @@ import { HydrateClient } from "~/trpc/server"; import { Poppins, Baloo_2 } from "next/font/google"; -import { QuizPage } from "../_components/QuizPage"; -import { FrontPage } from "../_components/FrontPage"; +import { QuizPage } from "../../_components/QuizPage"; const poppins = Poppins({ subsets: ["latin"], @@ -21,7 +20,7 @@ export default async function Home() { return (
- +
); diff --git a/src/app/quiz/page.tsx b/src/app/quiz/page.tsx index b6b15df7..8aeb7665 100644 --- a/src/app/quiz/page.tsx +++ b/src/app/quiz/page.tsx @@ -1,6 +1,6 @@ import { HydrateClient } from "~/trpc/server"; import { Poppins, Baloo_2 } from "next/font/google"; -import { QuizPage } from "../_components/QuizPage"; +import { FrontPage } from "../_components/FrontPage"; const poppins = Poppins({ subsets: ["latin"], @@ -20,7 +20,7 @@ export default async function Home() { return (
- +
);