style: enhance CSS for improved layout and responsiveness, integrate Ubuntu font, and streamline export options across templates
This commit is contained in:
parent
3b33ff3819
commit
eede87a273
6 changed files with 1130 additions and 1745 deletions
|
|
@ -4,13 +4,12 @@
|
|||
<WizardSubnav />
|
||||
|
||||
<!-- Export Options - Top -->
|
||||
<div class="flex justify-center py-6">
|
||||
<ExportOptions
|
||||
:export-data="exportData"
|
||||
filename="conflict-resolution-framework"
|
||||
title="Conflict Resolution Framework"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ExportOptions
|
||||
:export-data="exportData"
|
||||
filename="conflict-resolution-framework"
|
||||
title="Conflict Resolution Framework"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100"
|
||||
|
|
@ -822,13 +821,11 @@
|
|||
</div>
|
||||
|
||||
<!-- Export Options - Bottom -->
|
||||
<div class="flex justify-center py-6">
|
||||
<ExportOptions
|
||||
:export-data="exportData"
|
||||
filename="conflict-resolution-framework"
|
||||
title="Conflict Resolution Framework"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -1392,57 +1389,9 @@ const exportData = computed(() => ({
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Ubuntu font import */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Ubuntu+Mono:wght@400;700&display=swap");
|
||||
@reference "tailwindcss";
|
||||
|
||||
/* Template wrapper and document styling */
|
||||
/* rely on Tailwind bg utilities applied on wrapper */
|
||||
.template-wrapper {
|
||||
min-height: 100vh;
|
||||
padding: 2rem;
|
||||
font-family: "Ubuntu", monospace;
|
||||
position: relative;
|
||||
}
|
||||
.template-wrapper::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: radial-gradient(circle at 25% 25%, black 1px, transparent 1px),
|
||||
radial-gradient(circle at 75% 75%, black 1px, transparent 1px);
|
||||
background-size: 8px 8px, 8px 8px;
|
||||
background-position: 0 0, 4px 4px;
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.document-page::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
background: black;
|
||||
background-image: radial-gradient(white 1px, transparent 1px);
|
||||
background-size: 2px 2px;
|
||||
z-index: -1;
|
||||
}
|
||||
.document-page::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: 1px solid black;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Template-specific styles that aren't in main.css */
|
||||
|
||||
/* Progress bar */
|
||||
.progress-bar {
|
||||
|
|
@ -1461,30 +1410,6 @@ const exportData = computed(() => ({
|
|||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* Document header */
|
||||
.document-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.document-title {
|
||||
font-size: 2.25rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
|
||||
margin: 0 0 0.5rem;
|
||||
padding: 1rem 0;
|
||||
border-top: 2px solid #111827;
|
||||
border-bottom: 2px solid #111827;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Quick start section */
|
||||
.quick-start {
|
||||
background: #f0f7ff;
|
||||
|
|
@ -1528,11 +1453,6 @@ const exportData = computed(() => ({
|
|||
color: white;
|
||||
}
|
||||
|
||||
/* Section styling */
|
||||
.section-card {
|
||||
@apply border border-neutral-200 dark:border-neutral-800 rounded-lg p-5 mb-8;
|
||||
}
|
||||
|
||||
/* Styling for sections when toggled off */
|
||||
.section-card:has(.space-y-6[style*="display: none"]) {
|
||||
opacity: 0.7;
|
||||
|
|
@ -1542,17 +1462,6 @@ const exportData = computed(() => ({
|
|||
color: #666;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
/* presentational container only */
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
color: inherit;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
/* Toggle styling */
|
||||
.toggle-section {
|
||||
display: flex;
|
||||
|
|
@ -1589,84 +1498,6 @@ const exportData = computed(() => ({
|
|||
transform: translateX(24px);
|
||||
}
|
||||
|
||||
/* Form styling */
|
||||
.form-group-large {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* Ensure form field containers are also full-width */
|
||||
.form-group-large {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group-large > * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Ensure consistent alignment for all form fields */
|
||||
.form-group-large :deep(textarea),
|
||||
.form-group-large :deep(input),
|
||||
.form-group-large :deep(select),
|
||||
.form-group-large :deep(.ui-select),
|
||||
.form-group-large :deep(.ui-input),
|
||||
.form-group-large :deep(.ui-textarea) {
|
||||
margin-left: 0 !important;
|
||||
padding-left: 0.75rem !important;
|
||||
}
|
||||
|
||||
/* Additional targeting for UInput, USelect, UTextarea components */
|
||||
.form-group-large :deep(.u-input),
|
||||
.form-group-large :deep(.u-select),
|
||||
.form-group-large :deep(.u-textarea),
|
||||
.form-group-large :deep([data-headlessui-state]),
|
||||
.form-group-large :deep(.relative) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.form-group-large :deep(.u-input input),
|
||||
.form-group-large :deep(.u-select select),
|
||||
.form-group-large :deep(.u-textarea textarea) {
|
||||
margin-left: 0 !important;
|
||||
padding-left: 0.75rem !important;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
/* moved to inline classes */
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
@apply flex flex-col space-y-3;
|
||||
}
|
||||
|
||||
.checkbox-item {
|
||||
@apply flex;
|
||||
}
|
||||
|
||||
/* Approach radio styling removed - using pure Tailwind classes */
|
||||
|
||||
.values-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 0.75rem;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.inline-field {
|
||||
display: inline-block;
|
||||
margin: 0 0.25rem;
|
||||
min-width: 120px;
|
||||
border: none;
|
||||
background: #f9fafb;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.content-paragraph {
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.6;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Validation error styling */
|
||||
.validation-error {
|
||||
color: #ef4444;
|
||||
|
|
@ -1702,21 +1533,6 @@ const exportData = computed(() => ({
|
|||
background: #5856eb;
|
||||
}
|
||||
|
||||
/* Bottom export controls */
|
||||
|
||||
.export-buttons-bottom {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.export-btn.large svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.close-preview-btn {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
|
|
@ -1857,169 +1673,4 @@ html.dark .policy-preview code {
|
|||
.policy-preview em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Export controls */
|
||||
|
||||
.export-btn {
|
||||
/* retained for bitmap overrides below; core layout now via Tailwind */
|
||||
}
|
||||
|
||||
/* Hide elements from print */
|
||||
.no-print,
|
||||
.no-pdf {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
.no-print,
|
||||
.no-pdf {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.template-wrapper {
|
||||
background: white !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.document-page {
|
||||
max-width: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.document-title {
|
||||
font-size: 18pt;
|
||||
background: none;
|
||||
padding: 0.5rem 0;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14pt;
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
break-inside: avoid;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.checkbox-item {
|
||||
font-size: 10pt;
|
||||
margin: 2pt 0;
|
||||
}
|
||||
|
||||
.inline-field {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
border-bottom: 1pt solid #000 !important;
|
||||
padding: 2pt !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Bitmap aesthetic overrides - remove all rounded corners */
|
||||
* {
|
||||
border-radius: 0 !important;
|
||||
font-family: "Ubuntu", monospace !important;
|
||||
}
|
||||
|
||||
/* Form fields with bitmap styling */
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
border: 1px solid black !important;
|
||||
background: white !important;
|
||||
color: black !important;
|
||||
font-family: "Ubuntu Mono", monospace !important;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
outline: 2px solid black !important;
|
||||
outline-offset: -2px !important;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
/* Dark mode form fields */
|
||||
html.dark input,
|
||||
html.dark textarea,
|
||||
html.dark select {
|
||||
border: 1px solid white !important;
|
||||
background: #0a0a0a !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
html.dark input:focus,
|
||||
html.dark textarea:focus,
|
||||
html.dark select:focus {
|
||||
outline: 2px solid white !important;
|
||||
background: #0a0a0a !important;
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
@apply bg-white border border-black text-black font-mono uppercase font-normal tracking-wide;
|
||||
}
|
||||
|
||||
.export-btn:hover {
|
||||
@apply bg-black text-white -translate-x-px -translate-y-px;
|
||||
}
|
||||
|
||||
.export-btn.primary {
|
||||
@apply bg-black text-white;
|
||||
}
|
||||
|
||||
.export-btn.primary:hover {
|
||||
@apply bg-black -translate-x-px -translate-y-px;
|
||||
}
|
||||
|
||||
/* Remove any card styling roundness */
|
||||
.section-card,
|
||||
.form-group-large {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Document titles */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Ubuntu", monospace !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
/* All text */
|
||||
p,
|
||||
span,
|
||||
div {
|
||||
color: inherit !important;
|
||||
font-family: "Ubuntu", monospace !important;
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.template-wrapper {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.preset-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.values-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.export-content {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,34 +4,39 @@
|
|||
<WizardSubnav />
|
||||
|
||||
<!-- Export Options at Top -->
|
||||
<div class="flex justify-center py-6">
|
||||
<ExportOptions
|
||||
:export-data="exportData"
|
||||
filename="decision-framework"
|
||||
title="Decision Framework Helper" />
|
||||
</div>
|
||||
<ExportOptions
|
||||
:export-data="exportData"
|
||||
filename="decision-framework"
|
||||
title="Decision Framework Helper"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
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-white dark:bg-neutral-950 border-2 border-neutral-900 dark:border-neutral-100 decision-framework-container">
|
||||
class="bg-white dark:bg-neutral-950 border-2 border-neutral-900 dark:border-neutral-100 decision-framework-container"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div
|
||||
class="bg-black dark:bg-white text-white dark:text-black px-8 py-12 text-center header-section">
|
||||
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>
|
||||
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-2 border-neutral-100 dark:border-neutral-900">
|
||||
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">
|
||||
style="font-family: 'Ubuntu', monospace"
|
||||
>
|
||||
Decision Framework Helper
|
||||
</h1>
|
||||
<p class="text-lg" style="font-family: 'Ubuntu', monospace">
|
||||
|
|
@ -41,24 +46,22 @@
|
|||
<!-- 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"
|
||||
<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"
|
||||
<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-2 border-neutral-100 dark:border-neutral-900">
|
||||
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>
|
||||
|
|
@ -72,14 +75,15 @@
|
|||
<div v-if="currentStep === 1">
|
||||
<div
|
||||
class="font-semibold text-black dark:text-white mb-6 text-2xl"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
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">
|
||||
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="absolute top-2 left-2 right-0 bottom-0 dither-shadow"></div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="flex justify-between mb-6 text-sm">
|
||||
|
|
@ -101,10 +105,12 @@
|
|||
min="1"
|
||||
max="5"
|
||||
step="1"
|
||||
class="w-full h-2 bg-white dark:bg-black appearance-none cursor-pointer slider" />
|
||||
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">
|
||||
style="font-family: 'Ubuntu Mono', monospace"
|
||||
>
|
||||
<span>1</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
|
|
@ -120,7 +126,8 @@
|
|||
<div v-if="currentStep === 2">
|
||||
<div
|
||||
class="font-semibold text-black mb-6 text-2xl"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
style="font-family: 'Ubuntu', monospace"
|
||||
>
|
||||
Can we change our minds later?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
|
|
@ -133,7 +140,8 @@
|
|||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('reversible', option.value)">
|
||||
@click="selectOption('reversible', option.value)"
|
||||
>
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">
|
||||
{{ option.description }}
|
||||
|
|
@ -157,7 +165,8 @@
|
|||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('expertise', option.value)">
|
||||
@click="selectOption('expertise', option.value)"
|
||||
>
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">
|
||||
{{ option.description }}
|
||||
|
|
@ -181,7 +190,8 @@
|
|||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('impact', option.value)">
|
||||
@click="selectOption('impact', option.value)"
|
||||
>
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">
|
||||
{{ option.description }}
|
||||
|
|
@ -205,7 +215,8 @@
|
|||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('options', option.value)">
|
||||
@click="selectOption('options', option.value)"
|
||||
>
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">
|
||||
{{ option.description }}
|
||||
|
|
@ -229,7 +240,8 @@
|
|||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('investment', option.value)">
|
||||
@click="selectOption('investment', option.value)"
|
||||
>
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">
|
||||
{{ option.description }}
|
||||
|
|
@ -253,7 +265,8 @@
|
|||
? '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)">
|
||||
@click="selectOption('teamSize', size)"
|
||||
>
|
||||
{{ size }}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -261,11 +274,13 @@
|
|||
|
||||
<!-- Navigation -->
|
||||
<div
|
||||
class="flex justify-between items-center mt-12 pt-8 border-t-2 border-neutral-200">
|
||||
class="flex justify-between items-center mt-12 pt-8 border-t-2 border-neutral-200"
|
||||
>
|
||||
<button
|
||||
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">
|
||||
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>
|
||||
|
|
@ -273,13 +288,15 @@
|
|||
<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">
|
||||
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">
|
||||
class="px-6 py-3 bg-violet-700 text-white rounded-md hover:bg-violet-800 transition-all duration-200"
|
||||
>
|
||||
Get Recommendation
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -289,7 +306,8 @@
|
|||
<div
|
||||
v-if="showResult"
|
||||
data-results
|
||||
class="border-t-2 border-neutral-200 pt-12">
|
||||
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">
|
||||
|
|
@ -317,10 +335,9 @@
|
|||
<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
|
||||
>
|
||||
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>
|
||||
|
|
@ -334,10 +351,9 @@
|
|||
<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
|
||||
>
|
||||
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>
|
||||
|
|
@ -351,7 +367,8 @@
|
|||
variant="soft"
|
||||
:title="'Watch out for:'"
|
||||
:description="result.warning"
|
||||
class="mb-6" />
|
||||
class="mb-6"
|
||||
/>
|
||||
|
||||
<UAlert
|
||||
v-if="result.success"
|
||||
|
|
@ -359,7 +376,8 @@
|
|||
variant="soft"
|
||||
:title="'Success looks like:'"
|
||||
:description="result.success"
|
||||
class="mb-6" />
|
||||
class="mb-6"
|
||||
/>
|
||||
|
||||
<UCard v-if="result.alternatives" class="bg-neutral-50">
|
||||
<h3 class="font-semibold text-neutral-900 mb-4 text-lg">
|
||||
|
|
@ -369,7 +387,8 @@
|
|||
<UCard
|
||||
v-for="alt in result.alternatives"
|
||||
:key="alt.method"
|
||||
class="bg-white">
|
||||
class="bg-white"
|
||||
>
|
||||
<span class="font-semibold">{{ alt.method }}:</span>
|
||||
{{ alt.when }}
|
||||
</UCard>
|
||||
|
|
@ -380,10 +399,7 @@
|
|||
<UButton @click="resetForm" color="violet">
|
||||
Try Another Decision
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="printResult"
|
||||
variant="outline"
|
||||
color="violet">
|
||||
<UButton @click="printResult" variant="outline" color="violet">
|
||||
Print Recommendation
|
||||
</UButton>
|
||||
</div>
|
||||
|
|
@ -395,17 +411,16 @@
|
|||
</div>
|
||||
|
||||
<!-- Export Options at Bottom -->
|
||||
<div class="flex justify-center py-6">
|
||||
<ExportOptions
|
||||
:export-data="exportData"
|
||||
filename="decision-framework"
|
||||
title="Decision Framework Helper" />
|
||||
</div>
|
||||
title="Decision Framework Helper"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ExportOptions from '~/components/ExportOptions.vue'
|
||||
import ExportOptions from "~/components/ExportOptions.vue";
|
||||
|
||||
const state = reactive({
|
||||
urgency: 3,
|
||||
|
|
@ -584,8 +599,7 @@ function determineFramework() {
|
|||
"Execute without delay",
|
||||
"Debrief when crisis passes",
|
||||
],
|
||||
warning:
|
||||
"Only use in true emergencies. Follow up with team discussion afterward.",
|
||||
warning: "Only use in true emergencies. Follow up with team discussion afterward.",
|
||||
success:
|
||||
"Crisis averted through quick action. Team understands why autocratic mode was necessary.",
|
||||
};
|
||||
|
|
@ -621,11 +635,7 @@ function determineFramework() {
|
|||
}
|
||||
|
||||
// AVOIDANT - non-urgent + undefined + low investment
|
||||
if (
|
||||
state.urgency <= 2 &&
|
||||
state.options === "undefined" &&
|
||||
state.investment === "low"
|
||||
) {
|
||||
if (state.urgency <= 2 && state.options === "undefined" && state.investment === "low") {
|
||||
return {
|
||||
method: "Strategic Delay",
|
||||
tagline: "Wait for clarity to emerge",
|
||||
|
|
@ -638,10 +648,8 @@ function determineFramework() {
|
|||
"Revisit when conditions change",
|
||||
"Document why you're waiting",
|
||||
],
|
||||
warning:
|
||||
"Don't let avoidance become paralysis. Set a deadline for revisiting.",
|
||||
success:
|
||||
"By waiting, better options emerged or the decision became unnecessary.",
|
||||
warning: "Don't let avoidance become paralysis. Set a deadline for revisiting.",
|
||||
success: "By waiting, better options emerged or the decision became unnecessary.",
|
||||
alternatives: [
|
||||
{
|
||||
method: "Time-boxed exploration",
|
||||
|
|
@ -752,8 +760,7 @@ function determineFramework() {
|
|||
"Document all input received",
|
||||
"Explain how input influenced the decision",
|
||||
],
|
||||
success:
|
||||
"Decision informed by diverse perspectives with clear accountability.",
|
||||
success: "Decision informed by diverse perspectives with clear accountability.",
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -815,10 +822,7 @@ function determineFramework() {
|
|||
}
|
||||
|
||||
// DEMOCRATIC VOTE - larger group, time pressure
|
||||
if (
|
||||
(state.teamSize === "6-8" || state.teamSize === "9+") &&
|
||||
state.urgency >= 4
|
||||
) {
|
||||
if ((state.teamSize === "6-8" || state.teamSize === "9+") && state.urgency >= 4) {
|
||||
return {
|
||||
method: "Democratic Vote",
|
||||
tagline: "Majority decides, move forward together",
|
||||
|
|
@ -838,8 +842,7 @@ function determineFramework() {
|
|||
],
|
||||
warning:
|
||||
"Don't vote on everything! Reserve it for when other methods are too slow.",
|
||||
success:
|
||||
"Clear decision made efficiently with everyone having equal say.",
|
||||
success: "Clear decision made efficiently with everyone having equal say.",
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -940,7 +943,7 @@ const exportData = computed(() => ({
|
|||
state: state,
|
||||
currentStep: currentStep.value,
|
||||
showResult: showResult.value,
|
||||
result: result.value
|
||||
result: result.value,
|
||||
},
|
||||
surveyResponses: {
|
||||
urgency: state.urgency,
|
||||
|
|
@ -949,19 +952,19 @@ const exportData = computed(() => ({
|
|||
impact: state.impact,
|
||||
options: state.options,
|
||||
investment: state.investment,
|
||||
teamSize: state.teamSize
|
||||
teamSize: state.teamSize,
|
||||
},
|
||||
recommendedFramework: result.value || null,
|
||||
metadata: {
|
||||
completedAt: showResult.value ? new Date().toISOString() : null,
|
||||
totalSteps: totalSteps,
|
||||
progressPercentage: Math.round((currentStep.value / totalSteps) * 100)
|
||||
progressPercentage: Math.round((currentStep.value / totalSteps) * 100),
|
||||
},
|
||||
exportedAt: new Date().toISOString(),
|
||||
section: "decision-framework",
|
||||
title: "Decision Framework Helper",
|
||||
description: "Interactive wizard to find the right way to decide together"
|
||||
}))
|
||||
description: "Interactive wizard to find the right way to decide together",
|
||||
}));
|
||||
|
||||
// Keyboard navigation
|
||||
onMounted(() => {
|
||||
|
|
|
|||
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