107 lines
3.8 KiB
HTML
107 lines
3.8 KiB
HTML
{% extends 'programmer/base.html' %}
|
||
{% load django_bootstrap5 %}
|
||
{% load static %}
|
||
{% load seo_tags %}
|
||
|
||
{% block extra_css %}
|
||
<link rel="stylesheet" href="{% static 'programmer/css/recall.css' %}">
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="page-header">
|
||
<h1 class="page-title">Отзывы клиентов</h1>
|
||
<p class="page-subtitle">Реальные отзывы о работе программиста 1С</p>
|
||
</div>
|
||
|
||
<div class="recall-grid">
|
||
{% for p in posts %}
|
||
<div class="modern-card fade-in">
|
||
|
||
<!-- Добавляем микроразметку для отзыва -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Review",
|
||
"itemReviewed": {
|
||
"@type": "Service",
|
||
"name": "Услуги программиста 1С"
|
||
},
|
||
"author": {
|
||
"@type": "Organization",
|
||
"name": "{{ p.title }}"
|
||
},
|
||
"reviewRating": {
|
||
"@type": "Rating",
|
||
"ratingValue": "5",
|
||
"bestRating": "5"
|
||
},
|
||
"datePublished": "{{ p.time_create|date:'Y-m-d' }}",
|
||
"description": "{{ p.content|striptags|truncatewords:50 }}"
|
||
}
|
||
</script>
|
||
|
||
<div class="recall-item">
|
||
<div class="recall-header">
|
||
<div class="recall-info">
|
||
<h2 class="recall-title">{{ p.title }}</h2>
|
||
{% if p.time_create %}
|
||
<!-- <div class="recall-meta">-->
|
||
<!-- <span class="recall-date">{{ p.time_create|date:"d.m.Y" }}</span>-->
|
||
<!-- </div>-->
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="recall-content">
|
||
{% if p.scan %}
|
||
<div class="recall-scan-wrapper">
|
||
<div class="recall-scan-container">
|
||
<img src="{{ p.scan.url }}"
|
||
alt="Отзыв от {{ p.title }}"
|
||
class="recall-scan"
|
||
onclick="openModal('{{ p.scan.url }}', '{{ p.title }}')">
|
||
<div class="scan-hint">
|
||
<span class="scan-zoom-icon">🔍</span>
|
||
<span class="scan-text">Нажмите для увеличения</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<div class="recall-text">
|
||
{{ p.content|linebreaks }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
{% if not posts %}
|
||
<div class="modern-card text-center fade-in">
|
||
<h3>💬 Отзывы клиентов</h3>
|
||
<p class="card-subtitle">Здесь будут отображаться отзывы от довольных клиентов</p>
|
||
<div class="card-actions justify-center">
|
||
<a href="{% url 'solution' %}" class="btn btn-primary">Посмотреть проекты</a>
|
||
<a href="{% url 'about' %}" class="btn btn-secondary">Связаться со мной</a>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- Скрипт для модального окна -->
|
||
<script src="{% static 'programmer/js/recall.js' %}"></script>
|
||
|
||
<!-- Модальное окно для увеличения изображений -->
|
||
<div id="imageModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3 id="modalTitle">Просмотр изображения</h3>
|
||
<button class="modal-close" onclick="closeModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<img class="modal-image" id="modalImage" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{% endblock %} |