186 lines
11 KiB
HTML
186 lines
11 KiB
HTML
{% extends '__layout__.html' %}
|
|
{% block title %}Catalog{% endblock %}
|
|
{% block head %}
|
|
<link href="/static/css/catalog.css" rel="stylesheet"/>
|
|
<style>
|
|
.text-secondary {
|
|
color: rgb(199, 199, 199) !important;
|
|
}
|
|
a {
|
|
text-decoration: none !important;
|
|
color: inherit;
|
|
}
|
|
.text-tickets {
|
|
color: rgb(224, 224, 60) !important;
|
|
font-size: small;
|
|
font-weight: 600;
|
|
}
|
|
.text-robux {
|
|
color: rgb(26, 212, 103) !important;
|
|
font-size: small;
|
|
font-weight: 600;
|
|
}
|
|
.text-limited {
|
|
color: rgb(255,255,255) !important;
|
|
background-color: rgb(9, 136, 62);
|
|
width: fit-content;
|
|
padding-left: 10px;
|
|
font-size: 10px;
|
|
border-top-right-radius: 5px;
|
|
margin: 0;
|
|
}
|
|
.text-limitedu {
|
|
color: rgb(0,0,0) !important;
|
|
background-color: rgb(245, 245, 52);
|
|
padding-right: 3px;
|
|
font-weight: 800;
|
|
border-top-right-radius: 5px;
|
|
padding-left: 3px;
|
|
}
|
|
.text-remaining {
|
|
color: rgb(197, 21, 21) !important;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|
|
<meta id="catalog-info" data-category-id="{{categoryid}}">
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div id="main">
|
|
<div class="container" style="max-width: 1200px;">
|
|
<div class="d-md-flex">
|
|
<h1>Catalog</h1>
|
|
<div class="ms-md-5 row d-flex w-100 align-items-center">
|
|
<form method="post">
|
|
<div class="input-group">
|
|
<div class="form-floating" style="width: 52%;">
|
|
<input type="text" class="form-control" id="search-input" name="search-input" {%if query != None: %}value="{{query}}"{%endif%} placeholder="Awesome Shirt">
|
|
<label for="search-input">Search</label>
|
|
</div>
|
|
<div class="form-floating" style="min-width: 160px;">
|
|
<select class="form-select" id="order-by" name="order-by">
|
|
<option value="0">Relevance</option>
|
|
<option value="1" {%if SortType == 1 %}selected{%endif%}>Price (Low to High)</option>
|
|
<option value="2" {%if SortType == 2 %}selected{%endif%}>Price (High to Low)</option>
|
|
<option value="3" {%if SortType == 3 %}selected{%endif%}>Recently Updated</option>
|
|
<option value="4" {%if SortType == 4 %}selected{%endif%}>Best Selling</option>
|
|
</select>
|
|
<label for="order-by">Order By</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-outline-primary fw-bold" style="min-width: 50px;"><i class="bi bi-search"></i></button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-2 p-0 mt-3 pb-3">
|
|
<div class="border rounded p-2" style="background-color: rgb(19, 19, 19);">
|
|
<h5 class="text-center m-1" style="font-size: 20px;">Categories</h5>
|
|
<div class="row">
|
|
<div class="text-white col-md-12 col-sm-6">
|
|
<a href="/catalog/?category=0"><b>Featured</b></a>
|
|
<div class="ms-2 text-secondary">
|
|
<a href="/catalog/?category=1"><p class="m-0">Featured Hats</p></a>
|
|
<a href="/catalog/?category=2"><p class="m-0">Featured Gears</p></a>
|
|
<a href="/catalog/?category=3"><p class="m-0">Featured Faces</p></a>
|
|
</div>
|
|
</div>
|
|
<div class="text-white col-md-12 col-sm-6">
|
|
<a href="/catalog/?category=4"><b>Collectibles</b></a>
|
|
<div class="ms-2 text-secondary">
|
|
<a href="/catalog/?category=5"><p class="m-0">Collectible Hats</p></a>
|
|
<a href="/catalog/?category=6"><p class="m-0">Collectible Gears</p></a>
|
|
<a href="/catalog/?category=7"><p class="m-0">Collectible Faces</p></a>
|
|
</div>
|
|
</div>
|
|
<div class="text-white col-md-12 col-sm-6">
|
|
<a href="/catalog/?category=8"><b>Clothing</b></a>
|
|
<div class="ms-2 text-secondary">
|
|
<a href="/catalog/?category=9"><p class="m-0">Hats</p></a>
|
|
<a href="/catalog/?category=10"><p class="m-0">Shirts</p></a>
|
|
<a href="/catalog/?category=11"><p class="m-0">T-Shirts</p></a>
|
|
<a href="/catalog/?category=12"><p class="m-0">Pants</p></a>
|
|
<a href="/catalog/?category=13"><p class="m-0">Packages</p></a>
|
|
</div>
|
|
</div>
|
|
<div class="text-white col-md-12 col-sm-6">
|
|
<a href="/catalog/?category=14"><b>Body Parts</b></a>
|
|
<div class="ms-2 text-secondary">
|
|
<a href="/catalog/?category=41"><p class="m-0">Hairs</p></a>
|
|
<a href="/catalog/?category=15"><p class="m-0">Heads</p></a>
|
|
<a href="/catalog/?category=16"><p class="m-0">Faces</p></a>
|
|
<a href="/catalog/?category=13"><p class="m-0">Packages</p></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col mt-3">
|
|
<h3 class="mb-1">{{categoryname}}</h3>
|
|
<div class="row">
|
|
{% for item in queryResults %}
|
|
<div class="col-md-2 col-3 p-1">
|
|
<a href="/catalog/{{item.id}}/">
|
|
<div class="rounded item-card p-2">
|
|
<div class="border rounded overflow-hidden position-relative">
|
|
<img src="/Thumbs/Asset.ashx?x=180&y=180&assetId={{item.id}}" width="100%" style="aspect-ratio: 1/1;" alt="{{item.name}}">
|
|
{% if item.is_limited: %}<p class="position-absolute m-0 fw-bold text-limited" style="bottom:-1px;left:0px;">LIMITED {%if item.is_limited_unique: %}<span class="text-limitedu">U</span>{%else%}<span class="me-2"></span>{%endif%}</p>{% endif %}
|
|
{% if item.offsale_at != None %}<p class="position-absolute bg-danger m-0" style="top: 0px;right: 0px;border-bottom-left-radius: 10px;padding: 5px;"><i class="bi bi-alarm text-white"></i></p>{% endif %}
|
|
</div>
|
|
<p class="text-secondary m-0" style="font-size:12px;">{{item.name}}</p>
|
|
{% if item.is_for_sale: %}
|
|
{% if item.price_robux == 0 and item.price_tix == 0: %}
|
|
<p class="text-robux m-0 ">FREE</p>
|
|
{% else %}
|
|
{% if item.price_robux != 0: %}
|
|
<p class="text-robux m-0">R$ {{item.price_robux}}</p>
|
|
{% endif %}
|
|
{% if item.price_tix != 0: %}
|
|
<p class="text-tickets m-0">T$ {{item.price_tix}}</p>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% if item.is_limited_unique : %}
|
|
<p class="text-remaining m-0">Remaining: <span class="text-white">{{item.serial_count - item.sale_count}}</span></p>
|
|
{%endif%}
|
|
{% else %}
|
|
{% if item.is_limited: %}
|
|
{% if item.price_robux == 0 and item.price_tix != 0: %}
|
|
<p class="text-tickets m-0"><span class="text-secondary fw-normal">was</span> T$ {{item.price_tix or "-"}}</p>
|
|
{% elif item.price_robux != 0 and item.price_tix != 0: %}
|
|
<p class="text-robux m-0"><span class="text-secondary fw-normal">was</span> R$ {{item.price_robux or "-"}}</p>
|
|
{% elif item.price_robux != 0 and item.price_tix == 0: %}
|
|
<p class="text-robux m-0"><span class="text-secondary fw-normal">was</span> R$ {{item.price_robux or "-"}}</p>
|
|
{% else %}
|
|
<p class="text-robux m-0"><span class="text-secondary fw-normal">was</span> FREE</p>
|
|
{% endif %}
|
|
<p class="text-robux m-0"><span class="text-secondary fw-normal">now</span> R$ {{item.best_price}}</p>
|
|
{%else%}
|
|
<p class="text-secondary m-0 ">Offsale</p>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div></a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% if len(queryResults) == 0: %}
|
|
<p class="w-100 text-center mt-5 mb-5">No results found</p>
|
|
{% endif %}
|
|
<div class="d-flex">
|
|
{% if PreviousPage > 0: %}
|
|
<a href="/catalog/?category={{CatalogType}}&page={{PreviousPage}}&sort={{SortType}}" class="ms-auto text-decoration-none text-primary">Previous</a>
|
|
{%else%}
|
|
<a class="ms-auto text-decoration-none text-secondary">Previous</a>
|
|
{% endif %}
|
|
<p class="ms-2 me-2 text-white">Page {{PageNumber}} of {{totalPages}}</p>
|
|
{% if NextPage > 0: %}
|
|
<a href="/catalog/?category={{CatalogType}}&page={{NextPage}}&sort={{SortType}}" class="me-auto text-decoration-none text-primary">Next</a>
|
|
{%else%}
|
|
<a class="me-auto text-decoration-none text-secondary">Next</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|