Mission Control

documentmission-control.html2/24/2026, 3:19:17 AM

<!DOCTYPE html>

<head>

<title>Mission Control | Tim's Command Center</title>

<style>

:root {

--bg-primary: #050508;

--bg-secondary: #0a0a0f;

--bg-card: rgba(20, 20, 30, 0.6);

--bg-card-hover: rgba(25, 25, 40, 0.7);

--border-subtle: rgba(255, 255, 255, 0.06);

--border-accent: rgba(255, 255, 255, 0.12);

--text-primary: #ffffff;

--text-secondary: rgba(255, 255, 255, 0.6);

--text-muted: rgba(255, 255, 255, 0.4);

--accent-green: #22c55e;

--accent-green-dim: rgba(34, 197, 94, 0.15);

--accent-green-glow: rgba(34, 197, 94, 0.4);

--danger: #ef4444;

--warning: #f59e0b;

--priority-high: #ef4444;

--priority-medium: #f59e0b;

--priority-low: #22c55e;

--header-height: 72px;

--radius-sm: 8px;

--radius-md: 12px;

--radius-lg: 16px;

}

* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.fade-in-up { animation: fadeInUp 0.5s ease forwards; }

.delay-1 { animation-delay: 0.1s; }

.delay-2 { animation-delay: 0.2s; }

.delay-3 { animation-delay: 0.3s; }

.delay-4 { animation-delay: 0.4s; }

.app-container { min-height: 100vh; background: radial-gradient(ellipse at 20% 0%, rgba(34, 197, 94, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(34, 197, 94, 0.05) 0%, transparent 50%), var(--bg-primary); }

.main-content { max-width: 1600px; margin: 0 auto; padding: calc(var(--header-height) + 2.5rem) 2.5rem 2.5rem; }

.header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); background: rgba(5, 5, 8, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem; z-index: 1000; }

.logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; }

.logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--accent-green), #16a34a); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }

.header-center { display: flex; gap: 4px; background: var(--bg-secondary); padding: 4px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }

.tab-btn { padding: 0.5rem 1.5rem; background: transparent; border: none; color: var(--text-secondary); font-family: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer; border-radius: var(--radius-sm); transition: all 150ms ease; }

.tab-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); }

.tab-btn.active { background: var(--accent-green-dim); color: var(--accent-green); }

.header-right { display: flex; align-items: center; gap: 1.5rem; }

.search-container { position: relative; }

.search-input { width: 280px; padding: 0.5rem 1rem 0.5rem 2.5rem; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary); font-family: inherit; font-size: 0.875rem; outline: none; transition: all 150ms ease; }

.search-input::placeholder { color: var(--text-muted); }

.search-input:focus { border-color: var(--accent-green); box-shadow: 0 0 0 3px var(--accent-green-dim); }

.search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }

.search-shortcut { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); padding: 2px 6px; background: var(--border-subtle); border-radius: 4px; font-size: 0.7rem; color: var(--text-muted); }

.status-container { display: flex; align-items: center; gap: 0.5rem; }

.status-dot { width: 10px; height: 10px; background: var(--accent-green); border-radius: 50%; box-shadow: 0 0 10px var(--accent-green-glow); animation: pulse 2s ease-in-out infinite; }

.status-text { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; }

.tab-content { display: none; animation: fadeInUp 0.4s ease; }

.tab-content.active { display: block; }

.welcome-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; opacity: 0; animation: fadeInUp 0.5s ease forwards; }

.welcome-text h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.25rem; }

.welcome-text p { color: var(--text-secondary); font-size: 0.95rem; }

.date-time { text-align: right; }

.date-time .time { font-size: 1.5rem; font-weight: 600; }

.date-time .date { font-size: 0.875rem; color: var(--text-secondary); }

.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 2rem; }

.metric-card { background: var(--bg-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.5rem; position: relative; overflow: hidden; opacity: 0; animation: fadeInUp 0.5s ease forwards; transition: all 250ms ease; }

.metric-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent-green); }

.metric-card:hover { background: var(--bg-card-hover); border-color: var(--border-accent); transform: translateY(-2px); }

.metric-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }

.metric-icon { width: 40px; height: 40px; background: var(--accent-green-dim); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }

.metric-trend { display: flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; font-weight: 500; }

.metric-trend.up { color: var(--accent-green); }

.metric-value { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.25rem; }

.metric-label { color: var(--text-secondary); font-size: 0.875rem; }

.dashboard-sections { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }

.section-card { background: var(--bg-card); backdrop-filter: blur(20px); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.5rem; opacity: 0; animation: fadeInUp 0.5s ease forwards; }

.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }

.section-title { font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }

.btn { padding: 0.5rem 1rem; background: var(--accent-green-dim); border: none; border-radius: var(--radius-sm); color: var(--accent-green); font-family: inherit; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 150ms ease; display: flex; align-items: center; gap: 0.25rem; }

.btn:hover { background: var(--accent-green); color: var(--bg-primary); }

.activity-feed { max-height: 400px; overflow-y: auto; }

.activity-feed::-webkit-scrollbar { width: 4px; }

.activity-feed::-webkit-scrollbar-track { background: transparent; }

.activity-feed::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 2px; }

.activity-item { display: flex; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-subtle); }

.activity-item:last-child { border-bottom: none; }

.activity-dot { width: 8px; height: 8px; background: var(--accent-green); border-radius: 50%; margin-top: 6px; flex-shrink: 0; }

.activity-content { flex: 1; }

.activity-text { font-size: 0.9rem; margin-bottom: 0.25rem; }

.activity-time { font-size: 0.75rem; color: var(--text-muted); }

.priorities-list { list-style: none; }

.priority-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-subtle); }

.priority-item:last-child { border-bottom: none; }

.priority-checkbox { width: 18px; height: 18px; border: 2px solid var(--border-accent); border-radius: 4px; cursor: pointer; transition: all 150ms ease; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.priority-checkbox:hover { border-color: var(--accent-green); }

.priority-checkbox.checked { background: var(--accent-green); border-color: var(--accent-green); }

.priority-checkbox.checked::after { content: '✓'; color: var(--bg-primary); font-size: 0.7rem; font-weight: bold; }

.priority-text { flex: 1; font-size: 0.9rem; }

.priority-text.completed { text-decoration: line-through; color: var(--text-muted); }

.priority-delete { opacity: 0; color: var(--text-muted); cursor: pointer; transition: all 150ms ease; }

.priority-item:hover .priority-delete { opacity: 1; }

.priority-delete:hover { color: var(--danger); }

.add-priority-form { display: flex; gap: 0.5rem; margin-top: 1rem; }

.add-priority-input { flex: 1; padding: 0.5rem 0.75rem; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-family: inherit; font-size: 0.875rem; outline: none; }

.add-priority-input::placeholder { color: var(--text-muted); }

.kanban-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; min-height: calc(100vh - 200px); }

.kanban-column { background: var(--bg-card); backdrop-filter: blur(20px); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; opacity: 0; animation: fadeInUp 0.5s ease forwards; }

.kanban-column:nth-child(1) { animation-delay: 0.1s; }

.kanban-column:nth-child(2) { animation-delay: 0.2s; }

.kanban-column:nth-child(3) { animation-delay: 0.3s; }

.column-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-subtle); }

.column-title { font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }

.column-count { background: var(--bg-secondary); padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; color: var(--text-muted); }

.task-list { flex: 1; overflow-y: auto; min-height: 200px; }

.task-card { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 0.5rem; cursor: pointer; transition: all 150ms ease; position: relative; }

.task-card:hover { border-color: var(--border-accent); transform: translateY(-2px); }

.task-title { font-weight: 500; margin-bottom: 0.25rem; padding-right: 1.5rem; }

.task-description { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.task-meta { display: flex; align-items: center; justify-content: space-between; }

.task-priority { padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; }

.task-priority.high { background: rgba(239, 68, 68, 0.15); color: var(--priority-high); }

.task-priority.medium { background: rgba(245, 158, 11, 0.15); color: var(--priority-medium); }

.task-priority.low { background: var(--accent-green-dim); color: var(--accent-green); }

.task-date { font-size: 0.7rem; color: var(--text-muted); }

.task-delete { position: absolute; top: 0.5rem; right: 0.5rem; opacity: 0; color: var(--text-muted); cursor: pointer; transition: all 150ms ease; }

.task-card:hover .task-delete { opacity: 1; }

.task-delete:hover { color: var(--danger); }

.add-task-btn { width: 100%; padding: 1rem; background: transparent; border: 1px dashed var(--border-subtle); border-radius: var(--radius-md); color: var(--text-muted); font-family: inherit; font-size: 0.875rem; cursor: pointer; transition: all 150ms ease; margin-top: 0.5rem; }

.add-task-btn:hover { border-color: var(--accent-green); color: var(--accent-green); }

.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; visibility: hidden; transition: all 250ms ease; }

.modal-overlay.active { opacity: 1; visibility: visible; }

.modal { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2rem; width: 100%; max-width: 500px; transform: scale(0.95); transition: all 250ms ease; }

.modal-overlay.active .modal { transform: scale(1); }

.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }

.modal-title { font-size: 1.25rem; font-weight: 600; }

.modal-close { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; transition: all 150ms ease; }

.modal-close:hover { color: var(--text-primary); }

.form-group { margin-bottom: 1.5rem; }

.form-label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-secondary); }

.form-input, .form-select, .form-textarea { width: 100%; padding: 0.75rem; background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary); font-family: inherit; font-size: 0.9rem; outline: none; transition: all 150ms ease; }

.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent-green); box-shadow: 0 0 0 3px var(--accent-green-dim); }

.form-textarea { min-height: 100px; resize: vertical; }

.modal-actions { display: flex; gap: 1rem; justify-content: flex-end; }

.btn-secondary { padding: 0.5rem 1.5rem; background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-secondary); font-family: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 150ms ease; }

.btn-secondary:hover { border-color: var(--border-accent); color: var(--text-primary); }

.timeline-container { max-width: 900px; margin: 0 auto; }

.timeline-phase { background: var(--bg-card); backdrop-filter: blur(20px); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2rem; margin-bottom: 1.5rem; position: relative; opacity: 0; animation: fadeInUp 0.5s ease forwards; }

.timeline-phase:nth-child(1) { animation-delay: 0.1s; }

.timeline-phase:nth-child(2) { animation-delay: 0.2s; }

.timeline-phase:nth-child(3) { animation-delay: 0.3s; }

.timeline-phase:nth-child(4) { animation-delay: 0.4s; }

.timeline-phase.active { border-color: var(--accent-green); box-shadow: 0 0 30px var(--accent-green-dim); }

.phase-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }

.phase-title { font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; gap: 1rem; }

.phase-badge { padding: 4px 12px; background: var(--accent-green-dim); color: var(--accent-green); border-radius: 20px; font-size: 0.75rem; font-weight: 500; }

.phase-date { color: var(--text-secondary); font-size: 0.875rem; }

.phase-description { color: var(--text-secondary); margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-subtle); }

.milestones-list { list-style: none; }

.milestone-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; }

.milestone-checkbox { width: 20px; height: 20px; border: 2px solid var(--border-accent); border-radius: 4px; cursor: pointer; transition: all 150ms ease; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.milestone-checkbox:hover { border-color: var(--accent-green); }

.milestone-checkbox.checked { background: var(--accent-green); border-color: var(--accent-green); }

.milestone-checkbox.checked::after { content: '✓'; color: var(--bg-primary); font-size: 0.75rem; font-weight: bold; }

.milestone-text { font-size: 0.9rem; }

.milestone-text.completed { text-decoration: line-through; color: var(--text-muted); }

.notes-container { max-width: 1000px; margin: 0 auto; }

.notes-card { background: var(--bg-card); backdrop-filter: blur(20px); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2rem; opacity: 0; animation: fadeInUp 0.5s ease forwards; }

.notes-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-subtle); }

.notes-title { font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }

.notes-meta { display: flex; align-items: center; gap: 1.5rem; color: var(--text-muted); font-size: 0.8rem; }

.notes-textarea { width: 100%; min-height: 500px; background: transparent; border: none; color: var(--text-primary); font-family: 'Inter', monospace; font-size: 0.95rem; line-height: 1.8; resize: vertical; outline: none; }

.notes-textarea::placeholder { color: var(--text-muted); }

@media (max-width: 1200px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); } .kanban-board { grid-template-columns: 1fr; } .dashboard-sections { grid-template-columns: 1fr; } }

@media (max-width: 768px) { .header { padding: 0 1rem; } .header-center { display: none; } .search-input { width: 180px; } .main-content { padding: calc(var(--header-height) + 1rem) 1rem 1rem; } .metrics-grid { grid-template-columns: 1fr; } .welcome-bar { flex-direction: column; align-items: flex-start; gap: 1rem; } .date-time { text-align: left; } .modal { margin: 1rem; max-width: calc(100% - 2rem); } }

.hidden { display: none !important; }

</style>

</head>

<body>

<div class="logo"><div class="logo-icon">🎯</div><span>Mission Control</span></div>

<button class="tab-btn active" data-tab="dashboard">📊 Dashboard</button>

<button class="tab-btn" data-tab="projects">📋 Projects</button>

<button class="tab-btn" data-tab="timeline">📅 Timeline</button>

<button class="tab-btn" data-tab="notes">📝 Notes</button>

</nav>

</div>

<span class="status-text">Online</span>

</div>

</header>

<h1>Good <span id="greeting">morning</span>, Tim</h1>

<p>Welcome to your command center. Let's make today count.</p>

</div>

<div class="date" id="currentDate">Loading...</div>

</div>

<div class="metric-label">Monthly Revenue (Goal: $50k)</div>

</div>

<div class="metric-label">Active Projects</div>

</div>

<div class="metric-label">Tasks Today</div>

</div>

</div>

<div class="section-header"><div class="section-title">📌 Top Priorities</div><button class="btn" id="addPriorityBtn">+ Add</button></div>

</div>

<div class="section-header"><div class="section-title">⚡ Recent Activity</div></div>

</div>

<div class="column-header"><div class="column-title">📥 Backlog <span class="column-count" id="backlogCount">0</span></div></div>

</div>

<div class="column-header"><div class="column-title">🔥 In Progress <span class="column-count" id="inProgressCount">0</span></div></div>

</div>

</div>

</div>

<div class="notes-title">📝 Notes</div>

<div class="notes-meta"><span id="charCount">0 characters</span><span id="lastSaved">Never saved</span></div>

</div>

</div>

</main>

</div>

<div class="form-group"><label class="form-label">Title</label><input type="text" class="form-input" id="taskTitle" placeholder="Task title..." required></div>

<div class="form-group"><label class="form-label">Description</label><textarea class="form-textarea" id="taskDescription" placeholder="Task description..."></textarea></div>

<div class="form-group"><label class="form-label">Priority</label><select class="form-select" id="taskPriority"><option value="low">Low</option><option value="medium" selected>Medium</option><option value="high">High</option></select></div>

<div class="modal-actions"><button type="button" class="btn-secondary" id="cancelTaskBtn">Cancel</button><button type="submit" class="btn">Save Task</button></div>

</form>

</div>

// Timeline Config - Easy to Edit

const TIMELINE_DATA = [

{ id: 1, title: "Phase 1: Foundation", dateRange: "Feb 2026 - Mar 2026", description: "Establish strong operational foundation and optimize current Amazon performance.", milestones: [{ id: 1, text: "Optimize Amazon listings for conversion", completed: true }, { id: 2, text: "Launch website e-commerce store", completed: true }, { id: 3, text: "Implement email marketing flow", completed: false }, { id: 4, text: "Reach $30k/month revenue", completed: false }], active: false },

{ id: 2, title: "Phase 2: Scale", dateRange: "Mar 2026 - Apr 2026", description: "Scale operations and expand reach through additional channels.", milestones: [{ id: 1, text: "Launch paid advertising campaigns", completed: false }, { id: 2, text: "Expand to 2nd Amazon marketplace", completed: false }, { id: 3, text: "Hire VA for customer service", completed: false }, { id: 4, text: "Reach $35k/month revenue", completed: false }], active: true },

{ id: 3, title: "Phase 3: Dominate", dateRange: "Apr 2026 - May 2026", description: "Dominate market and optimize profitability.", milestones: [{ id: 1, text: "Launch influencer partnerships", completed: false }, { id: 2, text: "Expand product line", completed: false }, { id: 3, text: "Optimize unit economics", completed: false }, { id: 4, text: "Reach $42k/month revenue", completed: false }], active: false },

{ id: 4, title: "Phase 4: Goal", dateRange: "May 2026 - Jun 2026", description: "Final push to hit $50k/month goal.", milestones: [{ id: 1, text: "Launch loyalty program", completed: false }, { id: 2, text: "Scale all winning campaigns", completed: false }, { id: 3, text: "Prepare for next growth phase", completed: false }, { id: 4, text: "Hit $50k/month revenue", completed: false }], active: false }

];

// State

let state = JSON.parse(localStorage.getItem('missionControl')) || {

priorities: [],

tasks: { backlog: [], inProgress: [], done: [], activity: [], notes: "", timeline: JSON.parse(JSON.stringify(TIMELINE_DATA)) };

// DOM Elements

const tabBtns = document.querySelectorAll('.tab-btn');

const tabContents = document.querySelectorAll('.tab-content');

const greeting = document.getElementById('greeting');

const currentTime = document.getElementById('currentTime');

const currentDate = document.getElementById('currentDate');

const monthlyRevenue = document.getElementById('monthlyRevenue');

const activeProjects = document.getElementById('activeProjects');

const tasksToday = document.getElementById('tasksToday');

const daysToGoal = document.getElementById('daysToGoal');

const prioritiesList = document.getElementById('prioritiesList');

const activityFeed = document.getElementById('activityFeed');

const addPriorityBtn = document.getElementById('addPriorityBtn');

const addPriorityForm = document.getElementById('addPriorityForm');

const priorityInput = document.getElementById('priorityInput');

const savePriorityBtn = document.getElementById('savePriorityBtn');

const taskModal = document.getElementById('taskModal');

const taskForm = document.getElementById('taskForm');

const modalTitle = document.getElementById('modalTitle');

const notesTextarea = document.getElementById('notesTextarea');

const charCount = document.getElementById('charCount');

const lastSaved = document.getElementById('lastSaved');

// Tab Navigation

tabBtns.forEach(btn => {

btn.addEventListener('click', () => {

tabBtns.forEach(b => b.classList.remove('active'));

tabContents.forEach(c => c.classList.remove('active'));

btn.classList.add('active');

document.getElementById(btn.dataset.tab).classList.add('active');

});

// Clock & Date

function updateDateTime() {

const now = new Date();

const hour = now.getHours();

greeting.textContent = hour < 12 ? 'morning' : hour < 17 ? 'afternoon' : 'evening';

currentTime.textContent = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });

currentDate.textContent = now.toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric', year: 'numeric' });

}

setInterval(updateDateTime, 1000);

updateDateTime();

// Days to June 2026

const june = new Date('2026-06-01');

const today = new Date();

daysToGoal.textContent = Math.ceil((june - today) / (1000 * 60 * 60 * 24));

// Metrics

function updateMetrics() {

activeProjects.textContent = state.tasks.inProgress.length;

const completedToday = state.tasks.done.filter(t => {

const created = new Date(t.created);

const today = new Date();

return created.toDateString() === today.toDateString();

}).length;

tasksToday.textContent = state.priorities.filter(p => p.completed).length;

}

// Priorities

function renderPriorities() {

prioritiesList.innerHTML = state.priorities.length ? '' : '<div class="empty-state">No priorities yet. Add one above!</div>';

state.priorities.forEach((p, i) => {

const li = document.createElement('li');

li.className = 'priority-item';

li.innerHTML =


                    <div class="priority-checkbox ${p.completed ? 'checked' : ''}" data-index="${i}"></div>
                    <span class="priority-text ${p.completed ? 'completed' : ''}">${p.text}</span>
                    <span class="priority-delete" data-index="${i}">×</span>

;

prioritiesList.appendChild(li);

});

updateMetrics();

saveState();

}

prioritiesList.addEventListener('click', (e) => {

if (e.target.classList.contains('priority-checkbox')) {

state.priorities[e.target.dataset.index].completed = !state.priorities[e.target.dataset.index].completed;

addActivity(state.priorities[e.target.dataset.index].completed ? 'Completed priority' : 'Uncompleted priority');

renderPriorities();

} else if (e.target.classList.contains('priority-delete')) {

state.priorities.splice(e.target.dataset.index, 1);

renderPriorities();

}

});

addPriorityBtn.addEventListener('click', () => {

addPriorityForm.classList.remove('hidden');

priorityInput.focus();

});

savePriorityBtn.addEventListener('click', () => {

if (priorityInput.value.trim()) {

state.priorities.push({ text: priorityInput.value.trim(), completed: false });

addActivity('Added priority: ' + priorityInput.value.trim());

priorityInput.value = '';

addPriorityForm.classList.add('hidden');

renderPriorities();

}

});

priorityInput.addEventListener('keypress', (e) => {

if (e.key === 'Enter') savePriorityBtn.click();

});

// Activity

function addActivity(text) {

state.activity.unshift({ text, time: new Date().toISOString() });

if (state.activity.length > 20) state.activity.pop();

renderActivity();

saveState();

}

function renderActivity() {

activityFeed.innerHTML = state.activity.length ? '' : '<div class="empty-state">No recent activity</div>';

state.activity.forEach(a => {

const div = document.createElement('div');

div.className = 'activity-item';

const date = new Date(a.time);

div.innerHTML =


                    <div class="activity-dot"></div>
                    <div class="activity-content">
                        <div class="activity-text">${a.text}</div>
                        <div class="activity-time">${date.toLocaleTimeString()}</div>
                    </div>

;

activityFeed.appendChild(div);

});

}

// Tasks (Kanban)

function renderTasks() {

['backlog', 'inProgress', 'done'].forEach(col => {

const container = document.getElementById(col + 'Tasks');

document.getElementById(col + 'Count').textContent = state.tasks[col].length;

container.innerHTML = state.tasks[col].length ? '' : '<div class="empty-state">No tasks</div>';

state.tasks[col].forEach((t, i) => {

const div = document.createElement('div');

div.className = 'task-card';

div.innerHTML =


                        <div class="task-title">${t.title}</div>
                        <div class="task-description">${t.description || ''}</div>
                        <div class="task-meta">
                            <span class="task-priority ${t.priority}">${t.priority}</span>
                            <span class="task-date">${new Date(t.created).toLocaleDateString()}</span>
                        </div>
                        <span class="task-delete" data-column="${col}" data-index="${i}">×</span>

;

container.appendChild(div);

});

updateMetrics();

saveState();

}

document.querySelectorAll('.add-task-btn').forEach(btn => {

btn.addEventListener('click', () => {

window.currentColumn = btn.dataset.column;

modalTitle.textContent = 'Add New Task';

taskForm.reset();

taskModal.classList.add('active');

});

taskModal.addEventListener('click', (e) => {

if (e.target === taskModal) taskModal.classList.remove('active');

});

document.getElementById('modalClose').addEventListener('click', () => taskModal.classList.remove('active'));

document.getElementById('cancelTaskBtn').addEventListener('click', () => taskModal.classList.remove('active'));

taskForm.addEventListener('submit', (e) => {

e.preventDefault();

const newTask = {

title: document.getElementById('taskTitle').value,

description: document.getElementById('taskDescription').value,

priority: document.getElementById('taskPriority').value,

created: new Date().toISOString()

};

state.tasks[window.currentColumn].unshift(newTask);

addActivity('Added task: ' + newTask.title);

renderTasks();

taskModal.classList.remove('active');

});

document.addEventListener('click', (e) => {

if (e.target.classList.contains('task-delete')) {

const col = e.target.dataset.column;

const idx = parseInt(e.target.dataset.index);

addActivity('Deleted task: ' + state.tasks[col][idx].title);

state.tasks[col].splice(idx, 1);

renderTasks();

}

});

// Timeline

function renderTimeline() {

const container = document.getElementById('timelineContainer');

container.innerHTML = '';

state.timeline.forEach(phase => {

const div = document.createElement('div');

div.className = 'timeline-phase' + (phase.active ? ' active' : '');

let milestones = phase.milestones.map(m =>


                    <li class="milestone-item">
                        <div class="milestone-checkbox ${m.completed ? 'checked' : ''}" data-phase="${phase.id}" data-milestone="${m.id}"></div>
                        <span class="milestone-text ${m.completed ? 'completed' : ''}">${m.text}</span>
                    </li>

).join('');

div.innerHTML =


                    <div class="phase-header">
                        <div class="phase-title">${phase.title}${phase.active ? '<span class="phase-badge">CURRENT</span>' : ''}</div>
                        <div class="phase-date">${phase.dateRange}</div>
                    </div>
                    <div class="phase-description">${phase.description}</div>
                    <ul class="milestones-list">${milestones}</ul>

;

container.appendChild(div);

});

saveState();

}

document.getElementById('timelineContainer').addEventListener('click', (e) => {

if (e.target.classList.contains('milestone-checkbox')) {

const phaseId = parseInt(e.target.dataset.phase);

const milestoneId = parseInt(e.target.dataset.milestone);

const phase = state.timeline.find(p => p.id === phaseId);

const milestone = phase.milestones.find(m => m.id === milestoneId);

milestone.completed = !milestone.completed;

addActivity(milestone.completed ? '✓ ' + milestone.text : '○ ' + milestone.text);

renderTimeline();

}

});

// Notes

notesTextarea.value = state.notes;

charCount.textContent = state.notes.length + ' characters';

notesTextarea.addEventListener('input', () => {

state.notes = notesTextarea.value;

charCount.textContent = state.notes.length + ' characters';

lastSaved.textContent = 'Saving...';

saveState();

lastSaved.textContent = 'Saved ' + new Date().toLocaleTimeString();

});

// Search (Cmd+K)

document.addEventListener('keydown', (e) => {

if ((e.metaKey || e.ctrlKey) && e.key === 'k') {

e.preventDefault();

document.getElementById('globalSearch').focus();

}

});

// Save State

function saveState() {

localStorage.setItem('missionControl', JSON.stringify(state));

}

// Init

renderPriorities();

renderTasks();

renderActivity();

renderTimeline();

addActivity('Mission Control opened');

</script>

</body>

</html>