Добавил открытие изображений

blog/templates/blog/article_detail.html

@@ -1,6 +1,7 @@
 {% extends 'programmer/base.html' %}
 {% load static %}
 {% load django_bootstrap5 %}
+{% load seo_tags %}
 
 {% block extra_css %}
     <link rel="stylesheet" href="{% static 'blog/css/article.css' %}">
@@ -57,4 +58,24 @@
         </p>
     {% endif %}
 </div>
+
+{% block extra_js %}
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // Находим все изображения внутри .content-card (основной контент статьи)
+        document.querySelectorAll('.content-card img').forEach(function(img) {
+            // Игнорируем, если изображение уже обёрнуто в ссылку
+            if (img.closest('a')) return;
+
+            // Меняем курсор, чтобы показать, что изображение кликабельно
+            img.style.cursor = 'pointer';
+            img.addEventListener('click', function() {
+                // Вызываем глобальную функцию openModal из recall.js
+                openModal(this.src, this.alt || 'Изображение из статьи');
+            });
+        });
+    });
+</script>
+{% endblock %}
+
 {% endblock %}

programmer/static/programmer/css/styles.css

@@ -130,8 +130,8 @@ body {
 }
 
 .logo-img {
-    width: 40px;
+    width: 70px;
-    height: 40px;
+    height: 60px;
     margin-right: 12px;
     border-radius: var(--radius-md);
     background: var(--gradient-primary);
@@ -933,7 +933,7 @@ body {
     box-shadow: var(--shadow-xl);
     animation: slideIn 0.3s ease;
     position: relative;
-    max-width: 90%;
+    max-width: 100%;
     max-height: 90vh;
     overflow: auto;
     border: 1px solid var(--border-light);

programmer/templates/programmer/base.html

@@ -29,6 +29,20 @@
     <link rel="canonical" href="{{ request.build_absolute_uri }}">
     {% bootstrap_css %}
 
+    <!-- исключаем мигание при применении темы-->
+    <script>
+        (function() {
+            try {
+                const savedTheme = localStorage.getItem('theme');
+                if (savedTheme === 'dark') {
+                    document.body.classList.add('theme-dark');
+                }
+            } catch (e) {
+                // если localStorage недоступен, игнорируем
+            }
+        })();
+    </script>
+
     <!-- Основной CSS файл (темная тема по умолчанию) -->
     <link type="text/css" href="{% static 'programmer/css/styles.css' %}" rel="stylesheet" />
 
@@ -41,395 +55,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
-    <style>
-        /* Временные стили для тумблера и мобильного меню */
-        .theme-switcher {
-            display: flex;
-            align-items: center;
-        }
-
-        .theme-toggle-checkbox {
-            display: none;
-        }
-
-        .theme-toggle-label {
-            position: relative;
-            display: flex;
-            align-items: center;
-            width: 60px;
-            height: 30px;
-            background: #222738;
-            border: 2px solid #2D3447;
-            border-radius: 25px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            padding: 2px;
-        }
-
-        .theme-toggle-slider {
-            position: absolute;
-            width: 24px;
-            height: 24px;
-            background: #FF6B00;
-            border-radius: 50%;
-            transition: all 0.3s ease;
-            left: 2px;
-            z-index: 2;
-        }
-
-        .theme-toggle-checkbox:checked + .theme-toggle-label .theme-toggle-slider {
-            transform: translateX(30px);
-            background: #0055A5;
-        }
-
-        .theme-icon {
-            position: absolute;
-            font-size: 12px;
-            transition: all 0.3s ease;
-            z-index: 1;
-        }
-
-        .theme-icon.sun {
-            left: 8px;
-            opacity: 0;
-        }
-
-        .theme-icon.moon {
-            right: 8px;
-            opacity: 1;
-        }
-
-        .theme-toggle-checkbox:checked + .theme-toggle-label .theme-icon.sun {
-            opacity: 1;
-        }
-
-        .theme-toggle-checkbox:checked + .theme-toggle-label .theme-icon.moon {
-            opacity: 0;
-        }
-
-        .nav-actions {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-        }
-
-        /* Мобильное меню */
-        .mobile-menu-btn {
-            display: none;
-            background: none;
-            border: none;
-            color: var(--text-primary);
-            font-size: 1.5rem;
-            cursor: pointer;
-            padding: 0.5rem;
-            border-radius: 4px;
-            transition: all 0.3s ease;
-        }
-
-        .mobile-menu-btn:hover {
-            background: var(--border-light);
-        }
-
-        .mobile-menu-overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.5);
-            z-index: 999;
-        }
-
-        .mobile-menu {
-            position: fixed;
-            top: 0;
-            right: -100%;
-            width: 300px;
-            height: 100%;
-            background: var(--bg-card);
-            box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
-            transition: right 0.3s ease;
-            z-index: 1000;
-            overflow-y: auto;
-            padding: 2rem 1.5rem;
-        }
-
-        .mobile-menu.active {
-            right: 0;
-        }
-
-        .mobile-menu-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 2rem;
-            padding-bottom: 1rem;
-            border-bottom: 1px solid var(--border-light);
-        }
-
-        .mobile-menu-close {
-            background: none;
-            border: none;
-            font-size: 1.5rem;
-            color: var(--text-primary);
-            cursor: pointer;
-            padding: 0.5rem;
-            border-radius: 4px;
-            transition: all 0.3s ease;
-        }
-
-        .mobile-menu-close:hover {
-            background: var(--border-light);
-        }
-
-        .mobile-nav-menu {
-            list-style: none;
-            margin-bottom: 2rem;
-        }
-
-        .mobile-nav-item {
-            margin-bottom: 0.5rem;
-        }
-
-        .mobile-nav-link {
-            display: block;
-            padding: 1rem;
-            color: var(--text-primary);
-            text-decoration: none;
-            border-radius: 8px;
-            transition: all 0.3s ease;
-            font-weight: 500;
-        }
-
-        .mobile-nav-link:hover,
-        .mobile-nav-link.active {
-            background: var(--primary);
-            color: white;
-        }
-
-        .mobile-nav-actions {
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-            padding-top: 1rem;
-            border-top: 1px solid var(--border-light);
-        }
-
-        /* ===== MOBILE RESPONSIVE STYLES ===== */
-        @media (max-width: 768px) {
-
-            .nav-actions .theme-switcher {
-                display: none;
-            }
-
-            .user-menu {
-                display: none;
-            }
-
-            .hero-title {
-                font-size: 2.5rem;
-            }
-
-            .hero-subtitle {
-                font-size: 1.125rem;
-                padding: 0 1rem;
-            }
-
-            .page-title {
-                font-size: 2.25rem;
-            }
-
-            .page-subtitle {
-                font-size: 1.125rem;
-                padding: 0 1rem;
-            }
-
-            .grid-2 {
-                grid-template-columns: 1fr;
-                gap: 1.5rem;
-            }
-
-            .modern-card {
-                padding: 1.5rem;
-                margin-bottom: 1.5rem;
-            }
-
-            .card-title {
-                font-size: 1.375rem;
-            }
-
-            .content-card {
-                padding: 1.5rem;
-            }
-
-            .about-section {
-                padding: 1.5rem;
-            }
-
-            .skills-grid {
-                grid-template-columns: 1fr;
-                gap: 1.5rem;
-            }
-
-            .competence-item {
-                flex-direction: column;
-                padding: 1.5rem;
-                gap: 1.5rem;
-            }
-
-            .competence-scan-container {
-                width: 100%;
-                max-width: 280px;
-                margin: 0 auto;
-            }
-
-            .recall-header {
-                flex-direction: column;
-                gap: 1rem;
-                align-items: flex-start;
-            }
-
-            .recall-meta {
-                flex-direction: column;
-                gap: 0.5rem;
-            }
-
-            .footer-content {
-                grid-template-columns: 1fr;
-                gap: 2rem;
-                text-align: center;
-            }
-
-            .footer-contacts p {
-                justify-content: center;
-            }
-
-            .card-actions {
-                flex-direction: column;
-            }
-
-            .btn {
-                width: 100%;
-                justify-content: center;
-            }
-
-            .modal-content {
-                margin: 5% auto;
-                max-width: 95%;
-            }
-
-            .modal-header {
-                padding: 1.5rem 1.5rem 1rem;
-            }
-
-            .modal-body {
-                padding: 1.5rem;
-            }
-
-            .page-content {
-                padding: 1.5rem;
-            }
-
-            .breadcrumbs {
-                font-size: 0.8rem;
-            }
-        }
-
-        @media (max-width: 480px) {
-            .hero-title {
-                font-size: 2rem;
-            }
-
-            .hero-subtitle {
-                font-size: 1rem;
-            }
-
-            .page-title {
-                font-size: 1.875rem;
-            }
-
-            .modern-card {
-                padding: 1.25rem;
-            }
-
-            .content-card {
-                padding: 1.25rem;
-            }
-
-            .about-section {
-                padding: 1.25rem;
-            }
-
-            .card-title {
-                font-size: 1.25rem;
-            }
-
-            .competence-scan-container {
-                max-width: 100%;
-            }
-        }
-
-        /* Cookie consent bottom */
-        .cookie-bottom {
-            position: fixed;
-            bottom: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            z-index: 9999;
-            width: auto;
-            max-width: 450px;
-            min-width: 300px;
-            background-color: var(--bg-card, #ffffff);
-            border-radius: 12px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-            border: 1px solid var(--border-light, #e0e0e0);
-            animation: slideUpFade 0.3s ease;
-        }
-
-        @keyframes slideUpFade {
-            from { opacity: 0; transform: translate(-50%, 20px); }
-            to { opacity: 1; transform: translate(-50%, 0); }
-        }
-
-        .cookie-bottom-content {
-            padding: 1.5rem;
-            text-align: center;
-        }
-
-        .cookie-bottom-content h3 {
-            margin: 0 0 0.75rem 0;
-            font-size: 1.25rem;
-            color: var(--text-primary, #333);
-        }
-
-        .cookie-bottom-content p {
-            margin: 0 0 1.5rem 0;
-            font-size: 0.95rem;
-            line-height: 1.5;
-            color: var(--text-secondary, #666);
-        }
-
-        .cookie-bottom-content a {
-            color: var(--primary, #007bff);
-            text-decoration: underline;
-        }
-
-        .cookie-bottom-content .btn {
-            width: 100%;
-            padding: 0.75rem;
-            font-size: 1rem;
-            border-radius: 8px;
-        }
-
-        @media (max-width: 480px) {
-            .cookie-bottom {
-                max-width: 90%;
-                bottom: 10px;
-            }
-        }
-    </style>
-
     {% block extra_css %}
     <!-- Дополнительные CSS файлы для конкретных страниц -->
     {% endblock %}
@@ -700,9 +325,25 @@
         });
     </script>
 
+    <!-- Скрипт для модального окна -->
+    <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()">&times;</button>
+            </div>
+            <div class="modal-body">
+                <img class="modal-image" id="modalImage" alt="">
+            </div>
+        </div>
+    </div>
+
     {% block extra_js %}
-    <!-- Дополнительные JS файлы для конкретных страниц -->
+
-<!--    <script src="{% static 'programmer/js/1c-enterprise.min.js' %}"></script>-->
+
     {% endblock %}
 
     <script>

programmer/templates/programmer/recall.html

@@ -88,87 +88,4 @@
 </div>
 {% endif %}
 
-<!-- Модальное окно для увеличенного просмотра -->
-<div id="imageModal" class="modal">
-    <div class="modal-content">
-        <div class="modal-header">
-            <h3 id="modalTitle">Отзыв</h3>
-            <button class="modal-close" onclick="closeModal()">&times;</button>
-        </div>
-        <div class="modal-body">
-            <img class="modal-image" id="modalImage">
-        </div>
-    </div>
-</div>
-
-<script>
-function openModal(imageUrl, title) {
-    console.log('Opening modal with:', imageUrl);
-    const modal = document.getElementById('imageModal');
-    const modalImg = document.getElementById('modalImage');
-    const modalTitle = document.getElementById('modalTitle');
-
-    if (modal && modalImg) {
-        modal.style.display = "block";
-        modalImg.src = imageUrl;
-        if (title && modalTitle) {
-            modalTitle.textContent = title;
-        }
-
-        // Добавляем класс для анимации
-        setTimeout(() => {
-            modal.classList.add('active');
-        }, 10);
-    }
-}
-
-function closeModal() {
-    const modal = document.getElementById('imageModal');
-    if (modal) {
-        modal.classList.remove('active');
-        setTimeout(() => {
-            modal.style.display = "none";
-        }, 300);
-    }
-}
-
-// Закрытие модального окна при клике вне изображения
-document.addEventListener('click', function(event) {
-    const modal = document.getElementById('imageModal');
-    if (event.target === modal) {
-        closeModal();
-    }
-});
-
-// Закрытие по ESC
-document.addEventListener('keydown', function(event) {
-    if (event.key === 'Escape') {
-        closeModal();
-    }
-});
-
-// Адаптация размера изображения в модальном окне
-window.addEventListener('resize', function() {
-    const modalImg = document.getElementById('modalImage');
-    if (modalImg && modalImg.src) {
-        adjustModalImageSize();
-    }
-});
-
-function adjustModalImageSize() {
-    const modalImg = document.getElementById('modalImage');
-    const modalContent = document.querySelector('.modal-content');
-
-    if (modalImg && modalContent) {
-        const maxWidth = window.innerWidth * 0.9;
-        const maxHeight = window.innerHeight * 0.8;
-
-        modalImg.style.maxWidth = `${maxWidth}px`;
-        modalImg.style.maxHeight = `${maxHeight}px`;
-    }
-}
-
-{% block extra_js %}
-<script src="{% static 'programmer/js/recall.js' %}"></script>
-{% endblock %}
 {% endblock %}