Codex 四季与时区动态 Waitlist

花了几个小时打磨出一条提示词👇：

一个让人仿佛走进另一个世界的 Waitlist 落地页。

Codex 将它变成了一个电影感落地页，场景会随着你的季节和一天中的时间变化。🌍

Codex 的工作方式：
🎨 GPT Image 2.0 将同一个地点绘制成 16 种电影感变体：4 个季节 × 4 个时间段，每一帧都锁定黄金比例构图
🕰️ 页面读取访客的时区和当地时间。荷兰的冬夜、新西兰的夏日清晨，仍然是同一个页面
✏️ 提示词里有两个插槽：[SUBJECT] 用于场景，[STYLE] 用于艺术指导。修改其中任何一个，整个世界都会随之改变

下面是提示词👇

---

以下是提示词，可修改 [STYLE] 和 [SUBJECT]：

构建一个独立的静态 HTML Waitlist 落地页。

只能使用 HTML、CSS 和原生 JavaScript。不要使用框架，不要构建步骤。页面必须能够直接打开 index.html 运行，或作为静态文件提供服务。

核心概念：
根据以下主题创建一个电影感插画场景：

[SUBJECT / LOCATION HERE]

示例：
- 漂浮在外星海洋上方的设计工作室
- 为创意 AI 构建者准备的安静山村
- 为电影制作人准备的超现实沙漠天文台
- 为创始人准备的未来花园工作坊
- 为 AI 产品工作室准备的梦幻海滨城市

使用以下视觉风格 / 艺术指导：

图像风格：
- 如果提供了 [STYLE / ART DIRECTION HERE]，使用它。
- 如果没有提供风格，使用以下默认风格：
  - 电影感手绘概念艺术
  - 柔和的水彩 / 水粉氛围
  - 高级编辑构图
  - 图像内不得有文字
  - 不要 Logo
  - 图像内不要 UI
  - 不要水印
  - 保持中心 / 上方中心区域清晰，以便叠加文字
- 让全部 16 张图在风格上保持一致。
- 场景 / 地点在全部 16 张图中都必须保持可辨认的同一性。

页面应为同一主题 / 地点生成 16 种变体：
必须使用 IMAGES-2.0 生成（关键）
- 4 个季节：春、夏、秋、冬
- 4 个时间段：清晨、正午、黄金时刻、夜晚

构图锁定（关键）：
全部 16 张图的构图必须保持为一个可辨认的同一场景。观众应立即理解，他们看到的是同一个地点，只是处于一年中的不同时间。

以下内容在全部 16 张图中保持不变：
- 相同的相机角度
- 相同的相机高度和距离
- 相同的焦距 / 取景
- 主要地标的位置相同
- 树木、建筑、山脉、水面、道路以及其他持续存在的特征位置相同
- 整体构图和场景剪影相同

只有以下内容可以变化：
- 季节（树叶颜色、积雪、叶片、花朵、植被密度）
- 光照（方向、强度、色温）
- 天空和氛围（云、雾、星星、薄雾）
- 与季节和时间段相匹配的情绪与调色板

重要取景规则（用于保证叠加文字可读）：
- 主要主体和前景必须安排在图像的下半部分。
- 图像上半部分应当是天空、远处地平线、雾或氛围区域，并且视觉上更安静，让叠加文字可以清楚地放在上面。
- 这条规则适用于全部 16 种变体。

黄金比例构图（关键）：
- 在全部 16 张图中一致应用黄金比例（≈1.618 / 0.618），让构图显得有意图、平衡且具有编辑感，而不是居中或对称。
- 将地平线放在上方黄金比例线——大约距离画面顶部 38.2% 的位置（不要放在中心线，也不要放在三分法线）。
- 将主要地标 / 主体锚定在黄金比例交点：从左侧算起约 38.2% 或 61.8% 的垂直线，与地平线交叉的位置。选择其中一个锚点，并在全部 16 种变体中重复使用。
- 沿黄金螺旋 / 基于 phi 的流线安排次要元素（树木、道路、水边、建筑、山脉），让视线从锚定主体自然流向画面较安静的一侧。
- 下半部分取景规则仍然适用，黄金比例进一步确定准确位置：前景的视觉重量应大约位于从顶部向下 61.8% 的位置，为叠加文字留出上方 38.2% 的空间。
- 负空间（天空、雾、氛围）与视觉重量（主体、前景）应大致保持 1.618 : 1 的比例。
- 让黄金比例锚点在全部 16 张图中保持像素级稳定，使季节和光照变化时构图仍然锁定。

视觉方向：
面向创意 AI 工作室的高级全屏编辑式落地页。风格应当具有电影感、精致、梦幻并略带超现实气质。使用大号优雅衬线标题叠加在全视口插画背景上。页面应像一扇平静地通往另一个世界的入口。

字体：
- 引入 Google Fonts：
  - Instrument Serif，用于品牌和标题
  - Inter，用于导航、正文、输入框和按钮

品牌 / 文案：
- NIGHT 场景使用白色文案，其余场景使用黑色文案
- 浏览器标题：N.O.P.E. - Waitlist
- 左上角品牌：N.O.P.E.
- 导航链接：Home、Studio、About、Journal、Reach Us
- 右上角 CTA：Begin Journey
- Hero 标题分成两行：
  - We Are Not Of
  - Planet Earth
- 副标题：
  Creative Solution Engineers using AI's infinite possibilities to help humans realise their dreams.
- 邮箱占位符：you@studio.com
- 提交按钮：Join waitlist

默认链接：
- 定义一个名为 studioNopeUrl 的常量，其值为：
  
- 将 studioNopeUrl 用作以下元素的默认 href：
  - 品牌 / Logo 链接
  - 所有导航链接
  - 右上角 CTA 按钮
  - 页面上创建的任何其他可见按钮或 CTA
- 配置了 waitlistEndpoint 时，Waitlist 提交按钮必须保持为真实的表单提交按钮。
- 如果没有配置真实的 Waitlist 后端，让 Waitlist 提交按钮在点击后跳转到 studioNopeUrl，而不是无任何反应。

布局：
- 页面必须严格保持一整个视口高度。
- 不要出现垂直滚动。
- 不要出现水平滚动。
- html、body 和主包装器必须锁定为视口高度。
- 导航栏绝对定位在背景之上方。
- Hero 内容在视口中居中。
- Hero 内容包括标题、副标题和 Waitlist 表单。
- 桌面端表单是一个横向的液态玻璃胶囊。
- 移动端表单将输入框堆叠在按钮上方。
- 低于 760px 时隐藏导航链接，但保留品牌和右上角 CTA。

背景图片：
在 waitlist-scenes/ 中创建 16 张高质量 16:9 图片：

- spring-morning.png
- spring-midday.png
- spring-golden.png
- spring-night.png
- summer-morning.png
- summer-midday.png
- summer-golden.png
- summer-night.png
- autumn-morning.png
- autumn-midday.png
- autumn-golden.png
- autumn-night.png
- winter-morning.png
- winter-midday.png
- winter-golden.png
- winter-night.png

背景渲染：
使用三层视觉层：
1. .scene-fill：同一张图片，全屏 cover，略微模糊并放大。
2. .scene-sharp：主要清晰图片。
3. .scene-overlay：全高度渐变叠加层。

桌面端行为：
- 从 1440px 视口宽度起：
  - .scene-sharp 使用 background-size: 100% auto
  - 锚定到中心底部
  - 不要裁切左右两侧

平板 / 移动端行为：
- 低于 1440px 时：
  - .scene-sharp 可以使用 background-size: cover
  - 将其居中，以获得更好的构图

叠加层：
- 每个季节 / 时间段使用一个与场景匹配的 RGB 颜色。
- 渐变从顶部的实色过渡到底部的透明。
- 非夜晚叠加层应轻微柔化 / 提亮。
- 夜晚叠加层应保持暗色，不要提亮。

季节 / 时间逻辑：
- 根据访客日期和所在半球选择季节。
- 将时区作为半球判断的备用依据。
- 只有在权限已经授予时才使用地理位置。
- 绝不意外触发地理位置权限弹窗。

根据访客当地时间判断一天中的时间段：
- morning：05:00-10:59
- midday：11:00-16:29
- golden：16:30-19:59
- night：20:00-04:59

用于测试的 URL 覆盖参数：
- ?season=spring&time=morning
- ?season=summer&time=midday
- ?season=autumn&time=golden
- ?season=winter&time=night

Waitlist 表单：
- 使用一个可配置的名为 waitlistEndpoint 的常量。
- 使用一个可配置的名为 studioNopeUrl 的常量。
- 提交时 POST JSON：
  - email
  - season
  - time
  - source
- 显示加载、成功和错误状态。
- 提交后不要重新加载页面。
- 如果 waitlistEndpoint 为空、缺失或被设置为占位值，点击 Join waitlist 后将访客跳转到  。

样式细节：
- 液态玻璃输入框和按钮。
- 柔和阴影。
- 圆角胶囊控件。
- 优雅的悬停状态。
- 不要视差。
- 不要移动背景层。
- 不要装饰性色块。
- Hero 文本周围不要放卡片。

交付物：
- index.html
- README.md
- 包含全部 16 张图片的 waitlist-scenes/

README 应说明：
- 如何在本地运行
- 如何填写 [SUBJECT / LOCATION HERE]
- 如何填写 [STYLE / ART DIRECTION HERE]
- 16 张场景图片如何命名
- 季节和当地时间如何选择
- 如何使用 URL 参数测试
- 在哪里修改主题 / 文案
- 在哪里修改风格 / 艺术指导
- 在哪里修改 Waitlist 端点
- 在哪里修改叠加层颜色
- 在哪里修改默认 Studio NOPE 链接

验证：
- 在 1440x900 的桌面端测试
- 在约 390x844 的移动端测试
- 确认没有垂直滚动
- 确认没有水平滚动
- 确认全部 16 种 URL 组合都能工作
- 确认所有可见链接和 CTA 都指向  ，除非有意配置为其他地址
- 确认 Waitlist 表单的加载、成功、备用跳转和错误状态都能工作