160 lines
16 KiB
PHP
Executable File
160 lines
16 KiB
PHP
Executable File
<!DOCTYPE html><html lang="fr"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>WEVADS • Send Data Factory</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(--am)}
|
||
.wrap{padding:16px;max-width:1400px;margin:0 auto}
|
||
.stats{display:grid;grid-template-columns:repeat(5,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(--am);border-color:var(--am)}
|
||
.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,.form-row textarea{width:100%;background:var(--s2);border:1px solid var(--b);color:var(--t);padding:8px;border-radius:6px;font-size:11px;font-family:'DM Sans',sans-serif}
|
||
.form-row textarea{min-height:80px;resize:vertical;font-family:'JetBrains Mono',monospace;font-size:10px}
|
||
.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(--am)}
|
||
.btn-am{background:rgba(251,191,36,.15);border-color:var(--am);color:var(--am)}
|
||
.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)}
|
||
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}
|
||
.pipeline{display:flex;align-items:center;gap:0;justify-content:center;margin:12px 0;flex-wrap:wrap}
|
||
.pipe-step{background:var(--s2);border:1px solid var(--b);border-radius:8px;padding:8px 14px;text-align:center;min-width:90px;font-size:10px}
|
||
.pipe-step.active{border-color:var(--am);background:rgba(251,191,36,.08);animation:pulse 2s infinite}
|
||
.pipe-step.done{border-color:var(--gn);background:rgba(52,211,153,.05)}
|
||
.pipe-arrow{color:var(--d);font-size:14px;margin:0 3px}
|
||
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
|
||
.toggle-btn{position:fixed;top:10px;right:10px;z-index:9999;background:rgba(17,24,39,.9);border:1px solid #1e293b;border-radius:8px;padding:6px 12px;cursor:pointer;font-size:14px;color:#e2e8f0}
|
||
@media(max-width:900px){.stats{grid-template-columns:repeat(3,1fr)}.grid2,.grid3{grid-template-columns:1fr}}
|
||
</style>
|
||
</head><body>
|
||
<button id="theme-toggle" onclick="toggleTheme()" class="toggle-btn">🌙</button>
|
||
<div class="hdr"><div><h1>📦 WEVADS • <span>Send Data Factory</span></h1><span style="font-size:10px;color:var(--d)">Préparation des données d'envoi — Listes, Templates, Variables, Routing</span></div><div style="display:flex;gap:8px;align-items:center"><span class="badge badge-gn">● FACTORY ACTIVE</span><span style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--d)" id="clock"></span></div></div>
|
||
<div class="wrap">
|
||
<div class="pipeline">
|
||
<div class="pipe-step done"><div style="font-size:14px">📋</div><div>Liste</div></div>
|
||
<span class="pipe-arrow">→</span>
|
||
<div class="pipe-step done"><div style="font-size:14px">✉️</div><div>Template</div></div>
|
||
<span class="pipe-arrow">→</span>
|
||
<div class="pipe-step active"><div style="font-size:14px">🔧</div><div>Variables</div></div>
|
||
<span class="pipe-arrow">→</span>
|
||
<div class="pipe-step"><div style="font-size:14px">🧬</div><div>Mutate</div></div>
|
||
<span class="pipe-arrow">→</span>
|
||
<div class="pipe-step"><div style="font-size:14px">🚀</div><div>Send Queue</div></div>
|
||
</div>
|
||
<div class="stats">
|
||
<div class="sc"><div class="n" style="color:var(--am)">24</div><div class="l">Listes actives</div></div>
|
||
<div class="sc"><div class="n" style="color:var(--cy)">18</div><div class="l">Templates</div></div>
|
||
<div class="sc"><div class="n" style="color:var(--gn)">847K</div><div class="l">Contacts total</div></div>
|
||
<div class="sc"><div class="n" style="color:var(--pu)">12</div><div class="l">Variables dynamiques</div></div>
|
||
<div class="sc"><div class="n" style="color:var(--og)">6</div><div class="l">Routes actives</div></div>
|
||
</div>
|
||
<div class="tabs">
|
||
<div class="tab active" onclick="showTab('lists')">📋 Listes</div>
|
||
<div class="tab" onclick="showTab('templates')">✉️ Templates</div>
|
||
<div class="tab" onclick="showTab('variables')">🔧 Variables</div>
|
||
<div class="tab" onclick="showTab('routing')">🔀 Routing</div>
|
||
<div class="tab" onclick="showTab('queue')">🚀 Queue</div>
|
||
</div>
|
||
<div class="panel active" id="tab-lists">
|
||
<h3 style="font-size:12px;margin-bottom:10px;color:var(--am)">📋 Sélection des listes d'envoi</h3>
|
||
<table><thead><tr><th>Nom</th><th>Contacts</th><th>ISP dominant</th><th>Bounce</th><th>Dernière utilisation</th><th>Santé</th><th>Sélectionner</th></tr></thead><tbody>
|
||
<tr><td style="font-weight:600">Hotmail US Clean Winx</td><td>4,100,000</td><td>Hotmail/Outlook</td><td style="color:var(--gn)">3.1%</td><td>07/02 14:30</td><td><span class="badge badge-gn">CLEAN</span></td><td><input type="checkbox" checked></td></tr>
|
||
<tr><td style="font-weight:600">Gmail DE DACH Premium</td><td>1,200,000</td><td>Gmail</td><td style="color:var(--gn)">2.4%</td><td>07/02 09:15</td><td><span class="badge badge-gn">CLEAN</span></td><td><input type="checkbox"></td></tr>
|
||
<tr><td style="font-weight:600">T-Online Leads</td><td>340,000</td><td>T-Online</td><td style="color:var(--gn)">1.8%</td><td>06/02 18:00</td><td><span class="badge badge-gn">CLEAN</span></td><td><input type="checkbox"></td></tr>
|
||
<tr><td style="font-weight:600">GMX/Web.de Mix</td><td>520,000</td><td>GMX</td><td style="color:var(--gn)">0.9%</td><td>05/02 11:00</td><td><span class="badge badge-gn">CLEAN</span></td><td><input type="checkbox"></td></tr>
|
||
<tr><td style="font-weight:600">Yahoo Intl</td><td>890,000</td><td>Yahoo</td><td style="color:var(--rd)">8.4%</td><td>04/02 16:00</td><td><span class="badge badge-rd">DIRTY</span></td><td><input type="checkbox" disabled></td></tr>
|
||
</tbody></table>
|
||
<div style="margin-top:10px;display:flex;gap:8px"><button class="btn btn-am">📋 Charger la sélection</button><button class="btn">🧹 Nettoyer avant envoi</button></div>
|
||
</div>
|
||
<div class="panel" id="tab-templates">
|
||
<h3 style="font-size:12px;margin-bottom:10px">✉️ Templates d'email</h3>
|
||
<div class="grid3">
|
||
<div style="background:var(--s2);border:1px solid var(--b);border-radius:8px;padding:12px;cursor:pointer;border-color:var(--am)"><div style="font-size:14px;margin-bottom:4px">🔥</div><strong>FOMO Urgence</strong><div style="font-size:9px;color:var(--d);margin-top:4px">Open: 28% • Click: 4.2%</div><span class="badge badge-gn">TOP PERFORMER</span></div>
|
||
<div style="background:var(--s2);border:1px solid var(--b);border-radius:8px;padding:12px;cursor:pointer"><div style="font-size:14px;margin-bottom:4px">💼</div><strong>B2B Outreach</strong><div style="font-size:9px;color:var(--d);margin-top:4px">Open: 22% • Click: 3.1%</div></div>
|
||
<div style="background:var(--s2);border:1px solid var(--b);border-radius:8px;padding:12px;cursor:pointer"><div style="font-size:14px;margin-bottom:4px">📰</div><strong>Newsletter Premium</strong><div style="font-size:9px;color:var(--d);margin-top:4px">Open: 31% • Click: 2.8%</div></div>
|
||
<div style="background:var(--s2);border:1px solid var(--b);border-radius:8px;padding:12px;cursor:pointer"><div style="font-size:14px;margin-bottom:4px">💊</div><strong>Pharma Free Trial</strong><div style="font-size:9px;color:var(--d);margin-top:4px">Open: 19% • Click: 5.1%</div></div>
|
||
<div style="background:var(--s2);border:1px solid var(--b);border-radius:8px;padding:12px;cursor:pointer"><div style="font-size:14px;margin-bottom:4px">🎁</div><strong>Promo Seasonal</strong><div style="font-size:9px;color:var(--d);margin-top:4px">Open: 25% • Click: 3.8%</div></div>
|
||
<div style="background:var(--s2);border:1px solid var(--b);border-radius:8px;padding:12px;cursor:pointer"><div style="font-size:14px;margin-bottom:4px">➕</div><strong style="color:var(--d)">Nouveau template</strong></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel" id="tab-variables">
|
||
<h3 style="font-size:12px;margin-bottom:10px">🔧 Variables dynamiques</h3>
|
||
<div class="grid2">
|
||
<div>
|
||
<table><thead><tr><th>Variable</th><th>Source</th><th>Exemple</th></tr></thead><tbody>
|
||
<tr><td style="font-family:'JetBrains Mono',monospace;color:var(--am)">{{prenom}}</td><td>Liste contact</td><td>Anna</td></tr>
|
||
<tr><td style="font-family:'JetBrains Mono',monospace;color:var(--am)">{{nom}}</td><td>Liste contact</td><td>Mueller</td></tr>
|
||
<tr><td style="font-family:'JetBrains Mono',monospace;color:var(--am)">{{email}}</td><td>Liste contact</td><td>anna@example.de</td></tr>
|
||
<tr><td style="font-family:'JetBrains Mono',monospace;color:var(--am)">{{link}}</td><td>Tracking server</td><td>https://trk.example.com/c/xxx</td></tr>
|
||
<tr><td style="font-family:'JetBrains Mono',monospace;color:var(--am)">{{unsub}}</td><td>Auto-generated</td><td>https://trk.example.com/u/xxx</td></tr>
|
||
<tr><td style="font-family:'JetBrains Mono',monospace;color:var(--am)">{{subject}}</td><td>AI Copywriter</td><td>Dernière chance, {{prenom}} !</td></tr>
|
||
<tr><td style="font-family:'JetBrains Mono',monospace;color:var(--am)">{{from_name}}</td><td>Persona</td><td>Anna Mueller</td></tr>
|
||
<tr><td style="font-family:'JetBrains Mono',monospace;color:var(--am)">{{from_email}}</td><td>Rotation pool</td><td>anna.m@o365.com</td></tr>
|
||
<tr><td style="font-family:'JetBrains Mono',monospace;color:var(--am)">{{date}}</td><td>Dynamic</td><td>08/02/2026</td></tr>
|
||
<tr><td style="font-family:'JetBrains Mono',monospace;color:var(--am)">{{city}}</td><td>GeoIP</td><td>Berlin</td></tr>
|
||
</tbody></table>
|
||
</div>
|
||
<div>
|
||
<h4 style="font-size:11px;margin-bottom:8px;color:var(--pu)">Preview avec variables résolues</h4>
|
||
<div style="background:var(--bg);border:1px solid var(--b);border-radius:6px;padding:12px;font-size:10px;line-height:1.8">
|
||
<strong>De:</strong> Anna Mueller <anna.m@o365.com><br>
|
||
<strong>Objet:</strong> Dernière chance, <span style="color:var(--am)">Thomas</span> !<br>
|
||
<hr style="border-color:var(--b);margin:6px 0">
|
||
Bonjour <span style="color:var(--am)">Thomas</span>,<br><br>
|
||
Profitez de -40% sur tout le site depuis <span style="color:var(--am)">Berlin</span>.<br>
|
||
Offre valable jusqu'au <span style="color:var(--am)">08/02/2026</span>.<br><br>
|
||
<a style="color:var(--cy)">[J'en profite →]</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="panel" id="tab-routing">
|
||
<h3 style="font-size:12px;margin-bottom:10px">🔀 Routing — ISP → Méthode d'envoi</h3>
|
||
<table><thead><tr><th>ISP cible</th><th>Méthode</th><th>Comptes/serveurs</th><th>Inbox rate</th><th>Priorité</th></tr></thead><tbody>
|
||
<tr><td style="font-weight:600">Gmail</td><td><span class="badge badge-cy">O365 Graph API</span></td><td>450 comptes</td><td style="color:var(--gn)">94%</td><td>1</td></tr>
|
||
<tr><td style="font-weight:600">Outlook/Hotmail</td><td><span class="badge badge-cy">O365 Exchange</span></td><td>380 comptes</td><td style="color:var(--gn)">97%</td><td>1</td></tr>
|
||
<tr><td style="font-weight:600">T-Online</td><td><span class="badge badge-am">PMTA Direct</span></td><td>12 IPs</td><td style="color:var(--gn)">95%</td><td>2</td></tr>
|
||
<tr><td style="font-weight:600">GMX/Web.de</td><td><span class="badge badge-am">PMTA Exchange Headers</span></td><td>8 IPs</td><td style="color:var(--gn)">100%</td><td>1</td></tr>
|
||
<tr><td style="font-weight:600">Yahoo</td><td><span class="badge badge-pu">Amazon SES</span></td><td>3 identities</td><td style="color:var(--am)">85%</td><td>3</td></tr>
|
||
<tr><td style="font-weight:600">Orange/Free</td><td><span class="badge badge-am">PMTA Minimal</span></td><td>6 IPs</td><td style="color:var(--gn)">93%</td><td>2</td></tr>
|
||
</tbody></table>
|
||
</div>
|
||
<div class="panel" id="tab-queue">
|
||
<h3 style="font-size:12px;margin-bottom:10px">🚀 Queue d'envoi — Prêt à lancer</h3>
|
||
<div class="grid2">
|
||
<div>
|
||
<div class="form-row"><label>Campagne</label><input value="FOMO Winter Sale — Hotmail US — 08/02"></div>
|
||
<div class="form-row"><label>Liste</label><input value="Hotmail US Clean Winx (4.1M)" readonly></div>
|
||
<div class="form-row"><label>Template</label><input value="FOMO Urgence" readonly></div>
|
||
<div class="form-row"><label>Méthode</label><input value="Brain Unified Send (auto-routing)" readonly></div>
|
||
<div class="form-row"><label>Volume</label><select><option>10,000 (test)</option><option>100,000</option><option>500,000</option><option selected>Full list (4,100,000)</option></select></div>
|
||
<div class="form-row"><label>Planification</label><select><option>Maintenant</option><option selected>Predictive Window (Mar 09:14 CET)</option><option>Manuel — choisir heure</option></select></div>
|
||
<button class="btn btn-am" style="width:100%;padding:12px;font-size:13px;font-weight:700">🚀 LANCER L'ENVOI</button>
|
||
</div>
|
||
<div>
|
||
<h4 style="font-size:11px;margin-bottom:8px">Checklist pré-envoi</h4>
|
||
<div style="font-size:10px;line-height:2.2">
|
||
<div><span style="color:var(--gn)">✅</span> Liste nettoyée (bounce < 5%)</div>
|
||
<div><span style="color:var(--gn)">✅</span> Trap Detector passé (0 traps)</div>
|
||
<div><span style="color:var(--gn)">✅</span> Template muté (Neural DOM — 24 mutations)</div>
|
||
<div><span style="color:var(--gn)">✅</span> Images forgées (Noise Forge active)</div>
|
||
<div><span style="color:var(--gn)">✅</span> Fingerprints synced (1,352 comptes)</div>
|
||
<div><span style="color:var(--gn)">✅</span> DNS vérifié (SPF+DKIM+DMARC)</div>
|
||
<div><span style="color:var(--gn)">✅</span> IP reputation OK (94/100)</div>
|
||
<div><span style="color:var(--gn)">✅</span> Kill switch prêt</div>
|
||
</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>
|
||
</body></html>
|
||
|