381 lines
27 KiB
PHP
381 lines
27 KiB
PHP
@extends('layouts.marketplace', ['title' => 'Marketplace Account - Purchases'])
|
|
|
|
@section('content')
|
|
<!-- Purchases content -->
|
|
<div class="col-lg-9 pt-2 pt-xl-3">
|
|
<div
|
|
data-filter-list='{"searchClass": "product-search", "listClass": "product-list", "sortClass": "product-sort", "valueNames": ["product", "author", "category", "date", "license"]}'>
|
|
<!-- Header -->
|
|
<div class="d-sm-flex align-items-center justify-content-between gap-3 pb-2 pb-sm-3 mb-md-2">
|
|
<h1 class="h2 text-nowrap mb-sm-0">Purchases (6)</h1>
|
|
<div class="position-relative w-100" style="max-width: 300px">
|
|
<i class="ci-search position-absolute top-50 start-0 translate-middle-y ms-3"></i>
|
|
<input class="product-search form-control form-icon-start rounded-pill" placeholder="Search"
|
|
type="search" />
|
|
</div>
|
|
</div>
|
|
<!-- Purchases list (table) -->
|
|
<table class="table align-middle fs-sm mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th class="px-0 pe-sm-2" scope="col">
|
|
<span class="fw-normal text-body">Product</span>
|
|
</th>
|
|
<th class="d-none d-md-table-cell" scope="col">
|
|
<button class="btn fw-normal text-body product-sort p-0" data-sort="date"
|
|
type="button">Purchase date</button>
|
|
</th>
|
|
<th class="d-none d-md-table-cell" scope="col">
|
|
<span class="fw-normal text-body">License</span>
|
|
</th>
|
|
<th class="d-none d-sm-table-cell pe-0" scope="col"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="product-list">
|
|
<!-- Item -->
|
|
<tr>
|
|
<td class="py-3 px-0 pe-sm-2">
|
|
<div class="d-none d-md-block d-xl-none" style="width: 350px"></div>
|
|
<div class="d-none d-xl-block" style="width: 450px"></div>
|
|
<div
|
|
class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
|
|
<div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
|
|
style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
|
|
<img alt="Image" class="hover-effect-target" src="/img/account/products/13.jpg" />
|
|
</div>
|
|
<div class="ps-2 ps-sm-3 ms-1">
|
|
<h6 class="product mb-2">
|
|
<a class="fs-sm fw-medium hover-effect-underline stretched-link"
|
|
href="{{ route('second', ['shop', 'product-marketplace']) }}">Smart watches series 9 mockup</a>
|
|
</h6>
|
|
<div class="d-flex align-items-center flex-wrap gap-1 fs-xs">
|
|
<div class="author d-flex align-items-center fs-xs fw-medium text-body gap-1 p-0">
|
|
<div class="flex-shrink-0 border rounded-circle" style="width: 22px">
|
|
<div class="ratio ratio-1x1 rounded-circle overflow-hidden">
|
|
<img alt="Avatar" src="/img/shop/marketplace/avatars/03.png" />
|
|
</div>
|
|
</div>
|
|
MD Studio
|
|
</div>
|
|
<div class="text-body-secondary">in</div>
|
|
<div class="category fs-xs fw-medium text-body">Mockups</div>
|
|
</div>
|
|
<!-- Visible on screens < 769px wide (md breakpoint) -->
|
|
<div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
|
|
class="text-body-secondary">License:</span> <span
|
|
class="license">Standard</span></div>
|
|
<div class="fs-xs text-nowrap d-md-none"><span class="text-body-secondary">Date:</span>
|
|
July 28, 2024</div>
|
|
<!-- Visible on screens < 500px wide (sm breakpoint) -->
|
|
<button
|
|
class="btn btn-sm btn-secondary rounded-pill animate-scale position-relative z-2 d-sm-none mt-3"
|
|
type="button">
|
|
<i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
|
|
Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<!-- Visible on screens > 768px wide (md breakpoint) -->
|
|
<td class="d-none d-md-table-cell py-3">July 28, 2024<span
|
|
class="date visually-hidden">1722164400</span></td>
|
|
<td class="d-none d-md-table-cell py-3">Standard</td>
|
|
<!-- Visible on screens > 500px wide (sm breakpoint) -->
|
|
<td class="d-none d-sm-table-cell text-end py-3 ps-0 ps-sm-3 pe-0" style="width: 120px">
|
|
<button class="btn btn-sm btn-secondary rounded-pill animate-scale" type="button">
|
|
<i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
|
|
Download
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Item -->
|
|
<tr>
|
|
<td class="py-3 px-0 pe-sm-2">
|
|
<div class="d-none d-md-block d-xl-none" style="width: 350px"></div>
|
|
<div class="d-none d-xl-block" style="width: 450px"></div>
|
|
<div
|
|
class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
|
|
<div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
|
|
style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
|
|
<img alt="Image" class="hover-effect-target" src="/img/account/products/14.jpg" />
|
|
</div>
|
|
<div class="ps-2 ps-sm-3 ms-1">
|
|
<h6 class="product mb-2">
|
|
<a class="fs-sm fw-medium hover-effect-underline stretched-link"
|
|
href="{{ route('second', ['shop', 'product-marketplace']) }}">Gradient glassmorphism icons
|
|
set</a>
|
|
</h6>
|
|
<div class="d-flex align-items-center flex-wrap gap-1 fs-xs">
|
|
<div class="author d-flex align-items-center fs-xs fw-medium text-body gap-1 p-0">
|
|
<div class="flex-shrink-0 border rounded-circle" style="width: 22px">
|
|
<div class="ratio ratio-1x1 rounded-circle overflow-hidden">
|
|
<img alt="Avatar" src="/img/shop/marketplace/avatars/02.png" />
|
|
</div>
|
|
</div>
|
|
Magic FS
|
|
</div>
|
|
<div class="text-body-secondary">in</div>
|
|
<div class="category fs-xs fw-medium text-body">Vectors</div>
|
|
</div>
|
|
<!-- Visible on screens < 769px wide (md breakpoint) -->
|
|
<div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
|
|
class="text-body-secondary">License:</span> <span
|
|
class="license">Standard</span></div>
|
|
<div class="fs-xs text-nowrap d-md-none"><span class="text-body-secondary">Date:</span>
|
|
July 5, 2024</div>
|
|
<!-- Visible on screens < 500px wide (sm breakpoint) -->
|
|
<button
|
|
class="btn btn-sm btn-secondary rounded-pill animate-scale position-relative z-2 d-sm-none mt-3"
|
|
type="button">
|
|
<i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
|
|
Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<!-- Visible on screens > 768px wide (md breakpoint) -->
|
|
<td class="d-none d-md-table-cell py-3">July 5, 2024<span
|
|
class="date visually-hidden">1720177200</span></td>
|
|
<td class="d-none d-md-table-cell py-3">Standard</td>
|
|
<!-- Visible on screens > 500px wide (sm breakpoint) -->
|
|
<td class="d-none d-sm-table-cell text-end py-3 ps-0 ps-sm-3 pe-0" style="width: 120px">
|
|
<button class="btn btn-sm btn-secondary rounded-pill animate-scale" type="button">
|
|
<i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
|
|
Download
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Item -->
|
|
<tr>
|
|
<td class="py-3 px-0 pe-sm-2">
|
|
<div class="d-none d-md-block d-xl-none" style="width: 350px"></div>
|
|
<div class="d-none d-xl-block" style="width: 450px"></div>
|
|
<div
|
|
class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
|
|
<div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
|
|
style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
|
|
<img alt="Image" class="hover-effect-target" src="/img/account/products/15.jpg" />
|
|
</div>
|
|
<div class="ps-2 ps-sm-3 ms-1">
|
|
<h6 class="product mb-2">
|
|
<a class="fs-sm fw-medium hover-effect-underline stretched-link"
|
|
href="{{ route('second', ['shop', 'product-marketplace']) }}">A stunning set of tablet pro
|
|
mockups</a>
|
|
</h6>
|
|
<div class="d-flex align-items-center flex-wrap gap-1 fs-xs">
|
|
<div class="author d-flex align-items-center fs-xs fw-medium text-body gap-1 p-0">
|
|
<div class="flex-shrink-0 border rounded-circle" style="width: 22px">
|
|
<div class="ratio ratio-1x1 rounded-circle overflow-hidden">
|
|
<img alt="Avatar" src="/img/shop/marketplace/avatars/04.png" />
|
|
</div>
|
|
</div>
|
|
Fireby
|
|
</div>
|
|
<div class="text-body-secondary">in</div>
|
|
<div class="category fs-xs fw-medium text-body">Mockups</div>
|
|
</div>
|
|
<!-- Visible on screens < 769px wide (md breakpoint) -->
|
|
<div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
|
|
class="text-body-secondary">License:</span> <span
|
|
class="license">Extended</span></div>
|
|
<div class="fs-xs text-nowrap d-md-none"><span
|
|
class="text-body-secondary">Date:</span> May 30, 2024</div>
|
|
<!-- Visible on screens < 500px wide (sm breakpoint) -->
|
|
<button
|
|
class="btn btn-sm btn-secondary rounded-pill animate-scale position-relative z-2 d-sm-none mt-3"
|
|
type="button">
|
|
<i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
|
|
Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<!-- Visible on screens > 768px wide (md breakpoint) -->
|
|
<td class="d-none d-md-table-cell py-3">May 30, 2024<span
|
|
class="date visually-hidden">1717066800</span></td>
|
|
<td class="d-none d-md-table-cell py-3">Extended</td>
|
|
<!-- Visible on screens > 500px wide (sm breakpoint) -->
|
|
<td class="d-none d-sm-table-cell text-end py-3 ps-0 ps-sm-3 pe-0" style="width: 120px">
|
|
<button class="btn btn-sm btn-secondary rounded-pill animate-scale" type="button">
|
|
<i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
|
|
Download
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Item -->
|
|
<tr>
|
|
<td class="py-3 px-0 pe-sm-2">
|
|
<div class="d-none d-md-block d-xl-none" style="width: 350px"></div>
|
|
<div class="d-none d-xl-block" style="width: 450px"></div>
|
|
<div
|
|
class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
|
|
<div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
|
|
style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
|
|
<img alt="Image" class="hover-effect-target" src="/img/account/products/16.jpg" />
|
|
</div>
|
|
<div class="ps-2 ps-sm-3 ms-1">
|
|
<h6 class="product mb-2">
|
|
<a class="fs-sm fw-medium hover-effect-underline stretched-link"
|
|
href="{{ route('second', ['shop', 'product-marketplace']) }}">Isometric smartphone mockups</a>
|
|
</h6>
|
|
<div class="d-flex align-items-center flex-wrap gap-1 fs-xs">
|
|
<div class="author d-flex align-items-center fs-xs fw-medium text-body gap-1 p-0">
|
|
<div class="flex-shrink-0 border rounded-circle" style="width: 22px">
|
|
<div class="ratio ratio-1x1 rounded-circle overflow-hidden">
|
|
<img alt="Avatar" src="/img/shop/marketplace/avatars/03.png" />
|
|
</div>
|
|
</div>
|
|
MD Studio
|
|
</div>
|
|
<div class="text-body-secondary">in</div>
|
|
<div class="category fs-xs fw-medium text-body">Mockups</div>
|
|
</div>
|
|
<!-- Visible on screens < 769px wide (md breakpoint) -->
|
|
<div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
|
|
class="text-body-secondary">License:</span> <span
|
|
class="license">Standard</span></div>
|
|
<div class="fs-xs text-nowrap d-md-none"><span
|
|
class="text-body-secondary">Date:</span> April 19, 2024</div>
|
|
<!-- Visible on screens < 500px wide (sm breakpoint) -->
|
|
<button
|
|
class="btn btn-sm btn-secondary rounded-pill animate-scale position-relative z-2 d-sm-none mt-3"
|
|
type="button">
|
|
<i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
|
|
Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<!-- Visible on screens > 768px wide (md breakpoint) -->
|
|
<td class="d-none d-md-table-cell py-3">April 19, 2024<span
|
|
class="date visually-hidden">1713524400</span></td>
|
|
<td class="d-none d-md-table-cell py-3">Standard</td>
|
|
<!-- Visible on screens > 500px wide (sm breakpoint) -->
|
|
<td class="d-none d-sm-table-cell text-end py-3 ps-0 ps-sm-3 pe-0" style="width: 120px">
|
|
<button class="btn btn-sm btn-secondary rounded-pill animate-scale" type="button">
|
|
<i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
|
|
Download
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Item -->
|
|
<tr>
|
|
<td class="py-3 px-0 pe-sm-2">
|
|
<div class="d-none d-md-block d-xl-none" style="width: 350px"></div>
|
|
<div class="d-none d-xl-block" style="width: 450px"></div>
|
|
<div
|
|
class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
|
|
<div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
|
|
style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
|
|
<img alt="Image" class="hover-effect-target" src="/img/account/products/17.jpg" />
|
|
</div>
|
|
<div class="ps-2 ps-sm-3 ms-1">
|
|
<h6 class="product mb-2">
|
|
<a class="fs-sm fw-medium hover-effect-underline stretched-link"
|
|
href="{{ route('second', ['shop', 'product-marketplace']) }}">House plants website template</a>
|
|
</h6>
|
|
<div class="d-flex align-items-center flex-wrap gap-1 fs-xs">
|
|
<div class="author d-flex align-items-center fs-xs fw-medium text-body gap-1 p-0">
|
|
<div class="flex-shrink-0 border rounded-circle" style="width: 22px">
|
|
<div class="ratio ratio-1x1 rounded-circle overflow-hidden">
|
|
<img alt="Avatar" src="/img/shop/marketplace/avatars/02.png" />
|
|
</div>
|
|
</div>
|
|
Magic FS
|
|
</div>
|
|
<div class="text-body-secondary">in</div>
|
|
<div class="category fs-xs fw-medium text-body">Templates</div>
|
|
</div>
|
|
<!-- Visible on screens < 769px wide (md breakpoint) -->
|
|
<div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
|
|
class="text-body-secondary">License:</span> <span
|
|
class="license">Extended</span></div>
|
|
<div class="fs-xs text-nowrap d-md-none"><span
|
|
class="text-body-secondary">Date:</span> April 12, 2024</div>
|
|
<!-- Visible on screens < 500px wide (sm breakpoint) -->
|
|
<button
|
|
class="btn btn-sm btn-secondary rounded-pill animate-scale position-relative z-2 d-sm-none mt-3"
|
|
type="button">
|
|
<i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
|
|
Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<!-- Visible on screens > 768px wide (md breakpoint) -->
|
|
<td class="d-none d-md-table-cell py-3">April 12, 2024<span
|
|
class="date visually-hidden">1712919600</span></td>
|
|
<td class="d-none d-md-table-cell py-3">Extended</td>
|
|
<!-- Visible on screens > 500px wide (sm breakpoint) -->
|
|
<td class="d-none d-sm-table-cell text-end py-3 ps-0 ps-sm-3 pe-0" style="width: 120px">
|
|
<button class="btn btn-sm btn-secondary rounded-pill animate-scale" type="button">
|
|
<i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
|
|
Download
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<!-- Item -->
|
|
<tr>
|
|
<td class="py-3 px-0 pe-sm-2">
|
|
<div class="d-none d-md-block d-xl-none" style="width: 350px"></div>
|
|
<div class="d-none d-xl-block" style="width: 450px"></div>
|
|
<div
|
|
class="d-flex align-items-start align-items-md-center hover-effect-scale position-relative py-1">
|
|
<div class="ratio bg-body-secondary rounded overflow-hidden flex-shrink-sm-0"
|
|
style="--cz-aspect-ratio: calc(110 / 142 * 100%); max-width: 142px">
|
|
<img alt="Image" class="hover-effect-target" src="/img/account/products/18.jpg" />
|
|
</div>
|
|
<div class="ps-2 ps-sm-3 ms-1">
|
|
<h6 class="product mb-2">
|
|
<a class="fs-sm fw-medium hover-effect-underline stretched-link"
|
|
href="{{ route('second', ['shop', 'product-marketplace']) }}">A collection of colorful items</a>
|
|
</h6>
|
|
<div class="d-flex align-items-center flex-wrap gap-1 fs-xs">
|
|
<div class="author d-flex align-items-center fs-xs fw-medium text-body gap-1 p-0">
|
|
<div class="flex-shrink-0 border rounded-circle" style="width: 22px">
|
|
<div class="ratio ratio-1x1 rounded-circle overflow-hidden">
|
|
<img alt="Avatar" src="/img/shop/marketplace/avatars/04.png" />
|
|
</div>
|
|
</div>
|
|
Fireby
|
|
</div>
|
|
<div class="text-body-secondary">in</div>
|
|
<div class="category fs-xs fw-medium text-body">3D illustration</div>
|
|
</div>
|
|
<!-- Visible on screens < 769px wide (md breakpoint) -->
|
|
<div class="fs-xs text-nowrap d-md-none mt-2 mb-1"><span
|
|
class="text-body-secondary">License:</span> <span
|
|
class="license">Standard</span></div>
|
|
<div class="fs-xs text-nowrap d-md-none"><span
|
|
class="text-body-secondary">Date:</span> March 3, 2024</div>
|
|
<!-- Visible on screens < 500px wide (sm breakpoint) -->
|
|
<button
|
|
class="btn btn-sm btn-secondary rounded-pill animate-scale position-relative z-2 d-sm-none mt-3"
|
|
type="button">
|
|
<i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
|
|
Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<!-- Visible on screens > 768px wide (md breakpoint) -->
|
|
<td class="d-none d-md-table-cell py-3">March 3, 2024<span
|
|
class="date visually-hidden">1709467200</span></td>
|
|
<td class="d-none d-md-table-cell py-3">Standard</td>
|
|
<!-- Visible on screens > 500px wide (sm breakpoint) -->
|
|
<td class="d-none d-sm-table-cell text-end py-3 ps-0 ps-sm-3 pe-0" style="width: 120px">
|
|
<button class="btn btn-sm btn-secondary rounded-pill animate-scale" type="button">
|
|
<i class="ci-download-cloud animate-target fs-sm ms-n1 me-1"></i>
|
|
Download
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
@endsection
|