CSS modularization Phase 2: account, cart, checkout

Extract account/cart/checkout styles into dedicated CSS files; remove inline styles and orphaned style blocks from HTML. Wire $extraHead on all account pages, cart.php, and checkout.php.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-15 17:51:57 +00:00
parent 771e1a15b1
commit 5637b6d7f5
14 changed files with 556 additions and 345 deletions
+24 -25
View File
@@ -158,6 +158,7 @@ $metaDescription = 'Complete your coffee order with secure checkout.';
$canonicalUrl = 'https://tomsjavajive.com/checkout.php';
$metaRobots = "noindex, nofollow";
$suppressSchema = true;
$extraHead = '<link rel="stylesheet" href="/assets/css/checkout.css?v=' . filemtime(__DIR__ . '/assets/css/checkout.css') . '">';
require_once __DIR__ . '/includes/header.php';
?>
@@ -166,7 +167,7 @@ require_once __DIR__ . '/includes/header.php';
<h1 style="margin-bottom: 2rem;">Checkout</h1>
<form method="POST" action="" id="checkout-form">
<div style="display: grid; grid-template-columns: 1fr 400px; gap: 2rem; align-items: start;">
<div class="checkout-layout">
<!-- Customer & Shipping Info -->
<div>
@@ -231,7 +232,7 @@ require_once __DIR__ . '/includes/header.php';
<?php endif; ?>
</div>
<div style="display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem;">
<div class="address-grid">
<div class="form-group">
<label class="form-label">City *</label>
<input type="text" name="city" class="form-input"
@@ -275,62 +276,60 @@ require_once __DIR__ . '/includes/header.php';
</div>
<!-- Order Summary -->
<div class="card" style="position: sticky; top: 100px;">
<div class="card checkout-summary">
<div class="card-header">
<h3 style="margin: 0;">Order Summary</h3>
</div>
<div class="card-body">
<!-- Cart Items -->
<div style="max-height: 250px; overflow-y: auto; margin-bottom: 1rem;">
<div class="checkout-items-preview">
<?php foreach ($cartItems as $item): ?>
<div style="display: flex; gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border);">
<img src="<?= htmlspecialchars($item['image']) ?>" alt=""
style="width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-md);">
<div style="flex: 1;">
<p style="font-weight: 500; margin-bottom: 0.25rem;"><?= htmlspecialchars($item['name']) ?></p>
<p class="text-muted" style="font-size: 0.875rem;">
<?= formatCurrency($item['unit_price']) ?> x <?= $item['quantity'] ?>
</p>
<div class="checkout-item">
<img src="<?= htmlspecialchars($item['image']) ?>" alt=""
class="checkout-item-img">
<div class="checkout-item-info">
<p><?= htmlspecialchars($item['name']) ?></p>
<small><?= formatCurrency($item['unit_price']) ?> x <?= $item['quantity'] ?></small>
</div>
<div style="text-align: right;">
<strong><?= formatCurrency($item['total']) ?></strong>
<div class="checkout-item-total">
<?= formatCurrency($item['total']) ?>
</div>
</div>
<?php endforeach; ?>
</div>
<!-- Totals -->
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
<div class="checkout-summary-row">
<span>Subtotal</span>
<span><?= formatCurrency($subtotal) ?></span>
</div>
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
<div class="checkout-summary-row">
<span>Shipping</span>
<span>
<?php if ($shippingCost == 0): ?>
<span style="color: var(--color-success);">FREE</span>
<span class="text-success">FREE</span>
<?php else: ?>
<?= formatCurrency($shippingCost) ?>
<?php endif; ?>
</span>
</div>
<hr style="margin: 1rem 0;">
<div style="display: flex; justify-content: space-between; font-size: 1.25rem; font-weight: 600;">
<div class="checkout-summary-total">
<span>Total</span>
<span><?= formatCurrency($total) ?></span>
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block mt-2">
Continue to Payment
</button>
<a href="/cart.php" class="btn btn-secondary btn-block mt-1">
<i class="fas fa-arrow-left"></i> Back to Cart
</a>
<p class="text-muted text-center mt-2" style="font-size: 0.75rem;">
<p class="secure-badge">
<i class="fas fa-lock"></i> Secure checkout powered by Stripe
</p>
</div>