File Manager

✏️ Edit File: /home/rsukartini.com/rs/app/Views/frontend/dokter.php

<?= $this->include('frontend/layout/header') ?>

<section class="page-header">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="page-header-content text-center">
                    <h1 class="page-title">Dokter Rumah Sakit</h1>
                    <p class="page-description">Tim dokter profesional dan berpengalaman siap melayani kesehatan Anda</p>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-center">
                            <li class="breadcrumb-item"><a href="<?= base_url() ?>">Beranda</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Dokter</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="search-section py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="search-form" data-aos="fade-up">
                    <form action="<?= base_url('dokter/search') ?>" method="get">
                        <div class="input-group">
                            <input type="text" 
                                   class="form-control form-control-lg" 
                                   name="q" 
                                   placeholder="Cari dokter berdasarkan nama atau spesialisasi..." 
                                   required>
                            <button class="btn btn-primary btn-lg" type="submit">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<?php if (!empty($dokter)): ?>
<section class="doctors-section py-5 bg-light">
    <div class="container">
        <div class="section-header text-center mb-5" data-aos="fade-up">
            <h6 class="text-primary fw-bold mb-2">TIM DOKTER</h6>
            <h2 class="section-title">Dokter Profesional</h2>
            <div class="title-line mx-auto"></div>
            <p class="text-muted mt-3">Tim dokter berpengalaman dan terpercaya untuk pelayanan kesehatan terbaik</p>
        </div>
        
        <div class="row">
            <?php foreach ($dokter as $index => $dokterItem): ?>
            <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="<?= ($index + 1) * 100 ?>">
                <div class="doctor-card">
                    <div class="doctor-image">
                        <?php if (!empty($dokterItem['foto'])): ?>
                            <img src="<?= base_url('uploads/dokter/' . $dokterItem['foto']) ?>" 
                                 alt="<?= esc($dokterItem['nama_dokter']) ?>" 
                                 class="img-fluid">
                        <?php else: ?>
                            <div class="no-image">
                                <i class="fas fa-user-md fa-3x"></i>
                            </div>
                        <?php endif; ?>
                    </div>
                    <div class="doctor-content">
                        <div class="doctor-specialization">
                            <span class="badge bg-primary"><?= esc($dokterItem['spesialisasi']) ?></span>
                        </div>
                        <h5><?= esc($dokterItem['nama_dokter']) ?></h5>
                        <?php if (!empty($dokterItem['deskripsi'])): ?>
                            <p><?= substr(strip_tags($dokterItem['deskripsi'] ?? ''), 0, 120) ?>...</p>
                        <?php endif; ?>
                        <div class="doctor-info">
                            <?php if (!empty($dokterItem['no_sip'])): ?>
                                <small class="text-muted">
                                    <i class="fas fa-certificate me-1"></i>SIP: <?= esc($dokterItem['no_sip']) ?>
                                </small>
                            <?php endif; ?>
                        </div>
                        <a href="<?= base_url('dokter/detail/' . $dokterItem['slug']) ?>" class="btn btn-outline-primary">
                            <i class="fas fa-arrow-right me-1"></i>Lihat Profil
                        </a>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php else: ?>
    

<section class="doctors-section py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <div class="empty-doctors" data-aos="fade-up">
                    <div class="empty-icon mb-4">
                        <i class="fas fa-user-md fa-5x text-muted"></i>
                    </div>
                    <h3 class="empty-title mb-3">Belum Ada Dokter Tersedia</h3>
                    <p class="empty-message mb-4">
                        Informasi dokter akan ditampilkan di sini. Silakan kembali lagi nanti.
                    </p>
                    <div class="empty-actions">
                        <a href="<?= base_url() ?>" class="btn btn-primary me-3">
                            <i class="fas fa-home me-2"></i>Kembali ke Beranda
                        </a>
                        <a href="<?= base_url('frontcontact') ?>" class="btn btn-outline-primary">
                            <i class="fas fa-phone me-2"></i>Hubungi Kami
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<?php endif; ?>

<section class="doctors-overview py-5">
    <div class="container">
        <div class="row">
            <?php if (!empty($spesialisasi)): ?>
                <?php foreach ($spesialisasi as $index => $spec): ?>
                <div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="<?= ($index + 1) * 100 ?>">
                    <div class="specialization-card">
                        <div class="spec-icon">
                            <i class="fas fa-stethoscope"></i>
                        </div>
                        <h4><?= esc($spec['spesialisasi']) ?></h4>
                        <p>Dokter spesialis <?= esc($spec['spesialisasi']) ?> yang berpengalaman</p>
                        <div class="spec-count"><?= $spec['count'] ?> Dokter</div>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
</section>

<section class="cta-section py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8" data-aos="fade-right">
                <h2 class="cta-title">Butuh Konsultasi dengan Dokter?</h2>
                <p class="cta-description">Tim dokter kami siap memberikan pelayanan kesehatan terbaik untuk Anda dan keluarga.</p>
            </div>
            <div class="col-lg-4 text-end" data-aos="fade-left">
                <a href="<?= base_url('frontcontact') ?>" class="btn btn-light btn-lg">
                    <i class="fas fa-phone me-2"></i>Hubungi Kami
                </a>
            </div>
        </div>
    </div>
</section>

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.page-header-content {
    position: relative;
    z-index: 2;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

.page-description {
    font-size: 1.1rem;
    opacity: 1;
    margin-bottom: 2rem;
    color: #ffffff !important;
    font-weight: 500;
    line-height: 1.6;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.6));
}

.breadcrumb {
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 25px;
    padding: 0.5rem 1rem;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.breadcrumb-item a {
    color: #28a745 !important;
    text-decoration: none;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.breadcrumb-item.active {
    color: #000000 !important;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.8);
    padding: 0.2rem 0.5rem;
    border-radius: 15px;
    margin-left: 0.5rem;
}

/* Force override untuk page header */
.page-header h1,
.page-header .page-title {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5)) !important;
}

.page-header p,
.page-header .page-description {
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.6)) !important;
}

.page-header .breadcrumb-item a {
    color: #28a745 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

.page-header .breadcrumb-item.active {
    color: #000000 !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8) !important;
    background: rgba(255, 255, 255, 0.8) !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 15px !important;
    margin-left: 0.5rem !important;
}

/* Search Form */
.search-form {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.input-group .form-control {
    border-radius: 10px 0 0 10px;
    border-right: none;
}

.input-group .btn {
    border-radius: 0 10px 10px 0;
}

/* Specialization Cards */
.specialization-card {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
}

.specialization-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.spec-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--medical-blue) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    font-size: 2rem;
}

.spec-count {
    background: var(--accent-green);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    margin-top: 1rem;
}

/* Doctor Cards */
.doctor-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
}

.doctor-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.doctor-image {
    height: 250px;
    overflow: hidden;
    position: relative;
}

.doctor-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.doctor-card:hover .doctor-image img {
    transform: scale(1.1);
}

.no-image {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--medical-blue) 100%);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.doctor-content {
    padding: 1.5rem;
}

.doctor-specialization {
    margin-bottom: 1rem;
}

.doctor-content h5 {
    color: var(--gray-800);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.doctor-content p {
    color: var(--gray-600);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.doctor-info {
    margin-bottom: 1.5rem;
}

/* Empty State */
.empty-doctors {
    padding: 4rem 2rem;
}

.empty-icon {
    margin-bottom: 2rem;
}

.empty-title {
    color: var(--gray-800);
    font-weight: 600;
}

.empty-message {
    color: var(--gray-600);
    font-size: 1.1rem;
}

.empty-actions {
    margin-top: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .page-title {
        font-size: 2rem;
    }
    
    .page-description {
        font-size: 1rem;
        padding: 0 1rem;
    }
    
    .specialization-card {
        padding: 1.5rem;
    }
    
    .spec-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .empty-doctors {
        padding: 2rem 1rem;
    }
    
    .empty-icon i {
        font-size: 3rem !important;
    }
    
    .breadcrumb {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }
}
</style>

// Add reading progress indicator
window.addEventListener('scroll', function() {
    const scrollTop = window.pageYOffset;
    const docHeight = document.body.offsetHeight - window.innerHeight;
    const scrollPercent = (scrollTop / docHeight) * 100;
    
    // Create progress bar if it doesn't exist
    let progressBar = document.getElementById('reading-progress');
    if (!progressBar) {
        progressBar = document.createElement('div');
        progressBar.id = 'reading-progress';
        progressBar.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background: linear-gradient(135deg, var(--primary-blue), var(--medical-blue));
            z-index: 9999;
            transition: width 0.3s ease;
        `;
        document.body.appendChild(progressBar);
    }
    
    progressBar.style.width = scrollPercent + '%';
});

// Doctor card hover effects
document.addEventListener('DOMContentLoaded', function() {
    const doctorCards = document.querySelectorAll('.doctor-card');
    
    doctorCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-10px)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });
    
    // Specialization card interactions
    const specCards = document.querySelectorAll('.specialization-card');
    
    specCards.forEach(card => {
        card.addEventListener('click', function() {
            const specialization = this.querySelector('h4').textContent.toLowerCase();
            // Scroll to doctors section
            const doctorsSection = document.querySelector('.doctors-section');
            if (doctorsSection) {
                doctorsSection.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
});
</script>

<?= $this->include('frontend/layout/footer') ?>

Batal

⬅ Naik ke Views 23 item

Nama	Tipe	Ukuran	Diubah	Aksi
📁layout	dir	—	2026-01-31 03:10	📂 Buka
📁slide	dir	—	2026-01-31 03:10	📂 Buka
🐘404.php	php	8.2 KB	2026-05-30 12:11	✏️ Edit 👁️ View
🐘berita.php	php	12.1 KB	2025-08-13 14:14	✏️ Edit 👁️ View
🐘berita_detail.php	php	13.4 KB	2025-09-14 03:14	✏️ Edit 👁️ View
🐘contact.php	php	21.5 KB	2025-12-12 04:42	✏️ Edit 👁️ View
🐘dokter.php	php	15.7 KB	2025-09-13 10:46	✏️ Edit 👁️ View
🐘dokter_detail.php	php	17.5 KB	2026-01-31 03:02	✏️ Edit 👁️ View
🐘dokter_search.php	php	13.5 KB	2025-09-13 09:27	✏️ Edit 👁️ View
🐘download.php	php	33.1 KB	2025-09-13 11:01	✏️ Edit 👁️ View
🐘fasilitas.php	php	20.1 KB	2026-05-30 12:11	✏️ Edit 👁️ View
🐘fasilitas_detail.php	php	16 KB	2025-09-13 09:05	✏️ Edit 👁️ View
🐘fasilitas_search.php	php	12.7 KB	2025-09-13 08:49	✏️ Edit 👁️ View
🐘galeri.php	php	9.6 KB	2025-07-14 12:49	✏️ Edit 👁️ View
🐘halaman.php	php	12.4 KB	2025-07-16 00:41	✏️ Edit 👁️ View
🐘home.php	php	26.3 KB	2026-05-31 08:50	✏️ Edit 👁️ View
🐘info_kamar.php	php	17.3 KB	2026-05-31 08:44	✏️ Edit 👁️ View
🐘jadwal_dokter.php	php	21.4 KB	2026-05-31 08:45	✏️ Edit 👁️ View
🐘poliklinik.php	php	9.7 KB	2025-09-14 01:44	✏️ Edit 👁️ View
🐘poliklinik_detail.php	php	13.6 KB	2026-05-30 12:10	✏️ Edit 👁️ View
🐘search.php	php	19.9 KB	2025-07-14 13:10	✏️ Edit 👁️ View
🐘user_login.php	php	7.9 KB	2025-08-15 03:09	✏️ Edit 👁️ View
🐘user_loginnew.php	php	8 KB	2025-08-13 14:08	✏️ Edit 👁️ View