forgejo-lila/lila
1
0
Fork 0
Code Issues 50 Pull requests Projects 1 Releases Packages Wiki Activity Actions

complete design overhaul

Browse source
This commit is contained in:
lila 2026-04-19 19:25:55 +02:00
parent d033a08d87
commit 0a0bafa0ec
14 changed files with 505 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

32
apps/web/src/components/game/QuestionCard.tsx
View file

@ -48,22 +48,31 @@ export const QuestionCard = ({
return (
<div className="flex flex-col items-center gap-6 w-full max-w-md mx-auto">
<div className="flex items-center gap-2 text-sm font-medium text-purple-400">
<span>
{questionNumber} / {totalQuestions}
</span>
<div className="w-full flex items-center justify-between">
<div className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-4 py-1 text-xs font-bold tracking-widest uppercase text-(--color-primary)">
Round {questionNumber}/{totalQuestions}
</div>
<div className="text-xs font-semibold text-(--color-text-muted)">
{currentResult ? "Checked" : selectedOptionId !== null ? "Ready" : "Pick one"}
</div>
</div>
<div className="bg-white rounded-3xl shadow-lg p-8 w-full text-center">
<h2 className="text-3xl font-bold text-purple-900 mb-2">
<div className="relative w-full overflow-hidden rounded-3xl border border-(--color-primary-light) bg-white/40 dark:bg-black/10 backdrop-blur shadow-sm p-8 text-center">
<div className="absolute -top-16 -left-20 h-40 w-40 rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl" />
<div className="absolute -bottom-20 -right-20 h-44 w-44 rounded-full bg-(--color-primary) opacity-[0.12] blur-3xl" />
<h2 className="relative text-3xl font-black tracking-tight text-(--color-text) mb-2">
{question.prompt}
</h2>
{question.gloss && (
<p className="text-sm text-gray-400 italic">{question.gloss}</p>
<p className="relative text-sm text-(--color-text-muted) italic">
{question.gloss}
</p>
)}
</div>
<div className="flex flex-col gap-3 w-full">
<div className="w-full rounded-3xl border border-(--color-primary-light) bg-white/55 dark:bg-black/10 backdrop-blur shadow-sm p-4">
<div className="flex flex-col gap-3">
{question.options.map((option) => (
<OptionButton
key={option.optionId}
@ -72,21 +81,22 @@ export const QuestionCard = ({
onSelect={() => handleSelect(option.optionId)}
/>
))}
</div>
</div>
{!currentResult && selectedOptionId !== null && (
<button
onClick={handleSubmit}
className="w-full py-3 rounded-2xl text-lg font-bold bg-linear-to-r from-pink-400 to-purple-500 text-white border-b-4 border-purple-700 hover:-translate-y-0.5 active:translate-y-0 active:border-b-2 transition-all duration-200 cursor-pointer"
className="w-full py-3 rounded-2xl text-lg font-bold bg-linear-to-r from-pink-400 to-purple-500 text-white shadow-sm hover:shadow-md hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200 cursor-pointer"
>
Submit
Lock it in
</button>
)}
{currentResult && (
<button
onClick={handleNext}
className="w-full py-3 rounded-2xl text-lg font-bold bg-purple-600 text-white border-b-4 border-purple-800 hover:bg-purple-500 hover:-translate-y-0.5 active:translate-y-0 active:border-b-2 transition-all duration-200 cursor-pointer"
className="w-full py-3 rounded-2xl text-lg font-bold bg-(--color-primary) text-white shadow-sm hover:shadow-md hover:bg-(--color-primary-dark) hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200 cursor-pointer"
>
{questionNumber === totalQuestions ? "See Results" : "Next"}
</button>