106 lines
5.0 KiB
HTML
Executable File
106 lines
5.0 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width">
|
||
<title>💡 Idées</title>
|
||
<style>
|
||
body { font-family: sans-serif; background: #1a1a2e; color: #fff; padding: 20px; }
|
||
h1 { color: #2ec4b6; }
|
||
.card { background: #16213e; padding: 15px; margin: 10px 0; border-radius: 10px; border-left: 4px solid #2ec4b6; }
|
||
.eleve { border-left-color: #00ff88; }
|
||
.moyen { border-left-color: #ffd700; }
|
||
.badge { background: #7b2cbf; padding: 3px 8px; border-radius: 8px; font-size: 12px; }
|
||
input, textarea, select { width: 100%; padding: 10px; margin: 5px 0; background: #0f3460; border: 1px solid #333; color: #fff; border-radius: 8px; }
|
||
button { width: 100%; padding: 12px; background: #2ec4b6; border: none; border-radius: 8px; color: #000; font-weight: bold; margin-top: 10px; }
|
||
.form { background: #16213e; padding: 15px; border-radius: 10px; margin-bottom: 20px; }
|
||
#msg { color: #00ff88; text-align: center; margin: 10px 0; }
|
||
|
||
.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>
|
||
<h1>💡 Boîte à Idées</h1>
|
||
<div id="msg"></div>
|
||
|
||
<div class="form">
|
||
<h3>➕ Nouvelle Idée</h3>
|
||
<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">Moyen</option>
|
||
<option value="eleve">Élevé</option>
|
||
<option value="faible">Faible</option>
|
||
</select>
|
||
<button onclick="add()">Ajouter</button>
|
||
</div>
|
||
|
||
<div id="list">Chargement...</div>
|
||
|
||
<script>
|
||
const API = '/turf/api/ideas';
|
||
|
||
function load() {
|
||
fetch(API, {})
|
||
.then(r => r.json())
|
||
.then(d => {
|
||
document.getElementById('list').innerHTML = d.ideas.map(i =>
|
||
'<div class="card ' + (i.potential||'moyen') + '">' +
|
||
'<b>' + i.title + '</b><br>' +
|
||
'<span class="badge">' + (i.category||'') + '</span> ' +
|
||
'<span class="badge" style="background:#2ec4b6;color:#000">' + (i.status||'') + '</span> ' +
|
||
'<small>' + (i.created||'') + '</small><br>' +
|
||
'<small style="color:#888">' + (i.description||'').substring(0,100) + '</small></div>'
|
||
).join('');
|
||
})
|
||
.catch(e => {
|
||
document.getElementById('list').innerHTML = '<div style="color:#e94560">Erreur: ' + e.message + '</div>';
|
||
});
|
||
}
|
||
|
||
function add() {
|
||
const title = document.getElementById('title').value;
|
||
if (!title) { alert('Titre requis!'); return; }
|
||
|
||
fetch(API, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
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
|
||
})
|
||
})
|
||
.then(r => r.json())
|
||
.then(d => {
|
||
document.getElementById('msg').innerText = '✅ Ajouté!';
|
||
document.getElementById('title').value = '';
|
||
document.getElementById('description').value = '';
|
||
load();
|
||
})
|
||
.catch(e => alert('Erreur: ' + e.message));
|
||
}
|
||
|
||
load();
|
||
</script>
|
||
</body>
|
||
</html>
|