mockups/dependencies.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>mkappworks/cloudzilla — Dependencies — 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="code"></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="deps-title">
      <h1 id="deps-title" class="text-2xl font-semibold tracking-tight">Dependencies</h1>
    </section>
    <section class="rounded-md border border-border bg-card" aria-labelledby="dep-go">
      <header class="px-4 py-3 border-b border-border flex items-center justify-between">
        <h2 id="dep-go" class="font-medium text-sm">go.mod</h2>
        <span class="text-xs text-muted-foreground font-mono">go</span>
      </header>
      <table class="w-full text-sm">
        <thead class="sr-only">
          <tr><th>Package</th><th>Version</th><th>Type</th></tr>
        </thead>
        <tbody class="divide-y divide-border">
          <tr class="hover:bg-muted/40">
            <td class="px-4 py-2 font-mono truncate">github.com/go-chi/chi/v5</td>
            <td class="px-4 py-2 text-xs text-muted-foreground font-mono">v5.1.0</td>
            <td class="px-4 py-2">
              <span class="inline-flex items-center px-2 py-0.5 rounded-full border text-[11px] font-medium bg-success/15 text-success border-success/30">prod</span>
            </td>
          </tr>
          <tr class="hover:bg-muted/40">
            <td class="px-4 py-2 font-mono truncate">github.com/go-git/go-git/v5</td>
            <td class="px-4 py-2 text-xs text-muted-foreground font-mono">v5.12.0</td>
            <td class="px-4 py-2">
              <span class="inline-flex items-center px-2 py-0.5 rounded-full border text-[11px] font-medium bg-success/15 text-success border-success/30">prod</span>
            </td>
          </tr>
          <tr class="hover:bg-muted/40">
            <td class="px-4 py-2 font-mono truncate">github.com/jmoiron/sqlx</td>
            <td class="px-4 py-2 text-xs text-muted-foreground font-mono">v1.4.0</td>
            <td class="px-4 py-2">
              <span class="inline-flex items-center px-2 py-0.5 rounded-full border text-[11px] font-medium bg-success/15 text-success border-success/30">prod</span>
            </td>
          </tr>
          <tr class="hover:bg-muted/40">
            <td class="px-4 py-2 font-mono truncate">github.com/spf13/cobra</td>
            <td class="px-4 py-2 text-xs text-muted-foreground font-mono">v1.8.1</td>
            <td class="px-4 py-2">
              <span class="inline-flex items-center px-2 py-0.5 rounded-full border text-[11px] font-medium bg-success/15 text-success border-success/30">prod</span>
            </td>
          </tr>
          <tr class="hover:bg-muted/40">
            <td class="px-4 py-2 font-mono truncate">github.com/spf13/viper</td>
            <td class="px-4 py-2 text-xs text-muted-foreground font-mono">v1.19.0</td>
            <td class="px-4 py-2">
              <span class="inline-flex items-center px-2 py-0.5 rounded-full border text-[11px] font-medium bg-success/15 text-success border-success/30">prod</span>
            </td>
          </tr>
          <tr class="hover:bg-muted/40">
            <td class="px-4 py-2 font-mono truncate">github.com/stretchr/testify</td>
            <td class="px-4 py-2 text-xs text-muted-foreground font-mono">v1.9.0</td>
            <td class="px-4 py-2">
              <span class="inline-flex items-center px-2 py-0.5 rounded-full border text-[11px] font-medium bg-muted text-muted-foreground border-transparent">dev</span>
            </td>
          </tr>
        </tbody>
      </table>
    </section>
    <section class="rounded-md border border-border bg-card" aria-labelledby="dep-npm">
      <header class="px-4 py-3 border-b border-border flex items-center justify-between">
        <h2 id="dep-npm" class="font-medium text-sm">package.json</h2>
        <span class="text-xs text-muted-foreground font-mono">npm</span>
      </header>
      <table class="w-full text-sm">
        <thead class="sr-only">
          <tr><th>Package</th><th>Version</th><th>Type</th></tr>
        </thead>
        <tbody class="divide-y divide-border">
          <tr class="hover:bg-muted/40">
            <td class="px-4 py-2 font-mono truncate">tailwindcss</td>
            <td class="px-4 py-2 text-xs text-muted-foreground font-mono">^4.1.0</td>
            <td class="px-4 py-2">
              <span class="inline-flex items-center px-2 py-0.5 rounded-full border text-[11px] font-medium bg-muted text-muted-foreground border-transparent">dev</span>
            </td>
          </tr>
          <tr class="hover:bg-muted/40">
            <td class="px-4 py-2 font-mono truncate">htmx.org</td>
            <td class="px-4 py-2 text-xs text-muted-foreground font-mono">^2.0.4</td>
            <td class="px-4 py-2">
              <span class="inline-flex items-center px-2 py-0.5 rounded-full border text-[11px] font-medium bg-success/15 text-success border-success/30">prod</span>
            </td>
          </tr>
          <tr class="hover:bg-muted/40">
            <td class="px-4 py-2 font-mono truncate">alpinejs</td>
            <td class="px-4 py-2 text-xs text-muted-foreground font-mono">^3.14.1</td>
            <td class="px-4 py-2">
              <span class="inline-flex items-center px-2 py-0.5 rounded-full border text-[11px] font-medium bg-success/15 text-success border-success/30">prod</span>
            </td>
          </tr>
          <tr class="hover:bg-muted/40">
            <td class="px-4 py-2 font-mono truncate">mermaid</td>
            <td class="px-4 py-2 text-xs text-muted-foreground font-mono">^11.3.0</td>
            <td class="px-4 py-2">
              <span class="inline-flex items-center px-2 py-0.5 rounded-full border text-[11px] font-medium bg-success/15 text-success border-success/30">prod</span>
            </td>
          </tr>
        </tbody>
      </table>
    </section>
  </div>
</main>

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