Spaces:

dachen159
/

yigui

Running

App Files Files Community

dachen159 commited on Jul 4, 2025

Commit

89a55a3

verified ·

1 Parent(s): f004000

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +582 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Yigui
-emoji: 🐠
-colorFrom: yellow
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: yigui
+emoji: 🐳
+colorFrom: pink
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,582 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>我的智能衣柜</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* 自定义滚动条 */
+        ::-webkit-scrollbar {
+            width: 5px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+        /* 动画效果 */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .fade-in {
+            animation: fadeIn 0.3s ease-out forwards;
+        }
+        /* 卡片悬停效果 */
+        .clothing-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+        }
+        /* 响应式调整 */
+        @media (max-width: 640px) {
+            .clothing-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-50 font-sans">
+    <!-- 顶部导航栏 -->
+    <header class="sticky top-0 z-10 bg-white shadow-sm">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i class="fas fa-tshirt text-2xl text-indigo-600"></i>
+                <h1 class="text-xl font-bold text-gray-800">智能衣柜</h1>
+            </div>
+            <div class="flex space-x-4">
+                <button class="text-gray-600 hover:text-indigo-600">
+                    <i class="fas fa-search"></i>
+                </button>
+                <button class="text-gray-600 hover:text-indigo-600">
+                    <i class="fas fa-user"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- 主要内容区 -->
+    <main class="container mx-auto px-4 py-6">
+        <!-- 天气和推荐区域 -->
+        <section class="mb-8 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl p-4 text-white shadow-lg">
+            <div class="flex justify-between items-center mb-4">
+                <div>
+                    <h2 class="text-xl font-bold">今日穿搭推荐</h2>
+                    <p class="text-sm opacity-90">根据当前天气智能推荐</p>
+                </div>
+                <div class="flex items-center bg-white bg-opacity-20 rounded-full px-3 py-1">
+                    <i class="fas fa-sun mr-2"></i>
+                    <span>晴 26°C</span>
+                </div>
+            </div>
+            <div class="flex overflow-x-auto pb-2 space-x-3" id="outfit-recommendations">
+                <!-- 动态生成的推荐穿搭 -->
+            </div>
+        </section>
+        <!-- 快速筛选 -->
+        <section class="mb-6">
+            <div class="flex overflow-x-auto space-x-2 pb-2">
+                <button class="filter-btn px-4 py-2 bg-indigo-600 text-white rounded-full text-sm whitespace-nowrap" data-category="all">
+                    <i class="fas fa-list mr-1"></i> 全部
+                </button>
+                <button class="filter-btn px-4 py-2 bg-white text-gray-700 rounded-full text-sm whitespace-nowrap shadow" data-category="top">
+                    <i class="fas fa-tshirt mr-1"></i> 上衣
+                </button>
+                <button class="filter-btn px-4 py-2 bg-white text-gray-700 rounded-full text-sm whitespace-nowrap shadow" data-category="bottom">
+                    <i class="fas fa-vest-patches mr-1"></i> 下装
+                </button>
+                <button class="filter-btn px-4 py-2 bg-white text-gray-700 rounded-full text-sm whitespace-nowrap shadow" data-category="shoes">
+                    <i class="fas fa-shoe-prints mr-1"></i> 鞋子
+                </button>
+                <button class="filter-btn px-4 py-2 bg-white text-gray-700 rounded-full text-sm whitespace-nowrap shadow" data-category="accessory">
+                    <i class="fas fa-glasses mr-1"></i> 配饰
+                </button>
+            </div>
+        </section>
+        <!-- 我的衣柜 -->
+        <section>
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-bold text-gray-800">我的衣柜</h2>
+                <button id="add-clothing" class="bg-indigo-600 text-white px-3 py-1 rounded-full text-sm flex items-center">
+                    <i class="fas fa-plus mr-1"></i> 添加衣物
+                </button>
+            </div>
+            <div class="grid clothing-grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4" id="clothing-grid">
+                <!-- 动态生成的衣物卡片 -->
+            </div>
+        </section>
+    </main>
+    <!-- 底部导航 -->
+    <nav class="fixed bottom-0 w-full bg-white shadow-lg border-t border-gray-200">
+        <div class="container mx-auto px-4 py-2">
+            <div class="flex justify-around">
+                <a href="#" class="flex flex-col items-center text-indigo-600">
+                    <i class="fas fa-home text-xl"></i>
+                    <span class="text-xs mt-1">首页</span>
+                </a>
+                <a href="#" class="flex flex-col items-center text-gray-500">
+                    <i class="fas fa-calendar-alt text-xl"></i>
+                    <span class="text-xs mt-1">日历</span>
+                </a>
+                <a href="#" class="flex flex-col items-center text-gray-500">
+                    <i class="fas fa-star text-xl"></i>
+                    <span class="text-xs mt-1">收藏</span>
+                </a>
+                <a href="#" class="flex flex-col items-center text-gray-500">
+                    <i class="fas fa-cog text-xl"></i>
+                    <span class="text-xs mt-1">设置</span>
+                </a>
+            </div>
+        </div>
+    </nav>
+    <!-- 添加衣物模态框 -->
+    <div id="add-modal" class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden flex items-center justify-center">
+        <div class="bg-white rounded-xl w-full max-w-md mx-4 p-6 transform transition-all fade-in">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-bold text-gray-800">添加新衣物</h3>
+                <button id="close-modal" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <form id="clothing-form" class="space-y-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">衣物名称</label>
+                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="例如: 蓝色条纹衬衫" required>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">衣物类型</label>
+                    <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
+                        <option value="">选择类型</option>
+                        <option value="top">上衣</option>
+                        <option value="bottom">下装</option>
+                        <option value="shoes">鞋子</option>
+                        <option value="accessory">配饰</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">季节</label>
+                    <div class="flex space-x-2">
+                        <label class="inline-flex items-center">
+                            <input type="checkbox" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" value="spring">
+                            <span class="ml-2 text-sm">春</span>
+                        </label>
+                        <label class="inline-flex items-center">
+                            <input type="checkbox" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" value="summer">
+                            <span class="ml-2 text-sm">夏</span>
+                        </label>
+                        <label class="inline-flex items-center">
+                            <input type="checkbox" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" value="autumn">
+                            <span class="ml-2 text-sm">秋</span>
+                        </label>
+                        <label class="inline-flex items-center">
+                            <input type="checkbox" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" value="winter">
+                            <span class="ml-2 text-sm">冬</span>
+                        </label>
+                    </div>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">颜色</label>
+                    <div class="flex flex-wrap gap-2">
+                        <button type="button" class="color-option w-8 h-8 rounded-full bg-red-500 border-2 border-transparent" data-color="red"></button>
+                        <button type="button" class="color-option w-8 h-8 rounded-full bg-blue-500 border-2 border-transparent" data-color="blue"></button>
+                        <button type="button" class="color-option w-8 h-8 rounded-full bg-green-500 border-2 border-transparent" data-color="green"></button>
+                        <button type="button" class="color-option w-8 h-8 rounded-full bg-yellow-500 border-2 border-transparent" data-color="yellow"></button>
+                        <button type="button" class="color-option w-8 h-8 rounded-full bg-purple-500 border-2 border-transparent" data-color="purple"></button>
+                        <button type="button" class="color-option w-8 h-8 rounded-full bg-pink-500 border-2 border-transparent" data-color="pink"></button>
+                        <button type="button" class="color-option w-8 h-8 rounded-full bg-gray-500 border-2 border-transparent" data-color="gray"></button>
+                        <button type="button" class="color-option w-8 h-8 rounded-full bg-black border-2 border-transparent" data-color="black"></button>
+                        <button type="button" class="color-option w-8 h-8 rounded-full bg-white border-2 border-gray-300" data-color="white"></button>
+                    </div>
+                    <input type="hidden" id="selected-color" name="color">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">上传图片</label>
+                    <div class="flex items-center justify-center w-full">
+                        <label class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
+                            <div class="flex flex-col items-center justify-center pt-5 pb-6">
+                                <i class="fas fa-cloud-upload-alt text-gray-400 text-2xl mb-2"></i>
+                                <p class="mb-2 text-sm text-gray-500">点击上传或拖拽图片</p>
+                                <p class="text-xs text-gray-500">PNG, JPG (最大2MB)</p>
+                            </div>
+                            <input type="file" class="hidden" accept="image/*">
+                        </label>
+                    </div>
+                </div>
+                <div class="pt-2">
+                    <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition">
+                        添加衣物
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+    <!-- 衣物详情模态框 -->
+    <div id="detail-modal" class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden flex items-center justify-center">
+        <div class="bg-white rounded-xl w-full max-w-md mx-4 p-6 transform transition-all fade-in">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-bold text-gray-800" id="detail-title">衣物详情</h3>
+                <button id="close-detail" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="mb-4">
+                <div class="w-full h-48 bg-gray-200 rounded-lg mb-3 overflow-hidden" id="detail-image">
+                    <!-- 图片会通过JS动态添加 -->
+                </div>
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <p class="text-sm text-gray-500">类型</p>
+                        <p class="font-medium" id="detail-type">上衣</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-500">颜色</p>
+                        <p class="font-medium" id="detail-color">蓝色</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-500">季节</p>
+                        <p class="font-medium" id="detail-season">春/夏</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-500">添加日期</p>
+                        <p class="font-medium" id="detail-date">2023-05-15</p>
+                    </div>
+                </div>
+            </div>
+            <div class="flex space-x-2 pt-4 border-t border-gray-200">
+                <button class="flex-1 bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition">
+                    <i class="fas fa-star mr-2"></i> 收藏
+                </button>
+                <button class="flex-1 bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition">
+                    <i class="fas fa-trash-alt mr-2"></i> 删除
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // 模拟数据
+        const clothingItems = [
+            {
+                id: 1,
+                name: "蓝色条纹衬衫",
+                type: "top",
+                color: "blue",
+                seasons: ["spring", "autumn"],
+                image: "https://images.unsplash.com/photo-1598033129183-c4f50c736e10?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80",
+                addedDate: "2023-05-10"
+            },
+            {
+                id: 2,
+                name: "黑色休闲裤",
+                type: "bottom",
+                color: "black",
+                seasons: ["spring", "autumn", "winter"],
+                image: "https://images.unsplash.com/photo-1473966968600-fa801b869a1a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80",
+                addedDate: "2023-04-15"
+            },
+            {
+                id: 3,
+                name: "白色运动鞋",
+                type: "shoes",
+                color: "white",
+                seasons: ["spring", "summer", "autumn"],
+                image: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80",
+                addedDate: "2023-03-20"
+            },
+            {
+                id: 4,
+                name: "红色T恤",
+                type: "top",
+                color: "red",
+                seasons: ["summer"],
+                image: "https://images.unsplash.com/photo-1527719327859-c6ce80353573?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80",
+                addedDate: "2023-06-05"
+            },
+            {
+                id: 5,
+                name: "牛仔短裤",
+                type: "bottom",
+                color: "blue",
+                seasons: ["summer"],
+                image: "https://images.unsplash.com/photo-1604671801908-6f0c6a092c05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80",
+                addedDate: "2023-07-12"
+            },
+            {
+                id: 6,
+                name: "灰色针织帽",
+                type: "accessory",
+                color: "gray",
+                seasons: ["autumn", "winter"],
+                image: "https://images.unsplash.com/photo-1534215754734-18e55d13e346?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80",
+                addedDate: "2023-01-30"
+            }
+        ];
+        // 模拟穿搭推荐
+        const outfitRecommendations = [
+            {
+                id: 1,
+                name: "夏日休闲",
+                items: [1, 5, 3],
+                occasion: "日常"
+            },
+            {
+                id: 2,
+                name: "春秋通勤",
+                items: [1, 2, 3],
+                occasion: "工作"
+            },
+            {
+                id: 3,
+                name: "活力夏日",
+                items: [4, 5, 3],
+                occasion: "约会"
+            }
+        ];
+        // DOM元素
+        const clothingGrid = document.getElementById('clothing-grid');
+        const outfitRecommendationsEl = document.getElementById('outfit-recommendations');
+        const filterButtons = document.querySelectorAll('.filter-btn');
+        const addModal = document.getElementById('add-modal');
+        const detailModal = document.getElementById('detail-modal');
+        const addButton = document.getElementById('add-clothing');
+        const closeModal = document.getElementById('close-modal');
+        const closeDetail = document.getElementById('close-detail');
+        const colorOptions = document.querySelectorAll('.color-option');
+        const selectedColor = document.getElementById('selected-color');
+        const clothingForm = document.getElementById('clothing-form');
+        // 初始化页面
+        document.addEventListener('DOMContentLoaded', () => {
+            renderClothingItems();
+            renderOutfitRecommendations();
+            setupEventListeners();
+        });
+        // 渲染衣物列表
+        function renderClothingItems(filter = 'all') {
+            clothingGrid.innerHTML = '';
+            const filteredItems = filter === 'all'
+                ? clothingItems
+                : clothingItems.filter(item => item.type === filter);
+            filteredItems.forEach(item => {
+                const card = document.createElement('div');
+                card.className = 'clothing-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300 cursor-pointer';
+                card.dataset.id = item.id;
+                // 根据颜色设置卡片边框
+                let borderClass = '';
+                switch(item.color) {
+                    case 'red': borderClass = 'border-red-500'; break;
+                    case 'blue': borderClass = 'border-blue-500'; break;
+                    case 'green': borderClass = 'border-green-500'; break;
+                    case 'yellow': borderClass = 'border-yellow-500'; break;
+                    case 'purple': borderClass = 'border-purple-500'; break;
+                    case 'pink': borderClass = 'border-pink-500'; break;
+                    case 'gray': borderClass = 'border-gray-500'; break;
+                    case 'black': borderClass = 'border-black'; break;
+                    case 'white': borderClass = 'border-gray-300'; break;
+                }
+                card.innerHTML = `
+                    <div class="relative pb-full">
+                        <img src="${item.image}" alt="${item.name}" class="absolute h-full w-full object-cover">
+                    </div>
+                    <div class="p-3 border-t-4 ${borderClass}">
+                        <h3 class="font-medium text-gray-800 truncate">${item.name}</h3>
+                        <div class="flex justify-between items-center mt-1">
+                            <span class="text-xs text-gray-500 capitalize">${item.type}</span>
+                            <button class="text-gray-400 hover:text-indigo-600">
+                                <i class="fas fa-ellipsis-h"></i>
+                            </button>
+                        </div>
+                    </div>
+                `;
+                clothingGrid.appendChild(card);
+            });
+        }
+        // 渲染穿搭推荐
+        function renderOutfitRecommendations() {
+            outfitRecommendationsEl.innerHTML = '';
+            outfitRecommendations.forEach(outfit => {
+                const outfitEl = document.createElement('div');
+                outfitEl.className = 'flex-shrink-0 w-48 bg-white bg-opacity-20 rounded-lg p-3 backdrop-blur-sm';
+                outfitEl.dataset.id = outfit.id;
+                // 获取推荐穿搭中的衣物
+                const outfitItems = outfit.items.map(id =>
+                    clothingItems.find(item => item.id === id)
+                );
+                outfitEl.innerHTML = `
+                    <h3 class="font-bold mb-2">${outfit.name}</h3>
+                    <p class="text-xs opacity-80 mb-3">适合: ${outfit.occasion}</p>
+                    <div class="flex space-x-2">
+                        ${outfitItems.map(item => `
+                            <div class="w-10 h-10 rounded-full overflow-hidden border-2 border-white">
+                                <img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover">
+                            </div>
+                        `).join('')}
+                    </div>
+                    <button class="mt-3 w-full bg-white text-indigo-600 py-1 rounded-full text-xs font-medium">
+                        查看搭配
+                    </button>
+                `;
+                outfitRecommendationsEl.appendChild(outfitEl);
+            });
+        }
+        // 设置事件监听器
+        function setupEventListeners() {
+            // 筛选按钮
+            filterButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    filterButtons.forEach(btn => {
+                        btn.classList.remove('bg-indigo-600', 'text-white');
+                        btn.classList.add('bg-white', 'text-gray-700', 'shadow');
+                    });
+                    button.classList.remove('bg-white', 'text-gray-700', 'shadow');
+                    button.classList.add('bg-indigo-600', 'text-white');
+                    const filter = button.dataset.category;
+                    renderClothingItems(filter);
+                });
+            });
+            // 添加衣物按钮
+            addButton.addEventListener('click', () => {
+                addModal.classList.remove('hidden');
+            });
+            // 关闭模态框
+            closeModal.addEventListener('click', () => {
+                addModal.classList.add('hidden');
+            });
+            closeDetail.addEventListener('click', () => {
+                detailModal.classList.add('hidden');
+            });
+            // 颜色选择
+            colorOptions.forEach(option => {
+                option.addEventListener('click', () => {
+                    colorOptions.forEach(opt => {
+                        opt.classList.remove('border-indigo-600', 'border-2');
+                    });
+                    option.classList.add('border-indigo-600', 'border-2');
+                    selectedColor.value = option.dataset.color;
+                });
+            });
+            // 衣物卡片点击
+            document.addEventListener('click', (e) => {
+                const card = e.target.closest('.clothing-card');
+                if (card) {
+                    const id = parseInt(card.dataset.id);
+                    showClothingDetail(id);
+                }
+            });
+            // 表单提交
+            clothingForm.addEventListener('submit', (e) => {
+                e.preventDefault();
+                // 这里应该是实际的表单处理逻辑
+                alert('衣物已添加!');
+                addModal.classList.add('hidden');
+            });
+        }
+        // 显示衣物详情
+        function showClothingDetail(id) {
+            const item = clothingItems.find(item => item.id === id);
+            if (!item) return;
+            // 更新模态框内容
+            document.getElementById('detail-title').textContent = item.name;
+            document.getElementById('detail-type').textContent = getTypeName(item.type);
+            document.getElementById('detail-color').textContent = getColorName(item.color);
+            document.getElementById('detail-season').textContent = getSeasonNames(item.seasons);
+            document.getElementById('detail-date').textContent = item.addedDate;
+            // 设置图片
+            const imageContainer = document.getElementById('detail-image');
+            imageContainer.innerHTML = `<img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover">`;
+            // 显示模态框
+            detailModal.classList.remove('hidden');
+        }
+        // 辅助函数
+        function getTypeName(type) {
+            const types = {
+                'top': '上衣',
+                'bottom': '下装',
+                'shoes': '鞋子',
+                'accessory': '配饰'
+            };
+            return types[type] || type;
+        }
+        function getColorName(color) {
+            const colors = {
+                'red': '红色',
+                'blue': '蓝色',
+                'green': '绿色',
+                'yellow': '黄色',
+                'purple': '紫色',
+                'pink': '粉色',
+                'gray': '灰色',
+                'black': '黑色',
+                'white': '白色'
+            };
+            return colors[color] || color;
+        }
+        function getSeasonNames(seasons) {
+            const seasonNames = {
+                'spring': '春',
+                'summer': '夏',
+                'autumn': '秋',
+                'winter': '冬'
+            };
+            return seasons.map(season => seasonNames[season]).join('/');
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dachen159/yigui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>