109 lines
4.0 KiB
HTML
109 lines
4.0 KiB
HTML
{% extends 'programmer/base.html' %}
|
|
{% load static %}
|
|
{% load seo_tags %}
|
|
|
|
{% block extra_css %}
|
|
<link rel="stylesheet" href="{% static 'programmer/css/solution-cards.css' %}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
{# Хлебные крошки #}
|
|
{% if breadcrumbs %}
|
|
<nav class="breadcrumbs" aria-label="Навигация">
|
|
{% for crumb in breadcrumbs %}
|
|
{% if crumb.url_name %}
|
|
<a href="{% url crumb.url_name %}" class="breadcrumb-link">{{ crumb.title }}</a>
|
|
<span class="breadcrumb-separator">/</span>
|
|
{% else %}
|
|
<span class="breadcrumb-current">{{ crumb.title }}</span>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</nav>
|
|
{% endif %}
|
|
|
|
{# Заголовок страницы #}
|
|
<div class="page-header">
|
|
<h1 class="page-title">{{ solution.title }}</h1>
|
|
<p class="page-subtitle">
|
|
Опубликовано: {{ solution.time_create|date:"d.m.Y" }}
|
|
</p>
|
|
</div>
|
|
|
|
{# Основное содержимое #}
|
|
<article class="content-card">
|
|
{# Секция: Описание задачи #}
|
|
<section class="solution-section">
|
|
<h2 class="section-title">📋 Описание задачи</h2>
|
|
<div class="section-content">
|
|
{{ solution.description|safe }}
|
|
</div>
|
|
</section>
|
|
|
|
{# Секция: Описание решения #}
|
|
<section class="solution-section">
|
|
<h2 class="section-title">🔧 Описание решения</h2>
|
|
<div class="section-content">
|
|
{{ solution.implementation|safe }}
|
|
</div>
|
|
</section>
|
|
|
|
{# Секция: Результат #}
|
|
<section class="solution-section">
|
|
<h2 class="section-title">✅ Результат</h2>
|
|
<div class="section-content">
|
|
{{ solution.closing|safe }}
|
|
</div>
|
|
</section>
|
|
|
|
{# Кнопка возврата #}
|
|
<div style="margin-top: 2rem; text-align: center;">
|
|
<a href="{% url 'solution' %}" class="btn btn-outline">
|
|
← Вернуться к списку проектов
|
|
</a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
function toggleAccordion(header) {
|
|
const content = header.nextElementSibling;
|
|
const icon = header.querySelector('.accordion-icon');
|
|
|
|
// Закрываем все другие открытые элементы в этом аккордеоне (опционально)
|
|
const accordion = header.closest('.solution-accordion');
|
|
if (accordion) {
|
|
accordion.querySelectorAll('.accordion-header').forEach(otherHeader => {
|
|
if (otherHeader !== header) {
|
|
const otherContent = otherHeader.nextElementSibling;
|
|
const otherIcon = otherHeader.querySelector('.accordion-icon');
|
|
otherContent.classList.remove('active');
|
|
otherHeader.classList.remove('active');
|
|
if (otherIcon) otherIcon.style.transform = 'rotate(0deg)';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Переключаем текущий элемент
|
|
content.classList.toggle('active');
|
|
header.classList.toggle('active');
|
|
|
|
if (content.classList.contains('active')) {
|
|
icon.style.transform = 'rotate(180deg)';
|
|
} else {
|
|
icon.style.transform = 'rotate(0deg)';
|
|
}
|
|
}
|
|
|
|
// Инициализация: первый элемент открыт по умолчанию
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const firstHeader = document.querySelector('.accordion-header');
|
|
if (firstHeader) {
|
|
toggleAccordion(firstHeader);
|
|
}
|
|
});
|
|
</script>
|
|
<script src="{% static 'programmer/js/floating-button.js' %}"></script>
|
|
{% endblock %} |