141 lines
6.3 KiB
HTML
141 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>发型更换</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<script src="js/axios.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- 导航栏 -->
|
|
<header class="navbar">
|
|
<h1>发型更换</h1>
|
|
<button id="backBtn" class="back-btn" style="display: none;">返回</button>
|
|
</header>
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="main-content">
|
|
<!-- 首页 -->
|
|
<section id="homePage" class="page active">
|
|
<!-- 图片上传区 -->
|
|
<div class="upload-area">
|
|
<div id="imagePreview" class="image-preview">
|
|
<div class="upload-placeholder">
|
|
<div class="upload-icon">📷</div>
|
|
<p>点击上传图片或拍摄照片</p>
|
|
<input type="file" id="imageUpload" accept="image/*">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 功能选择按钮 -->
|
|
<div class="next-section" style="display: flex; flex-direction: column; gap: 1rem; align-items: center;">
|
|
<button id="nextBtn" class="next-btn">
|
|
<span>更换发型</span>
|
|
</button>
|
|
<button id="changeColorBtn" class="next-btn" style="background-color: #50E3C2;">
|
|
<span>更换头发颜色</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 发型选择页 -->
|
|
<section id="hairstylePage" class="page">
|
|
|
|
|
|
<!-- 发型列表 -->
|
|
<div class="hairstyle-list">
|
|
<h2>选择发型</h2>
|
|
<div id="hairstyleGrid" class="hairstyle-grid">
|
|
<!-- 发型项将通过JavaScript动态添加 -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 确认按钮 -->
|
|
<div class="confirm-section">
|
|
<button id="confirmBtn" class="confirm-btn" disabled>确认选择</button>
|
|
</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 id="resultTitle">发型更换效果</h2>
|
|
<div id="resultPreview" class="result-preview">
|
|
<!-- 结果图片将通过JavaScript动态添加 -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="action-buttons">
|
|
<button id="reselectHairstyleBtn" class="action-btn">
|
|
<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>
|
|
</button>
|
|
<button id="saveResultBtn" class="action-btn">
|
|
<span class="action-icon">💾</span>
|
|
<span>保存结果</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- 加载指示器 -->
|
|
<div id="loading" class="loading" style="display: none;">
|
|
<div class="loading-spinner"></div>
|
|
<p>处理中...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html> |