motionsites中文站 / Fintora Signup
Fintora Signup
aadmin2026-10-26 发布区块4 阅读

Fintora Signup

类型:区块 · 收录:2026-10-26 23:39:00 · 源码:会员可见

付费可阅读内容 · 可复制
# Prompt: Fintora sign-up page (Ice Light)

Build a single-file, responsive **sign-up page for a fictional finance dashboard, Fintora**. Use plain HTML, CSS and inline SVG, with no framework and no build step and no images. The look is "Ice Light": a pale icy-blue page with two big rounded panels. On the left, a near-white sign-up card; on the right, a frosted blue showcase panel with two glassy chart cards.

## Scale

- **Units:** every size is in design pixels of an 847×590 canvas, multiplied by `--u = min(100vw/847, 100dvh/590)`. Cards fill the height and the layout stays centred.
- **Narrow screens:** in portrait or under 700px wide, the panels stack, at `--u = (100vw − 32px)/357`.

## Type and colour

- **Font:** **Urbanist** 300/400/500/600.
- **Colours:**
  - page #EDF3FB, with soft pale-blue radial glows at the top left and bottom right
  - form card #F8FAFD
  - ink navy #13265E, secondary text #5B6B8C, accent blue #4B6FE6

## Left panel: sign-up

- **Card:** 357×495 at (49, 50), radius 6.
- **Copy:** "Create Fintora account" (600) and "Start your experience with Fintora / by signing in or signing up."
- **Fields:** "Email address" and "Password", each a 238×29 white field with a #D6E0EE border and a radius of 6.
- **Sign up button:** a pale periwinkle gradient (#E7ECFD → #C9D3FA) with navy text.
- **Provider buttons:** two white outline buttons, "Continue with Google" and "Continue with Microsoft", using the standard marks in navy.
- **Footer line:** "By creating an account, you agree to our **Privacy Policy**".

## Right panel: showcase

- **Panel:** 357×495 at (436.5, 50), filled with a frosted gradient of #D3E2FA, #E2ECFB and #D7E5FB with soft lighter blobs.
- **Card A:** a white glass card, 193×137:
  - "Improvement rate" and a big "126.6%" in navy
  - a blue line chart (#4B6FE6) with two dots
  - a white tooltip "126.6%"
- **Card B:** a wider white glass card, 270×100, behind it to the lower right:
  - axis labels 30K–0K and Jan–Oct
  - a solid blue line and a dashed lighter line
  - a vertical marker at June with a "2 June" tooltip
- **Below:** "A Unified Hub for Smarter Financial / Decision-Making" (600, navy) and a two-line blurb: "Fintora empowers you with a unified financial command centre— / delivering deep insights and a 360 view of your entire economic world."

## Motion

- **Entrance:** one Web Animations sequence. The title clips up, then the fields, buttons and legal line rise in turn, then the two chart cards rise and scale in, then the hero line and blurb.
- **Focus:** fields show a blue ring.
- **Reduced motion:** no entrance.

## Acceptance check

- **Light theme:** the whole page is light and icy blue, with navy text and blue charts.
- **Brand:** "Fintora" everywhere.
- **Content:** no real brands except the standard Google and Microsoft sign-in marks.
[/hidecontent]
← 返回首页