Hugging Face's logo

Spaces:
acidsound
/
snapfind
Running

App Files Community
snapfind / index.html
acidsound's picture
acidsound
Add 3 files
5eeff73 verified
raw
history blame contribute delete
37.5 kB
<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>SnapFind - μ†Œμ§€ν’ˆ 관리 μ‹œμŠ€ν…œ</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>
 .fade-in {
 animation: fadeIn 0.3s ease-in-out;
 }
 @keyframes fadeIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
 }
 .item-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
 }
 .image-preview {
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;
 }
 .progress-bar {
 transition: width 0.3s ease;
 }
 .category-chip {
 transition: all 0.2s ease;
 }
 .category-chip:hover {
 transform: scale(1.05);
 }
 .floating-btn {
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }
 .search-bar:focus {
 outline: none;
 box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
 }
 </style>
</head>
<body class="bg-gray-50 min-h-screen">
 <!-- Navigation -->
 <nav class="bg-indigo-600 text-white shadow-lg sticky top-0 z-50">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex justify-between h-16 items-center">
 <div class="flex items-center">
 <i class="fas fa-camera-retro text-2xl mr-2"></i>
 <span class="text-xl font-bold">SnapFind</span>
 </div>
 <div class="hidden md:block">
 <div class="ml-10 flex items-baseline space-x-4">
 <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-indigo-700">ν™ˆ</a>
 <a href="#add-item" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-indigo-500">μ•„μ΄ν…œ μΆ”κ°€</a>
 <a href="#items" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-indigo-500">λ‚΄ μ†Œμ§€ν’ˆ</a>
 <a href="#statistics" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-indigo-500">톡계</a>
 </div>
 </div>
 <div class="md:hidden">
 <button id="mobile-menu-button" class="p-2 rounded-md hover:bg-indigo-500 focus:outline-none">
 <i class="fas fa-bars"></i>
 </button>
 </div>
 </div>
 </div>
 <!-- Mobile menu -->
 <div id="mobile-menu" class="hidden md:hidden bg-indigo-700 pb-3">
 <div class="px-2 pt-2 space-y-1">
 <a href="#" class="block px-3 py-2 rounded-md text-base font-medium bg-indigo-600">ν™ˆ</a>
 <a href="#add-item" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-indigo-500">μ•„μ΄ν…œ μΆ”κ°€</a>
 <a href="#items" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-indigo-500">λ‚΄ μ†Œμ§€ν’ˆ</a>
 <a href="#statistics" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-indigo-500">톡계</a>
 </div>
 </div>
 </nav>
<!-- Main Content -->
 <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
 <!-- Hero Section -->
 <section class="text-center mb-12 fade-in">
 <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">λ‹Ήμ‹ μ˜ μ†Œμ§€ν’ˆμ„ μ‰½κ²Œ μ°Ύμ•„λ³΄μ„Έμš”</h1>
 <p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">사진을 찍어 λ“±λ‘ν•˜λ©΄ AIκ°€ μžλ™μœΌλ‘œ λΆ„λ₯˜ν•΄μ£ΌλŠ” 슀마트 μ†Œμ§€ν’ˆ 관리 μ‹œμŠ€ν…œ</p>
 <div class="flex justify-center space-x-4">
 <a href="#add-item" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">
 <i class="fas fa-plus mr-2"></i>μ•„μ΄ν…œ μΆ”κ°€ν•˜κΈ°
 </a>
 <a href="#how-it-works" class="bg-white hover:bg-gray-100 text-indigo-600 border border-indigo-600 px-6 py-3 rounded-lg font-medium transition duration-300">
 <i class="fas fa-question-circle mr-2"></i>μ‚¬μš© 방법
 </a>
 </div>
 </section>
<!-- How it works section -->
 <section id="how-it-works" class="mb-16 fade-in">
 <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">SnapFindλŠ” μ–΄λ–»κ²Œ μž‘λ™ν•˜λ‚˜μš”?</h2>
 <div class="grid md:grid-cols-3 gap-8">
 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300">
 <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
 <i class="fas fa-camera text-indigo-600 text-2xl"></i>
 </div>
 <h3 class="text-xl font-semibold text-center mb-2">1. 사진 촬영</h3>
 <p class="text-gray-600 text-center">μ†Œμ§€ν’ˆμ˜ 사진을 μ°κ±°λ‚˜ κ°€λŸ¬λ¦¬μ—μ„œ μ„ νƒν•˜μ„Έμš”</p>
 </div>
 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300">
 <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
 <i class="fas fa-robot text-indigo-600 text-2xl"></i>
 </div>
 <h3 class="text-xl font-semibold text-center mb-2">2. AI 뢄석</h3>
 <p class="text-gray-600 text-center">AIκ°€ μžλ™μœΌλ‘œ 물건을 μΈμ‹ν•˜κ³  λΆ„λ₯˜ν•΄μ€λ‹ˆλ‹€</p>
 </div>
 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300">
 <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
 <i class="fas fa-search text-indigo-600 text-2xl"></i>
 </div>
 <h3 class="text-xl font-semibold text-center mb-2">3. μ‰½κ²Œ μ°ΎκΈ°</h3>
 <p class="text-gray-600 text-center">κ²€μƒ‰μ΄λ‚˜ ν•„ν„°λ§μœΌλ‘œ μ†Œμ§€ν’ˆμ„ λΉ λ₯΄κ²Œ 찾을 수 μžˆμŠ΅λ‹ˆλ‹€</p>
 </div>
 </div>
 </section>
<!-- Add Item Section -->
 <section id="add-item" class="mb-16 fade-in">
 <div class="bg-white rounded-xl shadow-md overflow-hidden">
 <div class="bg-indigo-600 text-white px-6 py-4">
 <h2 class="text-xl font-bold">μƒˆ μ•„μ΄ν…œ μΆ”κ°€</h2>
 </div>
 <div class="p-6">
 <form id="item-form" class="space-y-6">
 <div class="grid md:grid-cols-2 gap-6">
 <div>
 <label for="item-name" class="block text-sm font-medium text-gray-700 mb-1">μ•„μ΄ν…œ 이름</label>
 <input type="text" id="item-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="예: μ• ν”Œ μ›ŒμΉ˜" required>
 </div>
 <div>
 <label for="item-category" class="block text-sm font-medium text-gray-700 mb-1">μΉ΄ν…Œκ³ λ¦¬</label>
 <select id="item-category" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
 <option value="">μΉ΄ν…Œκ³ λ¦¬ 선택</option>
 <option value="μ „μžκΈ°κΈ°">μ „μžκΈ°κΈ°</option>
 <option value="의λ₯˜">의λ₯˜</option>
 <option value="μ•…μ„Έμ„œλ¦¬">μ•…μ„Έμ„œλ¦¬</option>
 <option value="문ꡬ">문ꡬ</option>
 <option value="ν™”μž₯ν’ˆ">ν™”μž₯ν’ˆ</option>
 <option value="기타">기타</option>
 </select>
 </div>
 </div>
<div>
 <label class="block text-sm font-medium text-gray-700 mb-1">μ•„μ΄ν…œ 사진</label>
 <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg">
 <div class="space-y-1 text-center">
 <div class="flex text-sm text-gray-600">
 <label for="item-image" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none">
 <span>사진 μ—…λ‘œλ“œ</span>
 <input id="item-image" name="item-image" type="file" class="sr-only" accept="image/*">
 </label>
 <p class="pl-1">λ˜λŠ” λ“œλž˜κ·Έ μ•€ λ“œλ‘­</p>
 </div>
 <p class="text-xs text-gray-500">PNG, JPG, GIF μ΅œλŒ€ 10MB</p>
 </div>
 </div>
 <div id="image-preview" class="mt-4 hidden w-full h-48 bg-gray-100 rounded-lg image-preview"></div>
 </div>
<div>
 <label for="item-location" class="block text-sm font-medium text-gray-700 mb-1">보관 μœ„μΉ˜</label>
 <input type="text" id="item-location" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="예: μΉ¨μ‹€ μ„œλžμž₯ 2번 μ„œλž">
 </div>
<div>
 <label for="item-notes" class="block text-sm font-medium text-gray-700 mb-1">λ©”λͺ¨</label>
 <textarea id="item-notes" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="μΆ”κ°€λ‘œ 기둝할 λ‚΄μš©μ΄ μžˆλ‹€λ©΄ μž…λ ₯ν•΄μ£Όμ„Έμš”"></textarea>
 </div>
<div class="flex justify-end">
 <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300">
 <i class="fas fa-save mr-2"></i>μ €μž₯ν•˜κΈ°
 </button>
 </div>
 </form>
 </div>
 </div>
 </section>
<!-- Items Section -->
 <section id="items" class="mb-16 fade-in">
 <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
 <h2 class="text-2xl font-bold text-gray-800 mb-4 md:mb-0">λ‚΄ μ†Œμ§€ν’ˆ</h2>
 <div class="w-full md:w-auto flex space-x-2">
 <div class="relative flex-grow md:w-64">
 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
 <i class="fas fa-search text-gray-400"></i>
 </div>
 <input type="text" id="search-bar" class="search-bar block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" placeholder="μ•„μ΄ν…œ 검색...">
 </div>
 <select id="filter-category" class="px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
 <option value="">λͺ¨λ“  μΉ΄ν…Œκ³ λ¦¬</option>
 <option value="μ „μžκΈ°κΈ°">μ „μžκΈ°κΈ°</option>
 <option value="의λ₯˜">의λ₯˜</option>
 <option value="μ•…μ„Έμ„œλ¦¬">μ•…μ„Έμ„œλ¦¬</option>
 <option value="문ꡬ">문ꡬ</option>
 <option value="ν™”μž₯ν’ˆ">ν™”μž₯ν’ˆ</option>
 <option value="기타">기타</option>
 </select>
 </div>
 </div>
<!-- Category Chips -->
 <div class="flex flex-wrap gap-2 mb-6">
 <button class="category-chip bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-medium hover:bg-indigo-200">
 전체
 </button>
 <button class="category-chip bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm font-medium hover:bg-gray-200">
 μ „μžκΈ°κΈ°
 </button>
 <button class="category-chip bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm font-medium hover:bg-gray-200">
 의λ₯˜
 </button>
 <button class="category-chip bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm font-medium hover:bg-gray-200">
 μ•…μ„Έμ„œλ¦¬
 </button>
 <button class="category-chip bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm font-medium hover:bg-gray-200">
 문ꡬ
 </button>
 <button class="category-chip bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm font-medium hover:bg-gray-200">
 ν™”μž₯ν’ˆ
 </button>
 <button class="category-chip bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm font-medium hover:bg-gray-200">
 기타
 </button>
 </div>
