Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-611.26.1.el9_7.x86_64

PHP Version:

8.4.15

User:

u892747680

Directory:

/home/u892747680/domains/sisteminformasic.com/public_html/manurulimanmtg

Free Space:

9.76 TB

🔧 Quick Actions

✏️ Editing: beranda.php

<?php
// beranda.php
$sliders = get_sliders();
$berita_terbaru = get_berita_terbaru(3);
$profil = get_profil_sekolah();
$kepsek = get_kepsek();
?>

<section class="relative">
    <div class="slider-container w-full h-[50vh] sm:h-[60vh] md:h-[70vh] lg:h-[90vh] max-h-[700px] overflow-hidden">
        <?php foreach ($sliders as $index => $slider): ?>
        <div class="slider-item fade <?= $index === 0 ? 'active' : '' ?> h-full">
            <div class="w-full h-full relative">
                <img src="<?= BASE_URL ?>/assets/img/uploads/slider/<?= $slider['gambar'] ?>" 
                     alt="<?= $slider['judul'] ?>" 
                     class="absolute top-0 left-0 w-full h-full object-cover object-center">
                <div class="absolute inset-0 bg-gradient-to-r from-black/70 to-black/30 flex flex-col justify-center px-4 sm:px-8 md:px-16">
                    <div class="main-container">
                        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold text-white mb-2 sm:mb-4 max-w-2xl"><?= $slider['judul'] ?></h2>
                        <p class="text-base sm:text-lg md:text-xl text-gray-200 mb-4 sm:mb-8 max-w-2xl"><?= $slider['deskripsi'] ?></p>
                        <a href="<?= BASE_URL ?>/profil.php" class="bg-accent hover:bg-accent-dark text-white font-bold py-2 sm:py-3 px-6 sm:px-8 rounded-lg transition duration-300 inline-flex items-center gap-2 text-sm sm:text-base">
                            Tentang Kami
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
        
        
        <button class="slider-nav prev absolute left-2 sm:left-4 top-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/40 text-white w-8 h-8 sm:w-12 sm:h-12 rounded-full flex items-center justify-center backdrop-blur-sm transition" onclick="moveSlide(-1)">
            <i class="fas fa-chevron-left text-sm sm:text-xl"></i>
        </button>
        <button class="slider-nav next absolute right-2 sm:right-4 top-1/2 -translate-y-1/2 bg-white/20 hover:bg-white/40 text-white w-8 h-8 sm:w-12 sm:h-12 rounded-full flex items-center justify-center backdrop-blur-sm transition" onclick="moveSlide(1)">
            <i class="fas fa-chevron-right text-sm sm:text-xl"></i>
        </button>
        
        
        <div class="slider-dots absolute bottom-4 sm:bottom-6 left-0 right-0 flex justify-center gap-1 sm:gap-2">
            <?php for ($i = 0; $i < count($sliders); $i++): ?>
            <span class="dot w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-white/50 hover:bg-white cursor-pointer transition <?= $i === 0 ? 'active bg-white' : '' ?>" onclick="showSlide(<?= $i ?>)"></span>
            <?php endfor; ?>
        </div>
    </div>
</section>

<section class="py-10 sm:py-12 md:py-16 bg-gray-50">
    <div class="main-container px-4">
        <div class="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8 items-center">
            <div class="md:col-span-5 relative">
                <div class="bg-primary absolute top-4 -left-4 sm:top-6 sm:-left-6 w-full h-full rounded-lg -z-10"></div>
                <div class="w-full h-0 pb-[100%] relative overflow-hidden rounded-lg shadow-lg">
                    <img src="<?= BASE_URL ?>/assets/img/uploads/kepsek/<?= $kepsek['foto'] ?>" 
                         alt="Kepala Sekolah" 
                         class="absolute top-0 left-0 w-full h-full object-cover object-center z-10">
                </div>
            </div>
            <div class="md:col-span-7 mt-6 md:mt-0">
            <div class="flex items-center  gap-2 justify-center mb-2">
                <div class="h-1 w-8 sm:w-12 bg-accent"></div>
                <span class="text-accent font-medium text-sm sm:text-base">Sambutan</span>
                <div class="h-1 w-8 sm:w-12 bg-accent"></div>
            </div>
                <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 mb-4 sm:mb-6 text-center">Sambutan Kepala Sekolah</h2>
                <p class="text-base sm:text-lg text-gray-700 mb-4 sm:mb-6"><?= nl2br($kepsek['sambutan_1']) ?></p>
                <p class="text-base sm:text-lg text-gray-700 mb-4 sm:mb-6"><?= nl2br($kepsek['sambutan_2']) ?></p>
                        <h4 class="font-bold text-base sm:text-lg text-primary"><?= $kepsek['nama'] ?></h4>
                        <p class="text-sm sm:text-base text-gray-600"><?= $kepsek['jabatan'] ?></p>
            </div>
        </div>
    </div>
</section>

<section class="py-10 sm:py-12 md:py-16 bg-white">
    <div class="main-container px-4">
        <div class="text-center mb-8 sm:mb-12">
            <div class="flex items-center gap-2 justify-center mb-2">
                <div class="h-1 w-8 sm:w-12 bg-accent"></div>
                <span class="text-accent font-medium text-sm sm:text-base">Filosofi Kami</span>
                <div class="h-1 w-8 sm:w-12 bg-accent"></div>
            </div>
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-800">Visi dan Misi</h2>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
            <div class="bg-gray-50 p-6 sm:p-8 rounded-lg shadow-md hover:shadow-lg transition">
                <div class="flex items-center mb-4 sm:mb-6">
                    <div class="bg-primary p-3 sm:p-4 rounded-full mr-3 sm:mr-4 text-white">
                        <i class="fas fa-eye text-lg sm:text-xl"></i>
                    </div>
                    <h3 class="text-xl sm:text-2xl font-bold text-gray-800">Visi</h3>
                </div>
                <p class="text-base sm:text-lg text-gray-700 leading-relaxed"><?= $profil['visi'] ?></p>
            </div>
            <div class="bg-gray-50 p-6 sm:p-8 rounded-lg shadow-md hover:shadow-lg transition">
                <div class="flex items-center mb-4 sm:mb-6">
                    <div class="bg-accent p-3 sm:p-4 rounded-full mr-3 sm:mr-4 text-white">
                        <i class="fas fa-bullseye text-lg sm:text-xl"></i>
                    </div>
                    <h3 class="text-xl sm:text-2xl font-bold text-gray-800">Misi</h3>
                </div>
                <p class="text-base sm:text-lg text-gray-700 leading-relaxed"><?= $profil['misi'] ?></p>
            </div>
        </div>
    </div>
</section>

<section class="py-10 sm:py-12 md:py-16 bg-gray-50 relative">
    <div class="absolute inset-0 bg-primary opacity-5 pattern-dots"></div>
    <div class="main-container px-4 relative">
        <div class="text-center mb-8 sm:mb-12">
            <div class="flex items-center gap-2 justify-center mb-2">
                <div class="h-1 w-8 sm:w-12 bg-accent"></div>
                <span class="text-accent font-medium text-sm sm:text-base">Keunggulan Kami</span>
                <div class="h-1 w-8 sm:w-12 bg-accent"></div>
            </div>
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-800">Program Keahlian</h2>
        </div>
        
        
      
        
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6">
            <?php $jurusan = get_jurusan(); ?>
            <?php foreach ($jurusan as $j): ?>
            <div class="bg-white p-4 sm:p-6 rounded-lg shadow-md border-b-4 border-primary hover:shadow-xl transition duration-300">
                <h3 class="text-lg sm:text-xl font-bold text-gray-800 mb-3 sm:mb-4 flex items-center">
                    <span class="bg-primary/10 text-primary p-2 rounded-full mr-3">
                        <i class="fas fa-book"></i>
                    </span>
                    <?= $j['nama_jurusan'] ?>
                </h3>
                <p class="text-sm sm:text-base text-gray-700 mb-4 sm:mb-6 leading-relaxed"><?= $j['deskripsi'] ?></p>
                <a href="<?= BASE_URL ?>/pendaftaran/formulir.php" class="inline-block bg-primary hover:bg-primary-dark text-white font-bold py-2 px-4 sm:px-6 rounded-lg transition duration-300 text-sm sm:text-base">Daftar</a>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="py-10 sm:py-12 md:py-16 bg-white">
    <div class="main-container px-4">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 sm:mb-10">
            <div>
                <div class="flex items-center gap-2 justify-center mb-2">
                    <div class="h-1 w-8 sm:w-12 bg-accent"></div>
                    <span class="text-accent font-medium text-sm sm:text-base">Kabar Terkini</span>
                    <div class="h-1 w-8 sm:w-12 bg-accent"></div>
                </div>
                <h2 class="text-2xl sm:text-3xl font-bold text-gray-800">Berita Terbaru</h2>
            </div>
            <a href="<?= BASE_URL ?>/berita.php" class="mt-3 sm:mt-0 bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 sm:px-6 rounded-lg transition flex items-center gap-2 text-sm sm:text-base">
                Lihat Semua
                <i class="fas fa-arrow-right"></i>
            </a>
        </div>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8">
            <?php foreach ($berita_terbaru as $berita): ?>
            <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition border border-gray-100">
                <div class="relative">
                    <img src="<?= BASE_URL ?>/assets/img/uploads/berita/<?= $berita['gambar'] ?>" alt="<?= $berita['judul'] ?>" class="w-full h-48 sm:h-56 object-cover">
                    <div class="absolute bottom-0 left-0 bg-primary text-white text-xs sm:text-sm py-1 px-2 sm:px-3">
                        <i class="far fa-calendar-alt mr-1"></i> <?= tanggal_indonesia(date('Y-m-d', strtotime($berita['created_at']))) ?>
                    </div>
                </div>
                <div class="p-4 sm:p-6">
                    <h3 class="text-lg sm:text-xl font-bold mb-2 sm:mb-3 hover:text-primary transition">
                        <a href="<?= BASE_URL ?>/berita-detail.php?slug=<?= $berita['slug'] ?>"><?= $berita['judul'] ?></a>
                    </h3>
                    <p class="text-sm sm:text-base text-gray-600 mb-3 sm:mb-4"><?= potong_teks(strip_tags($berita['konten']), 100) ?></p>
                    <a href="<?= BASE_URL ?>/berita-detail.php?slug=<?= $berita['slug'] ?>" class="inline-flex items-center text-primary hover:text-accent font-medium transition text-sm sm:text-base">
                        Baca Selengkapnya
                        <i class="fas fa-long-arrow-alt-right ml-2"></i>
                    </a>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="relative py-12 sm:py-16 md:py-20 bg-primary bg-opacity-90 text-white overflow-hidden">
    <div class="absolute inset-0 bg-pattern-overlay opacity-10"></div>
    <div class="main-container px-4 text-center relative z-10">
        <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-3 sm:mb-6">Pendaftaran Peserta Didik Baru</h2>
        <p class="text-base sm:text-lg mb-6 sm:mb-8 max-w-2xl mx-auto">Daftarkan diri Anda sekarang untuk menjadi bagian dari <?= $profil['nama_sekolah'] ?> dan raih masa depan yang cerah!</p>
        <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center">
            <a href="<?= BASE_URL ?>/pendaftaran/formulir.php" class="bg-white text-primary hover:bg-gray-100 font-bold py-2 sm:py-3 px-6 sm:px-8 rounded-lg text-base sm:text-lg transition duration-300 inline-flex items-center justify-center">
                <i class="fas fa-user-plus mr-2"></i>
                Daftar Sekarang
            </a>
            <a href="<?= BASE_URL ?>/profil.php" class="bg-transparent border-2 border-white text-white hover:bg-white/10 font-bold py-2 sm:py-3 px-6 sm:px-8 rounded-lg text-base sm:text-lg transition duration-300 inline-flex items-center justify-center mt-3 sm:mt-0">
                <i class="fas fa-info-circle mr-2"></i>
                Pelajari Lebih Lanjut
            </a>
        </div>
    </div>
