Skip to content

Instantly share code, notes, and snippets.

@thinkphp

thinkphp/review-shipping.html

Created August 3, 2025 17:27
Show Gist options
  • Save thinkphp/c13b394bb2798ca10c3e229333086e4d to your computer and use it in GitHub Desktop.
Save thinkphp/c13b394bb2798ca10c3e229333086e4d to your computer and use it in GitHub Desktop.
Download ZIP
review-shipping.html
Raw
review-shipping.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Review Your Order</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
overflow: hidden;
animation: slideUp 0.6s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
text-align: center;
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
font-weight: 300;
}
.header p {
opacity: 0.9;
font-size: 1.1rem;
}
.progress-bar {
height: 4px;
background: #e9ecef;
margin-bottom: 30px;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
width: 90%;
transition: width 0.3s ease;
}
.content {
padding: 40px;
display: grid;
grid-template-columns: 1fr 350px;
gap: 40px;
}
.main-content {
display: flex;
flex-direction: column;
gap: 30px;
}
.section {
background: #f8f9fa;
border-radius: 15px;
padding: 25px;
border: 2px solid #e9ecef;
transition: all 0.3s ease;
}
.section:hover {
border-color: #667eea;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.1);
}
.section-title {
font-size: 1.3rem;
font-weight: 600;
color: #333;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.cart-item {
display: flex;
gap: 20px;
padding: 20px;
background: white;
border-radius: 12px;
border: 1px solid #e9ecef;
margin-bottom: 15px;
transition: all 0.3s ease;
}
.cart-item:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.item-image {
width: 80px;
height: 80px;
background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
flex-shrink: 0;
}
.item-details {
flex: 1;
}
.item-name {
font-weight: 600;
color: #333;
margin-bottom: 5px;
}
.item-specs {
color: #666;
font-size: 0.9rem;
margin-bottom: 10px;
}
.item-price {
font-size: 1.2rem;
font-weight: 600;
color: #667eea;
}
.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.info-item {
display: flex;
flex-direction: column;
}
.info-label {
font-size: 0.85rem;
color: #666;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.info-value {
font-weight: 600;
color: #333;
}
.sidebar {
display: flex;
flex-direction: column;
gap: 25px;
}
.order-summary {
background: #f8f9fa;
border-radius: 15px;
padding: 25px;
border: 2px solid #e9ecef;
position: sticky;
top: 20px;
}
.summary-title {
font-size: 1.3rem;
font-weight: 600;
color: #333;
margin-bottom: 20px;
text-align: center;
}
.summary-row {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #e9ecef;
}
.summary-row:last-child {
border-bottom: none;
margin-bottom: 0;
}
.summary-row.total {
font-size: 1.2rem;
font-weight: 600;
color: #333;
border-top: 2px solid #667eea;
padding-top: 15px;
margin-top: 15px;
}
.edit-btn {
color: #667eea;
text-decoration: none;
font-weight: 600;
padding: 5px 10px;
border-radius: 6px;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.edit-btn:hover {
background: #667eea;
color: white;
}
.button-group {
display: flex;
gap: 15px;
margin-top: 30px;
}
.btn {
flex: 1;
padding: 18px;
border: none;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
text-decoration: none;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover {
background: #5a6268;
transform: translateY(-2px);
}
.security-info {
background: #e8f5e8;
border: 1px solid #c3e6cb;
border-radius: 10px;
padding: 15px;
margin-top: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.security-info .icon {
color: #28a745;
font-size: 1.5rem;
}
.security-text {
font-size: 0.9rem;
color: #155724;
}
@media (max-width: 768px) {
.content {
grid-template-columns: 1fr;
gap: 30px;
padding: 25px;
}
.container {
margin: 10px;
border-radius: 15px;
}
.header {
padding: 25px;
}
.header h1 {
font-size: 2rem;
}
.cart-item {
flex-direction: column;
text-align: center;
}
.item-image {
align-self: center;
}
.info-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.button-group {
flex-direction: column;
}
}
.delivery-date {
background: #e3f2fd;
border: 1px solid #bbdefb;
border-radius: 10px;
padding: 15px;
margin-top: 15px;
text-align: center;
}
.delivery-date .date {
font-weight: 600;
color: #1976d2;
font-size: 1.1rem;
}
.terms-checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 20px;
padding: 15px;
background: #fff3cd;
border: 1px solid #ffeaa7;
border-radius: 10px;
}
.terms-checkbox input[type="checkbox"] {
margin-top: 2px;
width: 18px;
height: 18px;
accent-color: #667eea;
}
.terms-text {
font-size: 0.9rem;
color: #856404;
line-height: 1.4;
}
.terms-text a {
color: #667eea;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🎨 Review Your Order</h1>
<p>Please verify all details before proceeding to payment</p>
</div>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
<div class="content">
<div class="main-content">
<!-- Cart Items Section -->
<div class="section">
<div class="section-title">
🛒 Your Artworks
<a href="cart.php" class="edit-btn">Edit Cart</a>
</div>
<div class="cart-item">
<div class="item-image">🖼️</div>
<div class="item-details">
<div class="item-name">Sunset Over Mountains</div>
<div class="item-specs">Canvas Print • 60x40 cm • Framed</div>
<div class="item-price">€125.00</div>
</div>
</div>
<div class="cart-item">
<div class="item-image">🎨</div>
<div class="item-details">
<div class="item-name">Abstract Blue Waves</div>
<div class="item-specs">Canvas Print • 80x60 cm • Unframed</div>
<div class="item-price">€89.00</div>
</div>
</div>
</div>
<!-- Shipping Information -->
<div class="section">
<div class="section-title">
🚚 Delivery Information
<a href="shipping.php" class="edit-btn">Edit Address</a>
</div>
<div class="info-grid">
<div class="info-item">
<div class="info-label">Full Name</div>
<div class="info-value" id="customerName">John Smith</div>
</div>
<div class="info-item">
<div class="info-label">Email</div>
<div class="info-value" id="customerEmail">[email protected]</div>
</div>
<div class="info-item">
<div class="info-label">Phone</div>
<div class="info-value" id="customerPhone">+40 123 456 789</div>
</div>
<div class="info-item">
<div class="info-label">Country</div>
<div class="info-value" id="customerCountry">Romania</div>
</div>
</div>
<div class="info-grid" style="margin-top: 20px;">
<div class="info-item">
<div class="info-label">Address</div>
<div class="info-value" id="customerAddress">Strada Victoriei 15, Bucharest 010101</div>
</div>
<div class="info-item">
<div class="info-label">Delivery Option</div>
<div class="info-value" id="deliveryOption">Express (2-3 days)</div>
</div>
</div>
<div class="delivery-date">
<div>📅 Estimated Delivery Date</div>
<div class="date" id="estimatedDelivery">Monday, August 7, 2025</div>
</div>
</div>
<!-- Special Instructions -->
<div class="section">
<div class="section-title">📝 Special Instructions</div>
<div id="specialInstructions" style="color: #666; font-style: italic;">
Please handle with extra care. Weekdays delivery preferred, doorman available.
</div>
</div>
</div>
<!-- Sidebar with Order Summary -->
<div class="sidebar">
<div class="order-summary">
<div class="summary-title">💰 Order Summary</div>
<div class="summary-row">
<span>Subtotal (2 items)</span>
<span>€214.00</span>
</div>
<div class="summary-row">
<span>Express Shipping</span>
<span>€15.00</span>
</div>
<div class="summary-row">
<span>Premium Packaging</span>
<span>€10.00</span>
</div>
<div class="summary-row">
<span>Tax (VAT 19%)</span>
<span>€45.41</span>
</div>
<div class="summary-row total">
<span>Total</span>
<span>€284.41</span>
</div>
<div class="security-info">
<div class="icon">🔒</div>
<div class="security-text">
<strong>Secure Payment</strong><br>
Your payment is protected by Stripe
</div>
</div>
</div>
<!-- Terms and Conditions -->
<div class="terms-checkbox">
<input type="checkbox" id="acceptTerms" required>
<label for="acceptTerms" class="terms-text">
I agree to the <a href="terms.php" target="_blank">Terms & Conditions</a>
and <a href="privacy.php" target="_blank">Privacy Policy</a>.
I understand that artworks are carefully packaged and shipping times may vary.
</label>
</div>
<div class="button-group">
<a href="shipping.php" class="btn btn-secondary">
← Back to Shipping
</a>
<button id="proceedToPayment" class="btn btn-primary" disabled>
🔒 Proceed to Payment
</button>
</div>
</div>
</div>
</div>
<script>
// Simulate loading data from previous form or session
document.addEventListener('DOMContentLoaded', function() {
// This would normally come from URL parameters, session, or localStorage
loadOrderData();
// Enable/disable payment button based on terms acceptance
const termsCheckbox = document.getElementById('acceptTerms');
const paymentButton = document.getElementById('proceedToPayment');
termsCheckbox.addEventListener('change', function() {
paymentButton.disabled = !this.checked;
if (this.checked) {
paymentButton.style.opacity = '1';
paymentButton.style.cursor = 'pointer';
} else {
paymentButton.style.opacity = '0.6';
paymentButton.style.cursor = 'not-allowed';
}
});
// Handle payment button click
paymentButton.addEventListener('click', function() {
if (termsCheckbox.checked) {
proceedToStripePayment();
}
});
});
function loadOrderData() {
// Simulate loading data from localStorage or session
const savedShippingData = localStorage.getItem('shippingData');
if (savedShippingData) {
const data = JSON.parse(savedShippingData);
// Update customer information
document.getElementById('customerName').textContent =
`${data.firstName || 'John'} ${data.lastName || 'Smith'}`;
document.getElementById('customerEmail').textContent =
data.email || '[email protected]';
document.getElementById('customerPhone').textContent =
data.phone || '+40 123 456 789';
document.getElementById('customerCountry').textContent =
getCountryName(data.country) || 'Romania';
// Update address
const address = `${data.address || 'Strada Victoriei 15'}, ${data.city || 'Bucharest'} ${data.postalCode || '010101'}`;
document.getElementById('customerAddress').textContent = address;
// Update special instructions
const instructions = data.notes || 'Please handle with extra care. Weekdays delivery preferred, doorman available.';
document.getElementById('specialInstructions').textContent = instructions;
}
// Calculate and update estimated delivery date
updateEstimatedDelivery();
}
function getCountryName(countryCode) {
const countries = {
'RO': 'Romania',
'DE': 'Germany',
'FR': 'France',
'IT': 'Italy',
'ES': 'Spain',
'GB': 'United Kingdom',
'US': 'United States',
'CA': 'Canada'
// Add more as needed
};
return countries[countryCode] || countryCode;
}
function updateEstimatedDelivery() {
const today = new Date();
const deliveryDays = 3; // Express shipping
const deliveryDate = new Date(today.getTime() + (deliveryDays * 24 * 60 * 60 * 1000));
// Skip weekends
while (deliveryDate.getDay() === 0 || deliveryDate.getDay() === 6) {
deliveryDate.setDate(deliveryDate.getDate() + 1);
}
const options = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
};
document.getElementById('estimatedDelivery').textContent =
deliveryDate.toLocaleDateString('en-US', options);
}
function proceedToStripePayment() {
// Show loading state
const button = document.getElementById('proceedToPayment');
const originalText = button.innerHTML;
button.innerHTML = '⏳ Creating Payment Session...';
button.disabled = true;
// Simulate API call to create Stripe session
setTimeout(() => {
// This would be the actual API call to your backend
createStripeCheckoutSession();
}, 1500);
}
function createStripeCheckoutSession() {
// Collect all order data
const orderData = {
// Customer info
customer: {
name: document.getElementById('customerName').textContent,
email: document.getElementById('customerEmail').textContent,
phone: document.getElementById('customerPhone').textContent
},
// Shipping info
shipping: {
address: document.getElementById('customerAddress').textContent,
country: document.getElementById('customerCountry').textContent,
instructions: document.getElementById('specialInstructions').textContent
},
// Order totals
totals: {
subtotal: 214.00,
shipping: 15.00,
packaging: 10.00,
tax: 45.41,
total: 284.41
},
// Items (this would come from cart)
items: [
{
name: 'Sunset Over Mountains',
price: 125.00,
size: '60x40 cm',
type: 'Canvas Print - Framed'
},
{
name: 'Abstract Blue Waves',
price: 89.00,
size: '80x60 cm',
type: 'Canvas Print - Unframed'
}
]
};
// In real implementation, send this to your PHP backend
console.log('Order data to send to Stripe:', orderData);
// Simulate successful session creation
const simulatedStripeUrl = 'https://checkout.stripe.com/pay/cs_test_example#fidkdWxOYHwnPyd1blppbHNgXCcpJ2N3amhWaHNgfTB8bzFIR0ZkXUpKYDI3YUczNFF%2FJztdT35EJzJxMjRjNjVnbTVcbFBdZGp8N2tWPE5XdGhJUXdTVVp8RTRsfTxmbHZMRCcpJ2hsYXYnP34nYnBsYSc%2FJ21xcXV2Jz8nY3NqMGppKStUMHA9cSEneCUl';
// Redirect to Stripe Checkout
window.location.href = simulatedStripeUrl;
// In real implementation:
// fetch('create_stripe_session.php', {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify(orderData)
// })
// .then(response => response.json())
// .then(data => {
// if (data.checkout_url) {
// window.location.href = data.checkout_url;
// } else {
// throw new Error('Failed to create checkout session');
// }
// })
// .catch(error => {
// console.error('Error:', error);
// const button = document.getElementById('proceedToPayment');
// button.innerHTML = '❌ Payment Error - Try Again';
// button.disabled = false;
// });
}
// Smooth animations on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Apply initial styles and observe sections
document.querySelectorAll('.section').forEach((section, index) => {
section.style.opacity = '0';
section.style.transform = 'translateY(30px)';
section.style.transition = `all 0.6s ease ${index * 0.1}s`;
observer.observe(section);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment