442 lines
22 KiB
PHP
Executable File
442 lines
22 KiB
PHP
Executable File
<?php
|
|
/**
|
|
* N8N ROADMAP - Plan d'Intégration avec WEVAL MIND
|
|
* Automatisation Complète Email Marketing
|
|
*/
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>n8n Roadmap - WEVAL</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%); min-height: 100vh; color: #e2e8f0; }
|
|
.container { max-width: 1400px; margin: 0 auto; padding: 20px; }
|
|
|
|
.header { text-align: center; padding: 40px; background: linear-gradient(135deg, rgba(234,88,12,0.1), rgba(139,92,246,0.1)); border-radius: 20px; margin-bottom: 40px; border: 1px solid rgba(234,88,12,0.3); }
|
|
.header h1 { font-size: 36px; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; gap: 20px; }
|
|
.header h1 .n8n-logo { color: #ea580c; font-size: 50px; }
|
|
.header h1 .plus { color: #64748b; }
|
|
.header h1 .hamid { color: #8b5cf6; }
|
|
.header p { color: #94a3b8; font-size: 16px; }
|
|
|
|
.phase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-bottom: 40px; }
|
|
|
|
.phase-card { background: rgba(255,255,255,0.03); border-radius: 20px; padding: 30px; border: 1px solid rgba(255,255,255,0.08); position: relative; overflow: hidden; }
|
|
.phase-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; }
|
|
.phase-card.phase1::before { background: linear-gradient(90deg, #22d3ee, #3b82f6); }
|
|
.phase-card.phase2::before { background: linear-gradient(90deg, #f97316, #ef4444); }
|
|
.phase-card.phase3::before { background: linear-gradient(90deg, #8b5cf6, #ec4899); }
|
|
.phase-card.phase4::before { background: linear-gradient(90deg, #34d399, #10b981); }
|
|
|
|
.phase-header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; }
|
|
.phase-num { width: 50px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: white; }
|
|
.phase1 .phase-num { background: linear-gradient(135deg, #22d3ee, #3b82f6); }
|
|
.phase2 .phase-num { background: linear-gradient(135deg, #f97316, #ef4444); }
|
|
.phase3 .phase-num { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
|
|
.phase4 .phase-num { background: linear-gradient(135deg, #34d399, #10b981); }
|
|
.phase-title h3 { font-size: 18px; margin-bottom: 5px; }
|
|
.phase-title span { font-size: 12px; color: #64748b; }
|
|
|
|
.task-list { display: flex; flex-direction: column; gap: 12px; }
|
|
.task { padding: 15px; background: rgba(0,0,0,0.3); border-radius: 12px; display: flex; align-items: flex-start; gap: 12px; }
|
|
.task-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
|
|
.task-icon.n8n { background: rgba(234,88,12,0.2); color: #ea580c; }
|
|
.task-icon.hamid { background: rgba(139,92,246,0.2); color: #8b5cf6; }
|
|
.task-icon.wevads { background: rgba(34,211,238,0.2); color: #22d3ee; }
|
|
.task-icon.api { background: rgba(52,211,153,0.2); color: #34d399; }
|
|
.task-content h4 { font-size: 13px; margin-bottom: 5px; }
|
|
.task-content p { font-size: 11px; color: #64748b; }
|
|
|
|
.workflow-diagram { background: rgba(0,0,0,0.4); border-radius: 20px; padding: 40px; margin-bottom: 40px; }
|
|
.workflow-diagram h3 { text-align: center; margin-bottom: 30px; color: #ea580c; }
|
|
|
|
.workflow-steps { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
|
|
.wf-step { text-align: center; flex: 1; min-width: 150px; }
|
|
.wf-step .icon { width: 70px; height: 70px; margin: 0 auto 15px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
|
|
.wf-step .icon.trigger { background: linear-gradient(135deg, #22d3ee, #3b82f6); }
|
|
.wf-step .icon.process { background: linear-gradient(135deg, #f97316, #ea580c); }
|
|
.wf-step .icon.ai { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
|
|
.wf-step .icon.action { background: linear-gradient(135deg, #34d399, #10b981); }
|
|
.wf-step .icon.monitor { background: linear-gradient(135deg, #ec4899, #f43f5e); }
|
|
.wf-step h4 { font-size: 13px; margin-bottom: 5px; }
|
|
.wf-step p { font-size: 10px; color: #64748b; }
|
|
.wf-arrow { color: #ea580c; font-size: 24px; }
|
|
|
|
.api-keys { background: rgba(234,88,12,0.1); border: 1px solid rgba(234,88,12,0.3); border-radius: 20px; padding: 30px; margin-bottom: 40px; }
|
|
.api-keys h3 { color: #ea580c; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
|
|
.key-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
|
|
.key-item { padding: 20px; background: rgba(0,0,0,0.3); border-radius: 12px; }
|
|
.key-item h4 { font-size: 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
|
|
.key-item .key-field { background: rgba(0,0,0,0.4); padding: 10px 15px; border-radius: 8px; font-family: monospace; font-size: 11px; color: #94a3b8; word-break: break-all; }
|
|
.key-item .status { margin-top: 10px; font-size: 11px; }
|
|
.key-item .status.configured { color: #34d399; }
|
|
.key-item .status.pending { color: #fbbf24; }
|
|
|
|
.code-block { background: #1e1e1e; border-radius: 12px; padding: 20px; margin-top: 20px; overflow-x: auto; }
|
|
.code-block pre { font-family: 'Fira Code', monospace; font-size: 12px; color: #d4d4d4; }
|
|
.code-block .comment { color: #6a9955; }
|
|
.code-block .keyword { color: #569cd6; }
|
|
.code-block .string { color: #ce9178; }
|
|
.code-block .function { color: #dcdcaa; }
|
|
|
|
.timeline { margin-top: 40px; }
|
|
.timeline h3 { text-align: center; margin-bottom: 30px; }
|
|
.timeline-items { display: flex; justify-content: space-between; position: relative; }
|
|
.timeline-items::before { content: ''; position: absolute; top: 25px; left: 10%; right: 10%; height: 4px; background: rgba(234,88,12,0.3); }
|
|
.tl-item { text-align: center; flex: 1; position: relative; z-index: 1; }
|
|
.tl-item .dot { width: 50px; height: 50px; margin: 0 auto 15px; border-radius: 50%; background: rgba(234,88,12,0.2); border: 3px solid #ea580c; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #ea580c; }
|
|
.tl-item.done .dot { background: #ea580c; color: white; }
|
|
.tl-item h4 { font-size: 12px; margin-bottom: 5px; }
|
|
.tl-item p { font-size: 10px; color: #64748b; }
|
|
|
|
.btn { padding: 15px 30px; border: none; border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 14px; transition: all 0.3s; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
|
|
.btn-n8n { background: linear-gradient(135deg, #ea580c, #f97316); color: white; }
|
|
.btn-n8n:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(234,88,12,0.4); }
|
|
|
|
.cta { text-align: center; margin-top: 40px; }
|
|
|
|
@media (max-width: 1000px) { .phase-grid, .key-grid { grid-template-columns: 1fr; } .workflow-steps { flex-direction: column; } .wf-arrow { transform: rotate(90deg); } }
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>
|
|
<span class="n8n-logo"><i class="fas fa-project-diagram"></i></span>
|
|
<span class="plus">+</span>
|
|
<span class="hamid"><i class="fas fa-robot"></i> WEVAL MIND</span>
|
|
</h1>
|
|
<p>Plan d'Intégration n8n - Automatisation Complète Email Marketing</p>
|
|
</div>
|
|
|
|
<!-- Workflow Diagram -->
|
|
<div class="workflow-diagram">
|
|
<h3><i class="fas fa-sitemap"></i> Architecture n8n + WEVAL MIND</h3>
|
|
<div class="workflow-steps">
|
|
<div class="wf-step">
|
|
<div class="icon trigger"><i class="fas fa-bolt"></i></div>
|
|
<h4>Trigger</h4>
|
|
<p>Webhook, Schedule, Event</p>
|
|
</div>
|
|
<span class="wf-arrow">→</span>
|
|
<div class="wf-step">
|
|
<div class="icon process"><i class="fab fa-node-js"></i></div>
|
|
<h4>n8n Process</h4>
|
|
<p>Data transform, Logic</p>
|
|
</div>
|
|
<span class="wf-arrow">→</span>
|
|
<div class="wf-step">
|
|
<div class="icon ai"><i class="fas fa-brain"></i></div>
|
|
<h4>WEVAL MIND</h4>
|
|
<p>Analyse, Décision</p>
|
|
</div>
|
|
<span class="wf-arrow">→</span>
|
|
<div class="wf-step">
|
|
<div class="icon action"><i class="fas fa-paper-plane"></i></div>
|
|
<h4>Action</h4>
|
|
<p>WEVAL API, Email</p>
|
|
</div>
|
|
<span class="wf-arrow">→</span>
|
|
<div class="wf-step">
|
|
<div class="icon monitor"><i class="fas fa-chart-line"></i></div>
|
|
<h4>Monitor</h4>
|
|
<p>Stats, Alerts</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phases -->
|
|
<div class="phase-grid">
|
|
<!-- Phase 1 -->
|
|
<div class="phase-card phase1">
|
|
<div class="phase-header">
|
|
<div class="phase-num">1</div>
|
|
<div class="phase-title">
|
|
<h3>Infrastructure & Setup</h3>
|
|
<span>Semaine 1-2</span>
|
|
</div>
|
|
</div>
|
|
<div class="task-list">
|
|
<div class="task">
|
|
<div class="task-icon n8n"><i class="fas fa-download"></i></div>
|
|
<div class="task-content">
|
|
<h4>Installation n8n Docker</h4>
|
|
<p>docker-compose up -d sur serveur WEVAL</p>
|
|
</div>
|
|
</div>
|
|
<div class="task">
|
|
<div class="task-icon api"><i class="fas fa-key"></i></div>
|
|
<div class="task-content">
|
|
<h4>Configuration API Keys</h4>
|
|
<p>Claude, Groq, DeepSeek, Ollama pour WEVAL MIND</p>
|
|
</div>
|
|
</div>
|
|
<div class="task">
|
|
<div class="task-icon wevads"><i class="fas fa-plug"></i></div>
|
|
<div class="task-content">
|
|
<h4>WEVAL API Endpoints</h4>
|
|
<p>Créer endpoints REST pour n8n</p>
|
|
</div>
|
|
</div>
|
|
<div class="task">
|
|
<div class="task-icon hamid"><i class="fas fa-brain"></i></div>
|
|
<div class="task-content">
|
|
<h4>WEVAL MIND Webhook Receiver</h4>
|
|
<p>Endpoint pour recevoir requêtes n8n</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phase 2 -->
|
|
<div class="phase-card phase2">
|
|
<div class="phase-header">
|
|
<div class="phase-num">2</div>
|
|
<div class="phase-title">
|
|
<h3>Workflows Basiques</h3>
|
|
<span>Semaine 3-4</span>
|
|
</div>
|
|
</div>
|
|
<div class="task-list">
|
|
<div class="task">
|
|
<div class="task-icon n8n"><i class="fas fa-shield-alt"></i></div>
|
|
<div class="task-content">
|
|
<h4>Blacklist Auto-Check</h4>
|
|
<p>Vérification quotidienne IPs → Alerte si listé</p>
|
|
</div>
|
|
</div>
|
|
<div class="task">
|
|
<div class="task-icon n8n"><i class="fas fa-fire"></i></div>
|
|
<div class="task-content">
|
|
<h4>Warmup Scheduler</h4>
|
|
<p>Envoi progressif automatisé selon planning</p>
|
|
</div>
|
|
</div>
|
|
<div class="task">
|
|
<div class="task-icon hamid"><i class="fas fa-file-alt"></i></div>
|
|
<div class="task-content">
|
|
<h4>Template Generator</h4>
|
|
<p>WEVAL MIND génère templates par ISP</p>
|
|
</div>
|
|
</div>
|
|
<div class="task">
|
|
<div class="task-icon wevads"><i class="fas fa-chart-bar"></i></div>
|
|
<div class="task-content">
|
|
<h4>Stats Collector</h4>
|
|
<p>Agrégation stats opens/clicks/bounces</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phase 3 -->
|
|
<div class="phase-card phase3">
|
|
<div class="phase-header">
|
|
<div class="phase-num">3</div>
|
|
<div class="phase-title">
|
|
<h3>Intelligence Avancée</h3>
|
|
<span>Semaine 5-6</span>
|
|
</div>
|
|
</div>
|
|
<div class="task-list">
|
|
<div class="task">
|
|
<div class="task-icon hamid"><i class="fas fa-magic"></i></div>
|
|
<div class="task-content">
|
|
<h4>Auto-Optimization</h4>
|
|
<p>WEVAL MIND analyse et optimise en temps réel</p>
|
|
</div>
|
|
</div>
|
|
<div class="task">
|
|
<div class="task-icon n8n"><i class="fas fa-code-branch"></i></div>
|
|
<div class="task-content">
|
|
<h4>Decision Trees</h4>
|
|
<p>Logique conditionnelle basée sur metrics</p>
|
|
</div>
|
|
</div>
|
|
<div class="task">
|
|
<div class="task-icon api"><i class="fas fa-sync"></i></div>
|
|
<div class="task-content">
|
|
<h4>Office 365 Automation</h4>
|
|
<p>Workflow 8 étapes automatisé via Graph API</p>
|
|
</div>
|
|
</div>
|
|
<div class="task">
|
|
<div class="task-icon api"><i class="fas fa-cloud"></i></div>
|
|
<div class="task-content">
|
|
<h4>GSuite Integration</h4>
|
|
<p>Gmail API + SMTP Relay automatisé</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phase 4 -->
|
|
<div class="phase-card phase4">
|
|
<div class="phase-header">
|
|
<div class="phase-num">4</div>
|
|
<div class="phase-title">
|
|
<h3>Production & Scale</h3>
|
|
<span>Semaine 7-8</span>
|
|
</div>
|
|
</div>
|
|
<div class="task-list">
|
|
<div class="task">
|
|
<div class="task-icon n8n"><i class="fas fa-server"></i></div>
|
|
<div class="task-content">
|
|
<h4>Multi-Server Orchestration</h4>
|
|
<p>Gestion 100+ serveurs PMTA</p>
|
|
</div>
|
|
</div>
|
|
<div class="task">
|
|
<div class="task-icon hamid"><i class="fas fa-bell"></i></div>
|
|
<div class="task-content">
|
|
<h4>Smart Alerting</h4>
|
|
<p>WEVAL MIND détecte anomalies et alerte</p>
|
|
</div>
|
|
</div>
|
|
<div class="task">
|
|
<div class="task-icon wevads"><i class="fas fa-robot"></i></div>
|
|
<div class="task-content">
|
|
<h4>Full Autonomous Mode</h4>
|
|
<p>Campagnes 100% automatisées</p>
|
|
</div>
|
|
</div>
|
|
<div class="task">
|
|
<div class="task-icon api"><i class="fas fa-tachometer-alt"></i></div>
|
|
<div class="task-content">
|
|
<h4>Performance Dashboard</h4>
|
|
<p>Métriques temps réel n8n + WEVAL MIND</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API Keys Section -->
|
|
<div class="api-keys">
|
|
<h3><i class="fas fa-key"></i> Clés API Requises</h3>
|
|
<div class="key-grid">
|
|
<div class="key-item">
|
|
<h4><i class="fas fa-project-diagram" style="color:#ea580c"></i> n8n</h4>
|
|
<div class="key-field">N8N_BASIC_AUTH_USER=admin<br>N8N_BASIC_AUTH_PASSWORD=******</div>
|
|
<div class="status pending"><i class="fas fa-clock"></i> À configurer</div>
|
|
</div>
|
|
<div class="key-item">
|
|
<h4><i class="fas fa-brain" style="color:#8b5cf6"></i> Claude API (WEVAL MIND)</h4>
|
|
<div class="key-field">ANTHROPIC_API_KEY=sk-ant-api03-******</div>
|
|
<div class="status configured"><i class="fas fa-check"></i> Configuré</div>
|
|
</div>
|
|
<div class="key-item">
|
|
<h4><i class="fas fa-bolt" style="color:#f97316"></i> Groq API</h4>
|
|
<div class="key-field">GROQ_API_KEY=gsk_******</div>
|
|
<div class="status configured"><i class="fas fa-check"></i> Configuré</div>
|
|
</div>
|
|
<div class="key-item">
|
|
<h4><i class="fab fa-microsoft" style="color:#00a4ef"></i> Microsoft Graph</h4>
|
|
<div class="key-field">TENANT_ID, CLIENT_ID, CLIENT_SECRET</div>
|
|
<div class="status pending"><i class="fas fa-clock"></i> Par tenant</div>
|
|
</div>
|
|
<div class="key-item">
|
|
<h4><i class="fab fa-google" style="color:#4285f4"></i> Google APIs</h4>
|
|
<div class="key-field">GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET</div>
|
|
<div class="status pending"><i class="fas fa-clock"></i> À configurer</div>
|
|
</div>
|
|
<div class="key-item">
|
|
<h4><i class="fas fa-cloud" style="color:#f97316"></i> Cloudflare</h4>
|
|
<div class="key-field">CF_API_TOKEN=******</div>
|
|
<div class="status configured"><i class="fas fa-check"></i> Configuré</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Code Example -->
|
|
<div class="phase-card" style="grid-column: span 2;">
|
|
<h3><i class="fas fa-code"></i> Exemple: Workflow n8n → WEVAL MIND</h3>
|
|
<div class="code-block">
|
|
<pre><span class="comment">// n8n HTTP Request Node → WEVAL MIND API</span>
|
|
{
|
|
<span class="string">"url"</span>: <span class="string">"http://89.167.40.150:5821/hamid-api.php"</span>,
|
|
<span class="string">"method"</span>: <span class="string">"POST"</span>,
|
|
<span class="string">"headers"</span>: {
|
|
<span class="string">"Content-Type"</span>: <span class="string">"application/json"</span>
|
|
},
|
|
<span class="string">"body"</span>: {
|
|
<span class="string">"action"</span>: <span class="string">"analyze"</span>,
|
|
<span class="string">"type"</span>: <span class="string">"deliverability"</span>,
|
|
<span class="string">"data"</span>: {
|
|
<span class="string">"ip"</span>: <span class="string">"{{ $node['Trigger'].json.ip }}"</span>,
|
|
<span class="string">"domain"</span>: <span class="string">"{{ $node['Trigger'].json.domain }}"</span>,
|
|
<span class="string">"target_isp"</span>: <span class="string">"gmail"</span>
|
|
}
|
|
}
|
|
}
|
|
|
|
<span class="comment">// Réponse WEVAL MIND</span>
|
|
{
|
|
<span class="string">"status"</span>: <span class="string">"success"</span>,
|
|
<span class="string">"ip_score"</span>: <span class="keyword">95</span>,
|
|
<span class="string">"blacklists"</span>: [],
|
|
<span class="string">"recommendation"</span>: <span class="string">"IP propre, prête pour warmup Gmail"</span>,
|
|
<span class="string">"suggested_template"</span>: {
|
|
<span class="string">"headers"</span>: <span class="string">"List-Unsubscribe: ..."</span>,
|
|
<span class="string">"body_tips"</span>: <span class="string">"Engagement 24h crucial..."</span>
|
|
}
|
|
}</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Timeline -->
|
|
<div class="timeline">
|
|
<h3><i class="fas fa-calendar-alt"></i> Timeline d'Implémentation</h3>
|
|
<div class="timeline-items">
|
|
<div class="tl-item done">
|
|
<div class="dot">✓</div>
|
|
<h4>WEVAL MIND</h4>
|
|
<p>Intégré</p>
|
|
</div>
|
|
<div class="tl-item done">
|
|
<div class="dot">✓</div>
|
|
<h4>Deliverability Hub</h4>
|
|
<p>Actif</p>
|
|
</div>
|
|
<div class="tl-item">
|
|
<div class="dot">1</div>
|
|
<h4>n8n Install</h4>
|
|
<p>Semaine 1</p>
|
|
</div>
|
|
<div class="tl-item">
|
|
<div class="dot">2</div>
|
|
<h4>Workflows</h4>
|
|
<p>Semaine 2-4</p>
|
|
</div>
|
|
<div class="tl-item">
|
|
<div class="dot">3</div>
|
|
<h4>AI Integration</h4>
|
|
<p>Semaine 5-6</p>
|
|
</div>
|
|
<div class="tl-item">
|
|
<div class="dot">4</div>
|
|
<h4>Production</h4>
|
|
<p>Semaine 7-8</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA -->
|
|
<div class="cta">
|
|
<a href="hamid-dashboard.php" class="btn btn-n8n">
|
|
<i class="fas fa-rocket"></i> Commencer avec WEVAL MIND
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<?php include("includes/chatbot-widget.php"); ?>
|
|
|
|
</body>
|
|
</html>
|