183 lines
9.3 KiB
HTML
Executable File
183 lines
9.3 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</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: #1a1a2e; color: #eee; padding: 20px; }
|
||
header { background: linear-gradient(90deg, #7b2cbf, #2ec4b6); padding: 20px; text-align: center; margin: -20px -20px 20px; border-radius: 0 0 20px 20px; }
|
||
h1 { font-size: 28px; }
|
||
.add-btn { background: #2ec4b6; color: #000; padding: 15px; border: none; border-radius: 10px; width: 100%; font-size: 16px; font-weight: bold; cursor: pointer; margin-bottom: 20px; }
|
||
.form { background: #16213e; padding: 20px; border-radius: 15px; margin-bottom: 20px; display: none; }
|
||
.form.show { display: block; }
|
||
input, select, textarea { width: 100%; padding: 12px; margin: 8px 0; background: #0f3460; border: 1px solid #333; border-radius: 8px; color: #fff; }
|
||
.btn-row { display: flex; gap: 10px; }
|
||
button.submit { flex: 1; padding: 12px; background: #2ec4b6; border: none; border-radius: 8px; color: #000; font-weight: bold; cursor: pointer; }
|
||
button.cancel { flex: 1; padding: 12px; background: #e94560; border: none; border-radius: 8px; color: #fff; cursor: pointer; }
|
||
.idea { background: #16213e; padding: 15px; border-radius: 12px; margin: 10px 0; border-left: 4px solid #2ec4b6; }
|
||
.idea.eleve { border-left-color: #00ff88; }
|
||
.idea.moyen { border-left-color: #ffd700; }
|
||
.idea.faible { border-left-color: #e94560; }
|
||
.idea-title { font-size: 18px; font-weight: bold; margin-bottom: 8px; }
|
||
.badge { background: #7b2cbf; padding: 4px 10px; border-radius: 10px; font-size: 12px; margin-right: 5px; }
|
||
.badge-status { background: #2ec4b6; color: #000; }
|
||
.idea-desc { color: #aaa; margin-top: 10px; font-size: 14px; line-height: 1.5; }
|
||
.meta { color: #666; font-size: 12px; margin-top: 10px; }
|
||
.error { background: #e94560; padding: 15px; border-radius: 10px; text-align: center; }
|
||
a { color: #2ec4b6; text-decoration: none; display: block; text-align: center; margin-top: 20px; }
|
||
.edit-btn { background: #7b2cbf; color: #fff; padding: 5px 10px; border: none; border-radius: 5px; cursor: pointer; font-size: 12px; margin-right: 5px; }
|
||
.delete-btn { background: #e94560; color: #fff; padding: 5px 10px; border: none; border-radius: 5px; cursor: pointer; font-size: 12px; }
|
||
|
||
.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 style="text-align:center;padding:10px;">
|
||
<img src="/turf/H3R7Tech_logo.png" alt="H3R7Tech" style="width:80px;border-radius:10px;">
|
||
</div>
|
||
<h1>💡 Boîte à Idées</h1>
|
||
</header>
|
||
|
||
<button class="add-btn" onclick="toggleForm()">➕ Nouvelle Idée</button>
|
||
|
||
<div class="form" id="form">
|
||
<input type="hidden" id="idea-id" value="">
|
||
<input type="text" id="title" placeholder="Titre *">
|
||
<select id="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>
|
||
<input type="text" id="subcategory" placeholder="Sous-catégorie">
|
||
<textarea id="description" placeholder="Description" rows="3"></textarea>
|
||
<select id="status">
|
||
<option value="idee">Idée</option>
|
||
<option value="encours">En cours</option>
|
||
<option value="teste">Testé</option>
|
||
<option value="lance">Lancé</option>
|
||
</select>
|
||
<select id="potential">
|
||
<option value="moyen">Potentiel Moyen</option>
|
||
<option value="eleve">Potentiel Élevé</option>
|
||
<option value="faible">Potentiel Faible</option>
|
||
</select>
|
||
<div class="btn-row">
|
||
<button class="submit" id="submit-btn" onclick="saveIdea()">Ajouter</button>
|
||
<button class="cancel" onclick="toggleForm()">Annuler</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="ideas">Chargement...</div>
|
||
<a href="/">← Retour au Portail</a>
|
||
|
||
<script>
|
||
const API_URL = '/turf/api/ideas';
|
||
|
||
function toggleForm() {
|
||
document.getElementById('form').classList.toggle('show');
|
||
if (!document.getElementById('form').classList.contains('show')) {
|
||
resetForm();
|
||
}
|
||
}
|
||
|
||
function resetForm() {
|
||
document.getElementById('idea-id').value = '';
|
||
document.getElementById('title').value = '';
|
||
document.getElementById('description').value = '';
|
||
document.getElementById('submit-btn').textContent = 'Ajouter';
|
||
}
|
||
|
||
function loadIdeas() {
|
||
fetch(API_URL, {})
|
||
.then(r => r.json())
|
||
.then(data => {
|
||
const ideas = data.ideas || [];
|
||
const list = document.getElementById('ideas');
|
||
if (!ideas || ideas.length === 0) {
|
||
list.innerHTML = '<div class="error">Aucune idée</div>';
|
||
return;
|
||
}
|
||
list.innerHTML = ideas.map(i => {
|
||
return '<div class="idea ' + (i.potential || 'moyen') + '">' +
|
||
'<div class="idea-title">' + (i.title || '') + '</div>' +
|
||
'<div><span class="badge">' + (i.category || '') + '</span><span class="badge badge-status">' + (i.status || '') + '</span></div>' +
|
||
'<div class="idea-desc">' + (i.description || '') + '</div>' +
|
||
'<div class="meta">📅 ' + (i.created || '') + '</div>' +
|
||
'<div style="margin-top:10px;">' +
|
||
'<button class="edit-btn" onclick="editIdea(' + i.id + ')">✏️ Modifier</button>' +
|
||
'<button class="delete-btn" onclick="deleteIdea(' + i.id + ')">🗑️ Supprimer</button>' +
|
||
'</div></div>';
|
||
}).join('');
|
||
})
|
||
.catch(e => {
|
||
document.getElementById('ideas').innerHTML = '<div class="error">Erreur: ' + e.message + '</div>';
|
||
});
|
||
}
|
||
|
||
function editIdea(id) {
|
||
fetch(API_URL + '/' + id, {})
|
||
.then(r => r.json())
|
||
.then(idea => {
|
||
document.getElementById('idea-id').value = idea.id;
|
||
document.getElementById('title').value = idea.title || '';
|
||
document.getElementById('category').value = idea.category || 'tech';
|
||
document.getElementById('status').value = idea.status || 'idee';
|
||
document.getElementById('potential').value = idea.potential || 'moyen';
|
||
document.getElementById('description').value = idea.description || '';
|
||
document.getElementById('submit-btn').textContent = 'Mettre à jour';
|
||
document.getElementById('form').classList.add('show');
|
||
});
|
||
}
|
||
|
||
function deleteIdea(id) {
|
||
if (!confirm('Supprimer cette idée?')) return;
|
||
fetch(API_URL + '/' + id, {
|
||
method: 'DELETE',
|
||
}).then(() => loadIdeas());
|
||
}
|
||
|
||
function saveIdea() {
|
||
const id = document.getElementById('idea-id').value;
|
||
const title = document.getElementById('title').value;
|
||
if (!title) { alert('Titre requis!'); return; }
|
||
|
||
const data = {
|
||
title: title,
|
||
category: document.getElementById('category').value,
|
||
subcategory: document.getElementById('subcategory').value,
|
||
description: document.getElementById('description').value,
|
||
status: document.getElementById('status').value,
|
||
potential: document.getElementById('potential').value
|
||
};
|
||
|
||
const method = id ? 'PUT' : 'POST';
|
||
const url = id ? API_URL + '/' + id : API_URL;
|
||
|
||
fetch(url, {
|
||
method: method,
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(data)
|
||
})
|
||
.then(r => r.json())
|
||
.then(d => {
|
||
if (d.success || d.id) {
|
||
toggleForm();
|
||
loadIdeas();
|
||
resetForm();
|
||
} else {
|
||
alert(d.error || 'Erreur');
|
||
}
|
||
});
|
||
}
|
||
|
||
// Load ideas on page load
|
||
loadIdeas();
|
||
</script>
|
||
</body>
|
||
</html>
|