Camilla Schoeser
224 lines
8.4 KiB
HTML
224 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>SEC_MONITOR // X3DH_ANALYSIS</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=JetBrains+Mono:wght@300;500&display=swap');
|
|
|
|
:root {
|
|
--primary: #00d4ff;
|
|
--secondary: #0055ff;
|
|
--danger: #ff003c;
|
|
--bg: #010810;
|
|
--surface: rgba(0, 20, 40, 0.9);
|
|
}
|
|
|
|
body, html {
|
|
margin: 0; padding: 0;
|
|
height: 100%; overflow: hidden;
|
|
background: var(--bg);
|
|
color: var(--primary);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
/* Scanlines & Grain */
|
|
.overlay {
|
|
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
|
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
|
|
linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
|
|
background-size: 100% 3px, 3px 100%;
|
|
pointer-events: none; z-index: 100;
|
|
}
|
|
|
|
/* Sidebar Logs */
|
|
.sidebar {
|
|
position: fixed; left: 0; top: 0; width: 200px; height: 100%;
|
|
border-right: 1px solid rgba(0, 212, 255, 0.3);
|
|
padding: 15px; font-size: 0.6rem;
|
|
overflow: hidden; opacity: 0.6;
|
|
}
|
|
|
|
.log-entry { margin-bottom: 5px; white-space: nowrap; animation: log-slide 2s infinite linear; }
|
|
@keyframes log-slide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
|
|
/* Main Viewport */
|
|
.viewport {
|
|
margin-left: 200px; height: 100vh;
|
|
display: flex; justify-content: center; align-items: center;
|
|
perspective: 1500px;
|
|
}
|
|
|
|
.module {
|
|
width: 800px; height: 500px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--primary);
|
|
box-shadow: 0 0 30px rgba(0, 212, 255, 0.15);
|
|
padding: 40px; position: absolute;
|
|
opacity: 0; transform: rotateY(-20deg) translateZ(-200px);
|
|
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
|
|
clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
|
|
}
|
|
|
|
.module.active {
|
|
opacity: 1; transform: rotateY(0deg) translateZ(0);
|
|
}
|
|
|
|
h1, h2 {
|
|
font-family: 'Orbitron', sans-serif;
|
|
text-transform: uppercase; letter-spacing: 4px;
|
|
color: white; text-shadow: 0 0 10px var(--primary);
|
|
}
|
|
|
|
.glitch-text:hover {
|
|
animation: glitch 0.3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes glitch {
|
|
0% { transform: skew(0deg); }
|
|
20% { transform: skew(10deg); color: var(--danger); }
|
|
40% { transform: skew(-10deg); color: var(--primary); }
|
|
100% { transform: skew(0deg); }
|
|
}
|
|
|
|
.stat-bar {
|
|
height: 4px; background: rgba(0, 212, 255, 0.1);
|
|
margin: 20px 0; position: relative; overflow: hidden;
|
|
}
|
|
|
|
.stat-progress {
|
|
height: 100%; background: var(--primary);
|
|
width: 0%; transition: width 1s ease;
|
|
}
|
|
|
|
.active .stat-progress { width: 100%; }
|
|
|
|
/* Navigation Buttons */
|
|
.nav {
|
|
position: fixed; bottom: 30px; right: 30px;
|
|
display: flex; gap: 15px;
|
|
}
|
|
|
|
.btn {
|
|
background: transparent; border: 1px solid var(--primary);
|
|
color: var(--primary); padding: 10px 20px;
|
|
font-family: 'Orbitron', sans-serif; cursor: pointer;
|
|
font-size: 0.8rem; transition: 0.3s;
|
|
}
|
|
|
|
.btn:hover { background: var(--primary); color: var(--bg); box-shadow: 0 0 20px var(--primary); }
|
|
|
|
.btn-danger { border-color: var(--danger); color: var(--danger); }
|
|
.btn-danger:hover { background: var(--danger); box-shadow: 0 0 20px var(--danger); }
|
|
|
|
/* Danger Mode */
|
|
body.breach {
|
|
filter: hue-rotate(280deg) saturate(1.5);
|
|
animation: shake 0.1s infinite;
|
|
}
|
|
@keyframes shake { 0% { transform: translate(1px, 1px); } 50% { transform: translate(-1px, -1px); } }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="overlay"></div>
|
|
|
|
<div class="sidebar" id="logs">
|
|
</div>
|
|
|
|
<div class="viewport">
|
|
|
|
<div class="module active" id="m1">
|
|
<p style="color:var(--secondary)">>> ANALYSE_INITIALE</p>
|
|
<h1 class="glitch-text">Protocol_Research</h1>
|
|
<div class="stat-bar"><div class="stat-progress"></div></div>
|
|
<p>Sujet: Chiffrement de bout en bout & Souveraineté</p>
|
|
<p>Cible: Signal / Discord / Matrix</p>
|
|
<p style="margin-top: 50px; opacity: 0.5;">[ APPUYEZ SUR ESPACE POUR DÉCRYPTER ]</p>
|
|
</div>
|
|
|
|
<div class="module" id="m2">
|
|
<h2>Paramètres de Sécurité</h2>
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px;">
|
|
<div style="border: 1px solid rgba(0, 212, 255, 0.3); padding: 15px;">
|
|
<h4 style="margin:0; color:var(--primary)">PFS</h4>
|
|
<p style="font-size: 0.8rem;">Clés éphémères. Le passé est protégé.</p>
|
|
</div>
|
|
<div style="border: 1px solid rgba(0, 212, 255, 0.3); padding: 15px;">
|
|
<h4 style="margin:0; color:var(--primary)">Double Ratchet</h4>
|
|
<p style="font-size: 0.8rem;">Auto-guérison après chaque message.</p>
|
|
</div>
|
|
</div>
|
|
<div class="stat-bar" style="margin-top:40px;"><div class="stat-progress" style="width: 75% !important;"></div></div>
|
|
<p style="text-align:center; font-size:0.7rem;">NIVEAU DE PROTECTION : OPTIMAL</p>
|
|
</div>
|
|
|
|
<div class="module" id="m3">
|
|
<h2>Historique des Filles</h2>
|
|
<p>> 1982: E-MAIL (SMTP) - <span style="color:var(--danger)">VULNÉRABLE</span></p>
|
|
<p>> 1991: PGP - <span style="color:var(--primary)">SÉCURISÉ (STRICTOR)</span></p>
|
|
<p>> 2013: SIGNAL - <span style="color:var(--primary)">STANDARD ACTUEL</span></p>
|
|
<p>> 2026: PQ-CRYPTO - <span style="color:white">EN DÉPLOIEMENT</span></p>
|
|
</div>
|
|
|
|
<div class="module" id="m4">
|
|
<h2>Matrice de Comparaison</h2>
|
|
<table style="width: 100%; text-align: left; border-collapse: collapse;">
|
|
<tr style="border-bottom: 1px solid var(--primary);">
|
|
<th style="padding: 10px;">ID</th><th>E2EE</th><th>NETWORK</th>
|
|
</tr>
|
|
<tr><td style="padding: 10px;">SIGNAL</td><td>YES</td><td>CENTRAL</td></tr>
|
|
<tr><td style="padding: 10px;">DISCORD</td><td>VOICE ONLY</td><td>CENTRAL</td></tr>
|
|
<tr><td style="padding: 10px;">MATRIX</td><td>YES</td><td>FEDERATED</td></tr>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="nav">
|
|
<button class="btn btn-danger" onclick="triggerBreach()">[ BREACH ]</button>
|
|
<button class="btn" onclick="change(-1)">PREV</button>
|
|
<button class="btn" onclick="change(1)">NEXT</button>
|
|
</div>
|
|
|
|
<script>
|
|
let current = 0;
|
|
const modules = document.querySelectorAll('.module');
|
|
|
|
function change(dir) {
|
|
modules[current].classList.remove('active');
|
|
current = (current + dir + modules.length) % modules.length;
|
|
modules[current].classList.add('active');
|
|
}
|
|
|
|
// Génération des logs
|
|
const logBox = document.getElementById('logs');
|
|
const codes = ["0x88A", "AES-256", "SIG_ERR", "PFS_OK", "DHT_JOIN", "RATCHET_ROT", "MQ_READY"];
|
|
setInterval(() => {
|
|
const div = document.createElement('div');
|
|
div.className = 'log-entry';
|
|
div.innerText = `[${new Date().toLocaleTimeString()}] ${codes[Math.floor(Math.random()*codes.length)]} >> SYNC...`;
|
|
logBox.prepend(div);
|
|
if(logBox.children.length > 30) logBox.lastChild.remove();
|
|
}, 500);
|
|
|
|
function triggerBreach() {
|
|
document.body.classList.toggle('breach');
|
|
}
|
|
|
|
document.addEventListener('keydown', e => {
|
|
if(e.key === 'ArrowRight' || e.key === ' ') change(1);
|
|
if(e.key === 'ArrowLeft') change(-1);
|
|
});
|
|
|
|
// Effet de mouvement de souris (Parallaxe)
|
|
document.addEventListener('mousemove', e => {
|
|
const x = (window.innerWidth / 2 - e.pageX) / 50;
|
|
const y = (window.innerHeight / 2 - e.pageY) / 50;
|
|
document.querySelector('.viewport').style.transform = `rotateY(${x}deg) rotateX(${-y}deg)`;
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |