kanban
This commit is contained in:
Tour
370
public/kan.html
Normal file
370
public/kan.html
Normal file
@@ -0,0 +1,370 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>🎯 Interactive Tech Dashboard</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh; padding: 20px; color: #333;
|
||||
}
|
||||
.dashboard {
|
||||
max-width: 1400px; margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px; padding: 30px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
header { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 3px solid #667eea; }
|
||||
h1 { font-size: 2.5em; color: #667eea; margin-bottom: 10px; font-weight: 700; }
|
||||
.date { font-size: 1.2em; color: #666; font-weight: 500; }
|
||||
|
||||
.control-panel {
|
||||
background: #f3f4f6; padding: 20px; border-radius: 15px;
|
||||
margin-bottom: 30px; border: 2px dashed #9ca3af;
|
||||
}
|
||||
.control-panel h3 { margin-bottom: 10px; color: #667eea; }
|
||||
.control-textarea {
|
||||
width: 100%; min-height: 150px; padding: 15px; border-radius: 8px;
|
||||
border: 1px solid #d1d5db; font-family: 'Courier New', monospace; font-size: 0.9em;
|
||||
resize: vertical; margin-bottom: 10px;
|
||||
}
|
||||
.control-hint {
|
||||
font-size: 0.85em; color: #6b7280; font-family: monospace;
|
||||
background: white; padding: 10px; border-radius: 5px; margin-top: 10px;
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white; padding: 25px; border-radius: 15px;
|
||||
margin-bottom: 30px; box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
.progress-label { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 1.1em; font-weight: 500; }
|
||||
.progress-bar { width: 100%; height: 30px; background: rgba(255, 255, 255, 0.3); border-radius: 15px; overflow: hidden; position: relative; }
|
||||
.progress-fill { height: 100%; background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%); width: 25%; transition: width 0.5s ease; position: relative; box-shadow: 0 0 20px rgba(74, 222, 128, 0.5); }
|
||||
.progress-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: shimmer 2s infinite; }
|
||||
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
|
||||
|
||||
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 25px; margin-bottom: 30px; }
|
||||
.project-card { background: white; border-radius: 15px; padding: 25px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; border-left: 5px solid; }
|
||||
.project-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); }
|
||||
.project-card.defrag { border-left-color: #667eea; }
|
||||
.project-card.dual-boot { border-left-color: #f59e0b; }
|
||||
.project-card.ai { border-left-color: #10b981; }
|
||||
.project-card.autocomplete { border-left-color: #ef4444; }
|
||||
|
||||
.project-header { display: flex; align-items: center; margin-bottom: 20px; }
|
||||
.project-icon { font-size: 2em; margin-right: 15px; }
|
||||
h2 { font-size: 1.5em; color: #222; font-weight: 600; }
|
||||
|
||||
.task-item { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #e5e7eb; }
|
||||
.task-item:last-child { border-bottom: none; }
|
||||
.task-item:hover { background: #f9fafb; border-radius: 5px; margin: 0 -10px; padding: 10px; }
|
||||
.task-checkbox { width: 18px; height: 18px; margin-right: 12px; cursor: pointer; accent-color: #667eea; }
|
||||
.task-text { flex: 1; }
|
||||
.task-status { font-size: 0.85em; padding: 3px 10px; border-radius: 12px; margin-left: 10px; font-weight: 500; }
|
||||
.status-todo { background: #f3f4f6; color: #666; }
|
||||
.status-progress { background: #dbeafe; color: #1d4ed8; }
|
||||
.status-completed { background: #dcfce7; color: #166534; }
|
||||
|
||||
.priority-badge { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-left: 10px; }
|
||||
.priority-high { background: #ef4444; }
|
||||
.priority-medium { background: #f59e0b; }
|
||||
.priority-low { background: #10b981; }
|
||||
|
||||
.quick-actions { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); padding: 25px; border-radius: 15px; margin-bottom: 30px; border-left: 5px solid #f59e0b; }
|
||||
.action-list { list-style: none; }
|
||||
.action-list li { padding: 10px 0; display: flex; align-items: center; }
|
||||
.action-checkbox { margin-right: 12px; width: 18px; height: 18px; cursor: pointer; accent-color: #f59e0b; }
|
||||
|
||||
.legend { background: #f9fafb; padding: 20px; border-radius: 15px; margin-bottom: 30px; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; }
|
||||
.legend-item { display: flex; align-items: center; }
|
||||
|
||||
.notes { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); padding: 20px; border-radius: 15px; border-left: 5px solid #f59e0b; }
|
||||
.notes h3 { margin-bottom: 10px; color: #92400e; }
|
||||
.notes ul { list-style-position: inside; color: #78350f; }
|
||||
|
||||
.footer { text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #e5e7eb; color: #666; font-size: 0.9em; }
|
||||
|
||||
@media (max-width: 768px) { .projects-grid { grid-template-columns: 1fr; } h1 { font-size: 2em; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dashboard">
|
||||
<header>
|
||||
<h1>🎯 Interactive Tech Dashboard</h1>
|
||||
<div class="date">December 10, 2025 | Focus: Infrastructure & AI</div>
|
||||
</header>
|
||||
|
||||
<div class="control-panel">
|
||||
<h3>🎮 Control Panel - Edit tasks below:</h3>
|
||||
<textarea class="control-textarea" id="taskControl" placeholder="Enter tasks in format: PROJECT|Task description|status|priority|notes
|
||||
Click 'Update Dashboard' to apply changes...">DEFRAG|App initialization|todo||local
|
||||
DEFRAG|In-screen dynamic console|progress||local
|
||||
DEFRAG|Disk cleanup tool integration|todo||local
|
||||
DEFRAG|Athena monitoring dashboard|todo||athena
|
||||
DUAL_BOOT|Partition disk space (50GB+)|todo|high|local
|
||||
DUAL_BOOT|Install Ubuntu dual boot|todo|high|local
|
||||
DUAL_BOOT|Configure boot loader|todo|medium|local
|
||||
AI|Auctiora: Set up object detection pipeline|todo||local
|
||||
AI|Auctiora: Test model inference|todo||local
|
||||
AI|Scraper: Configure for mobile network|todo||mobile
|
||||
AI|Scraper: Test connectivity & performance|todo||mobile
|
||||
AUTOCOMPLETE|Deploy autocomplete API endpoint|todo||athena
|
||||
AUTOCOMPLETE|Test integration with existing infrastructure|todo||athena
|
||||
QUICK_ACTIONS|Free up disk space (50GB+)|todo||local
|
||||
QUICK_ACTIONS|Install dual boot setup|todo||local
|
||||
QUICK_ACTIONS|Migrate development environment|todo||local</textarea>
|
||||
<button onclick="updateDashboard()" style="background: #667eea; color: white; padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;">🔄 Update Dashboard</button>
|
||||
<div class="control-hint">
|
||||
Format: PROJECT|Task|status|priority|notes<br>
|
||||
PROJECT: DEFRAG, DUAL_BOOT, AI, AUTOCOMPLETE, QUICK_ACTIONS<br>
|
||||
Status: todo, progress, completed<br>
|
||||
Priority: high, medium, low (or blank)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-section">
|
||||
<div class="progress-label">
|
||||
<span>Overall Progress</span>
|
||||
<span id="progressText">25% (2 of 8 tasks)</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" id="progressFill"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="projects-grid" id="projectsGrid"></div>
|
||||
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<span class="status-badge status-todo">TODO</span>
|
||||
<span style="margin-left: 10px;">Not started</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="status-badge status-progress">PROGRESS</span>
|
||||
<span style="margin-left: 10px;">Active</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="status-badge status-completed">COMPLETED</span>
|
||||
<span style="margin-left: 10px;">Done</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="priority-badge priority-high"></span>
|
||||
<span>High Priority</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="priority-badge priority-medium"></span>
|
||||
<span>Medium Priority</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="priority-badge priority-low"></span>
|
||||
<span>Low Priority</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="notes">
|
||||
<h3>💡 Notes</h3>
|
||||
<ul>
|
||||
<li>Focus on local machine maintenance first</li>
|
||||
<li>Athena tasks blocked until disk cleanup complete</li>
|
||||
<li>Mobile scraper requires network performance testing</li>
|
||||
<li>Object detection model needs GPU verification</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p><strong>Next Review:</strong> End of day | <strong>ETA for completion:</strong> 2-3 days</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Initial task data
|
||||
let allTasks = [];
|
||||
|
||||
// Parse task data from control textarea
|
||||
function parseTasks() {
|
||||
const textarea = document.getElementById('taskControl');
|
||||
const lines = textarea.value.trim().split('\n');
|
||||
allTasks = [];
|
||||
|
||||
lines.forEach((line, index) => {
|
||||
if (!line.trim()) return;
|
||||
const parts = line.split('|').map(p => p.trim());
|
||||
allTasks.push({
|
||||
id: index,
|
||||
project: parts[0] || 'MISC',
|
||||
description: parts[1] || '',
|
||||
status: parts[2] || 'todo',
|
||||
priority: parts[3] || '',
|
||||
notes: parts[4] || '',
|
||||
rawLine: line
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Update progress bar
|
||||
function updateProgress() {
|
||||
const completed = allTasks.filter(t => t.status === 'completed').length;
|
||||
const total = allTasks.length;
|
||||
const percentage = total > 0 ? Math.round((completed / total) * 100) : 0;
|
||||
|
||||
document.getElementById('progressText').textContent = `${percentage}% (${completed} of ${total} tasks)`;
|
||||
document.getElementById('progressFill').style.width = percentage + '%';
|
||||
}
|
||||
|
||||
// Toggle task status
|
||||
function toggleTask(taskId) {
|
||||
const task = allTasks.find(t => t.id === taskId);
|
||||
if (task) {
|
||||
const statuses = ['todo', 'progress', 'completed'];
|
||||
const currentIdx = statuses.indexOf(task.status);
|
||||
task.status = statuses[(currentIdx + 1) % statuses.length];
|
||||
|
||||
// Update control textarea
|
||||
updateControlTextarea();
|
||||
|
||||
// Re-render dashboard
|
||||
renderDashboard();
|
||||
}
|
||||
}
|
||||
|
||||
// Update control textarea from task data
|
||||
function updateControlTextarea() {
|
||||
const lines = allTasks.map(task =>
|
||||
`${task.project}|${task.description}|${task.status}|${task.priority}|${task.notes}`
|
||||
);
|
||||
document.getElementById('taskControl').value = lines.join('\n');
|
||||
}
|
||||
|
||||
// Render the dashboard
|
||||
function renderDashboard() {
|
||||
parseTasks();
|
||||
updateProgress();
|
||||
|
||||
const grid = document.getElementById('projectsGrid');
|
||||
grid.innerHTML = '';
|
||||
|
||||
// Group tasks by project
|
||||
const projects = {};
|
||||
allTasks.forEach(task => {
|
||||
if (!projects[task.project]) {
|
||||
projects[task.project] = [];
|
||||
}
|
||||
projects[task.project].push(task);
|
||||
});
|
||||
|
||||
// Project configurations
|
||||
const projectConfig = {
|
||||
'DEFRAG': { icon: '🔧', title: 'DEFRAG Application', color: 'defrag', subtitle: 'Disk optimization toolkit development' },
|
||||
'DUAL_BOOT': { icon: '💻', title: 'Dual Boot Setup', color: 'dual-boot', subtitle: 'Unix/Linux workstation configuration' },
|
||||
'AI': { icon: '🤖', title: 'AI/ML Projects', color: 'ai', subtitle: 'Artificial Intelligence & Machine Learning' },
|
||||
'AUTOCOMPLETE': { icon: '✅', title: 'Autocomplete Service', color: 'autocomplete', subtitle: 'Athena server configuration' },
|
||||
'QUICK_ACTIONS': { icon: '⚡', title: 'Quick Actions', color: 'quick-actions', subtitle: 'Immediate priority tasks' }
|
||||
};
|
||||
|
||||
// Render each project
|
||||
Object.entries(projects).forEach(([projectName, tasks]) => {
|
||||
if (projectName === 'QUICK_ACTIONS') {
|
||||
// Render quick actions as a special card
|
||||
const quickActionsCard = document.createElement('div');
|
||||
quickActionsCard.className = 'quick-actions';
|
||||
quickActionsCard.innerHTML = `
|
||||
<div class="project-header">
|
||||
<span class="project-icon">⚡</span>
|
||||
<h2>Quick Actions - Switch to Ubuntu</h2>
|
||||
</div>
|
||||
<ul class="action-list">
|
||||
${tasks.map(task => `
|
||||
<li>
|
||||
<input type="checkbox" class="action-checkbox"
|
||||
${task.status === 'completed' ? 'checked' : ''}
|
||||
onchange="toggleTask(${task.id})">
|
||||
<span style="${task.status === 'completed' ? 'text-decoration: line-through; opacity: 0.6;' : ''}">${task.description}</span>
|
||||
</li>
|
||||
`).join('')}
|
||||
</ul>
|
||||
`;
|
||||
grid.appendChild(quickActionsCard);
|
||||
} else {
|
||||
const config = projectConfig[projectName] || { icon: '📌', title: projectName, color: 'misc', subtitle: '' };
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = `project-card ${config.color}`;
|
||||
|
||||
if (projectName === 'AI') {
|
||||
// Special handling for AI project with subsections
|
||||
const auctioraTasks = tasks.filter(t => t.description.includes('Auctiora'));
|
||||
const scraperTasks = tasks.filter(t => t.description.includes('Scraper'));
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="project-header">
|
||||
<span class="project-icon">${config.icon}</span>
|
||||
<h2>${config.title}</h2>
|
||||
</div>
|
||||
${config.subtitle ? `<p style="color: #666; margin-bottom: 15px;">${config.subtitle}</p>` : ''}
|
||||
|
||||
<h3 style="margin: 15px 0 10px; color: #667eea;">Auctiora - Object Detection</h3>
|
||||
${auctioraTasks.map(task => `
|
||||
<div class="task-item">
|
||||
<input type="checkbox" class="task-checkbox"
|
||||
${task.status === 'completed' ? 'checked' : ''}
|
||||
onchange="toggleTask(${task.id})">
|
||||
<span class="task-text">${task.description.replace('Auctiora: ', '')}</span>
|
||||
<span class="task-status status-${task.status}">${task.status.toUpperCase()}</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
|
||||
<h3 style="margin: 20px 0 10px; color: #667eea;">Mobile Scraper</h3>
|
||||
${scraperTasks.map(task => `
|
||||
<div class="task-item">
|
||||
<input type="checkbox" class="task-checkbox"
|
||||
${task.status === 'completed' ? 'checked' : ''}
|
||||
onchange="toggleTask(${task.id})">
|
||||
<span class="task-text">${task.description.replace('Scraper: ', '')}</span>
|
||||
<span class="task-status status-${task.status}">${task.status.toUpperCase()}</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
`;
|
||||
} else {
|
||||
// Standard project card
|
||||
card.innerHTML = `
|
||||
<div class="project-header">
|
||||
<span class="project-icon">${config.icon}</span>
|
||||
<h2>${config.title}</h2>
|
||||
</div>
|
||||
${config.subtitle ? `<p style="color: #666; margin-bottom: 15px;">${config.subtitle}</p>` : ''}
|
||||
|
||||
${tasks.map(task => `
|
||||
<div class="task-item">
|
||||
<input type="checkbox" class="task-checkbox"
|
||||
${task.status === 'completed' ? 'checked' : ''}
|
||||
onchange="toggleTask(${task.id})">
|
||||
<span class="task-text">${task.description}</span>
|
||||
<span class="task-status status-${task.status}">${task.status.toUpperCase()}</span>
|
||||
${task.priority ? `<span class="priority-badge priority-${task.priority}" title="${task.priority} priority"></span>` : ''}
|
||||
${task.notes ? `<span style="margin-left: 8px; font-size: 0.85em; color: #6b7280;">(${task.notes})</span>` : ''}
|
||||
</div>
|
||||
`).join('')}
|
||||
`;
|
||||
}
|
||||
|
||||
grid.appendChild(card);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Update dashboard from control textarea
|
||||
function updateDashboard() {
|
||||
renderDashboard();
|
||||
}
|
||||
|
||||
// Initialize on load
|
||||
window.onload = function() {
|
||||
renderDashboard();
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
80
public/kanban.html
Normal file
80
public/kanban.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Today Dashboard</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #f4f6f8;
|
||||
margin: 0;
|
||||
padding: 40px;
|
||||
color: #222;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.section {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 24px 28px;
|
||||
margin-bottom: 26px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.07);
|
||||
}
|
||||
.section h2 {
|
||||
margin-top: 0;
|
||||
font-size: 22px;
|
||||
color: #333;
|
||||
border-left: 4px solid #4a90e2;
|
||||
padding-left: 10px;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin-top: 14px;
|
||||
}
|
||||
li {
|
||||
background: #f0f3f7;
|
||||
margin-bottom: 8px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>📌 Today Dashboard</h1>
|
||||
|
||||
<div class="section">
|
||||
<h2>🚀 Core Dev</h2>
|
||||
<ul>
|
||||
<li><strong>DEFRAG</strong> — App-init afronden</li>
|
||||
<li>Live console-updates + progress-bar</li>
|
||||
<li><strong>Auctiora</strong> — Object-detectie verder brengen</li>
|
||||
<li><strong>Scraper</strong> — Test via mobiel netwerk</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>💾 System & Ops</h2>
|
||||
<ul>
|
||||
<li>Lokale disk opschonen (tool)</li>
|
||||
<li>Athena disk-usage inzichtelijk maken</li>
|
||||
<li>Dual-boot Unix/Linux voorbereiden</li>
|
||||
<li>Ruimte vrijmaken voor Ubuntu</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>🧠 Dev Experience</h2>
|
||||
<ul>
|
||||
<li>Athena — Autocomplete/finish verbeteren</li>
|
||||
<li>Athena — Output inzichtelijker maken</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user