diff --git a/src/Grandma.png b/src/Grandma.png
new file mode 100644
index 0000000..deeca5c
Binary files /dev/null and b/src/Grandma.png differ
diff --git a/src/Grandpa.png b/src/Grandpa.png
new file mode 100644
index 0000000..bc98b8e
Binary files /dev/null and b/src/Grandpa.png differ
diff --git a/src/aunt.jpg b/src/aunt.jpg
new file mode 100644
index 0000000..c27231f
Binary files /dev/null and b/src/aunt.jpg differ
diff --git a/src/old.html b/src/old.html
index 0551c42..e8a5f0d 100644
--- a/src/old.html
+++ b/src/old.html
@@ -14,86 +14,88 @@
         }
         .card-hover:hover {
             transform: translateY(-5px);
-            box-shadow: 0 15px 30px rgba(252, 118, 7, 0.2);
+            /* 采用 dash 深色主题的紫色光晕 */
+            box-shadow: 0 15px 30px rgba(79, 70, 229, 0.25);
         }
         .selected-card {
             animation: pulse 2s infinite;
-            box-shadow: 0 0 0 4px rgba(252, 118, 7, 0.3);
+            /* 选中态改为紫色描边光晕 */
+            box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.4);
         }
         @keyframes pulse {
-            0% { box-shadow: 0 0 0 0 rgba(252, 118, 7, 0.4); }
-            70% { box-shadow: 0 0 0 15px rgba(252, 118, 7, 0); }
-            100% { box-shadow: 0 0 0 0 rgba(252, 118, 7, 0); }
+            0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
+            70% { box-shadow: 0 0 0 15px rgba(79, 70, 229, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
         }
         .button-glow {
             transition: all 0.3s ease;
         }
         .button-glow:hover {
-            box-shadow: 0 0 20px rgba(252, 118, 7, 0.6);
+            /* 按钮悬停光晕改为紫色 */
+            box-shadow: 0 0 20px rgba(79, 70, 229, 0.6);
         }
     </style>
 </head>
-<body class="bg-[#EEECBC] min-h-screen font-sans">
+<body class="min-h-screen bg-gray-900 text-white font-sans">
     <div id="vanta-bg" class="fixed inset-0 z-0"></div>
     
     <div class="relative z-10 container mx-auto px-4 py-12">
         <div class="text-center mb-16">
-            <h1 class="text-4xl md:text-5xl font-bold text-[#D83514] mb-4">选择你的身份</h1>
-            <p class="text-lg text-[#AC8975] max-w-2xl mx-auto">在数字世界找到属于你的温暖连接</p>
+            <!-- 标题改为绿-紫渐变，与 dash.html 一致 -->
+            <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-purple-500">选择你的身份</h1>
+            <p class="text-lg text-gray-300 max-w-2xl mx-auto">在数字世界找到属于你的温暖连接</p>
         </div>
 
+        <!-- 身份选择卡片区域 -->
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-4xl mx-auto">
             <!-- Uncle Card -->
-            <div class="card bg-[#EFCE7D] rounded-xl p-6 text-center cursor-pointer transition-all duration-300 border-2 border-[#AC8975] card-hover" onclick="selectRole('uncle')">
-                <div class="bg-white rounded-full w-24 h-24 mx-auto mb-4 flex items-center justify-center text-4xl">
-                    👨‍💼
+            <div class="card bg-gray-800 bg-opacity-60 backdrop-blur-md rounded-xl p-6 text-center cursor-pointer transition-all duration-300 border-2 border-gray-700 card-hover" onclick="selectRole('uncle')">
+                <div class="rounded-full w-24 h-24 mx-auto mb-4 overflow-hidden border-4 border-white/80 shadow-lg">
+                    <img src="uncle.jpg" alt="叔叔" class="w-full h-full object-cover">
                 </div>
-                <h3 class="text-2xl font-semibold text-[#D83514] mb-2">叔叔</h3>
-                <!-- <p class="text-[#AC8975]">智慧与经验的分享者</p> -->
-                <div class="selected-indicator hidden mt-4 text-[#FC7607]">
+                <h3 class="text-2xl font-semibold text-white mb-2">叔叔</h3>
+                <div class="selected-indicator hidden mt-4 text-green-500">
                     <i data-feather="check-circle" class="w-8 h-8 mx-auto"></i>
                 </div>
             </div>
-
+        
             <!-- Aunt Card -->
-            <div class="card bg-[#EFCE7D] rounded-xl p-6 text-center cursor-pointer transition-all duration-300 border-2 border-[#AC8975] card-hover" onclick="selectRole('aunt')">
-                <div class="bg-white rounded-full w-24 h-24 mx-auto mb-4 flex items-center justify-center text-4xl">
-                    👩‍💼
+            <div class="card bg-gray-800 bg-opacity-60 backdrop-blur-md rounded-xl p-6 text-center cursor-pointer transition-all duration-300 border-2 border-gray-700 card-hover" onclick="selectRole('aunt')">
+                <div class="rounded-full w-24 h-24 mx-auto mb-4 overflow-hidden border-4 border-white/80 shadow-lg">
+                    <img src="aunt.jpg" alt="阿姨" class="w-full h-full object-cover">
                 </div>
-                <h3 class="text-2xl font-semibold text-[#D83514] mb-2">阿姨</h3>
-                <!-- <p class="text-[#AC8975]">温柔与关怀的传递者</p> -->
-                <div class="selected-indicator hidden mt-4 text-[#FC7607]">
+                <h3 class="text-2xl font-semibold text-white mb-2">阿姨</h3>
+                <div class="selected-indicator hidden mt-4 text-green-500">
                     <i data-feather="check-circle" class="w-8 h-8 mx-auto"></i>
                 </div>
             </div>
-
+        
             <!-- Grandpa Card -->
-            <div class="card bg-[#EFCE7D] rounded-xl p-6 text-center cursor-pointer transition-all duration-300 border-2 border-[#AC8975] card-hover" onclick="selectRole('grandpa')">
-                <div class="bg-white rounded-full w-24 h-24 mx-auto mb-4 flex items-center justify-center text-4xl">
-                    👴🌳
+            <div class="card bg-gray-800 bg-opacity-60 backdrop-blur-md rounded-xl p-6 text-center cursor-pointer transition-all duration-300 border-2 border-gray-700 card-hover" onclick="selectRole('grandpa')">
+                <div class="rounded-full w-24 h-24 mx-auto mb-4 overflow-hidden border-4 border-white/80 shadow-lg">
+                    <img src="Grandpa.png" alt="爷爷" class="w-full h-full object-cover">
                 </div>
-                <h3 class="text-2xl font-semibold text-[#D83514] mb-2">爷爷</h3>
-                <!-- <p class="text-[#AC8975]">故事与智慧的宝库</p> -->
-                <div class="selected-indicator hidden mt-4 text-[#FC7607]">
+                <h3 class="text-2xl font-semibold text-white mb-2">爷爷</h3>
+                <div class="selected-indicator hidden mt-4 text-green-500">
                     <i data-feather="check-circle" class="w-8 h-8 mx-auto"></i>
                 </div>
             </div>
-
+        
             <!-- Grandma Card -->
-            <div class="card bg-[#EFCE7D] rounded-xl p-6 text-center cursor-pointer transition-all duration-300 border-2 border-[#AC8975] card-hover" onclick="selectRole('grandma')">
-                <div class="bg-white rounded-full w-24 h-24 mx-auto mb-4 flex items-center justify-center text-4xl">
-                    👵🧶
+            <div class="card bg-gray-800 bg-opacity-60 backdrop-blur-md rounded-xl p-6 text-center cursor-pointer transition-all duration-300 border-2 border-gray-700 card-hover" onclick="selectRole('grandma')">
+                <div class="rounded-full w-24 h-24 mx-auto mb-4 overflow-hidden border-4 border-white/80 shadow-lg">
+                    <img src="Grandma.png" alt="奶奶" class="w-full h-full object-cover">
                 </div>
-                <h3 class="text-2xl font-semibold text-[#D83514] mb-2">奶奶</h3>
-                <!-- <p class="text-[#AC8975]">爱与传统的守护者</p> -->
-                <div class="selected-indicator hidden mt-4 text-[#FC7607]">
+                <h3 class="text-2xl font-semibold text-white mb-2">奶奶</h3>
+                <div class="selected-indicator hidden mt-4 text-green-500">
                     <i data-feather="check-circle" class="w-8 h-8 mx-auto"></i>
                 </div>
             </div>
         </div>
 
         <div class="text-center mt-16">
-            <button id="confirmBtn" class="bg-[#AC8975] bg-opacity-60 text-gray-500 px-8 py-4 rounded-full text-xl font-medium transition-all duration-300 cursor-not-allowed">
+            <!-- 初始禁用按钮采用深灰，启用后切换为绿-紫渐变 -->
+            <button id="confirmBtn" class="bg-gray-700 bg-opacity-60 text-gray-400 px-8 py-4 rounded-full text-xl font-medium transition-all duration-300 cursor-not-allowed">
                 确认选择
             </button>
         </div>
@@ -101,28 +103,29 @@
 
     <script>
         if (window.THREE && window.VANTA && document.querySelector('#vanta-bg')) {
-                VANTA.NET({
-                    el: "#vanta-bg",
-                    THREE: window.THREE, // 显式传入 THREE，避免读取不到全局
-                    mouseControls: true,
-                    touchControls: true,
-                    gyroControls: false,
-                    minHeight: 200.00,
-                    minWidth: 200.00,
-                    scale: 1.00,
-                    scaleMobile: 1.00,
-                    color: 0xfc7607,
-                    backgroundColor: 0xeeecbc,
-                    points: 8.00,
-                    maxDistance: 20.00,
-                    spacing: 15.00
-                });
-            } else {
-                console.error('VANTA 初始化失败：THREE 或 VANTA 未加载');
-            }
+            VANTA.NET({
+                el: "#vanta-bg",
+                THREE: window.THREE,
+                mouseControls: true,
+                touchControls: true,
+                gyroControls: false,
+                minHeight: 200.00,
+                minWidth: 200.00,
+                scale: 1.00,
+                scaleMobile: 1.00,
+                /* 采用 dash 深色背景与冷色系线条 */
+                color: 0x3f83f8,           // 蓝色线条（接近 dash 的风格）
+                backgroundColor: 0x111827, // 深灰背景（dash 的 bg-gray-900）
+                points: 8.00,
+                maxDistance: 20.00,
+                spacing: 15.00
+            });
+        } else {
+            console.error('VANTA 初始化失败：THREE 或 VANTA 未加载');
+        }
 
-            // 初始化 feather icons
-            feather.replace();
+        // 初始化 feather icons
+        feather.replace();
 
         let selectedRole = null;
         const roleNames = {
@@ -135,23 +138,23 @@
         function selectRole(role) {
             // Remove selection from all cards
             document.querySelectorAll('.card').forEach(card => {
-                card.classList.remove('selected-card', 'border-[#FC7607]');
+                card.classList.remove('selected-card', 'border-green-500');
                 card.querySelector('.selected-indicator').classList.add('hidden');
                 card.style.transform = '';
             });
 
-            // Add selection to clicked card
+            // Add selection to clicked card（选中态采用绿色边框）
             const selectedCard = event.currentTarget;
-            selectedCard.classList.add('selected-card', 'border-[#FC7607]');
+            selectedCard.classList.add('selected-card', 'border-green-500');
             selectedCard.querySelector('.selected-indicator').classList.remove('hidden');
             selectedCard.style.transform = 'scale(1.05)';
 
             selectedRole = role;
             
-            // Enable confirm button
+            // Enable confirm button（切换为绿-紫渐变）
             const confirmBtn = document.getElementById('confirmBtn');
-            confirmBtn.classList.remove('bg-[#AC8975]', 'bg-opacity-60', 'text-gray-500', 'cursor-not-allowed');
-            confirmBtn.classList.add('bg-gradient-to-r', 'from-[#FC7607]', 'to-[#D83514]', 'text-white', 'button-glow', 'cursor-pointer');
+            confirmBtn.classList.remove('bg-gray-700', 'bg-opacity-60', 'text-gray-400', 'cursor-not-allowed');
+            confirmBtn.classList.add('bg-gradient-to-r', 'from-green-500', 'to-purple-600', 'text-white', 'button-glow', 'cursor-pointer');
             confirmBtn.textContent = `小乐与 ${roleNames[role]} 开始对话`;
             
             // Add animation to the button
@@ -161,17 +164,17 @@
             }, 10);
         }
 
-        // Add hover effect to cards
+        // Add hover effect to cards（悬停态采用紫色边框）
         document.querySelectorAll('.card').forEach(card => {
             card.addEventListener('mouseenter', () => {
                 if (!card.classList.contains('selected-card')) {
-                    card.classList.add('border-[#FC7607]');
+                    card.classList.add('border-purple-500');
                 }
             });
             
             card.addEventListener('mouseleave', () => {
                 if (!card.classList.contains('selected-card')) {
-                    card.classList.remove('border-[#FC7607]');
+                    card.classList.remove('border-purple-500');
                 }
             });
         });
diff --git a/src/uncle.jpg b/src/uncle.jpg
new file mode 100644
index 0000000..3de08e7
Binary files /dev/null and b/src/uncle.jpg differ
