206 lines
5.0 KiB
HTML
206 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Timeline for Fubar">
|
|
<title>Timeline for Fubar</title>
|
|
<style>
|
|
/* Bare minimum CSS with dynamic progress colors */
|
|
body {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
text-align: center;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
h1 {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.timeline {
|
|
position: relative;
|
|
margin-top: 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 3rem;
|
|
}
|
|
|
|
/* Vertical line going from one card to the next */
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: 2px;
|
|
background: currentColor;
|
|
opacity: 0.2;
|
|
transform: translateX(-50%);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Cards along the timeline */
|
|
.card {
|
|
position: relative;
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
z-index: 2;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
/* Card Progress Status Colors */
|
|
.card.all-done {
|
|
background-color: #e2f5ea;
|
|
color: #0e622b;
|
|
border: 1px solid #b1e7c4;
|
|
}
|
|
|
|
.card.some-done {
|
|
background-color: #fffde7;
|
|
color: #725002;
|
|
border: 1px solid #fff59d;
|
|
}
|
|
|
|
.card.none-done {
|
|
background-color: #ffffff;
|
|
color: #000000;
|
|
border: 1px solid #e0e0e0;
|
|
}
|
|
|
|
/* Dark Mode Adjustments for Readability */
|
|
@media (prefers-color-scheme: dark) {
|
|
.card.all-done {
|
|
background-color: #12301b;
|
|
color: #8bf5b0;
|
|
border-color: #1a4d2b;
|
|
}
|
|
.card.some-done {
|
|
background-color: #332709;
|
|
color: #ffd54f;
|
|
border-color: #4d3a0d;
|
|
}
|
|
.card.none-done {
|
|
background-color: #1a1a1a;
|
|
color: #ffffff;
|
|
border-color: #333333;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Centered tasks container */
|
|
.task-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Center checklist items and align checkbox with text */
|
|
.task-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
text-align: left;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Timeline for Fubar</h1>
|
|
<main id="content">
|
|
<p>Loading roadmap...</p>
|
|
</main>
|
|
|
|
<script>
|
|
// Fetch and render the custom roadmap format
|
|
fetch('roadmap.md')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.text();
|
|
})
|
|
.then(markdownText => {
|
|
// Split the file contents by '# ' (indicates a card section)
|
|
const sections = markdownText.split(/^#\s+/m);
|
|
let cardsHtml = '';
|
|
|
|
sections.forEach(section => {
|
|
if (!section.trim()) return;
|
|
|
|
const lines = section.split('\n');
|
|
const title = lines[0].trim();
|
|
let tasksHtml = '';
|
|
let totalTasks = 0;
|
|
let completedTasks = 0;
|
|
|
|
for (let i = 1; i < lines.length; i++) {
|
|
const line = lines[i].trim();
|
|
if (!line) continue;
|
|
|
|
// Match [ ] or [X] tasks
|
|
const taskMatch = line.match(/^\[([ xX])\]\s*(.*)$/);
|
|
if (taskMatch) {
|
|
totalTasks++;
|
|
const isChecked = taskMatch[1].toLowerCase() === 'x';
|
|
if (isChecked) {
|
|
completedTasks++;
|
|
}
|
|
const taskText = taskMatch[2];
|
|
tasksHtml += `
|
|
<div class="task-item">
|
|
<input type="checkbox" ${isChecked ? 'checked' : ''} disabled>
|
|
<span>${taskText}</span>
|
|
</div>
|
|
`;
|
|
} else {
|
|
// Standard text lines
|
|
tasksHtml += `<p>${line}</p>`;
|
|
}
|
|
}
|
|
|
|
// Determine card status color class
|
|
let cardStateClass = 'none-done';
|
|
if (totalTasks > 0) {
|
|
if (completedTasks === totalTasks) {
|
|
cardStateClass = 'all-done';
|
|
} else if (completedTasks > 0) {
|
|
cardStateClass = 'some-done';
|
|
}
|
|
}
|
|
|
|
cardsHtml += `
|
|
<article class="card ${cardStateClass}">
|
|
<h2>${title}</h2>
|
|
<div class="task-list">
|
|
${tasksHtml}
|
|
</div>
|
|
</article>
|
|
`;
|
|
});
|
|
|
|
// Render the list of cards in a timeline
|
|
document.getElementById('content').innerHTML = `
|
|
<div class="timeline">
|
|
${cardsHtml}
|
|
</div>
|
|
`;
|
|
})
|
|
.catch(error => {
|
|
document.getElementById('content').innerHTML = `
|
|
<h1>Error</h1>
|
|
<p>Failed to load roadmap: ${error.message}</p>
|
|
`;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|