编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>智能AI美妆镜 - APP原型</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #1a1a2e;
            color: #2d3436;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        /* 手机框架 */
        .phone-frame {
            width: 100%;
            max-width: 430px;
            height: 90vh;
            max-height: 900px;
            background: #000;
            border-radius: 50px;
            padding: 12px;
            box-shadow: 0 50px 100px rgba(0,0,0,0.5);
            position: relative;
        }
        
        .phone-screen {
            width: 100%;
            height: 100%;
            background: #fafafa;
            border-radius: 40px;
            overflow: hidden;
            position: relative;
        }
        
        /* 状态栏 */
        .status-bar {
            height: 44px;
            background: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 24px;
            font-size: 14px;
            font-weight: 600;
        }
        
        .status-bar .time {
            font-weight: 600;
        }
        
        .status-icons {
            display: flex;
            gap: 6px;
            align-items: center;
        }
        
        .status-icons svg {
            width: 18px;
            height: 18px;
        }
        
        /* 页面容器 */
        .page {
            display: none;
            height: calc(100% - 44px);
            background: #fafafa;
            overflow-y: auto;
        }
        
        .page.active {
            display: block;
        }
        
        /* 启动页 */
        .splash-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #6C5CE7 0%, #a29bfe 50%, #FDCB6E 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }
        
        .splash-screen .logo {
            width: 100px;
            height: 100px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            box-shadow: 0 20px 60px rgba(108, 92, 231, 0.4);
            animation: pulse 1.5s infinite;
        }
        
        .splash-screen h1 {
            color: white;
            margin-top: 24px;
            font-size: 22px;
            letter-spacing: 4px;
            font-weight: 300;
            text-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        
        /* 登录页 */
        .login-page {
            background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
            padding: 40px 24px;
            height: 100%;
        }
        
        .login-header {
            text-align: center;
            margin-bottom: 40px;
            padding-top: 30px;
        }
        
        .login-header .logo {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #6C5CE7, #a29bfe);
            border-radius: 20px;
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            box-shadow: 0 10px 30px rgba(108, 92, 231, 0.3);
        }
        
        .login-header h1 {
            font-size: 20px;
            color: #2d3436;
            font-weight: 500;
        }
        
        .login-form {
            max-width: 100%;
        }
        
        .input-group {
            margin-bottom: 16px;
        }
        
        .input-group label {
            display: block;
            font-size: 13px;
            color: #666;
            margin-bottom: 6px;
        }
        
        .input-group input {
            width: 100%;
            padding: 14px;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            font-size: 15px;
            outline: none;
            transition: border-color 0.3s;
        }
        
        .input-group input:focus {
            border-color: #6C5CE7;
            box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
        }
        
        .code-input {
            display: flex;
            gap: 10px;
        }
        
        .code-input input {
            flex: 1;
        }
        
        .send-code-btn {
            padding: 14px 16px;
            background: linear-gradient(135deg, #6C5CE7, #a29bfe);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 13px;
            white-space: nowrap;
        }
        
        .privacy-check {
            display: flex;
            align-items: center;
            margin: 24px 0;
            font-size: 12px;
        }
        
.privacy-check input {
            width: 18px;
            height: 18px;
            margin-right: 8px;
            accent-color: #6C5CE7;
        }
        
        .privacy-check a {
            color: #6C5CE7;
            text-decoration: none;
            margin: 0 3px;
        }
        
        .login-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #6C5CE7, #a29bfe);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            cursor: pointer;
        }
        
        /* 主页面 */
        .home-page {
            background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
        }
        
        .home-header {
            padding: 16px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: white;
        }
        
        .home-header .logo {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #6C5CE7, #a29bfe);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        
        .home-header .user-btn {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        
        .main-features {
            padding: 24px 20px;
        }
        
        .feature-card {
            background: linear-gradient(135deg, #6C5CE7, #a29bfe);
            border-radius: 20px;
            padding: 28px 20px;
            margin-bottom: 14px;
            color: white;
            cursor: pointer;
            transition: transform 0.3s;
        }
        
        .feature-card:active {
            transform: scale(0.98);
        }
        
        .feature-card .icon {
            font-size: 44px;
            margin-bottom: 10px;
        }
        
        .feature-card h3 {
            font-size: 18px;
            margin-bottom: 4px;
            font-weight: 500;
        }
        
        .feature-card p {
            font-size: 13px;
            opacity: 0.9;
        }
        
        .carousel-area {
            padding: 16px 20px;
        }
        
        .carousel-area h4 {
            font-size: 14px;
            color: #666;
            margin-bottom: 12px;
        }
        
        .carousel {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            padding-bottom: 8px;
        }
        
        .carousel-item {
            min-width: 220px;
            height: 120px;
            background: linear-gradient(135deg, #6C5CE7, #a29bfe);
            border-radius: 14px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .carousel-item:active {
            transform: scale(0.96);
        }
        
        .carousel-content {
            text-align: center;
            color: white;
            padding: 10px;
        }
        
        .carousel-icon {
            font-size: 32px;
            margin-bottom: 8px;
        }
        
        .carousel-title {
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 4px;
        }
        
        .carousel-subtitle {
            font-size: 11px;
            opacity: 0.9;
        }
        
        /* AR美妆页面 */
        .ar-makeup-page {
            background: #1a1a1a;
            color: white;
            height: 100%;
        }
        
        .ar-header {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(0,0,0,0.6);
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        .back-btn {
            color: white;
            font-size: 22px;
            cursor: pointer;
            padding: 8px;
            margin: -8px;
        }
        
        .ar-header h2 {
            font-size: 16px;
        }
        
        .ar-preview {
            height: 40vh;
            background: #2a2a2a;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .ar-preview .face-outline {
            width: 160px;
            height: 220px;
            border: 2px dashed #6C5CE7;
            border-radius: 50% 50% 45% 45%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6C5CE7;
            font-size: 12px;
            flex-direction: column;
        }
        
        .ar-controls {
            position: absolute;
            bottom: 20px;
            right: 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .ar-control-btn {
            width: 44px;
            height: 44px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
        }
        
        .makeup-tabs {
            display: flex;
            gap: 8px;
            padding: 12px 16px;
            overflow-x: auto;
            background: #252525;
        }
        
        .makeup-tab {
            padding: 8px 16px;
            background: rgba(255,255,255,0.1);
            border-radius: 16px;
            white-space: nowrap;
            font-size: 13px;
            cursor: pointer;
        }
        
        .makeup-tab.active {
            background: linear-gradient(135deg, #6C5CE7, #a29bfe);
        }
        
        .makeup-items {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;
            padding: 16px;
        }
        
        .makeup-item {
            aspect-ratio: 1;
            background: #2a2a2a;
            border-radius: 10px;
            cursor: pointer;
            border: 2px solid transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        
        .makeup-item.selected {
            border-color: #6C5CE7;
        }
        
        .product-recommend {
            padding: 16px;
            background: #252525;
        }
        
        .product-recommend h4 {
            font-size: 14px;
            margin-bottom: 12px;
            color: white;
        }
        
        .product-list {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            padding-bottom: 16px;
        }
        
        .product-card {
            min-width: 110px;
            background: #1a1a1a;
            border-radius: 10px;
            padding: 10px;
            cursor: pointer;
        }
        
        .product-card .product-img {
            width: 100%;
            aspect-ratio: 1;
            background: linear-gradient(135deg, #6C5CE7, #a29bfe);
            border-radius: 8px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        
        .product-card h5 {
            font-size: 12px;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .product-card .price {
            color: #6C5CE7;
            font-size: 13px;
            font-weight: bold;
        }
        
        .product-card .sales {
            font-size: 10px;
            color: #888;
        }
        
        /* 商品详情 */
        .product-detail-page {
            background: white;
        }
        
        .product-detail-page .back-btn {
            color: #333;
        }
        
        .product-main-img {
            width: 100%;
            height: 45vh;
            background: linear-gradient(135deg, #6C5CE7, #a29bfe);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 80px;
        }
        
        .product-info {
            padding: 20px;
        }
        
        .product-info .price {
            color: #6C5CE7;
            font-weight: bold;
            margin-bottom: 8px;
        }
        
        .product-info h3 {
            font-size: 18px;
            margin-bottom: 12px;
        }
        
        .product-info .desc {
            font-size: 13px;
            color: #666;
            line-height: 1.6;
        }
        
        .product-actions {
            display: flex;
            gap: 12px;
            padding: 16px 20px;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 1px solid #eee;
        }
        
        .action-btn {
            flex: 1;
            padding: 12px;
            border-radius: 22px;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
gap: 6px;
        }
        
        .action-btn.favorite {
            background: #f3f0ff;
            color: #6C5CE7;
            border: 1px solid #6C5CE7;
        }
        
        .action-btn.like {
            background: #f5f5f5;
            color: #666;
            border: 1px solid #ddd;
        }
        
        .action-btn.buy {
            background: linear-gradient(135deg, #6C5CE7, #a29bfe);
            color: white;
            border: none;
        }
        
        /* 购买弹窗 */
        .modal {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        .modal.active {
            display: flex;
        }
        
        .modal-content {
            background: white;
            border-radius: 20px;
            padding: 24px;
            width: 90%;
            max-width: 340px;
            text-align: center;
        }
        
        .modal-content .product-img {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #6C5CE7, #a29bfe);
            border-radius: 12px;
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
        }
        
        .modal-content h4 {
            font-size: 16px;
            margin-bottom: 8px;
        }
        
        .modal-content .price {
            color: #6C5CE7;
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 16px;
        }
        
        .qr-code {
            width: 160px;
            height: 160px;
            background: #f5f5f5;
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #666;
            border-radius: 10px;
        }
        
        .modal-close {
            width: 100%;
            padding: 12px;
            background: #f5f5f5;
            border: none;
            border-radius: 22px;
            font-size: 14px;
            cursor: pointer;
        }
        
        /* 皮肤检测页面 */
        .skin-check-page {
            background: #1a1a1a;
            color: white;
            height: 100%;
        }
        
        .camera-area {
            height: 50vh;
            background: #2a2a2a;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .face-guide {
            width: 180px;
            height: 250px;
            border: 3px dashed #6C5CE7;
            border-radius: 50% 50% 45% 45%;
            position: relative;
        }
        
        .face-guide::before {
            content: '将人脸对准框内';
            position: absolute;
            bottom: -36px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: #6C5CE7;
        }
        
        .tips {
            padding: 16px;
            background: #252525;
        }
        
        .tips h4 {
            font-size: 14px;
            margin-bottom: 12px;
        }
        
        .tip-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
        
        .tip-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: #ccc;
        }
        
        .tip-item .icon {
            font-size: 18px;
        }
        
        .capture-btn {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: white;
            border: 4px solid #6C5CE7;
            cursor: pointer;
        }
        
        /* 皮肤检测报告 */
        .report-page {
            background: #f5f5f5;
        }
        
        .report-header {
            background: linear-gradient(135deg, #6C5CE7, #a29bfe);
            padding: 24px;
            color: white;
            text-align: center;
        }
        
        .report-header h2 {
            font-size: 18px;
            margin-bottom: 16px;
        }
        
        .score-circle {
            width: 100px;
            height: 100px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        
        .score-circle .num {
            font-size: 34px;
            font-weight: bold;
        }
        
        .score-circle .label {
            font-size: 12px;
            opacity: 0.9;
        }
        
        .report-items {
            padding: 16px;
        }
        
        .report-items h4 {
            font-size: 14px;
            color: #666;
            margin-bottom: 12px;
        }
        
        .report-item {
            background: white;
            border-radius: 14px;
            padding: 14px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .report-item .left {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .report-item .icon {
            font-size: 24px;
        }
        
        .report-item .name {
            font-size: 14px;
        }
        
        .report-item .level {
            padding: 5px 12px;
            border-radius: 16px;
            font-size: 12px;
        }
        
        .level-none { background: #e8f5e9; color: #4caf50; }
        .level-light { background: #fff3e0; color: #ff9800; }
        .level-medium { background: #ffebee; color: #f44336; }
        .level-heavy { background: #ffcdd2; color: #d32f2f; }
        
        .report-products {
            padding: 16px;
        }
        
        .report-products h4 {
            font-size: 14px;
            color: #666;
            margin-bottom: 12px;
        }
        
        .report-product-card {
            background: white;
            border-radius: 14px;
            padding: 16px;
            margin-bottom: 12px;
            cursor: pointer;
            display: flex;
            gap: 12px;
        }
        
        .report-product-card .product-img {
            width: 80px;
            height: 80px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            flex-shrink: 0;
        }
        
        .report-product-card .info h4 {
            font-size: 15px;
            margin-bottom: 6px;
            color: #333;
        }
        
        .report-product-card .price {
            color: #6C5CE7;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 4px;
        }
        
        .report-product-card .info p {
            font-size: 12px;
            color: #666;
        }
        
        /* 用户中心 */
        .user-center-page {
            background: #fafafa;
            height: 100%;
        }
        
        .user-header {
            background: linear-gradient(135deg, #6C5CE7, #a29bfe);
            padding: 80px 20px 40px;
            color: white;
        }
        
        .user-header h2 {
            font-size: 16px;
            margin-bottom: 24px;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        
        .user-avatar {
            width: 60px;
            height: 60px;
            background: rgba(255,255,255,0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
        }
        
        .user-header .user-name {
            font-size: 18px;
            font-weight: bold;
        }
        
        .user-header .user-phone {
            font-size: 13px;
            opacity: 0.8;
        }
        
        .user-menu {
            padding: 16px;
            margin-top: -24px;
        }
        
        .menu-item {
            background: white;
            border-radius: 14px;
            padding: 14px 16px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
        }
        
        .menu-item:active {
            background: #f5f5f5;
        }
        
        .menu-item .left {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .menu-item .icon {
            font-size: 22px;
        }
        
        .menu-item .text {
            font-size: 14px;
        }
        
        .menu-item .arrow {
            color: #ccc;
            font-size: 20px;
        }
        
        /* 收藏/喜欢列表 */
        .list-page {
            background: white;
            height: 100%;
        }
        
        .list-header {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            background: white;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        .list-header h2 {
            font-size: 16px;
            color: #333;
            flex: 1;
            text-align: center;
        }
        
        .list-header .back-btn {
            color: #333;
            font-size: 22px;
        }
        
        .list-items {
            padding: 16px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        
        .list-item-card {
            background: #f9f9f9;
            border-radius: 12px;
            padding: 12px;
            cursor: pointer;
        }
        
        .list-item-card:active {
            background: #f0f0f0;
        }
        
        .list-item-card .item-img {
            width: 100%;
            aspect-ratio: 1;
            background: linear-gradient(135deg, #6C5CE7, #a29bfe);
            border-radius: 8px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
        }
        
        .list-item-card h5 {
            font-size: 13px;
            margin-bottom: 4px;
        }
        
        .list-item-card .price {
            color: #6C5CE7;
            font-size: 14px;
            font-weight: bold;
        }
        
        .list-item-card .sales {
            font-size: 11px;
            color: #888;
            margin-top: 4px;
        }
        
        /* 隐私政策/用户协议 */
        .webview-page {
            background: white;
            height: 100%;
        }
        
        .webview-content {
            padding: 16px;
            font-size: 13px;
            line-height: 1.7;
            color: #333;
        }
        
        .webview-content h3 {
            font-size: 16px;
            margin-bottom: 12px;
            color: #6C5CE7;
        }
        
        .webview-content p {
            margin-bottom: 12px;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #eee;
            z-index: 500;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            padding: 8px 16px;
        }
        
        .nav-item .icon {
            font-size: 22px;
        }
        
        .nav-item .text {
            font-size: 11px;
            color: #666;
        }
        
        .nav-item.active .text {
            color: #6C5CE7;
        }
        
        /* Toast提示 */
        .toast {
            position: fixed;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 10px 20px;
            border-radius: 22px;
            font-size: 13px;
            z-index: 9999;
            animation: fadeIn 0.3s;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateX(-50%) translateY(20px); }
            to { opacity: 1; transform: translateX(-50%) translateY(0); }
        }
        
        /* 待机页面 */
        .standby-page {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #667eea, #764ba2);
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: white;
            z-index: 900;
        }
        
        .standby-page.active {
            display: flex;
        }
        
        .standby-content {
            text-align: center;
        }
        
        .standby-content .logo {
            font-size: 50px;
            margin-bottom: 16px;
        }
        
        .standby-content h2 {
            font-size: 20px;
            letter-spacing: 3px;
        }
        
        .standby-tip {
            position: absolute;
            bottom: 36px;
            font-size: 12px;
            opacity: 0.8;
        }
        
        /* 设置页面特殊样式 */
        .settings-page .menu-item {
            margin-bottom: 12px;
        }
        
        .settings-footer {
            text-align: center;
            color: #999;
            font-size: 11px;
            margin-top: 40px;
            padding: 20px;
        }
        
        /* 列表页面内容区域 */
        .list-page .page-content {
            padding-bottom: 80px;
        }
        
        /* 商品详情底部固定 */
        .product-detail-page {
            position: relative;
            height: 100%;
        }
        
        .product-detail-page .scroll-content {
            height: calc(100% - 60px);
            overflow-y: auto;
            padding-bottom: 80px;
        }
    </style>
</head>
<body>
    <!-- 手机框架 -->
    <div class="phone-frame">
        <div class="phone-screen">
            <!-- 状态栏 -->
            <div class="status-bar" id="statusBar">
                <span class="time">9:41</span>
                <div class="status-icons">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M1 9l2 2c4.88-4.88 12.78-4.88 17.67 0l2-2C16.14 2.67 7.87 2.67 3 7.5zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.91-2.91 7.64-2.91 10.55 0l2-2C15.14 6.33 8.87 6.33 5 10.5z"/></svg>
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z"/></svg>
                </div>
            </div>
            
            <!-- 启动页 -->
            <div class="splash-screen" id="splashScreen">
                <div class="logo">💄</div>
                <h1>AI BEAUTY MIRROR</h1>
            </div>
            
            <!-- 登录页 -->
            <div class="page login-page" id="loginPage">
                <div class="login-header">
                    <div class="logo">💄</div>
                    <h1>AI智能美妆镜</h1>
                </div>
                <div class="login-form">
                    <div class="input-group">
                        <label>手机号</label>
                        <input type="tel" placeholder="请输入手机号" id="phoneInput">
                    </div>
                    <div class="input-group">
                        <label>验证码</label>
                        <div class="code-input">
                            <input type="text" placeholder="请输入验证码" id="codeInput">
                            <button class="send-code-btn" onclick="sendCode()">发送验证码</button>
                        </div>
                    </div>
                    <div class="privacy-check">
                        <input type="checkbox" id="agreeCheck">
                        <span>我已阅读并同意</span>
                        <a href="#" onclick="showPage('privacyPage'); return false;">隐私政策</a>
                        <span>和</span>
                        <a href="#" onclick="showPage('termsPage'); return false;">用户协议</a>
                    </div>
                    <button class="login-btn" onclick="login()">登录</button>
                </div>
            </div>
            
            <!-- 主页面 -->
            <div class="page home-page" id="homePage">
                <div class="home-header">
                    <div class="logo">💄</div>
                    <div class="user-btn" onclick="showPage('userCenterPage')">👤</div>
                </div>
                <div class="main-features">
                    <div class="feature-card" onclick="showPage('arMakeupPage')">
                        <div class="icon">💋</div>
                        <h3>AR虚拟美妆</h3>
                        <p>实时试妆，智能推荐</p>
                    </div>
                    <div class="feature-card" onclick="showPage('skinCheckPage')" style="background: linear-gradient(135deg, #00CEC9, #81ECEC);">
                        <div class="icon">🔬</div>
                        <h3>人脸皮肤检测</h3>
                        <p>AI分析，科学护肤</p>
                    </div>
                </div>
                <div class="carousel-area">
                    <h4>精选推荐</h4>
                    <div class="carousel">
                        <div class="carousel-item" onclick="showPage('productDetailPage')">
                            <div class="carousel-content">
                                <div class="carousel-icon">🎁</div>
                                <div class="carousel-title">春季限定礼盒</div>
                                <div class="carousel-subtitle">限时特惠 7折起</div>
                            </div>
                        </div>
                        <div class="carousel-item" style="background: linear-gradient(135deg, #FDCB6E, #F8E71C);" onclick="showPage('arMakeupPage')">
                            <div class="carousel-content">
                                <div class="carousel-icon">💄</div>
                                <div class="carousel-title">新年美妆课堂</div>
                                <div class="carousel-subtitle">教你画出完美妆容</div>
                            </div>
                        </div>
                        <div class="carousel-item" style="background: linear-gradient(135deg, #00CEC9, #81ECEC);" onclick="showPage('skinCheckPage')">
                            <div class="carousel-content">
                                <div class="carousel-icon">🔬</div>
                                <div class="carousel-title">免费皮肤检测</div>
                                <div class="carousel-subtitle">AI智能分析你的肌肤</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 底部导航 -->
                <div class="bottom-nav">
                    <div class="nav-item active" onclick="showPage('homePage')">
                        <span class="icon">🏠</span>
                        <span class="text">首页</span>
                    </div>
                    <div class="nav-item" onclick="showPage('arMakeupPage')">
                        <span class="icon">💋</span>
                        <span class="text">美妆</span>
                    </div>
                    <div class="nav-item" onclick="showPage('skinCheckPage')">
                        <span class="icon">🔬</span>
                        <span class="text">检测</span>
                    </div>
                    <div class="nav-item" onclick="showPage('userCenterPage')">
                        <span class="icon">👤</span>
                        <span class="text">我的</span>
                    </div>
                </div>
            </div>
            
            <!-- AR美妆页面 -->
            <div class="page ar-makeup-page" id="arMakeupPage">
                <div class="ar-header">
                    <div class="back-btn" onclick="showPage('homePage')">←</div>
                    <h2>AR虚拟美妆</h2>
                    <div style="width: 40px;"></div>
                </div>
                <div class="ar-preview">
                    <div class="face-outline">📷<br>人脸预览区域</div>
                </div>
                <div class="ar-controls">
                    <div class="ar-control-btn" title="按住清除美妆">🧹</div>
                    <div class="ar-control-btn" title="一键清除" onclick="showToast('已清除所有美妆')">✖</div>
                    <div class="ar-control-btn" title="重选" onclick="showToast('请重新选择美妆')">↩</div>
                </div>
                <div class="makeup-tabs">
                    <div class="makeup-tab active" onclick="switchTab(this)">粉底</div>
                    <div class="makeup-tab" onclick="switchTab(this)">腮红</div>
                    <div class="makeup-tab" onclick="switchTab(this)">唇彩</div>
                    <div class="makeup-tab" onclick="switchTab(this)">眼线</div>
                    <div class="makeup-tab" onclick="switchTab(this)">眉毛</div>
                    <div class="makeup-tab" onclick="switchTab(this)">眼影</div>
                    <div class="makeup-tab" onclick="switchTab(this)">眉形</div>
                    <div class="makeup-tab" onclick="switchTab(this)">高光</div>
                </div>
                <div class="makeup-items">
                    <div class="makeup-item selected" onclick="selectMakeup(this)">💄</div>
                    <div class="makeup-item" onclick="selectMakeup(this)">💋</div>
                    <div class="makeup-item" onclick="selectMakeup(this)">🌸</div>
                    <div class="makeup-item" onclick="selectMakeup(this)">🌹</div>
                    <div class="makeup-item" onclick="selectMakeup(this)">❤️</div>
                    <div class="makeup-item" onclick="selectMakeup(this)">🧡</div>
                    <div class="makeup-item" onclick="selectMakeup(this)">💛</div>
                    <div class="makeup-item" onclick="selectMakeup(this)">💚</div>
                    <div class="makeup-item" onclick="selectMakeup(this)">💙</div>
                    <div class="makeup-item" onclick="selectMakeup(this)">💜</div>
                </div>
                <div class="product-recommend">
                    <h4>推荐商品</h4>
                    <div class="product-list">
                        <div class="product-card" onclick="showPage('productDetailPage')">
                            <div class="product-img">💄</div>
                            <h5>奢华丝绒口红</h5>
                            <div class="price">¥199</div>
                            <div class="sales">销量 2.3万</div>
                        </div>
                        <div class="product-card" onclick="showPage('productDetailPage')">
                            <div class="product-img">💋</div>
                            <h5>水润唇釉</h5>
                            <div class="price">¥168</div>
                            <div class="sales">销量 1.8万</div>
                        </div>
                        <div class="product-card" onclick="showPage('productDetailPage')">
                            <div class="product-img">🌸</div>
                            <h5>樱花限定礼盒</h5>
                            <div class="price">¥399</div>
                            <div class="sales">销量 9800</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 商品详情页面 -->
            <div class="page product-detail-page" id="productDetailPage">
                <div class="list-header">
                    <div class="back-btn" onclick="goBack()">←</div>
                    <h2>商品详情</h2>
                    <div style="width: 40px;"></div>
                </div>
                <div class="scroll-content">
                    <div class="product-main-img">💄</div>
                    <div class="product-info">
                        <div class="price">¥199</div>
                        <h3>奢华丝绒口红 #正红色</h3>
                        <p class="desc">持久显色，丝绒质地，富含维生素E，滋润双唇。高饱和度色彩，一抹即现饱满唇色。适合各种肤质使用。</p>
                    </div>
                </div>
                <div class="product-actions">
                    <div class="action-btn favorite" onclick="toggleFavorite(this)">❤️ 收藏</div>
                    <div class="action-btn like" onclick="toggleLike(this)">👍 喜欢</div>
                    <div class="action-btn buy" onclick="showBuyModal()">🛒 购买</div>
                </div>
            </div>
            
            <!-- 皮肤检测页面 -->
            <div class="page skin-check-page" id="skinCheckPage">
                <div class="ar-header">
                    <div class="back-btn" onclick="showPage('homePage')">←</div>
                    <h2>人脸皮肤检测</h2>
                    <div style="width: 40px;"></div>
                </div>
                <div class="camera-area">
                    <div class="face-guide"></div>
                </div>
                <div class="tips">
                    <h4>检测提示</h4>
                    <div class="tip-list">
                        <div class="tip-item"><span class="icon">👓</span> 请勿佩戴眼镜</div>
                        <div class="tip-item"><span class="icon">💇</span> 请勿有刘海遮挡</div>
                        <div class="tip-item"><span class="icon">😊</span> 建议素颜检测</div>
                        <div class="tip-item"><span class="icon">😌</span> 保持正常表情</div>
                        <div class="tip-item"><span class="icon">💡</span> 光线充足</div>
                        <div class="tip-item"><span class="icon">📷</span> 对准虚线框</div>
                    </div>
                </div>
                <div class="capture-btn" onclick="captureAndAnalyze()"></div>
            </div>
            
            <!-- 皮肤检测报告页面 -->
            <div class="page report-page" id="reportPage">
                <div class="list-header">
                    <div class="back-btn" onclick="showPage('homePage')">←</div>
                    <h2>检测报告</h2>
                    <div style="width: 40px;"></div>
                </div>
                <div class="report-header">
                    <h2>您的肌肤评分</h2>
                    <div class="score-circle">
                        <span class="num">85</span>
                        <span class="label">优秀</span>
                    </div>
                </div>
                <div class="report-items">
                    <h4>检测详情</h4>
                    <div class="report-item">
                        <div class="left">
                            <span class="icon">👶</span>
                            <span class="name">肌肤年龄</span>
                        </div>
                        <span class="level level-none">24岁</span>
                    </div>
                    <div class="report-item">
                        <div class="left">
                            <span class="icon">💧</span>
                            <span class="name">水分</span>
                        </div>
                        <span class="level level-none">优秀</span>
                    </div>
                    <div class="report-item">
                        <div class="left">
                            <span class="icon">😟</span>
                            <span class="name">黑眼圈</span>
                        </div>
                        <span class="level level-light">轻度</span>
                    </div>
                    <div class="report-item">
                        <div class="left">
                            <span class="icon">🔴</span>
                            <span class="name">痘痘</span>
                        </div>
                        <span class="level level-none">无</span>
                    </div>
                    <div class="report-item">
                        <div class="left">
                            <span class="icon">⚫</span>
                            <span class="name">黑头</span>
                        </div>
                        <span class="level level-medium">中度</span>
                    </div>
                    <div class="report-item">
                        <div class="left">
                            <span class="icon">🏔️</span>
                            <span class="name">毛孔</span>
                        </div>
                        <span class="level level-light">轻度</span>
                    </div>
                    <div class="report-item">
                        <div class="left">
                            <span class="icon">📏</span>
                            <span class="name">皱纹</span>
                        </div>
                        <span class="level level-none">无</span>
                    </div>
                    <div class="report-item">
                        <div class="left">
                            <span class="icon">🔍</span>
                            <span class="name">斑点</span>
                        </div>
                        <span class="level level-light">轻度</span>
                    </div>
                </div>
                <div class="report-products">
                    <h4>为您推荐</h4>
                    <div class="report-product-card" onclick="showPage('productDetailPage')">
                        <div class="product-img" style="background: linear-gradient(135deg, #667eea, #764ba2);">🧴</div>
                        <div class="info">
                            <h4>控油收缩毛孔精华</h4>
                            <div class="price">¥258</div>
                            <p>针对毛孔粗大问题，深层清洁紧致毛孔</p>
                        </div>
                    </div>
                    <div class="report-product-card" onclick="showPage('productDetailPage')">
                        <div class="product-img" style="background: linear-gradient(135deg, #f093fb, #f5576c);">👁️</div>
                        <div class="info">
                            <h4>眼霜淡化黑眼圈</h4>
                            <div class="price">¥189</div>
                            <p>蕴含咖啡因成分，有效改善黑眼圈</p>
                        </div>
                    </div>
                </div>
                <!-- 底部导航 -->
                <div class="bottom-nav">
                    <div class="nav-item" onclick="showPage('homePage')">
                        <span class="icon">🏠</span>
                        <span class="text">首页</span>
                    </div>
                    <div class="nav-item" onclick="showPage('arMakeupPage')">
                        <span class="icon">💋</span>
                        <span class="text">美妆</span>
                    </div>
                    <div class="nav-item" onclick="showPage('skinCheckPage')">
                        <span class="icon">🔬</span>
                        <span class="text">检测</span>
                    </div>
                    <div class="nav-item" onclick="showPage('userCenterPage')">
                        <span class="icon">👤</span>
                        <span class="text">我的</span>
                    </div>
                </div>
            </div>
            
            <!-- 用户中心 -->
            <div class="page user-center-page" id="userCenterPage">
                <div class="user-header">
                    <h2>用户中心</h2>
                    <div class="user-info">
                        <div class="user-avatar">👩</div>
                        <div>
                            <div class="user-name">美妆达人</div>
                            <div class="user-phone">138****8888</div>
                        </div>
                    </div>
                </div>
                <div class="user-menu">
                    <div class="menu-item" onclick="showPage('favoritesPage')">
                        <div class="left">
                            <span class="icon">❤️</span>
                            <span class="text">收藏列表</span>
                        </div>
                        <span class="arrow">›</span>
                    </div>
                    <div class="menu-item" onclick="showPage('likesPage')">
                        <div class="left">
                            <span class="icon">👍</span>
                            <span class="text">喜欢列表</span>
                        </div>
                        <span class="arrow">›</span>
                    </div>
                    <div class="menu-item" onclick="showPage('makeupRecordsPage')">
                        <div class="left">
                            <span class="icon">💄</span>
                            <span class="text">美妆记录</span>
                        </div>
                        <span class="arrow">›</span>
                    </div>
                    <div class="menu-item" onclick="showPage('settingsPage')">
                        <div class="left">
                            <span class="icon">⚙️</span>
                            <span class="text">设置</span>
                        </div>
                        <span class="arrow">›</span>
                    </div>
                </div>
                <!-- 底部导航 -->
                <div class="bottom-nav">
                    <div class="nav-item" onclick="showPage('homePage')">
                        <span class="icon">🏠</span>
                        <span class="text">首页</span>
                    </div>
                    <div class="nav-item" onclick="showPage('arMakeupPage')">
                        <span class="icon">💋</span>
                        <span class="text">美妆</span>
                    </div>
                    <div class="nav-item" onclick="showPage('skinCheckPage')">
                        <span class="icon">🔬</span>
                        <span class="text">检测</span>
                    </div>
                    <div class="nav-item active" onclick="showPage('userCenterPage')">
                        <span class="icon">👤</span>
                        <span class="text">我的</span>
                    </div>
                </div>
            </div>
            
            <!-- 收藏列表 -->
            <div class="page list-page" id="favoritesPage">
                <div class="list-header">
                    <div class="back-btn" onclick="showPage('userCenterPage')">←</div>
                    <h2>我的收藏</h2>
                    <div style="width: 40px;"></div>
                </div>
                <div class="page-content">
                    <div class="list-items">
                        <div class="list-item-card" onclick="showFavBuyModal('奢华丝绒口红 #正红色', 199)">
                            <div class="item-img">💄</div>
                            <h5>奢华丝绒口红</h5>
                            <div class="price">¥199</div>
                        </div>
                        <div class="list-item-card" onclick="showFavBuyModal('控油收缩毛孔精华', 258)">
                            <div class="item-img">🧴</div>
                            <h5>控油精华</h5>
                            <div class="price">¥258</div>
                        </div>
                        <div class="list-item-card" onclick="showFavBuyModal('水润唇釉', 168)">
                            <div class="item-img">💋</div>
                            <h5>水润唇釉</h5>
                            <div class="price">¥168</div>
                        </div>
                        <div class="list-item-card" onclick="showFavBuyModal('樱花限定礼盒', 399)">
                            <div class="item-img">🌸</div>
                            <h5>樱花限定礼盒</h5>
                            <div class="price">¥399</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 喜欢列表 -->
            <div class="page list-page" id="likesPage">
                <div class="list-header">
                    <div class="back-btn" onclick="showPage('userCenterPage')">←</div>
                    <h2>我喜欢的</h2>
                    <div style="width: 40px;"></div>
                </div>
                <div class="page-content">
                    <div class="list-items">
                        <div class="list-item-card" onclick="showFavBuyModal('水润唇釉', 168)">
                            <div class="item-img">💋</div>
                            <h5>水润唇釉</h5>
                            <div class="price">¥168</div>
                        </div>
                        <div class="list-item-card" onclick="showFavBuyModal('樱花限定礼盒', 399)">
                            <div class="item-img">🌸</div>
                            <h5>樱花限定礼盒</h5>
                            <div class="price">¥399</div>
                        </div>
                        <div class="list-item-card" onclick="showFavBuyModal('眼霜淡化黑眼圈', 189)">
                            <div class="item-img">👁️</div>
                            <h5>眼霜淡化黑眼圈</h5>
                            <div class="price">¥189</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 美妆记录 -->
            <div class="page list-page" id="makeupRecordsPage">
                <div class="list-header">
                    <div class="back-btn" onclick="showPage('userCenterPage')">←</div>
<h2>美妆记录 <span style="font-size:11px;color:#999;font-weight:normal;">(仅本地存储)</span></h2>
                    <div style="width: 40px;"></div>
                </div>
                <div class="page-content">
                    <div class="list-items">
                        <div class="list-item-card" onclick="goToArWithRecord('正红色唇妆', '唇彩')">
                            <div class="item-img" style="background: linear-gradient(135deg, #6C5CE7, #a29bfe);">💄</div>
                            <h5>正红色唇妆</h5>
                            <div class="sales">今天 14:30 · 唇彩</div>
                        </div>
                        <div class="list-item-card" onclick="goToArWithRecord('樱花腮红', '腮红')">
                            <div class="item-img" style="background: linear-gradient(135deg, #667eea, #764ba2);">🌸</div>
                            <h5>樱花腮红</h5>
                            <div class="sales">今天 14:20 · 腮红</div>
                        </div>
                        <div class="list-item-card" onclick="goToArWithRecord('大地色眼影', '眼影')">
                            <div class="item-img" style="background: linear-gradient(135deg, #f093fb, #f5576c);">👁️</div>
                            <h5>大地色眼影</h5>
                            <div class="sales">昨天 16:45 · 眼影</div>
                        </div>
                        <div class="list-item-card" onclick="goToArWithRecord('标准眉形', '眉形')">
                            <div class="item-img" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">👤</div>
                            <h5>标准眉形</h5>
                            <div class="sales">昨天 10:30 · 眉形</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 隐私政策 -->
            <div class="page webview-page" id="privacyPage">
                <div class="list-header">
<div class="back-btn" onclick="goBack()">←</div>
                    <h2>隐私政策</h2>
                    <div style="width: 40px;"></div>
                </div>
                <div class="webview-content">
                    <h3>隐私政策</h3>
                    <p>更新日期：2024年1月1日</p>
                    <p>欢迎您使用AI智能美妆镜服务！我们深知个人信息对您的重要性，并会尽全力保护您的个人信息安全可靠。本隐私政策旨在向您说明，在您使用我们的服务时，我们如何收集、使用、存储和保护您的个人信息。</p>
                    <h3>一、信息收集</h3>
                    <p>1. 设备信息：包括设备型号、操作系统版本、唯一设备标识符等；</p>
                    <p>2. 摄像头信息：用于AR美妆和皮肤检测功能；</p>
                    <p>3. 使用信息：帮助我们了解您对服务的使用情况，以便改进服务。</p>
                    <h3>二、信息使用</h3>
                    <p>我们收集的信息将用于提供、维护和改进我们的服务，保护我们的权利和利益，以及向您推送相关的产品和服务。</p>
                    <h3>三、信息保护</h3>
                    <p>我们采用行业标准的安全措施来保护您的个人信息，防止数据遭到未经授权的访问、使用或泄露。</p>
                </div>
            </div>
            
            <!-- 用户协议 -->
            <div class="page webview-page" id="termsPage">
                <div class="list-header">
                    <div class="back-btn" onclick="goBack()">←</div>
                    <h2>用户协议</h2>
                    <div style="width: 40px;"></div>
                </div>
                <div class="webview-content">
                    <h3>用户协议</h3>
                    <p>更新日期：2024年1月1日</p>
                    <p>请您在使用AI智能美妆镜服务前，仔细阅读并了解本协议的全部内容。一旦您开始使用本服务，即表示您已充分理解并同意接受本协议的全部内容。</p>
                    <h3>一、服务说明</h3>
                    <p>AI智能美妆镜是一个提供AR虚拟美妆和皮肤检测服务的平台。服务内容包括：虚拟试妆功能、皮肤检测分析、商品推荐等。</p>
                    <h3>二、用户行为规范</h3>
                    <p>您同意并承诺不会利用本服务从事任何违法活动，不发布任何违法、有害、攻击性的内容，尊重他人的合法权益。</p>
                    <h3>三、免责声明</h3>
                    <p>本服务中的商品信息和推荐仅供参考，实际效果因人而异。我们不对商品的质量、售后服务等承担法律责任。</p>
                </div>
            </div>
            
            <!-- 购买弹窗 -->
            <div class="modal" id="buyModal">
                <div class="modal-content">
                    <div class="product-img">💄</div>
                    <h4>奢华丝绒口红 #正红色</h4>
                    <div class="price">¥199</div>
                    <div class="qr-code">
                        <p>二维码区域<br>扫码购买</p>
                    </div>
                    <p style="font-size: 12px; color: #666; margin-bottom: 12px;">请使用微信/支付宝扫描二维码购买</p>
                    <button class="modal-close" onclick="closeBuyModal()">关闭</button>
                </div>
            </div>
            
            <!-- 收藏/喜欢列表购买弹窗 -->
            <div class="modal" id="favBuyModal">
                <div class="modal-content">
                    <div class="product-img">💄</div>
                    <h4 id="favBuyProductName">商品名称</h4>
                    <div class="price" id="favBuyProductPrice">¥0</div>
                    <div class="qr-code">
                        <p>二维码区域<br>扫码购买</p>
                    </div>
                    <p style="font-size: 12px; color: #666; margin-bottom: 12px;">请使用微信/支付宝扫描二维码购买</p>
                    <button class="modal-close" onclick="closeFavBuyModal()">关闭</button>
                </div>
            </div>
            
            <!-- 设置页面 -->
            <div class="page list-page settings-page" id="settingsPage">
                <div class="list-header">
                    <div class="back-btn" onclick="showPage('userCenterPage')">←</div>
                    <h2>设置</h2>
                    <div style="width: 40px;"></div>
                </div>
                <div class="page-content" style="padding: 20px;">
                    <div class="menu-item" onclick="showLogoutConfirm()">
                        <div class="left">
                            <span class="icon">🚪</span>
                            <span class="text">退出登录</span>
                        </div>
                        <span class="arrow">›</span>
                    </div>
                    <div class="settings-footer">© 2026 MiniMax</div>
                </div>
            </div>
            
            <!-- 待机页面 -->
            <div class="standby-page" id="standbyPage">
                <div class="standby-content">
                    <div class="logo">💄</div>
                    <h2>AI BEAUTY MIRROR</h2>
                </div>
                <div class="standby-tip">点击屏幕唤醒</div>
            </div>
        </div>
    </div>
    
    <script>
        // 页面历史记录
        let pageHistory = [];
        
        // 显示页面
        function showPage(pageId) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            // 显示目标页面
            document.getElementById(pageId).classList.add('active');
            // 记录历史
            pageHistory.push(pageId);
        }
        
        // 返回上一页
        function goBack() {
            if (pageHistory.length > 1) {
                pageHistory.pop();
                const prevPage = pageHistory[pageHistory.length - 1];
                document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
                document.getElementById(prevPage).classList.add('active');
            }
        }
        
        // 发送验证码
        function sendCode() {
            const phone = document.getElementById('phoneInput').value;
            if (!phone || phone.length !== 11) {
                showToast('请输入正确的手机号');
                return;
            }
            showToast('验证码已发送');
        }
        
        // 登录
        function login() {
            const phone = document.getElementById('phoneInput').value;
            const code = document.getElementById('codeInput').value;
            const agree = document.getElementById('agreeCheck').checked;
            
            if (!phone || phone.length !== 11) {
                showToast('请输入正确的手机号');
                return;
            }
            if (!code) {
                showToast('请输入验证码');
                return;
            }
            if (!agree) {
                showToast('请阅读并同意隐私政策和用户协议');
                return;
            }
            
            showToast('登录成功');
            pageHistory = ['homePage'];
            showPage('homePage');
        }
        
        // 美妆标签切换
        function switchTab(element) {
            document.querySelectorAll('.makeup-tab').forEach(tab => tab.classList.remove('active'));
            element.classList.add('active');
        }
        
        // 选择美妆
        function selectMakeup(element) {
            document.querySelectorAll('.makeup-item').forEach(item => item.classList.remove('selected'));
            element.classList.add('selected');
            showToast('已选择美妆');
        }
        
        // 切换收藏
        function toggleFavorite(element) {
            if (element.textContent.includes('已收藏')) {
                element.textContent = '❤️ 收藏';
                element.style.background = '#f3f0ff';
                element.style.color = '#6C5CE7';
                showToast('已取消收藏');
            } else {
                element.textContent = '✅ 已收藏';
                element.style.background = '#6C5CE7';
                element.style.color = 'white';
                showToast('已添加收藏');
            }
        }
        
        // 切换喜欢
        function toggleLike(element) {
            if (element.textContent.includes('已喜欢')) {
                element.textContent = '👍 喜欢';
                element.style.color = '#666';
                showToast('已取消喜欢');
            } else {
                element.textContent = '👍 已喜欢';
                element.style.color = '#6C5CE7';
                showToast('已添加喜欢');
            }
        }
        
        // 显示购买弹窗
        function showBuyModal() {
            document.getElementById('buyModal').classList.add('active');
        }
        
        // 关闭购买弹窗
        function closeBuyModal() {
            document.getElementById('buyModal').classList.remove('active');
        }
        
        // 显示收藏/喜欢列表购买弹窗
        function showFavBuyModal(name, price) {
            document.getElementById('favBuyProductName').textContent = name;
            document.getElementById('favBuyProductPrice').textContent = '¥' + price;
            document.getElementById('favBuyModal').classList.add('active');
        }
        
        // 关闭收藏/喜欢列表购买弹窗
        function closeFavBuyModal() {
            document.getElementById('favBuyModal').classList.remove('active');
        }
        
        // 拍摄并分析
        function captureAndAnalyze() {
            showToast('正在分析...');
            setTimeout(() => {
                pageHistory = ['homePage', 'reportPage'];
                showPage('reportPage');
            }, 1500);
        }
        
        // 显示登出确认
        function showLogoutConfirm() {
            if (confirm('确定要退出登录吗？')) {
                pageHistory = ['loginPage'];
                showPage('loginPage');
                showToast('已退出登录');
            }
        }
        
        // 跳转AR并带入记录
        function goToArWithRecord(name, category) {
            showPage('arMakeupPage');
            showToast('正在加载: ' + name);
        }
        
        // Toast提示
        function showToast(message) {
            const existingToast = document.querySelector('.toast');
            if (existingToast) existingToast.remove();
            
            const toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => toast.remove(), 2000);
        }
        
        // 隐藏启动页
        setTimeout(() => {
            document.getElementById('splashScreen').style.display = 'none';
            document.getElementById('loginPage').classList.add('active');
            pageHistory = ['loginPage'];
        }, 2000);
        
        // 点击唤醒
        document.getElementById('standbyPage').addEventListener('click', function() {
            this.classList.remove('active');
        });
    </script>
</body>
</html>