dao666wu
/
Rexi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家庭AI助手训练</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');

        :root {
            --bg-light: #FFF9F5;
            --warm-orange: #FFA07A;
            --soft-blue: #87CEEB;
            --light-gray: #F0F0F0;
            --text-dark: #333333;
            --text-light: #666666;
            --accent-green: #98D8C8;
            --accent-yellow: #FFD166;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Nunito', sans-serif;
        }

        body {
            background-color: var(--bg-light);
            color: var(--text-dark);
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .container {
            width: 100%;
            max-width: 900px;
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        /* 头部标题 */
        .header {
            text-align: center;
            margin-bottom: 10px;
        }

        .header h1 {
            font-size: 2.2rem;
            color: var(--warm-orange);
            margin-bottom: 8px;
            font-weight: 700;
        }

        .header p {
            color: var(--text-light);
            font-size: 1.1rem;
        }

        /* 成长面板 */
        .growth-panel {
            background-color: white;
            border-radius: 18px;
            padding: 25px;
            box-shadow: var(--shadow);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .growth-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 8px;
            /* 修改为纯色背景 */
            background: var(--warm-orange); 
        }

        .tree-container {
            width: 200px;
            height: 200px;
            margin: 0 auto 20px;
            position: relative;
        }

        .tree {
            width: 100%;
            height: 100%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 20 L120 60 L160 70 L130 100 L150 140 L100 120 L50 140 L70 100 L40 70 L80 60 Z" fill="%2398D8C8"/><rect x="90" y="140" width="20" height="40" fill="%23A0522D"/></svg>');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            animation: gentleBounce 4s infinite ease-in-out;
        }

        .level-container {
            margin-top: 15px;
        }

        .level {
            font-size: 1.2rem;
            color: var(--warm-orange);
            font-weight: 600;
        }

        .experience-bar {
            background-color: var(--light-gray);
            border-radius: 10px;
            height: 20px;
            margin-top: 10px;
            position: relative;
        }

        .experience-fill {
            background-color: var(--warm-orange);
            border-radius: 10px;
            height: 100%;
            width: 65%;
        }

        .tree-message {
            font-size: 1.2rem;
            margin-top: 15px;
            color: var(--warm-orange);
            font-weight: 600;
        }

        /* 功能区域 */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

        .feature-card {
            background-color: white;
            border-radius: 16px;
            padding: 20px;
            box-shadow: var(--shadow);
            transition: transform 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
        }

        .feature-card h2 {
            font-size: 1.3rem;
            margin-bottom: 15px;
            color: var(--warm-orange);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .feature-card h2 i {
            font-size: 1.4rem;
        }

        /* 任务卡片 */
        .task-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid var(--light-gray);
        }

        .task-item:last-child {
            border-bottom: none;
        }

        .task-checkbox {
            appearance: none;
            width: 20px;
            height: 20px;
            border: 2px solid var(--soft-blue);
            border-radius: 6px;
            margin-right: 12px;
            position: relative;
            cursor: pointer;
        }

        .task-checkbox:checked {
            background-color: var(--soft-blue);
        }

        .task-checkbox:checked::after {
            content: '✓';
            position: absolute;
            color: white;
            font-size: 12px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .task-label {
            flex: 1;
            font-size: 0.95rem;
        }

        .task-reward {
            font-size: 0.8rem;
            background-color: var(--accent-yellow);
            color: var(--text-dark);
            padding: 3px 8px;
            border-radius: 12px;
        }

        /* 情感互动区 */
        .mood-selector {
            display: flex;
            justify-content: space-around;
            margin-top: 15px;
        }

        .mood-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            opacity: 0.7;
            transition: all 0.3s;
        }

        .mood-option:hover,
        .mood-option.active {
            opacity: 1;
            transform: scale(1.1);
        }

        .mood-icon {
            width: 40px;
            height: 40px;
            background-color: var(--light-gray);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 5px;
        }

        .mood-label {
            font-size: 0.8rem;
        }

        /* 奖励展示 */
        .badges-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }

        .badge {
            width: 50px;
            height: 50px;
            background-color: var(--light-gray);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .badge.unlocked {
            background-color: var(--accent-yellow);
        }

        .badge i {
            font-size: 1.5rem;
        }

        /* 底部交互区 */
        .interaction-bar {
            background-color: white;
            border-radius: 16px;
            padding: 20px;
            box-shadow: var(--shadow);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .greeting-message {
            font-size: 1.1rem;
            color: var(--text-dark);
        }

        .greeting-message span {
            color: var(--warm-orange);
            font-weight: 600;
        }

        .mood-button {
            background-color: var(--soft-blue);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .mood-button:hover {
            background-color: var(--warm-orange);
        }

        /* 动画 */
        @keyframes gentleBounce {
            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .features-grid {
                grid-template-columns: 1fr;
            }

            .interaction-bar {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

<body>
    <div class="container">
        <!-- 头部标题 -->
        <div class="header">
            <h1>家庭AI助手训练</h1>
            <p>让我们一起培养您贴心的家庭助手</p>
        </div>

        <!-- 成长面板 -->
        <div class="growth-panel">
            <div class="tree-container">
                <div class="tree"></div>
            </div>
            <div class="level-container">
                <div class="level">等级: 3</div>
                <div class="experience-bar">
                    <div class="experience-fill"></div>
                </div>
            </div>
            <div class="tree-message">你的助手正在茁壮成长！</div>
        </div>

        <!-- 功能区域 -->
        <div class="features-grid">
            <!-- 训练任务区 -->
            <div class="feature-card">
                <h2><i class="fas fa-tasks"></i>今日训练任务</h2>
                <div class="task-list">
                    <div class="task-item">
                        <input type="checkbox" class="task-checkbox" id="task1" checked>
                        <label for="task1" class="task-label">教助手识别家庭成员声音</label>
                        <span class="task-reward">+5</span>
                    </div>
                    <div class="task-item">
                        <input type="checkbox" class="task-checkbox" id="task2">
                        <label for="task2" class="task-label">设置晚餐提醒</label>
                        <span class="task-reward">+3</span>
                    </div>
                    <div class="task-item">
                        <input type="checkbox" class="task-checkbox" id="task3">
                        <label for="task3" class="task-label">记录家庭日程</label>
                        <span class="task-reward">+4</span>
                    </div>
                    <div class="task-item">
                        <input type="checkbox" class="task-checkbox" id="task4">
                        <label for="task4" class="task-label">训练天气提醒功能</label>
                        <span class="task-reward">+2</span>
                    </div>
                </div>
            </div>

            <!-- 情感互动区 -->
            <div class="feature-card">
                <h2><i class="fas fa-heart"></i>情感互动</h2>
                <p style="margin-bottom: 15px; color: var(--text-light); font-size: 0.95rem;">
                    今天助手的心情如何？选择适合的表情来调整互动方式
                </p>
                <div class="mood-selector">
                    <div class="mood-option active">
                        <div class="mood-icon">
                            <i class="fas fa-smile"></i>
                        </div>
                        <span class="mood-label">开心</span>
                    </div>
                    <div class="mood-option">
                        <div class="mood-icon">
                            <i class="fas fa-meh"></i>
                        </div>
                        <span class="mood-label">平静</span>
                    </div>
                    <div class="mood-option">
                        <div class="mood-icon">
                            <i class="fas fa-frown"></i>
                        </div>
                        <span class="mood-label">低落</span>
                    </div>
                    <div class="mood-option">
                        <div class="mood-icon">
                            <i class="fas fa-angry"></i>
                        </div>
                        <span class="mood-label">生气</span>
                    </div>
                </div>
            </div>

            <!-- 奖励展示 -->
            <div class="feature-card">
                <h2><i class="fas fa-trophy"></i>家庭徽章</h2>
                <p style="margin-bottom: 15px; color: var(--text-light); font-size: 0.95rem;">
                    已收集 3/8 个家庭徽章
                </p>
                <div class="badges-container">
                    <div class="badge unlocked">
                        <i class="fas fa-home"></i>
                    </div>
                    <div class="badge unlocked">
                        <i class="fas fa-utensils"></i>
                    </div>
                    <div class="badge unlocked">
                        <i class="fas fa-bed"></i>
                    </div>
                    <div class="badge">
                        <i class="fas fa-bicycle"></i>
                    </div>
                    <div class="badge">
                        <i class="fas fa-book"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部交互区 -->
        <div class="interaction-bar">
            <div class="greeting-message">
                <span>早上好！</span> 今天的天气适合散步哦！
            </div>
            <button class="mood-button">
                <i class="fas fa-pencil-alt"></i>
                <span>记录心情</span>
            </button>
        </div>
    </div>

    <script>
        // 封装函数以简化 DOM 元素选择
        const $ = (selector) => document.querySelector(selector);
        const $$ = (selector) => document.querySelectorAll(selector);

        document.addEventListener('DOMContentLoaded', function () {
            // 任务完成交互
            const checkboxes = $$('.task-checkbox');
            checkboxes.forEach((checkbox) => {
                checkbox.addEventListener('change', function () {
                    if (this.checked) {
                        this.parentElement.style.opacity = '0.6';
                        this.parentElement.style.textDecoration = 'line-through';

                        // 模拟成长进度更新
                        const experienceFill = $('.experience-fill');
                        const currentWidth = parseInt(getComputedStyle(experienceFill).width.replace('px', ''));
                        const barWidth = parseInt(getComputedStyle($('.experience-bar')).width.replace('px', ''));
                        const progress = (currentWidth / barWidth) * 100;
                        const newProgress = Math.min(progress + 5, 100);
                        experienceFill.style.width = `${newProgress}%`;

                        const treeMessage = $('.tree-message');
                        if (newProgress === 100) {
                            treeMessage.textContent = "恭喜！您的助手已完全成长！";
                            $('.tree').style.animation = 'pulse 1.5s infinite';
                        } else {
                            treeMessage.textContent = "你的助手正在茁壮成长！";
                        }
                    }
                });
            });

            // 心情选择交互
            const moodOptions = $$('.mood-option');
            moodOptions.forEach((option) => {
                option.addEventListener('click', function () {
                    moodOptions.forEach((opt) => opt.classList.remove('active'));
                    this.classList.add('active');

                    // 根据心情更新问候语
                    const greeting = $('.greeting-message span');
                    const mood = this.querySelector('.mood-label').textContent;

                    if (mood === '开心') {
                        greeting.textContent = "太棒了！";
                        greeting.style.color = "#FFA07A";
                    } else if (mood === '平静') {
                        greeting.textContent = "今天过得如何？";
                        greeting.style.color = "#87CEEB";
                    } else if (mood === '低落') {
                        greeting.textContent = "抱抱你...";
                        greeting.style.color = "#999999";
                    } else if (mood === '生气') {
                        greeting.textContent = "冷静一下...";
                        greeting.style.color = "#FF6B6B";
                    }
                });
            });

            // 记录心情按钮
            const moodButton = $('.mood-button');
            moodButton.addEventListener('click', function () {
                const activeMood = $('.mood-option.active .mood-label').textContent;
                alert(`已记录您今天的心情为: ${activeMood}\n助手会据此调整互动方式哦！`);

                // 按钮反馈动画
                this.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    this.style.transform = 'scale(1)';
                }, 200);
            });

            // 模拟时间变化的问候语
            function updateGreeting() {
                const now = new Date();
                const hour = now.getHours();
                const greetingElement = $('.greeting-message span');

                if (hour < 12) {
                    greetingElement.textContent = "早上好！";
                } else if (hour < 18) {
                    greetingElement.textContent = "下午好！";
                } else {
                    greetingElement.textContent = "晚上好！";
                }
            }

            updateGreeting();
            setInterval(updateGreeting, 60000);
        });
    </script>
</body>

</html>