diff options
Diffstat (limited to 'frontend/app/components/GolfPlayApps')
5 files changed, 635 insertions, 635 deletions
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppConnecting.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppConnecting.tsx index 6a954c1..d97131b 100644 --- a/frontend/app/components/GolfPlayApps/GolfPlayAppConnecting.tsx +++ b/frontend/app/components/GolfPlayApps/GolfPlayAppConnecting.tsx @@ -1,11 +1,11 @@ export default function GolfPlayAppConnecting() { - return ( - <div className="min-h-screen bg-gray-100 flex items-center justify-center"> - <div className="text-center"> - <h1 className="text-4xl font-bold text-black-600 mb-4"> - Connecting... - </h1> - </div> - </div> - ); + return ( + <div className="min-h-screen bg-gray-100 flex items-center justify-center"> + <div className="text-center"> + <h1 className="text-4xl font-bold text-black-600 mb-4"> + Connecting... + </h1> + </div> + </div> + ); } diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppFinished.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppFinished.tsx index db06890..c3ef2d4 100644 --- a/frontend/app/components/GolfPlayApps/GolfPlayAppFinished.tsx +++ b/frontend/app/components/GolfPlayApps/GolfPlayAppFinished.tsx @@ -1,9 +1,9 @@ export default function GolfPlayAppFinished() { - return ( - <div className="min-h-screen bg-gray-100 flex items-center justify-center"> - <div className="text-center"> - <h1 className="text-4xl font-bold text-black-600 mb-4">Finished</h1> - </div> - </div> - ); + return ( + <div className="min-h-screen bg-gray-100 flex items-center justify-center"> + <div className="text-center"> + <h1 className="text-4xl font-bold text-black-600 mb-4">Finished</h1> + </div> + </div> + ); } diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx index fc672f5..75ab18e 100644 --- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx +++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx @@ -1,41 +1,41 @@ type Props = { - problem: string; - onCodeChange: (code: string) => void; - currentScore: number | null; + problem: string; + onCodeChange: (code: string) => void; + currentScore: number | null; }; export default function GolfPlayAppGaming({ - problem, - onCodeChange, - currentScore, + problem, + onCodeChange, + currentScore, }: Props) { - const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { - onCodeChange(e.target.value); - }; + const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { + onCodeChange(e.target.value); + }; - return ( - <div className="min-h-screen flex"> - <div className="mx-auto flex min-h-full flex-grow"> - <div className="flex w-1/2 flex-col justify-between p-4"> - <div> - <div className="mb-2 text-xl font-bold">TODO</div> - <div className="text-gray-700">{problem}</div> - </div> - <div className="mb-4 mt-auto"> - <div className="font-semibold text-green-500"> - Score: {currentScore == null ? "-" : `${currentScore}`} - </div> - </div> - </div> - <div className="w-1/2 p-4 flex"> - <div className="flex-grow"> - <textarea - className="h-full w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-500" - onChange={handleTextChange} - ></textarea> - </div> - </div> - </div> - </div> - ); + return ( + <div className="min-h-screen flex"> + <div className="mx-auto flex min-h-full flex-grow"> + <div className="flex w-1/2 flex-col justify-between p-4"> + <div> + <div className="mb-2 text-xl font-bold">TODO</div> + <div className="text-gray-700">{problem}</div> + </div> + <div className="mb-4 mt-auto"> + <div className="font-semibold text-green-500"> + Score: {currentScore == null ? "-" : `${currentScore}`} + </div> + </div> + </div> + <div className="w-1/2 p-4 flex"> + <div className="flex-grow"> + <textarea + className="h-full w-full rounded-lg border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-500" + onChange={handleTextChange} + ></textarea> + </div> + </div> + </div> + </div> + ); } diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx index df179f1..0d60fc9 100644 --- a/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx +++ b/frontend/app/components/GolfPlayApps/GolfPlayAppStarting.tsx @@ -1,15 +1,15 @@ type Props = { - timeLeft: number; + timeLeft: number; }; export default function GolfPlayAppStarting({ timeLeft }: Props) { - return ( - <div className="min-h-screen bg-gray-100 flex items-center justify-center"> - <div className="text-center"> - <h1 className="text-4xl font-bold text-black-600 mb-4"> - Starting... ({timeLeft} s) - </h1> - </div> - </div> - ); + return ( + <div className="min-h-screen bg-gray-100 flex items-center justify-center"> + <div className="text-center"> + <h1 className="text-4xl font-bold text-black-600 mb-4"> + Starting... ({timeLeft} s) + </h1> + </div> + </div> + ); } diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppWaiting.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppWaiting.tsx index f4fc6c5..a1da33e 100644 --- a/frontend/app/components/GolfPlayApps/GolfPlayAppWaiting.tsx +++ b/frontend/app/components/GolfPlayApps/GolfPlayAppWaiting.tsx @@ -1,584 +1,584 @@ export default function GolfPlayAppWaiting() { - return ( - <> - <div className="min-h-screen bg-gray-100 flex items-center justify-center"> - <div className="text-center"> - <h1 className="text-4xl font-bold text-black-600 mb-4">Waiting...</h1> - </div> - </div> - <style> - {` + return ( + <> + <div className="min-h-screen bg-gray-100 flex items-center justify-center"> + <div className="text-center"> + <h1 className="text-4xl font-bold text-black-600 mb-4">Waiting...</h1> + </div> + </div> + <style> + {` @keyframes changeHeight { 0% { height: 20%; } 50% { height: 100%; } 100% { height: 20%; } } `} - </style> - <div - style={{ - position: "fixed", - bottom: 0, - width: "100%", - display: "flex", - justifyContent: "center", - alignItems: "flex-end", - height: "100px", - margin: "0 2px", - }} - > - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "2.0s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.9s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.8s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.7s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.6s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.5s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.4s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.3s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.2s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.1s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.0s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.9s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.8s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.7s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.6s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.5s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.4s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.3s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.2s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.1s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.5s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.4s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.3s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.2s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.1s", - }} - ></div> + </style> + <div + style={{ + position: "fixed", + bottom: 0, + width: "100%", + display: "flex", + justifyContent: "center", + alignItems: "flex-end", + height: "100px", + margin: "0 2px", + }} + > + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "2.0s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.9s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.8s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.7s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.6s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.5s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.4s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.3s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.2s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.1s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.0s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.9s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.8s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.7s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.6s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.5s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.4s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.3s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.2s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.1s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.5s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.4s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.3s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.2s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.1s", + }} + ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.1s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.2s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.3s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.4s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.5s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.1s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.2s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.3s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.4s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.5s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.6s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.7s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.8s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "0.9s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.0s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.1s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.2s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.3s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.4s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.5s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.6s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.7s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.8s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "1.9s", - }} - ></div> - <div - style={{ - width: "2%", - margin: "0 2px", - background: - "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", - display: "inline-block", - animation: "changeHeight 1s infinite ease-in-out", - animationDelay: "2.0s", - }} - ></div> - </div> - </> - ); + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.1s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.2s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.3s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.4s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.5s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.1s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.2s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.3s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.4s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.5s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.6s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.7s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.8s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "0.9s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.0s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.1s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.2s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.3s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.4s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.5s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.6s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.7s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.8s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "1.9s", + }} + ></div> + <div + style={{ + width: "2%", + margin: "0 2px", + background: + "linear-gradient(345deg, rgb(230, 36, 136) 0%, rgb(240, 184, 106) 100%)", + display: "inline-block", + animation: "changeHeight 1s infinite ease-in-out", + animationDelay: "2.0s", + }} + ></div> + </div> + </> + ); } |