优化随机选择

src/views/Home.vue

@@ -9,7 +9,7 @@
                         to="/today-eat"
                         class="bg-orange-400 hover:bg-orange-500 text-white px-4 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 transform hover:scale-105 text-sm"
                     >
-                        🍽️ 今天吃什么
+                        🎲 今天吃什么？
                     </router-link>
                     <router-link
                         to="/about"
@@ -32,7 +32,7 @@
                     to="/today-eat"
                     class="bg-orange-400 hover:bg-orange-500 text-white px-6 py-2 rounded-lg font-bold border-2 border-black transition-all duration-200 text-sm shadow-lg"
                 >
-                    🍽️ 今天吃什么
+                    🎲 今天吃什么？
                 </router-link>
                 <router-link
                     to="/about"
@@ -306,7 +306,7 @@
                                     <div class="mt-2">
                                         <button
                                             @click="getRandomInspiration"
-                                            class="w-full py-1.5 px-2 bg-gradient-to-r from-purple-400 to-pink-400 hover:from-purple-500 hover:to-pink-500 text-white text-sm font-medium rounded-lg border-2 border-black transition-all duration-200 transform "
+                                            class="w-full py-1.5 px-2 bg-gradient-to-r from-purple-400 to-pink-400 hover:from-purple-500 hover:to-pink-500 text-white text-sm font-medium rounded-lg border-2 border-black transition-all duration-200 transform"
                                         >
                                             ✨ 随机灵感
                                         </button>
@@ -386,7 +386,7 @@
                             <button
                                 @click="generateRecipes"
                                 :disabled="ingredients.length === 0 || isLoading"
-                                class="w-full bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 disabled:from-gray-400 disabled:to-gray-400 text-white px-6 py-3 rounded-lg font-bold text-base md:text-lg border-2 border-black transition-all duration-300 transform  disabled:scale-100 disabled:cursor-not-allowed shadow-lg mb-3"
+                                class="w-full bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 disabled:from-gray-400 disabled:to-gray-400 text-white px-6 py-3 rounded-lg font-bold text-base md:text-lg border-2 border-black transition-all duration-300 transform disabled:scale-100 disabled:cursor-not-allowed shadow-lg mb-3"
                             >
                                 <span class="flex items-center gap-2 justify-center">
                                     <template v-if="isLoading">
@@ -433,7 +433,7 @@
                             >
                                 <!-- 如果菜谱已生成，显示菜谱卡片 -->
                                 <RecipeCard v-if="cuisineInfo.recipe" :recipe="cuisineInfo.recipe" />
-                                
+
                                 <!-- 如果菜谱还在生成中，显示加载状态 -->
                                 <div v-else class="bg-white loading-card">
                                     <!-- 菜系头部 -->
@@ -463,7 +463,11 @@
                                         <div class="mb-4">
                                             <h4 class="text-sm font-bold text-dark-800 mb-2 flex items-center gap-1">🥬 使用食材</h4>
                                             <div class="flex flex-wrap gap-1">
-                                                <span v-for="ingredient in ingredients" :key="ingredient" class="bg-yellow-200 text-yellow-800 px-2 py-1 rounded text-xs font-medium border border-yellow-400 animate-pulse">
+                                                <span
+                                                    v-for="ingredient in ingredients"
+                                                    :key="ingredient"
+                                                    class="bg-yellow-200 text-yellow-800 px-2 py-1 rounded text-xs font-medium border border-yellow-400 animate-pulse"
+                                                >
                                                     {{ ingredient }}
                                                 </span>
                                             </div>
@@ -476,8 +480,8 @@
                                                 <div v-for="i in 3" :key="i" class="flex gap-2 p-2 bg-gray-50 rounded border border-gray-200">
                                                     <div class="flex-shrink-0 w-5 h-5 bg-gray-300 rounded shimmer-effect"></div>
                                                     <div class="flex-1 space-y-1">
-                                                        <div class="h-3 bg-gray-300 rounded shimmer-effect" :style="{ width: (60 + Math.random() * 30) + '%' }"></div>
-                                                        <div class="h-2 bg-gray-200 rounded shimmer-effect" :style="{ width: (40 + Math.random() * 20) + '%' }"></div>
+                                                        <div class="h-3 bg-gray-300 rounded shimmer-effect" :style="{ width: 60 + Math.random() * 30 + '%' }"></div>
+                                                        <div class="h-2 bg-gray-200 rounded shimmer-effect" :style="{ width: 40 + Math.random() * 20 + '%' }"></div>
                                                     </div>
                                                 </div>
                                             </div>
@@ -488,17 +492,20 @@
                                             <div class="w-16 h-16 border-4 border-orange-200 border-t-orange-500 rounded-full animate-spin mx-auto mb-4"></div>
                                             <h3 class="text-lg font-bold text-dark-800 mb-2">{{ cuisineInfo.name }}正在创作中...</h3>
                                             <p class="text-gray-600 text-sm mb-3">{{ cuisineInfo.loadingText || loadingText }}</p>
-                                            
+
                                             <!-- 进度条 -->
                                             <div class="max-w-xs mx-auto">
                                                 <div class="bg-gray-200 rounded-full h-3 overflow-hidden">
-                                                    <div class="bg-gradient-to-r from-orange-400 to-yellow-500 h-3 rounded-full transition-all duration-1000 relative" :style="{ width: cuisineInfo.progress + '%' }">
+                                                    <div
+                                                        class="bg-gradient-to-r from-orange-400 to-yellow-500 h-3 rounded-full transition-all duration-1000 relative"
+                                                        :style="{ width: cuisineInfo.progress + '%' }"
+                                                    >
                                                         <div class="absolute inset-0 bg-white/30 animate-pulse"></div>
                                                     </div>
                                                 </div>
                                                 <p class="text-xs text-gray-500 mt-2">{{ Math.round(cuisineInfo.progress) }}% 完成</p>
                                             </div>
-                                            
+
                                             <div class="mt-4 flex justify-center items-center gap-1 text-xs text-gray-500">
                                                 <span class="animate-bounce" style="animation-delay: 0s">●</span>
                                                 <span class="animate-bounce" style="animation-delay: 0.2s">●</span>
@@ -573,7 +580,8 @@
 }
 
 @keyframes pulse-glow {
-    0%, 100% {
+    0%,
+    100% {
         box-shadow: 0 0 5px rgba(249, 115, 22, 0.3);
     }
     50% {
@@ -827,12 +835,14 @@ const generateRecipes = async () => {
     // 检查是否有自定义提示词
     if (customPrompt.value.trim()) {
         // 使用自定义提示词生成菜谱 - 立即创建单个槽位
-        cuisineSlots.value = [{
-            id: 'custom',
-            name: '自定义大师',
-            loadingText: '正在根据您的要求创作...',
-            progress: 0
-        }]
+        cuisineSlots.value = [
+            {
+                id: 'custom',
+                name: '自定义大师',
+                loadingText: '正在根据您的要求创作...',
+                progress: 0
+            }
+        ]
     } else {
         // 使用菜系生成菜谱 - 立即初始化菜系槽位
         let selectedCuisineObjects = cuisines.filter(c => selectedCuisines.value.includes(c.id))
@@ -862,7 +872,7 @@ const generateRecipes = async () => {
             }, 500)
 
             const customRecipe = await generateCustomRecipe(ingredients.value, customPrompt.value.trim())
-            
+
             // 完成生成，更新槽位
             if (cuisineSlots.value[0]) {
                 cuisineSlots.value[0].recipe = customRecipe
@@ -880,12 +890,7 @@ const generateRecipes = async () => {
                     if (!slot.recipe) {
                         slot.progress = Math.min(slot.progress + Math.random() * 10, 85)
                         // 随机更新加载文字
-                        const texts = [
-                            `${slot.name}正在挑选食材...`,
-                            `${slot.name}正在调配秘制酱料...`,
-                            `${slot.name}正在掌控火候...`,
-                            `${slot.name}正在精心摆盘...`
-                        ]
+                        const texts = [`${slot.name}正在挑选食材...`, `${slot.name}正在调配秘制酱料...`, `${slot.name}正在掌控火候...`, `${slot.name}正在精心摆盘...`]
                         slot.loadingText = texts[Math.floor(Math.random() * texts.length)]
                     }
                 }, 800 + index * 200) // 每个槽位的更新频率略有不同
@@ -893,12 +898,13 @@ const generateRecipes = async () => {
             })
 
             // 获取选中的菜系对象
-            const selectedCuisineObjects = cuisines.filter(c => selectedCuisines.value.includes(c.id)).length > 0 
-                ? cuisines.filter(c => selectedCuisines.value.includes(c.id))
-                : (() => {
-                    const shuffled = [...cuisines].sort(() => 0.5 - Math.random())
-                    return shuffled.slice(0, 2)
-                })()
+            const selectedCuisineObjects =
+                cuisines.filter(c => selectedCuisines.value.includes(c.id)).length > 0
+                    ? cuisines.filter(c => selectedCuisines.value.includes(c.id))
+                    : (() => {
+                          const shuffled = [...cuisines].sort(() => 0.5 - Math.random())
+                          return shuffled.slice(0, 2)
+                      })()
 
             // 使用流式生成菜谱，每完成一个就立即显示
             await generateMultipleRecipesStream(
@@ -906,10 +912,8 @@ const generateRecipes = async () => {
                 selectedCuisineObjects,
                 (recipe: Recipe, index: number, total: number) => {
                     // 找到对应的菜系槽位并更新
-                    const targetSlot = cuisineSlots.value.find(slot => 
-                        selectedCuisineObjects[index] && slot.id === selectedCuisineObjects[index].id
-                    )
-                    
+                    const targetSlot = cuisineSlots.value.find(slot => selectedCuisineObjects[index] && slot.id === selectedCuisineObjects[index].id)
+
                     if (targetSlot) {
                         targetSlot.recipe = recipe
                         targetSlot.progress = 100
@@ -927,7 +931,7 @@ const generateRecipes = async () => {
                         isLoading.value = false
                         // 清理所有进度定时器
                         progressIntervals.forEach(interval => clearInterval(interval))
-                        
+
                         // 延迟一下再清理槽位，让用户看到完成状态
                         setTimeout(() => {
                             // 保持槽位显示，不清理，这样用户可以看到完整的生成过程

src/views/TodayEat.vue

@@ -3,13 +3,13 @@
         <!-- 头部 -->
         <div class="max-w-4xl mx-auto mb-8">
             <div class="text-center mb-6">
-                <h1 class="text-4xl font-bold text-orange-800 mb-2">🍽️ 今天吃什么</h1>
-                <p class="text-orange-600">让AI为你推荐今日美食</p>
+                <h1 class="text-4xl font-bold text-orange-800 mb-2">{{ randomDice }} 今天吃什么</h1>
+                <p class="text-orange-600">让AI为你推荐今日美食！</p>
             </div>
             <div class="text-center">
                 <router-link to="/" class="inline-flex items-center gap-2 px-4 py-2 bg-white rounded-lg shadow hover:shadow-md transition-shadow text-gray-700">
                     <span>←</span>
-                    <span>返回</span>
+                    <span>返回首页</span>
                 </router-link>
             </div>
         </div>
@@ -17,16 +17,69 @@
         <div class="max-w-4xl mx-auto space-y-6">
             <!-- 开始按钮 -->
             <div v-if="!isSelecting && selectedDishes.length === 0" class="text-center">
-                <div class="bg-white rounded-2xl shadow-lg p-8 mb-6">
+                <div class="bg-white rounded-2xl shadow-lg p-8">
                     <div class="text-6xl mb-4">🎲</div>
                     <h2 class="text-2xl font-bold text-gray-800 mb-4">准备好了吗？</h2>
                     <p class="text-gray-600 mb-6">点击按钮，让AI为你随机选择今日美食</p>
                     <button
                         @click="startRandomSelection"
-                        class="px-8 py-3 bg-gradient-to-r from-orange-500 to-red-500 text-white rounded-xl font-semibold hover:from-orange-600 hover:to-red-600 transition-all transform hover:scale-105 shadow-lg"
+                        class="px-8 py-3 bg-gradient-to-r from-orange-500 to-red-500 text-white rounded-xl font-semibold hover:from-orange-600 hover:to-red-600 transition-all transform hover:scale-105 shadow-lg mb-4"
                     >
-                        🎯 开始随机选择
+                        {{ randomDice }} 开始随机选择
                     </button>
+
+                    <!-- 折叠配置选项 -->
+                    <div class="mt-4">
+                        <div
+                            @click="showPreference = !showPreference"
+                            class="text-sm text-gray-500 hover:text-gray-700 flex items-center justify-center gap-1 mx-auto cursor-pointer"
+                        >
+                            <span>偏好设置</span>
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="h-4 w-4 transition-transform"
+                                :class="{ 'transform rotate-180': showPreference }"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </div>
+
+                        <div v-if="showPreference" class="bg-white rounded-xl p-4 mt-2 border border-gray-200">
+                            <div class="grid grid-cols-2 gap-2">
+                                <button
+                                    @click="preference = 'meat-heavy'"
+                                    :class="preference === 'meat-heavy' ? 'bg-orange-500 text-white' : 'bg-gray-100 text-gray-800'"
+                                    class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
+                                >
+                                    🥩 荤菜多
+                                </button>
+                                <button
+                                    @click="preference = 'veg-heavy'"
+                                    :class="preference === 'veg-heavy' ? 'bg-green-500 text-white' : 'bg-gray-100 text-gray-800'"
+                                    class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
+                                >
+                                    🥬 素菜多
+                                </button>
+                                <button
+                                    @click="preference = 'veg-only'"
+                                    :class="preference === 'veg-only' ? 'bg-green-600 text-white' : 'bg-gray-100 text-gray-800'"
+                                    class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
+                                >
+                                    🌱 纯素
+                                </button>
+                                <button
+                                    @click="preference = 'meat-only'"
+                                    :class="preference === 'meat-only' ? 'bg-orange-600 text-white' : 'bg-gray-100 text-gray-800'"
+                                    class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors"
+                                >
+                                    🍖 纯荤
+                                </button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
 
@@ -35,8 +88,7 @@
                 <div class="text-center mb-6">
                     <h3 class="text-xl font-bold text-gray-800 mb-2">{{ selectionStatus }}</h3>
                     <div class="w-full bg-gray-200 rounded-full h-2">
-                        <div class="bg-gradient-to-r from-orange-500 to-red-500 h-2 rounded-full transition-all duration-500" 
-                             :style="{ width: `${selectionProgress}%` }"></div>
+                        <div class="bg-gradient-to-r from-orange-500 to-red-500 h-2 rounded-full transition-all duration-500" :style="{ width: `${selectionProgress}%` }"></div>
                     </div>
                 </div>
 
@@ -51,7 +103,7 @@
             <!-- 选择结果 -->
             <div v-if="!isSelecting && selectedDishes.length > 0" class="bg-white rounded-2xl shadow-lg p-6">
                 <h3 class="text-xl font-bold text-gray-800 mb-6 text-center">🎉 今日推荐</h3>
-                
+
                 <div class="grid md:grid-cols-2 gap-6 mb-6">
                     <!-- 菜品 -->
                     <div class="bg-green-50 rounded-xl p-4">
@@ -60,8 +112,7 @@
                             <span>推荐菜品 ({{ selectedDishes.length }}道)</span>
                         </h4>
                         <div class="flex flex-wrap gap-2">
-                            <span v-for="dish in selectedDishes" :key="dish" 
-                                  class="px-3 py-1 bg-green-200 text-green-800 rounded-full text-sm">
+                            <span v-for="dish in selectedDishes" :key="dish" class="px-3 py-1 bg-green-200 text-green-800 rounded-full text-sm">
                                 {{ dish }}
                             </span>
                         </div>
@@ -99,7 +150,7 @@
                             <span>生成菜谱</span>
                         </span>
                     </button>
-                    
+
                     <button
                         @click="resetSelection"
                         :disabled="isGenerating"
@@ -137,6 +188,8 @@ const isGenerating = ref(false)
 const selectedDishes = ref<string[]>([])
 const selectedMaster = ref<CuisineType | null>(null)
 const recipe = ref<Recipe | null>(null)
+const preference = ref<string | null>(null)
+const showPreference = ref(false)
 
 // 选择过程状态
 const selectionStatus = ref('')
@@ -145,12 +198,11 @@ const currentSelection = ref<any>(null)
 
 // 文字轮播
 const generatingText = ref('正在生成菜谱...')
-const generatingTexts = [
-    '正在生成菜谱...',
-    '大师正在创作...',
-    '调配独特配方...',
-    '完善制作步骤...'
-]
+const generatingTexts = ['正在生成菜谱...', '大师正在创作...', '调配独特配方...', '完善制作步骤...']
+
+// 随机筛子表情
+const diceEmojis = ['🎯']
+const randomDice = ref('🎯')
 
 // 所有菜品数据
 const allDishes = ref<string[]>([])
@@ -158,6 +210,7 @@ const allDishes = ref<string[]>([])
 // 初始化
 onMounted(() => {
     allDishes.value = ingredientCategories.flatMap(category => category.items)
+    randomDice.value = diceEmojis[Math.floor(Math.random() * diceEmojis.length)]
 })
 
 // 开始随机选择
@@ -167,19 +220,19 @@ const startRandomSelection = async () => {
     selectedMaster.value = null
     recipe.value = null
     selectionProgress.value = 0
-    
+
     // 第一阶段：选择菜品
     selectionStatus.value = '正在随机选择菜品...'
     await selectRandomDishes()
-    
+
     // 第二阶段：选择大师
     selectionStatus.value = '正在匹配主厨大师...'
     await selectRandomMaster()
-    
+
     // 完成
     selectionStatus.value = '选择完成！'
     selectionProgress.value = 100
-    
+
     setTimeout(() => {
         isSelecting.value = false
     }, 1000)
@@ -188,20 +241,38 @@ const startRandomSelection = async () => {
 // 随机选择菜品
 const selectRandomDishes = async () => {
     const dishCount = Math.floor(Math.random() * 3) + 4 // 4-6个菜品
-    const shuffledDishes = [...allDishes.value].sort(() => 0.5 - Math.random())
-    
+    let filteredDishes = [...allDishes.value]
+
+    // 根据偏好过滤菜品
+    if (preference.value) {
+        const meatCategories = ['meat', 'seafood']
+        const vegCategories = ['vegetables', 'mushrooms', 'beans']
+
+        if (preference.value === 'meat-heavy') {
+            filteredDishes = filteredDishes.filter(dish => ingredientCategories.some(cat => meatCategories.includes(cat.id) && cat.items.includes(dish)))
+        } else if (preference.value === 'veg-heavy') {
+            filteredDishes = filteredDishes.filter(dish => ingredientCategories.some(cat => vegCategories.includes(cat.id) && cat.items.includes(dish)))
+        } else if (preference.value === 'meat-only') {
+            filteredDishes = filteredDishes.filter(dish => ingredientCategories.some(cat => meatCategories.includes(cat.id) && cat.items.includes(dish)))
+        } else if (preference.value === 'veg-only') {
+            filteredDishes = filteredDishes.filter(dish => ingredientCategories.some(cat => vegCategories.includes(cat.id) && cat.items.includes(dish)))
+        }
+    }
+
+    const shuffledDishes = filteredDishes.sort(() => 0.5 - Math.random())
+
     for (let i = 0; i < dishCount; i++) {
         // 模拟选择过程
-        for (let j = 0; j < 10; j++) {
+        for (let j = 0; j < 5; j++) {
             const randomDish = shuffledDishes[Math.floor(Math.random() * shuffledDishes.length)]
             currentSelection.value = {
                 type: 'dish',
                 name: randomDish
             }
-            selectionProgress.value = ((i * 10 + j) / (dishCount * 10)) * 50
-            await new Promise(resolve => setTimeout(resolve, 100))
+            selectionProgress.value = ((i * 5 + j) / (dishCount * 5)) * 50
+            await new Promise(resolve => setTimeout(resolve, 50))
         }
-        
+
         // 确定选择
         const finalDish = shuffledDishes[i]
         if (!selectedDishes.value.includes(finalDish)) {
@@ -211,15 +282,15 @@ const selectRandomDishes = async () => {
             type: 'dish',
             name: finalDish
         }
-        
-        await new Promise(resolve => setTimeout(resolve, 500))
+
+        await new Promise(resolve => setTimeout(resolve, 300))
     }
 }
 
 // 随机选择大师
 const selectRandomMaster = async () => {
     // 模拟选择过程
-    for (let i = 0; i < 20; i++) {
+    for (let i = 0; i < 10; i++) {
         const randomMaster = cuisines[Math.floor(Math.random() * cuisines.length)]
         currentSelection.value = {
             type: 'master',
@@ -227,10 +298,10 @@ const selectRandomMaster = async () => {
             avatar: randomMaster.avatar,
             specialty: randomMaster.specialty
         }
-        selectionProgress.value = 50 + (i / 20) * 50
-        await new Promise(resolve => setTimeout(resolve, 150))
+        selectionProgress.value = 50 + (i / 10) * 50
+        await new Promise(resolve => setTimeout(resolve, 80))
     }
-    
+
     // 确定选择
     const finalMaster = cuisines[Math.floor(Math.random() * cuisines.length)]
     selectedMaster.value = finalMaster
@@ -240,41 +311,39 @@ const selectRandomMaster = async () => {
         avatar: finalMaster.avatar,
         specialty: finalMaster.specialty
     }
-    
-    await new Promise(resolve => setTimeout(resolve, 1000))
+
+    await new Promise(resolve => setTimeout(resolve, 500))
 }
 
 // 生成菜谱
 const generateRecipe = async () => {
     if (!selectedMaster.value || selectedDishes.value.length === 0 || isGenerating.value) return
-    
+
     isGenerating.value = true
-    
+
     // 文字轮播
     let textIndex = 0
     const textInterval = setInterval(() => {
         generatingText.value = generatingTexts[textIndex]
         textIndex = (textIndex + 1) % generatingTexts.length
     }, 1000)
-    
+
     try {
         // 模拟生成过程
         await new Promise(resolve => setTimeout(resolve, 4000))
-        
+
         // 创建菜谱
         const dishNames = selectedDishes.value.slice(0, 3).join('、')
-        const recipeName = selectedDishes.value.length > 3 
-            ? `${selectedMaster.value.name}特制${dishNames}等${selectedDishes.value.length}样组合`
-            : `${selectedMaster.value.name}特制${dishNames}组合`
-        
+        const recipeName =
+            selectedDishes.value.length > 3
+                ? `${selectedMaster.value.name}特制${dishNames}等${selectedDishes.value.length}样组合`
+                : `${selectedMaster.value.name}特制${dishNames}组合`
+
         const mockRecipe: Recipe = {
             id: `today-recipe-${Date.now()}`,
             name: recipeName,
             cuisine: selectedMaster.value.name,
-            ingredients: [
-                ...selectedDishes.value,
-                '盐', '生抽', '料酒', '葱', '姜', '蒜', '香油', '胡椒粉'
-            ],
+            ingredients: [...selectedDishes.value, '盐', '生抽', '料酒', '葱', '姜', '蒜', '香油', '胡椒粉'],
             steps: [
                 {
                     step: 1,
@@ -319,9 +388,8 @@ const generateRecipe = async () => {
                 `${selectedMaster.value.specialty}的特色在于食材搭配的层次感`
             ]
         }
-        
+
         recipe.value = mockRecipe
-        
     } catch (error) {
         console.error('生成菜谱失败:', error)
     } finally {
@@ -354,7 +422,8 @@ const resetSelection = () => {
 }
 
 @keyframes pulse {
-    0%, 100% {
+    0%,
+    100% {
         transform: scale(1);
     }
     50% {
@@ -393,10 +462,17 @@ button:hover:not(:disabled) {
 
 button:active:not(:disabled) {
     transform: translateY(0);
+    background-color: transparent;
+}
+
+/* 偏好设置特殊样式 */
+div.text-sm.text-gray-500:hover {
+    background-color: transparent;
 }
 
 /* 标签悬停效果 */
-.bg-green-200, .bg-purple-50 {
+.bg-green-200,
+.bg-purple-50 {
     transition: all 0.3s ease;
 }
 
@@ -420,14 +496,14 @@ button:active:not(:disabled) {
     .text-4xl {
         font-size: 2rem;
     }
-    
+
     .text-6xl {
         font-size: 3rem;
     }
-    
+
     .px-8 {
         padding-left: 1.5rem;
         padding-right: 1.5rem;
     }
 }
-</style>
+</style>