Travel Journal

应用 · Travel · 免费
内容预览

Create a mobile travel app UI mockup displayed inside a realistic iPhone-style phone frame, centered on a white webpage. Tech stack: React + TypeScript, Tailwind CSS, Lucide React icons, Vite. Font: Google Fonts "Inter" (weights 300-900). --- **PAGE WRAPPER:** Full viewport (`h-screen w-screen`), solid white background, flexbox centered, overflow hidden. --- **PHONE FRAME:** - Dimensions: 375px x 780px - Background: `#0a0a0c` - Border-radius: 52px - Overflow: hidden - Box-shadow (layered bezel effect): ``` inset 0 0 0 2px rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 10px #1a1a1e, 0 0 0 11px rgba(255, 255, 255, 0.06), 0 0 60px rgba(0, 0, 0, 0.5) ``` **Dynamic Island notch:** Absolute, top-0, centered horizontally, 120px wide, 28px tall, solid black, `rounded-b-2xl`, z-50. --- **HEADER (absolute, top):** - Z-index: 30 - `backdrop-filter: blur(12px)` with `background-color: rgba(10, 10, 12, 0.75)` - Padding: `px-6 pt-14 pb-4` - Left side: Button with "Asia" text (text-lg, font-semibold, white) + ChevronDown icon (size 18, text-white/70) - Right side: Calendar icon button (size 22, text-white/70) --- **SCROLLABLE CONTENT:** - `overflow-y-auto` with hidden scrollbar - Padding: `px-6 pt-28 pb-24` - Vertical spacing: `space-y-4` (16px gap) --- **DESTINATION CARDS (4 total):** Each card: - Full width, height 200px, rounded-2xl, overflow hidden, position relative - Full-bleed background image (`absolute inset-0, object-cover`) - Gradient overlay: `bg-gradient-to-t fr

……（完整源码请在站内查看）