Camilla Schoeser
228 lines
8.1 KiB
HTML
228 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>SIGNAL_NEURAL_v8</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=JetBrains+Mono:wght@300&display=swap');
|
|
|
|
:root {
|
|
--cyan: #00f2ff;
|
|
--low-cyan: rgba(0, 242, 255, 0.1);
|
|
--bg: #030408;
|
|
--text: #c0c5cf;
|
|
}
|
|
|
|
body, html {
|
|
margin: 0; padding: 0; background: var(--bg);
|
|
color: var(--text); font-family: 'JetBrains Mono', monospace;
|
|
overflow: hidden; height: 100vh;
|
|
}
|
|
|
|
/* --- CANVAS BACKGROUND (NODES) --- */
|
|
#canvas-nodes { position: fixed; top: 0; left: 0; z-index: 1; opacity: 0.4; }
|
|
|
|
/* --- UI FRAME --- */
|
|
.ui-frame {
|
|
position: fixed; inset: 20px;
|
|
border: 1px solid var(--low-cyan);
|
|
pointer-events: none; z-index: 100;
|
|
box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
|
|
}
|
|
.corner { position: absolute; width: 20px; height: 20px; border: 2px solid var(--cyan); }
|
|
.tl { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
|
|
.tr { top: -2px; right: -2px; border-left: 0; border-bottom: 0; }
|
|
.bl { bottom: -2px; left: -2px; border-right: 0; border-top: 0; }
|
|
.br { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
|
|
|
|
/* --- SLIDE CONTENT --- */
|
|
#stage {
|
|
position: relative; z-index: 10;
|
|
height: 100vh; width: 100vw;
|
|
display: flex; justify-content: center; align-items: center;
|
|
}
|
|
|
|
.slide {
|
|
position: absolute; width: 800px;
|
|
opacity: 0; transform: scale(0.8) translateZ(-100px);
|
|
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.slide.active { opacity: 1; transform: scale(1) translateZ(0); pointer-events: auto; }
|
|
|
|
/* Effet de sortie "Explosion" pour l'Axolotl */
|
|
.slide.shattered { opacity: 0; transform: scale(2) rotate(5deg); filter: blur(20px); }
|
|
|
|
h1 {
|
|
font-family: 'Orbitron', sans-serif; font-size: 3rem; margin: 0;
|
|
color: var(--cyan); text-shadow: 0 0 15px var(--cyan);
|
|
letter-spacing: 5px; text-transform: uppercase;
|
|
}
|
|
|
|
.data-block {
|
|
background: rgba(0, 242, 255, 0.03);
|
|
border-left: 3px solid var(--cyan);
|
|
padding: 20px; margin-top: 20px;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
/* --- AXOLOTL MODE --- */
|
|
#deep-dive {
|
|
position: fixed; inset: 0; background: #fff; color: #000;
|
|
display: none; flex-direction: column; justify-content: center;
|
|
align-items: center; z-index: 200;
|
|
}
|
|
#deep-dive.active { display: flex; animation: tunnel 0.5s ease-in-out; }
|
|
|
|
@keyframes tunnel {
|
|
0% { clip-path: circle(0% at 50% 50%); }
|
|
100% { clip-path: circle(150% at 50% 50%); }
|
|
}
|
|
|
|
/* --- DECORATIONS --- */
|
|
.side-bar {
|
|
position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
|
|
display: flex; flex-direction: column; gap: 5px;
|
|
}
|
|
.bar { width: 30px; height: 3px; background: var(--cyan); opacity: 0.3; animation: pulse 1s infinite alternate; }
|
|
@keyframes pulse { from { opacity: 0.1; width: 10px; } to { opacity: 0.6; width: 40px; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<canvas id="canvas-nodes"></canvas>
|
|
<div class="ui-frame"><div class="corner tl"></div><div class="corner tr"></div><div class="corner bl"></div><div class="corner br"></div></div>
|
|
|
|
<div class="side-bar">
|
|
<div class="bar" style="animation-delay: 0.1s"></div><div class="bar" style="animation-delay: 0.2s"></div>
|
|
<div class="bar" style="animation-delay: 0.3s"></div><div class="bar" style="animation-delay: 0.4s"></div>
|
|
</div>
|
|
|
|
<div id="stage">
|
|
<div class="slide active" id="s0">
|
|
<h1>SIGNAL_LINK</h1>
|
|
<div class="data-block">
|
|
<p>> [OBJECTIF]: Analyser la messagerie sécurisée moderne.</p>
|
|
<p>> [VECTEUR]: Confidentialité / Intégrité / Authentification / Dispo.</p>
|
|
<p style="color:var(--cyan)">STATUS: NEURAL_INTERFACE_READY</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide" id="s1">
|
|
<h1>LEGACY_ZERO</h1>
|
|
<div class="data-block">
|
|
<p>1982: SMTP // 1992: SMS</p>
|
|
<p>Analyse: Le flux circule sur des serveurs tiers en clair.<br>Métadonnées exposées à 100%.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide" id="s2">
|
|
<h1>ARCHIVE_FAIL</h1>
|
|
<div class="data-block">
|
|
<p><b style="color:white">PGP:</b> Chiffrement statique (Faille PFS).</p>
|
|
<p><b style="color:white">OTR:</b> Session synchrone (Faille Mobile).</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide" id="s3">
|
|
<h1>SIGNAL_PROTOCOL</h1>
|
|
<div class="data-block">
|
|
<p>Fusion: X3DH (Async) + Double Ratchet (Auto-heal).</p>
|
|
<p>La clé change à chaque message. Le passé est protégé.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide" id="s4">
|
|
<h1>THREAT_INTEL</h1>
|
|
<div class="data-block">
|
|
<p>> QUANTUM: Menace sur ECDH.</p>
|
|
<p>> ENDPOINT: Pegasus/Spyware.</p>
|
|
<p>> MITM: Vérification des "Safety Numbers".</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide" id="s5">
|
|
<h1>SOVEREIGNTY</h1>
|
|
<div class="data-block">
|
|
<p>Matrix (Tchap) vs Discord.</p>
|
|
<p>Fédération vs Centralisation.<br>Liberté vs Modération.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="deep-dive">
|
|
<div style="font-size: 12rem;">🦦</div>
|
|
<h1 style="color:#000; text-shadow:none;">AXOLOTL_CORE</h1>
|
|
<p style="font-weight:bold; letter-spacing: 2px;">[ INITIALIZING WHITEBOARD PROTOCOL ]</p>
|
|
</div>
|
|
|
|
<script>
|
|
// --- CANVAS NODE SYSTEM ---
|
|
const canvas = document.getElementById('canvas-nodes');
|
|
const ctx = canvas.getContext('2d');
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
let particles = Array(60).fill().map(() => ({
|
|
x: Math.random() * canvas.width, y: Math.random() * canvas.height,
|
|
vx: (Math.random()-0.5)*0.5, vy: (Math.random()-0.5)*0.5
|
|
}));
|
|
|
|
function drawNodes() {
|
|
ctx.clearRect(0,0,canvas.width, canvas.height);
|
|
ctx.strokeStyle = "rgba(0, 242, 255, 0.2)";
|
|
particles.forEach((p, i) => {
|
|
p.x += p.vx; p.y += p.vy;
|
|
if(p.x < 0 || p.x > canvas.width) p.vx *= -1;
|
|
if(p.y < 0 || p.y > canvas.height) p.vy *= -1;
|
|
particles.slice(i+1).forEach(p2 => {
|
|
let dist = Math.hypot(p.x-p2.x, p.y-p2.y);
|
|
if(dist < 150) {
|
|
ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(p2.x, p2.y); ctx.stroke();
|
|
}
|
|
});
|
|
});
|
|
requestAnimationFrame(drawNodes);
|
|
}
|
|
drawNodes();
|
|
|
|
// --- NAVIGATION ---
|
|
let step = 0;
|
|
const slides = document.querySelectorAll('.slide');
|
|
const dive = document.getElementById('deep-dive');
|
|
|
|
function navigate() {
|
|
if(step < 3) {
|
|
slides[step].classList.remove('active');
|
|
step++;
|
|
slides[step].classList.add('active');
|
|
}
|
|
else if(step === 3) {
|
|
// EXPLOSION VERS AXOLOTL
|
|
slides[step].classList.add('shattered');
|
|
setTimeout(() => {
|
|
dive.classList.add('active');
|
|
}, 300);
|
|
step++;
|
|
}
|
|
else if(step === 4) {
|
|
// RETOUR AU CALME
|
|
dive.classList.remove('active');
|
|
slides[3].classList.remove('active', 'shattered');
|
|
step++; // On saute l'axo dans le tableau
|
|
slides[4].classList.add('active');
|
|
}
|
|
else if(step < 6) {
|
|
slides[step-1].classList.remove('active');
|
|
slides[step].classList.add('active');
|
|
step++;
|
|
}
|
|
}
|
|
|
|
window.addEventListener('keydown', e => {
|
|
if(e.key === 'ArrowRight' || e.key === ' ') navigate();
|
|
if(e.key === 'Escape') location.reload();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |