Camilla Schoeser
206 lines
7.7 KiB
HTML
206 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>STREAM_DESTRUCT_v4</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;700&display=swap');
|
|
|
|
:root {
|
|
--neon-green: #0f0;
|
|
--dim-green: #003300;
|
|
--bg: #000;
|
|
}
|
|
|
|
body, html {
|
|
margin: 0; padding: 0;
|
|
background: var(--bg);
|
|
color: var(--neon-green);
|
|
font-family: 'Fira Code', monospace;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* L'espace de collision des slides */
|
|
#stream-container {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
.fragment {
|
|
position: absolute;
|
|
padding: 30px;
|
|
border: 1px solid var(--neon-green);
|
|
background: rgba(0, 0, 0, 0.9);
|
|
width: 600px;
|
|
box-shadow: 10px 10px 0px var(--dim-green);
|
|
display: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Effet de bruit / Grain */
|
|
.overlay {
|
|
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
|
background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px);
|
|
pointer-events: none; z-index: 100;
|
|
}
|
|
|
|
.fragment.active {
|
|
display: block;
|
|
animation: hit 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes hit {
|
|
0% { transform: scale(1.2) rotate(5deg); filter: brightness(5); }
|
|
100% { transform: scale(1) rotate(var(--r)); filter: brightness(1); }
|
|
}
|
|
|
|
h2 {
|
|
background: var(--neon-green);
|
|
color: black;
|
|
display: inline-block;
|
|
padding: 0 10px;
|
|
text-transform: uppercase;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.meta { font-size: 0.7rem; opacity: 0.5; margin-bottom: 20px; }
|
|
.data-line { margin: 5px 0; border-bottom: 1px solid var(--dim-green); }
|
|
.critical { color: #f00; text-shadow: 0 0 5px #f00; }
|
|
|
|
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.8rem; }
|
|
th { text-align: left; border-bottom: 1px solid var(--neon-green); }
|
|
|
|
#noise-bg {
|
|
position: fixed; font-size: 0.6rem; color: var(--dim-green);
|
|
white-space: pre; pointer-events: none; z-index: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="overlay"></div>
|
|
<div id="noise-bg"></div>
|
|
|
|
<div id="stream-container">
|
|
|
|
<div class="fragment active" id="f0" style="--r: -2deg; top: 10%; left: 10%;">
|
|
<div class="meta">PID: 4402 // ADDR: 0x001</div>
|
|
<h2>PROTOCOLES_RECAP</h2>
|
|
<div class="data-line">> CONFIDENTIALITÉ: OK</div>
|
|
<div class="data-line">> INTÉGRITÉ: OK</div>
|
|
<div class="data-line">> AUTHENTIFICATION: OK</div>
|
|
<div class="data-line">> DISPONIBILITÉ: OK</div>
|
|
<p style="font-size: 0.8rem;">NEW_REQ: PFS / AUTO-HEAL / ASYNC / E2EE</p>
|
|
</div>
|
|
|
|
<div class="fragment" id="f1" style="--r: 1deg; top: 15%; left: 40%;">
|
|
<div class="meta">PID: 8812 // ADDR: 0x012</div>
|
|
<h2>HISTORIQUE_SOUVERAIN</h2>
|
|
<div class="data-line">1982: SMTP (Email) - <span class="critical">FULL_CLEAR_TEXT</span></div>
|
|
<div class="data-line">1992: SMS - STOCKAGE_SMSC_OPERATEUR</div>
|
|
<div class="data-line">2020: RCS - GOOGLE_E2EE_ENFORCED</div>
|
|
<p class="meta">NOTE: Le serveur Orange/Outlook voit TOUT le "Hop-by-Hop".</p>
|
|
</div>
|
|
|
|
<div class="fragment" id="f2" style="--r: -3deg; top: 40%; left: 20%;">
|
|
<div class="meta">PID: 1092 // ADDR: 0x045</div>
|
|
<h2>PIONNIERS_CRYPT</h2>
|
|
<div class="data-line">1991 - PGP: Phil Zimmermann. E2EE_ASYNC.</div>
|
|
<div class="data-line" style="color: #f80;">!! PAS DE PFS (Clé statique = Risque)</div>
|
|
<div class="data-line">2004 - OTR: PFS + Déniabilité.</div>
|
|
<div class="data-line" style="color: #f80;">!! SYNCHRONE (Mobile Incompatible)</div>
|
|
</div>
|
|
|
|
<div class="fragment" id="f3" style="--r: 2deg; top: 30%; left: 50%;">
|
|
<div class="meta">PID: 7721 // ADDR: 0x099</div>
|
|
<h2>SIGNAL_CORE</h2>
|
|
<div class="data-line">X3DH: Extended Triple Diffie-Hellman.</div>
|
|
<div class="data-line">ASYNCHRONISME: Système de Pre-keys.</div>
|
|
<div class="data-line">DOUBLE_RATCHET: Auto-guérison.</div>
|
|
<div class="data-line">PQXDH (2023): Post-Quantum Ready.</div>
|
|
</div>
|
|
|
|
<div class="fragment" id="f4" style="--r: -1deg; top: 55%; left: 15%;">
|
|
<div class="meta">PID: 9901 // ADDR: 0x102</div>
|
|
<h2>BENCHMARK_MATRIX</h2>
|
|
<table>
|
|
<tr><th>APP</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 class="fragment" id="f5" style="--r: 5deg; top: 50%; left: 45%;">
|
|
<div class="meta">PID: 0000 // ADDR: 0xAXO</div>
|
|
<h2 style="background: #f0f; color: white;">AXOLOTL_VISUAL</h2>
|
|
<div style="font-size: 5rem; text-align: center;">🦦</div>
|
|
<p style="text-align: center;">DÉPLOIEMENT TABLEAU NOIR</p>
|
|
</div>
|
|
|
|
<div class="fragment" id="f6" style="--r: -2deg; top: 10%; left: 30%;">
|
|
<div class="meta">PID: 6661 // ADDR: 0xERR</div>
|
|
<h2 class="critical">LIMITATIONS_DETECTED</h2>
|
|
<div class="data-line">QUANTIQUE: Algorithme de Shor vs ECDH.</div>
|
|
<div class="data-line">ENDPOINTS: Spyware Pegasus (Bypass Crypto).</div>
|
|
<div class="data-line">MitM: Injection de fausses clés publiques.</div>
|
|
</div>
|
|
|
|
<div class="fragment" id="f7" style="--r: 0deg; top: 25%; left: 25%;">
|
|
<div class="meta">PID: 2210 // ADDR: 0xEND</div>
|
|
<h2>SOUVERAINETÉ_DATA</h2>
|
|
<div class="data-line">DISCORD: Centralisé. Pas d'E2EE texte.</div>
|
|
<div class="data-line">MATRIX: Décentralisé. Fédéré. Tchap.</div>
|
|
<p class="meta">> SESSION_END. QUESTIONS?</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
let current = 0;
|
|
const fragments = document.querySelectorAll('.fragment');
|
|
const noiseBg = document.getElementById('noise-bg');
|
|
|
|
// Remplissage du fond avec du bruit hexadécimal
|
|
let noise = "";
|
|
for(let i=0; i<100; i++) {
|
|
for(let j=0; j<20; j++) {
|
|
noise += Math.random().toString(16).slice(2, 10) + " ";
|
|
}
|
|
noise += "\n";
|
|
}
|
|
noiseBg.innerText = noise;
|
|
|
|
function showNext() {
|
|
// La slide actuelle reste visible mais perd sa priorité (z-index)
|
|
fragments[current].style.zIndex = 5;
|
|
fragments[current].style.opacity = 0.4;
|
|
fragments[current].style.filter = "grayscale(1)";
|
|
|
|
current = (current + 1) % fragments.length;
|
|
|
|
// La nouvelle slide pop au dessus
|
|
const next = fragments[current];
|
|
next.style.display = "block";
|
|
next.style.zIndex = 20;
|
|
next.style.opacity = 1;
|
|
next.style.filter = "grayscale(0)";
|
|
next.classList.add('active');
|
|
|
|
// Petit effet de tremblement de l'écran
|
|
document.body.style.transform = `translate(${(Math.random()-0.5)*10}px, ${(Math.random()-0.5)*10}px)`;
|
|
setTimeout(() => document.body.style.transform = "translate(0,0)", 100);
|
|
}
|
|
|
|
window.addEventListener('keydown', e => {
|
|
if(e.key === 'ArrowRight' || e.key === ' ') showNext();
|
|
});
|
|
|
|
// Optionnel: cliquer n'importe où pour avancer
|
|
window.addEventListener('mousedown', showNext);
|
|
</script>
|
|
</body>
|
|
</html> |