feat(web): add scaffold layout and page (frontend-design generated)

2026-05-02 20:31:16 +08:00 · 2026-05-02 20:31:16 +08:00 · 17e60db935
commit 17e60db935
parent a556b4e3a0
3 changed files with 95 additions and 0 deletions
--- a/web/app/globals.css
+++ b/web/app/globals.css
@ -0,0 +1 @@
+@import "tailwindcss";
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@ -0,0 +1,17 @@
+import "./globals.css";
+
+export const metadata = {
+  title: "CM Bot V2",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@ -0,0 +1,77 @@
+export default function Home() {
+  const hazardStripe = {
+    backgroundImage:
+      "repeating-linear-gradient(45deg, #facc15 0 24px, #18181b 24px 48px)",
+  };
+
+  return (
+    <main className="min-h-screen bg-white font-mono text-black">
+      {/* Top hazard stripe */}
+      <div className="h-6 w-full" style={hazardStripe} aria-hidden="true" />
+
+      <div className="mx-auto max-w-3xl px-6 py-16 sm:py-24">
+        {/* Status pill */}
+        <div className="mb-10 inline-flex items-center gap-2 border-2 border-black bg-yellow-300 px-3 py-1.5 text-[11px] font-black uppercase tracking-[0.2em] text-black">
+          <span className="h-1.5 w-1.5 bg-black" aria-hidden="true" />
+          Status: Scaffold
+        </div>
+
+        {/* Headline */}
+        <h1 className="text-5xl font-black uppercase tracking-tight text-black sm:text-7xl">
+          CM Bot V2
+        </h1>
+
+        {/* Subhead */}
+        <div className="mt-4 flex items-baseline gap-3">
+          <span className="text-xs font-bold uppercase tracking-[0.2em] text-zinc-400">
+            //
+          </span>
+          <p className="text-sm font-bold uppercase tracking-[0.2em] text-zinc-700 sm:text-base">
+            cm-web-next scaffold
+          </p>
+        </div>
+
+        {/* Notice */}
+        <div className="mt-14 border-2 border-black bg-white p-6 sm:p-8">
+          <div className="mb-3 text-[10px] font-black uppercase tracking-[0.25em] text-zinc-400">
+            Notice
+          </div>
+          <p className="text-base sm:text-xl">
+            This is a placeholder. The real dashboard lands in{" "}
+            <span className="bg-yellow-300 px-1.5 font-black">B2</span>.
+          </p>
+        </div>
+
+        {/* Smoke test */}
+        <div className="mt-6 border-2 border-dashed border-black/50 bg-zinc-50 p-6 sm:p-8">
+          <div className="mb-4 text-[10px] font-black uppercase tracking-[0.25em] text-zinc-400">
+            Smoke Test
+          </div>
+          <p className="text-sm text-zinc-800 sm:text-base">
+            Verify the API proxy reaches{" "}
+            <code className="bg-black px-1.5 py-0.5 font-mono text-xs text-yellow-300">
+              api-server:3000
+            </code>
+            :
+          </p>
+          <a
+            href="/api/414322309db5c06d/"
+            className="mt-5 inline-block border-2 border-black bg-yellow-300 px-5 py-2.5 text-xs font-black uppercase tracking-[0.2em] text-black hover:bg-black hover:text-yellow-300"
+          >
+            GET /api/414322309db5c06d/ →
+          </a>
+        </div>
+
+        {/* Footer marker */}
+        <div className="mt-20 flex items-center gap-4 text-[10px] font-black uppercase tracking-[0.25em] text-zinc-500">
+          <span>B1</span>
+          <span className="h-px flex-1 bg-zinc-300" aria-hidden="true" />
+          <span>not for production</span>
+        </div>
+      </div>
+
+      {/* Bottom hazard stripe */}
+      <div className="h-6 w-full" style={hazardStripe} aria-hidden="true" />
+    </main>
+  );
+}