PNG IHDR x sBIT|d pHYs + tEXtSoftware www.inkscape.org< ,tEXtComment
<?php
// Start the session
session_start();
// Initialize the cart
if (!isset($_SESSION['cart'])) {
$_SESSION['cart'] = [];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food Aid - Global Relief Bridge</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* --- 1. VARIABLES (Matching your theme) --- */
:root {
--primary-green: #266fc9;
--dark-green: #070767;
--primary-purple: #665de5;
--action-blue: #007BFF;
--text-dark: #333;
--bg-light: #f4f7f6;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: var(--bg-light); color: var(--text-dark); overflow-x: hidden; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
img { max-width: 100%; display: block; border-radius: 15px; }
/* --- 2. LAYOUT UTILITIES --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section { padding: 60px 0; }
.text-center { text-align: center; }
.section-title { font-size: 2.2rem; color: var(--dark-green); margin-bottom: 15px; font-weight: 800; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
/* The Split Layout for Product */
.product-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 50px;
background: white; padding: 40px; border-radius: 20px;
box-shadow: 0 10px 40px rgba(0,0,0,0.05);
align-items: start;
}
/* --- 3. COMPONENTS --- */
.btn { padding: 12px 25px; border-radius: 50px; font-weight: 700; cursor: pointer; border: none; transition: 0.3s; display: inline-block; text-align: center; }
.btn-green { background-color: var(--primary-green); color: white; }
.btn-green:hover { background-color: var(--dark-green); transform: translateY(-2px); }
.btn-blue { background-color: var(--action-blue); color: white; width: 100%; font-size: 1.1rem; padding: 15px; }
.btn-blue:hover { background-color: #0056b3; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3); }
.btn-outline { border: 2px solid #ddd; background: transparent; color: #555; }
.btn-outline:hover { border-color: #333; color: #333; }
/* Card Style */
.card { background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.05); transition: transform 0.3s; }
.card:hover { transform: translateY(-10px); }
.card img { border-radius: 0; height: 220px; width: 100%; object-fit: cover; }
.card-body { padding: 25px; text-align: center; }
.card h3 { color: var(--dark-green); margin-bottom: 10px; font-size: 1.2rem; }
/* --- 4. SLIDER STYLES --- */
.slider-container { position: relative; border-radius: 15px; overflow: hidden; margin-bottom: 15px; }
.main-img { width: 100%; height: 400px; object-fit: cover; transition: 0.3s; }
.thumbs { display: flex; gap: 10px; overflow-x: auto; }
.thumb { width: 80px; height: 60px; object-fit: cover; border-radius: 10px; cursor: pointer; opacity: 0.6; transition: 0.3s; border: 2px solid transparent; }
.thumb.active { opacity: 1; border-color: var(--action-blue); }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: white; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.2); font-size: 1.2rem; display: flex; align-items: center; justify-content: center; color: var(--text-dark); z-index: 10; }
.prev { left: 10px; } .next { right: 10px; }
/* --- 5. DONATION WIDGET STYLES --- */
.donation-widget { background: #f8f9fa; padding: 30px; border-radius: 15px; border: 1px solid #eee; }
.input-group { margin-bottom: 20px; }
.input-label { display: block; font-weight: 700; margin-bottom: 10px; color: #555; }
.custom-select { width: 100%; padding: 15px; border-radius: 10px; border: 1px solid #ddd; font-size: 1rem; outline: none; background: white; }
.amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 15px; }
.amt-btn { padding: 12px; border: 1px solid #ddd; background: white; border-radius: 8px; cursor: pointer; font-weight: 600; transition: 0.2s; text-align: center; }
.amt-btn:hover { border-color: var(--action-blue); color: var(--action-blue); }
.amt-btn.selected { background: var(--action-blue); color: white; border-color: var(--action-blue); }
.custom-input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; margin-top: 10px; display: none; }
/* --- 6. CART & MODALS --- */
.cart-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 3000; display: none; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.cart-overlay.active { display: flex; }
.cart-box { background: white; width: 90%; max-width: 400px; border-radius: 25px; padding: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
.cart-item { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid #eee; }
.success-banner { background: #d4edda; color: #155724; padding: 10px; border-radius: 10px; margin-bottom: 15px; display: none; text-align: center; }
/* Mobile */
@media (max-width: 900px) {
.product-grid { grid-template-columns: 1fr; padding: 20px; }
.grid-3 { grid-template-columns: 1fr; }
.main-img { height: 250px; }
}
</style>
</head>
<body>
<?php include 'header.php'; ?>
<section class="section container">
<div class="product-grid">
<div>
<div class="slider-container">
<button class="slider-btn prev" onclick="moveSlide(-1)">‹</button>
<img id="mainImage" src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?q=80&w=800" class="main-img">
<button class="slider-btn next" onclick="moveSlide(1)">›</button>
</div>
<div class="thumbs">
<img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?q=80&w=200" class="thumb active" onclick="setSlide(0, this)">
<img src="https://images.unsplash.com/photo-1594708767771-a7502209ff51?q=80&w=200" class="thumb" onclick="setSlide(1, this)">
<img src="https://images.unsplash.com/photo-1532629345422-7515f4d16b5b?q=80&w=200" class="thumb" onclick="setSlide(2, this)">
</div>
</div>
<div>
<h4 style="color: var(--primary-green); font-weight: 700; text-transform: uppercase;">Urgent Appeal</h4>
<h1 style="font-size: 2.5rem; font-weight: 800; color: #2c3e50; line-height: 1.2; margin-bottom: 20px;">Food is a Right,<br>Not a Privilege.</h1>
<div style="color: #555; line-height: 1.7; margin-bottom: 30px;">
<p style="margin-bottom: 15px;">Every 10 seconds, a child dies from malnutrition. This isn’t just a number — it’s a preventable tragedy.</p>
<p><strong>Your Impact:</strong> We deliver nutritious food packs, hot meals, and sustainable agricultural support to families in crisis zones including Gaza, Yemen, and East Africa.</p>
</div>
<div class="donation-widget">
<div class="input-group">
<label class="input-label">I want to support:</label>
<select id="p-type" class="custom-select">
<option value="Food Pack">Emergency Food Pack (£50)</option>
<option value="Hot Meals">Provide Hot Meals (£100)</option>
<option value="Family Survival">Family Survival Kit (£250)</option>
<option value="General Food">General Food Fund</option>
</select>
</div>
<div class="input-group">
<label class="input-label">Choose Amount:</label>
<div class="amount-grid">
<div class="amt-btn selected" onclick="selectAmount(50, this)">£50</div>
<div class="amt-btn" onclick="selectAmount(100, this)">£100</div>
<div class="amt-btn" onclick="selectAmount(250, this)">£250</div>
<div class="amt-btn" onclick="selectAmount(500, this)">£500</div>
<div class="amt-btn" onclick="selectAmount(1000, this)">£1000</div>
<div class="amt-btn" onclick="showCustomInput(this)">Other</div>
</div>
<input type="number" id="custom-amt" class="custom-input" placeholder="Enter amount">
</div>
<div class="input-group">
<label class="input-label">Frequency:</label>
<select id="p-freq" class="custom-select">
<option value="One-Off">One-Off Donation</option>
<option value="Monthly">Monthly Donation</option>
</select>
</div>
<button class="btn btn-blue" onclick="addFoodToCart()">
<i class="fas fa-heart" style="margin-right: 8px;"></i> Donate Now
</button>
<p style="text-align: center; font-size: 0.8rem; color: #999; margin-top: 15px;">
<i class="fas fa-lock"></i> Secure SSL Payment
</p>
</div>
</div>
</div>
</section>
<section class="section container">
<div class="text-center" style="margin-bottom: 40px;">
<h2 class="section-title">Other Ways to Help</h2>
</div>
<div class="grid-3">
<div class="card">
<img src="https://images.unsplash.com/photo-1594708767771-a7502209ff51?q=80&w=500">
<div class="card-body">
<h3>Water Crisis</h3>
<p>Clean water is life. Build a well today.</p>
<button class="btn btn-green" onclick="quickAdd('Water Project', 100)">Donate £100</button>
</div>
</div>
<div class="card">
<img src="https://plus.unsplash.com/premium_photo-1663100722417-6e36673fe0ed?q=80&w=500">
<div class="card-body">
<h3>Zakat Fund</h3>
<p>Fulfil your obligation. We distribute 100%.</p>
<button class="btn btn-green" onclick="quickAdd('Zakat', 100)">Donate £100</button>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?q=80&w=500">
<div class="card-body">
<h3>Orphan Care</h3>
<p>Sponsor a child and change their future.</p>
<button class="btn btn-green" onclick="quickAdd('Orphan Sponsorship', 30)">Donate £30</button>
</div>
</div>
</div>
</section>
<?php include ("footer.php") ?>
<div id="cart-overlay" class="cart-overlay">
<div class="cart-box">
<div class="cart-header">
<h3>Donation Cart</h3>
<i class="fas fa-times" onclick="toggleCart()" style="cursor: pointer; font-size: 1.5rem; color: #999;"></i>
</div>
<div id="success-banner" class="success-banner">Added to Basket!</div>
<div id="cart-items"></div>
<div class="cart-total">
<span>Total</span>
<span id="cart-total-display">£0.00</span>
</div>
<button class="btn btn-blue" style="border-radius: 50px; margin-bottom: 10px;" onclick="goToCheckout()">Proceed to Checkout</button>
<button class="btn btn-outline" style="width: 100%; border-radius: 50px;" onclick="toggleCart()">Continue Browsing</button>
</div>
</div>
<script>
// --- DATA & STATE ---
let cart = <?php echo json_encode($_SESSION['cart']); ?>;
let selectedAmount = 50;
const symbol = '£';
// --- SLIDER LOGIC ---
const images = [
"https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?q=80&w=800",
"https://images.unsplash.com/photo-1594708767771-a7502209ff51?q=80&w=800",
"https://images.unsplash.com/photo-1532629345422-7515f4d16b5b?q=80&w=800"
];
let currentSlide = 0;
function setSlide(index, thumb) {
currentSlide = index;
document.getElementById('mainImage').src = images[currentSlide];
// Update thumbs
document.querySelectorAll('.thumb').forEach(t => t.classList.remove('active'));
if(thumb) thumb.classList.add('active');
else document.querySelectorAll('.thumb')[index].classList.add('active');
}
function moveSlide(dir) {
currentSlide = (currentSlide + dir + images.length) % images.length;
setSlide(currentSlide, null);
}
// --- DONATION WIDGET LOGIC ---
function selectAmount(amt, btn) {
selectedAmount = amt;
document.getElementById('custom-amt').style.display = 'none';
document.querySelectorAll('.amt-btn').forEach(b => b.classList.remove('selected'));
btn.classList.add('selected');
}
function showCustomInput(btn) {
document.getElementById('custom-amt').style.display = 'block';
document.querySelectorAll('.amt-btn').forEach(b => b.classList.remove('selected'));
btn.classList.add('selected');
selectedAmount = 0; // Reset so we read input later
}
function addFoodToCart() {
const cause = document.getElementById('p-type').value;
const freq = document.getElementById('p-freq').value;
// Determine amount
let amt = selectedAmount;
if(amt === 0) {
const customVal = document.getElementById('custom-amt').value;
amt = parseFloat(customVal);
if(!amt || amt <= 0) return alert("Please enter a valid amount");
}
addToCart(cause, freq, amt);
}
function quickAdd(cause, amt) {
addToCart(cause, "One-Off", amt);
}
// --- CART LOGIC (Unified) ---
function addToCart(cause, freq, amt) {
cart.push({cause, freq, amt});
document.getElementById('success-banner').style.display = 'block';
renderCart();
document.getElementById('cart-overlay').classList.add('active');
}
function toggleCart() {
document.getElementById('cart-overlay').classList.toggle('active');
document.getElementById('success-banner').style.display = 'none';
}
function renderCart() {
const container = document.getElementById('cart-items');
const totalDisplay = document.getElementById('cart-total-display');
container.innerHTML = '';
let total = 0;
if (cart.length === 0) {
container.innerHTML = '<p style="text-align: center; color: #999; padding: 20px;">Cart is empty.</p>';
} else {
cart.forEach((item, index) => {
total += item.amt;
container.innerHTML += `
<div class="cart-item">
<div>
<div style="font-weight: bold; color: #333;">${item.cause}</div>
<div style="font-size: 0.8rem; color: #777;">${item.freq}</div>
</div>
<div style="text-align: right;">
<div style="color: var(--primary-green); font-weight: bold;">${symbol}${item.amt.toFixed(2)}</div>
<div onclick="removeItem(${index})" style="font-size: 0.8rem; color: red; cursor: pointer; margin-top: 5px;">remove</div>
</div>
</div>
`;
});
}
totalDisplay.innerText = symbol + total.toFixed(2);
}
function removeItem(index) {
cart.splice(index, 1);
renderCart();
}
function goToCheckout() {
if (cart.length === 0) return alert("Your cart is empty.");
// Create hidden form to POST data
const form = document.createElement('form');
form.method = 'POST';
form.action = 'checkout.php';
const input = document.createElement('input');
input.type = 'hidden';
input.name = 'cart_data';
input.value = JSON.stringify(cart);
form.appendChild(input);
// Add currency symbol
const inputCur = document.createElement('input');
inputCur.type = 'hidden';
inputCur.name = 'currency_symbol';
inputCur.value = symbol;
form.appendChild(inputCur);
document.body.appendChild(form);
form.submit();
}
</script>
</body>
</html>
b IDATxytVսϓ22 A@IR:hCiZ[v*E:WũZA ^dQeQ @ !jZ'>gsV仿$|?g)&x-E