Camilla Schoeser
196 lines
7.6 KiB
HTML
196 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>SIGNAL_RAW_DATA</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
|
|
|
|
:root {
|
|
--color: #00ff41;
|
|
--bg: #050505;
|
|
}
|
|
|
|
body, html {
|
|
margin: 0; padding: 0; background: var(--bg);
|
|
color: var(--color); font-family: 'VT323', monospace;
|
|
overflow: hidden; height: 100vh;
|
|
}
|
|
|
|
/* Effet de CRT (Vieux moniteur) */
|
|
.crt::before {
|
|
content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
|
|
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
|
|
linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
|
|
z-index: 2; background-size: 100% 2px, 3px 100%; pointer-events: none;
|
|
}
|
|
|
|
#canvas-bg { position: fixed; top: 0; left: 0; z-index: 0; opacity: 0.3; }
|
|
|
|
.content-layer {
|
|
position: relative; z-index: 10; height: 100vh;
|
|
display: flex; justify-content: center; align-items: center;
|
|
}
|
|
|
|
.data-fragment {
|
|
display: none; width: 80%; max-width: 900px;
|
|
animation: glitch-view 0.2s steps(2);
|
|
}
|
|
|
|
.data-fragment.active { display: block; }
|
|
|
|
@keyframes glitch-view {
|
|
0% { transform: translate(10px, -10px); filter: invert(1); }
|
|
50% { transform: translate(-10px, 10px); }
|
|
100% { transform: translate(0); }
|
|
}
|
|
|
|
h1 { font-size: 4rem; text-transform: uppercase; margin: 0; line-height: 0.8; letter-spacing: -2px; }
|
|
.sub { font-size: 1.5rem; color: #fff; background: var(--color); color: #000; display: inline-block; padding: 0 10px; }
|
|
|
|
.raw-text { font-size: 1.8rem; margin-top: 20px; white-space: pre-wrap; }
|
|
.line { margin-bottom: 10px; border-left: 4px solid var(--color); padding-left: 15px; }
|
|
|
|
.scatter { position: absolute; font-size: 0.8rem; opacity: 0.4; pointer-events: none; }
|
|
|
|
table { width: 100%; border-collapse: collapse; font-size: 1.5rem; margin-top: 20px; }
|
|
th { text-align: left; text-decoration: underline; }
|
|
td { padding: 5px 0; }
|
|
|
|
.progress-frame { border: 1px solid var(--color); height: 10px; width: 100%; margin-top: 50px; position: relative; }
|
|
.progress-bar { background: var(--color); height: 100%; transition: width 0.3s; }
|
|
</style>
|
|
</head>
|
|
<body class="crt">
|
|
|
|
<canvas id="canvas-bg"></canvas>
|
|
|
|
<div class="content-layer">
|
|
|
|
<div class="data-fragment active">
|
|
<h1>SIGNAL_PROTOCOL</h1>
|
|
<div class="sub">DECRYPTION_IN_PROGRESS</div>
|
|
<div class="raw-text">
|
|
<div class="line">TARGET: C.I.D.A Analysis</div>
|
|
<div class="line">STATUS: [Confidentialité] [Intégrité] [Authentification] [Dispo]</div>
|
|
<div class="line" style="color: #fff">> REQUIS: PFS / AUTO-HEAL / ASYNC / E2EE</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="data-fragment">
|
|
<h1 style="font-size: 3rem;">ERA_0: CLEAR_TEXT</h1>
|
|
<div class="raw-text">
|
|
<div class="line">1982: SMTP // Hop-by-Hop // Security: NULL</div>
|
|
<div class="line">1992: SMS // "Merry Xmas" // Center: SMSC [Orange/SFR Read-Access]</div>
|
|
<div class="line">2020: RCS // Google-Push E2EE // Interop-Issues: Apple_v_Android</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="data-fragment">
|
|
<h1>PIONEERS_LOG</h1>
|
|
<div class="raw-text">
|
|
<div class="line">1991_PGP: [E2EE_Async] - <span style="color:red">No_PFS</span></div>
|
|
<div class="line">2004_OTR: [PFS_Deniable] - <span style="color:red">Sync_Only</span></div>
|
|
<div class="line" style="font-size: 1.2rem; opacity: 0.7;">"Bob must be online to handshake. Mobile fail."</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="data-fragment">
|
|
<h1 style="color: #fff;">SIGNAL_CORE</h1>
|
|
<div class="raw-text">
|
|
<div class="line">X3DH: Pre-keys system [Alice speaks to offline Bob]</div>
|
|
<div class="line">DOUBLE_RATCHET: Self-healing keys [Every msg = New Key]</div>
|
|
<div class="line">PQXDH: Post-Quantum armor deployed.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="data-fragment">
|
|
<h1>BENCHMARK_v2</h1>
|
|
<table>
|
|
<tr><th>MODE</th><th>E2EE</th><th>PFS</th><th>ASYNC</th></tr>
|
|
<tr><td>SMS</td><td>NO</td><td>NO</td><td>YES</td></tr>
|
|
<tr><td>PGP</td><td>YES</td><td>NO</td><td>YES</td></tr>
|
|
<tr><td>OTR</td><td>YES</td><td>YES</td><td>NO</td></tr>
|
|
<tr><td>SIGNAL</td><td>YES</td><td>YES</td><td>YES</td></tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="data-fragment">
|
|
<h1 style="text-align: center;">TECH_DRAWING</h1>
|
|
<div style="font-size: 10rem; text-align: center;">🦦</div>
|
|
<div class="sub" style="display: block; text-align: center;">WHITEBOARD_MODE: ON</div>
|
|
</div>
|
|
|
|
<div class="data-fragment">
|
|
<h1 style="color: red;">THREAT_INTEL</h1>
|
|
<div class="raw-text">
|
|
<div class="line">QUANTUM: Shor vs ECDH [Solution: PQXDH]</div>
|
|
<div class="line">ENDPOINTS: Pegasus Spyware [OS Bypass]</div>
|
|
<div class="line">MitM: Key Injection [Check Safety Numbers]</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="data-fragment">
|
|
<h1>GOUVERNANCE</h1>
|
|
<div class="raw-text">
|
|
<div class="line">DISCORD: Centralized / No-E2EE (Modération)</div>
|
|
<div class="line">MATRIX: Federated / Tchap / Full Sovereignty</div>
|
|
</div>
|
|
<div class="sub" style="margin-top: 50px;">SESSION_CLOSED // QUESTIONS?</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="progress-frame" style="position: fixed; bottom: 0; left: 0;">
|
|
<div class="progress-bar" id="bar" style="width: 12.5%;"></div>
|
|
</div>
|
|
|
|
<script>
|
|
const canvas = document.getElementById('canvas-bg');
|
|
const ctx = canvas.getContext('2d');
|
|
let current = 0;
|
|
const frags = document.querySelectorAll('.data-fragment');
|
|
|
|
// Background Matrix-like
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
const chars = "010101ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
|
const drops = Array(Math.floor(canvas.width/20)).fill(1);
|
|
|
|
function draw() {
|
|
ctx.fillStyle = "rgba(5, 5, 5, 0.1)";
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
ctx.fillStyle = "#00ff41";
|
|
ctx.font = "15px monospace";
|
|
drops.forEach((y, i) => {
|
|
const text = chars[Math.floor(Math.random()*chars.length)];
|
|
ctx.fillText(text, i*20, y*20);
|
|
if(y*20 > canvas.height && Math.random() > 0.975) drops[i] = 0;
|
|
drops[i]++;
|
|
});
|
|
}
|
|
setInterval(draw, 33);
|
|
|
|
// Navigation
|
|
function update() {
|
|
frags.forEach((f, i) => f.classList.toggle('active', i === current));
|
|
document.getElementById('bar').style.width = ((current + 1) / frags.length * 100) + "%";
|
|
}
|
|
|
|
window.addEventListener('keydown', e => {
|
|
if(e.key === 'ArrowRight' || e.key === ' ') { current = (current + 1) % frags.length; update(); }
|
|
if(e.key === 'ArrowLeft') { current = (current - 1 + frags.length) % frags.length; update(); }
|
|
});
|
|
|
|
// Random noise text
|
|
for(let i=0; i<20; i++) {
|
|
const d = document.createElement('div');
|
|
d.className = 'scatter';
|
|
d.style.left = Math.random()*100 + "%";
|
|
d.style.top = Math.random()*100 + "%";
|
|
d.innerText = "0x" + Math.floor(Math.random()*16777215).toString(16);
|
|
document.body.appendChild(d);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |