Camilla Schoeser
236 lines
10 KiB
HTML
236 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>SÉCURITÉ FLUX : SIGNAL_CORE</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=JetBrains+Mono:wght@300&display=swap');
|
|
|
|
:root {
|
|
--cyan: #00f2ff;
|
|
--magenta: #ff007a;
|
|
--green: #00ff95;
|
|
--dark: #03070e;
|
|
}
|
|
|
|
body, html {
|
|
margin: 0; padding: 0;
|
|
width: 100%; height: 100%;
|
|
background: var(--dark);
|
|
color: white;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Fond de grille étoilé */
|
|
#canvas {
|
|
position: absolute;
|
|
width: 5000px; height: 5000px;
|
|
background-image:
|
|
radial-gradient(circle at 2px 2px, rgba(0, 242, 255, 0.1) 1px, transparent 0);
|
|
background-size: 60px 60px;
|
|
transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
/* Navigation de bord d'écran */
|
|
.nav-hub {
|
|
position: fixed; top: 20px; left: 20px;
|
|
z-index: 100; display: flex; flex-direction: column; gap: 10px;
|
|
}
|
|
|
|
.nav-item {
|
|
background: rgba(0, 242, 255, 0.05);
|
|
border: 1px solid var(--cyan);
|
|
color: var(--cyan);
|
|
padding: 8px 15px;
|
|
cursor: pointer;
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
transition: 0.3s;
|
|
}
|
|
.nav-item:hover { background: var(--cyan); color: var(--dark); box-shadow: 0 0 15px var(--cyan); }
|
|
|
|
/* Zones de contenu (Modules) */
|
|
.module {
|
|
position: absolute;
|
|
padding: 40px;
|
|
background: rgba(5, 15, 25, 0.8);
|
|
border: 1px solid rgba(0, 242, 255, 0.2);
|
|
backdrop-filter: blur(5px);
|
|
width: 700px;
|
|
box-shadow: 0 0 40px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.module h2 {
|
|
font-family: 'Orbitron', sans-serif;
|
|
color: var(--cyan);
|
|
border-bottom: 2px solid var(--cyan);
|
|
padding-bottom: 10px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.pill {
|
|
display: inline-block; padding: 2px 8px;
|
|
background: var(--magenta); color: white;
|
|
font-size: 0.7rem; margin-right: 5px; border-radius: 3px;
|
|
}
|
|
|
|
/* Placement des zones sur la carte infinie */
|
|
#intro { top: 2500px; left: 2500px; } /* Centre */
|
|
#history { top: 2200px; left: 3300px; } /* Nord-Est */
|
|
#pgp-otr { top: 2800px; left: 3400px; } /* Sud-Est */
|
|
#signal { top: 3200px; left: 2500px; } /* Sud */
|
|
#comparison { top: 3200px; left: 1600px; } /* Sud-Ouest */
|
|
#threats { top: 2600px; left: 1500px; } /* Ouest */
|
|
#governance { top: 1900px; left: 2000px; } /* Nord-Ouest */
|
|
|
|
/* Effets de clignotement aléatoires */
|
|
.flicker { animation: flicker-pulse 3s infinite; }
|
|
@keyframes flicker-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.7; transform: scale(0.99); }
|
|
52% { opacity: 1; }
|
|
}
|
|
|
|
table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-top: 15px; }
|
|
th { text-align: left; color: var(--magenta); padding-bottom: 10px; }
|
|
td { border-bottom: 1px solid rgba(0, 242, 255, 0.1); padding: 8px 0; }
|
|
|
|
.axolotl-core {
|
|
font-size: 8rem; text-align: center;
|
|
filter: drop-shadow(0 0 20px var(--magenta));
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="nav-hub">
|
|
<div class="nav-item" onclick="moveTo('intro')">00_START</div>
|
|
<div class="nav-item" onclick="moveTo('history')">01_HISTORY</div>
|
|
<div class="nav-item" onclick="moveTo('pgp-otr')">02_PIONEERS</div>
|
|
<div class="nav-item" onclick="moveTo('signal')">03_SIGNAL_CORE</div>
|
|
<div class="nav-item" onclick="moveTo('comparison')">04_BENCHMARK</div>
|
|
<div class="nav-item" onclick="moveTo('threats')">05_THREATS</div>
|
|
<div class="nav-item" onclick="moveTo('governance')">06_GOVERNANCE</div>
|
|
</div>
|
|
|
|
<div id="canvas">
|
|
|
|
<div class="module flicker" id="intro">
|
|
<p style="color:var(--magenta)">// SYSTEM_ACCESS_GRANTED</p>
|
|
<h2>PROTOCOLES_MESSAGERIE</h2>
|
|
<p><strong>C.I.D.A :</strong> Confidentialité, Intégrité, Authentification, Disponibilité.</p>
|
|
<div style="background:rgba(0,242,255,0.1); padding:15px; border-left:3px solid var(--cyan)">
|
|
<strong>MODERNE :</strong> PFS (Persistance), Auto-guérison, Déniabilité, Asynchronisme, E2EE.
|
|
</div>
|
|
<p style="font-size:0.7rem; margin-top:20px;">Tom // TELECOM NANCY 2026</p>
|
|
</div>
|
|
|
|
<div class="module" id="history">
|
|
<h2>L'ÈRE DU CLAIR (1982-2008)</h2>
|
|
<p><span class="pill">SMTP</span> Messages en clair. Hop-by-Hop (Chaque routeur lit tout).</p>
|
|
<p><span class="pill">SMS</span> Stockage SMSC opérateur. <span style="color:var(--magenta)">Zéro Sécurité.</span></p>
|
|
<p><span class="pill">RCS</span> Le "SMS 2.0" (GSMA). Google impose l'E2EE en 2020.</p>
|
|
<p style="font-size:0.8rem; border-top:1px solid var(--cyan); padding-top:10px;">
|
|
Problème d'interopérabilité persistant entre marques (Apple/Android).
|
|
</p>
|
|
</div>
|
|
|
|
<div class="module" id="pgp-otr">
|
|
<h2>LES PIONNIERS</h2>
|
|
<p><strong>1991 - PGP :</strong> La crypto comme une "arme". E2EE asynchrone mais clés statiques (Pas de PFS).</p>
|
|
<hr style="border:0; border-top:1px dashed var(--cyan)">
|
|
<p><strong>2004 - OTR :</strong> Ajoute la PFS et la Déniabilité.</p>
|
|
<p style="color:var(--magenta)">ÉCHEC : Synchrone (Handshake obligatoire). "Session Broken" sur mobile.</p>
|
|
</div>
|
|
|
|
<div class="module" id="signal" style="border-color:var(--magenta); width: 850px;">
|
|
<h2>SIGNAL_PROTOCOL (2013-2026)</h2>
|
|
<div style="display:flex; gap:20px;">
|
|
<div>
|
|
<p><strong>X3DH :</strong> Asynchronisme via Pre-keys (Alice parle à Bob offline).</p>
|
|
<p><strong>DOUBLE RATCHET :</strong> Auto-guérison. Clé renouvelée à chaque message.</p>
|
|
<p><strong>PQXDH (2023) :</strong> Prêt pour l'ère Post-Quantique.</p>
|
|
</div>
|
|
<div class="axolotl-core">🦦</div>
|
|
</div>
|
|
<p style="font-size:0.7rem;">Adopté par WhatsApp (2Mds users), Google, Skype, Messenger.</p>
|
|
</div>
|
|
|
|
<div class="module" id="comparison">
|
|
<h2>CRITÈRES_MATRIX</h2>
|
|
<table>
|
|
<tr><th>Feature</th><th>SMS</th><th>PGP</th><th>OTR</th><th>Signal</th></tr>
|
|
<tr><td>E2EE</td><td>❌</td><td>✅</td><td>✅</td><td>✅</td></tr>
|
|
<tr><td>PFS</td><td>❌</td><td>❌</td><td>✅</td><td>✅</td></tr>
|
|
<tr><td>Async</td><td>✅</td><td>✅</td><td>❌</td><td>✅</td></tr>
|
|
<tr><td>Auto-heal</td><td>❌</td><td>❌</td><td>❌</td><td>✅</td></tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="module" id="threats">
|
|
<h2 style="color:var(--magenta)">VULNÉRABILITÉS_DETECTÉES</h2>
|
|
<p><strong>QUANTIQUE :</strong> Shor's Algorithm vs ECDH. (Réponse: PQXDH).</p>
|
|
<p><strong>END-POINTS :</strong> Pegasus lit le message *avant* le tunnel. L'OS est la limite.</p>
|
|
<p><strong>MITM :</strong> Fausse clé publique via serveur compromis. (Vérifier Safety Numbers).</p>
|
|
</div>
|
|
|
|
<div class="module" id="governance">
|
|
<h2>SOUVERAINETÉ & USAGE</h2>
|
|
<p><strong>DISCORD :</strong> Centralisé. Texte non-E2EE pour modération/indexation.</p>
|
|
<p><strong>MATRIX :</strong> Décentralisé (Fédéré). Tchap (État Français). Souveraineté totale.</p>
|
|
<p><strong>SIGNAL :</strong> Fondation ONG. Zéro métadonnées.</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const canvas = document.getElementById('canvas');
|
|
const positions = {
|
|
intro: { x: 2500, y: 2500, scale: 1.5, rotate: 0 },
|
|
history: { x: 3300, y: 2200, scale: 1.2, rotate: -10 },
|
|
'pgp-otr': { x: 3400, y: 2800, scale: 1.2, rotate: 10 },
|
|
signal: { x: 2500, y: 3200, scale: 1.8, rotate: 0 },
|
|
comparison: { x: 1600, y: 3200, scale: 1.2, rotate: -5 },
|
|
threats: { x: 1500, y: 2600, scale: 1.2, rotate: 5 },
|
|
governance: { x: 2000, y: 1900, scale: 1.2, rotate: 0 }
|
|
};
|
|
|
|
function moveTo(zoneId) {
|
|
const pos = positions[zoneId];
|
|
const centerX = window.innerWidth / 2;
|
|
const centerY = window.innerHeight / 2;
|
|
|
|
// Calculer le décalage pour centrer le module
|
|
const moveX = centerX - pos.x;
|
|
const moveY = centerY - pos.y;
|
|
|
|
canvas.style.transform = `translate(${moveX}px, ${moveY}px) scale(${pos.scale}) rotate(${pos.rotate}deg)`;
|
|
|
|
// Highlight nav
|
|
document.querySelectorAll('.nav-item').forEach(el => el.style.background = 'transparent');
|
|
event.target.style.background = 'var(--cyan)';
|
|
}
|
|
|
|
// Navigation clavier
|
|
const order = ['intro', 'history', 'pgp-otr', 'signal', 'comparison', 'threats', 'governance'];
|
|
let currentIndex = 0;
|
|
|
|
window.addEventListener('keydown', (e) => {
|
|
if (e.key === 'ArrowRight' || e.key === ' ') {
|
|
currentIndex = (currentIndex + 1) % order.length;
|
|
moveTo(order[currentIndex]);
|
|
}
|
|
if (e.key === 'ArrowLeft') {
|
|
currentIndex = (currentIndex - 1 + order.length) % order.length;
|
|
moveTo(order[currentIndex]);
|
|
}
|
|
});
|
|
|
|
// Init
|
|
window.onload = () => moveTo('intro');
|
|
</script>
|
|
</body>
|
|
</html> |