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/kbnuruljadid/pages

Free Space:

9.88 TB

🔧 Quick Actions

✏️ Editing: tentang.php

<?php 
include '../config.php';
$query_tentang = "SELECT * FROM tentang ORDER BY id ASC";
$query_struktur = "SELECT * FROM struktur_organisasi ORDER BY urutan ASC";

try{
   $result_tentang = mysqli_query($conn, $query_tentang);
   $result_struktur = mysqli_query($conn, $query_struktur);
}
catch(Exception $e){
   $result_tentang = false;
   $result_struktur = false;
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profil Kami - KB NURUL JADID</title>
    <link rel="stylesheet" href="../css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    
    <div class="clouds-container">
        <div class="cloud cloud1">☁️</div>
        <div class="cloud cloud2">☁️</div>
        <div class="cloud cloud3">☁️</div>
    </div>

<div class="balloons-container">
        <div class="balloon balloon1">🎈</div>
        <div class="balloon balloon2">🎈</div>
        <div class="balloon balloon3">🎈</div>
    </div>

<?php include '../navbar.php'; ?>

<section class="page-hero">
        <div id="particles-js"></div>
        <div class="container">
            <h1 class="page-title">🌟 Profil Kami</h1>
            <p class="page-subtitle">Kenali KB NURUL JADID lebih dekat melalui profil, visi, dan misi kami</p>
        </div>
    </section>

<?php
    // Pisahkan data Sejarah dengan data lainnya (Visi, Misi, dll)
    $sejarah_item = null;
    $other_items = [];
    
    if($result_tentang && mysqli_num_rows($result_tentang) > 0) {
        while($item = mysqli_fetch_assoc($result_tentang)) {
            // Cek jika judul mengandung kata 'sejarah'
            if (stripos($item['judul'], 'sejarah') !== false) {
                $sejarah_item = $item;
            } else {
                $other_items[] = $item;
            }
        }
    }
    ?>

<?php if ($sejarah_item): ?>
    <section class="sejarah-section">
        <div class="container">
            <div class="sejarah-wrapper">
                <div class="sejarah-image">
                    <div class="blob-underlay"></div>
                    <?php 
                    $img_src = "https://images.unsplash.com/photo-1503676260728-1c00da094a0b?q=80&w=2022&auto=format&fit=crop";
                    if (!empty($sejarah_item['gambar']) && file_exists('../images/tentang/' . $sejarah_item['gambar'])) {
                        $img_src = '../images/tentang/' . $sejarah_item['gambar'];
                    }
                    ?>
                    <div class="img-frame">
                        <img src="<?php echo $img_src; ?>" alt="Sejarah Sekolah">
                        <div class="glare"></div>
                    </div>
                    <div class="decoration-shape shape-1"></div>
                    <div class="decoration-shape shape-2"></div>
                    <div class="decoration-shape shape-3"></div>
                </div>
                <div class="sejarah-text">
                    <h2>📜 <?php echo $sejarah_item['judul']; ?></h2>
                    <div class="sejarah-desc">
                        <?php echo nl2br($sejarah_item['isi']); ?>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <?php endif; ?>

<?php 
    // Ambil data struktur ke array untuk layout tree
    $struktur_data = [];
    if ($result_struktur && mysqli_num_rows($result_struktur) > 0) {
        while($row = mysqli_fetch_assoc($result_struktur)) {
            $struktur_data[] = $row;
        }
    }
    // Ambil data pertama sebagai pimpinan (urutan 1)
    $pimpinan = !empty($struktur_data) ? array_shift($struktur_data) : null;
    ?>

<?php if ($pimpinan): ?>
    <section class="struktur-section">
        <div class="container">
            <div class="section-header" style="text-align: center; margin-bottom: 3rem;">
                <h2 style="font-size: 2.5rem; color: var(--primary); margin-bottom: 1rem;">👥 Struktur Organisasi</h2>
                <p style="color: var(--text-light); max-width: 700px; margin: 0 auto;">Tim solid kami yang berdedikasi untuk pendidikan terbaik.</p>
            </div>
            
            <div class="struktur-tree">
                
                <div class="level-1">
                    <div class="struktur-card pimpinan-card">
                        <div class="struktur-card-img">
                            <?php 
                            $foto_src = "https://via.placeholder.com/150.png?text=👤";
                            if (!empty($pimpinan['foto']) && file_exists('../images/struktur/' . $pimpinan['foto'])) {
                                $foto_src = '../images/struktur/' . $pimpinan['foto'];
                            }
                            ?>
                            <img src="<?php echo $foto_src; ?>" alt="<?php echo $pimpinan['nama']; ?>">
                        </div>
                        <div class="struktur-card-info">
                            <h4 class="nama"><?php echo $pimpinan['nama']; ?></h4>
                                <p class="jabatan"><?php echo nl2br($pimpinan['jabatan']); ?></p>
                        </div>
                    </div>
                    <?php if(!empty($struktur_data)): ?><div class="connector-line"></div><?php endif; ?>
                </div>

<?php if(!empty($struktur_data)): ?>
                <div class="level-2-wrapper">
                    <div class="connector-horizontal"></div>
                    <div class="struktur-grid-tree">
                        <?php foreach($struktur_data as $anggota): ?>
                        <div class="struktur-card">
                            <div class="struktur-card-img">
                                <?php 
                                $foto_src = "https://via.placeholder.com/150.png?text=👤";
                                if (!empty($anggota['foto']) && file_exists('../images/struktur/' . $anggota['foto'])) {
                                    $foto_src = '../images/struktur/' . $anggota['foto'];
                                }
                                ?>
                                <img src="<?php echo $foto_src; ?>" alt="<?php echo $anggota['nama']; ?>">
                            </div>
                            <div class="struktur-card-info">
                                <h4 class="nama"><?php echo $anggota['nama']; ?></h4>
                                <p class="jabatan"><?php echo nl2br($anggota['jabatan']); ?></p>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </section>
    <?php endif; ?>

<section id="tentang" class="tentang-section">
        <div class="container">
            <div class="tentang-content">
                <?php if(!empty($other_items)): ?>
                    <?php 
                    $delay = 0;
                    foreach($other_items as $item): 
                        // Tentukan icon dan style berdasarkan judul
                        $icon = '🌟';
                        $judul_lower = strtolower($item['judul']);
                        $is_list = false;
                        
                        if (strpos($judul_lower, 'visi') !== false) { $icon = '🎯'; }
                        elseif (strpos($judul_lower, 'misi') !== false) { $icon = '🚀'; $is_list = true; }
                        elseif (strpos($judul_lower, 'tujuan') !== false) { $icon = '🏆'; $is_list = true; }
                    ?>
                    <div class="tentang-card slide-in <?php echo $delay > 0 ? 'delay-'.$delay : ''; ?>">
                        <div class="card-icon-wrapper">
                            <span class="card-icon"><?php echo $icon; ?></span>
                        </div>
                        <h3><?php echo $item['judul']; ?></h3>
                        <div class="card-content <?php echo $is_list ? 'content-list' : ''; ?>">
                            <?php echo nl2br($item['isi']); ?>
                        </div>
                    </div>
                    <?php $delay++; endforeach; ?>
               <?php else: ?>
                    <div style="grid-column: 1/-1; text-align: center; padding: 2rem;">
                        <p>Belum ada informasi yang ditambahkan.</p>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </section>

<?php include '../footer.php'; ?>
    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
    <script src="../js/script.js"></script>
    <style>
        /* Style untuk Sejarah */
        .sejarah-section {
            padding: 4rem 0;
            background: #fff;
            margin-bottom: 2rem;
        }
        .sejarah-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }
        .sejarah-image {
            position: relative;
            padding: 20px;
            perspective: 1000px;
        }
        .img-frame {
            position: relative;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            border: 12px solid white;
            transform: rotate(-3deg);
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            z-index: 2;
            animation: float-frame 6s ease-in-out infinite;
        }
        .sejarah-image:hover .img-frame {
            transform: rotate(0deg) scale(1.05) translateY(-10px);
            box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.3);
        }
        .img-frame img {
            width: 100%;
            display: block;
            /* transition: transform 0.6s ease; */
            animation: ken-burns 15s ease-in-out infinite alternate;
        }
        .sejarah-image:hover .img-frame img {
            animation-play-state: paused;
        }
        .glare {
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-25deg);
            transition: 0.7s;
            z-index: 3;
        }
        .sejarah-image:hover .glare {
            left: 200%;
        }
        .blob-underlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120%;
            height: 120%;
            background: linear-gradient(135deg, #FFE5EC 0%, #E0F7FF 100%);
            border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
            z-index: 0;
            animation: blob-bounce 10s infinite ease-in-out alternate;
            opacity: 0.6;
        }
        .decoration-shape {
            position: absolute;
            z-index: 1;
            border-radius: 50%;
            animation: float-shape 4s infinite ease-in-out;
        }
        .shape-1 {
            width: 150px;
            height: 150px;
            background: #FEC260;
            top: -20px;
            right: -20px;
            opacity: 0.5;
            animation-delay: 0s;
        }
        .shape-2 {
            width: 100px;
            height: 100px;
            background: #FF6B9D;
            bottom: -10px;
            left: -10px;
            opacity: 0.5;
            animation-delay: 1s;
        }
        .shape-3 {
            width: 60px;
            height: 60px;
            background: #00D9FF;
            top: 40%;
            left: -30px;
            opacity: 0.5;
            animation-delay: 2s;
        }
        @keyframes float-frame {
            0%, 100% { transform: rotate(-3deg) translateY(0); }
            50% { transform: rotate(-1deg) translateY(-15px); }
        }
        @keyframes ken-burns {
            0% { transform: scale(1.0) translate(0, 0); }
            100% { transform: scale(1.2) translate(-3%, -2%); }
        }
        @keyframes blob-bounce {
            0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: translate(-50%, -50%) rotate(0deg); }
            100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: translate(-50%, -50%) rotate(10deg); }
        }
        @keyframes float-shape {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        .sejarah-text h2 {
            color: var(--primary);
            margin-bottom: 1.5rem;
            font-size: 2.2rem;
        }
        .sejarah-desc {
            color: var(--text-light);
            line-height: 1.8;
            font-size: 1.1rem;
            text-align: justify;
        }
        @media (max-width: 768px) {
            .sejarah-wrapper {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            .sejarah-wrapper {
                display: flex;
                flex-direction: column-reverse; /* Gambar di bawah teks saat mobile */
            }
        }

/* Style untuk Struktur Organisasi */
        .struktur-section {
            padding: 4rem 0;
            background: var(--bg-light);
            position: relative;
            overflow: hidden;
        }
        /* Background decoration */
        .struktur-section::before {
            content: '';
            position: absolute;
            top: -50px;
            left: -50px;
            width: 200px;
            height: 200px;
            background: rgba(255, 107, 157, 0.05);
            border-radius: 50%;
            z-index: 0;
        }
        .struktur-section::after {
            content: '';
            position: absolute;
            bottom: -50px;
            right: -50px;
            width: 300px;
            height: 300px;
            background: rgba(157, 78, 221, 0.05);
            border-radius: 50%;
            z-index: 0;
        }
        .struktur-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.07);
            text-align: center;
            padding: 2rem 1rem;
            transition: all 0.3s ease;
            overflow: hidden;
        }
        .struktur-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.12);
        }
        .struktur-card-img {
            width: 120px;
            height: 120px;
            margin: 0 auto 1.5rem;
            border-radius: 50%;
            overflow: hidden;
            border: 5px solid white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .struktur-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .struktur-card-info .nama {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 0.25rem;
        }
        .struktur-card-info .jabatan {
            font-size: 0.9rem;
            color: var(--primary);
            font-weight: 500;
        }

/* Tree Layout Styles */
        .struktur-tree {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 2rem;
        }
        .level-1 {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 5;
        }
        .pimpinan-card {
            border: 3px solid var(--primary);
            transform: scale(1.05);
            box-shadow: 0 15px 40px rgba(255, 107, 157, 0.2);
            margin-bottom: 0;
        }
        .connector-line {
            width: 4px;
            height: 40px;
            background: #ddd;
            margin: 0 auto;
        }
        .level-2-wrapper {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .connector-horizontal {
            width: 60%;
            height: 4px;
            background: #ddd;
            margin-bottom: 40px;
            border-radius: 4px;
            position: relative;
        }
        .struktur-grid-tree {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 3rem;
            width: 100%;
            position: relative;
        }
        .struktur-grid-tree .struktur-card {
            position: relative;
        }
        .struktur-grid-tree .struktur-card::before {
            content: '';
            position: absolute;
            top: -44px;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 44px;
            background: #ddd;
            z-index: 0;
        }
        @media (max-width: 768px) {
            .connector-horizontal, .connector-line, .struktur-grid-tree .struktur-card::before {
                display: none;
            }
            .struktur-grid-tree {
                gap: 2rem;
            }
            .pimpinan-card {
                margin-bottom: 2rem;
            }
        }

.tentang-card {
            background: white;
            padding: 2.5rem;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            height: 100%;
            transition: transform 0.3s ease;
        }
        .tentang-card:hover {
            transform: translateY(-10px);
        }
        .card-icon-wrapper {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #FF6B9D, #FF8E9E);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            font-size: 2.5rem;
            color: white;
            box-shadow: 0 5px 15px rgba(255, 107, 157, 0.3);
        }
        .card-content {
            color: #636E72;
            line-height: 1.8;
            width: 100%;
        }
        .content-list {
            text-align: left;
            background: #FFF5F7;
            padding: 1.5rem;
            border-radius: 15px;
            margin-top: 1rem;
            border-left: 4px solid #FF6B9D;
        }
    </style>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: tentang.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation