change: stdout works
This commit is contained in:
+205
@@ -0,0 +1,205 @@
|
||||
<!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>
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
# Standard Output
|
||||
[X] Establish printing strings and integers
|
||||
[ ] Printing to a Serial Output
|
||||
|
||||
# Memory Management
|
||||
[ ] Register Management
|
||||
[ ] Interrupts
|
||||
[ ] Setting up Virtual Memory with Paging
|
||||
[ ] memory allocations and functions using some sort of malloc (and free duh)
|
||||
|
||||
# GUI design
|
||||
[ ] Terminal Esque Aesthetic (with a `>` and a cursor blinking next to it)
|
||||
[ ] Resolution of 512 x 512 with 1 bit graphics (just RGB)
|
||||
[ ] (Really really unsure) maybe add a glow to the screen? (like the CRT bloom)
|
||||
[ ] make a mockup of the design
|
||||
|
||||
# filesystem - chosen (FAT-x)
|
||||
[ ] Boot Records
|
||||
[ ] File Allocation Table (just realized that's what FAT stands for )
|
||||
[ ] Directory Hierarchy
|
||||
[ ] Setup Hierarchy
|
||||
|
||||
# Core utils
|
||||
[ ] list out the bare minimum core utils to work with
|
||||
[ ] port the above mentioned coreutils
|
||||
Reference in New Issue
Block a user