xsl/hair_change_color
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

save code

Browse Source
This commit is contained in:
xsl
2026-01-18 22:39:06 +08:00
parent 11dd30eddf
commit c93d8b7236
6 changed files with 359 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+49 -4
View File
@@ -30,10 +30,13 @@
</div>
</div>
<!-- 下一步按钮 -->
<div class="next-section">
<!-- 功能选择按钮 -->
<div class="next-section" style="display: flex; flex-direction: column; gap: 1rem; align-items: center;">
<button id="nextBtn" class="next-btn">
<span>下一步选择发型</span>
<span>更换发型</span>
</button>
<button id="changeColorBtn" class="next-btn" style="background-color: #50E3C2;">
<span>更换头发颜色</span>
</button>
</div>
</section>
@@ -56,11 +59,49 @@
</div>
</section>
<!-- 头发颜色选择页 -->
<section id="hairColorPage" class="page">
<!-- 颜色选择区 -->
<div class="hairstyle-list">
<h2>选择头发颜色</h2>
<div style="max-width: 400px; margin: 0 auto; padding: 2rem; background-color: #fafafa; border-radius: 8px;">
<!-- 颜色选择器 -->
<div style="margin-bottom: 2rem;">
<label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">选择颜色</label>
<input type="color" id="colorPicker" style="width: 100%; height: 60px; border: none; border-radius: 4px;">
</div>
<!-- 颜色预览 -->
<div style="margin-bottom: 2rem;">
<label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">颜色预览</label>
<div id="colorPreview" style="width: 100%; height: 100px; background-color: #ff0000; border-radius: 4px; border: 2px solid #eee;"></div>
</div>
<!-- RGB值显示 -->
<div style="margin-bottom: 2rem;">
<label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">RGB值</label>
<div id="rgbValue" style="padding: 0.5rem; background-color: #f0f0f0; border-radius: 4px; font-family: monospace;">[255, 0, 0]</div>
</div>
<!-- 颜色强度调整 -->
<div style="margin-bottom: 2rem;">
<label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">颜色强度: <span id="ratioValue">0.9</span></label>
<input type="range" id="ratioSlider" min="0" max="1" step="0.1" value="0.9" style="width: 100%;">
</div>
</div>
</div>
<!-- 确认按钮 -->
<div class="confirm-section">
<button id="confirmColorBtn" class="confirm-btn" style="background-color: #50E3C2;">确认更换颜色</button>
</div>
</section>
<!-- 结果预览页 -->
<section id="resultPage" class="page">
<!-- 效果展示 -->
<div class="result-section">
<h2>发型更换效果</h2>
<h2 id="resultTitle">发型更换效果</h2>
<div id="resultPreview" class="result-preview">
<!-- 结果图片将通过JavaScript动态添加 -->
</div>
@@ -72,6 +113,10 @@
<span class="action-icon">✂️</span>
<span>重新选择发型</span>
</button>
<button id="reselectColorBtn" class="action-btn" style="display: none;">
<span class="action-icon">🎨</span>
<span>重新选择颜色</span>
</button>
<button id="reuploadImageBtn" class="action-btn">
<span class="action-icon">📷</span>
<span>重新上传照片</span>