Camilla Schoeser
256 lines
9.3 KiB
HTML
256 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>DECRYPTO // PULSE_SYSTEM_v2</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
|
|
|
|
:root {
|
|
--neon: #00ff9f;
|
|
--alert: #ff0055;
|
|
--dark: #020b14;
|
|
--glass: rgba(0, 20, 30, 0.85);
|
|
}
|
|
|
|
body, html {
|
|
margin: 0; padding: 0;
|
|
height: 100%; overflow: hidden;
|
|
background: var(--dark);
|
|
color: var(--neon);
|
|
font-family: 'Share Tech Mono', monospace;
|
|
}
|
|
|
|
/* Effet de grain/bruit analogique */
|
|
body::before {
|
|
content: "";
|
|
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
|
background: url('https://grainy-gradients.vercel.app/noise.svg');
|
|
opacity: 0.05; pointer-events: none; z-index: 1000;
|
|
}
|
|
|
|
/* Bandeau de données défilantes */
|
|
.data-streamer {
|
|
position: fixed; top: 0; width: 100%;
|
|
background: rgba(0, 255, 159, 0.1);
|
|
font-size: 0.8rem; padding: 5px 0;
|
|
white-space: nowrap; overflow: hidden;
|
|
border-bottom: 1px solid var(--neon);
|
|
z-index: 50;
|
|
}
|
|
|
|
.stream-content {
|
|
display: inline-block;
|
|
animation: stream 30s linear infinite;
|
|
}
|
|
|
|
@keyframes stream {
|
|
from { transform: translateX(100%); }
|
|
to { transform: translateX(-100%); }
|
|
}
|
|
|
|
/* Container Principal */
|
|
.deck {
|
|
position: relative;
|
|
width: 100vw; height: 100vh;
|
|
display: flex; justify-content: center; align-items: center;
|
|
}
|
|
|
|
.slide {
|
|
position: absolute;
|
|
width: 850px; height: 550px;
|
|
background: var(--glass);
|
|
border: 2px solid var(--neon);
|
|
padding: 40px; box-sizing: border-box;
|
|
box-shadow: 0 0 15px rgba(0, 255, 159, 0.2);
|
|
opacity: 0;
|
|
transform: scale(0.8) rotateX(10deg);
|
|
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
pointer-events: none;
|
|
/* L'effet de clignotement constant des bordures */
|
|
animation: border-pulse 4s infinite;
|
|
}
|
|
|
|
@keyframes border-pulse {
|
|
0%, 100% { border-color: var(--neon); box-shadow: 0 0 15px rgba(0, 255, 159, 0.2); }
|
|
50% { border-color: #008855; box-shadow: 0 0 5px rgba(0, 255, 159, 0.1); }
|
|
}
|
|
|
|
.slide.active {
|
|
opacity: 1; transform: scale(1) rotateX(0deg);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Titres clignotants au hover */
|
|
h1, h2 {
|
|
text-transform: uppercase;
|
|
letter-spacing: 3px;
|
|
margin: 0 0 20px 0;
|
|
cursor: default;
|
|
}
|
|
|
|
h1:hover {
|
|
animation: glitch 0.2s infinite;
|
|
color: white;
|
|
}
|
|
|
|
@keyframes glitch {
|
|
0% { transform: translate(2px, 0); text-shadow: 2px 0 var(--alert); }
|
|
50% { transform: translate(-2px, 0); text-shadow: -2px 0 #00ffff; }
|
|
100% { transform: translate(0); }
|
|
}
|
|
|
|
/* Éléments de contenu */
|
|
.terminal-block {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
border-left: 3px solid var(--neon);
|
|
padding: 15px; margin: 15px 0;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
|
|
}
|
|
|
|
.btn-nav {
|
|
position: fixed; bottom: 30px;
|
|
background: transparent; border: 1px solid var(--neon);
|
|
color: var(--neon); padding: 10px 20px;
|
|
font-family: 'Share Tech Mono'; cursor: pointer;
|
|
transition: 0.3s; z-index: 100;
|
|
}
|
|
|
|
.btn-nav:hover { background: var(--neon); color: var(--dark); box-shadow: 0 0 20px var(--neon); }
|
|
.next { right: 40px; }
|
|
.prev { left: 40px; }
|
|
|
|
.scanline {
|
|
width: 100%; height: 100px;
|
|
background: linear-gradient(to bottom, transparent, rgba(0, 255, 159, 0.05), transparent);
|
|
position: absolute; top: -100px; left: 0;
|
|
animation: scan 6s linear infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes scan {
|
|
from { top: -100px; }
|
|
to { top: 100%; }
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="data-streamer">
|
|
<div class="stream-content">
|
|
>> E2EE_STATUS: ACTIVE // AES_256_GCM // CURVE25519 // DOUBLE_RATCHET_ROTATION_SUCCESSFUL // SESSION_ID: 0x88A21F // PQXDH_READY >>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="deck">
|
|
<div class="scanline"></div>
|
|
|
|
<div class="slide active" id="s1">
|
|
<p style="color: var(--alert)">[ SYSTEM_INIT ]</p>
|
|
<h1>CRYPTO_ANALYSIS</h1>
|
|
<div class="terminal-block">
|
|
> PROTOCOLE: SIGNAL / MATRIX / DISCORD<br>
|
|
> ANALYSTE: TOM<br>
|
|
> LOCATION: TELECOM NANCY
|
|
</div>
|
|
<p style="font-size: 0.8rem; margin-top: 50px;">APPUYEZ SUR [ESPACE] POUR INJECTER LES DONNÉES</p>
|
|
</div>
|
|
|
|
<div class="slide" id="s2">
|
|
<h2>Piliers Sécuritaires</h2>
|
|
<div class="stats-grid">
|
|
<div class="terminal-block">
|
|
[PFS] Confidentialité Persistante<br>
|
|
<small>Une clé compromise ne compromet pas le passé.</small>
|
|
</div>
|
|
<div class="terminal-block">
|
|
[SELF-HEALING] Auto-guérison<br>
|
|
<small>Le cliquet (Ratchet) répare la sécurité à chaque msg.</small>
|
|
</div>
|
|
<div class="terminal-block">
|
|
[DENIABILITY] Déniabilité<br>
|
|
<small>Impossible de prouver légalement l'auteur d'un msg.</small>
|
|
</div>
|
|
<div class="terminal-block">
|
|
[ASYNC] Asynchronisme<br>
|
|
<small>Communication fluide sans présence simultanée.</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide" id="s3">
|
|
<h2>History_Log.txt</h2>
|
|
<p>> 1982: SMTP (Email) - <span style="color:var(--alert)">VULNÉRABLE</span></p>
|
|
<p>> 1991: PGP (E2EE) - <span style="color:var(--neon)">STABLE</span> (Clés statiques)</p>
|
|
<p>> 2004: OTR (PFS) - <span style="color:var(--alert)">FRAGILE</span> (Sync)</p>
|
|
<p>> 2013: SIGNAL PROTOCOL - <span style="color:var(--neon)">OPTIMAL</span></p>
|
|
<div class="terminal-block" style="border-color: var(--alert);">
|
|
AVERTISSEMENT: Le SMS (RCS Fallback) reste le maillon faible en 2026.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide" id="s4">
|
|
<h2>Signal_Core // X3DH</h2>
|
|
<p>Le secret de l'asynchronisme :</p>
|
|
<ul>
|
|
<li>Alice récupère les <strong>Pre-keys</strong> de Bob sur le serveur.</li>
|
|
<li>Génération d'un secret partagé sans contact direct.</li>
|
|
<li>Démarrage immédiat du <strong>Double Ratchet</strong>.</li>
|
|
</ul>
|
|
<div style="text-align: center; border: 1px dashed var(--neon); padding: 10px;">
|
|
DÉPENDANCE: Confiance initiale dans la clé d'identité.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide" id="s5">
|
|
<h2>Matrix vs Discord</h2>
|
|
<table style="width: 100%; text-align: left; border-spacing: 10px;">
|
|
<tr><th style="color:var(--alert)">DISCORD</th><th style="color:var(--neon)">MATRIX</th></tr>
|
|
<tr>
|
|
<td>Centralisé / Propriétaire<br>Texte non-E2EE (Modération)</td>
|
|
<td>Fédéré / Open Standard<br>E2EE partout (Souveraineté)</td>
|
|
</tr>
|
|
</table>
|
|
<div class="terminal-block">
|
|
NOTE: Matrix est utilisé par l'État Français (Tchap) pour son isolation réseau.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide" id="s6">
|
|
<h1 style="color:var(--alert)">Quantum_Threat</h1>
|
|
<p>L'ordinateur quantique pourrait briser ECDH (Courbes elliptiques).</p>
|
|
<div class="terminal-block">
|
|
ALERTE: "Harvest Now, Decrypt Later"<br>
|
|
SOLUTION: <strong>PQXDH</strong> (Post-Quantum Extended Diffie-Hellman)
|
|
</div>
|
|
<h2 style="text-align: center; margin-top: 30px;">FIN_DE_TRANSMISSION</h2>
|
|
<p style="text-align: center;">Questions ? _</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button class="btn-nav prev" onclick="change(-1)">[ PREV ]</button>
|
|
<button class="btn-nav next" onclick="change(1)">[ NEXT ]</button>
|
|
|
|
<script>
|
|
let current = 0;
|
|
const slides = document.querySelectorAll('.slide');
|
|
|
|
function change(dir) {
|
|
slides[current].classList.remove('active');
|
|
current = (current + dir + slides.length) % slides.length;
|
|
slides[current].classList.add('active');
|
|
}
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if(e.key === 'ArrowRight' || e.key === ' ') change(1);
|
|
if(e.key === 'ArrowLeft' || e.key === 'Backspace') change(-1);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |