358 lines
18 KiB
HTML
358 lines
18 KiB
HTML
{% extends "marketplace/layout.html" %}
|
|
|
|
{% block title %}Project Mycelium - Professional Services{% endblock %}
|
|
|
|
{% block marketplace_content %}
|
|
<div class="my-4">
|
|
<h1>Professional Services</h1>
|
|
<p class="lead">Expert services to help you succeed with ThreeFold technology and infrastructure.</p>
|
|
|
|
<!-- Services Introduction -->
|
|
<div class="alert alert-info mb-4">
|
|
<div class="d-flex">
|
|
<div class="me-3">
|
|
<i class="bi bi-people-fill fs-3"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="alert-heading">Professional Support & Services</h5>
|
|
<p>Our certified experts and trusted community providers offer comprehensive services to help you deploy, manage, and optimize your ThreeFold infrastructure and applications.</p>
|
|
<hr>
|
|
<p class="mb-0">From initial consultation to ongoing support, we ensure your success with decentralized technology.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filter and Search Section -->
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Filter Services</h5>
|
|
<form class="row g-3" method="GET">
|
|
<div class="col-md-3">
|
|
<label for="serviceTypeFilter" class="form-label">Service Type</label>
|
|
<select name="service_type" id="serviceTypeFilter" class="form-select">
|
|
<option value="">All Services</option>
|
|
<option value="Consulting">Consulting</option>
|
|
<option value="Deployment">Deployment</option>
|
|
<option value="Support">Support</option>
|
|
<option value="Training">Training</option>
|
|
<option value="Development">Development</option>
|
|
<option value="Maintenance">Maintenance</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="expertiseFilter" class="form-label">Expertise Level</label>
|
|
<select name="expertise_level" id="expertiseFilter" class="form-select">
|
|
<option value="">Any</option>
|
|
<option value="Basic">Basic</option>
|
|
<option value="Intermediate">Intermediate</option>
|
|
<option value="Advanced">Advanced</option>
|
|
<option value="Expert">Expert</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="minPriceFilter" class="form-label">Min Price ($)</label>
|
|
<input type="number" name="min_price" id="minPriceFilter" class="form-control"
|
|
value="" placeholder="0" min="0" step="5">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="maxPriceFilter" class="form-label">Max Price ($)</label>
|
|
<input type="number" name="max_price" id="maxPriceFilter" class="form-control"
|
|
value="" placeholder="200" min="0" step="5">
|
|
</div>
|
|
<div class="col-md-6 d-flex align-items-end">
|
|
<button type="submit" class="btn btn-primary me-2">Apply Filters</button>
|
|
<a href="/marketplace/services" class="btn btn-outline-secondary">Clear</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Services Grid -->
|
|
<div class="row" id="services-grid">
|
|
{% if service_products and service_products | length > 0 %}
|
|
{% for product_data in service_products %}
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
|
<div class="service-icon me-3">
|
|
<i class="bi bi-gear-fill fs-2 text-primary"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<h5 class="card-title mb-1">
|
|
<a href="/products/{{ product_data.product.id }}" class="text-decoration-none text-dark">
|
|
{{ product_data.product.name }}
|
|
</a>
|
|
</h5>
|
|
{% if product_data.product.metadata.featured %}
|
|
<span class="badge bg-warning">Featured</span>
|
|
{% elif product_data.product.availability == "Available" %}
|
|
<span class="badge bg-success">Available</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">{{ product_data.product.availability }}</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="text-muted small mb-2">
|
|
<i class="bi bi-building me-1"></i>{{ product_data.product.provider_name }}
|
|
{% if product_data.product.metadata.location %}
|
|
<span class="ms-2">
|
|
<i class="bi bi-geo-alt me-1"></i>{{ product_data.product.metadata.location }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="card-text">{{ product_data.product.description | truncate(length=150) }}</p>
|
|
|
|
<!-- Service Details -->
|
|
{% if product_data.product.attributes %}
|
|
<div class="mb-3">
|
|
<h6 class="mb-2">Service Details:</h6>
|
|
<div class="row">
|
|
{% if product_data.product.attributes.duration_hours %}
|
|
<div class="col-md-6">
|
|
<div class="service-detail">
|
|
<i class="bi bi-clock me-2"></i>
|
|
<span>Duration: {{ product_data.product.attributes.duration_hours.value }} hours</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if product_data.product.attributes.expertise_level %}
|
|
<div class="col-md-6">
|
|
<div class="service-detail">
|
|
<i class="bi bi-star me-2"></i>
|
|
<span>Level: {{ product_data.product.attributes.expertise_level.value | title }}</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if product_data.product.attributes.response_time_hours %}
|
|
<div class="col-md-6">
|
|
<div class="service-detail">
|
|
<i class="bi bi-reply me-2"></i>
|
|
<span>Response: {{ product_data.product.attributes.response_time_hours.value }}h</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if product_data.product.attributes.support_type %}
|
|
<div class="col-md-6">
|
|
<div class="service-detail">
|
|
<i class="bi bi-headset me-2"></i>
|
|
<span>Type: {{ product_data.product.attributes.support_type.value | title }}</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Service Features/Tags -->
|
|
{% if product_data.product.metadata.tags and product_data.product.metadata.tags | length > 0 %}
|
|
<div class="mb-3">
|
|
<h6 class="mb-2">Includes:</h6>
|
|
<div class="d-flex flex-wrap">
|
|
{% for tag in product_data.product.metadata.tags %}
|
|
<span class="badge bg-light text-dark me-1 mb-1">{{ tag | title }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Provider Rating -->
|
|
{% if product_data.product.metadata.rating %}
|
|
<div class="mb-3">
|
|
<div class="d-flex align-items-center">
|
|
<span class="me-2">Rating:</span>
|
|
{% if product_data.product.metadata.rating >= 1 %}<i class="bi bi-star-fill text-warning"></i>{% else %}<i class="bi bi-star text-muted"></i>{% endif %}
|
|
{% if product_data.product.metadata.rating >= 2 %}<i class="bi bi-star-fill text-warning"></i>{% else %}<i class="bi bi-star text-muted"></i>{% endif %}
|
|
{% if product_data.product.metadata.rating >= 3 %}<i class="bi bi-star-fill text-warning"></i>{% else %}<i class="bi bi-star text-muted"></i>{% endif %}
|
|
{% if product_data.product.metadata.rating >= 4 %}<i class="bi bi-star-fill text-warning"></i>{% else %}<i class="bi bi-star text-muted"></i>{% endif %}
|
|
{% if product_data.product.metadata.rating >= 5 %}<i class="bi bi-star-fill text-warning"></i>{% else %}<i class="bi bi-star text-muted"></i>{% endif %}
|
|
<span class="ms-2 text-muted small">({{ product_data.product.metadata.review_count }} reviews)</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="card-footer bg-transparent">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="price-info">
|
|
<div class="fw-bold text-primary fs-5">{{ product_data.formatted_price }}</div>
|
|
<small class="text-muted">per engagement</small>
|
|
</div>
|
|
<div class="btn-group-vertical w-100">
|
|
<div class="btn-group mb-2">
|
|
<button class="btn btn-success btn-sm buy-now-btn"
|
|
data-product-id="{{ product_data.product.id }}"
|
|
data-product-name="{{ product_data.product.name }}"
|
|
data-unit-price="{{ product_data.price.display_amount }}"
|
|
data-currency="{{ product_data.price.display_currency }}"
|
|
data-category="services">
|
|
<i class="bi bi-lightning-charge me-1"></i>Buy Now
|
|
</button>
|
|
<button class="btn btn-primary btn-sm add-to-cart-btn"
|
|
data-product-id="{{ product_data.product.id }}"
|
|
data-product-name="{{ product_data.product.name }}"
|
|
data-unit-price="{{ product_data.price.display_amount }}"
|
|
data-currency="{{ product_data.price.display_currency }}">
|
|
<i class="bi bi-cart-plus me-1"></i>Add to Cart
|
|
</button>
|
|
</div>
|
|
<a href="/products/{{ product_data.product.id }}" class="btn btn-outline-primary btn-sm">View Details</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="col-12">
|
|
<div class="text-center py-5">
|
|
<i class="bi bi-people display-1 text-muted"></i>
|
|
<h4 class="mt-3">No Services Available</h4>
|
|
<p class="text-muted">Check back later for new professional services.</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
{% if pagination and pagination.total_pages > 1 %}
|
|
<nav aria-label="Service pages" class="mt-4">
|
|
<ul class="pagination justify-content-center">
|
|
<!-- Previous Page -->
|
|
<li class="page-item {% if not pagination.has_previous %}disabled{% endif %}">
|
|
{% if pagination.has_previous %}
|
|
<a class="page-link" href="?page={{ pagination.previous_page }}">Previous</a>
|
|
{% else %}
|
|
<span class="page-link" tabindex="-1" aria-disabled="true">Previous</span>
|
|
{% endif %}
|
|
</li>
|
|
|
|
<!-- Page 1 -->
|
|
<li class="page-item {% if pagination.current_page == 0 %}active{% endif %}">
|
|
{% if pagination.current_page == 0 %}
|
|
<span class="page-link">1</span>
|
|
{% else %}
|
|
<a class="page-link" href="?page=0">1</a>
|
|
{% endif %}
|
|
</li>
|
|
|
|
<!-- Page 2 (if exists) -->
|
|
{% if pagination.total_pages > 1 %}
|
|
<li class="page-item {% if pagination.current_page == 1 %}active{% endif %}">
|
|
{% if pagination.current_page == 1 %}
|
|
<span class="page-link">2</span>
|
|
{% else %}
|
|
<a class="page-link" href="?page=1">2</a>
|
|
{% endif %}
|
|
</li>
|
|
{% endif %}
|
|
|
|
<!-- Page 3 (if exists) -->
|
|
{% if pagination.total_pages > 2 %}
|
|
<li class="page-item {% if pagination.current_page == 2 %}active{% endif %}">
|
|
{% if pagination.current_page == 2 %}
|
|
<span class="page-link">3</span>
|
|
{% else %}
|
|
<a class="page-link" href="?page=2">3</a>
|
|
{% endif %}
|
|
</li>
|
|
{% endif %}
|
|
|
|
<!-- Page 4 (if exists) -->
|
|
{% if pagination.total_pages > 3 %}
|
|
<li class="page-item {% if pagination.current_page == 3 %}active{% endif %}">
|
|
{% if pagination.current_page == 3 %}
|
|
<span class="page-link">4</span>
|
|
{% else %}
|
|
<a class="page-link" href="?page=3">4</a>
|
|
{% endif %}
|
|
</li>
|
|
{% endif %}
|
|
|
|
<!-- Page 5 (if exists) -->
|
|
{% if pagination.total_pages > 4 %}
|
|
<li class="page-item {% if pagination.current_page == 4 %}active{% endif %}">
|
|
{% if pagination.current_page == 4 %}
|
|
<span class="page-link">5</span>
|
|
{% else %}
|
|
<a class="page-link" href="?page=4">5</a>
|
|
{% endif %}
|
|
</li>
|
|
{% endif %}
|
|
|
|
<!-- Next Page -->
|
|
<li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
|
|
{% if pagination.has_next %}
|
|
<a class="page-link" href="?page={{ pagination.next_page }}">Next</a>
|
|
{% else %}
|
|
<span class="page-link" tabindex="-1" aria-disabled="true">Next</span>
|
|
{% endif %}
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Results Info -->
|
|
<div class="text-center text-muted mt-2">
|
|
Showing page {{ pagination.current_page + 1 }} of {{ pagination.total_pages }}
|
|
({{ pagination.total_count }} total services)
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Service Categories -->
|
|
<div class="row mt-5">
|
|
<div class="col-12">
|
|
<h3 class="mb-4">Service Categories</h3>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<i class="bi bi-lightbulb fs-1 text-primary mb-3"></i>
|
|
<h5>Consulting & Strategy</h5>
|
|
<p class="small text-muted">Architecture planning, technology assessment, and strategic guidance for your decentralized infrastructure.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<i class="bi bi-tools fs-1 text-primary mb-3"></i>
|
|
<h5>Deployment & Setup</h5>
|
|
<p class="small text-muted">Professional deployment, configuration, and optimization of your ThreeFold infrastructure and applications.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<i class="bi bi-headset fs-1 text-primary mb-3"></i>
|
|
<h5>Support & Maintenance</h5>
|
|
<p class="small text-muted">Ongoing support, monitoring, updates, and maintenance to keep your systems running smoothly.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.service-detail {
|
|
margin-bottom: 8px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.service-icon {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.price-info {
|
|
text-align: left;
|
|
}
|
|
</style>
|
|
|
|
<!-- JSON hydration for services (CSP-safe) -->
|
|
<script type="application/json" id="services-data">{}</script>
|
|
<!-- External JS (CSP-compliant) -->
|
|
<script src="/static/js/services.js"></script>
|
|
{% endblock %} |