Default page

⚝ One Hat Cyber Team ⚝

Your IP: 192.168.31.6
Server IP: 192.168.1.11
Server: Linux pams 6.1.0-29-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.123-1 (2025-01-02) x86_64
PHP Version: 8.2.28
Buat File | Buat Folder

Dir : ~/var/www/lppm/Modules/Frontend/Views/

Edit File: foto_all.php

<?= $this->extend('front-template'); ?>
<?= $this->section('head'); ?>
<style>
    /* Styling khusus untuk Pagination agar mirip screenshot */
    .pagination {
        display: flex;
        gap: 5px;
        list-style: none;
        padding: 0;
    }
    
    .pagination li a, .pagination li span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 35px;
        border-radius: 8px; /* Kotak agak bulat */
        text-decoration: none;
        background-color: #f8f9fa;
        color: #008080;
        font-weight: bold;
        transition: 0.3s;
        border: 1px solid #dee2e6;
    }

/* Warna saat aktif (Angka yang sedang dibuka) */
    .pagination li.active span, 
    .pagination li.active a {
        background-color: #008080 !important; /* Hijau sesuai tema Ma'had Aly */
        color: white !important;
        border-color: #008080 !important;
    }

.pagination li a:hover {
        background-color: #004d40;
        color: white;
    }
</style>
<?= $this->endSection(); ?>
<?= $this->section('content'); ?>

<div class="container my-5">
    <div class="row g-5">
        <div class="col-lg-8">
            <nav aria-label="breadcrumb" class="mb-4">
                <ol class="breadcrumb small">
                    <li class="breadcrumb-item"><a href="/" class="text-decoration-none text-muted">Beranda</a></li>
                    <li class="breadcrumb-item active text-primary" aria-current="page">Galeri Foto</li>
                </ol>
            </nav>

<h1 class="fw-bold display-6 mb-4" style="color: #004d40; line-height: 1.3;">
                Galeri Foto
            </h1>

<div class="row g-3 mb-5">
                <?php if(!empty($photos)): ?>
                    <?php foreach($photos as $p): ?>
                    <div class="col-6 col-md-4">
                        <a href="<?= base_url('uploads/foto/' . $p['photo_path']) ?>" 
                           data-fancybox="gallery-page" 
                           data-caption="<?= $p['title'] ?>"
                           class="text-decoration-none">
                            <div class="card border-0 shadow-sm rounded-4 overflow-hidden position-relative hover-zoom" style="height: 160px;">
                                <img src="<?= base_url('uploads/foto/' . $p['photo_path']) ?>" 
                                     class="w-100 h-100 object-fit-cover transition-img" 
                                     alt="<?= $p['title'] ?>">
                                <div class="overlay-search position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-dark bg-opacity-25 opacity-0 transition-3">
                                    <i class="bi bi-zoom-in text-white fs-2"></i>
                                </div>
                            </div>
                            <p class="small text-dark fw-bold mt-2 mb-0 text-truncate text-center px-1">
                                <?= $p['title'] ?>
                            </p>
                        </a>
                    </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="col-12 text-center py-5">
                        <p class="text-muted">Koleksi foto belum tersedia.</p>
                    </div>
                <?php endif; ?>
            </div>

<div class="d-flex justify-content-center">
                <?= $pager->links('group_foto', 'default_full') ?>
            </div>
        </div>

<div class="col-lg-4">
            <div class="sticky-top" style="top: 100px; z-index: 1;">
                <h5 class="fw-bold mb-4" style="border-left: 5px solid #008080; padding-left: 15px;">Foto Terbaru</h5>
                
                <div class="d-flex flex-column gap-4">
                    <?php if(!empty($photo_sidebar)): ?>
                        <?php foreach($photo_sidebar as $ps): ?>
                        <div class="d-flex align-items-center gap-3">
                            <div class="flex-shrink-0">
                                <a href="<?= base_url('uploads/foto/' . $ps['photo_path']) ?>" data-fancybox="gallery-sidebar">
                                    <img src="<?= base_url('uploads/foto/' . $ps['photo_path']) ?>" 
                                         class="rounded-3 object-fit-cover shadow-sm" 
                                         style="width: 85px; height: 85px;" 
                                         alt="Thumbnail">
                                </a>
                            </div>
                            <div class="overflow-hidden">
                                <h6 class="fw-bold small mb-1 lh-sm text-dark line-clamp-2" style="font-size: 0.85rem;">
                                    <?= $ps['title'] ?>
                                </h6>
                                <p class="text-muted mb-0" style="font-size: 0.7rem;">
                                    <i class="bi bi-calendar-check me-1"></i> <?= date('d M Y', strtotime($ps['created_at'])) ?>
                                </p>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>

<div class="card border-0 rounded-4 mt-5 shadow-sm overflow-hidden text-white" style="background: linear-gradient(135deg, #008080 0%, #004d40 100%);">
                    <div class="card-body p-4 text-center">
                        <i class="bi bi-images display-4 mb-3 d-block opacity-50"></i>
                        <h6 class="fw-bold mb-2 text-uppercase">Dokumentasi Kegiatan</h6>
                        <p class="small opacity-75 mb-0">Seluruh foto merupakan hak cipta tim publikasi.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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