Camilla Schoeser
214 lines
8.7 KiB
HTML
214 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>SIGNAL_TERMINAL_V7_PERFECT_TIMING</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=VT323&family=JetBrains+Mono:wght@300;700&display=swap');
|
|
|
|
:root {
|
|
--bg: #0d0e12;
|
|
--surface: #16171d;
|
|
--text: #e0e0e0;
|
|
--cyan: #00f2ff;
|
|
--alert: #ff3e00;
|
|
--font-pixel: 'VT323', monospace;
|
|
--font-code: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
body, html {
|
|
margin: 0; padding: 0; background: var(--bg);
|
|
color: var(--text); font-family: var(--font-code);
|
|
overflow: hidden; height: 100vh;
|
|
}
|
|
|
|
/* --- BACKGROUND FX --- */
|
|
#scanner-line {
|
|
position: fixed; top: 0; left: 0; width: 100%; height: 2px;
|
|
background: rgba(0, 242, 255, 0.1); box-shadow: 0 0 10px var(--cyan);
|
|
z-index: 1000; pointer-events: none; animation: scan 4s linear infinite;
|
|
transition: opacity 0.5s;
|
|
}
|
|
@keyframes scan { from { top: -10%; } to { top: 110%; } }
|
|
|
|
#bg-logs {
|
|
position: fixed; bottom: 0; left: 0; width: 100%; height: 40px;
|
|
background: rgba(0,0,0,0.8); border-top: 1px solid #333;
|
|
font-family: var(--font-pixel); font-size: 1.2rem;
|
|
color: #555; display: flex; align-items: center;
|
|
white-space: nowrap; overflow: hidden; z-index: 2000;
|
|
}
|
|
|
|
/* --- CARDS SYSTEM --- */
|
|
#desk { position: relative; width: 100vw; height: 100vh; perspective: 1200px; padding: 50px; box-sizing: border-box; }
|
|
|
|
.card {
|
|
position: absolute; width: 500px; padding: 30px;
|
|
background: var(--surface); border: 1px solid #333;
|
|
box-shadow: 10px 10px 0px #000;
|
|
display: none;
|
|
/* Transition de dézoom très douce */
|
|
transition: all 1.2s cubic-bezier(0.2, 1, 0.3, 1);
|
|
}
|
|
|
|
.card.active {
|
|
display: block;
|
|
z-index: 100;
|
|
opacity: 1;
|
|
filter: grayscale(0) blur(0);
|
|
border-color: var(--cyan);
|
|
transform: scale(1.25) translateZ(100px);
|
|
}
|
|
|
|
/* ANIMATIONS D'ENTRÉE RALENTIES (1.5s) */
|
|
.slide-v { animation: entry-v 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
|
.slide-h { animation: entry-h 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
|
|
|
@keyframes entry-v {
|
|
0% { transform: translateY(100vh) scale(1.25) translateZ(100px); opacity: 0; }
|
|
100% { transform: translateY(0) scale(1.25) translateZ(100px); opacity: 1; }
|
|
}
|
|
|
|
@keyframes entry-h {
|
|
0% { transform: translateX(-100vw) scale(1.25) translateZ(100px); opacity: 0; }
|
|
100% { transform: translateX(0) scale(1.25) translateZ(100px); opacity: 1; }
|
|
}
|
|
|
|
.card.background {
|
|
display: block;
|
|
transform: scale(0.7) translateZ(-250px) translateY(-20px);
|
|
opacity: 0.2;
|
|
filter: grayscale(1) blur(3px);
|
|
z-index: 5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Classe pour forcer le placement sans animation au retour Axolotl */
|
|
.no-anim { animation: none !important; transition: none !important; }
|
|
|
|
.card.off-screen { transform: scale(0.5) translateY(-150vh); opacity: 0; }
|
|
|
|
/* TYPO */
|
|
h2 {
|
|
font-family: var(--font-pixel); font-size: 2.5rem; margin: 0 0 15px 0;
|
|
color: var(--cyan); text-transform: uppercase;
|
|
animation: jitter-rare 5s step-end infinite;
|
|
}
|
|
@keyframes jitter-rare {
|
|
0%, 95%, 100% { transform: translate(0); }
|
|
96% { transform: translate(1px, -1px); }
|
|
98% { transform: translate(-1px, 1px); }
|
|
}
|
|
|
|
.tag { font-family: var(--font-pixel); font-size: 1rem; color: var(--alert); margin-bottom: 5px; }
|
|
.code-box { background: #000; padding: 15px; border-left: 3px solid var(--cyan); font-size: 0.85rem; color: #888; margin: 15px 0; }
|
|
|
|
/* AXOLOTL */
|
|
#axo-layer {
|
|
position: fixed; inset: 0; background: #eee; color: #111;
|
|
display: none; flex-direction: column; justify-content: center; align-items: center; z-index: 500;
|
|
}
|
|
#axo-layer.show { display: flex; animation: glitch-flash 0.3s steps(2); }
|
|
|
|
#ui-header { position: fixed; top: 20px; left: 20px; font-family: var(--font-pixel); font-size: 1.5rem; color: #444; z-index: 3000; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="scanner-line"></div>
|
|
<div id="ui-header">SYS_TRACE: <span id="progress">00</span></div>
|
|
<div id="bg-logs"><div id="log-scroll"></div></div>
|
|
|
|
<div id="desk">
|
|
<div class="card" id="c0" style="top: 15%; left: 10%;">
|
|
<div class="tag">[ CORE_SECURITY ]</div>
|
|
<h2>01_PROTOCOLES</h2>
|
|
<p>Analyse C.I.D.A : Confidentialité, Intégrité, Authentification, Disponibilité.</p>
|
|
<div class="code-box">>> status: secure<br>>> encryption: enabled</div>
|
|
</div>
|
|
<div class="card" id="c1" style="top: 10%; left: 52%;">
|
|
<div class="tag">[ HISTORY_DUMP ]</div>
|
|
<h2>02_ERA_ZERO</h2>
|
|
<p>1982: SMTP / 1992: SMS.<br>Transit en clair. L'opérateur réseau a un accès complet.</p>
|
|
</div>
|
|
<div class="card" id="c2" style="top: 50%; left: 15%;">
|
|
<div class="tag">[ LEGACY_CRYPT ]</div>
|
|
<h2>03_PIONNIERS</h2>
|
|
<p>PGP (1991): Async / No PFS.<br>OTR (2004): PFS / No Async (Mobile Fail).</p>
|
|
</div>
|
|
<div class="card" id="c3" style="top: 45%; left: 55%;">
|
|
<div class="tag">[ CURRENT_STD ]</div>
|
|
<h2>04_SIGNAL</h2>
|
|
<p>X3DH + Double Ratchet.<br>Auto-guérison des clés. Résistance PQXDH.</p>
|
|
</div>
|
|
<div class="card" id="c4" style="top: 20%; left: 30%;">
|
|
<div class="tag">[ THREAT_DETECT ]</div>
|
|
<h2 style="color:var(--alert)">05_LIMITES</h2>
|
|
<p>> Shor's Algorithm (Quantum)<br>> Pegasus (Endpoint compromise)<br>> MitM (Key Validation)</p>
|
|
</div>
|
|
<div class="card" id="c5" style="top: 55%; left: 35%;">
|
|
<div class="tag">[ GOVERNANCE ]</div>
|
|
<h2>06_SOUVERAIN</h2>
|
|
<p>Matrix (Fédéré/Tchap) vs Discord.<br>L'importance de la possession du serveur.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="axo-layer">
|
|
<div style="font-size: 10rem;">🦦</div>
|
|
<h2 style="color:#000;">TECH_FOCUS: X3DH</h2>
|
|
<p style="font-family: var(--font-pixel); font-size: 1.5rem;">[ DÉMONSTRATION AU TABLEAU ]</p>
|
|
</div>
|
|
|
|
<script>
|
|
let step = 0;
|
|
const cards = document.querySelectorAll('.card');
|
|
const axo = document.getElementById('axo-layer');
|
|
const mainScanner = document.getElementById('scanner-line');
|
|
const logScroll = document.getElementById('log-scroll');
|
|
|
|
function updateDesk() {
|
|
let activeIdx = -1;
|
|
if (step >= 1 && step <= 4) activeIdx = step - 1;
|
|
if (step >= 6 && step <= 7) activeIdx = step - 2;
|
|
|
|
cards.forEach((card, i) => {
|
|
card.classList.remove('active', 'background', 'off-screen', 'slide-h', 'slide-v', 'no-anim');
|
|
|
|
if (step === 5) {
|
|
card.classList.add('off-screen');
|
|
} else {
|
|
if (i === activeIdx) {
|
|
card.classList.add('active');
|
|
if (i % 2 === 0) card.classList.add('slide-h');
|
|
else card.classList.add('slide-v');
|
|
} else if (i < activeIdx || (step > 5 && i < 4)) {
|
|
card.classList.add('background');
|
|
// Si on revient de l'Axolotl (Step 6), on fige les anciennes slides
|
|
if (step === 6 && i < 4) card.classList.add('no-anim');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function next() {
|
|
if (step < 4) { step++; updateDesk(); document.getElementById('progress').innerText = "0" + step; }
|
|
else if (step === 4) { step++; updateDesk(); axo.classList.add('show'); mainScanner.style.opacity = "0"; }
|
|
else if (step === 5) { step++; axo.classList.remove('show'); mainScanner.style.opacity = "1"; updateDesk(); document.getElementById('progress').innerText = "05"; }
|
|
else if (step === 6) { step++; updateDesk(); document.getElementById('progress').innerText = "06"; }
|
|
}
|
|
|
|
window.addEventListener('keydown', e => {
|
|
if (e.key === 'ArrowRight' || e.key === ' ') next();
|
|
if (e.key === 'Escape') location.reload();
|
|
});
|
|
|
|
const logEntries = ["CONNECTING...", "HANDSHAKE OK", "X3DH_PARAM INJECTED", "RATCHET_ROTATION"];
|
|
function updateLogs() {
|
|
let text = "";
|
|
for(let i=0; i<15; i++) text += " > " + logEntries[Math.floor(Math.random()*logEntries.length)] + " -- " + Math.random().toString(16).slice(2,6);
|
|
logScroll.innerText = text;
|
|
}
|
|
setInterval(updateLogs, 2000); updateLogs();
|
|
</script>
|
|
</body>
|
|
</html> |