类型：Site模板 · 收录：2026-10-26 23:38:38 · 源码：会员可见
# Prompt: Lauberhorn Ridge trail dashboard hero
Build a single-file, one-screen **hiking trail guide dashboard hero** for a fictional alpine trail, **Lauberhorn Ridge** (above Interlaken, Switzerland), seen by a signed-in hiker, **Mira Holt**. Use plain HTML, CSS and vanilla JS, with no framework and no build step. The look is a bright autumn travel app: a full-bleed photo of a golden larch valley with a turquoise lake under snowy peaks, and soft cream glass widgets floating over it.
## Scene
- **Plate:** the whole background is ONE 16:10 photo (1728×1080), stretched to the frame: `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/4e84f7cd-8250-48e6-8dfa-746b13b73bfb.jpg`.
- Golden larch forest on both slopes, a turquoise glacial lake winding into the valley, snow-capped peaks and a clear blue sky at the top.
- **Motion:** a muted looping drone shot of the same valley plays over it: `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/48d4c209-86b6-4b1c-b972-4f57e3dafe89.mp4` (1280×720, 10s, loops seamlessly because it plays forward then reversed). The camera glides forward over the larches toward the lake, with a slow push-in and slight parallax.
- The video was rendered 16:9 from the plate mirror-padded 96/1728 on each side. Lay it at **111.11% width, left −5.556%** so its middle sits exactly on the plate.
- Fade it in (0.8s) once its first frame is ready.
- **Rule:** nothing in the scene is drawn or animated in code. Only the UI animates.
## Frame and scaling
- **Frame:** one **1440×900 frame** that covers the viewport: `--u = max(100vw/1440, 100vh/900)`, centred. Every element below is placed in frame units.
## Type and colour
- **Sans:** **Inter Tight** 300/400. The trail title is Inter Tight 300.
- **Mono:** **JetBrains Mono** 500, uppercase, tracking .06em, for labels, chips, tabs and values. Card labels start with a tight "::" prefix.
- **Colours:**
- card cream glass `rgba(244,240,233,.94)` with a 14px backdrop blur
- inner panels `#EAE6DE`
- ink `#2E2D2A`
- amber `#F6B733` and light amber `#FBD06A`
- orange pin `#F59E0B`, violet pin `#7C6CF2`
- **Shadows:** no drop shadows on cards or the photo. Only a faint text shadow on the white title and breadcrumb.
## Layout (1440×900 frame)
- **Logo tile:** 41×38 cream tile at (15, 14), radius 12, with a six-spoke asterisk glyph.
- **User pill:** at (62, 14), 38 tall, radius 12: "::", then "Mira Holt" (18px) and a small orange ring (status dot).
- **Breadcrumb:** white mono at 12.6px, not uppercase, at (15, 73): "Back to Explore Switzerland / Interlaken / Jungfrau Region /".
- **Title:** "Lauberhorn Ridge", white, Inter Tight 300, 96px, tracking −.045em, at (20, 86).
- **Chips:** at (15, 198), 32 tall, peach `rgba(248,232,205,.92)`, radius 9, 14px mono:
- "4.7 (198 REVIEWS)" with an orange star disc
- "ALPINE LARCH FORESTS" with an orange mountain glyph
- **Search card:** 359×137 at (15, 462).
- "Hey, Mira!" at 25px.
- "Interlaken, Switzerland ˄" at 14.5px.
- A 37-tall panel field: "SEARCH BY ANYTHING" with a magnifier at the right.
- **Points of interest card:** 358×215 at (15, 612).
- Label "::POINTS OF INTEREST".
- A topographic map fills it: 16 thin wavy contour lines `#c9c5bc`, and a dark winding route that climbs to a sharp peak near the right.
- A violet pin with a white mountain glyph marks the start; an orange pin marks the summit.
- **Photo card:** 336×215 at (383, 612), radius 16, cover-filled with a hiker in an orange jacket and backpack looking over the larch valley and lake: `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/8097efdf-745f-4a23-8b33-0bed6ee16bc7.jpg` (position 72% 50%).
- Bottom-left: a 38px white play button, then a light amber chip "211 Photos" (sans 14px) with a photo icon.
- **Altitude card:** 387×215 at (728, 612).
- Label "::ALTITUDE". Top right: "TOTAL GAIN" with two small legend dots, "● HIKE" (amber) and "● DESCENT" (grey).
- A line chart with a baseline:
- the hiked part is a thick dark line that rises steeply then levels out
- the rest is a grey dotted line that slopes down, with amber dots at waypoints
- small mono axis labels: "0 km", "1,25 km", "2,800 m"
- A panel tab bar at the bottom: "SLOPES", "ALTITUDE" (active, light amber with a mountain glyph), "SEASONS" (snowflake) and "TYPES". Tabs switch on click.
- **Weather card:** 303×380 at (1126, 12). Label "::WEATHER".
- **Gauge panel**, 242 tall:
- a centred "ENTIRE TRAIL" pill
- a thick semicircle arc with a gradient from `#E7E1D3` through `#F8C44C` to `#F6B12A`, white knobs at both ends, and a thin white progress arc inside it
- a big "19°" (74px) in the middle
- "-3°" left, "Sunny" centre, ". 20°" right
- **Two tiles:** "WIND" (orange disc) "14 km/h" and "SUNSET" (light amber disc) "17:52", values in mono 18.5px.
- **Trail info card:** 303×425 at (1126, 402). Label "::TRAIL INFO". Three 118-tall stacked panels, each with an amber-tint icon square, a big value and a caption:
- "6.5 km", DISTANCE
- "2.5-3 hr", DURATION
- "350 m", ELEVATION GAIN
## Motion (UI)
- **Entrance:** one Web Animations timeline, about 2.8s.
- The logo and user pill drop in; the breadcrumb fades.
- The title rises out of a 10px blur; the chips follow.
- The weather and trail info cards slide in from the right, staggered.
- The bottom cards rise up in turn (search, points of interest, photo, altitude).
- The gauge's white progress arc draws; the map route and the hiked chart line draw on.
- The temperature counts up from 0° to 19°.
- **Hover:** the play button grows to 1.08.
- **Reduced motion:** no entrance and no video.
## Phones (≤ 820px)
- **Hero:** the photo and video fill the top 62% of the screen.
- **Header:** the logo and user pill share the first row, then the breadcrumb, a 46–64px title and the chips wrapped over the photo.
- **Cards:** below, full width and stacked: search, points of interest, photo, altitude, weather and trail info.
## Acceptance check (1440×900)
- Every widget sits at the coordinates above over the golden larch valley.
- The drone glide visibly moves the camera and loops without a jump.
- **Content:** no real brands, logos or people.