Spaces:

matthewspring
/

anycoder-1ecc8cf2

Running

App Files Files Community

matthewspring commited on Feb 4

Commit

299d4e2

verified ·

1 Parent(s): ed60a98

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +722 -19

index.html CHANGED Viewed

@@ -1,19 +1,722 @@
-<!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="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MissingFair | Lost Items Dashboard</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif'],
+                        display: ['Space Grotesk', 'sans-serif'],
+                    },
+                    colors: {
+                        glass: 'rgba(255, 255, 255, 0.05)',
+                        glassBorder: 'rgba(255, 255, 255, 0.1)',
+                        accent: '#6366f1',
+                        accentHover: '#4f46e5',
+                    },
+                    animation: {
+                        'float': 'float 6s ease-in-out infinite',
+                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                        'slide-up': 'slideUp 0.5s ease-out forwards',
+                        'fade-in': 'fadeIn 0.5s ease-out forwards',
+                    },
+                    keyframes: {
+                        float: {
+                            '0%, 100%': { transform: 'translateY(0)' },
+                            '50%': { transform: 'translateY(-20px)' },
+                        },
+                        slideUp: {
+                            '0%': { opacity: '0', transform: 'translateY(20px)' },
+                            '100%': { opacity: '1', transform: 'translateY(0)' },
+                        },
+                        fadeIn: {
+                            '0%': { opacity: '0' },
+                            '100%': { opacity: '1' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body {
+            background-color: #0f172a;
+            background-image:
+                radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
+                radial-gradient(at 100% 0%, rgba(168, 85, 247, 0.15) 0px, transparent 50%),
+                radial-gradient(at 100% 100%, rgba(236, 72, 153, 0.15) 0px, transparent 50%);
+            background-attachment: fixed;
+            min-height: 100vh;
+        }
+        .glass-panel {
+            background: rgba(30, 41, 59, 0.7);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .custom-scrollbar::-webkit-scrollbar {
+            width: 6px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 3px;
+        }
+        .grid-pattern {
+            background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+            background-size: 30px 30px;
+        }
+        .item-enter {
+            animation: slideUp 0.4s ease-out forwards;
+        }
+    </style>
+</head>
+<body class="text-slate-300 font-sans overflow-x-hidden">
+    <!-- Navbar -->
+    <nav class="fixed w-full z-50 glass-panel border-b border-white/10">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <div class="flex items-center gap-3">
+                    <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center text-white font-bold text-lg">
+                        M
+                    </div>
+                    <span class="font-display font-bold text-xl text-white tracking-tight">MissingFair</span>
+                </div>
+                <div class="hidden md:block">
+                    <div class="flex items-baseline space-x-4">
+                        <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-white/10 transition-colors">Dashboard</a>
+                        <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-white/10 transition-colors">Reports</a>
+                        <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-white/10 transition-colors">Settings</a>
+                    </div>
+                </div>
+                <div class="flex items-center gap-4">
+                    <button class="relative p-2 text-gray-400 hover:text-white transition-colors">
+                        <i class="fa-solid fa-bell text-lg"></i>
+                        <span class="absolute top-1 right-1 w-2 h-2 bg-rose-500 rounded-full animate-pulse"></span>
+                    </button>
+                    <div class="h-8 w-8 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500 border-2 border-white/20 cursor-pointer"></div>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <main class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+        <!-- Hero Section -->
+        <div class="relative rounded-3xl overflow-hidden mb-10 border border-white/10 shadow-2xl">
+            <div class="absolute inset-0 bg-gradient-to-r from-indigo-900/90 to-purple-900/90 z-10"></div>
+            <div class="absolute inset-0 grid-pattern opacity-30"></div>
+            <!-- Animated Blobs -->
+            <div class="absolute top-0 left-0 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-float"></div>
+            <div class="absolute bottom-0 right-0 w-72 h-72 bg-indigo-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-float" style="animation-delay: 2s;"></div>
+            <div class="relative z-20 px-8 py-16 md:py-20 md:px-12 text-center md:text-left flex flex-col md:flex-row items-center justify-between gap-8">
+                <div class="max-w-2xl">
+                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/10 text-xs font-medium text-indigo-200 mb-6 backdrop-blur-sm">
+                        <span class="relative flex h-2 w-2">
+                          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
+                          <span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
+                        </span>
+                        Live System Active
+                    </div>
+                    <h1 class="text-4xl md:text-6xl font-display font-bold text-white mb-6 leading-tight">
+                        Find What You've <br/>
+                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-cyan-400">Lost & Forgotten</span>
+                    </h1>
+                    <p class="text-lg text-slate-300 mb-8 max-w-xl leading-relaxed">
+                        The modern lost & found platform. Report lost items, search the database, and reunite people with their belongings using our intelligent matching system.
+                    </p>
+                    <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
+                        <button onclick="scrollToItems()" class="px-8 py-4 bg-white text-indigo-900 rounded-xl font-bold text-lg hover:bg-slate-100 transition-all transform hover:scale-105 shadow-lg shadow-indigo-500/20 flex items-center justify-center gap-2">
+                            <i class="fa-solid fa-magnifying-glass"></i> Browse Items
+                        </button>
+                        <button onclick="openReportModal()" class="px-8 py-4 bg-indigo-600/30 backdrop-blur-md border border-indigo-400/30 text-white rounded-xl font-bold text-lg hover:bg-indigo-600/50 transition-all flex items-center justify-center gap-2">
+                            <i class="fa-solid fa-circle-plus"></i> Report Item
+                        </button>
+                    </div>
+                </div>
+                <!-- Visual Indicator -->
+                <div class="hidden lg:block relative w-80 h-80">
+                    <div class="absolute inset-0 bg-gradient-to-tr from-indigo-500 to-purple-500 rounded-full opacity-20 animate-pulse-slow"></div>
+                    <div class="absolute inset-4 glass-panel rounded-full flex items-center justify-center border-2 border-white/20">
+                        <div class="text-center">
+                            <div class="text-5xl font-display font-bold text-white mb-1">1,284</div>
+                            <div class="text-sm text-indigo-200 uppercase tracking-wider">Items Reunited</div>
+                        </div>
+                    </div>
+                    <!-- Orbiting particles -->
+                    <div class="absolute top-0 left-1/2 w-4 h-4 bg-white rounded-full shadow-[0_0_10px_rgba(255,255,255,0.8)] animate-[spin_4s_linear_infinite]" style="transform-origin: 0 160px;"></div>
+                </div>
+            </div>
+        </div>
+        <!-- Stats Row -->
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-10">
+            <div class="glass-panel p-6 rounded-2xl flex items-center gap-4 hover:bg-white/5 transition-colors cursor-default group">
+                <div class="w-12 h-12 rounded-xl bg-blue-500/20 text-blue-400 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
+                    <i class="fa-solid fa-box-open"></i>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-white" id="stat-lost">142</div>
+                    <div class="text-sm text-slate-400">Lost Reports</div>
+                </div>
+            </div>
+            <div class="glass-panel p-6 rounded-2xl flex items-center gap-4 hover:bg-white/5 transition-colors cursor-default group">
+                <div class="w-12 h-12 rounded-xl bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
+                    <i class="fa-solid fa-hand-holding-heart"></i>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-white" id="stat-found">89</div>
+                    <div class="text-sm text-slate-400">Found Items</div>
+                </div>
+            </div>
+            <div class="glass-panel p-6 rounded-2xl flex items-center gap-4 hover:bg-white/5 transition-colors cursor-default group">
+                <div class="w-12 h-12 rounded-xl bg-purple-500/20 text-purple-400 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
+                    <i class="fa-solid fa-check-double"></i>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-white" id="stat-resolved">64</div>
+                    <div class="text-sm text-slate-400">Resolved Cases</div>
+                </div>
+            </div>
+            <div class="glass-panel p-6 rounded-2xl flex items-center gap-4 hover:bg-white/5 transition-colors cursor-default group">
+                <div class="w-12 h-12 rounded-xl bg-rose-500/20 text-rose-400 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
+                    <i class="fa-solid fa-clock"></i>
+                </div>
+                <div>
+                    <div class="text-2xl font-bold text-white">12h</div>
+                    <div class="text-sm text-slate-400">Avg. Response</div>
+                </div>
+            </div>
+        </div>
+        <!-- Controls & Filters -->
+        <div class="flex flex-col md:flex-row justify-between items-center gap-4 mb-6 glass-panel p-4 rounded-2xl sticky top-20 z-30 backdrop-blur-xl border border-white/10 shadow-2xl">
+            <div class="flex gap-2 w-full md:w-auto overflow-x-auto pb-2 md:pb-0 no-scrollbar" id="filter-container">
+                <button onclick="filterItems('all')" class="filter-btn active px-4 py-2 rounded-lg text-sm font-medium bg-white/10 text-white border border-white/10 hover:bg-white/20 transition-all whitespace-nowrap" data-filter="all">All Items</button>
+                <button onclick="filterItems('electronics')" class="filter-btn px-4 py-2 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-white/5 transition-all whitespace-nowrap" data-filter="electronics">Electronics</button>
+                <button onclick="filterItems('accessories')" class="filter-btn px-4 py-2 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-white/5 transition-all whitespace-nowrap" data-filter="accessories">Accessories</button>
+                <button onclick="filterItems('documents')" class="filter-btn px-4 py-2 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-white/5 transition-all whitespace-nowrap" data-filter="documents">Documents</button>
+                <button onclick="filterItems('other')" class="filter-btn px-4 py-2 rounded-lg text-sm font-medium text-slate-400 hover:text-white hover:bg-white/5 transition-all whitespace-nowrap" data-filter="other">Other</button>
+            </div>
+            <div class="flex gap-3 w-full md:w-auto">
+                <div class="relative flex-1 md:w-64">
+                    <i class="fa-solid fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400"></i>
+                    <input type="text" id="searchInput" placeholder="Search items..." class="w-full bg-slate-800/50 border border-white/10 rounded-lg py-2 pl-10 pr-4 text-sm text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-transparent transition-all">
+                </div>
+                <button onclick="toggleView()" id="viewToggle" class="p-2 rounded-lg bg-slate-800/50 border border-white/10 text-slate-400 hover:text-white transition-colors">
+                    <i class="fa-solid fa-list"></i>
+                </button>
+            </div>
+        </div>
+        <!-- Items Grid -->
+        <div id="itemsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            <!-- Items will be injected here by JS -->
+        </div>
+        <!-- Empty State -->
+        <div id="emptyState" class="hidden flex-col items-center justify-center py-20 text-center">
+            <div class="w-24 h-24 rounded-full bg-white/5 flex items-center justify-center mb-6">
+                <i class="fa-solid fa-box-open text-4xl text-slate-600"></i>
+            </div>
+            <h3 class="text-xl font-bold text-white mb-2">No items found</h3>
+            <p class="text-slate-400 max-w-sm">Try adjusting your search or filters to find what you're looking for.</p>
+        </div>
+    </main>
+    <!-- Footer -->
+    <footer class="border-t border-white/10 bg-slate-900/50 backdrop-blur-lg mt-12">
+        <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-4">
+            <div class="flex items-center gap-2">
+                <div class="w-6 h-6 rounded bg-indigo-600 flex items-center justify-center text-white text-xs font-bold">M</div>
+                <span class="text-slate-400 text-sm">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-indigo-400 hover:text-indigo-300 underline">anycoder</a></span>
+            </div>
+            <div class="flex gap-6 text-sm text-slate-500">
+                <a href="#" class="hover:text-slate-300 transition-colors">Privacy</a>
+                <a href="#" class="hover:text-slate-300 transition-colors">Terms</a>
+                <a href="#" class="hover:text-slate-300 transition-colors">Contact</a>
+            </div>
+        </div>
+    </footer>
+    <!-- Item Detail Modal -->
+    <div id="itemModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            <div class="fixed inset-0 bg-slate-900/90 backdrop-blur-sm transition-opacity" aria-hidden="true" onclick="closeModal()"></div>
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+            <div class="inline-block align-bottom glass-panel rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full border border-white/10">
+                <div class="relative h-48 bg-slate-800 overflow-hidden group">
+                    <img id="modalImage" src="" alt="Item" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+                    <div class="absolute inset-0 bg-gradient-to-t from-slate-900 to-transparent"></div>
+                    <button onclick="closeModal()" class="absolute top-4 right-4 w-8 h-8 rounded-full bg-black/50 text-white flex items-center justify-center hover:bg-black/70 transition-colors">
+                        <i class="fa-solid fa-times"></i>
+                    </button>
+                    <span id="modalType" class="absolute bottom-4 left-4 px-3 py-1 rounded-full text-xs font-bold bg-indigo-500 text-white shadow-lg"></span>
+                </div>
+                <div class="p-6">
+                    <div class="flex justify-between items-start mb-4">
+                        <div>
+                            <h3 id="modalTitle" class="text-2xl font-display font-bold text-white mb-1"></h3>
+                            <p id="modalCategory" class="text-sm text-slate-400"></p>
+                        </div>
+                        <div id="modalStatus" class="px-3 py-1 rounded-full text-xs font-bold bg-emerald-500/20 text-emerald-400 border border-emerald-500/20">
+                            Active
+                        </div>
+                    </div>
+                    <div class="space-y-4 mb-6">
+                        <div class="flex items-start gap-3">
+                            <div class="w-8 h-8 rounded-lg bg-slate-800 flex items-center justify-center text-slate-400 flex-shrink-0">
+                                <i class="fa-solid fa-location-dot"></i>
+                            </div>
+                            <div>
+                                <p class="text-xs text-slate-500 uppercase tracking-wider font-semibold">Location</p>
+                                <p id="modalLocation" class="text-slate-200"></p>
+                            </div>
+                        </div>
+                        <div class="flex items-start gap-3">
+                            <div class="w-8 h-8 rounded-lg bg-slate-800 flex items-center justify-center text-slate-400 flex-shrink-0">
+                                <i class="fa-regular fa-calendar"></i>
+                            </div>
+                            <div>
+                                <p class="text-xs text-slate-500 uppercase tracking-wider font-semibold">Date</p>
+                                <p id="modalDate" class="text-slate-200"></p>
+                            </div>
+                        </div>
+                        <div class="flex items-start gap-3">
+                            <div class="w-8 h-8 rounded-lg bg-slate-800 flex items-center justify-center text-slate-400 flex-shrink-0">
+                                <i class="fa-solid fa-align-left"></i>
+                            </div>
+                            <div>
+                                <p class="text-xs text-slate-500 uppercase tracking-wider font-semibold">Description</p>
+                                <p id="modalDesc" class="text-slate-300 text-sm leading-relaxed"></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex gap-3 pt-4 border-t border-white/10">
+                        <button class="flex-1 py-3 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl font-semibold transition-colors shadow-lg shadow-indigo-500/25 flex items-center justify-center gap-2">
+                            <i class="fa-solid fa-envelope"></i> Contact
+                        </button>
+                        <button class="flex-1 py-3 bg-slate-800 hover:bg-slate-700 text-white rounded-xl font-semibold transition-colors border border-white/10 flex items-center justify-center gap-2">
+                            <i class="fa-solid fa-share-nodes"></i> Share
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Report Modal -->
+    <div id="reportModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
+        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+            <div class="fixed inset-0 transition-opacity bg-slate-900/90 backdrop-blur-sm" onclick="closeReportModal()"></div>
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
+            <div class="inline-block w-full max-w-2xl p-0 my-8 overflow-hidden text-left align-middle transition-all transform glass-panel rounded-2xl border border-white/10 shadow-2xl">
+                <div class="px-6 py-4 border-b border-white/10 flex justify-between items-center bg-white/5">
+                    <h3 class="text-lg font-display font-bold text-white">Report Item</h3>
+                    <button onclick="closeReportModal()" class="text-slate-400 hover:text-white transition-colors">
+                        <i class="fa-solid fa-times"></i>
+                    </button>
+                </div>
+                <form id="reportForm" onsubmit="handleReport(event)" class="p-6 space-y-4">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div class="space-y-1">
+                            <label class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Type</label>
+                            <div class="flex gap-2">
+                                <label class="flex-1 cursor-pointer">
+                                    <input type="radio" name="reportType" value="lost" class="peer sr-only" checked>
+                                    <div class="text-center py-2 rounded-lg border border-white/10 bg-white/5 text-slate-300 peer-checked:bg-rose-500/20 peer-checked:border-rose-500/50 peer-checked:text-rose-400 transition-all">Lost</div>
+                                </label>
+                                <label class="flex-1 cursor-pointer">
+                                    <input type="radio" name="reportType" value="found" class="peer sr-only">
+                                    <div class="text-center py-2 rounded-lg border border-white/10 bg-white/5 text-slate-300 peer-checked:bg-emerald-500/20 peer-checked:border-emerald-500/50 peer-checked:text-emerald-400 transition-all">Found</div>
+                                </label>
+                            </div>
+                        </div>
+                        <div class="space-y-1">
+                            <label class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Category</label>
+                            <select name="category" class="w-full bg-slate-800/50 border border-white/10 rounded-lg px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                                <option value="electronics">Electronics</option>
+                                <option value="accessories">Accessories</option>
+                                <option value="documents">Documents</option>
+                                <option value="other">Other</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="space-y-1">
+                        <label class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Title</label>
+                        <input type="text" name="title" required class="w-full bg-slate-800/50 border border-white/10 rounded-lg px-3 py-2 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="e.g. Black Leather Wallet">
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div class="space-y-1">
+                            <label class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Location</label>
+                            <input type="text" name="location" required class="w-full bg-slate-800/50 border border-white/10 rounded-lg px-3 py-2 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="e.g. Library, 2nd Floor">
+                        </div>
+                        <div class="space-y-1">
+                            <label class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Date</label>
+                            <input type="date" name="date" required class="w-full bg-slate-800/50 border border-white/10 rounded-lg px-3 py-2 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                        </div>
+                    </div>
+                    <div class="space-y-1">
+                        <label class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Description</label>
+                        <textarea name="description" rows="3" class="w-full bg-slate-800/50 border border-white/10 rounded-lg px-3 py-2 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Provide specific details to help identify the item..."></textarea>
+                    </div>
+                    <div class="pt-4 flex justify-end gap-3">
+                        <button type="button" onclick="closeReportModal()" class="px-4 py-2 rounded-lg text-slate-300 hover:text-white hover:bg-white/5 transition-colors">Cancel</button>
+                        <button type="submit" class="px-6 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg font-medium shadow-lg shadow-indigo-500/25 transition-all transform hover:scale-105">Submit Report</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Sample Data
+        const initialItems = [
+            {
+                id: 1,
+                title: "MacBook Pro 16-inch",
+                type: "lost",
+                category: "electronics",
+                location: "Student Center, Table 4",
+                date: "2023-10-24",
+                description: "Space Grey MacBook Pro in a black leather sleeve. Has several stickers on the lid (VS Code, React).",
+                image: "https://images.unsplash.com/photo-1517336714731-489689fd1ca4?auto=format&fit=crop&q=80&w=800",
+                status: "active"
+            },
+            {
+                id: 2,
+                title: "Set of Keys with Lego Keychain",
+                type: "found",
+                category: "accessories",
+                location: "Parking Lot B",
+                date: "2023-10-25",
+                description: "Found near the bike racks. Keys include a car key (Toyota), house keys, and a distinctive red lego brick keychain.",
+                image: "https://images.unsplash.com/photo-1582140162633-599835349ce1?auto=format&fit=crop&q=80&w=800",
+                status: "active"
+            },
+            {
+                id: 3,
+                title: "Blue Backpack (Nike)",
+                type: "lost",
+                category: "accessories",
+                location: "Gym Locker Room",
+                date: "2023-10-23",
+                description: "Navy blue Nike backpack. Contains gym clothes, a water bottle, and a wallet (brown leather).",
+                image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&fit=crop&q=80&w=800",
+                status: "active"
+            },
+            {
+                id: 4,
+                title: "Prescription Glasses (Black Frame)",
+                type: "found",
+                category: "accessories",
+                location: "Lecture Hall A",
+                date: "2023-10-26",
+                description: "Found on the floor near the back row. Black thick-rimmed glasses in a hard shell case.",
+                image: "https://images.unsplash.com/photo-1591076482161-42ce6da69f67?auto=format&fit=crop&q=80&w=800",
+                status: "active"
+            },
+            {
+                id: 5,
+                title: "iPhone 13 Pro (Sierra Blue)",
+                type: "lost",
+                category: "electronics",
+                location: "Cafeteria",
+                date: "2023-10-25",
+                description: "Lost on one of the tables near the window. Has a clear case with a photo inside.",
+                image: "https://images.unsplash.com/photo-1632661674596-df8be070a5c5?auto=format&fit=crop&q=80&w=800",
+                status: "active"
+            },
+            {
+                id: 6,
+                title: "Student ID Card",
+                type: "found",
+                category: "documents",
+                location: "Library Front Desk",
+                date: "2023-10-26",
+                description: "Turned in by a staff member. Name: Sarah Jenkins. ID Number: 8839201.",
+                image: "https://images.unsplash.com/photo-1589829085413-56de8ae18c73?auto=format&fit=crop&q=80&w=800",
+                status: "active"
+            },
+            {
+                id: 7,
+                title: "Wireless Mouse (Logitech)",
+                type: "lost",
+                category: "electronics",
+                location: "Computer Lab 3",
+                date: "2023-10-24",
+                description: "Black Logitech MX Master 3. Left behind after a late night study session.",
+                image: "https://images.unsplash.com/photo-1527864550417-7fd91fc51a46?auto=format&fit=crop&q=80&w=800",
+                status: "active"
+            },
+            {
+                id: 8,
+                title: "Water Bottle (Hydro Flask)",
+                type: "found",
+                category: "other",
+                location: "Soccer Field",
+                date: "2023-10-25",
+                description: "Blue 32oz Hydro Flask with various stickers on it.",
+                image: "https://images.unsplash.com/photo-1602143407151-7111542de6e8?auto=format&fit=crop&q=80&w=800",
+                status: "active"
+            }
+        ];
+        let items = [...initialItems];
+        let currentFilter = 'all';
+        let isListView = false;
+        // Initialization
+        document.addEventListener('DOMContentLoaded', () => {
+            renderItems();
+            // Search listener
+            document.getElementById('searchInput').addEventListener('input', (e) => {
+                const term = e.target.value.toLowerCase();
+                const filtered = items.filter(item =>
+                    item.title.toLowerCase().includes(term) ||
+                    item.location.toLowerCase().includes(term) ||
+                    item.description.toLowerCase().includes(term)
+                );
+                renderItems(filtered);
+            });
+        });
+        // Render Function
+        function renderItems(data = items) {
+            const container = document.getElementById('itemsContainer');
+            const emptyState = document.getElementById('emptyState');
+            container.innerHTML = '';
+            // Apply category filter
+            let displayData = data;
+            if (currentFilter !== 'all') {
+                displayData = data.filter(item => item.category === currentFilter);
+            }
+            if (displayData.length === 0) {
+                container.classList.add('hidden');
+                emptyState.classList.remove('hidden');
+                emptyState.classList.add('flex');
+                return;
+            }
+            container.classList.remove('hidden');
+            emptyState.classList.add('hidden');
+            emptyState.classList.remove('flex');
+            displayData.forEach((item, index) => {
+                const card = document.createElement('div');
+                card.className = `glass-panel rounded-2xl overflow-hidden hover:transform hover:scale-[1.02] transition-all duration-300 group cursor-pointer border border-white/5 hover:border-white/20 flex flex-col h-full animate-slide-up`;
+                card.style.animationDelay = `${index * 50}ms`;
+                card.onclick = () => openModal(item);
+                const typeColor = item.type === 'lost' ? 'text-rose-400 bg-rose-500/10 border-rose-500/20' : 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20';
+                const typeIcon = item.type === 'lost' ? 'fa-circle-xmark' : 'fa-circle-check';
+                const typeLabel = item.type === 'lost' ? 'Lost' : 'Found';
+                card.innerHTML = `
+                    <div class="relative h-48 overflow-hidden">
+                        <img src="${item.image}" alt="${item.title}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+                        <div class="absolute top-3 left-3">
+                            <span class="px-2 py-1 rounded-md text-xs font-bold border ${typeColor} backdrop-blur-md flex items-center gap-1.5">
+                                <i class="fa-solid ${typeIcon}"></i> ${typeLabel}
+                            </span>
+                        </div>
+                        <div class="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-slate-900 to-transparent"></div>
+                    </div>
+                    <div class="p-5 flex flex-col flex-grow">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="text-lg font-bold text-white line-clamp-1 group-hover:text-indigo-400 transition-colors">${item.title}</h3>
+                        </div>
+                        <p class="text-sm text-slate-400 line-clamp-2 mb-4 flex-grow">${item.description}</p>
+                        <div class="flex items-center gap-4 text-xs text-slate-500 mt-auto pt-4 border-t border-white/5">
+                            <div class="flex items-center gap-1.5">
+                                <i class="fa-solid fa-location-dot text-indigo-400"></i>
+                                <span class="truncate max-w-[80px]">${item.location}</span>
+                            </div>
+                            <div class="flex items-center gap-1.5 ml-auto">
+                                <i class="fa-regular fa-calendar text-indigo-400"></i>
+                                <span>${new Date(item.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</span>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                container.appendChild(card);
+            });
+        }
+        // Filter Logic
+        function filterItems(category) {
+            currentFilter = category;
+            // Update UI
+            document.querySelectorAll('.filter-btn').forEach(btn => {
+                if (btn.dataset.filter === category) {
+                    btn.classList.add('bg-white/10', 'text-white', 'border-white/10');
+                    btn.classList.remove('text-slate-400');
+                } else {
+                    btn.classList.remove('bg-white/10', 'text-white', 'border-white/10');
+                    btn.classList.add('text-slate-400');
+                }
+            });
+            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
+            let filtered = items;
+            if (searchTerm) {
+                filtered = items.filter(item =>
+                    item.title.toLowerCase().includes(searchTerm) ||
+                    item.location.toLowerCase().includes(searchTerm)
+                );
+            }
+            renderItems(filtered);
+        }
+        // Modal Logic
+        function openModal(item) {
+            const modal = document.getElementById('itemModal');
+            // Populate data
+            document.getElementById('modalImage').src = item.image;
+            document.getElementById('modalTitle').textContent = item.title;
+            document.getElementById('modalCategory').textContent = item.category.charAt(0).toUpperCase() + item.category.slice(1);
+            document.getElementById('modalLocation').textContent = item.location;
+            document.getElementById('modalDate').textContent = new Date(item.date).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
+            document.getElementById('modalDesc').textContent = item.description;
+            const typeBadge = document.getElementById('modalType');
+            if (item.type === 'lost') {
+                typeBadge.className = 'absolute bottom-4 left-4 px-3 py-1 rounded-full text-xs font-bold bg-rose-500 text-white shadow-lg';
+                typeBadge.innerHTML = '<i class="fa-solid fa-circle-xmark mr-1"></i> Lost';
+            } else {
+                typeBadge.className = 'absolute bottom-4 left-4 px-3 py-1 rounded-full text-xs font-bold bg-emerald-500 text-white shadow-lg';
+                typeBadge.innerHTML = '<i class="fa-solid fa-circle-check mr-1"></i> Found';
+            }
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+            document.body.style.overflow = 'hidden'; // Prevent background scrolling
+        }
+        function closeModal() {
+            const modal = document.getElementById('itemModal');
+            modal.classList.add('hidden');
+            modal.classList.remove('flex');
+            document.body.style.overflow = 'auto';
+        }
+        // Report Modal Logic
+        function openReportModal() {
+            document.getElementById('reportModal').classList.remove('hidden');
+            document.getElementById('reportModal').classList.add('flex');
+        }
+        function closeReportModal() {
+            document.getElementById('reportModal').classList.add('hidden');
+            document.getElementById('reportModal').classList.remove('flex');
+        }
+        function handleReport(e) {
+            e.preventDefault();
+            const formData = new FormData(e.target);
+            const newItem = {
+                id: items.length + 1,
+                title: formData.get('title'),
+                type: formData.get('reportType'),
+                category: formData.get('category'),
+                location: formData.get('location'),
+                date: formData.get('date'),
+                description: formData.get('description'),
+                // Random image based on category for demo
+                image: `https://source.unsplash.com/random/800x600/?${formData.get('category')},object`,
+                status: "active"
+            };
+            // Since unsplash source is deprecated/unreliable, use placeholders or specific images
+            // Let's use specific images for the demo to ensure they look good
+            const categoryImages = {
+                'electronics': 'https://images.unsplash.com/photo-1496181133206-80ce9b88a853?auto=format&fit=crop&q=80&w=800',
+                'accessories': 'https://images.unsplash.com/photo-1523293188086-b15e4af37de9?auto=format&fit=crop&q=80&w=800',
+                'documents': 'https://images.unsplash.com/photo-1618044733300-9472054094ee?auto=format&fit=crop&q=80&w=800',
+                'other': 'https://images.unsplash.com/photo-1516962215378-7fa2e137ae91?auto=format&fit=crop&q=80&w=800'
+            };
+            newItem.image = categoryImages[newItem.category] || categoryImages['other'];
+            items.unshift(newItem); // Add to top
+            // Reset and Close
+            e.target.reset();
+            closeReportModal();
+            // Update UI
+            renderItems();
+            // Show success notification (simple alert for now, could be toast)
+            // alert('Item reported successfully!');
+        }
+        function scrollToItems() {
+            document.getElementById('itemsContainer').scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+        function toggleView() {
+            // Placeholder for list view toggle logic
+            alert("List view toggle coming soon!");
+        }
+        // Close modals on Escape key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                closeModal();
+                closeReportModal();
+            }
+        });
+    </script>
+</body>
+</html>