FileMgr

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

/* --- CLIENT / OUTLET CARD NEO --- */
    .neo-client-card {
        border: var(--border-thick);
        border-radius: var(--radius-large);
        overflow: hidden;
        box-shadow: 6px 6px 0px var(--neo-dark);
        transition: all 0.2s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
    }

.neo-client-card:hover {
        transform: translate(-3px, -3px);
        box-shadow: 9px 9px 0px var(--neo-red);
    }

.neo-client-img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        border-bottom: var(--border-thick);
        background: var(--neo-white);
    }

.neo-client-body {
        padding: 20px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        background-color: inherit;
        text-align: center;
    }

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

.neo-client-address {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--neo-dark);
        margin-bottom: 25px;
        line-height: 1.5;
        flex-grow: 1;
    }

/* --- NEO ACTION BUTTONS --- */
    .neo-action-btn {
        border: 2px solid var(--neo-dark);
        border-radius: 50px;
        padding: 8px 15px;
        font-weight: 800;
        font-size: 0.85rem;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--neo-dark);
        box-shadow: 3px 3px 0px var(--neo-dark);
        transition: 0.2s;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        flex: 1; /* Membagi rata lebar tombol */
        min-width: 100px;
    }

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

.btn-order { background: var(--neo-yellow); }
    .btn-wa { background: #25D366; color: white !important; } /* Hijau WA */
    .btn-map { background: var(--neo-white); }
    .btn-wa:hover { color: white !important; }

/* --- STAMP TOKO TUTUP --- */
    .card-closed {
        opacity: 0.85;
        filter: grayscale(80%);
    }
    .card-closed:hover {
        transform: none;
        box-shadow: 6px 6px 0px var(--neo-dark);
    }
    .stamp-tutup {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-15deg);
        font-size: 3rem;
        font-weight: 900;
        color: var(--neo-red);
        border: 5px solid var(--neo-red);
        padding: 5px 25px;
        text-transform: uppercase;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 8px 8px 0px var(--neo-dark);
        z-index: 10;
        pointer-events: none; /* Agar tidak menutupi klik (walau tombol disembunyikan) */
        letter-spacing: 2px;
    }

@media only screen and (max-width: 768px) {
        .neo-page-title { font-size: 2.5rem; }
        .neo-client-img { height: 180px; }
        .neo-client-title { font-size: 1.2rem; }
        .stamp-tutup { font-size: 2rem; border-width: 4px; }
    }
</style>
<?= $this->endSection() ?>

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

<div class="text-center mb-5">
                <div class="badge-title mb-2">📍 TEMUKAN KAMI</div>
                <h1 class="neo-page-title"><?= $title ?></h1>
            </div>
            
            <div class="row align-items-stretch g-4 justify-content-center">
                <?php 
                    // Array warna dinamis untuk card
                    $colors = ['var(--neo-yellow)', 'var(--neo-pink)', 'var(--neo-blue)', 'var(--neo-white)']; 
                ?>
                
                <?php if(!empty($client)): ?>
                    <?php foreach ($client as $index => $c) : ?>
                        <?php 
                            $bg_color = $colors[$index % count($colors)]; 
                            $is_closed = ($c['kd_toko'] == 'KDR03'); // Kondisi toko tutup
                        ?>
                        
                        <div class="col-lg-4 col-md-6 mb-4">
                            <div class="neo-client-card <?= $is_closed ? 'card-closed' : '' ?>" style="background-color: <?= $bg_color ?>;">
                                
                                <?php if($is_closed): ?>
                                    <div class="stamp-tutup">TUTUP</div>
                                <?php endif; ?>

<img class="neo-client-img" src="https://mienyinyir.com/webcp/assets/upload/client/<?= $c['foto'] ?>" alt="<?= $c['nm_toko'] ?>">
                                
                                <div class="neo-client-body">
                                    <h3 class="neo-client-title"><?= $c['nm_toko'] ?></h3>
                                    <p class="neo-client-address"><?= $c['almt_toko'] ?></p>
                                    
                                    <?php if(!$is_closed): ?>
                                        <div class="d-flex flex-wrap gap-2 mt-auto w-100">
                                            <a href="https://mienyinyir.com/eorder/<?= strtolower($c['kd_toko'])?>" target="_blank" class="neo-action-btn btn-order">
                                                <i class="bi bi-basket2-fill"></i> Order
                                            </a>
                                            <a href="<?= $c['nowa'] ?>" target="_blank" class="neo-action-btn btn-wa">
                                                <i class="bx bxl-whatsapp" style="font-size: 1.1rem;"></i> Chat
                                            </a>
                                            <a href="<?= $c['gmap'] ?>" target="_blank" class="neo-action-btn btn-map">
                                                <i class="bi bi-geo-alt-fill"></i> Map
                                            </a>
                                        </div>
                                    <?php endif; ?>
                                </div>

</div>
                        </div>

<?php endforeach; ?>
                <?php else: ?>
                    <div class="col-12 text-center">
                        <p class="fw-bold fs-4">Belum ada cabang yang terdaftar.</p>
                    </div>
                <?php endif; ?>

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

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

Batal

⬅ Views 1 item

Nama	Tipe	Ukuran	Diubah	Perm	Aksi
🐘 index.php	php	8.3 KB	25/02/26 15:20	0644	✏️ ⬇

✏️ Rename

🔑 Ubah Permission