mockups/new_repo.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 repository — 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"></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">
<section class="mb-6">
<h1 class="text-2xl font-semibold tracking-tight">New repository</h1>
<p class="mt-1 text-[13px] text-muted-foreground">A repository contains all of your project's files, revision history, and collaborators.</p>
</section>
<div class="grid lg:grid-cols-[1fr_280px] gap-8">
<div class="min-w-0">
<form id="repo-form" class="border border-border rounded-lg bg-card p-6 space-y-6">
<div class="grid grid-cols-[1fr_auto_2fr] gap-3 items-end">
<div>
<label for="repo-owner-btn" class="block text-[12px] font-medium text-muted-foreground mb-1.5">Owner *</label>
<div class="relative" data-cselect>
<input type="hidden" id="repo-owner" name="owner" value="mkappworks" />
<button type="button" id="repo-owner-btn" aria-expanded="false" aria-haspopup="listbox" class="relative flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent pl-3 pr-8 py-1 text-sm text-left shadow-xs">
<span class="flex min-w-0 items-center gap-2" data-cselect-label>mkappworks</span>
<svg class="absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true" focusable="false"><path d="M7 10l5 5 5-5"/></svg>
</button>
<ul hidden tabindex="-1" role="listbox" class="absolute right-0 top-full mt-1.5 z-50 w-max min-w-full max-h-80 overflow-y-auto rounded-md border border-border bg-popover text-popover-foreground shadow-md p-1 text-sm focus:outline-hidden">
<li role="option" data-value="mkappworks" data-label="mkappworks" data-visibility="public" aria-selected="true" class="flex items-center gap-2 rounded-sm px-2 py-1.5 cursor-default select-none"><span data-option-body class="flex min-w-0 items-center gap-2"><span class="truncate">mkappworks</span></span></li>
<li role="option" data-value="acme-corp" data-label="acme-corp" data-visibility="private" aria-selected="false" class="flex items-center gap-2 rounded-sm px-2 py-1.5 cursor-default select-none"><span data-option-body class="flex min-w-0 items-center gap-2"><span class="truncate">acme-corp</span></span></li>
<li role="option" data-value="stitch-labs" data-label="stitch-labs" data-visibility="public" aria-selected="false" class="flex items-center gap-2 rounded-sm px-2 py-1.5 cursor-default select-none"><span data-option-body class="flex min-w-0 items-center gap-2"><span class="truncate">stitch-labs</span></span></li>
</ul>
</div>
</div>
<span class="text-muted-foreground pb-2.5" aria-hidden="true">/</span>
<div>
<label for="repo-name" class="block text-[12px] font-medium text-muted-foreground mb-1.5">Repository name *</label>
<input id="repo-name" name="name" type="text" required pattern="[A-Za-z0-9._\-]+" placeholder="my-new-repo" autofocus class="w-full bg-background border border-border rounded-md px-2.5 py-2 text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-hidden focus:border-ring font-mono" />
</div>
</div>
<p class="text-[12px] text-muted-foreground">Great repository names are short and memorable. Need inspiration? <span class="font-mono">turbo-octo-meme</span>.</p>
<div>
<label for="repo-description" class="block text-[12px] font-medium text-muted-foreground mb-1.5">
Description <span class="text-muted-foreground font-normal">(optional)</span>
</label>
<textarea id="repo-description" name="description" rows="2" placeholder="A short description of your project" class="w-full bg-background border border-border rounded-md px-2.5 py-2 text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-hidden focus:border-ring"></textarea>
</div>
<fieldset>
<legend class="text-[12px] font-medium text-muted-foreground mb-2">Visibility</legend>
<label class="border border-border rounded-md p-3 flex items-start gap-3 cursor-pointer hover:bg-accent mb-2">
<input type="radio" name="visibility" value="public" checked class="mt-0.5 accent-ring" />
<div>
<p class="text-[13.5px] font-medium inline-flex items-center gap-2"><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"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg> Public</p>
<p class="mt-0.5 text-[12.5px] text-muted-foreground">Anyone on the internet can see this repository. You choose who can commit.</p>
</div>
</label>
<label class="border border-border rounded-md p-3 flex items-start gap-3 cursor-pointer hover:bg-accent">
<input type="radio" name="visibility" value="private" class="mt-0.5 accent-ring" />
<div>
<p class="text-[13.5px] font-medium inline-flex items-center gap-2"><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="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0110 0v4"></path></svg> Private</p>
<p class="mt-0.5 text-[12.5px] text-muted-foreground">You choose who can see and commit to this repository.</p>
</div>
</label>
</fieldset>
<div class="space-y-3">
<p class="text-[12px] font-medium text-muted-foreground">Initialize this repository with</p>
<label class="flex items-start gap-2 text-[13px]">
<input type="checkbox" id="repo-readme" checked class="mt-0.5 accent-ring" />
<span>Add a README — describes your project at a glance.</span>
</label>
<div>
<label for="repo-gitignore-btn" class="block text-[12px] font-medium text-muted-foreground mb-1.5">
Add .gitignore <span class="text-muted-foreground font-normal">(optional)</span>
</label>
<div class="relative" data-cselect>
<input type="hidden" id="repo-gitignore" name="gitignore" value="" />
<button type="button" id="repo-gitignore-btn" aria-expanded="false" aria-haspopup="listbox" class="relative flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent pl-3 pr-8 py-1 text-sm text-left shadow-xs">
<span class="flex min-w-0 items-center gap-2" data-cselect-label>None</span>
<svg class="absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true" focusable="false"><path d="M7 10l5 5 5-5"/></svg>
</button>
<ul hidden tabindex="-1" role="listbox" class="absolute right-0 top-full mt-1.5 z-50 w-max min-w-full max-h-80 overflow-y-auto rounded-md border border-border bg-popover text-popover-foreground shadow-md p-1 text-sm focus:outline-hidden">
<li role="option" data-value="" data-label="None" aria-selected="true" class="flex items-center gap-2 rounded-sm px-2 py-1.5 cursor-default select-none"><span data-option-body class="flex min-w-0 items-center gap-2"><span class="truncate">None</span></span></li>
<li role="option" data-value="Go" data-label="Go" aria-selected="false" class="flex items-center gap-2 rounded-sm px-2 py-1.5 cursor-default select-none"><span data-option-body class="flex min-w-0 items-center gap-2"><span class="truncate">Go</span></span></li>
<li role="option" data-value="Node" data-label="Node" aria-selected="false" class="flex items-center gap-2 rounded-sm px-2 py-1.5 cursor-default select-none"><span data-option-body class="flex min-w-0 items-center gap-2"><span class="truncate">Node</span></span></li>
<li role="option" data-value="Python" data-label="Python" aria-selected="false" class="flex items-center gap-2 rounded-sm px-2 py-1.5 cursor-default select-none"><span data-option-body class="flex min-w-0 items-center gap-2"><span class="truncate">Python</span></span></li>
<li role="option" data-value="Rust" data-label="Rust" aria-selected="false" class="flex items-center gap-2 rounded-sm px-2 py-1.5 cursor-default select-none"><span data-option-body class="flex min-w-0 items-center gap-2"><span class="truncate">Rust</span></span></li>
</ul>
</div>
<p class="mt-1 text-[12px] text-muted-foreground">Choose which files Git should ignore, from a template.</p>
</div>
<div>
<label for="repo-license-btn" class="block text-[12px] font-medium text-muted-foreground mb-1.5">
Choose a license <span class="text-muted-foreground font-normal">(optional)</span>
</label>
<div class="relative" data-cselect>
<input type="hidden" id="repo-license" name="license" value="" />
<button type="button" id="repo-license-btn" aria-expanded="false" aria-haspopup="listbox" class="relative flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent pl-3 pr-8 py-1 text-sm text-left shadow-xs">
<span class="flex min-w-0 items-center gap-2" data-cselect-label>None</span>
<svg class="absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true" focusable="false"><path d="M7 10l5 5 5-5"/></svg>
</button>
<ul hidden tabindex="-1" role="listbox" class="absolute right-0 top-full mt-1.5 z-50 w-max min-w-full max-h-80 overflow-y-auto rounded-md border border-border bg-popover text-popover-foreground shadow-md p-1 text-sm focus:outline-hidden">
<li role="option" data-value="" data-label="None" aria-selected="true" class="flex items-center gap-2 rounded-sm px-2 py-1.5 cursor-default select-none"><span data-option-body class="flex min-w-0 items-center gap-2"><span class="truncate">None</span></span></li>
<li role="option" data-value="mit" data-label="MIT License" aria-selected="false" class="flex items-center gap-2 rounded-sm px-2 py-1.5 cursor-default select-none"><span data-option-body class="flex min-w-0 items-center gap-2"><span class="truncate">MIT License</span></span></li>
<li role="option" data-value="apache-2.0" data-label="Apache License 2.0" aria-selected="false" class="flex items-center gap-2 rounded-sm px-2 py-1.5 cursor-default select-none"><span data-option-body class="flex min-w-0 items-center gap-2"><span class="truncate">Apache License 2.0</span></span></li>
<li role="option" data-value="gpl-3.0" data-label="GNU General Public License v3.0" aria-selected="false" class="flex items-center gap-2 rounded-sm px-2 py-1.5 cursor-default select-none"><span data-option-body class="flex min-w-0 items-center gap-2"><span class="truncate">GNU General Public License v3.0</span></span></li>
</ul>
</div>
<p class="mt-1 text-[12px] text-muted-foreground">Sets the terms under which others may reuse your code.</p>
</div>
</div>
<div id="repo-form-error" role="alert" class="hidden text-sm text-destructive bg-destructive/10 border border-destructive/40 rounded-md px-3 py-2"></div>
<div class="flex items-center justify-end gap-2 pt-2 border-t border-border">
<a href="my_repositories.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-9 px-4 text-sm">Cancel</a>
<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 repository</button>
</div>
</form>
</div>
<aside class="space-y-6" aria-label="About repositories">
<section aria-labelledby="rn-about">
<h2 id="rn-about" class="text-[12px] font-medium text-muted-foreground mb-2">About repositories</h2>
<p class="text-[13px] text-muted-foreground leading-relaxed">A repository is the home for one project — its code, full revision history, issues, and pull requests. Start it empty, or seed it with a README, .gitignore, and license below.</p>
</section>
<section aria-labelledby="rn-tips" class="border-t border-border pt-5">
<h2 id="rn-tips" class="text-[12px] font-medium text-muted-foreground mb-2">Good to know</h2>
<ul class="space-y-2 text-[13px] text-muted-foreground leading-relaxed">
<li>Repository names must be unique within the owner account or organization.</li>
<li>Visibility can be switched between public and private later in repository settings.</li>
<li>Adding a README lets you clone a working copy right away — an empty repo only shows setup instructions.</li>
<li>A license sets the terms for how others may reuse your code; you can add one later too.</li>
</ul>
</section>
</aside>
</div>
<p class="mt-6 text-[12.5px] text-muted-foreground text-center">Want to import an existing repository instead? <a href="repo_import.html" class="text-primary underline">Import a repository →</a></p>
</main>
<div id="cz-footer"></div>
<script>
(function () {
document.querySelectorAll('[data-cselect]').forEach(function (box) {
var input = box.querySelector('input[type=hidden]');
var btn = box.querySelector('button');
var list = box.querySelector('ul');
var label = box.querySelector('[data-cselect-label]');
list.setAttribute('aria-label', input.name);
var active = 0, typed = '', typedAt = 0;
function options() { return Array.from(list.querySelectorAll('[role=option]')); }
function close(refocus) { list.hidden = true; btn.setAttribute('aria-expanded', 'false'); if (refocus) btn.focus(); }
function reveal() { options().forEach(function (o, i) { o.classList.toggle('bg-accent', i === active); o.classList.toggle('text-accent-foreground', i === active); }); list.setAttribute('aria-activedescendant', options()[active].id); options()[active].scrollIntoView({block: 'nearest'}); }
options().forEach(function (o, i) { o.id = btn.id + '-opt-' + i; o.addEventListener('mousemove', function () { active = i; reveal(); }); });
function openMenu() { list.hidden = false; btn.setAttribute('aria-expanded', 'true'); active = Math.max(0, options().findIndex(function (o) { return o.dataset.value === input.value; })); list.focus(); reveal(); }
btn.addEventListener('keydown', function (e) { if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); openMenu(); } });
list.addEventListener('keydown', function (e) {
var opts = options();
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); active = (active + (e.key === 'ArrowDown' ? 1 : -1) + opts.length) % opts.length; reveal(); }
else if (e.key === 'Home' || e.key === 'End') { e.preventDefault(); active = e.key === 'Home' ? 0 : opts.length - 1; reveal(); }
else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); opts[active].click(); btn.focus(); }
else if (e.key === 'Escape') { e.preventDefault(); close(true); }
else if (e.key === 'Tab') close(false);
else if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
var now = Date.now(); typed = (now - typedAt > 500 ? '' : typed) + e.key.toLowerCase(); typedAt = now;
var found = opts.findIndex(function (o) { return o.textContent.trim().toLowerCase().startsWith(typed); });
if (found >= 0) { active = found; reveal(); }
}
});
btn.addEventListener('click', function () {
var open = list.hidden;
document.querySelectorAll('[data-cselect] ul').forEach(function (u) { u.hidden = true; });
if (open) openMenu(); else close(false);
});
list.addEventListener('click', function (e) {
var opt = e.target.closest('[role=option]');
if (!opt) return;
var changed = input.value !== opt.dataset.value;
input.value = opt.dataset.value;
label.textContent = opt.dataset.label;
list.querySelectorAll('[role=option]').forEach(function (b) {
var on = b === opt;
b.classList.toggle('bg-accent', on);
b.classList.toggle('text-foreground', on);
b.setAttribute('aria-selected', on ? 'true' : 'false');
});
if (changed && opt.dataset.visibility) {
var radio = document.querySelector('input[name=visibility][value=' + opt.dataset.visibility + ']');
if (radio) radio.checked = true;
}
close(true);
});
document.addEventListener('click', function (e) { if (!box.contains(e.target)) close(); });
});
document.getElementById('repo-form').addEventListener('submit', function (e) {
e.preventDefault();
var f = e.target;
window.location.href = 'repo.html';
});
})();
</script>
</body>
</html>