File size: 4,242 Bytes
974862a |
1 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Quantum Pay - Payment Success</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <style> body { margin: 0; font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #f8f9ff 0%, #eef2ff 100%); color: #1a1a2e; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 2rem 1rem; } .container { max-width: 900px; width: 100%; background: white; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.08); overflow: hidden; } header { background: #0f172a; color: white; padding: 2rem; text-align: center; } header h1 { margin: 0; font-size: 2rem; font-weight: 700; } .success-badge { background: #10b981; color: white; font-weight: 600; padding: 0.5rem 1rem; border-radius: 999px; display: inline-block; margin-top: 1rem; } main { padding: 3rem 2rem; } .receipt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; } .section { background: #f8fafc; border-radius: 12px; padding: 1.5rem; } .section h3 { margin-top: 0; color: #0f172a; border-bottom: 2px solid #e2e8f0; padding-bottom: 0.5rem; } .item-row { display: flex; justify-content: space-between; margin: 1rem 0; font-size: 1.1rem; } .total { font-size: 1.4rem; font-weight: 700; border-top: 2px solid #0f172a; padding-top: 1rem; margin-top: 1rem; } .quantum-info { text-align: center; margin: 2rem 0; font-size: 0.95rem; color: #64748b; } .quantum-info strong { color: #0f172a; } footer { text-align: center; padding: 1.5rem; background: #f1f5f9; font-size: 0.9rem; color: #64748b; } .logo { font-size: 2rem; margin-bottom: 0.5rem; } </style> </head> <body> <div class="container"> <header> <div class="logo">🔒 Quantum Pay</div> <h1>Payment Successful</h1> <div class="success-badge">Transaction Complete • Quantum-Secured</div> </header> <main> <div class="receipt-grid"> <div class="section"> <h3>Order Details</h3> <div class="item-row"> <span>Order ID</span> <strong>QP-2025-12010-75462954</strong> </div> <div class="item-row"> <span>Date</span> <strong>December 10, 2025</strong> </div> <div class="item-row"> <span>Pickup Location</span> <strong>Epicenter Cycling - Santa Cruz<br>1730 Mission St, Santa Cruz, CA 95060</strong> </div> </div> <div class="section"> <h3>Item Purchased</h3> <div style="display:flex; align-items:center; gap:1rem;"> <img src="https://www.trekbikes.com/us/en_US/assets/images/bikes/mountain-bikes/electric-mountain-bikes/slash/slash-9.9-dark-star-purple-flip.jpg" alt="Trek Slash+ 9.9" style="width:120px; border-radius:8px;"> <div> <strong>Trek Slash+ 9.9</strong><br> Electric Mountain Bike<br> Color: Dark Star / Purple Flip<br> Size: M<br> <span style="color:#10b981; font-weight:600;">$12,499.99</span> </div> </div> </div> </div> <div class="section"> <h3>Payment Summary</h3> <div class="item-row"> <span>Subtotal</span> <strong>$24,999.98</strong> </div> <div class="item-row"> <span>Shipping</span> <strong>Free (In-store Pickup)</strong> </div> <div class="item-row"> <span>Sales Tax (CA)</span> <strong>Calculated at checkout</strong> </div> <div class="total |