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/program/ramadhan

Free Space:

81.78 GB

🔧 Quick Actions

✏️ Editing: index_copy.php

<?php
// program/ramadhan/index.php
include '../../config.php';

// Set kategori dan program untuk breadcrumb
$category_name = 'Program Pilihan';
$program_name = 'Ramadan untuk Palestina';

// Query untuk mendapatkan category_id
$category_query = "SELECT id FROM category WHERE program_category = 'Program Pilihan'";
$category_result = mysqli_query($conn, $category_query);
$category_id = 0;
if ($category_result && mysqli_num_rows($category_result) > 0) {
    $category_row = mysqli_fetch_assoc($category_result);
    $category_id = $category_row['id'];
}

// Query untuk mendapatkan program_id
$program_query = "SELECT id FROM program WHERE program_name = 'Ramadan untuk Palestina' AND id_category = $category_id";
$program_result = mysqli_query($conn, $program_query);
$program_id = 0;
if ($program_result && mysqli_num_rows($program_result) > 0) {
    $program_row = mysqli_fetch_assoc($program_result);
    $program_id = $program_row['id'];
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Program Ramadhan - Al-Quds Volunteers Indonesia</title>
    <link rel="icon" href="../../icon_avi.png" type="image/png">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Poppins:wght@300;400;500;600;700&display=swap');
        
        body { font-family: 'Poppins', sans-serif; }
        .arabic-font { font-family: 'Amiri', serif; }
        
        .btn-donate {
            background: linear-gradient(45deg, #22C6B9, #139D93);
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .btn-donate:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }
        
        /* 50:50 Layout Styles */
        .ramadhan-layout {
            background: linear-gradient(to right, #1e3c72, #2a5298);
            border-radius: 0;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
        }
        
        .ramadhan-content {
            height: 100%;
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: white;
        }
        
        /* Square container */
        .square-container {
            position: relative;
            width: 100%;
            padding-bottom: 100%;
            overflow: hidden;
            background-color: #f3f4f6;
        }
        
        .square-container img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
        }
        
        .ramadhan-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            padding: 1.5rem;
            color: white;
        }
        
        /* Gallery Slider */
        .gallery-slider-container {
            width: 100%;
            position: relative;
            border-radius: 0.5rem;
            overflow: hidden;
            margin-top: 1rem;
        }
        
        .gallery-slider {
            width: 100%;
            position: relative;
            aspect-ratio: 16/9;
        }
        
        .gallery-slider .swiper {
            width: 100%;
            height: 100%;
            border-radius: 0.5rem;
        }
        
        .gallery-slider .swiper-slide {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f3f4f6;
        }
        
        .gallery-slider .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0.5rem;
        }
        
        .gallery-slider .swiper-pagination-bullet-active {
            background: #139D93;
        }
        
        .gallery-slider .swiper-button-next,
        .gallery-slider .swiper-button-prev {
            color: white;
            background: rgba(0, 0, 0, 0.5);
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
        
        .gallery-slider .swiper-button-next:after,
        .gallery-slider .swiper-button-prev:after {
            font-size: 18px;
        }
        
        /* Program Tab Styles */
        .tab-button {
            flex: 1;
            min-width: 200px;
            padding: 1rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .tab-button.active {
            background: linear-gradient(45deg, #22C6B9, #139D93);
            color: white;
            border-color: #139D93;
        }
        
        .tab-button:not(.active) {
            background: #f3f4f6;
            color: #4b5563;
            border-color: #e5e7eb;
        }
        
        .tab-button:not(.active):hover {
            background: #e5e7eb;
        }
        
        .program-content {
            display: none;
        }
        
        .program-content.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Program Cards */
        .program-header {
            padding: 1.5rem;
            color: white;
            border-radius: 0.5rem 0.5rem 0 0;
        }
        
        .program-card-content {
            padding: 2rem;
            background: white;
            border-radius: 0 0 0.5rem 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        
        /* SDG Images */
        .sdg-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }
        
        .sdg-image-container {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffffff;
            width: 100%;
            aspect-ratio: 2/1;
            overflow: hidden;
            border-radius: 0.375rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .sdg-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        
        .donation-package {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 0.5rem;
            padding: 1rem;
            text-align: center;
            backdrop-filter: blur(10px);
        }
        
        .stats-box {
            padding: 1.5rem;
            border-radius: 0.5rem;
            text-align: center;
            color: white;
        }
        
        .stats-number {
            font-size: 2.5rem;
            font-weight: bold;
            line-height: 1;
        }
        
        .floating-donate {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 50;
        }
        
        .floating-donate .btn-donate {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .floating-donate .btn-donate:hover {
            width: 200px;
            border-radius: 30px;
        }
        
        .floating-donate .btn-donate span {
            display: none;
        }
        
        .floating-donate .btn-donate:hover span {
            display: inline-block;
            margin-left: 0.5rem;
        }
        
        @media (max-width: 768px) {
            .ramadhan-layout {
                flex-direction: column;
            }
            .ramadhan-content {
                padding: 1.5rem;
            }
            .stats-number {
                font-size: 2rem;
            }
            .tab-button {
                min-width: 100%;
            }
        }
    </style>
</head>
<body class="bg-gray-50">
    <?php include '../../navbar.php' ?>

<div class="container mx-auto px-4 py-8">
        
        <nav class="flex mb-8" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
                <li class="inline-flex items-center">
                    <a href="../../index.php" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-teal">
                        <i class="fas fa-home mr-2"></i>Home
                    </a>
                </li>
                <li><div class="flex items-center"><i class="fas fa-chevron-right text-gray-400 mx-2"></i><span class="text-sm font-medium text-gray-500">Program</span></div></li>
                <li><div class="flex items-center"><i class="fas fa-chevron-right text-gray-400 mx-2"></i><span class="text-sm font-medium text-gray-500">Ramadhan untuk Palestina</span></div></li>
            </ol>
        </nav>

<div class="max-w-6xl mx-auto">
            
            <div class="ramadhan-layout flex flex-col md:flex-row mb-8">
                <div class="w-full md:w-1/2" style="background: linear-gradient(to right, #1e3c72, #2a5298);">
                    <div class="square-container">
                        <img src="ramadhan.jpg" alt="Ramadhan Palestina" class="w-full h-full object-contain" onerror="this.src='../../placeholder-program.jpg'">
                        <div class="ramadhan-overlay">
                            <div class="arabic-font text-2xl mb-1">رمضان كريم</div>
                            <h3 class="text-xl font-bold">Jadikan Ramadhan Mereka Lebih Bermakna</h3>
                            <p class="text-sm mt-2 text-gray-200">Keberkahan dari tanah suci di bulan suci</p>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2 ramadhan-content" style="background: linear-gradient(to right, #1e3c72, #2a5298);">
                    <h1 class="text-3xl font-bold text-white mb-2">Ramadhan untuk Palestina</h1>
                    <div class="flex items-center mb-4">
                        <div class="bg-white/20 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-moon text-white text-xl"></i>
                        </div>
                        <h2 class="text-2xl font-bold text-white">Berbagi Berkah di Bulan Suci</h2>
                    </div>
                    <p class="text-white/90 leading-relaxed mb-4">Ramadhan adalah bulan berbagi, bulan penguatan iman, dan bulan solidaritas. Di tengah keterbatasan yang dihadapi warga Palestina, Ramadhan menjadi momentum penting untuk memastikan mereka tetap dapat berbuka dengan layak.</p>
                    <p class="text-white/90 leading-relaxed mb-4">Bersama Al-Quds Volunteers Indonesia, mari hadirkan kebahagiaan di bulan suci bagi saudara-saudara kita di Palestina melalui berbagai program Ramadhan.</p>
                    <div class="space-y-2">
                        <div class="flex items-center text-white"><i class="fas fa-check-circle text-white/90 mr-3"></i><span>Pembagian ifthar untuk ribuan keluarga</span></div>
                        <div class="flex items-center text-white"><i class="fas fa-check-circle text-white/90 mr-3"></i><span>Santunan untuk anak yatim Palestina</span></div>
                        <div class="flex items-center text-white"><i class="fas fa-check-circle text-white/90 mr-3"></i><span>Kado hari raya untuk kebahagiaan mereka</span></div>
                        <div class="flex items-center text-white"><i class="fas fa-check-circle text-white/90 mr-3"></i><span>Program berkelanjutan dan transparan</span></div>
                    </div>
                </div>
            </div>

<div class="bg-white rounded-lg shadow-md p-6 mb-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Pilih Program Ramadhan</h3>
                <div class="flex flex-wrap gap-3">
                    <button onclick="showProgram('ifthar')" id="tab-ifthar" class="tab-button active">
                        <i class="fas fa-utensils mr-2"></i>Pembagian Ifthar
                    </button>
                    <button onclick="showProgram('santunan')" id="tab-santunan" class="tab-button">
                        <i class="fas fa-child mr-2"></i>Santunan Anak Yatim
                    </button>
                    <button onclick="showProgram('kado')" id="tab-kado" class="tab-button">
                        <i class="fas fa-gift mr-2"></i>Kado Hari Raya
                    </button>
                </div>
            </div>

<div id="content-ifthar" class="program-content active">
                <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
                    <div class="program-header" style="background: linear-gradient(to right, #0e7490, #0891b2);">
                        <h2 class="text-2xl font-bold text-white flex items-center">
                            <i class="fas fa-utensils mr-3"></i>
                            Pembagian Ifthar (Buka Puasa)
                        </h2>
                    </div>
                    
                    <div class="program-card-content">
                        
                        <div class="grid md:grid-cols-2 gap-8 mb-8">
                            <div class="square-container">
                                <img src="ifthar.png" alt="Pembagian Ifthar" onerror="this.src='../../placeholder-program.jpg'">
                            </div>
                            <div>
                                <p class="text-gray-700 text-lg leading-relaxed mb-6">Menghadirkan hidangan berbuka puasa yang layak bagi keluarga terdampak krisis, pengungsi, serta anak-anak dan lansia di Palestina.</p>
                                <div class="bg-teal-50 p-4 rounded-lg">
                                    <h4 class="font-bold text-teal-800 mb-3 flex items-center"><i class="fas fa-clipboard-list mr-2"></i>Cakupan Bantuan</h4>
                                    <ul class="space-y-2">
                                        <li class="flex items-start"><i class="fas fa-check-circle text-teal-600 mt-1 mr-2"></i><span>Paket makanan siap saji untuk berbuka</span></li>
                                        <li class="flex items-start"><i class="fas fa-check-circle text-teal-600 mt-1 mr-2"></i><span>Air minum & kurma untuk buka puasa</span></li>
                                        <li class="flex items-start"><i class="fas fa-check-circle text-teal-600 mt-1 mr-2"></i><span>Distribusi kolektif maupun per keluarga</span></li>
                                        <li class="flex items-start"><i class="fas fa-check-circle text-teal-600 mt-1 mr-2"></i><span>Dapur umum Ramadhan di berbagai titik</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

<div class="mb-8">
                            <h4 class="font-bold text-gray-800 mb-4 text-lg flex items-center"><i class="fas fa-images mr-2 text-teal-600"></i>Gallery Foto Pembagian Ifthar</h4>
                            <div class="gallery-slider-container">
                                <div class="gallery-slider">
                                    <div class="swiper" id="ifthar-slider">
                                        <div class="swiper-wrapper">
                                            <?php 
                                            $ifthar_images = ['ifthar1.jpg', 'ifthar2.jpg', 'ifthar3.jpg', 'ifthar4.jpg', 'ifthar5.jpg', 'ifthar6.jpg', 'ifthar7.jpg'];
                                            foreach($ifthar_images as $img): 
                                            ?>
                                            <div class="swiper-slide"><img src="<?php echo $img; ?>" alt="Ifthar" onerror="this.src='../../placeholder-program.jpg'"></div>
                                            <?php endforeach; ?>
                                        </div>
                                        <div class="swiper-pagination"></div>
                                        <div class="swiper-button-next"></div>
                                        <div class="swiper-button-prev"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

<div class="grid md:grid-cols-3 gap-4 mb-8">
                            <div class="donation-package" style="background: linear-gradient(135deg, #0e7490, #0891b2);">
                                <div class="text-2xl font-bold text-white">Rp80.000</div>
                                <div class="text-sm text-white/90">1 Paket Ifthar</div>
                            </div>
                            <div class="donation-package" style="background: linear-gradient(135deg, #0e7490, #0891b2);">
                                <div class="text-2xl font-bold text-white">Rp1.000.000</div>
                                <div class="text-sm text-white/90">Ifthar untuk 1 keluarga</div>
                            </div>
                            <div class="donation-package" style="background: linear-gradient(135deg, #0e7490, #0891b2);">
                                <div class="text-2xl font-bold text-white">Rp60.000.000</div>
                                <div class="text-sm text-white/90">Operasional 1 titik dapur umum</div>
                            </div>
                        </div>

<div class="grid md:grid-cols-2 gap-8">
                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h4 class="font-bold text-gray-800 mb-4 flex items-center"><i class="fas fa-bullseye mr-2 text-teal-600"></i>Target SDG's</h4>
                                <div class="sdg-grid">
                                    <div class="sdg-image-container"><img src="sdg2.jpg" alt="SDG 2" class="sdg-image" onerror="this.src='../../placeholder-program.jpg'"></div>
                                    <div class="sdg-image-container"><img src="sdg3.jpg" alt="SDG 3" class="sdg-image" onerror="this.src='../../placeholder-program.jpg'"></div>
                                </div>
                            </div>
                            <div class="stats-box" style="background: linear-gradient(to right, #0e7490, #0891b2);">
                                <h4 class="font-bold text-white text-lg mb-4">Penerima Manfaat</h4>
                                <div class="grid grid-cols-2 gap-4">
                                    <div><div class="stats-number text-white">5.068</div><div class="text-white/90">Paket Ifthar</div></div>
                                    <div><div class="stats-number text-white">10</div><div class="text-white/90">Titik Dapur Umum</div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div id="content-santunan" class="program-content">
                <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
                    <div class="program-header" style="background: linear-gradient(to right, #f97316, #ea580c);">
                        <h2 class="text-2xl font-bold text-white flex items-center"><i class="fas fa-child mr-3"></i>Santunan Anak Yatim</h2>
                    </div>
                    <div class="program-card-content">
                        <div class="grid md:grid-cols-2 gap-8 mb-8">
                            <div class="square-container"><img src="santunananakyatim.png" alt="Santunan" onerror="this.src='../../placeholder-program.jpg'"></div>
                            <div>
                                <p class="text-gray-700 text-lg leading-relaxed mb-6">Bantuan finansial untuk membantu anak-anak yatim di Palestina menjalani Ramadhan dengan lebih layak.</p>
                                <div class="bg-orange-50 p-4 rounded-lg">
                                    <h4 class="font-bold text-orange-800 mb-3 flex items-center"><i class="fas fa-clipboard-list mr-2"></i>Cakupan Bantuan</h4>
                                    <ul class="space-y-2">
                                        <li class="flex items-start"><i class="fas fa-check-circle text-orange-600 mt-1 mr-2"></i><span>Santunan tunai untuk kebutuhan Ramadhan</span></li>
                                        <li class="flex items-start"><i class="fas fa-check-circle text-orange-600 mt-1 mr-2"></i><span>Kebutuhan pangan selama bulan puasa</span></li>
                                        <li class="flex items-start"><i class="fas fa-check-circle text-orange-600 mt-1 mr-2"></i><span>Bantuan pendidikan dan kesehatan</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

<div class="mb-8">
                            <h4 class="font-bold text-gray-800 mb-4 text-lg flex items-center"><i class="fas fa-images mr-2 text-orange-600"></i>Gallery Foto Santunan Anak Yatim</h4>
                            <div class="gallery-slider-container">
                                <div class="gallery-slider">
                                    <div class="swiper" id="santunan-slider">
                                        <div class="swiper-wrapper">
                                            <?php 
                                            $santunan_images = ['santunan1.jpg', 'santunan2.jpg'];
                                            foreach($santunan_images as $img): 
                                            ?>
                                            <div class="swiper-slide"><img src="<?php echo $img; ?>" alt="Santunan" onerror="this.src='../../placeholder-program.jpg'"></div>
                                            <?php endforeach; ?>
                                        </div>
                                        <div class="swiper-pagination"></div>
                                        <div class="swiper-button-next"></div>
                                        <div class="swiper-button-prev"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

<div class="grid md:grid-cols-2 gap-4 mb-8">
                            <div class="donation-package" style="background: linear-gradient(to right, #f97316, #ea580c);">
                                <div class="text-2xl font-bold text-white">Rp300.000</div>
                                <div class="text-sm text-white/90">Santunan 1 anak yatim</div>
                            </div>
                            <div class="donation-package" style="background: linear-gradient(to right, #f97316, #ea580c);">
                                <div class="text-2xl font-bold text-white">Rp1.500.000</div>
                                <div class="text-sm text-white/90">Dukungan kebutuhan dasar</div>
                            </div>
                        </div>

<div class="grid md:grid-cols-2 gap-8">
                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h4 class="font-bold text-gray-800 mb-4 flex items-center"><i class="fas fa-bullseye mr-2 text-orange-600"></i>Target SDG's</h4>
                                <div class="sdg-grid">
                                    <div class="sdg-image-container"><img src="sdg1.jpg" alt="SDG 1" class="sdg-image" onerror="this.src='../../placeholder-program.jpg'"></div>
                                    <div class="sdg-image-container"><img src="sdg10.jpg" alt="SDG 10" class="sdg-image" onerror="this.src='../../placeholder-program.jpg'"></div>
                                    <div class="sdg-image-container"><img src="sdg16.jpg" alt="SDG 16" class="sdg-image" onerror="this.src='../../placeholder-program.jpg'"></div>
                                </div>
                            </div>
                            <div class="stats-box" style="background: linear-gradient(to right, #f97316, #ea580c);">
                                <h4 class="font-bold text-white text-lg mb-4">Penerima Manfaat</h4>
                                <div><div class="stats-number text-white">750</div><div class="text-white/90">Anak Yatim</div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div id="content-kado" class="program-content">
                <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
                    <div class="program-header" style="background: linear-gradient(to right, #9333ea, #7e22ce);">
                        <h2 class="text-2xl font-bold text-white flex items-center"><i class="fas fa-gift mr-3"></i>Kado Hari Raya (Idul Fitri)</h2>
                    </div>
                    <div class="program-card-content">
                        <div class="grid md:grid-cols-2 gap-8 mb-8">
                            <div class="square-container"><img src="kadohariraya.png" alt="Kado" onerror="this.src='../../placeholder-program.jpg'"></div>
                            <div>
                                <p class="text-gray-700 text-lg leading-relaxed mb-6">Menghadirkan kebahagiaan di hari kemenangan agar keluarga Palestina tetap dapat merasakan suasana Idul Fitri.</p>
                                <div class="bg-purple-50 p-4 rounded-lg">
                                    <h4 class="font-bold text-purple-800 mb-3 flex items-center"><i class="fas fa-clipboard-list mr-2"></i>Cakupan Bantuan</h4>
                                    <ul class="space-y-2">
                                        <li class="flex items-start"><i class="fas fa-check-circle text-purple-600 mt-1 mr-2"></i><span>Paket sembako spesial Idul Fitri</span></li>
                                        <li class="flex items-start"><i class="fas fa-check-circle text-purple-600 mt-1 mr-2"></i><span>Kue lebaran untuk keluarga</span></li>
                                        <li class="flex items-start"><i class="fas fa-check-circle text-purple-600 mt-1 mr-2"></i><span>Pakaian atau perlengkapan anak</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

<div class="mb-8">
                            <h4 class="font-bold text-gray-800 mb-4 text-lg flex items-center"><i class="fas fa-images mr-2 text-purple-600"></i>Gallery Foto Kado Hari Raya</h4>
                            <div class="gallery-slider-container">
                                <div class="gallery-slider">
                                    <div class="swiper" id="kado-slider">
                                        <div class="swiper-wrapper">
                                            <?php 
                                            $kado_images = ['kado1.jpg', 'kado2.jpg', 'kado3.jpg', 'kado4.jpg', 'kado5.jpg'];
                                            foreach($kado_images as $img): 
                                            ?>
                                            <div class="swiper-slide"><img src="<?php echo $img; ?>" alt="Kado" onerror="this.src='../../placeholder-program.jpg'"></div>
                                            <?php endforeach; ?>
                                        </div>
                                        <div class="swiper-pagination"></div>
                                        <div class="swiper-button-next"></div>
                                        <div class="swiper-button-prev"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

<div class="grid md:grid-cols-3 gap-4 mb-8">
                            <div class="donation-package" style="background: linear-gradient(to right, #9333ea, #7e22ce);">
                                <div class="text-2xl font-bold text-white">Rp100.000</div>
                                <div class="text-sm text-white/90">Kado Hari Raya</div>
                            </div>
                            <div class="donation-package" style="background: linear-gradient(to right, #9333ea, #7e22ce);">
                                <div class="text-2xl font-bold text-white">Rp250.000</div>
                                <div class="text-sm text-white/90">Bingkisan kue lebaran</div>
                            </div>
                            <div class="donation-package" style="background: linear-gradient(to right, #9333ea, #7e22ce);">
                                <div class="text-2xl font-bold text-white">Rp1.000.000</div>
                                <div class="text-sm text-white/90">Bingkisan sembako keluarga</div>
                            </div>
                        </div>

<div class="grid md:grid-cols-2 gap-8">
                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h4 class="font-bold text-gray-800 mb-4 flex items-center"><i class="fas fa-bullseye mr-2 text-purple-600"></i>Target SDG's</h4>
                                <div class="sdg-grid">
                                    <div class="sdg-image-container"><img src="sdg2.jpg" alt="SDG 2" class="sdg-image" onerror="this.src='../../placeholder-program.jpg'"></div>
                                    <div class="sdg-image-container"><img src="sdg3.jpg" alt="SDG 3" class="sdg-image" onerror="this.src='../../placeholder-program.jpg'"></div>
                                </div>
                            </div>
                            <div class="stats-box" style="background: linear-gradient(to right, #9333ea, #7e22ce);">
                                <h4 class="font-bold text-white text-lg mb-4">Penerima Manfaat</h4>
                                <div class="grid grid-cols-3 gap-2">
                                    <div><div class="stats-number text-white">525</div><div class="text-white/90">Paket Sembako</div></div>
                                    <div><div class="stats-number text-white">500</div><div class="text-white/90">Paket Kue</div></div>
                                    <div><div class="stats-number text-white">350</div><div class="text-white/90">Kado Anak</div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="mt-8 pt-6 border-t border-gray-200 flex justify-center">
                <button onclick="openDonationModal()" class="btn-donate inline-block px-8 py-4 rounded-lg font-semibold text-white text-lg">
                    <i class="fas fa-hand-holding-heart mr-2"></i>Donasi untuk Program Ramadhan
                </button>
            </div>
        </div>
    </div>

<div id="donationPopup" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg p-8 max-w-md w-full mx-4">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-bold text-gray-800">Donasi Program Ramadhan</h3>
                <button onclick="closeDonationPopup()" class="text-gray-500 hover:text-gray-700"><i class="fas fa-times text-xl"></i></button>
            </div>
            <div class="mb-6">
                <p class="text-gray-600 mb-4">Pilih program donasi:</p>
                <div class="space-y-3 mb-4">
                    <label class="flex items-center p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
                        <input type="radio" name="program" value="ifthar" class="mr-3" checked> <span>Pembagian Ifthar - Rp80.000/paket</span>
                    </label>
                    <label class="flex items-center p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
                        <input type="radio" name="program" value="santunan" class="mr-3"> <span>Santunan Anak Yatim - Rp300.000/anak</span>
                    </label>
                    <label class="flex items-center p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
                        <input type="radio" name="program" value="kado" class="mr-3"> <span>Kado Hari Raya - Rp100.000/paket</span>
                    </label>
                </div>
                <p class="text-gray-600 mb-2">Atau masukkan nominal:</p>
                <input type="number" id="customAmount" placeholder="Rp" class="w-full p-3 border rounded-lg">
            </div>
            <div class="flex justify-end space-x-3">
                <button onclick="closeDonationPopup()" class="px-4 py-2 text-gray-600 hover:text-gray-800">Batal</button>
                <button onclick="proceedToPayment()" class="bg-teal-500 text-white px-6 py-2 rounded-lg hover:bg-teal-600 transition">Lanjutkan</button>
            </div>
        </div>
    </div>

<div class="floating-donate">
        <a href="#" onclick="showDonationPopup(); return false;" class="btn-donate text-white shadow-lg overflow-hidden">
            <i class="fas fa-hand-holding-heart"></i><span>Donasi Sekarang</span>
        </a>
    </div>

<?php include '../../footer.php' ?>

// Inisialisasi semua Swiper
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Halaman dimuat, hash: ' + window.location.hash);
            
            // Inisialisasi slider untuk semua konten
            if (document.getElementById('ifthar-slider')) {
                new Swiper('#ifthar-slider', {
                    loop: true,
                    autoplay: { delay: 4000, disableOnInteraction: false },
                    pagination: { el: '#ifthar-slider .swiper-pagination', clickable: true },
                    navigation: { nextEl: '#ifthar-slider .swiper-button-next', prevEl: '#ifthar-slider .swiper-button-prev' }
                });
            }

if (document.getElementById('santunan-slider')) {
                new Swiper('#santunan-slider', {
                    loop: true,
                    autoplay: { delay: 4000, disableOnInteraction: false },
                    pagination: { el: '#santunan-slider .swiper-pagination', clickable: true },
                    navigation: { nextEl: '#santunan-slider .swiper-button-next', prevEl: '#santunan-slider .swiper-button-prev' }
                });
            }

if (document.getElementById('kado-slider')) {
                new Swiper('#kado-slider', {
                    loop: true,
                    autoplay: { delay: 4000, disableOnInteraction: false },
                    pagination: { el: '#kado-slider .swiper-pagination', clickable: true },
                    navigation: { nextEl: '#kado-slider .swiper-button-next', prevEl: '#kado-slider .swiper-button-prev' }
                });
            }

// Cek URL hash untuk menentukan tab yang aktif
            let hash = window.location.hash.substring(1);
            if (hash === 'santunan') {
                showProgram('santunan');
            } else if (hash === 'kado') {
                showProgram('kado');
            } else {
                showProgram('ifthar'); // Default
            }
        });

// Handle perubahan hash (tombol back/forward)
        window.addEventListener('hashchange', function() {
            let hash = window.location.hash.substring(1);
            if (hash === 'santunan' || hash === 'kado' || hash === 'ifthar') {
                showProgram(hash);
            }
        });

// Donation popup functions
        function showDonationPopup() {
            document.getElementById('donationPopup').classList.remove('hidden');
        }
        
        function closeDonationPopup() {
            document.getElementById('donationPopup').classList.add('hidden');
        }
        
        function proceedToPayment() {
            const selectedProgram = document.querySelector('input[name="program"]:checked').value;
            const customAmount = document.getElementById('customAmount').value;
            
            let programName = '';
            if (selectedProgram === 'ifthar') programName = 'Pembagian Ifthar';
            else if (selectedProgram === 'santunan') programName = 'Santunan Anak Yatim';
            else if (selectedProgram === 'kado') programName = 'Kado Hari Raya';
            
            let message = 'Terima kasih! Anda akan donasi untuk program ' + programName;
            if (customAmount) {
                message += ' sebesar Rp ' + new Intl.NumberFormat('id-ID').format(customAmount);
            }
            
            alert(message);
            closeDonationPopup();
        }
        
        // Close popup when clicking outside
        document.getElementById('donationPopup').addEventListener('click', function(e) {
            if (e.target === this) {
                closeDonationPopup();
            }
        });
    </script>
</body>
</html>
<?php mysqli_close($conn); ?>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: index_copy.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation