Добавил открытие изображений
This commit is contained in:
NikDizell
parent
4f096dbe3e
commit
d07e70def4
@ -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 %}
|
||||
@ -130,8 +130,8 @@ body {
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 70px;
|
||||
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);
|
||||
|
||||
@ -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()">×</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>
|
||||
|
||||
@ -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()">×</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 %}
|
||||
Loading…
x
Reference in New Issue
Block a user