ikan Uploader :
Directory : /var/www/html/shardahospital.org/application/views/
Upload File : |
| Current File : /var/www/html/shardahospital.org/application/views/registration_form.php |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Registration for AYUSHARDA 2025 - Sharda Hospital</title>
<meta name="description" content="Register online for AYUSHARDA 2025 at Sharda Hospital. Complete the registration form to participate in the upcoming AYUSHARDA event. Secure your spot today!">
<meta name="keywords" content="AYUSHARDA 2025 registration, Sharda Hospital online registration, AYUSHARDA 2025 form, Sharda Hospital registration, AYUSHARDA 2025 event, AYUSHARDA registration form">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom styles to complement Tailwind */
:root {
/* Orange Gradient Theme */
--primary-color: #F97316; /* Orange 500 */
--secondary-color: #EA580C; /* Orange 600 */
--text-dark: #333;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f9fafb; /* bg-gray-50 */
}
.bg-primary { background-color: var(--primary-color); }
.text-primary { color: var(--primary-color); }
.border-primary { border-color: var(--primary-color); }
.bg-gradient-main { background-image: linear-gradient(to right, var(--primary-color), var(--secondary-color));}
.hover\:bg-primary-dark:hover { background-color: #D95B0C; }
.focus\:ring-primary:focus {
--tw-ring-color: var(--primary-color);
}
</style>
</head>
<body class="text-gray-800">
<nav class="bg-white shadow-md sticky top-0 z-50">
<div
class="container mx-auto px-6 py-3 flex items-center justify-between"
>
<!-- Logo 1 -->
<a href="https://www.shardahospital.org/" target="_blank">
<img
src="https://www.shardahospital.org/assests/images/Sharda-Hospital-Logo.png"
alt="Sharda Hospital Logo"
class="w-20 sm:w-20 md:w-24 lg:w-32"
onerror="this.onerror=null;this.src='https://placehold.co/200x50/ffffff/F97316?text=Sharda+Hospital';"
/>
</a>
<!-- Logo 2 -->
<a href="https://www.sharda.ac.in/" target="_blank">
<img
src="<?= base_url('assests/imgs/university.png'); ?>"
alt="Logo 2"
class="w-20 sm:w-20 md:w-24 lg:w-32"
/>
</a>
<!-- Logo 3 -->
<a href="https://www.shardacare.com/" target="_blank">
<img
src="<?= base_url('assests/imgs/care.png'); ?>"
alt="Logo 3"
class="w-20 sm:w-20 md:w-24 lg:w-32"
/>
</a>
</div>
</nav>
<!-- Main Registration Section -->
<main class="py-12 md:py-20">
<div class="container mx-auto px-6">
<div class="max-w-4xl mx-auto bg-white p-8 md:p-12 rounded-xl shadow-2xl">
<div class="text-center mb-10">
<h1 class="text-3xl md:text-4xl font-bold text-gray-800">Registration Form</h1>
<p class="text-gray-500 mt-2">Please fill out the details below to secure your spot.</p>
</div>
<?php if ($this->session->flashdata('submit_status_msg')): ?>
<div class="mb-4 text-center">
<?= $this->session->flashdata('submit_status_msg'); ?>
</div>
<?php endif; ?>
<!-- Show all validation errors -->
<?php if (validation_errors()): ?>
<div class="mb-4 p-4 bg-red-50 border border-red-300 text-red-700 rounded">
<?= validation_errors('<div class="mb-2">', '</div>'); ?>
</div>
<?php endif; ?>
<form action="<?= base_url('ayusharda2025/registration_form');?>" method="POST" class="space-y-8" enctype="multipart/form-data">
<!-- 1. Personal Details -->
<div class="border-b border-gray-200 pb-6">
<h2 class="text-xl font-semibold text-gray-700 mb-4"> Registration Details</h2>
<input type="hidden" id="calculated_amount" name="calculated_amount" value="">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Ticket Category -->
<div>
<label for="ticket_category" class="block text-sm font-medium text-gray-700">Pass Category</label>
<select id="ticket_category" name="ticket_category" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" required>
<option value="">Select Category</option>
<option value="Early Bird Pass - ₹1000" data-price="1000" >Early Bird Pass - ₹1000</option>
<option value="Online Participation - ₹500" data-price="500">Online Participation - ₹500</option>
<option value="After 15 Sep 2025 - ₹2000" data-price="2000">After 15 Sep 2025 - ₹2000</option>
<option value="Delegates Pass - ₹2000" data-price="2000">Delegates Pass - ₹2000</option>
<option value="Student Pass (only For Students) Valid ID Required - ₹500" data-price="500">Student Pass (only For Students) Valid ID Required - ₹500</option>
</select>
<?= form_error('ticket_category', '<span class="text-red-600 text-sm">', '</span>'); ?>
</div>
<div>
<label for="registration_type" class="block text-sm font-medium text-gray-700">Registration Type (Special Discount on Group)</label>
<select id="registration_type" name="registration_type" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" required>
<option value="1">Single</option>
<option value="5">Group of 5</option>
<option value="10">Group of 10</option>
</select>
<?= form_error('payment_mode', '<span class="text-red-600 text-sm">', '</span>'); ?>
</div>
<!-- Emp ID No -->
</div>
</div>
<div class="border-b border-gray-200 pb-6 " id="personal-details-container">
<h2 class="text-xl font-semibold text-gray-700 mb-4">Attendee 1 Details</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Full Name -->
<div>
<label for="full_name" class="block text-sm font-medium text-gray-700">Full Name</label>
<input type="text" name="full_name" id="full_name" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" required>
<?= form_error('full_name', '<span class="text-red-600 text-sm">', '</span>'); ?>
</div>
<!-- Date of Birth -->
<div>
<label for="dob" class="block text-sm font-medium text-gray-700">Date of Birth</label>
<input type="date" name="dob" id="dob" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" required>
<?= form_error('dob', '<span class="text-red-600 text-sm">', '</span>'); ?>
</div>
<!-- Gender -->
<div>
<label for="gender" class="block text-sm font-medium text-gray-700">Gender</label>
<select id="gender" name="gender" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
<?= form_error('gender', '<span class="text-red-600 text-sm">', '</span>'); ?>
</div>
<!-- Email ID -->
<div>
<label for="email_id" class="block text-sm font-medium text-gray-700">Email ID</label>
<input type="email" name="email" id="email_id" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" required>
<?= form_error('email', '<span class="text-red-600 text-sm">', '</span>'); ?>
</div>
<!-- Mobile Number -->
<div>
<label for="mobile_number" class="block text-sm font-medium text-gray-700">Mobile Number</label>
<input type="tel" name="mobile_no" id="mobile_number" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" required>
<?= form_error('mobile_no', '<span class="text-red-600 text-sm">', '</span>'); ?>
</div>
<div>
<label for="picture" class="block text-sm font-medium text-gray-700">Picture</label>
<input type="file" name="picture" id="picture" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" required>
<?= form_error('picture', '<span class="text-red-600 text-sm">', '</span>'); ?>
</div>
<!-- Address -->
<div class="md:col-span-2">
<label for="address_city" class="block text-sm font-medium text-gray-700">Address</label>
<div class="grid grid-cols-1 sm:grid-cols-1 gap-4 mt-1">
<textarea name="city" id="address_city" placeholder="Address" rows="4" cols="50" class="block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" required></textarea>
</div>
<?= form_error('city', '<span class="text-red-600 text-sm">', '</span>'); ?>
</div>
<div>
<label for="emp_id" class="block text-sm font-medium text-gray-700">Employee ID No (if applicable)</label>
<input type="text" name="employee_id" id="emp_id" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary">
<?= form_error('employee_id', '<span class="text-red-600 text-sm">', '</span>'); ?>
</div>
<!-- ID Card No -->
<div>
<label for="id_card_no" class="block text-sm font-medium text-gray-700">ID Card No (for Staff/Student)</label>
<input type="text" name="id_card_no" id="id_card_no" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary">
<?= form_error('id_card_no', '<span class="text-red-600 text-sm">', '</span>'); ?>
</div>
<!-- Aadhar Card -->
<div>
<label for="upload_aadhar" class="block text-sm font-medium text-gray-700">Upload Aadhar<span class="text-red-500">*</span></label>
<input type="file" name="upload_aadhar_card" id="upload_aadhar" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary">
<?= form_error('upload_aadhar_card', '<span class="text-red-600 text-sm">', '</span>'); ?>
</div>
</div>
</div>
<!-- 7. Additional Information -->
<div>
<h2 class="text-xl font-semibold text-gray-700 mb-4"> Additional Information</h2>
<div>
<label for="source" class="block text-sm font-medium text-gray-700">How did you hear about this concert?</label>
<select id="source" name="additional_information" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" required>
<option value="">Select an option</option>
<option value="Social Media">Social Media</option>
<option value="Friends">Friends</option>
<option value="Posters">Posters</option>
<option value="Website">Website</option>
</select>
<?= form_error('additional_information', '<span class="text-red-600 text-sm">', '</span>'); ?>
</div>
</div>
<!-- 3. Payment Information -->
<div class="border-b border-gray-200 pb-6">
<h2 class="text-xl font-semibold text-gray-700 mb-4"> Payment Information</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-8">
<!-- QR Code Section -->
<div
class="md:col-span-2 flex flex-col items-center gap-2 p-4 border rounded-lg bg-gray-50"
>
<p class="text-sm font-medium text-gray-700 text-center">
Please scan the QR code below to complete the payment.
</p>
<!-- This div will display the amount to be paid -->
<div
id="amount-display"
class="text-center font-bold text-xl text-primary my-2"
></div>
<img
src="<?= base_url('assests/imgs/QR_new.png') ?>"
alt="Payment QR Code"
class="w-48 h-48 rounded-md shadow-md"
onerror="this.onerror=null;this.src='https://placehold.co/200x200/CCCCCC/FFFFFF?text=QR+Code';"
/>
<!-- UPI ID Display -->
<p class="text-center font-semibold text-gray-700 mt-2">
Or pay using UPI ID: <span class="text-primary">SHARDAHOSPITAL633@icici</span>
</p>
<p class="text-xs text-gray-500 text-center mt-2">
After payment, please enter the Transaction ID and upload a
screenshot below.
</p>
</div>
<!-- Transaction ID Input -->
<div>
<label
for="transaction_id"
class="block text-sm font-medium text-gray-700"
>
Transaction ID / UTR No.
</label>
<input type="text" name="transaction_id" id="transaction_id" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary">
</div>
<!-- Screenshot Upload -->
<div>
<label
for="id_proof_img"
class="block text-sm font-medium text-gray-700"
>
Upload Payment Screenshot
</label>
<div>
<input type="file" name="id_proof_img" id="id_proof_img" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-orange-50 file:text-primary hover:file:bg-orange-100">
</div>
</div>
</div>
</div>
<!-- Submit Button -->
<div class="pt-6 text-center">
<button type="submit" class="w-full md:w-auto bg-gradient-main hover:bg-primary-dark text-white font-bold py-3 px-12 rounded-full transition duration-300 transform hover:scale-105">
Submit Registration
</button>
</div>
</form>
<!-- 6. Responsible Person/Team Information -->
<div class="mt-12 pt-6 border-t border-gray-200 text-sm text-gray-600">
<h3 class="text-lg font-semibold text-gray-700 mb-3">For Any Queries, Contact:</h3>
<ul class="space-y-2">
<li>
<strong>Registration Coordinator:</strong> Mr. Mohsin (+91
8800061758)
</li>
<li>
<strong>Payment In-charge:</strong> Mr. Pradeep Yadav (+91
8800061758)
</li>
<li>
<!-- <li><strong>Pass Distribution In-charge:</strong> ------ (+91 --------)</li> -->
</li>
<li>
<strong>Technical Support (Online):</strong>
ayusharda2025@sharda.ac.in
</li>
</ul>
</div>
</div>
</div>
</main>
<script>
document.addEventListener("DOMContentLoaded", function () {
const categorySelect = document.getElementById("ticket_category");
const registrationTypeSelect = document.getElementById("registration_type");
const amountDisplay = document.getElementById("amount-display");
const detailsContainer = document.getElementById("personal-details-container");
// const GROUP_DISCOUNT = 200;
// Function to create a new member detail form section
function createMemberForm(memberNumber) {
return `
<div class="border-b border-gray-200 pb-6 member-form mt-5">
<h2 class="text-xl font-semibold text-gray-700 mb-4">
Attendee ${memberNumber} Details
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="full_name_${memberNumber}" class="block text-sm font-medium text-gray-700">Full Name</label>
<input type="text" name="full_name_${memberNumber}" id="full_name_${memberNumber}" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" required />
</div>
<div>
<label for="dob_${memberNumber}" class="block text-sm font-medium text-gray-700">Date of Birth</label>
<input type="date" name="dob_${memberNumber}" id="dob_${memberNumber}" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" required />
</div>
<div>
<label for="gender_${memberNumber}" class="block text-sm font-medium text-gray-700">Gender</label>
<select id="gender_${memberNumber}" name="gender_${memberNumber}" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</div>
<div>
<label for="email_${memberNumber}" class="block text-sm font-medium text-gray-700">Email ID</label>
<input type="email" name="email_${memberNumber}" id="email_${memberNumber}" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" required />
</div>
<div>
<label for="mobile_no_${memberNumber}" class="block text-sm font-medium text-gray-700">Mobile Number</label>
<input type="tel" name="mobile_no_${memberNumber}" id="mobile_no_${memberNumber}" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" required />
</div>
<div>
<label for="picture_${memberNumber}" class="block text-sm font-medium text-gray-700">Picture</label>
<input type="file" name="picture_${memberNumber}" id="picture_${memberNumber}" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" required>
</div>
<div class="md:col-span-2">
<label for="city_${memberNumber}" class="block text-sm font-medium text-gray-700">Address</label>
<textarea id="city_${memberNumber}" name="city_${memberNumber}" rows="3" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary"></textarea>
</div>
<div>
<label for="employee_id_${memberNumber}" class="block text-sm font-medium text-gray-700">Employee ID No (if applicable)</label>
<input type="text" name="employee_id_${memberNumber}" id="employee_id_${memberNumber}" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" />
</div>
<div>
<label for="id_card_no_${memberNumber}" class="block text-sm font-medium text-gray-700">ID Card No (for Staff/Student)</label>
<input type="text" name="id_card_no_${memberNumber}" id="id_card_no_${memberNumber}" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" />
</div>
<div>
<label for="id_card_no_${memberNumber}" class="block text-sm font-medium text-gray-700">ID Card No (for Staff/Student)</label>
<input type="text" name="id_card_no_${memberNumber}" id="id_card_no_${memberNumber}" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary" />
</div>
<div>
<label for="upload_aadhar_${memberNumber}" class="block text-sm font-medium text-gray-700">Upload Aadhar<span class="text-red-500">*</span></label>
<input type="file" name="upload_aadhar_card_${memberNumber}" id="upload_aadhar_${memberNumber}" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary">
</div>
</div>
</div>
`;
}
// Main function to update the form and price
function updateFormAndPrice() {
// Get selected values
const selectedOption = categorySelect.options[categorySelect.selectedIndex];
const basePrice = parseInt(selectedOption.getAttribute('data-price'), 10) || 0;
const groupSize = parseInt(registrationTypeSelect.value, 10) || 1;
const participantSize = categorySelect.value;
// Clear existing additional forms
const existingForms = detailsContainer.querySelectorAll('.member-form');
existingForms.forEach(form => form.remove());
// Add new forms if it's a group
if (groupSize > 1) {
for (let i = 2; i <= groupSize; i++) {
detailsContainer.insertAdjacentHTML('beforeend', createMemberForm(i));
}
}
// Calculate price
if (basePrice > 0) {
let pricePerHead = basePrice;
let priceText = "";
let totalPrice = 0;
if(participantSize=='Online Participation - ₹500') {
if (groupSize==5) {
pricePerHead = basePrice;
totalAPrice = pricePerHead * groupSize;
totalPrice = totalAPrice;
priceText = `
Total for ${groupSize} people: <span class="text-gray-800 text-2xl">₹${totalPrice}</span>
`;
} else if (groupSize==10) {
pricePerHead = basePrice;
totalAPrice = pricePerHead * groupSize;
totalPrice = totalAPrice;
priceText = `
Total for ${groupSize} people: <span class="text-gray-800 text-2xl">₹${totalPrice}</span>
`;
} else {
totalPrice = pricePerHead; // ✅ fix: single person case
priceText = `Amount to Pay: <span class="text-gray-800 text-2xl">₹${totalPrice}</span>`;
}
} else {
if (groupSize==5) {
pricePerHead = basePrice;
totalAPrice = pricePerHead * groupSize;
discount = (totalAPrice * 0.10);
totalPrice = totalAPrice-discount;
priceText = `
Total for ${groupSize} people: <span class="text-gray-800 text-2xl">₹${totalPrice}</span>
`;
} else if (groupSize==10) {
pricePerHead = basePrice;
totalAPrice = pricePerHead * groupSize;
discount = (totalAPrice * 0.20);
totalPrice = totalAPrice-discount;
priceText = `
Total for ${groupSize} people: <span class="text-gray-800 text-2xl">₹${totalPrice}</span>
`;
} else {
totalPrice = pricePerHead; // ✅ fix: single person case
priceText = `Amount to Pay: <span class="text-gray-800 text-2xl">₹${totalPrice}</span>`;
}
}
amountDisplay.innerHTML = priceText;
document.getElementById("calculated_amount").value = totalPrice; // ✅ always set
console.log("Final Amount:", totalPrice);
} else {
amountDisplay.innerHTML = "Please select a pass category.";
document.getElementById("calculated_amount").value = "";
}
}
// Add event listeners
categorySelect.addEventListener("change", updateFormAndPrice);
registrationTypeSelect.addEventListener("change", updateFormAndPrice);
// Initial call to set the form state
updateFormAndPrice();
});
</script>
</body>
</html>
Kontol Shell Bypass