类型：Site模板 · 收录：2026-11-05 01:12:24 · 源码：会员可见
# Prompt: ON&ON PARTNERS affiliate hero
Build a single-file, one-screen **affiliate-network hero** for a fictional partner agency, **ON&ON PARTNERS**. Use plain HTML, CSS and vanilla JS, with no framework and no build step. The look is a cinematic dark volcanic lava canyon at night, with a roaring circular fire portal in the centre. An original double-chevron mark sits blurred inside its blazing core. Small glass cards and a nav sit in the corners, and a giant ember-gradient wordmark spans the bottom edge.
## Media
- **Scene:** `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/229d6059-7d4a-45b5-a704-42a3738ba716.jpg` (1713×939). Jagged black basalt cliffs with glowing lava cracks, a lava river flowing toward the viewer, embers in smoky air, and the fire ring centred with a smooth white-gold core.
- It fills a 1178:632 scene box that covers the viewport.
- **Motion:** a muted 4s loop of the same scene, laid over it in the same box: `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/e1952f69-baf5-4c0d-b108-a2a32ae3d5cf.mp4`.
- The portal churns, the lava flows, the embers rise, and the camera pushes in slowly.
- The last second crossfades into the first, so it never plays in reverse.
- Fade it in when ready.
- **Logo mark:** an inline SVG of two stacked upward chevrons in dark ember `#4A1500`, centred in the core, with a vertical motion blur (feGaussianBlur 0.25 × 2.8).
- **Rule:** nothing in the scene is drawn or animated in code.
## Type and colour
- **Font:** a variable grotesk (Inter Display style), weight about 600.
- **Colours:**
- UI text `#F6ECE4`, muted `#9A8A80` and `#C39070`
- glass tint `rgba(255,196,150,.11)`
- wordmark gradient across: `#C2410C` → `#F39A3B` → `#FFD27A` → `#F39A3B` → `#C2410C`
## Layout (1178×632 reference, `--u = min(100vw/1178, 100vh/632)`)
- **Top-left:** two stacked glass cards (180u wide): a small send icon, then "MANAGER / TELEGRAM", and "TEAM LEAD / TELEGRAM".
- **Top-right:** a right-aligned nav: ABOUT US, AFFILIATE PROGRAM, WE WORK WITH, OUR TEAM, FAQ. Below it, a white "JOIN US" button with a dark square plus-icon key.
- **Bottom meta row:** "SUPPORT@ONANDON.EXAMPLE", "©2025", "ALL RIGHTS RESERVED", and on the right an underlined "WEBSITE MADE BY KIRAVO".
- **Wordmark:** "ON&ON PARTNERS" spans the full width at the very bottom, very large, tight tracking, in the ember gradient clipped to text.
## Motion (UI)
- **Entrance:** a CSS sequence.
- The wordmark rises out of a mask.
- The cards slide in, then the nav items stagger.
- JOIN US and the meta row fade up last.
- **Reduced motion:** no video and no entrance.
## Phones
- The scene covers the screen, centred on the portal.
- The cards and nav shrink into the corners.
- The meta row becomes a two-column grid over a dark fade.
- The wordmark breaks onto two lines, ON&ON and PARTNERS, sized to the width.
## Acceptance check (1440×960)
- The fire portal blazes in the centre with the chevron mark.
- The lava visibly flows and the embers rise in the loop.
- The ember wordmark fits edge to edge.
- **Content:** no real brands; the email uses a placeholder domain.