File: /home/getdvgwc/chilination.getdripped.shop/checkout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Checkout — Chilination</title>
<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=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" />
<style>
.checkout-wrap {
min-height: 100vh;
padding: 7rem 5% 4rem;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 4rem;
max-width: 1100px;
margin: 0 auto;
}
.checkout-form { padding: 2rem; background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--border); }
.checkout-form h2 { font-family: var(--font-display); font-size: 2rem; text-transform: uppercase; margin-bottom: 1.5rem; letter-spacing: 0.05em; }
.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; font-size: 0.78rem; font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; }
.form-group input, .form-group select, .form-group textarea {
width: 100%;
background: var(--bg2);
border: 1px solid var(--border);
color: var(--text);
padding: 0.9rem 1rem;
border-radius: 8px;
font-family: var(--font-body);
font-size: 0.9rem;
transition: border-color var(--transition);
outline: none;
}
.form-group input:focus, .form-group select:focus { border-color: var(--red); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.payment-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 1.5rem; }
.payment-method {
border: 2px solid var(--border);
border-radius: var(--radius);
padding: 1rem;
cursor: pointer;
transition: all var(--transition);
display: flex; align-items: center; gap: 0.6rem;
font-size: 0.85rem;
font-weight: 600;
}
.payment-method.active { border-color: var(--red); background: rgba(153,0,0,0.08); }
.payment-method:hover { border-color: rgba(255,255,255,0.2); }
.payment-icon { font-size: 1.4rem; }
.checkout-summary {
position: sticky;
top: 100px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem;
height: fit-content;
}
.checkout-summary h3 { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.5rem; }
.order-line { display: flex; justify-content: space-between; padding: 0.7rem 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.order-line:last-child { border-bottom: none; }
.order-total { display: flex; justify-content: space-between; padding-top: 1rem; margin-top: 0.5rem; border-top: 2px solid var(--border); font-weight: 700; font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.03em; }
@media (max-width: 768px) {
.checkout-wrap { grid-template-columns: 1fr; }
.checkout-summary { position: static; }
}
</style>
<script type="module" crossorigin src="/assets/checkout-DO-uRGv2.js"></script>
<link rel="modulepreload" crossorigin href="/assets/main-CMlGU-Hg.js">
<link rel="stylesheet" crossorigin href="/assets/main-uIGfidSs.css">
</head>
<body class="dark-mode" data-page="checkout">
<div id="loader" class="loader">
<div class="loader__logo"><img src="/assets/logo.png" alt="Chilination" class="loader__logo-img" /></div>
<div class="loader__bar-track"><div class="loader__bar" id="loaderBar" style="width:100%"></div></div>
<div class="loader__pct" id="loaderPct">100%</div>
<div class="loader__tag">Checkout</div>
</div>
<nav class="navbar scrolled" id="navbar">
<a href="/" class="nav-logo"><img src="/assets/logo.png" alt="Chilination" class="nav-logo__img" /></a>
<div class="nav-actions">
<a href="/shop.html" class="btn btn-ghost" style="padding:0.5rem 1rem;font-size:0.8rem;">← Back to Shop</a>
</div>
</nav>
<div class="checkout-wrap">
<!-- Form -->
<div class="checkout-form">
<h2>Your Details</h2>
<div class="form-row">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" id="firstName" placeholder="Amara" />
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" id="lastName" placeholder="Kariuki" />
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" placeholder="you@example.com" />
</div>
<div class="form-group">
<label for="phone">Phone (M-Pesa)</label>
<input type="tel" id="phone" placeholder="0701 678 568" />
</div>
<div class="form-group">
<label for="address">Delivery Address</label>
<input type="text" id="address" placeholder="Street, Building, Apartment" />
</div>
<div class="form-row">
<div class="form-group">
<label for="city">City</label>
<input type="text" id="city" placeholder="Nairobi" />
</div>
<div class="form-group">
<label for="area">Area / Estate</label>
<input type="text" id="area" placeholder="Westlands" />
</div>
</div>
<h2 style="margin-top:2rem">Payment</h2>
<div class="payment-methods" id="paymentMethods">
<div class="payment-method active" data-method="mpesa" id="pm-mpesa">
<span class="payment-icon">📱</span>
<span>M-Pesa</span>
</div>
<div class="payment-method" data-method="card" id="pm-card">
<span class="payment-icon">💳</span>
<span>Card</span>
</div>
<div class="payment-method" data-method="cash" id="pm-cash">
<span class="payment-icon">💵</span>
<span>Cash on Delivery</span>
</div>
<div class="payment-method" data-method="bank" id="pm-bank">
<span class="payment-icon">🏦</span>
<span>Bank Transfer</span>
</div>
</div>
<!-- M-Pesa Panel -->
<div id="mpesaPanel" class="form-group">
<label>M-Pesa Phone Number</label>
<input type="tel" id="mpesaPhone" placeholder="0701 678 568" />
<p style="font-size:0.78rem; color:var(--text-muted); margin-top:0.5rem; font-family:var(--font-mono);">
You will receive an STK push to confirm payment.
</p>
</div>
<div class="form-group" style="margin-top:1rem">
<label for="notes">Delivery Notes (optional)</label>
<textarea id="notes" rows="2" placeholder="Gate code, landmark, etc."></textarea>
</div>
<button class="btn btn-primary btn-block btn-lg" id="placeOrderBtn" style="margin-top:1.5rem">
Place Order — KSh <span id="orderBtnTotal">0</span>
</button>
<p style="text-align:center; font-size:0.75rem; color:var(--text-faint); margin-top:0.8rem; font-family:var(--font-mono);">
Your order is secure. Zero card fees. Same-day Nairobi delivery.
</p>
</div>
<!-- Summary -->
<div class="checkout-summary" id="checkoutSummary">
<h3>Order Summary</h3>
<div id="summaryItems">
<div style="color:var(--text-muted); font-size:0.88rem;">Your cart is empty.</div>
</div>
<div class="order-total" id="summaryTotal">
<span>Total</span>
<span id="summaryTotalAmt">KSh 0</span>
</div>
<div style="margin-top:1rem; padding:0.8rem; background:rgba(255,204,0,0.08); border:1px solid rgba(255,204,0,0.2); border-radius:8px;">
<p style="font-size:0.78rem; color:var(--yellow); font-family:var(--font-mono); letter-spacing:0.05em;">🚚 FREE delivery on orders over KSh 2,000</p>
</div>
</div>
</div>
</body>
</html>