FileMgr

✏️ /home/mien4214/public_html/webcp/app/Views/galery.php

✕ Tutup

<?= $this->extend('layout/template'); ?>

<?= $this->section('content'); ?>
<section class="bg-[#BA290D] pt-28 pb-7 relative overflow-hidden">
    <div class="absolute inset-0 z-0">
        <img src="<?= base_url('assets/img/gb_hero/galery.jpg') ?>" alt="About Background" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-black/40"></div>
    </div>
    <div class="container mx-auto px-4 md:px-12 relative z-10 pt-10 pb-4">
        <div class="w-full md:w-1/2 text-white">
            <h1 class="text-5xl md:text-7xl font-black uppercase leading-[0.9] tracking-tighter mb-6">
                ~ OUR MEMORIES<br>
            </h1>
        </div>
    </div>
</section>

<section class="bg-[#FFF9F2] py-16 min-h-screen">
    <div class="container mx-auto px-4 max-w-6xl">
        
        <div class="text-center mb-10">
            <h2 class="text-2xl md:text-3xl font-black text-[#075939] uppercase tracking-wide mb-4">Galeri Momen</h2>
            <button onclick="openUploadModal()" class="bg-[#BA290D] text-white font-bold py-3 px-8 rounded-full shadow-lg hover:bg-red-800 hover:-translate-y-1 transition-transform duration-300 ring-4 ring-[#BA290D]/20">
                + Punya Momen Seru? Bagikan Di Sini!
            </button>
        </div>
        
        <?php if (session()->getFlashdata('success_upload')): ?>
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg relative mb-8 text-center shadow-sm max-w-2xl mx-auto">
                <strong class="font-bold">Berhasil!</strong> <?= session()->getFlashdata('success_upload') ?>
            </div>
        <?php endif; ?>
        <?php if (session()->getFlashdata('error_upload')): ?>
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg relative mb-8 text-center shadow-sm max-w-2xl mx-auto">
                <strong class="font-bold">Gagal!</strong> <?= session()->getFlashdata('error_upload') ?>
            </div>
        <?php endif; ?>

<?php if(empty($galeriList)): ?>
            <div class="text-center py-20 text-gray-500 bg-white rounded-xl border border-gray-200">
                Belum ada momen yang dibagikan. Jadilah yang pertama!
            </div>
        <?php else: ?>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 auto-rows-[200px]">
                <?php foreach($galeriList as $index => $g): ?>
                    <?php 
                        $colSpan = ($index % 5 == 0) ? 'col-span-2 row-span-2' : (($index % 7 == 0) ? 'col-span-2 row-span-1' : 'col-span-1 row-span-1');
                    ?>
                    <div class="<?= $colSpan ?> overflow-hidden rounded-2xl relative group cursor-pointer shadow-sm bg-gray-200"
                         onclick="openLightbox(<?= $index ?>)">
                        <img src="<?= base_url('assets/img/gb_galery/' . $g['img']) ?>" alt="<?= esc($g['title']) ?>" 
                             class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
                            <h3 class="text-white font-bold text-sm md:text-lg truncate"><?= esc($g['title']) ?></h3>
                            <p class="text-gray-300 text-xs truncate">By: <?= esc($g['source'] ?? 'Admin') ?></p>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>
</section>

<div id="uploadModal" class="hidden fixed inset-0 z-[150] flex items-center justify-center bg-black/60 backdrop-blur-sm px-4 transition-opacity">
    <div class="bg-[#BA290D] rounded-3xl p-6 md:p-10 text-white shadow-2xl relative overflow-hidden w-full max-w-2xl max-h-[90vh] overflow-y-auto animate-fade-in-up">
        
        <button onclick="closeUploadModal()" class="absolute top-4 right-5 text-white/60 hover:text-white text-4xl font-light z-20 transition-colors">&times;</button>
        
        <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full blur-3xl -z-0"></div>
        
        <div class="relative z-10 text-center mb-6 mt-2">
            <h3 class="text-2xl md:text-3xl font-black uppercase mb-2">Bagikan Momenmu</h3>
            <p class="text-red-100 text-sm">Ceritakan pengalaman seru kamu di kedai kami agar dunia tahu!</p>
        </div>

<form action="<?= base_url('galeri/upload-pengunjung') ?>" method="POST" enctype="multipart/form-data" class="relative z-10 space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-bold text-red-200 mb-1 uppercase tracking-widest">Nama Kamu</label>
                    <input type="text" name="nama_pengunjung" required class="w-full bg-white/10 border border-red-400/50 rounded-xl px-4 py-3 text-white placeholder-red-300 focus:outline-none focus:bg-white/20 focus:border-white transition" placeholder="Contoh: Budi Santoso">
                </div>
                <div>
                    <label class="block text-xs font-bold text-red-200 mb-1 uppercase tracking-widest">Judul Foto</label>
                    <input type="text" name="judul_foto" required class="w-full bg-white/10 border border-red-400/50 rounded-xl px-4 py-3 text-white placeholder-red-300 focus:outline-none focus:bg-white/20 focus:border-white transition" placeholder="Contoh: Nongkrong Asik">
                </div>
            </div>
            <div>
                <label class="block text-xs font-bold text-red-200 mb-1 uppercase tracking-widest">Cerita Singkat</label>
                <textarea name="deskripsi_foto" rows="2" class="w-full bg-white/10 border border-red-400/50 rounded-xl px-4 py-3 text-white placeholder-red-300 focus:outline-none focus:bg-white/20 focus:border-white transition" placeholder="Wah, mie pedasnya bikin nagih banget!..."></textarea>
            </div>
            <div>
                <label class="block text-xs font-bold text-red-200 mb-1 uppercase tracking-widest">Pilih Foto (Max 2MB)</label>
                <input type="file" name="foto_pengunjung" accept="image/jpeg,image/png,image/webp" required class="w-full bg-white/10 border border-red-400/50 rounded-xl px-4 py-2 text-white file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-bold file:bg-white file:text-[#BA290D] hover:file:bg-red-50 cursor-pointer">
            </div>
            <div class="pt-2">
                <button type="submit" class="w-full bg-[#FABB15] text-[#BA290D] font-black uppercase tracking-widest py-4 rounded-xl shadow-lg hover:bg-yellow-400 hover:scale-[1.02] transition-all">
                    Kirim Momen Saya Sekarang
                </button>
            </div>
        </form>
    </div>
</div>

<div id="lightboxModal" class="hidden fixed inset-0 z-[200] bg-black/95 flex items-center justify-center transition-opacity">
    <button onclick="closeLightbox()" class="absolute top-4 right-6 text-white/50 hover:text-white text-5xl font-light z-50">&times;</button>
    
    <button onclick="changeSlide(-1)" class="absolute left-2 md:left-8 top-1/2 -translate-y-1/2 text-white/50 hover:text-white bg-black/50 p-3 md:p-5 rounded-full hover:bg-black transition z-10">
        <svg class="w-6 h-6 md:w-8 md:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
    </button>
    
    <div class="relative w-full max-w-5xl px-12 md:px-24 flex flex-col items-center">
        <img id="lightboxImg" src="" class="max-h-[75vh] w-auto object-contain rounded-lg shadow-2xl transition-transform">
        <div class="text-center mt-6 w-full max-w-2xl bg-black/40 p-4 rounded-xl backdrop-blur-sm border border-white/10">
            <h3 id="lightboxTitle" class="text-white font-bold text-xl md:text-2xl mb-1">Judul</h3>
            <p id="lightboxDesc" class="text-gray-300 text-sm md:text-base leading-relaxed mb-2">Deskripsi</p>
            <p class="text-red-400 text-xs font-bold uppercase tracking-widest">By: <span id="lightboxSource" class="text-white">Admin</span></p>
        </div>
    </div>

function closeUploadModal() {
        document.getElementById('uploadModal').classList.add('hidden');
        document.body.classList.remove('overflow-hidden');
    }

// Tutup modal upload jika klik area luar modal (backdrop hitam)
    document.getElementById('uploadModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeUploadModal();
        }
    });

// --- Logika Lightbox Slider ---
    const galeriData = <?= json_encode($galeriList ?? []) ?>;
    const baseUrl = '<?= base_url('assets/img/gb_galery/') ?>';
    let currentIndex = 0;

function openLightbox(index) {
        if(galeriData.length === 0) return;
        currentIndex = index;
        updateLightboxContent();
        document.getElementById('lightboxModal').classList.remove('hidden');
        document.body.classList.add('overflow-hidden'); 
    }

function closeLightbox() {
        document.getElementById('lightboxModal').classList.add('hidden');
        document.body.classList.remove('overflow-hidden');
    }

function changeSlide(step) {
        currentIndex += step;
        if (currentIndex >= galeriData.length) currentIndex = 0;
        if (currentIndex < 0) currentIndex = galeriData.length - 1;
        
        const img = document.getElementById('lightboxImg');
        img.style.opacity = 0.5;
        setTimeout(() => {
            updateLightboxContent();
            img.style.opacity = 1;
        }, 150);
    }

function updateLightboxContent() {
        const data = galeriData[currentIndex];
        document.getElementById('lightboxImg').src = baseUrl + data.img;
        document.getElementById('lightboxTitle').innerText = data.title;
        document.getElementById('lightboxDesc').innerText = data.desc;
        document.getElementById('lightboxSource').innerText = data.source || 'Admin';
    }

<?= $this->endSection(); ?>

Batal

⬅ app 10 item

Nama	Tipe	Ukuran	Diubah	Perm	Aksi
📁 admin-web	dir	—	16/05/26 15:40	0755	📂
📁 errors	dir	—	24/04/26 11:59	0755	📂
📁 layout	dir	—	13/05/26 15:55	0755	📂
🐘 about.php	php	17.4 KB	27/04/26 15:13	0644	✏️ ⬇
🐘 berita.php	php	11.4 KB	24/04/26 11:59	0644	✏️ ⬇
🐘 galery.php	php	11.6 KB	24/04/26 11:59	0644	✏️ ⬇
🐘 home.php	php	27.1 KB	28/04/26 14:49	0644	✏️ ⬇
🐘 karir.php	php	16.4 KB	13/05/26 11:20	0644	✏️ ⬇
🐘 kedai.php	php	8.1 KB	26/04/26 08:58	0644	✏️ ⬇
🐘 menu.php	php	6.6 KB	28/04/26 15:26	0644	✏️ ⬇

✏️ Rename

🔑 Ubah Permission