Files
wevia-brain/s89-arsenal-screens/auto-healing-rotation.html
2026-04-12 23:01:36 +02:00

240 lines
20 KiB
HTML
Executable File

<!DOCTYPE html><html lang="fr" data-theme="dark"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>WEVADS • Auto-Healing Rotation</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{--bg:#060a14;--s:#0c1220;--s2:#111827;--b:#1e293b;--t:#e2e8f0;--d:#64748b;--cy:#22d3ee;--gn:#34d399;--am:#fbbf24;--rd:#f87171;--pu:#a78bfa;--bl:#60a5fa;--pk:#f472b6;--og:#fb923c}
.light{--bg:#f0f2f5;--s:#ffffff;--s2:#f8fafc;--b:#e2e8f0;--t:#1e293b;--d:#64748b}.light input,.light select,.light textarea{background:#f8fafc!important;border-color:#e2e8f0!important;color:#1e293b!important}
*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--t);font-family:'DM Sans',sans-serif;font-size:11px}
.hdr{background:var(--s);border-bottom:1px solid var(--b);padding:12px 20px;display:flex;align-items:center;justify-content:space-between}.hdr h1{font-size:16px;font-weight:700}.hdr h1 span{color:var(--cy)}
.wrap{padding:16px;max-width:1400px;margin:0 auto}
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:16px}
.sc{background:var(--s);border:1px solid var(--b);border-radius:10px;padding:14px;text-align:center}.sc .n{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700}.sc .l{font-size:9px;text-transform:uppercase;color:var(--d);margin-top:4px}
.tabs{display:flex;gap:2px;margin-bottom:16px;border-bottom:1px solid var(--b)}.tab{padding:8px 16px;cursor:pointer;font-size:10px;font-weight:600;text-transform:uppercase;color:var(--d);border-bottom:2px solid transparent}.tab:hover{color:var(--t)}.tab.active{color:var(--cy);border-color:var(--cy)}
.panel{display:none;background:var(--s);border:1px solid var(--b);border-radius:10px;padding:16px}.panel.active{display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.form-row{margin-bottom:10px}.form-row label{display:block;font-size:9px;text-transform:uppercase;color:var(--d);margin-bottom:4px}
.form-row input,.form-row select{width:100%;background:var(--s2);border:1px solid var(--b);color:var(--t);padding:8px;border-radius:6px;font-size:11px}
.btn{padding:8px 16px;border-radius:6px;border:1px solid var(--b);background:var(--s2);color:var(--t);cursor:pointer;font-size:10px;font-weight:600}.btn:hover{border-color:var(--cy)}
.btn-cy{background:rgba(34,211,238,.15);border-color:var(--cy);color:var(--cy)}
.badge{font-size:8px;padding:2px 6px;border-radius:3px;font-weight:600}.badge-gn{background:rgba(52,211,153,.15);color:var(--gn)}.badge-am{background:rgba(251,191,36,.15);color:var(--am)}.badge-rd{background:rgba(248,113,113,.15);color:var(--rd)}.badge-cy{background:rgba(34,211,238,.15);color:var(--cy)}.badge-pu{background:rgba(167,139,250,.15);color:var(--pu)}
table{width:100%;border-collapse:collapse;font-size:10px}th{text-align:left;color:var(--d);text-transform:uppercase;font-size:9px;padding:6px 8px;border-bottom:1px solid var(--b)}td{padding:6px 8px;border-bottom:1px solid rgba(30,41,59,.3)}
.progress{height:6px;background:var(--s2);border-radius:3px}.progress-fill{height:100%;border-radius:3px;transition:width 1s}
.lifecycle{display:flex;align-items:center;gap:0;justify-content:center;margin:12px 0;flex-wrap:wrap}
.lc-step{border:1px solid var(--b);border-radius:8px;padding:8px 12px;text-align:center;min-width:100px;font-size:10px;background:var(--s2)}.lc-step.active{border-color:var(--cy);background:rgba(34,211,238,.05)}
.lc-step.warning{border-color:var(--am);background:rgba(251,191,36,.05)}
.lc-step.danger{border-color:var(--rd);background:rgba(248,113,113,.05)}
.lc-step.healing{border-color:var(--pu);background:rgba(167,139,250,.05);animation:pulse 2s infinite}
.lc-arrow{color:var(--d);font-size:14px;margin:0 3px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.account-card{background:var(--s2);border:1px solid var(--b);border-radius:8px;padding:12px;margin-bottom:8px}
.toggle-btn{position:fixed;top:10px;right:56px;z-index:9999;background:rgba(17,24,39,.9);border:1px solid #1e293b;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;font-size:13px;color:#e2e8f0}
@media(max-width:900px){.stats{grid-template-columns:repeat(3,1fr)}.grid2,.grid3{grid-template-columns:1fr}}
</style>
<style id="weval-theme-system">
/* Day/Night Theme Toggle */
[data-theme="light"] { --bg:#f0f2f5!important; --s:#ffffff!important; --s2:#f8fafc!important; --b:#e2e8f0!important; --t:#1e293b!important; --d:#64748b!important; }
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea {
background:#f8fafc!important; border-color:#e2e8f0!important; color:#1e293b!important;
}
[data-theme="light"] .hdr, [data-theme="light"] header, [data-theme="light"] nav {
background:#ffffff!important; border-color:#e2e8f0!important;
}
[data-theme="light"] table, [data-theme="light"] th, [data-theme="light"] td {
border-color:#e2e8f0!important;
}
[data-theme="light"] th { background:#f8fafc!important; }
[data-theme="light"] .sc, [data-theme="light"] .card, [data-theme="light"] [class*="card"] {
background:#ffffff!important; border-color:#e2e8f0!important;
}
.weval-theme-btn {
position:fixed; bottom:16px; right:16px; z-index:9999;
width:40px; height:40px; border-radius:50%;
border:1px solid var(--b, #1e293b);
background:var(--s, #0c1220);
color:var(--t, #e2e8f0);
cursor:pointer; font-size:18px;
display:flex; align-items:center; justify-content:center;
box-shadow:0 2px 8px rgba(0,0,0,0.3);
transition:all 0.2s;
}
.weval-theme-btn:hover { transform:scale(1.1); }
</style>
</head><body>
<!-- nav-pills-bar -->
<button id="theme-toggle" onclick="toggleTheme()" class="toggle-btn">🌙</button>
<div class="hdr"><div><h1>🔄 WEVADS • <span>Auto-Healing Rotation</span></h1><span style="font-size:10px;color:var(--d)">Quarantaine auto — Warmup intensif — Restauration réputation — Réintégration autonome</span></div><div style="display:flex;gap:8px;align-items:center"><span class="badge badge-gn">● AUTONOMOUS</span><span style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--d)" id="clock"></span></div></div>
<div class="wrap">
<!-- LIFECYCLE -->
<div class="lifecycle">
<div class="lc-step active"><div style="font-size:14px"></div><div>Active Pool</div><div style="font-size:8px;color:var(--gn)">1,280 comptes</div></div>
<span class="lc-arrow"></span>
<div class="lc-step warning"><div style="font-size:14px">⚠️</div><div>Flagged</div><div style="font-size:8px;color:var(--am)">42 comptes</div></div>
<span class="lc-arrow"></span>
<div class="lc-step danger"><div style="font-size:14px">🚫</div><div>Quarantine</div><div style="font-size:8px;color:var(--rd)">18 comptes</div></div>
<span class="lc-arrow"></span>
<div class="lc-step healing"><div style="font-size:14px">💊</div><div>Healing</div><div style="font-size:8px;color:var(--pu)">8 comptes</div></div>
<span class="lc-arrow"></span>
<div class="lc-step active"><div style="font-size:14px">🔄</div><div>Re-warmup</div><div style="font-size:8px;color:var(--cy)">4 comptes</div></div>
<span class="lc-arrow"></span>
<div class="lc-step active"><div style="font-size:14px"></div><div>Restored</div><div style="font-size:8px;color:var(--gn)">Score > 90</div></div>
</div>
<div class="stats">
<div class="sc"><div class="n" style="color:var(--gn)">1,280</div><div class="l">Pool actif</div></div>
<div class="sc"><div class="n" style="color:var(--am)">42</div><div class="l">Flagged</div></div>
<div class="sc"><div class="n" style="color:var(--rd)">18</div><div class="l">En quarantaine</div></div>
<div class="sc"><div class="n" style="color:var(--pu)">8</div><div class="l">En healing</div></div>
<div class="sc"><div class="n" style="color:var(--cy)">96%</div><div class="l">Taux recovery</div></div>
<div class="sc"><div class="n" style="color:var(--gn)">3.2j</div><div class="l">Temps moyen heal</div></div>
</div>
<div class="tabs">
<div class="tab active" onclick="showTab('status')">📊 Status</div>
<div class="tab" onclick="showTab('quarantine')">🚫 Quarantaine</div>
<div class="tab" onclick="showTab('healing')">💊 Healing</div>
<div class="tab" onclick="showTab('warmup')">🔥 Warmup Pro</div>
<div class="tab" onclick="showTab('config')">⚙️ Config</div>
</div>
<div class="panel active" id="tab-status">
<div class="grid2">
<div>
<h3 style="font-size:12px;margin-bottom:10px">📊 Distribution du pool</h3>
<table><thead><tr><th>Status</th><th>O365</th><th>GSuite</th><th>Total</th><th>%</th></tr></thead><tbody>
<tr><td><span style="color:var(--gn)"></span> Active (score ≥ 90)</td><td>1,050</td><td>230</td><td style="color:var(--gn)">1,280</td><td>94.8%</td></tr>
<tr><td><span style="color:var(--am)"></span> Flagged (score 70-89)</td><td>35</td><td>7</td><td style="color:var(--am)">42</td><td>3.1%</td></tr>
<tr><td><span style="color:var(--rd)"></span> Quarantine (score < 70)</td><td>15</td><td>3</td><td style="color:var(--rd)">18</td><td>1.3%</td></tr>
<tr><td><span style="color:var(--pu)"></span> Healing (warmup actif)</td><td>7</td><td>1</td><td style="color:var(--pu)">8</td><td>0.6%</td></tr>
<tr><td><span style="color:var(--cy)"></span> Re-warmup (montée)</td><td>3</td><td>1</td><td style="color:var(--cy)">4</td><td>0.3%</td></tr>
<tr style="font-weight:700"><td>Total</td><td>1,110</td><td>242</td><td>1,352</td><td>100%</td></tr>
</tbody></table>
</div>
<div>
<h3 style="font-size:12px;margin-bottom:10px">📈 Événements récents</h3>
<div style="font-size:10px;line-height:2">
<div><span style="color:var(--d)">[00:45]</span> <span style="color:var(--am)">⚠️</span> anna.m@o365 flagged → score dropped to 82</div>
<div><span style="color:var(--d)">[00:30]</span> <span style="color:var(--gn)"></span> peter.s@o365 restored → score back to 94</div>
<div><span style="color:var(--d)">[00:15]</span> <span style="color:var(--pu)">💊</span> maria.r@o365 healing started → warmup day 1</div>
<div><span style="color:var(--d)">[23:50]</span> <span style="color:var(--rd)">🚫</span> thomas.w@o365 quarantined → Microsoft lock detected</div>
<div><span style="color:var(--d)">[23:30]</span> <span style="color:var(--gn)"></span> sophie.m@gsuite restored → score 92</div>
<div><span style="color:var(--d)">[23:00]</span> <span style="color:var(--cy)">🔄</span> batch.healing@o365 re-warmup → day 3/7, score 78→85</div>
</div>
</div>
</div>
</div>
<div class="panel" id="tab-quarantine">
<h3 style="font-size:12px;margin-bottom:10px;color:var(--rd)">🚫 Comptes en quarantaine — 18 actifs</h3>
<table><thead><tr><th>Compte</th><th>Provider</th><th>Score</th><th>Raison</th><th>Quarantaine depuis</th><th>Action</th></tr></thead><tbody>
<tr><td style="font-family:'JetBrains Mono',monospace;font-size:9px">thomas.weber.1247@o365</td><td>O365</td><td style="color:var(--rd)">45</td><td>Microsoft temp lock — suspicious activity</td><td>il y a 2h</td><td><button class="btn" style="font-size:8px">→ Healing</button></td></tr>
<tr><td style="font-family:'JetBrains Mono',monospace;font-size:9px">peter.schulz.0892@o365</td><td>O365</td><td style="color:var(--rd)">52</td><td>Bounce rate spike (12% → 8h)</td><td>il y a 4h</td><td><button class="btn" style="font-size:8px">→ Healing</button></td></tr>
<tr><td style="font-family:'JetBrains Mono',monospace;font-size:9px">anna.becker.2103@o365</td><td>O365</td><td style="color:var(--rd)">38</td><td>Spam complaint reported to Microsoft</td><td>il y a 8h</td><td><button class="btn" style="font-size:8px">→ Healing</button></td></tr>
<tr><td style="font-family:'JetBrains Mono',monospace;font-size:9px">sophie.martin.0451@gsuite</td><td>GSuite</td><td style="color:var(--rd)">61</td><td>Google rate limit exceeded</td><td>il y a 1h</td><td><button class="btn" style="font-size:8px">→ Healing</button></td></tr>
</tbody></table>
<div style="margin-top:10px;display:flex;gap:8px">
<button class="btn btn-cy">💊 Heal All Quarantined</button>
<button class="btn" style="background:rgba(248,113,113,.1);border-color:var(--rd);color:var(--rd)">🗑️ Purge Dead Accounts</button>
</div>
</div>
<div class="panel" id="tab-healing">
<h3 style="font-size:12px;margin-bottom:10px;color:var(--pu)">💊 Healing en cours — 8 comptes</h3>
<div class="account-card">
<div style="display:flex;justify-content:space-between;margin-bottom:8px"><strong>maria.rossi.0782@o365</strong><span class="badge badge-pu">HEALING Day 3/7</span></div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;font-size:9px;margin-bottom:6px">
<div><span style="color:var(--d)">Score initial:</span> <strong style="color:var(--rd)">42</strong></div>
<div><span style="color:var(--d)">Score actuel:</span> <strong style="color:var(--am)">71</strong></div>
<div><span style="color:var(--d)">Warmup:</span> <strong>15 emails/jour</strong></div>
<div><span style="color:var(--d)">Cible:</span> <strong style="color:var(--gn)">≥ 90</strong></div>
</div>
<div style="display:flex;align-items:center;gap:8px"><span style="font-size:9px;color:var(--d)">Progress:</span><div class="progress" style="flex:1;height:8px"><div class="progress-fill" style="width:71%;background:linear-gradient(90deg,var(--rd),var(--am),var(--gn))"></div></div><span style="font-size:9px;color:var(--am)">71/90</span></div>
<div style="font-size:9px;color:var(--d);margin-top:4px">Protocole: 5 emails légitimes/jour → check bounce → augmenter volume si score OK → réintégrer à score 90+</div>
</div>
<div class="account-card">
<div style="display:flex;justify-content:space-between;margin-bottom:8px"><strong>klaus.fischer.1590@o365</strong><span class="badge badge-pu">HEALING Day 5/7</span></div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;font-size:9px;margin-bottom:6px">
<div><span style="color:var(--d)">Score initial:</span> <strong style="color:var(--rd)">55</strong></div>
<div><span style="color:var(--d)">Score actuel:</span> <strong style="color:var(--am)">84</strong></div>
<div><span style="color:var(--d)">Warmup:</span> <strong>25 emails/jour</strong></div>
<div><span style="color:var(--d)">Cible:</span> <strong style="color:var(--gn)">≥ 90</strong></div>
</div>
<div style="display:flex;align-items:center;gap:8px"><span style="font-size:9px;color:var(--d)">Progress:</span><div class="progress" style="flex:1;height:8px"><div class="progress-fill" style="width:84%;background:linear-gradient(90deg,var(--rd),var(--am),var(--gn))"></div></div><span style="font-size:9px;color:var(--am)">84/90</span></div>
<div style="font-size:9px;color:var(--gn);margin-top:4px">⏱ Réintégration estimée: ~2 jours</div>
</div>
</div>
<div class="panel" id="tab-warmup">
<h3 style="font-size:12px;margin-bottom:10px;color:var(--og)">🔥 Warmup Pro — Protocole de restauration</h3>
<div class="grid2">
<div>
<h4 style="font-size:11px;margin-bottom:8px">Protocole standard (7 jours)</h4>
<table><thead><tr><th>Jour</th><th>Emails/j</th><th>Type</th><th>Score attendu</th></tr></thead><tbody>
<tr><td>J1</td><td>5</td><td>Auto-reply (seeds internes)</td><td>+5 pts</td></tr>
<tr><td>J2</td><td>10</td><td>Seeds + legitimate opens</td><td>+8 pts</td></tr>
<tr><td>J3</td><td>15</td><td>Seeds + clicks + replies</td><td>+7 pts</td></tr>
<tr><td>J4</td><td>25</td><td>Mix seeds + real sends (safe)</td><td>+6 pts</td></tr>
<tr><td>J5</td><td>40</td><td>Progressive increase</td><td>+5 pts</td></tr>
<tr><td>J6</td><td>60</td><td>Near-normal volume</td><td>+4 pts</td></tr>
<tr><td>J7</td><td>100</td><td>Full volume si score ≥ 90</td><td>→ Active Pool</td></tr>
</tbody></table>
</div>
<div>
<h4 style="font-size:11px;margin-bottom:8px">Engagement simulé</h4>
<div style="background:var(--bg);border:1px solid var(--b);border-radius:8px;padding:14px;font-size:10px;line-height:2">
Pour restaurer la réputation, le warmup envoie vers des <strong style="color:var(--cy)">seeds contrôlés</strong> qui :<br>
1. <span style="color:var(--gn)">✅ Ouvrent</span> l'email (via IMAP fetch)<br>
2. <span style="color:var(--gn)">✅ Cliquent</span> les liens (via headless browser)<br>
3. <span style="color:var(--gn)">✅ Répondent</span> (auto-reply légitimes)<br>
4. <span style="color:var(--gn)">✅ Déplacent</span> de Spam → Inbox (si nécessaire)<br>
5. <span style="color:var(--gn)">✅ Marquent</span> "Not Spam" si Gmail/Outlook<br>
<br>
<strong style="color:var(--am)">Source:</strong> Seed Factory (1,847 seeds actifs)
</div>
</div>
</div>
</div>
<div class="panel" id="tab-config">
<div class="grid2">
<div>
<h3 style="font-size:12px;margin-bottom:10px">⚙️ Triggers de quarantaine</h3>
<div class="form-row"><label>Score seuil quarantaine</label><input type="number" value="70"></div>
<div class="form-row"><label>Score seuil flagging</label><input type="number" value="85"></div>
<div class="form-row"><label>Score réintégration</label><input type="number" value="90"></div>
<div class="form-row"><label>Bounce rate trigger</label><select><option>> 5% sur 1h → flag</option><option>> 8% sur 1h → quarantine</option><option>> 10% → quarantine immédiate</option></select></div>
<div class="form-row"><label>Microsoft lock detection</label><select><option>Auto — quarantine immédiate</option><option>Retry 3x puis quarantine</option></select></div>
<div class="form-row"><label>Healing automatique</label><select><option>Oui — dès quarantaine, lancer warmup</option><option>Manuel — attendre validation</option></select></div>
<button class="btn btn-cy" style="width:100%">💾 Sauvegarder</button>
</div>
<div>
<h3 style="font-size:12px;margin-bottom:10px">📊 Historique healing</h3>
<table><thead><tr><th>Compte</th><th>Entrée</th><th>Durée</th><th>Score final</th><th>Status</th></tr></thead><tbody>
<tr><td>peter.s@o365</td><td>05/02</td><td>3.5j</td><td style="color:var(--gn)">94</td><td><span class="badge badge-gn">RESTORED</span></td></tr>
<tr><td>sophie.m@gsuite</td><td>04/02</td><td>2.8j</td><td style="color:var(--gn)">92</td><td><span class="badge badge-gn">RESTORED</span></td></tr>
<tr><td>anna.b@o365</td><td>03/02</td><td>4.1j</td><td style="color:var(--gn)">91</td><td><span class="badge badge-gn">RESTORED</span></td></tr>
<tr><td>dead.account@o365</td><td>01/02</td><td>7j</td><td style="color:var(--rd)">35</td><td><span class="badge badge-rd">DEAD</span></td></tr>
</tbody></table>
<div style="margin-top:8px;font-size:10px"><strong>Taux de recovery:</strong> <span style="color:var(--gn)">96%</span> (24/25 comptes restaurés ce mois)</div>
</div>
</div>
</div>
</div>
<script>
function showTab(id){document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active'));document.getElementById('tab-'+id).classList.add('active');event.target.classList.add('active')}
function toggleTheme(){var b=document.body,t=document.getElementById('theme-toggle');if(b.classList.contains('light')){b.classList.remove('light');t.textContent='🌙';localStorage.setItem('wevads-theme','dark')}else{b.classList.add('light');t.textContent='☀️';localStorage.setItem('wevads-theme','light')}}
if(localStorage.getItem('wevads-theme')==='light'){document.body.classList.add('light');document.getElementById('theme-toggle').textContent='☀️'}
setInterval(function(){document.getElementById('clock').textContent=new Date().toLocaleTimeString('fr-FR')},1000);
</script><script src="arsenal-common.js"></script>
<button class="weval-theme-btn" id="weval-theme-toggle" onclick="(function(){
var h=document.documentElement;
var c=h.getAttribute('data-theme')||'dark';
var n=c==='dark'?'light':'dark';
h.setAttribute('data-theme',n);
localStorage.setItem('weval-theme',n);
document.getElementById('weval-theme-toggle').textContent=n==='dark'?'☀️':'🌙';
})()">☀️</button>
</script>