499 lines
24 KiB
HTML
499 lines
24 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Shopping Cart - Project Mycelium{% endblock %}
|
|
|
|
{% block head %}
|
|
<!-- Add Bootstrap Icons -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
|
|
|
|
<style>
|
|
.cart-item {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.cart-item:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.quantity-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.quantity-controls button {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.product-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.cart-summary {
|
|
position: sticky;
|
|
top: 100px;
|
|
}
|
|
|
|
.security-notice {
|
|
background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
|
|
border: 1px solid #b6d4da;
|
|
}
|
|
|
|
.empty-cart-icon {
|
|
font-size: 4rem;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.loading-overlay {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 9999;
|
|
}
|
|
|
|
.toast {
|
|
z-index: 10000;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-4">
|
|
<!-- Breadcrumb -->
|
|
<nav aria-label="breadcrumb" class="mb-4">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="/">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="/marketplace">Marketplace</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">Shopping Cart</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Page Header -->
|
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
|
<h1 class="h2"><i class="bi bi-cart3 me-2 text-primary"></i>Shopping Cart</h1>
|
|
<div class="btn-toolbar mb-2 mb-md-0">
|
|
<div class="btn-group me-2">
|
|
<a href="/marketplace" class="btn btn-sm btn-outline-secondary">
|
|
<i class="bi bi-arrow-left me-1"></i>Continue Shopping
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if cart.is_empty %}
|
|
<!-- Empty Cart State -->
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8 text-center">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body py-5">
|
|
<i class="bi bi-cart-x empty-cart-icon mb-4"></i>
|
|
<h3 class="text-muted mb-3">Your cart is empty</h3>
|
|
<p class="text-muted mb-4">Looks like you haven't added any items to your cart yet. Browse our marketplace to find the perfect ThreeFold resources for your needs.</p>
|
|
<a href="/marketplace" class="btn btn-primary btn-lg">
|
|
<i class="bi bi-shop me-2"></i>Browse Marketplace
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<!-- Cart with Items -->
|
|
<div class="row">
|
|
<!-- Cart Items -->
|
|
<div class="col-lg-8">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-white d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0"><i class="bi bi-bag me-2"></i>Cart Items ({{ cart.item_count }})</h5>
|
|
<button class="btn btn-sm btn-outline-danger" id="clearCartBtn">
|
|
<i class="bi bi-trash me-1"></i>Clear Cart
|
|
</button>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
{% for item in cart.items %}
|
|
<div class="cart-item border-bottom p-4" data-product-id="{{ item.product_id }}">
|
|
<div class="row align-items-center">
|
|
<!-- Product Info -->
|
|
<div class="col-md-6">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0 me-3">
|
|
<div class="product-icon">
|
|
{% if item.product_category == "compute" %}
|
|
<i class="bi bi-cpu fs-4 text-primary"></i>
|
|
{% elif item.product_category == "hardware" %}
|
|
<i class="bi bi-hdd-rack fs-4 text-success"></i>
|
|
{% elif item.product_category == "gateways" %}
|
|
<i class="bi bi-globe fs-4 text-info"></i>
|
|
{% elif item.product_category == "applications" %}
|
|
<i class="bi bi-app fs-4 text-warning"></i>
|
|
{% elif item.product_category == "services" %}
|
|
<i class="bi bi-person-workspace fs-4 text-secondary"></i>
|
|
{% else %}
|
|
<i class="bi bi-box fs-4 text-muted"></i>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<h6 class="mb-1 fw-bold">{{ item.product_name }}</h6>
|
|
<p class="text-muted mb-1 small">
|
|
<i class="bi bi-building me-1"></i>{{ item.provider_name }}
|
|
</p>
|
|
<span class="badge bg-light text-dark border">
|
|
<i class="bi bi-tag me-1"></i>{{ item.product_category|title }}
|
|
</span>
|
|
|
|
{% if item.specifications %}
|
|
<div class="mt-2">
|
|
<small class="text-muted fw-bold">Specifications:</small>
|
|
<div class="mt-1">
|
|
{% for key, value in item.specifications %}
|
|
<span class="badge bg-secondary me-1 small">{{ key }}: {{ value }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quantity Controls -->
|
|
<div class="col-md-3">
|
|
<div class="quantity-controls justify-content-center">
|
|
<button class="btn btn-sm btn-outline-secondary" data-product-id="{{ item.product_id }}" data-action="decrease">
|
|
<i class="bi bi-dash"></i>
|
|
</button>
|
|
<span class="mx-3 fw-bold fs-5">{{ item.quantity }}</span>
|
|
<button class="btn btn-sm btn-outline-secondary" data-product-id="{{ item.product_id }}" data-action="increase">
|
|
<i class="bi bi-plus"></i>
|
|
</button>
|
|
</div>
|
|
<div class="text-center mt-2">
|
|
<small class="text-muted">Quantity</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Price and Actions -->
|
|
<div class="col-md-3">
|
|
<div class="text-end">
|
|
<div class="mb-2">
|
|
<small class="text-muted">Unit: {{ item.unit_price }}</small>
|
|
</div>
|
|
<div class="fw-bold text-primary mb-3 fs-5">{{ item.total_price }}</div>
|
|
<button class="btn btn-sm btn-outline-danger" data-product-id="{{ item.product_id }}" data-action="remove" title="Remove item">
|
|
<i class="bi bi-trash"></i> Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cart Summary -->
|
|
<div class="col-lg-4">
|
|
<div class="card shadow-sm cart-summary">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="mb-0"><i class="bi bi-receipt me-2"></i>Order Summary</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Currency Selector -->
|
|
<div class="mb-3">
|
|
<label class="form-label small text-muted fw-bold">
|
|
<i class="bi bi-currency-exchange me-1"></i>Display Currency
|
|
</label>
|
|
<select class="form-select form-select-sm" id="currencySelector">
|
|
{% for currency in currencies %}
|
|
<option value="{{ currency.code }}" {% if currency.code == user_currency %}selected{% endif %}>
|
|
{{ currency.symbol }} {{ currency.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<!-- Price Breakdown -->
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span><i class="bi bi-bag me-1"></i>Subtotal ({{ cart.item_count }} items)</span>
|
|
<span class="fw-bold">{{ cart.subtotal }}</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span class="text-muted"><i class="bi bi-calculator me-1"></i>Estimated fees</span>
|
|
<span class="text-muted">Calculated at checkout</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span class="text-muted"><i class="bi bi-truck me-1"></i>Deployment</span>
|
|
<span class="text-success">Free</span>
|
|
</div>
|
|
<hr>
|
|
<div class="d-flex justify-content-between mb-3">
|
|
<span class="fw-bold fs-5">Total</span>
|
|
<span class="fw-bold text-primary fs-4">{{ cart.total }}</span>
|
|
</div>
|
|
|
|
<!-- Checkout Button -->
|
|
<div class="d-grid mb-3">
|
|
{% if user_json %}
|
|
<a href="/checkout" class="btn btn-primary btn-lg">
|
|
<i class="bi bi-credit-card me-2"></i>Proceed to Checkout
|
|
</a>
|
|
{% else %}
|
|
<button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#guestCheckoutModal">
|
|
<i class="bi bi-credit-card me-2"></i>Proceed to Checkout
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Additional Actions -->
|
|
<div class="d-grid gap-2">
|
|
<button class="btn btn-outline-secondary btn-sm" data-action="save-for-later">
|
|
<i class="bi bi-bookmark me-1"></i>Save for Later
|
|
</button>
|
|
<button class="btn btn-outline-info btn-sm" data-action="share-cart">
|
|
<i class="bi bi-share me-1"></i>Share Cart
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Security Notice -->
|
|
<div class="mt-3 p-3 security-notice rounded">
|
|
<div class="d-flex align-items-center">
|
|
<i class="bi bi-shield-check text-success me-2 fs-5"></i>
|
|
<div>
|
|
<small class="fw-bold">Secure Checkout</small>
|
|
<div class="small text-muted">256-bit SSL encryption</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recommended Products -->
|
|
<div class="card shadow-sm mt-4">
|
|
<div class="card-header bg-light">
|
|
<h6 class="mb-0"><i class="bi bi-lightbulb me-2"></i>You might also like</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-2">
|
|
<div class="col-12">
|
|
<div class="d-flex align-items-center p-3 border rounded hover-shadow">
|
|
<i class="bi bi-cpu text-primary me-3 fs-4"></i>
|
|
<div class="flex-grow-1">
|
|
<div class="fw-bold small">High-Performance Compute</div>
|
|
<div class="text-muted" style="font-size: 0.75rem;">Starting at $5/month</div>
|
|
</div>
|
|
<button class="btn btn-sm btn-outline-primary">
|
|
<i class="bi bi-plus"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="d-flex align-items-center p-3 border rounded hover-shadow">
|
|
<i class="bi bi-hdd-rack text-success me-3 fs-4"></i>
|
|
<div class="flex-grow-1">
|
|
<div class="fw-bold small">Storage Solutions</div>
|
|
<div class="text-muted" style="font-size: 0.75rem;">Starting at $2.50/month</div>
|
|
</div>
|
|
<button class="btn btn-sm btn-outline-primary">
|
|
<i class="bi bi-plus"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="d-flex align-items-center p-3 border rounded hover-shadow">
|
|
<i class="bi bi-globe text-info me-3 fs-4"></i>
|
|
<div class="flex-grow-1">
|
|
<div class="fw-bold small">Gateway Services</div>
|
|
<div class="text-muted" style="font-size: 0.75rem;">Starting at $1.50/month</div>
|
|
</div>
|
|
<button class="btn btn-sm btn-outline-primary">
|
|
<i class="bi bi-plus"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Clear Cart Confirmation Modal -->
|
|
<div class="modal fade" id="clearCartModal" tabindex="-1" aria-labelledby="clearCartModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-danger text-white">
|
|
<h5 class="modal-title" id="clearCartModalLabel">
|
|
<i class="bi bi-exclamation-triangle me-2"></i>Clear Entire Cart
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<i class="bi bi-cart-x text-danger me-3" style="font-size: 2rem;"></i>
|
|
<div>
|
|
<p class="mb-1 fw-bold">Are you sure you want to clear your entire cart?</p>
|
|
<p class="mb-0 text-muted small">This action will remove all items from your cart and cannot be undone.</p>
|
|
</div>
|
|
</div>
|
|
<div class="alert alert-warning d-flex align-items-center">
|
|
<i class="bi bi-info-circle me-2"></i>
|
|
<small>All {{ cart.item_count }} items will be permanently removed from your cart.</small>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
|
<i class="bi bi-x-circle me-1"></i>Cancel
|
|
</button>
|
|
<button type="button" class="btn btn-danger" id="confirmClearCartBtn">
|
|
<i class="bi bi-trash me-1"></i>Clear Cart
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Remove Item Confirmation Modal -->
|
|
<div class="modal fade" id="removeItemModal" tabindex="-1" aria-labelledby="removeItemModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-warning text-dark">
|
|
<h5 class="modal-title" id="removeItemModalLabel">
|
|
<i class="bi bi-exclamation-triangle me-2"></i>Remove Item
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<i class="bi bi-trash text-warning me-3" style="font-size: 2rem;"></i>
|
|
<div>
|
|
<p class="mb-1 fw-bold">Remove this item from your cart?</p>
|
|
<p class="mb-0 text-muted small">This action cannot be undone.</p>
|
|
</div>
|
|
</div>
|
|
<div class="alert alert-info d-flex align-items-center">
|
|
<i class="bi bi-info-circle me-2"></i>
|
|
<small>You can always add this item back later from the marketplace.</small>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
|
<i class="bi bi-x-circle me-1"></i>Cancel
|
|
</button>
|
|
<button type="button" class="btn btn-warning" id="confirmRemoveItemBtn">
|
|
<i class="bi bi-trash me-1"></i>Remove Item
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading Overlay -->
|
|
<div id="loadingOverlay" class="position-fixed top-0 start-0 w-100 h-100 d-none loading-overlay">
|
|
<div class="d-flex justify-content-center align-items-center h-100">
|
|
<div class="spinner-border text-light" role="status" style="width: 3rem; height: 3rem;">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script type="application/json" id="cart-hydration">
|
|
{
|
|
"item_count": {{ cart.item_count }},
|
|
"redirect_login_url": "/login?checkout=true",
|
|
"redirect_register_url": "/register?checkout=true",
|
|
"redirect_after_auth": "/cart"
|
|
}
|
|
</script>
|
|
<script src="/static/js/cart.js"></script>
|
|
|
|
<!-- Guest Checkout Modal -->
|
|
<div class="modal fade" id="guestCheckoutModal" tabindex="-1" aria-labelledby="guestCheckoutModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-primary text-white">
|
|
<h5 class="modal-title" id="guestCheckoutModalLabel">
|
|
<i class="bi bi-person-check me-2"></i>Complete Your Purchase
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="text-center mb-4">
|
|
<i class="bi bi-cart-check text-primary" style="font-size: 3rem;"></i>
|
|
<h4 class="mt-3 mb-2">Almost there!</h4>
|
|
<p class="text-muted">You're just one step away from completing your purchase.</p>
|
|
</div>
|
|
|
|
<div class="alert alert-info d-flex align-items-center mb-4">
|
|
<i class="bi bi-shield-check me-2"></i>
|
|
<div>
|
|
<strong>Your cart is safe!</strong><br>
|
|
<small>All items in your cart will be automatically saved when you log in or create an account.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3">
|
|
<div class="col-12">
|
|
<h6 class="mb-3">Choose an option to continue:</h6>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-primary">
|
|
<div class="card-body text-center">
|
|
<i class="bi bi-person-fill text-primary mb-2" style="font-size: 2rem;"></i>
|
|
<h6>Already have an account?</h6>
|
|
<p class="text-muted small mb-3">Sign in to access your saved information and complete checkout quickly.</p>
|
|
<button type="button" class="btn btn-primary w-100" id="guestLoginBtn">
|
|
<i class="bi bi-box-arrow-in-right me-2"></i>Log In
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card h-100 border-success">
|
|
<div class="card-body text-center">
|
|
<i class="bi bi-person-plus-fill text-success mb-2" style="font-size: 2rem;"></i>
|
|
<h6>New to ThreeFold?</h6>
|
|
<p class="text-muted small mb-3">Create a free account to manage your orders and access exclusive features.</p>
|
|
<button type="button" class="btn btn-success w-100" id="guestRegisterBtn">
|
|
<i class="bi bi-person-plus me-2"></i>Create Account
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 p-3 bg-light rounded">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto">
|
|
<i class="bi bi-lightning-charge text-warning" style="font-size: 1.5rem;"></i>
|
|
</div>
|
|
<div class="col">
|
|
<h6 class="mb-1">Quick & Secure</h6>
|
|
<small class="text-muted">Registration takes less than 30 seconds. Your payment information is protected with enterprise-grade security.</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-light">
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
|
|
<i class="bi bi-arrow-left me-2"></i>Continue Shopping
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %} |