init projectmycelium
This commit is contained in:
mik-tf
442
src/views/marketplace/order_confirmation.html
Normal file
442
src/views/marketplace/order_confirmation.html
Normal file
@@ -0,0 +1,442 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user