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.88 TB

🔧 Quick Actions

✏️ Editing: galeri_detail.php

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

$id = $_GET['id'] ?? 0;
if (!$id) {
    header("Location: galeri.php");
    exit;
}

try {
    $stmt = $pdo->prepare("SELECT * FROM galeri WHERE id = ?");
    $stmt->execute([$id]);
    $album = $stmt->fetch();

if (!$album) {
        header("Location: galeri.php");
        exit;
    }

$imgStmt = $pdo->prepare("SELECT * FROM galeri_images WHERE galeri_id = ? ORDER BY id ASC");
    $imgStmt->execute([$id]);
    $images = $imgStmt->fetchAll();

} catch (Exception $e) {
    header("Location: galeri.php");
    exit;
}

$pageTitle = htmlspecialchars($album['title']);

$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><?= $pageTitle ?> — Galeri Kegiatan</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; --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); }

/* ── MAIN CONTENT ── */
        .main-content {
            max-width: 1000px;
            margin: 0 auto;
            padding: 120px 24px 60px;
        }

/* Back link */
        .back-link {
            display: inline-flex; align-items: center; gap: 8px;
            color: var(--green-main); font-size: 14px; font-weight: 600;
            text-decoration: none; margin-bottom: 28px;
            transition: color 0.2s;
        }
        .back-link:hover { color: var(--green-dark); }

/* Album header */
        .album-header { text-align: center; margin-bottom: 40px; }
        .album-header .category {
            display: inline-block; font-size: 12px; font-weight: 700;
            padding: 5px 15px; border-radius: 99px; margin-bottom: 12px;
        }
        .album-header h1 {
            font-family: 'Playfair Display', serif;
            font-size: clamp(28px, 5vw, 42px); font-weight: 800;
            color: var(--green-dark); margin-bottom: 8px;
        }
        .album-header .date { font-size: 14px; color: var(--gray-600); }
        .album-header .date i { margin-right: 6px; color: var(--green-mid); }
        .album-description {
            font-size: 15px; color: var(--gray-600); line-height: 1.7;
            max-width: 700px; margin: 20px auto 0; text-align: center;
        }

/* ── SLIDER ── */
        .slider-container { width: 100%; position: relative; }

.slider-main {
            overflow: hidden;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            /* Background hitam agar area kosong di sisi foto tidak terlihat aneh */
            background: #111;
        }

.slider-track { display: flex; transition: transform 0.4s ease-in-out; }

.slide {
            min-width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            /* Tinggi otomatis menyesuaikan foto tertinggi di album,
               dengan batas maksimal 85% tinggi layar agar tidak terlalu panjang */
            background: #111;
        }

.slide img {
            width: 100%;
            height: auto;           /* tinggi mengikuti proporsi asli */
            max-height: 85vh;       /* batas agar tidak keluar layar */
            display: block;
            object-fit: contain;    /* seluruh foto tampil, tidak ada yang terpotong */
        }

.slider-nav {
            position: absolute; top: 50%; transform: translateY(-50%);
            width: 44px; height: 44px; background: rgba(0,0,0,0.5); color: white;
            border: none; border-radius: 50%; cursor: pointer; font-size: 18px;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.2s; z-index: 10;
        }
        .slider-nav:hover { background: rgba(0,0,0,0.8); }
        .slider-nav.prev { left: 16px; }
        .slider-nav.next { right: 16px; }

.slider-thumbnails {
            display: flex; gap: 10px; margin-top: 15px;
            overflow-x: auto; padding: 5px;
        }

.thumb {
            cursor: pointer; flex: 0 0 100px;
            border-radius: var(--radius); overflow: hidden;
            border: 3px solid transparent; transition: border-color 0.3s;
            background: #111;
        }
        .thumb img {
            width: 100%;
            height: 70px;
            object-fit: contain;    /* thumbnail juga tidak terpotong */
            display: block;
        }
        .thumb.active { border-color: var(--green-main); }

/* Single image (no slider) */
        .single-image {
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-md);
            background: #111;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .single-image img {
            width: 100%;
            height: auto;           /* tinggi mengikuti proporsi asli */
            max-height: 85vh;
            display: block;
            object-fit: contain;    /* tidak terpotong */
        }

.empty-state { text-align: center; padding: 80px 24px; color: #9ca3af; }
        .empty-state i { font-size: 56px; display: block; margin-bottom: 16px; color: #d1d5db; }
        .empty-state p { font-size: 15px; }

/* ── FOOTER ── */
        footer { background: var(--green-dark); color: white; margin-top: 80px; }
        .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; }
        .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; }
            .slide img  { max-height: 60vw; }
            .single-image img { max-height: 60vw; }
        }
    </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>

<main class="main-content">

<a href="galeri.php" class="back-link">
        <i class="fas fa-arrow-left"></i> Kembali ke Galeri
    </a>

<?php if (!empty($images)): ?>

<?php if (count($images) === 1): ?>
        
        <div class="single-image">
            <img src="../<?= htmlspecialchars($images[0]['image_path']) ?>"
                 alt="<?= $pageTitle ?>"
                 onerror="this.src='../assets/images/placeholder.png'">
        </div>

<?php else: ?>
        
        <div class="slider-container">
            <div class="slider-main">
                <div class="slider-track" id="sliderTrack">
                    <?php foreach ($images as $image): ?>
                    <div class="slide">
                        <img src="../<?= htmlspecialchars($image['image_path']) ?>"
                             alt="Foto dari album <?= $pageTitle ?>"
                             onerror="this.src='../assets/images/placeholder.png'">
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>

<div class="slider-thumbnails" id="sliderThumbs">
                <?php foreach ($images as $index => $image): ?>
                <div class="thumb <?= $index === 0 ? 'active' : '' ?>" data-index="<?= $index ?>">
                    <img src="../<?= htmlspecialchars($image['image_path']) ?>"
                         alt="Thumbnail <?= $index + 1 ?>"
                         onerror="this.src='../assets/images/placeholder.png'">
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        <?php endif; ?>

<?php else: ?>
    <div class="empty-state">
        <i class="fas fa-camera"></i>
        <p>Tidak ada foto dalam album ini.</p>
    </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>

window.addEventListener('scroll', () => {
    document.getElementById('mainNav').style.boxShadow =
        window.scrollY > 50 ? '0 4px 20px rgba(0,0,0,0.3)' : 'none';
});

<?php if (!empty($images) && count($images) > 1): ?>
// ── SLIDER LOGIC ──
(function () {
    const track      = document.getElementById('sliderTrack');
    const btnPrev    = document.getElementById('btnPrev');
    const btnNext    = document.getElementById('btnNext');
    const thumbs     = document.querySelectorAll('.thumb');
    const slideCount = <?= count($images) ?>;
    let   current    = 0;

function getSlideWidth() {
        return track.parentElement.getBoundingClientRect().width;
    }

function goTo(index) {
        current = Math.max(0, Math.min(index, slideCount - 1));
        track.style.transform = 'translateX(-' + (getSlideWidth() * current) + 'px)';

thumbs.forEach((t, i) => t.classList.toggle('active', i === current));
        thumbs[current].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });

btnPrev.style.display = current === 0            ? 'none' : 'flex';
        btnNext.style.display = current === slideCount-1 ? 'none' : 'flex';
    }

btnPrev.addEventListener('click', () => goTo(current - 1));
    btnNext.addEventListener('click', () => goTo(current + 1));
    thumbs.forEach(t => t.addEventListener('click', () => goTo(parseInt(t.dataset.index))));

// Recalculate on resize
    window.addEventListener('resize', () => goTo(current));

// Init
    goTo(0);
})();
<?php endif; ?>
</script>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: galeri_detail.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation