<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Manager</title>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="statusIndicator" class="status-indicator status-disconnected">
<div class="status-dot"></div>
<span id="statusText">Disconnected</span>
</div>
<div class="container">
<header>
<div class="app-title">TaskFlow</div>
<div style="display: flex; gap: 10px;">
<button class="btn btn-secondary" onclick="openSettingsModal()" title="Settings">⚙️</button>
<button class="btn" onclick="openNewProjectModal()">+ New Project</button>
</div>
</header>
<!-- Dashboard View -->
<div id="dashboardView">
<div id="projectGrid" class="project-grid">
<!-- Projects injected here -->
</div>
<div id="noProjects" class="empty-state" style="display: none;">
<h3>No projects yet</h3>
<p>Create your first project to get started.</p>
</div>
</div>
<!-- Project Detail View -->
<div id="projectView" style="display: none;">
<div class="project-view-header">
<button class="back-btn" onclick="showDashboard()">←</button>
<h2 id="currentProjectTitle">Project Title</h2>
</div>
<div class="glass-card">
<div style="display: flex; gap: 10px; margin-bottom: 1.5rem;">
<input type="text" id="taskInput" placeholder="Add a new task..."
onkeypress="if(event.key === 'Enter') addTask()">
<button class="btn" onclick="addTask()">Add</button>
</div>
<ul id="taskList" class="task-list">
<!-- Tasks injected here -->
</ul>
<div id="noTasks" class="empty-state" style="display: none;">
No tasks in this project.
</div>
</div>
</div>
</div>
<!-- New Project Modal -->
<div id="newProjectModal" class="modal-overlay">
<div class="modal">
<h2 style="margin-bottom: 1.5rem;">Create Project</h2>
<div style="margin-bottom: 1rem;">
<label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Title</label>
<input type="text" id="newProjectTitle" placeholder="e.g., Website Redesign" autofocus>
</div>
<div style="margin-bottom: 1.5rem;">
<label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Description</label>
<textarea id="newProjectDesc" rows="3" placeholder="Optional description..."></textarea>
</div>
<div style="display: flex; justify-content: flex-end; gap: 10px;">
<button class="btn btn-secondary" onclick="closeNewProjectModal()">Cancel</button>
<button class="btn" onclick="createProject()">Create</button>
</div>
</div>
</div>
<!-- Settings Modal -->
<div id="settingsModal" class="modal-overlay">
<div class="modal">
<h2 style="margin-bottom: 1.5rem;">Settings</h2>
<div style="margin-bottom: 1.5rem;">
<label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Backend URL</label>
<input type="text" id="backendUrlInput" placeholder="e.g., https://your-tunnel-url.loca.lt">
<p style="font-size: 0.8rem; color: #64748b; margin-top: 5px;">
Enter the Localtunnel URL to connect from your phone.
</p>
</div>
<div style="display: flex; justify-content: flex-end; gap: 10px;">
<button class="btn btn-secondary" onclick="closeSettingsModal()">Cancel</button>
<button class="btn" onclick="saveSettings()">Save</button>
</div>
</div>
</div>
<!-- Pipeline Selector Modal -->
<div id="pipelineModal" class="modal-overlay">
<div class="modal">
<h2 style="margin-bottom: 1rem;">Execute Task</h2>
<p style="color: #64748b; margin-bottom: 1rem;">Task: <strong id="pipelineTaskTitle">Task Title</strong></p>
<div style="margin-bottom: 1.5rem;">
<label style="display: block; margin-bottom: 0.75rem; font-weight: 500;">Select Pipeline:</label>
<!-- Presets -->
<div style="display: flex; flex-direction: column; gap: 0.5rem;">
<label class="pipeline-option">
<input type="radio" name="pipelinePreset" value="quick"
onchange="selectPipelinePreset('quick')">
<span><strong>⚡ Quick</strong> - Implementation only</span>
</label>
<label class="pipeline-option">
<input type="radio" name="pipelinePreset" value="standard" checked
onchange="selectPipelinePreset('standard')">
<span><strong>🔧 Standard</strong> - Planning → Implementation → Testing</span>
</label>
<label class="pipeline-option">
<input type="radio" name="pipelinePreset" value="full" onchange="selectPipelinePreset('full')">
<span><strong>🔬 Full</strong> - Research → Planning → Implementation → Testing</span>
</label>
<label class="pipeline-option">
<input type="radio" name="pipelinePreset" value="custom"
onchange="selectPipelinePreset('custom')">
<span><strong>🎯 Custom</strong> - Select stages manually</span>
</label>
</div>
<!-- Custom Stage Selection -->
<div id="customStages"
style="margin-top: 1rem; padding: 1rem; background: rgba(255,255,255,0.05); border-radius: 8px;">
<label
style="display: block; margin-bottom: 0.5rem; font-size: 0.9rem; color: #64748b;">Stages:</label>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;">
<label class="stage-option">
<input type="checkbox" class="stage-checkbox" value="research">
<span>🔍 Research</span>
</label>
<label class="stage-option">
<input type="checkbox" class="stage-checkbox" value="planning" checked>
<span>📋 Planning</span>
</label>
<label class="stage-option">
<input type="checkbox" class="stage-checkbox" value="implementation" checked>
<span>⚙️ Implementation</span>
</label>
<label class="stage-option">
<input type="checkbox" class="stage-checkbox" value="testing" checked>
<span>✅ Testing</span>
</label>
</div>
</div>
</div>
<div style="display: flex; justify-content: flex-end; gap: 10px;">
<button class="btn btn-secondary" onclick="closePipelineModal()">Cancel</button>
<button class="btn" onclick="executePipeline()">▶️ Execute</button>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
