102 lines
5.8 KiB
HTML
102 lines
5.8 KiB
HTML
<h2>AI Suggestion Placement</h2>
|
|
<p class="subtitle">You picked "AI assistive" — now: how does the AI suggestion appear on each unreconciled bank line? Three layouts:</p>
|
|
|
|
<div class="cards" data-multiselect>
|
|
<div class="card" data-choice="badge_inline" onclick="toggleSelect(this)">
|
|
<div class="card-image">
|
|
<div class="mockup">
|
|
<div class="mockup-header">Layout A — Inline Badge</div>
|
|
<div class="mockup-body" style="padding:12px;font-family:monospace;font-size:13px;line-height:1.7">
|
|
<div style="border:1px solid #d8dadd;padding:10px;border-radius:6px;background:#fff">
|
|
<div style="display:flex;justify-content:space-between;align-items:center">
|
|
<div>
|
|
<div style="font-weight:600">Apr 12 — RBC ETF deposit</div>
|
|
<div style="color:#666;font-size:12px">Cheque ref 4827 · $1,847.50 CAD</div>
|
|
</div>
|
|
<div style="background:#22c55e;color:#fff;padding:3px 8px;border-radius:12px;font-size:11px;font-weight:600">92% MATCH</div>
|
|
</div>
|
|
<div style="margin-top:8px;padding:6px;background:#f0fdf4;border-left:3px solid #22c55e;font-size:12px;color:#166534">
|
|
💡 Invoice <strong>INV/2026/00123</strong> — Westin Plating Co — $1,847.50 · <a href="#" style="color:#22c55e">Accept</a> · <a href="#" style="color:#666">Reject</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>A — Inline Badge + Suggestion Strip</h3>
|
|
<p>Confidence badge top-right of each line, suggestion strip just below. One-click Accept/Reject. Familiar Enterprise-style line layout, AI feels like a layer added on top.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" data-choice="side_panel" onclick="toggleSelect(this)">
|
|
<div class="card-image">
|
|
<div class="mockup">
|
|
<div class="mockup-header">Layout B — Side Panel</div>
|
|
<div class="mockup-body" style="padding:12px;font-family:monospace;font-size:12px">
|
|
<div style="display:flex;gap:8px;height:200px">
|
|
<div style="flex:1;border:1px solid #d8dadd;border-radius:6px;background:#fff;padding:8px">
|
|
<div style="font-weight:600;margin-bottom:6px">Bank lines</div>
|
|
<div style="background:#dbeafe;padding:6px;border-radius:4px;margin-bottom:4px;font-size:11px">Apr 12 RBC $1,847.50 ✓ selected</div>
|
|
<div style="padding:6px;font-size:11px;color:#666">Apr 12 RBC $245.00</div>
|
|
<div style="padding:6px;font-size:11px;color:#666">Apr 11 Visa $89.99</div>
|
|
<div style="padding:6px;font-size:11px;color:#666">Apr 11 RBC $3,200.00</div>
|
|
</div>
|
|
<div style="width:200px;border:1px solid #d8dadd;border-radius:6px;background:#f8fafc;padding:8px">
|
|
<div style="font-weight:600;font-size:11px;margin-bottom:6px">AI Suggestions</div>
|
|
<div style="padding:6px;background:#fff;border-radius:4px;margin-bottom:4px;font-size:10px">
|
|
<div style="color:#22c55e;font-weight:600">92% INV/2026/00123</div>
|
|
<div style="color:#666">Westin Plating $1,847.50</div>
|
|
</div>
|
|
<div style="padding:6px;background:#fff;border-radius:4px;font-size:10px">
|
|
<div style="color:#f59e0b;font-weight:600">68% INV/2026/00098</div>
|
|
<div style="color:#666">Westin Plating $1,800.00</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>B — Dedicated Side Panel</h3>
|
|
<p>Bank lines on the left, AI suggestions panel on the right, updates as you select a line. Multiple ranked suggestions visible. More screen real estate for AI; line list stays clean.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" data-choice="hover_only" onclick="toggleSelect(this)">
|
|
<div class="card-image">
|
|
<div class="mockup">
|
|
<div class="mockup-header">Layout C — Hover Reveal</div>
|
|
<div class="mockup-body" style="padding:12px;font-family:monospace;font-size:13px;line-height:1.7">
|
|
<div style="border:1px solid #d8dadd;padding:10px;border-radius:6px;background:#fff;margin-bottom:6px">
|
|
<div style="display:flex;justify-content:space-between;align-items:center">
|
|
<div>
|
|
<div style="font-weight:600">Apr 12 — RBC ETF deposit</div>
|
|
<div style="color:#666;font-size:12px">Cheque ref 4827 · $1,847.50 CAD</div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:6px">
|
|
<div style="width:8px;height:8px;background:#22c55e;border-radius:50%"></div>
|
|
<div style="color:#666;font-size:11px;font-style:italic">hover for AI</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="border:1px solid #22c55e;padding:10px;border-radius:6px;background:#f0fdf4;box-shadow:0 4px 12px rgba(0,0,0,0.08)">
|
|
<div style="display:flex;justify-content:space-between;align-items:center">
|
|
<div>
|
|
<div style="font-weight:600">Apr 12 — RBC e-transfer</div>
|
|
<div style="color:#166534;font-size:12px">💡 92% match: INV/2026/00123 — $1,847.50 · <a href="#" style="color:#22c55e">Accept</a></div>
|
|
</div>
|
|
<div style="background:#22c55e;color:#fff;padding:3px 8px;border-radius:12px;font-size:11px">92%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>C — Hover-to-Reveal</h3>
|
|
<p>Just a confidence dot on each line. AI details appear on hover/click. Cleanest visual, most Enterprise-like density. Slowest discovery for new users.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="subtitle">Click your preferred option(s). I'll read your selection on the next turn. You can also describe in the terminal what you'd like changed.</p>
|