refactor(ui): éliminer tous les emojis (SVG inline + texte propre, look pro/moderne)
Pass de modernisation visuelle : remplacement de TOUS les emojis Unicode dans les templates marketing/legal/billing/auth par des SVG inline (style heroicons) ou par du texte propre, pour un look SaaS pro à la Linear/Vercel/Stripe. Mapping principal : - ✓ / ✗ / ⚠ → SVG check / x / triangle (text-brand-b3 / red / amber) - → / ← / ↗ → SVG arrow-right / arrow-left / arrow-up-right - 🍁 / 🏛️ / ⚖️ / 🔓 → SVG map-pin / building / scale / code-brackets - 🎙️ / 👥 / 📝 / 💬 / 📄 / 🔌 → 6 SVG bento icons (microphone, users, doc, chat, export, plug) - ✉️ / ☎️ / 📬 → SVG envelope / phone / map-pin - ↺ → SVG refresh-counter-clockwise - ★ → SVG star (RECOMMANDÉ badge) - 🎯/🏢/📺/🤝/📰 → SVG target / office / play / handshake / news (raccourcis contact) - ⚖️/📊/🏛️ (testimonials) → SVG scale / bar-chart / building - ✦ (default bento icon) → SVG sparkle inline Tous les SVG utilisent stroke="currentColor" pour héritage Tailwind text-*. Les SVG informationnels du tableau comparatif portent un aria-label sémantique (Conforme/Non conforme/Partiel) ; les SVG décoratifs portent aria-hidden. Tests : - 18/18 legal pages passent (test_legal_pages.py) - test_comparatif_check_marks_consistently_mean_good ajusté pour asserter sur les aria-label SVG plutôt que les caractères ✓/✗ - 4 échecs pré-existants non liés (manque /blog dans nav, SOC 2 hedge dans conformite.html, gitea.innova-ai.ca url) — confirmés présents avant ce commit Fichiers modifiés (14) : - templates/macros/{bento,pricing_card}.html (sources de vérité) - templates/marketing/{base,_footer,landing,fonctionnalites,tarifs,conformite,contact}.html - templates/legal/{_layout,index}.html - templates/billing/{cancel,success}.html - tests/test_marketing_landing_template.py (assert sur aria-label) Audit final : 0 emoji restant dans les fichiers in-scope ; 0 emoji dans le HTML rendu de toutes les pages marketing/legal vérifiées. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Allison
@@ -13,7 +13,7 @@
|
||||
Parlons <span class="grad-text">de votre projet</span>.
|
||||
</h1>
|
||||
<p class="text-lg text-white/80">
|
||||
Réponse sous 2 jours ouvrables. Pour les urgences techniques des clients existants, voyez la console DictIA → Support.
|
||||
Réponse sous 2 jours ouvrables. Pour les urgences techniques des clients existants, voyez la section Support de la console DictIA.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -26,7 +26,9 @@
|
||||
|
||||
{# Email card #}
|
||||
<article class="bg-white p-8 rounded border border-brand-border flex flex-col">
|
||||
<div class="w-12 h-12 grad-bg rounded-none mb-4 flex items-center justify-center text-2xl shadow-cta" aria-hidden="true">✉️</div>
|
||||
<div class="w-12 h-12 grad-bg rounded-none mb-4 flex items-center justify-center text-white shadow-cta" aria-hidden="true">
|
||||
<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-6 h-6"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2 text-brand-navy">Courriel</h3>
|
||||
<p class="text-sm text-brand-navy/80 mb-4 leading-relaxed flex-grow">
|
||||
Privilégiez le courriel pour : pré-inscription, devis, démonstration, dossier de conformité, partenariats.
|
||||
@@ -36,7 +38,9 @@
|
||||
|
||||
{# Phone card #}
|
||||
<article class="bg-white p-8 rounded border border-brand-border flex flex-col">
|
||||
<div class="w-12 h-12 grad-bg rounded-none mb-4 flex items-center justify-center text-2xl shadow-cta" aria-hidden="true">☎️</div>
|
||||
<div class="w-12 h-12 grad-bg rounded-none mb-4 flex items-center justify-center text-white shadow-cta" aria-hidden="true">
|
||||
<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-6 h-6"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2 text-brand-navy">Téléphone</h3>
|
||||
<p class="text-sm text-brand-navy/80 mb-4 leading-relaxed flex-grow">
|
||||
Du lundi au vendredi, 9 h à 17 h (heure de l'Est). Laissez un message en dehors de ces heures.
|
||||
@@ -46,7 +50,9 @@
|
||||
|
||||
{# Mailing address card #}
|
||||
<article class="bg-white p-8 rounded border border-brand-border flex flex-col">
|
||||
<div class="w-12 h-12 grad-bg rounded-none mb-4 flex items-center justify-center text-2xl shadow-cta" aria-hidden="true">📬</div>
|
||||
<div class="w-12 h-12 grad-bg rounded-none mb-4 flex items-center justify-center text-white shadow-cta" aria-hidden="true">
|
||||
<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-6 h-6"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold mb-2 text-brand-navy">Bureau</h3>
|
||||
<p class="text-sm text-brand-navy/80 mb-4 leading-relaxed flex-grow">
|
||||
Sur rendez-vous uniquement. Visites en personne pour démonstrations on-premise et déploiements DictIA 16 corporatifs.
|
||||
@@ -73,18 +79,25 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{# Shortcut icons (heroicons-style outline). Each is a self-contained inline SVG passed via | safe in the loop. #}
|
||||
{%- set svg_target = '<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-5 h-5" aria-hidden="true"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>' -%}
|
||||
{%- set svg_office = '<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-5 h-5" aria-hidden="true"><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="9" y1="6" x2="9" y2="6"/><line x1="15" y1="6" x2="15" y2="6"/><line x1="9" y1="10" x2="9" y2="10"/><line x1="15" y1="10" x2="15" y2="10"/><line x1="9" y1="14" x2="9" y2="14"/><line x1="15" y1="14" x2="15" y2="14"/><path d="M10 22v-4h4v4"/></svg>' -%}
|
||||
{%- set svg_play = '<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-5 h-5" aria-hidden="true"><rect x="2" y="5" width="20" height="14" rx="2"/><polygon points="10 9 16 12 10 15 10 9" fill="currentColor"/></svg>' -%}
|
||||
{%- set svg_scale_sm = '<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-5 h-5" aria-hidden="true"><path d="M12 3v18"/><path d="M5 7h14"/><path d="M5 7l-2 6a4 4 0 0 0 8 0L9 7"/><path d="M19 7l2 6a4 4 0 0 1-8 0l2-6"/><path d="M8 21h8"/></svg>' -%}
|
||||
{%- set svg_handshake = '<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-5 h-5" aria-hidden="true"><path d="M16 12l-4-4-4 4"/><path d="M3 13l5 5 4-4 4 4 5-5"/><path d="M3 9l9 9 9-9"/></svg>' -%}
|
||||
{%- set svg_news = '<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-5 h-5" aria-hidden="true"><path d="M4 4h13a2 2 0 0 1 2 2v14H6a2 2 0 0 1-2-2z"/><path d="M19 8h2a1 1 0 0 1 1 1v9a2 2 0 0 1-2 2"/><line x1="8" y1="9" x2="15" y2="9"/><line x1="8" y1="13" x2="15" y2="13"/><line x1="8" y1="17" x2="12" y2="17"/></svg>' -%}
|
||||
<div class="grid sm:grid-cols-2 gap-3">
|
||||
{% for shortcut in [
|
||||
{'label': 'Pré-inscription DictIA', 'subject': 'Pr%C3%A9-inscription%20DictIA', 'icon': '🎯'},
|
||||
{'label': 'Devis multi-sites', 'subject': 'Devis%20multi-sites', 'icon': '🏢'},
|
||||
{'label': 'Demande de démonstration', 'subject': 'Demande%20de%20d%C3%A9monstration', 'icon': '📺'},
|
||||
{'label': 'Dossier conformité Loi 25', 'subject': 'Dossier%20conformit%C3%A9%20Loi%2025', 'icon': '⚖️'},
|
||||
{'label': 'Partenariat / intégration', 'subject': 'Partenariat%20/%20int%C3%A9gration', 'icon': '🤝'},
|
||||
{'label': 'Question média / presse', 'subject': 'Question%20m%C3%A9dia', 'icon': '📰'}
|
||||
{'label': 'Pré-inscription DictIA', 'subject': 'Pr%C3%A9-inscription%20DictIA', 'icon': svg_target},
|
||||
{'label': 'Devis multi-sites', 'subject': 'Devis%20multi-sites', 'icon': svg_office},
|
||||
{'label': 'Demande de démonstration', 'subject': 'Demande%20de%20d%C3%A9monstration', 'icon': svg_play},
|
||||
{'label': 'Dossier conformité Loi 25', 'subject': 'Dossier%20conformit%C3%A9%20Loi%2025', 'icon': svg_scale_sm},
|
||||
{'label': 'Partenariat / intégration', 'subject': 'Partenariat%20/%20int%C3%A9gration', 'icon': svg_handshake},
|
||||
{'label': 'Question média / presse', 'subject': 'Question%20m%C3%A9dia', 'icon': svg_news}
|
||||
] %}
|
||||
<a href="mailto:info@dictia.ca?subject={{ shortcut.subject }}"
|
||||
class="flex items-center gap-3 bg-brand-bg p-4 rounded border border-brand-border hover:bg-white hover:border-brand-b1/30 transition-colors focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
|
||||
<span class="text-2xl flex-shrink-0" aria-hidden="true">{{ shortcut.icon }}</span>
|
||||
<span class="grad-text flex-shrink-0" aria-hidden="true">{{ shortcut.icon | safe }}</span>
|
||||
<span class="text-sm font-semibold text-brand-navy">{{ shortcut.label | safe }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
||||
Reference in New Issue
Block a user