You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
255 lines
11 KiB
255 lines
11 KiB
<?php
|
|
// Initialize form data array
|
|
$formData = [];
|
|
|
|
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
|
// Collect form data when the form is submitted
|
|
// $formData['donorName'] = $_POST['donor-name'];
|
|
// $formData['email'] = $_POST['email'];
|
|
// $formData['clothesType'] = $_POST['clothes-type'];
|
|
// $formData['clothesCondition'] = $_POST['clothes-condition'];
|
|
// $formData['pickupLocation'] = $_POST['pickup-location'];
|
|
// $formData['message'] = $_POST['message'];
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Clothes Donation</title>
|
|
<!-- Bootstrap CDN -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
|
<style>
|
|
/* Your CSS styles here */
|
|
body {
|
|
font-family: 'Arial', sans-serif;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
#donation-form-page {
|
|
padding: 60px 20px;
|
|
}
|
|
|
|
#donation-form {
|
|
background: white;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
border-radius: 12px;
|
|
padding: 30px;
|
|
max-width: 700px;
|
|
margin: auto;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#donation-form h2 {
|
|
color: #333;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-top: 15px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
input, select, textarea {
|
|
width: 100%;
|
|
padding: 12px;
|
|
margin-top: 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
input:focus, select:focus, textarea:focus {
|
|
border-color: #4CAF50;
|
|
outline: none;
|
|
box-shadow: 0 0 8px rgba(72, 185, 105, 0.4);
|
|
}
|
|
|
|
.form-control {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.form-control:hover {
|
|
border-color: #45a049;
|
|
}
|
|
|
|
button {
|
|
margin-top: 20px;
|
|
padding: 12px 20px;
|
|
font-size: 1rem;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease, transform 0.2s;
|
|
width: 100%;
|
|
max-width: 200px;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #45a049;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 1s ease-in;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
/* Adjusting the map container */
|
|
#map {
|
|
width: 100%; /* Full width */
|
|
height: 400px; /* Adjust height as needed */
|
|
border: none; /* Remove border */
|
|
margin-bottom: 20px; /* Space below the map */
|
|
}
|
|
|
|
.step-container {
|
|
display: none;
|
|
}
|
|
|
|
/* Full-width map */
|
|
#map {
|
|
width: 100%; /* Full width */
|
|
height: 400px; /* Adjust height as needed */
|
|
border: none; /* Remove border */
|
|
margin-bottom: 20px; /* Space below the map */
|
|
}
|
|
|
|
/* Mobile responsiveness */
|
|
@media (max-width: 768px) {
|
|
.navbar {
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<section id="donation-form-page">
|
|
<div class="text-center fade-in">
|
|
<h1 class="display-4">Clothes Donation</h1>
|
|
<p>Thank you for your willingness to donate clothes. Please fill in the form step by step.</p>
|
|
</div>
|
|
|
|
<!-- Step 1: Personal Information -->
|
|
<div id="step-1" class="step-container fade-in" style="display: block;">
|
|
<h2>Your Information</h2>
|
|
<form method="POST" action="clothes.php" id="donationForm">
|
|
<div class="mb-3">
|
|
<label for="donor-name" class="form-label">Your Name:</label>
|
|
<input type="text" id="donor-name" name="donor-name" class="form-control" placeholder="Enter your full name" value="<?php echo isset($formData['donorName']) ? $formData['donorName'] : ''; ?>" required />
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">Email Address:</label>
|
|
<input type="email" id="email" name="email" class="form-control" placeholder="Enter your email address" value="<?php echo isset($formData['email']) ? $formData['email'] : ''; ?>" required />
|
|
</div>
|
|
|
|
<button type="submit" name="step" value="2">Next</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Step 2: Clothes Details -->
|
|
<div id="step-2" class="step-container fade-in" style="display: <?php echo isset($_POST['step']) && $_POST['step'] == '2' ? 'block' : 'none'; ?>;">
|
|
<h2>Clothes Details</h2>
|
|
<form method="POST" action="clothes.php" id="clothes-details-form">
|
|
<div class="mb-3">
|
|
<label for="clothes-type" class="form-label">Type of Clothes:</label>
|
|
<select id="clothes-type" name="clothes-type" class="form-select" required>
|
|
<option value="shirts" <?php echo (isset($formData['clothesType']) && $formData['clothesType'] == 'shirts') ? 'selected' : ''; ?>>Shirts</option>
|
|
<option value="pants" <?php echo (isset($formData['clothesType']) && $formData['clothesType'] == 'pants') ? 'selected' : ''; ?>>Pants</option>
|
|
<option value="jackets" <?php echo (isset($formData['clothesType']) && $formData['clothesType'] == 'jackets') ? 'selected' : ''; ?>>Jackets</option>
|
|
<option value="shoes" <?php echo (isset($formData['clothesType']) && $formData['clothesType'] == 'shoes') ? 'selected' : ''; ?>>Shoes</option>
|
|
<option value="others" <?php echo (isset($formData['clothesType']) && $formData['clothesType'] == 'others') ? 'selected' : ''; ?>>Others</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="clothes-condition" class="form-label">Condition of Clothes:</label>
|
|
<select id="clothes-condition" name="clothes-condition" class="form-select" required>
|
|
<option value="new" <?php echo (isset($formData['clothesCondition']) && $formData['clothesCondition'] == 'new') ? 'selected' : ''; ?>>New</option>
|
|
<option value="gently-used" <?php echo (isset($formData['clothesCondition']) && $formData['clothesCondition'] == 'gently-used') ? 'selected' : ''; ?>>Gently Used</option>
|
|
<option value="old" <?php echo (isset($formData['clothesCondition']) && $formData['clothesCondition'] == 'old') ? 'selected' : ''; ?>>Old</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button type="submit" name="step" value="3">Next</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Step 3: Pickup Location and Message -->
|
|
<div id="step-3" class="step-container fade-in" style="display: <?php echo isset($_POST['step']) && $_POST['step'] == '3' ? 'block' : 'none'; ?>;">
|
|
<h2>Pickup Details</h2>
|
|
<form method="POST" action="clothes.php" id="pickup-details-form">
|
|
<div class="mb-3">
|
|
<label for="pickup-location" class="form-label">Pickup Location:</label>
|
|
<input type="text" id="pickup-location" name="pickup-location" class="form-control" placeholder="Enter pickup address" value="<?php echo isset($formData['pickupLocation']) ? $formData['pickupLocation'] : ''; ?>" required />
|
|
</div>
|
|
|
|
<div id="map">
|
|
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14129.445442684992!2d85.333259!3d27.706127!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb19a00bd8d7c1%3A0xe01225b704668023!2sLord%20Buddha%20Education%20Foundation-%20LBEF%20CAMPUS%20(The%20First%20IT%20College%20of%20Nepal)!5e0!3m2!1sen!2snp!4v1736672731872!5m2!1sen!2snp" width="1400" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="message" class="form-label">Message (Optional):</label>
|
|
<textarea id="message" name="message" class="form-control" placeholder="Add a message" rows="4"><?php echo isset($formData['message']) ? $formData['message'] : ''; ?></textarea>
|
|
</div>
|
|
|
|
<button type="submit" name="step" value="4">Next</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Step 4: Review and Download Receipt -->
|
|
<div id="step-4" class="step-container fade-in" style="display: <?php echo isset($_POST['step']) && $_POST['step'] == '4' ? 'block' : 'none'; ?>;">
|
|
<h2>Review and Download Receipt</h2>
|
|
<div id="review-details">
|
|
<h4>Your Details</h4>
|
|
<p><strong>Name:</strong> <?php echo isset($formData['donorName']) ? $formData['donorName'] : ''; ?></p>
|
|
<p><strong>Email:</strong> <?php echo isset($formData['email']) ? $formData['email'] : ''; ?></p>
|
|
<p><strong>Clothes Type:</strong> <?php echo isset($formData['clothesType']) ? $formData['clothesType'] : ''; ?></p>
|
|
<p><strong>Clothes Condition:</strong> <?php echo isset($formData['clothesCondition']) ? $formData['clothesCondition'] : ''; ?></p>
|
|
<p><strong>Pickup Location:</strong> <?php echo isset($formData['pickupLocation']) ? $formData['pickupLocation'] : ''; ?></p>
|
|
<p><strong>Message:</strong> <?php echo isset($formData['message']) && $formData['message'] ? $formData['message'] : 'None'; ?></p>
|
|
</div>
|
|
<button id="download-receipt" onclick="downloadReceipt()">Download Receipt</button>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
function downloadReceipt() {
|
|
const { jsPDF } = window.jspdf;
|
|
const doc = new jsPDF();
|
|
|
|
doc.text('Donation Receipt', 20, 20);
|
|
doc.text(`Name: ${<?php echo json_encode($formData['donorName']); ?>}`, 20, 30);
|
|
doc.text(`Email: ${<?php echo json_encode($formData['email']); ?>}`, 20, 40);
|
|
doc.text(`Clothes Type: ${<?php echo json_encode($formData['clothesType']); ?>}`, 20, 50);
|
|
doc.text(`Clothes Condition: ${<?php echo json_encode($formData['clothesCondition']); ?>}`, 20, 60);
|
|
doc.text(`Pickup Location: ${<?php echo json_encode($formData['pickupLocation']); ?>}`, 20, 70);
|
|
doc.text(`Message: ${<?php echo json_encode($formData['message']); ?> || 'None'}`, 20, 80);
|
|
|
|
doc.save('donation-receipt.pdf');
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|