diff --git a/create_test_projects.py b/create_test_projects.py
new file mode 100644
index 0000000..1e14b51
--- /dev/null
+++ b/create_test_projects.py
@@ -0,0 +1,192 @@
+#!/usr/bin/env python3
+import os
+import sys
+import django
+from datetime import datetime, date
+
+# Настройка Django
+sys.path.append('/app/smartsoltech')
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'smartsoltech.settings')
+django.setup()
+
+from web.models import Project, Category, Client, Service, Order
+from django.contrib.auth.models import User
+
+def create_test_projects():
+ # Создаем или получаем категории
+ categories = []
+
+ cat_web, _ = Category.objects.get_or_create(
+ slug='web-development',
+ defaults={
+ 'name': 'Веб-разработка',
+ 'icon': 'fas fa-code',
+ 'order': 1,
+ 'description': 'Создание веб-сайтов и приложений'
+ }
+ )
+ categories.append(cat_web)
+
+ cat_mobile, _ = Category.objects.get_or_create(
+ slug='mobile-apps',
+ defaults={
+ 'name': 'Мобильные приложения',
+ 'icon': 'fas fa-mobile-alt',
+ 'order': 2,
+ 'description': 'Разработка iOS и Android приложений'
+ }
+ )
+ categories.append(cat_mobile)
+
+ cat_design, _ = Category.objects.get_or_create(
+ slug='design',
+ defaults={
+ 'name': 'Дизайн',
+ 'icon': 'fas fa-palette',
+ 'order': 3,
+ 'description': 'UI/UX дизайн и брендинг'
+ }
+ )
+ categories.append(cat_design)
+
+ cat_analytics, _ = Category.objects.get_or_create(
+ slug='analytics',
+ defaults={
+ 'name': 'Аналитика',
+ 'icon': 'fas fa-chart-bar',
+ 'order': 4,
+ 'description': 'Системы аналитики и отчетности'
+ }
+ )
+ categories.append(cat_analytics)
+
+ cat_ecommerce, _ = Category.objects.get_or_create(
+ slug='ecommerce',
+ defaults={
+ 'name': 'E-commerce',
+ 'icon': 'fas fa-shopping-cart',
+ 'order': 5,
+ 'description': 'Интернет-магазины и торговые платформы'
+ }
+ )
+ categories.append(cat_ecommerce)
+
+ # Создаем или получаем тестового клиента
+ client, _ = Client.objects.get_or_create(
+ email='test@example.com',
+ defaults={
+ 'first_name': 'Тестовый',
+ 'last_name': 'Клиент',
+ 'phone_number': '+7-900-000-0000'
+ }
+ )
+
+ # Создаем или получаем тестовую услугу
+ service, _ = Service.objects.get_or_create(
+ name='Разработка сайта',
+ defaults={
+ 'description': 'Профессиональная разработка веб-сайтов',
+ 'price': 100000.00,
+ 'category': cat_web
+ }
+ )
+
+ # Тестовые данные проектов
+ test_projects = [
+ {
+ 'name': 'Корпоративный портал TechCorp',
+ 'short_description': 'Современный корпоративный портал с системой управления документами, интеграцией с CRM и модулем HR.',
+ 'description': '
Разработан комплексный корпоративный портал для компании TechCorp, включающий в себя систему управления документами, интеграцию с CRM-системой и модуль управления персоналом.
Основные функции: документооборот, календарь событий, внутренние новости, система заявок, интеграция с почтовыми сервисами.
',
+ 'technologies': 'Django, PostgreSQL, Redis, Celery, Docker, React.js',
+ 'duration': '4 месяца',
+ 'team_size': 5,
+ 'views_count': 1245,
+ 'likes_count': 89,
+ 'completion_date': date(2024, 8, 15),
+ 'categories': [cat_web, cat_analytics],
+ 'is_featured': True
+ },
+ {
+ 'name': 'Мобильное приложение FoodDelivery',
+ 'short_description': 'Cross-platform приложение для доставки еды с геолокацией, онлайн-платежами и системой рейтингов.',
+ 'description': 'Создано мобильное приложение для службы доставки еды с поддержкой iOS и Android платформ.
Функционал включает: поиск ресторанов по геолокации, онлайн-заказы, интеграцию с платежными системами, отслеживание курьера в реальном времени, система рейтингов и отзывов.
',
+ 'technologies': 'React Native, Node.js, MongoDB, Socket.io, Stripe API',
+ 'duration': '6 месяцев',
+ 'team_size': 4,
+ 'views_count': 892,
+ 'likes_count': 156,
+ 'completion_date': date(2024, 10, 20),
+ 'categories': [cat_mobile, cat_ecommerce],
+ 'is_featured': False
+ },
+ {
+ 'name': 'Аналитическая панель SmartMetrics',
+ 'short_description': 'Интерактивная панель управления с визуализацией данных, машинным обучением и предиктивной аналитикой.',
+ 'description': 'Разработана комплексная система аналитики для обработки больших данных с возможностями машинного обучения.
Включает: интерактивные дашборды, автоматизированные отчеты, прогнозирование трендов, интеграция с различными источниками данных, алгоритмы машинного обучения.
',
+ 'technologies': 'Python, Django, PostgreSQL, Redis, TensorFlow, D3.js, Pandas',
+ 'duration': '5 месяцев',
+ 'team_size': 6,
+ 'views_count': 673,
+ 'likes_count': 124,
+ 'completion_date': date(2024, 7, 10),
+ 'categories': [cat_analytics, cat_web],
+ 'is_featured': True
+ },
+ {
+ 'name': 'E-commerce платформа ShopMaster',
+ 'short_description': 'Полнофункциональная платформа интернет-торговли с многопользовательскими магазинами и системой управления.',
+ 'description': 'Создана масштабируемая e-commerce платформа, поддерживающая множественные магазины на одной основе.
Возможности: многопользовательская архитектура, система платежей, управление складом, программы лояльности, мобильная оптимизация, SEO инструменты.
',
+ 'technologies': 'Laravel, MySQL, Redis, Elasticsearch, Vue.js, Stripe, PayPal',
+ 'duration': '8 месяцев',
+ 'team_size': 7,
+ 'views_count': 1567,
+ 'likes_count': 203,
+ 'completion_date': date(2024, 11, 5),
+ 'categories': [cat_ecommerce, cat_web, cat_mobile],
+ 'is_featured': True
+ },
+ {
+ 'name': 'Дизайн-система BrandKit',
+ 'short_description': 'Комплексная дизайн-система для финтех стартапа с фирменным стилем, UI-компонентами и брендбуком.',
+ 'description': 'Разработана полная дизайн-система для финтех компании, включающая создание фирменного стиля, UI-компонентов и подробного брендбука.
Результат: логотип и фирменный стиль, библиотека UI-компонентов, руководство по использованию бренда, адаптация для различных платформ.
',
+ 'technologies': 'Figma, Adobe Creative Suite, Principle, Sketch, InVision',
+ 'duration': '3 месяца',
+ 'team_size': 3,
+ 'views_count': 445,
+ 'likes_count': 78,
+ 'completion_date': date(2024, 9, 30),
+ 'categories': [cat_design],
+ 'is_featured': False
+ }
+ ]
+
+ print(f"Текущее количество проектов: {Project.objects.count()}")
+
+ # Создаем проекты
+ for i, project_data in enumerate(test_projects):
+ categories_to_add = project_data.pop('categories')
+
+ project, created = Project.objects.get_or_create(
+ name=project_data['name'],
+ defaults={
+ **project_data,
+ 'client': client,
+ 'service': service,
+ 'status': 'completed',
+ 'display_order': i + 1
+ }
+ )
+
+ if created:
+ # Добавляем категории
+ project.categories.set(categories_to_add)
+ print(f"✅ Создан проект: {project.name}")
+ else:
+ print(f"⚠️ Проект уже существует: {project.name}")
+
+ print(f"\nИтого проектов в базе: {Project.objects.count()}")
+ print(f"Завершенных проектов: {Project.objects.filter(status='completed').count()}")
+ print(f"Избранных проектов: {Project.objects.filter(is_featured=True).count()}")
+
+if __name__ == '__main__':
+ create_test_projects()
\ No newline at end of file
diff --git a/preview.html b/preview.html
new file mode 100644
index 0000000..e017932
--- /dev/null
+++ b/preview.html
@@ -0,0 +1,350 @@
+
+
+
+
+
+ Проект Django E-commerce - Предварительный просмотр
+
+
+
+
+ "
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Описание проекта
+
+
Этот проект представляет собой современное веб-приложение электронной коммерции, разработанное с использованием Django и современных технологий фронтенда.
+
+
Ключевые особенности
+
+ Адаптивный дизайн , оптимизированный для всех устройств
+ Интеграция с популярными платежными системами
+ Многоуровневая система категорий товаров
+ Расширенная система поиска и фильтрации
+ Административная панель для управления контентом
+
+
+
+ Проект демонстрирует современные подходы к веб-разработке, включая использование микросервисной архитектуры, контейнеризации и непрерывной интеграции.
+
+
+
Технические детали
+
Для обеспечения высокой производительности использовались следующие решения:
+
+
+ Redis для кеширования данных
+ PostgreSQL как основная база данных
+ Docker для контейнеризации
+
+
+
+
+
Результат: Платформа способна обрабатывать более 10,000 одновременных пользователей с временем отклика менее 200ms.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Результаты проекта
+
+
+
+
2.5x
+
Быстрее загрузка
+
+
+
+
+
+
+
+
+
+
+
+
Похожие проекты
+
+
+
+
+
+
+
+
+
+
+
+
+
E-commerce платформа
+
Современная платформа для онлайн-торговли с интеграцией платежных систем
+
+ Web
+ Django
+
+
+
+
+
+
+
+
+
+
+
+
+
+
CRM система
+
Система управления клиентскими отношениями с аналитикой
+
+ CRM
+ Analytics
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Мобильное приложение
+
iOS и Android приложение для управления задачами
+
+ Mobile
+ React Native
+
+
+
+
+
+
+
+
+
+
+
Проект без изображения
+
+
+
+
+
+
+
+
Analytics Dashboard
+
Интерактивная панель аналитики с визуализацией данных
+
+ Analytics
+ D3.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/smartsoltech/static/assets/css/compact-gallery.css b/smartsoltech/static/assets/css/compact-gallery.css
new file mode 100644
index 0000000..42e90de
--- /dev/null
+++ b/smartsoltech/static/assets/css/compact-gallery.css
@@ -0,0 +1,589 @@
+/* Современная медиа-галерея */
+.modern-media-gallery {
+ background: white;
+ border-radius: 24px;
+ overflow: hidden;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
+ border: 1px solid #f1f5f9;
+ margin-bottom: 3rem;
+}
+
+/* Основное медиа */
+.main-media-container {
+ position: relative;
+ aspect-ratio: 16/10;
+ overflow: hidden;
+ background: #f8fafc;
+}
+
+.main-media-wrapper {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+.main-media-item {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ transition: opacity 0.5s ease;
+}
+
+.main-media-item.active {
+ opacity: 1;
+}
+
+.main-media-img,
+.main-media-video {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ cursor: pointer;
+}
+
+.embed-container {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+.main-media-embed {
+ width: 100%;
+ height: 100%;
+ border: none;
+}
+
+/* Overlay с информацией */
+.media-overlay {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+ padding: 2rem;
+ color: white;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ display: flex;
+ justify-content: space-between;
+ align-items: end;
+}
+
+.main-media-item:hover .media-overlay {
+ opacity: 1;
+}
+
+.media-info {
+ flex: 1;
+}
+
+.media-title {
+ font-size: 1.1rem;
+ font-weight: 600;
+ margin-bottom: 0.25rem;
+}
+
+.media-meta {
+ font-size: 0.9rem;
+ opacity: 0.8;
+}
+
+.media-action-btn {
+ width: 48px;
+ height: 48px;
+ background: rgba(255, 255, 255, 0.2);
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.2rem;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ margin-left: 1rem;
+}
+
+.media-action-btn:hover {
+ background: rgba(255, 255, 255, 0.3);
+ transform: scale(1.1);
+}
+
+/* Навигационные кнопки */
+.media-nav-btn {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 48px;
+ height: 48px;
+ background: rgba(255, 255, 255, 0.9);
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
+ border: none;
+ border-radius: 50%;
+ color: #4f46e5;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.1rem;
+ cursor: pointer;
+ opacity: 0;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.main-media-wrapper:hover .media-nav-btn {
+ opacity: 1;
+}
+
+.prev-btn {
+ left: 20px;
+}
+
+.next-btn {
+ right: 20px;
+}
+
+.media-nav-btn:hover {
+ background: white;
+ transform: translateY(-50%) scale(1.1);
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+/* Миниатюры */
+.thumbnails-container {
+ padding: 1.5rem;
+ background: #fafbfc;
+ border-top: 1px solid #f1f5f9;
+}
+
+.thumbnails-wrapper {
+ display: flex;
+ gap: 12px;
+ overflow-x: auto;
+ padding-bottom: 8px;
+}
+
+/* Для Firefox */
+.thumbnails-wrapper {
+ scrollbar-width: thin;
+ scrollbar-color: #cbd5e0 transparent;
+}
+
+/* Для Webkit браузеров */
+.thumbnails-wrapper::-webkit-scrollbar {
+ height: 6px;
+}
+
+.thumbnails-wrapper::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.thumbnails-wrapper::-webkit-scrollbar-thumb {
+ background: #cbd5e0;
+ border-radius: 3px;
+}
+
+.thumbnail-item {
+ position: relative;
+ width: 80px;
+ height: 60px;
+ border-radius: 8px;
+ overflow: hidden;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ flex-shrink: 0;
+ border: 2px solid transparent;
+}
+
+.thumbnail-item:hover {
+ transform: scale(1.05);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.thumbnail-item.active {
+ border-color: #4f46e5;
+ transform: scale(1.05);
+ box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
+}
+
+.thumbnail-img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.video-thumbnail-placeholder,
+.embed-thumbnail-placeholder {
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-size: 1.5rem;
+}
+
+.media-type-badge {
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.7rem;
+ color: white;
+}
+
+.media-type-badge.video {
+ background: #ef4444;
+}
+
+.media-type-badge.embed {
+ background: #06b6d4;
+}
+
+.thumbnail-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.6);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.thumbnail-item:hover .thumbnail-overlay {
+ opacity: 1;
+}
+
+.thumbnail-number {
+ color: white;
+ font-weight: 600;
+ font-size: 0.9rem;
+}
+
+/* Индикатор прогресса */
+.gallery-progress {
+ height: 4px;
+ background: #f1f5f9;
+ position: relative;
+ overflow: hidden;
+}
+
+.progress-bar {
+ height: 100%;
+ background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
+ transition: width 0.4s ease;
+ border-radius: 2px;
+}
+
+/* Placeholder для проектов без изображений */
+.project-placeholder-image {
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ color: #64748b;
+ text-align: center;
+}
+
+.project-placeholder-image i {
+ font-size: 4rem;
+ margin-bottom: 1rem;
+ opacity: 0.5;
+}
+
+.project-placeholder-image p {
+ font-size: 1.1rem;
+ font-weight: 500;
+ margin: 0;
+ opacity: 0.7;
+}
+
+/* Адаптивность */
+@media (max-width: 1024px) {
+ .main-media-container {
+ aspect-ratio: 16/9;
+ }
+
+ .media-overlay {
+ padding: 1.5rem;
+ }
+
+ .thumbnails-container {
+ padding: 1rem;
+ }
+
+ .thumbnail-item {
+ width: 70px;
+ height: 52px;
+ }
+}
+
+@media (max-width: 768px) {
+ .modern-media-gallery {
+ border-radius: 16px;
+ margin-bottom: 2rem;
+ }
+
+ .media-overlay {
+ padding: 1rem;
+ background: rgba(0, 0, 0, 0.7);
+ opacity: 1;
+ }
+
+ .media-nav-btn {
+ opacity: 1;
+ width: 40px;
+ height: 40px;
+ font-size: 1rem;
+ }
+
+ .prev-btn {
+ left: 12px;
+ }
+
+ .next-btn {
+ right: 12px;
+ }
+
+ .thumbnails-container {
+ padding: 0.75rem;
+ }
+
+ .thumbnail-item {
+ width: 60px;
+ height: 45px;
+ }
+
+ .media-action-btn {
+ width: 40px;
+ height: 40px;
+ font-size: 1rem;
+ }
+}
+
+/* HTML-контент в описании проекта */
+.description-text h1,
+.description-text h2,
+.description-text h3,
+.description-text h4,
+.description-text h5,
+.description-text h6 {
+ margin-top: 2rem;
+ margin-bottom: 1rem;
+ font-weight: 600;
+ color: #1a202c;
+}
+
+.description-text h1 { font-size: 2rem; }
+.description-text h2 { font-size: 1.75rem; }
+.description-text h3 { font-size: 1.5rem; }
+.description-text h4 { font-size: 1.25rem; }
+.description-text h5 { font-size: 1.1rem; }
+.description-text h6 { font-size: 1rem; }
+
+.description-text p {
+ margin-bottom: 1.2rem;
+ line-height: 1.8;
+}
+
+.description-text ul,
+.description-text ol {
+ margin: 1.5rem 0;
+ padding-left: 2rem;
+}
+
+.description-text li {
+ margin-bottom: 0.5rem;
+ line-height: 1.7;
+}
+
+.description-text blockquote {
+ border-left: 4px solid #4f46e5;
+ padding-left: 1.5rem;
+ margin: 2rem 0;
+ font-style: italic;
+ background: #f8fafc;
+ padding: 1.5rem;
+ border-radius: 8px;
+}
+
+.description-text code {
+ background: #f1f5f9;
+ padding: 0.2rem 0.4rem;
+ border-radius: 4px;
+ font-family: 'Monaco', 'Menlo', monospace;
+ font-size: 0.9em;
+ color: #e53e3e;
+}
+
+.description-text pre {
+ background: #1a202c;
+ color: #fff;
+ padding: 1.5rem;
+ border-radius: 8px;
+ overflow-x: auto;
+ margin: 1.5rem 0;
+}
+
+.description-text pre code {
+ background: none;
+ color: inherit;
+ padding: 0;
+}
+
+.description-text a {
+ color: #4f46e5;
+ text-decoration: none;
+ border-bottom: 1px solid transparent;
+ transition: border-color 0.3s ease;
+}
+
+.description-text a:hover {
+ border-bottom-color: #4f46e5;
+}
+
+.description-text strong,
+.description-text b {
+ font-weight: 600;
+ color: #1a202c;
+}
+
+.description-text em,
+.description-text i {
+ font-style: italic;
+}
+
+.description-text img {
+ max-width: 100%;
+ height: auto;
+ border-radius: 8px;
+ margin: 1.5rem 0;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.description-text hr {
+ border: none;
+ height: 2px;
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+ margin: 3rem 0;
+ border-radius: 1px;
+}
+
+.description-text table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 2rem 0;
+ background: white;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+}
+
+.description-text th,
+.description-text td {
+ padding: 1rem;
+ text-align: left;
+ border-bottom: 1px solid #e2e8f0;
+}
+
+.description-text th {
+ background: #f8fafc;
+ font-weight: 600;
+ color: #1a202c;
+}
+
+/* HTML-контент в технологиях */
+.technologies-html-content {
+ line-height: 1.6;
+}
+
+.technologies-html-content p {
+ margin-bottom: 1rem;
+}
+
+.technologies-html-content code {
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+ color: white;
+ padding: 0.5rem 1rem;
+ border-radius: 8px;
+ font-family: 'Monaco', 'Menlo', monospace;
+ font-size: 0.9rem;
+ font-weight: 500;
+ display: inline-block;
+ margin: 0.25rem 0;
+ box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
+ transition: all 0.3s ease;
+}
+
+.technologies-html-content code:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
+}
+
+.technologies-html-content p code {
+ margin: 0.2rem;
+ white-space: nowrap;
+}
+
+.technologies-html-content h1,
+.technologies-html-content h2,
+.technologies-html-content h3,
+.technologies-html-content h4,
+.technologies-html-content h5,
+.technologies-html-content h6 {
+ margin-top: 1.5rem;
+ margin-bottom: 0.75rem;
+ font-weight: 600;
+ color: #1a202c;
+}
+
+.technologies-html-content ul,
+.technologies-html-content ol {
+ margin: 1rem 0;
+ padding-left: 1.5rem;
+}
+
+.technologies-html-content li {
+ margin-bottom: 0.4rem;
+}
+
+.technologies-html-content strong,
+.technologies-html-content b {
+ font-weight: 600;
+ color: #1a202c;
+}
+
+.technologies-html-content em,
+.technologies-html-content i {
+ font-style: italic;
+}
+
+.technologies-html-content a {
+ color: #4f46e5;
+ text-decoration: none;
+ border-bottom: 1px solid transparent;
+ transition: border-color 0.3s ease;
+}
+
+.technologies-html-content a:hover {
+ border-bottom-color: #4f46e5;
+}
\ No newline at end of file
diff --git a/smartsoltech/static/assets/css/modern-styles.css b/smartsoltech/static/assets/css/modern-styles.css
index 3fd79c0..8913357 100644
--- a/smartsoltech/static/assets/css/modern-styles.css
+++ b/smartsoltech/static/assets/css/modern-styles.css
@@ -283,6 +283,10 @@ p {
/* Responsive Design */
@media (max-width: 768px) {
+ .section-padding {
+ padding: 2rem 0; /* Уменьшенные отступы для мобильных */
+ }
+
h1 {
font-size: 2.5rem;
}
@@ -329,7 +333,7 @@ p {
}
.section-padding {
- padding: 6rem 0;
+ padding: 3rem 0; /* Уменьшено с 6rem до 3rem */
}
.mb-large {
@@ -658,8 +662,8 @@ p {
position: relative;
display: inline-flex;
align-items: center;
- gap: 0.75rem;
- padding: 0.75rem;
+ gap: 16px; /* Увеличено с 12px до 16px для предотвращения слипания */
+ padding: 10px; /* Отступы от краев: лево 10px, право 10px */
background: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
@@ -668,15 +672,16 @@ p {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
min-height: 50px;
- transition: none;
+ transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1);
overflow: visible;
+ width: auto;
}
/* Удаляем старую структуру inner-pill */
.pill-indicators {
display: flex;
- gap: 0.75rem;
+ gap: 16px; /* Увеличено с 12px до 16px */
align-items: center;
flex-wrap: nowrap;
white-space: nowrap;
@@ -700,15 +705,19 @@ p {
overflow: visible;
transform-origin: center;
flex-shrink: 0;
+ margin-left: 0;
+ margin-right: 0;
}
.pill-indicator.active {
border: 2px solid rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.1);
width: fit-content;
- min-width: 36px;
+ min-width: 60px; /* Увеличиваем минимальную ширину */
padding: 0 1rem;
border-radius: 18px;
+ margin-left: 0;
+ margin-right: 0;
}
.pill-indicator:not(.active):hover {
@@ -717,6 +726,11 @@ p {
transform: scale(1.05);
}
+/* Отменяем transform при отсутствии hover */
+.pill-indicator:not(.active):not(:hover) {
+ transform: none;
+}
+
.pill-indicator::before {
content: '';
width: 8px;
@@ -756,11 +770,19 @@ p {
position: relative;
transform-origin: center;
z-index: 2;
+ pointer-events: none; /* Предотвращаем вмешательство в события */
+}
+
+/* Скрытие текста в неактивных пилюлях */
+.pill-indicator:not(.active) .pill-indicator-title {
+ opacity: 0 !important;
+ transform: scale(0.8) !important;
}
.pill-indicator.active .pill-indicator-title {
opacity: 1;
transform: scale(1);
+ color: rgba(255, 255, 255, 0.95) !important; /* Форсируем цвет для автоматической прокрутки */
}
/* Плавная анимация как вода */
@@ -784,7 +806,7 @@ p {
.project-image {
position: relative;
overflow: hidden;
- height: 200px;
+ height: 180px;
}
.project-image img {
@@ -950,6 +972,10 @@ p {
/* Responsive Design */
@media (max-width: 768px) {
+ .section-padding {
+ padding: 2rem 0; /* Еще меньше для мобильных устройств */
+ }
+
.hero-container {
border-radius: 16px;
margin: 1rem;
@@ -977,17 +1003,20 @@ p {
}
.outer-pill {
- gap: 0.5rem;
- padding: 0.5rem;
+ gap: 12px; /* Меньший gap для мобильных, но всё ещё достаточный */
+ padding: 8px; /* Отступы от краев: лево 8px, право 8px */
}
.pill-indicators {
- gap: 0.5rem;
+ gap: 12px; /* Соответствует outer-pill gap */
}
.pill-indicator.active {
padding: 0 0.75rem;
font-size: 0.8rem;
+ /* Убираем дополнительные margin для мобильных */
+ margin-left: 0;
+ margin-right: 0;
}
.pill-indicator-title {
@@ -1122,4 +1151,2443 @@ p {
.animate-fade-in-up {
animation: fadeInUp 0.8s ease-out;
+}
+
+/* Дополнительные стили для компактных карточек проектов */
+.projects-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+ max-width: 100%;
+ gap: 2rem;
+ margin-bottom: 3rem;
+}
+
+/* Ограничиваем максимальный размер карточки */
+.project-card {
+ max-width: 400px;
+ width: 100%;
+ background: white;
+ border-radius: 20px;
+ overflow: hidden;
+ box-shadow: 0 8px 25px rgba(0,0,0,0.08);
+ transition: all 0.3s ease;
+ margin-bottom: 0;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid #f1f5f9;
+}
+
+.project-card:hover {
+ box-shadow: 0 20px 50px rgba(0,0,0,0.15);
+ transform: translateY(-5px);
+ border-color: #e2e8f0;
+}
+
+.project-media {
+ width: 100%;
+ height: 180px;
+ overflow: hidden;
+ position: relative;
+ background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%);
+}
+
+.project-media img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+ transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.project-card:hover .project-media img {
+ transform: scale(1.08);
+}
+
+.project-media.no-image {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+}
+
+.project-media.no-image::before {
+ content: '\f1c2';
+ font-family: 'Font Awesome 5 Free';
+ font-weight: 900;
+ font-size: 2.5rem;
+ opacity: 0.7;
+}
+
+.project-badge {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ padding: 0.4rem 0.8rem;
+ border-radius: 20px;
+ font-size: 0.75rem;
+ font-weight: 600;
+ z-index: 2;
+ box-shadow: 0 4px 15px rgba(0,0,0,0.25);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.project-content {
+ padding: 1rem;
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+.project-title {
+ font-size: 1.1rem;
+ font-weight: 700;
+ color: #1a202c;
+ margin-bottom: 0.5rem;
+ line-height: 1.3;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ min-height: 2.6rem;
+}
+
+.project-description {
+ color: #64748b;
+ margin-bottom: 0.75rem;
+ flex-grow: 1;
+ line-height: 1.5;
+ font-size: 0.85rem;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ min-height: 2.5rem;
+}
+
+.project-stats-section {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 0.75rem;
+ padding: 0.5rem 0.75rem;
+ background: #f8fafc;
+ border-radius: 8px;
+ font-size: 0.8rem;
+}
+
+.stats-left {
+ display: flex;
+ gap: 1rem;
+}
+
+.stat-item {
+ display: flex;
+ align-items: center;
+ gap: 0.35rem;
+ color: #64748b;
+}
+
+.stat-item i {
+ color: #667eea;
+ font-size: 0.85rem;
+}
+
+.project-year {
+ color: #94a3b8;
+ font-weight: 500;
+}
+
+.project-footer {
+ padding: 0 1rem 1rem;
+ border-top: 1px solid #f1f5f9;
+ margin-top: auto;
+}
+
+.project-categories {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.35rem;
+ margin-bottom: 0.5rem;
+}
+
+.category-tag {
+ display: inline-flex;
+ align-items: center;
+ padding: 0.25rem 0.5rem;
+ background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+ color: #667eea;
+ border-radius: 12px;
+ font-size: 0.7rem;
+ font-weight: 500;
+ white-space: nowrap;
+ border: 1px solid rgba(102, 126, 234, 0.2);
+}
+
+.category-tag i {
+ margin-right: 0.25rem;
+ font-size: 0.75rem;
+}
+
+.project-meta {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 0.85rem;
+ color: #94a3b8;
+}
+
+.project-info {
+ display: flex;
+ gap: 1rem;
+ font-size: 0.8rem;
+}
+
+.project-info span {
+ display: flex;
+ align-items: center;
+ gap: 0.25rem;
+}
+
+.project-status {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.25rem;
+ padding: 0.25rem 0.75rem;
+ border-radius: 15px;
+ font-size: 0.75rem;
+ font-weight: 600;
+}
+
+.status-completed {
+ background: rgba(34, 197, 94, 0.1);
+ color: #16a34a;
+ border: 1px solid rgba(34, 197, 94, 0.2);
+}
+
+.status-in_progress {
+ background: rgba(59, 130, 246, 0.1);
+ color: #2563eb;
+ border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.status-archived {
+ background: rgba(107, 114, 128, 0.1);
+ color: #6b7280;
+ border: 1px solid rgba(107, 114, 128, 0.2);
+}
+
+.media-player {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+.play-btn {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: rgba(255, 255, 255, 0.9);
+ border: none;
+ border-radius: 50%;
+ width: 45px;
+ height: 45px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.1rem;
+ color: #667eea;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+}
+
+.play-btn:hover {
+ background: white;
+ transform: translate(-50%, -50%) scale(1.1);
+ box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+}
+
+/* Адаптивные стили для projects-grid */
+@media (max-width: 768px) {
+ .projects-grid {
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 1.5rem;
+ }
+
+ .project-card {
+ max-width: 350px;
+ }
+}
+
+@media (max-width: 576px) {
+ .projects-grid {
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1.5rem;
+ }
+
+ .project-card {
+ max-width: 320px;
+ }
+}
+
+/* ===================
+ PROJECT DETAIL IMPROVEMENTS
+ =================== */
+
+/* Хлебные крошки */
+.project-breadcrumb {
+ margin-bottom: 1.5rem;
+ font-size: 0.9rem;
+ color: rgba(255, 255, 255, 0.8);
+}
+
+.project-breadcrumb a {
+ color: rgba(255, 255, 255, 0.8);
+ text-decoration: none;
+ transition: all 0.3s ease;
+}
+
+.project-breadcrumb a:hover {
+ color: #fff;
+ text-decoration: underline;
+}
+
+.project-breadcrumb i {
+ opacity: 0.6;
+ font-size: 0.8em;
+}
+
+/* Мета-бейджи */
+.project-meta-badges {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+.meta-badge {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.5rem 1rem;
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(10px);
+ border-radius: 25px;
+ color: rgba(255, 255, 255, 0.9);
+ font-size: 0.85rem;
+ font-weight: 500;
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ transition: all 0.3s ease;
+}
+
+.meta-badge:hover {
+ background: rgba(255, 255, 255, 0.15);
+ border-color: rgba(255, 255, 255, 0.3);
+ transform: translateY(-1px);
+}
+
+.meta-badge i {
+ font-size: 0.9em;
+ opacity: 0.8;
+}
+
+/* Статистика */
+.stats-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+ margin-top: 0.5rem;
+}
+
+.stat-item {
+ text-align: center;
+ padding: 1rem;
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+ border-radius: 10px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ transition: all 0.3s ease;
+}
+
+.stat-item:hover {
+ transform: translateY(-2px);
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
+ border-color: rgba(255, 255, 255, 0.2);
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+}
+
+.stat-number {
+ font-size: 1.8rem;
+ font-weight: 700;
+ color: #fff;
+ margin-bottom: 0.25rem;
+}
+
+.stat-label {
+ font-size: 0.8rem;
+ color: rgba(255, 255, 255, 0.7);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+/* Статус-бейдж */
+.status-badge {
+ display: inline-block;
+ padding: 0.4rem 0.8rem;
+ border-radius: 20px;
+ font-size: 0.85rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ border: none;
+}
+
+.info-item {
+ position: relative;
+ overflow: hidden;
+}
+
+.info-item::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 0;
+ height: 2px;
+ background: linear-gradient(90deg, #667eea, #764ba2);
+ transition: width 0.3s ease;
+}
+
+.info-item:hover::after {
+ width: 100%;
+}
+
+.info-label {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-weight: 600;
+ color: rgba(255, 255, 255, 0.9);
+ margin-bottom: 0.75rem;
+}
+
+.info-label i {
+ color: rgba(255, 255, 255, 0.7);
+ width: 16px;
+ text-align: center;
+}
+
+.info-value {
+ padding-left: 0.5rem;
+ color: rgba(255, 255, 255, 0.8);
+ line-height: 1.6;
+}
+
+/* ===================
+ MODERN PROJECT HERO SECTION
+ =================== */
+
+.project-hero {
+ position: relative;
+ min-height: 80vh;
+ display: flex;
+ align-items: center;
+ padding: 2rem 0;
+ overflow: hidden;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.hero-background {
+ position: absolute;
+ inset: 0;
+ z-index: 1;
+}
+
+.hero-gradient {
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(
+ 135deg,
+ rgba(102, 126, 234, 0.9) 0%,
+ rgba(118, 75, 162, 0.85) 50%,
+ rgba(102, 126, 234, 0.8) 100%
+ );
+ animation: gradientShift 20s ease-in-out infinite;
+}
+
+@keyframes gradientShift {
+ 0%, 100% { background-position: 0% 50%; }
+ 50% { background-position: 100% 50%; }
+}
+
+.hero-pattern {
+ position: absolute;
+ inset: 0;
+ background-image:
+ radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
+ radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
+ linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
+ animation: patternMove 30s linear infinite;
+}
+
+@keyframes patternMove {
+ 0% { transform: translateX(0) translateY(0); }
+ 100% { transform: translateX(-50px) translateY(-30px); }
+}
+
+.hero-content {
+ position: relative;
+ z-index: 3;
+}
+
+/* Современные breadcrumbs */
+.breadcrumb-modern {
+ margin-bottom: 2rem;
+ position: relative;
+ z-index: 4;
+}
+
+.breadcrumb-list {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ font-size: 0.9rem;
+}
+
+.breadcrumb-link {
+ color: rgba(255, 255, 255, 0.8);
+ text-decoration: none;
+ transition: all 0.3s ease;
+ padding: 0.25rem 0.5rem;
+ border-radius: 6px;
+}
+
+.breadcrumb-link:hover {
+ color: white;
+ background: rgba(255, 255, 255, 0.1);
+ text-decoration: none;
+}
+
+.breadcrumb-separator {
+ color: rgba(255, 255, 255, 0.5);
+ font-weight: 300;
+}
+
+.breadcrumb-current {
+ color: white;
+ font-weight: 500;
+}
+
+/* Теги и категории */
+.project-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+ margin-bottom: 1.5rem;
+}
+
+.tag {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.5rem 1rem;
+ background: rgba(255, 255, 255, 0.15);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 25px;
+ color: white;
+ font-size: 0.85rem;
+ font-weight: 500;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.tag:hover {
+ background: rgba(255, 255, 255, 0.25);
+ transform: translateY(-2px);
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+.tag.featured {
+ background: linear-gradient(45deg, #ffd700, #ffed4e);
+ color: #1a202c;
+ border-color: rgba(255, 215, 0, 0.3);
+ font-weight: 600;
+}
+
+.tag.featured:hover {
+ background: linear-gradient(45deg, #ffed4e, #ffd700);
+ transform: translateY(-2px) scale(1.05);
+}
+
+/* Hero title */
+.hero-title {
+ font-size: clamp(2.5rem, 8vw, 6rem);
+ font-weight: 800;
+ line-height: 0.9;
+ color: white;
+ margin-bottom: 1rem;
+ letter-spacing: -0.02em;
+ text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.hero-subtitle {
+ font-size: clamp(1.125rem, 2.5vw, 1.5rem);
+ color: rgba(255, 255, 255, 0.9);
+ line-height: 1.6;
+ margin-bottom: 2rem;
+ max-width: 600px;
+}
+
+/* Quick facts */
+.quick-facts {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1.5rem;
+ margin-bottom: 2rem;
+}
+
+.fact-item {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 1rem 1.5rem;
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(15px);
+ -webkit-backdrop-filter: blur(15px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 15px;
+ color: white;
+ transition: all 0.3s ease;
+ min-width: 200px;
+}
+
+.fact-item:hover {
+ background: rgba(255, 255, 255, 0.15);
+ transform: translateY(-3px);
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+.fact-icon {
+ font-size: 1.5rem;
+ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+}
+
+.fact-content {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+}
+
+.fact-label {
+ font-size: 0.8rem;
+ color: rgba(255, 255, 255, 0.7);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ font-weight: 500;
+}
+
+.fact-value {
+ font-size: 1rem;
+ color: white;
+ font-weight: 600;
+}
+
+/* Hero actions */
+.hero-actions {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 2rem;
+}
+
+.hero-action-bar {
+ display: flex;
+ justify-content: flex-start;
+ margin-bottom: 1rem;
+}
+
+.hero-quick-stats {
+ display: flex;
+ gap: 1rem;
+ margin-left: auto;
+}
+
+.views-likes-bar {
+ display: flex;
+ gap: 0.75rem;
+}
+
+.stat-pill {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.6rem 1.2rem;
+ background: rgba(255, 255, 255, 0.15);
+ backdrop-filter: blur(15px);
+ -webkit-backdrop-filter: blur(15px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 25px;
+ color: white;
+ font-weight: 600;
+ transition: all 0.3s ease;
+ font-size: 0.9rem;
+}
+
+.stat-pill:hover {
+ background: rgba(255, 255, 255, 0.25);
+ transform: translateY(-2px);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.stat-pill i {
+ font-size: 0.85rem;
+ color: rgba(255, 255, 255, 0.9);
+}
+
+.quick-stat-item {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.75rem 1rem;
+ background: rgba(255, 255, 255, 0.15);
+ backdrop-filter: blur(15px);
+ -webkit-backdrop-filter: blur(15px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 20px;
+ color: white;
+ font-weight: 600;
+ transition: all 0.3s ease;
+}
+
+.quick-stat-item:hover {
+ background: rgba(255, 255, 255, 0.25);
+ transform: translateY(-2px);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.quick-stat-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ color: rgba(255, 255, 255, 0.9);
+ font-size: 0.9rem;
+}
+
+.quick-stat-value {
+ font-size: 1rem;
+ font-weight: 700;
+ color: white;
+}
+
+.cta-button {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 1rem 2rem;
+ border-radius: 50px;
+ text-decoration: none;
+ font-weight: 600;
+ font-size: 1rem;
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ position: relative;
+ overflow: hidden;
+ border: 2px solid transparent;
+}
+
+.cta-button.primary {
+ background: linear-gradient(45deg, #ffffff, #f8fafc);
+ color: #667eea;
+ box-shadow: 0 8px 30px rgba(255, 255, 255, 0.3);
+}
+
+.cta-button.primary:hover {
+ transform: translateY(-4px) scale(1.02);
+ box-shadow: 0 15px 40px rgba(255, 255, 255, 0.4);
+ color: #667eea;
+ text-decoration: none;
+}
+
+.cta-button.secondary {
+ background: rgba(255, 255, 255, 0.1);
+ color: white;
+ border-color: rgba(255, 255, 255, 0.3);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+}
+
+.cta-button.secondary:hover {
+ background: rgba(255, 255, 255, 0.2);
+ border-color: rgba(255, 255, 255, 0.5);
+ transform: translateY(-3px);
+ color: white;
+ text-decoration: none;
+}
+
+.cta-button.outline {
+ background: transparent;
+ color: white;
+ border-color: rgba(255, 255, 255, 0.4);
+}
+
+.cta-button.outline:hover {
+ background: rgba(255, 255, 255, 0.1);
+ border-color: white;
+ transform: translateY(-2px);
+ color: white;
+ text-decoration: none;
+}
+
+.button-icon {
+ transition: transform 0.3s ease;
+ display: flex;
+ align-items: center;
+}
+
+.cta-button:hover .button-icon {
+ transform: translateX(4px);
+}
+
+/* Hero stats */
+.hero-stats {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1rem;
+ margin-top: 2rem;
+}
+
+.stat-card {
+ text-align: center;
+ padding: 1.5rem 1rem;
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(15px);
+ -webkit-backdrop-filter: blur(15px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 20px;
+ transition: all 0.3s ease;
+ color: white;
+}
+
+.stat-card:hover {
+ background: rgba(255, 255, 255, 0.15);
+ transform: translateY(-5px);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+}
+
+.stat-number {
+ font-size: 2rem;
+ font-weight: 800;
+ color: white;
+ margin-bottom: 0.5rem;
+ text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.stat-label {
+ font-size: 0.85rem;
+ color: rgba(255, 255, 255, 0.8);
+ text-transform: uppercase;
+ letter-spacing: 0.8px;
+ font-weight: 500;
+}
+
+/* ===================
+ PROJECT OVERVIEW SECTION
+ =================== */
+
+.project-overview {
+ padding: 5rem 0;
+ background: #f8fafc;
+}
+
+.content-section {
+ margin-bottom: 4rem;
+}
+
+.section-title {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 2rem;
+ font-size: 2rem;
+ font-weight: 700;
+ color: #1a202c;
+}
+
+.title-number {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 50px;
+ height: 50px;
+ background: linear-gradient(135deg, #667eea, #764ba2);
+ color: white;
+ border-radius: 15px;
+ font-size: 1.2rem;
+ font-weight: 800;
+ box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+}
+
+.title-text {
+ color: #2d3748;
+ letter-spacing: -0.01em;
+}
+
+.content-rich {
+ max-width: none;
+ line-height: 1.8;
+}
+
+.lead-text {
+ font-size: 1.25rem;
+ color: #4a5568;
+ line-height: 1.7;
+ margin-bottom: 3rem;
+ max-width: 800px;
+}
+
+/* Highlight boxes */
+.highlight-box {
+ display: flex;
+ gap: 1.5rem;
+ padding: 2rem;
+ margin-bottom: 2rem;
+ border-radius: 20px;
+ border: 1px solid;
+ position: relative;
+ overflow: hidden;
+}
+
+.highlight-box::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 4px;
+ height: 100%;
+ border-radius: 2px;
+}
+
+.highlight-box.challenge {
+ background: linear-gradient(135deg, #fff5f5, #fed7d7);
+ border-color: #feb2b2;
+}
+
+.highlight-box.challenge::before {
+ background: linear-gradient(to bottom, #f56565, #e53e3e);
+}
+
+.highlight-box.solution {
+ background: linear-gradient(135deg, #f0fff4, #c6f6d5);
+ border-color: #9ae6b4;
+}
+
+.highlight-box.solution::before {
+ background: linear-gradient(to bottom, #48bb78, #38a169);
+}
+
+.highlight-box.results {
+ background: linear-gradient(135deg, #fffbeb, #fed7aa);
+ border-color: #fbb6ce;
+}
+
+.highlight-box.results::before {
+ background: linear-gradient(to bottom, #ed8936, #dd6b20);
+}
+
+.highlight-icon {
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ width: 50px;
+ height: 50px;
+ border-radius: 15px;
+ color: white;
+ font-size: 1.2rem;
+ flex-shrink: 0;
+ margin-top: 0.5rem;
+}
+
+.challenge .highlight-icon {
+ background: linear-gradient(135deg, #f56565, #e53e3e);
+}
+
+.solution .highlight-icon {
+ background: linear-gradient(135deg, #48bb78, #38a169);
+}
+
+.results .highlight-icon {
+ background: linear-gradient(135deg, #ed8936, #dd6b20);
+}
+
+.highlight-content {
+ flex: 1;
+}
+
+.highlight-title {
+ font-size: 1.3rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+ color: #2d3748;
+}
+
+.highlight-text {
+ font-size: 1rem;
+ line-height: 1.6;
+ color: #4a5568;
+ margin: 0;
+}
+
+/* Technology showcase */
+.tech-showcase {
+ background: white;
+ border-radius: 25px;
+ padding: 2.5rem;
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+ border: 1px solid #f1f5f9;
+}
+
+.tech-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ gap: 1.5rem;
+}
+
+.tech-item {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 1.5rem;
+ background: linear-gradient(135deg, #f8fafc, #f1f5f9);
+ border: 1px solid #e2e8f0;
+ border-radius: 15px;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ cursor: pointer;
+}
+
+.tech-item:hover {
+ background: linear-gradient(135deg, #ffffff, #f8fafc);
+ border-color: #cbd5e1;
+ transform: translateY(-5px);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+}
+
+.tech-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 50px;
+ height: 50px;
+ background: linear-gradient(135deg, #667eea, #764ba2);
+ color: white;
+ border-radius: 12px;
+ font-size: 1.3rem;
+ box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
+ flex-shrink: 0;
+}
+
+.tech-content {
+ flex: 1;
+}
+
+.tech-name {
+ display: block;
+ font-size: 1.1rem;
+ font-weight: 600;
+ color: #2d3748;
+ margin-bottom: 0.25rem;
+}
+
+.tech-category {
+ font-size: 0.85rem;
+ color: #718096;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ font-weight: 500;
+}
+
+/* Project sidebar */
+.project-sidebar {
+ position: sticky;
+ top: 2rem;
+ max-height: calc(100vh - 4rem);
+ overflow-y: auto;
+}
+
+.sidebar-section {
+ background: white;
+ border-radius: 20px;
+ padding: 2rem;
+ margin-bottom: 2rem;
+ border: 1px solid #f1f5f9;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+}
+
+.sidebar-title {
+ font-size: 1.3rem;
+ font-weight: 700;
+ color: #2d3748;
+ margin-bottom: 1.5rem;
+ padding-bottom: 1rem;
+ border-bottom: 2px solid #f8fafc;
+ position: relative;
+}
+
+.sidebar-title::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 50px;
+ height: 2px;
+ background: linear-gradient(90deg, #667eea, #764ba2);
+ border-radius: 1px;
+}
+
+.info-grid {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+}
+
+.info-item {
+ padding: 1.25rem;
+ background: linear-gradient(135deg, #f8fafc, #f1f5f9);
+ border: 1px solid #e2e8f0;
+ border-radius: 12px;
+ transition: all 0.3s ease;
+}
+
+.info-item:hover {
+ background: linear-gradient(135deg, #ffffff, #f8fafc);
+ border-color: #cbd5e1;
+ transform: translateX(5px);
+}
+
+.info-label {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ font-weight: 600;
+ color: #4a5568;
+ margin-bottom: 0.75rem;
+ font-size: 0.9rem;
+}
+
+.info-label i {
+ color: #718096;
+ width: 18px;
+ text-align: center;
+}
+
+.info-value {
+ font-size: 1rem;
+ color: #2d3748;
+ font-weight: 500;
+ line-height: 1.5;
+}
+
+.status-badge {
+ display: inline-block;
+ padding: 0.5rem 1rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.status-badge.completed {
+ background: linear-gradient(135deg, #48bb78, #38a169);
+ color: white;
+}
+
+.status-badge.progress {
+ background: linear-gradient(135deg, #ed8936, #dd6b20);
+ color: white;
+}
+
+/* Hero info cards section */
+.hero-info-cards {
+ position: relative;
+ z-index: 4;
+ margin-top: 3rem;
+ padding-bottom: 2rem;
+}
+
+.hero-info-cards .project-stats-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.5rem;
+ margin-bottom: 3rem;
+}
+
+/* Hero Technologies Section */
+.hero-technologies {
+ text-align: center;
+ margin-top: 2rem;
+}
+
+.tech-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: white;
+ margin-bottom: 1.5rem;
+ text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.tech-buttons-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ justify-content: center;
+}
+
+.tech-button {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 1rem 1.5rem;
+ background: rgba(255, 255, 255, 0.15);
+ backdrop-filter: blur(15px);
+ -webkit-backdrop-filter: blur(15px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 20px;
+ color: white;
+ font-weight: 600;
+ font-size: 0.95rem;
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ cursor: pointer;
+ min-width: 120px;
+}
+
+.tech-button:hover {
+ background: rgba(255, 255, 255, 0.25);
+ border-color: rgba(255, 255, 255, 0.4);
+ transform: translateY(-3px) scale(1.05);
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+}
+
+.tech-button .tech-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: 8px;
+ font-size: 1.1rem;
+ transition: all 0.3s ease;
+}
+
+.tech-button:hover .tech-icon {
+ background: rgba(255, 255, 255, 0.3);
+ transform: scale(1.1);
+}
+
+.tech-name {
+ font-weight: 600;
+ letter-spacing: 0.3px;
+}
+
+.hero-info-cards .stat-card {
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.hero-info-cards .stat-card:hover {
+ background: rgba(255, 255, 255, 1);
+ border-color: rgba(255, 255, 255, 0.5);
+ transform: translateY(-10px) scale(1.03);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+}
+
+.hero-info-cards .stat-card.tech-card {
+ grid-column: span 2;
+}
+
+.hero-info-cards .tech-mini {
+ background: rgba(102, 126, 234, 0.9);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+}
+
+/* Адаптивность для hero cards */
+@media (max-width: 768px) {
+ .hero-info-cards .project-stats-grid {
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ margin-bottom: 2rem;
+ }
+
+ .hero-actions {
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .hero-quick-stats {
+ margin-left: 0;
+ margin-top: 1rem;
+ order: 2;
+ }
+
+ .cta-button {
+ width: 100%;
+ justify-content: center;
+ max-width: 280px;
+ }
+
+ .tech-buttons-grid {
+ gap: 0.75rem;
+ }
+
+ .tech-button {
+ padding: 0.75rem 1rem;
+ font-size: 0.85rem;
+ min-width: 100px;
+ }
+
+ .tech-button .tech-icon {
+ width: 28px;
+ height: 28px;
+ font-size: 1rem;
+ }
+}
+
+@media (max-width: 576px) {
+ .hero-info-cards .project-stats-grid {
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ }
+
+ .hero-quick-stats {
+ flex-direction: column;
+ gap: 0.75rem;
+ width: 100%;
+ }
+
+ .quick-stat-item {
+ justify-content: center;
+ width: 100%;
+ max-width: 200px;
+ }
+
+ .tech-buttons-grid {
+ gap: 0.5rem;
+ }
+
+ .tech-button {
+ padding: 0.5rem 0.75rem;
+ font-size: 0.8rem;
+ min-width: 80px;
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ .tech-button .tech-icon {
+ width: 24px;
+ height: 24px;
+ font-size: 0.9rem;
+ }
+}
+
+/* Project Stats Table */
+.project-stats-table {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+ gap: 1rem;
+}
+
+.stat-card {
+ position: relative;
+ padding: 1.5rem;
+ background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+ border: 1px solid #e2e8f0;
+ border-radius: 15px;
+ text-align: center;
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ cursor: pointer;
+ overflow: hidden;
+}
+
+.stat-card.tech-card {
+ grid-column: span 2;
+ text-align: left;
+}
+
+.tech-card .stat-content {
+ align-items: flex-start;
+}
+
+.tech-pills-mini {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.tech-mini {
+ background: linear-gradient(135deg, #667eea, #764ba2);
+ color: white;
+ padding: 0.25rem 0.5rem;
+ border-radius: 12px;
+ font-size: 0.7rem;
+ font-weight: 600;
+ white-space: nowrap;
+}
+
+.stat-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background: linear-gradient(90deg, #667eea, #764ba2);
+ transform: scaleX(0);
+ transform-origin: left;
+ transition: transform 0.3s ease;
+}
+
+.stat-card:hover::before {
+ transform: scaleX(1);
+}
+
+.stat-card:hover {
+ background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+ border-color: #cbd5e1;
+ transform: translateY(-8px) scale(1.02);
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
+}
+
+.stat-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 50px;
+ height: 50px;
+ background: linear-gradient(135deg, #667eea, #764ba2);
+ color: white;
+ border-radius: 12px;
+ font-size: 1.2rem;
+ margin: 0 auto 1rem;
+ box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
+ transition: all 0.3s ease;
+}
+
+.tech-card .stat-icon {
+ margin: 0 1rem 0 0;
+ flex-shrink: 0;
+}
+
+.stat-card:hover .stat-icon {
+ transform: scale(1.1);
+ box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+}
+
+.stat-content {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+ align-items: center;
+}
+
+.tech-card .stat-content {
+ flex: 1;
+ align-items: flex-start;
+}
+
+.stat-value {
+ font-size: 1.2rem;
+ font-weight: 700;
+ color: #2d3748;
+ line-height: 1.2;
+ word-break: break-word;
+}
+
+.stat-label {
+ font-size: 0.75rem;
+ color: #718096;
+ text-transform: uppercase;
+ letter-spacing: 0.8px;
+ font-weight: 600;
+}
+
+/* Technology Section */
+.tech-section {
+ background: white;
+ border-radius: 20px;
+ padding: 2rem;
+ border: 1px solid #f1f5f9;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+}
+
+.tech-pills-container {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+}
+
+.tech-pill {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.75rem 1rem;
+ background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+ border: 1px solid #e2e8f0;
+ border-radius: 25px;
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: #2d3748;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+}
+
+.tech-pill::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
+ transition: left 0.5s ease;
+}
+
+.tech-pill:hover::before {
+ left: 100%;
+}
+
+.tech-pill:hover {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ border-color: transparent;
+ transform: translateY(-3px) scale(1.05);
+ box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
+}
+
+.tech-logo {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ font-size: 1rem;
+ transition: all 0.3s ease;
+}
+
+.tech-pill:hover .tech-logo {
+ transform: scale(1.2);
+ text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.tech-name {
+ font-weight: 600;
+ transition: all 0.3s ease;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+ .project-stats-table {
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+ gap: 0.75rem;
+ }
+
+ .stat-card.tech-card {
+ grid-column: span 1;
+ }
+
+ .stat-card {
+ padding: 1rem;
+ }
+
+ .stat-icon {
+ width: 40px;
+ height: 40px;
+ font-size: 1rem;
+ margin-bottom: 0.75rem;
+ }
+
+ .tech-card .stat-icon {
+ margin: 0 0.75rem 0 0;
+ }
+
+ .stat-value {
+ font-size: 1.1rem;
+ }
+
+ .stat-label {
+ font-size: 0.7rem;
+ }
+
+ .tech-pills-mini {
+ gap: 0.25rem;
+ }
+
+ .tech-mini {
+ font-size: 0.65rem;
+ padding: 0.2rem 0.4rem;
+ }
+}
+
+.views-likes-section {
+ margin-bottom: 1rem;
+}
+
+.views-likes-bar {
+ display: flex;
+ gap: 0.75rem;
+ justify-content: flex-start;
+}
+
+.stat-pill {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.6rem 1.2rem;
+ background: rgba(255, 255, 255, 0.15);
+ -webkit-backdrop-filter: blur(15px);
+ backdrop-filter: blur(15px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 25px;
+ color: white;
+ font-weight: 600;
+ transition: all 0.3s ease;
+ font-size: 0.9rem;
+}
+
+.stat-pill:hover {
+ background: rgba(255, 255, 255, 0.25);
+ transform: translateY(-2px);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.stat-pill i {
+ font-size: 0.85rem;
+ color: rgba(255, 255, 255, 0.9);
+}
+
+.team-info-section {
+ margin-bottom: 1rem;
+}
+
+.team-card {
+ display: inline-flex;
+ width: auto;
+ min-width: 200px;
+ background: rgba(255, 255, 255, 0.15);
+ -webkit-backdrop-filter: blur(15px);
+ backdrop-filter: blur(15px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 15px;
+ color: white;
+ padding: 1rem;
+ gap: 0.75rem;
+ align-items: center;
+ transition: all 0.3s ease;
+}
+
+.team-card:hover {
+ background: rgba(255, 255, 255, 0.25);
+ transform: translateY(-2px);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.compact-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: 12px;
+ color: white;
+ font-size: 1.1rem;
+ flex-shrink: 0;
+}
+
+.compact-content {
+ flex: 1;
+}
+
+.compact-label {
+ font-size: 0.8rem;
+ color: rgba(255, 255, 255, 0.8);
+ margin-bottom: 0.25rem;
+ font-weight: 500;
+}
+
+.compact-value {
+ font-size: 0.95rem;
+ font-weight: 600;
+ color: white;
+}
+
+/* Дополнительные стили для отладки карусели */
+.similar-projects-section {
+ background: #f8fafc;
+ padding: 4rem 0;
+ margin-top: 3rem;
+ text-align: center;
+}
+
+.similar-projects-carousel {
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.similarSwiper {
+ padding: 0 80px;
+ overflow: visible;
+ width: 100%;
+ margin: 0 auto;
+}
+
+.similarSwiper .swiper-wrapper {
+ display: flex;
+ align-items: stretch;
+ width: 100%;
+ gap: 20px;
+}
+
+.similarSwiper .swiper-slide {
+ height: auto;
+ display: flex;
+ flex-shrink: 0;
+ width: 300px;
+ margin: 0 15px;
+ /* Фиксированная ширина для каждого слайда */
+}
+
+.similar-project-card {
+ background: white;
+ border-radius: 20px;
+ overflow: hidden;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ transition: all 0.3s ease;
+ cursor: pointer;
+ height: 100%;
+ width: 300px; /* Фиксированная ширина карточки */
+ display: flex;
+ flex-direction: column;
+ min-height: 350px;
+}
+
+.section-title {
+ color: #1a202c;
+ font-weight: 700;
+ margin-bottom: 2.5rem;
+ text-align: center;
+ font-size: 2.5rem;
+ position: relative;
+}
+
+.section-title::after {
+ content: '';
+ position: absolute;
+ bottom: -10px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 80px;
+ height: 4px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-radius: 2px;
+}
+
+.similar-project-card:hover {
+ transform: translateY(-8px);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+}
+
+.similar-thumb {
+ position: relative;
+ height: 200px;
+ overflow: hidden;
+}
+
+.similar-thumb img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.3s ease;
+}
+
+.similar-project-card:hover .similar-thumb img {
+ transform: scale(1.05);
+}
+
+/* Центрированный контент */
+.centered-content {
+ max-width: 800px;
+ margin: 0 auto;
+ text-align: center;
+}
+
+.content-wrapper {
+ padding: 2rem;
+}
+
+.description-text {
+ font-size: 1.1rem;
+ line-height: 1.8;
+ color: #4a5568;
+ margin: 1.5rem 0;
+ text-align: left;
+}
+
+/* Обновленные стили project-content */
+.project-content {
+ background: white;
+ border-radius: 20px;
+ padding: 2.5rem;
+ box-shadow: 0 10px 40px rgba(0,0,0,0.08);
+ line-height: 1.8;
+ border: 1px solid #f1f5f9;
+ margin-bottom: 2rem;
+}
+
+.project-content h2 {
+ color: #1a202c;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ padding-bottom: 1rem;
+ border-bottom: 2px solid #f8fafc;
+ position: relative;
+ text-align: left;
+}
+
+.project-content h2::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 80px;
+ height: 2px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+/* Центрированные технологии */
+.tech-center-section {
+ background: white;
+ border-radius: 20px;
+ padding: 3rem 2rem;
+ margin: 3rem auto;
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+ border: 1px solid #f1f5f9;
+ max-width: 800px;
+ text-align: center;
+}
+
+.tech-center-title {
+ color: #1a202c;
+ font-weight: 700;
+ margin-bottom: 2rem;
+ font-size: 1.8rem;
+ position: relative;
+}
+
+.tech-center-title::after {
+ content: '';
+ position: absolute;
+ bottom: -10px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 60px;
+ height: 3px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-radius: 2px;
+}
+
+.tech-center-grid {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 1.5rem;
+ margin-top: 2rem;
+}
+
+.tech-center-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 1.25rem;
+ background: #f8fafc;
+ border-radius: 15px;
+ transition: all 0.3s ease;
+ border: 1px solid #e2e8f0;
+ min-width: 120px;
+}
+
+.tech-center-item:hover {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ transform: translateY(-5px);
+ box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
+}
+
+.tech-center-item .tech-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-radius: 12px;
+ color: white;
+ font-size: 1.4rem;
+ transition: all 0.3s ease;
+}
+
+.tech-center-item:hover .tech-icon {
+ background: white;
+ color: #667eea;
+}
+
+.tech-center-item .tech-name {
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: #4a5568;
+ transition: color 0.3s ease;
+}
+
+.tech-center-item:hover .tech-name {
+ color: white;
+}
+
+/* Вертикальные технологии в сайдбаре */
+.tech-sidebar-section {
+ background: white;
+ border-radius: 20px;
+ padding: 2rem;
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+ border: 1px solid #f1f5f9;
+ position: sticky;
+ top: 20px;
+ height: fit-content;
+}
+
+.tech-sidebar-title {
+ color: #1a202c;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ padding-bottom: 1rem;
+ border-bottom: 2px solid #f8fafc;
+ position: relative;
+}
+
+.tech-sidebar-title::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 60px;
+ height: 2px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.tech-vertical-list {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+}
+
+.tech-vertical-item {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 0.75rem;
+ border-radius: 10px;
+ transition: all 0.3s ease;
+ border: 1px solid transparent;
+}
+
+.tech-vertical-item:hover {
+ background: #f8fafc;
+ border-color: #e2e8f0;
+ transform: translateX(5px);
+}
+
+.tech-vertical-item .tech-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 36px;
+ height: 36px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-radius: 8px;
+ color: white;
+ font-size: 1rem;
+ flex-shrink: 0;
+}
+
+.tech-vertical-item .tech-name {
+ font-size: 0.95rem;
+ font-weight: 600;
+ color: #4a5568;
+}
+
+.project-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(102, 126, 234, 0.8);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ transition: all 0.3s ease;
+}
+
+.similar-project-card:hover .project-overlay {
+ opacity: 1;
+}
+
+.project-overlay i {
+ color: white;
+ font-size: 2rem;
+ transform: scale(0.8);
+ transition: transform 0.3s ease;
+}
+
+.similar-project-card:hover .project-overlay i {
+ transform: scale(1);
+}
+
+.similar-content {
+ padding: 1.5rem;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+.project-title {
+ color: #1a202c;
+ font-weight: 700;
+ font-size: 1.1rem;
+ margin-bottom: 0.75rem;
+ line-height: 1.3;
+}
+
+.project-description {
+ color: #64748b;
+ font-size: 0.9rem;
+ line-height: 1.5;
+ margin-bottom: 1rem;
+ flex: 1;
+}
+
+.project-categories {
+ display: flex;
+ gap: 0.5rem;
+ flex-wrap: wrap;
+ margin-top: auto;
+}
+
+.category-tag {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ padding: 0.3rem 0.75rem;
+ border-radius: 15px;
+ font-size: 0.75rem;
+ font-weight: 500;
+}
+
+/* Кнопки навигации карусели */
+.similar-next,
+.similar-prev {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ z-index: 10;
+ width: 50px;
+ height: 50px;
+ background: white;
+ border-radius: 50%;
+ color: #4f46e5 !important;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+ border: 1px solid #e5e7eb;
+ transition: all 0.3s ease;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 0 !important;
+}
+
+.similar-next {
+ right: 20px;
+}
+
+.similar-prev {
+ left: 20px;
+}
+
+.similar-next:hover,
+.similar-prev:hover {
+ transform: translateY(-50%) scale(1.1);
+ box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+ background: linear-gradient(135deg, #5a5fcf 0%, #6b46c1 100%);
+}
+
+.similar-next::after,
+.similar-prev::after {
+ font-size: 18px;
+ font-weight: 700;
+}
+
+.similar-pagination {
+ bottom: -50px !important;
+}
+
+.similar-pagination .swiper-pagination-bullet {
+ width: 12px;
+ height: 12px;
+ background: #cbd5e1;
+ opacity: 1;
+ transition: all 0.3s ease;
+}
+
+/* Стили для заглушки изображений */
+.image-placeholder {
+ background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+ border-radius: 15px 15px 0 0;
+ position: relative;
+ overflow: hidden;
+}
+
+.image-placeholder::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: url('data:image/svg+xml, ');
+ opacity: 0.5;
+}
+
+.placeholder-content {
+ position: relative;
+ z-index: 2;
+ text-align: center;
+}
+
+.placeholder-icon {
+ font-size: 2.5rem !important;
+ color: #94a3b8 !important;
+ margin-bottom: 0.5rem;
+}
+
+.placeholder-text {
+ font-size: 0.85rem !important;
+ color: #64748b !important;
+ font-weight: 500;
+}
+
+.compact-card {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 1rem;
+ background: rgba(255, 255, 255, 0.15);
+ backdrop-filter: blur(15px);
+ -webkit-backdrop-filter: blur(15px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 15px;
+ color: white;
+ transition: all 0.3s ease;
+}
+
+.compact-card:hover {
+ background: rgba(255, 255, 255, 0.25);
+ transform: translateY(-2px);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.compact-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: 12px;
+ color: white;
+ font-size: 1.1rem;
+}
+
+.compact-content {
+ flex: 1;
+}
+
+.compact-label {
+ font-size: 0.8rem;
+ color: rgba(255, 255, 255, 0.8);
+ margin-bottom: 0.25rem;
+ font-weight: 500;
+}
+
+.compact-value {
+ font-size: 0.95rem;
+ font-weight: 600;
+ color: white;
+}
+
+/* Сайдбар с технологиями */
+.tech-sidebar {
+ background: white;
+ border-radius: 20px;
+ padding: 2rem;
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+ border: 1px solid #f1f5f9;
+ margin-bottom: 2rem;
+ position: sticky;
+ top: 20px;
+}
+
+.tech-sidebar-title {
+ color: #1a202c;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ padding-bottom: 1rem;
+ border-bottom: 2px solid #f8fafc;
+ position: relative;
+}
+
+.tech-sidebar-title::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 60px;
+ height: 2px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.tech-table {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+}
+
+.tech-row {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 0.75rem;
+ border-radius: 10px;
+ transition: all 0.3s ease;
+ border: 1px solid transparent;
+}
+
+.tech-row:hover {
+ background: #f8fafc;
+ border-color: #e2e8f0;
+ transform: translateX(5px);
+}
+
+.tech-row .tech-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 36px;
+ height: 36px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-radius: 8px;
+ color: white;
+ font-size: 1rem;
+}
+
+.tech-row .tech-name {
+ font-size: 0.95rem;
+ font-weight: 600;
+ color: #4a5568;
+}
+
+/* Адаптивность для новых компонентов */
+@media (max-width: 992px) {
+ .compact-info-grid {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 0.75rem;
+ }
+
+ .tech-sidebar {
+ position: static;
+ margin-top: 2rem;
+ order: 2;
+ }
+}
+
+@media (max-width: 768px) {
+ .hero-action-bar {
+ justify-content: center;
+ }
+
+ .views-likes-bar {
+ justify-content: center;
+ }
+
+ .section-title {
+ font-size: 2rem;
+ }
+
+ .similarSwiper {
+ padding: 20px 60px;
+ }
+
+ .similarSwiper .swiper-slide {
+ margin: 0 10px;
+ }
+
+ .similar-next {
+ right: 15px;
+ }
+
+ .similar-prev {
+ left: 15px;
+ }
+
+ .similar-next,
+ .similar-prev {
+ width: 40px;
+ height: 40px;
+ }
+
+ .similar-next::after,
+ .similar-prev::after {
+ font-size: 14px;
+ }
+
+ .tech-center-section {
+ padding: 2rem 1rem;
+ margin: 2rem 1rem;
+ }
+
+ .tech-center-grid {
+ gap: 1rem;
+ }
+
+ .tech-center-item {
+ min-width: 100px;
+ padding: 1rem;
+ }
+
+ .content-wrapper {
+ padding: 1rem;
+ }
+
+ .tech-sidebar-section {
+ position: static;
+ margin-top: 2rem;
+ order: 2;
+ }
+
+ .tech-vertical-list {
+ gap: 0.5rem;
+ }
+
+ .tech-vertical-item {
+ padding: 0.5rem;
+ }
+}
+
+@media (max-width: 576px) {
+ .compact-info-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .stat-pill {
+ padding: 0.5rem 1rem;
+ font-size: 0.85rem;
+ }
+}
+
+@media (max-width: 576px) {
+ .project-stats-table {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 0.75rem;
+ }
+
+ .stat-card.tech-card {
+ grid-column: span 2;
+ }
+
+ .tech-card .stat-content {
+ align-items: center;
+ text-align: center;
+ }
+
+ .tech-card .stat-icon {
+ margin: 0 auto 0.75rem;
+ }
+}
+
+/* Стили для заглушки изображений в карточках карусели */
+.image-placeholder {
+ background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+ border-radius: 15px 15px 0 0;
+ position: relative;
+ overflow: hidden;
+}
+
+.image-placeholder::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: url('data:image/svg+xml, ');
+ opacity: 0.5;
+}
+
+.placeholder-content {
+ position: relative;
+ z-index: 2;
+ text-align: center;
+}
+
+.placeholder-icon {
+ font-size: 2.5rem !important;
+ color: #94a3b8 !important;
+ margin-bottom: 0.5rem;
+}
+
+.placeholder-text {
+ font-size: 0.85rem !important;
+ color: #64748b !important;
+ font-weight: 500;
}
\ No newline at end of file
diff --git a/smartsoltech/static/assets/js/project-detail.js b/smartsoltech/static/assets/js/project-detail.js
new file mode 100644
index 0000000..a221ae8
--- /dev/null
+++ b/smartsoltech/static/assets/js/project-detail.js
@@ -0,0 +1,227 @@
+// Modern Project Detail Page Enhancements
+document.addEventListener('DOMContentLoaded', function() {
+
+ // Animate counter numbers
+ function animateCounters() {
+ const counters = document.querySelectorAll('.stat-number[data-target]');
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ const counter = entry.target;
+ const target = parseInt(counter.dataset.target);
+ const duration = 2000; // 2 seconds
+ const step = target / (duration / 16); // 60fps
+ let current = 0;
+
+ const timer = setInterval(() => {
+ current += step;
+ counter.textContent = Math.floor(current);
+
+ if (current >= target) {
+ counter.textContent = target;
+ clearInterval(timer);
+ }
+ }, 16);
+
+ observer.unobserve(counter);
+ }
+ });
+ }, {
+ threshold: 0.5
+ });
+
+ counters.forEach(counter => observer.observe(counter));
+ }
+
+ // Scroll-triggered animations
+ function initScrollAnimations() {
+ const animatedElements = document.querySelectorAll('.content-section, .tech-item, .info-item');
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach((entry, index) => {
+ if (entry.isIntersecting) {
+ setTimeout(() => {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }, index * 100);
+ }
+ });
+ }, {
+ threshold: 0.1,
+ rootMargin: '0px 0px -50px 0px'
+ });
+
+ animatedElements.forEach(el => {
+ el.style.opacity = '0';
+ el.style.transform = 'translateY(30px)';
+ el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+ observer.observe(el);
+ });
+ }
+
+ // Share functionality
+ function initShareButton() {
+ const shareBtn = document.querySelector('.share-btn');
+ if (shareBtn) {
+ shareBtn.addEventListener('click', async function() {
+ const projectTitle = document.querySelector('.hero-title').textContent;
+ const url = window.location.href;
+
+ if (navigator.share) {
+ try {
+ await navigator.share({
+ title: projectTitle,
+ text: `Посмотрите на этот проект: ${projectTitle}`,
+ url: url
+ });
+ } catch (err) {
+ console.log('Sharing failed:', err);
+ fallbackShare(url);
+ }
+ } else {
+ fallbackShare(url);
+ }
+ });
+ }
+ }
+
+ function fallbackShare(url) {
+ // Copy to clipboard as fallback
+ if (navigator.clipboard) {
+ navigator.clipboard.writeText(url).then(() => {
+ showToast('Ссылка скопирована в буфер обмена!');
+ });
+ }
+ }
+
+ function showToast(message) {
+ // Create toast notification
+ const toast = document.createElement('div');
+ toast.className = 'toast-notification';
+ toast.textContent = message;
+ toast.style.cssText = `
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ background: linear-gradient(135deg, #48bb78, #38a169);
+ color: white;
+ padding: 1rem 1.5rem;
+ border-radius: 10px;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+ z-index: 10000;
+ transform: translateX(400px);
+ transition: transform 0.3s ease;
+ `;
+
+ document.body.appendChild(toast);
+
+ setTimeout(() => {
+ toast.style.transform = 'translateX(0)';
+ }, 100);
+
+ setTimeout(() => {
+ toast.style.transform = 'translateX(400px)';
+ setTimeout(() => document.body.removeChild(toast), 300);
+ }, 3000);
+ }
+
+ // Tech item hover effects
+ function initTechInteractions() {
+ const techItems = document.querySelectorAll('.tech-item');
+
+ techItems.forEach(item => {
+ item.addEventListener('mouseenter', function() {
+ this.style.transform = 'translateY(-8px) scale(1.02)';
+ });
+
+ item.addEventListener('mouseleave', function() {
+ this.style.transform = 'translateY(-5px) scale(1)';
+ });
+ });
+ }
+
+ // Parallax effect for hero background
+ function initParallaxEffect() {
+ const heroBackground = document.querySelector('.hero-pattern');
+ if (!heroBackground) return;
+
+ let ticking = false;
+
+ function updateParallax() {
+ const scrolled = window.pageYOffset;
+ const rate = scrolled * -0.3;
+
+ heroBackground.style.transform = `translateY(${rate}px)`;
+ ticking = false;
+ }
+
+ function requestTick() {
+ if (!ticking) {
+ requestAnimationFrame(updateParallax);
+ ticking = true;
+ }
+ }
+
+ window.addEventListener('scroll', requestTick);
+ }
+
+ // Smooth scroll for internal links
+ function initSmoothScroll() {
+ const links = document.querySelectorAll('a[href^="#"]');
+
+ links.forEach(link => {
+ link.addEventListener('click', function(e) {
+ e.preventDefault();
+
+ const targetId = this.getAttribute('href');
+ const targetSection = document.querySelector(targetId);
+
+ if (targetSection) {
+ targetSection.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start'
+ });
+ }
+ });
+ });
+ }
+
+ // Initialize all enhancements
+ animateCounters();
+ initScrollAnimations();
+ initShareButton();
+ initTechInteractions();
+ initParallaxEffect();
+ initSmoothScroll();
+
+ // Add loading class removal after page load
+ window.addEventListener('load', function() {
+ document.body.classList.add('page-loaded');
+ });
+});
+
+// CSS for page loading animation
+const loadingStyles = `
+ body:not(.page-loaded) .project-hero {
+ opacity: 0;
+ transform: translateY(50px);
+ transition: opacity 0.8s ease, transform 0.8s ease;
+ }
+
+ body.page-loaded .project-hero {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ .toast-notification {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ font-size: 0.9rem;
+ font-weight: 500;
+ }
+`;
+
+// Inject loading styles
+const styleSheet = document.createElement('style');
+styleSheet.textContent = loadingStyles;
+document.head.appendChild(styleSheet);
\ No newline at end of file
diff --git a/smartsoltech/staticfiles/assets/css/modern-styles.css b/smartsoltech/staticfiles/assets/css/modern-styles.css
index 3fd79c0..8913357 100644
--- a/smartsoltech/staticfiles/assets/css/modern-styles.css
+++ b/smartsoltech/staticfiles/assets/css/modern-styles.css
@@ -283,6 +283,10 @@ p {
/* Responsive Design */
@media (max-width: 768px) {
+ .section-padding {
+ padding: 2rem 0; /* Уменьшенные отступы для мобильных */
+ }
+
h1 {
font-size: 2.5rem;
}
@@ -329,7 +333,7 @@ p {
}
.section-padding {
- padding: 6rem 0;
+ padding: 3rem 0; /* Уменьшено с 6rem до 3rem */
}
.mb-large {
@@ -658,8 +662,8 @@ p {
position: relative;
display: inline-flex;
align-items: center;
- gap: 0.75rem;
- padding: 0.75rem;
+ gap: 16px; /* Увеличено с 12px до 16px для предотвращения слипания */
+ padding: 10px; /* Отступы от краев: лево 10px, право 10px */
background: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
@@ -668,15 +672,16 @@ p {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
min-height: 50px;
- transition: none;
+ transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1);
overflow: visible;
+ width: auto;
}
/* Удаляем старую структуру inner-pill */
.pill-indicators {
display: flex;
- gap: 0.75rem;
+ gap: 16px; /* Увеличено с 12px до 16px */
align-items: center;
flex-wrap: nowrap;
white-space: nowrap;
@@ -700,15 +705,19 @@ p {
overflow: visible;
transform-origin: center;
flex-shrink: 0;
+ margin-left: 0;
+ margin-right: 0;
}
.pill-indicator.active {
border: 2px solid rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.1);
width: fit-content;
- min-width: 36px;
+ min-width: 60px; /* Увеличиваем минимальную ширину */
padding: 0 1rem;
border-radius: 18px;
+ margin-left: 0;
+ margin-right: 0;
}
.pill-indicator:not(.active):hover {
@@ -717,6 +726,11 @@ p {
transform: scale(1.05);
}
+/* Отменяем transform при отсутствии hover */
+.pill-indicator:not(.active):not(:hover) {
+ transform: none;
+}
+
.pill-indicator::before {
content: '';
width: 8px;
@@ -756,11 +770,19 @@ p {
position: relative;
transform-origin: center;
z-index: 2;
+ pointer-events: none; /* Предотвращаем вмешательство в события */
+}
+
+/* Скрытие текста в неактивных пилюлях */
+.pill-indicator:not(.active) .pill-indicator-title {
+ opacity: 0 !important;
+ transform: scale(0.8) !important;
}
.pill-indicator.active .pill-indicator-title {
opacity: 1;
transform: scale(1);
+ color: rgba(255, 255, 255, 0.95) !important; /* Форсируем цвет для автоматической прокрутки */
}
/* Плавная анимация как вода */
@@ -784,7 +806,7 @@ p {
.project-image {
position: relative;
overflow: hidden;
- height: 200px;
+ height: 180px;
}
.project-image img {
@@ -950,6 +972,10 @@ p {
/* Responsive Design */
@media (max-width: 768px) {
+ .section-padding {
+ padding: 2rem 0; /* Еще меньше для мобильных устройств */
+ }
+
.hero-container {
border-radius: 16px;
margin: 1rem;
@@ -977,17 +1003,20 @@ p {
}
.outer-pill {
- gap: 0.5rem;
- padding: 0.5rem;
+ gap: 12px; /* Меньший gap для мобильных, но всё ещё достаточный */
+ padding: 8px; /* Отступы от краев: лево 8px, право 8px */
}
.pill-indicators {
- gap: 0.5rem;
+ gap: 12px; /* Соответствует outer-pill gap */
}
.pill-indicator.active {
padding: 0 0.75rem;
font-size: 0.8rem;
+ /* Убираем дополнительные margin для мобильных */
+ margin-left: 0;
+ margin-right: 0;
}
.pill-indicator-title {
@@ -1122,4 +1151,2443 @@ p {
.animate-fade-in-up {
animation: fadeInUp 0.8s ease-out;
+}
+
+/* Дополнительные стили для компактных карточек проектов */
+.projects-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+ max-width: 100%;
+ gap: 2rem;
+ margin-bottom: 3rem;
+}
+
+/* Ограничиваем максимальный размер карточки */
+.project-card {
+ max-width: 400px;
+ width: 100%;
+ background: white;
+ border-radius: 20px;
+ overflow: hidden;
+ box-shadow: 0 8px 25px rgba(0,0,0,0.08);
+ transition: all 0.3s ease;
+ margin-bottom: 0;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid #f1f5f9;
+}
+
+.project-card:hover {
+ box-shadow: 0 20px 50px rgba(0,0,0,0.15);
+ transform: translateY(-5px);
+ border-color: #e2e8f0;
+}
+
+.project-media {
+ width: 100%;
+ height: 180px;
+ overflow: hidden;
+ position: relative;
+ background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%);
+}
+
+.project-media img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+ transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.project-card:hover .project-media img {
+ transform: scale(1.08);
+}
+
+.project-media.no-image {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+}
+
+.project-media.no-image::before {
+ content: '\f1c2';
+ font-family: 'Font Awesome 5 Free';
+ font-weight: 900;
+ font-size: 2.5rem;
+ opacity: 0.7;
+}
+
+.project-badge {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ padding: 0.4rem 0.8rem;
+ border-radius: 20px;
+ font-size: 0.75rem;
+ font-weight: 600;
+ z-index: 2;
+ box-shadow: 0 4px 15px rgba(0,0,0,0.25);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.project-content {
+ padding: 1rem;
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+.project-title {
+ font-size: 1.1rem;
+ font-weight: 700;
+ color: #1a202c;
+ margin-bottom: 0.5rem;
+ line-height: 1.3;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ min-height: 2.6rem;
+}
+
+.project-description {
+ color: #64748b;
+ margin-bottom: 0.75rem;
+ flex-grow: 1;
+ line-height: 1.5;
+ font-size: 0.85rem;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ min-height: 2.5rem;
+}
+
+.project-stats-section {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 0.75rem;
+ padding: 0.5rem 0.75rem;
+ background: #f8fafc;
+ border-radius: 8px;
+ font-size: 0.8rem;
+}
+
+.stats-left {
+ display: flex;
+ gap: 1rem;
+}
+
+.stat-item {
+ display: flex;
+ align-items: center;
+ gap: 0.35rem;
+ color: #64748b;
+}
+
+.stat-item i {
+ color: #667eea;
+ font-size: 0.85rem;
+}
+
+.project-year {
+ color: #94a3b8;
+ font-weight: 500;
+}
+
+.project-footer {
+ padding: 0 1rem 1rem;
+ border-top: 1px solid #f1f5f9;
+ margin-top: auto;
+}
+
+.project-categories {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.35rem;
+ margin-bottom: 0.5rem;
+}
+
+.category-tag {
+ display: inline-flex;
+ align-items: center;
+ padding: 0.25rem 0.5rem;
+ background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+ color: #667eea;
+ border-radius: 12px;
+ font-size: 0.7rem;
+ font-weight: 500;
+ white-space: nowrap;
+ border: 1px solid rgba(102, 126, 234, 0.2);
+}
+
+.category-tag i {
+ margin-right: 0.25rem;
+ font-size: 0.75rem;
+}
+
+.project-meta {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 0.85rem;
+ color: #94a3b8;
+}
+
+.project-info {
+ display: flex;
+ gap: 1rem;
+ font-size: 0.8rem;
+}
+
+.project-info span {
+ display: flex;
+ align-items: center;
+ gap: 0.25rem;
+}
+
+.project-status {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.25rem;
+ padding: 0.25rem 0.75rem;
+ border-radius: 15px;
+ font-size: 0.75rem;
+ font-weight: 600;
+}
+
+.status-completed {
+ background: rgba(34, 197, 94, 0.1);
+ color: #16a34a;
+ border: 1px solid rgba(34, 197, 94, 0.2);
+}
+
+.status-in_progress {
+ background: rgba(59, 130, 246, 0.1);
+ color: #2563eb;
+ border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.status-archived {
+ background: rgba(107, 114, 128, 0.1);
+ color: #6b7280;
+ border: 1px solid rgba(107, 114, 128, 0.2);
+}
+
+.media-player {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+.play-btn {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: rgba(255, 255, 255, 0.9);
+ border: none;
+ border-radius: 50%;
+ width: 45px;
+ height: 45px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.1rem;
+ color: #667eea;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+}
+
+.play-btn:hover {
+ background: white;
+ transform: translate(-50%, -50%) scale(1.1);
+ box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+}
+
+/* Адаптивные стили для projects-grid */
+@media (max-width: 768px) {
+ .projects-grid {
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 1.5rem;
+ }
+
+ .project-card {
+ max-width: 350px;
+ }
+}
+
+@media (max-width: 576px) {
+ .projects-grid {
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1.5rem;
+ }
+
+ .project-card {
+ max-width: 320px;
+ }
+}
+
+/* ===================
+ PROJECT DETAIL IMPROVEMENTS
+ =================== */
+
+/* Хлебные крошки */
+.project-breadcrumb {
+ margin-bottom: 1.5rem;
+ font-size: 0.9rem;
+ color: rgba(255, 255, 255, 0.8);
+}
+
+.project-breadcrumb a {
+ color: rgba(255, 255, 255, 0.8);
+ text-decoration: none;
+ transition: all 0.3s ease;
+}
+
+.project-breadcrumb a:hover {
+ color: #fff;
+ text-decoration: underline;
+}
+
+.project-breadcrumb i {
+ opacity: 0.6;
+ font-size: 0.8em;
+}
+
+/* Мета-бейджи */
+.project-meta-badges {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+.meta-badge {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.5rem 1rem;
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(10px);
+ border-radius: 25px;
+ color: rgba(255, 255, 255, 0.9);
+ font-size: 0.85rem;
+ font-weight: 500;
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ transition: all 0.3s ease;
+}
+
+.meta-badge:hover {
+ background: rgba(255, 255, 255, 0.15);
+ border-color: rgba(255, 255, 255, 0.3);
+ transform: translateY(-1px);
+}
+
+.meta-badge i {
+ font-size: 0.9em;
+ opacity: 0.8;
+}
+
+/* Статистика */
+.stats-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+ margin-top: 0.5rem;
+}
+
+.stat-item {
+ text-align: center;
+ padding: 1rem;
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+ border-radius: 10px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ transition: all 0.3s ease;
+}
+
+.stat-item:hover {
+ transform: translateY(-2px);
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
+ border-color: rgba(255, 255, 255, 0.2);
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+}
+
+.stat-number {
+ font-size: 1.8rem;
+ font-weight: 700;
+ color: #fff;
+ margin-bottom: 0.25rem;
+}
+
+.stat-label {
+ font-size: 0.8rem;
+ color: rgba(255, 255, 255, 0.7);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+/* Статус-бейдж */
+.status-badge {
+ display: inline-block;
+ padding: 0.4rem 0.8rem;
+ border-radius: 20px;
+ font-size: 0.85rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ border: none;
+}
+
+.info-item {
+ position: relative;
+ overflow: hidden;
+}
+
+.info-item::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 0;
+ height: 2px;
+ background: linear-gradient(90deg, #667eea, #764ba2);
+ transition: width 0.3s ease;
+}
+
+.info-item:hover::after {
+ width: 100%;
+}
+
+.info-label {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-weight: 600;
+ color: rgba(255, 255, 255, 0.9);
+ margin-bottom: 0.75rem;
+}
+
+.info-label i {
+ color: rgba(255, 255, 255, 0.7);
+ width: 16px;
+ text-align: center;
+}
+
+.info-value {
+ padding-left: 0.5rem;
+ color: rgba(255, 255, 255, 0.8);
+ line-height: 1.6;
+}
+
+/* ===================
+ MODERN PROJECT HERO SECTION
+ =================== */
+
+.project-hero {
+ position: relative;
+ min-height: 80vh;
+ display: flex;
+ align-items: center;
+ padding: 2rem 0;
+ overflow: hidden;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.hero-background {
+ position: absolute;
+ inset: 0;
+ z-index: 1;
+}
+
+.hero-gradient {
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(
+ 135deg,
+ rgba(102, 126, 234, 0.9) 0%,
+ rgba(118, 75, 162, 0.85) 50%,
+ rgba(102, 126, 234, 0.8) 100%
+ );
+ animation: gradientShift 20s ease-in-out infinite;
+}
+
+@keyframes gradientShift {
+ 0%, 100% { background-position: 0% 50%; }
+ 50% { background-position: 100% 50%; }
+}
+
+.hero-pattern {
+ position: absolute;
+ inset: 0;
+ background-image:
+ radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
+ radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
+ linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
+ animation: patternMove 30s linear infinite;
+}
+
+@keyframes patternMove {
+ 0% { transform: translateX(0) translateY(0); }
+ 100% { transform: translateX(-50px) translateY(-30px); }
+}
+
+.hero-content {
+ position: relative;
+ z-index: 3;
+}
+
+/* Современные breadcrumbs */
+.breadcrumb-modern {
+ margin-bottom: 2rem;
+ position: relative;
+ z-index: 4;
+}
+
+.breadcrumb-list {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ font-size: 0.9rem;
+}
+
+.breadcrumb-link {
+ color: rgba(255, 255, 255, 0.8);
+ text-decoration: none;
+ transition: all 0.3s ease;
+ padding: 0.25rem 0.5rem;
+ border-radius: 6px;
+}
+
+.breadcrumb-link:hover {
+ color: white;
+ background: rgba(255, 255, 255, 0.1);
+ text-decoration: none;
+}
+
+.breadcrumb-separator {
+ color: rgba(255, 255, 255, 0.5);
+ font-weight: 300;
+}
+
+.breadcrumb-current {
+ color: white;
+ font-weight: 500;
+}
+
+/* Теги и категории */
+.project-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+ margin-bottom: 1.5rem;
+}
+
+.tag {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.5rem 1rem;
+ background: rgba(255, 255, 255, 0.15);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 25px;
+ color: white;
+ font-size: 0.85rem;
+ font-weight: 500;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.tag:hover {
+ background: rgba(255, 255, 255, 0.25);
+ transform: translateY(-2px);
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+.tag.featured {
+ background: linear-gradient(45deg, #ffd700, #ffed4e);
+ color: #1a202c;
+ border-color: rgba(255, 215, 0, 0.3);
+ font-weight: 600;
+}
+
+.tag.featured:hover {
+ background: linear-gradient(45deg, #ffed4e, #ffd700);
+ transform: translateY(-2px) scale(1.05);
+}
+
+/* Hero title */
+.hero-title {
+ font-size: clamp(2.5rem, 8vw, 6rem);
+ font-weight: 800;
+ line-height: 0.9;
+ color: white;
+ margin-bottom: 1rem;
+ letter-spacing: -0.02em;
+ text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.hero-subtitle {
+ font-size: clamp(1.125rem, 2.5vw, 1.5rem);
+ color: rgba(255, 255, 255, 0.9);
+ line-height: 1.6;
+ margin-bottom: 2rem;
+ max-width: 600px;
+}
+
+/* Quick facts */
+.quick-facts {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1.5rem;
+ margin-bottom: 2rem;
+}
+
+.fact-item {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 1rem 1.5rem;
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(15px);
+ -webkit-backdrop-filter: blur(15px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 15px;
+ color: white;
+ transition: all 0.3s ease;
+ min-width: 200px;
+}
+
+.fact-item:hover {
+ background: rgba(255, 255, 255, 0.15);
+ transform: translateY(-3px);
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+.fact-icon {
+ font-size: 1.5rem;
+ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+}
+
+.fact-content {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+}
+
+.fact-label {
+ font-size: 0.8rem;
+ color: rgba(255, 255, 255, 0.7);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ font-weight: 500;
+}
+
+.fact-value {
+ font-size: 1rem;
+ color: white;
+ font-weight: 600;
+}
+
+/* Hero actions */
+.hero-actions {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 2rem;
+}
+
+.hero-action-bar {
+ display: flex;
+ justify-content: flex-start;
+ margin-bottom: 1rem;
+}
+
+.hero-quick-stats {
+ display: flex;
+ gap: 1rem;
+ margin-left: auto;
+}
+
+.views-likes-bar {
+ display: flex;
+ gap: 0.75rem;
+}
+
+.stat-pill {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.6rem 1.2rem;
+ background: rgba(255, 255, 255, 0.15);
+ backdrop-filter: blur(15px);
+ -webkit-backdrop-filter: blur(15px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 25px;
+ color: white;
+ font-weight: 600;
+ transition: all 0.3s ease;
+ font-size: 0.9rem;
+}
+
+.stat-pill:hover {
+ background: rgba(255, 255, 255, 0.25);
+ transform: translateY(-2px);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.stat-pill i {
+ font-size: 0.85rem;
+ color: rgba(255, 255, 255, 0.9);
+}
+
+.quick-stat-item {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.75rem 1rem;
+ background: rgba(255, 255, 255, 0.15);
+ backdrop-filter: blur(15px);
+ -webkit-backdrop-filter: blur(15px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 20px;
+ color: white;
+ font-weight: 600;
+ transition: all 0.3s ease;
+}
+
+.quick-stat-item:hover {
+ background: rgba(255, 255, 255, 0.25);
+ transform: translateY(-2px);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.quick-stat-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ color: rgba(255, 255, 255, 0.9);
+ font-size: 0.9rem;
+}
+
+.quick-stat-value {
+ font-size: 1rem;
+ font-weight: 700;
+ color: white;
+}
+
+.cta-button {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 1rem 2rem;
+ border-radius: 50px;
+ text-decoration: none;
+ font-weight: 600;
+ font-size: 1rem;
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ position: relative;
+ overflow: hidden;
+ border: 2px solid transparent;
+}
+
+.cta-button.primary {
+ background: linear-gradient(45deg, #ffffff, #f8fafc);
+ color: #667eea;
+ box-shadow: 0 8px 30px rgba(255, 255, 255, 0.3);
+}
+
+.cta-button.primary:hover {
+ transform: translateY(-4px) scale(1.02);
+ box-shadow: 0 15px 40px rgba(255, 255, 255, 0.4);
+ color: #667eea;
+ text-decoration: none;
+}
+
+.cta-button.secondary {
+ background: rgba(255, 255, 255, 0.1);
+ color: white;
+ border-color: rgba(255, 255, 255, 0.3);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+}
+
+.cta-button.secondary:hover {
+ background: rgba(255, 255, 255, 0.2);
+ border-color: rgba(255, 255, 255, 0.5);
+ transform: translateY(-3px);
+ color: white;
+ text-decoration: none;
+}
+
+.cta-button.outline {
+ background: transparent;
+ color: white;
+ border-color: rgba(255, 255, 255, 0.4);
+}
+
+.cta-button.outline:hover {
+ background: rgba(255, 255, 255, 0.1);
+ border-color: white;
+ transform: translateY(-2px);
+ color: white;
+ text-decoration: none;
+}
+
+.button-icon {
+ transition: transform 0.3s ease;
+ display: flex;
+ align-items: center;
+}
+
+.cta-button:hover .button-icon {
+ transform: translateX(4px);
+}
+
+/* Hero stats */
+.hero-stats {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1rem;
+ margin-top: 2rem;
+}
+
+.stat-card {
+ text-align: center;
+ padding: 1.5rem 1rem;
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(15px);
+ -webkit-backdrop-filter: blur(15px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 20px;
+ transition: all 0.3s ease;
+ color: white;
+}
+
+.stat-card:hover {
+ background: rgba(255, 255, 255, 0.15);
+ transform: translateY(-5px);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+}
+
+.stat-number {
+ font-size: 2rem;
+ font-weight: 800;
+ color: white;
+ margin-bottom: 0.5rem;
+ text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.stat-label {
+ font-size: 0.85rem;
+ color: rgba(255, 255, 255, 0.8);
+ text-transform: uppercase;
+ letter-spacing: 0.8px;
+ font-weight: 500;
+}
+
+/* ===================
+ PROJECT OVERVIEW SECTION
+ =================== */
+
+.project-overview {
+ padding: 5rem 0;
+ background: #f8fafc;
+}
+
+.content-section {
+ margin-bottom: 4rem;
+}
+
+.section-title {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 2rem;
+ font-size: 2rem;
+ font-weight: 700;
+ color: #1a202c;
+}
+
+.title-number {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 50px;
+ height: 50px;
+ background: linear-gradient(135deg, #667eea, #764ba2);
+ color: white;
+ border-radius: 15px;
+ font-size: 1.2rem;
+ font-weight: 800;
+ box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+}
+
+.title-text {
+ color: #2d3748;
+ letter-spacing: -0.01em;
+}
+
+.content-rich {
+ max-width: none;
+ line-height: 1.8;
+}
+
+.lead-text {
+ font-size: 1.25rem;
+ color: #4a5568;
+ line-height: 1.7;
+ margin-bottom: 3rem;
+ max-width: 800px;
+}
+
+/* Highlight boxes */
+.highlight-box {
+ display: flex;
+ gap: 1.5rem;
+ padding: 2rem;
+ margin-bottom: 2rem;
+ border-radius: 20px;
+ border: 1px solid;
+ position: relative;
+ overflow: hidden;
+}
+
+.highlight-box::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 4px;
+ height: 100%;
+ border-radius: 2px;
+}
+
+.highlight-box.challenge {
+ background: linear-gradient(135deg, #fff5f5, #fed7d7);
+ border-color: #feb2b2;
+}
+
+.highlight-box.challenge::before {
+ background: linear-gradient(to bottom, #f56565, #e53e3e);
+}
+
+.highlight-box.solution {
+ background: linear-gradient(135deg, #f0fff4, #c6f6d5);
+ border-color: #9ae6b4;
+}
+
+.highlight-box.solution::before {
+ background: linear-gradient(to bottom, #48bb78, #38a169);
+}
+
+.highlight-box.results {
+ background: linear-gradient(135deg, #fffbeb, #fed7aa);
+ border-color: #fbb6ce;
+}
+
+.highlight-box.results::before {
+ background: linear-gradient(to bottom, #ed8936, #dd6b20);
+}
+
+.highlight-icon {
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ width: 50px;
+ height: 50px;
+ border-radius: 15px;
+ color: white;
+ font-size: 1.2rem;
+ flex-shrink: 0;
+ margin-top: 0.5rem;
+}
+
+.challenge .highlight-icon {
+ background: linear-gradient(135deg, #f56565, #e53e3e);
+}
+
+.solution .highlight-icon {
+ background: linear-gradient(135deg, #48bb78, #38a169);
+}
+
+.results .highlight-icon {
+ background: linear-gradient(135deg, #ed8936, #dd6b20);
+}
+
+.highlight-content {
+ flex: 1;
+}
+
+.highlight-title {
+ font-size: 1.3rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+ color: #2d3748;
+}
+
+.highlight-text {
+ font-size: 1rem;
+ line-height: 1.6;
+ color: #4a5568;
+ margin: 0;
+}
+
+/* Technology showcase */
+.tech-showcase {
+ background: white;
+ border-radius: 25px;
+ padding: 2.5rem;
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+ border: 1px solid #f1f5f9;
+}
+
+.tech-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ gap: 1.5rem;
+}
+
+.tech-item {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 1.5rem;
+ background: linear-gradient(135deg, #f8fafc, #f1f5f9);
+ border: 1px solid #e2e8f0;
+ border-radius: 15px;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ cursor: pointer;
+}
+
+.tech-item:hover {
+ background: linear-gradient(135deg, #ffffff, #f8fafc);
+ border-color: #cbd5e1;
+ transform: translateY(-5px);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+}
+
+.tech-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 50px;
+ height: 50px;
+ background: linear-gradient(135deg, #667eea, #764ba2);
+ color: white;
+ border-radius: 12px;
+ font-size: 1.3rem;
+ box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
+ flex-shrink: 0;
+}
+
+.tech-content {
+ flex: 1;
+}
+
+.tech-name {
+ display: block;
+ font-size: 1.1rem;
+ font-weight: 600;
+ color: #2d3748;
+ margin-bottom: 0.25rem;
+}
+
+.tech-category {
+ font-size: 0.85rem;
+ color: #718096;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ font-weight: 500;
+}
+
+/* Project sidebar */
+.project-sidebar {
+ position: sticky;
+ top: 2rem;
+ max-height: calc(100vh - 4rem);
+ overflow-y: auto;
+}
+
+.sidebar-section {
+ background: white;
+ border-radius: 20px;
+ padding: 2rem;
+ margin-bottom: 2rem;
+ border: 1px solid #f1f5f9;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+}
+
+.sidebar-title {
+ font-size: 1.3rem;
+ font-weight: 700;
+ color: #2d3748;
+ margin-bottom: 1.5rem;
+ padding-bottom: 1rem;
+ border-bottom: 2px solid #f8fafc;
+ position: relative;
+}
+
+.sidebar-title::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 50px;
+ height: 2px;
+ background: linear-gradient(90deg, #667eea, #764ba2);
+ border-radius: 1px;
+}
+
+.info-grid {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+}
+
+.info-item {
+ padding: 1.25rem;
+ background: linear-gradient(135deg, #f8fafc, #f1f5f9);
+ border: 1px solid #e2e8f0;
+ border-radius: 12px;
+ transition: all 0.3s ease;
+}
+
+.info-item:hover {
+ background: linear-gradient(135deg, #ffffff, #f8fafc);
+ border-color: #cbd5e1;
+ transform: translateX(5px);
+}
+
+.info-label {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ font-weight: 600;
+ color: #4a5568;
+ margin-bottom: 0.75rem;
+ font-size: 0.9rem;
+}
+
+.info-label i {
+ color: #718096;
+ width: 18px;
+ text-align: center;
+}
+
+.info-value {
+ font-size: 1rem;
+ color: #2d3748;
+ font-weight: 500;
+ line-height: 1.5;
+}
+
+.status-badge {
+ display: inline-block;
+ padding: 0.5rem 1rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.status-badge.completed {
+ background: linear-gradient(135deg, #48bb78, #38a169);
+ color: white;
+}
+
+.status-badge.progress {
+ background: linear-gradient(135deg, #ed8936, #dd6b20);
+ color: white;
+}
+
+/* Hero info cards section */
+.hero-info-cards {
+ position: relative;
+ z-index: 4;
+ margin-top: 3rem;
+ padding-bottom: 2rem;
+}
+
+.hero-info-cards .project-stats-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.5rem;
+ margin-bottom: 3rem;
+}
+
+/* Hero Technologies Section */
+.hero-technologies {
+ text-align: center;
+ margin-top: 2rem;
+}
+
+.tech-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: white;
+ margin-bottom: 1.5rem;
+ text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.tech-buttons-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ justify-content: center;
+}
+
+.tech-button {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 1rem 1.5rem;
+ background: rgba(255, 255, 255, 0.15);
+ backdrop-filter: blur(15px);
+ -webkit-backdrop-filter: blur(15px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 20px;
+ color: white;
+ font-weight: 600;
+ font-size: 0.95rem;
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ cursor: pointer;
+ min-width: 120px;
+}
+
+.tech-button:hover {
+ background: rgba(255, 255, 255, 0.25);
+ border-color: rgba(255, 255, 255, 0.4);
+ transform: translateY(-3px) scale(1.05);
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+}
+
+.tech-button .tech-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: 8px;
+ font-size: 1.1rem;
+ transition: all 0.3s ease;
+}
+
+.tech-button:hover .tech-icon {
+ background: rgba(255, 255, 255, 0.3);
+ transform: scale(1.1);
+}
+
+.tech-name {
+ font-weight: 600;
+ letter-spacing: 0.3px;
+}
+
+.hero-info-cards .stat-card {
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.hero-info-cards .stat-card:hover {
+ background: rgba(255, 255, 255, 1);
+ border-color: rgba(255, 255, 255, 0.5);
+ transform: translateY(-10px) scale(1.03);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+}
+
+.hero-info-cards .stat-card.tech-card {
+ grid-column: span 2;
+}
+
+.hero-info-cards .tech-mini {
+ background: rgba(102, 126, 234, 0.9);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+}
+
+/* Адаптивность для hero cards */
+@media (max-width: 768px) {
+ .hero-info-cards .project-stats-grid {
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ margin-bottom: 2rem;
+ }
+
+ .hero-actions {
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .hero-quick-stats {
+ margin-left: 0;
+ margin-top: 1rem;
+ order: 2;
+ }
+
+ .cta-button {
+ width: 100%;
+ justify-content: center;
+ max-width: 280px;
+ }
+
+ .tech-buttons-grid {
+ gap: 0.75rem;
+ }
+
+ .tech-button {
+ padding: 0.75rem 1rem;
+ font-size: 0.85rem;
+ min-width: 100px;
+ }
+
+ .tech-button .tech-icon {
+ width: 28px;
+ height: 28px;
+ font-size: 1rem;
+ }
+}
+
+@media (max-width: 576px) {
+ .hero-info-cards .project-stats-grid {
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ }
+
+ .hero-quick-stats {
+ flex-direction: column;
+ gap: 0.75rem;
+ width: 100%;
+ }
+
+ .quick-stat-item {
+ justify-content: center;
+ width: 100%;
+ max-width: 200px;
+ }
+
+ .tech-buttons-grid {
+ gap: 0.5rem;
+ }
+
+ .tech-button {
+ padding: 0.5rem 0.75rem;
+ font-size: 0.8rem;
+ min-width: 80px;
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ .tech-button .tech-icon {
+ width: 24px;
+ height: 24px;
+ font-size: 0.9rem;
+ }
+}
+
+/* Project Stats Table */
+.project-stats-table {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+ gap: 1rem;
+}
+
+.stat-card {
+ position: relative;
+ padding: 1.5rem;
+ background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+ border: 1px solid #e2e8f0;
+ border-radius: 15px;
+ text-align: center;
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ cursor: pointer;
+ overflow: hidden;
+}
+
+.stat-card.tech-card {
+ grid-column: span 2;
+ text-align: left;
+}
+
+.tech-card .stat-content {
+ align-items: flex-start;
+}
+
+.tech-pills-mini {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ margin-bottom: 0.5rem;
+}
+
+.tech-mini {
+ background: linear-gradient(135deg, #667eea, #764ba2);
+ color: white;
+ padding: 0.25rem 0.5rem;
+ border-radius: 12px;
+ font-size: 0.7rem;
+ font-weight: 600;
+ white-space: nowrap;
+}
+
+.stat-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background: linear-gradient(90deg, #667eea, #764ba2);
+ transform: scaleX(0);
+ transform-origin: left;
+ transition: transform 0.3s ease;
+}
+
+.stat-card:hover::before {
+ transform: scaleX(1);
+}
+
+.stat-card:hover {
+ background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+ border-color: #cbd5e1;
+ transform: translateY(-8px) scale(1.02);
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
+}
+
+.stat-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 50px;
+ height: 50px;
+ background: linear-gradient(135deg, #667eea, #764ba2);
+ color: white;
+ border-radius: 12px;
+ font-size: 1.2rem;
+ margin: 0 auto 1rem;
+ box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
+ transition: all 0.3s ease;
+}
+
+.tech-card .stat-icon {
+ margin: 0 1rem 0 0;
+ flex-shrink: 0;
+}
+
+.stat-card:hover .stat-icon {
+ transform: scale(1.1);
+ box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+}
+
+.stat-content {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+ align-items: center;
+}
+
+.tech-card .stat-content {
+ flex: 1;
+ align-items: flex-start;
+}
+
+.stat-value {
+ font-size: 1.2rem;
+ font-weight: 700;
+ color: #2d3748;
+ line-height: 1.2;
+ word-break: break-word;
+}
+
+.stat-label {
+ font-size: 0.75rem;
+ color: #718096;
+ text-transform: uppercase;
+ letter-spacing: 0.8px;
+ font-weight: 600;
+}
+
+/* Technology Section */
+.tech-section {
+ background: white;
+ border-radius: 20px;
+ padding: 2rem;
+ border: 1px solid #f1f5f9;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+}
+
+.tech-pills-container {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+}
+
+.tech-pill {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.75rem 1rem;
+ background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+ border: 1px solid #e2e8f0;
+ border-radius: 25px;
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: #2d3748;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+}
+
+.tech-pill::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
+ transition: left 0.5s ease;
+}
+
+.tech-pill:hover::before {
+ left: 100%;
+}
+
+.tech-pill:hover {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ border-color: transparent;
+ transform: translateY(-3px) scale(1.05);
+ box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
+}
+
+.tech-logo {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ font-size: 1rem;
+ transition: all 0.3s ease;
+}
+
+.tech-pill:hover .tech-logo {
+ transform: scale(1.2);
+ text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.tech-name {
+ font-weight: 600;
+ transition: all 0.3s ease;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+ .project-stats-table {
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+ gap: 0.75rem;
+ }
+
+ .stat-card.tech-card {
+ grid-column: span 1;
+ }
+
+ .stat-card {
+ padding: 1rem;
+ }
+
+ .stat-icon {
+ width: 40px;
+ height: 40px;
+ font-size: 1rem;
+ margin-bottom: 0.75rem;
+ }
+
+ .tech-card .stat-icon {
+ margin: 0 0.75rem 0 0;
+ }
+
+ .stat-value {
+ font-size: 1.1rem;
+ }
+
+ .stat-label {
+ font-size: 0.7rem;
+ }
+
+ .tech-pills-mini {
+ gap: 0.25rem;
+ }
+
+ .tech-mini {
+ font-size: 0.65rem;
+ padding: 0.2rem 0.4rem;
+ }
+}
+
+.views-likes-section {
+ margin-bottom: 1rem;
+}
+
+.views-likes-bar {
+ display: flex;
+ gap: 0.75rem;
+ justify-content: flex-start;
+}
+
+.stat-pill {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.6rem 1.2rem;
+ background: rgba(255, 255, 255, 0.15);
+ -webkit-backdrop-filter: blur(15px);
+ backdrop-filter: blur(15px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 25px;
+ color: white;
+ font-weight: 600;
+ transition: all 0.3s ease;
+ font-size: 0.9rem;
+}
+
+.stat-pill:hover {
+ background: rgba(255, 255, 255, 0.25);
+ transform: translateY(-2px);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.stat-pill i {
+ font-size: 0.85rem;
+ color: rgba(255, 255, 255, 0.9);
+}
+
+.team-info-section {
+ margin-bottom: 1rem;
+}
+
+.team-card {
+ display: inline-flex;
+ width: auto;
+ min-width: 200px;
+ background: rgba(255, 255, 255, 0.15);
+ -webkit-backdrop-filter: blur(15px);
+ backdrop-filter: blur(15px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 15px;
+ color: white;
+ padding: 1rem;
+ gap: 0.75rem;
+ align-items: center;
+ transition: all 0.3s ease;
+}
+
+.team-card:hover {
+ background: rgba(255, 255, 255, 0.25);
+ transform: translateY(-2px);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.compact-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: 12px;
+ color: white;
+ font-size: 1.1rem;
+ flex-shrink: 0;
+}
+
+.compact-content {
+ flex: 1;
+}
+
+.compact-label {
+ font-size: 0.8rem;
+ color: rgba(255, 255, 255, 0.8);
+ margin-bottom: 0.25rem;
+ font-weight: 500;
+}
+
+.compact-value {
+ font-size: 0.95rem;
+ font-weight: 600;
+ color: white;
+}
+
+/* Дополнительные стили для отладки карусели */
+.similar-projects-section {
+ background: #f8fafc;
+ padding: 4rem 0;
+ margin-top: 3rem;
+ text-align: center;
+}
+
+.similar-projects-carousel {
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.similarSwiper {
+ padding: 0 80px;
+ overflow: visible;
+ width: 100%;
+ margin: 0 auto;
+}
+
+.similarSwiper .swiper-wrapper {
+ display: flex;
+ align-items: stretch;
+ width: 100%;
+ gap: 20px;
+}
+
+.similarSwiper .swiper-slide {
+ height: auto;
+ display: flex;
+ flex-shrink: 0;
+ width: 300px;
+ margin: 0 15px;
+ /* Фиксированная ширина для каждого слайда */
+}
+
+.similar-project-card {
+ background: white;
+ border-radius: 20px;
+ overflow: hidden;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ transition: all 0.3s ease;
+ cursor: pointer;
+ height: 100%;
+ width: 300px; /* Фиксированная ширина карточки */
+ display: flex;
+ flex-direction: column;
+ min-height: 350px;
+}
+
+.section-title {
+ color: #1a202c;
+ font-weight: 700;
+ margin-bottom: 2.5rem;
+ text-align: center;
+ font-size: 2.5rem;
+ position: relative;
+}
+
+.section-title::after {
+ content: '';
+ position: absolute;
+ bottom: -10px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 80px;
+ height: 4px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-radius: 2px;
+}
+
+.similar-project-card:hover {
+ transform: translateY(-8px);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+}
+
+.similar-thumb {
+ position: relative;
+ height: 200px;
+ overflow: hidden;
+}
+
+.similar-thumb img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.3s ease;
+}
+
+.similar-project-card:hover .similar-thumb img {
+ transform: scale(1.05);
+}
+
+/* Центрированный контент */
+.centered-content {
+ max-width: 800px;
+ margin: 0 auto;
+ text-align: center;
+}
+
+.content-wrapper {
+ padding: 2rem;
+}
+
+.description-text {
+ font-size: 1.1rem;
+ line-height: 1.8;
+ color: #4a5568;
+ margin: 1.5rem 0;
+ text-align: left;
+}
+
+/* Обновленные стили project-content */
+.project-content {
+ background: white;
+ border-radius: 20px;
+ padding: 2.5rem;
+ box-shadow: 0 10px 40px rgba(0,0,0,0.08);
+ line-height: 1.8;
+ border: 1px solid #f1f5f9;
+ margin-bottom: 2rem;
+}
+
+.project-content h2 {
+ color: #1a202c;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ padding-bottom: 1rem;
+ border-bottom: 2px solid #f8fafc;
+ position: relative;
+ text-align: left;
+}
+
+.project-content h2::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 80px;
+ height: 2px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+/* Центрированные технологии */
+.tech-center-section {
+ background: white;
+ border-radius: 20px;
+ padding: 3rem 2rem;
+ margin: 3rem auto;
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+ border: 1px solid #f1f5f9;
+ max-width: 800px;
+ text-align: center;
+}
+
+.tech-center-title {
+ color: #1a202c;
+ font-weight: 700;
+ margin-bottom: 2rem;
+ font-size: 1.8rem;
+ position: relative;
+}
+
+.tech-center-title::after {
+ content: '';
+ position: absolute;
+ bottom: -10px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 60px;
+ height: 3px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-radius: 2px;
+}
+
+.tech-center-grid {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 1.5rem;
+ margin-top: 2rem;
+}
+
+.tech-center-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 1.25rem;
+ background: #f8fafc;
+ border-radius: 15px;
+ transition: all 0.3s ease;
+ border: 1px solid #e2e8f0;
+ min-width: 120px;
+}
+
+.tech-center-item:hover {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ transform: translateY(-5px);
+ box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
+}
+
+.tech-center-item .tech-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-radius: 12px;
+ color: white;
+ font-size: 1.4rem;
+ transition: all 0.3s ease;
+}
+
+.tech-center-item:hover .tech-icon {
+ background: white;
+ color: #667eea;
+}
+
+.tech-center-item .tech-name {
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: #4a5568;
+ transition: color 0.3s ease;
+}
+
+.tech-center-item:hover .tech-name {
+ color: white;
+}
+
+/* Вертикальные технологии в сайдбаре */
+.tech-sidebar-section {
+ background: white;
+ border-radius: 20px;
+ padding: 2rem;
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+ border: 1px solid #f1f5f9;
+ position: sticky;
+ top: 20px;
+ height: fit-content;
+}
+
+.tech-sidebar-title {
+ color: #1a202c;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ padding-bottom: 1rem;
+ border-bottom: 2px solid #f8fafc;
+ position: relative;
+}
+
+.tech-sidebar-title::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 60px;
+ height: 2px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.tech-vertical-list {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+}
+
+.tech-vertical-item {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 0.75rem;
+ border-radius: 10px;
+ transition: all 0.3s ease;
+ border: 1px solid transparent;
+}
+
+.tech-vertical-item:hover {
+ background: #f8fafc;
+ border-color: #e2e8f0;
+ transform: translateX(5px);
+}
+
+.tech-vertical-item .tech-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 36px;
+ height: 36px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-radius: 8px;
+ color: white;
+ font-size: 1rem;
+ flex-shrink: 0;
+}
+
+.tech-vertical-item .tech-name {
+ font-size: 0.95rem;
+ font-weight: 600;
+ color: #4a5568;
+}
+
+.project-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(102, 126, 234, 0.8);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ transition: all 0.3s ease;
+}
+
+.similar-project-card:hover .project-overlay {
+ opacity: 1;
+}
+
+.project-overlay i {
+ color: white;
+ font-size: 2rem;
+ transform: scale(0.8);
+ transition: transform 0.3s ease;
+}
+
+.similar-project-card:hover .project-overlay i {
+ transform: scale(1);
+}
+
+.similar-content {
+ padding: 1.5rem;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+.project-title {
+ color: #1a202c;
+ font-weight: 700;
+ font-size: 1.1rem;
+ margin-bottom: 0.75rem;
+ line-height: 1.3;
+}
+
+.project-description {
+ color: #64748b;
+ font-size: 0.9rem;
+ line-height: 1.5;
+ margin-bottom: 1rem;
+ flex: 1;
+}
+
+.project-categories {
+ display: flex;
+ gap: 0.5rem;
+ flex-wrap: wrap;
+ margin-top: auto;
+}
+
+.category-tag {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ padding: 0.3rem 0.75rem;
+ border-radius: 15px;
+ font-size: 0.75rem;
+ font-weight: 500;
+}
+
+/* Кнопки навигации карусели */
+.similar-next,
+.similar-prev {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ z-index: 10;
+ width: 50px;
+ height: 50px;
+ background: white;
+ border-radius: 50%;
+ color: #4f46e5 !important;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+ border: 1px solid #e5e7eb;
+ transition: all 0.3s ease;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 0 !important;
+}
+
+.similar-next {
+ right: 20px;
+}
+
+.similar-prev {
+ left: 20px;
+}
+
+.similar-next:hover,
+.similar-prev:hover {
+ transform: translateY(-50%) scale(1.1);
+ box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+ background: linear-gradient(135deg, #5a5fcf 0%, #6b46c1 100%);
+}
+
+.similar-next::after,
+.similar-prev::after {
+ font-size: 18px;
+ font-weight: 700;
+}
+
+.similar-pagination {
+ bottom: -50px !important;
+}
+
+.similar-pagination .swiper-pagination-bullet {
+ width: 12px;
+ height: 12px;
+ background: #cbd5e1;
+ opacity: 1;
+ transition: all 0.3s ease;
+}
+
+/* Стили для заглушки изображений */
+.image-placeholder {
+ background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+ border-radius: 15px 15px 0 0;
+ position: relative;
+ overflow: hidden;
+}
+
+.image-placeholder::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: url('data:image/svg+xml, ');
+ opacity: 0.5;
+}
+
+.placeholder-content {
+ position: relative;
+ z-index: 2;
+ text-align: center;
+}
+
+.placeholder-icon {
+ font-size: 2.5rem !important;
+ color: #94a3b8 !important;
+ margin-bottom: 0.5rem;
+}
+
+.placeholder-text {
+ font-size: 0.85rem !important;
+ color: #64748b !important;
+ font-weight: 500;
+}
+
+.compact-card {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 1rem;
+ background: rgba(255, 255, 255, 0.15);
+ backdrop-filter: blur(15px);
+ -webkit-backdrop-filter: blur(15px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 15px;
+ color: white;
+ transition: all 0.3s ease;
+}
+
+.compact-card:hover {
+ background: rgba(255, 255, 255, 0.25);
+ transform: translateY(-2px);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.compact-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: 12px;
+ color: white;
+ font-size: 1.1rem;
+}
+
+.compact-content {
+ flex: 1;
+}
+
+.compact-label {
+ font-size: 0.8rem;
+ color: rgba(255, 255, 255, 0.8);
+ margin-bottom: 0.25rem;
+ font-weight: 500;
+}
+
+.compact-value {
+ font-size: 0.95rem;
+ font-weight: 600;
+ color: white;
+}
+
+/* Сайдбар с технологиями */
+.tech-sidebar {
+ background: white;
+ border-radius: 20px;
+ padding: 2rem;
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+ border: 1px solid #f1f5f9;
+ margin-bottom: 2rem;
+ position: sticky;
+ top: 20px;
+}
+
+.tech-sidebar-title {
+ color: #1a202c;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ padding-bottom: 1rem;
+ border-bottom: 2px solid #f8fafc;
+ position: relative;
+}
+
+.tech-sidebar-title::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 60px;
+ height: 2px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.tech-table {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+}
+
+.tech-row {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 0.75rem;
+ border-radius: 10px;
+ transition: all 0.3s ease;
+ border: 1px solid transparent;
+}
+
+.tech-row:hover {
+ background: #f8fafc;
+ border-color: #e2e8f0;
+ transform: translateX(5px);
+}
+
+.tech-row .tech-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 36px;
+ height: 36px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-radius: 8px;
+ color: white;
+ font-size: 1rem;
+}
+
+.tech-row .tech-name {
+ font-size: 0.95rem;
+ font-weight: 600;
+ color: #4a5568;
+}
+
+/* Адаптивность для новых компонентов */
+@media (max-width: 992px) {
+ .compact-info-grid {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 0.75rem;
+ }
+
+ .tech-sidebar {
+ position: static;
+ margin-top: 2rem;
+ order: 2;
+ }
+}
+
+@media (max-width: 768px) {
+ .hero-action-bar {
+ justify-content: center;
+ }
+
+ .views-likes-bar {
+ justify-content: center;
+ }
+
+ .section-title {
+ font-size: 2rem;
+ }
+
+ .similarSwiper {
+ padding: 20px 60px;
+ }
+
+ .similarSwiper .swiper-slide {
+ margin: 0 10px;
+ }
+
+ .similar-next {
+ right: 15px;
+ }
+
+ .similar-prev {
+ left: 15px;
+ }
+
+ .similar-next,
+ .similar-prev {
+ width: 40px;
+ height: 40px;
+ }
+
+ .similar-next::after,
+ .similar-prev::after {
+ font-size: 14px;
+ }
+
+ .tech-center-section {
+ padding: 2rem 1rem;
+ margin: 2rem 1rem;
+ }
+
+ .tech-center-grid {
+ gap: 1rem;
+ }
+
+ .tech-center-item {
+ min-width: 100px;
+ padding: 1rem;
+ }
+
+ .content-wrapper {
+ padding: 1rem;
+ }
+
+ .tech-sidebar-section {
+ position: static;
+ margin-top: 2rem;
+ order: 2;
+ }
+
+ .tech-vertical-list {
+ gap: 0.5rem;
+ }
+
+ .tech-vertical-item {
+ padding: 0.5rem;
+ }
+}
+
+@media (max-width: 576px) {
+ .compact-info-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .stat-pill {
+ padding: 0.5rem 1rem;
+ font-size: 0.85rem;
+ }
+}
+
+@media (max-width: 576px) {
+ .project-stats-table {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 0.75rem;
+ }
+
+ .stat-card.tech-card {
+ grid-column: span 2;
+ }
+
+ .tech-card .stat-content {
+ align-items: center;
+ text-align: center;
+ }
+
+ .tech-card .stat-icon {
+ margin: 0 auto 0.75rem;
+ }
+}
+
+/* Стили для заглушки изображений в карточках карусели */
+.image-placeholder {
+ background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+ border-radius: 15px 15px 0 0;
+ position: relative;
+ overflow: hidden;
+}
+
+.image-placeholder::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: url('data:image/svg+xml, ');
+ opacity: 0.5;
+}
+
+.placeholder-content {
+ position: relative;
+ z-index: 2;
+ text-align: center;
+}
+
+.placeholder-icon {
+ font-size: 2.5rem !important;
+ color: #94a3b8 !important;
+ margin-bottom: 0.5rem;
+}
+
+.placeholder-text {
+ font-size: 0.85rem !important;
+ color: #64748b !important;
+ font-weight: 500;
}
\ No newline at end of file
diff --git a/smartsoltech/staticfiles/img/logo.svg b/smartsoltech/staticfiles/img/logo.svg
deleted file mode 100644
index 8c68c00..0000000
--- a/smartsoltech/staticfiles/img/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/smartsoltech/web/migrations/0015_projectcategory_remove_portfolioitem_categories_and_more.py b/smartsoltech/web/migrations/0015_projectcategory_remove_portfolioitem_categories_and_more.py
index 5e1f954..9a8aab5 100644
--- a/smartsoltech/web/migrations/0015_projectcategory_remove_portfolioitem_categories_and_more.py
+++ b/smartsoltech/web/migrations/0015_projectcategory_remove_portfolioitem_categories_and_more.py
@@ -179,7 +179,7 @@ class Migration(migrations.Migration):
migrations.AddField(
model_name='project',
name='categories',
- field=models.ManyToManyField(blank=True, related_name='projects', to='web.projectcategory', verbose_name='Категории'),
+ field=models.ManyToManyField(blank=True, related_name='projects', to='web.category', verbose_name='Категории'),
),
migrations.CreateModel(
name='ProjectMedia',
diff --git a/smartsoltech/web/migrations/0016_delete_projectcategory_alter_category_options_and_more.py b/smartsoltech/web/migrations/0016_delete_projectcategory_alter_category_options_and_more.py
index dc91134..1d59660 100644
--- a/smartsoltech/web/migrations/0016_delete_projectcategory_alter_category_options_and_more.py
+++ b/smartsoltech/web/migrations/0016_delete_projectcategory_alter_category_options_and_more.py
@@ -38,11 +38,8 @@ class Migration(migrations.Migration):
name='slug',
field=models.SlugField(blank=True, max_length=100, null=True, unique=True, verbose_name='URL'),
),
- migrations.AlterField(
- model_name='project',
- name='categories',
- field=models.ManyToManyField(blank=True, related_name='projects', to='web.category', verbose_name='Категории'),
- ),
+ # Удаляем проблемную операцию изменения ManyToManyField
+ # Поле уже существует с нужными параметрами
migrations.AlterField(
model_name='projectmedia',
name='project',
diff --git a/smartsoltech/web/migrations/0017_auto_20251126_0146.py b/smartsoltech/web/migrations/0017_auto_20251126_0146.py
new file mode 100644
index 0000000..892eb2e
--- /dev/null
+++ b/smartsoltech/web/migrations/0017_auto_20251126_0146.py
@@ -0,0 +1,13 @@
+# Generated by Django 5.1.1 on 2025-11-26 01:46
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+ dependencies = [
+ ('web', '0016_delete_projectcategory_alter_category_options_and_more'),
+ ]
+
+ operations = [
+ ]
diff --git a/smartsoltech/web/migrations/0018_fix_project_categories_column.py b/smartsoltech/web/migrations/0018_fix_project_categories_column.py
new file mode 100644
index 0000000..aa71322
--- /dev/null
+++ b/smartsoltech/web/migrations/0018_fix_project_categories_column.py
@@ -0,0 +1,47 @@
+# Fix for column name in project categories table
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+ dependencies = [
+ ('web', '0017_auto_20251126_0146'),
+ ]
+
+ operations = [
+ migrations.RunSQL(
+ # Forward SQL - rename column and fix constraints
+ """
+ -- Rename the column if it still exists as projectcategory_id
+ DO $$
+ BEGIN
+ IF EXISTS (
+ SELECT column_name
+ FROM information_schema.columns
+ WHERE table_name = 'web_project_categories'
+ AND column_name = 'projectcategory_id'
+ ) THEN
+ ALTER TABLE web_project_categories RENAME COLUMN projectcategory_id TO category_id;
+
+ -- Add foreign key constraint if it doesn't exist
+ IF NOT EXISTS (
+ SELECT constraint_name
+ FROM information_schema.table_constraints
+ WHERE table_name = 'web_project_categories'
+ AND constraint_name = 'web_project_categories_category_id_fk'
+ ) THEN
+ ALTER TABLE web_project_categories
+ ADD CONSTRAINT web_project_categories_category_id_fk
+ FOREIGN KEY (category_id) REFERENCES web_category(id) ON DELETE CASCADE;
+ END IF;
+ END IF;
+ END $$;
+ """,
+ # Reverse SQL
+ """
+ ALTER TABLE web_project_categories RENAME COLUMN category_id TO projectcategory_id;
+ ALTER TABLE web_project_categories DROP CONSTRAINT IF EXISTS web_project_categories_category_id_fk;
+ """
+ ),
+ ]
\ No newline at end of file
diff --git a/smartsoltech/web/templates/web/blog.html b/smartsoltech/web/templates/web/blog.html
new file mode 100644
index 0000000..d927c99
--- /dev/null
+++ b/smartsoltech/web/templates/web/blog.html
@@ -0,0 +1,322 @@
+{% extends 'web/base_modern.html' %}
+{% load static %}
+{% block title %}Блог - SmartSolTech{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+
+ Блог SmartSolTech
+
+
+ Новости, статьи и инсайты из мира IT и технологий
+
+
+
+
+
+
+
+
+
+
+ {% if blog_posts %}
+
+ {% for post in blog_posts %}
+
+
+
+ {% if post.video %}
+
+
+
+ {% if post.image %}
+
+ {% endif %}
+
+
+
+ Видео
+
+
+
+
+ Воспроизвести
+
+
+
+ {% elif post.image %}
+
+
+
+ {% else %}
+
+
+
+ {% endif %}
+
+
+
+
+
+
+ Блог
+
+
+
+
+
+
+ {% if post.content %}
+
{{ post.content|striptags|truncatewords:20 }}
+ {% else %}
+
Нет описания...
+ {% endif %}
+
+
+
+
+
+
+ {{ post.published_date|date:"d.m.Y" }}
+
+
+ Читать далее
+
+
+
+
+
+
+ {% endfor %}
+
+
+
+
+
+ Показано {{ blog_posts.count }} из {{ blog_posts.count }} постов
+
+
+
+ {% else %}
+
+
+
+
+
+
+
Пока нет постов в блоге
+
+ Мы работаем над созданием интересного контента для вас
+
+
+
+ На главную
+
+
+
+ {% endif %}
+
+
+
+
+
+
+
+
+
+
+
+
+
Следите за новостями
+
+ Подпишитесь на наши обновления, чтобы получать последние новости и статьи
+
+
+
+
+
+
+
+{% endblock %}
+
+{% block extra_scripts %}
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/smartsoltech/web/templates/web/blog_post_detail.html b/smartsoltech/web/templates/web/blog_post_detail.html
new file mode 100644
index 0000000..317757d
--- /dev/null
+++ b/smartsoltech/web/templates/web/blog_post_detail.html
@@ -0,0 +1,399 @@
+{% extends 'web/base_modern.html' %}
+{% load static %}
+{% block title %}{{ blog_post.title }} - SmartSolTech{% endblock %}
+
+{% block content %}
+
+
+
+
+
+
+
+
+
+ {% if blog_post.video %}
+
+
+
+ {% if blog_post.image %}
+
+
+ {% endif %}
+ Ваш браузер не поддерживает видео.
+
+
+ {% elif blog_post.image %}
+
+
+
+ {% endif %}
+
+
+
+
+ {{ blog_post.content|safe }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Готовы обсудить ваш проект?
+
+
+ Получите бесплатную консультацию от наших экспертов
+
+
+
+
+
+
+{% endblock %}
+
+{% block extra_scripts %}
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/smartsoltech/web/templates/web/gallery_preview.html b/smartsoltech/web/templates/web/gallery_preview.html
new file mode 100644
index 0000000..08889d9
--- /dev/null
+++ b/smartsoltech/web/templates/web/gallery_preview.html
@@ -0,0 +1,371 @@
+
+
+
+
+
+ Предпросмотр современной галереи
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/smartsoltech/web/templates/web/home_modern.html b/smartsoltech/web/templates/web/home_modern.html
index 5eadda4..2e58312 100644
--- a/smartsoltech/web/templates/web/home_modern.html
+++ b/smartsoltech/web/templates/web/home_modern.html
@@ -901,60 +901,64 @@ document.addEventListener('DOMContentLoaded', function() {
// Показываем текст активного индикатора
const title = indicator.querySelector('.pill-indicator-title');
if (title) {
- indicator.style.color = '#333';
- title.style.opacity = '1';
- title.style.transform = 'scale(1)';
+ // Убираем inline стили, чтобы CSS правила работали корректно
+ indicator.style.color = '';
+ title.style.opacity = '';
+ title.style.transform = '';
}
} else {
indicator.classList.remove('active');
- // Скрываем текст неактивных индикаторов
+ // Скрываем текст неактивных индикаторов и убираем inline стили
const title = indicator.querySelector('.pill-indicator-title');
if (title) {
- indicator.style.color = 'transparent';
- title.style.opacity = '0';
- title.style.transform = 'scale(0.8)';
+ indicator.style.color = '';
+ title.style.opacity = '';
+ title.style.transform = '';
+ // Убираем любые hover эффекты
+ indicator.style.transform = '';
+ indicator.style.background = '';
}
}
});
- // Обновляем ширину внешней пилюли
+ // Динамический расчет ширины внешнего контейнера
setTimeout(() => {
- if (outerPill) {
- const activeIndicator = indicators[index];
+ if (outerPill && indicators.length > 0) {
+ let totalWidth = 0;
- if (activeIndicator) {
- // Даем время для применения стилей активного элемента
- setTimeout(() => {
- // Вычисляем ширину активной пилюли на основе текста
- const titleElement = activeIndicator.querySelector('.pill-indicator-title');
- let activePillWidth = 80; // минимальная ширина активного элемента
-
- if (titleElement && titleElement.textContent) {
- // Формула: длина текста * 8px + padding (32px) + min-width
- const textLength = titleElement.textContent.length;
- activePillWidth = Math.max(textLength * 8 + 32, 80);
- }
-
- // Количество неактивных маркеров
- const inactiveCount = indicators.length - 1;
-
- // Ширина неактивных элементов: 32px каждый + margin 4px между ними
- const inactiveWidth = inactiveCount * 32 + (inactiveCount > 0 ? inactiveCount * 4 : 0);
-
- // Margin активного элемента: 16px (8px с каждой стороны)
- const activeMargin = inactiveCount > 0 ? 16 : 0;
-
- // Общая ширина: активный + неактивные + margin + padding контейнера
- const totalWidth = activePillWidth + inactiveWidth + activeMargin + 32;
-
- console.log('Active pill width:', activePillWidth, 'Inactive width:', inactiveWidth, 'Total:', totalWidth);
-
- outerPill.style.width = totalWidth + 'px';
- outerPill.style.transition = 'all 0.4s cubic-bezier(0.23, 1, 0.32, 1)';
- }, 50);
- }
+ // Проходим по всем маркерам и суммируем их ширины
+ indicators.forEach((indicator, i) => {
+ if (i === index && indicator.classList.contains('active')) {
+ // Активный маркер - измеряем его реальную ширину
+ const rect = indicator.getBoundingClientRect();
+ totalWidth += rect.width || 60; // fallback к минимальной ширине
+ } else {
+ // Неактивный маркер - фиксированная ширина 36px
+ totalWidth += 36;
+ }
+
+ // Добавляем gap между маркерами (16px), кроме последнего
+ if (i < indicators.length - 1) {
+ totalWidth += 16;
+ }
+ });
+
+ // Добавляем padding контейнера: 10px слева + 10px справа
+ totalWidth += 20;
+
+ // Применяем новую ширину
+ outerPill.style.width = totalWidth + 'px';
+
+ console.log('Pill state update:');
+ console.log('- Active index:', index);
+ console.log('- Total width:', totalWidth + 'px');
+ console.log('- Active element width:',
+ indicators[index] ? indicators[index].getBoundingClientRect().width + 'px' : 'N/A');
+ console.log('- Inactive elements count:', indicators.length - 1);
+ console.log('- Gaps total:', (indicators.length - 1) * 16 + 'px');
+ console.log('- Padding total: 20px');
}
- }, 10);
+ }, 50);
currentActiveIndex = index;
}
@@ -981,19 +985,23 @@ document.addEventListener('DOMContentLoaded', function() {
if (!this.classList.contains('active')) {
this.style.transform = 'scale(1.1)';
this.style.background = 'rgba(255, 255, 255, 0.6)';
+ this.style.borderColor = 'rgba(255, 255, 255, 0.7)';
}
});
indicator.addEventListener('mouseleave', function() {
if (!this.classList.contains('active')) {
- this.style.transform = 'scale(1)';
- this.style.background = 'rgba(255, 255, 255, 0.4)';
+ // Возвращаем к исходному состоянию
+ this.style.transform = '';
+ this.style.background = '';
+ this.style.borderColor = '';
}
});
});
// Bootstrap carousel события
if (carousel) {
+ // Обработка начала смены слайда
carousel.addEventListener('slide.bs.carousel', function(event) {
const nextIndex = event.to;
console.log('Carousel sliding to:', nextIndex);
@@ -1007,25 +1015,74 @@ document.addEventListener('DOMContentLoaded', function() {
}, 400);
}
+ // Обновляем состояние пилюли сразу при начале смены слайда
updatePillState(nextIndex);
});
- // Инициализируем первое состояние
+ // Дополнительная обработка завершения смены слайда для надежности
+ carousel.addEventListener('slid.bs.carousel', function(event) {
+ const currentIndex = event.to;
+ console.log('Carousel slide completed:', currentIndex);
+
+ // Дополнительное обновление состояния для гарантии корректного отображения
+ setTimeout(() => {
+ updatePillState(currentIndex);
+ }, 100);
+ });
+
+ // Инициализируем первое состояние и рассчитываем начальную ширину
setTimeout(() => {
console.log('Initializing pill state...');
updatePillState(0);
+
+ // Дополнительная инициализация ширины контейнера
+ if (outerPill && indicators.length > 0) {
+ let initialWidth = 20; // padding
+
+ // Первый элемент активный, остальные неактивные
+ indicators.forEach((indicator, i) => {
+ if (i === 0) {
+ // Даем время активному элементу развернуться
+ setTimeout(() => {
+ const rect = indicator.getBoundingClientRect();
+ let width = 20 + rect.width; // padding + активный элемент
+
+ // Добавляем неактивные элементы
+ if (indicators.length > 1) {
+ width += (indicators.length - 1) * 36; // неактивные элементы
+ width += (indicators.length - 1) * 16; // gaps между элементами
+ }
+
+ outerPill.style.width = width + 'px';
+ console.log('Initial container width:', width + 'px');
+ }, 100);
+ }
+ });
+ }
}, 200);
}
- // Отслеживаем изменения размеров активного элемента
- if (window.ResizeObserver) {
+ // Отслеживаем изменения размеров активного элемента для пересчета ширины
+ if (window.ResizeObserver && outerPill) {
const resizeObserver = new ResizeObserver(entries => {
- if (outerPill) {
- const activeIndicator = indicators[currentActiveIndex];
- if (activeIndicator && activeIndicator.classList.contains('active')) {
- updatePillState(currentActiveIndex);
+ // Пересчитываем ширину контейнера при изменении размеров
+ let totalWidth = 0;
+
+ indicators.forEach((indicator, i) => {
+ if (indicator.classList.contains('active')) {
+ const rect = indicator.getBoundingClientRect();
+ totalWidth += rect.width;
+ } else {
+ totalWidth += 36;
}
- }
+
+ if (i < indicators.length - 1) {
+ totalWidth += 16;
+ }
+ });
+
+ totalWidth += 20; // padding
+ outerPill.style.width = totalWidth + 'px';
});
indicators.forEach(indicator => {
diff --git a/smartsoltech/web/templates/web/project_detail.html b/smartsoltech/web/templates/web/project_detail.html
index 4d9332f..a529132 100644
--- a/smartsoltech/web/templates/web/project_detail.html
+++ b/smartsoltech/web/templates/web/project_detail.html
@@ -3,14 +3,74 @@
{% block title %}{{ project.name }} - Проекты - SmartSolTech{% endblock %}
-{% block extra_css %}
+{% block extra_styles %}
{% endblock %}
{% block content %}
-