Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-611.26.1.el9_7.x86_64

PHP Version:

8.4.15

User:

u892747680

Directory:

/home/u892747680/domains/sisteminformasic.com/public_html/upzisprnumliwang/pages

Free Space:

9.97 TB

🔧 Quick Actions

✏️ Editing: galeri.php

<?php
require_once __DIR__ . '/../includes/config.php';

try {
    $stmt = $pdo->query("
        SELECT 
            g.*,
            (SELECT image_path FROM galeri_images WHERE galeri_id = g.id ORDER BY id ASC LIMIT 1) as image_path,
            (SELECT COUNT(*) FROM galeri_images WHERE galeri_id = g.id) as image_count
        FROM galeri g 
        ORDER BY g.tanggal_kegiatan DESC
    ");
    $gallery_items = $stmt->fetchAll();
} catch (Exception $e) {
    $gallery_items = [];
}

$category_styles = [
    'Penyaluran'    => 'background:#dcfce7; color:#166534;',
    'Pendidikan'    => 'background:#eff6ff; color:#1d4ed8;',
    'Kesehatan'     => 'background:#fee2e2; color:#dc2626;',
    'Ekonomi'       => 'background:#fffbeb; color:#b45309;',
    'Sosial'        => 'background:#f5f3ff; color:#7c3aed;',
    'Infrastruktur' => 'background:#f3f4f6; color:#4b5563;',
    'Rapat'         => 'background:#f3f4f6; color:#4b5563;',
];
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galeri Kegiatan — <?= htmlspecialchars($settings['nama_lembaga'] ?? 'UPZIS PRNU Mliwang') ?></title>
    <link href="https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;0,900;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <style>
        :root {
            --green-dark: #0d4a2a; --green-main: #166534; --green-mid: #15803d;
            --green-light: #22c55e; --green-pale: #dcfce7; --gold: #d4a017;
            --gold-light: #f0c842; --gold-pale: #fef9e7; --white: #ffffff;
            --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-600: #4b5563;
            --gray-800: #1f2937; --shadow-md: 0 4px 20px rgba(0,0,0,0.12);
            --radius: 12px; --radius-lg: 20px;
        }
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--gray-50); color: var(--gray-800); }

/* ── NAVBAR ── */
        .navbar {
            position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
            background: rgba(13, 74, 42, 0.97);
            backdrop-filter: blur(10px);
            border-bottom: 2px solid var(--gold);
            transition: all 0.3s ease;
        }
        .nav-inner {
            max-width: 1200px; margin: 0 auto;
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 24px; height: 70px;
        }
        .nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
        .nav-logo {
            width: 48px; height: 48px; background: var(--gold); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-family: 'Amiri', serif; font-size: 18px; font-weight: 700;
            color: var(--green-dark); overflow: hidden;
        }
        .nav-logo img { width: 100%; height: 100%; object-fit: cover; }
        .nav-brand-text .brand-main { display: block; font-size: 18px; font-weight: 800; color: var(--gold-light); letter-spacing: 1px; }
        .nav-brand-text .brand-sub  { display: block; font-size: 9px; color: rgba(255,255,255,0.75); letter-spacing: 0.5px; }
        .nav-menu { display: flex; align-items: center; gap: 4px; list-style: none; }
        .nav-menu a {
            color: rgba(255,255,255,0.85); text-decoration: none;
            padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500;
            transition: all 0.2s;
        }
        .nav-menu a:hover  { background: rgba(255,255,255,0.15); color: var(--gold-light); }
        .nav-menu a.active { background: rgba(255,255,255,0.15); color: var(--gold-light); }
        .nav-menu .btn-login {
            background: var(--gold); color: var(--green-dark) !important;
            font-weight: 700; padding: 8px 20px !important;
        }
        .nav-menu .btn-login:hover { background: var(--gold-light); transform: translateY(-1px); }
        .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; }
        .hamburger span { display: block; width: 24px; height: 2px; background: white; border-radius: 2px; }

/* ── MOBILE MENU ── */
        .mobile-menu {
            display: none; position: fixed; top: 70px; left: 0; right: 0;
            background: var(--green-dark); border-top: 1px solid rgba(255,255,255,0.1);
            z-index: 999; padding: 16px 24px; flex-direction: column; gap: 4px;
        }
        .mobile-menu.open { display: flex; }
        .mobile-menu a {
            color: rgba(255,255,255,0.85); text-decoration: none;
            padding: 12px 16px; border-radius: 8px; font-size: 15px; transition: all 0.2s;
        }
        .mobile-menu a:hover { background: rgba(255,255,255,0.1); color: var(--gold-light); }

/* ── HERO ── */
        .hero {
            padding: 140px 24px 60px;
            background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-main) 100%);
            text-align: center; color: white;
        }
        .hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(32px, 5vw, 48px); font-weight: 800; margin-bottom: 8px; }
        .hero h1 span { color: var(--gold-light); }
        .hero p { font-size: 16px; color: rgba(255,255,255,0.8); max-width: 600px; margin: 0 auto; }

/* ── GALLERY ── */
        .main-content { max-width: 1200px; margin: 0 auto; padding: 60px 24px; }
        .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }
        .gallery-card {
            display: block; text-decoration: none; background: white;
            border-radius: var(--radius-lg); overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.07); transition: all 0.3s ease;
        }
        .gallery-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
        .gallery-img-wrap { position: relative; overflow: hidden; height: 220px; }
        .gallery-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
        .gallery-card:hover .gallery-img { transform: scale(1.05); }
        .img-count-badge {
            position: absolute; top: 12px; right: 12px;
            background: rgba(0,0,0,0.5); color: white;
            font-size: 12px; font-weight: 600; padding: 5px 10px;
            border-radius: 8px; backdrop-filter: blur(5px);
        }
        .img-count-badge i { margin-right: 5px; }
        .gallery-body { padding: 20px; }
        .gallery-category { display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 99px; margin-bottom: 12px; }
        .gallery-title { font-size: 18px; font-weight: 700; color: var(--green-dark); margin-bottom: 8px; line-height: 1.4; }
        .gallery-date { font-size: 12px; color: var(--gray-600); display: flex; align-items: center; gap: 6px; }
        .gallery-desc {
            font-size: 13px; color: var(--gray-600); line-height: 1.6;
            margin-top: 12px; border-top: 1px solid var(--gray-100); padding-top: 12px;
            display: -webkit-box; -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden;
        }
        .empty-state { text-align: center; padding: 80px 24px; color: #9ca3af; }
        .empty-state i { font-size: 56px; display: block; margin-bottom: 16px; color: #d1d5db; }

/* ── FOOTER ── */
        footer { background: var(--green-dark); color: white; }
        .footer-main { max-width: 1200px; margin: 0 auto; padding: 60px 24px 40px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
        .footer-brand h3 { font-size: 22px; font-weight: 800; color: var(--gold-light); margin-bottom: 12px; }
        .footer-brand p  { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.7; margin-bottom: 20px; }
        .footer-socials  { display: flex; gap: 10px; }
        .social-icon {
            width: 38px; height: 38px; background: rgba(255,255,255,0.1); border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            color: rgba(255,255,255,0.7); text-decoration: none; transition: all 0.2s; font-size: 16px;
        }
        .social-icon:hover { background: var(--gold); color: var(--green-dark); }
        .footer-col h4  { font-size: 14px; font-weight: 700; color: var(--gold-light); margin-bottom: 16px; letter-spacing: 0.5px; }
        .footer-col ul  { list-style: none; }
        .footer-col ul li { margin-bottom: 10px; }
        .footer-col ul li a { font-size: 13px; color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s; }
        .footer-col ul li a:hover { color: var(--gold-light); }
        .footer-contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
        .footer-contact-item i    { color: var(--gold); margin-top: 2px; font-size: 14px; }
        .footer-contact-item span { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.5; }
        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.1); padding: 20px 24px;
            display: flex; justify-content: space-between; align-items: center;
            max-width: 1200px; margin: 0 auto;
        }
        .footer-bottom p { font-size: 13px; color: rgba(255,255,255,0.5); }

/* ── RESPONSIVE ── */
        @media (max-width: 1024px) { .footer-main { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 768px) {
            .nav-menu { display: none; }
            .hamburger { display: flex; }
            .footer-main { grid-template-columns: 1fr; }
            .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
            .gallery-grid { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>

<nav class="navbar" id="mainNav">
  <div class="nav-inner">
    <a href="../index.php" class="nav-brand">
      <div class="nav-logo">
        <?php if (!empty($settings['logo_path']) && file_exists(__DIR__ . '/../' . $settings['logo_path'])): ?>
          <img src="../<?= htmlspecialchars($settings['logo_path']) ?>?t=<?= time() ?>" alt="Logo">
        <?php else: ?>NU<?php endif; ?>
      </div>
      <div class="nav-brand-text">
        <span class="brand-main"><?= htmlspecialchars($settings['nama_lembaga'] ?? 'UPZIS PRNU Mliwang') ?></span>
        <span class="brand-sub"><?= strtoupper(htmlspecialchars($settings['nama_lembaga_panjang'] ?? 'LEMBAGA AMIL ZAKAT')) ?></span>
      </div>
    </a>
    <ul class="nav-menu">
      <li><a href="../index.php#beranda">Beranda</a></li>
      <li><a href="../index.php#tentang">Tentang</a></li>
      <li><a href="../index.php#program">Program</a></li>
      <li><a href="galeri.php" class="active">Galeri</a></li>
      <li><a href="kalkulator.php">Kalkulator</a></li>
      <li><a href="../login.php" class="btn-login">Login Admin</a></li>
    </ul>
    <div class="hamburger" onclick="toggleMenu()">
      <span></span><span></span><span></span>
    </div>
  </div>
</nav>

<div class="mobile-menu" id="mobileMenu">
  <a href="../index.php#beranda">🏠 Beranda</a>
  <a href="../index.php#tentang">ℹ️ Tentang</a>
  <a href="../index.php#program">📋 Program</a>
  <a href="galeri.php">🖼️ Galeri</a>
  <a href="kalkulator.php">🧮 Kalkulator</a>
  <a href="../login.php">🔐 Login Admin</a>
</div>

<div class="hero">
    <h1>Galeri <span>Kegiatan</span></h1>
    <p>Dokumentasi berbagai program dan penyaluran yang telah dilaksanakan oleh <?= htmlspecialchars($settings['nama_lembaga'] ?? 'UPZIS PRNU Mliwang') ?>.</p>
</div>

<main class="main-content">
    <?php if (empty($gallery_items)): ?>
    <div class="empty-state">
        <i class="fas fa-images"></i>
        <p>Belum ada foto kegiatan yang dipublikasikan.</p>
    </div>
    <?php else: ?>
    <div class="gallery-grid">
        <?php foreach ($gallery_items as $item):
            $imgSrc = '../' . ltrim($item['image_path'] ?? 'assets/images/placeholder.png', '/');
        ?>
        <a href="galeri_detail.php?id=<?= $item['id'] ?>" class="gallery-card">
            <div class="gallery-img-wrap">
                <img src="<?= htmlspecialchars($imgSrc) ?>"
                     alt="<?= htmlspecialchars($item['title']) ?>"
                     class="gallery-img"
                     onerror="this.src='../assets/images/placeholder.png'">
                <?php if (!empty($item['image_count']) && $item['image_count'] > 0): ?>
                <div class="img-count-badge">
                    <i class="fas fa-images"></i> <?= (int)$item['image_count'] ?> Foto
                </div>
                <?php endif; ?>
            </div>
            <div class="gallery-body">
                <?php $style = $category_styles[$item['category']] ?? 'background:#dcfce7; color:#166534;'; ?>
                <span class="gallery-category" style="<?= $style ?>">
                    <?= htmlspecialchars($item['category']) ?>
                </span>
                <h3 class="gallery-title"><?= htmlspecialchars($item['title']) ?></h3>
                <p class="gallery-date">
                    <i class="fas fa-calendar-alt"></i>
                    <?= date('d M Y', strtotime($item['tanggal_kegiatan'])) ?>
                </p>
                <?php if (!empty($item['description'])): ?>
                <p class="gallery-desc"><?= htmlspecialchars($item['description']) ?></p>
                <?php endif; ?>
            </div>
        </a>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>
</main>

<footer>
  <div class="footer-main">
    <div class="footer-brand">
      <h3><?= htmlspecialchars($settings['nama_lembaga'] ?? 'UPZIS PRNU Mliwang') ?></h3>
      <p><?= htmlspecialchars($settings['nama_lembaga_panjang'] ?? 'Unit Pengelola Zakat, Infaq dan Shodaqoh') ?> — Amanah, Transparan, Profesional.</p>
      <div class="footer-socials">
        <a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
        <a href="#" class="social-icon"><i class="fab fa-whatsapp"></i></a>
      </div>
    </div>
    <div class="footer-col">
      <h4>Navigasi</h4>
      <ul>
        <li><a href="../index.php#beranda">Beranda</a></li>
        <li><a href="../index.php#tentang">Tentang Kami</a></li>
        <li><a href="../index.php#program">Program Zakat</a></li>
        <li><a href="galeri.php">Galeri Kegiatan</a></li>
        <li><a href="kalkulator.php">Kalkulator Zakat</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>Program</h4>
      <ul>
        <li><a href="#">Zakat Fitrah</a></li>
        <li><a href="#">Zakat Mal</a></li>
        <li><a href="#">Zakat Penghasilan</a></li>
        <li><a href="#">Infaq &amp; Shodaqoh</a></li>
        <li><a href="#">Penyaluran Zakat</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>Kontak</h4>
      <?php if (!empty($settings['alamat'])): ?>
      <div class="footer-contact-item">
        <i class="fas fa-map-marker-alt"></i>
        <span><?= htmlspecialchars($settings['alamat']) ?></span>
      </div>
      <?php endif; ?>
      <?php if (!empty($settings['no_hp'])): ?>
      <div class="footer-contact-item">
        <i class="fas fa-phone"></i>
        <span><?= htmlspecialchars($settings['no_hp']) ?></span>
      </div>
      <?php endif; ?>
      <?php if (!empty($settings['email'])): ?>
      <div class="footer-contact-item">
        <i class="fas fa-envelope"></i>
        <span><?= htmlspecialchars($settings['email']) ?></span>
      </div>
      <?php endif; ?>
    </div>
  </div>
  <div class="footer-bottom">
    <p>&copy; <?= date('Y') ?> <?= htmlspecialchars($settings['nama_lembaga'] ?? 'UPZIS PRNU Mliwang') ?>. Hak Cipta Dilindungi.</p>
    <p>Sistem Manajemen Zakat Digital</p>
  </div>
</footer>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: galeri.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation