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/alqudsvolunteers/htdocs/www.alqudsvolunteers.id

Free Space:

81.81 GB

🔧 Quick Actions

✏️ Editing: donasi_flip_modal.php

<?php
include 'config.php';
include 'config_flip.php';
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Donasi via Flip - AVI</title>
    <style>
        /* Modal Styles */
        .flip-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            padding: 20px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .flip-modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        
        .flip-modal {
            background: white;
            border-radius: 16px;
            width: 100%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }
        
        .flip-modal-overlay.active .flip-modal {
            transform: translateY(0);
        }
        
        .flip-modal-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            font-size: 24px;
            color: #666;
            cursor: pointer;
            z-index: 10;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(0,0,0,0.05);
        }
        
        .flip-modal-close:hover {
            background: rgba(0,0,0,0.1);
        }
        
        .flip-modal-content {
            padding: 30px;
        }
        
        /* Form Styles */
        .amount-options {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .amount-option {
            padding: 15px 10px;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            background: white;
        }
        
        .amount-option:hover {
            border-color: #139D93;
        }
        
        .amount-option.selected {
            border-color: #139D93;
            background-color: rgba(19, 157, 147, 0.1);
            color: #139D93;
            font-weight: bold;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #374151;
        }
        
        .form-input {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-size: 16px;
            transition: border-color 0.2s;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #139D93;
        }
        
        .form-input.error {
            border-color: #ef4444;
        }
        
        .error-message {
            color: #ef4444;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }
        
        .error-message.show {
            display: block;
        }
        
        /* Payment Methods */
        .payment-methods {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .payment-method {
            flex: 1;
            min-width: 120px;
            padding: 15px 10px;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            background: white;
        }
        
        .payment-method:hover {
            border-color: #139D93;
        }
        
        .payment-method.selected {
            border-color: #139D93;
            background-color: rgba(19, 157, 147, 0.1);
        }
        
        .payment-icon {
            font-size: 24px;
            margin-bottom: 8px;
        }
        
        .payment-icon.qris { color: #10B981; }
        .payment-icon.bank { color: #3B82F6; }
        .payment-icon.ewallet { color: #8B5CF6; }
        
        /* Bank Selection */
        .bank-selection {
            display: none;
            margin-top: 15px;
        }
        
        .bank-selection.show {
            display: block;
        }
        
        .bank-options {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin-top: 10px;
        }
        
        .bank-option {
            padding: 12px 8px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }
        
        .bank-option:hover {
            border-color: #139D93;
            background-color: rgba(19, 157, 147, 0.05);
        }
        
        .bank-option.selected {
            border-color: #139D93;
            background-color: rgba(19, 157, 147, 0.1);
            font-weight: bold;
        }
        
        /* Loading */
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 16px;
            z-index: 20;
            display: none;
        }
        
        .loading-overlay.active {
            display: flex;
        }
        
        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #139D93;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Success Message */
        .success-message {
            text-align: center;
            padding: 40px 20px;
            display: none;
        }
        
        .success-message.active {
            display: block;
        }
        
        .success-icon {
            font-size: 64px;
            color: #10B981;
            margin-bottom: 20px;
        }
        
        /* Responsive */
        @media (max-width: 640px) {
            .amount-options {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .payment-methods {
                flex-direction: column;
            }
            
            .bank-options {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    
    <div id="flipDonationModal" class="flip-modal-overlay">
        <div class="flip-modal">
            <button class="flip-modal-close" onclick="closeFlipModal()">
                <i class="fas fa-times"></i>
            </button>
            
            <div class="flip-modal-content">
                
                <div id="donationFormStep">
                    <h2 class="text-2xl font-bold text-gray-800 mb-2 text-center">Donasi untuk Palestina</h2>
                    <p class="text-gray-600 text-center mb-6">Pilih jumlah dan metode pembayaran</p>
                    
                    
                    <div class="form-group">
                        <label class="form-label">Pilih Jumlah Donasi</label>
                        <div class="amount-options">
                            <?php foreach ([10000, 25000, 50000, 100000, 250000, 500000] as $amount): ?>
                            <div class="amount-option" data-amount="<?php echo $amount; ?>">
                                Rp <?php echo number_format($amount, 0, ',', '.'); ?>
                            </div>
                            <?php endforeach; ?>
                            <div class="amount-option" data-amount="custom">
                                Jumlah Lain
                            </div>
                        </div>
                        
                        
                        <div id="customAmountContainer" style="display: none; margin-top: 15px;">
                            <input type="number" 
                                   id="customAmountInput" 
                                   class="form-input" 
                                   placeholder="Masukkan jumlah donasi (min Rp 10,000)"
                                   min="10000"
                                   max="100000000">
                            <div class="error-message" id="amountError"></div>
                        </div>
                    </div>
                    
                    
                    <div class="form-group">
                        <label class="form-label">Metode Pembayaran</label>
                        <div class="payment-methods">
                            <div class="payment-method selected" data-method="qris">
                                <div class="payment-icon qris">
                                    <i class="fas fa-qrcode"></i>
                                </div>
                                <div>QRIS</div>
                                <small class="text-gray-500">Semua Bank</small>
                            </div>
                            
                            <div class="payment-method" data-method="bank">
                                <div class="payment-icon bank">
                                    <i class="fas fa-university"></i>
                                </div>
                                <div>Bank Transfer</div>
                                <small class="text-gray-500">Transfer Manual</small>
                            </div>
                        </div>
                    </div>
                    
                    
                    <div id="bankSelection" class="bank-selection">
                        <div class="form-group">
                            <label class="form-label">Pilih Bank</label>
                            <div class="bank-options">
                                <?php 
                                $popularBanks = ['bca', 'mandiri', 'bni', 'bri', 'bsi'];
                                foreach ($popularBanks as $bankCode): 
                                    if (isset($supported_banks[$bankCode])):
                                ?>
                                <div class="bank-option" data-bank="<?php echo $bankCode; ?>">
                                    <?php echo $supported_banks[$bankCode]; ?>
                                </div>
                                <?php endif; endforeach; ?>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Nomor Rekening Anda</label>
                            <input type="text" 
                                   id="accountNumber" 
                                   class="form-input" 
                                   placeholder="Masukkan nomor rekening Anda">
                            <div class="error-message" id="accountError"></div>
                        </div>
                    </div>
                    
                    
                    <div class="form-group">
                        <label class="form-label">Nama Lengkap *</label>
                        <input type="text" 
                               id="donorName" 
                               class="form-input" 
                               placeholder="Nama Anda"
                               required>
                        <div class="error-message" id="nameError"></div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">Email (Opsional)</label>
                        <input type="email" 
                               id="donorEmail" 
                               class="form-input" 
                               placeholder="email@contoh.com">
                        <div class="error-message" id="emailError"></div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">Nomor WhatsApp *</label>
                        <input type="tel" 
                               id="donorPhone" 
                               class="form-input" 
                               placeholder="0812-3456-7890"
                               required>
                        <div class="error-message" id="phoneError"></div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">Pesan (Opsional)</label>
                        <textarea id="donationMessage" 
                                  class="form-input" 
                                  rows="3" 
                                  placeholder="Tulis pesan atau doa Anda..."></textarea>
                    </div>
                    
                    
                    <button id="submitDonation" 
                            class="w-full bg-primary text-white py-3 rounded-lg font-bold text-lg hover:bg-secondary transition-colors">
                        <i class="fas fa-lock mr-2"></i> Lanjutkan Pembayaran
                    </button>
                    
                    <p class="text-gray-500 text-sm text-center mt-3">
                        Anda akan diarahkan ke halaman pembayaran yang aman
                    </p>
                </div>
                
                
                <div class="loading-overlay" id="loadingStep">
                    <div class="loading-spinner"></div>
                </div>
                
                
                <div class="success-message" id="successStep">
                    <div class="success-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Pembayaran Berhasil Diproses!</h3>
                    <p class="text-gray-600 mb-6">
                        Anda akan diarahkan ke halaman pembayaran dalam beberapa detik...
                    </p>
                    <div id="manualRedirect" style="display: none;">
                        <p class="text-sm text-gray-500 mb-4">
                            Jika tidak otomatis terarah, klik tombol di bawah:
                        </p>
                        <a id="paymentLink" 
                           href="#" 
                           target="_blank" 
                           class="inline-block bg-primary text-white px-6 py-3 rounded-lg font-bold hover:bg-secondary">
                            <i class="fas fa-external-link-alt mr-2"></i> Buka Halaman Pembayaran
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: donasi_flip_modal.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation