refactor: enhance UI components and navigation structure, implement export functionality for wizard steps, and update routing for improved user experience
This commit is contained in:
parent
37ab8d7bab
commit
d7e52293e4
18 changed files with 3802 additions and 3318 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -1,366 +1,387 @@
|
|||
<template>
|
||||
<div
|
||||
class="min-h-screen bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 py-8 px-4"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
<div class="max-w-4xl mx-auto relative">
|
||||
<div
|
||||
class="bg-white dark:bg-neutral-950 border border-black dark:border-white decision-framework-container">
|
||||
<!-- Header -->
|
||||
<div>
|
||||
<!-- Wizard Subnav -->
|
||||
<WizardSubnav />
|
||||
|
||||
<div
|
||||
class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
<!-- Spacer for consistency -->
|
||||
<div class="py-4"></div>
|
||||
|
||||
<div class="max-w-4xl mx-auto relative px-4">
|
||||
<div
|
||||
class="bg-black dark:bg-white text-white dark:text-black px-8 py-12 text-center header-section">
|
||||
<!-- Dithered shadow background -->
|
||||
class="bg-white dark:bg-neutral-950 border-2 border-neutral-900 dark:border-neutral-100 decision-framework-container">
|
||||
<!-- Header -->
|
||||
<div
|
||||
class="absolute top-4 left-4 right-0 bottom-0 dither-shadow-header"></div>
|
||||
class="bg-black dark:bg-white text-white dark:text-black px-8 py-12 text-center header-section">
|
||||
<!-- Dithered shadow background -->
|
||||
<div
|
||||
class="absolute top-4 left-4 right-0 bottom-0 dither-shadow-header"></div>
|
||||
|
||||
<div
|
||||
class="relative bg-black dark:bg-white text-white dark:text-black px-4 py-4 border border-white dark:border-black">
|
||||
<h1
|
||||
class="text-3xl font-bold mb-2 uppercase"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
Decision Framework Helper
|
||||
</h1>
|
||||
<p class="text-lg" style="font-family: 'Ubuntu', monospace">
|
||||
Find the right way to decide together
|
||||
</p>
|
||||
<div
|
||||
class="relative bg-black dark:bg-white text-white dark:text-black px-4 py-4 border-2 border-neutral-100 dark:border-neutral-900">
|
||||
<h1
|
||||
class="text-3xl font-bold mb-2 uppercase"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
Decision Framework Helper
|
||||
</h1>
|
||||
<p class="text-lg" style="font-family: 'Ubuntu', monospace">
|
||||
Find the right way to decide together
|
||||
</p>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div v-if="!showResult" class="mt-8">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span
|
||||
class="text-sm"
|
||||
style="font-family: 'Ubuntu Mono', monospace"
|
||||
>Step {{ currentStep }} of {{ totalSteps }}</span
|
||||
>
|
||||
<span
|
||||
class="text-sm"
|
||||
style="font-family: 'Ubuntu Mono', monospace"
|
||||
>{{ Math.round((currentStep / totalSteps) * 100) }}%</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="w-full bg-white dark:bg-black h-2 border border-white dark:border-black">
|
||||
<!-- Progress Bar -->
|
||||
<div v-if="!showResult" class="mt-8">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span
|
||||
class="text-sm"
|
||||
style="font-family: 'Ubuntu Mono', monospace"
|
||||
>Step {{ currentStep }} of {{ totalSteps }}</span
|
||||
>
|
||||
<span
|
||||
class="text-sm"
|
||||
style="font-family: 'Ubuntu Mono', monospace"
|
||||
>{{ Math.round((currentStep / totalSteps) * 100) }}%</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="bg-black dark:bg-white h-full transition-all duration-300 progress-dither"
|
||||
:style="{
|
||||
width: (currentStep / totalSteps) * 100 + '%',
|
||||
}"></div>
|
||||
class="w-full bg-white dark:bg-black h-2 border-2 border-neutral-100 dark:border-neutral-900">
|
||||
<div
|
||||
class="bg-black dark:bg-white h-full transition-all duration-300 progress-dither"
|
||||
:style="{
|
||||
width: (currentStep / totalSteps) * 100 + '%',
|
||||
}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="px-8 py-12">
|
||||
<!-- Step Content -->
|
||||
<div v-if="!showResult" class="min-h-[400px]">
|
||||
<!-- Question 1: Urgency -->
|
||||
<div v-if="currentStep === 1">
|
||||
<div
|
||||
class="font-semibold text-black dark:text-white mb-6 text-2xl"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
How urgent is this decision?
|
||||
</div>
|
||||
<div
|
||||
class="bg-white dark:bg-neutral-950 p-8 border border-black dark:border-white relative">
|
||||
<!-- Dithered shadow background -->
|
||||
<!-- Content -->
|
||||
<div class="px-8 py-12">
|
||||
<!-- Step Content -->
|
||||
<div v-if="!showResult" class="min-h-[400px]">
|
||||
<!-- Question 1: Urgency -->
|
||||
<div v-if="currentStep === 1">
|
||||
<div
|
||||
class="absolute top-2 left-2 right-0 bottom-0 dither-shadow"></div>
|
||||
class="font-semibold text-black dark:text-white mb-6 text-2xl"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
How urgent is this decision?
|
||||
</div>
|
||||
<div
|
||||
class="bg-white dark:bg-neutral-950 p-8 border-2 border-neutral-900 dark:border-neutral-100 relative">
|
||||
<!-- Dithered shadow background -->
|
||||
<div
|
||||
class="absolute top-2 left-2 right-0 bottom-0 dither-shadow"></div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="flex justify-between mb-6 text-sm">
|
||||
<span
|
||||
class="text-black dark:text-white font-bold"
|
||||
style="font-family: 'Ubuntu Mono', monospace"
|
||||
>WE HAVE PLENTY OF TIME</span
|
||||
>
|
||||
<span
|
||||
class="text-black dark:text-white font-bold"
|
||||
style="font-family: 'Ubuntu Mono', monospace"
|
||||
>NEEDED YESTERDAY</span
|
||||
>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="range"
|
||||
v-model="state.urgency"
|
||||
min="1"
|
||||
max="5"
|
||||
step="1"
|
||||
class="w-full h-2 bg-white dark:bg-black appearance-none cursor-pointer slider" />
|
||||
<div
|
||||
class="flex justify-between mt-4 text-sm text-black dark:text-white"
|
||||
style="font-family: 'Ubuntu Mono', monospace">
|
||||
<span>1</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
<span>4</span>
|
||||
<span>5</span>
|
||||
<div class="flex justify-between mb-6 text-sm">
|
||||
<span
|
||||
class="text-black dark:text-white font-bold"
|
||||
style="font-family: 'Ubuntu Mono', monospace"
|
||||
>WE HAVE PLENTY OF TIME</span
|
||||
>
|
||||
<span
|
||||
class="text-black dark:text-white font-bold"
|
||||
style="font-family: 'Ubuntu Mono', monospace"
|
||||
>NEEDED YESTERDAY</span
|
||||
>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="range"
|
||||
v-model="state.urgency"
|
||||
min="1"
|
||||
max="5"
|
||||
step="1"
|
||||
class="w-full h-2 bg-white dark:bg-black appearance-none cursor-pointer slider" />
|
||||
<div
|
||||
class="flex justify-between mt-4 text-sm text-black dark:text-white"
|
||||
style="font-family: 'Ubuntu Mono', monospace">
|
||||
<span>1</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
<span>4</span>
|
||||
<span>5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 2: Reversibility -->
|
||||
<div v-if="currentStep === 2">
|
||||
<!-- Question 2: Reversibility -->
|
||||
<div v-if="currentStep === 2">
|
||||
<div
|
||||
class="font-semibold text-black mb-6 text-2xl"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
Can we change our minds later?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in reversibilityOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.reversible === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('reversible', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">
|
||||
{{ option.description }}
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 3: Expertise -->
|
||||
<div v-if="currentStep === 3">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
Who has the most relevant expertise?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in expertiseOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.expertise === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('expertise', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">
|
||||
{{ option.description }}
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 4: Impact -->
|
||||
<div v-if="currentStep === 4">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
Who will this impact?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in impactOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.impact === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('impact', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">
|
||||
{{ option.description }}
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 5: Options clarity -->
|
||||
<div v-if="currentStep === 5">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
How well-defined are the options?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in optionsOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.options === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('options', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">
|
||||
{{ option.description }}
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 6: Investment -->
|
||||
<div v-if="currentStep === 6">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
How invested is everyone?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in investmentOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.investment === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('investment', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">
|
||||
{{ option.description }}
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 7: Team size -->
|
||||
<div v-if="currentStep === 7">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
How many people need to participate?
|
||||
</div>
|
||||
<div class="grid grid-cols-3 sm:grid-cols-5 gap-4">
|
||||
<button
|
||||
v-for="size in teamSizes"
|
||||
:key="size"
|
||||
:class="[
|
||||
'px-4 py-3 font-semibold text-sm rounded-md border-2 transition-all duration-200',
|
||||
state.teamSize === size
|
||||
? 'bg-violet-700 text-white border-violet-700'
|
||||
: 'bg-white text-neutral-700 border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('teamSize', size)">
|
||||
{{ size }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div
|
||||
class="font-semibold text-black mb-6 text-2xl"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
Can we change our minds later?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in reversibilityOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.reversible === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('reversible', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">{{ option.description }}</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 3: Expertise -->
|
||||
<div v-if="currentStep === 3">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
Who has the most relevant expertise?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in expertiseOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.expertise === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('expertise', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">{{ option.description }}</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 4: Impact -->
|
||||
<div v-if="currentStep === 4">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
Who will this impact?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in impactOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.impact === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('impact', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">{{ option.description }}</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 5: Options clarity -->
|
||||
<div v-if="currentStep === 5">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
How well-defined are the options?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in optionsOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.options === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('options', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">{{ option.description }}</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 6: Investment -->
|
||||
<div v-if="currentStep === 6">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
How invested is everyone?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in investmentOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.investment === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('investment', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">{{ option.description }}</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 7: Team size -->
|
||||
<div v-if="currentStep === 7">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
How many people need to participate?
|
||||
</div>
|
||||
<div class="grid grid-cols-3 sm:grid-cols-5 gap-4">
|
||||
class="flex justify-between items-center mt-12 pt-8 border-t-2 border-neutral-200">
|
||||
<button
|
||||
v-for="size in teamSizes"
|
||||
:key="size"
|
||||
:class="[
|
||||
'px-4 py-3 font-semibold text-sm rounded-md border-2 transition-all duration-200',
|
||||
state.teamSize === size
|
||||
? 'bg-violet-700 text-white border-violet-700'
|
||||
: 'bg-white text-neutral-700 border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('teamSize', size)">
|
||||
{{ size }}
|
||||
v-if="currentStep > 1"
|
||||
@click="previousStep"
|
||||
class="px-6 py-3 text-violet-700 border-2 border-violet-700 rounded-md hover:bg-violet-50 transition-all duration-200">
|
||||
← Previous
|
||||
</button>
|
||||
<div v-else></div>
|
||||
|
||||
<button
|
||||
v-if="canProceed && currentStep < totalSteps"
|
||||
@click="nextStep"
|
||||
class="px-6 py-3 bg-violet-700 text-white rounded-md hover:bg-violet-800 transition-all duration-200">
|
||||
Next →
|
||||
</button>
|
||||
<button
|
||||
v-else-if="canProceed && currentStep === totalSteps"
|
||||
@click="showRecommendation"
|
||||
class="px-6 py-3 bg-violet-700 text-white rounded-md hover:bg-violet-800 transition-all duration-200">
|
||||
Get Recommendation
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<!-- Results -->
|
||||
<div
|
||||
class="flex justify-between items-center mt-12 pt-8 border-t border-neutral-200">
|
||||
<button
|
||||
v-if="currentStep > 1"
|
||||
@click="previousStep"
|
||||
class="px-6 py-3 text-violet-700 border border-violet-700 rounded-md hover:bg-violet-50 transition-all duration-200">
|
||||
← Previous
|
||||
</button>
|
||||
<div v-else></div>
|
||||
v-if="showResult"
|
||||
data-results
|
||||
class="border-t-2 border-neutral-200 pt-12">
|
||||
<UCard class="bg-neutral-50">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-semibold text-violet-700 mb-2">
|
||||
{{ result.method }}
|
||||
</h2>
|
||||
<p class="text-lg text-neutral-600">{{ result.tagline }}</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="canProceed && currentStep < totalSteps"
|
||||
@click="nextStep"
|
||||
class="px-6 py-3 bg-violet-700 text-white rounded-md hover:bg-violet-800 transition-all duration-200">
|
||||
Next →
|
||||
</button>
|
||||
<button
|
||||
v-else-if="canProceed && currentStep === totalSteps"
|
||||
@click="showRecommendation"
|
||||
class="px-6 py-3 bg-violet-700 text-white rounded-md hover:bg-violet-800 transition-all duration-200">
|
||||
Get Recommendation
|
||||
</button>
|
||||
<UCard class="bg-white mb-8">
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<h3 class="font-semibold text-neutral-900 mb-4 text-lg">
|
||||
Why this framework?
|
||||
</h3>
|
||||
<p class="text-neutral-700 leading-relaxed">
|
||||
{{ result.reasoning }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold text-neutral-900 mb-4 text-lg">
|
||||
How to implement:
|
||||
</h3>
|
||||
<ul class="space-y-3">
|
||||
<li
|
||||
v-for="step in result.steps"
|
||||
:key="step"
|
||||
class="flex items-start">
|
||||
<span class="text-violet-700 font-bold mr-3 mt-1"
|
||||
>→</span
|
||||
>
|
||||
<span class="text-neutral-700">{{ step }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div v-if="result.tips">
|
||||
<h3 class="font-semibold text-neutral-900 mb-4 text-lg">
|
||||
Pro tips:
|
||||
</h3>
|
||||
<ul class="space-y-3">
|
||||
<li
|
||||
v-for="tip in result.tips"
|
||||
:key="tip"
|
||||
class="flex items-start">
|
||||
<span class="text-violet-700 font-bold mr-3 mt-1"
|
||||
>→</span
|
||||
>
|
||||
<span class="text-neutral-700">{{ tip }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UAlert
|
||||
v-if="result.warning"
|
||||
color="red"
|
||||
variant="soft"
|
||||
:title="'Watch out for:'"
|
||||
:description="result.warning"
|
||||
class="mb-6" />
|
||||
|
||||
<UAlert
|
||||
v-if="result.success"
|
||||
color="emerald"
|
||||
variant="soft"
|
||||
:title="'Success looks like:'"
|
||||
:description="result.success"
|
||||
class="mb-6" />
|
||||
|
||||
<UCard v-if="result.alternatives" class="bg-neutral-50">
|
||||
<h3 class="font-semibold text-neutral-900 mb-4 text-lg">
|
||||
Also consider:
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<UCard
|
||||
v-for="alt in result.alternatives"
|
||||
:key="alt.method"
|
||||
class="bg-white">
|
||||
<span class="font-semibold">{{ alt.method }}:</span>
|
||||
{{ alt.when }}
|
||||
</UCard>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<div class="flex gap-4 mt-8">
|
||||
<UButton @click="resetForm" color="violet">
|
||||
Try Another Decision
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="printResult"
|
||||
variant="outline"
|
||||
color="violet">
|
||||
Print Recommendation
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results -->
|
||||
<div
|
||||
v-if="showResult"
|
||||
data-results
|
||||
class="border-t border-neutral-200 pt-12">
|
||||
<UCard class="bg-neutral-50">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-semibold text-violet-700 mb-2">
|
||||
{{ result.method }}
|
||||
</h2>
|
||||
<p class="text-lg text-neutral-600">{{ result.tagline }}</p>
|
||||
</div>
|
||||
|
||||
<UCard class="bg-white mb-8">
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<h3 class="font-semibold text-neutral-900 mb-4 text-lg">
|
||||
Why this framework?
|
||||
</h3>
|
||||
<p class="text-neutral-700 leading-relaxed">
|
||||
{{ result.reasoning }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold text-neutral-900 mb-4 text-lg">
|
||||
How to implement:
|
||||
</h3>
|
||||
<ul class="space-y-3">
|
||||
<li
|
||||
v-for="step in result.steps"
|
||||
:key="step"
|
||||
class="flex items-start">
|
||||
<span class="text-violet-700 font-bold mr-3 mt-1"
|
||||
>→</span
|
||||
>
|
||||
<span class="text-neutral-700">{{ step }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div v-if="result.tips">
|
||||
<h3 class="font-semibold text-neutral-900 mb-4 text-lg">
|
||||
Pro tips:
|
||||
</h3>
|
||||
<ul class="space-y-3">
|
||||
<li
|
||||
v-for="tip in result.tips"
|
||||
:key="tip"
|
||||
class="flex items-start">
|
||||
<span class="text-violet-700 font-bold mr-3 mt-1"
|
||||
>→</span
|
||||
>
|
||||
<span class="text-neutral-700">{{ tip }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UAlert
|
||||
v-if="result.warning"
|
||||
color="red"
|
||||
variant="soft"
|
||||
:title="'Watch out for:'"
|
||||
:description="result.warning"
|
||||
class="mb-6" />
|
||||
|
||||
<UAlert
|
||||
v-if="result.success"
|
||||
color="emerald"
|
||||
variant="soft"
|
||||
:title="'Success looks like:'"
|
||||
:description="result.success"
|
||||
class="mb-6" />
|
||||
|
||||
<UCard v-if="result.alternatives" class="bg-neutral-50">
|
||||
<h3 class="font-semibold text-neutral-900 mb-4 text-lg">
|
||||
Also consider:
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<UCard
|
||||
v-for="alt in result.alternatives"
|
||||
:key="alt.method"
|
||||
class="bg-white">
|
||||
<span class="font-semibold">{{ alt.method }}:</span>
|
||||
{{ alt.when }}
|
||||
</UCard>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<div class="flex gap-4 mt-8">
|
||||
<UButton @click="resetForm" color="violet">
|
||||
Try Another Decision
|
||||
</UButton>
|
||||
<UButton @click="printResult" variant="outline" color="violet">
|
||||
Print Recommendation
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue