4 days ago · 58dcdf6ce5
--- a/F_win.html
+++ b/F_win.html
@@ -0,0 +1,447 @@
 
				+<!DOCTYPE html>

			
 
				+<html>

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>Interactive Pet Widget</title>

			
 
				+    <style>

			
 
				+        /* Main container styles */

			
 
				+        #vpet-container {

			
 
				+            position: fixed;

			
 
				+            bottom: 20px;

			
 
				+            left: 50%;

			
 
				+            transform: translateX(-50%);

			
 
				+            cursor: pointer;

			
 
				+            z-index: 9999;

			
 
				+            display: flex;

			
 
				+            flex-direction: column;

			
 
				+            align-items: center;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        /* Pet image container */

			
 
				+        #vpet {

			
 
				+            width: 180px;

			
 
				+            height: 180px;

			
 
				+            overflow: hidden;

			
 
				+            image-rendering: pixelated;

			
 
				+            position: relative;

			
 
				+        }

			
 
				+

			
 
				+        #vpet img {

			
 
				+            width: 100%;

			
 
				+            height: 100%;

			
 
				+            object-fit: contain;

			
 
				+            pointer-events: none;

			
 
				+        }

			
 
				+

			
 
				+        /* Corner trigger button */

			
 
				+        #corner-trigger {

			
 
				+            position: absolute;

			
 
				+            top: 5px;

			
 
				+            right: 5px;

			
 
				+            width: 20px;

			
 
				+            height: 20px;

			
 
				+            background-image: url('images/边角/vpeticon.png');

			
 
				+            background-size: contain;

			
 
				+            background-repeat: no-repeat;

			
 
				+            cursor: pointer;

			
 
				+            z-index: 10000;

			
 
				+            opacity: 0.7;

			
 
				+            transition: opacity 0.2s;

			
 
				+        }

			
 
				+

			
 
				+        #corner-trigger:hover {

			
 
				+            opacity: 1;

			
 
				+        }

			
 
				+

			
 
				+        /* System button */

			
 
				+        #system-btn {

			
 
				+            position: absolute;

			
 
				+            top: 5px;

			
 
				+            left: 5px;

			
 
				+            width: 20px;

			
 
				+            height: 20px;

			
 
				+            background-color: rgba(255,255,255,0.2);

			
 
				+            border-radius: 50%;

			
 
				+            display: flex;

			
 
				+            align-items: center;

			
 
				+            justify-content: center;

			
 
				+            color: white;

			
 
				+            font-size: 12px;

			
 
				+            cursor: pointer;

			
 
				+            z-index: 10000;

			
 
				+            transition: all 0.2s;

			
 
				+            border: none;

			
 
				+        }

			
 
				+

			
 
				+        #system-btn:hover {

			
 
				+            background-color: rgba(255,255,255,0.3);

			
 
				+            transform: scale(1.1);

			
 
				+        }

			
 
				+

			
 
				+        /* Settings panel */

			
 
				+        #settings-panel {

			
 
				+            display: none;

			
 
				+            background: rgba(50, 50, 50, 0.9);

			
 
				+            border-radius: 4px;

			
 
				+            padding: 1px 4px;

			
 
				+            margin-top: 4px;

			
 
				+            backdrop-filter: blur(4px);

			
 
				+            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);

			
 
				+            z-index: 10001;

			
 
				+            flex-direction: row;

			
 
				+            align-items: center;

			
 
				+            width: 33.33vw;

			
 
				+            max-width: 200px;

			
 
				+            height: calc((100vh / 16) / 3);

			
 
				+            min-height: 10px;

			
 
				+            justify-content: space-around;

			
 
				+            box-sizing: border-box;

			
 
				+        }

			
 
				+

			
 
				+        /* Button styles */

			
 
				+        .settings-btn {

			
 
				+            display: inline-flex;

			
 
				+            padding: 0 4px;

			
 
				+            background: none;

			
 
				+            border: none;

			
 
				+            color: #fff;

			
 
				+            cursor: pointer;

			
 
				+            transition: all 0.1s;

			
 
				+            position: relative;

			
 
				+            overflow: hidden;

			
 
				+            margin: 0 1px;

			
 
				+            text-align: center;

			
 
				+            border-radius: 2px;

			
 
				+            white-space: nowrap;

			
 
				+            font-size: 0.6em;

			
 
				+            min-width: 30px;

			
 
				+            height: calc((100% - 2px) * 5 / 4);

			
 
				+            align-items: center;

			
 
				+            justify-content: center;

			
 
				+            border-bottom: calc(((100% - 2px) * 5 / 4) / 5) solid transparent;

			
 
				+        }

			
 
				+

			
 
				+        .settings-btn:hover:not(.task-btn) {

			
 
				+            background: rgba(255, 255, 255, 0.05);

			
 
				+            border-bottom-color: rgba(255, 255, 255, 0.2);

			
 
				+        }

			
 
				+

			
 
				+        /* Ripple effect */

			
 
				+        .ripple {

			
 
				+            position: absolute;

			
 
				+            border-radius: 50%;

			
 
				+            background: rgba(255, 255, 255, 0.2);

			
 
				+            transform: scale(0);

			
 
				+            animation: ripple 0.4s linear;

			
 
				+            pointer-events: none;

			
 
				+        }

			
 
				+

			
 
				+        @keyframes ripple {

			
 
				+            to {

			
 
				+                transform: scale(2);

			
 
				+                opacity: 0;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        /* Task button styles */

			
 
				+        .task-btn {

			
 
				+            background: linear-gradient(45deg, #2ed573, #1e90ff);

			
 
				+            padding: 0 3px;

			
 
				+            font-size: 0.55em;

			
 
				+            border-bottom: calc(((100% - 2px) * 5 / 4) / 5) solid rgba(0, 0, 0, 0.15);

			
 
				+            display: flex;

			
 
				+            align-items: center;

			
 
				+            height: calc((100% - 2px) * 5 / 4);

			
 
				+        }

			
 
				+

			
 
				+        .task-btn:hover {

			
 
				+            transform: scale(1.01) !important;

			
 
				+            border-bottom-color: rgba(255, 255, 255, 0.3);

			
 
				+        }

			
 
				+

			
 
				+        /* Task counter */

			
 
				+        .task-counter {

			
 
				+            font-size: 0.4em;

			
 
				+            background: rgba(0,0,0,0.3);

			
 
				+            padding: 0 2px;

			
 
				+            border-radius: 4px;

			
 
				+            margin-left: 2px;

			
 
				+            line-height: normal;

			
 
				+            display: inline-flex;

			
 
				+            align-items: center;

			
 
				+            height: 66.67%;

			
 
				+            transform: translateY(2px);

			
 
				+        }

			
 
				+

			
 
				+        .task-badge {

			
 
				+            position: absolute;

			
 
				+            top: -2px;

			
 
				+            right: -2px;

			
 
				+            width: 6px;

			
 
				+            height: 6px;

			
 
				+            background: #ff4757;

			
 
				+            border-radius: 50%;

			
 
				+            animation: taskPulse 1.5s infinite;

			
 
				+            display: none;

			
 
				+            border: 1px solid rgba(50, 50, 50, 0.9);

			
 
				+        }

			
 
				+

			
 
				+        @keyframes taskPulse {

			
 
				+            0% { transform: scale(1); }

			
 
				+            50% { transform: scale(1.1); }

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

			
 
				+        }

			
 
				+    </style>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <div id="vpet-container">

			
 
				+        <div id="vpet">

			
 
				+            <img id="pet-sprite" src="images/待机/待机_001.png">

			
 
				+            <div id="corner-trigger"></div>

			
 
				+            <div id="system-btn">⚙</div>

			
 
				+        </div>

			
 
				+        <div id="settings-panel">

			
 
				+            <div class="task-badge"></div>

			
 
				+            <button class="settings-btn" id="scale-btn">🔄尺寸</button>

			
 
				+            <button id="assistant-btn" class="settings-btn">💡助手</button>

			
 
				+            <button class="settings-btn task-btn" id="task-btn">📝任务</button>

			
 
				+            <button class="settings-btn" id="settings-btn">⚙设置</button>

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+    <script>

			
 
				+        // Animation configuration

			
 
				+        const frames = Array.from({length: 13}, (_, i) => 

			
 
				+            `images/待机/待机_${String(i+1).padStart(3, '0')}.png`);

			
 
				+        const dragFrames = Array.from({length: 22}, (_, i) => 

			
 
				+            `images/提起/提起_${String(i+1).padStart(3, '0')}.png`);

			
 
				+        

			
 
				+        // System state

			
 
				+        let currentFrame = 0;

			
 
				+        let currentScale = 1.0;

			
 
				+        let isDragging = false;

			
 
				+        let dragFrameIndex = 0;

			
 
				+        const petImage = document.getElementById('pet-sprite');

			
 
				+        const container = document.getElementById('vpet-container');

			
 
				+        const cornerTrigger = document.getElementById('corner-trigger');

			
 
				+

			
 
				+        // Store original position

			
 
				+        let originalPosition = {

			
 
				+            bottom: '20px',

			
 
				+            left: '50%',

			
 
				+            transform: 'translateX(-50%)'

			
 
				+        };

			
 
				+

			
 
				+        // Auto-play animation

			
 
				+        let idleAnimation;

			
 
				+        function startIdleAnimation() {

			
 
				+            idleAnimation = setInterval(() => {

			
 
				+                if (!isDragging) {

			
 
				+                    petImage.src = frames[currentFrame];

			
 
				+                    currentFrame = (currentFrame + 1) % frames.length;

			
 
				+                }

			
 
				+            }, 100);

			
 
				+        }

			
 
				+        startIdleAnimation();

			
 
				+

			
 
				+        // Ripple effect function

			
 
				+        function createRipple(event) {

			
 
				+            const button = event.currentTarget;

			
 
				+            const circle = document.createElement("span");

			
 
				+            const diameter = Math.max(button.clientWidth, button.clientHeight);

			
 
				+            const radius = diameter / 2;

			
 
				+            

			
 
				+            circle.style.width = circle.style.height = `${diameter}px`;

			
 
				+            circle.style.left = `${event.clientX - button.getBoundingClientRect().left - radius}px`;

			
 
				+            circle.style.top = `${event.clientY - button.getBoundingClientRect().top - radius}px`;

			
 
				+            circle.classList.add("ripple");

			
 
				+            

			
 
				+            const ripple = button.getElementsByClassName("ripple")[0];

			
 
				+            if (ripple) {

			
 
				+                ripple.remove();

			
 
				+            }

			
 
				+            

			
 
				+            button.appendChild(circle);

			
 
				+        }

			
 
				+

			
 
				+        // Size toggle

			
 
				+        function toggleScale() {

			
 
				+            currentScale = currentScale === 1.0 ? 0.8 : 1.0;

			
 
				+            container.style.transform = `translateX(-50%) scale(${currentScale})`;

			
 
				+            originalPosition.transform = `translateX(-50%) scale(${currentScale})`;

			
 
				+        }

			
 
				+

			
 
				+        // Assistant button feedback

			
 
				+        function assistantHint() {

			
 
				+            const btn = document.getElementById('assistant-btn');

			
 
				+            btn.style.color = '#ffdd00';

			
 
				+            setTimeout(() => {

			
 
				+                btn.style.color = '#fff';

			
 
				+            }, 200);

			
 
				+        }

			
 
				+

			
 
				+        // System button function

			
 
				+        function systemHint() {

			
 
				+            const btn = document.getElementById('system-btn');

			
 
				+            btn.style.backgroundColor = 'rgba(100, 200, 255, 0.3)';

			
 
				+            setTimeout(() => {

			
 
				+                btn.style.backgroundColor = 'rgba(255,255,255,0.2)';

			
 
				+            }, 200);

			
 
				+        }

			
 
				+

			
 
				+        // Settings button function

			
 
				+        function settingsHint() {

			
 
				+            const btn = document.getElementById('settings-btn');

			
 
				+            btn.style.borderBottomColor = 'rgba(100, 200, 255, 0.4)';

			
 
				+            setTimeout(() => {

			
 
				+                btn.style.borderBottomColor = 'transparent';

			
 
				+            }, 200);

			
 
				+        }

			
 
				+

			
 
				+        // Daily task system

			
 
				+        let taskCount = 0;

			
 
				+        const taskElements = {

			
 
				+            badge: document.querySelector('.task-badge'),

			
 
				+            counter: document.querySelector('.task-counter')

			
 
				+        };

			
 
				+

			
 
				+        function showTaskReminder() {

			
 
				+            taskElements.badge.style.display = 'block';

			
 
				+            setTimeout(() => {

			
 
				+                taskElements.badge.style.display = 'none';

			
 
				+            }, 2000);

			
 
				+        }

			
 
				+

			
 
				+        function dailyTaskHint() {

			
 
				+            const btn = document.getElementById('task-btn');

			
 
				+            

			
 
				+            // Button animation

			
 
				+            btn.style.transform = 'scale(0.96)';

			
 
				+            setTimeout(() => {

			
 
				+                btn.style.transform = 'scale(1)';

			
 
				+            }, 150);

			
 
				+

			
 
				+            // Update progress

			
 
				+            taskCount = (taskCount + 1) % 4;

			
 
				+            

			
 
				+            // Completion effect

			
 
				+            if(taskCount === 3) {

			
 
				+                showTaskReminder();

			
 
				+                setTimeout(() => {

			
 
				+                    taskCount = 0;

			
 
				+                }, 1000);

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        // Initialize task reminder (every 30 seconds)

			
 
				+        setInterval(showTaskReminder, 30000);

			
 
				+

			
 
				+        // Corner trigger right-click control

			
 
				+        document.getElementById('corner-trigger').addEventListener('contextmenu', (e) => {

			
 
				+            e.preventDefault();

			
 
				+            const panel = document.getElementById('settings-panel');

			
 
				+            panel.style.display = panel.style.display === 'flex' ? 'none' : 'flex';

			
 
				+        });

			
 
				+

			
 
				+        // System button click

			
 
				+        document.getElementById('system-btn').addEventListener('click', function(e) {

			
 
				+            createRipple(e);

			
 
				+            systemHint();

			
 
				+        });

			
 
				+

			
 
				+        // Hide menu when clicking outside

			
 
				+        document.addEventListener('click', (e) => {

			
 
				+            if (!e.target.closest('#settings-panel') && 

			
 
				+                !e.target.closest('#corner-trigger') && 

			
 
				+                !e.target.closest('#system-btn')) {

			
 
				+                document.getElementById('settings-panel').style.display = 'none';

			
 
				+            }

			
 
				+        });

			
 
				+

			
 
				+        // Button event listeners

			
 
				+        document.getElementById('scale-btn').addEventListener('click', function(e) {

			
 
				+            createRipple(e);

			
 
				+            toggleScale();

			
 
				+        });

			
 
				+

			
 
				+        document.getElementById('assistant-btn').addEventListener('click', function(e) {

			
 
				+            createRipple(e);

			
 
				+            assistantHint();

			
 
				+        });

			
 
				+

			
 
				+        document.getElementById('task-btn').addEventListener('click', function(e) {

			
 
				+            createRipple(e);

			
 
				+            dailyTaskHint();

			
 
				+        });

			
 
				+

			
 
				+        document.getElementById('settings-btn').addEventListener('click', function(e) {

			
 
				+            createRipple(e);

			
 
				+            settingsHint();

			
 
				+        });

			
 
				+

			
 
				+        // Drag functionality

			
 
				+        let offsetX, offsetY;

			
 
				+        let longPressTimer;

			
 
				+        let dragAnimation;

			
 
				+        const LONG_PRESS_DELAY = 300;

			
 
				+

			
 
				+        container.addEventListener('mousedown', (e) => {

			
 
				+            // Prevent text selection during drag

			
 
				+            e.preventDefault();

			
 
				+            

			
 
				+            longPressTimer = setTimeout(() => {

			
 
				+                isDragging = true;

			
 
				+                clearInterval(idleAnimation);

			
 
				+                const containerRect = container.getBoundingClientRect();

			
 
				+                

			
 
				+                // Calculate offset to position cursor at 1/4 from top and 1/2 from left

			
 
				+                offsetX = e.clientX - containerRect.left - containerRect.width / 2;

			
 
				+                offsetY = e.clientY - containerRect.top - containerRect.height / 4;

			
 
				+                

			
 
				+                // Adjust the container position

			
 
				+                container.style.left = (e.clientX - offsetX) + 'px';

			
 
				+                container.style.top = (e.clientY - offsetY) + 'px';

			
 
				+                container.style.bottom = 'auto';

			
 
				+                container.style.transform = `scale(${currentScale})`;

			
 
				+                container.style.cursor = 'grabbing';

			
 
				+                

			
 
				+                dragFrameIndex = 0;

			
 
				+                dragAnimation = setInterval(() => {

			
 
				+                    petImage.src = dragFrames[dragFrameIndex];

			
 
				+                    dragFrameIndex = (dragFrameIndex + 1) % dragFrames.length;

			
 
				+                }, 100);

			
 
				+                

			
 
				+                document.addEventListener('mousemove', drag);

			
 
				+            }, LONG_PRESS_DELAY);

			
 
				+        });

			
 
				+

			
 
				+        document.addEventListener('mouseup', () => {

			
 
				+            clearTimeout(longPressTimer);

			
 
				+            if (isDragging) {

			
 
				+                isDragging = false;

			
 
				+                clearInterval(dragAnimation);

			
 
				+                startIdleAnimation();

			
 
				+                document.removeEventListener('mousemove', drag);

			
 
				+                container.style.cursor = 'pointer';

			
 
				+            }

			
 
				+        });

			
 
				+

			
 
				+        function drag(e) {

			
 
				+            if (isDragging) {

			
 
				+                e.preventDefault();

			
 
				+                container.style.left = (e.clientX - offsetX) + 'px';

			
 
				+                container.style.top = (e.clientY - offsetY) + 'px';

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        // Reset to original position function (if needed)

			
 
				+        function resetPosition() {

			
 
				+            container.style.bottom = originalPosition.bottom;

			
 
				+            container.style.left = originalPosition.left;

			
 
				+            container.style.top = 'auto';

			
 
				+            container.style.transform = originalPosition.transform;

			
 
				+        }

			
 
				+    </script>

			
 
				+</body>

			
 
				+</html>
			
--- a/home.html
+++ b/home.html
@@ -0,0 +1,581 @@
 
				+<!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>    
			
--- a/images/待机/待机_001.png
+++ b/images/待机/待机_001.png
--- a/images/待机/待机_002.png
+++ b/images/待机/待机_002.png
--- a/images/待机/待机_003.png
+++ b/images/待机/待机_003.png
--- a/images/待机/待机_004.png
+++ b/images/待机/待机_004.png
--- a/images/待机/待机_005.png
+++ b/images/待机/待机_005.png
--- a/images/待机/待机_006.png
+++ b/images/待机/待机_006.png
--- a/images/待机/待机_007.png
+++ b/images/待机/待机_007.png
--- a/images/待机/待机_008.png
+++ b/images/待机/待机_008.png
--- a/images/待机/待机_009.png
+++ b/images/待机/待机_009.png
--- a/images/待机/待机_010.png
+++ b/images/待机/待机_010.png
--- a/images/待机/待机_011.png
+++ b/images/待机/待机_011.png
--- a/images/待机/待机_012.png
+++ b/images/待机/待机_012.png
--- a/images/待机/待机_013.png
+++ b/images/待机/待机_013.png
--- a/images/提起/提起_001.png
+++ b/images/提起/提起_001.png
--- a/images/提起/提起_002.png
+++ b/images/提起/提起_002.png
--- a/images/提起/提起_003.png
+++ b/images/提起/提起_003.png
--- a/images/提起/提起_004.png
+++ b/images/提起/提起_004.png
--- a/images/提起/提起_005.png
+++ b/images/提起/提起_005.png
--- a/images/提起/提起_006.png
+++ b/images/提起/提起_006.png
--- a/images/提起/提起_007.png
+++ b/images/提起/提起_007.png
--- a/images/提起/提起_008.png
+++ b/images/提起/提起_008.png
--- a/images/提起/提起_009.png
+++ b/images/提起/提起_009.png
--- a/images/提起/提起_010.png
+++ b/images/提起/提起_010.png
--- a/images/提起/提起_011.png
+++ b/images/提起/提起_011.png
--- a/images/提起/提起_012.png
+++ b/images/提起/提起_012.png
--- a/images/提起/提起_013.png
+++ b/images/提起/提起_013.png
--- a/images/提起/提起_014.png
+++ b/images/提起/提起_014.png
--- a/images/提起/提起_015.png
+++ b/images/提起/提起_015.png
--- a/images/提起/提起_016.png
+++ b/images/提起/提起_016.png
--- a/images/提起/提起_017.png
+++ b/images/提起/提起_017.png
--- a/images/提起/提起_018.png
+++ b/images/提起/提起_018.png
--- a/images/提起/提起_019.png
+++ b/images/提起/提起_019.png
--- a/images/提起/提起_020.png
+++ b/images/提起/提起_020.png
--- a/images/提起/提起_021.png
+++ b/images/提起/提起_021.png
--- a/images/提起/提起_022.png
+++ b/images/提起/提起_022.png
--- a/images/边角/vpeticon.png
+++ b/images/边角/vpeticon.png
--- a/main.html
+++ b/main.html
@@ -0,0 +1,599 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="zh-CN">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

			
 
				+    <title>NOVA AI 中枢</title>

			
 
				+    <style>

			
 
				+        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Roboto:wght@400;500&display=swap');

			
 
				+        

			
 
				+        :root {

			
 
				+            --bg-dark: #0A0F1E;

			
 
				+            --neon-blue: #02A9F7;

			
 
				+            --neon-light: #89D6FB;

			
 
				+            --metal-gray: #525F7F;

			
 
				+            --electric-purple: #8A2BE2;

			
 
				+            --glass-white: rgba(255, 255, 255, 0.15);

			
 
				+        }

			
 
				+        

			
 
				+        * {

			
 
				+            margin: 0;

			
 
				+            padding: 0;

			
 
				+            box-sizing: border-box;

			
 
				+        }

			
 
				+        

			
 
				+        body {

			
 
				+            background-color: var(--bg-dark);

			
 
				+            color: white;

			
 
				+            font-family: 'Roboto', sans-serif;

			
 
				+            height: 100vh;

			
 
				+            overflow: hidden;

			
 
				+            position: relative;

			
 
				+            display: flex;

			
 
				+            flex-direction: column;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+        

			
 
				+        /* 顶部状态栏 */

			
 
				+        .status-bar {

			
 
				+            display: flex;

			
 
				+            justify-content: space-between;

			
 
				+            align-items: center;

			
 
				+            padding: 12px 24px;

			
 
				+            background: linear-gradient(to bottom, rgba(10, 15, 30, 0.9), rgba(10, 15, 30, 0.7));

			
 
				+            backdrop-filter: blur(5px);

			
 
				+            border-bottom: 1px solid var(--metal-gray);

			
 
				+            z-index: 10;

			
 
				+        }

			
 
				+        

			
 
				+        .status-icons {

			
 
				+            display: flex;

			
 
				+            gap: 16px;

			
 
				+            align-items: center;

			
 
				+        }

			
 
				+        

			
 
				+        .status-icon {

			
 
				+            width: 20px;

			
 
				+            height: 20px;

			
 
				+            background-color: var(--neon-blue);

			
 
				+            border-radius: 50%;

			
 
				+            position: relative;

			
 
				+        }

			
 
				+        

			
 
				+        .status-icon::after {

			
 
				+            content: '';

			
 
				+            position: absolute;

			
 
				+            top: -2px;

			
 
				+            left: -2px;

			
 
				+            right: -2px;

			
 
				+            bottom: -2px;

			
 
				+            border-radius: 50%;

			
 
				+            border: 1px solid var(--neon-light);

			
 
				+            animation: pulse 2s infinite;

			
 
				+        }

			
 
				+        

			
 
				+        .time {

			
 
				+            font-family: 'Montserrat', sans-serif;

			
 
				+            font-weight: bold;

			
 
				+            letter-spacing: 1px;

			
 
				+        }

			
 
				+        

			
 
				+        .user-avatar {

			
 
				+            width: 32px;

			
 
				+            height: 32px;

			
 
				+            border-radius: 50%;

			
 
				+            background: linear-gradient(135deg, var(--electric-purple), var(--neon-blue));

			
 
				+            display: flex;

			
 
				+            align-items: center;

			
 
				+            justify-content: center;

			
 
				+            position: relative;

			
 
				+            overflow: hidden;

			
 
				+        }

			
 
				+        

			
 
				+        .user-avatar::before {

			
 
				+            content: '';

			
 
				+            position: absolute;

			
 
				+            bottom: 0;

			
 
				+            left: 0;

			
 
				+            right: 0;

			
 
				+            height: 3px;

			
 
				+            background: var(--neon-blue);

			
 
				+            animation: loading 8s linear infinite;

			
 
				+        }

			
 
				+        

			
 
				+        /* 中央AI核心区 */

			
 
				+        .ai-core {

			
 
				+            flex: 1;

			
 
				+            display: flex;

			
 
				+            flex-direction: column;

			
 
				+            align-items: center;

			
 
				+            justify-content: center;

			
 
				+            position: relative;

			
 
				+            padding: 20px;

			
 
				+        }

			
 
				+        

			
 
				+        .energy-ball-container {

			
 
				+            position: relative;

			
 
				+            width: 200px;

			
 
				+            height: 200px;

			
 
				+            margin-bottom: 30px;

			
 
				+        }

			
 
				+        

			
 
				+        .energy-ball {

			
 
				+            width: 100%;

			
 
				+            height: 100%;

			
 
				+            border-radius: 50%;

			
 
				+            background: radial-gradient(circle at 30% 30%, var(--neon-blue), transparent 70%);

			
 
				+            box-shadow: 0 0 30px var(--neon-blue), 

			
 
				+                        inset 0 0 20px rgba(2, 169, 247, 0.5);

			
 
				+            position: relative;

			
 
				+            animation: float 6s ease-in-out infinite;

			
 
				+        }

			
 
				+        

			
 
				+        .energy-ball::before {

			
 
				+            content: '';

			
 
				+            position: absolute;

			
 
				+            top: -10px;

			
 
				+            left: -10px;

			
 
				+            right: -10px;

			
 
				+            bottom: -10px;

			
 
				+            border-radius: 50%;

			
 
				+            background: linear-gradient(45deg, var(--neon-blue), var(--electric-purple), var(--neon-blue));

			
 
				+            z-index: -1;

			
 
				+            opacity: 0.7;

			
 
				+            filter: blur(20px);

			
 
				+            animation: rotate 20s linear infinite;

			
 
				+        }

			
 
				+        

			
 
				+        .particles {

			
 
				+            position: absolute;

			
 
				+            top: 0;

			
 
				+            left: 0;

			
 
				+            width: 100%;

			
 
				+            height: 100%;

			
 
				+            border-radius: 50%;

			
 
				+            overflow: hidden;

			
 
				+        }

			
 
				+        

			
 
				+        .particle {

			
 
				+            position: absolute;

			
 
				+            background-color: var(--neon-light);

			
 
				+            border-radius: 50%;

			
 
				+            opacity: 0.7;

			
 
				+            animation: particle-float 4s infinite ease-in-out;

			
 
				+        }

			
 
				+        

			
 
				+        .greeting {

			
 
				+            text-align: center;

			
 
				+            margin-top: 20px;

			
 
				+        }

			
 
				+        

			
 
				+        .greeting h2 {

			
 
				+            font-family: 'Montserrat', sans-serif;

			
 
				+            font-size: 24px;

			
 
				+            margin-bottom: 10px;

			
 
				+            background: linear-gradient(to right, var(--neon-blue), var(--neon-light));

			
 
				+            -webkit-background-clip: text;

			
 
				+            -webkit-text-fill-color: transparent;

			
 
				+            animation: text-glow 2s infinite alternate;

			
 
				+        }

			
 
				+        

			
 
				+        .voice-wave {

			
 
				+            display: flex;

			
 
				+            justify-content: center;

			
 
				+            gap: 4px;

			
 
				+            height: 30px;

			
 
				+            margin-top: 15px;

			
 
				+        }

			
 
				+        

			
 
				+        .wave-bar {

			
 
				+            width: 4px;

			
 
				+            height: 10px;

			
 
				+            background-color: var(--neon-blue);

			
 
				+            border-radius: 2px;

			
 
				+            animation: wave 1.2s infinite ease-in-out;

			
 
				+        }

			
 
				+        

			
 
				+        /* 底部快捷区 - 修改为固定定位并向上移动 */

			
 
				+        .quick-access {

			
 
				+            position: fixed;

			
 
				+            bottom: 20px; /* 控制离底部距离 */

			
 
				+            left: 0;

			
 
				+            right: 0;

			
 
				+            display: flex;

			
 
				+            justify-content: center;

			
 
				+            gap: 30px;

			
 
				+            padding: 15px 20px;

			
 
				+            background: rgba(10, 15, 30, 0.7);

			
 
				+            backdrop-filter: blur(10px);

			
 
				+            border-top: 1px solid var(--metal-gray);

			
 
				+            z-index: 10;

			
 
				+        }

			
 
				+        

			
 
				+        .app-icon {

			
 
				+            width: 50px;

			
 
				+            height: 50px;

			
 
				+            border-radius: 12px;

			
 
				+            background-color: var(--glass-white);

			
 
				+            display: flex;

			
 
				+            align-items: center;

			
 
				+            justify-content: center;

			
 
				+            cursor: move;

			
 
				+            transition: all 0.3s ease;

			
 
				+            position: relative;

			
 
				+        }

			
 
				+        

			
 
				+        .app-icon:hover {

			
 
				+            transform: translateY(-5px);

			
 
				+            background-color: rgba(2, 169, 247, 0.2);

			
 
				+            box-shadow: 0 5px 15px rgba(2, 169, 247, 0.3);

			
 
				+        }

			
 
				+        

			
 
				+        .app-icon::after {

			
 
				+            content: attr(data-app);

			
 
				+            position: absolute;

			
 
				+            bottom: -25px;

			
 
				+            left: 50%;

			
 
				+            transform: translateX(-50%);

			
 
				+            font-size: 12px;

			
 
				+            opacity: 0;

			
 
				+            transition: opacity 0.3s;

			
 
				+            white-space: nowrap;

			
 
				+        }

			
 
				+        

			
 
				+        .app-icon:hover::after {

			
 
				+            opacity: 1;

			
 
				+        }

			
 
				+        

			
 
				+        .app-icon i {

			
 
				+            font-size: 24px;

			
 
				+            background: linear-gradient(to bottom, var(--neon-light), white);

			
 
				+            -webkit-background-clip: text;

			
 
				+            -webkit-text-fill-color: transparent;

			
 
				+        }

			
 
				+        

			
 
				+        /* 右侧语音输入区 - 修改位置向上移动 */

			
 
				+        .voice-input {

			
 
				+            position: fixed;

			
 
				+            right: 30px;

			
 
				+            bottom: 150px; /* 调整这个值控制离底部距离 */

			
 
				+            display: flex;

			
 
				+            flex-direction: column;

			
 
				+            align-items: flex-end;

			
 
				+            gap: 10px;

			
 
				+            z-index: 10;

			
 
				+        }

			
 
				+        

			
 
				+        .voice-btn {

			
 
				+            width: 60px;

			
 
				+            height: 60px;

			
 
				+            border-radius: 50%;

			
 
				+            background: linear-gradient(135deg, var(--neon-blue), var(--electric-purple));

			
 
				+            display: flex;

			
 
				+            align-items: center;

			
 
				+            justify-content: center;

			
 
				+            cursor: pointer;

			
 
				+            box-shadow: 0 5px 25px rgba(2, 169, 247, 0.5);

			
 
				+            transition: all 0.3s;

			
 
				+            position: relative;

			
 
				+        }

			
 
				+        

			
 
				+        .voice-btn:hover {

			
 
				+            transform: scale(1.1);

			
 
				+            box-shadow: 0 8px 30px rgba(2, 169, 247, 0.7);

			
 
				+        }

			
 
				+        

			
 
				+        .voice-btn::before {

			
 
				+            content: '';

			
 
				+            position: absolute;

			
 
				+            top: -5px;

			
 
				+            left: -5px;

			
 
				+            right: -5px;

			
 
				+            bottom: -5px;

			
 
				+            border-radius: 50%;

			
 
				+            border: 2px solid var(--neon-blue);

			
 
				+            animation: ripple 2s infinite;

			
 
				+            opacity: 0;

			
 
				+        }

			
 
				+        

			
 
				+        .voice-btn.active::before {

			
 
				+            animation: ripple-active 1s infinite;

			
 
				+        }

			
 
				+        

			
 
				+        .voice-btn i {

			
 
				+            font-size: 24px;

			
 
				+            color: white;

			
 
				+        }

			
 
				+        

			
 
				+        .history-bubble {

			
 
				+            background: var(--glass-white);

			
 
				+            backdrop-filter: blur(10px);

			
 
				+            padding: 10px 15px;

			
 
				+            border-radius: 20px;

			
 
				+            max-width: 200px;

			
 
				+            margin-bottom: 10px;

			
 
				+            opacity: 0;

			
 
				+            transform: translateY(10px);

			
 
				+            transition: all 0.3s;

			
 
				+            font-size: 14px;

			
 
				+            border: 1px solid var(--metal-gray);

			
 
				+        }

			
 
				+        

			
 
				+        .history-bubble.show {

			
 
				+            opacity: 1;

			
 
				+            transform: translateY(0);

			
 
				+        }

			
 
				+        

			
 
				+        /* 动画 */

			
 
				+        @keyframes float {

			
 
				+            0%, 100% { transform: translateY(0) rotate(0deg); }

			
 
				+            50% { transform: translateY(-20px) rotate(2deg); }

			
 
				+        }

			
 
				+        

			
 
				+        @keyframes rotate {

			
 
				+            0% { transform: rotate(0deg); }

			
 
				+            100% { transform: rotate(360deg); }

			
 
				+        }

			
 
				+        

			
 
				+        @keyframes particle-float {

			
 
				+            0%, 100% { transform: translate(0, 0); }

			
 
				+            25% { transform: translate(5px, 5px); }

			
 
				+            50% { transform: translate(-5px, 5px); }

			
 
				+            75% { transform: translate(-5px, -5px); }

			
 
				+        }

			
 
				+        

			
 
				+        @keyframes pulse {

			
 
				+            0% { opacity: 0.5; transform: scale(1); }

			
 
				+            50% { opacity: 1; transform: scale(1.1); }

			
 
				+            100% { opacity: 0.5; transform: scale(1); }

			
 
				+        }

			
 
				+        

			
 
				+        @keyframes loading {

			
 
				+            0% { width: 0; }

			
 
				+            100% { width: 100%; }

			
 
				+        }

			
 
				+        

			
 
				+        @keyframes wave {

			
 
				+            0%, 100% { height: 10px; }

			
 
				+            50% { height: 25px; }

			
 
				+        }

			
 
				+        

			
 
				+        @keyframes text-glow {

			
 
				+            0% { text-shadow: 0 0 5px var(--neon-blue); }

			
 
				+            100% { text-shadow: 0 0 15px var(--neon-blue); }

			
 
				+        }

			
 
				+        

			
 
				+        @keyframes ripple {

			
 
				+            0% { transform: scale(1); opacity: 1; }

			
 
				+            100% { transform: scale(1.5); opacity: 0; }

			
 
				+        }

			
 
				+        

			
 
				+        @keyframes ripple-active {

			
 
				+            0% { transform: scale(1); opacity: 0.7; }

			
 
				+            100% { transform: scale(1.8); opacity: 0; }

			
 
				+        }

			
 
				+        

			
 
				+        /* 响应式调整 */

			
 
				+        @media (max-width: 768px) {

			
 
				+            .quick-access {

			
 
				+                gap: 15px;

			
 
				+                padding: 10px;

			
 
				+            }

			
 
				+            

			
 
				+            .app-icon {

			
 
				+                width: 40px;

			
 
				+                height: 40px;

			
 
				+            }

			
 
				+            

			
 
				+            .voice-input {

			
 
				+                right: 15px;

			
 
				+                bottom: 120px;

			
 
				+            }

			
 
				+            

			
 
				+            .voice-btn {

			
 
				+                width: 50px;

			
 
				+                height: 50px;

			
 
				+            }

			
 
				+        }

			
 
				+    </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="status-bar">

			
 
				+        <div class="status-icons">

			
 
				+            <div class="status-icon"></div>

			
 
				+            <div class="status-icon"></div>

			
 
				+            <div class="status-icon"></div>

			
 
				+        </div>

			
 
				+        <div class="time">18:24</div>

			
 
				+        <div class="user-avatar">

			
 
				+            <i class="fas fa-user"></i>

			
 
				+        </div>

			
 
				+    </div>

			
 
				+    

			
 
				+    <!-- 中央AI核心区 -->

			
 
				+    <div class="ai-core">

			
 
				+        <div class="energy-ball-container">

			
 
				+            <div class="energy-ball">

			
 
				+                <div class="particles" id="particles"></div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+        <div class="greeting">

			
 
				+            <h2>HELLO, I'M NOVA</h2>

			
 
				+            <div class="voice-wave">

			
 
				+                <div class="wave-bar" style="animation-delay: 0s"></div>

			
 
				+                <div class="wave-bar" style="animation-delay: 0.2s"></div>

			
 
				+                <div class="wave-bar" style="animation-delay: 0.4s"></div>

			
 
				+                <div class="wave-bar" style="animation-delay: 0.6s"></div>

			
 
				+                <div class="wave-bar" style="animation-delay: 0.8s"></div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+    </div>

			
 
				+    

			
 
				+    <!-- 底部快捷区 -->

			
 
				+    <div class="quick-access">

			
 
				+        <div class="app-icon" data-app="微信" draggable="true">

			
 
				+            <i class="fab fa-weixin"></i>

			
 
				+        </div>

			
 
				+        <div class="app-icon" data-app="QQ" draggable="true">

			
 
				+            <i class="fab fa-qq"></i>

			
 
				+        </div>

			
 
				+        <div class="app-icon" data-app="浏览器" draggable="true">

			
 
				+            <i class="fas fa-globe"></i>

			
 
				+        </div>

			
 
				+        <div class="app-icon" data-app="系统管理" draggable="true">

			
 
				+            <i class="fas fa-cog"></i>

			
 
				+        </div>

			
 
				+    </div>

			
 
				+    

			
 
				+    <!-- 右侧语音输入区 -->

			
 
				+    <div class="voice-input">

			
 
				+        <div class="history-bubble">上次查询: 今天的天气</div>

			
 
				+        <div class="voice-btn">

			
 
				+            <i class="fas fa-microphone"></i>

			
 
				+        </div>

			
 
				+    </div>

			
 
				+    

			
 
				+    <script>

			
 
				+        // 创建粒子效果

			
 
				+        function createParticles() {

			
 
				+            const container = document.getElementById('particles');

			
 
				+            const particleCount = 30;

			
 
				+            

			
 
				+            for (let i = 0; i < particleCount; i++) {

			
 
				+                const particle = document.createElement('div');

			
 
				+                particle.classList.add('particle');

			
 
				+                

			
 
				+                // 随机大小和位置

			
 
				+                const size = Math.random() * 4 + 2;

			
 
				+                const posX = Math.random() * 100;

			
 
				+                const posY = Math.random() * 100;

			
 
				+                const delay = Math.random() * 4;

			
 
				+                

			
 
				+                particle.style.width = `${size}px`;

			
 
				+                particle.style.height = `${size}px`;

			
 
				+                particle.style.left = `${posX}%`;

			
 
				+                particle.style.top = `${posY}%`;

			
 
				+                particle.style.animationDelay = `${delay}s`;

			
 
				+                

			
 
				+                container.appendChild(particle);

			
 
				+            }

			
 
				+        }

			
 
				+        

			
 
				+        // 语音按钮交互

			
 
				+        function setupVoiceButton() {

			
 
				+            const voiceBtn = document.querySelector('.voice-btn');

			
 
				+            const historyBubble = document.querySelector('.history-bubble');

			
 
				+            const waveBars = document.querySelectorAll('.wave-bar');

			
 
				+            

			
 
				+            voiceBtn.addEventListener('click', function() {

			
 
				+                this.classList.toggle('active');

			
 
				+                

			
 
				+                if (this.classList.contains('active')) {

			
 
				+                    // 模拟语音激活状态

			
 
				+                    waveBars.forEach(bar => {

			
 
				+                        bar.style.animationDuration = '0.8s';

			
 
				+                    });

			
 
				+                    

			
 
				+                    setTimeout(() => {

			
 
				+                        historyBubble.classList.add('show');

			
 
				+                        historyBubble.textContent = '正在聆听...';

			
 
				+                    }, 300);

			
 
				+                } else {

			
 
				+                    // 模拟语音关闭状态

			
 
				+                    waveBars.forEach(bar => {

			
 
				+                        bar.style.animationDuration = '1.2s';

			
 
				+                    });

			
 
				+                    

			
 
				+                    setTimeout(() => {

			
 
				+                        historyBubble.textContent = '已识别: 打开天气预报';

			
 
				+                        setTimeout(() => {

			
 
				+                            historyBubble.classList.remove('show');

			
 
				+                        }, 2000);

			
 
				+                    }, 500);

			
 
				+                }

			
 
				+            });

			
 
				+        }

			
 
				+        

			
 
				+        // 拖拽排序功能

			
 
				+        function setupDragAndDrop() {

			
 
				+            const quickAccess = document.querySelector('.quick-access');

			
 
				+            const appIcons = document.querySelectorAll('.app-icon');

			
 
				+            let draggedItem = null;

			
 
				+            

			
 
				+            appIcons.forEach(icon => {

			
 
				+                icon.addEventListener('dragstart', function() {

			
 
				+                    draggedItem = this;

			
 
				+                    setTimeout(() => {

			
 
				+                        this.style.opacity = '0.4';

			
 
				+                    }, 0);

			
 
				+                });

			
 
				+                

			
 
				+                icon.addEventListener('dragend', function() {

			
 
				+                    setTimeout(() => {

			
 
				+                        this.style.opacity = '1';

			
 
				+                        draggedItem = null;

			
 
				+                    }, 0);

			
 
				+                });

			
 
				+                

			
 
				+                icon.addEventListener('dragover', function(e) {

			
 
				+                    e.preventDefault();

			
 
				+                });

			
 
				+                

			
 
				+                icon.addEventListener('dragenter', function(e) {

			
 
				+                    e.preventDefault();

			
 
				+                    this.style.backgroundColor = 'rgba(2, 169, 247, 0.3)';

			
 
				+                });

			
 
				+                

			
 
				+                icon.addEventListener('dragleave', function() {

			
 
				+                    this.style.backgroundColor = 'var(--glass-white)';

			
 
				+                });

			
 
				+                

			
 
				+                icon.addEventListener('drop', function() {

			
 
				+                    this.style.backgroundColor = 'var(--glass-white)';

			
 
				+                    if (draggedItem !== this) {

			
 
				+                        quickAccess.insertBefore(draggedItem, this.nextSibling || this);

			
 
				+                    }

			
 
				+                });

			
 
				+            });

			
 
				+        }

			
 
				+        

			
 
				+        // 更新时间

			
 
				+        function updateTime() {

			
 
				+            const timeElement = document.querySelector('.time');

			
 
				+            const now = new Date();

			
 
				+            const hours = now.getHours().toString().padStart(2, '0');

			
 
				+            const minutes = now.getMinutes().toString().padStart(2, '0');

			
 
				+            timeElement.textContent = `${hours}:${minutes}`;

			
 
				+        }

			
 
				+        

			
 
				+        // 初始化

			
 
				+        document.addEventListener('DOMContentLoaded', function() {

			
 
				+            createParticles();

			
 
				+            setupVoiceButton();

			
 
				+            setupDragAndDrop();

			
 
				+            updateTime();

			
 
				+            setInterval(updateTime, 60000);

			
 
				+            

			
 
				+            // 3D球体悬停效果

			
 
				+            const energyBall = document.querySelector('.energy-ball');

			
 
				+            energyBall.addEventListener('mousemove', (e) => {

			
 
				+                const rect = energyBall.getBoundingClientRect();

			
 
				+                const x = e.clientX - rect.left;

			
 
				+                const y = e.clientY - rect.top;

			
 
				+                const centerX = rect.width / 2;

			
 
				+                const centerY = rect.height / 2;

			
 
				+                const angleX = (y - centerY) / 20;

			
 
				+                const angleY = (centerX - x) / 20;

			
 
				+                

			
 
				+                energyBall.style.transform = `rotateX(${angleX}deg) rotateY(${angleY}deg)`;

			
 
				+            });

			
 
				+            

			
 
				+            energyBall.addEventListener('mouseleave', () => {

			
 
				+                energyBall.style.transform = '';

			
 
				+            });

			
 
				+        });

			
 
				+    </script>

			
 
				+</body>

			
 
				+</html>
			
--- a/setting.html
+++ b/setting.html
@@ -0,0 +1,441 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="zh-CN">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

			
 
				+    <title>设置中心</title>

			
 
				+    <!-- Ionic 组件库 -->

			
 
				+    <link href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" rel="stylesheet">

			
 
				+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>

			
 
				+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>

			
 
				+

			
 
				+    <style>

			
 
				+        :root {

			
 
				+            /* 基础中性色 */

			
 
				+            --bg-light: #FAFAFA;

			
 
				+            --surface: #FFFFFF;

			
 
				+            --border: #E0E0E0;

			
 
				+

			
 
				+            /* 文本颜色 */

			
 
				+            --text-primary: #212121;

			
 
				+            --text-secondary: #424242;

			
 
				+

			
 
				+            /* 主辅点缀色 */

			
 
				+            --primary: #6200EE;

			
 
				+            --secondary: #018786;

			
 
				+            --accent: #FFB300;

			
 
				+

			
 
				+            /* 年度色彩 */

			
 
				+            --pantone-2025: #BFA6A0;     /* Mocha Mousse */

			
 
				+            --bm-2025: #8E5F56;          /* Cinnamon Slate */

			
 
				+

			
 
				+            /* 额外点缀色 */

			
 
				+            --accent-alt: #FF6F61;       /* 活力暖粉 */

			
 
				+

			
 
				+            /* 圆角和间距 */

			
 
				+            --radius: 8px;

			
 
				+            --gap: 20px;

			
 
				+            --ion-font-family: "MiSans", system-ui;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            background: var(--bg-light);

			
 
				+            color: var(--text-primary);

			
 
				+            font-family: var(--ion-font-family);

			
 
				+            display: grid;

			
 
				+            grid-template-columns: 220px 1fr;

			
 
				+            min-height: 100vh;

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        /* 优化后的侧边导航 */

			
 
				+        .sidebar {

			
 
				+            width: 220px;

			
 
				+            background: var(--surface);

			
 
				+            padding: 16px 12px;

			
 
				+            box-shadow: 2px 0 12px rgba(0,0,0,0.05);

			
 
				+        }

			
 
				+

			
 
				+        .nav-group {

			
 
				+            margin-bottom: 2.5rem;

			
 
				+        }

			
 
				+

			
 
				+        .nav-group-title {

			
 
				+            font-size: 0.85rem;

			
 
				+            color: var(--text-secondary);

			
 
				+            margin: 8px 0;

			
 
				+            text-transform: uppercase;

			
 
				+            letter-spacing: 0.5px;

			
 
				+        }

			
 
				+

			
 
				+        ion-item.nav-item {

			
 
				+            --background: transparent;

			
 
				+            --border-color: transparent;

			
 
				+            --padding-start: 14px;

			
 
				+            --min-height: 44px;

			
 
				+            margin: 6px 0;

			
 
				+            border-radius: var(--radius);

			
 
				+            transition: background-color 0.2s ease, transform 0.1s ease;

			
 
				+        }

			
 
				+

			
 
				+        ion-item.nav-item ion-icon {

			
 
				+            font-size: 1.2rem;

			
 
				+            margin-right: 12px;

			
 
				+            color: var(--primary);

			
 
				+            transition: color 0.2s ease;

			
 
				+        }

			
 
				+

			
 
				+        ion-item.nav-item:hover {

			
 
				+            background-color: rgba(98,0,238,0.1);

			
 
				+            transform: translateX(4px);

			
 
				+        }

			
 
				+

			
 
				+        ion-item.nav-item[aria-selected="true"] {

			
 
				+            --background: rgba(98,0,238,0.2);

			
 
				+        }

			
 
				+

			
 
				+        /* 主内容区 */

			
 
				+        .main-content {

			
 
				+            padding: 2rem;

			
 
				+            display: flex;

			
 
				+            flex-direction: column;

			
 
				+            gap: var(--gap);

			
 
				+            max-width: 1200px;

			
 
				+        }

			
 
				+

			
 
				+        .settings-card {

			
 
				+            background: var(--surface);

			
 
				+            border-radius: var(--radius);

			
 
				+            padding: 1.5rem;

			
 
				+            box-shadow: 0 4px 12px rgba(0,0,0,0.08);

			
 
				+            border: 1px solid var(--border);

			
 
				+        }

			
 
				+

			
 
				+        .settings-card-header {

			
 
				+            display: flex;

			
 
				+            justify-content: space-between;

			
 
				+            align-items: center;

			
 
				+            margin-bottom: 1.5rem;

			
 
				+        }

			
 
				+

			
 
				+        .settings-card-title {

			
 
				+            font-size: 1.25rem;

			
 
				+            font-weight: 500;

			
 
				+            color: var(--primary);

			
 
				+        }

			
 
				+

			
 
				+        .settings-grid {

			
 
				+            display: grid;

			
 
				+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

			
 
				+            gap: 1.5rem;

			
 
				+        }

			
 
				+

			
 
				+        /* 自定义Ionic组件样式 */

			
 
				+        ion-toggle::part(track) {

			
 
				+            background: var(--border);

			
 
				+            height: 24px;

			
 
				+            width: 48px;

			
 
				+            border-radius: 12px;

			
 
				+            transition: background-color 0.2s ease;

			
 
				+        }

			
 
				+

			
 
				+        ion-toggle::part(handle) {

			
 
				+            width: 20px;

			
 
				+            height: 20px;

			
 
				+            top: 2px;

			
 
				+        }

			
 
				+

			
 
				+        ion-button::part(native) {

			
 
				+            text-transform: none;

			
 
				+            letter-spacing: normal;

			
 
				+            background-color: var(--accent);

			
 
				+            color: var(--surface);

			
 
				+            border-radius: var(--radius);

			
 
				+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);

			
 
				+            transition: background-color 0.2s ease, box-shadow 0.2s ease;

			
 
				+        }

			
 
				+

			
 
				+        ion-button::part(native):hover {

			
 
				+            background-color: var(--accent-alt);

			
 
				+            box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);

			
 
				+        }

			
 
				+

			
 
				+        ion-range::part(bar) {

			
 
				+            background: var(--border);

			
 
				+            height: 4px;

			
 
				+        }

			
 
				+

			
 
				+        ion-range::part(bar-active) {

			
 
				+            background: var(--primary);

			
 
				+        }

			
 
				+

			
 
				+        /* 高级设置区 */

			
 
				+        .advanced-settings {

			
 
				+            border-top: 1px solid var(--border);

			
 
				+            margin-top: 1.5rem;

			
 
				+            padding-top: 1.5rem;

			
 
				+        }

			
 
				+

			
 
				+        /* 版本信息 */

			
 
				+        .version-info {

			
 
				+            margin-top: auto;

			
 
				+            text-align: center;

			
 
				+            color: var(--text-secondary);

			
 
				+            padding: 2rem;

			
 
				+            font-size: 0.9rem;

			
 
				+        }

			
 
				+    </style>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <!-- 侧边导航 -->

			
 
				+    <nav class="sidebar">

			
 
				+        <div class="nav-group">

			
 
				+            <div class="nav-group-title">核心设置</div>

			
 
				+            <ion-item class="nav-item" button aria-selected="true">

			
 
				+                <ion-icon name="desktop" slot="start"></ion-icon>

			
 
				+                <ion-label>图形设置</ion-label>

			
 
				+            </ion-item>

			
 
				+            <ion-item class="nav-item" button>

			
 
				+                <ion-icon name="settings" slot="start"></ion-icon>

			
 
				+                <ion-label>系统设置</ion-label>

			
 
				+            </ion-item>

			
 
				+            <ion-item class="nav-item" button>

			
 
				+                <ion-icon name="chatbubbles" slot="start"></ion-icon>

			
 
				+                <ion-label>互动设置</ion-label>

			
 
				+            </ion-item>

			
 
				+        </div>

			
 
				+

			
 
				+        <div class="nav-group">

			
 
				+            <div class="nav-group-title">扩展功能</div>

			
 
				+            <ion-item class="nav-item" button>

			
 
				+                <ion-icon name="extension-puzzle" slot="start"></ion-icon>

			
 
				+                <ion-label>MOD管理</ion-label>

			
 
				+            </ion-item>

			
 
				+            <ion-item class="nav-item" button>

			
 
				+                <ion-icon name="medkit" slot="start"></ion-icon>  

			
 
				+                <ion-label>诊断与反馈</ion-label>

			
 
				+            </ion-item>

			
 
				+            <ion-item class="nav-item" button>

			
 
				+                <ion-icon name="information-circle" slot="start"></ion-icon>

			
 
				+                <ion-label>关于</ion-label>

			
 
				+            </ion-item>

			
 
				+        </div>

			
 
				+    </nav>

			
 
				+

			
 
				+    <!-- 主内容区 -->

			
 
				+    <main class="main-content">

			
 
				+        <!-- 系统设置 -->

			
 
				+        <div class="settings-card">

			
 
				+            <div class="settings-card-header">

			
 
				+                <h2 class="settings-card-title">系统设置</h2>

			
 
				+                <ion-button fill="clear" size="small">

			
 
				+                    <ion-icon name="help-circle" slot="start"></ion-icon>

			
 
				+                    帮助

			
 
				+                </ion-button>

			
 
				+            </div>

			
 
				+            

			
 
				+            <div class="settings-grid">

			
 
				+                <ion-item>

			
 
				+                    <ion-label position="stacked">置于顶层</ion-label>

			
 
				+                    <ion-toggle checked></ion-toggle>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-label position="stacked">开机启动</ion-label>

			
 
				+                    <ion-select value="steam">

			
 
				+                        <ion-select-option value="disabled">禁用</ion-select-option>

			
 
				+                        <ion-select-option value="system">系统启动</ion-select-option>

			
 
				+                        <ion-select-option value="steam">Steam启动</ion-select-option>

			
 
				+                    </ion-select>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-label position="stacked">缩放等级 (85%)</ion-label>

			
 
				+                    <ion-range min="50" max="150" value="85">

			
 
				+                        <ion-icon name="remove" slot="start"></ion-icon>

			
 
				+                        <ion-icon name="add" slot="end"></ion-icon>

			
 
				+                    </ion-range>

			
 
				+                </ion-item>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 数据管理 -->

			
 
				+        <div class="settings-card">

			
 
				+            <div class="settings-card-header">

			
 
				+                <h2 class="settings-card-title">数据管理</h2>

			
 
				+                <ion-button fill="clear" size="small">

			
 
				+                    <ion-icon name="time" slot="start"></ion-icon>

			
 
				+                    历史版本

			
 
				+                </ion-button>

			
 
				+            </div>

			
 
				+

			
 
				+            <div class="settings-grid">

			
 
				+                <ion-item>

			
 
				+                    <ion-label position="stacked">自动保存频率</ion-label>

			
 
				+                    <ion-input type="number" value="20" min="5" max="60"></ion-input>

			
 
				+                    <ion-note slot="end">分钟</ion-note>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-label position="stacked">最大备份数量</ion-label>

			
 
				+                    <ion-input type="number" value="50" min="10" max="100"></ion-input>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-label>从备份还原</ion-label>

			
 
				+                    <ion-button slot="end" fill="outline">

			
 
				+                        <ion-icon name="cloud-download" slot="start"></ion-icon>

			
 
				+                        加载存档

			
 
				+                    </ion-button>

			
 
				+                </ion-item>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 高级互动设置 -->

			
 
				+        <div class="settings-card">

			
 
				+            <div class="settings-card-header">

			
 
				+                <h2 class="settings-card-title">高级互动设置</h2>

			
 
				+                <ion-button fill="clear" size="small">

			
 
				+                    <ion-icon name="alert-circle" slot="start"></ion-icon>

			
 
				+                    实验性功能

			
 
				+                </ion-button>

			
 
				+            </div>

			
 
				+

			
 
				+            <div class="settings-grid">

			
 
				+                <ion-item>

			
 
				+                    <ion-label position="stacked">计算间隔</ion-label>

			
 
				+                    <ion-input type="number" value="14.0" step="0.1"></ion-input>

			
 
				+                    <ion-note slot="end">秒</ion-note>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-label position="stacked">互动周期</ion-label>

			
 
				+                    <ion-input type="number" value="200" min="100" max="500"></ion-input>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-label>移动范围设置</ion-label>

			
 
				+                    <div slot="end" style="display: flex; gap: 8px;">

			
 
				+                        <ion-button size="small">

			
 
				+                            <ion-icon name="expand" slot="start"></ion-icon>

			
 
				+                            重置为主屏

			
 
				+                        </ion-button>

			
 
				+                        <ion-button size="small" fill="outline">

			
 
				+                            自定范围

			
 
				+                        </ion-button>

			
 
				+                    </div>

			
 
				+                </ion-item>

			
 
				+            </div>

			
 
				+

			
 
				+            <div class="advanced-settings">

			
 
				+                <ion-item>

			
 
				+                    <ion-label>智能移动判断</ion-label>

			
 
				+                    <ion-input type="number" value="30" slot="end"></ion-input>

			
 
				+                    <ion-note slot="end">秒</ion-note>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-label>音量触发阈值</ion-label>

			
 
				+                    <ion-range dual-knobs min="0" max="100" value="80,90">

			
 
				+                        <ion-icon name="volume-low" slot="start"></ion-icon>

			
 
				+                        <ion-icon name="volume-high" slot="end"></ion-icon>

			
 
				+                    </ion-range>

			
 
				+                </ion-item>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- MOD管理 -->

			
 
				+        <div class="settings-card">

			
 
				+            <div class="settings-card-header">

			
 
				+                <h2 class="settings-card-title">MOD管理</h2>

			
 
				+                <ion-button fill="clear" size="small">

			
 
				+                    <ion-icon name="logo-steam" slot="start"></ion-icon>

			
 
				+                    Workshop

			
 
				+                </ion-button>

			
 
				+            </div>

			
 
				+

			
 
				+            <div class="settings-grid">

			
 
				+                <ion-item>

			
 
				+                    <ion-label>语音增强包</ion-label>

			
 
				+                    <ion-toggle slot="end"></ion-toggle>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-label>动画扩展包</ion-label>

			
 
				+                    <ion-badge color="warning" slot="end">v2.1.5</ion-badge>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-label>界面主题包</ion-label>

			
 
				+                    <ion-button slot="end" fill="clear">

			
 
				+                        <ion-icon name="color-palette"></ion-icon>

			
 
				+                    </ion-button>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-button expand="block">

			
 
				+                        <ion-icon name="add-circle" slot="start"></ion-icon>

			
 
				+                        添加MOD

			
 
				+                    </ion-button>

			
 
				+                </ion-item>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 版本信息 -->

			
 
				+        <div class="version-info">

			
 
				+            <ion-text color="medium">

			
 
				+                <p>当前版本 v1.10.48 x64</p>

			
 
				+                <p>Power By exLB.net 洛里斯杨远</p>

			
 
				+                <p>开源协议：MIT License</p>

			
 
				+            </ion-text>

			
 
				+        </div>

			
 
				+    </main>

			
 
				+

			
 
				+    <script>

			
 
				+        // 初始化Ionic组件

			
 
				+        customElements.whenDefined('ion-toggle').then(() => {

			
 
				+            // 开关状态同步

			
 
				+            document.querySelectorAll('ion-toggle').forEach(toggle => {

			
 
				+                toggle.addEventListener('ionChange', (e) => {

			
 
				+                    console.log(`Toggle ${e.target.checked ? '开启' : '关闭'}`);

			
 
				+                });

			
 
				+            });

			
 
				+

			
 
				+            // 范围选择器交互

			
 
				+            document.querySelectorAll('ion-range').forEach(range => {

			
 
				+                range.addEventListener('ionChange', (e) => {

			
 
				+                    console.log('范围值变更:', e.target.value);

			
 
				+                });

			
 
				+            });

			
 
				+

			
 
				+            // 按钮点击事件

			
 
				+            document.querySelectorAll('ion-button').forEach(button => {

			
 
				+                button.addEventListener('click', (e) => {

			
 
				+                    const target = e.target.closest('ion-button');

			
 
				+                    console.log('按钮点击:', target.innerText.trim());

			
 
				+                });

			
 
				+            });

			
 
				+

			
 
				+            // 表单验证

			
 
				+            document.querySelectorAll('ion-input').forEach(input => {

			
 
				+                input.addEventListener('ionInput', (e) => {

			
 
				+                    const value = parseFloat(e.target.value);

			
 
				+                    const min = parseFloat(e.target.min) || -Infinity;

			
 
				+                    const max = parseFloat(e.target.max) || Infinity;

			
 
				+                    if (value < min) e.target.value = min;

			
 
				+                    if (value > max) e.target.value = max;

			
 
				+                });

			
 
				+            });

			
 
				+        });

			
 
				+

			
 
				+        // 动态加载示例

			
 
				+        setTimeout(() => {

			
 
				+            const loadingToast = document.createElement('ion-toast');

			
 
				+            loadingToast.message = '设置加载完成';

			
 
				+            loadingToast.duration = 2000;

			
 
				+            document.body.appendChild(loadingToast);

			
 
				+            loadingToast.present();

			
 
				+        }, 1000);

			
 
				+    </script>

			
 
				+</body>

			
 
				+</html>
			
--- a/test_2.html
+++ b/test_2.html
@@ -0,0 +1,441 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="zh-CN">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

			
 
				+    <title>设置中心</title>

			
 
				+    <!-- Ionic 组件库 -->

			
 
				+    <link href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" rel="stylesheet">

			
 
				+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>

			
 
				+    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>

			
 
				+

			
 
				+    <style>

			
 
				+        :root {

			
 
				+            /* 基础中性色 */

			
 
				+            --bg-light: #FAFAFA;

			
 
				+            --surface: #FFFFFF;

			
 
				+            --border: #E0E0E0;

			
 
				+

			
 
				+            /* 文本颜色 */

			
 
				+            --text-primary: #212121;

			
 
				+            --text-secondary: #424242;

			
 
				+

			
 
				+            /* 主辅点缀色 */

			
 
				+            --primary: #6200EE;

			
 
				+            --secondary: #018786;

			
 
				+            --accent: #FFB300;

			
 
				+

			
 
				+            /* 年度色彩 */

			
 
				+            --pantone-2025: #BFA6A0;     /* Mocha Mousse */

			
 
				+            --bm-2025: #8E5F56;          /* Cinnamon Slate */

			
 
				+

			
 
				+            /* 额外点缀色 */

			
 
				+            --accent-alt: #FF6F61;       /* 活力暖粉 */

			
 
				+

			
 
				+            /* 圆角和间距 */

			
 
				+            --radius: 8px;

			
 
				+            --gap: 20px;

			
 
				+            --ion-font-family: "MiSans", system-ui;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            background: var(--bg-light);

			
 
				+            color: var(--text-primary);

			
 
				+            font-family: var(--ion-font-family);

			
 
				+            display: grid;

			
 
				+            grid-template-columns: 220px 1fr;

			
 
				+            min-height: 100vh;

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        /* 优化后的侧边导航 */

			
 
				+        .sidebar {

			
 
				+            width: 220px;

			
 
				+            background: var(--surface);

			
 
				+            padding: 16px 12px;

			
 
				+            box-shadow: 2px 0 12px rgba(0,0,0,0.05);

			
 
				+        }

			
 
				+

			
 
				+        .nav-group {

			
 
				+            margin-bottom: 2.5rem;

			
 
				+        }

			
 
				+

			
 
				+        .nav-group-title {

			
 
				+            font-size: 0.85rem;

			
 
				+            color: var(--text-secondary);

			
 
				+            margin: 8px 0;

			
 
				+            text-transform: uppercase;

			
 
				+            letter-spacing: 0.5px;

			
 
				+        }

			
 
				+

			
 
				+        ion-item.nav-item {

			
 
				+            --background: transparent;

			
 
				+            --border-color: transparent;

			
 
				+            --padding-start: 14px;

			
 
				+            --min-height: 44px;

			
 
				+            margin: 6px 0;

			
 
				+            border-radius: var(--radius);

			
 
				+            transition: background-color 0.2s ease, transform 0.1s ease;

			
 
				+        }

			
 
				+

			
 
				+        ion-item.nav-item ion-icon {

			
 
				+            font-size: 1.2rem;

			
 
				+            margin-right: 12px;

			
 
				+            color: var(--primary);

			
 
				+            transition: color 0.2s ease;

			
 
				+        }

			
 
				+

			
 
				+        ion-item.nav-item:hover {

			
 
				+            background-color: rgba(98,0,238,0.1);

			
 
				+            transform: translateX(4px);

			
 
				+        }

			
 
				+

			
 
				+        ion-item.nav-item[aria-selected="true"] {

			
 
				+            --background: rgba(98,0,238,0.2);

			
 
				+        }

			
 
				+

			
 
				+        /* 主内容区 */

			
 
				+        .main-content {

			
 
				+            padding: 2rem;

			
 
				+            display: flex;

			
 
				+            flex-direction: column;

			
 
				+            gap: var(--gap);

			
 
				+            max-width: 1200px;

			
 
				+        }

			
 
				+

			
 
				+        .settings-card {

			
 
				+            background: var(--surface);

			
 
				+            border-radius: var(--radius);

			
 
				+            padding: 1.5rem;

			
 
				+            box-shadow: 0 4px 12px rgba(0,0,0,0.08);

			
 
				+            border: 1px solid var(--border);

			
 
				+        }

			
 
				+

			
 
				+        .settings-card-header {

			
 
				+            display: flex;

			
 
				+            justify-content: space-between;

			
 
				+            align-items: center;

			
 
				+            margin-bottom: 1.5rem;

			
 
				+        }

			
 
				+

			
 
				+        .settings-card-title {

			
 
				+            font-size: 1.25rem;

			
 
				+            font-weight: 500;

			
 
				+            color: var(--primary);

			
 
				+        }

			
 
				+

			
 
				+        .settings-grid {

			
 
				+            display: grid;

			
 
				+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

			
 
				+            gap: 1.5rem;

			
 
				+        }

			
 
				+

			
 
				+        /* 自定义Ionic组件样式 */

			
 
				+        ion-toggle::part(track) {

			
 
				+            background: var(--border);

			
 
				+            height: 24px;

			
 
				+            width: 48px;

			
 
				+            border-radius: 12px;

			
 
				+            transition: background-color 0.2s ease;

			
 
				+        }

			
 
				+

			
 
				+        ion-toggle::part(handle) {

			
 
				+            width: 20px;

			
 
				+            height: 20px;

			
 
				+            top: 2px;

			
 
				+        }

			
 
				+

			
 
				+        ion-button::part(native) {

			
 
				+            text-transform: none;

			
 
				+            letter-spacing: normal;

			
 
				+            background-color: var(--accent);

			
 
				+            color: var(--surface);

			
 
				+            border-radius: var(--radius);

			
 
				+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);

			
 
				+            transition: background-color 0.2s ease, box-shadow 0.2s ease;

			
 
				+        }

			
 
				+

			
 
				+        ion-button::part(native):hover {

			
 
				+            background-color: var(--accent-alt);

			
 
				+            box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);

			
 
				+        }

			
 
				+

			
 
				+        ion-range::part(bar) {

			
 
				+            background: var(--border);

			
 
				+            height: 4px;

			
 
				+        }

			
 
				+

			
 
				+        ion-range::part(bar-active) {

			
 
				+            background: var(--primary);

			
 
				+        }

			
 
				+

			
 
				+        /* 高级设置区 */

			
 
				+        .advanced-settings {

			
 
				+            border-top: 1px solid var(--border);

			
 
				+            margin-top: 1.5rem;

			
 
				+            padding-top: 1.5rem;

			
 
				+        }

			
 
				+

			
 
				+        /* 版本信息 */

			
 
				+        .version-info {

			
 
				+            margin-top: auto;

			
 
				+            text-align: center;

			
 
				+            color: var(--text-secondary);

			
 
				+            padding: 2rem;

			
 
				+            font-size: 0.9rem;

			
 
				+        }

			
 
				+    </style>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <!-- 侧边导航 -->

			
 
				+    <nav class="sidebar">

			
 
				+        <div class="nav-group">

			
 
				+            <div class="nav-group-title">核心设置</div>

			
 
				+            <ion-item class="nav-item" button aria-selected="true">

			
 
				+                <ion-icon name="desktop" slot="start"></ion-icon>

			
 
				+                <ion-label>图形设置</ion-label>

			
 
				+            </ion-item>

			
 
				+            <ion-item class="nav-item" button>

			
 
				+                <ion-icon name="settings" slot="start"></ion-icon>

			
 
				+                <ion-label>系统设置</ion-label>

			
 
				+            </ion-item>

			
 
				+            <ion-item class="nav-item" button>

			
 
				+                <ion-icon name="chatbubbles" slot="start"></ion-icon>

			
 
				+                <ion-label>互动设置</ion-label>

			
 
				+            </ion-item>

			
 
				+        </div>

			
 
				+

			
 
				+        <div class="nav-group">

			
 
				+            <div class="nav-group-title">扩展功能</div>

			
 
				+            <ion-item class="nav-item" button>

			
 
				+                <ion-icon name="extension-puzzle" slot="start"></ion-icon>

			
 
				+                <ion-label>MOD管理</ion-label>

			
 
				+            </ion-item>

			
 
				+            <ion-item class="nav-item" button>

			
 
				+                <ion-icon name="medkit" slot="start"></ion-icon>  

			
 
				+                <ion-label>诊断与反馈</ion-label>

			
 
				+            </ion-item>

			
 
				+            <ion-item class="nav-item" button>

			
 
				+                <ion-icon name="information-circle" slot="start"></ion-icon>

			
 
				+                <ion-label>关于</ion-label>

			
 
				+            </ion-item>

			
 
				+        </div>

			
 
				+    </nav>

			
 
				+

			
 
				+    <!-- 主内容区 -->

			
 
				+    <main class="main-content">

			
 
				+        <!-- 系统设置 -->

			
 
				+        <div class="settings-card">

			
 
				+            <div class="settings-card-header">

			
 
				+                <h2 class="settings-card-title">系统设置</h2>

			
 
				+                <ion-button fill="clear" size="small">

			
 
				+                    <ion-icon name="help-circle" slot="start"></ion-icon>

			
 
				+                    帮助

			
 
				+                </ion-button>

			
 
				+            </div>

			
 
				+            

			
 
				+            <div class="settings-grid">

			
 
				+                <ion-item>

			
 
				+                    <ion-label position="stacked">置于顶层</ion-label>

			
 
				+                    <ion-toggle checked></ion-toggle>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-label position="stacked">开机启动</ion-label>

			
 
				+                    <ion-select value="steam">

			
 
				+                        <ion-select-option value="disabled">禁用</ion-select-option>

			
 
				+                        <ion-select-option value="system">系统启动</ion-select-option>

			
 
				+                        <ion-select-option value="steam">Steam启动</ion-select-option>

			
 
				+                    </ion-select>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-label position="stacked">缩放等级 (85%)</ion-label>

			
 
				+                    <ion-range min="50" max="150" value="85">

			
 
				+                        <ion-icon name="remove" slot="start"></ion-icon>

			
 
				+                        <ion-icon name="add" slot="end"></ion-icon>

			
 
				+                    </ion-range>

			
 
				+                </ion-item>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 数据管理 -->

			
 
				+        <div class="settings-card">

			
 
				+            <div class="settings-card-header">

			
 
				+                <h2 class="settings-card-title">数据管理</h2>

			
 
				+                <ion-button fill="clear" size="small">

			
 
				+                    <ion-icon name="time" slot="start"></ion-icon>

			
 
				+                    历史版本

			
 
				+                </ion-button>

			
 
				+            </div>

			
 
				+

			
 
				+            <div class="settings-grid">

			
 
				+                <ion-item>

			
 
				+                    <ion-label position="stacked">自动保存频率</ion-label>

			
 
				+                    <ion-input type="number" value="20" min="5" max="60"></ion-input>

			
 
				+                    <ion-note slot="end">分钟</ion-note>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-label position="stacked">最大备份数量</ion-label>

			
 
				+                    <ion-input type="number" value="50" min="10" max="100"></ion-input>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-label>从备份还原</ion-label>

			
 
				+                    <ion-button slot="end" fill="outline">

			
 
				+                        <ion-icon name="cloud-download" slot="start"></ion-icon>

			
 
				+                        加载存档

			
 
				+                    </ion-button>

			
 
				+                </ion-item>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 高级互动设置 -->

			
 
				+        <div class="settings-card">

			
 
				+            <div class="settings-card-header">

			
 
				+                <h2 class="settings-card-title">高级互动设置</h2>

			
 
				+                <ion-button fill="clear" size="small">

			
 
				+                    <ion-icon name="alert-circle" slot="start"></ion-icon>

			
 
				+                    实验性功能

			
 
				+                </ion-button>

			
 
				+            </div>

			
 
				+

			
 
				+            <div class="settings-grid">

			
 
				+                <ion-item>

			
 
				+                    <ion-label position="stacked">计算间隔</ion-label>

			
 
				+                    <ion-input type="number" value="14.0" step="0.1"></ion-input>

			
 
				+                    <ion-note slot="end">秒</ion-note>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-label position="stacked">互动周期</ion-label>

			
 
				+                    <ion-input type="number" value="200" min="100" max="500"></ion-input>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-label>移动范围设置</ion-label>

			
 
				+                    <div slot="end" style="display: flex; gap: 8px;">

			
 
				+                        <ion-button size="small">

			
 
				+                            <ion-icon name="expand" slot="start"></ion-icon>

			
 
				+                            重置为主屏

			
 
				+                        </ion-button>

			
 
				+                        <ion-button size="small" fill="outline">

			
 
				+                            自定范围

			
 
				+                        </ion-button>

			
 
				+                    </div>

			
 
				+                </ion-item>

			
 
				+            </div>

			
 
				+

			
 
				+            <div class="advanced-settings">

			
 
				+                <ion-item>

			
 
				+                    <ion-label>智能移动判断</ion-label>

			
 
				+                    <ion-input type="number" value="30" slot="end"></ion-input>

			
 
				+                    <ion-note slot="end">秒</ion-note>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-label>音量触发阈值</ion-label>

			
 
				+                    <ion-range dual-knobs min="0" max="100" value="80,90">

			
 
				+                        <ion-icon name="volume-low" slot="start"></ion-icon>

			
 
				+                        <ion-icon name="volume-high" slot="end"></ion-icon>

			
 
				+                    </ion-range>

			
 
				+                </ion-item>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- MOD管理 -->

			
 
				+        <div class="settings-card">

			
 
				+            <div class="settings-card-header">

			
 
				+                <h2 class="settings-card-title">MOD管理</h2>

			
 
				+                <ion-button fill="clear" size="small">

			
 
				+                    <ion-icon name="logo-steam" slot="start"></ion-icon>

			
 
				+                    Workshop

			
 
				+                </ion-button>

			
 
				+            </div>

			
 
				+

			
 
				+            <div class="settings-grid">

			
 
				+                <ion-item>

			
 
				+                    <ion-label>语音增强包</ion-label>

			
 
				+                    <ion-toggle slot="end"></ion-toggle>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-label>动画扩展包</ion-label>

			
 
				+                    <ion-badge color="warning" slot="end">v2.1.5</ion-badge>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-label>界面主题包</ion-label>

			
 
				+                    <ion-button slot="end" fill="clear">

			
 
				+                        <ion-icon name="color-palette"></ion-icon>

			
 
				+                    </ion-button>

			
 
				+                </ion-item>

			
 
				+

			
 
				+                <ion-item>

			
 
				+                    <ion-button expand="block">

			
 
				+                        <ion-icon name="add-circle" slot="start"></ion-icon>

			
 
				+                        添加MOD

			
 
				+                    </ion-button>

			
 
				+                </ion-item>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 版本信息 -->

			
 
				+        <div class="version-info">

			
 
				+            <ion-text color="medium">

			
 
				+                <p>当前版本 v1.10.48 x64</p>

			
 
				+                <p>Power By exLB.net 洛里斯杨远</p>

			
 
				+                <p>开源协议：MIT License</p>

			
 
				+            </ion-text>

			
 
				+        </div>

			
 
				+    </main>

			
 
				+

			
 
				+    <script>

			
 
				+        // 初始化Ionic组件

			
 
				+        customElements.whenDefined('ion-toggle').then(() => {

			
 
				+            // 开关状态同步

			
 
				+            document.querySelectorAll('ion-toggle').forEach(toggle => {

			
 
				+                toggle.addEventListener('ionChange', (e) => {

			
 
				+                    console.log(`Toggle ${e.target.checked ? '开启' : '关闭'}`);

			
 
				+                });

			
 
				+            });

			
 
				+

			
 
				+            // 范围选择器交互

			
 
				+            document.querySelectorAll('ion-range').forEach(range => {

			
 
				+                range.addEventListener('ionChange', (e) => {

			
 
				+                    console.log('范围值变更:', e.target.value);

			
 
				+                });

			
 
				+            });

			
 
				+

			
 
				+            // 按钮点击事件

			
 
				+            document.querySelectorAll('ion-button').forEach(button => {

			
 
				+                button.addEventListener('click', (e) => {

			
 
				+                    const target = e.target.closest('ion-button');

			
 
				+                    console.log('按钮点击:', target.innerText.trim());

			
 
				+                });

			
 
				+            });

			
 
				+

			
 
				+            // 表单验证

			
 
				+            document.querySelectorAll('ion-input').forEach(input => {

			
 
				+                input.addEventListener('ionInput', (e) => {

			
 
				+                    const value = parseFloat(e.target.value);

			
 
				+                    const min = parseFloat(e.target.min) || -Infinity;

			
 
				+                    const max = parseFloat(e.target.max) || Infinity;

			
 
				+                    if (value < min) e.target.value = min;

			
 
				+                    if (value > max) e.target.value = max;

			
 
				+                });

			
 
				+            });

			
 
				+        });

			
 
				+

			
 
				+        // 动态加载示例

			
 
				+        setTimeout(() => {

			
 
				+            const loadingToast = document.createElement('ion-toast');

			
 
				+            loadingToast.message = '设置加载完成';

			
 
				+            loadingToast.duration = 2000;

			
 
				+            document.body.appendChild(loadingToast);

			
 
				+            loadingToast.present();

			
 
				+        }, 1000);

			
 
				+    </script>

			
 
				+</body>

			
 
				+</html>