FileMgr

✏️ /home/mien4214/public_html/webcp-lama/app/Views/video/index.php

✕ Tutup

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

<?= $this->section('style') ?>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&display=swap" rel="stylesheet">
<style>
    :root {
        --neo-bg: #FDF4E3;          
        --neo-dark: #181818; 
        --neo-red: #D41343;         
        --neo-yellow: #FFD13B;      
        --neo-pink: #FFB3C6;       
        --neo-blue: #A2D2FF;       
        --neo-white: #ffffff;
        
        --border-thick: 3px solid var(--neo-dark);
        --radius-medium: 16px;
        --radius-large: 24px;
    }

body {
        font-family: 'Space Grotesk', sans-serif;
        color: var(--neo-dark);
        background-color: var(--neo-bg);
    }

/* --- PAGE TITLE --- */
    .neo-page-title {
        font-size: 3.5rem;
        text-align: center;
        margin-bottom: 15px;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--neo-dark);
        text-shadow: 4px 4px 0px var(--neo-yellow);
        letter-spacing: -1px;
    }

.badge-title {
        background: var(--neo-dark);
        color: var(--neo-white);
        padding: 8px 25px;
        border-radius: 50px;
        font-size: 1.2rem;
        font-weight: 800;
        display: inline-block;
        box-shadow: 4px 4px 0px var(--neo-red);
        transform: rotate(-2deg);
        border: 2px solid var(--neo-dark);
        text-transform: uppercase;
    }

/* --- VIDEO CARD NEO-BRUTALISM --- */
    .neo-video-card {
        border: var(--border-thick);
        border-radius: var(--radius-large);
        padding: 20px;
        box-shadow: 6px 6px 0px var(--neo-dark);
        transition: 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .neo-video-card:hover {
        transform: translate(-4px, -4px);
        box-shadow: 10px 10px 0px var(--neo-red);
    }

/* Bingkai Iframe mirip layar TV */
    .neo-video-wrapper {
        border: 3px solid var(--neo-dark);
        border-radius: var(--radius-medium);
        overflow: hidden;
        background: var(--neo-dark); /* background hitam saat loading */
        position: relative;
        padding-bottom: 56.25%; /* Aspect Ratio 16:9 */
        height: 0;
        box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
    }

.neo-video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.neo-video-body {
        padding-top: 20px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

.neo-video-title {
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 10px;
        color: var(--neo-dark);
        text-transform: uppercase;
    }

.neo-video-desc {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--neo-dark);
        margin-bottom: 0;
        line-height: 1.6;
    }

/* Hiasan titik-titik (opsional) */
    .neo-dots {
        display: flex;
        gap: 5px;
        margin-bottom: 15px;
    }
    .neo-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid var(--neo-dark);
    }

@media only screen and (max-width: 768px) {
        .neo-page-title { font-size: 2.5rem; }
        .neo-video-card { padding: 15px; }
        .neo-video-title { font-size: 1.2rem; }
    }
</style>
<?= $this->endSection() ?>

<?= $this->section('content') ?>
<main id="main" style="padding-top: 100px; padding-bottom: 80px;">

<section id="video-gallery" class="mt-4">
        <div class="container">
            
            <div class="text-center mb-5">
                <div class="badge-title mb-2">🎬 NONTON YUK!</div>
                <h1 class="neo-page-title"><?= $title ?></h1>
            </div>

<?php if(!empty($video)): ?>
                    <?php foreach ($video as $index => $v) : ?>
                        <?php 
                            // Rotasi warna berurutan
                            $bg_color = $colors[$index % count($colors)];
                        ?>
                        <div class="col-md-4 mb-4">
                            <div class="neo-video-card" style="background-color: <?= $bg_color ?>;">
                                
                                <div class="neo-video-wrapper">
                                    <iframe src="https://www.youtube.com/embed/<?= $v['video'] ?>" 
                                            title="<?= $v['judul'] ?>" 
                                            frameborder="0" 
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                            allowfullscreen>
                                    </iframe>
                                </div>
                                
                                <div class="neo-video-body">
                                    <div class="neo-dots">
                                        <div class="neo-dot" style="background: var(--neo-red);"></div>
                                        <div class="neo-dot" style="background: var(--neo-yellow);"></div>
                                        <div class="neo-dot" style="background: var(--neo-blue);"></div>
                                    </div>

</div>
                        </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="col-12 text-center">
                        <div class="neo-video-card" style="background: var(--neo-pink); display: inline-block; padding: 40px; width: 100%; max-width: 600px;">
                            <h3 style="font-weight: 800; margin-bottom: 0;">Belum ada video saat ini. 😢</h3>
                        </div>
                    </div>
                <?php endif; ?>

</div>
        </div>
    </section>

</main>
<?= $this->endSection() ?>

Batal

⬅ Views 1 item

Nama	Tipe	Ukuran	Diubah	Perm	Aksi
🐘 index.php	php	6.7 KB	27/02/26 15:41	0644	✏️ ⬇

✏️ Rename

🔑 Ubah Permission