Camilla Schoeser
283 lines
11 KiB
HTML
283 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>SIGNAL_DOSSIER_v3</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@700&family=JetBrains+Mono:wght@400;700&display=swap');
|
|
|
|
:root {
|
|
--acid: #d1ff00; /* Jaune acide/vert */
|
|
--bg: #0a0a0c;
|
|
--surface: #141417;
|
|
--accent: #303035;
|
|
}
|
|
|
|
body, html {
|
|
margin: 0; padding: 0; background: var(--bg);
|
|
color: white; font-family: 'JetBrains Mono', monospace;
|
|
overflow: hidden; height: 100vh;
|
|
}
|
|
|
|
/* Scanline Overlay */
|
|
body::after {
|
|
content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
|
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%);
|
|
background-size: 100% 4px; z-index: 100; pointer-events: none;
|
|
}
|
|
|
|
/* Layout */
|
|
.container {
|
|
display: grid; grid-template-columns: 450px 1fr;
|
|
height: 100vh; border: 10px solid var(--bg); box-sizing: border-box;
|
|
}
|
|
|
|
/* Sidebar Navigation */
|
|
.sidebar {
|
|
background: var(--surface); border-right: 2px solid var(--accent);
|
|
padding: 30px; display: flex; flex-direction: column; justify-content: space-between;
|
|
}
|
|
|
|
.header h1 {
|
|
font-family: 'Syncopate', sans-serif; font-size: 1.2rem;
|
|
color: var(--acid); margin: 0; letter-spacing: -1px;
|
|
}
|
|
|
|
.nav-list { margin-top: 40px; }
|
|
.nav-item {
|
|
padding: 10px 0; border-bottom: 1px solid var(--accent);
|
|
font-size: 0.8rem; opacity: 0.4; transition: 0.3s; cursor: pointer;
|
|
}
|
|
.nav-item.active { opacity: 1; color: var(--acid); padding-left: 10px; border-bottom-color: var(--acid); }
|
|
|
|
/* Main Viewport */
|
|
.main {
|
|
padding: 60px; position: relative; overflow: hidden;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
|
|
.slide {
|
|
display: none; animation: slideIn 0.4s ease-out;
|
|
}
|
|
.slide.active { display: block; }
|
|
|
|
@keyframes slideIn {
|
|
from { opacity: 0; transform: translateY(20px); filter: blur(10px); }
|
|
to { opacity: 1; transform: translateY(0); filter: blur(0); }
|
|
}
|
|
|
|
h2 { font-family: 'Syncopate', sans-serif; font-size: 2.5rem; margin: 0 0 30px 0; text-transform: uppercase; }
|
|
|
|
.content-grid { display: grid; grid-template-columns: 1fr 200px; gap: 40px; }
|
|
|
|
.text-zone { line-height: 1.6; font-size: 1.1rem; }
|
|
.data-viz { border: 1px solid var(--accent); padding: 20px; font-size: 0.7rem; color: var(--acid); }
|
|
|
|
/* UI Elements */
|
|
.tag { display: inline-block; padding: 4px 10px; background: var(--acid); color: black; font-weight: bold; font-size: 0.7rem; margin-bottom: 10px; }
|
|
.check { color: var(--acid); font-weight: bold; }
|
|
.fail { color: #ff4444; }
|
|
|
|
.footer-info { font-size: 0.7rem; opacity: 0.5; display: flex; justify-content: space-between; }
|
|
|
|
/* Glitch Effect on Change */
|
|
.glitch { animation: glitchAnim 0.1s linear 2; }
|
|
@keyframes glitchAnim {
|
|
0% { transform: translate(0); }
|
|
20% { transform: translate(-5px, 5px); filter: hue-rotate(90deg); }
|
|
40% { transform: translate(5px, -5px); }
|
|
100% { transform: translate(0); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container" id="app">
|
|
<div class="sidebar">
|
|
<div class="header">
|
|
<div class="tag">TOP SECRET // CLASSIFIED</div>
|
|
<h1>SEC_MESSAGING_2026</h1>
|
|
<div class="nav-list" id="navList">
|
|
<div class="nav-item active">01. INTRODUCTION</div>
|
|
<div class="nav-item">02. HISTORIQUE_CLAIRE</div>
|
|
<div class="nav-item">03. LES_PIONNIERS</div>
|
|
<div class="nav-item">04. SIGNAL_REVOLUTION</div>
|
|
<div class="nav-item">05. MATRICE_TEST</div>
|
|
<div class="nav-item">06. CORE_X3DH</div>
|
|
<div class="nav-item">07. VULNERABILITES</div>
|
|
<div class="nav-item">08. GOUVERNANCE</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-info">
|
|
<span>STATUS: CONNECTED</span>
|
|
<span>USER: TOM_TN</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main" id="main">
|
|
|
|
<div class="slide active">
|
|
<div class="tag">FILE: 001_INTRODUCTION</div>
|
|
<h2>CRYPTO_<br>FLUX_ANALYSIS</h2>
|
|
<div class="content-grid">
|
|
<div class="text-zone">
|
|
Rappel des fondamentaux : <span class="check">C.I.D.A</span><br>
|
|
Confidentialité, Intégrité, Authentification, Disponibilité.<br><br>
|
|
Le "Standard Moderne" exige :<br>
|
|
> PFS (Confidentialité persistante)<br>
|
|
> Auto-guérison (Double Ratchet)<br>
|
|
> Déniabilité & Asynchronisme.
|
|
</div>
|
|
<div class="data-viz">
|
|
[ENCRYPTION_LVL]<br>█ █ █ █ █ █ █ 100%<br><br>
|
|
[STATUS]<br>ACTIVE_SCAN
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide">
|
|
<div class="tag">FILE: 002_HISTORY</div>
|
|
<h2>L'ÈRE_DU_CLAIR</h2>
|
|
<div class="content-grid">
|
|
<div class="text-zone">
|
|
<span class="highlight">1982 - SMTP :</span> "Hop-by-Hop". Chaque serveur lit le contenu.<br><br>
|
|
<span class="highlight">1992 - SMS :</span> "Merry Christmas". Stockage en clair chez l'opérateur (Orange/SFR). Accès total légal.<br><br>
|
|
<span class="highlight">2008-2020 - RCS :</span> Google impose l'E2EE en 2020. Interopérabilité Apple/Android complexe.
|
|
</div>
|
|
<div class="data-viz">
|
|
[HISTORY_LOG]<br>
|
|
- SMTP_FAIL<br>
|
|
- SMS_INSECURE<br>
|
|
- RCS_SYNCING
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide">
|
|
<div class="tag">FILE: 003_PIONEERS</div>
|
|
<h2>PGP_VS_OTR</h2>
|
|
<div class="content-grid">
|
|
<div class="text-zone">
|
|
<strong>1991 - PGP :</strong> Phil Zimmermann. Asynchrone.<br>
|
|
<span class="fail">ÉCHEC :</span> Pas de PFS. Clé perdue = Tout le passé est lisible.<br><br>
|
|
<strong>2004 - OTR :</strong> PFS + Déniabilité.<br>
|
|
<span class="fail">ÉCHEC :</span> Synchrone uniquement. Bob doit être en ligne pour le "handshake". Inadapté au mobile.
|
|
</div>
|
|
<div class="data-viz">
|
|
[KEY_EXCHANGE]<br>
|
|
PGP: STATIC<br>
|
|
OTR: SYNC_ONLY
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide">
|
|
<div class="tag">FILE: 004_SIGNAL</div>
|
|
<h2>SIGNAL_REVO</h2>
|
|
<div class="content-grid">
|
|
<div class="text-zone">
|
|
Fusion du meilleur d'OTR et PGP.<br><br>
|
|
<span class="check">X3DH :</span> Asynchronisme via "Pre-keys" (Alice parle à Bob offline).<br><br>
|
|
<span class="check">Double Ratchet :</span> Nouvelle clé à chaque message. Résilience totale.
|
|
</div>
|
|
<div class="data-viz">
|
|
[RATCHET_SEQ]<br>
|
|
ROTATION_01...OK<br>
|
|
ROTATION_02...OK<br>
|
|
PQ_READY: TRUE
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide">
|
|
<div class="tag">FILE: 005_MATRIX</div>
|
|
<h2>COMPARATIF</h2>
|
|
<div class="text-zone">
|
|
<table style="width: 100%; border: 1px solid var(--accent);">
|
|
<tr><th>TECH</th><th>E2EE</th><th>PFS</th><th>ASYNC</th></tr>
|
|
<tr><td>SMS</td><td>❌</td><td>❌</td><td>✅</td></tr>
|
|
<tr><td>PGP</td><td>✅</td><td>❌</td><td>✅</td></tr>
|
|
<tr><td>OTR</td><td>✅</td><td>✅</td><td>❌</td></tr>
|
|
<tr><td>SIGNAL</td><td>✅</td><td>✅</td><td>✅</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide">
|
|
<div class="tag">FILE: 006_TECH_FOCUS</div>
|
|
<h2>CORE_X3DH</h2>
|
|
<p style="text-align: center; font-size: 8rem; margin: 0;">🦦</p>
|
|
<p style="text-align: center; color: var(--acid);">[ DÉMONSTRATION TABLEAU NOIR ]</p>
|
|
</div>
|
|
|
|
<div class="slide">
|
|
<div class="tag">FILE: 007_VULNS</div>
|
|
<h2>THREAT_LEVEL</h2>
|
|
<div class="content-grid">
|
|
<div class="text-zone">
|
|
<span class="highlight">Quantique :</span> Menace sur ECDH. Solution : <strong>PQXDH</strong>.<br><br>
|
|
<span class="highlight">Endpoints :</span> Pegasus. Si le téléphone est infecté, la crypto est contournée.<br><br>
|
|
<span class="highlight">MitM :</span> Risque de fausse clé publique. Vérifiez les "Safety Numbers".
|
|
</div>
|
|
<div class="data-viz">
|
|
[ALERTE]<br>
|
|
! SHOR_ALG_DETECTED<br>
|
|
! ENDPOINT_RISK
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide">
|
|
<div class="tag">FILE: 008_GOVERNANCE</div>
|
|
<h2>SOUVERAINETÉ</h2>
|
|
<div class="content-grid">
|
|
<div class="text-zone">
|
|
<strong>DISCORD :</strong> Centralisé. Texte non-E2EE pour modération (Anti-raids). Métadonnées exploitées.<br><br>
|
|
<strong>MATRIX :</strong> Fédéré. Utilisé par Tchap (État). Souveraineté totale via auto-hébergement.
|
|
</div>
|
|
<div class="data-viz">
|
|
[DECENTRALIZED]<br>
|
|
MATRIX: 100%<br>
|
|
DISCORD: 0%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let current = 0;
|
|
const slides = document.querySelectorAll('.slide');
|
|
const navItems = document.querySelectorAll('.nav-item');
|
|
const main = document.getElementById('main');
|
|
|
|
function showSlide(index) {
|
|
main.classList.add('glitch');
|
|
setTimeout(() => main.classList.remove('glitch'), 200);
|
|
|
|
slides.forEach(s => s.classList.remove('active'));
|
|
navItems.forEach(n => n.classList.remove('active'));
|
|
|
|
slides[index].classList.add('active');
|
|
navItems[index].classList.add('active');
|
|
current = index;
|
|
}
|
|
|
|
window.addEventListener('keydown', e => {
|
|
if(e.key === 'ArrowRight' || e.key === ' ') {
|
|
current = (current + 1) % slides.length;
|
|
showSlide(current);
|
|
}
|
|
if(e.key === 'ArrowLeft') {
|
|
current = (current - 1 + slides.length) % slides.length;
|
|
showSlide(current);
|
|
}
|
|
});
|
|
|
|
navItems.forEach((item, i) => {
|
|
item.addEventListener('click', () => showSlide(i));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |