442 lines
19 KiB
HTML
442 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Order Confirmation - Project Mycelium</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css" rel="stylesheet">
|
||
<style>
|
||
body {
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.navbar-brand img {
|
||
height: 30px;
|
||
}
|
||
|
||
.success-icon {
|
||
font-size: 4rem;
|
||
color: #28a745;
|
||
}
|
||
|
||
.confirmation-card {
|
||
background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
|
||
border: 2px solid #28a745;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.order-details {
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.next-steps {
|
||
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
|
||
border: 1px solid #2196f3;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.card {
|
||
border: none;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
|
||
border: none;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: linear-gradient(135deg, #0b5ed7 0%, #0a58ca 100%);
|
||
}
|
||
|
||
.breadcrumb {
|
||
background: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.breadcrumb-item + .breadcrumb-item::before {
|
||
content: "›";
|
||
font-weight: bold;
|
||
}
|
||
|
||
.status-badge {
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 20px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.status-confirmed {
|
||
background: #d4edda;
|
||
color: #155724;
|
||
border: 1px solid #c3e6cb;
|
||
}
|
||
|
||
.order-tracking-timeline {
|
||
position: relative;
|
||
}
|
||
|
||
.tracking-step {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 1rem;
|
||
position: relative;
|
||
}
|
||
|
||
.tracking-step:not(:last-child)::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 12px;
|
||
top: 32px;
|
||
width: 2px;
|
||
height: 20px;
|
||
background: #dee2e6;
|
||
}
|
||
|
||
.tracking-step.completed::after {
|
||
background: #28a745;
|
||
}
|
||
|
||
.tracking-step.active::after {
|
||
background: #007bff;
|
||
}
|
||
|
||
.step-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-right: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1;
|
||
background: white;
|
||
}
|
||
|
||
.step-content {
|
||
flex: 1;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Navigation -->
|
||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||
<div class="container">
|
||
<a class="navbar-brand d-flex align-items-center" href="/">
|
||
<img src="/static/images/logo_dark.png" alt="ThreeFold Logo" class="me-2">
|
||
<span>Project Mycelium</span>
|
||
</a>
|
||
<div class="navbar-nav ms-auto">
|
||
<a class="nav-link" href="/marketplace">
|
||
<i class="bi bi-shop me-1"></i>Marketplace
|
||
</a>
|
||
<a class="nav-link" href="/orders">
|
||
<i class="bi bi-list-ul me-1"></i>My Orders
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container py-4">
|
||
|
||
|
||
<!-- Success Message -->
|
||
<div class="row justify-content-center mb-4">
|
||
<div class="col-md-8">
|
||
<div class="confirmation-card p-5 text-center">
|
||
<i class="bi bi-check-circle success-icon mb-3"></i>
|
||
<h1 class="h2 mb-3">Order Confirmed!</h1>
|
||
<p class="lead mb-4">
|
||
Thank you for your order. Your ThreeFold resources are being prepared for deployment.
|
||
</p>
|
||
{% if order %}
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="mb-2">
|
||
<strong>Order Number:</strong>
|
||
</div>
|
||
<div class="h5 text-primary">#{{ order.order_id }}</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="mb-2">
|
||
<strong>Confirmation Code:</strong>
|
||
</div>
|
||
<div class="h5 text-success">{{ order.confirmation_number }}</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<!-- Order Details -->
|
||
<div class="col-lg-8">
|
||
{% if order %}
|
||
<div class="order-details p-4 mb-4">
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<h3><i class="bi bi-receipt me-2"></i>Order Details</h3>
|
||
<span class="status-badge status-confirmed">
|
||
<i class="bi bi-check-circle me-1"></i>{{ order.status }}
|
||
</span>
|
||
</div>
|
||
|
||
<div class="row mb-4">
|
||
<div class="col-md-6">
|
||
<div class="mb-3">
|
||
<strong class="text-muted">Order Date:</strong>
|
||
<div>{{ order.created_at }}</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<strong class="text-muted">Payment Method:</strong>
|
||
<div>{{ order.payment_method }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="mb-3">
|
||
<strong class="text-muted">Total Amount:</strong>
|
||
<div class="h5 text-primary">{{ order.total }}</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<strong class="text-muted">Currency:</strong>
|
||
<div>{{ order.currency }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h5 class="mb-3">Ordered Items</h5>
|
||
{% for item in order.items %}
|
||
<div class="d-flex align-items-center p-3 border rounded mb-3">
|
||
<div class="me-3">
|
||
<div class="bg-light rounded d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
|
||
{% if item.product_category == "compute" %}
|
||
<i class="bi bi-cpu text-primary"></i>
|
||
{% elif item.product_category == "hardware" %}
|
||
<i class="bi bi-hdd-rack text-success"></i>
|
||
{% elif item.product_category == "gateways" %}
|
||
<i class="bi bi-globe text-info"></i>
|
||
{% elif item.product_category == "applications" %}
|
||
<i class="bi bi-app text-warning"></i>
|
||
{% elif item.product_category == "services" %}
|
||
<i class="bi bi-person-workspace text-secondary"></i>
|
||
{% else %}
|
||
<i class="bi bi-box text-muted"></i>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
<div class="flex-grow-1">
|
||
<h6 class="mb-1">{{ item.product_name }}</h6>
|
||
<small class="text-muted">{{ item.provider_name }}</small>
|
||
<div class="mt-1">
|
||
<span class="badge bg-light text-dark">Qty: {{ item.quantity }}</span>
|
||
<span class="badge bg-secondary ms-1">{{ item.product_category|title }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-end">
|
||
<div class="fw-bold">{{ item.unit_price }}</div>
|
||
<small class="text-muted">per unit</small>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- Next Steps -->
|
||
<div class="next-steps p-4">
|
||
<h5 class="mb-3">
|
||
<i class="bi bi-arrow-right-circle me-2"></i>What's Next?
|
||
</h5>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="d-flex mb-3">
|
||
<div class="me-3">
|
||
<i class="bi bi-1-circle fs-4 text-primary"></i>
|
||
</div>
|
||
<div>
|
||
<div class="fw-bold">Processing</div>
|
||
<small class="text-muted">Your order is being processed and resources are being allocated.</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="d-flex mb-3">
|
||
<div class="me-3">
|
||
<i class="bi bi-2-circle fs-4 text-info"></i>
|
||
</div>
|
||
<div>
|
||
<div class="fw-bold">Deployment</div>
|
||
<small class="text-muted">Resources will be deployed to the ThreeFold Grid within 24 hours.</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="d-flex mb-3">
|
||
<div class="me-3">
|
||
<i class="bi bi-3-circle fs-4 text-success"></i>
|
||
</div>
|
||
<div>
|
||
<div class="fw-bold">Access</div>
|
||
<small class="text-muted">You'll receive access credentials and connection details via email.</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="d-flex mb-3">
|
||
<div class="me-3">
|
||
<i class="bi bi-4-circle fs-4 text-warning"></i>
|
||
</div>
|
||
<div>
|
||
<div class="fw-bold">Support</div>
|
||
<small class="text-muted">Our support team is available 24/7 to help with any questions.</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Actions Sidebar -->
|
||
<div class="col-lg-4">
|
||
<div class="card">
|
||
<div class="card-header bg-primary text-white">
|
||
<h5 class="mb-0">
|
||
<i class="bi bi-gear me-2"></i>Quick Actions
|
||
</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="d-grid gap-2">
|
||
<a href="/orders" class="btn btn-primary">
|
||
<i class="bi bi-list-ul me-2"></i>View All Orders
|
||
</a>
|
||
<a href="/marketplace" class="btn btn-outline-primary">
|
||
<i class="bi bi-shop me-2"></i>Continue Shopping
|
||
</a>
|
||
<a href="/dashboard" class="btn btn-outline-secondary">
|
||
<i class="bi bi-speedometer2 me-2"></i>Go to Dashboard
|
||
</a>
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<h6 class="mb-3">Need Help?</h6>
|
||
<div class="d-grid gap-2">
|
||
<a href="/docs" class="btn btn-sm btn-outline-primary">
|
||
<i class="bi bi-book me-1"></i>Docs
|
||
</a>
|
||
<a href="https://threefoldfaq.crisp.help/en/" class="btn btn-sm btn-outline-success" target="_blank">
|
||
<i class="bi bi-chat-dots me-1"></i>Live Chat
|
||
</a>
|
||
<a href="mailto:support@threefold.io" class="btn btn-sm btn-outline-secondary">
|
||
<i class="bi bi-envelope me-1"></i>Email Support
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Order Tracking -->
|
||
<div class="card mt-4">
|
||
<div class="card-header bg-light">
|
||
<h6 class="mb-0">
|
||
<i class="bi bi-truck me-2"></i>Track Your Order
|
||
</h6>
|
||
</div>
|
||
<div class="card-body">
|
||
<p class="small text-muted mb-3">
|
||
You can track the status of your order and deployment progress in real-time.
|
||
</p>
|
||
|
||
<!-- Mock Order Tracking Timeline -->
|
||
{% if order %}
|
||
<div class="order-tracking-timeline mb-3">
|
||
<div class="tracking-step completed">
|
||
<div class="step-icon">
|
||
<i class="bi bi-check-circle-fill text-success"></i>
|
||
</div>
|
||
<div class="step-content">
|
||
<div class="fw-bold">Order Confirmed</div>
|
||
<small class="text-muted">{{ order.created_at }}</small>
|
||
</div>
|
||
</div>
|
||
<div class="tracking-step active">
|
||
<div class="step-icon">
|
||
<i class="bi bi-gear-fill text-primary"></i>
|
||
</div>
|
||
<div class="step-content">
|
||
<div class="fw-bold">Processing</div>
|
||
<small class="text-muted">Resources being allocated</small>
|
||
</div>
|
||
</div>
|
||
<div class="tracking-step pending">
|
||
<div class="step-icon">
|
||
<i class="bi bi-cloud-arrow-up text-muted"></i>
|
||
</div>
|
||
<div class="step-content">
|
||
<div class="fw-bold">Deploying</div>
|
||
<small class="text-muted">Setting up your resources</small>
|
||
</div>
|
||
</div>
|
||
<div class="tracking-step pending">
|
||
<div class="step-icon">
|
||
<i class="bi bi-check-all text-muted"></i>
|
||
</div>
|
||
<div class="step-content">
|
||
<div class="fw-bold">Ready</div>
|
||
<small class="text-muted">Resources available</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-grid">
|
||
<a href="/orders/{{ order.order_id }}" class="btn btn-outline-primary btn-sm">
|
||
<i class="bi bi-eye me-1"></i>View Full Order Details
|
||
</a>
|
||
</div>
|
||
{% else %}
|
||
<div class="d-grid">
|
||
<a href="/orders" class="btn btn-outline-primary btn-sm">
|
||
<i class="bi bi-list-ul me-1"></i>View Orders
|
||
</a>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Email Confirmation -->
|
||
<div class="card mt-4">
|
||
<div class="card-body text-center">
|
||
<i class="bi bi-envelope-check fs-1 text-success mb-2"></i>
|
||
<h6>Email Confirmation Sent</h6>
|
||
<p class="small text-muted">
|
||
A detailed confirmation has been sent to your email address with all order information and next steps.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bootstrap JS -->
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
console.log('Order confirmation page loaded');
|
||
|
||
// Auto-scroll to top
|
||
window.scrollTo(0, 0);
|
||
|
||
// Show success animation
|
||
const successIcon = document.querySelector('.success-icon');
|
||
if (successIcon) {
|
||
successIcon.style.transform = 'scale(0)';
|
||
setTimeout(() => {
|
||
successIcon.style.transition = 'transform 0.5s ease-out';
|
||
successIcon.style.transform = 'scale(1)';
|
||
}, 300);
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |