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: video_all.php

<?= $this->extend('front-template'); ?>
<?= $this->section('head'); ?>
<style>
    /* Agar pagination CI4 rapi secara horizontal */
    .pagination {
        display: flex;
        padding-left: 0;
        list-style: none;
        gap: 5px;
    }
    .pagination li a {
        padding: 8px 16px;
        border: 1px solid #dee2e6;
        color: #008080;
        text-decoration: none;
        border-radius: 8px;
    }
    .pagination li.active a {
        background-color: #008080;
        color: white;
        border-color: #008080;
    }
</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 Video</li>
                </ol>
            </nav>

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

<div class="row g-4 mb-5">
                <?php if(!empty($videos)): ?>
                    <?php foreach($videos as $v): ?>
                    <div class="col-md-6">
                        <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100 shadow-hover">
                            <a href="<?= $v['video_url'] ?>" target="_blank" class="text-decoration-none group">
                                <div class="position-relative">
                                    <img src="https://img.youtube.com/vi/<?= $v['youtube_id'] ?>/mqdefault.jpg" 
                                         class="w-100 object-fit-cover transition-img" 
                                         style="height: 200px;" 
                                         alt="<?= $v['title'] ?>">
                                    <div class="position-absolute top-50 start-50 translate-middle">
                                        <i class="bi bi-play-circle-fill text-white display-4 opacity-75"></i>
                                    </div>
                                </div>
                                <div class="card-body p-3">
                                    <h6 class="fw-bold text-dark lh-base mb-2 hover-primary">
                                        <?= $v['title'] ?>
                                    </h6>
                                    <p class="text-muted small mb-0">
                                        <i class="bi bi-calendar3 me-1"></i> <?= date('d M Y', strtotime($v['created_at'])) ?>
                                    </p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="col-12 text-center py-5">
                        <p class="text-muted">Video belum tersedia.</p>
                    </div>
                <?php endif; ?>
            </div>

<div class="d-flex justify-content-center">
                <?= $pager->links('group1', '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;">Video Terbaru</h5>
                
                <div class="d-flex flex-column gap-4">
                    <?php if(!empty($video_sidebar)): ?>
                        <?php foreach($video_sidebar as $vs): ?>
                        <div class="d-flex align-items-center gap-3">
                            <div class="flex-shrink-0 position-relative">
                                <img src="https://img.youtube.com/vi/<?= $vs['youtube_id'] ?>/mqdefault.jpg" 
                                     class="rounded-3 object-fit-cover shadow-sm" 
                                     style="width: 100px; height: 70px;" 
                                     alt="Thumbnail">
                                <div class="position-absolute top-50 start-50 translate-middle">
                                    <i class="bi bi-play-circle-fill text-white small opacity-75"></i>
                                </div>
                            </div>
                            <div class="overflow-hidden">
                                <a href="<?= $vs['video_url'] ?>" target="_blank" class="text-decoration-none text-dark">
                                    <h6 class="fw-bold small mb-1 lh-sm hover-primary line-clamp-2" style="font-size: 0.85rem;">
                                        <?= $vs['title'] ?>
                                    </h6>
                                </a>
                                <p class="text-muted mb-0" style="font-size: 0.7rem;">
                                    <i class="bi bi-clock me-1"></i> <?= date('d M Y', strtotime($vs['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">
                        <h6 class="fw-bold mb-2"><i class="bi bi-megaphone-fill me-2"></i>Layanan Aduan</h6>
                        <p class="small opacity-75 mb-3">Punya pertanyaan seputar konten kami? Hubungi tim redaksi video.</p>
                        <a href="#" class="btn btn-light btn-sm w-100 rounded-pill fw-bold text-primary">Hubungi Kami</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?= $this->endSection(); ?>