Camilla Schoeser
222 lines
8.0 KiB
HTML
222 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>TERMINAL_SIGNAL_V6</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;700&display=swap');
|
|
|
|
:root {
|
|
--neon: #00ff41;
|
|
--dark-neon: #003300;
|
|
--alert: #ff003c;
|
|
--bg: #020202;
|
|
--paper: #f0f0f0;
|
|
}
|
|
|
|
body, html {
|
|
margin: 0; padding: 0;
|
|
background: var(--bg);
|
|
color: var(--neon);
|
|
font-family: 'Fira Code', monospace;
|
|
overflow: hidden; height: 100vh;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
/* --- EFFETS DE FOND HACKER --- */
|
|
#fx-overlay {
|
|
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
|
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
|
|
linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
|
|
background-size: 100% 3px, 3px 100%;
|
|
pointer-events: none; z-index: 1000;
|
|
}
|
|
|
|
#data-stream {
|
|
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
|
font-size: 10px; color: var(--dark-neon); opacity: 0.2;
|
|
white-space: pre; pointer-events: none; z-index: 1;
|
|
}
|
|
|
|
/* --- STRUCTURE DES CARTES --- */
|
|
#desk { position: relative; width: 100vw; height: 100vh; perspective: 1000px; z-index: 10; }
|
|
|
|
.card {
|
|
position: absolute;
|
|
width: 480px; padding: 25px;
|
|
background: rgba(0, 10, 0, 0.95);
|
|
border: 1px solid var(--neon);
|
|
box-shadow: 0 0 15px var(--dark-neon);
|
|
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
|
|
display: none;
|
|
}
|
|
|
|
.card.active {
|
|
display: block;
|
|
animation: glitch-in 0.4s ease-out forwards;
|
|
}
|
|
|
|
.card.paused {
|
|
transform: scale(0.5) translateX(-150vw) rotate(-20deg) !important;
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes glitch-in {
|
|
0% { transform: scale(1.5) translateY(-100px) skewX(20deg); opacity: 0; }
|
|
70% { transform: scale(1) translateY(5px) skewX(-5deg); opacity: 1; }
|
|
100% { transform: scale(1) translateY(0) rotate(var(--r)); opacity: 1; }
|
|
}
|
|
|
|
/* --- CONTENU --- */
|
|
h2 {
|
|
font-size: 1.2rem; margin: 0 0 15px 0;
|
|
border-left: 5px solid var(--neon); padding-left: 10px;
|
|
text-transform: uppercase; letter-spacing: 2px;
|
|
}
|
|
|
|
.blink { animation: blink-anim 1s infinite; }
|
|
@keyframes blink-anim { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
|
|
|
|
.code-block {
|
|
background: var(--dark-neon); color: var(--neon);
|
|
padding: 10px; font-size: 0.8rem; margin: 10px 0;
|
|
border: 1px dashed var(--neon);
|
|
}
|
|
|
|
/* --- L'AXOLOTL --- */
|
|
#axo-layer {
|
|
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
|
background: var(--paper); color: #000;
|
|
display: none; flex-direction: column; justify-content: center; align-items: center;
|
|
z-index: 500; transition: opacity 0.3s;
|
|
}
|
|
#axo-layer.show { display: flex; animation: system-flash 0.5s steps(2); }
|
|
|
|
@keyframes system-flash {
|
|
0% { filter: invert(1); }
|
|
50% { filter: invert(0); }
|
|
100% { filter: invert(0); }
|
|
}
|
|
|
|
/* --- UI ELEMENTS --- */
|
|
#hud {
|
|
position: fixed; top: 20px; left: 20px; z-index: 2000;
|
|
font-size: 0.7rem; text-shadow: 0 0 5px var(--neon);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="fx-overlay"></div>
|
|
<div id="data-stream"></div>
|
|
|
|
<div id="hud">
|
|
[ SYSTEM: <span class="blink">STABLE</span> ]<br>
|
|
[ NODE: TELECOM_NANCY_SRV ]<br>
|
|
[ DATA_STACK: <span id="counter">0/8</span> ]
|
|
</div>
|
|
|
|
<div id="desk">
|
|
<div class="card" id="c0" style="--r: -2deg; top: 10%; left: 8%;">
|
|
<h2>// 01_FUNDAMENTALS</h2>
|
|
<p>Analyse des piliers C.I.D.A :</p>
|
|
<div class="code-block">
|
|
> Confidentialité : AES-256 / X3DH<br>
|
|
> Intégrité : HMAC-SHA256<br>
|
|
> Authentification : Ed25519
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" id="c1" style="--r: 3deg; top: 15%; left: 52%;">
|
|
<h2>// 02_LEGACY_TRAFFIC</h2>
|
|
<p>Flux en clair (Danger) :</p>
|
|
<p>1982 [SMTP] -> 1992 [SMS]<br>Le protocole <span style="color:var(--alert)">Hop-by-Hop</span> expose les métadonnées et le contenu aux serveurs intermédiaires.</p>
|
|
</div>
|
|
|
|
<div class="card" id="c2" style="--r: -4deg; top: 48%; left: 12%;">
|
|
<h2>// 03_PIONEER_ERRORS</h2>
|
|
<p><span style="color:var(--alert)">PGP:</span> No Forward Secrecy.<br>Si la clé privée fuit, 10 ans d'archives tombent.</p>
|
|
<p><span style="color:var(--alert)">OTR:</span> Sync-Only.<br>Inutilisable sur réseau asynchrone (Mobile).</p>
|
|
</div>
|
|
|
|
<div class="card" id="c3" style="--r: 1deg; top: 45%; left: 55%;">
|
|
<h2>// 04_SIGNAL_PROTOCOL</h2>
|
|
<div class="code-block" style="border-color: var(--cyan); color: var(--cyan);">
|
|
RUN: Double_Ratchet.sh<br>
|
|
- KDF Chain Rotation<br>
|
|
- Diffie-Hellman Ratchet<br>
|
|
- Post-Quantum (PQXDH)
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" id="c4" style="--r: -1deg; top: 12%; left: 30%;">
|
|
<h2 style="border-color: var(--alert);">// 05_VULNERABILITIES</h2>
|
|
<p>Menaces persistantes :</p>
|
|
<ul>
|
|
<li>Quantum Shor Algorithm</li>
|
|
<li>Endpoint Infection (Pegasus)</li>
|
|
<li>Man-in-the-Middle (MITM)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card" id="c5" style="--r: 5deg; top: 52%; left: 38%;">
|
|
<h2>// 06_SOUVERAINETÉ</h2>
|
|
<p>Matrice de confiance :</p>
|
|
<p>MATRIX (Element) vs DISCORD.<br>Le choix entre <span style="color:var(--cyan)">Fédération E2EE</span> et <span style="color:var(--alert)">Silo Centralisé</span>.</p>
|
|
<div class="blink" style="text-align:center; font-size: 0.7rem; margin-top:20px;">[ EOF ]</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="axo-layer">
|
|
<div style="font-size: 10rem;">🦦</div>
|
|
<h1 style="font-family: 'Space Mono'; letter-spacing: 10px; margin: 0;">CORE_X3DH</h1>
|
|
<div style="width: 60%; height: 2px; background: #000; margin: 20px 0;"></div>
|
|
<p>DÉPLOIEMENT DU SCHÉMA TECHNIQUE AU TABLEAU</p>
|
|
</div>
|
|
|
|
<script>
|
|
let step = 0;
|
|
const cards = document.querySelectorAll('.card');
|
|
const axo = document.getElementById('axo-layer');
|
|
const counter = document.getElementById('counter');
|
|
const stream = document.getElementById('data-stream');
|
|
|
|
// Génération du fond de données
|
|
let hex = "";
|
|
for(let i=0; i<500; i++) hex += (Math.random()*0xFFFFFF << 0).toString(16).padStart(6, '0') + " ";
|
|
stream.innerText = hex;
|
|
|
|
function next() {
|
|
if (step < 4) {
|
|
cards[step].classList.add('active');
|
|
step++;
|
|
counter.innerText = step + "/6";
|
|
}
|
|
else if (step === 4) {
|
|
// TRANSITION AXOLOTL
|
|
document.querySelectorAll('.card.active').forEach(c => c.classList.add('paused'));
|
|
axo.classList.add('show');
|
|
document.getElementById('hud').style.color = "#000";
|
|
step++;
|
|
}
|
|
else if (step === 5) {
|
|
// RETOUR DU BUREAU
|
|
axo.classList.remove('show');
|
|
document.querySelectorAll('.card.active').forEach(c => c.classList.remove('paused'));
|
|
document.getElementById('hud').style.color = "var(--neon)";
|
|
step++;
|
|
}
|
|
else if (step > 5 && step < 8) {
|
|
cards[step-2].classList.add('active');
|
|
step++;
|
|
counter.innerText = (step-2) + "/6";
|
|
}
|
|
}
|
|
|
|
window.addEventListener('keydown', e => {
|
|
if (e.key === 'ArrowRight' || e.key === ' ') next();
|
|
if (e.key === 'Escape') location.reload();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |