97 lines
3.6 KiB
HTML
97 lines
3.6 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="https://cdn.jsdelivr.net/npm/axios/dist/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/*" capture="camera">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 下一步按钮 -->
|
|
<div class="next-section">
|
|
<button id="nextBtn" class="next-btn">
|
|
<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="resultPage" class="page">
|
|
<!-- 效果展示 -->
|
|
<div class="result-section">
|
|
<h2>发型更换效果</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="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/api.js"></script>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html> |