That's the icon in the background.
This commit is contained in:
@@ -100,66 +100,77 @@ const hasScoredAnswers = computed(() => {
|
||||
<template>
|
||||
<Head :title="`${session.category.name} Questionnaire`" />
|
||||
|
||||
<div class="max-w-4xl mx-auto px-4 py-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-3xl font-bold text-white">{{ session.category.name }} Questionnaire</h1>
|
||||
<ScoreIndicator :score="score" :visible="hasScoredAnswers" />
|
||||
<div class="max-w-3xl mx-auto px-4 py-10">
|
||||
<!-- Title area -->
|
||||
<div class="mb-10">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-2xl font-bold text-white">{{ session.category.name }} Questionnaire</h1>
|
||||
<ScoreIndicator :score="score" :visible="hasScoredAnswers" />
|
||||
</div>
|
||||
<div class="h-px bg-gradient-to-r from-primary/40 via-primary/10 to-transparent mt-4"></div>
|
||||
</div>
|
||||
|
||||
<!-- User Info Section -->
|
||||
<div class="bg-surface/50 rounded-lg p-6 mb-6">
|
||||
<h2 class="text-xl font-semibold text-white mb-4">Basic Information</h2>
|
||||
<div class="space-y-8">
|
||||
<!-- User Info Section -->
|
||||
<div class="bg-white/[0.03] border border-white/[0.06] rounded-xl p-8">
|
||||
<h2 class="text-lg font-semibold text-white mb-5">Basic Information</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<span class="block text-sm font-medium text-gray-400 mb-1">Name</span>
|
||||
<span class="text-white">{{ session.user.name }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-sm font-medium text-gray-400 mb-1">Email</span>
|
||||
<span class="text-white">{{ session.user.email }}</span>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<span class="block text-sm font-medium text-gray-400 mb-1">Name</span>
|
||||
<span class="text-white text-[15px]">{{ session.user.name }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-sm font-medium text-gray-400 mb-1">Email</span>
|
||||
<span class="text-white text-[15px]">{{ session.user.email }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question Groups -->
|
||||
<div
|
||||
v-for="group in questionGroups"
|
||||
:key="group.id"
|
||||
class="bg-surface/50 rounded-lg p-6 mb-6"
|
||||
>
|
||||
<h2 class="text-xl font-semibold text-white mb-1">{{ group.name }}</h2>
|
||||
<p v-if="group.description" class="text-gray-400 text-sm mb-2">{{ group.description }}</p>
|
||||
<p v-if="group.scoring_instructions" class="text-amber-400 text-sm italic mb-4">{{ group.scoring_instructions }}</p>
|
||||
<!-- Question Groups -->
|
||||
<div
|
||||
v-for="group in questionGroups"
|
||||
:key="group.id"
|
||||
class="bg-white/[0.03] border border-white/[0.06] rounded-xl p-8"
|
||||
>
|
||||
<div class="flex items-center gap-3 mb-1">
|
||||
<div class="w-2 h-2 rounded-full bg-primary/60"></div>
|
||||
<h2 class="text-lg font-semibold text-white">{{ group.name }}</h2>
|
||||
</div>
|
||||
<p v-if="group.description" class="text-gray-400 text-sm mb-2">{{ group.description }}</p>
|
||||
<p v-if="group.scoring_instructions" class="text-amber-400 text-sm italic mb-4">{{ group.scoring_instructions }}</p>
|
||||
|
||||
<div class="divide-y divide-gray-700">
|
||||
<QuestionCard
|
||||
v-for="question in group.questions"
|
||||
:key="question.id"
|
||||
:question="question"
|
||||
:modelValue="answerData[question.id]"
|
||||
@update:modelValue="updateAnswer(question.id, $event)"
|
||||
/>
|
||||
<div class="divide-y divide-white/[0.06]">
|
||||
<QuestionCard
|
||||
v-for="question in group.questions"
|
||||
:key="question.id"
|
||||
:question="question"
|
||||
:modelValue="answerData[question.id]"
|
||||
@update:modelValue="updateAnswer(question.id, $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Comments -->
|
||||
<div class="bg-surface/50 rounded-lg p-6 mb-6">
|
||||
<h2 class="text-xl font-semibold text-white mb-4">Additional Comments</h2>
|
||||
<textarea
|
||||
v-model="additionalComments.additional_comments"
|
||||
@input="saveComments"
|
||||
rows="4"
|
||||
class="w-full rounded-lg border border-gray-600 bg-surface px-3 py-2 text-white placeholder-gray-500 focus:border-primary focus:ring-1 focus:ring-primary"
|
||||
placeholder="Enter any additional comments to support your decision..."
|
||||
></textarea>
|
||||
<!-- Additional Comments -->
|
||||
<div class="bg-white/[0.03] border border-white/[0.06] rounded-xl p-8">
|
||||
<h2 class="text-lg font-semibold text-white mb-5">Additional Comments</h2>
|
||||
<textarea
|
||||
v-model="additionalComments.additional_comments"
|
||||
@input="saveComments"
|
||||
rows="4"
|
||||
class="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white placeholder-gray-600 focus:border-primary/50 focus:ring-1 focus:ring-primary/20 transition-colors duration-200"
|
||||
placeholder="Enter any additional comments to support your decision..."
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Complete button - now enabled -->
|
||||
<div class="flex justify-end mt-8">
|
||||
<AppButton size="lg" @click="completeSession" data-cy="complete-session">
|
||||
Complete
|
||||
</AppButton>
|
||||
<div class="mt-12 pt-8 border-t border-white/[0.06]">
|
||||
<div class="flex justify-end">
|
||||
<AppButton size="lg" @click="completeSession" data-cy="complete-session">
|
||||
Complete
|
||||
</AppButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user