sucupira
93c577c5d3
Snapshot de l'existant avant application du playbook OKI : background shader Three.js, carte graphe 3D, timeline statique.
498 lines
13 KiB
Svelte
498 lines
13 KiB
Svelte
<script lang="ts">
|
|
import Icon from '$lib/components/pages/Icon.svelte';
|
|
import FeatureGrid from '$lib/components/pages/FeatureGrid.svelte';
|
|
import type { FeatureItem } from '$lib/components/pages/FeatureGrid.svelte';
|
|
import StepsGrid from '$lib/components/pages/StepsGrid.svelte';
|
|
import type { StepItem } from '$lib/components/pages/StepsGrid.svelte';
|
|
import CompareTable from '$lib/components/pages/CompareTable.svelte';
|
|
import type { CompareRow } from '$lib/components/pages/CompareTable.svelte';
|
|
import type { IconName } from '$lib/components/pages/Icon.svelte';
|
|
|
|
const pageStats = [
|
|
{ value: '1M+', label: 'Téléchargements' },
|
|
{ value: '100+', label: 'Pays' },
|
|
{ value: 'AGPL-3.0', label: 'Licence' },
|
|
{ value: '100%', label: 'Open source' }
|
|
];
|
|
|
|
const steps: StepItem[] = [
|
|
{
|
|
step: '01',
|
|
icon: 'key',
|
|
title: "L'application crée vos clés",
|
|
description:
|
|
'Votre appareil génère des clés cryptographiques. Aucune information personnelle requise.'
|
|
},
|
|
{
|
|
step: '02',
|
|
icon: 'users',
|
|
title: 'Connectez via des liens',
|
|
description:
|
|
"Chaque contact utilise un lien d'invitation unique et jetable. Partagez par QR code, URL ou message."
|
|
},
|
|
{
|
|
step: '03',
|
|
icon: 'message',
|
|
title: 'Communiquez en privé',
|
|
description:
|
|
'Messages, groupes et appels chiffrés de bout en bout. Vos métadonnées restent privées.'
|
|
}
|
|
];
|
|
|
|
const features: FeatureItem[] = [
|
|
{
|
|
icon: 'user-x',
|
|
title: 'Zéro identifiant',
|
|
description:
|
|
"Aucun numéro de téléphone, email, nom d'utilisateur ou mot de passe. Vos contacts ne se connaissent pas entre eux."
|
|
},
|
|
{
|
|
icon: 'eye-off',
|
|
title: 'Métadonnées minimisées',
|
|
description:
|
|
'SimpleX ne collecte pas vos métadonnées. Pas de serveur central qui connaît votre réseau social.'
|
|
},
|
|
{
|
|
icon: 'lock',
|
|
title: 'Chiffrement E2E de nouvelle génération',
|
|
description:
|
|
'Double Ratchet Algorithm (comme Signal) + chiffrement post-quantique. Même les serveurs ne peuvent pas lire vos messages.'
|
|
},
|
|
{
|
|
icon: 'server-off',
|
|
title: 'Sans serveur de métadonnées',
|
|
description:
|
|
"Contrairement à Signal ou WhatsApp, il n'y a pas de serveur central qui connaît qui parle avec qui."
|
|
},
|
|
{
|
|
icon: 'fingerprint',
|
|
title: 'Connexions anonymes',
|
|
description:
|
|
"Chaque contact utilise un lien d'invitation unique jetable. Votre identité n'est jamais révélée au serveur."
|
|
},
|
|
{
|
|
icon: 'globe',
|
|
title: 'Réseau décentralisé',
|
|
description:
|
|
'Utilisez les serveurs publics gratuits ou hébergez le vôtre. Aucun point unique de défaillance.'
|
|
},
|
|
{
|
|
icon: 'message',
|
|
title: 'Groupes de grande taille',
|
|
description:
|
|
'Groupes chiffrés de plusieurs centaines de membres avec administration décentralisée.'
|
|
},
|
|
{
|
|
icon: 'phone',
|
|
title: 'Appels vocaux et vidéo',
|
|
description:
|
|
'Appels chiffrés de bout en bout directement entre appareils, sans passer par un serveur.'
|
|
}
|
|
];
|
|
|
|
const comparison: CompareRow[] = [
|
|
{
|
|
aspect: 'Identifiants',
|
|
values: ['Aucun', 'Numéro de téléphone', 'Numéro de téléphone', "Nom d'utilisateur"]
|
|
},
|
|
{
|
|
aspect: 'Chiffrement',
|
|
values: ['Double Ratchet + PQ', 'Double Ratchet', 'Signal Protocol', 'Olm/Megolm']
|
|
},
|
|
{
|
|
aspect: 'Métadonnées',
|
|
values: ['Minimisées', 'Collectées (contacts)', 'Collectées (Meta)', 'Sur le serveur']
|
|
},
|
|
{
|
|
aspect: 'Serveur',
|
|
values: ['Sans métadonnées', 'Central (Signal LLC)', 'Central (Meta)', 'Instance choisie']
|
|
},
|
|
{
|
|
aspect: 'Code source',
|
|
values: ['AGPL-3.0 (100%)', 'GPL-3.0 (client)', 'Fermé', 'Apache-2.0']
|
|
},
|
|
{
|
|
aspect: 'Fédération',
|
|
values: ['Non (intentionnel)', 'Non', 'Non', 'Oui (fédéré)']
|
|
}
|
|
];
|
|
|
|
const useCases: { icon: IconName; title: string; description: string }[] = [
|
|
{
|
|
icon: 'eye-off',
|
|
title: 'Journalisme',
|
|
description: 'Protection des sources avec des connexions anonymes et sans métadonnées.'
|
|
},
|
|
{
|
|
icon: 'shield',
|
|
title: 'Activisme',
|
|
description: 'Communication résistante à la surveillance étatique ou corporative.'
|
|
},
|
|
{
|
|
icon: 'users',
|
|
title: 'Communautés',
|
|
description: 'Groupes privés avec administration décentralisée et grande capacité.'
|
|
},
|
|
{
|
|
icon: 'lock',
|
|
title: 'Entreprise',
|
|
description: 'Messagerie interne auto-hébergée avec confidentialité garantie.'
|
|
}
|
|
];
|
|
|
|
const chips = ['Messagerie privée', 'Sans métadonnées', 'Complément Fediverse', 'Chiffrement PQ'];
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>SimpleX Chat — Le Grand Atlas du Fédiverse</title>
|
|
<meta
|
|
name="description"
|
|
content="SimpleX Chat, la première messagerie sans identifiants d'utilisateur : chiffrement de bout en bout post-quantique, métadonnées minimisées, comparaison avec Signal, WhatsApp et Matrix."
|
|
/>
|
|
</svelte:head>
|
|
|
|
<div class="page">
|
|
<!-- Hero -->
|
|
<section class="hero" aria-labelledby="simplex-title">
|
|
<div class="center stack hero-inner">
|
|
<p class="badge">
|
|
<Icon name="shield" size={16} />
|
|
<span>Messagerie de nouvelle génération</span>
|
|
</p>
|
|
<h1 id="simplex-title">La messagerie <span class="accent-text">sans identifiants</span></h1>
|
|
<p class="lede">
|
|
SimpleX Chat est la première messagerie au monde
|
|
<strong>sans identifiants d'utilisateur</strong>. Pas de numéro de téléphone, pas d'email,
|
|
pas de nom d'utilisateur. Uniquement des connexions anonymes avec chiffrement de bout en
|
|
bout post-quantique.
|
|
</p>
|
|
<div class="cluster cta">
|
|
<a class="btn btn-primary" href="https://simplex.chat/" target="_blank" rel="noopener noreferrer">
|
|
<Icon name="external" size={16} />
|
|
Site officiel
|
|
<span class="visually-hidden">(nouvel onglet)</span>
|
|
</a>
|
|
<a
|
|
class="btn btn-ghost"
|
|
href="https://github.com/simplex-chat/simplex-chat"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<Icon name="github" size={16} />
|
|
Code source
|
|
<span class="visually-hidden">(nouvel onglet)</span>
|
|
</a>
|
|
</div>
|
|
|
|
<ul class="grid hero-stats" role="list" style:--grid-min="9rem">
|
|
{#each pageStats as stat (stat.label)}
|
|
<li class="stat-card">
|
|
<span class="stat-value">{stat.value}</span>
|
|
<span class="stat-label">{stat.label}</span>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Comment ça marche -->
|
|
<section class="section section-alt" aria-labelledby="how-title">
|
|
<div class="center stack">
|
|
<h2 id="how-title" class="section-title">Comment ça <span class="accent-text">marche</span> ?</h2>
|
|
<StepsGrid items={steps} />
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pourquoi SimpleX -->
|
|
<section class="section" aria-labelledby="why-title">
|
|
<div class="center stack">
|
|
<h2 id="why-title" class="section-title">Pourquoi <span class="accent-text">SimpleX</span> ?</h2>
|
|
<FeatureGrid items={features} min="15rem" />
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Tableau comparatif -->
|
|
<section class="section section-alt" aria-labelledby="compare-title">
|
|
<div class="center stack" style:--center-max="62rem">
|
|
<h2 id="compare-title" class="section-title">
|
|
SimpleX <span class="vs">vs</span> les autres
|
|
</h2>
|
|
<CompareTable
|
|
caption="SimpleX se distingue des messageries centralisées comme des outils fédérés : aucun identifiant, métadonnées minimisées."
|
|
columns={['SimpleX', 'Signal', 'WhatsApp', 'Matrix']}
|
|
rows={comparison}
|
|
highlight={0}
|
|
ariaLabel="Tableau comparatif SimpleX, Signal, WhatsApp et Matrix — faire défiler horizontalement si nécessaire"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Cas d'usage -->
|
|
<section class="section" aria-labelledby="usecases-title">
|
|
<div class="center stack">
|
|
<h2 id="usecases-title" class="section-title">Cas d'<span class="accent-text">usage</span></h2>
|
|
<div class="usecases-cq">
|
|
<ul class="grid" role="list" style:--grid-min="15rem">
|
|
{#each useCases as useCase (useCase.title)}
|
|
<li class="usecase-card">
|
|
<span class="usecase-icon"><Icon name={useCase.icon} size={24} /></span>
|
|
<h3>{useCase.title}</h3>
|
|
<p>{useCase.description}</p>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SimpleX et le Fédiverse -->
|
|
<section class="section section-deep" aria-labelledby="fediverse-title">
|
|
<div class="center" style:--center-max="60rem">
|
|
<article class="fediverse-panel stack">
|
|
<h2 id="fediverse-title">SimpleX et le <span class="accent-text">Fédiverse</span></h2>
|
|
<p>
|
|
SimpleX Chat n'est pas fédéré au sens ActivityPub — et c'est
|
|
<strong>intentionnel</strong>. L'absence de fédération est un choix de design pour
|
|
préserver la confidentialité.
|
|
</p>
|
|
<p>
|
|
Cependant, SimpleX complète parfaitement le Fédiverse : utilisez Mastodon/Pleroma pour
|
|
votre présence sociale publique, et SimpleX pour vos communications privées sensibles.
|
|
</p>
|
|
<ul class="cluster chips" role="list">
|
|
{#each chips as chip (chip)}
|
|
<li class="chip mono">{chip}</li>
|
|
{/each}
|
|
</ul>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<style>
|
|
.page {
|
|
--page-accent: var(--accent-4);
|
|
--page-accent-text: var(--accent-4-text);
|
|
--page-accent-strong: var(--accent-4-strong);
|
|
background: var(--surface);
|
|
}
|
|
|
|
/* ---------- Hero ---------- */
|
|
|
|
.hero {
|
|
padding-block-start: calc(var(--header-h) + var(--space-6));
|
|
padding-block-end: var(--space-6);
|
|
}
|
|
|
|
.hero-inner {
|
|
align-items: center;
|
|
text-align: center;
|
|
--stack-gap: var(--space-4);
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2) var(--space-3);
|
|
border-radius: var(--radius-pill);
|
|
border: 1px solid color-mix(in oklch, var(--page-accent) 40%, transparent);
|
|
background: color-mix(in oklch, var(--page-accent) 12%, transparent);
|
|
color: var(--page-accent-text);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
h1 {
|
|
max-inline-size: 22ch;
|
|
}
|
|
|
|
.accent-text {
|
|
color: var(--page-accent-text);
|
|
}
|
|
|
|
.lede {
|
|
color: var(--ink-soft);
|
|
font-size: var(--text-2);
|
|
max-inline-size: 58ch;
|
|
}
|
|
|
|
.lede strong {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.cta {
|
|
justify-content: center;
|
|
--cluster-gap: var(--space-3);
|
|
}
|
|
|
|
.hero-stats {
|
|
inline-size: min(100%, 34rem);
|
|
margin-block-start: var(--space-3);
|
|
}
|
|
|
|
.stat-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
padding: var(--space-3);
|
|
background: var(--glass);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: var(--radius-2);
|
|
}
|
|
|
|
.stat-value {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-2);
|
|
font-weight: 700;
|
|
color: var(--page-accent-text);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.75rem;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
/* ---------- Sections ---------- */
|
|
|
|
.section {
|
|
padding-block: var(--space-6);
|
|
}
|
|
|
|
.section-alt {
|
|
background: var(--ocean);
|
|
}
|
|
|
|
.section-deep {
|
|
background: var(--abyss);
|
|
}
|
|
|
|
.section > .center {
|
|
--stack-gap: var(--space-5);
|
|
}
|
|
|
|
.section-title {
|
|
text-align: center;
|
|
}
|
|
|
|
.vs {
|
|
color: var(--muted);
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* ---------- Boutons ---------- */
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
min-block-size: var(--tap-target);
|
|
padding-inline: var(--space-4);
|
|
border-radius: var(--radius-pill);
|
|
font-weight: 600;
|
|
font-size: var(--text-small);
|
|
text-decoration: none;
|
|
transition: transform var(--duration-1) var(--ease-out);
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--page-accent-strong);
|
|
color: var(--on-accent);
|
|
}
|
|
|
|
.btn-ghost {
|
|
border: 1px solid var(--glass-border);
|
|
background: var(--glass);
|
|
color: var(--ink);
|
|
}
|
|
|
|
/* ---------- Cas d'usage ---------- */
|
|
|
|
.usecases-cq {
|
|
container-type: inline-size;
|
|
}
|
|
|
|
.usecase-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-4);
|
|
background: var(--glass);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: var(--radius-2);
|
|
}
|
|
|
|
.usecase-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: 3rem;
|
|
block-size: 3rem;
|
|
border-radius: var(--radius-2);
|
|
color: var(--page-accent-text);
|
|
background: color-mix(in oklch, var(--page-accent) 14%, transparent);
|
|
}
|
|
|
|
.usecase-card h3 {
|
|
font-size: var(--text-1);
|
|
}
|
|
|
|
.usecase-card p {
|
|
font-size: var(--text-small);
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
@container (min-width: 40rem) {
|
|
.usecase-card {
|
|
align-items: flex-start;
|
|
text-align: start;
|
|
}
|
|
}
|
|
|
|
/* ---------- Panel Fédiverse ---------- */
|
|
|
|
.fediverse-panel {
|
|
--stack-gap: var(--space-4);
|
|
padding: var(--space-5);
|
|
background: var(--glass);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: var(--radius-3);
|
|
}
|
|
|
|
.fediverse-panel p {
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.fediverse-panel p strong {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.chips {
|
|
--cluster-gap: var(--space-2);
|
|
}
|
|
|
|
.chip {
|
|
padding: var(--space-2) var(--space-3);
|
|
border-radius: var(--radius-pill);
|
|
font-size: 0.75rem;
|
|
background: color-mix(in oklch, var(--page-accent) 12%, transparent);
|
|
color: var(--page-accent-text);
|
|
}
|
|
</style>
|