377 lines
23 KiB
HTML
Executable File
377 lines
23 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>H3R7Tech - Boîte à Idées</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
:root {
|
|
--bg: #0d1117;
|
|
--card: #161b22;
|
|
--border: #30363d;
|
|
--text: #c9d1d9;
|
|
--accent: #58a6ff;
|
|
--green: #3fb950;
|
|
--red: #f85149;
|
|
--yellow: #d29922;
|
|
--purple: #a371f7;
|
|
--orange: #f0883e;
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
|
|
.container { max-width: 1400px; margin: 0 auto; padding: 20px; }
|
|
|
|
/* Header */
|
|
header { background: linear-gradient(135deg, #1a1a2e, #16213e); padding: 30px 20px; text-align: center; border-bottom: 3px solid var(--accent); margin-bottom: 20px; }
|
|
header h1 { font-size: 32px; background: linear-gradient(90deg, var(--accent), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
header p { color: #8b949e; margin-top: 10px; }
|
|
|
|
/* Stats */
|
|
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 30px; }
|
|
.stat-card { background: var(--card); padding: 20px; border-radius: 12px; border: 1px solid var(--border); text-align: center; transition: transform 0.2s; }
|
|
.stat-card:hover { transform: translateY(-3px); }
|
|
.stat-card .icon { font-size: 28px; margin-bottom: 10px; }
|
|
.stat-card .value { font-size: 36px; font-weight: bold; }
|
|
.stat-card .label { font-size: 14px; color: #8b949e; }
|
|
.stat-card.total { border-color: var(--accent); }
|
|
.stat-card.bloque { border-color: var(--red); }
|
|
.stat-card.en-cours { border-color: var(--yellow); }
|
|
.stat-card.completed { border-color: var(--green); }
|
|
.stat-card.idea { border-color: var(--purple); }
|
|
|
|
/* Filters */
|
|
.filters { background: var(--card); padding: 20px; border-radius: 12px; margin-bottom: 20px; border: 1px solid var(--border); }
|
|
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 15px; }
|
|
.filter-row:last-child { margin-bottom: 0; }
|
|
.filter-btn { padding: 8px 16px; border: 1px solid var(--border); border-radius: 20px; background: transparent; color: var(--text); cursor: pointer; transition: all 0.2s; font-size: 14px; }
|
|
.filter-btn:hover, .filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
|
|
.filter-btn.bloque { border-color: var(--red); color: var(--red); }
|
|
.filter-btn.bloque.active { background: var(--red); color: #fff; }
|
|
.filter-btn.en-cours { border-color: var(--yellow); color: var(--yellow); }
|
|
.filter-btn.en-cours.active { background: var(--yellow); color: #000; }
|
|
.filter-btn.completed { border-color: var(--green); color: var(--green); }
|
|
.filter-btn.completed.active { background: var(--green); color: #fff; }
|
|
.filter-btn.idea { border-color: var(--purple); color: var(--purple); }
|
|
.filter-btn.idea.active { background: var(--purple); color: #fff; }
|
|
.search-input { flex: 1; min-width: 200px; padding: 10px 15px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); }
|
|
.search-input:focus { outline: none; border-color: var(--accent); }
|
|
|
|
/* Cards */
|
|
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; }
|
|
.project-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; transition: all 0.3s; }
|
|
.project-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
|
|
.project-card.hidden { display: none; }
|
|
|
|
.project-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; }
|
|
.project-title { font-size: 18px; font-weight: 600; color: #fff; }
|
|
.project-badges { display: flex; gap: 5px; flex-wrap: wrap; }
|
|
|
|
.badge { padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
|
|
.badge.bloque { background: rgba(248,81,73,0.2); color: var(--red); }
|
|
.badge.en-cours { background: rgba(210,153,34,0.2); color: var(--yellow); }
|
|
.badge.completed { background: rgba(63,185,80,0.2); color: var(--green); }
|
|
.badge.idea { background: rgba(163,113,247,0.2); color: var(--purple); }
|
|
.badge.planifie { background: rgba(88,166,255,0.2); color: var(--accent); }
|
|
.badge.urgent { background: rgba(248,81,73,0.3); color: var(--red); }
|
|
.badge.important { background: rgba(240,136,62,0.3); color: var(--orange); }
|
|
.badge.normal { background: rgba(139,148,158,0.2); color: #8b949e; }
|
|
|
|
.project-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; font-size: 13px; }
|
|
.meta-item { display: flex; align-items: center; gap: 8px; }
|
|
.meta-item i { color: var(--accent); width: 16px; }
|
|
.meta-label { color: #8b949e; }
|
|
|
|
.progress-container { margin-bottom: 15px; }
|
|
.progress-header { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 12px; }
|
|
.progress-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
|
|
.progress-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }
|
|
.progress-fill.bloque { background: var(--red); }
|
|
.progress-fill.en-cours { background: var(--yellow); }
|
|
.progress-fill.completed { background: var(--green); }
|
|
.progress-fill.idea { background: var(--purple); }
|
|
.progress-fill.planifie { background: var(--accent); }
|
|
|
|
.project-actions { border-top: 1px solid var(--border); padding-top: 15px; margin-top: 10px; }
|
|
.action-row { display: flex; justify-content: space-between; font-size: 13px; }
|
|
.action-label { color: #8b949e; }
|
|
.action-value { color: var(--text); }
|
|
|
|
/* Timeline */
|
|
.timeline { margin-top: 40px; }
|
|
.timeline h2 { color: #fff; margin-bottom: 20px; font-size: 24px; }
|
|
.timeline-items { display: flex; flex-direction: column; gap: 15px; }
|
|
.timeline-item { display: flex; align-items: center; gap: 15px; padding: 15px; background: var(--card); border-radius: 10px; border-left: 3px solid var(--accent); }
|
|
.timeline-date { font-size: 12px; color: #8b949e; min-width: 80px; }
|
|
.timeline-content { flex: 1; }
|
|
.timeline-priority { padding: 3px 8px; border-radius: 4px; font-size: 11px; }
|
|
|
|
/* Footer */
|
|
footer { text-align: center; padding: 30px; color: #8b949e; border-top: 1px solid var(--border); margin-top: 40px; }
|
|
|
|
@media (max-width: 768px) {
|
|
.projects-grid { grid-template-columns: 1fr; }
|
|
.stats { grid-template-columns: repeat(2, 1fr); }
|
|
.filter-row { flex-direction: column; }
|
|
.search-input { width: 100%; }
|
|
}
|
|
|
|
.home-btn{position:fixed;top:10px;left:10px;z-index:9999;background:linear-gradient(135deg,#00d9ff,#7b2cbf);color:#fff;border:none;border-radius:8px;padding:10px 15px;font-size:14px;cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:8px;box-shadow:0 2px 10px rgba(0,217,255,0.3);transition:all 0.3s;font-family:-apple-system,BlinkMacSystemFont,sans-serif}.home-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,217,255,0.5)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="https://portal-kolifee.duckdns.org/" class="home-btn" title="Retour au portail"><span style="font-size:18px">🏠</span><span>Accueil</span></a>
|
|
<header>
|
|
<div class="container">
|
|
<h1><i class="fas fa-lightbulb"></i> H3R7Tech - Boîte à Idées</h1>
|
|
<p>Tableau de bord global - Suivi de tous les projets</p>
|
|
<p style="margin-top:10px; font-size:14px;">Dernière mise à jour: <span id="lastUpdate"></span></p>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<!-- KPI Cards -->
|
|
<div class="stats">
|
|
<div class="stat-card total">
|
|
<div class="icon"><i class="fas fa-layer-group"></i></div>
|
|
<div class="value" id="totalCount">0</div>
|
|
<div class="label">Total Projets</div>
|
|
</div>
|
|
<div class="stat-card bloque">
|
|
<div class="icon" style="color:var(--red)"><i class="fas fa-ban"></i></div>
|
|
<div class="value" id="bloqueCount">0</div>
|
|
<div class="label">Bloqués</div>
|
|
</div>
|
|
<div class="stat-card en-cours">
|
|
<div class="icon" style="color:var(--yellow)"><i class="fas fa-spinner"></i></div>
|
|
<div class="value" id="encoursCount">0</div>
|
|
<div class="label">En Cours</div>
|
|
</div>
|
|
<div class="stat-card completed">
|
|
<div class="icon" style="color:var(--green)"><i class="fas fa-check-circle"></i></div>
|
|
<div class="value" id="completedCount">0</div>
|
|
<div class="label">Complétés</div>
|
|
</div>
|
|
<div class="stat-card idea">
|
|
<div class="icon" style="color:var(--purple)"><i class="fas fa-rocket"></i></div>
|
|
<div class="value" id="ideaCount">0</div>
|
|
<div class="label">Idées/À Planifier</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="filters">
|
|
<div class="filter-row">
|
|
<button class="filter-btn active" data-filter="all">Tous</button>
|
|
<button class="filter-btn bloque" data-filter="bloque">🔴 Bloqués</button>
|
|
<button class="filter-btn en-cours" data-filter="en-cours">🟡 En Cours</button>
|
|
<button class="filter-btn planifie" data-filter="planifie">🔵 À Planifier</button>
|
|
<button class="filter-btn completed" data-filter="completed">🟢 Complétés</button>
|
|
<button class="filter-btn idea" data-filter="idea">💡 Idées</button>
|
|
</div>
|
|
<div class="filter-row">
|
|
<input type="text" class="search-input" id="searchInput" placeholder="🔍 Rechercher un projet...">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Projects Grid -->
|
|
<div class="projects-grid" id="projectsGrid">
|
|
<!-- Projects will be inserted here by JavaScript -->
|
|
</div>
|
|
|
|
<!-- Timeline -->
|
|
<div class="timeline">
|
|
<h2><i class="fas fa-calendar-alt"></i> Prochaines Actions</h2>
|
|
<div class="timeline-items" id="timelineItems">
|
|
<!-- Timeline items will be inserted here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p><i class="fas fa-copyright"></i> H3R7Tech - Generated by Claw</p>
|
|
<p id="footerDate"></p>
|
|
</footer>
|
|
|
|
<script>
|
|
// Project Data
|
|
const projects = [
|
|
// TURF
|
|
{ id: 1, name: "Turf Dashboard", category: "completed", progress: 100, priority: "normal", responsable: "Claw", lastAction: "Dashboard opérationnel", nextAction: "Maintenance", deadline: "" },
|
|
{ id: 2, name: "Turf Predictions", category: "bloque", progress: 60, priority: "important", responsable: "VPS", lastAction: "Sites PMU bloquent le scraping", nextAction: "Trouver solution alternative", deadline: "" },
|
|
{ id: 3, name: "Turf Cron Jobs", category: "en-cours", progress: 90, priority: "important", responsable: "Claw", lastAction: "Token Telegram mis à jour", nextAction: "Test final", deadline: "" },
|
|
|
|
// POD
|
|
{ id: 4, name: "POD Manager", category: "completed", progress: 100, priority: "normal", responsable: "Claw", lastAction: "Interface HTML créée", nextAction: "Ajout features", deadline: "" },
|
|
{ id: 5, name: "POD Niches Guide", category: "completed", progress: 100, priority: "normal", responsable: "Claw", lastAction: "Page niches_business.html", nextAction: "Ajouter designs", deadline: "" },
|
|
{ id: 6, name: "PrintMind Agent", category: "completed", progress: 100, priority: "normal", responsable: "Claw", lastAction: "Skill créé et testé", nextAction: "Utiliser pour générer designs", deadline: "" },
|
|
{ id: 7, name: "Upload Designs POD", category: "idea", progress: 0, priority: "important", responsable: "h3r7", lastAction: "Design Python ajouté", nextAction: "Uploader sur Redbubble/TeeSpring", deadline: "" },
|
|
|
|
// CRM & SCRAPING
|
|
{ id: 8, name: "CRM System", category: "completed", progress: 100, priority: "normal", responsable: "Claw", lastAction: "CRM opérationnel port 8770", nextAction: "Ajout prospects", deadline: "" },
|
|
{ id: 9, name: "Scraper Prospects", category: "bloque", progress: 50, priority: "important", responsable: "VPS", lastAction: "Sites bloquent scraping direct", nextAction: "Utiliser Apify ou autre solution", deadline: "" },
|
|
{ id: 10, name: "Agent Scraper", category: "en-cours", progress: 70, priority: "normal", responsable: "Claw", lastAction: "Token corrigé", nextAction: "Tests", deadline: "" },
|
|
|
|
// BUSINESS
|
|
{ id: 11, name: "Agent Sales", category: "en-cours", progress: 70, priority: "normal", responsable: "Claw", lastAction: "Token corrigé", nextAction: "Tests", deadline: "" },
|
|
{ id: 12, name: "Agent Mailing", category: "en-cours", progress: 70, priority: "normal", responsable: "Claw", lastAction: "Token corrigé", nextAction: "Configurer Brevo/SendinBlue", deadline: "" },
|
|
{ id: 13, name: "Dépenses Trello App", category: "completed", progress: 100, priority: "normal", responsable: "Claw", lastAction: "v1.7 opérationnelle", nextAction: "Vente/Location", deadline: "" },
|
|
|
|
// INFRA
|
|
{ id: 14, name: "VPS Setup", category: "completed", progress: 100, priority: "normal", responsable: "Claw", lastAction: "Services configurés", nextAction: "Monitoring", deadline: "" },
|
|
{ id: 15, name: "Backup System", category: "completed", progress: 100, priority: "important", responsable: "Claw", lastAction: "Cron backup quotidien 3h00", nextAction: "Vérification hebdo", deadline: "" },
|
|
{ id: 16, name: "Gitea Repos", category: "completed", progress: 100, priority: "normal", responsable: "Claw", lastAction: "h3r7tech + perso configurés", nextAction: "Documentation", deadline: "" },
|
|
|
|
// DOCS & REGISTRES
|
|
{ id: 17, name: "NEXUS Registry", category: "completed", progress: 100, priority: "normal", responsable: "Claw", lastAction: "7 agents actifs documentés", nextAction: "Mise à jour auto", deadline: "" },
|
|
{ id: 18, name: "Documentation", category: "en-cours", progress: 60, priority: "normal", responsable: "Claw", lastAction: "DOCUMENTATION.md créée", nextAction: "Compléter", deadline: "" },
|
|
|
|
// IDÉES
|
|
{ id: 19, name: "Email Automation", category: "idea", progress: 0, priority: "normal", responsable: "À définir", lastAction: "En attente", nextAction: "Configurer Brevo", deadline: "" },
|
|
{ id: 20, name: "Marketing Automation", category: "idea", progress: 0, priority: "normal", responsable: "À définir", lastAction: "En attente", nextAction: "Study", deadline: "" },
|
|
|
|
// INFRA - AUTOMATION
|
|
{ id: 21, name: "Installation n8n", category: "planifie", progress: 40, priority: "important", responsable: "h3r7", lastAction: "Coolify terminé, ports 5678", nextAction: "Fixer webhook POST", deadline: "" },
|
|
{ id: 22, name: "Tests n8n", category: "planifie", progress: 20, priority: "normal", responsable: "Claw", lastAction: "Webhook GET fonctionnel", nextAction: "Tester POST avec Groq", deadline: "" },
|
|
{ id: 23, name: "Config MCP n8n", category: "planifie", progress: 0, priority: "normal", responsable: "h3r7", lastAction: "Token reçu, pas encore utilisé", nextAction: "Installer MCP server OpenClaw", deadline: "" },
|
|
{ id: 24, name: "HTTPS n8n", category: "planifie", progress: 0, priority: "normal", responsable: "h3r7", lastAction: "En attente", nextAction: "Configurer domain DuckDNS", deadline: "" },
|
|
|
|
// DOCS
|
|
{ id: 25, name: "Doc Installation n8n", category: "completed", progress: 100, priority: "normal", responsable: "Claw", lastAction: "INSTALLATION_N8N_2026-03-02.md créé", nextAction: "Publier", deadline: "" }
|
|
];
|
|
|
|
// Render Functions
|
|
function renderProjects() {
|
|
const grid = document.getElementById('projectsGrid');
|
|
grid.innerHTML = projects.map(p => `
|
|
<div class="project-card" data-category="${p.category}" data-priority="${p.priority}" data-name="${p.name.toLowerCase()}">
|
|
<div class="project-header">
|
|
<div class="project-title">${p.name}</div>
|
|
<div class="project-badges">
|
|
<span class="badge ${p.category}">${getCategoryLabel(p.category)}</span>
|
|
<span class="badge ${p.priority}">${getPriorityLabel(p.priority)}</span>
|
|
</div>
|
|
</div>
|
|
<div class="progress-container">
|
|
<div class="progress-header">
|
|
<span>Avancement</span>
|
|
<span>${p.progress}%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill ${p.category}" style="width: ${p.progress}%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="project-meta">
|
|
<div class="meta-item">
|
|
<i class="fas fa-user"></i>
|
|
<span class="meta-label">Responsable:</span> ${p.responsable}
|
|
</div>
|
|
<div class="meta-item">
|
|
<i class="fas fa-calendar"></i>
|
|
<span class="meta-label">Deadline:</span> ${p.deadline || 'À définir'}
|
|
</div>
|
|
</div>
|
|
<div class="project-actions">
|
|
<div class="action-row">
|
|
<span class="action-label">Dernière action:</span>
|
|
<span class="action-value">${p.lastAction}</span>
|
|
</div>
|
|
<div class="action-row">
|
|
<span class="action-label">Prochaine:</span>
|
|
<span class="action-value">${p.nextAction}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function getCategoryLabel(cat) {
|
|
const labels = {
|
|
'bloque': '🔴 Bloqué',
|
|
'en-cours': '🟡 En Cours',
|
|
'planifie': '🔵 À Planifier',
|
|
'completed': '🟢 Complété',
|
|
'idea': '💡 Idée'
|
|
};
|
|
return labels[cat] || cat;
|
|
}
|
|
|
|
function getPriorityLabel(pri) {
|
|
const labels = {
|
|
'urgent': '🔥 Urgent',
|
|
'important': '⭐ Important',
|
|
'normal': '📌 Normal'
|
|
};
|
|
return labels[pri] || pri;
|
|
}
|
|
|
|
function updateStats() {
|
|
const total = projects.length;
|
|
const bloque = projects.filter(p => p.category === 'bloque').length;
|
|
const encours = projects.filter(p => p.category === 'en-cours').length;
|
|
const completed = projects.filter(p => p.category === 'completed').length;
|
|
const idea = projects.filter(p => p.category === 'idea' || p.category === 'planifie').length;
|
|
|
|
document.getElementById('totalCount').textContent = total;
|
|
document.getElementById('bloqueCount').textContent = bloque;
|
|
document.getElementById('encoursCount').textContent = encours;
|
|
document.getElementById('completedCount').textContent = completed;
|
|
document.getElementById('ideaCount').textContent = idea;
|
|
}
|
|
|
|
function renderTimeline() {
|
|
const urgentProjects = projects
|
|
.filter(p => p.category === 'bloque' || p.category === 'en-cours' || p.category === 'planifie')
|
|
.sort((a,b) => b.progress - a.progress)
|
|
.slice(0, 6);
|
|
|
|
document.getElementById('timelineItems').innerHTML = urgentProjects.map(p => `
|
|
<div class="timeline-item">
|
|
<div class="timeline-date">${new Date().toLocaleDateString('fr-FR')}</div>
|
|
<div class="timeline-content">
|
|
<strong>${p.name}</strong><br>
|
|
<span style="color:#8b949e">${p.nextAction}</span>
|
|
</div>
|
|
<span class="timeline-priority badge ${p.priority}">${getPriorityLabel(p.priority)}</span>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// Filter Functions
|
|
document.querySelectorAll('.filter-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
filterProjects();
|
|
});
|
|
});
|
|
|
|
document.getElementById('searchInput').addEventListener('input', filterProjects);
|
|
|
|
function filterProjects() {
|
|
const activeFilter = document.querySelector('.filter-btn.active').dataset.filter;
|
|
const search = document.getElementById('searchInput').value.toLowerCase();
|
|
|
|
document.querySelectorAll('.project-card').forEach(card => {
|
|
const category = card.dataset.category;
|
|
const name = card.dataset.name;
|
|
|
|
let show = true;
|
|
|
|
if (activeFilter !== 'all' && category !== activeFilter) show = false;
|
|
if (search && !name.includes(search)) show = false;
|
|
|
|
card.classList.toggle('hidden', !show);
|
|
});
|
|
}
|
|
|
|
// Init
|
|
document.getElementById('lastUpdate').textContent = new Date().toLocaleString('fr-FR');
|
|
document.getElementById('footerDate').textContent = new Date().toLocaleString('fr-FR');
|
|
renderProjects();
|
|
updateStats();
|
|
renderTimeline();
|
|
</script>
|
|
</body>
|
|
</html>
|