mockups/milestone_new.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>New milestone · 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="space-y-6">

    <section aria-labelledby="new-title">
      <p class="font-mono text-[11px] text-muted-foreground uppercase tracking-wider mb-2">
          <a href="repo.html" class="hover:underline">cloudzilla</a>
          <span aria-hidden="true">·</span>
          <a href="milestones.html" class="hover:underline">Milestones</a>
          <span aria-hidden="true">·</span>
          New
        </p>
      <h1 id="new-title" class="text-2xl font-semibold tracking-tight">Create a new milestone</h1>
      <p class="mt-1 text-[13px] text-muted-foreground">Group issues and pull requests toward a shared goal and track progress to a date.</p>
    </section>

    <div class="grid lg:grid-cols-[1fr_280px] gap-8">
      <div class="min-w-0">
        <section aria-labelledby="composer" class="rounded-md border border-border bg-card p-6">
          <h2 id="composer" class="text-[13px] font-medium mb-5">Milestone details</h2>
          <form onsubmit="location.href='milestone_detail.html';return false" class="space-y-5">
            <div class="space-y-1.5">
              <label for="title" class="block text-sm font-medium">Title</label>
              <input id="title" name="title" type="text" required autofocus placeholder="e.g. Milestone 4: Scale" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"/>
            </div>

            <div class="space-y-1.5">
              <label for="due_date" class="block text-sm font-medium">Due date <span class="text-muted-foreground font-normal">(optional)</span></label>
              <div class="sm:max-w-xs">
                <input id="due_date" name="due_date" type="date" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"/>
              </div>
              <p class="text-[11px] text-muted-foreground">Leave blank for an open-ended milestone.</p>
            </div>

            <div class="space-y-1.5">
              <label for="description" class="block text-sm font-medium">Description <span class="text-muted-foreground font-normal">(optional)</span></label>
              <textarea id="description" name="description" rows="8" class="flex min-h-[160px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm font-mono shadow-xs placeholder:text-muted-foreground resize-vertical" placeholder="What does this milestone deliver? Markdown supported."></textarea>
            </div>

            <div class="flex items-center gap-3 pt-2">
              <button type="submit" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none bg-success text-success-foreground hover:bg-success/90 h-9 px-4 text-sm">
                Create milestone
              </button>
              <a href="milestones.html" class="text-sm text-muted-foreground hover:underline">Cancel</a>
            </div>
          </form>
        </section>
      </div>

      <aside class="space-y-6" aria-label="Milestone tips">
        <section aria-labelledby="about-h">
          <h2 id="about-h" class="text-[12px] font-medium text-muted-foreground mb-2">About milestones</h2>
          <p class="text-[13px] text-muted-foreground">A milestone groups issues and pull requests toward a shared goal — a release or a sprint — and tracks how many are closed.</p>
        </section>
        <section aria-labelledby="tips-h" class="border-t border-border pt-5">
          <h2 id="tips-h" class="text-[12px] font-medium text-muted-foreground mb-2">Good to know</h2>
          <ul class="space-y-2.5 text-[13px] text-muted-foreground">
            <li class="flex gap-2"><span aria-hidden="true">·</span><span>Leave the due date blank for an open-ended milestone.</span></li>
            <li class="flex gap-2"><span aria-hidden="true">·</span><span>Assign this milestone from any issue or pull request once it exists.</span></li>
            <li class="flex gap-2"><span aria-hidden="true">·</span><span>Closed milestones stay searchable from issue filters.</span></li>
          </ul>
        </section>
      </aside>
    </div>
  </div>
</main>

<div id="cz-footer"></div>
<script src="shell.js"></script>
</body>
</html>