mockups/org_profile.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>acme-corp — 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-owner="acme-corp"></div>
<script src="shell.js"></script>
<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-8">
<section class="flex flex-wrap items-start gap-6 pb-6 border-b border-border" aria-labelledby="org-name">
<span class="inline-grid place-items-center shrink-0 rounded-full bg-muted border border-border font-medium text-muted-foreground h-10 w-10 text-sm" role="img" aria-label="acme-corp">A</span>
<div class="min-w-0 flex-1">
<p class="font-mono text-[11px] uppercase tracking-wider text-muted-foreground mb-1 inline-flex items-center gap-2">
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><path d="M3 21h18M3 7h18M5 21V7l7-4 7 4v14"></path></svg>
Organization
<span class="inline-flex items-center gap-1.5 h-[22px] px-2 rounded-full border text-[11px] font-medium border-border text-foreground">Owner</span>
</p>
<h1 id="org-name" class="text-2xl font-semibold tracking-tight">Acme Corporation</h1>
<p class="font-mono text-[13px] text-muted-foreground">@acme-corp</p>
<p class="mt-3 text-sm text-muted-foreground max-w-2xl">Building developer tooling for teams that ship daily. Open source first.</p>
<div class="mt-4 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-[13px] text-muted-foreground">
<span class="inline-flex items-center gap-1.5">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="text-muted-foreground" aria-hidden="true" focusable="false"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
Berlin · Remote
</span>
<a href="https://acme.example.com" class="inline-flex items-center gap-1.5 text-primary hover:underline" rel="noopener noreferrer">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true" focusable="false"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"></path></svg>
acme.example.com
</a>
<a href="mailto:hello@acme.example.com" class="inline-flex items-center gap-1.5 hover:text-foreground">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="text-muted-foreground" aria-hidden="true" focusable="false"><path d="M4 4h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2z"></path><polyline points="22 6 12 13 2 6"></polyline></svg>
hello@acme.example.com
</a>
<span class="inline-flex items-center gap-1.5">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="text-muted-foreground" aria-hidden="true" focusable="false"><rect x="3" y="4" width="18" height="18" rx="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
Founded <time datetime="2025-09-12T00:00:00Z">Sep 2025</time>
</span>
</div>
<div class="mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-[12.5px] text-muted-foreground">
<a href="#recent-heading" class="hover:text-foreground"><strong class="text-foreground">14</strong> repositories</a>
<span class="opacity-50" aria-hidden="true">·</span>
<a href="#org-people-heading" class="hover:text-foreground"><strong class="text-foreground">47</strong> members</a>
</div>
</div>
<div class="shrink-0 flex items-center gap-2">
<a href="new_repo.html" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none bg-primary text-primary-foreground hover:bg-primary/90 h-8 px-3 text-[13px]"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true" focusable="false"><path d="M12 5v14M5 12h14"></path></svg> New repository</a>
<a href="org_settings.html" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none border border-input bg-transparent hover:bg-accent hover:text-accent-foreground h-8 px-3 text-[13px]"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"></path></svg> Manage</a>
</div>
</section>
<div class="grid grid-cols-1 lg:grid-cols-[1fr_280px] gap-8">
<div class="space-y-8 min-w-0">
<article class="rounded-md border border-border bg-card overflow-hidden" aria-labelledby="org-readme-heading">
<header class="px-5 py-3 border-b border-border bg-muted flex items-center gap-2">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="text-muted-foreground" aria-hidden="true" focusable="false"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
<h2 id="org-readme-heading" class="text-[13px] font-medium">acme-corp/README.md</h2>
</header>
<div class="prose prose-sm max-w-none dark:prose-invert px-7 py-6">
<h2>Welcome to Acme</h2>
<p>We build the tools we wish we had: fast CI, boring deploys, and honest docs. Browse the pinned repositories below to get started, or read the contributing guide before opening a pull request.</p>
<ul>
<li>Issues and discussions are open to everyone.</li>
<li>Security reports go to security@acme.example.com.</li>
</ul>
</div>
</article>
<section aria-labelledby="pinned-heading">
<div class="flex items-baseline justify-between mb-3">
<h2 id="pinned-heading" class="text-sm font-semibold tracking-tight">Pinned repositories</h2>
<a href="#recent-heading" class="text-[12px] text-primary hover:underline">View all 14 →</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<a href="repo.html" class="block rounded-md border border-border bg-card p-4 hover:border-border-strong">
<div class="flex items-center gap-2">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-muted-foreground"><path d="M9 12l2 2 4-4"/></svg>
<span class="text-sm font-medium truncate">acme-corp/forge-cli</span>
</div>
<p class="text-xs text-muted-foreground mt-2 line-clamp-2">Command-line client for the Acme build platform.</p>
<div class="flex items-center gap-3 mt-2 text-[11px] text-muted-foreground">
<span class="flex items-center gap-1"><span class="inline-block w-2 h-2 rounded-full" style="background-color: #00ADD8"></span>Go</span>
<span>★ 412</span>
</div>
</a>
<a href="repo.html" class="block rounded-md border border-border bg-card p-4 hover:border-border-strong">
<div class="flex items-center gap-2">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-muted-foreground"><path d="M9 12l2 2 4-4"/></svg>
<span class="text-sm font-medium truncate">acme-corp/web-console</span>
</div>
<p class="text-xs text-muted-foreground mt-2 line-clamp-2">The browser console for managing pipelines and runners.</p>
<div class="flex items-center gap-3 mt-2 text-[11px] text-muted-foreground">
<span class="flex items-center gap-1"><span class="inline-block w-2 h-2 rounded-full" style="background-color: #3178C6"></span>TypeScript</span>
<span>★ 238</span>
</div>
</a>
<a href="repo.html" class="block rounded-md border border-border bg-card p-4 hover:border-border-strong">
<div class="flex items-center gap-2">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-muted-foreground"><path d="M9 12l2 2 4-4"/></svg>
<span class="text-sm font-medium truncate">acme-corp/runner</span>
</div>
<p class="text-xs text-muted-foreground mt-2 line-clamp-2">Self-hosted job runner with sandboxed execution.</p>
<div class="flex items-center gap-3 mt-2 text-[11px] text-muted-foreground">
<span class="flex items-center gap-1"><span class="inline-block w-2 h-2 rounded-full" style="background-color: #DEA584"></span>Rust</span>
<span>★ 96</span>
</div>
</a>
<a href="repo.html" class="block rounded-md border border-border bg-card p-4 hover:border-border-strong">
<div class="flex items-center gap-2">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-muted-foreground"><path d="M9 12l2 2 4-4"/></svg>
<span class="text-sm font-medium truncate">acme-corp/docs</span>
</div>
<p class="text-xs text-muted-foreground mt-2 line-clamp-2">Public documentation for every Acme product.</p>
<div class="flex items-center gap-3 mt-2 text-[11px] text-muted-foreground">
<span class="flex items-center gap-1"><span class="inline-block w-2 h-2 rounded-full" style="background-color: #F1E05A"></span>JavaScript</span>
<span>★ 41</span>
</div>
</a>
</div>
</section>
<section aria-labelledby="recent-heading">
<div class="flex items-baseline justify-between mb-3">
<h2 id="recent-heading" class="text-sm font-semibold tracking-tight">Recently updated</h2>
<a href="my_repositories.html" class="text-[12px] text-primary hover:underline">All repositories →</a>
</div>
<ul class="divide-y divide-border rounded-md border border-border bg-card overflow-hidden">
<li>
<a href="repo.html" class="flex items-start gap-3 px-4 py-3.5 hover:bg-accent/50 transition-colors">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="text-muted-foreground mt-1 shrink-0" aria-hidden="true" focusable="false"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"></path><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"></path></svg>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2"><span class="text-[13.5px] font-medium">acme-corp/forge-cli</span></div>
<p class="text-xs text-muted-foreground line-clamp-1 mt-0.5">Command-line client for the Acme build platform.</p>
<div class="mt-1.5 flex items-center gap-3 text-[11.5px] text-muted-foreground">
<span class="inline-flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#00ADD8"></span>Go</span>
<span class="inline-flex items-center gap-1"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true" focusable="false"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg> 412</span>
</div>
</div>
</a>
</li>
<li>
<a href="repo.html" class="flex items-start gap-3 px-4 py-3.5 hover:bg-accent/50 transition-colors">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="text-muted-foreground mt-1 shrink-0" aria-hidden="true" focusable="false"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"></path><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"></path></svg>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2"><span class="text-[13.5px] font-medium">acme-corp/runner</span></div>
<p class="text-xs text-muted-foreground line-clamp-1 mt-0.5">Self-hosted job runner with sandboxed execution.</p>
<div class="mt-1.5 flex items-center gap-3 text-[11.5px] text-muted-foreground">
<span class="inline-flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#DEA584"></span>Rust</span>
<span class="inline-flex items-center gap-1"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true" focusable="false"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg> 96</span>
</div>
</div>
</a>
</li>
<li>
<a href="repo.html" class="flex items-start gap-3 px-4 py-3.5 hover:bg-accent/50 transition-colors">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="text-muted-foreground mt-1 shrink-0" aria-hidden="true" focusable="false"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"></path><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"></path></svg>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2"><span class="text-[13.5px] font-medium">acme-corp/web-console</span></div>
<p class="text-xs text-muted-foreground line-clamp-1 mt-0.5">The browser console for managing pipelines and runners.</p>
<div class="mt-1.5 flex items-center gap-3 text-[11.5px] text-muted-foreground">
<span class="inline-flex items-center gap-1"><span class="w-2 h-2 rounded-full" style="background:#3178C6"></span>TypeScript</span>
<span class="inline-flex items-center gap-1"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true" focusable="false"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg> 238</span>
</div>
</div>
</a>
</li>
</ul>
</section>
</div>
<aside class="space-y-7">
<section id="org-people-heading" aria-labelledby="people-heading">
<div class="flex items-baseline justify-between mb-2">
<h2 id="people-heading" class="font-mono uppercase tracking-wider text-[10px] text-muted-foreground">
People <span class="text-muted-foreground/70">· 47</span>
</h2>
<a href="org_settings.html#members" class="text-[11px] text-primary hover:underline">View all</a>
</div>
<div class="flex flex-wrap gap-1.5">
<a href="profile.html" title="mkappworks" class="hover:opacity-80"><span class="inline-grid place-items-center shrink-0 rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="mkappworks">M</span></a>
<a href="profile.html" title="daisy" class="hover:opacity-80"><span class="inline-grid place-items-center shrink-0 rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="daisy">D</span></a>
<a href="profile.html" title="rchen" class="hover:opacity-80"><span class="inline-grid place-items-center shrink-0 rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="rchen">R</span></a>
<a href="profile.html" title="tomas" class="hover:opacity-80"><span class="inline-grid place-items-center shrink-0 rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="tomas">T</span></a>
<a href="profile.html" title="priya" class="hover:opacity-80"><span class="inline-grid place-items-center shrink-0 rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="priya">P</span></a>
<a href="profile.html" title="olu" class="hover:opacity-80"><span class="inline-grid place-items-center shrink-0 rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="olu">O</span></a>
<a href="profile.html" title="jin" class="hover:opacity-80"><span class="inline-grid place-items-center shrink-0 rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="jin">J</span></a>
<a href="profile.html" title="marta" class="hover:opacity-80"><span class="inline-grid place-items-center shrink-0 rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="marta">M</span></a>
<a href="profile.html" title="sam" class="hover:opacity-80"><span class="inline-grid place-items-center shrink-0 rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="sam">S</span></a>
<a href="profile.html" title="noor" class="hover:opacity-80"><span class="inline-grid place-items-center shrink-0 rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="noor">N</span></a>
<a href="profile.html" title="ivan" class="hover:opacity-80"><span class="inline-grid place-items-center shrink-0 rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="ivan">I</span></a>
<a href="profile.html" title="lena" class="hover:opacity-80"><span class="inline-grid place-items-center shrink-0 rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="lena">L</span></a>
<span class="inline-grid place-items-center h-7 w-7 rounded-sm bg-accent border border-border text-[10px] text-muted-foreground">+35</span>
</div>
</section>
<section aria-labelledby="org-langs-heading">
<h2 id="org-langs-heading" class="font-mono uppercase tracking-wider text-[10px] text-muted-foreground mb-2">Top languages</h2>
<div aria-label="Language composition" role="img">
<div class="flex h-2 rounded-full overflow-hidden border border-border">
<div title="Go — 46%" style="width: 46%; background-color: #00ADD8;"></div>
<div title="TypeScript — 34%" style="width: 34%; background-color: #3178C6;"></div>
<div title="Rust — 12%" style="width: 12%; background-color: #DEA584;"></div>
<div title="JavaScript — 8%" style="width: 8%; background-color: #F1E05A;"></div>
</div>
<ul class="flex flex-wrap gap-3 mt-2 text-xs text-muted-foreground">
<li class="flex items-center gap-1.5"><span class="inline-block w-2 h-2 rounded-full" style="background-color: #00ADD8" aria-hidden="true"></span><span class="text-foreground">Go</span><span>46%</span></li>
<li class="flex items-center gap-1.5"><span class="inline-block w-2 h-2 rounded-full" style="background-color: #3178C6" aria-hidden="true"></span><span class="text-foreground">TypeScript</span><span>34%</span></li>
<li class="flex items-center gap-1.5"><span class="inline-block w-2 h-2 rounded-full" style="background-color: #DEA584" aria-hidden="true"></span><span class="text-foreground">Rust</span><span>12%</span></li>
<li class="flex items-center gap-1.5"><span class="inline-block w-2 h-2 rounded-full" style="background-color: #F1E05A" aria-hidden="true"></span><span class="text-foreground">JavaScript</span><span>8%</span></li>
</ul>
</div>
</section>
<section aria-labelledby="org-created-heading">
<h2 id="org-created-heading" class="font-mono uppercase tracking-wider text-[10px] text-muted-foreground mb-2">Created</h2>
<p class="text-[12.5px]"><time datetime="2025-09-12T00:00:00Z">Sep 2025</time></p>
</section>
<section aria-labelledby="viewer-role-heading">
<h2 id="viewer-role-heading" class="font-mono uppercase tracking-wider text-[10px] text-muted-foreground mb-2">Your role</h2>
<p class="inline-flex items-center gap-2 text-[12.5px]"><span class="inline-flex items-center gap-1.5 h-[22px] px-2 rounded-full border text-[11px] font-medium border-border text-foreground">Owner</span></p>
<p class="mt-1.5 text-[11.5px] text-muted-foreground">Joined <time datetime="2025-09-12T00:00:00Z">Sep 12 2025</time></p>
</section>
</aside>
</div>
</div>
</main>
<div id="cz-footer"></div>
</body>
</html>