Camilla Schoeser
249 lines
10 KiB
HTML
249 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>DECRYPTO_OS v1.0 - Terminal de Présentation</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;500;700&display=swap');
|
|
|
|
:root {
|
|
--neon-green: #00ff41;
|
|
--neon-blue: #00f2ff;
|
|
--neon-pink: #ff0055;
|
|
--bg-black: #0a0a0b;
|
|
--terminal-window: rgba(10, 15, 20, 0.95);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-black);
|
|
color: var(--neon-green);
|
|
font-family: 'Fira Code', monospace;
|
|
margin: 0; overflow: hidden;
|
|
background-image:
|
|
radial-gradient(circle at 50% 50%, rgba(0, 255, 65, 0.05) 0%, transparent 80%),
|
|
linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
|
|
linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
|
|
background-size: 100% 100%, 100% 2px, 3px 100%;
|
|
}
|
|
|
|
/* Scanline Effect */
|
|
body::after {
|
|
content: " ";
|
|
position: absolute; top: 0; left: 0; bottom: 0; right: 0;
|
|
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
|
|
linear-gradient(90deg, rgba(255, 0, 0, 0.05), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.05));
|
|
background-size: 100% 2px, 3px 100%;
|
|
pointer-events: none; z-index: 1000;
|
|
}
|
|
|
|
#os-container {
|
|
width: 100vw; height: 100vh;
|
|
display: flex; justify-content: center; align-items: center;
|
|
perspective: 1200px;
|
|
}
|
|
|
|
.window {
|
|
position: absolute;
|
|
width: 850px; height: 550px;
|
|
background: var(--terminal-window);
|
|
border: 1px solid var(--neon-green);
|
|
box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
|
|
border-radius: 5px;
|
|
display: none;
|
|
flex-direction: column;
|
|
transform-style: preserve-3d;
|
|
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
.window.active { display: flex; animation: window-pop 0.4s ease-out; }
|
|
|
|
@keyframes window-pop {
|
|
0% { transform: scale(0.5) rotateX(-30deg); opacity: 0; }
|
|
100% { transform: scale(1) rotateX(0); opacity: 1; }
|
|
}
|
|
|
|
.title-bar {
|
|
background: rgba(0, 255, 65, 0.1);
|
|
padding: 8px 15px;
|
|
display: flex; justify-content: space-between;
|
|
border-bottom: 1px solid var(--neon-green);
|
|
font-size: 0.8rem; letter-spacing: 2px;
|
|
}
|
|
|
|
.content {
|
|
padding: 30px;
|
|
overflow-y: auto;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
h1, h2 { color: var(--neon-blue); text-transform: uppercase; margin-top: 0; }
|
|
.glitch { animation: glitch-anim 3s infinite; }
|
|
|
|
@keyframes glitch-anim {
|
|
0% { text-shadow: 2px 0 var(--neon-pink); }
|
|
2% { text-shadow: -2px 0 var(--neon-blue); }
|
|
4% { text-shadow: 0 0 white; }
|
|
}
|
|
|
|
.data-row {
|
|
display: flex; justify-content: space-between;
|
|
padding: 8px 0; border-bottom: 1px hideen rgba(0, 255, 65, 0.1);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.status-ok { color: var(--neon-green); font-weight: bold; }
|
|
.status-fail { color: var(--neon-pink); }
|
|
|
|
.cmd-line::before { content: "> "; color: var(--neon-blue); }
|
|
|
|
/* Navigation */
|
|
.nav-footer {
|
|
position: fixed; bottom: 20px; width: 100%;
|
|
text-align: center; font-size: 0.7rem; color: rgba(0, 255, 65, 0.5);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="os-container">
|
|
|
|
<div class="window active" id="win1">
|
|
<div class="title-bar"><span>DECRYPTO_OS v1.0</span><span>SYSTEM_READY</span></div>
|
|
<div class="content">
|
|
<h1 class="glitch">Accessing Secure_Protocol_Research...</h1>
|
|
<p class="cmd-line">Initialisation des vecteurs de chiffrement...</p>
|
|
<p class="cmd-line">Chargement des modules Signal / Matrix / Discord...</p>
|
|
<div style="margin-top: 50px; padding: 20px; border: 1px dashed var(--neon-green)">
|
|
<h2 style="margin:0">Tom & Collaborateur</h2>
|
|
<p>TELECOM NANCY - 2026</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="window" id="win2">
|
|
<div class="title-bar"><span>SYSTEM_SPECS</span><span>ANALYSIS</span></div>
|
|
<div class="content">
|
|
<h2>Piliers des Protocoles Modernes</h2>
|
|
<div class="data-row"><span>Confidentialité Persistante (PFS)</span><span class="status-ok">[ENABLED]</span></div>
|
|
<div class="data-row"><span>Auto-guérison (Ratchet)</span><span class="status-ok">[ENABLED]</span></div>
|
|
<div class="data-row"><span>Déniabilité Plausible</span><span class="status-ok">[ACTIVE]</span></div>
|
|
<div class="data-row"><span>Chiffrement de bout en bout</span><span class="status-ok">[MANDATORY]</span></div>
|
|
<p style="margin-top:20px; font-size:0.8rem; color:var(--neon-pink)">> Attention : Toute compromission d'un point d'extrémité annule la protection du tunnel.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="window" id="win3">
|
|
<div class="title-bar"><span>ARCHIVE_LOGS</span><span>TIMELINE</span></div>
|
|
<div class="content">
|
|
<h2>Timeline de l'insécurité</h2>
|
|
<p class="cmd-line">1982 : SMTP / 1992 : SMS -> <span class="status-fail">PLAINTEXT_DANGER</span></p>
|
|
<p class="cmd-line">2000s : TLS Transport -> <span class="status-fail">HOP_BY_HOP_VULNERABILITY</span></p>
|
|
<p class="cmd-line">1991 : PGP Launch -> <span class="status-ok">E2EE_PIONEER</span> (Static Keys Error)</p>
|
|
<p class="cmd-line">2004 : OTR Protocol -> <span class="status-ok">PFS_DISCOVERY</span> (Sync Issues)</p>
|
|
<p class="cmd-line">2013 : SIGNAL (Double Ratchet) -> <span class="status-ok">GOLD_STANDARD</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="window" id="win4">
|
|
<div class="title-bar"><span>CORE_ALGO</span><span>SIGNAL_PROTOCOL</span></div>
|
|
<div class="content">
|
|
<h2 style="color:var(--neon-pink)">Signal : L'Algorithme X3DH</h2>
|
|
<p>Fusion de l'asynchronisme de PGP et de la sécurité d'OTR.</p>
|
|
<div style="background: rgba(0,0,0,0.5); padding: 15px; border-left: 4px solid var(--neon-blue);">
|
|
<code style="color:var(--neon-blue)">
|
|
- Pre-keys uploadées sur serveur.<br>
|
|
- Session établie même hors-ligne.<br>
|
|
- Rotation de clés post-compromission.
|
|
</code>
|
|
</div>
|
|
<p class="cmd-line">Statut : Protocole utilisé par WhatsApp, RCS, Messenger.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="window" id="win5">
|
|
<div class="title-bar"><span>COMP_TABLE</span><span>BENCHMARK</span></div>
|
|
<div class="content">
|
|
<h2>Benchmarking des géants</h2>
|
|
<table style="width: 100%; border-spacing: 5px;">
|
|
<tr style="color:var(--neon-blue)"><td>App</td><td>E2EE</td><td>Model</td><td>Meta</td></tr>
|
|
<tr><td>Signal</td><td class="status-ok">YES</td><td>Central</td><td class="status-ok">MIN</td></tr>
|
|
<tr><td>WhatsApp</td><td class="status-ok">YES</td><td>Central</td><td class="status-fail">MAX</td></tr>
|
|
<tr><td>Discord</td><td class="status-fail">PART</td><td>Central</td><td class="status-fail">MAX</td></tr>
|
|
<tr><td>Matrix</td><td class="status-ok">YES</td><td class="status-ok">FEDERATED</td><td>VAR</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="window" id="win6">
|
|
<div class="title-bar"><span>SOUVERAINETÉ</span><span>NETWORK_WAR</span></div>
|
|
<div class="content">
|
|
<h2>Matrix vs Discord : La Guerre des Nœuds</h2>
|
|
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:20px;">
|
|
<div style="border: 1px solid var(--neon-pink); padding: 10px;">
|
|
<h3 style="color:var(--neon-pink)">DISCORD</h3>
|
|
<p>Texte déchiffrable par serveur pour modération.</p>
|
|
<p>Silo propriétaire.</p>
|
|
</div>
|
|
<div style="border: 1px solid var(--neon-blue); padding: 10px;">
|
|
<h3 style="color:var(--neon-blue)">MATRIX</h3>
|
|
<p>Souveraineté (Tchap).</p>
|
|
<p>Fédération : Pas de point de panne unique.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="window" id="win7">
|
|
<div class="title-bar"><span>FUTURE_THREAT</span><span>QUANTUM_COMP</span></div>
|
|
<div class="content">
|
|
<h2>Menace : Quantum Horizon</h2>
|
|
<p class="cmd-line">Algorithme de Shor : Menace sur ECDH.</p>
|
|
<p class="cmd-line">Risque : Harvest Now, Decrypt Later.</p>
|
|
<h2 style="text-align:center; color:white; background: var(--neon-pink);">PQXDH DEPLOYED</h2>
|
|
<p style="text-align:center">Signal est déjà prêt pour l'ère post-quantique.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="nav-footer">
|
|
[ESPACE] SUIVANT | [BACKSPACE] PRÉCÉDENT | SYSTEM_TIME: 2026.03.19
|
|
</div>
|
|
|
|
<script>
|
|
let current = 1;
|
|
const total = 7;
|
|
|
|
function showWindow(id) {
|
|
document.querySelectorAll('.window').forEach(w => w.classList.remove('active'));
|
|
const win = document.getElementById('win' + id);
|
|
win.classList.add('active');
|
|
|
|
// Randomize window position slightly for "desktop" effect
|
|
if(id > 1) {
|
|
win.style.left = (Math.random() * 10 + 45) + '%';
|
|
win.style.top = (Math.random() * 10 + 45) + '%';
|
|
win.style.transform = 'translate(-50%, -50%) rotateY(' + (Math.random() * 4 - 2) + 'deg)';
|
|
} else {
|
|
win.style.left = '50%'; win.style.top = '50%';
|
|
win.style.transform = 'translate(-50%, -50%)';
|
|
}
|
|
}
|
|
|
|
window.addEventListener('keydown', e => {
|
|
if(e.key === ' ' || e.key === 'ArrowRight') {
|
|
if(current < total) current++;
|
|
showWindow(current);
|
|
}
|
|
if(e.key === 'Backspace' || e.key === 'ArrowLeft') {
|
|
if(current > 1) current--;
|
|
showWindow(current);
|
|
}
|
|
});
|
|
|
|
// Initial position
|
|
showWindow(1);
|
|
</script>
|
|
|
|
</body>
|
|
</html> |