Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-503.34.1.el9_5.x86_64

PHP Version:

8.2.30

User:

u329947844

Directory:

/home/u329947844/domains/pennagaram.org/public_html

Free Space:

10.3 TB

🔧 Quick Actions

✏️ Editing: all-gallery.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery - Pennagaram Official</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="apple-touch-icon" sizes="180x180" href="assets/fav/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/fav/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/fav/favicon-16x16.png">
    <link rel="manifest" href="assets/fav/site.webmanifest">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'primary': '#2E8B57',
                        'accent': '#FF6B35',
                        'secondary': '#1A5276',
                        'light': '#F8F9FA',
                        'neutral': '#495057',
                        'dark': '#212529',
                        'success': '#28A745',
                        'warning': '#FFC107',
                        'highlight': '#E9F5E9'
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body {
            font-family: 'Inter', sans-serif;
        }
        .gallery-item {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .gallery-item:hover {
            transform: scale(1.02);
        }
    </style>
</head>
<body class="bg-light">
    <?php include('nav.php') ?>

<main class="min-h-screen py-6 mt-12">
        <div class="container mx-auto px-4">
            
            <div class="text-center mb-6">
                <h1 class="text-2xl font-bold text-secondary mb-3">Photo Gallery</h1>
                <p class="text-neutral text-base max-w-2xl mx-auto">
                    Explore the vibrant life of Pennagaram through our collection of photos showcasing community events, local landmarks, and memorable moments.
                </p>
            </div>

<div id="galleryContainer">
                <?php
                // Include database connection
                require_once 'includes/db.php';
                
                // Fetch all gallery images
                $query = "
                    SELECT id, title, image_path, type, created_at 
                    FROM gallery 
                    ORDER BY created_at DESC
                ";
                
                $result = mysqli_query($conn, $query);
                
                if (!$result) {
                    echo '<div class="text-center text-red-500 py-8 text-sm">Error loading gallery. Please try again later.</div>';
                    error_log("Database error: " . mysqli_error($conn));
                } elseif (mysqli_num_rows($result) == 0) {
                    echo '<div class="text-center py-8">
                        <div class="bg-white rounded-lg shadow-md p-6 max-w-md mx-auto">
                            <i class="fas fa-images text-4xl text-neutral mb-3"></i>
                            <h3 class="text-lg font-semibold text-dark mb-2">Gallery Empty</h3>
                            <p class="text-neutral text-sm mb-3">No photos have been added to the gallery yet.</p>
                            <a href="index.php" class="bg-primary text-white px-4 py-1.5 rounded text-sm hover:bg-green-600 transition-colors inline-flex items-center">
                                <i class="fas fa-home mr-1 text-xs"></i>
                                Back to Home
                            </a>
                        </div>
                    </div>';
                } else {
                    echo '<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3" id="galleryGrid">';
                    
                    while ($image = mysqli_fetch_assoc($result)) {
                        // Handle image path
                        $imagePath = '';
                        if (!empty($image['image_path'])) {
                            if (strpos($image['image_path'], 'http') === 0) {
                                $imagePath = $image['image_path'];
                            } else if (strpos($image['image_path'], '/') === 0) {
                                $imagePath = $image['image_path'];
                            } else if (strpos($image['image_path'], 'admin/') === 0) {
                                $imagePath = $image['image_path'];
                            } else {
                                $imagePath = 'admin/uploads/gallery/' . $image['image_path'];
                            }
                        }
                        
                        echo '
                        <div class="gallery-item bg-white rounded shadow-md overflow-hidden border border-light hover:shadow-lg">
                            
                            
                            <div class="relative overflow-hidden bg-gray-100">
                                <img src="' . htmlspecialchars($imagePath) . '" 
                                     alt="' . htmlspecialchars($image['title']) . '" 
                                     class="w-full h-40 object-cover cursor-pointer transition-transform duration-300 hover:scale-105"
                                     onclick="openImageModal(\'' . htmlspecialchars($imagePath) . '\', \'' . htmlspecialchars($image['title']) . '\', this)">
                                
                                
                                <div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-30 transition-all duration-300 flex items-center justify-center opacity-0 hover:opacity-100">
                                    <div class="text-white text-center">
                                        <i class="fas fa-expand text-lg mb-1"></i>
                                        <p class="text-xs font-medium">Click to View</p>
                                    </div>
                                </div>
                            </div>
                            
                            
                            <div class="p-3">
                                <h3 class="text-sm font-semibold text-dark line-clamp-2">
                                    ' . htmlspecialchars($image['title']) . '
                                </h3>
                            </div>
                        </div>';
                    }
                    echo '</div>';
                }
                ?>
            </div>

</div>
    </main>

<div id="imageModal" class="fixed inset-0 bg-black bg-opacity-95 z-50 hidden flex items-center justify-center p-3">
        <div class="relative w-full h-full flex items-center justify-center">
            
            <button onclick="closeImageModal()" class="absolute top-3 right-3 text-white text-xl hover:text-gray-300 transition-colors duration-200 z-10 bg-black bg-opacity-50 rounded-full w-10 h-10 flex items-center justify-center">
                <i class="fas fa-times"></i>
            </button>
            
            
            <button onclick="navigateImage(-1)" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-white text-lg hover:text-gray-300 transition-colors duration-200 z-10 bg-black bg-opacity-50 rounded-full w-10 h-10 flex items-center justify-center">
                <i class="fas fa-chevron-left"></i>
            </button>
            
            
            <button onclick="navigateImage(1)" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-white text-lg hover:text-gray-300 transition-colors duration-200 z-10 bg-black bg-opacity-50 rounded-full w-10 h-10 flex items-center justify-center">
                <i class="fas fa-chevron-right"></i>
            </button>
            
            
            <div class="flex flex-col items-center justify-center max-w-full max-h-full p-3">
                <img id="modalImage" src="" alt="" class="max-w-full max-h-full object-contain">
                <div id="modalCaption" class="text-white text-center mt-3 text-base font-medium max-w-2xl"></div>
            </div>
            
            
            <div class="absolute bottom-3 left-1/2 transform -translate-x-1/2 text-white bg-black bg-opacity-50 px-3 py-1 rounded-full text-xs">
                <span id="imageCounter">1 of 1</span>
            </div>
        </div>
    </div>

<?php include('footer.php') ?>

// Initialize gallery images array on page load
        document.addEventListener('DOMContentLoaded', function() {
            const imageElements = document.querySelectorAll('.gallery-item img');
            galleryImages = Array.from(imageElements).map(img => ({
                src: img.src,
                title: img.alt
            }));
        });

// Open image modal
        function openImageModal(imageSrc, imageTitle, clickedImage = null) {
            const modal = document.getElementById('imageModal');
            const modalImage = document.getElementById('modalImage');
            const modalCaption = document.getElementById('modalCaption');
            const imageCounter = document.getElementById('imageCounter');
            
            // Find the index of the clicked image
            if (clickedImage) {
                currentImageIndex = galleryImages.findIndex(img => img.src === clickedImage.src);
            } else {
                currentImageIndex = galleryImages.findIndex(img => img.src === imageSrc);
            }
            
            if (currentImageIndex === -1) currentImageIndex = 0;
            
            // Set image and caption
            modalImage.src = imageSrc;
            modalCaption.textContent = imageTitle;
            updateImageCounter();
            
            // Show modal
            modal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }

// Close image modal
        function closeImageModal() {
            const modal = document.getElementById('imageModal');
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto';
        }

// Navigate between images
        function navigateImage(direction) {
            currentImageIndex += direction;
            
            // Loop around
            if (currentImageIndex < 0) {
                currentImageIndex = galleryImages.length - 1;
            } else if (currentImageIndex >= galleryImages.length) {
                currentImageIndex = 0;
            }
            
            const image = galleryImages[currentImageIndex];
            const modalImage = document.getElementById('modalImage');
            const modalCaption = document.getElementById('modalCaption');
            
            modalImage.src = image.src;
            modalCaption.textContent = image.title;
            updateImageCounter();
        }

// Update image counter
        function updateImageCounter() {
            const imageCounter = document.getElementById('imageCounter');
            imageCounter.textContent = `${currentImageIndex + 1} of ${galleryImages.length}`;
        }

// Keyboard navigation
        document.addEventListener('keydown', function(e) {
            const modal = document.getElementById('imageModal');
            if (modal.classList.contains('hidden')) return;
            
            if (e.key === 'Escape') {
                closeImageModal();
            } else if (e.key === 'ArrowLeft') {
                navigateImage(-1);
            } else if (e.key === 'ArrowRight') {
                navigateImage(1);
            }
        });

// Swipe support for touch devices
        let touchStartX = 0;
        let touchEndX = 0;

document.getElementById('imageModal').addEventListener('touchstart', function(e) {
            touchStartX = e.changedTouches[0].screenX;
        });

document.getElementById('imageModal').addEventListener('touchend', function(e) {
            touchEndX = e.changedTouches[0].screenX;
            handleSwipe();
        });

<?php
// Close database connection
if (isset($conn)) {
    mysqli_close($conn);
}

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: all-gallery.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation