Spaces:
Running
Running
| <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">​</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">​</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> |