Créez un Second Cerveau : Système de Gestion des Connaissances Personnelles
De Wikiprompt, l’encyclopédie libre de prompts
Créez un Second Cerveau : Système de Gestion des Connaissances Personnelles Une invite complète pour créer un système de gestion des connaissances personnelles en un seul fichier, avec des notes, des tâches, des projets et des connexions, le tout enregistré dans localStorage.
Contenu du PromptEnregistrer
🌐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Second Brain · PKM</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
:root {
--bg: #f7f8fa; --surface: #ffffff; --border: #e6e8eb; --text: #1f2328; --muted: #6b7280;
--accent: #4f6ef7; --accent-soft: #eef2ff; --success: #2e9e5b; --warning: #d97706; --danger: #dc2626;
--shadow: 0 8px 20px rgba(0,0,0,0.04); --radius: 16px;
}
body.dark {
--bg: #0f1216; --surface: #1a1f26; --border: #2d333c; --text: #e5e9f0; --muted: #9aa4b2;
--accent: #7c9bff; --accent-soft: #1e2a4a; --shadow: 0 8px 20px rgba(0,0,0,0.5);
}
body { background: var(--bg); color: var(--text); transition: background 0.2s, color 0.2s; font-size: 15px; line-height: 1.5; }
.app { display: flex; height: 100vh; overflow: hidden; }
/* SIDEBAR */
.sidebar {
width: 240px; background: var(--surface); border-right: 1px solid var(--border);
display: flex; flex-direction: column; padding: 20px 12px; transition: background 0.2s;
}
.sidebar .logo { font-weight: 700; font-size: 1.4rem; padding: 8px 12px 20px; display: flex; align-items: center; gap: 8px; }
.sidebar .logo span { background: var(--accent); width: 10px; height: 10px; border-radius: 4px; display: inline-block; }
.nav-item {
display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 2px 0;
border-radius: 10px; cursor: pointer; color: var(--muted); font-weight: 500; transition: all 0.15s;
}
.nav-item:hover { background: var(--accent-soft); color: var(--text); }
.nav-item.active { background: var(--accent); color: white; }
.nav-item .icon { width: 20px; text-align: center; }
.sidebar-footer { margin-top: auto; padding: 12px; font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--border); }
/* MAIN */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.topbar {
height: 60px; background: var(--surface); border-bottom: 1px solid var(--border);
display: flex; align-items: center; padding: 0 20px; gap: 16px; flex-shrink: 0;
}
.topbar .search { flex: 1; max-width: 400px; background: var(--bg); border: 1px solid var(--border); border-radius: 30px; padding: 8px 16px; display: flex; align-items: center; gap: 8px; }
.topbar .search input { border: none; background: transparent; width: 100%; outline: none; color: var(--text); }
.icon-btn { background: none; border: none; color: var(--muted); font-size: 1.3rem; cursor: pointer; padding: 6px; border-radius: 8px; transition: 0.15s; }
.icon-btn:hover { background: var(--accent-soft); color: var(--text); }
.content { flex: 1; overflow-y: auto; padding: 24px 28px; }
/* CARDS & GRID */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 18px; box-shadow: var(--shadow); transition: 0.15s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
.card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.card p { color: var(--muted); font-size: 0.9rem; }
.badge { background: var(--accent-soft); color: var(--accent); padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.badge.success { background: #e3f5e9; color: var(--success); }
.badge.warning { background: #fef3c7; color: var(--warning); }
.btn {
background: var(--accent); color: white; border: none; padding: 8px 16px; border-radius: 30px;
font-weight: 600; cursor: pointer; transition: 0.15s; font-size: 0.9rem;
}
.btn:hover { opacity: 0.9; transform: scale(0.98); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover { background: var(--accent-soft); }
/* PROGRESS */
.progress { height: 8px; background: var(--bg); border-radius: 10px; margin: 12px 0; overflow: hidden; }
.progress-bar { height: 100%; background: var(--accent); border-radius: 10px; }
/* QUICK ADD FAB */
.fab {
position: fixed; bottom: 30px; right: 30px; width: 56px; height: 56px; border-radius: 30px;
background: var(--accent); color: white; font-size: 2rem; border: none; box-shadow: 0 8px 20px rgba(0,0,0,0.2);
cursor: pointer; transition: 0.2s; z-index: 100;
}
.fab:hover { transform: scale(1.05); }
/* MODAL */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 200; }
.modal-card { background: var(--surface); padding: 28px; border-radius: 24px; width: 90%; max-width: 500px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
.modal-card input, .modal-card textarea, .modal-card select { width: 100%; padding: 10px; margin: 8px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); }
.modal-card .btn { margin-top: 12px; }
/* MISC */
.flex { display: flex; gap: 12px; align-items: center; }
.muted { color: var(--muted); }
.daily-prompt { background: var(--accent-soft); padding: 16px; border-radius: 20px; margin-bottom: 24px; }
.activity { border-left: 2px solid var(--border); padding-left: 16px; }
.activity-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.tag { background: var(--bg); padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; margin-right: 4px; }
</style>
</head>
<body>
<div class="app" id="app">
<!-- SIDEBAR -->
<aside class="sidebar" id="sidebar">
<div class="logo"><span></span> Second Brain</div>
<div id="navContainer">
<div class="nav-item active" data-view="dashboard"><span class="icon">🏠</span> Dashboard</div>
<div class="nav-item" data-view="inbox"><span class="icon">📥</span> Inbox</div>
<div class="nav-item" data-view="notes"><span class="icon">📝</span> Notes</div>
<div class="nav-item" data-view="projects"><span class="icon">📁</span> Projects</div>
<div class="nav-item" data-view="tasks"><span class="icon">✅</span> Tasks</div>
<div class="nav-item" data-view="map"><span class="icon">🕸️</span> Map</div>
<div class="nav-item" data-view="settings"><span class="icon">⚙️</span> Settings</div>
</div>
<div class="sidebar-footer">🔒 local storage · v1.0</div>
</aside>
<!-- MAIN -->
<div class="main">
<div class="topbar">
<div class="search">🔍 <input id="globalSearch" placeholder="Search notes, tasks, projects..."></div>
<button class="icon-btn" id="themeToggle" title="Toggle theme">🌙</button>
<button class="btn" id="quickAddBtn" style="padding:8px 18px;">+ Quick add</button>
</div>
<div class="content" id="contentArea"></div>
</div>
</div>
<!-- FAB -->
<button class="fab" id="fabBtn">+</button>
<!-- MODAL (dynamic) -->
<div id="modalRoot"></div>
<script>
(function(){
// ---------- DATA LAYER ----------
const DEFAULT_DATA = {
notes: [
{ id: 'n1', title: 'Welcome note', content: 'This is your second brain. Capture everything.', tags: ['intro'], projectId: 'p1', createdAt: Date.now()-86400000, modifiedAt: Date.now()-3600000, versions: ['This is your second brain. Capture everything.'] },
{ id: 'n2', title: 'Meeting with team', content: 'Discuss roadmap - Q3 priorities.', tags: ['work'], projectId: 'p1', createdAt: Date.now()-172800000, modifiedAt: Date.now()-7200000, versions: ['Discuss roadmap - Q3 priorities.'] }
],
tasks: [
{ id: 't1', title: 'Write weekly review', description: 'Summarize wins', dueDate: new Date().toISOString().slice(0,10), priority: 'High', projectId: 'p1', completed: false, subtasks: [], recurring: 'none' },
{ id: 't2', title: 'Plan project kickoff', description: 'Prepare slides', dueDate: new Date(Date.now()+86400000).toISOString().slice(0,10), priority: 'Medium', projectId: 'p1', completed: false, subtasks: [], recurring: 'none' }
],
projects: [
{ id: 'p1', name: 'Second Brain App', description: 'Build PKM system', status: 'Active', deadline: '2025-12-31', progress: 40, items: ['n1','n2','t1','t2'] }
],
ideas: [
{ id: 'i1', text: 'AI-powered daily summary', tags: ['ai'], projectId: null, someday: false }
],
activity: [
{ text: 'Created note "Welcome note"', time: Date.now()-3600000 },
{ text: 'Completed task "Write weekly review"', time: Date.now()-7200000 }
],
settings: { theme: 'light', primaryColor: '#4f6ef7', dailyPrompt: "What's one thing you want to remember today?" }
};
let state = JSON.parse(localStorage.getItem('secondBrainData')) || DEFAULT_DATA;
let currentView = 'dashboard';
let searchTerm = '';
// ---------- PERSISTENCE ----------
function saveState() {
localStorage.setItem('secondBrainData', JSON.stringify(state));
}
// ---------- HELPERS ----------
function formatDate(ts) {
return new Date(ts).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}
function getProjectName(pid) {
const p = state.projects.find(x => x.id === pid);
return p ? p.name : 'No project';
}
function getNoteById(id) {
return state.notes.find(n => n.id === id);
}
// ---------- RENDER ----------
function render() {
const content = document.getElementById('contentArea');
const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(n => n.classList.toggle('active', n.dataset.view === currentView));
if (currentView === 'dashboard') renderDashboard(content);
else if (currentView === 'notes') renderNotes(content);
else if (currentView === 'projects') renderProjects(content);
else if (currentView === 'tasks') renderTasks(content);
else if (currentView === 'inbox') renderInbox(content);
else if (currentView === 'map') renderMap(content);
else if (currentView === 'settings') renderSettings(content);
}
function renderDashboard(el) {
const todayTasks = state.tasks.filter(t => !t.completed && t.dueDate === new Date().toISOString().slice(0,10));
const recentNotes = [...state.notes].sort((a,b)=>b.modifiedAt-a.modifiedAt).slice(0,3);
const activeProjects = state.projects.filter(p => p.status === 'Active');
const doneTasks = state.tasks.filter(t=>t.completed).length;
const totalTasks = state.tasks.length;
const prompt = state.settings.dailyPrompt;
el.innerHTML = `
<div class="daily-prompt">
<strong>✨ ${prompt}</strong>
<div style="margin-top:8px"><input id="dailyPromptInput" placeholder="Type a quick thought..." style="width:70%; padding:8px; border-radius:20px; border:1px solid var(--border); background:var(--bg); color:var(--text);"></div>
</div>
<div class="grid" style="margin-bottom:24px;">
<div class="card"><h3>📌 Today's tasks</h3>${todayTasks.length ? todayTasks.map(t=>`<div>• ${t.title}</div>`).join('') : '<p class="muted">Nothing due today</p>'}</div>
<div class="card"><h3>📝 Recent notes</h3>${recentNotes.map(n=>`<div><b>${n.title}</b> <span class="muted">${formatDate(n.modifiedAt)}</span></div>`).join('') || '<p class="muted">No notes</p>'}</div>
<div class="card"><h3>📁 Active projects</h3>${activeProjects.map(p=>`<div>${p.name} <span class="badge">${p.status}</span></div>`).join('') || '<p class="muted">No active projects</p>'}</div>
</div>
<div class="grid" style="grid-template-columns: repeat(3,1fr);">
<div class="card"><span class="badge">📊</span> <h3>${state.notes.length}</h3><p>Notes</p></div>
<div class="card"><span class="badge success">✅</span> <h3>${doneTasks}/${totalTasks}</h3><p>Tasks done</p></div>
<div class="card"><span class="badge warning">🚀</span> <h3>${activeProjects.length}</h3><p>Active projects</p></div>
</div>
<h3 style="margin:24px 0 12px;">⚡ Activity feed</h3>
<div class="activity">${state.activity.slice(0,5).map(a=>`<div class="activity-item">${a.text} <span class="muted">${formatDate(a.time)}</span></div>`).join('')}</div>
`;
document.getElementById('dailyPromptInput')?.addEventListener('keydown', (e)=>{
if(e.key==='Enter' && e.target.value.trim()){
state.ideas.push({ id:'i'+Date.now(), text: e.target.value.trim(), tags:['inbox'], projectId:null, someday:false });
state.activity.unshift({ text:'Captured idea: '+e.target.value.trim(), time: Date.now() });
saveState(); render();
}
});
}
function renderNotes(el) {
const filtered = state.notes.filter(n =>
n.title.toLowerCase().includes(searchTerm) || n.content.toLowerCase().includes(searchTerm) || n.tags.some(t=>t.includes(searchTerm))
);
el.innerHTML = `<div class="flex" style="justify-content:space-between; margin-bottom:20px;"><h2>📝 Notes</h2><button class="btn" id="addNoteBtn">+ New note</button></div>`;
const grid = document.createElement('div'); grid.className='grid';
filtered.forEach(note => {
const card = document.createElement('div'); card.className='card';
card.innerHTML = `<h3>${note.title}</h3><p>${note.content.slice(0,80)}...</p><div style="margin-top:8px">${note.tags.map(t=>`<span class="tag">#${t}</span>`).join('')}</div><div class="muted" style="margin-top:8px">📁 ${getProjectName(note.projectId)} · ${formatDate(note.modifiedAt)}</div>`;
grid.appendChild(card);
});
el.appendChild(grid);
document.getElementById('addNoteBtn')?.addEventListener('click', ()=>openModal('note'));
}
function renderProjects(el) {
el.innerHTML = `<div class="flex" style="justify-content:space-between; margin-bottom:20px;"><h2>📁 Projects</h2><button class="btn" id="addProjectBtn">+ New project</button></div>`;
const grid = document.createElement('div'); grid.className='grid';
state.projects.forEach(p => {
const card = document.createElement('div'); card.className='card';
card.innerHTML = `<h3>${p.name}</h3><p>${p.description || ''}</p><span class="badge ${p.status==='Active'?'success':p.status==='On Hold'?'warning':''}">${p.status}</span>
<div class="progress"><div class="progress-bar" style="width:${p.progress}%"></div></div>
<div class="muted">Deadline: ${p.deadline || 'none'}</div>`;
grid.appendChild(card);
});
el.appendChild(grid);
document.getElementById('addProjectBtn')?.addEventListener('click', ()=>openModal('project'));
}
function renderTasks(el) {
const filtered = state.tasks.filter(t => t.title.toLowerCase().includes(searchTerm));
el.innerHTML = `<div class="flex" style="justify-content:space-between; margin-bottom:20px;"><h2>✅ Tasks</h2><button class="btn" id="addTaskBtn">+ New task</button></div>`;
const list = document.createElement('div');
filtered.forEach(t => {
const div = document.createElement('div'); div.className='card'; div.style.marginBottom='12px';
div.innerHTML = `<div class="flex"><input type="checkbox" ${t.completed?'checked':''} data-task="${t.id}" style="width:18px;height:18px;"><h3 style="flex:1; ${t.completed?'text-decoration:line-through':''}">${t.title}</h3><span class="badge">${t.priority}</span></div>
<p class="muted">Due: ${t.dueDate || 'none'} · ${getProjectName(t.projectId)}</p>`;
list.appendChild(div);
});
el.appendChild(list);
document.querySelectorAll('[data-task]').forEach(cb => cb.addEventListener('change', function(){
const task = state.tasks.find(x=>x.id===this.dataset.task);
if(task){ task.completed = this.checked; state.activity.unshift({text:`${task.completed?'Completed':'Reopened'} task "${task.title}"`, time: Date.now()}); saveState(); render(); }
}));
document.getElementById('addTaskBtn')?.addEventListener('click', ()=>openModal('task'));
}
function renderInbox(el) {
const ideas = state.ideas.filter(i=>!i.someday);
el.innerHTML = `<h2>📥 Inbox</h2><p class="muted">Quick capture - organize later</p><div style="margin:20px 0">${ideas.map(i=>`<div class="card" style="margin-bottom:10px">💡 ${i.text} <span class="tag">${i.tags.join(',')}</span></div>`).join('') || '<p>Nothing captured.</p>'}</div>`;
}
function renderMap(el) {
el.innerHTML = `<h2>🕸️ Connection map</h2><p class="muted">Visual overview (simplified)</p><div class="card" style="margin-top:20px; padding:30px; text-align:center;">🌐 Notes ↔ Projects ↔ Tasks<br><br>${state.notes.length} notes · ${state.projects.length} projects · ${state.tasks.length} tasks</div>`;
}
function renderSettings(el) {
el.innerHTML = `<h2>⚙️ Settings</h2><div class="card" style="max-width:400px; margin-top:20px;">
<label>Theme</label><select id="themeSelect"><option value="light">Light</option><option value="dark">Dark</option></select>
<label>Daily prompt</label><input id="promptSetting" value="${state.settings.dailyPrompt}">
<button class="btn" id="saveSettings" style="margin-top:16px;">Save</button>
</div>`;
document.getElementById('themeSelect').value = state.settings.theme;
document.getElementById('saveSettings').addEventListener('click', ()=>{
state.settings.theme = document.getElementById('themeSelect').value;
state.settings.dailyPrompt = document.getElementById('promptSetting').value;
document.body.classList.toggle('dark', state.settings.theme==='dark');
saveState(); render();
});
}
// ---------- MODAL ----------
function openModal(type) {
const root = document.getElementById('modalRoot');
let html = '';
if(type==='note') html = `<h3>New note</h3><input id="mTitle" placeholder="Title"><textarea id="mContent" rows="3" placeholder="Content"></textarea><input id="mTags" placeholder="tags (comma)"><select id="mProject">${state.projects.map(p=>`<option value="${p.id}">${p.name}</option>`).join('')}</select>`;
if(type==='task') html = `<h3>New task</h3><input id="mTitle" placeholder="Task title"><input id="mDue" type="date"><select id="mPriority"><option>High</option><option>Medium</option><option>Low</option></select><select id="mProject">${state.projects.map(p=>`<option value="${p.id}">${p.name}</option>`).join('')}</select>`;
if(type==='project') html = `<h3>New project</h3><input id="mName" placeholder="Project name"><input id="mDesc" placeholder="Description"><select id="mStatus"><option>Active</option><option>On Hold</option><option>Completed</option></select>`;
root.innerHTML = `<div class="modal"><div class="modal-card">${html}<button class="btn" id="modalSave">Save</button><button class="btn btn-outline" id="modalCancel">Cancel</button></div></div>`;
document.getElementById('modalCancel').onclick = ()=> root.innerHTML='';
document.getElementById('modalSave').onclick = ()=>{
if(type==='note'){
const title = document.getElementById('mTitle').value || 'Untitled';
const content = document.getElementById('mContent').value || '';
const tags = document.getElementById('mTags').value.split(',').map(t=>t.trim()).filter(Boolean);
const projectId = document.getElementById('mProject').value;
const newNote = { id:'n'+Date.now(), title, content, tags, projectId, createdAt: Date.now(), modifiedAt: Date.now(), versions:[content] };
state.notes.push(newNote); state.activity.unshift({text:`Created note "${title}"`, time: Date.now()});
} else if(type==='task'){
const title = document.getElementById('mTitle').value || 'Task';
const dueDate = document.getElementById('mDue').value || new Date().toISOString().slice(0,10);
const priority = document.getElementById('mPriority').value;
const projectId = document.getElementById('mProject').value;
state.tasks.push({ id:'t'+Date.now(), title, description:'', dueDate, priority, projectId, completed:false, subtasks:[], recurring:'none' });
state.activity.unshift({text:`Added task "${title}"`, time: Date.now()});
} else if(type==='project'){
const name = document.getElementById('mName').value || 'New project';
const desc = document.getElementById('mDesc').value || '';
const status = document.getElementById('mStatus').value;
state.projects.push({ id:'p'+Date.now(), name, description:desc, status, deadline:'', progress:0, items:[] });
state.activity.unshift({text:`Created project "${name}"`, time: Date.now()});
}
saveState(); render(); root.innerHTML='';
};
}
// ---------- NAVIGATION & EVENTS ----------
document.getElementById('navContainer').addEventListener('click', (e)=>{
const item = e.target.closest('.nav-item');
if(item){ currentView = item.dataset.view; render(); }
});
document.getElementById('themeToggle').addEventListener('click', ()=>{
state.settings.theme = state.settings.theme==='dark' ? 'light' : 'dark';
document.body.classList.toggle('dark', state.settings.theme==='dark');
saveState(); render();
});
document.getElementById('globalSearch').addEventListener('input', (e)=>{
searchTerm = e.target.value.toLowerCase();
render();
});
document.getElementById('fabBtn').addEventListener('click', ()=>openModal('note'));
document.getElementById('quickAddBtn').addEventListener('click', ()=>openModal('task'));
// init theme
document.body.classList.toggle('dark', state.settings.theme==='dark');
render();
})();
</script>
</body>
</html>
Connectez-vous pour voir le prompt complet
Continuer avec:
En vous connectant, vous acceptez nos Conditions et Confidentialité
Utilisation
Ce prompt est conçu pour être utilisé avec coding. Copiez le contenu ci-dessus et collez-le dans votre outil d’IA préféré.
Pour de meilleurs résultats, personnalisez les espaces réservés (indiqués par des crochets ou des majuscules) selon vos besoins.
Références
- Catégorie: Prompts coding
- Source: https://x.com/eyishazyer/status/2073109263514505488
Discussion
0 commentaires