chore: update application configuration and UI components for improved styling and functionality
This commit is contained in:
parent
0af6b17792
commit
37ab8d7bab
54 changed files with 23293 additions and 1666 deletions
2981
pages/templates/conflict-resolution-framework.vue
Normal file
2981
pages/templates/conflict-resolution-framework.vue
Normal file
File diff suppressed because it is too large
Load diff
975
pages/templates/decision-framework.vue
Normal file
975
pages/templates/decision-framework.vue
Normal file
|
|
@ -0,0 +1,975 @@
|
|||
<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
|
||||
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>
|
||||
|
||||
<!-- 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">
|
||||
<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>
|
||||
|
||||
<!-- 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 -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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="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>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const state = reactive({
|
||||
urgency: 3,
|
||||
reversible: null,
|
||||
expertise: null,
|
||||
impact: null,
|
||||
options: null,
|
||||
investment: null,
|
||||
teamSize: null,
|
||||
});
|
||||
|
||||
const currentStep = ref(1);
|
||||
const totalSteps = 7;
|
||||
|
||||
const reversibilityOptions = [
|
||||
{
|
||||
value: "high",
|
||||
title: "Easily reversible",
|
||||
description: "We can pivot anytime with minimal cost",
|
||||
},
|
||||
{
|
||||
value: "medium",
|
||||
title: "Some commitment",
|
||||
description: "Changes possible but with effort/cost",
|
||||
},
|
||||
{
|
||||
value: "low",
|
||||
title: "One-way door",
|
||||
description: "This decision is permanent or very hard to undo",
|
||||
},
|
||||
];
|
||||
|
||||
const expertiseOptions = [
|
||||
{
|
||||
value: "concentrated",
|
||||
title: "One clear expert",
|
||||
description: "One person has deep knowledge here",
|
||||
},
|
||||
{
|
||||
value: "multiple",
|
||||
title: "Multiple experts",
|
||||
description: "Several people have relevant expertise",
|
||||
},
|
||||
{
|
||||
value: "distributed",
|
||||
title: "Distributed knowledge",
|
||||
description: "Everyone has valuable input",
|
||||
},
|
||||
{
|
||||
value: "lacking",
|
||||
title: "Unknown territory",
|
||||
description: "We're all learning together",
|
||||
},
|
||||
];
|
||||
|
||||
const impactOptions = [
|
||||
{
|
||||
value: "narrow",
|
||||
title: "One person or small team",
|
||||
description: "Affects specific individuals or department",
|
||||
},
|
||||
{
|
||||
value: "wide",
|
||||
title: "Whole organization",
|
||||
description: "Everyone feels the effects",
|
||||
},
|
||||
];
|
||||
|
||||
const optionsOptions = [
|
||||
{
|
||||
value: "clear",
|
||||
title: "Clear choices",
|
||||
description: "We know our options and their trade-offs",
|
||||
},
|
||||
{
|
||||
value: "emerging",
|
||||
title: "Still exploring",
|
||||
description: "Options are emerging through discussion",
|
||||
},
|
||||
{
|
||||
value: "undefined",
|
||||
title: "Wide open",
|
||||
description: "We don't even know what's possible yet",
|
||||
},
|
||||
];
|
||||
|
||||
const investmentOptions = [
|
||||
{
|
||||
value: "high",
|
||||
title: "Everyone cares deeply",
|
||||
description: "Strong opinions all around",
|
||||
},
|
||||
{
|
||||
value: "mixed",
|
||||
title: "Mixed investment",
|
||||
description: "Some care more than others",
|
||||
},
|
||||
{
|
||||
value: "low",
|
||||
title: "Low stakes for most",
|
||||
description: "People are flexible",
|
||||
},
|
||||
];
|
||||
|
||||
const teamSizes = ["2", "3", "4-5", "6-8", "9+"];
|
||||
|
||||
const showResult = ref(false);
|
||||
|
||||
const result = computed(() => {
|
||||
if (!showResult.value) return null;
|
||||
return determineFramework();
|
||||
});
|
||||
|
||||
const canProceed = computed(() => {
|
||||
switch (currentStep.value) {
|
||||
case 1:
|
||||
return true; // urgency always has a value
|
||||
case 2:
|
||||
return state.reversible !== null;
|
||||
case 3:
|
||||
return state.expertise !== null;
|
||||
case 4:
|
||||
return state.impact !== null;
|
||||
case 5:
|
||||
return state.options !== null;
|
||||
case 6:
|
||||
return state.investment !== null;
|
||||
case 7:
|
||||
return state.teamSize !== null;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
function selectOption(category, value) {
|
||||
state[category] = value;
|
||||
}
|
||||
|
||||
function nextStep() {
|
||||
if (currentStep.value < totalSteps) {
|
||||
currentStep.value++;
|
||||
}
|
||||
}
|
||||
|
||||
function previousStep() {
|
||||
if (currentStep.value > 1) {
|
||||
currentStep.value--;
|
||||
}
|
||||
}
|
||||
|
||||
function showRecommendation() {
|
||||
showResult.value = true;
|
||||
nextTick(() => {
|
||||
const resultsElement = document.querySelector("[data-results]");
|
||||
if (resultsElement) {
|
||||
resultsElement.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function determineFramework() {
|
||||
// AUTOCRATIC - urgent + concentrated expertise + predictable
|
||||
if (
|
||||
state.urgency >= 5 &&
|
||||
state.expertise === "concentrated" &&
|
||||
state.options === "clear"
|
||||
) {
|
||||
return {
|
||||
method: "Autocratic",
|
||||
tagline: "Quick decision by designated leader",
|
||||
reasoning:
|
||||
"Extreme urgency with clear options and concentrated expertise. Speed is critical.",
|
||||
steps: [
|
||||
"Leader makes immediate decision",
|
||||
"Communicate decision and rationale quickly",
|
||||
"Execute without delay",
|
||||
"Debrief when crisis passes",
|
||||
],
|
||||
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.",
|
||||
};
|
||||
}
|
||||
|
||||
// DEFER TO EXPERT - clear expertise + urgency
|
||||
if (
|
||||
state.expertise === "concentrated" &&
|
||||
(state.urgency >= 4 || state.impact === "narrow")
|
||||
) {
|
||||
return {
|
||||
method: "Defer to Expert",
|
||||
tagline: "Trust the person who knows this best",
|
||||
reasoning:
|
||||
"You have someone with clear expertise, and either time is short or the impact is contained. Let them lead while keeping everyone informed.",
|
||||
steps: [
|
||||
"Expert proposes solution with reasoning",
|
||||
"Quick clarifying questions (set time limit)",
|
||||
"Expert makes final call",
|
||||
"Document decision and rationale",
|
||||
"Schedule check-in if reversible",
|
||||
],
|
||||
tips: [
|
||||
"Expert should explain their thinking, not just the outcome",
|
||||
"Create space for concerns to be raised",
|
||||
"If expert is unsure, that's valuable info—maybe try another method",
|
||||
],
|
||||
warning:
|
||||
"The expert should still seek input. Expertise + diverse perspectives = better decisions.",
|
||||
success:
|
||||
"Decision made quickly with buy-in because people trust the expert's judgment and understand the reasoning.",
|
||||
};
|
||||
}
|
||||
|
||||
// AVOIDANT - non-urgent + undefined + low investment
|
||||
if (
|
||||
state.urgency <= 2 &&
|
||||
state.options === "undefined" &&
|
||||
state.investment === "low"
|
||||
) {
|
||||
return {
|
||||
method: "Strategic Delay",
|
||||
tagline: "Wait for clarity to emerge",
|
||||
reasoning:
|
||||
"It's not urgent, options aren't clear, and people aren't strongly invested. Sometimes the best decision is to not decide yet.",
|
||||
steps: [
|
||||
"Acknowledge the decision exists",
|
||||
"Set a future check-in date",
|
||||
"Gather information passively",
|
||||
"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.",
|
||||
alternatives: [
|
||||
{
|
||||
method: "Time-boxed exploration",
|
||||
when: "Give it 2 weeks to see if clarity emerges",
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
// CONSENSUS - low urgency + high stakes + everyone affected
|
||||
if (
|
||||
state.urgency <= 2 &&
|
||||
state.reversible === "low" &&
|
||||
state.impact === "wide" &&
|
||||
state.investment === "high"
|
||||
) {
|
||||
return {
|
||||
method: "Full Consensus",
|
||||
tagline: "Everyone agrees to support the decision",
|
||||
reasoning:
|
||||
"This is a high-stakes, permanent decision affecting everyone who cares deeply. Take the time to get real alignment.",
|
||||
steps: [
|
||||
"Share context and constraints with everyone",
|
||||
"Gather all perspectives (async or sync)",
|
||||
"Identify shared values and concerns",
|
||||
"Iterate on proposals until everyone can support it",
|
||||
"Document the decision and everyone's commitment",
|
||||
],
|
||||
tips: [
|
||||
"Consensus ≠ everyone's favorite. It means everyone can live with it",
|
||||
"Use 'I can live with this' as your bar, not 'I love this'",
|
||||
"Timebox discussion rounds to maintain energy",
|
||||
],
|
||||
warning:
|
||||
"If consensus is taking too long, check: Is everyone operating with the same info? Are we solving the right problem?",
|
||||
success:
|
||||
"Everyone understands the decision and commits to supporting it, even if it wasn't their first choice.",
|
||||
};
|
||||
}
|
||||
|
||||
// CONSENT - medium stakes, mixed investment
|
||||
if (state.investment === "mixed" && state.reversible !== "low") {
|
||||
return {
|
||||
method: "Consent-Based Decision",
|
||||
tagline: "No one objects strongly enough to block",
|
||||
reasoning:
|
||||
"Not everyone is equally invested, and the decision is reversible. Focus on addressing objections rather than optimizing preferences.",
|
||||
steps: [
|
||||
"Proposer presents solution",
|
||||
"Ask: 'Can you live with this?'",
|
||||
"Address only strong objections",
|
||||
"Modify proposal if needed",
|
||||
"Move forward when no blocking objections remain",
|
||||
],
|
||||
tips: [
|
||||
"Objections must be based on harm to the co-op, not personal preference",
|
||||
"Set a clear bar for what counts as a blocking objection",
|
||||
"This is faster than consensus but still inclusive",
|
||||
],
|
||||
success:
|
||||
"Decision made efficiently with key concerns addressed, without getting stuck in preference debates.",
|
||||
};
|
||||
}
|
||||
|
||||
// DELEGATION - narrow impact + concentrated expertise
|
||||
if (
|
||||
state.impact === "narrow" &&
|
||||
state.expertise === "concentrated" &&
|
||||
state.urgency >= 3
|
||||
) {
|
||||
return {
|
||||
method: "Delegation",
|
||||
tagline: "Empower the responsible party to decide",
|
||||
reasoning:
|
||||
"This primarily affects specific people who have the expertise. Trust them to handle it.",
|
||||
steps: [
|
||||
"Clarify scope and constraints",
|
||||
"Delegate to affected party/expert",
|
||||
"Set check-in points if needed",
|
||||
"Trust them to execute",
|
||||
"Report back on outcome",
|
||||
],
|
||||
tips: [
|
||||
"Be clear about what's delegated and what's not",
|
||||
"Delegation means trusting their judgment, not micromanaging",
|
||||
],
|
||||
success:
|
||||
"Decision made efficiently by those closest to the work, building trust and autonomy.",
|
||||
};
|
||||
}
|
||||
|
||||
// CONSULTATIVE - lacking expertise but need input
|
||||
if (state.expertise === "lacking" && state.options === "emerging") {
|
||||
return {
|
||||
method: "Consultative Process",
|
||||
tagline: "Gather input, then designated person decides",
|
||||
reasoning:
|
||||
"No one has clear expertise but we need various perspectives to understand the options.",
|
||||
steps: [
|
||||
"Designate decision owner",
|
||||
"Owner seeks input from all stakeholders",
|
||||
"Owner researches and synthesizes options",
|
||||
"Owner makes decision and explains reasoning",
|
||||
"Share decision with clear rationale",
|
||||
],
|
||||
tips: [
|
||||
"Be transparent about who decides and when",
|
||||
"Document all input received",
|
||||
"Explain how input influenced the decision",
|
||||
],
|
||||
success:
|
||||
"Decision informed by diverse perspectives with clear accountability.",
|
||||
};
|
||||
}
|
||||
|
||||
// STOCHASTIC - truly stuck, low stakes
|
||||
if (
|
||||
state.options === "clear" &&
|
||||
state.investment === "low" &&
|
||||
state.reversible === "high"
|
||||
) {
|
||||
return {
|
||||
method: "Controlled Randomness",
|
||||
tagline: "Let chance break the tie",
|
||||
reasoning:
|
||||
"Options are equally good, stakes are low, and people aren't strongly invested. Save time and energy.",
|
||||
steps: [
|
||||
"Confirm all options are acceptable",
|
||||
"Choose random method (coin, dice, draw straws)",
|
||||
"Do it publicly for transparency",
|
||||
"Commit to the outcome",
|
||||
"Move on without second-guessing",
|
||||
],
|
||||
warning:
|
||||
"Only works if everyone truly accepts all options. Don't use for important decisions.",
|
||||
success: "Quick resolution that feels fair because chance is impartial.",
|
||||
alternatives: [
|
||||
{
|
||||
method: "Take turns choosing",
|
||||
when: "Rotate who picks when these situations arise",
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
// 3-PERSON TRAP
|
||||
if (state.teamSize === "3" && state.investment === "high") {
|
||||
return {
|
||||
method: "Modified Consensus (Not Voting!)",
|
||||
tagline: "Voting creates problems in groups of three",
|
||||
reasoning:
|
||||
"With 3 people, one person always becomes the tie-breaker, which creates unhealthy dynamics. Use rotating facilitation instead.",
|
||||
steps: [
|
||||
"Rotate who facilitates the decision",
|
||||
"Facilitator synthesizes others' views first",
|
||||
"Look for creative third options",
|
||||
"If stuck, defer to whoever is most affected",
|
||||
"Or use external input (advisor, user feedback)",
|
||||
],
|
||||
warning:
|
||||
"Never use simple majority voting with 3 people—it turns one person into a perpetual kingmaker.",
|
||||
success:
|
||||
"All three members feel heard and the decision reflects collective wisdom, not just the middle person's preference.",
|
||||
alternatives: [
|
||||
{
|
||||
method: "Time-boxed experiment",
|
||||
when: "Try one option for 2 weeks, then reassess",
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
// DEMOCRATIC VOTE - larger group, time pressure
|
||||
if (
|
||||
(state.teamSize === "6-8" || state.teamSize === "9+") &&
|
||||
state.urgency >= 4
|
||||
) {
|
||||
return {
|
||||
method: "Democratic Vote",
|
||||
tagline: "Majority decides, move forward together",
|
||||
reasoning:
|
||||
"Large group + time pressure = need for efficiency. Voting provides clear resolution while respecting everyone's input.",
|
||||
steps: [
|
||||
"Present options clearly with pros/cons",
|
||||
"Discussion round (time-boxed)",
|
||||
"Anonymous or open vote (decide beforehand)",
|
||||
"Announce result and thank minority view",
|
||||
"Document dissenting concerns for future review",
|
||||
],
|
||||
tips: [
|
||||
"Consider ranked choice for more than 2 options",
|
||||
"Anonymous voting reduces peer pressure",
|
||||
"Always acknowledge the minority position respectfully",
|
||||
],
|
||||
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.",
|
||||
};
|
||||
}
|
||||
|
||||
// EXPERIMENTAL - unknown territory
|
||||
if (state.expertise === "lacking" && state.reversible === "high") {
|
||||
return {
|
||||
method: "Run an Experiment",
|
||||
tagline: "Try something small and learn",
|
||||
reasoning:
|
||||
"Nobody knows the right answer and it's easy to change course. Perfect for learning by doing.",
|
||||
steps: [
|
||||
"Define what you're testing",
|
||||
"Set clear success metrics",
|
||||
"Choose shortest meaningful trial period",
|
||||
"Pick simplest version to test",
|
||||
"Schedule review before committing further",
|
||||
],
|
||||
tips: [
|
||||
"Make it clear this is an experiment, not a decision",
|
||||
"Shorter trials = faster learning",
|
||||
"Document what you learn, not just what happened",
|
||||
],
|
||||
success:
|
||||
"You learn what works through experience rather than speculation, building confidence for bigger decisions.",
|
||||
};
|
||||
}
|
||||
|
||||
// ADVICE PROCESS - multiple expertise, mixed investment
|
||||
if (state.expertise === "multiple" && state.investment === "mixed") {
|
||||
return {
|
||||
method: "Advice Process",
|
||||
tagline: "Decision-maker seeks input, then decides",
|
||||
reasoning:
|
||||
"Multiple people have valuable input, but not everyone needs to be involved in the final call. This balances inclusion with efficiency.",
|
||||
steps: [
|
||||
"Assign decision owner (most affected or willing)",
|
||||
"Owner seeks advice from those with expertise",
|
||||
"Owner seeks input from those affected",
|
||||
"Owner makes decision and explains reasoning",
|
||||
"Share decision and thank advisors",
|
||||
],
|
||||
tips: [
|
||||
"Be clear who the decision owner is upfront",
|
||||
"Seeking advice ≠ design by committee",
|
||||
"Owner genuinely considers input but isn't bound by it",
|
||||
],
|
||||
success:
|
||||
"Decision made efficiently with relevant input incorporated, and everyone understands the reasoning.",
|
||||
};
|
||||
}
|
||||
|
||||
// DEFAULT
|
||||
return {
|
||||
method: "Facilitated Discussion",
|
||||
tagline: "Talk it through with structure",
|
||||
reasoning:
|
||||
"Your situation has mixed signals. Use a structured discussion to find clarity before choosing a decision method.",
|
||||
steps: [
|
||||
"Clarify what we're actually deciding",
|
||||
"Share all relevant information",
|
||||
"Each person shares their perspective (timed)",
|
||||
"Identify where we align and where we differ",
|
||||
"Choose appropriate method based on what emerges",
|
||||
],
|
||||
tips: [
|
||||
"Sometimes the discussion reveals you're solving the wrong problem",
|
||||
"Visual tools (sticky notes, diagrams) help with complex decisions",
|
||||
"If stuck, ask: 'What would happen if we did nothing?'",
|
||||
],
|
||||
warning:
|
||||
"Don't let discussion become delay. Set a deadline for moving to a decision method.",
|
||||
success:
|
||||
"The real question becomes clear and the right decision method becomes obvious.",
|
||||
};
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
state.urgency = 3;
|
||||
state.reversible = null;
|
||||
state.expertise = null;
|
||||
state.impact = null;
|
||||
state.options = null;
|
||||
state.investment = null;
|
||||
state.teamSize = null;
|
||||
currentStep.value = 1;
|
||||
showResult.value = false;
|
||||
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
|
||||
function printResult() {
|
||||
window.print();
|
||||
}
|
||||
|
||||
// Keyboard navigation
|
||||
onMounted(() => {
|
||||
const handleKeydown = (event) => {
|
||||
if (showResult.value) return;
|
||||
|
||||
if (
|
||||
event.key === "ArrowRight" &&
|
||||
canProceed.value &&
|
||||
currentStep.value < totalSteps
|
||||
) {
|
||||
nextStep();
|
||||
} else if (event.key === "ArrowLeft" && currentStep.value > 1) {
|
||||
previousStep();
|
||||
} else if (
|
||||
event.key === "Enter" &&
|
||||
canProceed.value &&
|
||||
currentStep.value === totalSteps
|
||||
) {
|
||||
showRecommendation();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", handleKeydown);
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener("keydown", handleKeydown);
|
||||
});
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: "Decision Framework Helper",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content:
|
||||
"Find the right way to decide together with this interactive decision-making framework helper.",
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Dark mode utility overrides for better contrast */
|
||||
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;
|
||||
}
|
||||
|
||||
html.dark :deep(.bg-neutral-50),
|
||||
html.dark :deep(.bg-neutral-100),
|
||||
html.dark :deep(.bg-neutral-200) {
|
||||
background-color: #0a0a0a !important;
|
||||
}
|
||||
|
||||
html.dark :deep(.border-neutral-200),
|
||||
html.dark :deep(.border-neutral-300) {
|
||||
border-color: #374151 !important;
|
||||
}
|
||||
|
||||
/* Header progress bar frame inversion */
|
||||
html.dark :deep(.header-section .w-full.h-2) {
|
||||
background-color: #0a0a0a !important;
|
||||
border-color: #000 !important;
|
||||
}
|
||||
|
||||
/* Buttons in results area */
|
||||
html.dark :deep(.u-card),
|
||||
html.dark :deep(.bg-white) {
|
||||
background-color: #0a0a0a !important;
|
||||
}
|
||||
|
||||
html.dark :deep(.bg-neutral-50) {
|
||||
background-color: #0f172a !important;
|
||||
}
|
||||
</style>
|
||||
369
pages/templates/index.vue
Normal file
369
pages/templates/index.vue
Normal file
|
|
@ -0,0 +1,369 @@
|
|||
<template>
|
||||
<div
|
||||
class="template-container min-h-screen bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 py-8"
|
||||
style="font-family: 'Ubuntu', 'Ubuntu Mono', monospace">
|
||||
<div class="max-w-6xl mx-auto px-4 relative">
|
||||
<div class="mb-8">
|
||||
<h1
|
||||
class="text-3xl font-bold text-neutral-900 dark:text-white mb-2"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
Document Templates
|
||||
</h1>
|
||||
<p class="text-neutral-700 dark:text-neutral-200">
|
||||
Fillable forms for cooperative documents. Data saves locally in your
|
||||
browser.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div
|
||||
v-for="template in templates"
|
||||
:key="template.id"
|
||||
class="template-card h-full flex flex-col">
|
||||
<!-- Dithered shadow background -->
|
||||
<div class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
||||
|
||||
<!-- Main content -->
|
||||
<div
|
||||
class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6 h-full flex flex-col">
|
||||
<div class="mb-4">
|
||||
<h3
|
||||
class="text-xl font-semibold text-neutral-900 dark:text-white">
|
||||
{{ template.name }}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p class="text-neutral-700 dark:text-neutral-200 mb-4">
|
||||
{{ template.description }}
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
<span
|
||||
v-for="tag in template.tags"
|
||||
:key="tag"
|
||||
class="px-2 py-1 text-xs font-medium bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-900 border border-black dark:border-white dither-tag">
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="text-sm text-neutral-700 dark:text-neutral-200 mb-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<span>{{ template.estimatedTime }}</span>
|
||||
<span>{{ template.fields }} fields</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Spacer to push buttons to bottom -->
|
||||
<div class="flex-1"></div>
|
||||
|
||||
<div class="flex gap-2 mt-auto">
|
||||
<NuxtLink
|
||||
:to="template.path"
|
||||
class="flex-1 px-4 py-2 bg-black dark:bg-white text-white dark:text-black border border-black dark:border-white hover:bg-black dark:hover:bg-white transition-colors text-center font-medium bitmap-button"
|
||||
style="font-family: 'Ubuntu Mono', monospace">
|
||||
START TEMPLATE
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink
|
||||
v-if="hasData(template.id)"
|
||||
:to="template.path"
|
||||
class="px-4 py-2 bg-white dark:bg-neutral-950 text-black dark:text-white border border-black dark:border-white hover:bg-white dark:hover:bg-neutral-950 transition-colors bitmap-button"
|
||||
title="Continue from saved data"
|
||||
style="font-family: 'Ubuntu Mono', monospace">
|
||||
RESUME
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Help Section -->
|
||||
<div class="mt-12 help-section">
|
||||
<!-- Dithered shadow background -->
|
||||
<div class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
||||
|
||||
<!-- Main content -->
|
||||
<div
|
||||
class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6">
|
||||
<h2
|
||||
class="text-xl font-semibold text-neutral-900 dark:text-white mb-3"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
How Templates Work
|
||||
</h2>
|
||||
<div
|
||||
class="grid md:grid-cols-2 gap-6 text-neutral-900 dark:text-neutral-100">
|
||||
<div>
|
||||
<h3
|
||||
class="font-medium mb-2 text-neutral-900 dark:text-white"
|
||||
style="font-family: 'Ubuntu Mono', monospace">
|
||||
FILL OUT FORMS
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-700 dark:text-neutral-200">
|
||||
Templates include form fields for all necessary information.
|
||||
Data auto-saves as you type.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3
|
||||
class="font-medium mb-2 text-neutral-900 dark:text-white"
|
||||
style="font-family: 'Ubuntu Mono', monospace">
|
||||
LOCAL STORAGE
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-700 dark:text-neutral-200">
|
||||
All data saves in your browser only. Nothing is sent to external
|
||||
servers.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3
|
||||
class="font-medium mb-2 text-neutral-900 dark:text-white"
|
||||
style="font-family: 'Ubuntu Mono', monospace">
|
||||
EXPORT OPTIONS
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-700 dark:text-neutral-200">
|
||||
Download as PDF (print), plain text, Markdown, or Word document.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3
|
||||
class="font-medium mb-2 text-neutral-900 dark:text-white"
|
||||
style="font-family: 'Ubuntu Mono', monospace">
|
||||
RESUME ANYTIME
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-700 dark:text-neutral-200">
|
||||
Come back later and your progress will be saved. Clear browser
|
||||
data to start fresh.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
|
||||
const templates = [
|
||||
{
|
||||
id: "membership-agreement",
|
||||
name: "Membership Agreement",
|
||||
description:
|
||||
"A comprehensive agreement outlining member rights, responsibilities, decision-making processes, and financial arrangements for worker cooperatives.",
|
||||
icon: "i-heroicons-user-group",
|
||||
path: "/templates/membership-agreement",
|
||||
tags: ["Legal", "Governance", "Membership"],
|
||||
estimatedTime: "15-30 min",
|
||||
fields: 25,
|
||||
storageKey: "membership-agreement-data",
|
||||
},
|
||||
{
|
||||
id: "conflict-resolution-framework",
|
||||
name: "Conflict Resolution Framework",
|
||||
description:
|
||||
"A customizable framework for handling conflicts with restorative justice principles, clear processes, and organizational values alignment.",
|
||||
icon: "i-heroicons-scale",
|
||||
path: "/templates/conflict-resolution-framework",
|
||||
tags: ["Governance", "Process", "Care"],
|
||||
estimatedTime: "20-40 min",
|
||||
fields: 35,
|
||||
storageKey: "conflict-resolution-framework-data",
|
||||
},
|
||||
{
|
||||
id: "tech-charter",
|
||||
name: "Technology Charter",
|
||||
description:
|
||||
"Build technology decisions on cooperative values. Define principles, technical constraints, and evaluation criteria for vendor selection.",
|
||||
icon: "i-heroicons-cog-6-tooth",
|
||||
path: "/templates/tech-charter",
|
||||
tags: ["Technology", "Decision-Making", "Governance"],
|
||||
estimatedTime: "10-20 min",
|
||||
fields: 20,
|
||||
storageKey: "tech-charter-data",
|
||||
},
|
||||
{
|
||||
id: "decision-framework",
|
||||
name: "Decision Framework Helper",
|
||||
description:
|
||||
"Interactive tool to help determine the best decision-making approach based on urgency, expertise, stakes, and team dynamics.",
|
||||
icon: "i-heroicons-light-bulb",
|
||||
path: "/templates/decision-framework",
|
||||
tags: ["Decision-Making", "Process", "Governance"],
|
||||
estimatedTime: "5-10 min",
|
||||
fields: 7,
|
||||
storageKey: "decision-framework-data",
|
||||
},
|
||||
];
|
||||
|
||||
const hasData = (templateId) => {
|
||||
const template = templates.find((t) => t.id === templateId);
|
||||
if (!template?.storageKey) return false;
|
||||
|
||||
if (process.client) {
|
||||
const saved = localStorage.getItem(template.storageKey);
|
||||
return saved && saved !== "{}";
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
// Remove the JavaScript background handler since we're using CSS classes
|
||||
|
||||
useHead({
|
||||
title: "Document Templates - Co-op Pay & Value Tool",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content:
|
||||
"Fillable document templates for worker cooperatives including membership agreements and governance documents.",
|
||||
},
|
||||
],
|
||||
});
|
||||
</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");
|
||||
|
||||
/* Removed full-screen dither pattern to avoid gray haze in dark mode */
|
||||
|
||||
/* Exact shadow style from value-flow inspiration */
|
||||
.dither-shadow {
|
||||
background: black;
|
||||
background-image: radial-gradient(white 1px, transparent 1px);
|
||||
background-size: 2px 2px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dither-shadow {
|
||||
background: white;
|
||||
background-image: radial-gradient(black 1px, transparent 1px);
|
||||
}
|
||||
}
|
||||
|
||||
:global(.dark) .dither-shadow {
|
||||
background: white;
|
||||
background-image: radial-gradient(black 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.dither-shadow-disabled {
|
||||
background: black;
|
||||
background-image: radial-gradient(white 1px, transparent 1px);
|
||||
background-size: 2px 2px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dither-shadow-disabled {
|
||||
background: white;
|
||||
background-image: radial-gradient(black 1px, transparent 1px);
|
||||
}
|
||||
}
|
||||
|
||||
:global(.dark) .dither-shadow-disabled {
|
||||
background: white;
|
||||
background-image: radial-gradient(black 1px, transparent 1px);
|
||||
}
|
||||
|
||||
/* Rely on Tailwind bg utilities on container */
|
||||
|
||||
.template-card {
|
||||
@apply relative;
|
||||
font-family: "Ubuntu", monospace;
|
||||
}
|
||||
|
||||
.help-section {
|
||||
@apply relative;
|
||||
}
|
||||
|
||||
.coming-soon {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dither-tag {
|
||||
position: relative;
|
||||
background: white;
|
||||
}
|
||||
.dither-tag::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent 0px,
|
||||
transparent 1px,
|
||||
black 1px,
|
||||
black 2px
|
||||
);
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Button styling - pure bitmap, no colors */
|
||||
.bitmap-button {
|
||||
font-family: "Ubuntu Mono", monospace !important;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bitmap-button:hover {
|
||||
transform: translateY(-1px) translateX(-1px);
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
.bitmap-button:hover::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.disabled-button {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Remove any inherited rounded corners */
|
||||
.template-card > *,
|
||||
.help-section > *,
|
||||
button,
|
||||
.px-4,
|
||||
div[class*="border"] {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Button hover effects with bitmap feel */
|
||||
.template-card .relative:hover {
|
||||
transform: translateY(-1px);
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
/* Ensure sharp edges on all elements */
|
||||
* {
|
||||
border-radius: 0 !important;
|
||||
font-family: "Ubuntu", monospace;
|
||||
}
|
||||
|
||||
html.dark :deep(.text-neutral-700),
|
||||
html.dark :deep(.text-neutral-500),
|
||||
html.dark :deep(.bg-neutral-50),
|
||||
html.dark :deep(.bg-neutral-100) {
|
||||
color: white !important;
|
||||
background-color: #0a0a0a !important;
|
||||
}
|
||||
|
||||
:deep(.border-neutral-200),
|
||||
:deep(.border-neutral-300) {
|
||||
border-color: black !important;
|
||||
}
|
||||
</style>
|
||||
2722
pages/templates/membership-agreement.vue
Normal file
2722
pages/templates/membership-agreement.vue
Normal file
File diff suppressed because it is too large
Load diff
1828
pages/templates/tech-charter.vue
Normal file
1828
pages/templates/tech-charter.vue
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue