yuanzonghao
8f94d3aa65
Revises the InfiPlot homepage from the initial prototype pass.
Stories data model
- Replaces the artificial 7-hero + 16-gallery split with a flat
per-gender model: 30 preset stories each for 男性向 / 女性向.
- Renames assets hero*/gallery* → m{0..29} / f{0..29}; same index
shares aspect ratio across genders so the gender crossfade never
jumps card height.
- Fills in the missing 女性向 set and expands both genders to 30.
Cards
- StoryCard measures aspect ratio at runtime from the loaded image
(onLoad → naturalWidth/Height), fixing the frosted-caption band
reflow on lazy image load. Drops ready/fallback props; single
masonry map over STORIES[gender].
Hero input
- Single-line <input> → auto-growing <textarea> (rows=1, resize-none)
so long prompts and long card seeds are fully visible. Enter submits,
Shift+Enter inserts a newline.
- lining-nums on the input so digits sit on the baseline instead of
Cormorant's default old-style figures.
Typography / styles
- layout.tsx: editorial fonts (Cormorant Garamond + Inter via
--font-serif / --font-sans) + Font Awesome; drops Patrick Hand /
Noto Sans SC and the hand-drawn SVG jitter filters.
- globals.css trimmed to the editorial base (paper grain, hairline,
num, ripple); play/page.tsx font/style follow-up.
Scripts
- generate-home-images.mjs reworked into a flat 2×30 idempotent
Runware FLUX.2 generator.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { Cormorant_Garamond, Inter } from "next/font/google";
|
|
import "./globals.css";
|
|
|
|
// Editorial 云梦 fonts: drive tailwind `font-serif`/`font-sans` via
|
|
// --font-serif / --font-sans across every page (home, /play, /new, CustomForm).
|
|
const cormorant = Cormorant_Garamond({
|
|
subsets: ["latin"],
|
|
weight: ["300", "400", "500", "600"],
|
|
style: ["normal", "italic"],
|
|
variable: "--font-serif",
|
|
display: "swap",
|
|
});
|
|
|
|
const inter = Inter({
|
|
subsets: ["latin"],
|
|
weight: ["300", "400", "500"],
|
|
variable: "--font-sans",
|
|
display: "swap",
|
|
});
|
|
|
|
export const metadata: Metadata = {
|
|
title: "InfiPlot — AI 实时交互剧情游戏",
|
|
description: "InfiPlot 是一款用 AI 实时生成图片、语音与剧情分支的交互式剧情游戏 Demo。",
|
|
};
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<html
|
|
lang="zh-CN"
|
|
className={`${cormorant.variable} ${inter.variable}`}
|
|
suppressHydrationWarning
|
|
>
|
|
<head>
|
|
{/* Font Awesome — fa-solid icons used by home, /play, /new, CustomForm. */}
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
|
/>
|
|
</head>
|
|
<body className="bg-cream-50 text-clay-900 font-sans antialiased min-h-screen overflow-x-hidden">
|
|
{children}
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|