<!-- Items Grid -->
 <div id="items-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
 <!-- Sample Item 1 -->
 <div class="item-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
 <div class="h-48 bg-gray-200 flex items-center justify-center">
 <i class="fas fa-laptop text-5xl text-gray-400"></i>
 </div>
 <div class="p-4">
 <div class="flex justify-between items-start">
 <h3 class="text-lg font-semibold text-gray-800">λ§₯뢁 ν”„λ‘œ 16인치</h3>
 <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">μ „μžκΈ°κΈ°</span>
 </div>
 <p class="text-gray-600 text-sm mt-1"><i class="fas fa-map-marker-alt mr-1 text-gray-400"></i>μ„œμž¬ 책상 μœ„</p>
 <p class="text-gray-500 text-sm mt-2">2021λ…„ λͺ¨λΈ, 싀버 색상</p>
 <div class="flex justify-between items-center mt-4">
 <span class="text-xs text-gray-400">2023.05.15 μΆ”κ°€</span>
 <div class="flex space-x-2">
 <button class="text-indigo-600 hover:text-indigo-800">
 <i class="fas fa-edit"></i>
 </button>
 <button class="text-red-600 hover:text-red-800">
 <i class="fas fa-trash"></i>
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Sample Item 2 -->
 <div class="item-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
 <div class="h-48 bg-gray-200 flex items-center justify-center">
 <i class="fas fa-tshirt text-5xl text-gray-400"></i>
 </div>
 <div class="p-4">
 <div class="flex justify-between items-start">
 <h3 class="text-lg font-semibold text-gray-800">검정색 가디건</h3>
 <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">의λ₯˜</span>
 </div>
 <p class="text-gray-600 text-sm mt-1"><i class="fas fa-map-marker-alt mr-1 text-gray-400"></i>옷μž₯ 상단 μ„œλž</p>
 <p class="text-gray-500 text-sm mt-2">κ²¨μšΈμ— 자주 μž…λŠ” μ•„μ΄ν…œ</p>
 <div class="flex justify-between items-center mt-4">
 <span class="text-xs text-gray-400">2023.02.20 μΆ”κ°€</span>
 <div class="flex space-x-2">
 <button class="text-indigo-600 hover:text-indigo-800">
 <i class="fas fa-edit"></i>
 </button>
 <button class="text-red-600 hover:text-red-800">
 <i class="fas fa-trash"></i>
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Sample Item 3 -->
 <div class="item-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
 <div class="h-48 bg-gray-200 flex items-center justify-center">
 <i class="fas fa-headphones text-5xl text-gray-400"></i>
 </div>
 <div class="p-4">
 <div class="flex justify-between items-start">
 <h3 class="text-lg font-semibold text-gray-800">μ†Œλ‹ˆ ν—€λ“œν°</h3>
 <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">μ•…μ„Έμ„œλ¦¬</span>
 </div>
 <p class="text-gray-600 text-sm mt-1"><i class="fas fa-map-marker-alt mr-1 text-gray-400"></i>μΉ¨μ‹€ μ˜† νƒμž</p>
 <p class="text-gray-500 text-sm mt-2">WH-1000XM4 λͺ¨λΈ, λ…Έμ΄μ¦ˆ μΊ”μŠ¬λ§</p>
 <div class="flex justify-between items-center mt-4">
 <span class="text-xs text-gray-400">2023.04.10 μΆ”κ°€</span>
 <div class="flex space-x-2">
 <button class="text-indigo-600 hover:text-indigo-800">
 <i class="fas fa-edit"></i>
 </button>
 <button class="text-red-600 hover:text-red-800">
 <i class="fas fa-trash"></i>
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Pagination -->
 <div class="flex justify-center mt-8">
 <nav class="inline-flex rounded-md shadow">
 <a href="#" class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
 <i class="fas fa-chevron-left"></i>
 </a>
 <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-indigo-600 font-medium">1</a>
 <a href="#" class="px-3 py-2 border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">2</a>
 <a href="#" class="px-3 py-2 border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">3</a>
 <a href="#" class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
 <i class="fas fa-chevron-right"></i>
 </a>
 </nav>
 </div>
 </section>
<!-- Statistics Section -->
 <section id="statistics" class="mb-16 fade-in">
 <h2 class="text-2xl font-bold text-gray-800 mb-6">μ†Œμ§€ν’ˆ 톡계</h2>
<div class="grid md:grid-cols-2 gap-6 mb-8">
 <!-- Category Distribution -->
 <div class="bg-white p-6 rounded-xl shadow-md">
 <h3 class="text-lg font-semibold text-gray-800 mb-4">μΉ΄ν…Œκ³ λ¦¬λ³„ 뢄포</h3>
 <div class="h-64">
 <div class="grid grid-cols-2 gap-4">
 <div>
 <div class="flex items-center mb-2">
 <div class="w-3 h-3 bg-indigo-500 rounded-full mr-2"></div>
 <span class="text-sm">μ „μžκΈ°κΈ°</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-indigo-600 h-2.5 rounded-full progress-bar" style="width: 35%"></div>
 </div>
 <div class="text-right text-xs text-gray-500 mt-1">35% (7개)</div>
 </div>
 <div>
 <div class="flex items-center mb-2">
 <div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
 <span class="text-sm">의λ₯˜</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 25%"></div>
 </div>
 <div class="text-right text-xs text-gray-500 mt-1">25% (5개)</div>
 </div>
 <div>
 <div class="flex items-center mb-2">
 <div class="w-3 h-3 bg-purple-500 rounded-full mr-2"></div>
 <span class="text-sm">μ•…μ„Έμ„œλ¦¬</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-purple-600 h-2.5 rounded-full progress-bar" style="width: 20%"></div>
 </div>
 <div class="text-right text-xs text-gray-500 mt-1">20% (4개)</div>
 </div>
 <div>
 <div class="flex items-center mb-2">
 <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
 <span class="text-sm">문ꡬ</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-green-600 h-2.5 rounded-full progress-bar" style="width: 10%"></div>
 </div>
 <div class="text-right text-xs text-gray-500 mt-1">10% (2개)</div>
 </div>
 <div>
 <div class="flex items-center mb-2">
 <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
 <span class="text-sm">ν™”μž₯ν’ˆ</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-yellow-500 h-2.5 rounded-full progress-bar" style="width: 5%"></div>
 </div>
 <div class="text-right text-xs text-gray-500 mt-1">5% (1개)</div>
 </div>
 <div>
 <div class="flex items-center mb-2">
 <div class="w-3 h-3 bg-gray-500 rounded-full mr-2"></div>
 <span class="text-sm">기타</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-gray-600 h-2.5 rounded-full progress-bar" style="width: 5%"></div>
 </div>
 <div class="text-right text-xs text-gray-500 mt-1">5% (1개)</div>
 </div>
 </div>
 </div>
 </div>
