98 lines
3.8 KiB
HTML
98 lines
3.8 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n static core_tags %}
|
|
|
|
{% block content %}
|
|
<div class="container py-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8 col-lg-6">
|
|
<!-- Back to Dashboard -->
|
|
<div class="mb-4">
|
|
<a href="{% url 'dashboard' %}" class="btn btn-link text-decoration-none text-muted ps-0">
|
|
<i class="bi {% if LANGUAGE_BIDI %}bi-arrow-right{% else %}bi-arrow-left{% endif %} me-2"></i>{% trans "Back to Dashboard" %}
|
|
</a>
|
|
</div>
|
|
|
|
<div class="card shadow-sm border-0 rounded-4">
|
|
<div class="card-body p-5">
|
|
<div class="text-center mb-4">
|
|
<h2 class="fw-bold mb-3">{% trans "Rate Your Experience" %}</h2>
|
|
<p class="text-muted">
|
|
{% trans "How was the service provided by" %}
|
|
<strong>{{ parcel.carrier.username }}</strong>?
|
|
</p>
|
|
</div>
|
|
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
|
|
<!-- Star Rating -->
|
|
<div class="mb-4 text-center">
|
|
<label class="form-label d-block mb-2">{% trans "Rating" %}</label>
|
|
<div class="rating-stars">
|
|
{% for radio in form.rating %}
|
|
{{ radio.tag }}
|
|
<label for="{{ radio.id_for_label }}" class="star-label">
|
|
<i class="bi bi-star-fill"></i>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
{% if form.rating.errors %}
|
|
<div class="text-danger small mt-1">
|
|
{{ form.rating.errors }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Comment -->
|
|
<div class="mb-4">
|
|
<label for="{{ form.comment.id_for_label }}" class="form-label">{% trans "Comment" %}</label>
|
|
{{ form.comment }}
|
|
{% if form.comment.errors %}
|
|
<div class="text-danger small mt-1">
|
|
{{ form.comment.errors }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="d-grid gap-2">
|
|
<button type="submit" class="btn btn-primary btn-lg rounded-pill">
|
|
{% trans "Submit Review" %}
|
|
</button>
|
|
<a href="{% url 'dashboard' %}" class="btn btn-light rounded-pill">
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Star Rating Styles */
|
|
.rating-stars {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.rating-stars input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
.rating-stars label {
|
|
font-size: 2rem;
|
|
color: #ddd;
|
|
cursor: pointer;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.rating-stars label:hover,
|
|
.rating-stars label:hover ~ label,
|
|
.rating-stars input[type="radio"]:checked ~ label {
|
|
color: #ffc107; /* Bootstrap warning color (yellow) */
|
|
}
|
|
</style>
|
|
{% endblock %} |