Erstelle ein vollständiges Startup-Management-System in einer einzigen HTML-Datei

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LaunchOS · startup command center</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } :root { --bg: #f4f6fb; --surface: #ffffff; --surface-2: #eef1f7; --text: #1e293b; --text-muted: #64748b; --border: #e2e8f0; --primary: #4f46e5; --primary-soft: #eef2ff; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --shadow: 0 8px 20px rgba(0,0,0,0.04); --radius: 16px; --transition: 0.2s ease; } body.dark { --bg: #0b1220; --surface: #151e2f; --surface-2: #1e293b; --text: #e2e8f0; --text-muted: #94a3b8; --border: #2d3a4f; --primary: #818cf8; --primary-soft: #1e2b4a; --shadow: 0 8px 20px rgba(0,0,0,0.5); } body { background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; font-size: 14px; line-height: 1.5; display: flex; height: 100vh; overflow: hidden; } /* layout */ .sidebar { width: 240px; background: var(--surface); border-right: 1px solid var(--border); padding: 20px 12px; display: flex; flex-direction: column; gap: 8px; transition: background 0.3s; } .sidebar .logo { font-weight: 700; font-size: 20px; padding: 8px 12px 20px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; color: var(--primary); } .nav-item { padding: 10px 14px; border-radius: 10px; cursor: pointer; font-weight: 500; color: var(--text-muted); transition: all var(--transition); display: flex; align-items: center; gap: 10px; } .nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; } .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; justify-content: space-between; padding: 0 24px; flex-shrink: 0; } .topbar .countdown { font-weight: 600; background: var(--primary-soft); padding: 6px 14px; border-radius: 40px; color: var(--primary); } .content { flex: 1; overflow-y: auto; padding: 24px; } /* cards & grid */ .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } .card { background: var(--surface); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); border: 1px solid var(--border); transition: background 0.3s; } .card h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; } .metric-value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; } .progress-bar { height: 8px; background: var(--surface-2); border-radius: 20px; margin: 12px 0 8px; overflow: hidden; } .progress-fill { height: 100%; background: var(--primary); border-radius: 20px; width: 65%; } .btn { background: var(--primary); color: white; border: none; padding: 8px 16px; border-radius: 40px; font-weight: 500; cursor: pointer; font-size: 13px; transition: 0.2s; border: 1px solid transparent; } .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); } .btn-outline:hover { background: var(--surface-2); } .btn-sm { padding: 6px 12px; font-size: 12px; } .badge { background: var(--surface-2); padding: 4px 10px; border-radius: 40px; font-size: 12px; font-weight: 500; } .task-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .task-col { background: var(--surface-2); border-radius: 14px; padding: 12px; min-height: 200px; } .task-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin-bottom: 12px; } .task-item { background: var(--surface); padding: 12px; border-radius: 12px; margin-bottom: 8px; border: 1px solid var(--border); cursor: grab; box-shadow: 0 2px 6px rgba(0,0,0,0.02); } .task-item .priority { font-size: 11px; font-weight: 600; color: var(--warning); } .timeline { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; } .phase { min-width: 180px; background: var(--surface); border-radius: 14px; padding: 16px; border: 1px solid var(--border); } .phase .phase-title { font-weight: 600; margin-bottom: 10px; } .note-tag { background: var(--primary-soft); padding: 2px 8px; border-radius: 20px; font-size: 11px; color: var(--primary); } .flex-between { display: flex; justify-content: space-between; align-items: center; } .mt-16 { margin-top: 16px; } .mb-16 { margin-bottom: 16px; } .text-muted { color: var(--text-muted); } .text-primary { color: var(--primary); } /* dark mode toggle */ .toggle { background: var(--surface-2); border-radius: 40px; padding: 4px; display: flex; gap: 4px; cursor: pointer; } .toggle span { padding: 4px 12px; border-radius: 30px; font-size: 13px; } .toggle .active { background: var(--primary); color: white; } /* drag & drop visual */ .dragging { opacity: 0.5; } /* responsive */ @media (max-width: 1000px) { .grid-4, .task-columns { grid-template-columns: repeat(2, 1fr); } .sidebar { width: 200px; } } /* hidden sections */ .hidden-section { display: none !important; } </style> </head> <body> <div class="sidebar" id="sidebar"> <div class="logo">⚡ LaunchOS</div> <div class="nav-item active" data-view="dashboard">📊 Dashboard</div> <div class="nav-item" data-view="product">📦 Product</div> <div class="nav-item" data-view="tasks">✅ Tasks</div> <div class="nav-item" data-view="launch">🚀 Launch plan</div> <div class="nav-item" data-view="copy">✍️ Copy & content</div> <div class="nav-item" data-view="marketing">📣 Marketing</div> <div class="nav-item" data-view="metrics">📈 Metrics</div> <div class="nav-item" data-view="notes">📝 Notes</div> <div style="flex:1"></div> <div style="padding: 12px 8px; font-size: 12px; color: var(--text-muted);">v1.0 · local</div> </div> <div class="main"> <div class="topbar"> <div style="font-weight:600;">🚀 launchOS</div> <div style="display: flex; gap: 16px; align-items: center;"> <span class="countdown" id="globalCountdown">⏳ 14d 06h</span> <div class="toggle" id="themeToggle"> <span class="active" data-theme="light">☀️</span> <span data-theme="dark">🌙</span> </div> </div> </div> <div class="content" id="appContent"> <!-- dynamic views injected here --> </div> </div> <script> (function(){ // ---------- STATE & PERSISTENCE ---------- const DEFAULT_STATE = { product: { name: 'NovaBoard', tagline: 'AI-powered analytics for indie hackers', audience: 'Solo founders & small teams', problem: 'Too much data, no clear decisions', features: ['Real-time dashboards', 'AI insights', 'Integrations', 'Collaboration'], revenueModel: 'Subscription (SaaS)', launchDate: new Date(Date.now() + 14*24*3600*1000).toISOString().slice(0,10) }, tasks: [ { id: 't1', title: 'Finalize landing page', desc: 'Copy + design', priority: 'high', status: 'todo', assignee: 'AI', due: '2025-04-10' }, { id: 't2', title: 'Set up Stripe payments', desc: 'Billing', priority: 'high', status: 'inprogress', assignee: 'Dev', due: '2025-04-12' }, { id: 't3', title: 'Write launch email', desc: 'Email sequence', priority: 'medium', status: 'review', assignee: 'AI', due: '2025-04-08' }, { id: 't4', title: 'Beta user feedback', desc: 'Interview 5 users', priority: 'low', status: 'done', assignee: 'PM', due: '2025-04-01' }, ], milestones: [ { phase: 'Product Development', items: ['Build MVP', 'Internal testing'] }, { phase: 'Marketing Prep', items: ['Create content', 'Social setup'] }, { phase: 'Pre-Launch', items: ['Landing page', 'Waitlist'] }, { phase: 'Launch Day', items: ['Product Hunt', 'Email blast'] }, { phase: 'Post-Launch', items: ['Monitor metrics', 'Iterate'] } ], copy: { description: 'NovaBoard turns raw analytics into clear decisions.', tagline: 'Stop guessing, start growing.', pitch: 'The analytics dashboard that thinks with you.', valueProp: 'Save 10h/week with AI-driven insights.', email: 'Hey! Meet NovaBoard – your co-pilot for growth.', social: 'Launching soon! 🚀 Get early access.' }, marketing: [ { channel: 'Twitter / X', status: 'inprogress', note: 'Build audience' }, { channel: 'Email', status: 'todo', note: 'Sequence ready' }, { channel: 'Ads', status: 'todo', note: 'Budget $500' }, { channel: 'PR', status: 'notstarted', note: 'Outreach list' } ], metrics: { revenueGoal: 5000, usersGoal: 1000, signups: 340, engagement: 68, revenueActual: 1200 }, notes: [ { id: 'n1', text: 'Idea: referral program', tag: 'Marketing' }, { id: 'n2', text: 'Test onboarding flow', tag: 'Product' } ], activity: [ 'Task "Finalize landing page" moved to In Progress', 'New note added: referral program', 'Launch date set to 14 days from now' ], ui: { theme: 'light', primaryColor: '#4f46e5', hiddenSections: [] } }; let state = JSON.parse(localStorage.getItem('launchOS_state')) || DEFAULT_STATE; // ---------- HELPERS ---------- function saveState() { localStorage.setItem('launchOS_state', JSON.stringify(state)); } function getLaunchCountdown() { const today = new Date(); const launch = new Date(state.product.launchDate); const diff = launch - today; if (diff <= 0) return '🚀 launched!'; const days = Math.floor(diff / (1000*3600*24)); const hours = Math.floor((diff % (1000*3600*24)) / (1000*3600)); return `⏳ ${days}d ${hours}h`; } // ---------- RENDER ---------- const content = document.getElementById('appContent'); const countdownEl = document.getElementById('globalCountdown'); function render() { countdownEl.textContent = getLaunchCountdown(); const currentView = document.querySelector('.nav-item.active')?.dataset.view || 'dashboard'; switch(currentView) { case 'dashboard': renderDashboard(); break; case 'product': renderProduct(); break; case 'tasks': renderTasks(); break; case 'launch': renderLaunch(); break; case 'copy': renderCopy(); break; case 'marketing': renderMarketing(); break; case 'metrics': renderMetrics(); break; case 'notes': renderNotes(); break; default: renderDashboard(); } saveState(); } // ----- DASHBOARD ----- function renderDashboard() { const tasks = state.tasks; const todo = tasks.filter(t=>t.status==='todo').length; const inprog = tasks.filter(t=>t.status==='inprogress').length; const review = tasks.filter(t=>t.status==='review').length; const done = tasks.filter(t=>t.status==='done').length; const readiness = Math.min(100, Math.round((done/tasks.length)*100) + 40); const recent = state.activity.slice(-3).reverse().join(' · '); content.innerHTML = ` <div class="grid-4"> <div class="card"><h3>🚀 launch countdown</h3><div class="metric-value">${getLaunchCountdown()}</div><div class="text-muted">${state.product.launchDate}</div></div> <div class="card"><h3>📋 tasks done</h3><div class="metric-value">${done}/${tasks.length}</div><div class="progress-bar"><div class="progress-fill" style="width:${(done/tasks.length)*100}%"></div></div></div> <div class="card"><h3>🎯 revenue goal</h3><div class="metric-value">$${state.metrics.revenueGoal}</div><div class="text-muted">actual $${state.metrics.revenueActual}</div></div> <div class="card"><h3>📈 readiness</h3><div class="metric-value">${readiness}%</div><div class="progress-bar"><div class="progress-fill" style="width:${readiness}%"></div></div></div> </div> <div class="card"> <h3>⚡ recent activity</h3> <div class="text-muted">${recent || 'no activity yet'}</div> <div style="display:flex; gap:8px; margin-top:16px;"> <button class="btn btn-sm" onclick="quickAddTask()">+ task</button> <button class="btn btn-sm btn-outline" onclick="quickNote()">+ note</button> </div> </div> `; } // ----- PRODUCT ----- function renderProduct() { const p = state.product; content.innerHTML = ` <div class="card"> <h3>📦 product brief</h3> <div style="display:grid; gap:12px;"> <div><strong>Name:</strong> ${p.name}</div> <div><strong>Tagline:</strong> ${p.tagline}</div> <div><strong>Audience:</strong> ${p.audience}</div> <div><strong>Problem:</strong> ${p.problem}</div> <div><strong>Features:</strong> ${p.features.join(', ')}</div> <div><strong>Revenue model:</strong> ${p.revenueModel}</div> <div><strong>Launch date:</strong> ${p.launchDate}</div> </div> <div style="margin-top:16px; display:flex; gap:8px;"> <button class="btn btn-sm" onclick="editProduct()">✏️ edit</button> <button class="btn btn-sm btn-outline" onclick="alert('Product brief copied to clipboard (demo)')">📋 copy brief</button> </div> </div> `; } // ----- TASKS (kanban) ----- function renderTasks() { const cols = [ { key: 'todo', label: '📋 to do' }, { key: 'inprogress', label: '⏳ in progress' }, { key: 'review', label: '👀 review' }, { key: 'done', label: '✅ done' } ]; content.innerHTML = `<div class="task-columns">` + cols.map(col => { const tasks = state.tasks.filter(t=>t.status===col.key); return `<div class="task-col" data-col="${col.key}"> <h4>${col.label} (${tasks.length})</h4> ${tasks.map(t => `<div class="task-item" draggable="true" data-id="${t.id}"> <div><strong>${t.title}</strong></div> <div class="text-muted">${t.desc}</div> <div class="flex-between mt-16"><span class="priority">${t.priority}</span><span>👤 ${t.assignee}</span></div> </div>`).join('')} </div>`; }).join('') + `</div> <button class="btn btn-sm mt-16" onclick="addManualTask()">+ add custom task</button>`; attachDragListeners(); } // ----- LAUNCH PLAN ----- function renderLaunch() { content.innerHTML = `<h3 style="margin-bottom:16px;">🚀 launch timeline</h3><div class="timeline">` + state.milestones.map(m => `<div class="phase"><div class="phase-title">${m.phase}</div>${m.items.map(i=>`<div>• ${i}</div>`).join('')}</div>`).join('') + `</div><div class="card mt-16"><h3>countdown</h3><div class="metric-value">${getLaunchCountdown()}</div></div>`; } // ----- COPY ----- function renderCopy() { const c = state.copy; content.innerHTML = `<div class="card"><h3>✍️ generated copy</h3> <div style="display:grid; gap:12px;"> <div><strong>Description:</strong> ${c.description}</div> <div><strong>Tagline:</strong> ${c.tagline}</div> <div><strong>Elevator pitch:</strong> ${c.pitch}</div> <div><strong>Value prop:</strong> ${c.valueProp}</div> <div><strong>Email:</strong> ${c.email}</div> <div><strong>Social:</strong> ${c.social}</div> </div> <div style="margin-top:16px;"><button class="btn btn-sm" onclick="alert('Copy exported as .txt (demo)')">⬇️ export text</button></div> </div>`; } // ----- MARKETING ----- function renderMarketing() { content.innerHTML = `<div class="card"><h3>📣 outreach channels</h3>` + state.marketing.map(m => `<div class="flex-between" style="padding:8px 0; border-bottom:1px solid var(--border);"> <span><strong>${m.channel}</strong> <span class="badge">${m.status}</span></span> <span class="text-muted">${m.note}</span> </div>`).join('') + `<button class="btn btn-sm mt-16" onclick="alert('suggest activities (demo)')">✨ auto-suggest</button></div>`; } // ----- METRICS ----- function renderMetrics() { const m = state.metrics; content.innerHTML = `<div class="grid-4"> <div class="card"><h3>revenue goal</h3><div class="metric-value">$${m.revenueGoal}</div><div>actual $${m.revenueActual}</div></div> <div class="card"><h3>users goal</h3><div class="metric-value">${m.usersGoal}</div><div>signups ${m.signups}</div></div> <div class="card"><h3>engagement</h3><div class="metric-value">${m.engagement}%</div></div> <div class="card"><h3>projected vs actual</h3><div>📈 ${Math.round((m.revenueActual/m.revenueGoal)*100)}%</div></div> </div>`; } // ----- NOTES ----- function renderNotes() { content.innerHTML = `<div class="card"><h3>📝 notes & brainstorming</h3> <div style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;"> ${state.notes.map(n => `<span class="badge note-tag">${n.tag}</span> <span>${n.text}</span>`).join('<br>')} </div> <button class="btn btn-sm" onclick="quickNote()">+ add note</button> </div>`; } // ---------- ACTIONS ---------- window.quickAddTask = function() { const title = prompt('Task title'); if(title) { state.tasks.push({ id: 't'+Date.now(), title, desc:'', priority:'medium', status:'todo', assignee:'AI', due:'' }); state.activity.unshift(`Task "${title}" added`); render(); } }; window.quickNote = function() { const text = prompt('Note:'); if(text) { state.notes.push({ id:'n'+Date.now(), text, tag:'Product' }); state.activity.unshift('New note added'); render(); } }; window.addManualTask = function() { const title = prompt('Custom task title'); if(title) { state.tasks.push({ id:'t'+Date.now(), title, desc:'manual', priority:'low', status:'todo', assignee:'human', due:'' }); render(); } }; window.editProduct = function() { const name = prompt('Product name', state.product.name); if(name) state.product.name = name; state.product.tagline = prompt('Tagline', state.product.tagline) || state.product.tagline; render(); }; // drag & drop function attachDragListeners() { const items = document.querySelectorAll('.task-item'); const cols = document.querySelectorAll('.task-col'); items.forEach(item => { item.addEventListener('dragstart', e => { e.dataTransfer.setData('text/plain', item.dataset.id); item.classList.add('dragging'); }); item.addEventListener('dragend', () => item.classList.remove('dragging')); }); cols.forEach(col => { col.addEventListener('dragover', e => e.preventDefault()); col.addEventListener('drop', e => { e.preventDefault(); const id = e.dataTransfer.getData('text/plain'); const task = state.tasks.find(t=>t.id===id); if(task) { task.status = col.dataset.col; state.activity.unshift(`Task "${task.title}" moved to ${col.dataset.col}`); render(); } }); }); } // ---------- NAVIGATION ---------- document.querySelectorAll('.nav-item').forEach(item => { item.addEventListener('click', function() { document.querySelectorAll('.nav-item').forEach(i=>i.classList.remove('active')); this.classList.add('active'); render(); }); }); // ---------- THEME ---------- const themeToggle = document.getElementById('themeToggle'); themeToggle.addEventListener('click', (e) => { const theme = e.target.closest('span')?.dataset.theme; if(theme) { document.body.classList.toggle('dark', theme==='dark'); state.ui.theme = theme; document.querySelectorAll('#themeToggle span').forEach(s=>s.classList.toggle('active', s.dataset.theme===theme)); saveState(); } }); // init theme if(state.ui.theme==='dark') { document.body.classList.add('dark'); document.querySelectorAll('#themeToggle span').forEach(s=>s.classList.toggle('active', s.dataset.theme==='dark')); } // initial render render(); })(); </script> </body> </html>