<!-- Recent Activity -->
 <div class="bg-white p-6 rounded-xl shadow-md">
 <h3 class="text-lg font-semibold text-gray-800 mb-4">졜근 ν™œλ™</h3>
 <div class="space-y-4">
 <div class="flex items-start">
 <div class="flex-shrink-0 bg-indigo-100 rounded-full p-2">
 <i class="fas fa-plus text-indigo-600"></i>
 </div>
 <div class="ml-3">
 <p class="text-sm font-medium text-gray-900">μƒˆ μ•„μ΄ν…œ μΆ”κ°€</p>
 <p class="text-sm text-gray-500">λ§₯뢁 ν”„λ‘œ 16인치</p>
 <p class="text-xs text-gray-400 mt-1">2μ‹œκ°„ μ „</p>
 </div>
 </div>
 <div class="flex items-start">
 <div class="flex-shrink-0 bg-blue-100 rounded-full p-2">
 <i class="fas fa-map-marker-alt text-blue-600"></i>
 </div>
 <div class="ml-3">
 <p class="text-sm font-medium text-gray-900">μœ„μΉ˜ λ³€κ²½</p>
 <p class="text-sm text-gray-500">검정색 가디건 β†’ 옷μž₯ 상단 μ„œλž</p>
 <p class="text-xs text-gray-400 mt-1">μ–΄μ œ</p>
 </div>
 </div>
 <div class="flex items-start">
 <div class="flex-shrink-0 bg-purple-100 rounded-full p-2">
 <i class="fas fa-trash text-purple-600"></i>
 </div>
 <div class="ml-3">
 <p class="text-sm font-medium text-gray-900">μ•„μ΄ν…œ μ‚­μ œ</p>
 <p class="text-sm text-gray-500">였래된 슀마트폰</p>
 <p class="text-xs text-gray-400 mt-1">3일 μ „</p>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Storage Locations -->
 <div class="bg-white p-6 rounded-xl shadow-md">
 <h3 class="text-lg font-semibold text-gray-800 mb-4">보관 μœ„μΉ˜λ³„ μ•„μ΄ν…œ 수</h3>
 <div class="overflow-x-auto">
 <table class="min-w-full divide-y divide-gray-200">
 <thead class="bg-gray-50">
 <tr>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">보관 μœ„μΉ˜</th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">μ•„μ΄ν…œ 수</th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">λΉ„μœ¨</th>
 </tr>
 </thead>
 <tbody class="bg-white divide-y divide-gray-200">
 <tr>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">μ„œμž¬ 책상 μœ„</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-indigo-600 h-2.5 rounded-full progress-bar" style="width: 25%"></div>
 </div>
 </td>
 </tr>
 <tr>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">옷μž₯ 상단 μ„œλž</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 20%"></div>
 </div>
 </td>
 </tr>
 <tr>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">μΉ¨μ‹€ μ˜† νƒμž</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-purple-600 h-2.5 rounded-full progress-bar" style="width: 15%"></div>
 </div>
 </td>
 </tr>
 <tr>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">ν˜„κ΄€ μ‹ λ°œμž₯</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="w-full bg-gray-200 rounded-full h-2.5">
 <div class="bg-green-600 h-2.5 rounded-full progress-bar" style="width: 10%"></div>
 </div>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 </section>
 </main>
<!-- Floating Action Button -->
 <button id="floating-btn" class="floating-btn fixed bottom-6 right-6 bg-indigo-600 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:bg-indigo-700 transition duration-300">
 <i class="fas fa-plus text-xl"></i>
 </button>
<!-- Footer -->
 <footer class="bg-gray-800 text-white py-8">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div>
 <h3 class="text-lg font-semibold mb-4">SnapFind</h3>
 <p class="text-gray-400">λ‹Ήμ‹ μ˜ μ†Œμ§€ν’ˆμ„ μ‰½κ²Œ κ΄€λ¦¬ν•˜κ³  찾을 수 μžˆλ„λ‘ λ„μ™€μ£ΌλŠ” μ„œλΉ„μŠ€μž…λ‹ˆλ‹€.</p>
 </div>
 <div>
 <h3 class="text-lg font-semibold mb-4">링크</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white">ν™ˆ</a></li>
 <li><a href="#add-item" class="text-gray-400 hover:text-white">μ•„μ΄ν…œ μΆ”κ°€</a></li>
 <li><a href="#items" class="text-gray-400 hover:text-white">λ‚΄ μ†Œμ§€ν’ˆ</a></li>
 <li><a href="#statistics" class="text-gray-400 hover:text-white">톡계</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-lg font-semibold mb-4">μ—°λ½μ²˜</h3>
 <ul class="space-y-2 text-gray-400">
 <li class="flex items-center"><i class="fas fa-envelope mr-2"></i> contact@snapfind.com</li>
 <li class="flex items-center"><i class="fas fa-phone mr-2"></i> 02-1234-5678</li>
 <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> μ„œμšΈμ‹œ 강남ꡬ ν…Œν—€λž€λ‘œ</li>
 </ul>
 </div>
 </div>
 <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
 <p>Β© 2023 SnapFind. All rights reserved.</p>
 </div>
 </div>
 </footer>
<!-- JavaScript -->
 <script>
 // Mobile menu toggle
 document.getElementById('mobile-menu-button').addEventListener('click', function() {
 const menu = document.getElementById('mobile-menu');
 menu.classList.toggle('hidden');
 });
 // Image preview for item form
 document.getElementById('item-image').addEventListener('change', function(e) {
 const preview = document.getElementById('image-preview');
 if (e.target.files.length > 0) {
 const reader = new FileReader();
 reader.onload = function(event) {
 preview.style.backgroundImage = `url(${event.target.result})`;
 preview.classList.remove('hidden');
 };
 reader.readAsDataURL(e.target.files[0]);
 } else {
 preview.classList.add('hidden');
 }
 });
 // Form submission
 document.getElementById('item-form').addEventListener('submit', function(e) {
 e.preventDefault();
 alert('μ•„μ΄ν…œμ΄ μ„±κ³΅μ μœΌλ‘œ μ €μž₯λ˜μ—ˆμŠ΅λ‹ˆλ‹€!');
 this.reset();
 document.getElementById('image-preview').classList.add('hidden');
 });
 // Floating button click
 document.getElementById('floating-btn').addEventListener('click', function() {
 window.location.href = '#add-item';
 document.getElementById('item-name').focus();
 });
 // Category chips click
 document.querySelectorAll('.category-chip').forEach(chip => {
 chip.addEventListener('click', function() {
 // Remove active state from all chips
 document.querySelectorAll('.category-chip').forEach(c => {
 c.classList.remove('bg-indigo-100', 'text-indigo-800');
 c.classList.add('bg-gray-100', 'text-gray-800');
 });
// Add active state to clicked chip
 this.classList.remove('bg-gray-100', 'text-gray-800');
 this.classList.add('bg-indigo-100', 'text-indigo-800');
// Here you would filter items based on category
 // For demo, we'll just show an alert
 const category = this.textContent.trim();
 if (category === '전체') {
 alert('λͺ¨λ“  μ•„μ΄ν…œμ„ ν‘œμ‹œν•©λ‹ˆλ‹€');
 } else {
 alert(`${category} μΉ΄ν…Œκ³ λ¦¬μ˜ μ•„μ΄ν…œμ„ ν•„ν„°λ§ν•©λ‹ˆλ‹€`);
 }
 });
 });
 // Search functionality
 document.getElementById('search-bar').addEventListener('input', function() {
 const searchTerm = this.value.toLowerCase();
 // Here you would filter items based on search term
 // For demo, we'll just log it
 console.log(`Searching for: ${searchTerm}`);
 });
 // Filter by category
 document.getElementById('filter-category').addEventListener('change', function() {
 const category = this.value;
 // Here you would filter items based on selected category
 // For demo, we'll just log it
 console.log(`Filtering by category: ${category}`);
 });
 </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=acidsound/snapfind" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>