SPB Git forge
spboucher.ai ↗

spb/api-ka

Public

API-KA — plateforme centrale : collecte quotidienne des 8 services KA, historisation append-only et API publique sur www.api-ka.com

fastapipostgresqlagregationka
48commits 1branches 0releases
5.9 MBsize
maindefault branch
19 days agolast push
Python 60.9% HTML 21% TypeScript 7.3% JavaScript 5.2% CSS 4.8% Shell 0.8%

frontend: refonte éditoriale v2 (typo géante, brush, live-line, filets)

Aligne les pages web (accueil, stats, contact) sur la nouvelle DA
lou-ka/vrai-prix : héro typographique, .hl convertis en soulignés
brush SVG indigo, live-line mono + filets à la place des stat-chips,
grilles magazine en hairlines au lieu des cartes à ombres dures,
KPI/records à filet, tableaux à en-tête éditorial. Terminal santé
borné (max-height + scroll) et fix min-content de la grille héro.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Simon-Pierre Boucher committed 29 days ago (Aug 26, 2026) parent 0e78a3a

3 changed files +112 −5

modified src/api/web/contact.html +17 −0
@@ -102,6 +102,23 @@ section{padding:64px 0}
102 102 .ka-mnav-foot{flex:none;border-top:2px solid var(--ink);padding:16px 24px;
103 103 padding-bottom:max(20px,env(safe-area-inset-bottom))}
104 104 html.ka-menu-locked,html.ka-menu-locked body{overflow:hidden}
105 +
106 +/* ============================================================================
107 + KA ÉDITORIAL v2 (2026-08-25) — aligné sur la refonte lou-ka / vrai-prix :
108 + typo géante, soulignés « brush » SVG, colonnes à filet au lieu des boîtes.
109 + Bloc en FIN de style : surcharge la v1 sans toucher au markup.
110 + ========================================================================= */
111 +:root{--hairline:rgba(20,24,20,.14);--hairline-strong:rgba(20,24,20,.6)}
112 +
113 +.hl{background:transparent;color:inherit;border-radius:0;transform:none;position:relative;display:inline-block;padding:0 .06em;z-index:0}
114 +.hl::after{content:"";position:absolute;left:-3%;right:-3%;bottom:.05em;height:.34em;z-index:-1;transform:rotate(-.6deg);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26' preserveAspectRatio='none'%3E%3Cpath d='M5 17 C 60 8, 118 21, 168 13 S 258 10, 295 15' fill='none' stroke='%233b5bdb' stroke-width='11' stroke-linecap='round' opacity='.4'/%3E%3C/svg%3E") no-repeat center/100% 100%}
115 +
116 +.hero-c{background:var(--paper);border-bottom:1px solid var(--hairline-strong)}
117 +.hero-c h1{max-width:820px;font-size:clamp(38px,5.4vw,68px);line-height:1.03;letter-spacing:-.045em}
118 +
119 +.contact-grid{gap:30px 34px}
120 +.contact-card,.contact-card.card{background:transparent;border:0;border-radius:0;box-shadow:none;border-top:2px solid var(--ink);padding:18px 0 0}
121 +.account{background:transparent;border:0;border-radius:0;box-shadow:none;border-top:1px solid var(--hairline-strong);padding:28px 0 0}
105 122 </style>
106 123 <link rel="canonical" href="https://www.api-ka.com/contact">
107 124 <link rel="alternate" hreflang="fr-ca" href="https://www.api-ka.com/contact">
modified src/api/web/index.html +54 −5
@@ -200,6 +200,54 @@ pre{margin:0;background:var(--ink);color:var(--paper);padding:16px 18px;overflow
200 200 .ka-mnav-foot{flex:none;border-top:2px solid var(--ink);padding:16px 24px;
201 201 padding-bottom:max(20px,env(safe-area-inset-bottom))}
202 202 html.ka-menu-locked,html.ka-menu-locked body{overflow:hidden}
203 +
204 +/* ============================================================================
205 + KA ÉDITORIAL v2 (2026-08-25) — aligné sur la refonte lou-ka / vrai-prix :
206 + typo géante, soulignés « brush » SVG, données vivantes en mono + filets,
207 + grilles magazine en hairlines. Bloc volontairement en FIN de style : il
208 + surcharge la v1 « boîtes + ombres dures » sans toucher au markup existant.
209 + ========================================================================= */
210 +:root{--hairline:rgba(20,24,20,.14);--hairline-strong:rgba(20,24,20,.6)}
211 +
212 +/* .hl : la pastille tournée devient un souligné brush irrégulier (indigo) */
213 +.hl{background:transparent;color:inherit;border-radius:0;transform:none;position:relative;display:inline-block;padding:0 .06em;z-index:0}
214 +.hl::after{content:"";position:absolute;left:-3%;right:-3%;bottom:.05em;height:.34em;z-index:-1;transform:rotate(-.6deg);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26' preserveAspectRatio='none'%3E%3Cpath d='M5 17 C 60 8, 118 21, 168 13 S 258 10, 295 15' fill='none' stroke='%233b5bdb' stroke-width='11' stroke-linecap='round' opacity='.4'/%3E%3C/svg%3E") no-repeat center/100% 100%}
215 +
216 +/* héro : composition typographique pleine page, plus de bande teintée */
217 +.hero{border-bottom:1px solid var(--hairline-strong);background:var(--paper);padding:64px 0 72px}
218 +.hero-grid{align-items:start}
219 +/* piège min-content : la live-line nowrap ne doit pas gonfler la colonne */
220 +.hero-grid > *{min-width:0}
221 +.hero h1{max-width:960px;font-size:clamp(38px,4.6vw,64px);line-height:1.02;letter-spacing:-.045em}
222 +.hero-tile{transform:none;box-shadow:var(--shadow-off-mid)}
223 +.hero-tile .tile-body{max-height:420px;overflow:auto;overscroll-behavior:contain}
224 +
225 +/* ligne de données vivantes (remplace les stat-chips) */
226 +.live-line{display:flex;flex-wrap:wrap;align-items:baseline;margin-top:32px;font-family:var(--font-mono);font-size:12px;color:var(--ink-2);letter-spacing:.02em;row-gap:10px}
227 +.live-flag{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);padding-right:14px;margin-right:14px;border-right:1px solid var(--hairline-strong)}
228 +.live-line .pulse{width:7px;height:7px}
229 +.live-item{padding-right:14px;margin-right:14px;border-right:1px solid var(--hairline)}
230 +.live-item:last-child{border-right:0;margin-right:0;padding-right:0}
231 +.live-item b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
232 +@media(max-width:640px){.live-line{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap;margin-right:-16px;padding-right:16px}.live-line::-webkit-scrollbar{display:none}}
233 +
234 +/* sections : filets fins, plus de bandes alternées bordées d'encre */
235 +section{border-top:1px solid var(--hairline-strong)}
236 +section.alt{background:transparent;border-bottom:0}
237 +
238 +/* grilles magazine : les cartes deviennent des colonnes à filet */
239 +.svc-grid{gap:30px 34px}
240 +.svc.card{background:transparent;border:0;border-radius:0;box-shadow:none;border-top:2px solid var(--ink);padding:16px 0 0}
241 +.svc.card-hover:hover{transform:none;box-shadow:none}
242 +.svc b{font-size:30px}
243 +.ep.card{background:transparent;border:0;border-radius:0;box-shadow:none;border-top:1px solid var(--hairline-strong);padding:26px 0 30px;margin-bottom:0}
244 +#ep-list{border-bottom:1px solid var(--hairline-strong)}
245 +.conv-grid{gap:30px 34px}
246 +.conv.card{background:transparent;border:0;border-radius:0;box-shadow:none;border-top:2px solid var(--ink);padding:16px 0 0}
247 +.try{background:transparent;border-color:var(--hairline-strong)}
248 +.try:hover{background:var(--accent);border-color:var(--accent)}
249 +.pg{border-width:1px;border-color:var(--hairline-strong);box-shadow:none;background:transparent}
250 +.live-chip{border-width:1px;border-color:var(--hairline-strong);background:transparent}
203 251 </style>
204 252 <link rel="canonical" href="https://www.api-ka.com/">
205 253 <link rel="alternate" hreflang="fr-ca" href="https://www.api-ka.com/">
@@ -269,11 +317,12 @@ html.ka-menu-locked,html.ka-menu-locked body{overflow:hidden}
269 317 <a class="btn btn-primary" href="#playground">Essayer le playground</a>
270 318 <a class="btn btn-ghost" href="/docs">Documentation Swagger</a>
271 319 </div>
272 − <div class="stat-chips">
273 − <span class="stat-chip"><b>8</b> services collectés</span>
274 − <span class="stat-chip"><b id="f-records">…</b> enregistrements</span>
275 − <span class="stat-chip">collecte quotidienne <b>02:00</b></span>
276 − <span class="stat-chip">dernière collecte <b id="f-last">…</b></span>
320 + <div class="live-line">
321 + <span class="live-flag"><span class="pulse ok"></span> en direct</span>
322 + <span class="live-item"><b>8</b> services collectés</span>
323 + <span class="live-item"><b id="f-records">…</b> enregistrements</span>
324 + <span class="live-item">collecte quotidienne <b>02:00</b></span>
325 + <span class="live-item">dernière collecte <b id="f-last">…</b></span>
277 326 </div>
278 327 </div>
279 328 <div class="hero-tile reveal">
modified src/api/web/stats.html +41 −0
@@ -247,6 +247,47 @@ table.dt tbody tr:nth-child(even){background:var(--surface-2)}
247 247 .ka-mnav-foot{flex:none;border-top:2px solid var(--ink);padding:16px 24px;
248 248 padding-bottom:max(20px,env(safe-area-inset-bottom))}
249 249 html.ka-menu-locked,html.ka-menu-locked body{overflow:hidden}
250 +
251 +/* ============================================================================
252 + KA ÉDITORIAL v2 (2026-08-25) — aligné sur la refonte lou-ka / vrai-prix :
253 + typo géante, soulignés « brush » SVG, tuiles KPI à filet (zéro boîte),
254 + cartes de graphique en hairline. Bloc en FIN de style : surcharge la v1.
255 + ========================================================================= */
256 +:root{--hairline:rgba(20,24,20,.14);--hairline-strong:rgba(20,24,20,.6)}
257 +
258 +/* .hl : souligné brush irrégulier au lieu de la pastille tournée */
259 +.hl{background:transparent;color:inherit;border-radius:0;transform:none;position:relative;display:inline-block;padding:0 .06em;z-index:0}
260 +.hl::after{content:"";position:absolute;left:-3%;right:-3%;bottom:.05em;height:.34em;z-index:-1;transform:rotate(-.6deg);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26' preserveAspectRatio='none'%3E%3Cpath d='M5 17 C 60 8, 118 21, 168 13 S 258 10, 295 15' fill='none' stroke='%233b5bdb' stroke-width='11' stroke-linecap='round' opacity='.4'/%3E%3C/svg%3E") no-repeat center/100% 100%}
261 +
262 +/* entête : composition typographique, plus de bande teintée */
263 +.hero-s{background:var(--paper);border-bottom:1px solid var(--hairline-strong)}
264 +.hero-s h1{max-width:860px;font-size:clamp(38px,5.4vw,68px);line-height:1.03;letter-spacing:-.045em}
265 +
266 +/* cartes : hairline discrète au lieu de l'encre + ombre décalée */
267 +.card{background:var(--surface);border:1px solid var(--hairline-strong);box-shadow:none}
268 +.card-hover:hover{transform:none;box-shadow:none}
269 +
270 +/* KPI et jauges : tuiles magazine à filet, zéro boîte */
271 +.kpi-grid{gap:24px 30px;margin-bottom:34px}
272 +.kpi.card,.kpi{background:transparent;border:0;border-radius:0;border-top:2px solid var(--ink);padding:14px 2px 0}
273 +.kpi .v{font-size:clamp(26px,2.8vw,38px);letter-spacing:-.03em}
274 +.gauge-grid{gap:24px 30px}
275 +.gauge.card,.gauge{background:transparent;border:0;border-radius:0;border-top:2px solid var(--ink)}
276 +
277 +/* chips et périodes : filets légers */
278 +.chip{border-width:1px;border-color:var(--hairline-strong);background:transparent}
279 +.periods .chip{border-width:1px;border-color:var(--hairline-strong)}
280 +.periods .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
281 +
282 +/* tableaux : en-tête éditorial (filet d'encre, plus de bandeau inversé) */
283 +table.dt th{background:transparent;color:var(--ink-3);border-bottom:1.5px solid var(--ink)}
284 +
285 +/* records : lignes à filet */
286 +.record{background:transparent;border:0;border-radius:0;border-top:1px solid var(--hairline-strong);padding:12px 2px 0}
287 +.records-grid{gap:20px 28px}
288 +
289 +/* sections rythmées par des filets */
290 +section + section{border-top:1px solid var(--hairline)}
250 291 </style>
251 292 <link rel="canonical" href="https://www.api-ka.com/stats">
252 293 <link rel="alternate" hreflang="fr-ca" href="https://www.api-ka.com/stats">
253 294