294 lines
15 KiB
HTML
294 lines
15 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Digital Assets Marketplace{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid px-4">
|
|
<h1 class="mt-4">Digital Assets Marketplace</h1>
|
|
<ol class="breadcrumb mb-4">
|
|
<li class="breadcrumb-item"><a href="/">Home</a></li>
|
|
<li class="breadcrumb-item active">Marketplace</li>
|
|
</ol>
|
|
|
|
<!-- Stats Cards -->
|
|
<div class="row">
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card bg-primary text-white mb-4">
|
|
<div class="card-body">
|
|
<h2 class="display-4">{{ stats.active_listings }}</h2>
|
|
<p class="mb-0">Active Listings</p>
|
|
</div>
|
|
<div class="card-footer d-flex align-items-center justify-content-between">
|
|
<a class="small text-white stretched-link" href="/marketplace/listings">View Details</a>
|
|
<div class="small text-white"><i class="bi bi-arrow-right"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card bg-success text-white mb-4">
|
|
<div class="card-body">
|
|
<h2 class="display-4">${{ stats.total_value }}</h2>
|
|
<p class="mb-0">Total Market Value</p>
|
|
</div>
|
|
<div class="card-footer d-flex align-items-center justify-content-between">
|
|
<a class="small text-white stretched-link" href="/marketplace/listings">View Details</a>
|
|
<div class="small text-white"><i class="bi bi-arrow-right"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card bg-warning text-white mb-4">
|
|
<div class="card-body">
|
|
<h2 class="display-4">{{ stats.total_listings }}</h2>
|
|
<p class="mb-0">Total Listings</p>
|
|
</div>
|
|
<div class="card-footer d-flex align-items-center justify-content-between">
|
|
<a class="small text-white stretched-link" href="/marketplace/listings">View Details</a>
|
|
<div class="small text-white"><i class="bi bi-arrow-right"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card bg-info text-white mb-4">
|
|
<div class="card-body">
|
|
<h2 class="display-4">${{ stats.total_sales }}</h2>
|
|
<p class="mb-0">Total Sales</p>
|
|
</div>
|
|
<div class="card-footer d-flex align-items-center justify-content-between">
|
|
<a class="small text-white stretched-link" href="/marketplace/listings">View Details</a>
|
|
<div class="small text-white"><i class="bi bi-arrow-right"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="bi bi-lightning-charge"></i>
|
|
Quick Actions
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-around">
|
|
<a href="/marketplace/create" class="btn btn-primary">
|
|
<i class="bi bi-plus-circle"></i> List New Asset
|
|
</a>
|
|
<a href="/marketplace/listings" class="btn btn-success">
|
|
<i class="bi bi-search"></i> Browse Listings
|
|
</a>
|
|
<a href="/marketplace/my" class="btn btn-info">
|
|
<i class="bi bi-person"></i> My Listings
|
|
</a>
|
|
<a href="/assets/my" class="btn btn-secondary">
|
|
<i class="bi bi-collection"></i> My Assets
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Featured Listings -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="bi bi-star"></i>
|
|
Featured Listings
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
{% if featured_listings|length > 0 %}
|
|
{% for listing in featured_listings %}
|
|
<div class="col-md-3 mb-3">
|
|
<div class="card h-100">
|
|
<div class="badge bg-warning text-dark position-absolute" style="top: 0.5rem; right: 0.5rem">Featured</div>
|
|
{% if listing.image_url %}
|
|
<img src="{{ listing.image_url }}" class="card-img-top" alt="{{ listing.title }}" style="height: 180px; object-fit: cover;">
|
|
{% else %}
|
|
<div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 180px;">
|
|
<i class="bi bi-image text-secondary" style="font-size: 3rem;"></i>
|
|
</div>
|
|
{% endif %}
|
|
<div class="card-body">
|
|
<h5 class="card-title">{{ listing.title }}</h5>
|
|
<p class="card-text text-truncate">{{ listing.description }}</p>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span class="badge bg-primary">{{ listing.listing_type }}</span>
|
|
<span class="badge bg-secondary">{{ listing.asset_type }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<strong>${{ listing.price }}</strong>
|
|
<a href="/marketplace/{{ listing.id }}" class="btn btn-sm btn-outline-primary">View</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="col-12">
|
|
<p class="text-center">No featured listings available at this time.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Listings and Sales -->
|
|
<div class="row">
|
|
<!-- Recent Listings -->
|
|
<div class="col-lg-8">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<i class="bi bi-clock"></i>
|
|
Recent Listings
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Asset</th>
|
|
<th>Type</th>
|
|
<th>Price</th>
|
|
<th>Listing Type</th>
|
|
<th>Seller</th>
|
|
<th>Listed</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% if recent_listings|length > 0 %}
|
|
{% for listing in recent_listings %}
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
{% if listing.image_url %}
|
|
<img src="{{ listing.image_url }}" alt="{{ listing.asset_name }}" class="me-2" style="width: 30px; height: 30px; object-fit: cover;">
|
|
{% else %}
|
|
<i class="bi bi-collection me-2"></i>
|
|
{% endif %}
|
|
{{ listing.asset_name }}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
{% if listing.asset_type == "Token" %}
|
|
<span class="badge bg-primary">{{ listing.asset_type }}</span>
|
|
{% elif listing.asset_type == "NFT" %}
|
|
<span class="badge bg-info">{{ listing.asset_type }}</span>
|
|
{% elif listing.asset_type == "RealEstate" %}
|
|
<span class="badge bg-success">Real Estate</span>
|
|
{% elif listing.asset_type == "IntellectualProperty" %}
|
|
<span class="badge bg-warning text-dark">IP</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">{{ listing.asset_type }}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>${{ listing.price }}</td>
|
|
<td>{{ listing.listing_type }}</td>
|
|
<td>{{ listing.seller_name }}</td>
|
|
<td>{{ listing.created_at|date }}</td>
|
|
<td>
|
|
<a href="/marketplace/{{ listing.id }}" class="btn btn-sm btn-outline-primary">View</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="7" class="text-center">No recent listings available.</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<a href="/marketplace/listings" class="btn btn-sm btn-primary">View All Listings</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Sales -->
|
|
<div class="col-lg-4">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<i class="bi bi-bag-check"></i>
|
|
Recent Sales
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Asset</th>
|
|
<th>Price</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% if recent_sales|length > 0 %}
|
|
{% for listing in recent_sales %}
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
{% if listing.image_url %}
|
|
<img src="{{ listing.image_url }}" alt="{{ listing.asset_name }}" class="me-2" style="width: 30px; height: 30px; object-fit: cover;">
|
|
{% else %}
|
|
<i class="bi bi-collection me-2"></i>
|
|
{% endif %}
|
|
{{ listing.asset_name }}
|
|
</div>
|
|
</td>
|
|
<td>${{ listing.sale_price }}</td>
|
|
<td>{{ listing.sold_at|date }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="3" class="text-center">No recent sales available.</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Listing Types Distribution -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<i class="bi bi-pie-chart"></i>
|
|
Listing Types
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Type</th>
|
|
<th>Count</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for type, count in stats.listings_by_type %}
|
|
<tr>
|
|
<td>{{ type }}</td>
|
|
<td>{{ count }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|