FileMgr

✏️ /home/mien4214/public_html/web-test/app/Views/berita.php

✕ Tutup

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

<?= $this->section('content'); ?>

<section class="relative min-h-[60vh] flex items-center overflow-hidden py-20 bg-[#BA290D]">
    <div class="absolute inset-0 z-0">
        <img src="<?= !empty($settings['berita_hero_img']) ? base_url('uploads/berita/' . $settings['berita_hero_img']) : base_url('assets/img/gb_hero/berita.png') ?>" alt="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-25">
        <div class="w-full md:w-1/2 text-white">
            <h4 class="font-bold tracking-[0.3em] uppercase text-sm mb-4 text-orange-400">
                <?= esc($settings['berita_hero_kicker'] ?? "Stay Updated") ?>
            </h4>
            <h1 class="text-5xl md:text-7xl font-black uppercase leading-[0.9] tracking-tighter mb-6">
                LATEST NEWS -<br>
            </h1>
            <p class="text-lg md:text-xl font-medium max-w-lg mb-8 text-gray-100 opacity-90 leading-relaxed">
                <?= nl2br(esc($settings['berita_hero_desc'] ?? "Dapatkan informasi terbaru seputar inovasi, acara mendatang, dan perkembangan terkini langsung dari dapur kami.")) ?>
            </p>
        </div>
    </div>
</section>

<?php 
// Dekode JSON
$pengumuman = isset($settings['pengumuman_list']) ? json_decode($settings['pengumuman_list'], true) : [];
$berita = isset($settings['berita_list']) ? json_decode($settings['berita_list'], true) : [];
?>

<?php if(!empty($pengumuman)): ?>
<section class="py-16 bg-[#FFF9F2]">
    <div class="container mx-auto px-4 md:px-12">
        <div class="flex flex-col md:flex-row justify-between items-end mb-10 gap-4">
            <div>
                <div class="flex items-center gap-2">
                    <span class="w-8 h-1 bg-[#BA290D] rounded-full"></span>
                    <h4 class="text-[#BA290D] font-bold tracking-widest uppercase text-sm">Promo & Event</h4>
                </div>
            </div>
        </div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <?php foreach($pengumuman as $p): ?>
            <div class="group flex flex-col sm:flex-row bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all hover:-translate-y-1 duration-300 overflow-hidden border border-gray-100 cursor-pointer"
                 data-title="<?= esc($p['title']) ?>"
                 data-date="<?= esc($p['date']) ?>"
                 data-read="<?= esc($p['label']) ?>"
                 data-img="<?= !empty($p['img']) ? base_url('uploads/berita/' . $p['img']) : '' ?>"
                 data-desc="<?= esc($p['desc']) ?>"
                 onclick="openModal(this)">
                
                <div class="sm:w-2/5 h-48 sm:h-auto relative overflow-hidden bg-gray-100">
                    <?php if(!empty($p['img'])): ?>
                        <img src="<?= base_url('uploads/berita/' . $p['img']) ?>" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <?php else: ?>
                        <div class="w-full h-full bg-gradient-to-br from-yellow-100 to-red-100"></div>
                    <?php endif; ?>
                    <div class="absolute top-4 left-4">
                        <span class="<?= strtolower($p['label']) == 'promo' ? 'bg-[#FABB15] text-[#BA290D]' : 'bg-[#BA290D] text-white' ?> text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-wider">
                            <?= esc($p['label']) ?>
                        </span>
                    </div>
                </div>

<?php if(!empty($berita)): ?>
<section class="py-16 bg-white">
    <div class="container mx-auto px-4 md:px-12">
        <div class="text-center max-w-2xl mx-auto mb-14">
            <h4 class="text-[#BA290D] font-bold tracking-widest uppercase text-sm mb-3">Pusat Informasi</h4>
            <h2 class="text-3xl lg:text-4xl font-extrabold text-[#BA290D] tracking-tight mb-4">Berita Terbaru</h2>
        </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <?php foreach($berita as $b): ?>
            <div class="group cursor-pointer"
                 data-title="<?= esc($b['title']) ?>"
                 data-date="<?= esc($b['date']) ?>"
                 data-read="<?= esc($b['read']) ?>"
                 data-img="<?= !empty($b['img']) ? base_url('uploads/berita/' . $b['img']) : '' ?>"
                 data-desc="<?= esc($b['desc']) ?>"
                 onclick="openModal(this)">
                 
                <div class="relative h-64 rounded-3xl overflow-hidden mb-6 shadow-sm bg-gray-100">
                    <?php if(!empty($b['img'])): ?>
                        <img src="<?= base_url('uploads/berita/' . $b['img']) ?>" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                    <?php else: ?>
                        <div class="w-full h-full bg-gradient-to-br from-gray-100 to-gray-200"></div>
                    <?php endif; ?>
                    <div class="absolute top-4 left-4 bg-white/90 backdrop-blur-sm px-4 py-1.5 rounded-full">
                        <span class="text-[#BA290D] font-bold text-xs uppercase tracking-wider">Artikel</span>
                    </div>
                </div>
                <div class="flex items-center gap-3 text-sm text-gray-400 font-semibold mb-3">
                    <span><?= esc($b['date']) ?></span>
                    <span class="w-1.5 h-1.5 rounded-full bg-gray-300"></span>
                    <span><?= esc($b['read']) ?></span>
                </div>
                <h3 class="text-xl font-bold text-[#BA290D] group-hover:text-[#BA290D] transition-colors mb-3 leading-snug">
                    <?= esc($b['title']) ?>
                </h3>
                <p class="text-gray-500 text-sm line-clamp-2"><?= esc($b['desc']) ?></p>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

// Isi ke dalam Modal
        document.getElementById('modalTitle').innerText = title;
        document.getElementById('modalDate').innerText = date;
        document.getElementById('modalRead').innerText = read;
        document.getElementById('modalDesc').innerText = desc;

// Atur Gambar Modal
        const imgContainer = document.getElementById('modalImgContainer');
        const imgEl = document.getElementById('modalImg');
        
        if (imgSrc) {
            imgEl.src = imgSrc;
            imgContainer.classList.remove('hidden');
        } else {
            imgEl.src = '';
            imgContainer.classList.add('hidden');
        }

// Tampilkan Modal dengan Animasi
        const modal = document.getElementById('beritaModal');
        const modalContent = document.getElementById('beritaModalContent');
        
        modal.classList.remove('hidden');
        
        // Trigger reflow untuk memastikan transisi berjalan
        void modal.offsetWidth; 
        
        modal.classList.remove('opacity-0');
        modalContent.classList.remove('scale-95');
        modalContent.classList.add('scale-100');
        
        // Kunci scroll halaman belakang
        document.body.style.overflow = 'hidden';
    }

function closeModal() {
        const modal = document.getElementById('beritaModal');
        const modalContent = document.getElementById('beritaModalContent');

// Mainkan Animasi Tutup
        modal.classList.add('opacity-0');
        modalContent.classList.remove('scale-100');
        modalContent.classList.add('scale-95');

// Sembunyikan element setelah animasi selesai (300ms = duration-300)
        setTimeout(() => {
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto'; // Kembalikan scroll
        }, 300);
    }

// Fitur Tambahan: Tutup modal jika user klik area gelap di luar modal
    document.getElementById('beritaModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeModal();
        }
    });
</script>

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

Batal

⬅ app 10 item

Nama	Tipe	Ukuran	Diubah	Perm	Aksi
📁 admin-web	dir	—	23/04/26 15:31	0755	📂
📁 errors	dir	—	07/04/24 09:46	0755	📂
📁 layout	dir	—	24/03/26 08:25	0755	📂
🐘 about.php	php	16 KB	08/04/26 16:13	0644	✏️ ⬇
🐘 berita.php	php	11.4 KB	23/04/26 15:31	0644	✏️ ⬇
🐘 galery.php	php	11.6 KB	09/04/26 15:46	0644	✏️ ⬇
🐘 home.php	php	27.2 KB	23/04/26 15:31	0644	✏️ ⬇
🐘 karir.php	php	15.1 KB	10/04/26 09:01	0644	✏️ ⬇
🐘 kedai.php	php	8 KB	17/03/26 10:43	0644	✏️ ⬇
🐘 menu.php	php	6.4 KB	08/04/26 15:20	0644	✏️ ⬇

✏️ Rename

🔑 Ubah Permission