Remix

Make your own version of Prism Gallery

Edit the prompt below and generate a customized version in seconds.

Original by Imthiyas M

Describe your app

Create a full-stack dynamic Image Gallery Website using PHP, MySQL, HTML, CSS, JavaScript that runs perfectly on XAMPP (Apache + MySQL).

🎯 Core Requirements
The website must be modern, responsive, and visually stunning
Use Glassmorphism UI design
Include 3D hover effects, smooth animations, and transitions
Fully dynamic (images loaded from database)
Clean folder structure
Fully working CRUD system (Add, Edit, Delete images)
📁 Folder Structure
image-gallery/
│
├── index.php
├── gallery.php
├── upload.php
├── edit.php
├── delete.php
├── view.php
├── login.php
├── register.php
├── logout.php
│
├── includes/
│   ├── db.php
│   ├── header.php
│   ├── footer.php
│   ├── auth.php
│
├── assets/
│   ├── css/style.css
│   ├── js/script.js
│
├── uploads/
│
└── database.sql
🗄️ Database Design (MySQL)

Create database: gallery_db

Users Table
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(100),
    email VARCHAR(150),
    password VARCHAR(255),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
Images Table
CREATE TABLE images (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255),
    description TEXT,
    file_path VARCHAR(255),
    category VARCHAR(100),
    uploaded_by INT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
🎨 UI & Design Features
🌟 Glassmorphism Design
Transparent cards with blur:
background: rgba(255,255,255,0.1);
backdrop-filter: blur(15px);
border-radius: 20px;
🧊 3D Hover Effects
Cards tilt on hover using CSS/JS
Image zoom + depth shadow
🎬 Animations
Smooth fade-in (AOS or custom CSS)
Hover glow effects
Animated gradient background
🧭 Navigation & Menus
Navbar (Sticky)
Home
Gallery
Categories (Dropdown)
Upload
Profile (Dropdown)
My Uploads
Logout
Dropdown Menu
Smooth animation
Blur glass effect
🖼️ Gallery Page Features
Grid layout (Masonry style)
Filter by category
Search bar (live search using JS or PHP)
Load images dynamically from database
🔍 Image View (Popup Modal)
Click image → open fullscreen popup
Show:
Image
Title
Description
Category
Next / Previous buttons
Smooth animation
⬆️ Upload System
Upload image with:
Title
Description
Category
Store image in /uploads
Save path in database
Show success popup
✏️ Edit & Delete
Edit image details
Replace image
Delete with confirmation popup
🔐 Authentication System
Login / Register (secure password hashing)
Session-based login
Restrict upload/edit/delete to logged-in users
💎 Advanced Features
🔥 1. Lightbox Popup
Animated modal
Background blur
⚡ 2. AJAX (Optional)
Load images without refresh
🎯 3. Toast Notifications
Success / Error popup messages
🎥 4. Lazy Loading
Load images when scrolling
🌈 5. Dark Mode Toggle
🧠 JavaScript Features
Image modal popup
Dropdown menu toggle
Live search filtering
3D hover tilt effect
Toast notifications
🎨 CSS Must Include
Glassmorphism UI
Gradient animated background
Responsive design (mobile-friendly)
Smooth transitions
Shadows & glow effects
⚙️ PHP Features
Database connection (mysqli or PDO)
Secure queries
File upload handling
Session management
CRUD operations
🚀 Extra UI Enhancements
Floating action button (+ Upload)
Animated loader
Scroll-to-top button
Hero section with featured images
📱 Responsiveness
Mobile optimized
Grid adjusts automatically
Touch-friendly UI
🧪 Testing Requirements
Works on XAMPP (localhost)
No errors
Upload + display images correctly
Database connected properly
🎁 Output Format

Provide:

All PHP files (complete code)
CSS & JS files
SQL file
Setup instructions:
How to run in XAMPP
How to import database

Free to use. No credit card required.