|
|
@@ -0,0 +1,947 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>羽绒服DIY - 个性定制</title>
|
|
|
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
|
+ }
|
|
|
+
|
|
|
+ :root {
|
|
|
+ --primary: #3498db;
|
|
|
+ --primary-dark: #2980b9;
|
|
|
+ --secondary: #e74c3c;
|
|
|
+ --secondary-dark: #c0392b;
|
|
|
+ --accent: #9b59b6;
|
|
|
+ --accent-dark: #8e44ad;
|
|
|
+ --success: #2ecc71;
|
|
|
+ --dark: #2c3e50;
|
|
|
+ --darker: #1a252f;
|
|
|
+ --light: #ecf0f1;
|
|
|
+ --lighter: #f9f9f9;
|
|
|
+ --gray: #95a5a6;
|
|
|
+ --light-gray: #bdc3c7;
|
|
|
+ --border: #e0e0e0;
|
|
|
+ --shadow: rgba(0, 0, 0, 0.1);
|
|
|
+ --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
|
|
+ --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
|
+ color: var(--dark);
|
|
|
+ line-height: 1.6;
|
|
|
+ min-height: 100vh;
|
|
|
+ padding: 20px 0;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ max-width: 480px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 头部样式 */
|
|
|
+ header {
|
|
|
+ text-align: center;
|
|
|
+ padding: 20px 0;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ position: relative;
|
|
|
+ animation: fadeInDown 0.8s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 12px;
|
|
|
+ font-size: 1.8rem;
|
|
|
+ font-weight: 800;
|
|
|
+ color: var(--secondary);
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo i {
|
|
|
+ font-size: 2.2rem;
|
|
|
+ background: linear-gradient(135deg, var(--secondary), var(--accent));
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tagline {
|
|
|
+ color: var(--gray);
|
|
|
+ font-size: 0.95rem;
|
|
|
+ margin-top: 5px;
|
|
|
+ max-width: 80%;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 标签页样式 */
|
|
|
+ .tabs {
|
|
|
+ display: flex;
|
|
|
+ background: white;
|
|
|
+ border-radius: 50px;
|
|
|
+ padding: 6px;
|
|
|
+ margin: 25px 0;
|
|
|
+ box-shadow: var(--card-shadow);
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ padding: 14px 0;
|
|
|
+ border-radius: 50px;
|
|
|
+ font-weight: 600;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: var(--transition);
|
|
|
+ color: var(--gray);
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab.active {
|
|
|
+ color: white;
|
|
|
+ background: linear-gradient(135deg, var(--primary), var(--accent));
|
|
|
+ box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab i {
|
|
|
+ margin-right: 6px;
|
|
|
+ font-size: 1.1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 面板样式 */
|
|
|
+ .panel {
|
|
|
+ display: none;
|
|
|
+ background: white;
|
|
|
+ border-radius: 25px;
|
|
|
+ padding: 30px;
|
|
|
+ margin-bottom: 25px;
|
|
|
+ box-shadow: var(--card-shadow);
|
|
|
+ animation: fadeIn 0.6s ease;
|
|
|
+ transform-origin: top;
|
|
|
+ }
|
|
|
+
|
|
|
+ .panel.active {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ font-size: 1.5rem;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ color: var(--dark);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ border-bottom: 2px solid var(--light);
|
|
|
+ }
|
|
|
+
|
|
|
+ h2 i {
|
|
|
+ background: linear-gradient(135deg, var(--primary), var(--accent));
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: rgba(52, 152, 219, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-desc {
|
|
|
+ color: var(--gray);
|
|
|
+ margin-bottom: 25px;
|
|
|
+ font-size: 0.95rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 羽绒服展示区域 */
|
|
|
+ .jacket-display-container {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 auto 30px;
|
|
|
+ perspective: 1000px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jacket-display {
|
|
|
+ width: 300px;
|
|
|
+ height: 420px;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ transform-style: preserve-3d;
|
|
|
+ transition: transform 0.8s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jacket-display:hover {
|
|
|
+ transform: rotateY(10deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ .jacket-base {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: url('https://i.ibb.co/0QrZb0C/jacket-base.png') no-repeat center;
|
|
|
+ background-size: contain;
|
|
|
+ z-index: 1;
|
|
|
+ filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
|
|
|
+ }
|
|
|
+
|
|
|
+ .jacket-part {
|
|
|
+ position: absolute;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: var(--transition);
|
|
|
+ z-index: 2;
|
|
|
+ border-radius: 12px;
|
|
|
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .jacket-part:hover {
|
|
|
+ transform: translateY(-3px);
|
|
|
+ filter: brightness(1.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .jacket-part.active-part {
|
|
|
+ outline: 3px solid var(--primary);
|
|
|
+ outline-offset: 3px;
|
|
|
+ filter: drop-shadow(0 0 8px rgba(52, 152, 219, 0.5));
|
|
|
+ }
|
|
|
+
|
|
|
+ .jacket-hood {
|
|
|
+ top: 0;
|
|
|
+ left: 50px;
|
|
|
+ width: 200px;
|
|
|
+ height: 120px;
|
|
|
+ background: linear-gradient(135deg, #3498db, #2980b9);
|
|
|
+ border-radius: 100px 100px 0 0;
|
|
|
+ z-index: 3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jacket-body {
|
|
|
+ top: 100px;
|
|
|
+ left: 25px;
|
|
|
+ width: 250px;
|
|
|
+ height: 250px;
|
|
|
+ background: linear-gradient(135deg, #2980b9, #1c6ea4);
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jacket-sleeve {
|
|
|
+ top: 110px;
|
|
|
+ width: 80px;
|
|
|
+ height: 180px;
|
|
|
+ border-radius: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jacket-sleeve.left {
|
|
|
+ left: 0;
|
|
|
+ background: linear-gradient(135deg, #3498db, #2980b9);
|
|
|
+ }
|
|
|
+
|
|
|
+ .jacket-sleeve.right {
|
|
|
+ right: 0;
|
|
|
+ background: linear-gradient(135deg, #3498db, #2980b9);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 颜色选择器 */
|
|
|
+ .color-palette {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 15px;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-option {
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ border-radius: 50%;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 3px solid white;
|
|
|
+ box-shadow: 0 4px 10px var(--shadow);
|
|
|
+ transition: var(--transition);
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-option:hover {
|
|
|
+ transform: scale(1.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-option.active {
|
|
|
+ transform: scale(1.2);
|
|
|
+ box-shadow: 0 0 0 3px white, 0 0 0 6px var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-option.active::after {
|
|
|
+ content: '\f00c';
|
|
|
+ font-family: 'Font Awesome 6 Free';
|
|
|
+ font-weight: 900;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ color: white;
|
|
|
+ font-size: 14px;
|
|
|
+ text-shadow: 0 1px 2px rgba(0,0,0,0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* IP上传区域 */
|
|
|
+ .ip-upload {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20px;
|
|
|
+ margin: 25px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-area {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ border: 3px dashed var(--light-gray);
|
|
|
+ border-radius: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: var(--transition);
|
|
|
+ background: var(--lighter);
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-area:hover {
|
|
|
+ border-color: var(--primary);
|
|
|
+ background: rgba(52, 152, 219, 0.05);
|
|
|
+ transform: translateY(-5px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-area i {
|
|
|
+ font-size: 3.5rem;
|
|
|
+ color: var(--light-gray);
|
|
|
+ margin-bottom: 15px;
|
|
|
+ transition: var(--transition);
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-area:hover i {
|
|
|
+ color: var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 分享区域 */
|
|
|
+ .share-section {
|
|
|
+ text-align: center;
|
|
|
+ padding: 30px 20px;
|
|
|
+ background: linear-gradient(135deg, var(--primary), var(--accent));
|
|
|
+ border-radius: 20px;
|
|
|
+ color: white;
|
|
|
+ margin: 25px 0;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-section::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: -50%;
|
|
|
+ left: -50%;
|
|
|
+ width: 200%;
|
|
|
+ height: 200%;
|
|
|
+ background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
|
|
|
+ transform: rotate(30deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-section h3 {
|
|
|
+ font-size: 1.4rem;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-link {
|
|
|
+ display: flex;
|
|
|
+ background: white;
|
|
|
+ border-radius: 50px;
|
|
|
+ padding: 3px;
|
|
|
+ margin: 25px 0 20px;
|
|
|
+ color: var(--dark);
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-link input {
|
|
|
+ flex: 1;
|
|
|
+ border: none;
|
|
|
+ padding: 14px 20px;
|
|
|
+ font-size: 0.95rem;
|
|
|
+ background: transparent;
|
|
|
+ color: var(--dark);
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-link button {
|
|
|
+ background: var(--accent);
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 50px;
|
|
|
+ padding: 12px 25px;
|
|
|
+ font-weight: 600;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: var(--transition);
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-link button:hover {
|
|
|
+ background: var(--accent-dark);
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-icons {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 25px;
|
|
|
+ margin-top: 20px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-icon {
|
|
|
+ width: 55px;
|
|
|
+ height: 55px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: white;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: var(--dark);
|
|
|
+ font-size: 1.6rem;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: var(--transition);
|
|
|
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-icon:hover {
|
|
|
+ transform: translateY(-8px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-icon.wechat { color: #2ecc71; }
|
|
|
+ .share-icon.weibo { color: #e74c3c; }
|
|
|
+ .share-icon.qq { color: #3498db; }
|
|
|
+
|
|
|
+ /* 统计卡片 */
|
|
|
+ .color-stats {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 15px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-stat {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 140px;
|
|
|
+ background: white;
|
|
|
+ border-radius: 18px;
|
|
|
+ padding: 20px 15px;
|
|
|
+ text-align: center;
|
|
|
+ box-shadow: var(--card-shadow);
|
|
|
+ transition: var(--transition);
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-stat:hover {
|
|
|
+ transform: translateY(-8px);
|
|
|
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-stat .color-box {
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: 0 auto 15px;
|
|
|
+ box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 1.8rem;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-stat .stat-name {
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-size: 1.1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-stat .stat-count {
|
|
|
+ color: var(--gray);
|
|
|
+ font-size: 0.95rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 按钮样式 */
|
|
|
+ .action-buttons {
|
|
|
+ display: flex;
|
|
|
+ gap: 15px;
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ flex: 1;
|
|
|
+ padding: 18px;
|
|
|
+ border-radius: 50px;
|
|
|
+ border: none;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 1.05rem;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: var(--transition);
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary {
|
|
|
+ background: linear-gradient(135deg, var(--primary), var(--accent));
|
|
|
+ color: white;
|
|
|
+ box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary:hover {
|
|
|
+ box-shadow: 0 12px 25px rgba(52, 152, 219, 0.4);
|
|
|
+ transform: translateY(-3px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-secondary {
|
|
|
+ background: white;
|
|
|
+ color: var(--primary);
|
|
|
+ border: 2px solid var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-secondary:hover {
|
|
|
+ background: rgba(52, 152, 219, 0.05);
|
|
|
+ transform: translateY(-3px);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 图表容器 */
|
|
|
+ .chart-container {
|
|
|
+ background: white;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 20px;
|
|
|
+ margin-top: 25px;
|
|
|
+ box-shadow: var(--card-shadow);
|
|
|
+ height: 300px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 页脚 */
|
|
|
+ footer {
|
|
|
+ text-align: center;
|
|
|
+ padding: 30px 0 20px;
|
|
|
+ color: var(--gray);
|
|
|
+ font-size: 0.9rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 动画 */
|
|
|
+ @keyframes fadeIn {
|
|
|
+ from { opacity: 0; transform: translateY(20px); }
|
|
|
+ to { opacity: 1; transform: translateY(0); }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes fadeInDown {
|
|
|
+ from { opacity: 0; transform: translateY(-20px); }
|
|
|
+ to { opacity: 1; transform: translateY(0); }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes pulse {
|
|
|
+ 0% { transform: scale(1); }
|
|
|
+ 50% { transform: scale(1.05); }
|
|
|
+ 100% { transform: scale(1); }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pulse {
|
|
|
+ animation: pulse 2s infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 响应式调整 */
|
|
|
+ @media (max-width: 480px) {
|
|
|
+ .container {
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jacket-display {
|
|
|
+ width: 280px;
|
|
|
+ height: 400px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-stats {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-stat {
|
|
|
+ min-width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ font-size: 1.4rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .panel {
|
|
|
+ padding: 25px 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="container">
|
|
|
+ <header>
|
|
|
+ <div class="logo">
|
|
|
+ <i class="fas fa-vest"></i>
|
|
|
+ <span>羽绒服DIY</span>
|
|
|
+ </div>
|
|
|
+ <p class="tagline">创造属于你的个性羽绒服，展现独特时尚风格</p>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <div class="tabs">
|
|
|
+ <div class="tab active" data-tab="customize">
|
|
|
+ <i class="fas fa-palette"></i> 定制
|
|
|
+ </div>
|
|
|
+ <div class="tab" data-tab="ip">
|
|
|
+ <i class="fas fa-crown"></i> IP
|
|
|
+ </div>
|
|
|
+ <div class="tab" data-tab="share">
|
|
|
+ <i class="fas fa-share-alt"></i> 分享
|
|
|
+ </div>
|
|
|
+ <div class="tab" data-tab="trends">
|
|
|
+ <i class="fas fa-chart-line"></i> 趋势
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 个性定制面板 -->
|
|
|
+ <div class="panel active" id="customize-panel">
|
|
|
+ <h2><i class="fas fa-palette"></i> 个性定制</h2>
|
|
|
+ <p class="section-desc">选择羽绒服的不同部位并自定义颜色，打造属于你的独特设计</p>
|
|
|
+
|
|
|
+ <div class="jacket-display-container">
|
|
|
+ <div class="jacket-display">
|
|
|
+ <div class="jacket-base"></div>
|
|
|
+ <div class="jacket-part jacket-hood active-part" data-part="hood"></div>
|
|
|
+ <div class="jacket-part jacket-body" data-part="body"></div>
|
|
|
+ <div class="jacket-part jacket-sleeve left" data-part="sleeve-left"></div>
|
|
|
+ <div class="jacket-part jacket-sleeve right" data-part="sleeve-right"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h3>选择颜色</h3>
|
|
|
+ <div class="color-palette">
|
|
|
+ <div class="color-option active" style="background-color: #3498db;" data-color="#3498db"></div>
|
|
|
+ <div class="color-option" style="background-color: #e74c3c;" data-color="#e74c3c"></div>
|
|
|
+ <div class="color-option" style="background-color: #2ecc71;" data-color="#2ecc71"></div>
|
|
|
+ <div class="color-option" style="background-color: #f1c40f;" data-color="#f1c40f"></div>
|
|
|
+ <div class="color-option" style="background-color: #9b59b6;" data-color="#9b59b6"></div>
|
|
|
+ <div class="color-option" style="background-color: #1abc9c;" data-color="#1abc9c"></div>
|
|
|
+ <div class="color-option" style="background-color: #e67e22;" data-color="#e67e22"></div>
|
|
|
+ <div class="color-option" style="background-color: #2c3e50;" data-color="#2c3e50"></div>
|
|
|
+ <div class="color-option" style="background-color: #ecf0f1;" data-color="#ecf0f1"></div>
|
|
|
+ <div class="color-option" style="background-color: #e84393;" data-color="#e84393"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="action-buttons">
|
|
|
+ <button class="btn btn-secondary">
|
|
|
+ <i class="fas fa-redo"></i> 重置
|
|
|
+ </button>
|
|
|
+ <button class="btn btn-primary pulse">
|
|
|
+ <i class="fas fa-save"></i> 保存设计
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 热门IP面板 -->
|
|
|
+ <div class="panel" id="ip-panel">
|
|
|
+ <h2><i class="fas fa-crown"></i> 热门IP配色</h2>
|
|
|
+ <p class="section-desc">从热门IP图片中提取颜色，应用到你的羽绒服设计</p>
|
|
|
+
|
|
|
+ <div class="ip-upload">
|
|
|
+ <div class="upload-area" id="uploadArea">
|
|
|
+ <i class="fas fa-cloud-upload-alt"></i>
|
|
|
+ <p>点击上传图片或拖放文件到这里</p>
|
|
|
+ <small>支持JPG、PNG格式，最大5MB</small>
|
|
|
+ </div>
|
|
|
+ <button class="btn btn-primary">
|
|
|
+ <i class="fas fa-magic"></i> 识别图片颜色
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h3>热门IP推荐</h3>
|
|
|
+ <div class="color-stats">
|
|
|
+ <div class="color-stat">
|
|
|
+ <div class="color-box" style="background: linear-gradient(135deg, #FFD700, #C0C0C0);">
|
|
|
+ <i class="fas fa-bolt"></i>
|
|
|
+ </div>
|
|
|
+ <div class="stat-name">漫威英雄</div>
|
|
|
+ <div class="stat-count">12,450 次使用</div>
|
|
|
+ </div>
|
|
|
+ <div class="color-stat">
|
|
|
+ <div class="color-box" style="background: linear-gradient(135deg, #FF69B4, #00FFFF);">
|
|
|
+ <i class="fas fa-vest"></i>
|
|
|
+ </div>
|
|
|
+ <div class="stat-name">芭比娃娃</div>
|
|
|
+ <div class="stat-count">9,870 次使用</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 分享面板 -->
|
|
|
+ <div class="panel" id="share-panel">
|
|
|
+ <h2><i class="fas fa-share-alt"></i> 分享你的设计</h2>
|
|
|
+ <p class="section-desc">将你的个性羽绒服设计分享给朋友或社交平台</p>
|
|
|
+
|
|
|
+ <div class="share-section">
|
|
|
+ <h3>我的个性羽绒服设计</h3>
|
|
|
+ <p>扫描二维码或复制链接分享给好友</p>
|
|
|
+
|
|
|
+ <div class="share-link">
|
|
|
+ <input type="text" id="shareLink" value="https://diy.jacket.com/design/abc123" readonly>
|
|
|
+ <button id="copyBtn">
|
|
|
+ <i class="fas fa-copy"></i> 复制链接
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="share-icons">
|
|
|
+ <div class="share-icon wechat">
|
|
|
+ <i class="fab fa-weixin"></i>
|
|
|
+ </div>
|
|
|
+ <div class="share-icon weibo">
|
|
|
+ <i class="fab fa-weibo"></i>
|
|
|
+ </div>
|
|
|
+ <div class="share-icon qq">
|
|
|
+ <i class="fab fa-qq"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h3>热门分享设计</h3>
|
|
|
+ <div class="color-stats">
|
|
|
+ <div class="color-stat">
|
|
|
+ <div class="color-box" style="background: linear-gradient(135deg, #3498db, #9b59b6);">
|
|
|
+ <i class="fas fa-star"></i>
|
|
|
+ </div>
|
|
|
+ <div class="stat-name">星空主题</div>
|
|
|
+ <div class="stat-count">8,456 次分享</div>
|
|
|
+ </div>
|
|
|
+ <div class="color-stat">
|
|
|
+ <div class="color-box" style="background: linear-gradient(135deg, #e74c3c, #f1c40f);">
|
|
|
+ <i class="fas fa-fire"></i>
|
|
|
+ </div>
|
|
|
+ <div class="stat-name">火焰主题</div>
|
|
|
+ <div class="stat-count">7,231 次分享</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 流行趋势面板 -->
|
|
|
+ <div class="panel" id="trends-panel">
|
|
|
+ <h2><i class="fas fa-chart-line"></i> 颜色流行趋势</h2>
|
|
|
+ <p class="section-desc">查看最受欢迎的颜色搭配和当前流行趋势</p>
|
|
|
+
|
|
|
+ <h3>本周最受欢迎颜色</h3>
|
|
|
+ <div class="chart-container">
|
|
|
+ <canvas id="colorChart"></canvas>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h3>热门搭配方案</h3>
|
|
|
+ <div class="color-stats">
|
|
|
+ <div class="color-stat">
|
|
|
+ <div class="color-box" style="background: linear-gradient(135deg, #3498db, #2c3e50);">
|
|
|
+ <i class="fas fa-water"></i>
|
|
|
+ </div>
|
|
|
+ <div class="stat-name">深海蓝黑</div>
|
|
|
+ <div class="stat-count">5,678 次使用</div>
|
|
|
+ </div>
|
|
|
+ <div class="color-stat">
|
|
|
+ <div class="color-box" style="background: linear-gradient(135deg, #e74c3c, #f1c40f);">
|
|
|
+ <i class="fas fa-sun"></i>
|
|
|
+ </div>
|
|
|
+ <div class="stat-name">日落橙黄</div>
|
|
|
+ <div class="stat-count">4,987 次使用</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <footer>
|
|
|
+ <p>© 2023 羽绒服DIY - 创造你的个性时尚</p>
|
|
|
+ <p>让每个人都能成为设计师</p>
|
|
|
+ </footer>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ // 页面加载完成后执行
|
|
|
+ document.addEventListener('DOMContentLoaded', function() {
|
|
|
+ // 标签切换功能
|
|
|
+ document.querySelectorAll('.tab').forEach(tab => {
|
|
|
+ tab.addEventListener('click', () => {
|
|
|
+ // 移除所有活动标签
|
|
|
+ document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
|
+ // 添加当前活动标签
|
|
|
+ tab.classList.add('active');
|
|
|
+
|
|
|
+ // 隐藏所有面板
|
|
|
+ document.querySelectorAll('.panel').forEach(panel => panel.classList.remove('active'));
|
|
|
+ // 显示对应面板
|
|
|
+ const panelId = tab.getAttribute('data-tab') + '-panel';
|
|
|
+ document.getElementById(panelId).classList.add('active');
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 部位选择功能
|
|
|
+ document.querySelectorAll('.jacket-part').forEach(part => {
|
|
|
+ part.addEventListener('click', () => {
|
|
|
+ document.querySelectorAll('.jacket-part').forEach(p => p.classList.remove('active-part'));
|
|
|
+ part.classList.add('active-part');
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 颜色选择功能
|
|
|
+ document.querySelectorAll('.color-option').forEach(color => {
|
|
|
+ color.addEventListener('click', () => {
|
|
|
+ const selectedColor = color.getAttribute('data-color');
|
|
|
+ const activePart = document.querySelector('.jacket-part.active-part');
|
|
|
+
|
|
|
+ if (activePart) {
|
|
|
+ activePart.style.background = `linear-gradient(135deg, ${selectedColor}, ${adjustColor(selectedColor, -20)})`;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新活动颜色指示器
|
|
|
+ document.querySelectorAll('.color-option').forEach(c => c.classList.remove('active'));
|
|
|
+ color.classList.add('active');
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 辅助函数：调整颜色亮度
|
|
|
+ function adjustColor(color, amount) {
|
|
|
+ return '#' + color.replace(/^#/, '').replace(/../g, color => ('0'+Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2));
|
|
|
+ }
|
|
|
+
|
|
|
+ // 复制链接功能
|
|
|
+ document.getElementById('copyBtn').addEventListener('click', () => {
|
|
|
+ const linkInput = document.getElementById('shareLink');
|
|
|
+ linkInput.select();
|
|
|
+ document.execCommand('copy');
|
|
|
+
|
|
|
+ // 显示复制成功提示
|
|
|
+ const originalText = linkInput.value;
|
|
|
+ const btnText = document.getElementById('copyBtn');
|
|
|
+ btnText.innerHTML = '<i class="fas fa-check"></i> 已复制';
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ btnText.innerHTML = '<i class="fas fa-copy"></i> 复制链接';
|
|
|
+ }, 2000);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 上传区域交互
|
|
|
+ const uploadArea = document.getElementById('uploadArea');
|
|
|
+ uploadArea.addEventListener('dragover', (e) => {
|
|
|
+ e.preventDefault();
|
|
|
+ uploadArea.style.borderColor = 'var(--primary)';
|
|
|
+ uploadArea.style.backgroundColor = 'rgba(52, 152, 219, 0.1)';
|
|
|
+ });
|
|
|
+
|
|
|
+ uploadArea.addEventListener('dragleave', () => {
|
|
|
+ uploadArea.style.borderColor = 'var(--light-gray)';
|
|
|
+ uploadArea.style.backgroundColor = 'var(--lighter)';
|
|
|
+ });
|
|
|
+
|
|
|
+ uploadArea.addEventListener('click', () => {
|
|
|
+ alert('图片上传功能需要后端支持，此处为前端演示');
|
|
|
+ });
|
|
|
+
|
|
|
+ // 初始化图表
|
|
|
+ const ctx = document.getElementById('colorChart').getContext('2d');
|
|
|
+ const colorChart = new Chart(ctx, {
|
|
|
+ type: 'bar',
|
|
|
+ data: {
|
|
|
+ labels: ['海洋蓝', '活力红', '森林绿', '阳光黄', '梦幻紫', '珊瑚橙'],
|
|
|
+ datasets: [{
|
|
|
+ label: '使用次数',
|
|
|
+ data: [1850, 1620, 1540, 1420, 1360, 1280],
|
|
|
+ backgroundColor: [
|
|
|
+ '#3498db',
|
|
|
+ '#e74c3c',
|
|
|
+ '#2ecc71',
|
|
|
+ '#f1c40f',
|
|
|
+ '#9b59b6',
|
|
|
+ '#ff7f50'
|
|
|
+ ],
|
|
|
+ borderColor: [
|
|
|
+ '#2980b9',
|
|
|
+ '#c0392b',
|
|
|
+ '#27ae60',
|
|
|
+ '#f39c12',
|
|
|
+ '#8e44ad',
|
|
|
+ '#ff6347'
|
|
|
+ ],
|
|
|
+ borderWidth: 1,
|
|
|
+ borderRadius: 10
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ responsive: true,
|
|
|
+ maintainAspectRatio: false,
|
|
|
+ plugins: {
|
|
|
+ legend: {
|
|
|
+ display: false
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ display: true,
|
|
|
+ text: '颜色使用频率统计',
|
|
|
+ font: {
|
|
|
+ size: 16
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ scales: {
|
|
|
+ y: {
|
|
|
+ beginAtZero: true,
|
|
|
+ grid: {
|
|
|
+ color: 'rgba(0, 0, 0, 0.05)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ x: {
|
|
|
+ grid: {
|
|
|
+ display: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 重置按钮功能
|
|
|
+ document.querySelector('.btn-secondary').addEventListener('click', () => {
|
|
|
+ document.querySelectorAll('.jacket-part').forEach(part => {
|
|
|
+ part.style.background = '';
|
|
|
+ });
|
|
|
+
|
|
|
+ // 重置颜色选择器
|
|
|
+ document.querySelectorAll('.color-option').forEach(color => {
|
|
|
+ color.classList.remove('active');
|
|
|
+ });
|
|
|
+
|
|
|
+ // 设置默认颜色为选中
|
|
|
+ document.querySelector('.color-option').classList.add('active');
|
|
|
+
|
|
|
+ // 设置默认激活部位
|
|
|
+ document.querySelectorAll('.jacket-part').forEach(p => p.classList.remove('active-part'));
|
|
|
+ document.querySelector('.jacket-hood').classList.add('active-part');
|
|
|
+ });
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
0235653