21ceae4866
- Accents français partout (seed + composants Vue) - Labels discrets: Engagements, Préambule, Application, Variables - N1.1: présentation visuelle des niveaux d'inertie avec formule - F1.2: paramètres + lecture du curseur d'inertie - MarkdownRenderer: espacement resserré, support code inline - Toutes descriptions et meta en bon français Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
128 lines
3.8 KiB
Vue
128 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* DocumentTuto — Quick tutorial overlay explaining how the document works.
|
|
* Shows how permanent voting, inertia, counter-proposals, and thresholds work.
|
|
*/
|
|
const open = ref(false)
|
|
|
|
const steps = [
|
|
{
|
|
icon: 'i-lucide-infinity',
|
|
title: 'Vote permanent',
|
|
text: 'Chaque engagement est sous vote permanent. À tout moment, vous pouvez proposer une alternative ou voter pour/contre le texte en vigueur.',
|
|
},
|
|
{
|
|
icon: 'i-lucide-sliders-horizontal',
|
|
title: 'Inertie variable',
|
|
text: 'Les engagements fondamentaux ont une inertie standard (difficulté de remplacement modérée). Les annexes sont plus faciles à modifier. La formule et ses réglages sont très protégés.',
|
|
},
|
|
{
|
|
icon: 'i-lucide-scale',
|
|
title: 'Seuil adaptatif',
|
|
text: 'La formule WoT adapte le seuil à la participation : peu de votants = quasi-unanimité requise ; beaucoup de votants = majorité simple suffit.',
|
|
},
|
|
{
|
|
icon: 'i-lucide-pen-line',
|
|
title: 'Contre-propositions',
|
|
text: 'Cliquez sur « Proposer une alternative » pour soumettre un texte de remplacement. Il sera soumis au vote et devra atteindre le seuil d\'adoption pour remplacer le texte en vigueur.',
|
|
},
|
|
{
|
|
icon: 'i-lucide-git-branch',
|
|
title: 'Dépôt automatique',
|
|
text: 'Quand une alternative est adoptée, le document officiel est mis à jour, ancré sur IPFS et on-chain, puis déployé dans les applications (Cesium, Gecko).',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<UButton
|
|
label="Comment ça marche ?"
|
|
icon="i-lucide-circle-help"
|
|
variant="ghost"
|
|
color="neutral"
|
|
size="sm"
|
|
@click="open = true"
|
|
/>
|
|
|
|
<UModal v-model:open="open" :ui="{ content: 'max-w-lg' }">
|
|
<template #content>
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-between mb-5">
|
|
<h2 class="text-lg font-bold" style="color: var(--mood-text)">
|
|
Comment ça marche ?
|
|
</h2>
|
|
<UButton
|
|
icon="i-lucide-x"
|
|
variant="ghost"
|
|
color="neutral"
|
|
size="xs"
|
|
@click="open = false"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-4">
|
|
<div
|
|
v-for="(step, idx) in steps"
|
|
:key="idx"
|
|
class="tuto-step"
|
|
>
|
|
<div class="tuto-step__icon">
|
|
<UIcon :name="step.icon" class="text-base" />
|
|
</div>
|
|
<div class="tuto-step__content">
|
|
<h4 class="text-sm font-bold" style="color: var(--mood-text)">
|
|
{{ step.title }}
|
|
</h4>
|
|
<p class="text-xs leading-relaxed" style="color: var(--mood-text-muted)">
|
|
{{ step.text }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 pt-4 border-t" style="border-color: color-mix(in srgb, var(--mood-text) 8%, transparent)">
|
|
<p class="text-xs text-center" style="color: var(--mood-text-muted)">
|
|
Référence : formule g1vote —
|
|
<a
|
|
href="https://g1vote-view-237903.pages.duniter.org/"
|
|
target="_blank"
|
|
rel="noopener"
|
|
style="color: var(--mood-accent)"
|
|
>
|
|
g1vote-view
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UModal>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.tuto-step {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.tuto-step__icon {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
background: color-mix(in srgb, var(--mood-accent) 10%, transparent);
|
|
color: var(--mood-accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tuto-step__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
}
|
|
</style>
|