PIAPS_CW/WebApp/Pages/Index.cshtml

74 lines
3.4 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@page
@model WebApp.Pages.IndexModel
@{
ViewData["Title"] = "Catalog Page";
}
<!-- Шапка -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Catalog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Категории
</a>
@* МОЖНО РЕАЛИЗОВАТЬ ПОЗЖЕ *@
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Пистолеты</a></li>
<li><a class="dropdown-item" href="#">Револьверы</a></li>
<li><a class="dropdown-item" href="#">Винтовки</a></li>
</ul>
</li>
</ul>
<form class="d-flex" method="get">
<input class="form-control me-2" type="search" placeholder="Поиск" name="search" value="">
<button class="btn btn-outline-success" type="submit"><i class="fas fa-search"></i></button>
</form>
<div class="form-group ms-3">
<div class="d-flex align-items-center">
<input type="range" step="1000" min="0" max="10000" value="50000" class="custom-range me-2" id="priceFrom">
<label for="priceFrom">От: <span id="priceLabelFrom">50 000</span> руб.</label>
</div>
<div class="d-flex align-items-center">
<input type="range" step="1000" min="0" max="100000" value="50000" class="custom-range me-2" id="priceTo">
<label for="priceTo">До: <span id="priceLabelTo">50 000</span> руб.</label>
</div>
</div>
</div>
</div>
</nav>
@* КАРТОЧКИ ТОВАРОВ *@
<div class="row row-cols-1 row-cols-md-3 g-6">
@foreach (var weapon in @Model.ProductsModel)
{
<div class="card">
<img src="@Model.GetMediaByProduct(weapon)[0].Location" class="card-img-top" alt="@weapon.Name">
<div class="card-body">
<h5 class="card-title">@weapon.Name</h5>
<p class="card-text">Цена: >@weapon.Price руб.</p>
<a href="#" class="btn btn-primary">В корзину</a>
</div>
</div>
}
</div>
@section Scripts {
<script>
// СЛАЙДЕРЫ
document.getElementById("priceFrom").addEventListener("input", function () {
var price = this.value;
document.getElementById("priceLabelFrom").textContent = price + " р.";
});
document.getElementById("priceTo").addEventListener("input", function () {
var price = this.value;
document.getElementById("priceLabelTo").textContent = price + " р.";
});
</script>
}