Camilla Schoeser
256 lines
9.7 KiB
HTML
256 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Crypto Expérience - Signal & Co</title>
|
|
<style>
|
|
:root {
|
|
--accent: #00f2ff;
|
|
--pink: #ff007a;
|
|
--purple: #7000ff;
|
|
--bg: #050505;
|
|
}
|
|
|
|
body, html {
|
|
margin: 0; padding: 0;
|
|
height: 100%; overflow: hidden;
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
background: var(--bg);
|
|
color: white;
|
|
}
|
|
|
|
/* Le Monde Virtuel */
|
|
#viewport {
|
|
width: 100vw; height: 100vh;
|
|
perspective: 1000px;
|
|
transition: background 1s ease;
|
|
}
|
|
|
|
#world {
|
|
position: absolute;
|
|
width: 100%; height: 100%;
|
|
transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
/* Slides Styles */
|
|
.slide {
|
|
position: absolute;
|
|
width: 100vw; height: 100vh;
|
|
display: flex; flex-direction: column;
|
|
justify-content: center; align-items: center;
|
|
padding: 50px; box-sizing: border-box;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
/* Positionnement spatial des slides */
|
|
#slide1 { transform: translate3d(0, 0, 0); }
|
|
#slide2 { transform: translate3d(100%, 0, -500px); } /* Vers la droite et loin */
|
|
#slide3 { transform: translate3d(100%, 100%, 0); } /* On tombe en bas */
|
|
#slide4 { transform: translate3d(0, 100%, 500px); } /* Zoom avant vers la gauche */
|
|
#slide5 { transform: translate3d(-100%, 100%, 0); } /* Glissade latérale */
|
|
#slide6 { transform: translate3d(-100%, 0, 1000px); } /* Gros zoom avant */
|
|
#slide7 { transform: translate3d(0, -100%, 0); } /* Retour vers le haut */
|
|
#slide8 { transform: translate3d(100%, -100%, -1000px); } /* Très loin en haut à droite */
|
|
|
|
/* Éléments Funky */
|
|
h1 {
|
|
font-size: 5rem; text-transform: uppercase; line-height: 0.9;
|
|
margin: 0; text-align: center;
|
|
filter: drop-shadow(0 0 10px var(--accent));
|
|
}
|
|
|
|
.glass-card {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
backdrop-filter: blur(15px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 30px;
|
|
padding: 40px;
|
|
max-width: 800px;
|
|
transform: scale(0.8);
|
|
opacity: 0;
|
|
transition: 0.8s all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
.active .glass-card {
|
|
transform: scale(1); opacity: 1;
|
|
}
|
|
|
|
.pill {
|
|
display: inline-block;
|
|
padding: 8px 20px;
|
|
border-radius: 50px;
|
|
background: var(--purple);
|
|
font-weight: bold;
|
|
margin: 5px;
|
|
animation: floating 3s infinite ease-in-out;
|
|
}
|
|
|
|
@keyframes floating {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
|
|
/* Timeline Animée */
|
|
.step {
|
|
opacity: 0; transform: translateX(-30px);
|
|
transition: 0.5s; margin-bottom: 20px;
|
|
}
|
|
.active .step { opacity: 1; transform: translateX(0); }
|
|
.step:nth-child(1) { transition-delay: 0.6s; }
|
|
.step:nth-child(2) { transition-delay: 0.8s; }
|
|
.step:nth-child(3) { transition-delay: 1s; }
|
|
|
|
/* Tableau "Neon" */
|
|
table {
|
|
width: 100%; border-collapse: collapse;
|
|
border-radius: 20px; overflow: hidden;
|
|
box-shadow: 0 0 30px rgba(0, 242, 255, 0.2);
|
|
}
|
|
th { background: var(--purple); padding: 20px; }
|
|
td { padding: 15px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); }
|
|
|
|
/* Footer & Progress */
|
|
.nav-hint {
|
|
position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
|
|
color: rgba(255,255,255,0.3); font-size: 0.8rem; letter-spacing: 2px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="viewport">
|
|
<div id="world">
|
|
|
|
<section class="slide" id="slide1">
|
|
<h1 style="color: var(--accent)">Crypto<br><span style="color:white">Revolution</span></h1>
|
|
<p style="font-size: 1.5rem; letter-spacing: 5px;">SIGNAL & LE FUTUR</p>
|
|
<div class="pill">Telecom Nancy 2026</div>
|
|
</section>
|
|
|
|
<section class="slide" id="slide2">
|
|
<div class="glass-card">
|
|
<h2>Le Manifeste de la Sécurité</h2>
|
|
<div style="display:grid; grid-template-columns: 1fr 1fr; gap: 20px;">
|
|
<div>
|
|
<h3 style="color:var(--accent)">Classique</h3>
|
|
<p>🔒 Confidentialité</p>
|
|
<p>🛡️ Intégrité</p>
|
|
<p>🆔 Authentification</p>
|
|
</div>
|
|
<div>
|
|
<h3 style="color:var(--pink)">Moderne</h3>
|
|
<p>⏳ PFS (Persistance)</p>
|
|
<p>🔄 Auto-guérison</p>
|
|
<p>🎭 Déniabilité</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide" id="slide3">
|
|
<h2 style="font-size: 4rem;">L'Ancien Monde</h2>
|
|
<div class="step"><strong>1982 :</strong> Email - Le texte circule en clair.</div>
|
|
<div class="step"><strong>1992 :</strong> SMS - Le premier "Merry Christmas" est lisible par Orange.</div>
|
|
<div class="step"><strong>2000s :</strong> TLS - On protège le tuyau, mais pas les bouts.</div>
|
|
<div class="pill" style="background: var(--danger)">Hop-by-Hop = Surveillance facile</div>
|
|
</section>
|
|
|
|
<section class="slide" id="slide4">
|
|
<div class="glass-card" style="border-color: var(--pink);">
|
|
<h2>Les Pionniers</h2>
|
|
<h3>PGP (1991)</h3>
|
|
<p>Chiffrement asynchrone, mais clés statiques. Si on perd la clé, on perd l'histoire.</p>
|
|
<hr>
|
|
<h3>OTR (2004)</h3>
|
|
<p>Génial mais fragile. "Session Broken". Si Bob dort, Alice ne peut pas crypter.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide" id="slide5">
|
|
<h1 style="color: #2094f3; font-size: 8rem;">SIGNAL</h1>
|
|
<div class="glass-card" style="background: #2094f3; color: white;">
|
|
<p>🚀 <strong>Double Ratchet :</strong> Une clé par message.</p>
|
|
<p>💤 <strong>X3DH :</strong> Cryptage asynchrone (Pre-keys).</p>
|
|
<p>🧬 <strong>Auto-guérison :</strong> On éjecte l'espion.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide" id="slide6">
|
|
<div class="glass-card" style="max-width: 90vw;">
|
|
<table>
|
|
<tr><th>Tech</th><th>E2EE</th><th>Asynch</th><th>PFS</th><th>Guérison</th></tr>
|
|
<tr><td>SMS</td><td>❌</td><td>✅</td><td>❌</td><td>❌</td></tr>
|
|
<tr><td>PGP</td><td>✅</td><td>✅</td><td>❌</td><td>❌</td></tr>
|
|
<tr><td>OTR</td><td>✅</td><td>❌</td><td>✅</td><td>❌</td></tr>
|
|
<tr><td>SIGNAL</td><td>✅</td><td>✅</td><td>✅</td><td>✅</td></tr>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide" id="slide7">
|
|
<h2 style="color: var(--pink)">LES LIMITES</h2>
|
|
<div class="grid" style="display: flex; gap: 20px;">
|
|
<div class="glass-card">🛸 <strong>Quantique :</strong> Risque "Harvest Now, Decrypt Later".</div>
|
|
<div class="glass-card">📱 <strong>Pegasus :</strong> La crypto ne protège pas d'un OS vérolé.</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="slide" id="slide8">
|
|
<h2>Gouvernance</h2>
|
|
<div class="glass-card">
|
|
<p><strong>Discord :</strong> Centralisé. Le texte est lu pour la modération. 🎮</p>
|
|
<p><strong>Matrix :</strong> Fédération. Souveraineté totale. (Tchap) 🛡️</p>
|
|
<hr>
|
|
<h2 style="text-align: center;">FIN. Questions ?</h2>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-hint">ESPACE / FLÈCHES POUR NAVIGUER</div>
|
|
|
|
<script>
|
|
let current = 0;
|
|
const slides = [
|
|
{x: 0, y: 0, z: 0, rotateY: 0, bg: '#050505'},
|
|
{x: -100, y: 0, z: -500, rotateY: -45, bg: '#0a0a2e'},
|
|
{x: -100, y: -100, z: 0, rotateY: 0, bg: '#2e0a0a'},
|
|
{x: 0, y: -100, z: 500, rotateY: 90, bg: '#0a2e0a'},
|
|
{x: 100, y: -100, z: 0, rotateY: 0, bg: '#001a33'},
|
|
{x: 100, y: 0, z: 1000, rotateY: -90, bg: '#1a0033'},
|
|
{x: 0, y: 100, z: 0, rotateY: 0, bg: '#331a00'},
|
|
{x: -100, y: 100, z: -1000, rotateY: 180, bg: '#000000'}
|
|
];
|
|
|
|
const world = document.getElementById('world');
|
|
const viewport = document.getElementById('viewport');
|
|
const slideElems = document.querySelectorAll('.slide');
|
|
|
|
function update() {
|
|
const s = slides[current];
|
|
world.style.transform = `translate3d(${s.x}%, ${s.y}%, ${s.z}px) rotateY(${s.rotateY}deg)`;
|
|
viewport.style.background = s.bg;
|
|
|
|
slideElems.forEach((el, i) => {
|
|
if(i === current) el.classList.add('active');
|
|
else el.classList.remove('active');
|
|
});
|
|
}
|
|
|
|
window.addEventListener('keydown', e => {
|
|
if(e.key === 'ArrowRight' || e.key === ' ') {
|
|
current = (current + 1) % slides.length;
|
|
update();
|
|
}
|
|
if(e.key === 'ArrowLeft') {
|
|
current = (current - 1 + slides.length) % slides.length;
|
|
update();
|
|
}
|
|
});
|
|
|
|
update();
|
|
</script>
|
|
</body>
|
|
</html> |