From cde6762f9e3c671fd46e7cc1110a03d9c02deefb Mon Sep 17 00:00:00 2001
From: NikDizell <nikdizell@gmail.com>
Date: Wed, 12 Nov 2025 11:48:08 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D1=81=D0=B2=D0=BE=D1=80=D0=B0=D1=87=D0=B8=D0=B2=D0=B0=D0=B5?=
 =?UTF-8?q?=D0=BC=D0=BE=D1=81=D1=82=D1=8C=20=D0=B1=D0=BB=D0=BE=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=B2=20=D0=BF=D1=80=D0=BE=D0=B5=D0=BA=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../programmer/css/solution-accordion.css     | 67 +++++++++++++++++++
 .../programmer/js/solution-accordion.js       | 46 +++++++++++++
 .../programmer/templates/programmer/base.html |  4 ++
 .../templates/programmer/solution.html        | 23 +++++--
 4 files changed, 134 insertions(+), 6 deletions(-)
 create mode 100644 OneCprogsite/programmer/static/programmer/css/solution-accordion.css
 create mode 100644 OneCprogsite/programmer/static/programmer/js/solution-accordion.js

diff --git a/OneCprogsite/programmer/static/programmer/css/solution-accordion.css b/OneCprogsite/programmer/static/programmer/css/solution-accordion.css
new file mode 100644
index 0000000..d052032
--- /dev/null
+++ b/OneCprogsite/programmer/static/programmer/css/solution-accordion.css
@@ -0,0 +1,67 @@
+/* solution-accordion.css */
+.solution-accordion {
+    margin: 2rem 0;
+}
+
+.accordion-item {
+    background: var(--bg-primary);
+    border-radius: var(--radius-lg);
+    margin-bottom: 1rem;
+    border: 2px solid var(--border-light);
+    overflow: hidden;
+    transition: var(--transition);
+}
+
+.accordion-item:hover {
+    border-color: var(--primary-light);
+}
+
+.accordion-header {
+    padding: 1.5rem;
+    background: var(--gradient-primary);
+    color: white;
+    font-weight: 600;
+    font-size: 1.125rem;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: var(--transition);
+    user-select: none;
+}
+
+.accordion-header:hover {
+    background: var(--primary-dark);
+}
+
+.accordion-content {
+    padding: 0;
+    background: var(--bg-card);
+    line-height: 1.7;
+    color: var(--text-secondary);
+    max-height: 0;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.accordion-content.active {
+    padding: 1.5rem;
+    max-height: 5000px;
+}
+
+.accordion-icon {
+    transition: transform 0.3s ease;
+    font-size: 0.8em;
+}
+
+.accordion-header.active .accordion-icon {
+    transform: rotate(180deg);
+}
+
+.accordion-content p {
+    margin-bottom: 1rem;
+}
+
+.accordion-content p:last-child {
+    margin-bottom: 0;
+}
\ No newline at end of file
diff --git a/OneCprogsite/programmer/static/programmer/js/solution-accordion.js b/OneCprogsite/programmer/static/programmer/js/solution-accordion.js
new file mode 100644
index 0000000..1274669
--- /dev/null
+++ b/OneCprogsite/programmer/static/programmer/js/solution-accordion.js
@@ -0,0 +1,46 @@
+// solution-accordion.js
+function toggleAccordion(header) {
+    const content = header.nextElementSibling;
+    const icon = header.querySelector('.accordion-icon');
+
+    // Переключаем только текущий аккордеон
+    header.classList.toggle('active');
+    content.classList.toggle('active');
+    icon.style.transform = header.classList.contains('active') ? 'rotate(180deg)' : 'rotate(0deg)';
+}
+
+// Функция для открытия всех аккордеонов
+function expandAll() {
+    document.querySelectorAll('.accordion-content').forEach(content => {
+        content.classList.add('active');
+    });
+    document.querySelectorAll('.accordion-header').forEach(header => {
+        header.classList.add('active');
+    });
+    document.querySelectorAll('.accordion-icon').forEach(icon => {
+        icon.style.transform = 'rotate(180deg)';
+    });
+}
+
+// Функция для закрытия всех аккордеонов
+function collapseAll() {
+    document.querySelectorAll('.accordion-content').forEach(content => {
+        content.classList.remove('active');
+    });
+    document.querySelectorAll('.accordion-header').forEach(header => {
+        header.classList.remove('active');
+    });
+    document.querySelectorAll('.accordion-icon').forEach(icon => {
+        icon.style.transform = 'rotate(0deg)';
+    });
+}
+
+// Автоматически открываем первый аккордеон в каждой карточке при загрузке
+document.addEventListener('DOMContentLoaded', function() {
+    document.querySelectorAll('.content-card').forEach(card => {
+        const firstAccordion = card.querySelector('.accordion-header');
+        if (firstAccordion) {
+            toggleAccordion(firstAccordion);
+        }
+    });
+});
\ No newline at end of file
diff --git a/OneCprogsite/programmer/templates/programmer/base.html b/OneCprogsite/programmer/templates/programmer/base.html
index e9148f3..09665ea 100644
--- a/OneCprogsite/programmer/templates/programmer/base.html
+++ b/OneCprogsite/programmer/templates/programmer/base.html
@@ -335,6 +335,10 @@
             }
         }
     </style>
+
+    {% block extra_css %}
+    <!-- Дополнительные CSS файлы для конкретных страниц -->
+    {% endblock %}
 </head>
 <body>
     <!-- Header -->
diff --git a/OneCprogsite/programmer/templates/programmer/solution.html b/OneCprogsite/programmer/templates/programmer/solution.html
index aba6238..81e686d 100644
--- a/OneCprogsite/programmer/templates/programmer/solution.html
+++ b/OneCprogsite/programmer/templates/programmer/solution.html
@@ -1,5 +1,10 @@
 {% extends 'programmer/base.html' %}
 {% load django_bootstrap5 %}
+{% load static %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'programmer/css/solution-accordion.css' %}">
+{% endblock %}
 
 {% block content %}
 <h1>{{title}}</h1>
@@ -13,8 +18,9 @@
 
             <div class="solution-accordion">
                 <div class="accordion-item">
-                    <div class="accordion-header">
-                        <strong>Описание задачи</strong>
+                    <div class="accordion-header" onclick="toggleAccordion(this)">
+                        <strong>📋 Описание задачи</strong>
+                        <span class="accordion-icon">▼</span>
                     </div>
                     <div class="accordion-content">
                         {{p.description}}
@@ -22,8 +28,9 @@
                 </div>
 
                 <div class="accordion-item">
-                    <div class="accordion-header">
-                        <strong>Описание решения</strong>
+                    <div class="accordion-header" onclick="toggleAccordion(this)">
+                        <strong>🔧 Описание решения</strong>
+                        <span class="accordion-icon">▼</span>
                     </div>
                     <div class="accordion-content">
                         {{p.implementation}}
@@ -31,8 +38,9 @@
                 </div>
 
                 <div class="accordion-item">
-                    <div class="accordion-header">
-                        <strong>Результат</strong>
+                    <div class="accordion-header" onclick="toggleAccordion(this)">
+                        <strong>✅ Результат</strong>
+                        <span class="accordion-icon">▼</span>
                     </div>
                     <div class="accordion-content">
                         {{p.closing}}
@@ -56,4 +64,7 @@
 </div>
 {% endif %}
 
+<!-- Подключаем внешний скрипт -->
+<script src="{% static 'programmer/js/solution-accordion.js' %}"></script>
+
 {% endblock %}
\ No newline at end of file