构建一个完整的创业公司管理系统,在一个HTML文件中
来自 Wikiprompt,自由的提示词百科全书
构建一个完整的创业公司管理系统,在一个HTML文件中 一份全面的提示词,用于生成一个包含仪表盘、任务、发布计划、营销、指标等内容的完整功能的创业管理系统,作为单个HTML文件。
提示词内容收藏
🌐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LaunchOS · CEO & product manager</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}
:root {
--bg: #f8fafc;
--surface: #ffffff;
--text: #0f172a;
--muted: #64748b;
--border: #e2e8f0;
--primary: #4f46e5;
--primary-soft: #eef2ff;
--accent: #0ea5e9;
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;
--shadow: 0 4px 12px rgba(0,0,0,0.04);
--radius: 16px;
--transition: 0.2s ease;
}
body.dark {
--bg: #0b1120;
--surface: #1e293b;
--text: #e2e8f0;
--muted: #94a3b8;
--border: #334155;
--primary: #818cf8;
--primary-soft: #1e1b4b;
--shadow: 0 4px 16px rgba(0,0,0,0.3);
}
body {
background: var(--bg);
color: var(--text);
transition: background 0.3s, color 0.3s;
display: flex;
min-height: 100vh;
font-size: 14px;
}
/* sidebar */
.sidebar {
width: 240px;
background: var(--surface);
border-right: 1px solid var(--border);
padding: 24px 16px;
display: flex;
flex-direction: column;
gap: 8px;
position: sticky;
top: 0;
height: 100vh;
transition: background 0.3s;
}
.sidebar .logo {
font-weight: 700;
font-size: 20px;
letter-spacing: -0.02em;
padding: 8px 12px;
margin-bottom: 24px;
color: var(--primary);
}
.nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 12px;
color: var(--muted);
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
border: none;
background: transparent;
width: 100%;
text-align: left;
font-size: 14px;
}
.nav-item:hover {
background: var(--primary-soft);
color: var(--primary);
}
.nav-item.active {
background: var(--primary);
color: white;
}
.nav-item svg {
width: 18px;
height: 18px;
}
.sidebar-footer {
margin-top: auto;
padding: 12px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--muted);
}
/* main */
.main {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.topbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 16px 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
transition: background 0.3s;
}
.topbar .countdown {
background: var(--primary-soft);
padding: 6px 14px;
border-radius: 40px;
font-weight: 600;
color: var(--primary);
font-size: 13px;
}
.topbar-actions {
display: flex;
gap: 12px;
align-items: center;
}
.btn-icon {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 8px 12px;
cursor: pointer;
color: var(--text);
font-weight: 500;
transition: 0.2s;
}
.btn-icon:hover {
background: var(--primary-soft);
border-color: var(--primary);
}
.content {
padding: 32px;
overflow-y: auto;
flex: 1;
}
.card {
background: var(--surface);
border-radius: var(--radius);
padding: 24px;
box-shadow: var(--shadow);
border: 1px solid var(--border);
margin-bottom: 24px;
transition: background 0.3s, border 0.3s;
}
.card h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.metric {
background: var(--surface);
border-radius: 14px;
padding: 16px;
border: 1px solid var(--border);
}
.metric .label {
color: var(--muted);
font-size: 13px;
}
.metric .value {
font-size: 28px;
font-weight: 700;
margin-top: 4px;
}
.progress-bar {
height: 8px;
background: var(--border);
border-radius: 20px;
overflow: hidden;
margin: 12px 0;
}
.progress-fill {
height: 100%;
background: var(--primary);
border-radius: 20px;
transition: width 0.4s;
}
.task-columns {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.task-col {
background: var(--bg);
border-radius: 12px;
padding: 12px;
min-height: 200px;
}
.task-col h4 {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--muted);
margin-bottom: 12px;
}
.task-item {
background: var(--surface);
border-radius: 10px;
padding: 12px;
margin-bottom: 8px;
border: 1px solid var(--border);
cursor: grab;
transition: 0.2s;
}
.task-item:hover {
border-color: var(--primary);
box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.tag {
display: inline-block;
padding: 4px 8px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
background: var(--primary-soft);
color: var(--primary);
}
.timeline-item {
display: flex;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.timeline-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--primary);
margin-top: 4px;
}
.copy-block {
background: var(--bg);
border-radius: 12px;
padding: 16px;
margin-bottom: 12px;
border: 1px solid var(--border);
}
.btn {
background: var(--primary);
color: white;
border: none;
padding: 8px 16px;
border-radius: 10px;
font-weight: 500;
cursor: pointer;
transition: 0.2s;
}
.btn-outline {
background: transparent;
border: 1px solid var(--border);
color: var(--text);
}
.btn-outline:hover {
border-color: var(--primary);
color: var(--primary);
}
input, textarea, select {
background: var(--bg);
border: 1px solid var(--border);
padding: 10px 14px;
border-radius: 12px;
color: var(--text);
width: 100%;
margin-bottom: 12px;
font-size: 14px;
}
input:focus, textarea:focus {
outline: 2px solid var(--primary);
border-color: transparent;
}
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.hidden { display: none; }
.note-item {
background: var(--bg);
padding: 12px;
border-radius: 12px;
margin-bottom: 8px;
border-left: 4px solid var(--primary);
}
.color-dot {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
margin-right: 6px;
}
@media (max-width: 1000px) {
.grid-2, .grid-3, .task-columns { grid-template-columns: 1fr; }
.sidebar { width: 200px; }
}
</style>
</head>
<body>
<!-- sidebar -->
<aside class="sidebar" id="sidebar">
<div class="logo">⚡ LaunchOS</div>
<button class="nav-item active" data-view="dashboard">📊 Dashboard</button>
<button class="nav-item" data-view="product">📦 Product</button>
<button class="nav-item" data-view="tasks">✅ Tasks</button>
<button class="nav-item" data-view="launch">🚀 Launch plan</button>
<button class="nav-item" data-view="copy">✍️ Copy</button>
<button class="nav-item" data-view="marketing">📣 Marketing</button>
<button class="nav-item" data-view="metrics">📈 Metrics</button>
<button class="nav-item" data-view="notes">📝 Notes</button>
<div class="sidebar-footer">
<div style="display:flex; gap:8px; align-items:center;">
<span>💾</span> <span>localStorage</span>
</div>
</div>
</aside>
<!-- main -->
<div class="main">
<div class="topbar">
<div style="font-weight:600; font-size:16px;">🚀 Startup OS</div>
<div style="display:flex; gap:16px; align-items:center;">
<div class="countdown" id="countdownDisplay">⏳ launch in 12d</div>
<button class="btn-icon" id="themeToggle">🌙 dark</button>
<button class="btn-icon" id="exportBtn">⬇️ export</button>
<button class="btn-icon" id="importBtn">⬆️ import</button>
</div>
</div>
<div class="content" id="appContent">
<!-- dynamic views injected -->
</div>
</div>
<script>
(function(){
// ---------- state ----------
const defaultState = {
product: {
name: 'NovaBoard',
tagline: 'AI-powered analytics for indie hackers',
audience: 'Solo founders & small teams',
problem: 'Spreadsheets are too slow for real-time decisions',
features: ['Real-time dashboards', 'AI insights', 'Slack integration'],
revenueModel: 'Subscription $29/mo',
launchDate: new Date(Date.now() + 12*86400000).toISOString().slice(0,10)
},
tasks: [
{ id: 1, title: 'Design landing page', desc: 'Hero + waitlist', priority: 'high', status: 'todo', assignee: 'AI', due: '2025-04-10', deps: [] },
{ id: 2, title: 'Build MVP core', desc: 'Auth + dashboard', priority: 'high', status: 'inprogress', assignee: 'Dev', due: '2025-04-15', deps: [1] },
{ id: 3, title: 'Write launch email', desc: 'Sequence for waitlist', priority: 'medium', status: 'review', assignee: 'AI', due: '2025-04-12', deps: [] },
{ id: 4, title: 'Setup analytics', desc: 'Mixpanel + GA4', priority: 'medium', status: 'done', assignee: 'Dev', due: '2025-04-05', deps: [] },
{ id: 5, title: 'Create social posts', desc: 'Linkedin + X', priority: 'low', status: 'todo', assignee: 'AI', due: '2025-04-18', deps: [] },
],
milestones: [
{ phase: 'Product Development', tasks: ['Build MVP', 'Beta test'], done: false },
{ phase: 'Marketing Prep', tasks: ['Landing page', 'Email list'], done: false },
{ phase: 'Pre-Launch', tasks: ['Waitlist', 'Social buzz'], done: false },
{ phase: 'Launch Day', tasks: ['Product Hunt', 'Email blast'], done: false },
{ phase: 'Post-Launch', tasks: ['Retention', 'Iterate'], done: false }
],
copy: {
description: 'NovaBoard turns your raw data into actionable insights with AI.',
tagline: 'Decisions faster, backed by data.',
pitch: 'Stop guessing. NovaBoard gives you real-time clarity.',
valueProp: 'Save 10 hours/week with automated reporting.',
email: 'Hey {{user}}, ready to launch smarter?',
social: '🚀 We are building NovaBoard – join the waitlist!'
},
marketing: [
{ channel: 'Twitter / X', status: 'inprogress', notes: 'Post 3x/week' },
{ channel: 'LinkedIn', status: 'todo', notes: 'Founder story' },
{ channel: 'Email', status: 'todo', notes: 'Welcome sequence' },
{ channel: 'Product Hunt', status: 'todo', notes: 'Launch day' }
],
metrics: { revenue: 1200, users: 340, signups: 89, engagement: 42 },
goals: { revenue: 5000, users: 1000, signups: 300, engagement: 70 },
notes: [
{ id: 1, text: 'Idea: referral program for early users', tag: 'Marketing' },
{ id: 2, text: 'Interview 5 beta users', tag: 'Product' }
],
activity: [
{ text: 'Task "Design landing page" moved to In Progress', time: '2h ago' },
{ text: 'New note added: referral program', time: '5h ago' },
{ text: 'Goal updated: revenue target $5k', time: '1d ago' }
],
launchReadiness: 65,
darkMode: false,
primaryColor: '#4f46e5'
};
let state = JSON.parse(localStorage.getItem('launchOS_state')) || defaultState;
let currentView = 'dashboard';
// ---------- helpers ----------
function save() {
localStorage.setItem('launchOS_state', JSON.stringify(state));
}
function getCountdown() {
const launch = new Date(state.product.launchDate);
const now = new Date();
const diff = Math.ceil((launch - now) / (1000*60*60*24));
return diff > 0 ? `${diff}d` : 'launched';
}
// ---------- render ----------
function render() {
document.getElementById('countdownDisplay').innerText = `⏳ launch in ${getCountdown()}`;
const app = document.getElementById('appContent');
let html = '';
switch(currentView) {
case 'dashboard': html = renderDashboard(); break;
case 'product': html = renderProduct(); break;
case 'tasks': html = renderTasks(); break;
case 'launch': html = renderLaunch(); break;
case 'copy': html = renderCopy(); break;
case 'marketing': html = renderMarketing(); break;
case 'metrics': html = renderMetrics(); break;
case 'notes': html = renderNotes(); break;
}
app.innerHTML = html;
attachEvents();
}
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 = state.launchReadiness;
return `
<div class="grid-2">
<div class="card">
<h3>📋 Launch readiness</h3>
<div class="progress-bar"><div class="progress-fill" style="width:${readiness}%"></div></div>
<p style="color:var(--muted)">${readiness}% complete</p>
<div style="display:flex; gap:16px; margin-top:16px;">
<div class="metric"><div class="label">Revenue</div><div class="value">$${state.metrics.revenue}</div></div>
<div class="metric"><div class="label">Users</div><div class="value">${state.metrics.users}</div></div>
<div class="metric"><div class="label">Sign-ups</div><div class="value">${state.metrics.signups}</div></div>
</div>
</div>
<div class="card">
<h3>⚡ Recent activity</h3>
${state.activity.map(a=>`<div style="padding:8px 0; border-bottom:1px solid var(--border)"><span>${a.text}</span><div style="font-size:12px;color:var(--muted)">${a.time}</div></div>`).join('')}
</div>
</div>
<div class="card">
<h3>📌 Quick add</h3>
<div style="display:flex; gap:12px; flex-wrap:wrap;">
<button class="btn" onclick="quickAddTask()">+ Task</button>
<button class="btn btn-outline" onclick="quickAddNote()">+ Note</button>
<button class="btn btn-outline" onclick="quickMilestone()">+ Milestone</button>
</div>
</div>
<div class="card">
<h3>📊 Tasks by status</h3>
<div style="display:flex; gap:24px; justify-content:space-around;">
<div><span class="tag">To Do</span> ${todo}</div>
<div><span class="tag">In Progress</span> ${inprog}</div>
<div><span class="tag">Review</span> ${review}</div>
<div><span class="tag">Done</span> ${done}</div>
</div>
</div>
`;
}
function renderProduct() {
const p = state.product;
return `
<div class="card">
<h3>📦 Product definition</h3>
<input id="prodName" value="${p.name}" placeholder="Product name">
<input id="prodTagline" value="${p.tagline}" placeholder="One-line description">
<input id="prodAudience" value="${p.audience}" placeholder="Target audience">
<textarea id="prodProblem" rows="2">${p.problem}</textarea>
<input id="prodFeatures" value="${p.features.join(', ')}" placeholder="Key features (comma separated)">
<input id="prodRevenue" value="${p.revenueModel}" placeholder="Revenue model">
<input id="prodLaunch" type="date" value="${p.launchDate}">
<button class="btn" onclick="updateProduct()">Update product</button>
</div>
<div class="card">
<h3>📄 Product brief</h3>
<div style="background:var(--bg); padding:16px; border-radius:12px;">
<h2>${p.name}</h2>
<p><strong>Tagline:</strong> ${p.tagline}</p>
<p><strong>Audience:</strong> ${p.audience}</p>
<p><strong>Problem:</strong> ${p.problem}</p>
<p><strong>Features:</strong> ${p.features.join(', ')}</p>
<p><strong>Revenue:</strong> ${p.revenueModel}</p>
<p><strong>Launch:</strong> ${p.launchDate}</p>
</div>
</div>
`;
}
function renderTasks() {
const cols = ['todo','inprogress','review','done'];
const labels = ['To Do','In Progress','Review','Done'];
return `
<div class="card">
<h3>✅ Task board <span style="font-size:14px; font-weight:400;">(drag to change status)</span></h3>
<div class="task-columns">
${cols.map((c,i)=>`
<div class="task-col" data-col="${c}">
<h4>${labels[i]}</h4>
${state.tasks.filter(t=>t.status===c).map(t=>`
<div class="task-item" draggable="true" data-task-id="${t.id}" data-status="${c}">
<strong>${t.title}</strong>
<div style="font-size:12px; color:var(--muted)">${t.desc}</div>
<div style="display:flex; gap:8px; margin-top:8px;">
<span class="tag">${t.priority}</span>
<span class="tag">${t.assignee}</span>
</div>
</div>
`).join('')}
</div>
`).join('')}
</div>
</div>
<div class="card">
<h3>➕ Add custom task</h3>
<input id="newTaskTitle" placeholder="Task title">
<input id="newTaskDesc" placeholder="Description">
<select id="newTaskPriority"><option>high</option><option>medium</option><option>low</option></select>
<button class="btn" onclick="addCustomTask()">Add task</button>
</div>
`;
}
function renderLaunch() {
return `
<div class="card">
<h3>🚀 Launch timeline</h3>
${state.milestones.map((m,i)=>`
<div class="timeline-item">
<div class="timeline-dot" style="background:${m.done?'var(--success)':'var(--primary)'}"></div>
<div style="flex:1">
<div style="display:flex; justify-content:space-between;">
<strong>${m.phase}</strong>
<span class="tag">${m.done?'✓ done':'pending'}</span>
</div>
<div style="color:var(--muted); font-size:13px;">${m.tasks.join(' · ')}</div>
</div>
</div>
`).join('')}
</div>
<div class="card">
<h3>⏳ Countdown</h3>
<div style="font-size:48px; font-weight:800; color:var(--primary);">${getCountdown()}</div>
<p>until launch day (${state.product.launchDate})</p>
</div>
`;
}
function renderCopy() {
const c = state.copy;
return `
<div class="card">
<h3>✍️ Generated copy</h3>
<div class="copy-block"><strong>Description:</strong> ${c.description}</div>
<div class="copy-block"><strong>Tagline:</strong> ${c.tagline}</div>
<div class="copy-block"><strong>Elevator pitch:</strong> ${c.pitch}</div>
<div class="copy-block"><strong>Value prop:</strong> ${c.valueProp}</div>
<div class="copy-block"><strong>Email:</strong> ${c.email}</div>
<div class="copy-block"><strong>Social:</strong> ${c.social}</div>
<button class="btn" onclick="regenerateCopy()">🔄 Regenerate</button>
</div>
`;
}
function renderMarketing() {
return `
<div class="card">
<h3>📣 Outreach channels</h3>
${state.marketing.map((m,i)=>`
<div style="display:flex; justify-content:space-between; padding:12px; border-bottom:1px solid var(--border);">
<div><strong>${m.channel}</strong><div style="font-size:12px;color:var(--muted)">${m.notes}</div></div>
<div><span class="tag">${m.status}</span></div>
</div>
`).join('')}
</div>
`;
}
function renderMetrics() {
const m = state.metrics, g = state.goals;
return `
<div class="grid-2">
<div class="card"><h3>📈 Metrics</h3>
<div>Revenue: $${m.revenue} / $${g.revenue}</div>
<div>Users: ${m.users} / ${g.users}</div>
<div>Sign-ups: ${m.signups} / ${g.signups}</div>
<div>Engagement: ${m.engagement}% / ${g.engagement}%</div>
</div>
<div class="card"><h3>🎯 Update metrics</h3>
<input id="metricRevenue" value="${m.revenue}" placeholder="Revenue">
<input id="metricUsers" value="${m.users}" placeholder="Users">
<button class="btn" onclick="updateMetrics()">Update</button>
</div>
</div>
`;
}
function renderNotes() {
return `
<div class="card">
<h3>📝 Notes & brainstorming</h3>
<input id="noteText" placeholder="Write a note...">
<select id="noteTag"><option>Product</option><option>Marketing</option><option>Launch</option><option>Operations</option></select>
<button class="btn" onclick="addNote()">Add note</button>
<div style="margin-top:16px;">
${state.notes.map(n=>`<div class="note-item"><span class="tag">${n.tag}</span> ${n.text}</div>`).join('')}
</div>
</div>
`;
}
// ---------- actions ----------
function attachEvents() {
document.querySelectorAll('.nav-item').forEach(btn=>{
btn.addEventListener('click', (e)=>{
document.querySelectorAll('.nav-item').forEach(b=>b.classList.remove('active'));
btn.classList.add('active');
currentView = btn.dataset.view;
render();
});
});
// drag & drop
document.querySelectorAll('.task-item').forEach(item=>{
item.addEventListener('dragstart', (e)=>{
e.dataTransfer.setData('text/plain', item.dataset.taskId);
});
});
document.querySelectorAll('.task-col').forEach(col=>{
col.addEventListener('dragover', e=>e.preventDefault());
col.addEventListener('drop', (e)=>{
e.preventDefault();
const taskId = e.dataTransfer.getData('text/plain');
const newStatus = col.dataset.col;
const task = state.tasks.find(t=>t.id == taskId);
if(task) {
task.status = newStatus;
save(); render();
}
});
});
// theme toggle
const themeBtn = document.getElementById('themeToggle');
if(themeBtn) themeBtn.addEventListener('click', ()=>{
state.darkMode = !state.darkMode;
document.body.classList.toggle('dark', state.darkMode);
save(); render();
});
// export/import
document.getElementById('exportBtn').addEventListener('click', ()=>{
const blob = new Blob([JSON.stringify(state,null,2)], {type:'application/json'});
const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download='launchos-backup.json'; a.click();
});
document.getElementById('importBtn').addEventListener('click', ()=>{
const input = document.createElement('input'); input.type='file'; input.accept='application/json';
input.onchange = (e)=>{
const file = e.target.files[0]; if(!file) return;
const reader = new FileReader();
reader.onload = (ev)=>{
try { state = JSON.parse(ev.target.result); save(); render(); } catch(err){ alert('invalid json'); }
};
reader.readAsText(file);
};
input.click();
});
}
// global functions
window.quickAddTask = function(){ state.tasks.push({id:Date.now(), title:'New task', desc:'', priority:'medium', status:'todo', assignee:'AI', due:'2025-05-01', deps:[]}); save(); render(); };
window.quickAddNote = function(){ state.notes.push({id:Date.now(), text:'New idea', tag:'Product'}); save(); render(); };
window.quickMilestone = function(){ state.milestones.push({phase:'New phase', tasks:['task'], done:false}); save(); render(); };
window.updateProduct = function(){
const p = state.product;
p.name = document.getElementById('prodName').value;
p.tagline = document.getElementById('prodTagline').value;
p.audience = document.getElementById('prodAudience').value;
p.problem = document.getElementById('prodProblem').value;
p.features = document.getElementById('prodFeatures').value.split(',').map(s=>s.trim());
p.revenueModel = document.getElementById('prodRevenue').value;
p.launchDate = document.getElementById('prodLaunch').value;
save(); render();
};
window.addCustomTask = function(){
const title = document.getElementById('newTaskTitle').value;
if(!title) return;
state.tasks.push({id:Date.now(), title, desc:document.getElementById('newTaskDesc').value, priority:document.getElementById('newTaskPriority').value, status:'todo', assignee:'AI', due:'2025-05-01', deps:[]});
save(); render();
};
window.regenerateCopy = function(){
state.copy.description = state.product.name + ' helps ' + state.product.audience + ' with ' + state.product.problem;
state.copy.tagline = 'Launch smarter with ' + state.product.name;
state.copy.pitch = 'Stop guessing. ' + state.product.name + ' gives you clarity.';
state.copy.valueProp = 'Save 10 hours/week with ' + state.product.name;
state.copy.email = 'Hey {{user}}, ready to launch ' + state.product.name + '?';
state.copy.social = '🚀 We are building ' + state.product.name + ' – join the waitlist!';
save(); render();
};
window.updateMetrics = function(){
state.metrics.revenue = parseFloat(document.getElementById('metricRevenue').value) || 0;
state.metrics.users = parseFloat(document.getElementById('metricUsers').value) || 0;
save(); render();
};
window.addNote = function(){
const text = document.getElementById('noteText').value;
if(!text) return;
const tag = document.getElementById('noteTag').value;
state.notes.push({id:Date.now(), text, tag});
save(); render();
};
// init
document.body.classList.toggle('dark', state.darkMode);
render();
})();
</script>
</body>
</html>
用法
此提示词专为 coding 设计。复制上方内容并粘贴到你常用的 AI 工具中。
为获得最佳效果,可将占位符(方括号或大写字母标示)替换为你的具体需求。
讨论
0 条评论