Camilla Schoeser
239 lines
8.8 KiB
HTML
239 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>DATA_STREAM // PROTOCOLS_ANALYSER</title>
|
|
<style>
|
|
:root {
|
|
--cyan: #00ffff;
|
|
--magenta: #ff00ff;
|
|
--yellow: #ffff00;
|
|
--bg: #02050a;
|
|
}
|
|
|
|
body, html {
|
|
margin: 0; padding: 0;
|
|
height: 100%; overflow: hidden;
|
|
background: var(--bg);
|
|
color: white;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
/* Effet de grille de fond animée */
|
|
#grid-bg {
|
|
position: fixed;
|
|
width: 200%; height: 200%;
|
|
top: -50%; left: -50%;
|
|
background-image:
|
|
linear-gradient(to right, rgba(0, 255, 255, 0.05) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
|
|
background-size: 50px 50px;
|
|
transform: perspective(500px) rotateX(60deg);
|
|
animation: move-grid 20s linear infinite;
|
|
z-index: -1;
|
|
}
|
|
|
|
@keyframes move-grid {
|
|
from { transform: perspective(500px) rotateX(60deg) translateY(0); }
|
|
to { transform: perspective(500px) rotateX(60deg) translateY(50px); }
|
|
}
|
|
|
|
.presentation-space {
|
|
position: relative;
|
|
width: 100vw; height: 100vh;
|
|
display: flex; justify-content: center; align-items: center;
|
|
perspective: 2000px;
|
|
}
|
|
|
|
.frame {
|
|
position: absolute;
|
|
width: 900px; height: 600px;
|
|
border: 2px solid var(--cyan);
|
|
background: rgba(0, 20, 40, 0.8);
|
|
backdrop-filter: blur(10px);
|
|
padding: 40px;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 0 50px rgba(0, 255, 255, 0.2), inset 0 0 20px rgba(0, 255, 255, 0.1);
|
|
clip-path: polygon(0% 0%, 95% 0%, 100% 5%, 100% 100%, 5% 100%, 0% 95%);
|
|
opacity: 0;
|
|
transform: translateZ(-1000px) rotateY(45deg);
|
|
transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.frame.active {
|
|
opacity: 1;
|
|
transform: translateZ(0) rotateY(0deg);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Éléments HUD */
|
|
.hud-corner {
|
|
position: absolute; width: 40px; height: 40px;
|
|
border: 4px solid var(--magenta);
|
|
}
|
|
.top-left { top: -10px; left: -10px; border-right: none; border-bottom: none; }
|
|
.bottom-right { bottom: -10px; right: -10px; border-left: none; border-top: none; }
|
|
|
|
h1 { font-size: 4rem; text-transform: uppercase; color: var(--cyan); margin: 0; }
|
|
h2 { border-left: 5px solid var(--magenta); padding-left: 15px; text-transform: uppercase; }
|
|
|
|
.scan-line {
|
|
width: 100%; height: 2px;
|
|
background: var(--cyan);
|
|
position: absolute; left: 0;
|
|
animation: scan 4s linear infinite;
|
|
opacity: 0.3;
|
|
z-index: 10;
|
|
}
|
|
|
|
@keyframes scan {
|
|
0% { top: 0%; }
|
|
100% { top: 100%; }
|
|
}
|
|
|
|
.data-point {
|
|
display: flex; align-items: center; margin: 15px 0;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
.data-point::before {
|
|
content: ""; width: 10px; height: 10px;
|
|
background: var(--magenta); margin-right: 15px;
|
|
box-shadow: 0 0 10px var(--magenta);
|
|
}
|
|
|
|
.tab-cyber {
|
|
width: 100%; border-collapse: collapse; margin-top: 20px;
|
|
}
|
|
.tab-cyber th { background: rgba(0, 255, 255, 0.2); padding: 10px; color: var(--cyan); }
|
|
.tab-cyber td { padding: 10px; border: 1px solid rgba(0, 255, 255, 0.2); text-align: center; }
|
|
|
|
.nav-controls {
|
|
position: fixed; bottom: 40px; right: 40px;
|
|
display: flex; gap: 20px;
|
|
}
|
|
.btn-cyber {
|
|
background: transparent; border: 1px solid var(--cyan);
|
|
color: var(--cyan); padding: 10px 25px; cursor: pointer;
|
|
text-transform: uppercase; font-weight: bold;
|
|
transition: 0.3s;
|
|
}
|
|
.btn-cyber:hover { background: var(--cyan); color: var(--bg); box-shadow: 0 0 20px var(--cyan); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="grid-bg"></div>
|
|
|
|
<div class="presentation-space" id="space">
|
|
|
|
<div class="frame active" id="f1">
|
|
<div class="hud-corner top-left"></div>
|
|
<div class="hud-corner bottom-right"></div>
|
|
<div class="scan-line"></div>
|
|
<p style="color: var(--magenta)">[ DATA_STREAM_INIT ]</p>
|
|
<h1>Analyse des Protocoles</h1>
|
|
<p style="font-size: 1.5rem">Signal, Matrix & Discord</p>
|
|
<div style="margin-top: 50px;">
|
|
<p>> AUTH_USER: TOM</p>
|
|
<p>> LOCATION: TELECOM_NANCY</p>
|
|
<p>> STATUS: ENCRYPTED</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="frame" id="f2">
|
|
<h2>Définitions Systèmes</h2>
|
|
<div class="data-point">PFS : Confidentialité Persistante</div>
|
|
<div class="data-point">RATHECT : Auto-guérison des clés</div>
|
|
<div class="data-point">E2EE : Chiffrement de bout en bout</div>
|
|
<div class="data-point">DENIABILITY : Déniabilité plausible</div>
|
|
<p style="margin-top: 30px; border: 1px solid var(--cyan); padding: 15px;">
|
|
La sécurité moderne ne repose plus sur le secret de l'algorithme, mais sur la gestion éphémère des clés.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="frame" id="f3">
|
|
<h2>Historique & Villes</h2>
|
|
<table class="tab-cyber">
|
|
<tr><th>Année</th><th>Tech</th><th>Vulnérabilité</th></tr>
|
|
<tr><td>1982</td><td>SMTP</td><td>Texte en clair</td></tr>
|
|
<tr><td>1992</td><td>SMS</td><td>Interception opérateur</td></tr>
|
|
<tr><td>2004</td><td>OTR</td><td>Synchronicité obligatoire</td></tr>
|
|
<tr><td>2013</td><td>SIGNAL</td><td>[ OPTIMAL ]</td></tr>
|
|
</table>
|
|
<p style="color: var(--yellow); margin-top: 20px;">> Evolution vers l'asynchronisme sécurisé (X3DH).</p>
|
|
</div>
|
|
|
|
<div class="frame" id="f4">
|
|
<h2>Focus : Protocole Signal</h2>
|
|
<div style="display: flex; gap: 20px;">
|
|
<div style="flex: 1">
|
|
<h3>X3DH</h3>
|
|
<p>Établissement de session sans que Bob soit en ligne grâce aux Pre-keys.</p>
|
|
</div>
|
|
<div style="flex: 1">
|
|
<h3>DOUBLE RATCHET</h3>
|
|
<p>Chaque message possède sa propre clé dérivée d'une racine secrète.</p>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: center; margin-top: 40px;">
|
|
<p class="data-point">Adopté par : WhatsApp, Google, Facebook.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="frame" id="f5">
|
|
<h2>Benchmark Sécurité</h2>
|
|
<table class="tab-cyber">
|
|
<tr><td>Protocole</td><td>E2EE</td><td>Souveraineté</td><td>Usage</td></tr>
|
|
<tr><td>Signal</td><td>MAX</td><td>Moyenne</td><td>Privé</td></tr>
|
|
<tr><td>Discord</td><td>LOW</td><td>Nulle</td><td>Social</td></tr>
|
|
<tr><td>Matrix</td><td>MAX</td><td>TOTALE</td><td>Pro/Etat</td></tr>
|
|
</table>
|
|
<p style="margin-top: 20px;">Discord utilise <strong>DAVE</strong> pour la voix, mais le texte reste lisible par l'entreprise.</p>
|
|
</div>
|
|
|
|
<div class="frame" id="f6">
|
|
<h2 style="color: var(--magenta)">Menace : Post-Quantique</h2>
|
|
<p>> Signal déploie <strong>PQXDH</strong>.</p>
|
|
<p>> Objectif : Résister à l'algorithme de Shor.</p>
|
|
<div style="background: rgba(255, 0, 0, 0.1); padding: 20px; border: 1px solid red;">
|
|
CRITICAL : "Harvest Now, Decrypt Later" est une réalité.
|
|
</div>
|
|
<h1 style="font-size: 2rem; margin-top: 40px; text-align: center;">Questions ?</h1>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="nav-controls">
|
|
<button class="btn-cyber" onclick="change(-1)">RETOUR</button>
|
|
<button class="btn-cyber" onclick="change(1)">SUIVANT</button>
|
|
</div>
|
|
|
|
<script>
|
|
let current = 1;
|
|
const total = 6;
|
|
const frames = document.querySelectorAll('.frame');
|
|
|
|
function change(dir) {
|
|
frames[current-1].classList.remove('active');
|
|
current += dir;
|
|
if(current > total) current = 1;
|
|
if(current < 1) current = total;
|
|
frames[current-1].classList.add('active');
|
|
}
|
|
|
|
// Effet parallaxe à la souris
|
|
document.addEventListener('mousemove', (e) => {
|
|
const x = (window.innerWidth / 2 - e.pageX) / 25;
|
|
const y = (window.innerHeight / 2 - e.pageY) / 25;
|
|
document.getElementById('space').style.transform = `rotateY(${x}deg) rotateX(${-y}deg)`;
|
|
});
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if(e.key === 'ArrowRight' || e.key === ' ') change(1);
|
|
if(e.key === 'ArrowLeft') change(-1);
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |