FileMgr

✏️ /home/mien4214/public_html/webcp-lama/app/Views/galeri/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;
    }

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

.neo-page-title {
        font-size: 3.5rem;
        text-align: center;
        margin-bottom: 15px;
        font-weight: 800;
        text-transform: uppercase;
        text-shadow: 4px 4px 0px var(--neo-yellow);
    }

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

/* --- STYLE TAMBAHAN: TOMBOL NEO --- */
    .neo-btn {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        font-size: 1.1rem;
        padding: 10px 24px;
        border: var(--border-thick);
        border-radius: var(--radius-medium);
        cursor: pointer;
        transition: 0.2s all ease-in-out;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

.neo-btn-primary {
        background-color: var(--neo-yellow);
        color: var(--neo-dark);
        box-shadow: 4px 4px 0px var(--neo-dark);
    }

.neo-btn-primary:hover {
        transform: translate(-2px, -2px);
        box-shadow: 6px 6px 0px var(--neo-dark);
    }

.neo-btn-primary:active {
        transform: translate(2px, 2px);
        box-shadow: 0px 0px 0px var(--neo-dark);
    }

.neo-btn-secondary {
        background-color: var(--neo-white);
        color: var(--neo-dark);
        box-shadow: 4px 4px 0px var(--neo-dark);
    }

.neo-btn-secondary:hover {
        background-color: var(--neo-pink);
        transform: translate(-2px, -2px);
        box-shadow: 6px 6px 0px var(--neo-dark);
    }

/* --- STYLE TAMBAHAN: MODAL & FORM NEO --- */
    .neo-modal {
        border: var(--border-thick);
        border-radius: var(--radius-medium);
        box-shadow: 12px 12px 0px var(--neo-dark);
        background-color: var(--neo-bg);
    }

.neo-modal-header {
        border-bottom: var(--border-thick);
        background-color: var(--neo-blue);
        border-top-left-radius: 13px;
        border-top-right-radius: 13px;
    }

.neo-modal-footer {
        border-top: var(--border-thick);
    }

.neo-input {
        border: var(--border-thick);
        border-radius: 8px;
        background-color: var(--neo-white);
        box-shadow: 4px 4px 0px var(--neo-dark);
        transition: 0.2s all;
        font-family: 'Space Grotesk', sans-serif;
    }

.neo-input:focus {
        box-shadow: 6px 6px 0px var(--neo-red);
        outline: none;
        border-color: var(--neo-dark);
    }

/* --- ABSTRAK MASONRY GRID --- */
    .gallery-grid {
        column-width: 230px; 
        column-gap: 20px;
        padding: 10px 10px;
        max-width: 1200px;
        margin: 0 auto;
    }

.grid-item {
        break-inside: avoid;
        margin-bottom: 25px;
        position: relative;
    }

.grid-item:nth-child(3n+1) { margin-top: 15px; }
    .grid-item:nth-child(3n+2) { margin-top: -10px; }

.neo-gallery-card {
        display: block;
        width: 100%;
        height: auto;
        border: var(--border-thick);
        border-radius: var(--radius-medium);
        padding: 8px;
        padding-bottom: 25px;
        box-shadow: 4px 4px 0px var(--neo-dark);
        transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        text-decoration: none;
    }

.neo-gallery-card img {
        width: 100%;
        height: auto;
        display: block;
        border: 2px solid var(--neo-dark);
        border-radius: 6px;
    }

.neo-gallery-card:hover {
        transform: scale(1.05) rotate(0deg) !important;
        box-shadow: 8px 8px 0px var(--neo-red);
        z-index: 10;
        position: relative;
    }

.grid-item:nth-child(odd) .neo-gallery-card { transform: rotate(-2.5deg); }
    .grid-item:nth-child(even) .neo-gallery-card { transform: rotate(2.5deg); }

@media (max-width: 768px) {
        .gallery-grid {
            column-width: 150px;
            column-gap: 15px;
        }
        .neo-page-title { font-size: 2.2rem; }
    }
  
    /* css modal glightbox*/
    .glightbox-clean .goverlay {
        background-color: rgba(24, 24, 24, 0.95) !important; 
    }
    
    .glightbox-clean .gslide-image img {
        border: var(--border-thick) !important;
        border-radius: var(--radius-medium) !important;
        box-shadow: 10px 10px 0px var(--neo-yellow) !important;
    }
    
    .glightbox-clean .gslide-description {
        background: var(--neo-white) !important;
        border: var(--border-thick) !important;
        border-radius: var(--radius-medium) !important;
        box-shadow: 8px 8px 0px var(--neo-dark) !important;
        margin-top: 20px !important;
        padding: 5px 25px !important;
        width: 100% !important;
        max-width: 90% !important; 
    }
    
    .glightbox-clean .gslide-title {
        font-family: 'Space Grotesk', sans-serif !important;
        font-weight: 800 !important;
        color: var(--neo-dark) !important;
        margin-bottom: 12px !important;
        border-bottom: 3px solid var(--neo-red);
        padding-bottom: 10px;
        font-size: 1.5rem;
    }
    
    .glightbox-clean .gslide-desc {
        font-family: 'Space Grotesk', sans-serif !important;
        font-weight: 600 !important;
        color: var(--neo-dark) !important;
        line-height: 1.5;
        font-size: 1rem;
    }
    
    .glightbox-clean .gbtn {
        background-color: var(--neo-yellow) !important;
        border: var(--border-thick) !important;
        border-radius: 50% !important;
        opacity: 1 !important;
        box-shadow: 4px 4px 0px var(--neo-dark) !important;
        transition: all 0.2s ease !important;
        width: 45px !important;
        height: 45px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .glightbox-clean .gbtn:hover {
        background-color: var(--neo-red) !important;
        transform: translate(-2px, -2px) !important;
        box-shadow: 6px 6px 0px var(--neo-dark) !important;
    }
    
    .glightbox-clean .gbtn svg {
        fill: var(--neo-dark) !important;
        width: 20px !important;
        height: 20px !important;
    }
    
    .glightbox-clean .gclose {
        background-color: var(--neo-red) !important;
        top: 20px !important;
        right: 20px !important;
    }
    .glightbox-clean .gclose svg {
        fill: var(--neo-white) !important;
    }
    
    .glightbox-clean .gslide-inner-content {
        padding: 8vh 15px !important; 
    }

.glightbox-clean .ginner-container {
        max-width: 1000px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

.glightbox-clean .gslide-image img {
        max-height: 55vh !important; 
        width: 100% !important;
        object-fit: cover !important; 
        border: var(--border-thick) !important;
        border-radius: var(--radius-medium) !important;
        box-shadow: 10px 10px 0px var(--neo-yellow) !important;
    }
    @media (max-width: 768px) {
        .glightbox-clean .gslide-inner-content {
            margin-top: -200px; 
        }
    }
</style>
<?= $this->endSection() ?>

<?= $this->section('content') ?>
<main id="main">
    <section id="gallery" class="gallery">
        <div class="container" data-aos="fade-up" style="margin-top: 90px;">

<div class="text-center mb-5">
                <div class="badge-title mb-2">📸 MOMEN SERU KAMI</div>
                <h1 class="neo-page-title"><?= $title ?></h1>
                <p style="font-weight: 600; font-size: 1.1rem; max-width: 700px; margin: 0 auto; opacity: 0.8;">
                    <?= $konfigurasi['tentang'] ?>
                </p>
                
                <div class="mt-4">
                    <button type="button" class="neo-btn neo-btn-primary" data-bs-toggle="modal" data-bs-target="#uploadModal">
                        ➕ Upload Momentmu
                    </button>
                </div>
            </div>

<div class="gallery-grid">
                <?php 
                    $colors = ['var(--neo-yellow)', 'var(--neo-pink)', 'var(--neo-blue)', 'var(--neo-white)']; 
                    $i = 0;
                ?>
                
                <?php foreach ($galeri as $item) : ?>
                    <?php 
                        $bg_color = $colors[$i % count($colors)];
                        $i++;
                    ?>
                    <div class="grid-item">
                        <a class="gallery-lightbox neo-gallery-card" 
                           href="<?= base_url('assets/upload/image/' . $item['gambar']) ?>" 
                           style="background-color: <?= $bg_color ?>;"
                           data-title="<?= esc($item['judul_galeri']) ?>"
                           data-description="<?= !empty($item['isi']) ? esc(strip_tags($item['isi'])) : '' ?>">
                           
                            <img src="<?= base_url('assets/upload/image/' . $item['gambar']) ?>" 
                                 alt="<?= $item['judul_galeri'] ?>"
                                 loading="lazy">
                        </a>
                    </div>
                <?php endforeach; ?>
            </div>

</div>
    </section>

<div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content neo-modal">
                <div class="modal-header neo-modal-header">
                    <h5 class="modal-title" id="uploadModalLabel" style="font-weight: 800;">Upload Foto Baru</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                
                <form action="<?= base_url('admin/galeri/moment') ?>" method="post" enctype="multipart/form-data">
                    <div class="modal-body">
                        
                        <div class="mb-3 text-start">
                            <label for="judul_galeri" class="form-label fw-bold">Judul Foto</label>
                            <input type="text" class="form-control neo-input" id="judul_galeri" name="judul_galeri" placeholder="Masukkan judul..." required>
                        </div>

<div class="mb-3 text-start">
                            <label for="deskripsi" class="form-label fw-bold">Deskripsi</label>
                            <textarea class="form-control neo-input" id="deskripsi" name="isi" rows="3" placeholder="Ceritakan momen ini..."></textarea>
                        </div>

<div class="mb-3 text-start">
                            <label for="foto" class="form-label fw-bold">Pilih Foto</label>
                            <input type="file" class="form-control neo-input" id="foto" name="gambar" accept="image/*" required>
                        </div>

</div>
                    <div class="modal-footer neo-modal-footer">
                        <button type="button" class="neo-btn neo-btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="neo-btn neo-btn-primary">Upload</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    </main>
<?= $this->endSection() ?>

Batal

⬅ Views 1 item

Nama	Tipe	Ukuran	Diubah	Perm	Aksi
🐘 index.php	php	12.4 KB	28/02/26 14:11	0644	✏️ ⬇

✏️ Rename

🔑 Ubah Permission