mockups/milestones.html
Rama main · réplica de lectura del repositorio original.
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Milestones · mkappworks/cloudzilla — Cloudzilla</title>
<link rel="stylesheet" href="/assets/tailwind.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Geist:wght@400;500;600&display=swap" rel="stylesheet" />
</head>
<body class="min-h-screen flex flex-col antialiased font-sans">
<a href="#main-content" class="skip-link">Skip to main content</a>
<div id="cz-header" data-repo-tab="milestones"></div>
<main id="main-content" tabindex="-1" class="max-w-[1400px] mx-auto px-6 pt-6 pb-20 flex-1 w-full">
<div class="flex flex-col gap-6">
<div class="flex flex-wrap items-start justify-between gap-4">
<div class="min-w-0">
<h1 class="text-2xl font-semibold tracking-tight">Milestones</h1>
<p class="mt-1 text-[13px] text-muted-foreground">Group issues and pull requests toward a shared goal and track progress.</p>
</div>
<a href="milestone_new.html" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors h-9 px-4 text-sm bg-success text-success-foreground hover:bg-success/90">
New milestone
</a>
</div>
<div class="flex items-center gap-1 border-b border-border text-sm" role="tablist" aria-label="Milestone state">
<button type="button" id="ms-tab-open" role="tab" aria-selected="true" aria-controls="ms-list-open" class="cz-ms-tab px-3 py-2.5 -mb-px border-b-2 border-foreground font-medium text-foreground">
Open <span class="font-mono text-[11px] text-muted-foreground ml-0.5">3</span>
</button>
<button type="button" id="ms-tab-closed" tabindex="-1" role="tab" aria-selected="false" aria-controls="ms-list-closed" class="cz-ms-tab px-3 py-2.5 -mb-px border-b-2 border-transparent text-muted-foreground hover:text-foreground">
Closed <span class="font-mono text-[11px] text-muted-foreground ml-0.5">2</span>
</button>
</div>
<div id="ms-list-open" role="tabpanel" aria-labelledby="ms-tab-open" class="space-y-3">
<div class="relative rounded-md border border-border bg-card p-4 transition-[padding] before:content-[''] before:absolute before:left-0 before:inset-y-2 before:w-0.5 before:rounded-xs before:bg-foreground before:opacity-0 hover:before:opacity-100 hover:pl-[18px]">
<div class="flex items-start gap-3">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="shrink-0 mt-0.5 text-success" aria-hidden="true"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg>
<div class="min-w-0 flex-1">
<a href="milestone_detail.html" class="font-semibold hover:underline after:absolute after:inset-0">Milestone 2: Public beta</a>
<p class="text-xs text-muted-foreground mt-0.5">
Due by Jun 30, 2026
</p>
<p class="text-sm text-muted-foreground mt-1.5">Open the product to external testers: invite-code sign-up, onboarding and a feedback loop.</p>
<div class="mt-2.5 max-w-md">
<div class="mt-2">
<div class="flex items-center gap-2 text-xs text-muted-foreground mb-1">
<span>9 / 19 issues closed</span>
</div>
<div class="w-full bg-muted rounded-full h-1.5">
<div class="bg-success h-1.5 rounded-full" style="width: 47%"></div>
</div>
</div>
</div>
<p class="text-[11px] text-muted-foreground mt-1.5 font-mono">
47% complete · 9 closed · 10 open
</p>
</div>
</div>
</div>
<div class="relative rounded-md border border-border bg-card p-4 transition-[padding] before:content-[''] before:absolute before:left-0 before:inset-y-2 before:w-0.5 before:rounded-xs before:bg-foreground before:opacity-0 hover:before:opacity-100 hover:pl-[18px]">
<div class="flex items-start gap-3">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="shrink-0 mt-0.5 text-success" aria-hidden="true"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg>
<div class="min-w-0 flex-1">
<a href="milestone_detail.html" class="font-semibold hover:underline after:absolute after:inset-0">Milestone 3: GA</a>
<p class="text-xs text-muted-foreground mt-0.5">
Due by Sep 15, 2026
</p>
<p class="text-sm text-muted-foreground mt-1.5">General availability: billing, SLA tooling and the hardening backlog.</p>
<div class="mt-2.5 max-w-md">
<div class="mt-2">
<div class="flex items-center gap-2 text-xs text-muted-foreground mb-1">
<span>2 / 16 issues closed</span>
</div>
<div class="w-full bg-muted rounded-full h-1.5">
<div class="bg-success h-1.5 rounded-full" style="width: 12%"></div>
</div>
</div>
</div>
<p class="text-[11px] text-muted-foreground mt-1.5 font-mono">
12% complete · 2 closed · 14 open
</p>
</div>
</div>
</div>
<div class="relative rounded-md border border-border bg-card p-4 transition-[padding] before:content-[''] before:absolute before:left-0 before:inset-y-2 before:w-0.5 before:rounded-xs before:bg-foreground before:opacity-0 hover:before:opacity-100 hover:pl-[18px]">
<div class="flex items-start gap-3">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="shrink-0 mt-0.5 text-success" aria-hidden="true"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg>
<div class="min-w-0 flex-1">
<a href="milestone_detail.html" class="font-semibold hover:underline after:absolute after:inset-0">Backlog grooming</a>
<p class="text-xs text-muted-foreground mt-0.5">
No due date
</p>
<p class="text-[11px] text-muted-foreground mt-1.5 font-mono">No issues or pull requests assigned</p>
</div>
</div>
</div>
</div>
<div id="ms-list-closed" role="tabpanel" aria-labelledby="ms-tab-closed" class="space-y-3 hidden">
<div class="relative rounded-md border border-border bg-card p-4 transition-[padding] before:content-[''] before:absolute before:left-0 before:inset-y-2 before:w-0.5 before:rounded-xs before:bg-foreground before:opacity-0 hover:before:opacity-100 hover:pl-[18px] opacity-70">
<div class="flex items-start gap-3">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="shrink-0 mt-0.5 text-muted-foreground" aria-hidden="true"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg>
<div class="min-w-0 flex-1">
<a href="milestone_detail.html" class="font-semibold hover:underline after:absolute after:inset-0 line-through">Milestone 1: Core platform</a>
<p class="text-xs text-muted-foreground mt-0.5">
Closed Apr 18, 2026
</p>
<p class="text-sm text-muted-foreground mt-1.5">Git hosting, pull requests, issues and the first admin tools.</p>
<div class="mt-2.5 max-w-md">
<div class="mt-2">
<div class="flex items-center gap-2 text-xs text-muted-foreground mb-1">
<span>32 / 32 issues closed</span>
</div>
<div class="w-full bg-muted rounded-full h-1.5">
<div class="bg-success h-1.5 rounded-full" style="width: 100%"></div>
</div>
</div>
</div>
<p class="text-[11px] text-muted-foreground mt-1.5 font-mono">
100% complete · 32 closed · 0 open
</p>
</div>
</div>
</div>
<div class="relative rounded-md border border-border bg-card p-4 transition-[padding] before:content-[''] before:absolute before:left-0 before:inset-y-2 before:w-0.5 before:rounded-xs before:bg-foreground before:opacity-0 hover:before:opacity-100 hover:pl-[18px] opacity-70">
<div class="flex items-start gap-3">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="shrink-0 mt-0.5 text-muted-foreground" aria-hidden="true"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg>
<div class="min-w-0 flex-1">
<a href="milestone_detail.html" class="font-semibold hover:underline after:absolute after:inset-0 line-through">v0.1 prototype</a>
<p class="text-xs text-muted-foreground mt-0.5">
Closed Feb 2, 2026
</p>
<div class="mt-2.5 max-w-md">
<div class="mt-2">
<div class="flex items-center gap-2 text-xs text-muted-foreground mb-1">
<span>11 / 12 issues closed</span>
</div>
<div class="w-full bg-muted rounded-full h-1.5">
<div class="bg-success h-1.5 rounded-full" style="width: 91%"></div>
</div>
</div>
</div>
<p class="text-[11px] text-muted-foreground mt-1.5 font-mono">
91% complete · 11 closed · 1 open
</p>
</div>
</div>
</div>
</div>
</div>
</main>
<div id="cz-footer"></div>
<script src="shell.js"></script>
<script>
(function () {
var tabs = { open: document.getElementById('ms-tab-open'), closed: document.getElementById('ms-tab-closed') };
var lists = { open: document.getElementById('ms-list-open'), closed: document.getElementById('ms-list-closed') };
function show(which) {
['open', 'closed'].forEach(function (k) {
var active = k === which;
lists[k].classList.toggle('hidden', !active);
tabs[k].setAttribute('aria-selected', String(active));
tabs[k].tabIndex = active ? 0 : -1;
tabs[k].classList.toggle('border-foreground', active);
tabs[k].classList.toggle('text-foreground', active);
tabs[k].classList.toggle('font-medium', active);
tabs[k].classList.toggle('border-transparent', !active);
tabs[k].classList.toggle('text-muted-foreground', !active);
});
}
tabs.open.addEventListener('click', function () { show('open'); });
tabs.closed.addEventListener('click', function () { show('closed'); });
['open', 'closed'].forEach(function (key) {
tabs[key].addEventListener('keydown', function (event) {
var next = event.key === 'Home' ? 'open' : event.key === 'End' ? 'closed' : (event.key === 'ArrowLeft' || event.key === 'ArrowRight') ? (key === 'open' ? 'closed' : 'open') : null;
if (!next) return;
event.preventDefault();
show(next);
tabs[next].focus();
});
});
})();
</script>
</body>
</html>