247 lines
11 KiB
HTML
Executable File
247 lines
11 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>💡 Boîte à Idées - PortailClaw</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
|
||
min-height: 100vh;
|
||
color: #eee;
|
||
}
|
||
|
||
header {
|
||
background: linear-gradient(90deg, #7b2cbf, #2ec4b6);
|
||
padding: 25px 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
header h1 { font-size: 36px; margin-bottom: 5px; }
|
||
header p { color: rgba(255,255,255,0.8); }
|
||
|
||
.container { max-width: 1000px; margin: 0 auto; padding: 30px 20px; }
|
||
|
||
.add-form { background: #16213e; padding: 25px; border-radius: 16px; margin-bottom: 30px; }
|
||
.add-form h2 { color: #2ec4b6; margin-bottom: 20px; font-size: 20px; }
|
||
|
||
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 15px; }
|
||
.form-group { display: flex; flex-direction: column; }
|
||
.form-group label { color: #888; font-size: 12px; margin-bottom: 5px; }
|
||
.form-group input, .form-group select, .form-group textarea {
|
||
padding: 12px; background: #0f3460; border: 1px solid #333; border-radius: 8px; color: #eee; font-size: 14px;
|
||
}
|
||
.form-group textarea { min-height: 100px; resize: vertical; }
|
||
|
||
.btn { padding: 12px 25px; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 14px; }
|
||
.btn-primary { background: #2ec4b6; color: #000; }
|
||
|
||
.filters { display: flex; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; }
|
||
.filter-btn { padding: 8px 16px; background: #16213e; border: none; border-radius: 20px; color: #888; cursor: pointer; font-size: 13px; }
|
||
.filter-btn.active { background: #7b2cbf; color: white; }
|
||
|
||
.ideas-list { display: flex; flex-direction: column; gap: 20px; }
|
||
|
||
.idea-card { background: #16213e; border-radius: 16px; padding: 25px; border-left: 4px solid #2ec4b6; }
|
||
.idea-card.eleve { border-left-color: #00ff88; }
|
||
.idea-card.moyen { border-left-color: #ffd700; }
|
||
.idea-card.faible { border-left-color: #ff6b6b; }
|
||
|
||
.idea-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; }
|
||
.idea-title { font-size: 22px; font-weight: bold; }
|
||
|
||
.badge { padding: 4px 12px; border-radius: 12px; font-size: 12px; }
|
||
.badge-cat { background: #7b2cbf; color: white; }
|
||
.badge-status { background: #2ec4b6; color: #000; }
|
||
|
||
.idea-desc { color: #ccc; line-height: 1.7; white-space: pre-wrap; margin-top: 15px; padding-top: 15px; border-top: 1px solid #333; font-size: 14px; }
|
||
|
||
.back-link { display: inline-block; padding: 10px 20px; color: #888; text-decoration: none; margin-bottom: 20px; }
|
||
.back-link:hover { color: #2ec4b6; }
|
||
|
||
.loading { text-align: center; padding: 40px; color: #888; }
|
||
.error { background: #e94560; color: white; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
|
||
|
||
.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>
|
||
<h1>💡 Boîte à Idées</h1>
|
||
<p>Tous vos Projets et idées business</p>
|
||
</header>
|
||
|
||
<div class="container">
|
||
<a href="/" class="back-link">← Retour au PortailClaw</a>
|
||
|
||
<div id="error-msg"></div>
|
||
|
||
<div class="add-form">
|
||
<h2>➕ Nouvelle Idée</h2>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Titre</label>
|
||
<input type="text" id="idea-title" placeholder="Nom du projet">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Catégorie</label>
|
||
<select id="idea-category">
|
||
<option value="tech">Tech & IA</option>
|
||
<option value="saas">SaaS</option>
|
||
<option value="service">Service</option>
|
||
<option value="produit">Produit</option>
|
||
<option value="invest">Investissement</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Sous-catégorie</label>
|
||
<input type="text" id="idea-subcategory" placeholder="Ex: IA, Mobile...">
|
||
</div>
|
||
</div>
|
||
<div class="form-group" style="margin-bottom:15px;">
|
||
<label>Description</label>
|
||
<textarea id="idea-desc" placeholder="Décris ton idée..."></textarea>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>Statut</label>
|
||
<select id="idea-status">
|
||
<option value="idee">Idée</option>
|
||
<option value="encours">En cours</option>
|
||
<option value="teste">Testé</option>
|
||
<option value="lance">Lancé</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Potentiel</label>
|
||
<select id="idea-potential">
|
||
<option value="faible">Faible</option>
|
||
<option value="moyen">Moyen</option>
|
||
<option value="eleve">Élevé</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Revenus (€)</label>
|
||
<input type="number" id="idea-revenue" value="0">
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-primary" onclick="addIdea()">➕ Ajouter l'idée</button>
|
||
</div>
|
||
|
||
<div class="filters">
|
||
<button class="filter-btn active" onclick="filterIdeas('all')">Toutes</button>
|
||
<button class="filter-btn" onclick="filterIdeas('idee')">Idée</button>
|
||
<button class="filter-btn" onclick="filterIdeas('encours')">En cours</button>
|
||
<button class="filter-btn" onclick="filterIdeas('teste')">Testé</button>
|
||
<button class="filter-btn" onclick="filterIdeas('lance')">Lancé</button>
|
||
</div>
|
||
|
||
<div class="ideas-list" id="ideas-list">
|
||
<div class="loading">Chargement des idées...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let ideasData = { categories: [], ideas: [] };
|
||
let currentFilter = 'all';
|
||
|
||
alert("Loading..."); loadIdeas();
|
||
|
||
function loadIdeas() {
|
||
document.getElementById('ideas-list').innerHTML = '<div class="loading">Chargement...</div>';
|
||
|
||
fetch('/turf/api/ideas', {})
|
||
.then(r => {
|
||
if (!r.ok) throw new Error('Erreur: ' + r.status);
|
||
return r.json();
|
||
})
|
||
.then(data => {
|
||
ideasData = data;
|
||
renderIdeas();
|
||
})
|
||
.catch(err => {
|
||
document.getElementById('ideas-list').innerHTML = '<div class="error">Erreur: ' + err.message + '</div>';
|
||
});
|
||
}
|
||
|
||
function renderIdeas() {
|
||
const list = document.getElementById('ideas-list');
|
||
|
||
let filtered = ideasData.ideas;
|
||
if (currentFilter !== 'all') {
|
||
filtered = ideasData.ideas.filter(i => i.status === currentFilter);
|
||
}
|
||
|
||
if (!filtered || filtered.length === 0) {
|
||
list.innerHTML = '<div style="text-align:center;color:#666;padding:40px;">Aucune idée pour ce filtre</div>';
|
||
return;
|
||
}
|
||
|
||
const catNames = {};
|
||
ideasData.categories.forEach(c => catNames[c.id] = c.name);
|
||
|
||
list.innerHTML = filtered.map(idea => `
|
||
<div class="idea-card ${idea.potential || 'moyen'}">
|
||
<div class="idea-header">
|
||
<span class="idea-title">${idea.title}</span>
|
||
<div>
|
||
<span class="badge badge-cat">${catNames[idea.category] || idea.category}</span>
|
||
<span class="badge badge-status">${idea.status}</span>
|
||
</div>
|
||
</div>
|
||
<div style="color:#888;font-size:13px;">
|
||
${idea.subcategory ? '📁 ' + idea.subcategory + ' | ' : ''}
|
||
💰 ${idea.revenue || 0}€ | 📅 ${idea.created}
|
||
</div>
|
||
<div class="idea-desc">${idea.description || ''}</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
function filterIdeas(status) {
|
||
currentFilter = status;
|
||
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
||
event.target.classList.add('active');
|
||
renderIdeas();
|
||
}
|
||
|
||
function addIdea() {
|
||
const idea = {
|
||
title: document.getElementById('idea-title').value,
|
||
category: document.getElementById('idea-category').value,
|
||
subcategory: document.getElementById('idea-subcategory').value,
|
||
description: document.getElementById('idea-desc').value,
|
||
status: document.getElementById('idea-status').value,
|
||
potential: document.getElementById('idea-potential').value,
|
||
revenue: parseInt(document.getElementById('idea-revenue').value) || 0
|
||
};
|
||
|
||
if (!idea.title) {
|
||
alert('Titre requis!');
|
||
return;
|
||
}
|
||
|
||
fetch('/turf/api/ideas', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(idea)
|
||
})
|
||
.then(r => r.json())
|
||
.then(data => {
|
||
document.getElementById('idea-title').value = '';
|
||
document.getElementById('idea-desc').value = '';
|
||
document.getElementById('idea-subcategory').value = '';
|
||
alert("Loading..."); loadIdeas();
|
||
})
|
||
.catch(err => {
|
||
alert('Erreur: ' + err.message);
|
||
});
|
||
}
|
||
</script>
|
||
<script>console.log("Page loaded")</script></body>
|
||
</html>
|