Camilla Schoeser
255 lines
12 KiB
HTML
255 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>DECRYPTO_FLOW // TELECOM NANCY</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=JetBrains+Mono:wght@300;500&display=swap');
|
|
|
|
:root {
|
|
--cyan: #00f2ff;
|
|
--magenta: #ff007a;
|
|
--dark: #02050a;
|
|
--panel: rgba(10, 25, 40, 0.9);
|
|
}
|
|
|
|
body, html {
|
|
margin: 0; padding: 0;
|
|
width: 100%; height: 100%;
|
|
background: var(--dark);
|
|
color: white;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Grille de fond infinie */
|
|
#viewport {
|
|
width: 100vw; height: 100vh;
|
|
perspective: 1000px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#world {
|
|
position: absolute;
|
|
width: 100%; height: 100%;
|
|
transform-style: preserve-3d;
|
|
transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
|
|
}
|
|
|
|
/* Éléments de Décoration (Background) */
|
|
.grid-plane {
|
|
position: absolute; width: 4000px; height: 4000px;
|
|
top: -1500px; left: -1500px;
|
|
background-image: linear-gradient(var(--cyan) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--cyan) 1px, transparent 1px);
|
|
background-size: 100px 100px;
|
|
opacity: 0.05;
|
|
transform: rotateX(90deg) translateZ(-500px);
|
|
}
|
|
|
|
/* Menu de Navigation Flottant */
|
|
.nav-dock {
|
|
position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
|
|
display: flex; gap: 10px; z-index: 100;
|
|
background: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 50px;
|
|
border: 1px solid var(--cyan);
|
|
}
|
|
|
|
.nav-dot {
|
|
width: 12px; height: 12px; border-radius: 50%;
|
|
border: 1px solid var(--cyan); cursor: pointer; transition: 0.3s;
|
|
}
|
|
.nav-dot.active { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
|
|
|
|
/* Modules de Contenu */
|
|
.module {
|
|
position: absolute;
|
|
width: 900px; /* Largeur fixe pour le calcul du centre */
|
|
min-height: 500px;
|
|
padding: 40px;
|
|
background: var(--panel);
|
|
border-left: 5px solid var(--cyan);
|
|
box-shadow: 0 0 40px rgba(0,0,0,0.8);
|
|
visibility: hidden;
|
|
opacity: 0.1;
|
|
transition: opacity 0.5s, visibility 0.5s;
|
|
}
|
|
|
|
.module.active { visibility: visible; opacity: 1; }
|
|
|
|
h2 { font-family: 'Orbitron', sans-serif; color: var(--cyan); text-transform: uppercase; margin-top: 0; }
|
|
.highlight { color: var(--magenta); font-weight: bold; }
|
|
|
|
/* Tableaux Cyber */
|
|
table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.85rem; }
|
|
th { background: rgba(0, 242, 255, 0.1); color: var(--cyan); padding: 10px; text-align: left; }
|
|
td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); }
|
|
.check { color: #00ff95; } .cross { color: var(--magenta); }
|
|
|
|
/* Effet clignotant */
|
|
.blink { animation: blink-anim 2s infinite; }
|
|
@keyframes blink-anim { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
|
|
|
|
.axolotl { font-size: 6rem; text-align: center; display: block; filter: hue-rotate(290deg); }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="nav-dock" id="dots"></div>
|
|
|
|
<div id="viewport">
|
|
<div id="world">
|
|
<div class="grid-plane"></div>
|
|
|
|
<div class="module" id="m0" data-x="0" data-y="0" data-z="0">
|
|
<p class="blink highlight">// SIGNAL_INJECTION_v2</p>
|
|
<h2>Analyse des Protocoles</h2>
|
|
<p><strong>Fondamentaux :</strong> Confidentialité, Intégrité, Authentification, Disponibilité.</p>
|
|
<p><strong>Le Standard Moderne :</strong></p>
|
|
<ul>
|
|
<li>E2EE (Bout en bout) & Asynchronisme</li>
|
|
<li>PFS (Confidentialité persistante)</li>
|
|
<li>Auto-guérison & Déniabilité plausible</li>
|
|
</ul>
|
|
<p style="margin-top: 40px; font-size: 0.8rem;">[ TOM // TELECOM NANCY 2026 ]</p>
|
|
</div>
|
|
|
|
<div class="module" id="m1" data-x="1500" data-y="0" data-z="-500">
|
|
<h2>Historique : L'ère du Clair</h2>
|
|
<p><span class="highlight">1982 (Email) :</span> SMTP. Les messages circulent en clair. <br><em>Problème du Hop-by-Hop :</em> Chaque routeur lit vos données.</p>
|
|
<p><span class="highlight">1992 (SMS) :</span> "Merry Christmas". Stocké en clair chez l'opérateur (Orange, SFR...). Ils peuvent tout lire.</p>
|
|
<p><span class="highlight">2008-2020 (RCS) :</span> Lancé par la GSMA. Google impose enfin l'E2EE en 2020. Standard Android actuel.</p>
|
|
</div>
|
|
|
|
<div class="module" id="m2" data-x="1500" data-y="1000" data-z="0">
|
|
<h2>1991: PGP vs 2004: OTR</h2>
|
|
<p><strong>PGP (Zimmermann) :</strong> Chiffrement asynchrone considéré comme une "arme". <br><span class="cross">MAIS :</span> Pas de PFS. Une clé volée compromet TOUT le passé.</p>
|
|
<hr style="border:0; border-top:1px solid var(--cyan); opacity: 0.2;">
|
|
<p><strong>OTR (Off-the-Record) :</strong> Ajoute la PFS et la Déniabilité.</p>
|
|
<p><span class="cross">ÉCHEC :</span> Protocole <span class="highlight">Synchrone</span>. Si Bob est hors-ligne, impossible de crypter. "Session Broken" fréquent sur mobile.</p>
|
|
</div>
|
|
|
|
<div class="module" id="m3" data-x="0" data-y="1500" data-z="500">
|
|
<h2>2013 : La Révolution Signal</h2>
|
|
<p>Fusion du meilleur d'OTR (PFS) et de PGP (Asynchronisme).</p>
|
|
<ul>
|
|
<li><span class="highlight">X3DH :</span> Utilisation de "Pre-keys". Bob n'a pas besoin d'être en ligne.</li>
|
|
<li><span class="highlight">Double Ratchet :</span> Renouvellement de clé à chaque message.</li>
|
|
<li><span class="highlight">Auto-guérison :</span> Un piratage au message N est annulé au message N+1.</li>
|
|
</ul>
|
|
<p>Adopté par : WhatsApp (2016), Google Messages, Skype, Messenger.</p>
|
|
</div>
|
|
|
|
<div class="module" id="m4" data-x="-1500" data-y="1000" data-z="0">
|
|
<h2>Matrice de Sécurité</h2>
|
|
<table>
|
|
<tr><th>Critère</th><th>SMS</th><th>PGP</th><th>OTR</th><th>Signal</th></tr>
|
|
<tr><td>Confidentialité</td><td class="cross">Partielle</td><td class="check">✅</td><td class="check">✅</td><td class="check">✅ E2EE</td></tr>
|
|
<tr><td>Asynchronisme</td><td class="check">✅</td><td class="check">✅</td><td class="cross">❌</td><td class="check">✅</td></tr>
|
|
<tr><td>PFS (Persistance)</td><td class="cross">❌</td><td class="cross">❌</td><td class="check">✅</td><td class="check">✅</td></tr>
|
|
<tr><td>Auto-guérison</td><td class="cross">❌</td><td class="cross">❌</td><td class="cross">❌</td><td class="check">✅</td></tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="module" id="m5" data-x="-1500" data-y="0" data-z="-500">
|
|
<h2>Cœur Technique : X3DH</h2>
|
|
<p style="text-align:center">Explication au tableau...</p>
|
|
<span class="axolotl">🦦</span>
|
|
<p style="text-align:center" class="blink">DESSIN_EN_COURS...</p>
|
|
</div>
|
|
|
|
<div class="module" id="m6" data-x="0" data-y="-1000" data-z="0">
|
|
<h2 class="highlight">Limites & Menaces</h2>
|
|
<p><strong>Quantique :</strong> L'algorithme de Shor menace ECDH. Signal déploie déjà <span class="highlight">PQXDH</span>.</p>
|
|
<p><strong>Points d'extrémité :</strong> Si Pegasus est sur le téléphone, la crypto est inutile. La sécurité dépend de l'OS.</p>
|
|
<p><strong>MITM :</strong> Un serveur peut mentir sur les clés. Solution : Vérifier les "Safety Numbers".</p>
|
|
</div>
|
|
|
|
<div class="module" id="m7" data-x="0" data-y="-2000" data-z="500">
|
|
<h2>Governance : Matrix vs Discord</h2>
|
|
<p><strong>Discord :</strong> Centralisé. Texte non-E2EE pour permettre la modération sur les gros serveurs. Métadonnées exploitées.</p>
|
|
<p><strong>Matrix (Element) :</strong> Décentralisé/Fédéré. E2EE par défaut. Utilisé par l'État Français (Tchap). <span class="highlight">Souveraineté Totale.</span></p>
|
|
<div class="blink" style="border: 1px solid var(--magenta); padding:10px; margin-top:20px; text-align:center;">
|
|
CONCLUSION : La sécurité est un équilibre entre UX et Souveraineté.
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const world = document.getElementById('world');
|
|
const modules = document.querySelectorAll('.module');
|
|
const dotsContainer = document.getElementById('dots');
|
|
let current = 0;
|
|
|
|
// Initialisation des positions et du menu
|
|
modules.forEach((mod, i) => {
|
|
const x = mod.dataset.x;
|
|
const y = mod.dataset.y;
|
|
const z = mod.dataset.z;
|
|
// On positionne chaque module dans l'espace 3D
|
|
mod.style.transform = `translate3d(${x}px, ${y}px, ${z}px)`;
|
|
|
|
// Création des points de navigation
|
|
const dot = document.createElement('div');
|
|
dot.className = 'nav-dot' + (i === 0 ? ' active' : '');
|
|
dot.onclick = () => goTo(i);
|
|
dotsContainer.appendChild(dot);
|
|
});
|
|
|
|
function goTo(index) {
|
|
current = index;
|
|
const mod = modules[current];
|
|
const x = mod.dataset.x;
|
|
const y = mod.dataset.y;
|
|
const z = mod.dataset.z;
|
|
|
|
// LE SECRET DU CENTRAGE :
|
|
// On déplace le monde à l'inverse de la position du module cible
|
|
// pour que le module se retrouve à (0,0,0) face caméra.
|
|
world.style.transform = `translate3d(${-x}px, ${-y}px, ${-z}px)`;
|
|
|
|
// Mise à jour visuelle
|
|
modules.forEach(m => m.classList.remove('active'));
|
|
mod.classList.add('active');
|
|
|
|
document.querySelectorAll('.nav-dot').forEach((d, i) => {
|
|
d.classList.toggle('active', i === index);
|
|
});
|
|
}
|
|
|
|
window.addEventListener('keydown', e => {
|
|
if (e.key === 'ArrowRight' || e.key === ' ') {
|
|
current = (current + 1) % modules.length;
|
|
goTo(current);
|
|
}
|
|
if (e.key === 'ArrowLeft') {
|
|
current = (current - 1 + modules.length) % modules.length;
|
|
goTo(current);
|
|
}
|
|
});
|
|
|
|
// Centrer le premier module au chargement
|
|
window.onload = () => {
|
|
// Petit hack pour forcer le calcul du centre au milieu de l'écran
|
|
const centerX = (window.innerWidth / 2) - 450; // 450 = largeur module / 2
|
|
const centerY = (window.innerHeight / 2) - 250; // 250 = hauteur module / 2
|
|
|
|
// On ajuste le décalage initial pour chaque module
|
|
modules.forEach(mod => {
|
|
const ox = parseInt(mod.dataset.x) + centerX;
|
|
const oy = parseInt(mod.dataset.y) + centerY;
|
|
mod.style.left = `0px`;
|
|
mod.style.top = `0px`;
|
|
mod.dataset.x = ox;
|
|
mod.dataset.y = oy;
|
|
mod.style.transform = `translate3d(${ox}px, ${oy}px, ${mod.dataset.z}px)`;
|
|
});
|
|
|
|
goTo(0);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |