From 05347fef22e6412f52229c226198fd0024f42873 Mon Sep 17 00:00:00 2001 From: kali Date: Sun, 2 Jun 2024 10:17:07 +0300 Subject: [PATCH 1/8] Added licence button in about us page --- app/about-us/page.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/app/about-us/page.tsx b/app/about-us/page.tsx index 18cc676..b7e6932 100644 --- a/app/about-us/page.tsx +++ b/app/about-us/page.tsx @@ -1,4 +1,4 @@ -import { DocumentTextIcon } from '@heroicons/react/24/outline'; +import { ClipboardDocumentListIcon, DocumentTextIcon } from '@heroicons/react/24/outline'; import Logo from '../components/logo'; import TopicCard from '../components/topic_card'; @@ -64,16 +64,24 @@ const people = [

Source Code + + + Our Licence +
Date: Sun, 2 Jun 2024 10:27:18 +0300 Subject: [PATCH 2/8] fixed answer button Signed-off-by: Ioan Cristian CHELARU --- app/components/question_component.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/question_component.tsx b/app/components/question_component.tsx index bdc457a..45cd13d 100644 --- a/app/components/question_component.tsx +++ b/app/components/question_component.tsx @@ -76,15 +76,15 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
) diff --git a/app/learn/[category]/page.tsx b/app/learn/[category]/page.tsx index 665d43d..a66e7aa 100644 --- a/app/learn/[category]/page.tsx +++ b/app/learn/[category]/page.tsx @@ -92,8 +92,15 @@ const Page = ({ params }: { params: { category: string }}) => { 'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)', }} /> +
-
+ {(()=>{ if ( !questions[ 0 ] ) @@ -107,13 +114,7 @@ const Page = ({ params }: { params: { category: string }}) => { className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" aria-hidden="true" > -
+
diff --git a/app/page.tsx b/app/page.tsx index e5da908..eb9cbaf 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -20,6 +20,13 @@ export default function Example() { 'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)', }} /> +
@@ -70,14 +77,7 @@ export default function Example() { ) diff --git a/app/sessionconfig/page.tsx b/app/sessionconfig/page.tsx index 6a4092c..1f5e1c3 100644 --- a/app/sessionconfig/page.tsx +++ b/app/sessionconfig/page.tsx @@ -31,6 +31,13 @@ export default function Example() { 'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)', }} /> +
@@ -70,13 +77,6 @@ export default function Example() { className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" aria-hidden="true" > -
) -- 2.45.1 From 34ee89c823d792a78bc37a72580fa0f59e4865c9 Mon Sep 17 00:00:00 2001 From: Alex Stan Date: Sun, 2 Jun 2024 10:43:45 +0300 Subject: [PATCH 6/8] Updated animations fixed merge conflicts --- app/page.tsx | 60 +++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 52 insertions(+), 8 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index eb9cbaf..3652b23 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -20,13 +20,6 @@ export default function Example() { 'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)', }} /> -
@@ -74,10 +67,61 @@ export default function Example() { + +
+
+ +
+

+ Start using flash cards +
+ Begin with our app today. +

+

+ Get questions from a multitude of different subjects that include cybersecurity, geography and C++ +

+
+ + Get started + + +
+
+
+
+ ) -- 2.45.1 From 7198551a63ae04f543c28cc9e6d0d3327e3eba07 Mon Sep 17 00:00:00 2001 From: Alex Stan Date: Sun, 2 Jun 2024 10:53:42 +0300 Subject: [PATCH 7/8] add framer animations Signed-off-by: Alex Stan --- app/components/logo.tsx | 12 ++++++++---- package-lock.json | 25 +++++++++++++++++++++++++ package.json | 1 + 3 files changed, 34 insertions(+), 4 deletions(-) diff --git a/app/components/logo.tsx b/app/components/logo.tsx index a4e2930..28b4062 100644 --- a/app/components/logo.tsx +++ b/app/components/logo.tsx @@ -1,5 +1,6 @@ 'use client'; import { Transition } from "@headlessui/react"; +import { motion } from "framer-motion"; import { useState } from "react"; const Logo = () => { @@ -18,20 +19,23 @@ const Logo = () => { leave="transition-opacity duration-75" leaveFrom={logoHovered ? "opacity-70" : "opacity-100"} leaveTo={logoHovered ? "opacity-100" : "opacity-70"}> */} - setLogoHovered(true)} onMouseLeave={()=>setLogoHovered(false)}> - + {/* */}
- setAboutButtonHovered(true)} + onMouseLeave={()=>setAboutButtonHovered(false)} > About us - + ) } diff --git a/package-lock.json b/package-lock.json index c37c1f6..9c0297d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@headlessui/react": "^2.0.4", "@heroicons/react": "^2.1.3", + "framer-motion": "^11.2.10", "next": "14.2.3", "react": "^18", "react-dom": "^18", @@ -2245,6 +2246,30 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/framer-motion": { + "version": "11.2.10", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.10.tgz", + "integrity": "sha512-/gr3PLZUVFCc86a9MqCUboVrALscrdluzTb3yew+2/qKBU8CX6nzs918/SRBRCqaPbx0TZP10CB6yFgK2C5cYQ==", + "dependencies": { + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", diff --git a/package.json b/package.json index 4ed312c..6c6a4ab 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "dependencies": { "@headlessui/react": "^2.0.4", "@heroicons/react": "^2.1.3", + "framer-motion": "^11.2.10", "next": "14.2.3", "react": "^18", "react-dom": "^18", -- 2.45.1 From 91bd54a8a217a8d7cb5841101757fb5829370457 Mon Sep 17 00:00:00 2001 From: Alex Stan Date: Sun, 2 Jun 2024 11:38:57 +0300 Subject: [PATCH 8/8] Finished animations --- app/components/link-button.tsx | 26 ++++++++++ app/components/logo.tsx | 6 ++- app/components/question_component.tsx | 18 +++++-- app/components/topic_card.tsx | 19 +++++--- app/lib/delay.ts | 5 ++ app/page.tsx | 68 +++++++-------------------- 6 files changed, 78 insertions(+), 64 deletions(-) create mode 100644 app/components/link-button.tsx create mode 100644 app/lib/delay.ts diff --git a/app/components/link-button.tsx b/app/components/link-button.tsx new file mode 100644 index 0000000..37cac35 --- /dev/null +++ b/app/components/link-button.tsx @@ -0,0 +1,26 @@ +'use client'; +import { motion } from "framer-motion" +import { useState } from "react"; + +const LinkButton = ({text, href, onPress}: {text: string, href: string, onPress?: () => any}) => { + const [buttonHovered, setButtonHovered] = useState( false ); + const [buttonPressed, setButtonPressed] = useState( false ); + return ( +
+ setButtonHovered(true)} + onMouseLeave={()=>setButtonHovered(false)} + onClick={()=>{setButtonPressed(true); onPress && onPress();}} + > + {text} + + +
+ ); +} + +export default LinkButton; \ No newline at end of file diff --git a/app/components/logo.tsx b/app/components/logo.tsx index 28b4062..a21e943 100644 --- a/app/components/logo.tsx +++ b/app/components/logo.tsx @@ -2,6 +2,7 @@ import { Transition } from "@headlessui/react"; import { motion } from "framer-motion"; import { useState } from "react"; +import LinkButton from "./link-button"; const Logo = () => { @@ -26,7 +27,7 @@ const Logo = () => { {/* */}
- { onMouseLeave={()=>setAboutButtonHovered(false)} > About us - + */} + ) } diff --git a/app/components/question_component.tsx b/app/components/question_component.tsx index 45cd13d..f5a7bcb 100644 --- a/app/components/question_component.tsx +++ b/app/components/question_component.tsx @@ -1,8 +1,10 @@ -import { ReactComponentElement, ReactNode } from "react"; +import { ReactComponentElement, ReactNode, useEffect } from "react"; import { AnswerType, Question } from "../lib/question"; import { SessionState } from "../lib/session"; import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/outline"; import { Button, Transition } from "@headlessui/react"; +import wait from "../lib/delay"; +import { motion } from "framer-motion"; const QuestionView = ({ question, setState, state }: { question: Question, setState: any, state: SessionState }) => { @@ -16,6 +18,10 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt })) } + useEffect( () => { + wait( 1000 ); + }, [] ); + const handleAnswerClick = (right: boolean) => { setState( (prevState: SessionState) => ({ ...prevState, @@ -47,14 +53,16 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt {question.text} - + leaveTo="opacity-0"> */} + {/* */} +

{question.answer}

@@ -91,7 +99,7 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
- + - diff --git a/app/components/topic_card.tsx b/app/components/topic_card.tsx index dfd79dc..23575cb 100644 --- a/app/components/topic_card.tsx +++ b/app/components/topic_card.tsx @@ -1,7 +1,13 @@ -import { PlayIcon } from '@heroicons/react/24/outline' +'use client'; +import { motion } from 'framer-motion'; +import { useState } from 'react'; +import LinkButton from './link-button'; const TopicCard = ({ title, children, link }: { title: string, children: any, link: string }) => { - return( -
+ const [clicked, setClicked] = useState( false ); + const [hovered, setHovered] = useState( false ); + return ( + setHovered(true)} onMouseLeave={()=>setHovered(false)}> - Begin - + */} + setClicked(true)}/>
- + ) } diff --git a/app/lib/delay.ts b/app/lib/delay.ts new file mode 100644 index 0000000..486d7df --- /dev/null +++ b/app/lib/delay.ts @@ -0,0 +1,5 @@ +const wait = (time: number): Promise => { + return new Promise( res => setTimeout( res, time ) ); +} + +export default wait; \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 3652b23..52615f6 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,12 +1,15 @@ - -import { Fragment } from 'react' +'use client'; +import { Fragment, useState } from 'react' import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react' import { ChevronDownIcon } from '@heroicons/react/20/solid' import Logo from './components/logo'; +import { motion } from 'framer-motion'; +import LinkButton from './components/link-button'; function classNames(...classes) { return classes.filter(Boolean).join(' ') } export default function Example() { + const [buttonPressed, setButtonPressed] = useState( false ); return (
+ enterTo="opacity-80" + leave="transition-opacity duration-150" + leaveFrom="opacity-80" + leaveTo="opacity-0"> -
- - -
-
- -
-

- Start using flash cards -
- Begin with our app today. -

-

- Get questions from a multitude of different subjects that include cybersecurity, geography and C++ -

-
- - Get started - - + */} + setButtonPressed(true)}/>
-- 2.45.1