148 lines
14 KiB
PHP
148 lines
14 KiB
PHP
<!DOCTYPE html><html lang="fr"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>WEVADS • Data Manager</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}
|
|
.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(--bl)}
|
|
.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(--bl);border-color:var(--bl)}
|
|
.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}
|
|
.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(--bl)}
|
|
.btn-bl{background:rgba(96,165,250,.15);border-color:var(--bl);color:var(--bl)}
|
|
.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-bl{background:rgba(96,165,250,.15);color:var(--bl)}
|
|
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)}
|
|
.db-card{background:var(--s2);border:1px solid var(--b);border-radius:8px;padding:12px}.db-card:hover{border-color:var(--bl)}
|
|
.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>Data Manager</span></h1><span style="font-size:10px;color:var(--d)">Gestion données — Listes, contacts, segments — Import/Export — Nettoyage</span></div><div style="display:flex;gap:8px;align-items:center"><span class="badge badge-gn">● ONLINE</span><span style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--d)" id="clock"></span></div></div>
|
|
<div class="wrap">
|
|
<div class="stats">
|
|
<div class="sc"><div class="n" style="color:var(--bl)">847K</div><div class="l">Contacts totaux</div></div>
|
|
<div class="sc"><div class="n" style="color:var(--gn)">24</div><div class="l">Listes actives</div></div>
|
|
<div class="sc"><div class="n" style="color:var(--cy)">12</div><div class="l">Segments</div></div>
|
|
<div class="sc"><div class="n" style="color:var(--am)">3.2%</div><div class="l">Taux bounce</div></div>
|
|
<div class="sc"><div class="n" style="color:var(--rd)">12,400</div><div class="l">Blacklistés</div></div>
|
|
<div class="sc"><div class="n" style="color:var(--pu)">45K</div><div class="l">Ajoutés 7j</div></div>
|
|
</div>
|
|
<div class="tabs">
|
|
<div class="tab active" onclick="showTab('lists')">Listes</div>
|
|
<div class="tab" onclick="showTab('import')">Import</div>
|
|
<div class="tab" onclick="showTab('clean')">Nettoyage</div>
|
|
<div class="tab" onclick="showTab('export')">Export</div>
|
|
<div class="tab" onclick="showTab('db')">Base de données</div>
|
|
</div>
|
|
<div class="panel active" id="tab-lists">
|
|
<div style="display:flex;gap:8px;margin-bottom:12px">
|
|
<input placeholder="Rechercher une liste..." style="flex:1;background:var(--s2);border:1px solid var(--b);color:var(--t);padding:6px 10px;border-radius:6px;font-size:10px">
|
|
<button class="btn btn-bl">+ Nouvelle liste</button>
|
|
</div>
|
|
<table><thead><tr><th>Nom</th><th>Contacts</th><th>ISP dominant</th><th>Bounce</th><th>Dernière MAJ</th><th>Status</th><th>Actions</th></tr></thead><tbody>
|
|
<tr><td style="font-weight:600">Hotmail US — Clean Winx</td><td>4,100,000</td><td>Hotmail</td><td>3.1%</td><td>15/01/2026</td><td><span class="badge badge-gn">ACTIF</span></td><td><button class="btn" style="font-size:9px">View</button></td></tr>
|
|
<tr><td style="font-weight:600">Gmail DE — DACH Premium</td><td>1,200,000</td><td>Gmail</td><td>2.4%</td><td>05/02/2026</td><td><span class="badge badge-gn">ACTIF</span></td><td><button class="btn" style="font-size:9px">View</button></td></tr>
|
|
<tr><td style="font-weight:600">T-Online Leads</td><td>340,000</td><td>T-Online</td><td>1.8%</td><td>02/02/2026</td><td><span class="badge badge-gn">ACTIF</span></td><td><button class="btn" style="font-size:9px">View</button></td></tr>
|
|
<tr><td style="font-weight:600">GMX/Web.de Mix</td><td>520,000</td><td>GMX</td><td>0.9%</td><td>06/02/2026</td><td><span class="badge badge-gn">ACTIF</span></td><td><button class="btn" style="font-size:9px">View</button></td></tr>
|
|
<tr><td style="font-weight:600">Yahoo Intl — Needs Clean</td><td>890,000</td><td>Yahoo</td><td style="color:var(--rd)">8.4%</td><td>20/01/2026</td><td><span class="badge badge-am">DIRTY</span></td><td><button class="btn" style="font-size:9px">Clean</button></td></tr>
|
|
</tbody></table>
|
|
</div>
|
|
<div class="panel" id="tab-import">
|
|
<div class="grid2">
|
|
<div>
|
|
<h3 style="font-size:12px;margin-bottom:10px;color:var(--bl)">📥 Import de données</h3>
|
|
<div class="form-row"><label>Source</label><select><option>Fichier CSV</option><option>Fichier TXT (un email par ligne)</option><option>Fichier Excel</option><option>Copier-coller</option><option>API externe</option></select></div>
|
|
<div class="form-row"><label>Liste cible</label><select><option>+ Nouvelle liste</option><option>Hotmail US — Clean Winx</option><option>Gmail DE — DACH Premium</option></select></div>
|
|
<div class="form-row"><label>Fichier</label><input type="file" style="font-size:10px"></div>
|
|
<div class="form-row"><label>Options</label></div>
|
|
<div style="font-size:10px;display:flex;flex-direction:column;gap:4px;margin-bottom:10px">
|
|
<label><input type="checkbox" checked> Valider format email</label>
|
|
<label><input type="checkbox" checked> Supprimer doublons</label>
|
|
<label><input type="checkbox"> Vérifier MX records</label>
|
|
<label><input type="checkbox"> SMTP verify (lent)</label>
|
|
<label><input type="checkbox" checked> Exclure blacklist</label>
|
|
</div>
|
|
<button class="btn btn-bl" style="width:100%;padding:10px">📥 Importer</button>
|
|
</div>
|
|
<div>
|
|
<h3 style="font-size:12px;margin-bottom:10px">📋 Derniers imports</h3>
|
|
<table><thead><tr><th>Date</th><th>Fichier</th><th>Bruts</th><th>Importés</th><th>Rejetés</th></tr></thead><tbody>
|
|
<tr><td>07/02</td><td>leads_hotmail_us.csv</td><td>4,500,000</td><td style="color:var(--gn)">4,100,000</td><td style="color:var(--rd)">400,000</td></tr>
|
|
<tr><td>05/02</td><td>gmail_dach_feb.csv</td><td>1,350,000</td><td style="color:var(--gn)">1,200,000</td><td style="color:var(--rd)">150,000</td></tr>
|
|
<tr><td>02/02</td><td>tonline_premium.txt</td><td>380,000</td><td style="color:var(--gn)">340,000</td><td style="color:var(--rd)">40,000</td></tr>
|
|
</tbody></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel" id="tab-clean">
|
|
<div class="grid2">
|
|
<div>
|
|
<h3 style="font-size:12px;margin-bottom:10px;color:var(--am)">🧹 Nettoyage de liste</h3>
|
|
<div class="form-row"><label>Liste à nettoyer</label><select><option>Yahoo Intl — Needs Clean (890K, 8.4% bounce)</option><option>Hotmail US — Clean Winx</option><option>Toutes les listes</option></select></div>
|
|
<div class="form-row"><label>Actions</label></div>
|
|
<div style="font-size:10px;display:flex;flex-direction:column;gap:4px;margin-bottom:10px">
|
|
<label><input type="checkbox" checked> Supprimer hard bounces</label>
|
|
<label><input type="checkbox" checked> Supprimer doublons</label>
|
|
<label><input type="checkbox" checked> Supprimer syntax invalides</label>
|
|
<label><input type="checkbox"> Supprimer catch-all domains</label>
|
|
<label><input type="checkbox" checked> Supprimer role emails (info@, admin@)</label>
|
|
<label><input type="checkbox" checked> Croiser blacklist</label>
|
|
<label><input type="checkbox"> SMTP deep verify</label>
|
|
</div>
|
|
<button class="btn btn-am" style="width:100%;padding:10px;background:rgba(251,191,36,.15);border-color:var(--am);color:var(--am)">🧹 Lancer le nettoyage</button>
|
|
</div>
|
|
<div>
|
|
<h3 style="font-size:12px;margin-bottom:10px">📊 Résumé santé</h3>
|
|
<table><thead><tr><th>Métrique</th><th>Valeur</th><th>Seuil</th><th>Status</th></tr></thead><tbody>
|
|
<tr><td>Taux bounce global</td><td>3.2%</td><td><5%</td><td><span class="badge badge-gn">OK</span></td></tr>
|
|
<tr><td>Doublons</td><td>0.4%</td><td><1%</td><td><span class="badge badge-gn">OK</span></td></tr>
|
|
<tr><td>Emails invalides</td><td>0.8%</td><td><2%</td><td><span class="badge badge-gn">OK</span></td></tr>
|
|
<tr><td>Blacklistés</td><td>12,400</td><td>—</td><td><span class="badge badge-bl">INFO</span></td></tr>
|
|
<tr><td>Liste Yahoo bounce</td><td style="color:var(--rd)">8.4%</td><td><5%</td><td><span class="badge badge-rd">ALERT</span></td></tr>
|
|
</tbody></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel" id="tab-export">
|
|
<h3 style="font-size:12px;margin-bottom:10px">📤 Export</h3>
|
|
<div class="grid2">
|
|
<div>
|
|
<div class="form-row"><label>Liste</label><select><option>Hotmail US — Clean Winx (4.1M)</option><option>Gmail DE (1.2M)</option><option>Toutes</option></select></div>
|
|
<div class="form-row"><label>Format</label><select><option>CSV</option><option>TXT (un par ligne)</option><option>JSON</option><option>Excel</option></select></div>
|
|
<div class="form-row"><label>Colonnes</label><select multiple style="min-height:60px"><option selected>email</option><option selected>isp</option><option>country</option><option>source</option><option>created_at</option></select></div>
|
|
<button class="btn btn-bl" style="width:100%;padding:10px">📤 Exporter</button>
|
|
</div>
|
|
<div style="background:var(--bg);border:1px solid var(--b);border-radius:8px;padding:20px;text-align:center">
|
|
<div style="font-size:40px;margin-bottom:10px">📦</div>
|
|
<div style="font-size:12px;font-weight:600">Prêt à exporter</div>
|
|
<div style="font-size:10px;color:var(--d);margin-top:4px">Sélectionnez une liste et lancez l'export</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel" id="tab-db">
|
|
<h3 style="font-size:12px;margin-bottom:10px">🗄️ Tables PostgreSQL</h3>
|
|
<div class="grid3">
|
|
<div class="db-card"><strong>contacts</strong><div style="font-size:9px;color:var(--d);margin-top:4px">847,000 rows • 2.4 GB</div><div style="font-size:9px;margin-top:4px">email, isp, country, source, created_at, status</div></div>
|
|
<div class="db-card"><strong>lists</strong><div style="font-size:9px;color:var(--d);margin-top:4px">24 rows • 12 KB</div><div style="font-size:9px;margin-top:4px">id, name, count, isp_dominant, bounce_rate</div></div>
|
|
<div class="db-card"><strong>blacklist</strong><div style="font-size:9px;color:var(--d);margin-top:4px">12,400 rows • 1.2 MB</div><div style="font-size:9px;margin-top:4px">email, reason, added_at, source</div></div>
|
|
<div class="db-card"><strong>send_log</strong><div style="font-size:9px;color:var(--d);margin-top:4px">1.2M rows • 8.4 GB</div><div style="font-size:9px;margin-top:4px">id, email, isp, method, status, tracked_at</div></div>
|
|
<div class="db-card"><strong>bounces</strong><div style="font-size:9px;color:var(--d);margin-top:4px">28,400 rows • 3.1 MB</div><div style="font-size:9px;margin-top:4px">email, type, code, message, timestamp</div></div>
|
|
<div class="db-card"><strong>segments</strong><div style="font-size:9px;color:var(--d);margin-top:4px">12 rows • 4 KB</div><div style="font-size:9px;margin-top:4px">id, name, rules, contact_count</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>
|
|
|