# 🎭 Tamil Meme Creator (M3 Edition)

A professional, mobile-responsive web application for creating Tamil memes. Built with **Material Design 3 (M3)** principles, featuring a unified 4-column grid system, AJAX-powered gallery, and a centralized template management dashboard.

---

## 🚀 Key Features

* **M3 Unified UI**: Consistent design across Landing, Gallery, and Admin pages using Material 3 color tokens and shapes.
* **Dynamic Meme Creator**: Client-side canvas manipulation with custom Tamil font support.
* **AJAX Gallery**: Infinite-scroll style "Load More" functionality with a real-time debounce search filter.
* **Admin Dashboard**:
* Unified 4-column management grid.
* **Edit Modal**: Fancy M3-styled dialog for updating template details without page reloads.
* **Custom Confirmation**: Replaced browser alerts with M3-styled "Delete" confirmation dialogs.
* **Trending System**: Landing page automatically highlights the top 4 most used templates based on `usage_count`.

---

## 🛠️ Tech Stack

* **Frontend**: HTML5, CSS3 (Flexbox/Grid), JavaScript (ES6+), Material Symbols.
* **Backend**: PHP 8.x.
* **Database**: MySQL/MariaDB.
* **Design Language**: Google Material Design 3.

---

## 📂 File Structure

| File | Purpose |
| :--- | :--- |
| `db_connect.php` | Centralized database connection and prefix configuration. |
| `db_setup.php` | Database initialization script (Drops/Creates tables automatically). |
| `index.php` | Landing page featuring Hero section and Trending templates. |
| `templates.php` | Public gallery with AJAX pagination and search. |
| `admin.php` | Template management with Edit/Delete modals and pagination. |
| `meme_creator.php` | The core canvas-based editor for generating memes. |
| `header.php` / `footer.php` | Global layout components and M3 CSS variables. |

---

## ⚙️ Installation & Setup

1. **Database Configuration**:
Update `db_connect.php` with your MySQL credentials:
```php
$servername = "localhost";
$username = "your_user";
$password = "your_pass";
$dbname = "meme_db";
$table_prefix = "memecreator_";
```

2. **Initialize Database**:
Run `db_setup.php` in your browser once to create the necessary table structure:
`http://yourdomain.com/db_setup.php`

3. **Permissions**:
Ensure the directory has write permissions if you plan to save generated images locally.

---

## 📋 Database Schema

The core table `meme_templates` follows this structure:

| Column | Type | Description |
| :--- | :--- | :--- |
| `id` | INT | Primary Key (Auto-increment). |
| `title` | VARCHAR | Display name of the meme template. |
| `image_url` | TEXT | Direct link to the source image. |
| `category` | VARCHAR | Tagging for search (e.g., Cinema, Politics). |
| `usage_count`| INT | Tracks how many times the template was used. |
| `created_at` | TIMESTAMP | Record creation date. |

---

## 🎨 Design Constants

This project follows strict M3 spacing and color guidelines:
- **Card Radius**: `24px` (Large) / `28px` (Extra Large).
- **Primary Color**: `#6750A4` (M3 Purple).
- **Surface**: `#FEF7FF`.
- **Desktop Grid**: `repeat(4, 1fr)`.

---

## 📝 Author
**Salim Nazir / JA Square** *Updated: January 3, 2026*