</section>

<script>
    let slideIndex = 0;
    let touchStartX = 0;
    let touchEndX = 0;
    
    // Function untuk menampilkan slide
    function showSlide(n) {
        const slides = document.getElementsByClassName("slider-item");
        const dots = document.getElementsByClassName("dot");
        
        if (n >= slides.length) slideIndex = 0;
        if (n < 0) slideIndex = slides.length - 1;
        
        // Sembunyikan semua slide
        for (let i = 0; i < slides.length; i++) {
            slides[i].classList.remove("active");
            dots[i].classList.remove("active");
            dots[i].classList.remove("bg-white");
            dots[i].classList.add("bg-white/50");
        }
        
        // Tampilkan slide yang aktif
        slides[slideIndex].classList.add("active");
        dots[slideIndex].classList.add("active");
        dots[slideIndex].classList.add("bg-white");
        dots[slideIndex].classList.remove("bg-white/50");
    }
    
    // Function untuk navigasi slide
    function moveSlide(n) {
        showSlide(slideIndex += n);
    }
    
    // Auto slide
    function autoSlide() {
        moveSlide(1);
        setTimeout(autoSlide, 5000); // Ganti slide setiap 5 detik
    }
    
    // Touch events untuk swipe pada mobile
    function handleTouchStart(evt) {
        touchStartX = evt.touches[0].clientX;
    }
    
    function handleTouchEnd(evt) {
        touchEndX = evt.changedTouches[0].clientX;
        handleSwipe();
    }
    
    function handleSwipe() {
        if (touchStartX - touchEndX > 50) {
            // Swipe left
            moveSlide(1);
        } else if (touchEndX - touchStartX > 50) {
            // Swipe right
            moveSlide(-1);
        }
    }
    
    // Mulai auto slide dan tambahkan event listeners saat halaman dimuat
    document.addEventListener("DOMContentLoaded", function() {
        const sliderContainer = document.querySelector(".slider-container");
        
        if (sliderContainer) {
            sliderContainer.addEventListener('touchstart', handleTouchStart, false);
            sliderContainer.addEventListener('touchend', handleTouchEnd, false);
        }
        
        autoSlide();
    });
</script>

<style>
    /* Efek fade untuk slider */
    .slider-item {
        display: none;
        animation: fadeEffect 1s;
    }
    
    .slider-item.active {
        display: block;
    }
    
    @keyframes fadeEffect {
        from {opacity: 0.7}
        to {opacity: 1}
    }
    
    /* Pattern dots background */
    .pattern-dots {
        background-image: radial-gradient(currentColor 2px, transparent 2px);
        background-size: calc(10 * 2px) calc(10 * 2px);
    }
    
    /* Latar belakang pattern overlay */
    .bg-pattern-overlay {
        background-image: url('data:image/svg+xml;charset=utf-8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><path d="M50 0h50v50H50zM0 50h50v50H0z" fill="%23FFFFFF" fill-opacity=".1"/></svg>');
        background-size: 20px 20px;
    }
    
    /* Additional responsive adjustments */
    @media (max-width: 640px) {
        .main-container {
            max-width: 100%;
            padding-left: 16px;
            padding-right: 16px;
        }
        
        /* Make sure fonts don't get too small on mobile */
        body {
            font-size: 14px;
        }
        
        /* Ensure buttons are easily tappable on mobile */
        button, 
        a.bg-accent, 
        a.bg-primary, 
        a.bg-white, 
        a.border-2 {
            min-height: 44px;
            min-width: 44px;
        }
    }
</style>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: beranda.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation