FileMgr

✏️ /home/mien4214/public_html/webcp-lama/app/Views/saran/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-green: #00B14F;       
        --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;
    }

/* --- ALERTS --- */
    .neo-alert {
        border: var(--border-thick);
        border-radius: var(--radius-medium);
        padding: 15px 25px;
        font-weight: 700;
        font-size: 1.1rem;
        box-shadow: 4px 4px 0px var(--neo-dark);
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        animation: slideDown 0.5s ease-out forwards;
    }
    .neo-alert-success { background: var(--neo-green); color: var(--neo-white); }
    .neo-alert-danger { background: var(--neo-red); color: var(--neo-white); }
    
    @keyframes slideDown {
        from { transform: translateY(-20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

/* --- FORM STYLING --- */
    .neo-form-wrapper {
        background: var(--neo-white);
        border: var(--border-thick);
        border-radius: var(--radius-large);
        padding: 40px;
        box-shadow: 8px 8px 0px var(--neo-dark);
        height: 100%;
    }

.form-label {
        font-weight: 800;
        font-size: 1rem;
        color: var(--neo-dark);
        margin-bottom: 8px;
    }

.input-group {
        box-shadow: 3px 3px 0px var(--neo-dark);
        border-radius: 8px;
        transition: 0.2s;
        margin-bottom: 20px;
    }
    .input-group:focus-within {
        box-shadow: 6px 6px 0px var(--neo-blue);
        transform: translate(-2px, -2px);
    }

.input-group-text {
        background: var(--neo-yellow);
        border: 2px solid var(--neo-dark);
        border-right: none;
        color: var(--neo-dark);
        font-size: 1.2rem;
        border-radius: 8px 0 0 8px;
        padding: 12px 15px;
    }

.form-control {
        border: 2px solid var(--neo-dark);
        border-radius: 0 8px 8px 0 !important;
        padding: 12px 15px;
        font-weight: 600;
        background: var(--neo-bg);
    }
    .form-control:focus {
        border-color: var(--neo-dark);
        background: var(--neo-white);
        box-shadow: none;
        outline: none;
    }
    .form-control.is-invalid {
        border-color: var(--neo-red) !important;
        background-color: #ffe6e6;
    }

.neo-submit-btn {
        background: var(--neo-dark);
        color: var(--neo-white);
        border: 2px solid var(--neo-dark);
        border-radius: 50px;
        padding: 12px 20px;
        font-weight: 800;
        font-size: 1.1rem;
        text-transform: uppercase;
        box-shadow: 4px 4px 0px var(--neo-red);
        transition: 0.2s;
        width: 100%;
    }
    .neo-submit-btn:hover {
        transform: translate(-2px, -2px);
        box-shadow: 6px 6px 0px var(--neo-dark);
        background: var(--neo-white);
        color: var(--neo-dark);
    }

/* --- CAROUSEL REVIEW NEO-BRUTALISM --- */
    .neo-carousel-wrapper {
        background: var(--neo-pink);
        border: var(--border-thick);
        border-radius: var(--radius-large);
        padding: 40px;
        box-shadow: 8px 8px 0px var(--neo-dark);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
    }

.carousel-item {
        text-align: center;
        padding: 20px;
    }

.quote-icon {
        font-size: 5rem;
        line-height: 0.8;
        color: var(--neo-dark);
        margin-bottom: 10px;
    }

.review-text {
        font-size: 1.3rem;
        font-weight: 800;
        line-height: 1.5;
        color: var(--neo-dark);
        margin-bottom: 20px;
        font-style: italic;
    }

.reviewer-name {
        background: var(--neo-white);
        border: 2px solid var(--neo-dark);
        padding: 8px 20px;
        border-radius: 50px;
        font-weight: 800;
        display: inline-block;
        box-shadow: 3px 3px 0px var(--neo-dark);
        font-size: 1.1rem;
    }

/* Tombol Navigasi Carousel */
    .neo-carousel-control {
        background: var(--neo-yellow);
        border: 2px solid var(--neo-dark);
        color: var(--neo-dark);
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 3px 3px 0px var(--neo-dark);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        opacity: 1 !important;
        transition: 0.2s;
    }
    .neo-carousel-control:hover {
        background: var(--neo-white);
        box-shadow: 5px 5px 0px var(--neo-dark);
    }
    .neo-carousel-control i {
        font-size: 1.2rem;
    }
    
    .btn-prev { left: -20px; }
    .btn-next { right: -20px; }

@media only screen and (max-width: 991px) {
        .neo-page-title { font-size: 2.5rem; }
        .btn-prev { left: 10px; }
        .btn-next { right: 10px; }
        .review-text { font-size: 1.1rem; }
    }
</style>
<?= $this->endSection() ?>

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

<section id="saran" class="mt-4">
        
        <div class="container">
            <div class="text-center mb-5">
                <div class="badge-title mb-2">💬 SUARA KAMU PENTING!</div>
                <h1 class="neo-page-title"><?= $title ?></h1>
            </div>

<?php if (session('failed')) : ?>
                <div class="neo-alert neo-alert-danger" role="alert">
                    <div><strong>⚠️ GAGAL:</strong> <?= session('failed') ?></div>
                </div>
            <?php endif; ?>

<?php if (session('success')) : ?>
                <div class="neo-alert neo-alert-success" role="alert">
                    <div><strong>🎉 BERHASIL:</strong> <?= session('success') ?></div>
                </div>
            <?php endif; ?>
        </div>

<div class="container">
            <div class="row align-items-stretch g-5">
                
                <div class="col-lg-6">
                    <div class="neo-form-wrapper">
                        <h3 style="font-weight: 800; margin-bottom: 25px; border-bottom: 3px solid var(--neo-dark); padding-bottom: 10px;">TULIS PESANMU ✍️</h3>
                        
                        <form action="<?= base_url('saran/tambah') ?>" method="post">
                            <?= csrf_field(); ?>
                            
                            <div class="mb-3">
                                <label class="form-label" for="nama">Nama</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bx bx-user"></i></span>
                                    <input type="text" class="form-control <?= $validation->hasError('nama_saran') ? 'is-invalid' : null ?>" value="<?= old('nama_saran') ?>" name="nama_saran" placeholder="Masukkan Nama Lengkap" />
                                </div>
                            </div>  
                            
                            <div class="mb-3">
                                <label class="form-label" for="nomor">Nomor Telepon</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bx bx-phone"></i></span>
                                    <input type="number" class="form-control <?= $validation->hasError('nomor_saran') ? 'is-invalid' : null ?>" name="nomor_saran" value="<?= old('nomor_saran') ?>" placeholder="Cth: 08123456789" />
                                </div>
                            </div> 
                            
                            <div class="mb-3">
                                <label class="form-label" for="alamat">Kritik & Saran</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bx bx-comment"></i></span>
                                    <textarea name="isi_saran" rows="4" class="form-control <?= $validation->hasError('isi_saran') ? 'is-invalid' : null ?>" placeholder="Tuliskan pengalaman atau saranmu di sini..."><?= old('isi_saran') ?></textarea>
                                </div>
                            </div>

<button type="submit" class="neo-submit-btn">Kirim Pesan ➔</button>
                        </form>
                    </div>
                </div>

<div class="col-lg-6 mt-5 mt-lg-0">
                    <div class="neo-carousel-wrapper">
                        
                        <div id="demo" class="carousel slide" data-ride="carousel" data-bs-ride="carousel">
                            <div class="carousel-inner">
                                
                                <?php $no = 1; foreach ($saran as $sr) { ?>
                                    <div class="carousel-item <?= ($no === 1) ? 'active' : '' ?>">
                                        <div class="quote-icon">❝</div>
                                        <p class="review-text">"<?= $sr['isi_saran'] ?>"</p>
                                        <div class="reviewer-name">👤 <?= $sr['nama_saran'] ?></div>
                                    </div>
                                <?php $no++; } ?>
                                
                                <?php if(empty($saran)): ?>
                                    <div class="carousel-item active">
                                        <div class="quote-icon">❝</div>
                                        <p class="review-text">"Belum ada ulasan. Jadilah yang pertama memberikan masukan untuk kami!"</p>
                                        <div class="reviewer-name">Mie Nyinyir Team</div>
                                    </div>
                                <?php endif; ?>

</div>
                        </div>

</div>
                </div>

</div>
        </div>

</section>

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

Batal

⬅ Views 1 item

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

✏️ Rename

🔑 Ubah Permission