1425 lines
66 KiB
HTML
1425 lines
66 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Rubis Sur l'Ongle — Wireframes low-fi MVP v0.1</title>
|
|
<style>
|
|
:root {
|
|
--bg: #fafafa;
|
|
--ink: #1a1a1a;
|
|
--ink-2: #555;
|
|
--ink-3: #888;
|
|
--line: #c8c8c8;
|
|
--line-2: #e2e2e2;
|
|
--fill: #ededed;
|
|
--fill-2: #f5f5f5;
|
|
--accent-bar: #2a2a2a;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
/* Page layout */
|
|
.page-header {
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 32px 48px 24px;
|
|
background: white;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
.page-header h1 {
|
|
margin: 0 0 4px 0;
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.page-header .meta {
|
|
color: var(--ink-3);
|
|
font-size: 12px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.toc {
|
|
display: flex;
|
|
gap: 18px;
|
|
flex-wrap: wrap;
|
|
font-size: 12px;
|
|
}
|
|
.toc a {
|
|
color: var(--ink-2);
|
|
text-decoration: none;
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 4px;
|
|
background: var(--fill-2);
|
|
}
|
|
.toc a:hover { background: var(--fill); color: var(--ink); }
|
|
main { padding: 32px 48px 80px; max-width: 1280px; margin: 0 auto; }
|
|
section.group { margin-bottom: 56px; }
|
|
section.group > h2 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--ink-2);
|
|
border-bottom: 1px solid var(--line);
|
|
padding-bottom: 8px;
|
|
margin: 0 0 24px;
|
|
}
|
|
.frame {
|
|
background: white;
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
margin-bottom: 28px;
|
|
overflow: hidden;
|
|
}
|
|
.frame-head {
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid var(--line-2);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: 16px;
|
|
}
|
|
.frame-head h3 {
|
|
margin: 0;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
.frame-head .tag {
|
|
font-size: 11px;
|
|
color: var(--ink-3);
|
|
border: 1px solid var(--line);
|
|
padding: 2px 8px;
|
|
border-radius: 3px;
|
|
background: var(--fill-2);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.frame-body {
|
|
display: grid;
|
|
grid-template-columns: 1fr 280px;
|
|
gap: 0;
|
|
}
|
|
@media (max-width: 900px) {
|
|
.frame-body { grid-template-columns: 1fr; }
|
|
}
|
|
.canvas {
|
|
background: var(--fill-2);
|
|
padding: 24px;
|
|
border-right: 1px solid var(--line-2);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
}
|
|
.annotation {
|
|
padding: 18px 20px;
|
|
background: white;
|
|
font-size: 12.5px;
|
|
color: var(--ink-2);
|
|
}
|
|
.annotation strong { color: var(--ink); display: block; margin-bottom: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
|
|
.annotation ul { margin: 0; padding-left: 18px; }
|
|
.annotation li { margin-bottom: 6px; }
|
|
.annotation li b { color: var(--ink); font-weight: 600; }
|
|
|
|
/* === DEVICE FRAMES === */
|
|
.device-desktop {
|
|
width: 100%;
|
|
max-width: 880px;
|
|
background: white;
|
|
border: 1.5px solid var(--ink);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
.device-desktop .browser-bar {
|
|
background: var(--fill);
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 8px 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 11px;
|
|
color: var(--ink-3);
|
|
}
|
|
.browser-bar .dot {
|
|
width: 8px; height: 8px; border-radius: 50%;
|
|
background: var(--line);
|
|
}
|
|
.browser-bar .url {
|
|
background: white;
|
|
border: 1px solid var(--line);
|
|
border-radius: 3px;
|
|
padding: 3px 10px;
|
|
flex: 1;
|
|
margin-left: 12px;
|
|
font-family: ui-monospace, SFMono-Regular, monospace;
|
|
}
|
|
.device-mobile {
|
|
width: 320px;
|
|
background: white;
|
|
border: 1.5px solid var(--ink);
|
|
border-radius: 28px;
|
|
overflow: hidden;
|
|
padding: 8px;
|
|
}
|
|
.device-mobile .notch {
|
|
height: 18px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 14px;
|
|
align-items: center;
|
|
font-size: 10px;
|
|
color: var(--ink-3);
|
|
}
|
|
.device-mobile .screen {
|
|
border: 1px solid var(--line-2);
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* === WIREFRAME PRIMITIVES === */
|
|
/* Generic placeholder bars (representing text) */
|
|
.bar { height: 8px; background: var(--line-2); border-radius: 2px; margin: 6px 0; }
|
|
.bar-sm { height: 6px; }
|
|
.bar-lg { height: 12px; }
|
|
.bar-w-30 { width: 30%; }
|
|
.bar-w-40 { width: 40%; }
|
|
.bar-w-50 { width: 50%; }
|
|
.bar-w-60 { width: 60%; }
|
|
.bar-w-70 { width: 70%; }
|
|
.bar-w-80 { width: 80%; }
|
|
.bar-w-90 { width: 90%; }
|
|
.bar-dark { background: #555; }
|
|
.bar-mid { background: #aaa; }
|
|
/* Buttons */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 9px 14px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
border: 1px solid var(--ink);
|
|
}
|
|
.btn-primary { background: var(--ink); color: white; }
|
|
.btn-secondary { background: white; color: var(--ink); }
|
|
.btn-ghost { background: transparent; border: 1px dashed var(--line); color: var(--ink-2); }
|
|
.btn-sm { padding: 6px 10px; font-size: 11px; }
|
|
/* Inputs */
|
|
.input {
|
|
border: 1px dashed var(--line);
|
|
background: white;
|
|
padding: 10px 12px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
color: var(--ink-3);
|
|
margin-bottom: 12px;
|
|
}
|
|
.input.filled { border-style: solid; color: var(--ink); }
|
|
.input-label {
|
|
font-size: 11px;
|
|
color: var(--ink-2);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
margin-bottom: 4px;
|
|
}
|
|
/* Cards / panels */
|
|
.panel { border: 1px solid var(--line); border-radius: 4px; padding: 16px; background: white; }
|
|
.panel-fill { background: var(--fill-2); }
|
|
/* Layout helpers */
|
|
.row { display: flex; gap: 12px; }
|
|
.row-between { justify-content: space-between; align-items: center; }
|
|
.col { display: flex; flex-direction: column; }
|
|
.gap-sm { gap: 6px; }
|
|
.gap-md { gap: 12px; }
|
|
.gap-lg { gap: 24px; }
|
|
.stack { display: flex; flex-direction: column; gap: 12px; }
|
|
.stack-sm { gap: 6px; }
|
|
.grow { flex: 1; }
|
|
.center { display: flex; align-items: center; justify-content: center; }
|
|
/* App layout pieces */
|
|
.app-shell { display: grid; grid-template-columns: 200px 1fr; min-height: 520px; }
|
|
.app-sidebar {
|
|
background: var(--fill-2);
|
|
border-right: 1px solid var(--line-2);
|
|
padding: 20px 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
.nav-item {
|
|
padding: 8px 10px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
color: var(--ink-2);
|
|
border: 1px solid transparent;
|
|
}
|
|
.nav-item.active {
|
|
background: white;
|
|
border-color: var(--line);
|
|
color: var(--ink);
|
|
font-weight: 600;
|
|
}
|
|
.app-main {
|
|
padding: 24px 28px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
.topbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-bottom: 14px;
|
|
border-bottom: 1px solid var(--line-2);
|
|
}
|
|
/* Drop zone */
|
|
.dropzone {
|
|
border: 2px dashed var(--line);
|
|
background: var(--fill-2);
|
|
padding: 60px 24px;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
color: var(--ink-2);
|
|
}
|
|
.dropzone .big {
|
|
font-size: 24px;
|
|
color: var(--ink);
|
|
margin-bottom: 8px;
|
|
}
|
|
/* Step indicator */
|
|
.stepper { display: flex; gap: 0; align-items: center; margin-bottom: 24px; }
|
|
.step {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--ink-3);
|
|
font-size: 12px;
|
|
}
|
|
.step-num {
|
|
width: 20px; height: 20px; border-radius: 50%;
|
|
border: 1px solid var(--line);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 11px;
|
|
background: white;
|
|
}
|
|
.step.active .step-num { background: var(--ink); color: white; border-color: var(--ink); }
|
|
.step.done .step-num { background: var(--fill); }
|
|
.step-line {
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--line);
|
|
margin: 0 12px;
|
|
}
|
|
/* Chips/tags */
|
|
.chip {
|
|
display: inline-block;
|
|
padding: 3px 8px;
|
|
border-radius: 12px;
|
|
background: var(--fill);
|
|
border: 1px solid var(--line);
|
|
font-size: 11px;
|
|
color: var(--ink-2);
|
|
}
|
|
.chip-dark { background: var(--ink); color: white; border-color: var(--ink); }
|
|
/* Tables */
|
|
.table { width: 100%; border-collapse: collapse; font-size: 12px; }
|
|
.table th, .table td { padding: 10px 8px; border-bottom: 1px solid var(--line-2); text-align: left; }
|
|
.table th { color: var(--ink-3); font-weight: 500; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.05em; }
|
|
/* Stat tiles */
|
|
.stat {
|
|
border: 1px solid var(--line);
|
|
border-radius: 4px;
|
|
padding: 14px;
|
|
background: white;
|
|
flex: 1;
|
|
}
|
|
.stat .label { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
|
|
.stat .value { font-size: 22px; font-weight: 600; }
|
|
.stat .delta { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
|
|
/* Brand mark */
|
|
.brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
}
|
|
.brand .gem {
|
|
width: 14px; height: 14px;
|
|
background: var(--ink);
|
|
transform: rotate(45deg);
|
|
}
|
|
/* Modal */
|
|
.modal-backdrop {
|
|
background: rgba(0,0,0,0.04);
|
|
border-radius: 4px;
|
|
padding: 24px;
|
|
}
|
|
.modal {
|
|
background: white;
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
}
|
|
/* Timeline */
|
|
.timeline { position: relative; padding-left: 28px; }
|
|
.timeline::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 9px;
|
|
top: 6px;
|
|
bottom: 6px;
|
|
width: 1px;
|
|
background: var(--line);
|
|
}
|
|
.timeline-item { position: relative; margin-bottom: 14px; }
|
|
.timeline-item::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -23px;
|
|
top: 4px;
|
|
width: 9px; height: 9px;
|
|
background: white;
|
|
border: 1.5px solid var(--ink);
|
|
border-radius: 50%;
|
|
}
|
|
.timeline-item.future::before { background: var(--fill); border-color: var(--line); }
|
|
.timeline-item .when { font-size: 11px; color: var(--ink-3); }
|
|
.timeline-item .what { font-size: 12.5px; color: var(--ink); margin-top: 2px; }
|
|
/* Notes */
|
|
.notes {
|
|
margin-top: 48px;
|
|
padding: 24px 28px;
|
|
border: 1px dashed var(--line);
|
|
border-radius: 6px;
|
|
background: white;
|
|
font-size: 13px;
|
|
color: var(--ink-2);
|
|
}
|
|
.notes h3 { margin-top: 0; color: var(--ink); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="page-header">
|
|
<h1>Rubis Sur l'Ongle — Wireframes MVP <span style="color:var(--ink-3); font-weight: 400;">v0.1</span></h1>
|
|
<div class="meta">Low-fidelity · niveaux de gris · 13 écrans · centré sur la promesse "3 clics maximum"</div>
|
|
<nav class="toc">
|
|
<a href="#onboarding">1. Onboarding & Auth</a>
|
|
<a href="#upload">2. Upload & OCR</a>
|
|
<a href="#plans">3. Plans de relance</a>
|
|
<a href="#dashboard">4. Dashboard & Rubis</a>
|
|
<a href="#notes">Notes & questions</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- 1. ONBOARDING & AUTH -->
|
|
<!-- ============================================================== -->
|
|
<section class="group" id="onboarding">
|
|
<h2>1 · Onboarding & Auth</h2>
|
|
|
|
<!-- 1.1 Inscription -->
|
|
<div class="frame">
|
|
<div class="frame-head">
|
|
<h3>1.1 — Inscription</h3>
|
|
<span class="tag">Desktop · Public</span>
|
|
</div>
|
|
<div class="frame-body">
|
|
<div class="canvas">
|
|
<div class="device-desktop">
|
|
<div class="browser-bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><div class="url">app.rubis-sur-longle.fr/inscription</div></div>
|
|
<div style="padding: 48px 80px; min-height: 480px;">
|
|
<div class="brand" style="margin-bottom: 32px;"><div class="gem"></div>Rubis Sur l'Ongle</div>
|
|
<div style="max-width: 380px; margin: 0 auto;">
|
|
<h3 style="margin: 0 0 6px; font-size: 22px;">Créez votre compte</h3>
|
|
<div class="bar bar-w-80" style="background: var(--line-2); margin-bottom: 24px;"></div>
|
|
<div class="input-label">Email pro</div>
|
|
<div class="input">votre@entreprise.fr</div>
|
|
<div class="input-label">Mot de passe</div>
|
|
<div class="input">••••••••</div>
|
|
<button class="btn btn-primary" style="width: 100%; margin-top: 8px;">Créer mon compte</button>
|
|
<div style="text-align: center; color: var(--ink-3); font-size: 11px; margin: 14px 0;">— ou —</div>
|
|
<button class="btn btn-secondary" style="width: 100%;">Continuer avec Google</button>
|
|
<div style="text-align: center; font-size: 11px; color: var(--ink-3); margin-top: 18px;">Déjà un compte ? <span style="color: var(--ink); text-decoration: underline;">Se connecter</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="annotation">
|
|
<strong>Intention</strong>
|
|
<ul>
|
|
<li><b>Frottement minimum</b> : 2 champs, et c'est tout. Pas de SIRET ni d'infos société à l'inscription — repoussées au setup.</li>
|
|
<li><b>Google SSO</b> en évidence — la cible TPE-PME utilise massivement Google Workspace.</li>
|
|
<li>Pas de "Conditions d'utilisation" en dur ici, juste un lien discret en pied de page (non dessiné).</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 1.2 Connexion -->
|
|
<div class="frame">
|
|
<div class="frame-head">
|
|
<h3>1.2 — Connexion</h3>
|
|
<span class="tag">Desktop · Public</span>
|
|
</div>
|
|
<div class="frame-body">
|
|
<div class="canvas">
|
|
<div class="device-desktop">
|
|
<div class="browser-bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><div class="url">app.rubis-sur-longle.fr/connexion</div></div>
|
|
<div style="padding: 48px 80px; min-height: 480px;">
|
|
<div class="brand" style="margin-bottom: 32px;"><div class="gem"></div>Rubis Sur l'Ongle</div>
|
|
<div style="max-width: 380px; margin: 0 auto;">
|
|
<h3 style="margin: 0 0 6px; font-size: 22px;">Connexion</h3>
|
|
<div class="bar bar-w-60" style="background: var(--line-2); margin-bottom: 24px;"></div>
|
|
<div class="input-label">Email</div>
|
|
<div class="input filled">arthur@entreprise.fr</div>
|
|
<div class="input-label">Mot de passe</div>
|
|
<div class="input">••••••••</div>
|
|
<div style="text-align: right; font-size: 11px; margin-bottom: 16px;"><span style="color: var(--ink-2); text-decoration: underline;">Mot de passe oublié ?</span></div>
|
|
<button class="btn btn-primary" style="width: 100%;">Se connecter</button>
|
|
<div style="text-align: center; color: var(--ink-3); font-size: 11px; margin: 14px 0;">— ou —</div>
|
|
<button class="btn btn-secondary" style="width: 100%;">Google</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="annotation">
|
|
<strong>Intention</strong>
|
|
<ul>
|
|
<li>Symétrie volontaire avec l'inscription — l'utilisateur ne se demande jamais "j'étais où ?".</li>
|
|
<li>Lien <b>"Mot de passe oublié"</b> bien placé : aligné à droite du champ, pas perdu en bas.</li>
|
|
<li>Magic-link à étudier en v2 (pratique mobile, supprime totalement le mot de passe).</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 1.3 Setup wizard -->
|
|
<div class="frame">
|
|
<div class="frame-head">
|
|
<h3>1.3 — Setup initial (1ère connexion)</h3>
|
|
<span class="tag">Desktop · Wizard 3 étapes</span>
|
|
</div>
|
|
<div class="frame-body">
|
|
<div class="canvas">
|
|
<div class="device-desktop">
|
|
<div class="browser-bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><div class="url">app.rubis-sur-longle.fr/setup</div></div>
|
|
<div style="padding: 36px 60px; min-height: 480px;">
|
|
<div class="brand" style="margin-bottom: 24px;"><div class="gem"></div>Rubis Sur l'Ongle</div>
|
|
<div class="stepper">
|
|
<div class="step done"><div class="step-num">✓</div>Compte</div>
|
|
<div class="step-line"></div>
|
|
<div class="step active"><div class="step-num">2</div>Entreprise</div>
|
|
<div class="step-line"></div>
|
|
<div class="step"><div class="step-num">3</div>Signature</div>
|
|
</div>
|
|
<div style="max-width: 560px;">
|
|
<h3 style="margin: 0 0 4px; font-size: 18px;">Parlez-nous de votre activité</h3>
|
|
<div class="bar bar-w-70" style="background: var(--line-2); margin-bottom: 22px;"></div>
|
|
<div class="row gap-md">
|
|
<div class="grow">
|
|
<div class="input-label">Nom de l'entreprise</div>
|
|
<div class="input">SARL Exemple</div>
|
|
</div>
|
|
<div class="grow">
|
|
<div class="input-label">SIRET <span style="color: var(--ink-3); text-transform: none;">(facultatif)</span></div>
|
|
<div class="input">123 456 789 00012</div>
|
|
</div>
|
|
</div>
|
|
<div class="input-label">Secteur d'activité</div>
|
|
<div class="input">Sélectionner un secteur ▾</div>
|
|
<div class="input-label">Combien de factures émettez-vous par mois ?</div>
|
|
<div class="row gap-sm" style="margin-bottom: 24px;">
|
|
<span class="chip">< 10</span>
|
|
<span class="chip chip-dark">10 — 50</span>
|
|
<span class="chip">50 — 200</span>
|
|
<span class="chip">> 200</span>
|
|
</div>
|
|
<div class="row row-between">
|
|
<button class="btn btn-secondary btn-sm">← Retour</button>
|
|
<button class="btn btn-primary">Continuer →</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="annotation">
|
|
<strong>Intention</strong>
|
|
<ul>
|
|
<li><b>Wizard 3 étapes max</b>, jamais 5+. La 3<sup>ème</sup> étape (signature email) prépare le 1<sup>er</sup> envoi de relance pour qu'il soit pro tout de suite.</li>
|
|
<li>Le volume mensuel est demandé en <b>chips</b> (1 clic) plutôt qu'en input — plus rapide et nous segmente pour la roadmap (pricing, OCR batch).</li>
|
|
<li>Le SIRET est facultatif — frein inutile à l'onboarding, on le redemandera au moment où on en a vraiment besoin (facture émise par l'app, etc.).</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- 2. UPLOAD & OCR -->
|
|
<!-- ============================================================== -->
|
|
<section class="group" id="upload">
|
|
<h2>2 · Upload & OCR factures</h2>
|
|
|
|
<!-- 2.1 Empty state drag&drop -->
|
|
<div class="frame">
|
|
<div class="frame-head">
|
|
<h3>2.1 — Empty state · drag & drop</h3>
|
|
<span class="tag">Desktop · App</span>
|
|
</div>
|
|
<div class="frame-body">
|
|
<div class="canvas">
|
|
<div class="device-desktop">
|
|
<div class="browser-bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><div class="url">app.rubis-sur-longle.fr/factures</div></div>
|
|
<div class="app-shell">
|
|
<aside class="app-sidebar">
|
|
<div class="brand"><div class="gem"></div>Rubis</div>
|
|
<div class="stack stack-sm">
|
|
<div class="nav-item">Dashboard</div>
|
|
<div class="nav-item active">Factures</div>
|
|
<div class="nav-item">Plans de relance</div>
|
|
<div class="nav-item">Clients</div>
|
|
<div class="nav-item">Paramètres</div>
|
|
</div>
|
|
<div style="margin-top: auto;">
|
|
<div class="panel panel-fill" style="padding: 10px;">
|
|
<div style="font-size: 11px; color: var(--ink-3);">Rubis gagnés ce mois</div>
|
|
<div style="font-size: 18px; font-weight: 600;">◆ 24</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<div class="app-main">
|
|
<div class="topbar">
|
|
<h3 style="margin: 0; font-size: 17px;">Factures</h3>
|
|
<div class="row gap-sm">
|
|
<button class="btn btn-secondary btn-sm">+ Saisir manuellement</button>
|
|
<button class="btn btn-primary btn-sm">+ Importer factures</button>
|
|
</div>
|
|
</div>
|
|
<div class="dropzone">
|
|
<div class="big">↓</div>
|
|
<div style="font-size: 16px; color: var(--ink); margin-bottom: 6px;">Glissez vos factures ici</div>
|
|
<div style="font-size: 12px;">PDF, PNG, JPG · jusqu'à 20 fichiers en simultané</div>
|
|
<div style="margin-top: 18px;"><button class="btn btn-secondary btn-sm">Ou parcourir mes fichiers</button></div>
|
|
</div>
|
|
<div style="text-align: center; font-size: 12px; color: var(--ink-3); margin-top: 8px;">L'OCR fait le reste — vérifiez en 30 secondes et lancez la relance.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="annotation">
|
|
<strong>Intention</strong>
|
|
<ul>
|
|
<li><b>L'écran "Factures" EST la dropzone.</b> Pas de page intermédiaire "Importer". Glisser/déposer marche partout dans l'app, mais c'est ici que le geste est attendu.</li>
|
|
<li>Le compteur de <b>rubis</b> est visible dès le sidebar — gratification permanente, pas seulement sur le dashboard.</li>
|
|
<li>Bouton "Saisir manuellement" en discret <b>secondaire</b> : c'est le fallback, pas le default path.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2.2 OCR review -->
|
|
<div class="frame">
|
|
<div class="frame-head">
|
|
<h3>2.2 — Vérification OCR</h3>
|
|
<span class="tag">Desktop · App · Modale plein écran</span>
|
|
</div>
|
|
<div class="frame-body">
|
|
<div class="canvas">
|
|
<div class="device-desktop">
|
|
<div class="browser-bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><div class="url">app.rubis-sur-longle.fr/factures/import/abc123</div></div>
|
|
<div style="padding: 24px 28px; min-height: 480px;">
|
|
<div class="row row-between" style="margin-bottom: 18px;">
|
|
<div>
|
|
<div style="font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em;">Étape 1 / 1 · facture 2 sur 5</div>
|
|
<h3 style="margin: 4px 0 0; font-size: 17px;">Vérifiez les informations extraites</h3>
|
|
</div>
|
|
<button class="btn btn-secondary btn-sm">✕ Annuler l'import</button>
|
|
</div>
|
|
<div class="row gap-lg" style="align-items: flex-start;">
|
|
<div class="panel" style="flex: 1; padding: 0; min-height: 360px; background: var(--fill);">
|
|
<div style="padding: 8px 12px; background: var(--fill-2); border-bottom: 1px solid var(--line-2); font-size: 11px; color: var(--ink-3);">facture-2024-0042.pdf</div>
|
|
<div style="padding: 24px;">
|
|
<div class="bar bar-w-50 bar-mid"></div>
|
|
<div class="bar bar-w-30"></div>
|
|
<div style="height: 8px;"></div>
|
|
<div class="bar bar-w-70"></div>
|
|
<div class="bar bar-w-60"></div>
|
|
<div class="bar bar-w-40"></div>
|
|
<div style="height: 16px;"></div>
|
|
<div class="bar bar-lg bar-w-90 bar-dark"></div>
|
|
<div class="bar bar-w-50"></div>
|
|
<div class="bar bar-w-50"></div>
|
|
<div class="bar bar-w-50"></div>
|
|
<div style="height: 10px;"></div>
|
|
<div class="bar bar-w-30 bar-dark"></div>
|
|
</div>
|
|
</div>
|
|
<div style="flex: 1.1;">
|
|
<div class="input-label">Client</div>
|
|
<div class="input filled">Boulangerie Martin SARL</div>
|
|
<div class="row gap-md">
|
|
<div class="grow">
|
|
<div class="input-label">Email du contact</div>
|
|
<div class="input filled">compta@martin.fr <span style="color: var(--ink-3); float: right;">✓</span></div>
|
|
</div>
|
|
<div class="grow">
|
|
<div class="input-label">N° de facture</div>
|
|
<div class="input filled">F-2024-0042</div>
|
|
</div>
|
|
</div>
|
|
<div class="row gap-md">
|
|
<div class="grow">
|
|
<div class="input-label">Montant TTC</div>
|
|
<div class="input filled">1 240,00 €</div>
|
|
</div>
|
|
<div class="grow">
|
|
<div class="input-label">Date d'échéance</div>
|
|
<div class="input filled">15/05/2026</div>
|
|
</div>
|
|
</div>
|
|
<div class="input-label">Plan de relance</div>
|
|
<div class="input filled">📂 Plan standard B2B (J+7, J+15, J+30) ▾</div>
|
|
<div class="row row-between" style="margin-top: 18px;">
|
|
<button class="btn btn-ghost btn-sm">Ignorer cette facture</button>
|
|
<div class="row gap-sm">
|
|
<button class="btn btn-secondary btn-sm">Sauver brouillon</button>
|
|
<button class="btn btn-primary btn-sm">Valider & suivante →</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="annotation">
|
|
<strong>Intention</strong>
|
|
<ul>
|
|
<li><b>Split 50/50</b> : aperçu PDF à gauche, formulaire pré-rempli à droite. L'œil compare sans scroll.</li>
|
|
<li>Tous les champs OCR sont <b>déjà remplis</b> avec un trait plein — l'utilisateur corrige plutôt qu'il ne remplit.</li>
|
|
<li>Le <b>plan de relance</b> est sélectionné par défaut (basé sur le secteur déclaré au setup) — c'est ici que se gagne le 3<sup>ème</sup> clic du parcours.</li>
|
|
<li>Compteur "facture 2 sur 5" pour gérer le batch sans perdre le fil.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2.3 Manual entry -->
|
|
<div class="frame">
|
|
<div class="frame-head">
|
|
<h3>2.3 — Saisie manuelle (fallback)</h3>
|
|
<span class="tag">Desktop · App · Modal</span>
|
|
</div>
|
|
<div class="frame-body">
|
|
<div class="canvas">
|
|
<div class="device-desktop">
|
|
<div class="browser-bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><div class="url">app.rubis-sur-longle.fr/factures</div></div>
|
|
<div style="padding: 24px; background: var(--fill);">
|
|
<div class="modal-backdrop">
|
|
<div class="modal" style="max-width: 540px;">
|
|
<div class="row row-between" style="margin-bottom: 12px;">
|
|
<h3 style="margin: 0; font-size: 16px;">Nouvelle facture</h3>
|
|
<span style="color: var(--ink-3); font-size: 16px;">✕</span>
|
|
</div>
|
|
<div class="bar bar-w-70" style="background: var(--line-2); margin-bottom: 20px;"></div>
|
|
<div class="input-label">Client <span style="color: var(--ink-3); text-transform: none;">(commencez à taper pour rechercher)</span></div>
|
|
<div class="input">Rechercher ou créer un client…</div>
|
|
<div class="row gap-md">
|
|
<div class="grow">
|
|
<div class="input-label">N° de facture</div>
|
|
<div class="input">F-2024-0043</div>
|
|
</div>
|
|
<div class="grow">
|
|
<div class="input-label">Date d'émission</div>
|
|
<div class="input">05/05/2026</div>
|
|
</div>
|
|
</div>
|
|
<div class="row gap-md">
|
|
<div class="grow">
|
|
<div class="input-label">Montant TTC</div>
|
|
<div class="input">€</div>
|
|
</div>
|
|
<div class="grow">
|
|
<div class="input-label">Échéance</div>
|
|
<div class="input">__ jours après émission ▾</div>
|
|
</div>
|
|
</div>
|
|
<div class="input-label">Plan de relance</div>
|
|
<div class="input">📂 Plan standard B2B (J+7, J+15, J+30) ▾</div>
|
|
<div class="row row-between" style="margin-top: 18px;">
|
|
<button class="btn btn-ghost btn-sm">+ Joindre le PDF (optionnel)</button>
|
|
<div class="row gap-sm">
|
|
<button class="btn btn-secondary btn-sm">Annuler</button>
|
|
<button class="btn btn-primary btn-sm">Créer la facture</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="annotation">
|
|
<strong>Intention</strong>
|
|
<ul>
|
|
<li>Pop-in modal, pas une nouvelle page — l'utilisateur reste dans son contexte (la liste de factures derrière reste visible).</li>
|
|
<li><b>Recherche client</b> en autocomplétion : si le client existe déjà, on le sélectionne ; sinon on le crée à la volée.</li>
|
|
<li>L'<b>échéance en relatif</b> ("30 jours après émission") est plus rapide que de calculer une date fixe.</li>
|
|
<li>"Joindre le PDF" reste optionnel pour la saisie manuelle — on n'oblige pas l'utilisateur à scanner s'il facture déjà ailleurs.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2.4 Liste / queue -->
|
|
<div class="frame">
|
|
<div class="frame-head">
|
|
<h3>2.4 — Liste des factures & statuts</h3>
|
|
<span class="tag">Desktop · App</span>
|
|
</div>
|
|
<div class="frame-body">
|
|
<div class="canvas">
|
|
<div class="device-desktop">
|
|
<div class="browser-bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><div class="url">app.rubis-sur-longle.fr/factures</div></div>
|
|
<div class="app-shell">
|
|
<aside class="app-sidebar">
|
|
<div class="brand"><div class="gem"></div>Rubis</div>
|
|
<div class="stack stack-sm">
|
|
<div class="nav-item">Dashboard</div>
|
|
<div class="nav-item active">Factures</div>
|
|
<div class="nav-item">Plans de relance</div>
|
|
<div class="nav-item">Clients</div>
|
|
<div class="nav-item">Paramètres</div>
|
|
</div>
|
|
</aside>
|
|
<div class="app-main">
|
|
<div class="topbar">
|
|
<h3 style="margin: 0; font-size: 17px;">Factures <span style="color: var(--ink-3); font-weight: 400; font-size: 13px;">· 23 actives</span></h3>
|
|
<div class="row gap-sm">
|
|
<button class="btn btn-secondary btn-sm">+ Saisir</button>
|
|
<button class="btn btn-primary btn-sm">+ Importer</button>
|
|
</div>
|
|
</div>
|
|
<div class="row gap-sm" style="font-size: 12px;">
|
|
<span class="chip chip-dark">Toutes (23)</span>
|
|
<span class="chip">À relancer (8)</span>
|
|
<span class="chip">En relance (11)</span>
|
|
<span class="chip">Encaissées (4)</span>
|
|
<span class="chip">Litige (0)</span>
|
|
</div>
|
|
<div class="panel" style="padding: 0;">
|
|
<table class="table">
|
|
<thead>
|
|
<tr><th></th><th>Client</th><th>N° facture</th><th>Montant</th><th>Échéance</th><th>Statut</th><th>Plan</th><th></th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><input type="checkbox" disabled></td>
|
|
<td>Boulangerie Martin SARL</td>
|
|
<td>F-2024-0042</td>
|
|
<td>1 240,00 €</td>
|
|
<td>15/05/2026</td>
|
|
<td><span class="chip">À échéance dans 10j</span></td>
|
|
<td>Standard B2B</td>
|
|
<td>···</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" disabled></td>
|
|
<td>Atelier Durand</td>
|
|
<td>F-2024-0039</td>
|
|
<td>3 600,00 €</td>
|
|
<td><b>02/05/2026</b></td>
|
|
<td><span class="chip" style="background:#3a3a3a; color:white; border-color:#3a3a3a;">Relance J+3 envoyée</span></td>
|
|
<td>Standard B2B</td>
|
|
<td>···</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" disabled></td>
|
|
<td>Cabinet Rousseau</td>
|
|
<td>F-2024-0038</td>
|
|
<td>850,00 €</td>
|
|
<td>28/04/2026</td>
|
|
<td><span class="chip" style="background:#1a1a1a; color:white; border-color:#1a1a1a;">Relance J+15 demain</span></td>
|
|
<td>Premium</td>
|
|
<td>···</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" disabled></td>
|
|
<td>Garage Lemoine</td>
|
|
<td>F-2024-0035</td>
|
|
<td>4 200,00 €</td>
|
|
<td>20/04/2026</td>
|
|
<td><span class="chip" style="background:white; border-color: var(--ink); color: var(--ink);">✓ Encaissée</span></td>
|
|
<td>Standard B2B</td>
|
|
<td>···</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="annotation">
|
|
<strong>Intention</strong>
|
|
<ul>
|
|
<li><b>Filtres en chips</b>, pas en dropdown — Arthur veut "à relancer" en 1 clic.</li>
|
|
<li>Le <b>statut est l'info principale</b> de chaque ligne : "Relance J+3 envoyée", "Relance J+15 demain". L'utilisateur sait en un regard où il en est.</li>
|
|
<li>Mise en gras de l'<b>échéance dépassée</b> (Atelier Durand) — signal visuel sans avoir à lire la date.</li>
|
|
<li>Possibilité d'<b>actions en lot</b> via les checkboxes (relancer manuellement, changer le plan, archiver).</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- 3. PLANS DE RELANCE -->
|
|
<!-- ============================================================== -->
|
|
<section class="group" id="plans">
|
|
<h2>3 · Plans de relance</h2>
|
|
|
|
<!-- 3.1 Library -->
|
|
<div class="frame">
|
|
<div class="frame-head">
|
|
<h3>3.1 — Bibliothèque de plans</h3>
|
|
<span class="tag">Desktop · App</span>
|
|
</div>
|
|
<div class="frame-body">
|
|
<div class="canvas">
|
|
<div class="device-desktop">
|
|
<div class="browser-bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><div class="url">app.rubis-sur-longle.fr/plans</div></div>
|
|
<div class="app-shell">
|
|
<aside class="app-sidebar">
|
|
<div class="brand"><div class="gem"></div>Rubis</div>
|
|
<div class="stack stack-sm">
|
|
<div class="nav-item">Dashboard</div>
|
|
<div class="nav-item">Factures</div>
|
|
<div class="nav-item active">Plans de relance</div>
|
|
<div class="nav-item">Clients</div>
|
|
<div class="nav-item">Paramètres</div>
|
|
</div>
|
|
</aside>
|
|
<div class="app-main">
|
|
<div class="topbar">
|
|
<h3 style="margin: 0; font-size: 17px;">Plans de relance</h3>
|
|
<button class="btn btn-primary btn-sm">+ Nouveau plan</button>
|
|
</div>
|
|
<div style="font-size: 12px; color: var(--ink-3);">Un plan = une cadence d'emails automatisée. 4 modèles fournis, modifiables.</div>
|
|
<div class="row gap-md" style="flex-wrap: wrap;">
|
|
|
|
<div class="panel" style="flex: 1 1 280px;">
|
|
<div class="row row-between"><b style="font-size: 13px;">Standard B2B</b><span class="chip">Par défaut</span></div>
|
|
<div class="bar bar-w-80" style="margin: 8px 0 12px;"></div>
|
|
<div class="stack stack-sm" style="font-size: 11.5px; color: var(--ink-2);">
|
|
<div>• <b>J+3</b> · Rappel amical</div>
|
|
<div>• <b>J+10</b> · Premier rappel formel</div>
|
|
<div>• <b>J+20</b> · Mise en demeure (brouillon)</div>
|
|
</div>
|
|
<div style="border-top: 1px solid var(--line-2); margin-top: 12px; padding-top: 10px; font-size: 11px; color: var(--ink-3);">Utilisé sur 18 factures</div>
|
|
</div>
|
|
|
|
<div class="panel" style="flex: 1 1 280px;">
|
|
<div class="row row-between"><b style="font-size: 13px;">Premium · clients VIP</b><span class="chip">Doux</span></div>
|
|
<div class="bar bar-w-80" style="margin: 8px 0 12px;"></div>
|
|
<div class="stack stack-sm" style="font-size: 11.5px; color: var(--ink-2);">
|
|
<div>• <b>J+7</b> · Email + SMS</div>
|
|
<div>• <b>J+15</b> · Appel manuel suggéré</div>
|
|
<div>• <b>J+30</b> · Email avec relevé</div>
|
|
</div>
|
|
<div style="border-top: 1px solid var(--line-2); margin-top: 12px; padding-top: 10px; font-size: 11px; color: var(--ink-3);">Utilisé sur 4 factures</div>
|
|
</div>
|
|
|
|
<div class="panel" style="flex: 1 1 280px;">
|
|
<div class="row row-between"><b style="font-size: 13px;">Court · cash flow tendu</b><span class="chip">Ferme</span></div>
|
|
<div class="bar bar-w-80" style="margin: 8px 0 12px;"></div>
|
|
<div class="stack stack-sm" style="font-size: 11.5px; color: var(--ink-2);">
|
|
<div>• <b>J+1</b> · Rappel</div>
|
|
<div>• <b>J+5</b> · Relance ferme</div>
|
|
<div>• <b>J+10</b> · Mise en demeure</div>
|
|
</div>
|
|
<div style="border-top: 1px solid var(--line-2); margin-top: 12px; padding-top: 10px; font-size: 11px; color: var(--ink-3);">Utilisé sur 1 facture</div>
|
|
</div>
|
|
|
|
<div class="panel" style="flex: 1 1 280px; border-style: dashed; background: transparent; align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 160px;">
|
|
<div style="font-size: 22px; color: var(--ink-3); margin-bottom: 6px;">+</div>
|
|
<div style="font-size: 12px; color: var(--ink-2);">Créer un plan</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="annotation">
|
|
<strong>Intention</strong>
|
|
<ul>
|
|
<li><b>Cards-first</b> : on voit la cadence en un regard, pas besoin de cliquer pour comprendre un plan.</li>
|
|
<li>4 plans fournis par défaut → l'utilisateur peut <b>commencer sans rien créer</b> (élimine la friction du "page blanche").</li>
|
|
<li>Le compteur <b>"Utilisé sur N factures"</b> aide à savoir lequel modifier prudemment.</li>
|
|
<li>Tonalité du plan résumée par un chip ("Doux", "Ferme", "Par défaut") — on positionne l'app comme un outil <b>respectueux du client</b>, pas un harceleur.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3.2 Plan editor -->
|
|
<div class="frame">
|
|
<div class="frame-head">
|
|
<h3>3.2 — Éditeur de plan (cadence + email)</h3>
|
|
<span class="tag">Desktop · App</span>
|
|
</div>
|
|
<div class="frame-body">
|
|
<div class="canvas">
|
|
<div class="device-desktop">
|
|
<div class="browser-bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><div class="url">app.rubis-sur-longle.fr/plans/standard-b2b</div></div>
|
|
<div class="app-shell">
|
|
<aside class="app-sidebar">
|
|
<div class="brand"><div class="gem"></div>Rubis</div>
|
|
<div class="stack stack-sm">
|
|
<div class="nav-item">Dashboard</div>
|
|
<div class="nav-item">Factures</div>
|
|
<div class="nav-item active">Plans de relance</div>
|
|
<div class="nav-item">Clients</div>
|
|
<div class="nav-item">Paramètres</div>
|
|
</div>
|
|
</aside>
|
|
<div class="app-main">
|
|
<div style="font-size: 11px; color: var(--ink-3);">← Plans · Standard B2B</div>
|
|
<div class="topbar">
|
|
<div>
|
|
<h3 style="margin: 0; font-size: 17px;">Standard B2B</h3>
|
|
<div style="font-size: 11px; color: var(--ink-3);">Plan par défaut · 18 factures actives</div>
|
|
</div>
|
|
<div class="row gap-sm">
|
|
<button class="btn btn-secondary btn-sm">Dupliquer</button>
|
|
<button class="btn btn-primary btn-sm">Enregistrer</button>
|
|
</div>
|
|
</div>
|
|
<div class="row gap-lg" style="align-items: flex-start;">
|
|
<!-- Cadence -->
|
|
<div style="flex: 1;">
|
|
<div style="font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px;">Cadence</div>
|
|
<div class="stack">
|
|
<div class="panel" style="border-left: 3px solid var(--ink);">
|
|
<div class="row row-between"><b style="font-size: 13px;">Étape 1 · J+3</b><span style="color: var(--ink-3); font-size: 12px;">Email</span></div>
|
|
<div class="bar bar-w-70" style="margin: 6px 0 0;"></div>
|
|
<div style="font-size: 11px; color: var(--ink-3); margin-top: 6px;">"Petit rappel facture F-XXXX"</div>
|
|
</div>
|
|
<div class="panel" style="border-left: 3px solid var(--ink);">
|
|
<div class="row row-between"><b style="font-size: 13px;">Étape 2 · J+10</b><span style="color: var(--ink-3); font-size: 12px;">Email</span></div>
|
|
<div class="bar bar-w-70" style="margin: 6px 0 0;"></div>
|
|
<div style="font-size: 11px; color: var(--ink-3); margin-top: 6px;">"Relance — facture en retard"</div>
|
|
</div>
|
|
<div class="panel" style="border-left: 3px solid var(--ink);">
|
|
<div class="row row-between"><b style="font-size: 13px;">Étape 3 · J+20</b><span style="color: var(--ink-3); font-size: 12px;">Email + brouillon</span></div>
|
|
<div class="bar bar-w-70" style="margin: 6px 0 0;"></div>
|
|
<div style="font-size: 11px; color: var(--ink-3); margin-top: 6px;">"Mise en demeure"</div>
|
|
</div>
|
|
<button class="btn btn-ghost btn-sm" style="width: 100%;">+ Ajouter une étape</button>
|
|
</div>
|
|
</div>
|
|
<!-- Email editor -->
|
|
<div style="flex: 1.4;">
|
|
<div style="font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px;">Email · étape 1 (J+3)</div>
|
|
<div class="panel">
|
|
<div class="input-label">Objet</div>
|
|
<div class="input filled">Petit rappel — facture {{numero}}</div>
|
|
<div class="input-label">Corps</div>
|
|
<div class="panel panel-fill" style="min-height: 160px; font-size: 12px; color: var(--ink-2); line-height: 1.6; padding: 14px;">
|
|
Bonjour {{prenom_client}},<br><br>
|
|
Je me permets un petit rappel concernant la facture <b>{{numero}}</b> d'un montant de <b>{{montant}}</b>, échue le <b>{{date_echeance}}</b>.<br><br>
|
|
Avez-vous reçu nos coordonnées de paiement ? Je reste disponible.<br><br>
|
|
Cordialement,<br>
|
|
{{signature}}
|
|
</div>
|
|
<div class="row gap-sm" style="margin-top: 8px; flex-wrap: wrap;">
|
|
<span class="chip">{{prenom_client}}</span>
|
|
<span class="chip">{{numero}}</span>
|
|
<span class="chip">{{montant}}</span>
|
|
<span class="chip">{{date_echeance}}</span>
|
|
<span class="chip">{{signature}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="annotation">
|
|
<strong>Intention</strong>
|
|
<ul>
|
|
<li><b>Cadence à gauche, contenu à droite</b> : on clique sur une étape pour éditer son email — pas de navigation pas-à-pas pénible.</li>
|
|
<li><b>Variables sous forme de chips</b> : l'utilisateur les insère sans connaître la syntaxe template ({{numero}}…). On peut même imaginer drag-to-insert.</li>
|
|
<li>Tonalité de chaque étape rappelée explicitement (rappel doux → ferme → mise en demeure) — le ton monte avec le retard, pas avant.</li>
|
|
<li>"Brouillon" en étape 3 : la mise en demeure est <b>générée mais pas envoyée auto</b> → règle métier importante (légal + risque de relation client).</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3.3 Quick attach 3 clicks -->
|
|
<div class="frame">
|
|
<div class="frame-head">
|
|
<h3>3.3 — Le parcours "3 clics" pour lancer une relance</h3>
|
|
<span class="tag">Storyboard · 3 étapes consécutives</span>
|
|
</div>
|
|
<div class="frame-body">
|
|
<div class="canvas">
|
|
<div style="display: flex; gap: 16px; align-items: flex-start; max-width: 100%; overflow-x: auto;">
|
|
<!-- Click 1 -->
|
|
<div style="flex: 0 0 240px;">
|
|
<div style="font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;">Clic 1 · drop</div>
|
|
<div class="panel" style="padding: 12px; min-height: 220px;">
|
|
<div class="dropzone" style="padding: 24px 12px;">
|
|
<div style="font-size: 22px; color: var(--ink);">↓</div>
|
|
<div style="font-size: 11px; margin-top: 4px;">facture-0042.pdf</div>
|
|
</div>
|
|
<div style="font-size: 10.5px; color: var(--ink-3); margin-top: 8px; text-align: center;">Glisser-déposer</div>
|
|
</div>
|
|
</div>
|
|
<div style="font-size: 22px; color: var(--ink-3); align-self: center;">→</div>
|
|
<!-- Click 2 -->
|
|
<div style="flex: 0 0 240px;">
|
|
<div style="font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;">Clic 2 · valider OCR</div>
|
|
<div class="panel" style="padding: 12px; min-height: 220px;">
|
|
<div class="bar bar-w-50 bar-mid"></div>
|
|
<div class="bar bar-w-70"></div>
|
|
<div class="bar bar-w-60"></div>
|
|
<div style="height: 6px;"></div>
|
|
<div class="input-label">Plan</div>
|
|
<div class="input filled" style="font-size: 11px; padding: 6px 8px;">Standard B2B ▾</div>
|
|
<div style="text-align: right; margin-top: 6px;">
|
|
<button class="btn btn-primary btn-sm" style="font-size: 10.5px;">Valider</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="font-size: 22px; color: var(--ink-3); align-self: center;">→</div>
|
|
<!-- Click 3 -->
|
|
<div style="flex: 0 0 240px;">
|
|
<div style="font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;">Clic 3 · lancer</div>
|
|
<div class="panel" style="padding: 12px; min-height: 220px;">
|
|
<div style="text-align: center; padding: 14px 0;">
|
|
<div style="font-size: 28px;">◆</div>
|
|
<div style="font-size: 12px; font-weight: 600; margin-top: 6px;">+ 1 rubis gagné</div>
|
|
<div style="font-size: 11px; color: var(--ink-3); margin-top: 4px;">~12 min libérées</div>
|
|
</div>
|
|
<div style="font-size: 11px; color: var(--ink-2); border-top: 1px solid var(--line-2); padding-top: 8px;">Relance J+3 programmée pour le <b>08/05/2026</b>.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="annotation">
|
|
<strong>Intention</strong>
|
|
<ul>
|
|
<li>Ce <b>storyboard est la promesse de la landing</b> — c'est l'illustration à reprendre dans le hero.</li>
|
|
<li>Le 3<sup>ème</sup> écran = <b>récompense visuelle immédiate</b> (rubis gagné, temps libéré). C'est ce qui transforme une corvée en moment satisfaisant et déclenche le "bookmark dans le cerveau" qui fait revenir.</li>
|
|
<li>Au-delà de la 1<sup>ère</sup> facture, le drag&drop multiple permet 20 factures en 3 clics globaux — à mettre en avant côté pricing/conviction.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- 4. DASHBOARD & RUBIS -->
|
|
<!-- ============================================================== -->
|
|
<section class="group" id="dashboard">
|
|
<h2>4 · Dashboard & rubis</h2>
|
|
|
|
<!-- 4.1 Main dashboard -->
|
|
<div class="frame">
|
|
<div class="frame-head">
|
|
<h3>4.1 — Dashboard principal</h3>
|
|
<span class="tag">Desktop · App · Page d'accueil après login</span>
|
|
</div>
|
|
<div class="frame-body">
|
|
<div class="canvas">
|
|
<div class="device-desktop">
|
|
<div class="browser-bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><div class="url">app.rubis-sur-longle.fr/</div></div>
|
|
<div class="app-shell">
|
|
<aside class="app-sidebar">
|
|
<div class="brand"><div class="gem"></div>Rubis</div>
|
|
<div class="stack stack-sm">
|
|
<div class="nav-item active">Dashboard</div>
|
|
<div class="nav-item">Factures</div>
|
|
<div class="nav-item">Plans de relance</div>
|
|
<div class="nav-item">Clients</div>
|
|
<div class="nav-item">Paramètres</div>
|
|
</div>
|
|
</aside>
|
|
<div class="app-main">
|
|
<div class="topbar">
|
|
<div>
|
|
<h3 style="margin: 0; font-size: 17px;">Bonjour Arthur 👋</h3>
|
|
<div style="font-size: 12px; color: var(--ink-3);">Mardi 5 mai 2026</div>
|
|
</div>
|
|
<div class="row gap-sm">
|
|
<button class="btn btn-secondary btn-sm">+ Saisir</button>
|
|
<button class="btn btn-primary btn-sm">+ Importer factures</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero rubis -->
|
|
<div class="panel" style="display: flex; gap: 24px; align-items: center; padding: 20px;">
|
|
<div style="flex: 0 0 80px; text-align: center;">
|
|
<div style="font-size: 36px; line-height: 1;">◆</div>
|
|
<div style="font-size: 11px; color: var(--ink-3); margin-top: 4px;">RUBIS</div>
|
|
</div>
|
|
<div class="grow">
|
|
<div style="font-size: 22px; font-weight: 600;">124 rubis gagnés ce mois</div>
|
|
<div style="font-size: 12px; color: var(--ink-2); margin-top: 4px;">≈ <b>24 h 48 min</b> que vous n'avez pas passées à relancer vos clients. Vous êtes dans le top <b>15 %</b> des utilisateurs ce mois-ci.</div>
|
|
</div>
|
|
<div>
|
|
<div class="bar bar-w-90" style="height: 6px; margin: 0;"></div>
|
|
<div style="font-size: 10.5px; color: var(--ink-3); margin-top: 4px;">Objectif mensuel · 80 %</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPIs -->
|
|
<div class="row gap-md">
|
|
<div class="stat">
|
|
<div class="label">À relancer</div>
|
|
<div class="value">8</div>
|
|
<div class="delta">3 nouvelles aujourd'hui</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="label">En cours de relance</div>
|
|
<div class="value">11</div>
|
|
<div class="delta">2 mises en demeure à valider</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="label">Encaissé ce mois</div>
|
|
<div class="value">14 320 €</div>
|
|
<div class="delta">+ 2 800 € vs avril</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="label">DSO moyen</div>
|
|
<div class="value">38 j</div>
|
|
<div class="delta">↘ -6j depuis Rubis</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Two column -->
|
|
<div class="row gap-lg" style="align-items: flex-start;">
|
|
<div class="panel" style="flex: 1.2;">
|
|
<div style="font-size: 12px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px;">Aujourd'hui</div>
|
|
<div class="stack stack-sm" style="font-size: 12px;">
|
|
<div class="row row-between"><span>📤 Relance J+3 envoyée à <b>Atelier Durand</b></span><span style="color: var(--ink-3);">11:14</span></div>
|
|
<div class="row row-between"><span>✓ Facture <b>F-2024-0035</b> marquée encaissée</span><span style="color: var(--ink-3);">10:02</span></div>
|
|
<div class="row row-between"><span>📥 3 factures importées et OCRisées</span><span style="color: var(--ink-3);">09:48</span></div>
|
|
<div class="row row-between"><span>⚠️ Brouillon mise en demeure prêt — <b>Cabinet Rousseau</b></span><span style="color: var(--ink-3);">09:30</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="panel" style="flex: 1;">
|
|
<div class="row row-between" style="margin-bottom: 10px;">
|
|
<div style="font-size: 12px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em;">Top mauvais payeurs</div>
|
|
<span style="font-size: 11px; color: var(--ink-3);">Voir tout</span>
|
|
</div>
|
|
<div class="stack stack-sm" style="font-size: 12px;">
|
|
<div class="row row-between"><span>Cabinet Rousseau</span><span><b>2</b> retards</span></div>
|
|
<div class="row row-between"><span>Atelier Durand</span><span><b>2</b> retards</span></div>
|
|
<div class="row row-between"><span>Garage Lemoine</span><span><b>1</b> retard</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="annotation">
|
|
<strong>Intention</strong>
|
|
<ul>
|
|
<li><b>La hero du dashboard, c'est le rubis</b> — pas un graphique financier. Le message émotionnel passe avant les chiffres comptables.</li>
|
|
<li><b>Conversion rubis → heures gagnées</b> verbalisée ("≈ 24h48 que vous n'avez pas passées…") : on rend la métaphore tangible.</li>
|
|
<li>4 KPIs scannables, dont le <b>DSO</b> (Days Sales Outstanding) : on parle le langage du dirigeant et on prouve la valeur en €.</li>
|
|
<li>Liste "Aujourd'hui" en mode <b>journal d'activité</b> : ce qui s'est passé pendant que l'utilisateur faisait son vrai travail.</li>
|
|
<li>"Top mauvais payeurs" doit être manié avec tact — c'est utile pour décider qui mettre sur plan ferme, mais on évite tout langage stigmatisant côté UI publique (jamais visible côté client).</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4.2 Invoice detail -->
|
|
<div class="frame">
|
|
<div class="frame-head">
|
|
<h3>4.2 — Détail facture · timeline des relances</h3>
|
|
<span class="tag">Desktop · App</span>
|
|
</div>
|
|
<div class="frame-body">
|
|
<div class="canvas">
|
|
<div class="device-desktop">
|
|
<div class="browser-bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><div class="url">app.rubis-sur-longle.fr/factures/F-2024-0039</div></div>
|
|
<div style="padding: 24px 28px; min-height: 480px;">
|
|
<div style="font-size: 11px; color: var(--ink-3); margin-bottom: 4px;">← Factures</div>
|
|
<div class="row row-between" style="margin-bottom: 18px;">
|
|
<div>
|
|
<h3 style="margin: 0; font-size: 18px;">Atelier Durand · F-2024-0039</h3>
|
|
<div style="font-size: 12px; color: var(--ink-3); margin-top: 4px;">3 600,00 € · échue le 02/05/2026 (J+3)</div>
|
|
</div>
|
|
<div class="row gap-sm">
|
|
<button class="btn btn-secondary btn-sm">Marquer encaissée</button>
|
|
<button class="btn btn-secondary btn-sm">Modifier le plan ▾</button>
|
|
<button class="btn btn-primary btn-sm">Relancer maintenant</button>
|
|
</div>
|
|
</div>
|
|
<div class="row gap-lg" style="align-items: flex-start;">
|
|
<!-- Timeline -->
|
|
<div style="flex: 1.4;">
|
|
<div style="font-size: 12px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 14px;">Timeline · plan Standard B2B</div>
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<div class="when">02/04/2026 · facture émise</div>
|
|
<div class="what">Importée · OCR validée</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="when">05/05/2026 · J+3 — Étape 1</div>
|
|
<div class="what"><b>Email envoyé</b> · "Petit rappel — facture F-2024-0039" · ouvert 2x</div>
|
|
</div>
|
|
<div class="timeline-item future">
|
|
<div class="when">12/05/2026 · J+10 — Étape 2</div>
|
|
<div class="what" style="color: var(--ink-3);">Email programmé · "Relance — facture en retard"</div>
|
|
</div>
|
|
<div class="timeline-item future">
|
|
<div class="when">22/05/2026 · J+20 — Étape 3</div>
|
|
<div class="what" style="color: var(--ink-3);">Brouillon mise en demeure (validation manuelle requise)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Side panel -->
|
|
<div style="flex: 1;">
|
|
<div class="panel" style="margin-bottom: 12px;">
|
|
<div style="font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px;">Client</div>
|
|
<div style="font-size: 13px; font-weight: 600;">Atelier Durand</div>
|
|
<div style="font-size: 12px; color: var(--ink-2);">contact@atelier-durand.fr</div>
|
|
<div style="font-size: 11px; color: var(--ink-3); margin-top: 6px;">2 retards sur 6 factures</div>
|
|
</div>
|
|
<div class="panel">
|
|
<div style="font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px;">Notes internes</div>
|
|
<div class="input" style="min-height: 70px;">Le client a confirmé la réception le 14/04 par téléphone…</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="annotation">
|
|
<strong>Intention</strong>
|
|
<ul>
|
|
<li><b>Une seule colonne timeline</b> qui mélange passé (plein) et futur (estompé) — l'utilisateur voit tout l'arc de la relance.</li>
|
|
<li><b>Tracking d'ouverture</b> ("ouvert 2x") : preuve sociale interne — le client n'ignore pas, il temporise.</li>
|
|
<li>Bouton <b>"Relancer maintenant"</b> en CTA : permet une relance manuelle hors cadence (cas réel : appel suivi d'un email).</li>
|
|
<li><b>Notes internes</b> en libre — capital pour les TPE qui ont des relations clients personnelles ("le gérant est en arrêt jusqu'au 20").</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4.3 Mobile dashboard -->
|
|
<div class="frame">
|
|
<div class="frame-head">
|
|
<h3>4.3 — Dashboard mobile</h3>
|
|
<span class="tag">Mobile · App · iOS/Android web</span>
|
|
</div>
|
|
<div class="frame-body">
|
|
<div class="canvas">
|
|
<div class="device-mobile">
|
|
<div class="notch"><span>9:41</span><span>● ● ●</span></div>
|
|
<div class="screen">
|
|
<div style="padding: 14px;">
|
|
<div class="row row-between" style="margin-bottom: 12px;">
|
|
<div class="brand"><div class="gem"></div>Rubis</div>
|
|
<div style="width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%;"></div>
|
|
</div>
|
|
<!-- Hero rubis -->
|
|
<div class="panel" style="text-align: center; padding: 16px;">
|
|
<div style="font-size: 28px;">◆</div>
|
|
<div style="font-size: 19px; font-weight: 600; margin-top: 4px;">124 rubis</div>
|
|
<div style="font-size: 11px; color: var(--ink-2); margin-top: 4px;">≈ 24h48 libérées ce mois</div>
|
|
<div class="bar bar-w-80" style="margin: 12px auto 4px; height: 5px;"></div>
|
|
<div style="font-size: 10px; color: var(--ink-3);">Top 15 % · objectif 80 %</div>
|
|
</div>
|
|
<!-- Quick actions -->
|
|
<div class="row gap-sm" style="margin-top: 12px;">
|
|
<button class="btn btn-primary btn-sm" style="flex: 1; padding: 10px;">+ Photo de facture</button>
|
|
<button class="btn btn-secondary btn-sm" style="flex: 1; padding: 10px;">+ Saisir</button>
|
|
</div>
|
|
<!-- KPI -->
|
|
<div class="row gap-sm" style="margin-top: 12px;">
|
|
<div class="stat" style="padding: 10px;">
|
|
<div class="label" style="font-size: 9.5px;">À relancer</div>
|
|
<div class="value" style="font-size: 17px;">8</div>
|
|
</div>
|
|
<div class="stat" style="padding: 10px;">
|
|
<div class="label" style="font-size: 9.5px;">Encaissé</div>
|
|
<div class="value" style="font-size: 17px;">14 320 €</div>
|
|
</div>
|
|
</div>
|
|
<!-- List -->
|
|
<div style="margin-top: 14px;">
|
|
<div style="font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;">Aujourd'hui</div>
|
|
<div class="stack stack-sm" style="font-size: 11.5px;">
|
|
<div class="panel" style="padding: 10px;">📤 Relance envoyée · Atelier Durand</div>
|
|
<div class="panel" style="padding: 10px;">⚠️ Brouillon prêt · Cabinet Rousseau</div>
|
|
<div class="panel" style="padding: 10px;">✓ F-2024-0035 encaissée</div>
|
|
</div>
|
|
</div>
|
|
<!-- Tab bar -->
|
|
<div style="margin: 18px -14px -8px; border-top: 1px solid var(--line-2); padding: 10px 0; display: flex; justify-content: space-around; font-size: 10px; color: var(--ink-3); background: var(--fill-2);">
|
|
<span style="color: var(--ink); font-weight: 600;">◆ Accueil</span>
|
|
<span>📄 Factures</span>
|
|
<span>📋 Plans</span>
|
|
<span>⚙ Réglages</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="annotation">
|
|
<strong>Intention</strong>
|
|
<ul>
|
|
<li><b>Mobile = mode "capture rapide"</b> : l'action mise en avant est "+ Photo de facture" (l'OCR fait le reste). La saisie complète, c'est plutôt sur desktop.</li>
|
|
<li><b>Le rubis reste au centre</b> — c'est l'identité visuelle de l'app. Sur mobile c'est encore plus émotionnel parce que l'écran est plus petit, donc plus focus.</li>
|
|
<li>Tab bar à 4 entrées max — on ne dilue pas la navigation. Pas de "Clients" en mobile, on y accède depuis une facture.</li>
|
|
<li>L'écran tient en <b>1 scroll</b> sur la plupart des téléphones → pas besoin de tab "détail" séparée.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- NOTES -->
|
|
<!-- ============================================================== -->
|
|
<section id="notes" class="notes">
|
|
<h3>Notes & questions à trancher avant la passe mid-fi</h3>
|
|
<ul>
|
|
<li><b>Brand visual</b> — la "gem" carrée ◆ est un placeholder. Direction à valider : losange à facettes (joaillerie), goutte (rubis brut), ou typographique pur (un "R" stylisé) ? Conditionne tout le design system.</li>
|
|
<li><b>Conversion rubis ↔ temps</b> — j'ai posé 1 rubis ≈ 12 min libérées. À ajuster avec une étude rapide (combien de temps prend en moyenne une relance manuelle ?). Cette conversion est marketing-critique.</li>
|
|
<li><b>SMS</b> — présent dans le plan "Premium". À confirmer pour le MVP : feature payante ou hors scope v1 ? Influence l'écran 3.1 et le pricing.</li>
|
|
<li><b>Mise en demeure</b> — j'ai imposé une <b>validation manuelle</b> à l'étape ferme. À discuter : conformité légale + on ne veut pas être responsables d'un envoi auto qui casse une relation client.</li>
|
|
<li><b>Multi-utilisateurs</b> — pas dessiné. À prévoir pour PME (gérant + comptable) ? Impact sur l'onboarding (wizard "inviter l'équipe") et sur le sidebar.</li>
|
|
<li><b>Intégration banking / réconciliation auto</b> — un client paie, l'app le détecte et arrête la relance. C'est la fonctionnalité "magique" suivante. Pas dans ce MVP mais à garder en tête côté architecture.</li>
|
|
<li><b>Le 3<sup>ème</sup> clic</b> — dans le storyboard 3.3, l'utilisateur clique "Valider" puis voit l'écran de récompense. C'est techniquement 2 clics utilisateurs (drop + valider) ; le 3<sup>ème</sup> "clic" est implicite (le clic sur le PDF dans le finder). À vérifier qu'on tient la promesse "3 clics" pour <em>20 factures d'un coup</em>, pas seulement 1.</li>
|
|
</ul>
|
|
</section>
|
|
|
|
</main>
|
|
</body>
|
|
</html>
|