mirror of
https://github.com/tiennm99/sepay-playground.git
synced 2026-09-02 06:20:53 +00:00
tiennm99
aa119868ce
Initial scaffolding from prior planning session: SePay/Upstash/Vercel research notes, locked tech-stack (SvelteKit 2 + Svelte 5 + JS + pnpm + Tailwind v4 + shadcn-svelte + adapter-vercel + @upstash/redis), technical-minimal design guidelines, HTML wireframes for / and /pay (form/awaiting/paid), plus handoff notes. No application code yet.
65 lines
3.1 KiB
HTML
65 lines
3.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>SePay Playground — New payment</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<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=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: { extend: {
|
|
colors: { bg:'#FAFAFA', surface:'#FFFFFF', border:'#E5E5E5', ink:'#0A0A0A', muted:'#737373',
|
|
accent:'#4F46E5', accentHover:'#4338CA', success:'#16A34A', warning:'#D97706', danger:'#DC2626' },
|
|
fontFamily: { sans:['Inter','system-ui','sans-serif'], mono:['"JetBrains Mono"','ui-monospace','monospace'] },
|
|
borderRadius: { DEFAULT:'4px', md:'4px', lg:'4px' }
|
|
}}
|
|
}
|
|
</script>
|
|
<style>body{font-family:'Inter',system-ui,sans-serif}</style>
|
|
</head>
|
|
<body class="bg-bg text-ink min-h-screen antialiased">
|
|
<header class="border-b border-border">
|
|
<div class="max-w-[480px] mx-auto px-4 md:px-6 h-12 flex items-center justify-between">
|
|
<a href="/" class="font-mono text-[14px] font-medium tracking-tight">sepay/<span class="text-muted">playground</span></a>
|
|
<span class="font-mono text-[12px] text-muted">/pay</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="max-w-[480px] mx-auto px-4 md:px-6 pt-12 pb-16">
|
|
<!-- State A: form -->
|
|
<p class="font-mono text-[12px] text-muted mb-2">step 1 of 3 · new order</p>
|
|
<h1 class="text-[20px] font-semibold tracking-tight mb-6">Enter an amount</h1>
|
|
|
|
<!-- Card containing the form -->
|
|
<div class="bg-surface border border-border rounded p-6">
|
|
<form class="space-y-4">
|
|
<div>
|
|
<label for="amount" class="block text-[12px] font-medium text-muted mb-2 uppercase tracking-wide">Amount (VND)</label>
|
|
<div class="relative">
|
|
<input id="amount" name="amount" type="text" inputmode="numeric" placeholder="10000"
|
|
class="w-full h-10 px-3 pr-14 bg-surface border border-border rounded font-mono text-[16px] text-ink placeholder:text-muted/60 focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent" />
|
|
<span class="absolute right-3 top-1/2 -translate-y-1/2 font-mono text-[12px] text-muted">VND</span>
|
|
</div>
|
|
<p class="mt-2 text-[12px] text-muted">
|
|
Or use the
|
|
<a href="#" class="font-mono text-ink underline underline-offset-2 decoration-border hover:decoration-accent">demo amount: 10,000</a>
|
|
</p>
|
|
</div>
|
|
|
|
<button type="submit"
|
|
class="w-full h-10 bg-accent hover:bg-accentHover text-white text-[14px] font-medium rounded transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
|
|
Generate QR
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<p class="mt-6 font-mono text-[12px] text-muted leading-[1.6]">
|
|
// POST /api/orders → returns { orderCode, qrUrl }
|
|
</p>
|
|
</main>
|
|
</body>
|
|
</html>
|