Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

nginx/1.28.0

System:

Linux 6.8.0-90-generic

PHP Version:

8.4.15

User:

alqudsvolunteers

Directory:

/home/avi/htdocs/www.alqudsvolunteers.id

Free Space:

81.77 GB

🔧 Quick Actions

✏️ Editing: navbar1.php

<?php
include 'config.php';

// Query untuk mengambil semua publication_group untuk menu
if (!isset($group_result)) {
    $group_query = "SELECT * FROM publication_group ORDER BY id";
    $group_result = mysqli_query($conn, $group_query);
}

// Query untuk mengambil semua category untuk menu Program Bantuan - DIUBAH: urutkan berdasarkan kolom urutan
if (!isset($category_result)) {
    $category_query = "SELECT * FROM category ORDER BY urutan ASC";
    $category_result = mysqli_query($conn, $category_query);
}

// Set base path to avi/
$base_path = '/';
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

.header-content {
        position: relative;
        z-index: 10;
        padding-left: 1rem;
        padding-right: 1rem;
        width: 100%;
    }

@media (min-width: 768px) {
        .header-content {
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }
    
    /* PERBAIKAN DROPDOWN MENU */
    .nav-dropdown {
        position: relative;
    }
    
    .nav-dropdown > a {
        display: flex;
        align-items: center;
    }
    
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background: white;
        min-width: 200px;
        border-radius: 0.5rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s ease;
        z-index: 50;
    }
    
    .nav-dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    /* Membuat segitiga penghubung */
    .dropdown-menu::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 20px;
        width: 12px;
        height: 12px;
        background: white;
        transform: rotate(45deg);
    }
    
    /* Menghilangkan gap antara menu dan dropdown */
    .dropdown-container {
        padding-top: 12px;
        margin-top: -12px;
    }
    
    .dropdown-item {
        display: block;
        padding: 0.5rem 1rem;
        color: #4B5563;
        transition: all 0.2s;
    }
    
    .dropdown-item:hover {
        background-color: #F3F4F6;
        color: #3B82F6;
    }
    
    /* Popup Styles */
    .popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .popup-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    .popup-content {
        background-color: white;
        padding: 2rem;
        border-radius: 0.5rem;
        text-align: center;
        max-width: 400px;
        width: 90%;
        transform: scale(0.9);
        transition: transform 0.3s ease;
    }
    
    .popup-overlay.active .popup-content {
        transform: scale(1);
    }
    
    .popup-icon {
        font-size: 3rem;
        color: #139D93;
        margin-bottom: 1rem;
    }
    
    .popup-close {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: #6B7280;
    }
    
    .popup-close:hover {
        color: #374151;
    }
    
    .whatsapp-button {
        background-color: #25D366;
        color: white;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1.5rem;
        border-radius: 0.375rem;
        font-weight: 600;
        transition: all 0.3s ease;
        margin-top: 1rem;
    }
    
    .whatsapp-button:hover {
        background-color: #128C7E;
        transform: translateY(-2px);
    }
    
    /* Floating Button Styles */
    .floating-buttons {
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 999;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .floating-button {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.5rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
    }
    
    .floating-button:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    }
    
    .floating-button.whatsapp {
        background-color: #25D366;
    }
    
    .floating-button.donate {
        background: linear-gradient(45deg, #22C6B9, #139D93);
    }
    
    .floating-button .tooltip {
        position: absolute;
        right: 70px;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 0.875rem;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .floating-button:hover .tooltip {
        opacity: 1;
        visibility: visible;
    }
    
    /* Donation Popup Styles - DITAMBAHKAN */
    .donation-popup-content {
        background-color: white;
        border-radius: 16px;
        max-width: 800px;
        width: 90%;
        max-height: 90vh;
        overflow-y: auto;
        position: relative;
    }
    
    .donation-popup-close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        background: none;
        border: none;
        font-size: 24px;
        color: #666;
        cursor: pointer;
        z-index: 10;
    }
    
    .donation-popup-close-btn:hover {
        color: #333;
    }
    
    .bank-logo {
        width: 100px;
        height: auto;
        object-fit: contain;
    }
    
    .qris-image-container {
        width: 100%;
        padding-top: 141.4%; /* Ratio A5: 210mm x 148mm = 1.414 */
        position: relative;
        background: #f8f9fa;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #e5e7eb;
    }
    
    .qris-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 15px;
        background: white;
    }
    
    .copy-btn {
        transition: all 0.3s ease;
        background: linear-gradient(45deg, #22C6B9, #139D93);
    }
    
    .copy-btn:hover {
        background: linear-gradient(45deg, #139D93, #0E726B);
        transform: translateY(-2px);
    }
    
    .copy-btn:active {
        transform: translateY(0);
    }
    
    .copied-message {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .copied-message.show {
        opacity: 1;
    }
    
    /* Tombol WhatsApp Konfirmasi */
    .confirm-whatsapp-btn {
        background-color: #25D366;
        color: white;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        font-weight: 600;
        transition: all 0.3s ease;
        text-decoration: none;
        border: none;
        cursor: pointer;
        font-size: 0.95rem;
        margin-top: 0.5rem;
        width: 100%;
    }
    
    .confirm-whatsapp-btn:hover {
        background-color: #128C7E;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    }
    
    .confirm-whatsapp-btn i {
        margin-right: 8px;
        font-size: 1.1rem;
    }
</style>

<div id="whatsappPopup" class="popup-overlay">
    <div class="popup-content">
        <button class="popup-close" onclick="closeWhatsappPopup()">
            <i class="fas fa-times"></i>
        </button>
        <div class="popup-icon">
            <i class="fab fa-whatsapp"></i>
        </div>
        <h3 class="text-xl font-bold text-dark mb-2">Hubungi Kami via WhatsApp</h3>
        <p class="text-gray-600 mb-4">Untuk informasi lebih lanjut tentang donasi, silakan hubungi kami melalui WhatsApp.</p>
        <a href="https://wa.me/62811820196" target="_blank" class="whatsapp-button">
            <i class="fab fa-whatsapp mr-2 text-xl"></i> Chat via WhatsApp
        </a>
    </div>
</div>

<div id="donationPopup" class="popup-overlay">
    <div class="donation-popup-content">
        <button class="donation-popup-close-btn" onclick="closeDonationPopup()">
            <i class="fas fa-times"></i>
        </button>
        
        <div class="p-6 md:p-8">
            <h2 class="text-2xl md:text-3xl font-bold text-gray-800 text-center mb-8">Salurkan Donasi Anda</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                
                <div>
                    <h3 class="text-xl font-bold text-gray-800 mb-6 pb-3 border-b border-gray-200">Transfer Bank</h3>
                    
                    
                    <div class="mb-6 bg-gray-50 p-4 rounded-lg border border-gray-200">
                        <div class="flex items-center mb-4">
                            <img src="bsi.png" alt="Bank Syariah Indonesia" class="bank-logo mr-4">
                            <div>
                                <h4 class="font-bold text-gray-800">Bank Syariah Indonesia (BSI)</h4>
                                <div class="flex items-center mt-2">
                                    <span class="text-lg font-mono font-bold text-gray-800 bg-white px-3 py-1 rounded border border-gray-300 mr-3">369 369 0004</span>
                                    <button onclick="copyToClipboard('3693690004', 'bsiCopied')" class="copy-btn text-white px-3 py-1 rounded text-sm font-semibold flex items-center">
                                        <i class="fas fa-copy mr-1"></i> Salin
                                    </button>
                                </div>
                                <div id="bsiCopied" class="copied-message text-primary text-sm mt-1 flex items-center">
                                    <i class="fas fa-check mr-1"></i> Tersalin ke clipboard!
                                </div>
                            </div>
                        </div>
                        <p class="text-gray-600 text-sm">A.n <span class="font-semibold">AVI Peduli Kemanusiaan</span></p>
                        
                        
                        <button onclick="confirmViaWhatsApp('BSI', '369 369 0004', 'AVI Peduli Kemanusiaan')" class="confirm-whatsapp-btn mt-3">
                            <i class="fab fa-whatsapp"></i> Konfirmasi Transfer via WhatsApp
                        </button>
                    </div>
                    
                    
                    <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                        <div class="flex items-center mb-4">
                            <img src="mandiri.png" alt="Bank Mandiri" class="bank-logo mr-4">
                            <div>
                                <h4 class="font-bold text-gray-800">Bank Mandiri</h4>
                                <div class="flex items-center mt-2">
                                    <span class="text-lg font-mono font-bold text-gray-800 bg-white px-3 py-1 rounded border border-gray-300 mr-3">127 00 722 3347 9</span>
                                    <button onclick="copyToClipboard('1270072233479', 'mandiriCopied')" class="copy-btn text-white px-3 py-1 rounded text-sm font-semibold flex items-center">
                                        <i class="fas fa-copy mr-1"></i> Salin
                                    </button>
                                </div>
                                <div id="mandiriCopied" class="copied-message text-primary text-sm mt-1 flex items-center">
                                    <i class="fas fa-check mr-1"></i> Tersalin ke clipboard!
                                </div>
                            </div>
                        </div>
                        <p class="text-gray-600 text-sm">A.n <span class="font-semibold">Yayasan Al Quds Volunteers Indonesia</span></p>
                        
                        
                        <button onclick="confirmViaWhatsApp('Mandiri', '127 00 722 3347 9', 'Yayasan Al Quds Volunteers Indonesia')" class="confirm-whatsapp-btn mt-3">
                            <i class="fab fa-whatsapp"></i> Konfirmasi Transfer via WhatsApp
                        </button>
                    </div>
                    
                    <div class="mt-6 bg-blue-50 p-4 rounded-lg border border-blue-200">
                        <div class="flex items-start">
                            <i class="fas fa-info-circle text-primary mr-2 mt-0.5"></i>
                            <p class="text-sm text-gray-700">
                                <span class="font-semibold">Catatan:</span> Setelah melakukan transfer, mohon konfirmasi melalui WhatsApp dengan menyertakan bukti transfer. Klik tombol "Konfirmasi Transfer via WhatsApp" di atas.
                            </p>
                        </div>
                    </div>
                </div>
                
                
                <div>
                    <h3 class="text-xl font-bold text-gray-800 mb-6 pb-3 border-b border-gray-200">QRIS (Semua Bank)</h3>
                    
                    <div class="mb-4">
                        <div class="qris-image-container">
                            <img src="qris.jpg" alt="QR Code Indonesian Standard (QRIS)" class="qris-image">
                        </div>
                        <p class="text-center text-sm text-gray-600 mt-3">Scan QR Code di atas menggunakan aplikasi bank atau e-wallet Anda</p>
                    </div>
                    
                    
                    <div class="mt-4">
                        <button onclick="confirmViaWhatsApp('QRIS', 'QR Code', 'Yayasan Al Quds Volunteers Indonesia')" class="confirm-whatsapp-btn">
                            <i class="fab fa-whatsapp"></i> Konfirmasi Transfer QRIS via WhatsApp
                        </button>
                    </div>
                    
                    <div class="mt-6">
                        <h4 class="font-bold text-gray-800 mb-3">Keuntungan Donasi via QRIS:</h4>
                        <ul class="space-y-2 text-sm text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-check text-primary mr-2 mt-0.5"></i>
                                <span>Dapat digunakan dari semua bank dan e-wallet</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-primary mr-2 mt-0.5"></i>
                                <span>Proses cepat dan real-time</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-primary mr-2 mt-0.5"></i>
                                <span>Tidak perlu mengetik nomor rekening</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-primary mr-2 mt-0.5"></i>
                                <span>Transaksi lebih aman dan terverifikasi</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="mt-8 pt-6 border-t border-gray-200">
                <div class="text-center">
                    <p class="text-gray-700 mb-4">
                        <i class="fas fa-hands-helping text-primary mr-2"></i>
                        Setiap donasi Anda akan disalurkan untuk membantu saudara-saudara kita di Palestina
                    </p>
                    <button onclick="closeDonationPopup()" class="bg-primary text-white px-6 py-3 rounded-lg font-semibold hover:bg-secondary transition-colors duration-300">
                        <i class="fas fa-check mr-2"></i> Saya Mengerti
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="floating-buttons">
    <div class="floating-button whatsapp" onclick="showWhatsappPopup()">
        <i class="fab fa-whatsapp"></i>
        <span class="tooltip">Hubungi Kami</span>
    </div>
    <div class="floating-button donate" onclick="showDonationPopup()">
        <i class="fas fa-hand-holding-heart"></i>
        <span class="tooltip">Donasi Sekarang</span>
    </div>
</div>

<nav class="bg-white shadow-md sticky top-0 z-50">
    <div class="container mx-auto px-4">
        <div class="flex justify-between items-center py-4">
            
            <a href="<?php echo $base_path; ?>index.php" class="flex items-center">
                <img src="<?php echo $base_path; ?>logoavihitam-kesamping.png" alt="DonasiKita" class="h-8 md:h-10 object-contain">
            </a>
            
            
            <div class="hidden md:flex space-x-8 items-center">
                <a href="<?php echo $base_path; ?>index.php" class="text-dark hover:text-primary">Beranda</a>
                
                
                <div class="nav-dropdown">
                    <a href="<?php echo $base_path; ?>index.php#program" class="text-dark hover:text-primary flex items-center">
                        Program Bantuan
                        <i class="fas fa-chevron-down ml-1 text-xs"></i>
                    </a>
                    <div class="dropdown-container">
                        <div class="dropdown-menu">
                            <?php
                            if (mysqli_num_rows($category_result) > 0) {
                                while ($category = mysqli_fetch_assoc($category_result)) {
                                    echo '<a href="' . $base_path . 'program/index.php?category=' . urlencode($category['id']) . '" class="dropdown-item">' . 
                                         htmlspecialchars($category['program_category']) . '</a>';
                                }
                                mysqli_data_seek($category_result, 0);
                            } else {
                                echo '<span class="dropdown-item text-gray-500">Tidak ada program</span>';
                            }
                            ?>
                        </div>
                    </div>
                </div>
                
                
                <div class="nav-dropdown">
                    <a href="<?php echo $base_path; ?>index.php#publication" class="text-dark hover:text-primary flex items-center">
                        Berita
                        <i class="fas fa-chevron-down ml-1 text-xs"></i>
                    </a>
                    <div class="dropdown-container">
                        <div class="dropdown-menu">
                            <?php
                            if (mysqli_num_rows($group_result) > 0) {
                                while ($group = mysqli_fetch_assoc($group_result)) {
                                    echo '<a href="' . $base_path . 'publication.php?group=' . urlencode($group['id']) . '" class="dropdown-item">' . 
                                         htmlspecialchars($group['name_group']) . '</a>';
                                }
                                mysqli_data_seek($group_result, 0);
                            } else {
                                echo '<span class="dropdown-item text-gray-500">Tidak ada kategori</span>';
                            }
                            ?>
                        </div>
                    </div>
                </div>
                
                <a href="<?php echo $base_path; ?>tentang_kami.php" class="text-dark hover:text-primary">Tentang Kami</a>
                <a href="<?php echo $base_path; ?>publikasi.php" class="text-dark hover:text-primary">Publikasi</a>
                <a href="<?php echo $base_path; ?>member/index.php" class="text-dark hover:text-primary">Relawan</a>
            </div>
            
            <div class="flex items-center space-x-4">
                <a href="#" onclick="showDonationPopup(); return false;" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-blue-600 hidden md:block">Donasi Sekarang</a>
                
                <button id="mobile-menu-button" class="md:hidden text-dark focus:outline-none">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </div>
    
    
    <div id="mobile-menu" class="md:hidden bg-white border-t shadow-lg">
        <div class="container mx-auto px-4 py-2">
            <a href="<?php echo $base_path; ?>index.php" class="block py-3 px-2 text-dark hover:bg-gray-100 rounded-lg mb-1">Beranda</a>
            
            
            <div class="mb-1">
                <button class="flex items-center justify-between w-full py-3 px-2 text-dark hover:bg-gray-100 rounded-lg" onclick="toggleMobileSubmenu('program-submenu')">
                    <span>Program Bantuan</span>
                    <i class="fas fa-chevron-down text-xs transition-transform duration-200" id="program-arrow"></i>
                </button>
                <div id="program-submenu" class="mobile-submenu ml-4">
                    <?php
                    if (mysqli_num_rows($category_result) > 0) {
                        while ($category = mysqli_fetch_assoc($category_result)) {
                            echo '<a href="' . $base_path . 'program/index.php?category=' . urlencode($category['id']) . '" class="block py-2 px-2 text-gray-600 hover:text-primary hover:bg-gray-50 rounded-lg">' . 
                                 htmlspecialchars($category['program_category']) . '</a>';
                        }
                        mysqli_data_seek($category_result, 0);
                    } else {
                        echo '<span class="block py-2 px-2 text-gray-500">Tidak ada program</span>';
                    }
                    ?>
                </div>
            </div>
            
            
            <div class="mb-1">
                <button class="flex items-center justify-between w-full py-3 px-2 text-dark hover:bg-gray-100 rounded-lg" onclick="toggleMobileSubmenu('kegiatan-submenu')">
                    <span>Berita</span>
                    <i class="fas fa-chevron-down text-xs transition-transform duration-200" id="kegiatan-arrow"></i>
                </button>
                <div id="kegiatan-submenu" class="mobile-submenu ml-4">
                    <?php
                    if (mysqli_num_rows($group_result) > 0) {
                        while ($group = mysqli_fetch_assoc($group_result)) {
                            echo '<a href="' . $base_path . 'publication.php?group=' . urlencode($group['id']) . '" class="block py-2 px-2 text-gray-600 hover:text-primary hover:bg-gray-50 rounded-lg">' . 
                                 htmlspecialchars($group['name_group']) . '</a>';
                        }
                        mysqli_data_seek($group_result, 0);
                    } else {
                        echo '<span class="block py-2 px-2 text-gray-500">Tidak ada kategori</span>';
                    }
                    ?>
                </div>
            </div>
            
            <a href="<?php echo $base_path; ?>tentang_kami.php" class="block py-3 px-2 text-dark hover:bg-gray-100 rounded-lg mb-1">Tentang Kami</a>
            <a href="<?php echo $base_path; ?>publikasi.php" class="block py-3 px-2 text-dark hover:bg-gray-100 rounded-lg mb-1">Publikasi</a>
            <a href="<?php echo $base_path; ?>member/index.php" class="block py-3 px-2 text-dark hover:bg-gray-100 rounded-lg mb-1">Relawan</a>
            <a href="#" onclick="showDonationPopup(); return false;" class="block py-3 px-2 bg-primary text-white text-center rounded-lg hover:bg-secondary font-semibold mt-2">
                Donasi Sekarang
            </a>
        </div>
    </div>
</nav>

// Fungsi toggle mobile menu - SEDERHANA
    let isMenuOpen = false;
    
    document.getElementById('mobile-menu-button').addEventListener('click', function() {
        const mobileMenu = document.getElementById('mobile-menu');
        const icon = this.querySelector('i');
        
        if (!isMenuOpen) {
            // Buka menu
            mobileMenu.style.display = 'block';
            mobileMenu.classList.add('open');
            icon.classList.remove('fa-bars');
            icon.classList.add('fa-times');
            isMenuOpen = true;
        } else {
            // Tutup menu
            mobileMenu.style.display = 'none';
            mobileMenu.classList.remove('open');
            icon.classList.remove('fa-times');
            icon.classList.add('fa-bars');
            isMenuOpen = false;
            
            // Tutup semua submenu juga
            closeAllSubmenus();
        }
    });

// Fungsi toggle submenu mobile
    function toggleMobileSubmenu(id) {
        const submenu = document.getElementById(id);
        const arrow = document.getElementById(id.replace('-submenu', '-arrow'));
        
        if (submenu.style.display === 'block') {
            submenu.style.display = 'none';
            submenu.classList.remove('open');
            arrow.style.transform = 'rotate(0deg)';
        } else {
            submenu.style.display = 'block';
            submenu.classList.add('open');
            arrow.style.transform = 'rotate(180deg)';
        }
    }

// Fungsi untuk menutup semua submenu
    function closeAllSubmenus() {
        const submenus = document.querySelectorAll('.mobile-submenu');
        const arrows = document.querySelectorAll('[id$="-arrow"]');
        
        submenus.forEach(submenu => {
            submenu.style.display = 'none';
            submenu.classList.remove('open');
        });
        
        arrows.forEach(arrow => {
            arrow.style.transform = 'rotate(0deg)';
        });
    }

// Tutup menu mobile ketika link diklik
    document.querySelectorAll('#mobile-menu a').forEach(link => {
        link.addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            const menuButton = document.getElementById('mobile-menu-button');
            const icon = menuButton.querySelector('i');
            
            mobileMenu.style.display = 'none';
            mobileMenu.classList.remove('open');
            icon.classList.remove('fa-times');
            icon.classList.add('fa-bars');
            isMenuOpen = false;
            
            closeAllSubmenus();
        });
    });

// WhatsApp Popup Functions
    function showWhatsappPopup() {
        const popup = document.getElementById('whatsappPopup');
        popup.classList.add('active');
        document.body.style.overflow = 'hidden';
    }

function closeWhatsappPopup() {
        const popup = document.getElementById('whatsappPopup');
        popup.classList.remove('active');
        document.body.style.overflow = '';
    }

// Tutup popup jika mengklik di luar konten popup
    document.getElementById('whatsappPopup').addEventListener('click', function(e) {
        if (e.target === this) {
            closeWhatsappPopup();
        }
    });
  
    // Donation Popup Functions - DITAMBAHKAN
    function showDonationPopup() {
        const popup = document.getElementById('donationPopup');
        popup.classList.add('active');
        document.body.style.overflow = 'hidden';
    }
    
    function closeDonationPopup() {
        const popup = document.getElementById('donationPopup');
        popup.classList.remove('active');
        document.body.style.overflow = '';
    }
    
    // Close popup when clicking outside
    document.getElementById('donationPopup').addEventListener('click', function(e) {
        if (e.target === this) {
            closeDonationPopup();
        }
    });
    
    // Close popup with Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            if (document.getElementById('donationPopup').classList.contains('active')) {
                closeDonationPopup();
            }
            if (document.getElementById('whatsappPopup').classList.contains('active')) {
                closeWhatsappPopup();
            }
        }
    });
    
    // Copy to Clipboard Function
    function copyToClipboard(text, messageId) {
        // Remove spaces from the account number
        const cleanedText = text.replace(/\s/g, '');
        
        navigator.clipboard.writeText(cleanedText).then(function() {
            // Show success message
            const messageElement = document.getElementById(messageId);
            messageElement.classList.add('show');
            
            // Hide message after 2 seconds
            setTimeout(function() {
                messageElement.classList.remove('show');
            }, 2000);
            
            // Hide all other messages
            document.querySelectorAll('.copied-message').forEach(function(el) {
                if (el.id !== messageId) {
                    el.classList.remove('show');
                }
            });
        }).catch(function(err) {
            console.error('Failed to copy text: ', err);
        });
    }
    
    // Fungsi untuk konfirmasi via WhatsApp
    function confirmViaWhatsApp(bankName, accountNumber, accountHolder) {
        // Nomor WhatsApp yang akan dihubungi
        const phoneNumber = '62811820196'; // Ganti dengan nomor WhatsApp yang sesuai
        
        // Pesan yang akan dikirim
        const message = encodeURIComponent(
            `Halo, saya ingin konfirmasi transfer donasi:\n\n` +
            `Bank: ${bankName}\n` +
            `No. Rekening: ${accountNumber}\n` +
            `Atas Nama: ${accountHolder}\n\n` +
            `Saya telah melakukan transfer dan akan mengirimkan bukti transfer melalui WhatsApp ini.\n` +
            `Mohon informasi selanjutnya.\n\n` +
            `Terima kasih.`
        );
        
        // URL WhatsApp
        const whatsappUrl = `https://wa.me/${phoneNumber}?text=${message}`;
        
        // Buka WhatsApp di tab baru
        window.open(whatsappUrl, '_blank');
        
        // Tutup popup donasi
        closeDonationPopup();
        
        // Tampilkan pesan konfirmasi (opsional)
        alert('Aplikasi WhatsApp akan terbuka. Silakan kirim bukti transfer Anda melalui WhatsApp tersebut.');
    }
</script>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: navbar1.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation