# REFIND - Lost & Found Community Platform

Refind is a purpose-built digital platform that facilitates the secure and efficient reconnection of lost belongings with their rightful owners. By streamlining the discovery and reporting process, it addresses a widespread everyday problem and enables individuals to recover lost items quickly, reliably, and with minimal friction.


A modern, responsive website for reporting and finding lost items with a beautiful dark theme and vibrant green accents.

## 🎨 Design Features

- **Color Scheme**: Dark navy gradient (#0f1419) with vibrant green (#00ff88)
- **Typography**: 
  - Headers: Poppins (400, 500, 600, 700)
  - Body: Nunito (400, 500, 600)
- **Fully Responsive**: Works perfectly on mobile, tablet, and desktop
- **Modern UI**: Smooth animations, hover effects, and clean design

## 📁 Project Structure

```
refind-website/
├── index.html          # Home page
├── loss.html           # Lost Items page
├── found.html          # Found Items page
├── about.html          # About page
├── CSS/
│   ├── style.css       # Main stylesheet
│   ├── loss.css        # Lost items specific styles
│   ├── found.css       # Found items specific styles
│   └── about.css       # About page specific styles
└── js/
    ├── script.js       # Main JavaScript functionality
    ├── loss.js         # Lost items page logic
    ├── found.js        # Found items page logic
    └── about.js        # About page animations
```

## 🚀 Features

### Core Features
- ✅ Responsive design (mobile-first)
- ✅ Dark theme with green accents
- ✅ Mobile hamburger menu with animation
- ✅ Real-time search functionality
- ✅ LocalStorage data persistence
- ✅ Report item modal with validation
- ✅ Recent items display (6 most recent)
- ✅ Lost/Found items separation
- ✅ Date formatting (relative and absolute)
- ✅ Image fallback handling
- ✅ Empty state displays
- ✅ Smooth animations and transitions

### Pages
1. **Home** - Hero section, How It Works, Recent listings, CTA
2. **Lost Items** - Search, , browse all lost items
3. **Found Items** - Search, , browse all found items
4. **About** - Vision, Mission, Core Values, Our Story

## 🎨 Color Reference

| Color | Hex | Usage |
|-------|-----|-------|
| Primary Green | #00ff88 | Accents, buttons, active states |
| Dark Navy | #0f1419 | Header, cards background |
| Background Dark | #0a0a14 | Main background |
| Background Light | #141428 | Secondary background |
| Text White | #ffffff | Primary text |
| Text Gray | #a0a0b8 | Secondary text |

### Change Colors
Edit CSS variables in `CSS/style.css`:
```css
:root {
  --color-primary: #00ff88;        /* Main accent color */
  --color-background: #0a0a14;     /* Background */
  --color-text: #ffffff;           /* Text color */
  /* ... more variables */
}
```

### Technologies Used
- HTML5
- CSS3 (CSS Grid, Flexbox, CSS Variables)
- Vanilla JavaScript (ES6+)
- Font Awesome 6.5.1
- Google Fonts (Poppins, Nunito)

### JavaScript Features
- LocalStorage API
- Intersection Observer API (for animations)
- ES6 modules and modern syntax
- Event delegation
- Form validation

Last Updated: Febaury  05, 2026


Img/hero.png

Img/recent items.png