发型试戴

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

制作一个名为《发型试戴》的中文单页互动发型试戴工具，而不是传统有胜负条件的游戏。整体为深色、现代、移动端友好的 UI：页面占满视口，背景为深蓝紫色（约 #1a1a2e），顶部栏为更深的蓝色（约 #16213e），左上显示带渐变粉红文字的“💇 发型试戴”，右上是粉红珊瑚色圆角按钮“📷 上传照片”。点击按钮打开图片文件选择器（仅接受图片），用户上传后把照片显示在中央预览画布中；未上传时中央区域保持近黑色（#0f0f1a），显示灰色图片图标“🖼”、提示“上传一张正面照片”和副提示“轻点上方「上传照片」开始”。

主区域桌面端左右分栏：左侧为可伸缩的照片/试戴预览区，右侧固定约 280px 宽的深蓝控制面板，面板左边有细边框。面板顶部标题为“💇 选择发型”，下面是可滚动的发型卡片网格，两列排列；每张卡片为深蓝圆角矩形，内有一个方形近黑背景的透明发型缩略图画布，下面有小号中文名称。当前选中的卡片使用粉红边框和略偏紫的背景，名称也变粉红。移动端（宽度不超过约 700px）改为上下布局：预览区约占 55% 高度，控制面板占约 45% 高度，发型网格三列；更窄屏幕约 420px 以下改为两列。所有控件同时适配触摸操作。

提供 12 个可点击发型选项，并在缩略图和主预览中以程序化 canvas 形状绘制，透明背景、默认深棕色：短发、中发、长发、卷发、波波头、马尾、精灵短发、丸子头、偏分、渐变、大波浪、齐刘海。每个发型都应是简化的实心几何发型轮廓，围绕 200x200 画布中大致 (100,110) 的头部位置：顶部半椭圆/圆顶、两侧头发、刘海；长发和大波浪向下延伸，马尾从后方垂下并带深灰发圈，丸子头在顶部有圆形发髻，偏分有分线和偏扫刘海，渐变发型带较淡的边缘/透明效果，卷发由两侧体积和多个圆形卷曲泡泡组成，齐刘海有宽直条和圆润下缘。绘制可以使用 Canvas 2D 的 ellipse、arc、fillRect、曲线和透明度；保持这些轮廓为简单的示意图，不需要外部素材。为了贴近实现，卷发、精灵短发、渐变等带纹理的小椭圆可有轻微程序随机性。

用户点选发型后，立即把所选发型叠加到上传照片上。照片在画布中按比例完整适配（较宽图片按画布宽度适配并垂直居中，较高图片按画布高度适配并水平居中），不能拉伸变形。发型以约 92% 不透明度绘制在照片上方，中心水平对齐照片，垂直中心位于照片绘制区域顶部往下约 25% 的位置；发型大小基于照片绘制区域较长边的 55%，乘以大小缩放值。未上传照片时不要显示发型，只显示占位提示。

控制面板底部固定显示：第一行“大小”标签、范围 50 到 200 的滑杆和数值（默认 100%），第二行“上下”标签、范围 -60 到 60 的滑杆和数值（默认 0），滑杆使用粉红 accent；第三行显示“颜色”，一排可换色的圆形色块，以及右侧“重置”按钮。颜色提供并标注这些选项：自然黑 #1a1a1a、深棕 #2c1810（默认）、棕色 #6b3a2a、浅棕 #a06a4a、金色 #d4a44a、亚麻 #c8b070、银灰 #b0b0b8、白色 #e8e8ee、酒红 #8b2530、蓝色 #2a5a8a。选中的色块有白色边框并略微放大；换色应同时更新所有发型缩略图和照片上的发型。

大小滑杆实时改变叠加发型的整体比例；上下滑杆实时改变其垂直位置。用户也可以直接在已上传照片的主画布上拖动来上下移动发型，移动范围限制在 -80 到 80，并同步更新“上下”滑杆和数值；拖动主要改变 Y，不需要实现横向发型移动。点击“重置”将大小恢复 100%、上下恢复 0、颜色恢复默认深棕，并刷新缩略图和主预览，但保留已上传照片和当前发型选择。窗口大小变化时重新计算画布尺寸和照片适配。使用圆角卡片、细微按下缩放反馈、粉红高亮和简洁无阴影/少装饰的深色美容工具风格。