-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
12 lines (12 loc) · 6.87 KB
/
Copy pathindex.html
File metadata and controls
12 lines (12 loc) · 6.87 KB
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UI8Kit Codegen · Static HTML</title>
<link rel="stylesheet" href="./static/css/app.css">
</head>
<body class="bg-background text-foreground antialiased">
<main class="min-h-screen bg-muted/30 text-foreground"><div class="mx-auto max-w-4xl px-4 py-16"><div class="flex flex-col items-start justify-start gap-8"><div class="flex flex-col justify-start items-center gap-4 text-center"><div class="inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground px-2 py-1 text-xs uppercase tracking-wide">Static HTML</div><h1 class="text-3xl font-bold tracking-tight">UI8Kit Codegen</h1><p class="max-w-2xl text-muted-foreground">One typed render contract — seven generated runtimes with identical DOM, design, and ARIA.</p></div><div class="rounded-md border border-border bg-card text-card-foreground shadow-sm"><div class="border-b border-border px-4 py-2"><h2 class="text-sm font-semibold">Generated primitives</h2></div><div class="p-4"><div class="flex flex-col items-start justify-start gap-4"><div class="flex min-w-0 flex-wrap gap-2"><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-8 rounded-md px-3">Default</button><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-secondary/80 h-8 rounded-md px-3">Secondary</button><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3">Outline</button><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3">Ghost</button><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground hover:bg-destructive/90 h-8 rounded-md px-3">Destructive</button></div><div class="flex min-w-0 flex-wrap gap-2"><div class="inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80 px-2 py-1 text-xs">Badge</div><div class="inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 px-2 py-1 text-xs">Secondary</div><div class="inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground px-2 py-1 text-xs">Outline</div></div></div></div></div><div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4"><div class="rounded-md border border-border text-card-foreground shadow-sm bg-muted/40"><div class="border-b border-border px-4 py-2"><h2 class="text-sm font-semibold">Spec-driven</h2></div><div class="p-4"><p class="text-sm text-muted-foreground">Brick definitions in a tiny expression IR — no hand-written drift across stacks.</p></div></div><div class="rounded-md border border-border text-card-foreground shadow-sm bg-muted/40"><div class="border-b border-border px-4 py-2"><h2 class="text-sm font-semibold">Seven runtimes</h2></div><div class="p-4"><p class="text-sm text-muted-foreground">Go Templ, React 19, Svelte 5, Vue 3, Latte, Twig, and static HTML from the same source.</p></div></div><div class="rounded-md border border-border text-card-foreground shadow-sm bg-muted/40"><div class="border-b border-border px-4 py-2"><h2 class="text-sm font-semibold">DOM parity</h2></div><div class="p-4"><p class="text-sm text-muted-foreground">The canonical renderer is the executable specification, verified by tests.</p></div></div></div><div class="rounded-lg border border-border bg-card p-4"><div class="flex flex-col items-start justify-start gap-3"><p class="text-sm font-medium">Preview other runtimes</p><div class="flex min-w-0 flex-wrap gap-3"><a class="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-primary hover:underline text-sm" href="http://127.0.0.1:8080">Go Templ</a><a class="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-primary hover:underline text-sm" href="http://127.0.0.1:5173">React 19</a><a class="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-primary hover:underline text-sm" href="http://127.0.0.1:5174">Svelte 5</a><a class="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-primary hover:underline text-sm" href="http://127.0.0.1:5175">Vue 3</a><a class="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-primary hover:underline text-sm" href="http://127.0.0.1:5176">Latte</a><a class="inline-flex items-center gap-2 underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-primary hover:underline text-sm" href="http://127.0.0.1:5177">Twig</a></div></div></div><p class="text-center text-sm text-muted-foreground">Same shadcn tokens · generated ui/ primitives · @ui8kit/codegen</p></div></div></main>
</body>
</html>