polish(marketing): refonte HYPER PRO 'Comment ça marche' — purge non-brand hex + uniformization typo/spacing
Refactor mécanique strict : - Purge 100% des hex non-brand (#0891b2, #a21caf, #e879f9, #1d4ed8, #9333ea, #f5d0fe, #67e8f9, #1e40af, #93c5fd, #9CA3AF, #0e7490, #EF4444 capital) → mapping vers brand-b1/b2/b3 - Standardisation tailles : 0 inline font-size, text-[9px/10px/11px] uniquement (purge 5.5/6/6.5/7/7.5/8/8.5 arbitraires) - 0 font-family inline (utilise font-sans/font-mono Tailwind) Polish device : - Inner screen seam (effet "écran encastré dans bezel") - Notch : intègre speaker grille 3 dots + camera dot dans la dynamic island - Status bar : vraie batterie 80% fill, vrai WiFi 3 arcs concentriques + dot, signal 4 bars croissantes - Logo DictIA 92×28 plus grand (opacité 85%) Polish modes : - Mode 1 : header compact mic+filename+REC, waveform 16 bars symétriques, file card MP3 redesign avec corner fold - Mode 2 : avatars empilés 18×18 avec bordure white/15, bubbles max-width 80%, timestamps text-[9px] - Mode 3 : grille langues text-[10px] line-height 18px, padding 8px, palette stricte b1/b2/b3 - Mode 4 : grid 4×2 cards 42×50, drop staggered 90ms, palette stricte b1/b2/b3 + dc2626 PDF + 374151 TXT - Mode 5 : header counter Inter font-black text-base, connecting lines opacité 0.18 - Mode 6 : breadcrumb compact, toolbar 4 icons, hover row highlight, palette b1/b2/b3 - Mode 0 : chat bubbles uniformisés text-[10px], footer shield emerald (sécurité) Polish right panel IA : - Brain 40×40 cercle gradient brand-b3 (déjà OK) - Badges Mistral 7B (b3 bg) + LOCAL (emerald bg) - 3 metrics : 0ms grad-text · 100% emerald · 24/7 grad-text font-black text-lg - Sovereignty bullets : icon dans cercle 20×20 rounded-full bg-brand-b3/[0.15] - Padding p-5 généreux Polish feature info card sous phone : - Background uniforme bg-white/[0.06] + border-white/[0.10] - Border-left 3px accent activeColor (style tab indicator) - Icon container 32×32 rounded-md - Badge top-right text-[10px] tracking-wider Polish bottom tab bar : - Buttons 34×42, gap-1 serré - Active : bottom border 2px + scale icon 1.15 + drop-shadow color - Labels text-[9px] uppercase tracking-wider - AUTO pill : px-2.5 py-0.5 rounded-full bg-emerald/12 Tests : - +6 assertions polish (forbidden hex purge, screen seam, white/0.06, brand-b3/[0.15], grad-text) - 9/9 fonctionnalites tests pass - 29/29 marketing tests pass (2 conformite failures pré-existantes baseline) Build : npm run build:css → static/css/marketing.css régénéré pour les nouvelles classes arbitraires Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Allison
@@ -363,6 +363,12 @@
|
||||
.-inset-1 {
|
||||
inset: calc(var(--spacing) * -1);
|
||||
}
|
||||
.-inset-2 {
|
||||
inset: calc(var(--spacing) * -2);
|
||||
}
|
||||
.-inset-3 {
|
||||
inset: calc(var(--spacing) * -3);
|
||||
}
|
||||
.inset-0 {
|
||||
inset: calc(var(--spacing) * 0);
|
||||
}
|
||||
@@ -525,6 +531,9 @@
|
||||
.left-0\.5 {
|
||||
left: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
.left-1\.5 {
|
||||
left: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.left-1\/2 {
|
||||
left: calc(1 / 2 * 100%);
|
||||
}
|
||||
@@ -771,6 +780,9 @@
|
||||
.ml-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
.ml-px {
|
||||
margin-left: 1px;
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
@@ -984,9 +996,6 @@
|
||||
.min-h-\[110px\] {
|
||||
min-height: 110px;
|
||||
}
|
||||
.min-h-\[480px\] {
|
||||
min-height: 480px;
|
||||
}
|
||||
.min-h-\[calc\(100vh-62px\)\] {
|
||||
min-height: calc(100vh - 62px);
|
||||
}
|
||||
@@ -1143,9 +1152,6 @@
|
||||
.max-w-\[300px\] {
|
||||
max-width: 300px;
|
||||
}
|
||||
.max-w-\[320px\] {
|
||||
max-width: 320px;
|
||||
}
|
||||
.max-w-\[820px\] {
|
||||
max-width: 820px;
|
||||
}
|
||||
@@ -1248,10 +1254,6 @@
|
||||
--tw-translate-y: calc(var(--spacing) * 0);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
}
|
||||
.translate-y-1 {
|
||||
--tw-translate-y: calc(var(--spacing) * 1);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
}
|
||||
.translate-y-2 {
|
||||
--tw-translate-y: calc(var(--spacing) * 2);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
@@ -1376,6 +1378,12 @@
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.content-center {
|
||||
align-content: center;
|
||||
}
|
||||
.content-start {
|
||||
align-content: flex-start;
|
||||
}
|
||||
.items-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
@@ -1403,6 +1411,12 @@
|
||||
.justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.justify-items-center {
|
||||
justify-items: center;
|
||||
}
|
||||
.gap-0 {
|
||||
gap: calc(var(--spacing) * 0);
|
||||
}
|
||||
.gap-0\.5 {
|
||||
gap: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
@@ -1514,6 +1528,10 @@
|
||||
-moz-column-gap: calc(var(--spacing) * 6);
|
||||
column-gap: calc(var(--spacing) * 6);
|
||||
}
|
||||
.gap-x-8 {
|
||||
-moz-column-gap: calc(var(--spacing) * 8);
|
||||
column-gap: calc(var(--spacing) * 8);
|
||||
}
|
||||
.space-x-1 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-x-reverse: 0;
|
||||
@@ -1555,6 +1573,9 @@
|
||||
.gap-y-2 {
|
||||
row-gap: calc(var(--spacing) * 2);
|
||||
}
|
||||
.gap-y-3 {
|
||||
row-gap: calc(var(--spacing) * 3);
|
||||
}
|
||||
.divide-y {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-divide-y-reverse: 0;
|
||||
@@ -1655,6 +1676,10 @@
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 2px;
|
||||
}
|
||||
.border-\[1\.5px\] {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1.5px;
|
||||
}
|
||||
.border-\[3px\] {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 3px;
|
||||
@@ -1797,6 +1822,9 @@
|
||||
.border-brand-b3\/20 {
|
||||
border-color: color-mix(in oklab, #c026d3 20%, transparent);
|
||||
}
|
||||
.border-brand-b3\/30 {
|
||||
border-color: color-mix(in oklab, #c026d3 30%, transparent);
|
||||
}
|
||||
.border-brand-b3\/60 {
|
||||
border-color: color-mix(in oklab, #c026d3 60%, transparent);
|
||||
}
|
||||
@@ -2127,6 +2155,9 @@
|
||||
.bg-brand-b3\/\[0\.08\] {
|
||||
background-color: color-mix(in oklab, #c026d3 8%, transparent);
|
||||
}
|
||||
.bg-brand-b3\/\[0\.15\] {
|
||||
background-color: color-mix(in oklab, #c026d3 15%, transparent);
|
||||
}
|
||||
.bg-brand-bg {
|
||||
background-color: #f7f9fc;
|
||||
}
|
||||
@@ -2753,6 +2784,9 @@
|
||||
.pb-0 {
|
||||
padding-bottom: calc(var(--spacing) * 0);
|
||||
}
|
||||
.pb-1 {
|
||||
padding-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
.pb-2 {
|
||||
padding-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
@@ -2859,12 +2893,21 @@
|
||||
font-size: var(--text-xs);
|
||||
line-height: var(--tw-leading, var(--text-xs--line-height));
|
||||
}
|
||||
.text-\[6\.5px\] {
|
||||
font-size: 6.5px;
|
||||
}
|
||||
.text-\[6px\] {
|
||||
font-size: 6px;
|
||||
}
|
||||
.text-\[7\.5px\] {
|
||||
font-size: 7.5px;
|
||||
}
|
||||
.text-\[7px\] {
|
||||
font-size: 7px;
|
||||
}
|
||||
.text-\[8\.5px\] {
|
||||
font-size: 8.5px;
|
||||
}
|
||||
.text-\[8px\] {
|
||||
font-size: 8px;
|
||||
}
|
||||
@@ -2966,10 +3009,6 @@
|
||||
--tw-tracking: 0.10em;
|
||||
letter-spacing: 0.10em;
|
||||
}
|
||||
.tracking-\[0\.14em\] {
|
||||
--tw-tracking: 0.14em;
|
||||
letter-spacing: 0.14em;
|
||||
}
|
||||
.tracking-\[0\.16em\] {
|
||||
--tw-tracking: 0.16em;
|
||||
letter-spacing: 0.16em;
|
||||
@@ -3019,6 +3058,9 @@
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.whitespace-pre-line {
|
||||
white-space: pre-line;
|
||||
}
|
||||
.whitespace-pre-wrap {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
@@ -3118,6 +3160,9 @@
|
||||
.text-brand-b1 {
|
||||
color: #2563eb;
|
||||
}
|
||||
.text-brand-b1\/60 {
|
||||
color: color-mix(in oklab, #2563eb 60%, transparent);
|
||||
}
|
||||
.text-brand-b1\/65 {
|
||||
color: color-mix(in oklab, #2563eb 65%, transparent);
|
||||
}
|
||||
@@ -3373,6 +3418,12 @@
|
||||
color: color-mix(in oklab, var(--color-white) 85%, transparent);
|
||||
}
|
||||
}
|
||||
.text-white\/90 {
|
||||
color: color-mix(in srgb, #fff 90%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
color: color-mix(in oklab, var(--color-white) 90%, transparent);
|
||||
}
|
||||
}
|
||||
.text-yellow-400 {
|
||||
color: var(--color-yellow-400);
|
||||
}
|
||||
@@ -3641,6 +3692,10 @@
|
||||
--tw-ease: var(--ease-out);
|
||||
transition-timing-function: var(--ease-out);
|
||||
}
|
||||
.outline-none {
|
||||
--tw-outline-style: none;
|
||||
outline-style: none;
|
||||
}
|
||||
.select-all {
|
||||
-webkit-user-select: all;
|
||||
-moz-user-select: all;
|
||||
@@ -4696,6 +4751,25 @@
|
||||
outline-style: none;
|
||||
}
|
||||
}
|
||||
.focus-visible\:ring-2 {
|
||||
&:focus-visible {
|
||||
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
}
|
||||
.focus-visible\:ring-brand-b1 {
|
||||
&:focus-visible {
|
||||
--tw-ring-color: #2563eb;
|
||||
}
|
||||
}
|
||||
.focus-visible\:ring-white\/40 {
|
||||
&:focus-visible {
|
||||
--tw-ring-color: color-mix(in srgb, #fff 40%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-ring-color: color-mix(in oklab, var(--color-white) 40%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.focus-visible\:outline {
|
||||
&:focus-visible {
|
||||
outline-style: var(--tw-outline-style);
|
||||
@@ -5084,12 +5158,6 @@
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.sm\:text-6xl {
|
||||
@media (width >= 40rem) {
|
||||
font-size: var(--text-6xl);
|
||||
line-height: var(--tw-leading, var(--text-6xl--line-height));
|
||||
}
|
||||
}
|
||||
.sm\:text-base {
|
||||
@media (width >= 40rem) {
|
||||
font-size: var(--text-base);
|
||||
@@ -5442,6 +5510,16 @@
|
||||
width: calc(2 / 3 * 100%);
|
||||
}
|
||||
}
|
||||
.lg\:w-\[280px\] {
|
||||
@media (width >= 64rem) {
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
.lg\:w-\[320px\] {
|
||||
@media (width >= 64rem) {
|
||||
width: 320px;
|
||||
}
|
||||
}
|
||||
.lg\:w-auto {
|
||||
@media (width >= 64rem) {
|
||||
width: auto;
|
||||
@@ -5483,11 +5561,6 @@
|
||||
grid-template-columns: 1fr 240px;
|
||||
}
|
||||
}
|
||||
.lg\:grid-cols-\[1fr_minmax\(0\,360px\)\] {
|
||||
@media (width >= 64rem) {
|
||||
grid-template-columns: 1fr minmax(0,360px);
|
||||
}
|
||||
}
|
||||
.lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,420px\)\] {
|
||||
@media (width >= 64rem) {
|
||||
grid-template-columns: minmax(0,1fr) minmax(0,420px);
|
||||
@@ -5498,6 +5571,16 @@
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
.lg\:items-start {
|
||||
@media (width >= 64rem) {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
.lg\:justify-center {
|
||||
@media (width >= 64rem) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.lg\:gap-10 {
|
||||
@media (width >= 64rem) {
|
||||
gap: calc(var(--spacing) * 10);
|
||||
|
||||
@@ -260,11 +260,11 @@
|
||||
/* ============ DECORATIVE BACKGROUND ============ */
|
||||
.dictia-section-grid {
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(15,23,42,0.04) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(15,23,42,0.04) 1px, transparent 1px);
|
||||
background-size: 60px 60px;
|
||||
mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 70%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 70%);
|
||||
linear-gradient(to right, rgba(15,23,42,0.05) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(15,23,42,0.05) 1px, transparent 1px);
|
||||
background-size: 56px 56px;
|
||||
mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 75%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 75%);
|
||||
}
|
||||
.dictia-orb-float-1 { animation: dictia-orb-1 14s ease-in-out infinite; will-change: transform; }
|
||||
.dictia-orb-float-2 { animation: dictia-orb-2 18s ease-in-out infinite; will-change: transform; }
|
||||
@@ -277,16 +277,26 @@
|
||||
position: relative;
|
||||
will-change: box-shadow, border-color;
|
||||
}
|
||||
/* Inner screen border : effet "écran encastré" subtle entre bezel et écran */
|
||||
.dictia-phone-shell::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 2px;
|
||||
border-radius: 42px;
|
||||
border: 1px solid rgba(255,255,255,0.04);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
pointer-events: none;
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 30%);
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 28%);
|
||||
z-index: 0;
|
||||
}
|
||||
/* Inner screen seam : ligne 1px entre bezel + écran (look device authentique) */
|
||||
.dictia-phone-screen-seam {
|
||||
position: absolute;
|
||||
inset: 6px;
|
||||
border-radius: 38px;
|
||||
pointer-events: none;
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 0 rgba(255,255,255,0.06);
|
||||
z-index: 1;
|
||||
}
|
||||
.dictia-phone-glow-ring { animation: dictia-glow-ring 3.6s ease-in-out infinite; will-change: opacity; }
|
||||
@keyframes dictia-glow-ring { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.7; } }
|
||||
|
||||
@@ -442,21 +452,19 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
{# Decorative background : grid + floating orbs (desktop only) #}
|
||||
{# Decorative background : grid + floating orbs (desktop only) — brand-b1/b3 only #}
|
||||
<div class="dictia-bg-grid absolute inset-0 dictia-section-grid pointer-events-none" aria-hidden="true"></div>
|
||||
<div class="dictia-bg-orbs absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
|
||||
<div class="dictia-orb-float-1 absolute" style="top:15%;left:8%;width:200px;height:200px;background:radial-gradient(circle, rgba(6,182,212,0.15) 0%, transparent 70%);filter:blur(60px);"></div>
|
||||
<div class="dictia-orb-float-2 absolute" style="bottom:10%;right:10%;width:240px;height:240px;background:radial-gradient(circle, rgba(192,38,211,0.18) 0%, transparent 70%);filter:blur(70px);"></div>
|
||||
<div class="dictia-orb-float-1 absolute" style="top:12%;left:6%;width:240px;height:240px;background:radial-gradient(circle, rgba(37,99,235,0.10) 0%, transparent 70%);filter:blur(80px);"></div>
|
||||
<div class="dictia-orb-float-2 absolute" style="bottom:8%;right:8%;width:280px;height:280px;background:radial-gradient(circle, rgba(192,38,211,0.10) 0%, transparent 70%);filter:blur(90px);"></div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-[1200px] mx-auto px-6 relative">
|
||||
<div class="text-center max-w-2xl mx-auto mb-10">
|
||||
<p class="eyebrow grad-text mb-4 inline-flex items-center gap-2 justify-center px-3 py-1 rounded-full"
|
||||
style="background:linear-gradient(135deg, rgba(6,182,212,0.10), rgba(192,38,211,0.10)); border:1px solid rgba(192,38,211,0.18);">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3h.1a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9v.1a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/>
|
||||
</svg>
|
||||
{# Eyebrow : grad-text uppercase tracking-widest text-xs avec dot pulse brand-b3 #}
|
||||
<p class="eyebrow grad-text mb-4 inline-flex items-center gap-2 justify-center px-3 py-1 rounded-full font-mono uppercase tracking-widest text-xs font-bold"
|
||||
style="background:linear-gradient(135deg, rgba(6,182,212,0.10), rgba(192,38,211,0.10)); border:1px solid rgba(192,38,211,0.20);">
|
||||
<span class="dictia-dot-pulse inline-block w-1.5 h-1.5 rounded-full bg-brand-b3" aria-hidden="true"></span>
|
||||
COMMENT ÇA MARCHE
|
||||
</p>
|
||||
<h2 id="how-it-works-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black text-brand-navy mb-4 leading-tight">
|
||||
@@ -520,57 +528,60 @@
|
||||
<div class="dictia-phone-shell flex flex-col overflow-hidden relative"
|
||||
style="width: 280px; height: 580px; border: 1.5px solid rgba(255,255,255,0.10); background: rgba(8,12,24,0.88); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 12px 32px -8px rgba(37,99,235,0.20), inset 0 0 32px rgba(255,255,255,0.04);">
|
||||
|
||||
{# Inner screen seam — effet "écran encastré dans le bezel" #}
|
||||
<div class="dictia-phone-screen-seam" aria-hidden="true"></div>
|
||||
|
||||
{# Ambient overlay — STATIC subtle (pas de tint par mode) #}
|
||||
<div class="absolute inset-0 pointer-events-none"
|
||||
style="border-radius: 44px; background-color: rgba(255,255,255,0.015);"
|
||||
aria-hidden="true"></div>
|
||||
|
||||
{# Notch / Dynamic Island (desktop only via mobile media) #}
|
||||
<div class="dictia-notch absolute left-1/2 -translate-x-1/2 z-30"
|
||||
style="top:8px;width:62px;height:6px;border-radius:6px;background:rgba(0,0,0,0.7);"
|
||||
aria-hidden="true"></div>
|
||||
|
||||
{# Status bar mobile-style (9:41 + signals) #}
|
||||
<div class="dictia-statusbar relative z-20 flex items-center justify-between px-5 pt-1 font-mono"
|
||||
style="height:20px;color:rgba(255,255,255,0.55);font-size:9px;font-weight:600;"
|
||||
{# Notch / Dynamic Island avec mini speaker grille (3 dots) #}
|
||||
<div class="dictia-notch absolute left-1/2 -translate-x-1/2 z-30 flex items-center justify-center gap-1"
|
||||
style="top:8px;width:78px;height:18px;border-radius:12px;background:rgba(0,0,0,0.85);box-shadow:inset 0 1px 2px rgba(0,0,0,0.5);"
|
||||
aria-hidden="true">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center gap-1">
|
||||
{# Signal #}
|
||||
<svg viewBox="0 0 14 10" width="11" height="8" fill="currentColor">
|
||||
<rect x="0" y="7" width="2" height="3" rx="0.5"/>
|
||||
<rect x="3" y="5" width="2" height="5" rx="0.5"/>
|
||||
<rect x="6" y="3" width="2" height="7" rx="0.5"/>
|
||||
<rect x="9" y="0" width="2" height="10" rx="0.5"/>
|
||||
</svg>
|
||||
{# Wifi #}
|
||||
<svg viewBox="0 0 14 10" width="11" height="8" fill="none" stroke="currentColor" stroke-width="1.4">
|
||||
<path d="M1 4 Q7 -1 13 4"/>
|
||||
<path d="M3 6 Q7 3 11 6"/>
|
||||
<circle cx="7" cy="9" r="0.8" fill="currentColor"/>
|
||||
</svg>
|
||||
{# Battery #}
|
||||
<svg viewBox="0 0 18 8" width="14" height="7" fill="none" stroke="currentColor" stroke-width="0.8">
|
||||
<rect x="0" y="0" width="14" height="8" rx="1.5"/>
|
||||
<rect x="14.5" y="3" width="1" height="2" rx="0.4" fill="currentColor"/>
|
||||
<rect x="1.5" y="1.5" width="9" height="5" rx="0.5" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
{# Speaker grille (3 dots) #}
|
||||
<span class="block rounded-full" style="width:3px;height:3px;background:rgba(255,255,255,0.10);"></span>
|
||||
<span class="block rounded-full" style="width:3px;height:3px;background:rgba(255,255,255,0.12);"></span>
|
||||
<span class="block rounded-full" style="width:3px;height:3px;background:rgba(255,255,255,0.10);"></span>
|
||||
{# Camera dot #}
|
||||
<span class="block rounded-full ml-1" style="width:5px;height:5px;background:rgba(255,255,255,0.18);box-shadow:inset 0 0 1px rgba(0,0,0,0.5);"></span>
|
||||
</div>
|
||||
|
||||
{# Speaker grille + camera (top of screen, below notch) #}
|
||||
<div class="dictia-speaker-grille absolute z-10 flex items-center justify-center gap-2"
|
||||
style="top:32px;left:50%;transform:translateX(-50%);width:80px;height:8px;"
|
||||
{# Status bar mobile-style (9:41 + signals) — vraies icônes SVG device-like #}
|
||||
<div class="dictia-statusbar relative z-20 flex items-center justify-between px-6 font-mono text-[10px] font-semibold"
|
||||
style="height:34px;padding-top:12px;color:rgba(255,255,255,0.65);"
|
||||
aria-hidden="true">
|
||||
<div style="width:24px;height:2px;background:rgba(255,255,255,0.10);border-radius:2px;"></div>
|
||||
<div class="dictia-camera-dot" style="width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.18);box-shadow:inset 0 0 1px rgba(0,0,0,0.5);"></div>
|
||||
<span class="font-bold">9:41</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
{# Signal — 4 bars croissantes, look device authentique #}
|
||||
<svg viewBox="0 0 16 10" width="13" height="9" fill="currentColor">
|
||||
<rect x="0" y="7" width="2.5" height="3" rx="0.5"/>
|
||||
<rect x="3.5" y="5" width="2.5" height="5" rx="0.5"/>
|
||||
<rect x="7" y="2.5" width="2.5" height="7.5" rx="0.5"/>
|
||||
<rect x="10.5" y="0" width="2.5" height="10" rx="0.5"/>
|
||||
</svg>
|
||||
{# Wifi — 3 arcs concentriques + dot, look iOS authentique #}
|
||||
<svg viewBox="0 0 16 12" width="14" height="10" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round">
|
||||
<path d="M1 4.5 Q8 -1.5 15 4.5"/>
|
||||
<path d="M3.2 7 Q8 3.2 12.8 7"/>
|
||||
<path d="M5.4 9.5 Q8 7.5 10.6 9.5"/>
|
||||
<circle cx="8" cy="11" r="0.9" fill="currentColor"/>
|
||||
</svg>
|
||||
{# Battery 80% — fill réel à 80% pour authenticité #}
|
||||
<svg viewBox="0 0 22 10" width="18" height="9" fill="none">
|
||||
<rect x="0.5" y="0.5" width="18" height="9" rx="2" stroke="currentColor" stroke-opacity="0.6" stroke-width="0.8" fill="none"/>
|
||||
<rect x="19.5" y="3.5" width="1.5" height="3" rx="0.5" fill="currentColor" fill-opacity="0.6"/>
|
||||
<rect x="2" y="2" width="14" height="6" rx="1" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# TOP : Logo + Mic pulsing (with sound waves) — hauteur fixe 96px #}
|
||||
<div class="flex flex-col items-center justify-center gap-2 relative z-10 flex-shrink-0"
|
||||
style="height: 96px; padding-top: 24px; border-bottom: 1px solid rgba(255,255,255,0.06);">
|
||||
style="height: 96px; padding-top: 12px; border-bottom: 1px solid rgba(255,255,255,0.06);">
|
||||
<img src="/static/images/dictia-logo-nom.png" alt="DictIA"
|
||||
style="width: 80px; height: 24px; object-fit: contain; opacity: 0.75;">
|
||||
style="width: 92px; height: 28px; object-fit: contain; opacity: 0.85;">
|
||||
<div class="relative" style="width:36px;height:36px;">
|
||||
{# 3 sound rings emanating #}
|
||||
<span class="dictia-sound-ring r1" :style="`color: ${activeColor}; width:24px; height:24px;`" aria-hidden="true"></span>
|
||||
@@ -594,66 +605,73 @@
|
||||
{# Mode 1 : Transcription (header REC + waveform + upload bar + words) #}
|
||||
<template x-if="displayMode === 1">
|
||||
<div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="trModeData()" x-init="init()">
|
||||
{# Header bar (file + REC) #}
|
||||
<div class="flex items-center justify-between px-2.5 py-1.5 flex-shrink-0"
|
||||
{# Header bar (file + REC) — compact mic icon + filename + REC dot #}
|
||||
<div class="flex items-center justify-between px-3 py-2 flex-shrink-0"
|
||||
style="background:rgba(6,182,212,0.06);border-bottom:1px solid rgba(6,182,212,0.12);">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:8px;height:8px;color:rgba(6,182,212,0.80);" aria-hidden="true">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
</svg>
|
||||
<span class="font-mono" style="font-size:6.5px;color:rgba(255,255,255,0.55);">reunion-jan14.mp3</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="dictia-rec-dot" style="width:5px;height:5px;border-radius:50%;background:#EF4444;"></span>
|
||||
<span class="font-mono" style="font-size:6px;color:rgba(239,68,68,0.85);letter-spacing:0.08em;font-weight:700;">REC</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Waveform animée (12 bars) #}
|
||||
<div class="flex items-end justify-center gap-0.5 px-3 py-2 flex-shrink-0" style="height:24px;" aria-hidden="true">
|
||||
<div class="dictia-wave-bar" style="width:2px;height:14px;background:#06b6d4;animation-delay:0s;"></div>
|
||||
<div class="dictia-wave-bar" style="width:2px;height:18px;background:#06b6d4;animation-delay:0.1s;"></div>
|
||||
<div class="dictia-wave-bar" style="width:2px;height:10px;background:#06b6d4;animation-delay:0.2s;"></div>
|
||||
<div class="dictia-wave-bar" style="width:2px;height:20px;background:#06b6d4;animation-delay:0.05s;"></div>
|
||||
<div class="dictia-wave-bar" style="width:2px;height:12px;background:#06b6d4;animation-delay:0.25s;"></div>
|
||||
<div class="dictia-wave-bar" style="width:2px;height:16px;background:#06b6d4;animation-delay:0.15s;"></div>
|
||||
<div class="dictia-wave-bar" style="width:2px;height:8px;background:#06b6d4;animation-delay:0.3s;"></div>
|
||||
<div class="dictia-wave-bar" style="width:2px;height:14px;background:#06b6d4;animation-delay:0.08s;"></div>
|
||||
<div class="dictia-wave-bar" style="width:2px;height:18px;background:#06b6d4;animation-delay:0.22s;"></div>
|
||||
<div class="dictia-wave-bar" style="width:2px;height:10px;background:#06b6d4;animation-delay:0.18s;"></div>
|
||||
<div class="dictia-wave-bar" style="width:2px;height:14px;background:#06b6d4;animation-delay:0s;"></div>
|
||||
<div class="dictia-wave-bar" style="width:2px;height:6px;background:#06b6d4;animation-delay:0.12s;"></div>
|
||||
</div>
|
||||
|
||||
<div x-show="phase === 'upload'" class="flex-1 flex flex-col items-center justify-center gap-3 px-4 overflow-hidden">
|
||||
<div class="flex flex-col items-center gap-1.5">
|
||||
<div class="w-10 h-12 rounded-md flex flex-col items-center justify-center relative"
|
||||
style="background-color: rgba(6,182,212,0.12); border: 1.5px solid rgba(6,182,212,0.40);">
|
||||
<div class="absolute top-0 right-0" style="width:0;height:0;border-style:solid;border-width:0 7px 7px 0;border-color:transparent rgba(0,0,0,0.40) transparent transparent;"></div>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px;color:#06b6d4;" aria-hidden="true">
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-2.5 h-2.5 text-brand-b2 shrink-0" aria-hidden="true">
|
||||
<rect x="9" y="2" width="6" height="12" rx="3"/>
|
||||
<path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
|
||||
<line x1="12" y1="19" x2="12" y2="23"/>
|
||||
</svg>
|
||||
<span class="font-mono" style="font-size:5.5px;color:rgba(6,182,212,0.70);letter-spacing:0.06em;">MP3</span>
|
||||
<span class="font-mono text-[10px] text-white/60 truncate">reunion-jan14.mp3</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 shrink-0">
|
||||
<span class="dictia-rec-dot block rounded-full" style="width:5px;height:5px;background:#ef4444;"></span>
|
||||
<span class="font-mono text-[9px] font-bold tracking-widest" style="color:rgba(239,68,68,0.90);">REC</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full flex flex-col gap-1">
|
||||
<div class="flex justify-between">
|
||||
<span class="font-mono" style="font-size:6.5px;color:rgba(6,182,212,0.65);" x-text="progress < 100 ? 'Envoi en cours…' : 'Prêt ✓'"></span>
|
||||
<span class="font-mono" style="font-size:6.5px;color:rgba(6,182,212,0.50);"><span x-text="progress"></span>%</span>
|
||||
|
||||
{# Waveform animée (16 bars régulières — pattern symétrique) #}
|
||||
<div class="flex items-end justify-center gap-0.5 px-3 py-2 flex-shrink-0" style="height:28px;" aria-hidden="true">
|
||||
<div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:8px;animation-delay:0s;"></div>
|
||||
<div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:12px;animation-delay:0.08s;"></div>
|
||||
<div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:18px;animation-delay:0.16s;"></div>
|
||||
<div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:14px;animation-delay:0.24s;"></div>
|
||||
<div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:20px;animation-delay:0.32s;"></div>
|
||||
<div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:16px;animation-delay:0.4s;"></div>
|
||||
<div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:22px;animation-delay:0.48s;"></div>
|
||||
<div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:18px;animation-delay:0.56s;"></div>
|
||||
<div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:22px;animation-delay:0.48s;"></div>
|
||||
<div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:16px;animation-delay:0.4s;"></div>
|
||||
<div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:20px;animation-delay:0.32s;"></div>
|
||||
<div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:14px;animation-delay:0.24s;"></div>
|
||||
<div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:18px;animation-delay:0.16s;"></div>
|
||||
<div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:12px;animation-delay:0.08s;"></div>
|
||||
<div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:8px;animation-delay:0s;"></div>
|
||||
<div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:6px;animation-delay:0.04s;"></div>
|
||||
</div>
|
||||
{# Double progress bar (track + active with glow) #}
|
||||
<div class="w-full rounded-full overflow-hidden relative" style="height:4px;background-color:rgba(6,182,212,0.10);box-shadow:inset 0 0 2px rgba(0,0,0,0.4);">
|
||||
<div class="h-full rounded-full" :style="`width: ${progress}%; background: linear-gradient(90deg, #06b6d4, #0891b2); box-shadow: 0 0 6px rgba(6,182,212,0.6); transition: width 60ms linear;`"></div>
|
||||
|
||||
<div x-show="phase === 'upload'" class="flex-1 flex flex-col items-center justify-center gap-3 px-4 overflow-hidden">
|
||||
<div class="flex flex-col items-center gap-2">
|
||||
{# File card MP3 — design device pro avec corner fold #}
|
||||
<div class="flex flex-col items-center justify-center relative"
|
||||
style="width:44px;height:54px;background-color:rgba(6,182,212,0.12);border:1.5px solid rgba(6,182,212,0.45);border-radius:6px;">
|
||||
<div class="absolute top-0 right-0" style="width:0;height:0;border-style:solid;border-width:0 8px 8px 0;border-color:transparent rgba(0,0,0,0.45) transparent transparent;"></div>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand-b2" style="width:14px;height:14px;" aria-hidden="true">
|
||||
<rect x="9" y="2" width="6" height="12" rx="3"/>
|
||||
<path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
|
||||
<line x1="12" y1="19" x2="12" y2="23"/>
|
||||
</svg>
|
||||
<span class="font-mono text-[9px] font-bold tracking-wider mt-1" style="color:rgba(6,182,212,0.80);">MP3</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full flex flex-col gap-1.5">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-mono text-[10px]" style="color:rgba(6,182,212,0.75);" x-text="progress < 100 ? 'Envoi en cours…' : 'Prêt ✓'"></span>
|
||||
<span class="font-mono text-[10px] font-semibold" style="color:rgba(6,182,212,0.65);"><span x-text="progress"></span>%</span>
|
||||
</div>
|
||||
{# Track gris fin + fill brand-b2 glow #}
|
||||
<div class="w-full rounded-full overflow-hidden relative" style="height:4px;background-color:rgba(255,255,255,0.06);box-shadow:inset 0 0 2px rgba(0,0,0,0.4);">
|
||||
<div class="h-full rounded-full bg-brand-b2" :style="`width: ${progress}%; box-shadow: 0 0 8px rgba(6,182,212,0.7); transition: width 60ms linear;`"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# Transcript zone — scroll interne avec fade bottom #}
|
||||
<div x-show="phase === 'transcribing'" class="flex-1 p-3 dictia-mode-scroll dictia-fade-bottom flex flex-col justify-start" x-ref="transcriptBox">
|
||||
<p class="font-mono leading-relaxed break-words" style="font-size:9px;color:rgba(6,182,212,0.92);background:rgba(6,182,212,0.04);padding:4px 6px;border-radius:6px;border-left:2px solid rgba(6,182,212,0.4);">
|
||||
<span x-text="words.slice(0, n + 1).join(' ')"></span><span class="dictia-blink ml-px" style="color:#06b6d4;display:inline-block;width:3px;background:#06b6d4;height:9px;vertical-align:middle;"> </span>
|
||||
<p class="font-mono leading-relaxed break-words text-[10px] rounded"
|
||||
style="color:rgba(6,182,212,0.92);background:rgba(6,182,212,0.04);padding:6px 8px;border-left:2px solid rgba(6,182,212,0.4);">
|
||||
<span x-text="words.slice(0, n + 1).join(' ')"></span><span class="dictia-blink ml-px inline-block align-middle bg-brand-b2" style="width:3px;height:10px;"> </span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -662,21 +680,21 @@
|
||||
{# Mode 2 : Diarisation (conversation Sophie/Marc/Julie) #}
|
||||
<template x-if="displayMode === 2">
|
||||
<div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="diaModeData()" x-init="init()">
|
||||
{# Conversation header with stacked avatars #}
|
||||
<div class="flex items-center justify-between px-2.5 py-1.5 flex-shrink-0"
|
||||
{# Conversation header — 3 avatars empilés 24×24 avec bordure white/15 #}
|
||||
<div class="flex items-center justify-between px-3 py-2 flex-shrink-0"
|
||||
style="background:rgba(37,99,235,0.06);border-bottom:1px solid rgba(37,99,235,0.12);">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="flex" style="margin-right:2px;">
|
||||
<div class="rounded-full flex items-center justify-center text-[7px] font-bold"
|
||||
style="width:14px;height:14px;background:linear-gradient(135deg,#06b6d4,#0891b2);border:1.5px solid rgba(8,12,24,0.9);color:#fff;">S</div>
|
||||
<div class="rounded-full flex items-center justify-center text-[7px] font-bold"
|
||||
style="width:14px;height:14px;background:linear-gradient(135deg,#2563eb,#1d4ed8);border:1.5px solid rgba(8,12,24,0.9);color:#fff;margin-left:-5px;">M</div>
|
||||
<div class="rounded-full flex items-center justify-center text-[7px] font-bold"
|
||||
style="width:14px;height:14px;background:linear-gradient(135deg,#c026d3,#a21caf);border:1.5px solid rgba(8,12,24,0.9);color:#fff;margin-left:-5px;">J</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex">
|
||||
<div class="rounded-full flex items-center justify-center text-[10px] font-bold text-white"
|
||||
style="width:18px;height:18px;background:linear-gradient(135deg,#06b6d4,#2563eb);border:1.5px solid rgba(8,12,24,0.9);">S</div>
|
||||
<div class="rounded-full flex items-center justify-center text-[10px] font-bold text-white"
|
||||
style="width:18px;height:18px;background:linear-gradient(135deg,#2563eb,#06b6d4);border:1.5px solid rgba(8,12,24,0.9);margin-left:-6px;">M</div>
|
||||
<div class="rounded-full flex items-center justify-center text-[10px] font-bold text-white"
|
||||
style="width:18px;height:18px;background:linear-gradient(135deg,#c026d3,#2563eb);border:1.5px solid rgba(8,12,24,0.9);margin-left:-6px;">J</div>
|
||||
</div>
|
||||
<span class="font-mono" style="font-size:6.5px;color:rgba(255,255,255,0.65);">Réunion · 3 participants</span>
|
||||
<span class="font-mono text-[10px] text-white/65">Réunion · 3 participants</span>
|
||||
</div>
|
||||
<span class="dictia-rec-dot" style="width:5px;height:5px;border-radius:50%;background:#10b981;"></span>
|
||||
<span class="dictia-rec-dot block rounded-full" style="width:5px;height:5px;background:#10b981;"></span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col justify-end gap-1.5 p-2 dictia-mode-scroll dictia-fade-bottom">
|
||||
<template x-for="(msg, i) in visible" :key="`${cycle}-${startIdx + i}`">
|
||||
@@ -685,24 +703,25 @@
|
||||
style="width:24px;height:24px;"
|
||||
:style="`background:linear-gradient(135deg, ${msg.c}33, ${msg.c}22); border: 1.5px solid ${msg.c}66; color: ${msg.c};`"
|
||||
x-text="msg.s.charAt(0)"></div>
|
||||
<div class="rounded-lg px-2 py-1.5 flex-1 relative"
|
||||
<div class="rounded px-2 py-1.5 flex-1 relative"
|
||||
style="max-width:80%;"
|
||||
:style="`background-color: ${msg.c}10; border: 1px solid ${msg.c}28; box-shadow: 0 1px 4px rgba(0,0,0,0.15);`">
|
||||
<div class="flex items-baseline justify-between gap-2 mb-0.5">
|
||||
<p class="text-[8.5px] font-bold leading-none" :style="`color: ${msg.c};`" x-text="msg.s"></p>
|
||||
<span class="text-[6.5px] font-mono" style="color:rgba(255,255,255,0.30);" x-text="`09:0${i+1}`"></span>
|
||||
<p class="text-[10px] font-bold leading-none" :style="`color: ${msg.c};`" x-text="msg.s"></p>
|
||||
<span class="text-[9px] font-mono" style="color:rgba(255,255,255,0.30);" x-text="`09:0${i+1}`"></span>
|
||||
</div>
|
||||
<p class="text-[8.5px] font-mono leading-snug" style="color:rgba(255,255,255,0.78);" x-text="msg.t"></p>
|
||||
<p class="text-[10px] font-mono leading-snug" style="color:rgba(255,255,255,0.80);" x-text="msg.t"></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
{# Typing indicator #}
|
||||
{# Typing indicator (3 dots pulse en boucle) #}
|
||||
<div class="flex items-center gap-1.5 px-1" x-show="shownCount < CONVO.length" aria-hidden="true">
|
||||
<div class="rounded-full" style="width:24px;height:24px;background:rgba(255,255,255,0.05);border:1px dashed rgba(255,255,255,0.15);"></div>
|
||||
<div class="flex items-center gap-1 rounded-lg px-2 py-1.5"
|
||||
<div class="flex items-center gap-1 rounded px-2 py-1.5"
|
||||
style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);">
|
||||
<span class="dictia-typing-dot" style="width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.5);animation-delay:0s;"></span>
|
||||
<span class="dictia-typing-dot" style="width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.5);animation-delay:0.2s;"></span>
|
||||
<span class="dictia-typing-dot" style="width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.5);animation-delay:0.4s;"></span>
|
||||
<span class="dictia-typing-dot block rounded-full" style="width:4px;height:4px;background:rgba(255,255,255,0.5);animation-delay:0s;"></span>
|
||||
<span class="dictia-typing-dot block rounded-full" style="width:4px;height:4px;background:rgba(255,255,255,0.5);animation-delay:0.2s;"></span>
|
||||
<span class="dictia-typing-dot block rounded-full" style="width:4px;height:4px;background:rgba(255,255,255,0.5);animation-delay:0.4s;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -713,29 +732,29 @@
|
||||
<template x-if="displayMode === 3">
|
||||
<div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="langModeData()">
|
||||
{# Header DÉTECTION AUTOMATIQUE #}
|
||||
<div class="flex items-center justify-center gap-1.5 py-1.5 flex-shrink-0"
|
||||
<div class="flex items-center justify-center gap-2 py-2 flex-shrink-0"
|
||||
style="background:rgba(6,182,212,0.06);border-bottom:1px solid rgba(6,182,212,0.12);">
|
||||
<span class="dictia-dot-pulse" style="width:5px;height:5px;border-radius:50%;background:#06b6d4;"></span>
|
||||
<span class="font-mono" style="font-size:7px;color:rgba(6,182,212,0.85);letter-spacing:0.16em;font-weight:700;">DÉTECTION AUTOMATIQUE</span>
|
||||
<span class="dictia-dot-pulse block rounded-full bg-brand-b2" style="width:5px;height:5px;"></span>
|
||||
<span class="font-mono text-[10px] font-bold tracking-widest" style="color:rgba(6,182,212,0.90);">DÉTECTION AUTOMATIQUE</span>
|
||||
</div>
|
||||
{# Scroll interne pour les 100 codes — fade bottom suggère continuation #}
|
||||
<div class="flex-1 dictia-mode-scroll dictia-fade-bottom" style="padding:6px 5px;">
|
||||
<div class="grid content-start" style="grid-template-columns: repeat(7, 1fr); gap: 3px;">
|
||||
<div class="flex-1 dictia-mode-scroll dictia-fade-bottom" style="padding:8px 6px;">
|
||||
<div class="grid content-start" style="grid-template-columns: repeat(7, 1fr); gap: 4px;">
|
||||
<template x-for="(lang, i) in LANGS" :key="lang">
|
||||
<span class="font-mono font-bold text-center rounded dictia-spring"
|
||||
<span class="font-mono font-bold text-center rounded dictia-spring text-[10px]"
|
||||
:class="HIGHLIGHTS.includes(i) ? 'dictia-lang-highlight' : ''"
|
||||
:style="`font-size:6.5px;line-height:16px;background-color:${LANG_COLORS[i % LANG_COLORS.length]}14;border:1px solid ${LANG_COLORS[i % LANG_COLORS.length]}30;color:${LANG_COLORS[i % LANG_COLORS.length]};animation-delay:${rippleDelay(i)}ms;`"
|
||||
:style="`line-height:18px;background-color:${LANG_COLORS[i % LANG_COLORS.length]}14;border:1px solid ${LANG_COLORS[i % LANG_COLORS.length]}30;color:${LANG_COLORS[i % LANG_COLORS.length]};animation-delay:${rippleDelay(i)}ms;`"
|
||||
x-text="lang"></span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
{# Counter live en bas #}
|
||||
<div class="flex items-center justify-between px-2.5 py-1.5 flex-shrink-0"
|
||||
<div class="flex items-center justify-between px-3 py-2 flex-shrink-0"
|
||||
style="background:rgba(6,182,212,0.04);border-top:1px solid rgba(6,182,212,0.10);">
|
||||
<span class="font-mono dictia-fade-y" style="font-size:6.5px;color:rgba(6,182,212,0.75);letter-spacing:0.06em;animation-delay:1.4s;">
|
||||
FR · EN · ES · DE · ZH · JA · AR · ...
|
||||
<span class="font-mono dictia-fade-y text-[9px] tracking-wide" style="color:rgba(6,182,212,0.75);animation-delay:1.4s;">
|
||||
FR · EN · ES · DE · ZH · JA · AR
|
||||
</span>
|
||||
<span class="font-mono font-bold dictia-fade-y" style="font-size:7.5px;color:#06b6d4;letter-spacing:0.1em;animation-delay:1.4s;">
|
||||
<span class="font-mono font-bold dictia-fade-y text-[10px] tracking-wider text-brand-b2" style="animation-delay:1.4s;">
|
||||
99+ langues détectées
|
||||
</span>
|
||||
</div>
|
||||
@@ -746,41 +765,42 @@
|
||||
<template x-if="displayMode === 4">
|
||||
<div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="expModeData()">
|
||||
{# Header subtle #}
|
||||
<div class="flex items-center justify-between px-2.5 py-1.5 flex-shrink-0"
|
||||
<div class="flex items-center justify-between px-3 py-2 flex-shrink-0"
|
||||
style="background:rgba(37,99,235,0.06);border-bottom:1px solid rgba(37,99,235,0.12);">
|
||||
<span class="font-mono" style="font-size:7px;color:rgba(37,99,235,0.85);letter-spacing:0.14em;font-weight:700;">EXPORTS DISPONIBLES</span>
|
||||
<span class="font-mono text-[10px] font-bold tracking-widest" style="color:rgba(37,99,235,0.90);">EXPORTS DISPONIBLES</span>
|
||||
<span class="font-mono text-[9px] text-brand-b1/60">7 formats</span>
|
||||
</div>
|
||||
|
||||
{# Grid 4×2 #}
|
||||
{# Grid 4×2 — staggered drop animation #}
|
||||
<div class="grid grid-cols-4 gap-2 p-3 flex-1 content-center justify-items-center overflow-hidden">
|
||||
<template x-for="(f, i) in FILE_TYPES" :key="f.ext">
|
||||
<div class="dictia-spring-y" :style="`animation-delay:${i * 110}ms;`">
|
||||
<div class="rounded-md flex flex-col items-center justify-end gap-0.5 relative"
|
||||
style="width:38px;height:46px;"
|
||||
<div class="dictia-spring-y" :style="`animation-delay:${i * 90}ms;`">
|
||||
<div class="flex flex-col items-center justify-end gap-0.5 relative"
|
||||
style="width:42px;height:50px;border-radius:4px;"
|
||||
:style="`background-color:${f.bg}CC;border:1.5px solid ${f.bg};box-shadow:0 4px 12px ${f.bg}40;`">
|
||||
<div class="absolute top-0 right-0" style="width:0;height:0;border-style:solid;border-width:0 8px 8px 0;border-color:transparent rgba(0,0,0,0.40) transparent transparent;"></div>
|
||||
<div class="absolute top-0 right-0" style="width:0;height:0;border-style:solid;border-width:0 9px 9px 0;border-color:transparent rgba(0,0,0,0.45) transparent transparent;"></div>
|
||||
{# Mini "page" lines #}
|
||||
<div class="absolute top-2 left-1.5 right-3 flex flex-col gap-0.5" aria-hidden="true">
|
||||
<div :style="`height:1px;background:${f.fg}55;width:80%;`"></div>
|
||||
<div :style="`height:1px;background:${f.fg}40;width:65%;`"></div>
|
||||
<div :style="`height:1px;background:${f.fg}40;width:75%;`"></div>
|
||||
</div>
|
||||
<span class="text-[10px] font-black leading-none mb-0.5" :style="`color:${f.fg};margin-bottom:8px;`" x-text="f.sym"></span>
|
||||
<span class="text-[7px] font-mono font-bold leading-none mb-1" :style="`color:${f.fg}BB;`" x-text="f.ext"></span>
|
||||
<span class="text-[11px] font-black leading-none" :style="`color:${f.fg};margin-bottom:6px;`" x-text="f.sym"></span>
|
||||
<span class="text-[9px] font-mono font-bold leading-none mb-1.5" :style="`color:${f.fg}BB;`" x-text="f.ext"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
{# Subtitle dynamique avec checkmark — vert sémantique conservé pour status "ready" #}
|
||||
<div class="flex items-center justify-center gap-1.5 px-2.5 py-1.5 dictia-fade-y flex-shrink-0"
|
||||
<div class="flex items-center justify-center gap-2 px-3 py-2 dictia-fade-y flex-shrink-0"
|
||||
style="background:rgba(16,185,129,0.06);border-top:1px solid rgba(16,185,129,0.14);animation-delay:0.9s;">
|
||||
<span style="width:11px;height:11px;border-radius:50%;background:#10b981;display:inline-flex;align-items:center;justify-content:center;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="rgba(8,12,24,0.9)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" style="width:7px;height:7px;" aria-hidden="true">
|
||||
<span class="inline-flex items-center justify-center rounded-full" style="width:13px;height:13px;background:#10b981;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="rgba(8,12,24,0.9)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" style="width:8px;height:8px;" aria-hidden="true">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="font-mono" style="font-size:7px;color:#10b981;letter-spacing:0.08em;font-weight:700;">7 FORMATS PRÊTS</span>
|
||||
<span class="font-mono text-[10px] font-bold tracking-widest" style="color:#10b981;">7 FORMATS PRÊTS</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -788,28 +808,28 @@
|
||||
{# Mode 5 : Users (counter centré + avatars colors variés + connecting lines) #}
|
||||
<template x-if="displayMode === 5">
|
||||
<div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="usersModeData()" x-init="init()">
|
||||
{# Header counter #}
|
||||
<div class="flex items-center justify-center gap-1.5 py-1.5 flex-shrink-0"
|
||||
{# Header counter — gros chiffre Inter font-black #}
|
||||
<div class="flex items-center justify-center gap-2 py-2 flex-shrink-0"
|
||||
style="background:rgba(192,38,211,0.06);border-bottom:1px solid rgba(192,38,211,0.12);">
|
||||
<span class="font-mono" style="font-size:7px;color:rgba(192,38,211,0.75);letter-spacing:0.14em;font-weight:700;">UTILISATEURS</span>
|
||||
<span class="font-mono font-black" style="font-size:11px;color:#c026d3;letter-spacing:0.05em;" x-text="count.toString().padStart(2, '0')"></span>
|
||||
<span class="font-mono" style="font-size:7px;color:rgba(192,38,211,0.45);">/ ∞</span>
|
||||
<span class="font-mono text-[10px] font-bold tracking-widest" style="color:rgba(192,38,211,0.85);">UTILISATEURS</span>
|
||||
<span class="font-black text-base text-brand-b3 leading-none" x-text="count.toString().padStart(2, '0')"></span>
|
||||
<span class="font-mono text-[10px]" style="color:rgba(192,38,211,0.50);">→ ∞</span>
|
||||
</div>
|
||||
|
||||
{# Avatar grid with connecting lines SVG #}
|
||||
<div class="flex-1 relative p-2 flex flex-wrap gap-1.5 items-center justify-center content-center overflow-hidden">
|
||||
{# SVG connecting lines (brand declinaisons only) #}
|
||||
<svg class="absolute inset-0 pointer-events-none" width="100%" height="100%" aria-hidden="true" style="opacity:0.4;">
|
||||
<div class="flex-1 relative p-3 flex flex-wrap gap-2 items-center justify-center content-center overflow-hidden">
|
||||
{# SVG connecting lines (brand b1/b2/b3 only) — opacité subtle #}
|
||||
<svg class="absolute inset-0 pointer-events-none" width="100%" height="100%" aria-hidden="true" style="opacity:0.18;">
|
||||
<line x1="20%" y1="30%" x2="50%" y2="50%" stroke="#c026d3" stroke-width="0.5" stroke-dasharray="2 2"/>
|
||||
<line x1="80%" y1="30%" x2="50%" y2="50%" stroke="#06b6d4" stroke-width="0.5" stroke-dasharray="2 2"/>
|
||||
<line x1="20%" y1="70%" x2="50%" y2="50%" stroke="#a21caf" stroke-width="0.5" stroke-dasharray="2 2"/>
|
||||
<line x1="20%" y1="70%" x2="50%" y2="50%" stroke="#c026d3" stroke-width="0.5" stroke-dasharray="2 2"/>
|
||||
<line x1="80%" y1="70%" x2="50%" y2="50%" stroke="#2563eb" stroke-width="0.5" stroke-dasharray="2 2"/>
|
||||
</svg>
|
||||
<template x-for="i in count" :key="`${cycle}-${i}`">
|
||||
<div class="rounded-full flex items-center justify-center relative z-10"
|
||||
:class="i === count ? 'dictia-spring' : ''"
|
||||
:style="`width:24px;height:24px;background-color:${USER_COLORS[(i-1) % USER_COLORS.length]}22;border:1.5px solid ${USER_COLORS[(i-1) % USER_COLORS.length]}77;`">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:10px;height:10px;" :style="`color:${USER_COLORS[(i-1) % USER_COLORS.length]};`" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:11px;height:11px;" :style="`color:${USER_COLORS[(i-1) % USER_COLORS.length]};`" aria-hidden="true">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
@@ -822,70 +842,73 @@
|
||||
{# Mode 6 : Share (breadcrumb + toolbar + rows structurées) #}
|
||||
<template x-if="displayMode === 6">
|
||||
<div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden">
|
||||
{# Breadcrumb #}
|
||||
<div class="flex items-center gap-1 px-2.5 py-1.5 flex-shrink-0"
|
||||
{# Breadcrumb compact 12px max + toolbar 4 icons #}
|
||||
<div class="flex items-center gap-1.5 px-3 py-2 flex-shrink-0"
|
||||
style="background:rgba(6,182,212,0.06);border-bottom:1px solid rgba(6,182,212,0.12);">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:7px;height:7px;color:#06b6d4;" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand-b2 shrink-0" style="width:9px;height:9px;" aria-hidden="true">
|
||||
<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||
</svg>
|
||||
<span class="font-mono" style="font-size:6.5px;color:rgba(255,255,255,0.55);">Mes dossiers</span>
|
||||
<span style="font-size:6px;color:rgba(255,255,255,0.30);">›</span>
|
||||
<span class="font-mono" style="font-size:6.5px;color:#06b6d4;font-weight:700;">Réunions</span>
|
||||
{# Toolbar mini #}
|
||||
<span class="font-mono text-[10px] text-white/55">Mes dossiers</span>
|
||||
<span class="text-[9px] text-white/30">›</span>
|
||||
<span class="font-mono text-[10px] font-bold text-brand-b2">Réunions</span>
|
||||
{# Toolbar mini 4 icons #}
|
||||
<div class="flex items-center gap-1.5 ml-auto" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:8px;height:8px;color:rgba(255,255,255,0.40);">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/40" style="width:10px;height:10px;">
|
||||
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
</svg>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:8px;height:8px;color:rgba(255,255,255,0.40);">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/40" style="width:10px;height:10px;">
|
||||
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
|
||||
</svg>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:8px;height:8px;color:rgba(255,255,255,0.40);">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/40" style="width:10px;height:10px;">
|
||||
<path d="M3 6h18M3 12h18M3 18h18"/>
|
||||
</svg>
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" class="text-white/40" style="width:10px;height:10px;">
|
||||
<circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-col gap-1.5 dictia-mode-scroll dictia-fade-bottom" style="padding:6px 7px;">
|
||||
<div class="flex-1 flex flex-col gap-2 dictia-mode-scroll dictia-fade-bottom" style="padding:8px;">
|
||||
{# Folders #}
|
||||
<div class="flex gap-1 flex-wrap">
|
||||
<template x-for="(f, fi) in [{name:'Réunions',color:'#06b6d4',count:12},{name:'Entretiens',color:'#2563eb',count:7},{name:'Formations',color:'#c026d3',count:24}]" :key="f.name">
|
||||
<div class="flex items-center gap-1 rounded-md dictia-fade-y"
|
||||
<div class="flex items-center gap-1 rounded dictia-fade-y"
|
||||
:style="`background-color:${f.color}18;border:1px solid ${f.color}35;padding:3px 6px;animation-delay:${fi * 100}ms;`">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:7px;height:7px;" :style="`color:${f.color};`" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:9px;height:9px;" :style="`color:${f.color};`" aria-hidden="true">
|
||||
<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||
</svg>
|
||||
<span class="font-mono" style="font-size:6.5px;" :style="`color:${f.color};`" x-text="f.name"></span>
|
||||
<span class="font-mono" style="font-size:6px;" :style="`color:${f.color}88;`" x-text="f.count"></span>
|
||||
<span class="font-mono text-[9px] font-semibold" :style="`color:${f.color};`" x-text="f.name"></span>
|
||||
<span class="font-mono text-[9px]" :style="`color:${f.color}88;`" x-text="f.count"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
{# Tags #}
|
||||
{# Tags pills #}
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<template x-for="(tag, ti) in ['#RH','#Direction','#Urgent','#Archivé','#Suivi','#Confidentiel','#2024']" :key="tag">
|
||||
<span class="rounded dictia-spring font-mono"
|
||||
style="font-size:5.5px;padding:2px 4px;background-color:rgba(6,182,212,0.10);border:1px solid rgba(6,182,212,0.25);color:#06b6d4;"
|
||||
<span class="rounded-full dictia-spring font-mono text-[9px] text-brand-b2"
|
||||
style="padding:2px 6px;background-color:rgba(6,182,212,0.10);border:1px solid rgba(6,182,212,0.25);"
|
||||
:style="`animation-delay:${350 + ti * 70}ms;`"
|
||||
x-text="tag"></span>
|
||||
</template>
|
||||
</div>
|
||||
{# File rows structurées #}
|
||||
<div class="flex flex-col gap-1 mt-0.5">
|
||||
{# File rows structurées — hover highlight #}
|
||||
<div class="flex flex-col gap-1">
|
||||
<template x-for="(file, fi2) in [{name:'CR-Réunion-Jan14',folder:'Réunions',color:'#06b6d4'},{name:'Entretien-Sophie',folder:'Entretiens',color:'#2563eb'},{name:'Formation-RGPD',folder:'Formations',color:'#c026d3'}]" :key="file.name">
|
||||
<div class="dictia-share-row group flex items-center gap-1.5 rounded-lg dictia-fade-x cursor-pointer"
|
||||
:style="`background-color:${file.color}0C;border:1px solid ${file.color}22;padding:4px 6px;animation-delay:${650 + fi2 * 120}ms;transition:background-color 0.2s;`">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:8px;height:8px;flex-shrink:0;" :style="`color:${file.color};`" aria-hidden="true">
|
||||
<div class="dictia-share-row group flex items-center gap-2 rounded dictia-fade-x cursor-pointer"
|
||||
:style="`background-color:${file.color}0C;border:1px solid ${file.color}22;padding:5px 8px;animation-delay:${650 + fi2 * 120}ms;transition:background-color 0.2s;`">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0" style="width:10px;height:10px;" :style="`color:${file.color};`" aria-hidden="true">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
</svg>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="truncate font-mono" style="font-size:7px;color:rgba(255,255,255,0.78);" x-text="file.name"></p>
|
||||
<p class="truncate font-mono text-[10px] text-white/80" x-text="file.name"></p>
|
||||
</div>
|
||||
<span class="rounded font-mono shrink-0"
|
||||
style="font-size:5.5px;padding:1px 4px;"
|
||||
<span class="rounded font-mono shrink-0 text-[9px]"
|
||||
style="padding:2px 5px;"
|
||||
:style="`background:${file.color}18;color:${file.color};border:1px solid ${file.color}33;`"
|
||||
x-text="file.folder"></span>
|
||||
<span class="dictia-share-action shrink-0" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" style="width:8px;height:8px;" :style="`color:${file.color}77;`">
|
||||
<span class="shrink-0" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" style="width:10px;height:10px;" :style="`color:${file.color}77;`">
|
||||
<circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/>
|
||||
</svg>
|
||||
</span>
|
||||
@@ -893,8 +916,8 @@
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center font-mono dictia-fade-y px-2 py-1 flex-shrink-0"
|
||||
style="font-size:6.5px;color:rgba(6,182,212,0.65);letter-spacing:0.08em;background:rgba(6,182,212,0.04);border-top:1px solid rgba(6,182,212,0.10);animation-delay:1.2s;">
|
||||
<p class="text-center font-mono dictia-fade-y px-3 py-2 flex-shrink-0 text-[9px] tracking-wide"
|
||||
style="color:rgba(6,182,212,0.70);background:rgba(6,182,212,0.04);border-top:1px solid rgba(6,182,212,0.10);animation-delay:1.2s;">
|
||||
partage sécurisé · recherche plein texte
|
||||
</p>
|
||||
</div>
|
||||
@@ -903,67 +926,70 @@
|
||||
{# Mode 0 : IA chat (Mistral 7B local Q&R typing) — visible si user clique sur IA dans grid #}
|
||||
<template x-if="displayMode === 0">
|
||||
<div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="iaModeData()" x-init="init()">
|
||||
<div class="flex items-center justify-center gap-1.5 py-1.5 flex-shrink-0"
|
||||
<div class="flex items-center justify-center gap-2 py-2 flex-shrink-0"
|
||||
style="border-bottom: 1px solid rgba(192,38,211,0.14); background-color: rgba(192,38,211,0.05);">
|
||||
<div class="rounded-full flex-shrink-0 dictia-dot-pulse" style="width:6px;height:6px;background-color:#10b981;"></div>
|
||||
<span class="font-mono" style="font-size:6px;color:rgba(192,38,211,0.85);letter-spacing:0.14em;">MISTRAL 7B · LOCAL</span>
|
||||
<span class="rounded-full flex-shrink-0 dictia-dot-pulse block" style="width:6px;height:6px;background-color:#10b981;"></span>
|
||||
<span class="font-mono text-[10px] font-bold tracking-widest" style="color:rgba(192,38,211,0.90);">MISTRAL 7B · LOCAL</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col justify-end gap-1.5 p-2 dictia-mode-scroll dictia-fade-bottom">
|
||||
<div class="flex-1 flex flex-col justify-end gap-2 p-2 dictia-mode-scroll dictia-fade-bottom">
|
||||
<template x-for="(msg, mi) in msgs" :key="mi">
|
||||
<div class="dictia-fade-y" :class="msg.role === 'user' ? 'flex justify-end' : 'flex justify-start'">
|
||||
<div class="rounded-lg px-2 py-1.5" style="max-width:92%;"
|
||||
<div class="rounded px-2 py-1.5" style="max-width:88%;"
|
||||
:style="msg.role === 'user' ? 'background-color:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);' : 'background-color:rgba(192,38,211,0.12);border:1px solid rgba(192,38,211,0.30);'">
|
||||
<p class="font-mono leading-relaxed whitespace-pre-line" style="font-size:7.5px;"
|
||||
:style="msg.role === 'user' ? 'color:rgba(255,255,255,0.65);' : 'color:#e879f9;'">
|
||||
<span x-text="msg.text"></span><span x-show="msg.role === 'bot' && mi === msgs.length - 1" class="dictia-blink ml-px" style="color:#c026d3;">▌</span>
|
||||
<p class="font-mono leading-relaxed whitespace-pre-line text-[10px]"
|
||||
:style="msg.role === 'user' ? 'color:rgba(255,255,255,0.70);' : 'color:rgba(192,38,211,0.95);'">
|
||||
<span x-text="msg.text"></span><span x-show="msg.role === 'bot' && mi === msgs.length - 1" class="dictia-blink ml-px text-brand-b3">▌</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="flex items-center justify-center gap-1 py-1.5 flex-shrink-0" style="border-top:1px solid rgba(192,38,211,0.08);">
|
||||
<span class="font-mono" style="font-size:5.5px;color:rgba(239,68,68,0.55);letter-spacing:0.06em;">0 donnée envoyée au cloud</span>
|
||||
<div class="flex items-center justify-center gap-1.5 py-2 flex-shrink-0" style="border-top:1px solid rgba(192,38,211,0.10);background:rgba(192,38,211,0.03);">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="shrink-0" style="width:9px;height:9px;color:rgba(16,185,129,0.85);" aria-hidden="true">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
<span class="font-mono text-[9px] tracking-wide" style="color:rgba(16,185,129,0.85);">0 donnée envoyée au cloud</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
{# BOTTOM : 6 feature icons + label + tab indicator + Auto pill — hauteur fixe 90px (cadre stable) #}
|
||||
<div class="relative flex flex-col items-center justify-center gap-1 z-10 flex-shrink-0"
|
||||
style="height: 90px; border-top: 1px solid rgba(255,255,255,0.06); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.30));">
|
||||
<div class="flex items-end gap-1.5">
|
||||
<div class="relative flex flex-col items-center justify-center gap-1.5 z-10 flex-shrink-0"
|
||||
style="height: 90px; border-top: 1px solid rgba(255,255,255,0.06); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.32));">
|
||||
<div class="flex items-end gap-1">
|
||||
<template x-for="i in [1,2,3,4,5,6]" :key="i">
|
||||
<button type="button" @click="handleManualSelect(i)"
|
||||
class="dictia-feat-btn outline-none cursor-pointer focus-visible:ring-2 focus-visible:ring-white/40 rounded-md flex flex-col items-center justify-end relative"
|
||||
:style="`background-color: ${selectedFeature === i ? FEATURES[i].color + '14' : 'transparent'}; border:none; padding: 4px 5px 6px; opacity: ${selectedFeature === i ? 1 : 0.55}; min-width: 30px;`"
|
||||
class="dictia-feat-btn outline-none cursor-pointer focus-visible:ring-2 focus-visible:ring-white/40 flex flex-col items-center justify-end relative"
|
||||
style="width:34px;height:42px;border:none;padding:4px 0 6px;background:transparent;"
|
||||
:aria-pressed="selectedFeature === i ? 'true' : 'false'"
|
||||
:aria-label="`Voir : ${FEATURES[i].title}`">
|
||||
<span :style="`color: ${selectedFeature === i ? FEATURES[i].color : 'rgba(255,255,255,0.42)'}; transition: color 0.2s, transform 0.15s, filter 0.2s; filter: ${selectedFeature === i ? 'drop-shadow(0 0 6px ' + FEATURES[i].color + 'CC)' : 'none'}; transform: scale(${selectedFeature === i ? 1.18 : 1}); display: inline-block;`">
|
||||
<span :style="`color: ${selectedFeature === i ? FEATURES[i].color : 'rgba(255,255,255,0.30)'}; transition: color 0.2s, transform 0.15s, filter 0.2s; filter: ${selectedFeature === i ? 'drop-shadow(0 0 6px ' + FEATURES[i].color + 'CC)' : 'none'}; transform: scale(${selectedFeature === i ? 1.15 : 1}); display: inline-block;`">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;" aria-hidden="true" x-html="featureIconPath(i)"></svg>
|
||||
</span>
|
||||
<span class="text-[7px] font-mono font-medium mt-0.5 leading-none uppercase tracking-wide"
|
||||
:style="`color: ${selectedFeature === i ? FEATURES[i].color : 'rgba(255,255,255,0.30)'};`"
|
||||
<span class="text-[9px] font-mono font-semibold mt-0.5 leading-none uppercase tracking-wider"
|
||||
:style="`color: ${selectedFeature === i ? FEATURES[i].color : 'rgba(255,255,255,0.40)'};`"
|
||||
x-text="featureShortLabel(i)"></span>
|
||||
{# Tab indicator bottom border #}
|
||||
{# Tab indicator bottom border 2px (style tab bar) #}
|
||||
<span x-show="selectedFeature === i" class="absolute" aria-hidden="true"
|
||||
:style="`bottom: 0; left: 4px; right: 4px; height: 2px; background: ${FEATURES[i].color}; border-radius: 1px; box-shadow: 0 0 6px ${FEATURES[i].color};`"></span>
|
||||
:style="`bottom: 0; left: 4px; right: 4px; height: 2px; background: ${FEATURES[i].color}; border-radius: 1px; box-shadow: 0 0 8px ${FEATURES[i].color};`"></span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
{# Auto pill / Manuel countdown #}
|
||||
{# Auto pill / Manuel countdown — style premium pill #}
|
||||
<div class="flex items-center justify-center gap-1.5" style="min-height:14px;">
|
||||
<template x-if="!isManual">
|
||||
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full"
|
||||
style="background:rgba(16,185,129,0.10);border:1px solid rgba(16,185,129,0.25);">
|
||||
<span class="dictia-auto-pulse" style="width:5px;height:5px;border-radius:50%;background:#10b981;"></span>
|
||||
<span class="font-mono" style="font-size:7px;color:#10b981;letter-spacing:0.12em;font-weight:700;">AUTO</span>
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full"
|
||||
style="background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.30);">
|
||||
<span class="dictia-auto-pulse block rounded-full" style="width:5px;height:5px;background:#10b981;"></span>
|
||||
<span class="font-mono text-[9px] font-bold tracking-widest uppercase" style="color:#10b981;">Auto</span>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="isManual">
|
||||
<span class="inline-flex flex-col items-center gap-0.5">
|
||||
<span class="font-mono" style="font-size:7.5px;color:rgba(255,255,255,0.55);" x-text="'Auto reprend bientôt'"></span>
|
||||
<span class="rounded-full overflow-hidden" style="width:50px;height:2px;background:rgba(255,255,255,0.10);">
|
||||
<span class="font-mono text-[9px] text-white/60">Auto reprend bientôt</span>
|
||||
<span class="rounded-full overflow-hidden" style="width:56px;height:2px;background:rgba(255,255,255,0.12);">
|
||||
<span class="block dictia-countdown-fill h-full" :key="selectedFeature" style="background:linear-gradient(90deg,#06b6d4,#c026d3);"></span>
|
||||
</span>
|
||||
</span>
|
||||
@@ -973,22 +999,25 @@
|
||||
</div>{# /dictia-phone-shell #}
|
||||
</div>{# /phone wrapper (glow ring) #}
|
||||
|
||||
{# Feature info card sous le phone — premium look avec icon container + hover lift #}
|
||||
{# Feature info card sous le phone — uniform bg-white/[0.06] + accent border-left tab indicator #}
|
||||
<div style="min-height:64px;width:280px;max-width:100%;" class="mt-3 mx-auto">
|
||||
<div class="dictia-feature-card rounded-xl px-4 py-3 relative"
|
||||
:style="`background-color: ${activeColor}10; border: 1px solid ${activeColor}38; box-shadow: 0 6px 24px ${activeColor}1F;`">
|
||||
<div class="dictia-feature-card rounded-xl px-4 py-3 relative bg-white/[0.06] border border-white/[0.10] overflow-hidden"
|
||||
:style="`box-shadow: 0 6px 24px rgba(0,0,0,0.20);`">
|
||||
{# Border-left 3px accent — style tab indicator #}
|
||||
<span class="absolute left-0 top-0 bottom-0" aria-hidden="true"
|
||||
:style="`width:3px;background:${activeColor};box-shadow:0 0 8px ${activeColor}80;`"></span>
|
||||
{# Badge top-right #}
|
||||
<template x-if="FEATURES[displayMode].badge">
|
||||
<span class="absolute text-[7.5px] px-1.5 py-0.5 rounded font-mono font-bold"
|
||||
style="top:8px;right:8px;letter-spacing:0.08em;"
|
||||
<span class="absolute text-[10px] px-1.5 py-0.5 rounded font-mono font-bold tracking-wider"
|
||||
style="top:8px;right:8px;"
|
||||
:style="`background-color: ${activeColor}22; color: ${activeColor}; border: 1px solid ${activeColor}55;`"
|
||||
x-text="FEATURES[displayMode].badge"></span>
|
||||
</template>
|
||||
<div class="flex items-start gap-2.5">
|
||||
{# Icon container 32×32 #}
|
||||
<span class="rounded-lg flex items-center justify-center flex-shrink-0"
|
||||
<span class="rounded flex items-center justify-center flex-shrink-0"
|
||||
style="width:32px;height:32px;"
|
||||
:style="`background-color: ${activeColor}18; border: 1px solid ${activeColor}33;`"
|
||||
:style="`background-color: ${activeColor}26; border: 1px solid ${activeColor}40;`"
|
||||
aria-hidden="true">
|
||||
<span :style="`color: ${activeColor};`">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;" x-html="featureIconPath(displayMode)"></svg>
|
||||
@@ -996,7 +1025,7 @@
|
||||
</span>
|
||||
<div class="flex-1 min-w-0 pr-12">
|
||||
<p class="text-sm font-bold text-white leading-tight mb-0.5" x-text="FEATURES[displayMode].title"></p>
|
||||
<p class="text-[11px] leading-snug" style="color:rgba(255,255,255,0.62);" x-text="FEATURES[displayMode].subtitle"></p>
|
||||
<p class="text-[11px] leading-snug text-white/65" x-text="FEATURES[displayMode].subtitle"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1024,105 +1053,104 @@
|
||||
{# ─────────── ZONE RIGHT : IA Mistral premium card + grid 6 features ─────────── #}
|
||||
<div class="flex flex-col gap-3 w-full lg:w-[320px] flex-shrink-0 relative z-10">
|
||||
|
||||
{# Eyebrow + title — alignés sur le système typo #}
|
||||
<div class="mb-1 flex items-center gap-2">
|
||||
<span class="block w-1 h-5 rounded-full" style="background:linear-gradient(180deg,#06b6d4,#c026d3);" aria-hidden="true"></span>
|
||||
<span class="block w-1 h-6 rounded-full" style="background:linear-gradient(180deg,#06b6d4,#c026d3);" aria-hidden="true"></span>
|
||||
<div>
|
||||
<p class="text-[9px] font-medium uppercase tracking-[0.22em]" style="color:rgba(192,38,211,0.95);">Fonctions clés</p>
|
||||
<p class="font-bold text-base leading-snug text-brand-navy">Le moteur IA local</p>
|
||||
<p class="text-xs font-mono font-bold uppercase tracking-widest text-brand-b3">Fonctions clés</p>
|
||||
<p class="font-bold text-lg leading-snug text-brand-navy">Le moteur IA local</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# IA Mistral 7B premium card — couleurs brand-b3 (fuchsia officiel) #}
|
||||
<div class="relative rounded-xl overflow-hidden"
|
||||
style="border:1.5px solid rgba(192,38,211,0.32);background-color:rgba(8,12,24,0.92);box-shadow:0 0 32px rgba(192,38,211,0.18), 0 12px 40px -10px rgba(0,0,0,0.5);">
|
||||
<div class="relative rounded-xl overflow-hidden border-brand-b3/30 border-[1.5px]"
|
||||
style="background-color:rgba(8,12,24,0.92);box-shadow:0 0 28px rgba(192,38,211,0.18), 0 12px 40px -10px rgba(0,0,0,0.5);">
|
||||
{# Ambient fuchsia glow #}
|
||||
<div class="absolute inset-0 pointer-events-none ia-ambient-glow"
|
||||
style="border-radius:inherit;background:radial-gradient(ellipse 120% 60% at 15% 50%, rgba(192,38,211,0.22) 0%, transparent 70%);"
|
||||
aria-hidden="true"></div>
|
||||
|
||||
{# Header — Brain in 40x40 circle #}
|
||||
<div class="relative px-4 pt-4 pb-3 flex items-start gap-3">
|
||||
{# Header — Brain in 40x40 circle (premium feel) #}
|
||||
<div class="relative p-5 flex items-start gap-3">
|
||||
<div class="relative flex-shrink-0">
|
||||
<div class="absolute -inset-3 rounded-full pointer-events-none ia-brain-glow"
|
||||
style="background:radial-gradient(circle, rgba(192,38,211,0.55) 0%, transparent 70%);"
|
||||
aria-hidden="true"></div>
|
||||
<div class="rounded-full flex items-center justify-center relative"
|
||||
style="width:40px;height:40px;background:linear-gradient(135deg, rgba(192,38,211,0.30), rgba(192,38,211,0.12));border:1.5px solid rgba(192,38,211,0.50);box-shadow:0 4px 12px rgba(192,38,211,0.20);">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand-b3" style="width:20px;height:20px;position:relative;z-index:1;" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand-b3 relative" style="width:20px;height:20px;z-index:1;" aria-hidden="true">
|
||||
<path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z"/>
|
||||
<path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span class="font-bold text-base text-white">IA intégrée</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 flex-wrap mt-1">
|
||||
<span class="text-[9px] px-2 py-0.5 rounded-md font-mono font-bold"
|
||||
style="background-color:rgba(192,38,211,0.22);color:#e879f9;border:1px solid rgba(192,38,211,0.45);letter-spacing:0.08em;">MISTRAL 7B</span>
|
||||
<span class="text-[8px] px-2 py-0.5 rounded font-mono font-bold ia-local-badge inline-flex items-center gap-1"
|
||||
style="background-color:rgba(16,185,129,0.14);color:#10b981;border:1px solid rgba(16,185,129,0.40);letter-spacing:0.12em;">
|
||||
<span class="dictia-dot-pulse" style="width:4px;height:4px;border-radius:50%;background:#10b981;"></span>
|
||||
<span class="font-bold text-lg text-white block">IA intégrée</span>
|
||||
<div class="flex items-center gap-1.5 flex-wrap mt-1.5">
|
||||
<span class="text-[10px] px-2 py-0.5 rounded font-mono font-bold tracking-wider text-brand-b3"
|
||||
style="background-color:rgba(192,38,211,0.22);border:1px solid rgba(192,38,211,0.45);">MISTRAL 7B</span>
|
||||
<span class="text-[10px] px-2 py-0.5 rounded font-mono font-bold ia-local-badge inline-flex items-center gap-1 tracking-widest"
|
||||
style="background-color:rgba(16,185,129,0.14);color:#10b981;border:1px solid rgba(16,185,129,0.40);">
|
||||
<span class="dictia-dot-pulse block rounded-full" style="width:4px;height:4px;background:#10b981;"></span>
|
||||
LOCAL
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-[11px] mt-1.5" style="color:rgba(255,255,255,0.62);">Résumé · Points d'action · Q&R</p>
|
||||
<p class="text-xs mt-2 text-white/65">Résumé · Points d'action · Q&R</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Divider #}
|
||||
<div style="height:1px;background:linear-gradient(90deg, transparent, rgba(192,38,211,0.30), transparent);" aria-hidden="true"></div>
|
||||
|
||||
{# Performance metrics 3 cells #}
|
||||
{# Performance metrics 3 cells — chiffres en grad-text font-bold #}
|
||||
<div class="relative grid grid-cols-3 gap-0">
|
||||
<div class="text-center py-2.5 px-1" style="border-right:1px solid rgba(192,38,211,0.10);">
|
||||
<p class="font-mono font-black text-base text-white leading-none">0 ms</p>
|
||||
<p class="text-[8px] mt-1 uppercase tracking-wider" style="color:rgba(192,38,211,0.65);">latence</p>
|
||||
<div class="text-center py-3 px-1" style="border-right:1px solid rgba(192,38,211,0.10);">
|
||||
<p class="font-mono font-black text-lg leading-none grad-text">0 ms</p>
|
||||
<p class="text-[10px] mt-1 uppercase tracking-wider font-semibold" style="color:rgba(192,38,211,0.70);">latence</p>
|
||||
</div>
|
||||
<div class="text-center py-2.5 px-1" style="border-right:1px solid rgba(192,38,211,0.10);">
|
||||
<p class="font-mono font-black text-base leading-none" style="color:#10b981;">100 %</p>
|
||||
<p class="text-[8px] mt-1 uppercase tracking-wider" style="color:rgba(192,38,211,0.65);">privé</p>
|
||||
<div class="text-center py-3 px-1" style="border-right:1px solid rgba(192,38,211,0.10);">
|
||||
<p class="font-mono font-black text-lg leading-none" style="color:#10b981;">100 %</p>
|
||||
<p class="text-[10px] mt-1 uppercase tracking-wider font-semibold" style="color:rgba(192,38,211,0.70);">privé</p>
|
||||
</div>
|
||||
<div class="text-center py-2.5 px-1">
|
||||
<p class="font-mono font-black text-base leading-none" style="color:#e879f9;">24/7</p>
|
||||
<p class="text-[8px] mt-1 uppercase tracking-wider" style="color:rgba(192,38,211,0.65);">dispo</p>
|
||||
<div class="text-center py-3 px-1">
|
||||
<p class="font-mono font-black text-lg leading-none grad-text">24/7</p>
|
||||
<p class="text-[10px] mt-1 uppercase tracking-wider font-semibold" style="color:rgba(192,38,211,0.70);">dispo</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Divider #}
|
||||
<div style="height:1px;background:linear-gradient(90deg, transparent, rgba(192,38,211,0.22), transparent);" aria-hidden="true"></div>
|
||||
|
||||
{# Sovereignty bullets — chacun avec icon dans cercle #}
|
||||
<div class="relative px-4 py-3 flex flex-col gap-2.5">
|
||||
{# Sovereignty bullets — chacun avec icon dans cercle 20×20 brand-b3/[0.15] #}
|
||||
<div class="relative p-5 flex flex-col gap-3">
|
||||
<div class="flex items-start gap-2.5">
|
||||
<span class="rounded-md flex items-center justify-center flex-shrink-0 mt-0.5"
|
||||
style="width:18px;height:18px;background:rgba(192,38,211,0.14);border:1px solid rgba(192,38,211,0.30);"
|
||||
<span class="rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 bg-brand-b3/[0.15] border border-brand-b3/30"
|
||||
style="width:20px;height:20px;"
|
||||
aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand-b3" style="width:10px;height:10px;opacity:0.85;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand-b3" style="width:11px;height:11px;">
|
||||
<rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/>
|
||||
<line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="text-[11px] leading-snug" style="color:rgba(255,255,255,0.88);"><strong>Données hébergées sur VOS serveurs</strong> · jamais partagées</span>
|
||||
<span class="text-[11px] leading-snug text-white/90"><strong class="font-bold">Données hébergées sur VOS serveurs</strong> · jamais partagées</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2.5">
|
||||
<span class="rounded-md flex items-center justify-center flex-shrink-0 mt-0.5"
|
||||
style="width:18px;height:18px;background:rgba(192,38,211,0.14);border:1px solid rgba(192,38,211,0.30);"
|
||||
<span class="rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 bg-brand-b3/[0.15] border border-brand-b3/30"
|
||||
style="width:20px;height:20px;"
|
||||
aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand-b3" style="width:10px;height:10px;opacity:0.85;">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand-b3" style="width:11px;height:11px;">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="text-[11px] leading-snug" style="color:rgba(255,255,255,0.72);">Zéro connexion OpenAI · Google · Microsoft</span>
|
||||
<span class="text-[11px] leading-snug text-white/75">Zéro connexion OpenAI · Google · Microsoft</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-2.5">
|
||||
<span class="rounded-md flex items-center justify-center flex-shrink-0 mt-0.5"
|
||||
style="width:18px;height:18px;background:rgba(192,38,211,0.14);border:1px solid rgba(192,38,211,0.30);"
|
||||
<span class="rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 bg-brand-b3/[0.15] border border-brand-b3/30"
|
||||
style="width:20px;height:20px;"
|
||||
aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" stroke="none" class="text-brand-b3" style="width:10px;height:10px;opacity:0.85;"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" stroke="none" class="text-brand-b3" style="width:11px;height:11px;"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||||
</span>
|
||||
<span class="text-[11px] leading-snug" style="color:rgba(255,255,255,0.72);">Inférence hors-ligne · résultats en secondes</span>
|
||||
<span class="text-[11px] leading-snug text-white/75">Inférence hors-ligne · résultats en secondes</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1131,15 +1159,15 @@
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<template x-for="i in [1,2,3,4,5,6]" :key="i">
|
||||
<button type="button" @click="handleManualSelect(i)"
|
||||
class="flex flex-col items-center gap-1 rounded-xl py-3 px-1 outline-none transition-all focus-visible:ring-2 focus-visible:ring-white/40"
|
||||
:style="`border: 1px solid ${selectedFeature === i ? FEATURES[i].color + '60' : 'rgba(255,255,255,0.08)'}; background-color: ${selectedFeature === i ? FEATURES[i].color + '14' : 'rgba(8,12,24,0.85)'}; box-shadow: ${selectedFeature === i ? '0 0 16px ' + FEATURES[i].color + '30, inset 0 0 12px ' + FEATURES[i].color + '10' : 'none'}; cursor: pointer;`"
|
||||
class="flex flex-col items-center gap-1.5 rounded-xl py-3 px-2 outline-none transition-all focus-visible:ring-2 focus-visible:ring-white/40"
|
||||
:style="`border: 1px solid ${selectedFeature === i ? FEATURES[i].color + '60' : 'rgba(255,255,255,0.10)'}; background-color: ${selectedFeature === i ? FEATURES[i].color + '14' : 'rgba(8,12,24,0.85)'}; box-shadow: ${selectedFeature === i ? '0 0 16px ' + FEATURES[i].color + '30, inset 0 0 12px ' + FEATURES[i].color + '10' : 'none'}; cursor: pointer;`"
|
||||
:aria-pressed="selectedFeature === i ? 'true' : 'false'"
|
||||
:aria-label="`Sélectionner : ${FEATURES[i].title}`">
|
||||
<span :style="`color: ${selectedFeature === i ? FEATURES[i].color : 'rgba(255,255,255,0.50)'}; filter: ${selectedFeature === i ? 'drop-shadow(0 0 6px ' + FEATURES[i].color + 'BB)' : 'none'}; transform: scale(${selectedFeature === i ? 1.25 : 1}) translateY(${selectedFeature === i ? -1 : 0}px); transition: all 0.2s; display:inline-block;`">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;" aria-hidden="true" x-html="featureIconPath(i)"></svg>
|
||||
<span :style="`color: ${selectedFeature === i ? FEATURES[i].color : 'rgba(255,255,255,0.55)'}; filter: ${selectedFeature === i ? 'drop-shadow(0 0 6px ' + FEATURES[i].color + 'BB)' : 'none'}; transform: scale(${selectedFeature === i ? 1.20 : 1}) translateY(${selectedFeature === i ? -1 : 0}px); transition: all 0.2s; display:inline-block;`">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px;" aria-hidden="true" x-html="featureIconPath(i)"></svg>
|
||||
</span>
|
||||
<span class="text-[8px] font-medium text-center leading-tight"
|
||||
:style="`color: ${selectedFeature === i ? 'rgba(255,255,255,0.95)' : 'rgba(255,255,255,0.60)'}; transition: color 0.2s;`"
|
||||
<span class="text-[10px] font-semibold text-center leading-tight"
|
||||
:style="`color: ${selectedFeature === i ? 'rgba(255,255,255,0.95)' : 'rgba(255,255,255,0.65)'}; transition: color 0.2s;`"
|
||||
x-text="FEATURES[i].title"></span>
|
||||
</button>
|
||||
</template>
|
||||
@@ -1271,8 +1299,8 @@
|
||||
/* Mode 3 — Langues : grille 100 codes (ripple depuis centre + highlight aléatoire) */
|
||||
function langModeData() {
|
||||
return {
|
||||
/* Cycle uniquement entre brand-b1 / brand-b2 / brand-b3 + déclinaisons */
|
||||
LANG_COLORS: ['#06b6d4','#2563eb','#c026d3','#0891b2','#1d4ed8','#a21caf','#06b6d4','#2563eb'],
|
||||
/* Cycle EXCLUSIVEMENT entre brand-b1 / brand-b2 / brand-b3 (palette canonique stricte) */
|
||||
LANG_COLORS: ['#2563eb','#06b6d4','#c026d3','#06b6d4','#2563eb','#c026d3','#2563eb','#06b6d4'],
|
||||
LANGS: [
|
||||
'FR','EN','ES','DE','PT','IT','NL','PL','ZH','JA',
|
||||
'KO','AR','RU','HI','TR','VI','TH','SV','DA','NO',
|
||||
@@ -1301,17 +1329,17 @@
|
||||
};
|
||||
}
|
||||
|
||||
/* Mode 4 — Exports : 7 file types staggered 90ms (CSS-only) */
|
||||
/* Mode 4 — Exports : 7 file types staggered 90ms (CSS-only) — palette brand stricte */
|
||||
function expModeData() {
|
||||
return {
|
||||
FILE_TYPES: [
|
||||
{ ext: 'DOCX', bg: '#2563eb', fg: '#fff', sym: 'W' }, /* brand-b1 blue */
|
||||
{ ext: 'PDF', bg: '#dc2626', fg: '#fff', sym: 'PDF' }, /* red sémantique conservé pour fichier PDF */
|
||||
{ ext: 'SRT', bg: '#c026d3', fg: '#fff', sym: 'CC' }, /* brand-b3 fuchsia */
|
||||
{ ext: 'VTT', bg: '#9333ea', fg: '#f5d0fe', sym: 'CC' }, /* purple-600 (déclinaison b3) */
|
||||
{ ext: 'TXT', bg: '#374151', fg: '#9CA3AF', sym: '≡' }, /* gray-700 neutre */
|
||||
{ ext: 'JSON', bg: '#0e7490', fg: '#67e8f9', sym: '{}' }, /* cyan-700 (déclinaison b2) */
|
||||
{ ext: 'MD', bg: '#1e40af', fg: '#93c5fd', sym: '#' } /* blue-700 (déclinaison b1) */
|
||||
{ ext: 'DOCX', bg: '#2563eb', fg: '#ffffff', sym: 'W' }, /* brand-b1 blue */
|
||||
{ ext: 'PDF', bg: '#dc2626', fg: '#ffffff', sym: 'PDF' }, /* red sémantique conservé pour fichier PDF */
|
||||
{ ext: 'SRT', bg: '#c026d3', fg: '#ffffff', sym: 'CC' }, /* brand-b3 fuchsia */
|
||||
{ ext: 'VTT', bg: '#c026d3', fg: '#ffffff', sym: 'CC' }, /* brand-b3 fuchsia */
|
||||
{ ext: 'TXT', bg: '#374151', fg: '#d1d5db', sym: '≡' }, /* gray-700 neutre (sémantique TXT raw) */
|
||||
{ ext: 'JSON', bg: '#06b6d4', fg: '#ffffff', sym: '{}' }, /* brand-b2 aqua */
|
||||
{ ext: 'MD', bg: '#2563eb', fg: '#ffffff', sym: '#' } /* brand-b1 blue */
|
||||
]
|
||||
};
|
||||
}
|
||||
@@ -1320,8 +1348,8 @@
|
||||
function usersModeData() {
|
||||
return {
|
||||
MAX: 20, count: 1, cycle: 0, _iv: null,
|
||||
/* Uniquement brand-b1 / brand-b2 / brand-b3 + déclinaisons */
|
||||
USER_COLORS: ['#c026d3', '#06b6d4', '#2563eb', '#a21caf', '#0891b2'],
|
||||
/* EXCLUSIVEMENT brand-b1 / brand-b2 / brand-b3 (palette canonique stricte) */
|
||||
USER_COLORS: ['#c026d3', '#06b6d4', '#2563eb'],
|
||||
init() {
|
||||
if (this._iv) clearInterval(this._iv);
|
||||
this.count = 1;
|
||||
|
||||
@@ -254,6 +254,25 @@ def test_fonctionnalites_how_it_works_reactor_section():
|
||||
assert 'cloud' in body, "Missing stats row 'cloud'"
|
||||
assert 'Voir une démo' in body, "Missing demo CTA link"
|
||||
|
||||
# ── HYPER PRO polish 2026-04-29 (audit purge non-brand hex + uniformization) ──
|
||||
# Brand canonical palette ONLY in JS color tables (no purple-600/cyan-700/blue-700/...)
|
||||
js_section = body[body.find("function dictiaDashboard()"):body.find("</script>", body.find("function dictiaDashboard()"))]
|
||||
forbidden_hex = ['#9333ea', '#1d4ed8', '#a21caf', '#0e7490', '#0891b2',
|
||||
'#1e40af', '#67e8f9', '#93c5fd', '#f5d0fe', '#e879f9',
|
||||
'#A78BFA', '#22D3EE', '#6B9FFF', '#34D399', '#F59E0B',
|
||||
'#7C3AED', '#5B21B6', '#065F46', '#1C3A5E']
|
||||
for hx in forbidden_hex:
|
||||
assert hx not in body, f"Forbidden non-brand hex {hx} found in fonctionnalites — must purge"
|
||||
|
||||
# Inner screen seam (effet "écran encastré")
|
||||
assert 'dictia-phone-screen-seam' in body, "Missing inner screen seam (encastré effect)"
|
||||
# Uniform feature info card — bg-white/[0.06] + accent border-left
|
||||
assert 'bg-white/[0.06]' in body, "Missing uniform white/0.06 bg on feature card"
|
||||
# Sovereignty bullets : icon dans cercle 20×20 brand-b3/[0.15]
|
||||
assert 'bg-brand-b3/[0.15]' in body, "Missing brand-b3 circle bg on sovereignty bullets"
|
||||
# Performance metrics : 3 cells with grad-text for 0ms / 24/7
|
||||
assert 'grad-text' in body, "Missing grad-text on metrics"
|
||||
|
||||
|
||||
def test_fonctionnalites_export_formats_section():
|
||||
client = app.test_client()
|
||||
|
||||
Reference in New Issue
Block a user