Hardik
2de883c70f
Captures the live PPMS visual language (tokens from globals.css + components/ui/* + lib/utils.ts) so new screens can be prototyped with the same look and feel. - Wireframe/design-system.html: single-page living style guide (color ramps, typography, radius/shadow/spacing, icons, app shell, buttons, badges, PO status badges, cards/KPIs, forms, tabs, tables, alerts/dialog, charts, formatting conventions, do/don't). - Wireframe/ds-bundle/: per-component @dsCard preview cards (Foundations / Layout / Components) used to sync the design system to the claude.ai Design System project. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
27 lines
2.9 KiB
HTML
27 lines
2.9 KiB
HTML
<!-- @dsCard group="Components" name="Forms" subtitle="inputs/select/textarea, focus ring-primary-500/20" width="680" height="440" -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>PPMS · Forms</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<script>tailwind.config={theme:{extend:{colors:{primary:{500:"#3b82f6"},danger:{700:"#b91c1c"},neutral:{50:"#fafafa",100:"#f5f5f5",200:"#e5e5e5",300:"#d4d4d4",400:"#a3a3a3",500:"#737373",700:"#404040",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif']}}}}</script>
|
|
<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}</style>
|
|
</head>
|
|
<body class="bg-neutral-50 p-6 text-neutral-900">
|
|
<h2 class="text-lg font-semibold">Forms</h2>
|
|
<p class="mt-1 text-sm text-neutral-600">From <code>components/ui/input.tsx</code>: <code>h-10 rounded-lg border-neutral-300</code>; focus <code>border-primary-500 ring-2 ring-primary-500/20</code>.</p>
|
|
<div class="mt-4 grid max-w-2xl gap-4 rounded-lg border border-neutral-200 bg-white p-6">
|
|
<div><label class="mb-1.5 block text-sm font-medium text-neutral-700">PO title</label><input placeholder="e.g. Engine spares — MV Pelagia Star" class="h-10 w-full rounded-lg border border-neutral-300 px-3 text-sm placeholder:text-neutral-400 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"/></div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div><label class="mb-1.5 block text-sm font-medium text-neutral-700">Cost centre</label><select class="h-10 w-full rounded-lg border border-neutral-300 bg-white px-3 text-sm text-neutral-700 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"><option>MV Pelagia Star</option><option>MV Ocean Dawn</option></select></div>
|
|
<div><label class="mb-1.5 block text-sm font-medium text-neutral-700">Date required</label><input type="date" class="h-10 w-full rounded-lg border border-neutral-300 px-3 text-sm text-neutral-700 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"/></div>
|
|
</div>
|
|
<div><label class="mb-1.5 block text-sm font-medium text-neutral-700">Notes</label><textarea rows="2" placeholder="Optional…" class="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm placeholder:text-neutral-400 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"></textarea></div>
|
|
<div><label class="mb-1.5 block text-sm font-medium text-neutral-700">Disabled</label><input disabled value="Read-only value" class="h-10 w-full cursor-not-allowed rounded-lg border border-neutral-300 bg-neutral-50 px-3 text-sm text-neutral-500 opacity-60"/></div>
|
|
<p class="-mt-1 text-xs text-danger-700">Inline validation error sits under the field in <code>text-danger-700</code>.</p>
|
|
</div>
|
|
</body>
|
|
</html>
|