mirror of
https://github.com/Shchoholiev/shopping-assistant-web-client.git
synced 2025-06-29 18:21:09 +00:00
87 lines
4.2 KiB
Plaintext
87 lines
4.2 KiB
Plaintext
@page "/cards"
|
|
|
|
<div class="card-page">
|
|
|
|
<div class="head">
|
|
<button class="back-button"></button>
|
|
<p class="header-text">Gift for Jessica</p>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="back-card"></div>
|
|
@if (Products != null && Products.Count != 0 && currentProduct != Products.Count && currentProduct >= 0) {
|
|
<div class="card">
|
|
<div class="slider-container">
|
|
<div class="slider">
|
|
@foreach (var image in Products[currentProduct].ImagesUrls) {
|
|
if (currentImage == image) {
|
|
<img src="@image" class="slider-image" @onclick="(() => ChangeImage(image))"/>
|
|
}
|
|
}
|
|
</div>
|
|
<div class="dots">
|
|
@for (var i = 0; i < Products[currentProduct].ImagesUrls.Length; i++) {
|
|
var dotIndex = i;
|
|
<div class="dot @(i == currentIndex ? "active-dot" : "")" @onclick="(() => ChangeImageDot(dotIndex))"></div>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="product-info">
|
|
|
|
<p class="name">@Products[currentProduct].Name</p>
|
|
<p class="description">@Products[currentProduct].Description</p>
|
|
|
|
<div class="rating-price-row">
|
|
<label class="rating">@Products[currentProduct].Rating</label>
|
|
@{
|
|
int whole = (int)Math.Floor(Products[currentProduct].Rating);
|
|
double fractal = Products[currentProduct].Rating - whole;
|
|
string price = "N/A";
|
|
}
|
|
@for(int i = 0; i < 5; i++) {
|
|
if(i < whole) {
|
|
<img class="star" src="/images/star-cards.png">
|
|
continue;
|
|
}
|
|
if(fractal != 0.0) {
|
|
<img class="star" src="/images/half-star.png">
|
|
fractal -= fractal;
|
|
}
|
|
else {
|
|
<img class="star" src="/images/empty-star.png">
|
|
}
|
|
}
|
|
<label class="price-label">@price</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="buttons-container">
|
|
<div class="buttons-row">
|
|
<button class="cancel-button" @onclick="(() => LoadNextProduct())"></button>
|
|
<button class="return-button" @onclick="(() => LoadPreviousProduct())"></button>
|
|
<button class="like-button" @onclick="(() => LoadNextProduct())"></button>
|
|
</div>
|
|
</div>
|
|
}
|
|
else {
|
|
<style>
|
|
.back-card {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<div class="card-text">
|
|
<label class="bold-text">The cards ended</label>
|
|
<label class="more-text">Click <img src="/images/load-more-small.png"/> to see more<br> or <img src="/images/return-small.png"/> to exit</label>
|
|
</div>
|
|
<div class="buttons-container">
|
|
<div class="buttons-row">
|
|
<button class="exit-button" @onclick="(() => NavigateToMain())"></button>
|
|
<button class="return-button" @onclick="(() => LoadPreviousProduct())"></button>
|
|
<button class="more-button" @onclick="(() => LoadMoreProducts())"></button>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
</div>
|