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>Water Projects - 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 --- */
: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; }
/* Product Layout */
.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 { 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: #f0f7ff; padding: 30px; border-radius: 15px; border: 1px solid #cce5ff; }
.input-group { margin-bottom: 20px; }
.input-label { display: block; font-weight: 700; margin-bottom: 10px; color: #004085; }
.custom-select { width: 100%; padding: 15px; border-radius: 10px; border: 1px solid #b8daff; 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 #b8daff; background: white; border-radius: 8px; cursor: pointer; font-weight: 600; transition: 0.2s; text-align: center; color: #004085; }
.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 #b8daff; border-radius: 8px; margin-top: 10px; display: none; }
/* --- 6. CART OVERLAY --- */
.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; }
.cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.cart-total { display: flex; justify-content: space-between; font-weight: bold; font-size: 1.2rem; margin: 20px 0; border-top: 2px solid #eee; padding-top: 15px; }
@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="img/water1.jpg" class="main-img" onerror="this.src='https://images.unsplash.com/photo-1541252260730-0412e8e2108e?q=80&w=800'">
<button class="slider-btn next" onclick="moveSlide(1)">›</button>
</div>
<div class="thumbs">
<img src="img/water1.jpg" class="thumb active" onclick="setSlide(0, this)" onerror="this.src='https://images.unsplash.com/photo-1541252260730-0412e8e2108e?q=80&w=200'">
<img src="img/water2.jpg" class="thumb" onclick="setSlide(1, this)" onerror="this.src='https://images.unsplash.com/photo-1581242163695-19d0acacd465?q=80&w=200'">
<img src="https://images.unsplash.com/photo-1538300342682-cf57afb97285?q=80&w=200" class="thumb" onclick="setSlide(2, this)">
</div>
</div>
<div>
<h4 style="color: var(--action-blue); font-weight: 700; text-transform: uppercase;">Water for Life</h4>
<h1 style="font-size: 2.5rem; font-weight: 800; color: #2c3e50; line-height: 1.2; margin-bottom: 20px;">Give the Gift of<br>Clean Water.</h1>
<div style="color: #555; line-height: 1.7; margin-bottom: 30px;">
<p style="margin-bottom: 15px;">Over 785 million people do not have access to safe drinking water. Women and children walk miles every day just to carry dirty water home.</p>
<p><strong>The Solution:</strong> Your donation builds wells, installs hand pumps, and provides sanitation systems that transform entire villages.</p>
</div>
<div class="donation-widget">
<div class="input-group">
<label class="input-label">Select Project:</label>
<select id="p-type" class="custom-select">
<option value="Water Hand Pump">Water Hand Pump (£150)</option>
<option value="Deep Water Well">Deep Water Well (£500)</option>
<option value="Solar Water Center">Solar Water Center (£3,000)</option>
<option value="General Water Fund">General Water Fund</option>
</select>
</div>
<div class="input-group">
<label class="input-label">Select Amount:</label>
<div class="amount-grid">
<div class="amt-btn" onclick="selectAmount(50, this)">£50</div>
<div class="amt-btn selected" onclick="selectAmount(150, this)">£150</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="addWaterToCart()">
<i class="fas fa-tint" style="margin-right: 8px;"></i> Donate Water
</button>
<p style="text-align: center; font-size: 0.8rem; color: #666; margin-top: 15px;">
<i class="fas fa-check-circle" style="color: var(--action-blue);"></i> 100% Policy on Wells
</p>
</div>
</div>
</div>
</section>
<section class="section" style="background: white;">
<div class="container text-center">
<h2 class="section-title">The Ripple Effect</h2>
<div class="grid-3">
<div style="padding: 20px;">
<i class="fas fa-heartbeat" style="font-size: 3rem; color: var(--action-blue); margin-bottom: 15px;"></i>
<h3>Better Health</h3>
<p>Reduces waterborne diseases like cholera and typhoid instantly.</p>
</div>
<div style="padding: 20px;">
<i class="fas fa-graduation-cap" style="font-size: 3rem; color: var(--action-blue); margin-bottom: 15px;"></i>
<h3>Education</h3>
<p>Children spend time in school instead of walking miles for water.</p>
</div>
<div style="padding: 20px;">
<i class="fas fa-seedling" style="font-size: 3rem; color: var(--action-blue); margin-bottom: 15px;"></i>
<h3>Agriculture</h3>
<p>Communities can grow crops and feed their livestock.</p>
</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']); ?>;
// Safety check if PHP returns null
if (!Array.isArray(cart)) cart = [];
let selectedAmount = 150;
const symbol = '£';
// --- SLIDER LOGIC ---
// RESTORED LOCAL PATHS HERE
const images = [
"img/water1.jpg",
"img/water2.jpg",
"https://images.unsplash.com/photo-1538300342682-cf57afb97285?q=80&w=800"
];
let currentSlide = 0;
function setSlide(index, thumb) {
currentSlide = index;
document.getElementById('mainImage').src = images[currentSlide];
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 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;
}
function addWaterToCart() {
const cause = document.getElementById('p-type').value;
const freq = document.getElementById('p-freq').value;
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);
}
// --- CART LOGIC ---
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');
// Hide success banner when manually opening
if (!document.getElementById('cart-overlay').classList.contains('active')) {
setTimeout(() => { document.getElementById('success-banner').style.display = 'none'; }, 200);
}
}
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 += parseFloat(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(--action-blue); 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.");
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);
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