1828 lines
57 KiB
Vue
1828 lines
57 KiB
Vue
<template>
|
|
<div
|
|
class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
|
|
<!-- Export Controls -->
|
|
<div v-if="charterGenerated" class="export-controls no-print no-pdf">
|
|
<div class="export-content">
|
|
<div class="export-section">
|
|
<h3 class="export-title">Export to:</h3>
|
|
<div class="export-buttons">
|
|
<button
|
|
@click="exportPDF"
|
|
class="export-btn primary"
|
|
title="Download PDF">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path
|
|
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
|
<polyline points="14,2 14,8 20,8" />
|
|
<line x1="16" y1="13" x2="8" y2="13" />
|
|
<line x1="16" y1="17" x2="8" y2="17" />
|
|
<polyline points="10,9 9,9 8,9" />
|
|
</svg>
|
|
PDF
|
|
</button>
|
|
<button
|
|
@click="handlePrint"
|
|
class="export-btn"
|
|
title="Print Document">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<polyline points="6,9 6,2 18,2 18,9" />
|
|
<path
|
|
d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
|
|
<rect x="6" y="14" width="12" height="8" />
|
|
</svg>
|
|
PRINT
|
|
</button>
|
|
<button
|
|
@click="exportText"
|
|
class="export-btn"
|
|
title="Download Text">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path
|
|
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
|
<polyline points="14,2 14,8 20,8" />
|
|
<line x1="16" y1="13" x2="8" y2="13" />
|
|
<line x1="16" y1="17" x2="8" y2="17" />
|
|
<line x1="12" y1="9" x2="8" y2="9" />
|
|
</svg>
|
|
TXT
|
|
</button>
|
|
<button
|
|
@click="exportMarkdown"
|
|
class="export-btn"
|
|
title="Download Markdown">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path
|
|
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
|
<polyline points="14,2 14,8 20,8" />
|
|
<line x1="12" y1="18" x2="12" y2="12" />
|
|
<path d="m9 15 3-3 3 3" />
|
|
</svg>
|
|
MD
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="document-page">
|
|
<div class="max-w-5xl mx-auto">
|
|
<!-- Header -->
|
|
<div class="bg-white rounded-t-lg shadow-xl overflow-hidden">
|
|
<div class="bg-blue-600 text-white p-8 md:p-12 text-center">
|
|
<h1
|
|
class="text-3xl md:text-5xl font-bold mb-3 content-title text-neutral-50 dark:text-neutral-100">
|
|
Co-op Tech Charter Builder
|
|
</h1>
|
|
<p class="text-lg opacity-95">
|
|
Build technology decisions on cooperative values, not corporate
|
|
defaults
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Progress Bar -->
|
|
<div
|
|
class="flex bg-neutral-50 px-8 py-4 border-b"
|
|
role="tablist"
|
|
aria-label="Charter builder steps">
|
|
<button
|
|
v-for="(step, idx) in steps"
|
|
:key="idx"
|
|
@click="currentStep = idx"
|
|
:aria-selected="currentStep === idx"
|
|
:aria-label="`Step ${idx + 1}: ${step.label}`"
|
|
:tabindex="currentStep === idx ? 0 : -1"
|
|
role="tab"
|
|
class="flex-1 text-center relative cursor-pointer group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset">
|
|
<div class="flex flex-col items-center">
|
|
<div
|
|
:class="[
|
|
'w-10 h-10 rounded-full flex items-center justify-center font-bold transition-all',
|
|
currentStep === idx
|
|
? 'bg-blue-600 text-white scale-110'
|
|
: currentStep > idx
|
|
? 'bg-green-500 text-white'
|
|
: 'bg-neutral-300 text-neutral-600',
|
|
]">
|
|
{{ idx + 1 }}
|
|
</div>
|
|
<span
|
|
:class="[
|
|
'mt-2 text-sm',
|
|
currentStep === idx
|
|
? 'text-blue-600 font-semibold'
|
|
: 'text-neutral-600',
|
|
]">
|
|
{{ step.label }}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="p-8">
|
|
<!-- Step 1: Principles -->
|
|
<div
|
|
v-show="currentStep === 0"
|
|
class="space-y-6"
|
|
role="tabpanel"
|
|
:aria-labelledby="`step-${currentStep}-tab`">
|
|
<div>
|
|
<h2
|
|
class="text-2xl font-bold text-neutral-800 mb-2"
|
|
id="principles-heading">
|
|
Define Your Principles
|
|
</h2>
|
|
<p class="text-neutral-600 mb-4">
|
|
Select the values that guide your technology choices.
|
|
</p>
|
|
<div
|
|
class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
|
|
<h3 class="font-semibold text-blue-900 mb-2">How to use:</h3>
|
|
<ul class="text-sm text-blue-800 space-y-1">
|
|
<li>• Click once to select a principle</li>
|
|
<li>
|
|
• Click again to mark as "NON-NEGOTIABLE" (vendors must
|
|
meet this requirement)
|
|
</li>
|
|
<li>• Click a third time to deselect</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<fieldset class="space-y-4">
|
|
<legend class="sr-only">
|
|
Select your technology principles
|
|
</legend>
|
|
<div class="grid md:grid-cols-2 gap-4 principle-grid">
|
|
<button
|
|
v-for="principle in principles"
|
|
:key="principle.id"
|
|
@click="togglePrinciple(principle.id)"
|
|
@keydown.enter="togglePrinciple(principle.id)"
|
|
@keydown.space.prevent="togglePrinciple(principle.id)"
|
|
:aria-pressed="selectedPrinciples.includes(principle.id)"
|
|
:aria-describedby="`principle-${principle.id}-desc`"
|
|
:class="[
|
|
'p-6 rounded-lg border-2 transition-all text-left focus:outline-none focus:ring-2 focus:ring-blue-500',
|
|
selectedPrinciples.includes(principle.id)
|
|
? 'bg-blue-600 text-white border-transparent shadow-md'
|
|
: 'border-neutral-200 hover:border-blue-400 hover:shadow-md',
|
|
]">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<h3 class="font-semibold text-lg mb-2">
|
|
<span>{{ principle.name }}</span>
|
|
</h3>
|
|
<p
|
|
:id="`principle-${principle.id}-desc`"
|
|
:class="
|
|
selectedPrinciples.includes(principle.id)
|
|
? 'opacity-90'
|
|
: 'text-neutral-600'
|
|
"
|
|
class="text-sm">
|
|
{{ principle.description }}
|
|
</p>
|
|
</div>
|
|
<span
|
|
v-if="nonNegotiables.includes(principle.id)"
|
|
class="bg-red-500 text-white text-xs px-2 py-1 rounded-full font-semibold whitespace-nowrap"
|
|
aria-label="Non-negotiable requirement">
|
|
NON-NEGOTIABLE
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<!-- Step 2: Constraints -->
|
|
<div
|
|
v-show="currentStep === 1"
|
|
class="space-y-6"
|
|
role="tabpanel"
|
|
:aria-labelledby="`step-${currentStep}-tab`">
|
|
<div>
|
|
<h2
|
|
class="text-2xl font-bold text-neutral-800 mb-2"
|
|
id="constraints-heading">
|
|
Technical Constraints
|
|
</h2>
|
|
<p class="text-neutral-600">
|
|
Define your technical requirements and operational
|
|
constraints.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<fieldset class="bg-neutral-50 p-6 rounded-lg">
|
|
<legend class="font-semibold text-lg mb-4">
|
|
Authentication
|
|
</legend>
|
|
<div
|
|
class="flex flex-wrap gap-3 constraint-buttons"
|
|
role="radiogroup"
|
|
aria-labelledby="auth-heading">
|
|
<button
|
|
v-for="option in authOptions"
|
|
:key="option.value"
|
|
@click="constraints.sso = option.value"
|
|
:aria-pressed="constraints.sso === option.value"
|
|
role="radio"
|
|
:aria-checked="constraints.sso === option.value"
|
|
:class="[
|
|
'px-5 py-2 rounded-md border-2 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500',
|
|
constraints.sso === option.value
|
|
? 'bg-blue-600 text-white border-blue-600'
|
|
: 'border-neutral-300 hover:border-blue-400',
|
|
]">
|
|
{{ option.label }}
|
|
</button>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<div class="bg-neutral-50 p-6 rounded-lg">
|
|
<h3 class="font-semibold text-lg mb-4">Hosting Model</h3>
|
|
<div class="flex flex-wrap gap-3 constraint-buttons">
|
|
<button
|
|
v-for="option in hostingOptions"
|
|
:key="option.value"
|
|
@click="constraints.hosting = option.value"
|
|
:class="[
|
|
'px-5 py-2 rounded-md border-2 transition-all',
|
|
constraints.hosting === option.value
|
|
? 'bg-blue-600 text-white border-blue-600'
|
|
: 'border-neutral-300 hover:border-blue-400',
|
|
]">
|
|
{{ option.label }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<fieldset class="bg-neutral-50 p-6 rounded-lg">
|
|
<legend class="font-semibold text-lg mb-2">
|
|
Required Integrations
|
|
</legend>
|
|
<p class="text-sm text-neutral-600 mb-4">
|
|
Select all that apply (multiple selections allowed)
|
|
</p>
|
|
<div class="flex flex-wrap gap-3 constraint-buttons">
|
|
<button
|
|
v-for="integration in integrationOptions"
|
|
:key="integration"
|
|
@click="toggleIntegration(integration)"
|
|
:aria-pressed="
|
|
constraints.integrations.includes(integration)
|
|
"
|
|
:class="[
|
|
'px-5 py-2 rounded-md border-2 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500',
|
|
constraints.integrations.includes(integration)
|
|
? 'bg-blue-600 text-white border-blue-600'
|
|
: 'border-neutral-300 hover:border-blue-400',
|
|
]">
|
|
{{ integration }}
|
|
</button>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<div class="bg-neutral-50 p-6 rounded-lg">
|
|
<h3 class="font-semibold text-lg mb-4">
|
|
Support Expectations
|
|
</h3>
|
|
<div class="flex flex-wrap gap-3 constraint-buttons">
|
|
<button
|
|
v-for="option in supportOptions"
|
|
:key="option.value"
|
|
@click="constraints.support = option.value"
|
|
:class="[
|
|
'px-5 py-2 rounded-md border-2 transition-all',
|
|
constraints.support === option.value
|
|
? 'bg-blue-600 text-white border-blue-600'
|
|
: 'border-neutral-300 hover:border-blue-400',
|
|
]">
|
|
{{ option.label }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-neutral-50 p-6 rounded-lg">
|
|
<h3 class="font-semibold text-lg mb-4">Migration Timeline</h3>
|
|
<div class="flex flex-wrap gap-3 constraint-buttons">
|
|
<button
|
|
v-for="option in timelineOptions"
|
|
:key="option.value"
|
|
@click="constraints.timeline = option.value"
|
|
:class="[
|
|
'px-5 py-2 rounded-md border-2 transition-all',
|
|
constraints.timeline === option.value
|
|
? 'bg-blue-600 text-white border-blue-600'
|
|
: 'border-neutral-300 hover:border-blue-400',
|
|
]">
|
|
{{ option.label }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3: Weights -->
|
|
<div
|
|
v-show="currentStep === 2"
|
|
class="space-y-6"
|
|
role="tabpanel"
|
|
:aria-labelledby="`step-${currentStep}-tab`">
|
|
<div>
|
|
<h2
|
|
class="text-2xl font-bold text-neutral-800 mb-2"
|
|
id="weights-heading">
|
|
Set Evaluation Weights
|
|
</h2>
|
|
<p class="text-neutral-600 mb-4">
|
|
Adjust the importance of each criterion (0 = ignore, 5 =
|
|
critical).
|
|
</p>
|
|
<div
|
|
class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
|
|
<p class="text-sm text-blue-800">
|
|
Use the sliders or click the number values to set weights.
|
|
Higher weights mean the criterion is more important in your
|
|
vendor evaluation.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div
|
|
v-for="weight in weightOptions"
|
|
:key="weight.id"
|
|
class="bg-neutral-50 p-6 rounded-lg">
|
|
<div
|
|
class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div class="flex-1">
|
|
<label
|
|
:for="`weight-${weight.id}`"
|
|
class="font-semibold text-lg mb-1 block"
|
|
>{{ weight.name }}</label
|
|
>
|
|
<p class="text-neutral-600 text-sm">
|
|
{{ weight.description }}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm text-neutral-500 w-4">0</span>
|
|
<input
|
|
:id="`weight-${weight.id}`"
|
|
type="range"
|
|
min="0"
|
|
max="5"
|
|
v-model.number="weights[weight.id]"
|
|
:aria-label="`${weight.name} importance weight`"
|
|
:aria-describedby="`weight-${weight.id}-desc`"
|
|
class="w-32 focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
<span class="text-sm text-neutral-500 w-4">5</span>
|
|
</div>
|
|
<div class="flex flex-col items-center">
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
max="5"
|
|
v-model.number="weights[weight.id]"
|
|
:aria-label="`${weight.name} weight value`"
|
|
class="w-16 text-center text-xl font-bold text-blue-600 bg-white border border-neutral-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
<span class="text-xs text-neutral-400 mt-1"
|
|
>Weight</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div :id="`weight-${weight.id}-desc`" class="sr-only">
|
|
Current weight: {{ weights[weight.id] }} out of 5.
|
|
{{
|
|
weights[weight.id] === 0
|
|
? "Ignored"
|
|
: weights[weight.id] === 5
|
|
? "Critical importance"
|
|
: `${weights[weight.id]} out of 5 importance`
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<div class="flex justify-between items-center mt-8 pt-8 border-t">
|
|
<button
|
|
v-if="currentStep > 0"
|
|
@click="previousStep"
|
|
class="px-6 py-3 bg-neutral-200 text-neutral-700 rounded-lg hover:bg-neutral-300 transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-500"
|
|
:aria-label="`Go back to step ${currentStep}: ${
|
|
steps[currentStep - 1]?.label
|
|
}`">
|
|
← Back
|
|
</button>
|
|
<div v-else>
|
|
<button
|
|
@click="resetForm"
|
|
class="px-4 py-2 text-neutral-500 text-sm hover:text-neutral-700 transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-500 rounded"
|
|
title="Clear all form data and start over">
|
|
Reset Form
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<div class="text-sm text-neutral-500">
|
|
Step {{ currentStep + 1 }} of {{ steps.length }}
|
|
</div>
|
|
<button
|
|
v-if="currentStep < 2"
|
|
@click="nextStep"
|
|
:disabled="!canProceed"
|
|
:class="[
|
|
'px-6 py-3 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500',
|
|
canProceed
|
|
? 'bg-blue-600 text-white hover:bg-blue-700'
|
|
: 'bg-neutral-300 text-neutral-500 cursor-not-allowed',
|
|
]"
|
|
:aria-label="`Proceed to step ${currentStep + 2}: ${
|
|
steps[currentStep + 1]?.label
|
|
}`">
|
|
Next →
|
|
</button>
|
|
<button
|
|
v-else
|
|
@click="generateCharter"
|
|
:disabled="!canGenerateCharter"
|
|
:class="[
|
|
'px-8 py-3 rounded-lg transition-all focus:outline-none focus:ring-2 focus:ring-green-500',
|
|
canGenerateCharter
|
|
? 'bg-green-600 text-white hover:bg-green-700'
|
|
: 'bg-neutral-300 text-neutral-500 cursor-not-allowed',
|
|
]"
|
|
aria-describedby="generate-charter-help">
|
|
Generate Charter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="currentStep === 2"
|
|
id="generate-charter-help"
|
|
class="text-sm text-neutral-500 text-right mt-2">
|
|
{{
|
|
canGenerateCharter
|
|
? "Ready to generate your charter"
|
|
: "Select at least one principle to generate charter"
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Generated Charter Output -->
|
|
<div
|
|
v-if="charterGenerated"
|
|
class="mt-8 bg-white rounded-lg shadow-xl p-8 animate-fadeIn"
|
|
role="main"
|
|
aria-label="Generated Technology Charter">
|
|
<div class="text-center mb-8 pb-6 border-b-2 border-neutral-200">
|
|
<h2 class="text-3xl font-bold text-neutral-800" id="charter-title">
|
|
Technology Charter
|
|
</h2>
|
|
<p class="text-neutral-600 mt-2">
|
|
Generated
|
|
{{
|
|
new Date().toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})
|
|
}}
|
|
</p>
|
|
<div class="mt-4">
|
|
<button
|
|
@click="scrollToTop"
|
|
class="text-sm text-blue-600 hover:text-blue-800 underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded">
|
|
Back to form
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="prose max-w-none">
|
|
<section class="mb-8">
|
|
<h3 class="text-xl font-bold text-neutral-800 mb-3">Purpose</h3>
|
|
<p class="text-neutral-700 leading-relaxed">
|
|
This charter guides our cooperative's technology decisions based
|
|
on our shared values and operational needs. It ensures we choose
|
|
tools that support our mission while respecting our principles
|
|
of autonomy, sustainability, and mutual aid.
|
|
</p>
|
|
</section>
|
|
|
|
<section
|
|
class="mb-8"
|
|
v-if="
|
|
selectedPrinciples.filter((p) => !nonNegotiables.includes(p))
|
|
.length > 0
|
|
">
|
|
<h3 class="text-xl font-bold text-neutral-800 mb-3">
|
|
Core Principles
|
|
</h3>
|
|
<ul class="space-y-2">
|
|
<li
|
|
v-for="principleId in selectedPrinciples.filter(
|
|
(p) => !nonNegotiables.includes(p)
|
|
)"
|
|
:key="principleId"
|
|
class="flex items-start">
|
|
<span class="text-blue-600 mr-2">→</span>
|
|
<span>{{
|
|
principles.find((p) => p.id === principleId)?.name
|
|
}}</span>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="mb-8" v-if="nonNegotiables.length > 0">
|
|
<h3 class="text-xl font-bold text-neutral-800 mb-3">
|
|
Non-Negotiable Requirements
|
|
</h3>
|
|
<p class="text-red-600 font-semibold mb-3">
|
|
Any vendor failing these requirements is automatically
|
|
disqualified.
|
|
</p>
|
|
<ul class="space-y-2">
|
|
<li
|
|
v-for="principleId in nonNegotiables"
|
|
:key="principleId"
|
|
class="flex items-start text-red-600 font-semibold">
|
|
<span class="mr-2">→</span>
|
|
<span>{{
|
|
principles.find((p) => p.id === principleId)?.name
|
|
}}</span>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="mb-8">
|
|
<h3 class="text-xl font-bold text-neutral-800 mb-3">
|
|
Technical Constraints
|
|
</h3>
|
|
<ul class="space-y-2">
|
|
<li class="flex items-start">
|
|
<span class="text-blue-600 mr-2">→</span>
|
|
<span
|
|
>Authentication:
|
|
{{
|
|
authOptions.find((o) => o.value === constraints.sso)
|
|
?.label
|
|
}}</span
|
|
>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-blue-600 mr-2">→</span>
|
|
<span
|
|
>Hosting:
|
|
{{
|
|
hostingOptions.find(
|
|
(o) => o.value === constraints.hosting
|
|
)?.label
|
|
}}</span
|
|
>
|
|
</li>
|
|
<li
|
|
v-if="constraints.integrations.length > 0"
|
|
class="flex items-start">
|
|
<span class="text-purple-600 mr-2">→</span>
|
|
<span
|
|
>Required Integrations:
|
|
{{ constraints.integrations.join(", ") }}</span
|
|
>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-blue-600 mr-2">→</span>
|
|
<span
|
|
>Support Level:
|
|
{{
|
|
supportOptions.find(
|
|
(o) => o.value === constraints.support
|
|
)?.label
|
|
}}</span
|
|
>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-blue-600 mr-2">→</span>
|
|
<span
|
|
>Migration Timeline:
|
|
{{
|
|
timelineOptions.find(
|
|
(o) => o.value === constraints.timeline
|
|
)?.label
|
|
}}</span
|
|
>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="mb-8">
|
|
<h3 class="text-xl font-bold text-neutral-800 mb-3">
|
|
Evaluation Rubric
|
|
</h3>
|
|
<p class="text-neutral-700 mb-4">
|
|
Score each vendor option using these weighted criteria (0-5
|
|
scale):
|
|
</p>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full border-collapse">
|
|
<thead>
|
|
<tr class="bg-neutral-100">
|
|
<th class="border p-3 text-left">Criterion</th>
|
|
<th class="border p-3 text-left">Description</th>
|
|
<th class="border p-3 text-center">Weight</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-for="weight in sortedWeights"
|
|
:key="weight.id"
|
|
class="hover:bg-neutral-50">
|
|
<td class="border p-3 font-semibold">
|
|
{{ weight.name }}
|
|
</td>
|
|
<td class="border p-3 text-sm text-neutral-600">
|
|
{{ weight.rubricDescription }}
|
|
</td>
|
|
<td
|
|
class="border p-3 text-center font-bold text-blue-600">
|
|
{{ weights[weight.id] }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mb-8">
|
|
<h3 class="text-xl font-bold text-neutral-800 mb-3">
|
|
Decision Heuristics
|
|
</h3>
|
|
<ul class="space-y-2">
|
|
<li class="flex items-start">
|
|
<span class="text-blue-600 mr-2">→</span>
|
|
<span
|
|
>Any vendor failing a non-negotiable requirement is
|
|
automatically eliminated</span
|
|
>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-blue-600 mr-2">→</span>
|
|
<span
|
|
>Prefer open standards and clear data export over feature
|
|
abundance</span
|
|
>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-blue-600 mr-2">→</span>
|
|
<span
|
|
>When scores are within 10%, choose based on alignment with
|
|
cooperative values</span
|
|
>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-blue-600 mr-2">→</span>
|
|
<span
|
|
>Document all decisions in the Vendor Decision Log for
|
|
transparency</span
|
|
>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="mb-8">
|
|
<h3 class="text-xl font-bold text-neutral-800 mb-3">
|
|
Procurement Process
|
|
</h3>
|
|
<ol class="space-y-2 list-decimal list-inside">
|
|
<li>Identify need through collective discussion</li>
|
|
<li>Research 3-5 potential vendors/solutions</li>
|
|
<li>Eliminate any failing non-negotiables</li>
|
|
<li>Score remaining options using rubric</li>
|
|
<li>Trial top 2 options if possible</li>
|
|
<li>Make collective decision with documented rationale</li>
|
|
<li>Create migration/exit plan before commitment</li>
|
|
</ol>
|
|
</section>
|
|
|
|
<section class="mb-8">
|
|
<h3 class="text-xl font-bold text-neutral-800 mb-3">
|
|
Review & Accountability
|
|
</h3>
|
|
<ul class="space-y-2">
|
|
<li class="flex items-start">
|
|
<span class="text-blue-600 mr-2">→</span>
|
|
<span>Review this charter annually at minimum</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-blue-600 mr-2">→</span>
|
|
<span>Audit existing tools against charter quarterly</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-blue-600 mr-2">→</span>
|
|
<span>Document any exceptions with clear justification</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-blue-600 mr-2">→</span>
|
|
<span
|
|
>Share learnings with other cooperatives in our
|
|
network</span
|
|
>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="mt-12 pt-8 border-t-2 border-neutral-200">
|
|
<h3 class="text-xl font-bold text-neutral-800 mb-3">
|
|
Vendor Decision Log Template
|
|
</h3>
|
|
<div class="bg-neutral-50 p-6 rounded-lg font-mono text-sm">
|
|
<div class="space-y-1">
|
|
<p>
|
|
<strong>Tool Category:</strong> [e.g., Project Management]
|
|
</p>
|
|
<p>
|
|
<strong>Date:</strong> {{ new Date().toLocaleDateString() }}
|
|
</p>
|
|
<p><strong>Participants:</strong> [Names]</p>
|
|
<p><strong>Options Evaluated:</strong> [List vendors]</p>
|
|
<p>
|
|
<strong>Eliminated (Non-Negotiables):</strong> [Vendor -
|
|
Reason]
|
|
</p>
|
|
<p><strong>Scores:</strong></p>
|
|
<p class="ml-4">• Option A: [Total weighted score]</p>
|
|
<p class="ml-4">• Option B: [Total weighted score]</p>
|
|
<p><strong>Decision:</strong> [Selected vendor]</p>
|
|
<p><strong>Rationale:</strong> [2-3 sentences]</p>
|
|
<p><strong>Safeguards/Mitigations:</strong> [If any risks]</p>
|
|
<p><strong>Exit Strategy:</strong> [How we'd migrate away]</p>
|
|
<p><strong>Review Date:</strong> [One year from today]</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted, watch } from "vue";
|
|
|
|
definePageMeta({
|
|
layout: false,
|
|
});
|
|
|
|
// Import PDF export composable
|
|
const { exportToPDF } = usePdfExportBasic();
|
|
|
|
// State
|
|
const currentStep = ref(0);
|
|
const charterGenerated = ref(false);
|
|
const selectedPrinciples = ref([]);
|
|
const nonNegotiables = ref([]);
|
|
|
|
const constraints = ref({
|
|
sso: "optional",
|
|
hosting: "either",
|
|
integrations: [],
|
|
support: "business",
|
|
timeline: "quarter",
|
|
});
|
|
|
|
const weights = ref({
|
|
privacy: 4,
|
|
accessibility: 5,
|
|
interop: 3,
|
|
lockin: 4,
|
|
opensource: 3,
|
|
cost: 4,
|
|
sustainability: 2,
|
|
localization: 2,
|
|
usability: 3,
|
|
});
|
|
|
|
// Data
|
|
const steps = [
|
|
{ label: "Principles" },
|
|
{ label: "Constraints" },
|
|
{ label: "Weights" },
|
|
];
|
|
|
|
const principles = [
|
|
{
|
|
id: "privacy",
|
|
icon: "🔒",
|
|
name: "Privacy & Data Minimization",
|
|
description:
|
|
"Collect only necessary data, encrypt everything, respect user autonomy",
|
|
},
|
|
{
|
|
id: "sovereignty",
|
|
icon: "🏛️",
|
|
name: "Data Sovereignty",
|
|
description:
|
|
"Data residency requirements, EU adequacy, local jurisdiction control",
|
|
},
|
|
{
|
|
id: "accessibility",
|
|
icon: "♿",
|
|
name: "Accessibility First",
|
|
description:
|
|
"WCAG 2.2 AA compliance, screen reader support, keyboard navigation",
|
|
},
|
|
{
|
|
id: "interop",
|
|
icon: "🔗",
|
|
name: "Interoperability",
|
|
description:
|
|
"Open standards, API access, webhook support, standard formats",
|
|
},
|
|
{
|
|
id: "portability",
|
|
icon: "📦",
|
|
name: "Data Portability",
|
|
description: "Clear export paths, no vendor lock-in, migration-friendly",
|
|
},
|
|
{
|
|
id: "opensource",
|
|
icon: "🌍",
|
|
name: "Open Source Preference",
|
|
description: "FOSS first, community-driven, transparent development",
|
|
},
|
|
{
|
|
id: "cost",
|
|
icon: "💰",
|
|
name: "Cost Sustainability",
|
|
description: "Predictable pricing, no surprise fees, budget-appropriate",
|
|
},
|
|
{
|
|
id: "environmental",
|
|
icon: "🌱",
|
|
name: "Environmental Impact",
|
|
description: "Green hosting, carbon neutral, efficient resource use",
|
|
},
|
|
{
|
|
id: "localization",
|
|
icon: "🌐",
|
|
name: "Localization Support",
|
|
description: "Multi-language, timezone awareness, cultural sensitivity",
|
|
},
|
|
{
|
|
id: "mutual-aid",
|
|
icon: "🤝",
|
|
name: "Community Health",
|
|
description: "Vendor supports mutual aid, fair labor, cooperative values",
|
|
},
|
|
];
|
|
|
|
const authOptions = [
|
|
{ value: "required", label: "SSO Required" },
|
|
{ value: "preferred", label: "SSO Preferred" },
|
|
{ value: "optional", label: "SSO Optional" },
|
|
];
|
|
|
|
const hostingOptions = [
|
|
{ value: "self", label: "Self-Hosted Only" },
|
|
{ value: "either", label: "Either" },
|
|
{ value: "managed", label: "Managed Only" },
|
|
];
|
|
|
|
const integrationOptions = ["Slack", "OIDC/OAuth", "Webhooks", "REST API"];
|
|
|
|
const supportOptions = [
|
|
{ value: "community", label: "Community Only OK" },
|
|
{ value: "business", label: "Business Hours" },
|
|
{ value: "24-7", label: "24/7 Required" },
|
|
];
|
|
|
|
const timelineOptions = [
|
|
{ value: "immediate", label: "This Month" },
|
|
{ value: "quarter", label: "This Quarter" },
|
|
{ value: "year", label: "This Year" },
|
|
{ value: "exploring", label: "Just Exploring" },
|
|
];
|
|
|
|
const weightOptions = [
|
|
{
|
|
id: "privacy",
|
|
name: "Privacy & Data Control",
|
|
description:
|
|
"How much the vendor respects data sovereignty and minimization",
|
|
rubricDescription: "Data collection practices, encryption, user consent",
|
|
},
|
|
{
|
|
id: "accessibility",
|
|
name: "Accessibility",
|
|
description: "WCAG compliance and inclusive design practices",
|
|
rubricDescription: "Screen readers, keyboard nav, WCAG compliance",
|
|
},
|
|
{
|
|
id: "interop",
|
|
name: "Interoperability & Export",
|
|
description: "API access, webhooks, standard formats, data export",
|
|
rubricDescription: "APIs, webhooks, standard formats, integrations",
|
|
},
|
|
{
|
|
id: "lockin",
|
|
name: "Lock-in Risk",
|
|
description: "How hard it would be to migrate away (higher = riskier)",
|
|
rubricDescription:
|
|
"Migration difficulty, proprietary formats, switching costs",
|
|
},
|
|
{
|
|
id: "opensource",
|
|
name: "Community & Open Source",
|
|
description: "FOSS preference, community governance, transparency",
|
|
rubricDescription: "FOSS status, community governance, transparency",
|
|
},
|
|
{
|
|
id: "cost",
|
|
name: "Total Cost of Ownership",
|
|
description: "Including licenses, hosting, maintenance, training",
|
|
rubricDescription: "Licenses, hosting, training, ongoing maintenance",
|
|
},
|
|
{
|
|
id: "sustainability",
|
|
name: "Sustainability",
|
|
description: "Environmental impact, green hosting, efficiency",
|
|
rubricDescription: "Carbon footprint, green hosting, efficiency",
|
|
},
|
|
{
|
|
id: "localization",
|
|
name: "Localization & Support",
|
|
description: "Multi-language, timezone support, cultural awareness",
|
|
rubricDescription: "Multi-language, timezones, cultural awareness",
|
|
},
|
|
{
|
|
id: "usability",
|
|
name: "Usability",
|
|
description: "User experience, learning curve, day-to-day efficiency",
|
|
rubricDescription: "Learning curve, daily efficiency, user satisfaction",
|
|
},
|
|
];
|
|
|
|
// Computed
|
|
const sortedWeights = computed(() => {
|
|
return weightOptions
|
|
.filter((w) => weights.value[w.id] > 0)
|
|
.sort((a, b) => weights.value[b.id] - weights.value[a.id]);
|
|
});
|
|
|
|
const canProceed = computed(() => {
|
|
if (currentStep.value === 0) {
|
|
// Step 1: At least one principle should be selected
|
|
return selectedPrinciples.value.length > 0;
|
|
}
|
|
if (currentStep.value === 1) {
|
|
// Step 2: All constraint sections are optional, always can proceed
|
|
return true;
|
|
}
|
|
return true;
|
|
});
|
|
|
|
const canGenerateCharter = computed(() => {
|
|
// Must have at least one principle selected to generate charter
|
|
return selectedPrinciples.value.length > 0;
|
|
});
|
|
|
|
// Methods
|
|
const togglePrinciple = (principleId) => {
|
|
const idx = selectedPrinciples.value.indexOf(principleId);
|
|
const nonNegIdx = nonNegotiables.value.indexOf(principleId);
|
|
|
|
if (idx === -1) {
|
|
// Not selected - select it
|
|
selectedPrinciples.value.push(principleId);
|
|
} else if (nonNegIdx === -1) {
|
|
// Selected but not non-negotiable - make it non-negotiable
|
|
nonNegotiables.value.push(principleId);
|
|
} else {
|
|
// Non-negotiable - deselect entirely
|
|
selectedPrinciples.value.splice(idx, 1);
|
|
nonNegotiables.value.splice(nonNegIdx, 1);
|
|
}
|
|
};
|
|
|
|
const toggleIntegration = (integration) => {
|
|
const idx = constraints.value.integrations.indexOf(integration);
|
|
if (idx === -1) {
|
|
constraints.value.integrations.push(integration);
|
|
} else {
|
|
constraints.value.integrations.splice(idx, 1);
|
|
}
|
|
};
|
|
|
|
const nextStep = () => {
|
|
if (currentStep.value < 2 && canProceed.value) {
|
|
currentStep.value++;
|
|
}
|
|
};
|
|
|
|
const previousStep = () => {
|
|
if (currentStep.value > 0) {
|
|
currentStep.value--;
|
|
}
|
|
};
|
|
|
|
const resetForm = () => {
|
|
if (confirm("Are you sure you want to clear all form data and start over?")) {
|
|
selectedPrinciples.value = [];
|
|
nonNegotiables.value = [];
|
|
constraints.value = {
|
|
sso: "optional",
|
|
hosting: "either",
|
|
integrations: [],
|
|
support: "business",
|
|
timeline: "quarter",
|
|
};
|
|
weights.value = {
|
|
privacy: 4,
|
|
accessibility: 5,
|
|
interop: 3,
|
|
lockin: 4,
|
|
opensource: 3,
|
|
cost: 4,
|
|
sustainability: 2,
|
|
localization: 2,
|
|
usability: 3,
|
|
};
|
|
currentStep.value = 0;
|
|
charterGenerated.value = false;
|
|
localStorage.removeItem("tech-charter-data");
|
|
}
|
|
};
|
|
|
|
const scrollToTop = () => {
|
|
document
|
|
.querySelector(".template-wrapper")
|
|
.scrollIntoView({ behavior: "smooth" });
|
|
};
|
|
|
|
const generateCharter = () => {
|
|
if (canGenerateCharter.value) {
|
|
charterGenerated.value = true;
|
|
autoSave(); // Save the completed form
|
|
setTimeout(() => {
|
|
document
|
|
.querySelector("#charter-title")
|
|
.scrollIntoView({ behavior: "smooth" });
|
|
}, 100);
|
|
}
|
|
};
|
|
|
|
// Load saved data
|
|
const loadSavedData = () => {
|
|
const saved = localStorage.getItem("tech-charter-data");
|
|
if (saved) {
|
|
try {
|
|
const parsedData = JSON.parse(saved);
|
|
selectedPrinciples.value = parsedData.selectedPrinciples || [];
|
|
nonNegotiables.value = parsedData.nonNegotiables || [];
|
|
constraints.value = { ...constraints.value, ...parsedData.constraints };
|
|
weights.value = { ...weights.value, ...parsedData.weights };
|
|
} catch (error) {
|
|
console.error("Error loading saved data:", error);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Auto-save data
|
|
const autoSave = () => {
|
|
const data = {
|
|
selectedPrinciples: selectedPrinciples.value,
|
|
nonNegotiables: nonNegotiables.value,
|
|
constraints: constraints.value,
|
|
weights: weights.value,
|
|
lastUpdated: new Date().toISOString(),
|
|
};
|
|
localStorage.setItem("tech-charter-data", JSON.stringify(data));
|
|
};
|
|
|
|
// Export functions
|
|
const exportPDF = async () => {
|
|
if (process.server || typeof window === "undefined") {
|
|
console.warn("PDF export attempted on server side");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const filename = "tech_charter.pdf";
|
|
await exportToPDF(".document-page", filename);
|
|
} catch (error) {
|
|
console.error("PDF export failed:", error);
|
|
alert("PDF generation failed. Falling back to print dialog.");
|
|
window.print();
|
|
}
|
|
};
|
|
|
|
const handlePrint = () => {
|
|
window.print();
|
|
};
|
|
|
|
const exportText = () => {
|
|
const content = extractTextContent();
|
|
downloadFile(content, "tech_charter.txt", "text/plain");
|
|
};
|
|
|
|
const exportMarkdown = () => {
|
|
const content = convertToMarkdown();
|
|
downloadFile(content, "tech_charter.md", "text/markdown");
|
|
};
|
|
|
|
const extractTextContent = () => {
|
|
const today = new Date().toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
});
|
|
|
|
let content = `TECHNOLOGY CHARTER\n==================\n\nGenerated ${today}\n\n`;
|
|
|
|
content += `PURPOSE\n-------\n\nThis charter guides our cooperative's technology decisions based on our shared values and operational needs. It ensures we choose tools that support our mission while respecting our principles of autonomy, sustainability, and mutual aid.\n\n`;
|
|
|
|
if (
|
|
selectedPrinciples.value.filter((p) => !nonNegotiables.value.includes(p))
|
|
.length > 0
|
|
) {
|
|
content += `CORE PRINCIPLES\n---------------\n\n`;
|
|
selectedPrinciples.value
|
|
.filter((p) => !nonNegotiables.value.includes(p))
|
|
.forEach((pId) => {
|
|
const principle = principles.find((p) => p.id === pId);
|
|
if (principle) {
|
|
content += `• ${principle.name}\n`;
|
|
}
|
|
});
|
|
content += "\n";
|
|
}
|
|
|
|
if (nonNegotiables.value.length > 0) {
|
|
content += `NON-NEGOTIABLE REQUIREMENTS\n---------------------------\n\nAny vendor failing these requirements is automatically disqualified.\n\n`;
|
|
nonNegotiables.value.forEach((pId) => {
|
|
const principle = principles.find((p) => p.id === pId);
|
|
if (principle) {
|
|
content += `• ${principle.name}\n`;
|
|
}
|
|
});
|
|
content += "\n";
|
|
}
|
|
|
|
content += `TECHNICAL CONSTRAINTS\n---------------------\n\n`;
|
|
content += `• Authentication: ${
|
|
authOptions.find((o) => o.value === constraints.value.sso)?.label
|
|
}\n`;
|
|
content += `• Hosting: ${
|
|
hostingOptions.find((o) => o.value === constraints.value.hosting)?.label
|
|
}\n`;
|
|
if (constraints.value.integrations.length > 0) {
|
|
content += `• Required Integrations: ${constraints.value.integrations.join(
|
|
", "
|
|
)}\n`;
|
|
}
|
|
content += `• Support Level: ${
|
|
supportOptions.find((o) => o.value === constraints.value.support)?.label
|
|
}\n`;
|
|
content += `• Migration Timeline: ${
|
|
timelineOptions.find((o) => o.value === constraints.value.timeline)?.label
|
|
}\n\n`;
|
|
|
|
content += `EVALUATION RUBRIC\n-----------------\n\nScore each vendor option using these weighted criteria (0-5 scale):\n\n`;
|
|
sortedWeights.value.forEach((weight) => {
|
|
content += `${weight.name} (Weight: ${weights.value[weight.id]})\n${
|
|
weight.rubricDescription
|
|
}\n\n`;
|
|
});
|
|
|
|
return content;
|
|
};
|
|
|
|
const convertToMarkdown = () => {
|
|
const today = new Date().toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
});
|
|
|
|
let content = `# Technology Charter\n\n*Generated ${today}*\n\n`;
|
|
|
|
content += `## Purpose\n\nThis charter guides our cooperative's technology decisions based on our shared values and operational needs. It ensures we choose tools that support our mission while respecting our principles of autonomy, sustainability, and mutual aid.\n\n`;
|
|
|
|
if (
|
|
selectedPrinciples.value.filter((p) => !nonNegotiables.value.includes(p))
|
|
.length > 0
|
|
) {
|
|
content += `## Core Principles\n\n`;
|
|
selectedPrinciples.value
|
|
.filter((p) => !nonNegotiables.value.includes(p))
|
|
.forEach((pId) => {
|
|
const principle = principles.find((p) => p.id === pId);
|
|
if (principle) {
|
|
content += `- ${principle.name}\n`;
|
|
}
|
|
});
|
|
content += "\n";
|
|
}
|
|
|
|
if (nonNegotiables.value.length > 0) {
|
|
content += `## Non-Negotiable Requirements\n\n**Any vendor failing these requirements is automatically disqualified.**\n\n`;
|
|
nonNegotiables.value.forEach((pId) => {
|
|
const principle = principles.find((p) => p.id === pId);
|
|
if (principle) {
|
|
content += `- **${principle.name}**\n`;
|
|
}
|
|
});
|
|
content += "\n";
|
|
}
|
|
|
|
content += `## Technical Constraints\n\n`;
|
|
content += `- Authentication: ${
|
|
authOptions.find((o) => o.value === constraints.value.sso)?.label
|
|
}\n`;
|
|
content += `- Hosting: ${
|
|
hostingOptions.find((o) => o.value === constraints.value.hosting)?.label
|
|
}\n`;
|
|
if (constraints.value.integrations.length > 0) {
|
|
content += `- Required Integrations: ${constraints.value.integrations.join(
|
|
", "
|
|
)}\n`;
|
|
}
|
|
content += `- Support Level: ${
|
|
supportOptions.find((o) => o.value === constraints.value.support)?.label
|
|
}\n`;
|
|
content += `- Migration Timeline: ${
|
|
timelineOptions.find((o) => o.value === constraints.value.timeline)?.label
|
|
}\n\n`;
|
|
|
|
content += `## Evaluation Rubric\n\nScore each vendor option using these weighted criteria (0-5 scale):\n\n`;
|
|
content += `| Criterion | Description | Weight |\n`;
|
|
content += `|-----------|-------------|--------|\n`;
|
|
sortedWeights.value.forEach((weight) => {
|
|
content += `| ${weight.name} | ${weight.rubricDescription} | ${
|
|
weights.value[weight.id]
|
|
} |\n`;
|
|
});
|
|
|
|
return content;
|
|
};
|
|
|
|
const downloadFile = (content, filename, type) => {
|
|
const blob = new Blob([content], { type });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = filename;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
};
|
|
|
|
// Load data on mount
|
|
onMounted(() => {
|
|
loadSavedData();
|
|
});
|
|
|
|
// Auto-save when data changes
|
|
watch([selectedPrinciples, nonNegotiables, constraints, weights], autoSave, {
|
|
deep: true,
|
|
});
|
|
</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");
|
|
|
|
/* rely on Tailwind bg utilities applied on wrapper */
|
|
.template-wrapper {
|
|
min-height: 100vh;
|
|
padding: 2rem 1rem;
|
|
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;
|
|
}
|
|
|
|
/* Dark mode dither inversion */
|
|
html.dark .template-wrapper::before {
|
|
background-image: radial-gradient(
|
|
circle at 25% 25%,
|
|
white 1px,
|
|
transparent 1px
|
|
),
|
|
radial-gradient(circle at 75% 75%, white 1px, transparent 1px);
|
|
opacity: 0.12;
|
|
}
|
|
|
|
.document-page {
|
|
max-width: 8.5in;
|
|
min-height: 11in;
|
|
margin: 0 auto;
|
|
background: white;
|
|
position: relative;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
/* Dark mode document page inversion */
|
|
html.dark .document-page {
|
|
background: #0a0a0a;
|
|
}
|
|
html.dark .document-page::before {
|
|
background: white;
|
|
background-image: radial-gradient(black 1px, transparent 1px);
|
|
}
|
|
html.dark .document-page::after {
|
|
border-color: white;
|
|
}
|
|
|
|
.export-controls {
|
|
max-width: 8.5in;
|
|
margin: 0 auto 1.5rem;
|
|
background: white;
|
|
border: 1px solid black;
|
|
padding: 1rem;
|
|
position: relative;
|
|
}
|
|
.export-controls::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
background: black;
|
|
background-image: radial-gradient(white 1px, transparent 1px);
|
|
background-size: 2px 2px;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Dark mode export controls */
|
|
html.dark .export-controls {
|
|
background: #0a0a0a;
|
|
border-color: white;
|
|
}
|
|
html.dark .export-controls::before {
|
|
background: white;
|
|
background-image: radial-gradient(black 1px, transparent 1px);
|
|
}
|
|
|
|
.export-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.export-section {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.export-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.export-title {
|
|
font-weight: 600;
|
|
color: #374151;
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
html.dark .export-title {
|
|
color: #e5e7eb;
|
|
}
|
|
|
|
.export-btn {
|
|
background: #f9fafb;
|
|
border: 1px solid #d1d5db;
|
|
color: #374151;
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 6px;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
text-decoration: none;
|
|
min-width: fit-content;
|
|
}
|
|
|
|
.export-btn:hover {
|
|
background: #f3f4f6;
|
|
border-color: #9ca3af;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.export-btn.primary {
|
|
background: #3b82f6;
|
|
border-color: #3b82f6;
|
|
color: white;
|
|
}
|
|
|
|
.export-btn.primary:hover {
|
|
background: #2563eb;
|
|
border-color: #2563eb;
|
|
}
|
|
|
|
.export-btn svg {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.content-title {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: inherit;
|
|
text-align: center;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-fadeIn {
|
|
animation: fadeIn 0.5s ease-out;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Buttons with bitmap styling */
|
|
button:not(.export-btn) {
|
|
background: white !important;
|
|
border: 1px solid black !important;
|
|
color: black !important;
|
|
font-family: "Ubuntu Mono", monospace !important;
|
|
text-transform: uppercase !important;
|
|
font-weight: bold !important;
|
|
letter-spacing: 0.5px !important;
|
|
}
|
|
|
|
button:not(.export-btn):hover {
|
|
background: black !important;
|
|
color: white !important;
|
|
transform: translateY(-1px) translateX(-1px) !important;
|
|
}
|
|
|
|
/* Dark mode buttons */
|
|
html.dark button:not(.export-btn) {
|
|
background: #0a0a0a !important;
|
|
border: 1px solid white !important;
|
|
color: white !important;
|
|
}
|
|
|
|
html.dark button:not(.export-btn):hover {
|
|
background: white !important;
|
|
color: black !important;
|
|
}
|
|
|
|
/* Export buttons specifically */
|
|
.export-btn {
|
|
background: white !important;
|
|
border: 1px solid black !important;
|
|
color: black !important;
|
|
font-family: "Ubuntu Mono", monospace !important;
|
|
text-transform: uppercase !important;
|
|
font-weight: bold !important;
|
|
letter-spacing: 0.5px !important;
|
|
}
|
|
|
|
.export-btn:hover {
|
|
background: black !important;
|
|
color: white !important;
|
|
transform: translateY(-1px) translateX(-1px) !important;
|
|
}
|
|
|
|
/* Dark mode export buttons */
|
|
html.dark .export-btn {
|
|
background: #0a0a0a !important;
|
|
border: 1px solid white !important;
|
|
color: white !important;
|
|
}
|
|
|
|
html.dark .export-btn:hover {
|
|
background: white !important;
|
|
color: black !important;
|
|
}
|
|
|
|
.export-btn.primary {
|
|
background: black !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.export-btn.primary:hover {
|
|
background: black !important;
|
|
transform: translateY(-1px) translateX(-1px) !important;
|
|
}
|
|
|
|
/* Card and form styling */
|
|
.charter-card,
|
|
.section-card,
|
|
.form-group-large {
|
|
border-radius: 0 !important;
|
|
border: 1px solid black !important;
|
|
}
|
|
|
|
/* Checkbox and radio button styling */
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
border: 2px solid black !important;
|
|
background: white !important;
|
|
}
|
|
|
|
input[type="checkbox"]:checked,
|
|
input[type="radio"]:checked {
|
|
background: black !important;
|
|
color: white !important;
|
|
}
|
|
|
|
/* Override any gray colors with black/white only */
|
|
:deep(.text-neutral-900),
|
|
:deep(.text-neutral-800),
|
|
:deep(.text-neutral-700),
|
|
:deep(.text-neutral-600),
|
|
:deep(.text-neutral-500) {
|
|
color: black !important;
|
|
}
|
|
|
|
:deep(.bg-neutral-50),
|
|
:deep(.bg-neutral-100),
|
|
:deep(.bg-neutral-200) {
|
|
background-color: white !important;
|
|
}
|
|
|
|
html.dark :deep(.bg-neutral-50),
|
|
html.dark :deep(.bg-neutral-100),
|
|
html.dark :deep(.bg-neutral-200) {
|
|
background-color: #0a0a0a !important;
|
|
}
|
|
|
|
:deep(.border-neutral-200),
|
|
:deep(.border-neutral-300) {
|
|
border-color: black !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;
|
|
}
|
|
|
|
/* Dark mode typography overrides */
|
|
html.dark h1,
|
|
html.dark h2,
|
|
html.dark h3,
|
|
html.dark h4,
|
|
html.dark h5,
|
|
html.dark h6 {
|
|
color: #f9fafb !important;
|
|
}
|
|
html.dark p,
|
|
html.dark span,
|
|
html.dark div {
|
|
color: #e5e7eb !important;
|
|
}
|
|
|
|
/* Nuxt UI gray utility overrides in dark */
|
|
html.dark :deep(.text-neutral-900),
|
|
html.dark :deep(.text-neutral-800),
|
|
html.dark :deep(.text-neutral-700),
|
|
html.dark :deep(.text-neutral-600),
|
|
html.dark :deep(.text-neutral-500) {
|
|
color: #e5e7eb !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.template-wrapper {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.export-content {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.export-section {
|
|
justify-content: center;
|
|
}
|
|
|
|
.export-buttons {
|
|
justify-content: center;
|
|
}
|
|
|
|
.content-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
/* Make principle cards full width on mobile */
|
|
.principle-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* Stack constraint buttons vertically on mobile */
|
|
.constraint-buttons {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.constraint-buttons button {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Improve weight control layout on mobile */
|
|
.weight-control-mobile {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
body > *:not(.template-wrapper),
|
|
#__nuxt > *:not(.template-wrapper),
|
|
.export-controls,
|
|
.no-print,
|
|
.no-pdf,
|
|
button,
|
|
[class*="button"] {
|
|
display: none !important;
|
|
}
|
|
|
|
body *:not(.template-wrapper):not(.template-wrapper *) {
|
|
visibility: hidden !important;
|
|
}
|
|
|
|
.template-wrapper,
|
|
.template-wrapper * {
|
|
visibility: visible !important;
|
|
}
|
|
|
|
.template-wrapper {
|
|
background: white !important;
|
|
padding: 0 !important;
|
|
min-height: auto !important;
|
|
}
|
|
|
|
.document-page {
|
|
max-width: none !important;
|
|
width: 100% !important;
|
|
margin: 0 !important;
|
|
box-shadow: none !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.document-page::before {
|
|
content: "";
|
|
display: block;
|
|
height: 0.5in;
|
|
}
|
|
}
|
|
</style>
|