298 lines
9.3 KiB
HTML
298 lines
9.3 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block content %}
|
||
<style>
|
||
.reviews-section {
|
||
display: grid;
|
||
grid-template-columns: 1fr 2fr;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.add-review {
|
||
background: rgba(0, 0, 0, 0.55);
|
||
padding: 1.5rem;
|
||
border-radius: 20px;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
height: fit-content;
|
||
}
|
||
|
||
.add-review h3 {
|
||
color: #f5cba0;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.reviews-list {
|
||
background: rgba(0, 0, 0, 0.55);
|
||
padding: 1.5rem;
|
||
border-radius: 20px;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
max-height: 600px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.reviews-list h3 {
|
||
color: #f5cba0;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 0.3rem;
|
||
font-weight: 600;
|
||
color: #f5cba0;
|
||
}
|
||
|
||
.form-group select,
|
||
.form-group textarea {
|
||
width: 100%;
|
||
padding: 0.6rem;
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
border-radius: 8px;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
color: #2c2c2c;
|
||
}
|
||
|
||
.form-group textarea {
|
||
resize: none;
|
||
height: 100px;
|
||
}
|
||
|
||
.review-card {
|
||
background: rgba(0, 0, 0, 0.3);
|
||
border-radius: 12px;
|
||
padding: 1rem;
|
||
margin-bottom: 1rem;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.review-card:hover {
|
||
background: rgba(0, 0, 0, 0.4);
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
.review-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 0.5rem;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.review-header strong {
|
||
color: #f5cba0;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.rating {
|
||
color: #ffc107;
|
||
font-size: 1rem;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.review-date {
|
||
color: #d4a373;
|
||
font-size: 0.7rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.review-comment {
|
||
color: white;
|
||
line-height: 1.5;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.filters {
|
||
background: rgba(0, 0, 0, 0.3);
|
||
padding: 1rem;
|
||
border-radius: 12px;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.filter-bar {
|
||
display: flex;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
}
|
||
|
||
.filter-bar label {
|
||
font-size: 0.85rem;
|
||
font-weight: 500;
|
||
color: #f5cba0;
|
||
}
|
||
|
||
.filter-bar select {
|
||
padding: 0.4rem 0.8rem;
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
border-radius: 6px;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
cursor: pointer;
|
||
color: #2c2c2c;
|
||
}
|
||
|
||
.empty-reviews {
|
||
text-align: center;
|
||
padding: 2rem;
|
||
margin-top: 1rem;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.empty-reviews p {
|
||
color: white;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #f5cba0 0%, #d4a373 100%);
|
||
color: #2c1810;
|
||
padding: 0.6rem 1.2rem;
|
||
border: none;
|
||
border-radius: 50px;
|
||
cursor: pointer;
|
||
font-weight: bold;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: linear-gradient(135deg, #ffdd99 0%, #f5cba0 100%);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.info {
|
||
color: #f5cba0;
|
||
text-align: center;
|
||
padding: 1rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.reviews-section {
|
||
grid-template-columns: 1fr;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.add-review {
|
||
order: 2;
|
||
}
|
||
|
||
.reviews-list {
|
||
order: 1;
|
||
max-height: none;
|
||
}
|
||
|
||
.filter-bar {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.filter-bar select {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<h2>Отзывы наших посетителей</h2>
|
||
|
||
<div class="reviews-section">
|
||
<!-- Форма добавления отзыва -->
|
||
<div class="add-review">
|
||
<h3>Оставить отзыв</h3>
|
||
{% if session.user_id %}
|
||
{% if completed_orders %}
|
||
<form method="POST" class="review-form">
|
||
<div class="form-group">
|
||
<label for="order_id">Выберите заказ:</label>
|
||
<select id="order_id" name="order_id" required>
|
||
<option value="">Выберите выполненный заказ</option>
|
||
{% for order in completed_orders %}
|
||
<option value="{{ order.id }}">
|
||
Заказ #{{ order.id }} - {{ order.service_name }} ({{ order.date }})
|
||
</option>
|
||
{% endfor %}
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="rating">Оценка:</label>
|
||
<select id="rating" name="rating" required>
|
||
<option value="5">5 - Отлично</option>
|
||
<option value="4">4 - Хорошо</option>
|
||
<option value="3">3 - Удовлетворительно</option>
|
||
<option value="2">2 - Плохо</option>
|
||
<option value="1">1 - Ужасно</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="comment">Ваш отзыв:</label>
|
||
<textarea id="comment" name="comment" rows="4" placeholder="Расскажите о вашем опыте..." required></textarea>
|
||
</div>
|
||
|
||
<button type="submit" class="btn-primary">Отправить отзыв</button>
|
||
</form>
|
||
{% else %}
|
||
<p class="info">У вас нет выполненных заказов, на которые можно оставить отзыв.</p>
|
||
{% endif %}
|
||
{% else %}
|
||
<p class="info">Чтобы оставить отзыв, пожалуйста, <a href="{{ url_for('login') }}" style="color: #f5cba0;">войдите</a> в систему.</p>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- Список отзывов -->
|
||
<div class="reviews-list">
|
||
<div class="filters">
|
||
<h3>Отзывы</h3>
|
||
<div class="filter-bar">
|
||
<label>Сортировка:</label>
|
||
<select onchange="window.location.href='?sort='+this.value+'&rating={{ rating_filter }}'">
|
||
<option value="newest" {% if sort == 'newest' %}selected{% endif %}>Новые сначала</option>
|
||
<option value="oldest" {% if sort == 'oldest' %}selected{% endif %}>Старые сначала</option>
|
||
<option value="rating_high" {% if sort == 'rating_high' %}selected{% endif %}>По рейтингу (высокий)</option>
|
||
<option value="rating_low" {% if sort == 'rating_low' %}selected{% endif %}>По рейтингу (низкий)</option>
|
||
</select>
|
||
|
||
<label>Фильтр по оценке:</label>
|
||
<select onchange="window.location.href='?sort={{ sort }}&rating='+this.value">
|
||
<option value="all" {% if rating_filter == 'all' %}selected{% endif %}>Все</option>
|
||
<option value="5" {% if rating_filter == '5' %}selected{% endif %}>5 звезд</option>
|
||
<option value="4" {% if rating_filter == '4' %}selected{% endif %}>4 звезды</option>
|
||
<option value="3" {% if rating_filter == '3' %}selected{% endif %}>3 звезды</option>
|
||
<option value="2" {% if rating_filter == '2' %}selected{% endif %}>2 звезды</option>
|
||
<option value="1" {% if rating_filter == '1' %}selected{% endif %}>1 звезда</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
{% if reviews %}
|
||
{% for review in reviews %}
|
||
<div class="review-card">
|
||
<div class="review-header">
|
||
<strong>{{ review.username }}</strong>
|
||
<div class="rating">
|
||
{% for i in range(5) %}
|
||
{% if i < review.rating %}
|
||
★
|
||
{% else %}
|
||
☆
|
||
{% endif %}
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
<div class="review-date">{{ review.created_at }}</div>
|
||
<div class="review-comment">{{ review.comment }}</div>
|
||
</div>
|
||
{% endfor %}
|
||
{% else %}
|
||
<div class="empty-reviews">
|
||
<p>😊 Пока нет отзывов. Будьте первым!</p>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|