Camilla Schoeser
185 lines
7.3 KiB
HTML
185 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>SIGNAL_TERMINAL_V8_ULTRA_SMOOTH</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;
|
|
}
|
|
|
|
/* --- UI ELEMENTS --- */
|
|
#ui-header { position: fixed; top: 20px; left: 20px; font-family: var(--font-pixel); font-size: 1.5rem; color: #444; z-index: 3000; }
|
|
#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;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
display: block; /* On les laisse en block pour que la transition fonctionne */
|
|
visibility: hidden;
|
|
/* La transition magique qui gère tout le "mou de la slide" */
|
|
transition:
|
|
transform 1.2s cubic-bezier(0.2, 1, 0.3, 1),
|
|
opacity 1s ease,
|
|
filter 1.2s ease,
|
|
border-color 0.5s ease;
|
|
}
|
|
|
|
/* États d'entrée (Positions de départ hors écran) */
|
|
.from-left { transform: translateX(-120vw) scale(1.25) translateZ(100px); }
|
|
.from-bottom { transform: translateY(120vh) scale(1.25) translateZ(100px); }
|
|
|
|
/* ÉTAT ACTIF (Slide au centre) */
|
|
.card.active {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
filter: grayscale(0) blur(0);
|
|
border-color: var(--cyan);
|
|
transform: translate(0, 0) scale(1.25) translateZ(100px);
|
|
z-index: 100;
|
|
pointer-events: all;
|
|
}
|
|
|
|
/* ÉTAT BACKGROUND (Slide qui recule) */
|
|
.card.background {
|
|
visibility: visible;
|
|
opacity: 0.2;
|
|
filter: grayscale(1) blur(4px);
|
|
transform: scale(0.7) translateZ(-250px) translateY(-20px);
|
|
z-index: 5;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card.off-screen { opacity: 0; transform: translateY(-100vh) scale(0.5); }
|
|
.no-anim { transition: none !important; }
|
|
|
|
/* Contenu */
|
|
h2 { font-family: var(--font-pixel); font-size: 2.5rem; color: var(--cyan); text-transform: uppercase; margin: 0 0 15px 0; }
|
|
.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; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<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 from-left" 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</div>
|
|
</div>
|
|
<div class="card from-bottom" 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.</p>
|
|
</div>
|
|
<div class="card from-left" 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.</p>
|
|
</div>
|
|
<div class="card from-bottom" 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.</p>
|
|
</div>
|
|
<div class="card from-left" id="c4" style="top: 20%; left: 30%;">
|
|
<div class="tag">[ THREAT_DETECT ]</div>
|
|
<h2 style="color:var(--alert)">05_LIMITES</h2>
|
|
<p>> Quantum Algorithms<br>> Pegasus / Spyware</p>
|
|
</div>
|
|
<div class="card from-bottom" id="c5" style="top: 55%; left: 35%;">
|
|
<div class="tag">[ GOVERNANCE ]</div>
|
|
<h2>06_SOUVERAIN</h2>
|
|
<p>Matrix vs Discord.<br>Possession du serveur.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="axo-layer">
|
|
<div style="font-size: 10rem;">🦦</div>
|
|
<h2>TECH_FOCUS: X3DH</h2>
|
|
<p>[ DÉMONSTRATION AU TABLEAU ]</p>
|
|
</div>
|
|
|
|
<script>
|
|
let step = 0;
|
|
const cards = document.querySelectorAll('.card');
|
|
const axo = document.getElementById('axo-layer');
|
|
|
|
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', 'no-anim');
|
|
|
|
if (step === 5) {
|
|
card.classList.add('off-screen');
|
|
} else {
|
|
if (i === activeIdx) {
|
|
card.classList.add('active');
|
|
} else if (i < activeIdx || (step > 5 && i < 4)) {
|
|
card.classList.add('background');
|
|
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'); }
|
|
else if (step === 5) { step++; axo.classList.remove('show'); 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();
|
|
});
|
|
|
|
// Logs auto
|
|
setInterval(() => {
|
|
const logEntries = ["CONNECTING...", "KEY_ROTATION", "X3DH_PARAM", "ENCRYPTING"];
|
|
document.getElementById('bg-logs').innerText += " > " + logEntries[Math.floor(Math.random()*logEntries.length)];
|
|
if(document.getElementById('bg-logs').innerText.length > 300) document.getElementById('bg-logs').innerText = "";
|
|
}, 2000);
|
|
</script>
|
|
</body>
|
|
</html> |