Camilla Schoeser
180 lines
6.9 KiB
HTML
180 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>STACK_HACK_FINAL</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Orbitron:wght@400;700&display=swap');
|
|
|
|
:root {
|
|
--cyan: #00f2ff;
|
|
--alert: #ff3e00;
|
|
--bg: #050608;
|
|
--card-bg: rgba(10, 12, 18, 0.95);
|
|
}
|
|
|
|
body, html {
|
|
margin: 0; padding: 0; background: var(--bg);
|
|
color: #ccc; font-family: 'monospace';
|
|
overflow: hidden; height: 100vh;
|
|
}
|
|
|
|
/* --- FX DE FOND --- */
|
|
#laser {
|
|
position: fixed; top: 0; left: 0; width: 100%; height: 1px;
|
|
background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
|
|
z-index: 1000; pointer-events: none; animation: scan 3s linear infinite;
|
|
}
|
|
@keyframes scan { from { top: 0%; } to { top: 100%; } }
|
|
|
|
canvas { position: fixed; inset: 0; z-index: 1; opacity: 0.15; }
|
|
|
|
/* --- STACK SYSTEM --- */
|
|
#desk { position: relative; width: 100vw; height: 100vh; perspective: 1000px; z-index: 10; }
|
|
|
|
.card {
|
|
position: absolute; width: 450px; padding: 20px;
|
|
background: var(--card-bg); border: 1px solid #333;
|
|
box-shadow: 0 0 20px rgba(0,0,0,0.5);
|
|
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
display: none; pointer-events: auto;
|
|
}
|
|
|
|
.card.active { display: block; animation: pop 0.4s ease-out forwards; }
|
|
|
|
/* Quand l'Axolotl arrive, on les pousse sur les côtés */
|
|
.card.pushed-left { transform: translateX(-120vw) rotate(-20deg) !important; opacity: 0; }
|
|
.card.pushed-right { transform: translateX(120vw) rotate(20deg) !important; opacity: 0; }
|
|
|
|
@keyframes pop {
|
|
0% { transform: scale(0.5) translateZ(-200px); opacity: 0; }
|
|
100% { transform: scale(1) translateZ(0) rotate(var(--r)); opacity: 1; }
|
|
}
|
|
|
|
/* --- DESIGN DES CARTES --- */
|
|
h2 {
|
|
font-family: 'Orbitron', sans-serif; font-size: 1.2rem; margin: 0 0 10px 0;
|
|
color: var(--cyan); border-bottom: 1px solid var(--cyan); padding-bottom: 5px;
|
|
}
|
|
|
|
.terminal-text {
|
|
font-family: 'VT323', monospace; font-size: 1.1rem; color: #888;
|
|
height: 60px; overflow: hidden; line-height: 1.1; margin-top: 10px;
|
|
}
|
|
|
|
/* --- AXOLOTL DIVE --- */
|
|
#axo-reset {
|
|
position: fixed; inset: 0; background: #fff; color: #000;
|
|
display: none; flex-direction: column; justify-content: center;
|
|
align-items: center; z-index: 500;
|
|
}
|
|
#axo-reset.active { display: flex; animation: flash 0.3s alternate 2; }
|
|
@keyframes flash { from { opacity: 0; } to { opacity: 1; } }
|
|
|
|
#hud {
|
|
position: fixed; top: 20px; left: 20px; font-family: 'VT323';
|
|
font-size: 1.5rem; color: var(--cyan); z-index: 2000;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="laser"></div>
|
|
<canvas id="grid"></canvas>
|
|
<div id="hud">[ SIGNAL_BREACH_LOADED ]</div>
|
|
|
|
<div id="desk">
|
|
<div class="card" id="c0" style="--r: -3deg; top: 10%; left: 8%;">
|
|
<h2>01_PILIER_CIDA</h2>
|
|
<p>Confidentialité / Intégrité / Authentification / Dispo.</p>
|
|
<div class="terminal-text">INIT_DECRYPT... OK<br>CHECKING_CIDA_COMPLIANCE...<br>CORE_STATUS: VERIFIED</div>
|
|
</div>
|
|
|
|
<div class="card" id="c1" style="--r: 2deg; top: 15%; left: 55%;">
|
|
<h2>02_HISTOIRE_CLAIR</h2>
|
|
<p>SMTP (1982) & SMS (1992). Transit en clair via serveurs tiers. Risque de lecture opérateur massif.</p>
|
|
<div class="terminal-text">SNIFFING_SMS_TRAFFIC...<br>PACKET_LOSS: 0%<br>ENCRYPTION: NONE</div>
|
|
</div>
|
|
|
|
<div class="card" id="c2" style="--r: -4deg; top: 48%; left: 12%;">
|
|
<h2>03_FAIL_LEGACY</h2>
|
|
<p>PGP: Pas de PFS (Forward Secrecy).<br>OTR: Synchrone (Pas de mobile).</p>
|
|
<div class="terminal-text">ERROR: STATIC_KEY_DETECTED<br>ERROR: SYNC_HANDSHAKE_FAILED</div>
|
|
</div>
|
|
|
|
<div class="card" id="c3" style="--r: 3deg; top: 45%; left: 58%;">
|
|
<h2>04_SIGNAL_STD</h2>
|
|
<p>X3DH (Pre-keys) + Double Ratchet.<br>Nouvelle clé par message. PFS total.</p>
|
|
<div class="terminal-text">RATCHET_ROTATION_START...<br>KEY_DERIVATION: AES-256-GCM<br>STATUS: UNBREAKABLE</div>
|
|
</div>
|
|
|
|
<div class="card" id="c4" style="--r: -1deg; top: 20%; left: 32%;">
|
|
<h2 style="color:var(--alert)">05_VULNERABILITES</h2>
|
|
<p>> Post-Quantique (Shor's Algorithm)<br>> Infection Endpoints (Pegasus)<br>> MitM (Keys Validation)</p>
|
|
</div>
|
|
|
|
<div class="card" id="c5" style="--r: 5deg; top: 55%; left: 35%;">
|
|
<h2>06_SOUVERAINETÉ</h2>
|
|
<p>Discord (Centralisé/US) vs Matrix (Fédéré/Tchap/Souverain).</p>
|
|
<div class="terminal-text">MAPPING_NODES...<br>FEDERATION: ACTIVE<br>SOVEREIGNTY_LEVEL: 100%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="axo-reset">
|
|
<div style="font-size: 10rem;">🦦</div>
|
|
<h1 style="font-family: 'Orbitron'; letter-spacing: 5px;">AXOLOTL_ENGINE</h1>
|
|
<p>[ DÉMONSTRATION TECHNIQUE AU TABLEAU ]</p>
|
|
</div>
|
|
|
|
<script>
|
|
// --- PETIT FOND DE GRILLE DYNAMIQUE ---
|
|
const c = document.getElementById('grid');
|
|
const ctx = c.getContext('2d');
|
|
c.width = window.innerWidth; c.height = window.innerHeight;
|
|
function drawGrid() {
|
|
ctx.clearRect(0,0,c.width,c.height);
|
|
ctx.strokeStyle = "#111";
|
|
for(let x=0; x<c.width; x+=40) { ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,c.height); ctx.stroke(); }
|
|
for(let y=0; y<c.height; y+=40) { ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(c.width,y); ctx.stroke(); }
|
|
}
|
|
drawGrid();
|
|
|
|
// --- NAVIGATION ---
|
|
let step = 0;
|
|
const cards = document.querySelectorAll('.card');
|
|
const axo = document.getElementById('axo-reset');
|
|
|
|
function next() {
|
|
if(step < 4) {
|
|
cards[step].classList.add('active');
|
|
step++;
|
|
}
|
|
else if(step === 4) {
|
|
// ON POUSSE TOUT
|
|
cards[0].classList.add('pushed-left');
|
|
cards[1].classList.add('pushed-right');
|
|
cards[2].classList.add('pushed-left');
|
|
cards[3].classList.add('pushed-right');
|
|
setTimeout(() => { axo.classList.add('active'); }, 300);
|
|
step++;
|
|
}
|
|
else if(step === 5) {
|
|
// ON RAMENE TOUT ET ON ENLEVE L'AXO
|
|
axo.classList.remove('active');
|
|
cards.forEach(c => { c.classList.remove('pushed-left', 'pushed-right'); });
|
|
step++;
|
|
}
|
|
else if(step > 5 && step < 8) {
|
|
cards[step-2].classList.add('active');
|
|
cards[step-2].style.zIndex = 100 + step;
|
|
step++;
|
|
}
|
|
}
|
|
|
|
window.addEventListener('keydown', e => {
|
|
if(e.key === 'ArrowRight' || e.key === ' ') next();
|
|
if(e.key === 'Escape') location.reload();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |