.btn-secondary { background: var(--card); border: 1px solid var(--border); color: var(--fg); transition: all 0.2s ease; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Focus Flow</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> <style> :root { --bg: #0a0a0f; --bg-elevated: #12121a; --fg: #e8e8ed; --muted: #6b6b7a; --accent: #00d4aa; --accent-dim: rgba(0, 212, 170, 0.15); --card: #16161f; --border: #2a2a3a; --danger: #ff6b6b; } yoosfuhl unblocked
<script> // ============ DATA ============ const initialTasks = [ { id: 1, text: 'Review project proposal', completed: false }, { id: 2, text: 'Reply to client emails', completed: false }, ]; 'task-completed' : ''}">${escapeHtml(task
.sound-toggle.active::after { transform: translateX(20px); } 'task-completed' : ''}">
emptyState.style.display = 'none'; taskList.innerHTML = tasks.map(task => ` <div class="flex items-center gap-3 p-3 rounded-xl hover:bg-[var(--bg)] transition-colors group"> <input type="checkbox" class="task-check" ${task.completed ? 'checked' : ''} data-id="${task.id}" aria-label="Mark task as ${task.completed ? 'incomplete' : 'complete'}" > <span class="text-sm flex-1 ${task.completed ? 'task-completed' : ''}">${escapeHtml(task.text)}</span> <button class="opacity-0 group-hover:opacity-100 text-[var(--muted)] hover:text-[var(--danger)] transition-all p-1" data-delete="${task.id}" aria-label="Delete task" > <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <line x1="18" y1="6" x2="6" y2="18"/> <line x1="6" y1="6" x2="18" y2="18"/> </svg> </button> </div> `).join('');