File size: 5,134 Bytes
d787a09 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | {% extends "base.html" %}
{% block title %}Roadmap — ParaPilot{% endblock %}
{% block content %}
<!-- Hero -->
<section class="mb-8">
<div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
<div>
<span class="inline-flex items-center gap-1.5 rounded-full bg-brand-50 px-3 py-1 text-xs font-semibold text-brand-700 ring-1 ring-inset ring-brand-200 dark:bg-brand-500/10 dark:text-brand-300 dark:ring-brand-500/20">
<span class="h-1.5 w-1.5 rounded-full bg-brand-500"></span> Illinois · Dissolution of Marriage
</span>
<h1 class="mt-3 text-3xl font-bold tracking-tight sm:text-4xl">
Your <span class="pp-gradient-text">divorce roadmap</span>
</h1>
<p class="mt-2 max-w-2xl text-slate-600 dark:text-slate-300">
A step-by-step map of the Illinois divorce process. Click any step for the forms you need,
what each must contain, deadlines, who to call, and the official source behind it.
</p>
</div>
<div class="flex shrink-0 items-center gap-4 text-sm text-slate-500 dark:text-slate-400">
<div class="text-right">
<div class="text-2xl font-bold text-slate-800 dark:text-slate-100">{{ main_line|length }}</div>
<div>core steps</div>
</div>
<div class="h-10 w-px bg-slate-200 dark:bg-slate-700"></div>
<div class="text-right">
<div class="text-2xl font-bold text-slate-800 dark:text-slate-100">{{ subflows|length }}</div>
<div>branches</div>
</div>
<div class="h-10 w-px bg-slate-200 dark:bg-slate-700"></div>
<div class="text-right">
<div class="text-2xl font-bold text-slate-800 dark:text-slate-100">{{ stats.chunks }}</div>
<div>cited sources</div>
</div>
</div>
</div>
</section>
<div class="grid gap-6 lg:grid-cols-[minmax(0,22rem)_minmax(0,1fr)]">
<!-- Stepper -->
<div class="lg:sticky lg:top-24 lg:self-start">
<div class="pp-rail relative space-y-2">
{% for step in main_line %}
<button
class="pp-step pp-focus relative flex w-full items-center gap-3 rounded-xl border border-slate-200 bg-white/70 px-3 py-3 text-left dark:border-slate-800 dark:bg-slate-900/50"
data-step="{{ step.id }}"
data-active="{{ 'true' if loop.first else 'false' }}"
hx-get="/step/{{ step.id }}"
hx-target="#step-panel"
hx-swap="innerHTML"
onclick="document.querySelectorAll('.pp-step').forEach(b=>b.dataset.active='false'); this.dataset.active='true';">
<span class="pp-bubble shrink-0">{{ loop.index }}</span>
<span class="min-w-0">
<span class="block truncate text-sm font-semibold text-slate-800 dark:text-slate-100">{{ step.title }}</span>
{% if step.transitions|selectattr('when')|list %}
<span class="mt-0.5 inline-flex items-center gap-1 text-[11px] font-medium text-amber-600 dark:text-amber-400">
<svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>
has branches
</span>
{% endif %}
</span>
</button>
{% endfor %}
</div>
<!-- Conditional sub-flows -->
<div class="mt-6">
<h3 class="px-1 text-xs font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500">If your case is different</h3>
<div class="mt-2 space-y-2">
{% for step in subflows %}
<button
class="pp-step pp-focus relative flex w-full items-center gap-3 rounded-xl border border-dashed border-amber-300/70 bg-amber-50/40 px-3 py-2.5 text-left dark:border-amber-500/30 dark:bg-amber-500/5"
data-step="{{ step.id }}"
hx-get="/step/{{ step.id }}"
hx-target="#step-panel"
hx-swap="innerHTML"
onclick="document.querySelectorAll('.pp-step').forEach(b=>b.dataset.active='false'); this.dataset.active='true';">
<span class="pp-bubble pp-bubble--sub shrink-0">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>
</span>
<span class="min-w-0">
<span class="block truncate text-sm font-semibold text-slate-800 dark:text-slate-100">{{ step.title }}</span>
{% if step.trigger %}<span class="block truncate text-[11px] text-slate-500 dark:text-slate-400">when {{ step.trigger }}</span>{% endif %}
</span>
</button>
{% endfor %}
</div>
</div>
</div>
<!-- Detail panel (htmx target) -->
<div id="step-panel" hx-get="/step/{{ flow.start }}" hx-trigger="load" hx-swap="innerHTML">
<div class="pp-card grid min-h-[24rem] place-items-center p-8 text-slate-400">
Loading the first step…
</div>
</div>
</div>
{% endblock %}
|