Исправлена валидация формы заказа услуги - поля теперь правильно передаются и проверяются

- Fix CSS loading issue in project_detail.html template
- Add comprehensive ModernMediaGallery JavaScript class with touch navigation
- Implement glassmorphism design with backdrop-filter effects
- Add responsive breakpoint system for mobile devices
- Include embedded critical CSS styles for gallery functionality
- Add technology sidebar with vertical list layout and hover effects
- Support for images, videos, and embedded content with thumbnails
- Add lightbox integration and media type badges
- Implement progress bar and thumbnail navigation
- Add keyboard controls (arrow keys) and touch swipe gestures
- Include supplementary styles for video/embed placeholders
- Fix template block naming compatibility (extra_css → extra_styles)

.drone.yml

@@ -134,13 +134,214 @@ steps:
 
   - name: security-scan
     image: aquasec/trivy:latest
+    volumes:
+      - name: docker-sock
+        path: /var/run/docker.sock
     commands:
       - echo "Security scanning Docker image..."
-      - trivy image --exit-code 0 --severity HIGH,CRITICAL --no-progress smartsoltech:latest
+      - |
+        if docker image inspect smartsoltech:latest >/dev/null 2>&1; then
+          echo "Image found, starting security scan..."
+          trivy image --exit-code 0 --severity HIGH,CRITICAL --no-progress smartsoltech:latest
+        else
+          echo "Image smartsoltech:latest not found, scanning base Python image instead..."
+          trivy image --exit-code 0 --severity HIGH,CRITICAL --no-progress python:3.10-slim
+        fi
       - echo "Security scan completed"
     depends_on:
       - docker-compose-tests
 
+  - name: test-production-connectivity
+    image: alpine:latest
+    environment:
+      PROD_HOST:
+        from_secret: production_host
+    commands:
+      - echo "Testing production server connectivity..."
+      - apk add --no-cache curl netcat-openbsd
+      - |
+        if [ -z "$PROD_HOST" ]; then
+          echo "⚠️ Production host not configured, skipping connectivity test"
+          exit 0
+        fi
+      - echo "Testing SSH connectivity to $PROD_HOST..."
+      - |
+        if nc -z $PROD_HOST 22 2>/dev/null; then
+          echo "✅ SSH port 22 is accessible on $PROD_HOST"
+        else
+          echo "⚠️ SSH port 22 is not accessible, but continuing CI"
+        fi
+      - echo "Testing HTTPS connectivity..."
+      - |
+        if curl -f -s --connect-timeout 10 https://smartsoltech.kr/health/ >/dev/null 2>&1; then
+          echo "✅ Production HTTPS service is accessible"
+        else
+          echo "⚠️ Production HTTPS service check failed, but continuing CI"
+        fi
+      - echo "✅ Production connectivity test completed"
+    depends_on:
+      - security-scan
+    when:
+      branch:
+        - master
+        - main
+
+  - name: deploy-to-staging
+    image: alpine:latest
+    environment:
+      STAGING_HOST:
+        from_secret: staging_host
+      STAGING_USER:
+        from_secret: staging_user
+      STAGING_KEY:
+        from_secret: staging_key
+    commands:
+      - echo "Checking staging environment configuration..."
+      - apk add --no-cache openssh-client git curl netcat-openbsd
+      - |
+        if [ -z "$STAGING_HOST" ] || [ -z "$STAGING_USER" ]; then
+          echo "⚠️ Staging credentials not configured"
+          echo "ℹ️ Skipping staging deployment - this is normal for development CI"
+          echo "✅ Continuing with integration tests on local environment"
+          exit 0
+        fi
+      - echo "Deploying to staging server:" $STAGING_HOST
+      - mkdir -p ~/.ssh
+      - echo "$STAGING_KEY" > ~/.ssh/id_rsa
+      - chmod 600 ~/.ssh/id_rsa
+      - ssh-keyscan -H $STAGING_HOST >> ~/.ssh/known_hosts 2>/dev/null || true
+      - echo "Testing staging server connectivity..."
+      - |
+        if ! nc -z $STAGING_HOST 22 2>/dev/null; then
+          echo "❌ Cannot connect to staging server on port 22"
+          echo "⚠️ Skipping staging deployment due to connectivity issues"
+          exit 0
+        fi
+      - echo "Deploying to staging environment..."
+      - |
+        ssh $STAGING_USER@$STAGING_HOST "cd /opt/smartsoltech-staging && 
+          echo 'Fetching latest changes...' &&
+          git fetch origin && 
+          git reset --hard origin/master && 
+          echo 'Restarting services...' &&
+          docker-compose down --timeout 30 && 
+          docker-compose pull && 
+          docker-compose up -d --build" || {
+            echo "❌ Staging deployment failed"
+            echo "⚠️ Continuing CI pipeline - staging failures are non-critical"
+        }
+      - echo "✅ Staging deployment step completed"
+    depends_on:
+      - test-production-connectivity
+    when:
+      branch:
+        - master
+        - main
+
+  - name: integration-tests
+    image: alpine:latest
+    environment:
+      STAGING_HOST:
+        from_secret: staging_host
+    commands:
+      - echo "Starting comprehensive integration tests..."
+      - apk add --no-cache curl jq netcat-openbsd
+      - |
+        # Определяем target для тестирования
+        if [ -n "$STAGING_HOST" ]; then
+          # Проверяем доступность staging сервера
+          if nc -z -w5 $STAGING_HOST 80 2>/dev/null; then
+            export TEST_TARGET="http://$STAGING_HOST"
+            echo "🎯 Testing staging environment: $TEST_TARGET"
+          else
+            echo "⚠️ Staging server not accessible, falling back to local testing"
+            export TEST_TARGET="http://localhost:8000"
+            echo "🏠 Testing local environment: $TEST_TARGET"
+          fi
+        else
+          export TEST_TARGET="http://localhost:8000"
+          echo "🏠 Testing local environment: $TEST_TARGET"
+        fi
+      - echo "Waiting for services to be ready..."
+      - sleep 30
+      - echo "Running endpoint availability tests..."
+      - |
+        test_endpoint() {
+          local url="$1"
+          local description="$2"
+          echo "Testing $description ($url)..."
+          
+          local status_code=$(curl -L -o /dev/null -s -w "%{http_code}" -m 10 "$url" 2>/dev/null || echo "000")
+          
+          if [ "$status_code" = "200" ]; then
+            echo "✅ $description - OK (HTTP $status_code)"
+            return 0
+          elif [ "$status_code" = "301" ] || [ "$status_code" = "302" ]; then
+            echo "✅ $description - Redirect (HTTP $status_code)"
+            return 0
+          elif [ "$status_code" = "404" ]; then
+            echo "⚠️ $description - Not Found (HTTP $status_code)"
+            return 1
+          elif [ "$status_code" = "000" ]; then
+            echo "❌ $description - Connection Failed"
+            return 1
+          else
+            echo "⚠️ $description - Unexpected status (HTTP $status_code)"
+            return 1
+          fi
+        }
+      - |
+        # Счетчик ошибок
+        errors=0
+        total_tests=0
+        
+        # Основные страницы
+        total_tests=$((total_tests + 1))
+        if ! test_endpoint "$TEST_TARGET/" "Homepage"; then
+          errors=$((errors + 1))
+        fi
+        
+        total_tests=$((total_tests + 1))
+        if ! test_endpoint "$TEST_TARGET/services/" "Services page"; then
+          errors=$((errors + 1))
+        fi
+        
+        total_tests=$((total_tests + 1))
+        if ! test_endpoint "$TEST_TARGET/career/" "Career page"; then
+          errors=$((errors + 1))
+        fi
+        
+        total_tests=$((total_tests + 1))
+        if ! test_endpoint "$TEST_TARGET/contact/" "Contact page"; then
+          errors=$((errors + 1))
+        fi
+        
+        total_tests=$((total_tests + 1))
+        if ! test_endpoint "$TEST_TARGET/admin/" "Admin panel"; then
+          echo "ℹ️ Admin panel test failed (expected for production)"
+        fi
+        
+        echo ""
+        echo "📊 Integration Test Results:"
+        echo "   Total tests: $total_tests"
+        echo "   Failures: $errors"
+        if [ $total_tests -gt 0 ]; then
+          success_rate=$(( (total_tests - errors) * 100 / total_tests ))
+          echo "   Success rate: ${success_rate}%"
+        fi
+        
+        if [ $errors -gt 2 ]; then
+          echo "❌ Too many critical endpoint failures ($errors)"
+          exit 1
+        elif [ $errors -gt 0 ]; then
+          echo "⚠️ Some tests failed but within acceptable limits"
+        else
+          echo "✅ All integration tests passed successfully"
+        fi
+      - echo "✅ Integration testing phase completed"
+    depends_on:
+      - deploy-to-staging
+
   - name: notify-success
     image: plugins/webhook
     settings:
@@ -164,7 +365,7 @@ steps:
         exclude:
         - '*'
     depends_on:
-      - security-scan
+      - integration-tests
 
   - name: notify-failure
     image: plugins/webhook
@@ -189,7 +390,7 @@ steps:
         exclude:
         - '*'
     depends_on:
-      - security-scan
+      - integration-tests
 
 volumes:
   - name: docker-sock
@@ -216,6 +417,36 @@ platform:
   arch: amd64
 
 steps:
+  - name: check-production-server
+    image: alpine:latest
+    environment:
+      PROD_HOST:
+        from_secret: production_host
+      PROD_USER:
+        from_secret: production_user
+    commands:
+      - echo "Checking production server connectivity..."
+      - apk add --no-cache openssh-client curl netcat-openbsd
+      - |
+        if [ -z "$PROD_HOST" ] || [ -z "$PROD_USER" ]; then
+          echo "❌ Production server credentials not configured"
+          exit 1
+        fi
+      - echo "Testing SSH connectivity to $PROD_HOST..."
+      - |
+        if ! nc -z $PROD_HOST 22; then
+          echo "❌ SSH port 22 is not accessible on $PROD_HOST"
+          exit 1
+        fi
+      - echo "Testing HTTPS connectivity..."
+      - |
+        if curl -f -s --connect-timeout 10 https://smartsoltech.kr >/dev/null; then
+          echo "✅ HTTPS service is accessible"
+        else
+          echo "⚠️ HTTPS service check failed, but continuing deployment"
+        fi
+      - echo "✅ Production server checks passed"
+
   - name: deploy-production
     image: docker:24-dind
     volumes:
@@ -230,13 +461,53 @@ steps:
         from_secret: production_ssh_key
     commands:
       - echo "Deploying to production..."
-      - apk add --no-cache openssh-client git
+      - apk add --no-cache openssh-client git curl
       - mkdir -p ~/.ssh
       - echo "$PROD_KEY" > ~/.ssh/id_rsa
       - chmod 600 ~/.ssh/id_rsa
       - ssh-keyscan -H $PROD_HOST >> ~/.ssh/known_hosts
-      - ssh $PROD_USER@$PROD_HOST "cd /opt/smartsoltech && git pull origin master && ./bin/update"
+      - echo "Creating backup before deployment..."
-      - echo "Production deployment completed"
+      - |
+        ssh $PROD_USER@$PROD_HOST "cd /opt/smartsoltech && 
+          echo 'Creating backup...' &&
+          git stash push -m \"Pre-deployment backup \$(date)\" || true &&
+          docker-compose down --timeout 30 || true"
+      - echo "Pulling latest changes..."
+      - |
+        ssh $PROD_USER@$PROD_HOST "cd /opt/smartsoltech &&
+          git fetch origin &&
+          git reset --hard origin/master &&
+          git clean -fd"
+      - echo "Running deployment script..."
+      - |
+        ssh $PROD_USER@$PROD_HOST "cd /opt/smartsoltech &&
+          if [ -f ./bin/update ]; then
+            chmod +x ./bin/update &&
+            ./bin/update
+          else
+            echo 'Update script not found, running manual deployment...' &&
+            docker-compose pull &&
+            docker-compose up -d --build
+          fi"
+      - echo "Verifying deployment..."
+      - sleep 30
+      - |
+        for i in 1 2 3; do
+          if curl -f -s --connect-timeout 10 https://smartsoltech.kr >/dev/null; then
+            echo "✅ Deployment verification successful"
+            break
+          else
+            echo "⚠️ Deployment verification attempt $i failed, retrying..."
+            sleep 15
+          fi
+          if [ $i -eq 3 ]; then
+            echo "❌ Deployment verification failed after 3 attempts"
+            exit 1
+          fi
+        done
+      - echo "🎉 Production deployment completed successfully"
+    depends_on:
+      - check-production-server
 
   - name: notify-production-success
     image: plugins/webhook
@@ -247,7 +518,7 @@ steps:
       template: |
         {
           "chat_id": "${TELEGRAM_CHAT_ID}",
-          "text": "🎉 *SmartSolTech Production*\n\n✅ Production deployment completed!\n\n📝 *Version:* `${DRONE_TAG}`\n👤 *Author:* ${DRONE_COMMIT_AUTHOR}\n⏱ *Time:* ${DRONE_BUILD_FINISHED}\n\n🌐 [Website](https://smartsoltech.kr)",
+          "text": "🎉 *SmartSolTech Production*\n\n✅ Production deployment completed!\n\n📝 *Commit:* \`${DRONE_COMMIT_SHA:0:8}\`\n👤 *Author:* ${DRONE_COMMIT_AUTHOR}\n🌿 *Branch:* ${DRONE_BRANCH}\n⏱ *Time:* ${DRONE_BUILD_FINISHED}\n\n🌐 [Website](https://smartsoltech.kr)\n🔧 [Admin](https://smartsoltech.kr/admin/)\n📊 [Status Check](https://smartsoltech.kr/health/)",
           "parse_mode": "Markdown"
         }
     environment:
@@ -265,7 +536,7 @@ steps:
       template: |
         {
           "chat_id": "${TELEGRAM_CHAT_ID}",
-          "text": "🚨 *SmartSolTech Production*\n\n❌ Production deployment failed!\n\n📝 *Version:* `${DRONE_TAG}`\n👤 *Author:* ${DRONE_COMMIT_AUTHOR}\n⏱ *Time:* ${DRONE_BUILD_FINISHED}\n\n🔗 [Logs](${DRONE_BUILD_LINK})",
+          "text": "🚨 *SmartSolTech Production*\n\n❌ Production deployment failed!\n\n📝 *Commit:* \`${DRONE_COMMIT_SHA:0:8}\`\n👤 *Author:* ${DRONE_COMMIT_AUTHOR}\n🌿 *Branch:* ${DRONE_BRANCH}\n⏱ *Time:* ${DRONE_BUILD_FINISHED}\n💥 *Step:* ${DRONE_FAILED_STEPS}\n\n🔗 [View Logs](${DRONE_BUILD_LINK})\n🛠 [Rollback Guide](https://smartsoltech.kr/docs/rollback)",
           "parse_mode": "Markdown"
         }
     environment:

.gitignore

@@ -110,6 +110,11 @@ sent_emails/
 # 🌍 Translation files
 *.pot
 
+# 📋 Temporary files and folders
+temp/
+*.tmp
+*.temp
+
 # 🚫 Exclude test files from root
 response_*.json
 test_*.html
@@ -122,3 +127,8 @@ qr_success_animation_demo.html
 BACKUP_SETUP_COMPLETE.md
 COMMIT_SUMMARY.md
 SCRIPTS_README.md
+
+# 🔧 Utils and scripts (keep tracked but ignore development versions)
+utils/*.log
+scripts/*.log
+backups/*.tmp

README.md

@@ -1,6 +1,6 @@
 # 🚀 SmartSolTech
 
-[![Build Status](https://drone.smartsoltech.kr/api/badges/smartsoltech/smartsoltech.kr/status.svg)](https://drone.smartsoltech.kr/smartsoltech/smartsoltech.kr)
+[![Build Status](https://drone.smartsoltech.kr/api/badges/trevor/smartsoltech_site/status.svg)](https://drone.smartsoltech.kr/trevor/smartsoltech_site)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Python 3.10](https://img.shields.io/badge/python-3.10-blue.svg)](https://www.python.org/downloads/release/python-3100/)
 [![Django 4.2](https://img.shields.io/badge/django-4.2-green.svg)](https://docs.djangoproject.com/en/4.2/)
@@ -71,7 +71,7 @@ cd smartsoltech.kr
 ### Основные команды
 
 ```bash
-./cli shell          # Django shell
+.utils/cli shell          # Django shell
 ./cli migrate         # Применить миграции
 ./update             # Полное обновление проекта
 ./stop               # Остановка сервисов
@@ -181,6 +181,35 @@ pip install -r requirements.txt
 ./cli status
 ```
 
+## 📂 Структура проекта
+
+```
+smartsoltech/
+├── 🐍 smartsoltech/          # Основное Django приложение
+├── 🎨 frontend/              # Статические фронтенд файлы  
+├── 🐳 bin/                   # Скрипты развертывания
+├── 📋 docs/                  # Документация проекта
+├── 🧩 patch/                 # Патчи и исправления
+├── 🛠️ utils/                 # Утилиты и инструменты
+│   ├── start                 # Запуск проекта
+│   ├── stop                  # Остановка сервисов
+│   ├── update                # Обновление проекта
+│   ├── cli                   # CLI интерфейс
+│   ├── logs                  # Просмотр логов
+│   └── drone                 # CI/CD бинарий
+├── 🐍 scripts/               # Вспомогательные скрипты
+│   ├── create_hero_banner.py # Создание баннеров
+│   └── hero_script.py        # Скрипты для баннеров
+├── 💾 backups/               # Резервные копии
+│   ├── .drone.yml.backup     # Бэкап CI конфигурации
+│   └── original_home_modern.html # Оригинал главной страницы
+├── 🗂️ temp/                  # Временные файлы
+├── 🐳 docker-compose.yml     # Docker конфигурация
+├── 🚀 .drone.yml             # CI/CD конфигурация  
+├── 📄 requirements.txt       # Python зависимости
+└── 📖 README.md              # Этот файл
+```
+
 ### Мониторинг
 
 - **Веб-сайт**: http://localhost:8000

backups/README.md

@@ -0,0 +1,19 @@
+# 💾 Backups
+
+Папка для хранения резервных копий конфигурационных файлов и важных данных.
+
+## Содержимое:
+
+- `.drone.yml.backup` - Резервная копия конфигурации CI/CD
+- `original_home_modern.html` - Оригинальная версия главной страницы
+
+## Правила:
+
+1. Все файлы в этой папке не должны влиять на работу проекта
+2. Файлы служат для восстановления при необходимости
+3. Регулярно очищайте старые файлы
+4. Добавляйте дату к именам файлов при создании бэкапов
+
+## Автоматические бэкапы:
+
+Система CI/CD автоматически создает бэкапы перед деплоем в продакшн.

bin/setup-docker-compose-compatibility.sh

@@ -0,0 +1,59 @@
+#!/bin/bash
+
+# Скрипт для настройки совместимости docker-compose с Docker Compose v2
+# Запускать на продакшн сервере с правами sudo
+
+echo "🐳 Setting up docker-compose compatibility..."
+
+# Проверяем, есть ли уже docker-compose
+if command -v docker-compose >/dev/null 2>&1; then
+    echo "✅ docker-compose уже доступен:"
+    docker-compose --version
+    exit 0
+fi
+
+# Проверяем наличие docker compose v2
+if ! docker compose version >/dev/null 2>&1; then
+    echo "❌ Docker Compose v2 не найден. Установите Docker сначала."
+    exit 1
+fi
+
+echo "📦 Docker Compose v2 обнаружен:"
+docker compose version
+
+# Пытаемся найти путь к docker-compose plugin
+COMPOSE_PLUGIN_PATH=""
+for path in "/usr/libexec/docker/cli-plugins/docker-compose" "/usr/local/lib/docker/cli-plugins/docker-compose" "/opt/docker/cli-plugins/docker-compose"; do
+    if [ -f "$path" ]; then
+        COMPOSE_PLUGIN_PATH="$path"
+        break
+    fi
+done
+
+# Если найден plugin, создаем symlink
+if [ -n "$COMPOSE_PLUGIN_PATH" ]; then
+    echo "🔗 Создаем symlink из $COMPOSE_PLUGIN_PATH"
+    sudo ln -sf "$COMPOSE_PLUGIN_PATH" /usr/local/bin/docker-compose
+else
+    # Создаем wrapper скрипт
+    echo "📝 Создаем wrapper скрипт..."
+    sudo tee /usr/local/bin/docker-compose > /dev/null << 'EOF'
+#!/bin/bash
+# Docker Compose v1 compatibility wrapper
+exec docker compose "$@"
+EOF
+fi
+
+# Делаем исполняемым
+sudo chmod +x /usr/local/bin/docker-compose
+
+# Проверяем результат
+if command -v docker-compose >/dev/null 2>&1; then
+    echo "✅ Успешно! docker-compose теперь доступен:"
+    docker-compose --version
+else
+    echo "❌ Что-то пошло не так. Проверьте настройки PATH."
+    exit 1
+fi
+
+echo "🎉 Настройка завершена!"

create_test_data.py

@@ -0,0 +1,45 @@
+#!/usr/bin/env python
+import os
+import django
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'smartsoltech.settings')
+django.setup()
+
+from web.models import ProjectCategory, Project
+
+# Создаём категорию
+cat, created = ProjectCategory.objects.get_or_create(
+    slug='web-development',
+    defaults={
+        'name': 'Веб-разработка',
+        'description': 'Разработка современных веб-приложений',
+        'icon': 'fas fa-laptop-code',
+        'order': 1,
+        'is_active': True
+    }
+)
+print(f"{'Создана' if created else 'Найдена'} категория: {cat.name}")
+
+# Обновляем первый проект
+project = Project.objects.first()
+if project:
+    project.short_description = 'Корпоративный сайт SmartSolTech с современным дизайном'
+    project.description = '<h2>О проекте</h2><p>Разработка корпоративного сайта с использованием Django и современного дизайна.</p><h3>Особенности</h3><ul><li>Адаптивный дизайн</li><li>Админ-панель</li><li>Интеграция с Telegram</li></ul>'
+    if not project.slug:
+        project.slug = 'smartsoltech-website'
+    project.technologies = 'Python, Django, PostgreSQL, Bootstrap, JavaScript'
+    project.duration = '3 месяца'
+    project.team_size = 4
+    project.is_featured = True
+    project.display_order = 1
+    project.save()
+    project.categories.add(cat)
+    print(f"Обновлён проект: {project.name}")
+    print(f"URL: /project/{project.pk}/")
+else:
+    print("Проектов не найдено")
+
+print("\n=== Статистика ===")
+print(f"Категорий: {ProjectCategory.objects.count()}")
+print(f"Проектов: {Project.objects.count()}")
+print(f"Завершённых проектов: {Project.objects.filter(status='completed').count()}")

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': '<p>Разработан комплексный корпоративный портал для компании TechCorp, включающий в себя систему управления документами, интеграцию с CRM-системой и модуль управления персоналом.</p><p>Основные функции: документооборот, календарь событий, внутренние новости, система заявок, интеграция с почтовыми сервисами.</p>',
+            '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': '<p>Создано мобильное приложение для службы доставки еды с поддержкой iOS и Android платформ.</p><p>Функционал включает: поиск ресторанов по геолокации, онлайн-заказы, интеграцию с платежными системами, отслеживание курьера в реальном времени, система рейтингов и отзывов.</p>',
+            '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': '<p>Разработана комплексная система аналитики для обработки больших данных с возможностями машинного обучения.</p><p>Включает: интерактивные дашборды, автоматизированные отчеты, прогнозирование трендов, интеграция с различными источниками данных, алгоритмы машинного обучения.</p>',
+            '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': '<p>Создана масштабируемая e-commerce платформа, поддерживающая множественные магазины на одной основе.</p><p>Возможности: многопользовательская архитектура, система платежей, управление складом, программы лояльности, мобильная оптимизация, SEO инструменты.</p>',
+            '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': '<p>Разработана полная дизайн-система для финтех компании, включающая создание фирменного стиля, UI-компонентов и подробного брендбука.</p><p>Результат: логотип и фирменный стиль, библиотека UI-компонентов, руководство по использованию бренда, адаптация для различных платформ.</p>',
+            '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()

frontend/assets/js/script.min.js

@@ -1 +0,0 @@
-!function(){"use strict";var e=document.querySelector("#mainNav");if(e){var o=e.querySelector(".navbar-collapse");if(o){var n=new bootstrap.Collapse(o,{toggle:!1}),t=o.querySelectorAll("a");for(var a of t)a.addEventListener("click",(function(e){n.hide()}))}var r=function(){(void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop)>100?e.classList.add("navbar-shrink"):e.classList.remove("navbar-shrink")};r(),document.addEventListener("scroll",r);var d=document.querySelectorAll(".portfolio-modal");for(var s of d)s.addEventListener("shown.bs.modal",(function(o){e.classList.add("d-none")})),s.addEventListener("hidden.bs.modal",(function(o){e.classList.remove("d-none")}))}}();

frontend/footer.html

@@ -1,75 +0,0 @@
-<!DOCTYPE html>
-<html data-bs-theme="light" lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>Home - Brand</title>
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="500x500" href="/assets/img/photo_2024-10-06_10-06-15.jpg" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="500x500" href="/assets/img/photo_2024-10-06_10-06-15.jpg" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
-    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
-    <link rel="stylesheet" href="/assets/css/styles.min.css">
-</head>
-
-<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="54">
-    <!-- Start: footer -->
-    <footer class="text-light bg-dark pt-5 pb-4">
-        <div class="container text-md-left">
-            <div class="row text-md-left">
-                <div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
-                    <h5 class="text-uppercase text-warning mb-4 font-weight-bold">Company Name</h5>
-                    <p>Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
-                </div>
-                <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">
-                    <h5 class="text-uppercase text-warning mb-4 font-weight-bold">Products</h5>
-                    <p><a href="#" class="text-light" style="text-decoration:none;">Product 1</a></p>
-                    <p><a href="#" class="text-light" style="text-decoration:none;">Product 2</a></p>
-                    <p><a href="#" class="text-light" style="text-decoration:none;">Product 3</a></p>
-                    <p><a href="#" class="text-light" style="text-decoration:none;">Product 4</a></p>
-                </div>
-                <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
-                    <h5 class="text-uppercase text-warning mb-4 font-weight-bold">Useful Links</h5>
-                    <p><a href="#" class="text-light" style="text-decoration:none;">Your Account</a></p>
-                    <p><a href="#" class="text-light" style="text-decoration:none;">Become an Affiliate</a></p>
-                    <p><a href="#" class="text-light" style="text-decoration:none;">Shipping Rates</a></p>
-                    <p><a href="#" class="text-light" style="text-decoration:none;">Help</a></p>
-                </div>
-                <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
-                    <h5 class="text-uppercase text-warning mb-4 font-weight-bold">Contact</h5>
-                    <p><i class="fas fa-home mr-3"></i> 123 Street, City, State</p>
-                    <p><i class="fas fa-envelope mr-3"></i> info@example.com</p>
-                    <p><i class="fas fa-phone mr-3"></i> + 01 234 567 88</p>
-                    <p><i class="fas fa-print mr-3"></i> + 01 234 567 89</p>
-                </div>
-            </div>
-            <hr class="mb-4">
-            <div class="row align-items-center">
-                <div class="col-md-7 col-lg-8">
-                    <p class="text-md-left">© 2024 Company Name. All rights reserved.</p>
-                </div>
-                <div class="col-md-5 col-lg-4">
-                    <div class="text-md-right">
-                        <ul class="list-unstyled list-inline">
-                            <li class="list-inline-item"><a href="#" class="btn-floating btn-sm text-light" style="font-size:23px;"><i class="fab fa-facebook"></i></a></li>
-                            <li class="list-inline-item"><a href="#" class="btn-floating btn-sm text-light" style="font-size:23px;"><i class="fab fa-twitter"></i></a></li>
-                            <li class="list-inline-item"><a href="#" class="btn-floating btn-sm text-light" style="font-size:23px;"><i class="fab fa-google-plus"></i></a></li>
-                            <li class="list-inline-item"><a href="#" class="btn-floating btn-sm text-light" style="font-size:23px;"><i class="fab fa-linkedin-in"></i></a></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </footer><!-- End: footer -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="/assets/js/script.min.js"></script>
-</body>
-
-</html>

frontend/header.html

@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html data-bs-theme="light" lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>Home - Brand</title>
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="500x500" href="/assets/img/photo_2024-10-06_10-06-15.jpg" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="500x500" href="/assets/img/photo_2024-10-06_10-06-15.jpg" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
-    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
-    <link rel="stylesheet" href="/assets/css/styles.min.css">
-</head>
-
-<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="54">
-    <!-- Start: Navbar Right Links (Dark) -->
-    <nav class="navbar navbar-expand-md bg-dark py-3" data-bs-theme="dark">
-        <div class="container"><a class="navbar-brand d-flex align-items-center" href="#"><span class="bs-icon-sm bs-icon-rounded bs-icon-primary d-flex justify-content-center align-items-center me-2 bs-icon"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-bezier">
-                        <path fill-rule="evenodd" d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"></path>
-                        <path d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"></path>
-                    </svg></span><span>Brand</span></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-5"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
-            <div class="collapse navbar-collapse" id="navcol-5">
-                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link active" href="#">First Item</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Second Item</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Third Item</a></li>
-                </ul>
-            </div>
-        </div>
-    </nav><!-- End: Navbar Right Links (Dark) -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="/assets/js/script.min.js"></script>
-</body>
-
-</html>

frontend/manifest.json

@@ -1 +0,0 @@
-{"short_name":"sst","name":"smartsoltech","icons":[{"src":"/assets/img/photo_2024-10-06_10-06-08.jpg","type":"image/jpeg","sizes":"1011x702"},{"src":"/assets/img/photo_2024-10-06_10-06-08.jpg","type":"image/jpeg","sizes":"1011x702"}],"start_url":"smartsoltech.kr","display":"fullscreen"}

frontend/services.html

@@ -1,82 +0,0 @@
-<!DOCTYPE html>
-<html data-bs-theme="light" lang="ru">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
-    <title>SmartSoltech</title>
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="500x500" href="/assets/img/photo_2024-10-06_10-06-15.jpg" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="500x500" href="/assets/img/photo_2024-10-06_10-06-15.jpg" media="(prefers-color-scheme: dark)">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="icon" type="image/jpeg" sizes="1011x702" href="/assets/img/photo_2024-10-06_10-06-08.jpg">
-    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
-    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
-    <link rel="stylesheet" href="/assets/css/styles.min.css">
-</head>
-
-<body>
-    <!-- Start: Articles Cards -->
-    <div class="container py-4 py-xl-5">
-        <div class="row mb-5">
-            <div class="col-md-8 col-xl-6 text-center mx-auto">
-                <h2>Heading</h2>
-                <p class="w-lg-50">Curae hendrerit donec commodo hendrerit egestas tempus, turpis facilisis nostra nunc. Vestibulum dui eget ultrices.</p>
-            </div>
-        </div>
-        <div class="row gy-4 row-cols-1 row-cols-md-2 row-cols-xl-3">
-            <div class="col">
-                <div class="card"><img class="card-img-top w-100 d-block fit-cover" style="height: 200px;" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png">
-                    <div class="card-body p-4">
-                        <p class="text-primary card-text mb-0">Article</p>
-                        <h4 class="card-title">Lorem libero donec</h4>
-                        <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
-                        <div class="d-flex"><img class="rounded-circle flex-shrink-0 me-3 fit-cover" width="50" height="50" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png">
-                            <div>
-                                <p class="fw-bold mb-0">John Smith</p>
-                                <p class="text-muted mb-0">Erat netus</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col">
-                <div class="card"><img class="card-img-top w-100 d-block fit-cover" style="height: 200px;" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png">
-                    <div class="card-body p-4">
-                        <p class="text-primary card-text mb-0">Article</p>
-                        <h4 class="card-title">Lorem libero donec</h4>
-                        <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
-                        <div class="d-flex"><img class="rounded-circle flex-shrink-0 me-3 fit-cover" width="50" height="50" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png">
-                            <div>
-                                <p class="fw-bold mb-0">John Smith</p>
-                                <p class="text-muted mb-0">Erat netus</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col">
-                <div class="card"><img class="card-img-top w-100 d-block fit-cover" style="height: 200px;" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png">
-                    <div class="card-body p-4">
-                        <p class="text-primary card-text mb-0">Article</p>
-                        <h4 class="card-title">Lorem libero donec</h4>
-                        <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
-                        <div class="d-flex"><img class="rounded-circle flex-shrink-0 me-3 fit-cover" width="50" height="50" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png">
-                            <div>
-                                <p class="fw-bold mb-0">John Smith</p>
-                                <p class="text-muted mb-0">Erat netus</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div><!-- End: Articles Cards -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="/assets/js/script.min.js"></script>
-</body>
-
-</html>

preview.html

@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Проект Django E-commerce - Предварительный просмотр</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
+    <link rel="stylesheet" href="smartsoltech/static/assets/css/modern-styles.css">
+    <link rel="stylesheet" href="smartsoltech/static/assets/css/compact-gallery.css">"
+    <style>
+        .main-content {
+            padding-top: 2rem;
+            padding-bottom: 3rem;
+        }
+        .content-wrapper {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 15px;
+        }
+    </style>
+</head>
+<body>
+    <div class="main-content">
+        <div class="content-wrapper">
+            
+            <!-- Компактная медиа-галерея -->
+            <div class="compact-media-gallery">
+                <div class="row g-3">
+                    <!-- Основное изображение -->
+                    <div class="col-lg-8">
+                        <div class="main-media-display">
+                            <div class="main-media-item" id="main-media">
+                                <a href="https://via.placeholder.com/800x500/4f46e5/ffffff?text=Главное+изображение" data-lightbox="project-gallery" data-title="Главное изображение проекта">
+                                    <img src="https://via.placeholder.com/800x500/4f46e5/ffffff?text=Главное+изображение" alt="Главное изображение" class="main-media-img">
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Сетка превью -->
+                    <div class="col-lg-4">
+                        <div class="media-thumbnails-grid">
+                            <div class="thumbnail-item active" data-index="0">
+                                <div class="thumbnail-wrapper" onclick="switchMainMedia('https://via.placeholder.com/800x500/4f46e5/ffffff?text=Главное+изображение', 'image', 'Главное изображение проекта')">
+                                    <img src="https://via.placeholder.com/200x200/4f46e5/ffffff?text=Превью+1" alt="Превью 1" class="thumbnail-img">
+                                    <div class="thumbnail-overlay">
+                                        <i class="fas fa-search-plus"></i>
+                                    </div>
+                                </div>
+                                <a href="https://via.placeholder.com/800x500/4f46e5/ffffff?text=Главное+изображение" data-lightbox="project-gallery" data-title="Главное изображение проекта" style="display: none;"></a>
+                            </div>
+                            
+                            <div class="thumbnail-item" data-index="1">
+                                <div class="thumbnail-wrapper" onclick="switchMainMedia('https://via.placeholder.com/800x500/7c3aed/ffffff?text=Скриншот+1', 'image', 'Скриншот интерфейса')">
+                                    <img src="https://via.placeholder.com/200x200/7c3aed/ffffff?text=Превью+2" alt="Превью 2" class="thumbnail-img">
+                                    <div class="thumbnail-overlay">
+                                        <i class="fas fa-search-plus"></i>
+                                    </div>
+                                </div>
+                                <a href="https://via.placeholder.com/800x500/7c3aed/ffffff?text=Скриншот+1" data-lightbox="project-gallery" data-title="Скриншот интерфейса" style="display: none;"></a>
+                            </div>
+                            
+                            <div class="thumbnail-item" data-index="2">
+                                <div class="thumbnail-wrapper" onclick="switchMainMedia('https://via.placeholder.com/800x500/f59e0b/ffffff?text=Скриншот+2', 'image', 'Мобильная версия')">
+                                    <img src="https://via.placeholder.com/200x200/f59e0b/ffffff?text=Превью+3" alt="Превью 3" class="thumbnail-img">
+                                    <div class="thumbnail-overlay">
+                                        <i class="fas fa-search-plus"></i>
+                                    </div>
+                                </div>
+                                <a href="https://via.placeholder.com/800x500/f59e0b/ffffff?text=Скриншот+2" data-lightbox="project-gallery" data-title="Мобильная версия" style="display: none;"></a>
+                            </div>
+                            
+                            <div class="thumbnail-item" data-index="3">
+                                <div class="thumbnail-wrapper" onclick="switchMainMedia('https://via.placeholder.com/800x500/10b981/ffffff?text=Админ+панель', 'image', 'Административная панель')">
+                                    <img src="https://via.placeholder.com/200x200/10b981/ffffff?text=Превью+4" alt="Превью 4" class="thumbnail-img">
+                                    <div class="thumbnail-overlay">
+                                        <i class="fas fa-search-plus"></i>
+                                    </div>
+                                </div>
+                                <a href="https://via.placeholder.com/800x500/10b981/ffffff?text=Админ+панель" data-lightbox="project-gallery" data-title="Административная панель" style="display: none;"></a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Основной контент - двухколоночная структура -->
+            <div class="row">
+                
+                <!-- Левая колонка - описание проекта -->
+                <div class="col-lg-8">
+                    <div class="project-content">
+                        <h2 class="mb-4">Описание проекта</h2>
+                        <div class="description-text">
+                            <p>Этот проект представляет собой <strong>современное веб-приложение</strong> электронной коммерции, разработанное с использованием Django и современных технологий фронтенда.</p>
+                            
+                            <h3>Ключевые особенности</h3>
+                            <ul>
+                                <li><em>Адаптивный дизайн</em>, оптимизированный для всех устройств</li>
+                                <li>Интеграция с <a href="#">популярными платежными системами</a></li>
+                                <li>Многоуровневая система категорий товаров</li>
+                                <li>Расширенная система поиска и фильтрации</li>
+                                <li>Административная панель для управления контентом</li>
+                            </ul>
+                            
+                            <blockquote>
+                                Проект демонстрирует современные подходы к веб-разработке, включая использование микросервисной архитектуры, контейнеризации и непрерывной интеграции.
+                            </blockquote>
+                            
+                            <h4>Технические детали</h4>
+                            <p>Для обеспечения высокой производительности использовались следующие решения:</p>
+                            
+                            <ol>
+                                <li><code>Redis</code> для кеширования данных</li>
+                                <li><code>PostgreSQL</code> как основная база данных</li>
+                                <li><code>Docker</code> для контейнеризации</li>
+                            </ol>
+                            
+                            <hr>
+                            
+                            <p><strong>Результат:</strong> Платформа способна обрабатывать <em>более 10,000 одновременных пользователей</em> с временем отклика менее 200ms.</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Правая колонка - технологии -->
+                <div class="col-lg-4">
+                    <div class="tech-sidebar-section">
+                        <h3 class="tech-sidebar-title">Технологии</h3>
+                        <div class="technologies-html-content">
+                            <p><code>Python</code> <code>Django</code> <code>PostgreSQL</code></p>
+                            <p><code>JavaScript</code> <code>HTML5</code> <code>CSS3</code></p>
+                            <p><code>Docker</code> <code>Redis</code> <code>Bootstrap</code></p>
+                            <p><strong>Дополнительно:</strong> <code>Bash</code> <code>SQLite3</code></p>
+                        </div>
+                    </div>
+                </div>
+                
+            </div>
+            
+            <!-- Дополнительная секция -->
+            <div class="row mt-5">
+                <div class="col-12">
+                    <div class="additional-info p-4 rounded-4" style="background: #f8fafc; border: 1px solid #e2e8f0;">
+                        <h3 class="mb-3">Результаты проекта</h3>
+                        <div class="row g-4">
+                            <div class="col-md-3 text-center">
+                                <div class="stat-number" style="font-size: 2rem; font-weight: bold; color: #4f46e5;">150%</div>
+                                <div class="stat-label">Рост продаж</div>
+                            </div>
+                            <div class="col-md-3 text-center">
+                                <div class="stat-number" style="font-size: 2rem; font-weight: bold; color: #4f46e5;">2.5x</div>
+                                <div class="stat-label">Быстрее загрузка</div>
+                            </div>
+                            <div class="col-md-3 text-center">
+                                <div class="stat-number" style="font-size: 2rem; font-weight: bold; color: #4f46e5;">95%</div>
+                                <div class="stat-label">Доступность</div>
+                            </div>
+                            <div class="col-md-3 text-center">
+                                <div class="stat-number" style="font-size: 2rem; font-weight: bold; color: #4f46e5;">100%</div>
+                                <div class="stat-label">Адаптивность</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Карусель похожих проектов -->
+            <div class="similar-projects-section">
+                <div class="container">
+                    <h2 class="section-title">Похожие проекты</h2>
+                    <div class="similar-projects-carousel">
+                        <div class="swiper similarSwiper">
+                            <div class="swiper-wrapper">
+                                <div class="swiper-slide">
+                                    <div class="similar-project-card">
+                                        <div class="similar-thumb">
+                                            <img src="https://via.placeholder.com/300x200/4f46e5/ffffff?text=Проект+1" alt="Проект 1">
+                                            <div class="project-overlay">
+                                                <i class="fas fa-external-link-alt"></i>
+                                            </div>
+                                        </div>
+                                        <div class="similar-content">
+                                            <h4 class="project-title">E-commerce платформа</h4>
+                                            <p class="project-description">Современная платформа для онлайн-торговли с интеграцией платежных систем</p>
+                                            <div class="project-categories">
+                                                <span class="category-tag">Web</span>
+                                                <span class="category-tag">Django</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="swiper-slide">
+                                    <div class="similar-project-card">
+                                        <div class="similar-thumb">
+                                            <img src="https://via.placeholder.com/300x200/7c3aed/ffffff?text=Проект+2" alt="Проект 2">
+                                            <div class="project-overlay">
+                                                <i class="fas fa-external-link-alt"></i>
+                                            </div>
+                                        </div>
+                                        <div class="similar-content">
+                                            <h4 class="project-title">CRM система</h4>
+                                            <p class="project-description">Система управления клиентскими отношениями с аналитикой</p>
+                                            <div class="project-categories">
+                                                <span class="category-tag">CRM</span>
+                                                <span class="category-tag">Analytics</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="swiper-slide">
+                                    <div class="similar-project-card">
+                                        <div class="similar-thumb">
+                                            <img src="https://via.placeholder.com/300x200/f59e0b/ffffff?text=Проект+3" alt="Проект 3">
+                                            <div class="project-overlay">
+                                                <i class="fas fa-external-link-alt"></i>
+                                            </div>
+                                        </div>
+                                        <div class="similar-content">
+                                            <h4 class="project-title">Мобильное приложение</h4>
+                                            <p class="project-description">iOS и Android приложение для управления задачами</p>
+                                            <div class="project-categories">
+                                                <span class="category-tag">Mobile</span>
+                                                <span class="category-tag">React Native</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="swiper-slide">
+                                    <div class="similar-project-card">
+                                        <div class="similar-thumb">
+                                            <div class="image-placeholder">
+                                                <div class="placeholder-content">
+                                                    <i class="fas fa-image placeholder-icon"></i>
+                                                    <div class="placeholder-text">Проект без изображения</div>
+                                                </div>
+                                            </div>
+                                            <div class="project-overlay">
+                                                <i class="fas fa-external-link-alt"></i>
+                                            </div>
+                                        </div>
+                                        <div class="similar-content">
+                                            <h4 class="project-title">Analytics Dashboard</h4>
+                                            <p class="project-description">Интерактивная панель аналитики с визуализацией данных</p>
+                                            <div class="project-categories">
+                                                <span class="category-tag">Analytics</span>
+                                                <span class="category-tag">D3.js</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="swiper-button-next similar-next"></div>
+                            <div class="swiper-button-prev similar-prev"></div>
+                            <div class="swiper-pagination similar-pagination"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+        </div>
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
+    <script>
+        // Функция переключения основного медиа
+        function switchMainMedia(url, type, caption, poster = '') {
+            const mainMediaContainer = document.getElementById('main-media');
+            if (!mainMediaContainer) return;
+            
+            // Очищаем контейнер
+            mainMediaContainer.innerHTML = '';
+            
+            if (type === 'image') {
+                const link = document.createElement('a');
+                link.href = url;
+                link.setAttribute('data-lightbox', 'project-gallery');
+                link.setAttribute('data-title', caption);
+                
+                const img = document.createElement('img');
+                img.src = url;
+                img.alt = caption;
+                img.className = 'main-media-img';
+                
+                link.appendChild(img);
+                mainMediaContainer.appendChild(link);
+            } else if (type === 'video') {
+                const video = document.createElement('video');
+                video.controls = true;
+                video.className = 'main-media-video';
+                if (poster) {
+                    video.poster = poster;
+                }
+                
+                const source = document.createElement('source');
+                source.src = url;
+                source.type = 'video/mp4';
+                
+                video.appendChild(source);
+                video.appendChild(document.createTextNode('Ваш браузер не поддерживает видео.'));
+                
+                mainMediaContainer.appendChild(video);
+            }
+            
+            // Обновляем активный thumbnail
+            document.querySelectorAll('.thumbnail-item').forEach(item => item.classList.remove('active'));
+            event.target.closest('.thumbnail-item').classList.add('active');
+        }
+
+        // Инициализация Swiper для карусели
+        const swiper = new Swiper('.similarSwiper', {
+            effect: 'coverflow',
+            grabCursor: true,
+            centeredSlides: true,
+            slidesPerView: 'auto',
+            spaceBetween: 40,
+            loop: true,
+            coverflowEffect: {
+                rotate: 15,
+                stretch: 0,
+                depth: 200,
+                modifier: 1.5,
+                slideShadows: true,
+            },
+            navigation: {
+                nextEl: '.similar-next',
+                prevEl: '.similar-prev',
+            },
+            pagination: {
+                el: '.similar-pagination',
+                clickable: true,
+            },
+            breakpoints: {
+                768: {
+                    slidesPerView: 2,
+                    spaceBetween: 20,
+                },
+                1024: {
+                    slidesPerView: 3,
+                    spaceBetween: 30,
+                }
+            }
+        });
+    </script>
+</body>
+</html>

requirements.txt

@@ -22,3 +22,6 @@ coverage==7.3.2
 pytest==7.4.3
 pytest-django==4.7.0
 pytest-cov==4.1.0
+django-tinymce==4.1.0
+Pillow==10.4.0
+django-tinymce==4.1.0

reset_database.sql

@@ -0,0 +1,73 @@
+-- Скрипт для полной очистки базы данных smartsoltech_db
+-- ВНИМАНИЕ: Этот скрипт удалит ВСЕ данные из базы данных!
+
+-- Отключаем проверку внешних ключей
+SET session_replication_role = replica;
+
+-- Удаляем все таблицы Django приложений
+DROP TABLE IF EXISTS django_migrations CASCADE;
+DROP TABLE IF EXISTS django_content_type CASCADE;
+DROP TABLE IF EXISTS auth_permission CASCADE;
+DROP TABLE IF EXISTS auth_group CASCADE;
+DROP TABLE IF EXISTS auth_group_permissions CASCADE;
+DROP TABLE IF EXISTS auth_user CASCADE;
+DROP TABLE IF EXISTS auth_user_groups CASCADE;
+DROP TABLE IF EXISTS auth_user_user_permissions CASCADE;
+DROP TABLE IF EXISTS django_admin_log CASCADE;
+DROP TABLE IF EXISTS django_session CASCADE;
+
+-- Удаляем таблицы приложения web
+DROP TABLE IF EXISTS web_herobanner CASCADE;
+DROP TABLE IF EXISTS web_category CASCADE;
+DROP TABLE IF EXISTS web_service CASCADE;
+DROP TABLE IF EXISTS web_client CASCADE;
+DROP TABLE IF EXISTS web_order CASCADE;
+DROP TABLE IF EXISTS web_project CASCADE;
+DROP TABLE IF EXISTS web_project_categories CASCADE;
+DROP TABLE IF EXISTS web_projectmedia CASCADE;
+DROP TABLE IF EXISTS web_portfolioitem CASCADE;
+DROP TABLE IF EXISTS web_portfolioitem_categories CASCADE;
+DROP TABLE IF EXISTS web_portfoliocategory CASCADE;
+DROP TABLE IF EXISTS web_portfoliomedia CASCADE;
+DROP TABLE IF EXISTS web_review CASCADE;
+DROP TABLE IF EXISTS web_blogpost CASCADE;
+DROP TABLE IF EXISTS web_servicerequest CASCADE;
+DROP TABLE IF EXISTS web_contactinfo CASCADE;
+DROP TABLE IF EXISTS web_team CASCADE;
+DROP TABLE IF EXISTS web_career CASCADE;
+DROP TABLE IF EXISTS web_newspost CASCADE;
+
+-- Удаляем таблицы приложения comunication
+DROP TABLE IF EXISTS comunication_usercommunication CASCADE;
+DROP TABLE IF EXISTS comunication_emailsettings CASCADE;
+DROP TABLE IF EXISTS comunication_telegramsettings CASCADE;
+
+-- Удаляем все последовательности (sequences)
+DROP SEQUENCE IF EXISTS web_herobanner_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_category_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_service_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_client_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_order_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_project_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_project_categories_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_projectmedia_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_portfolioitem_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_portfolioitem_categories_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_portfoliocategory_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_portfoliomedia_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_review_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_blogpost_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_servicerequest_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_contactinfo_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_team_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_career_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS web_newspost_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS comunication_usercommunication_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS comunication_emailsettings_id_seq CASCADE;
+DROP SEQUENCE IF EXISTS comunication_telegramsettings_id_seq CASCADE;
+
+-- Включаем обратно проверку внешних ключей
+SET session_replication_role = DEFAULT;
+
+-- Выводим сообщение о завершении
+SELECT 'База данных успешно очищена!' as status;

scripts/README.md

@@ -0,0 +1,23 @@
+# 🐍 Scripts
+
+Папка содержит вспомогательные скрипты для проекта SmartSolTech.
+
+## Файлы:
+
+- `create_hero_banner.py` - Скрипт для создания героических баннеров
+- `hero_script.py` - Дополнительный скрипт для работы с баннерами
+
+## Использование:
+
+Запуск скриптов должен производиться из корневой директории проекта:
+
+```bash
+cd smartsoltech/
+python ../scripts/create_hero_banner.py
+```
+
+или через Django management команды из папки smartsoltech/:
+
+```bash
+python manage.py shell < ../scripts/script_name.py
+```

smartsoltech/smartsoltech/settings.py

@@ -60,6 +60,7 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'tinymce',
     'web',
     'comunication'
 ]
@@ -158,6 +159,36 @@ STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')  # Папка для соб
 MEDIA_URL = '/media/'
 MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
 
+# TinyMCE Configuration
+TINYMCE_DEFAULT_CONFIG = {
+    'height': 500,
+    'width': '100%',
+    'cleanup_on_startup': True,
+    'custom_undo_redo_levels': 20,
+    'selector': 'textarea',
+    'theme': 'silver',
+    'plugins': '''
+        textcolor save link image media preview codesample contextmenu
+        table code lists fullscreen insertdatetime nonbreaking
+        contextmenu directionality searchreplace wordcount visualblocks
+        visualchars code fullscreen autolink lists charmap print hr
+        anchor pagebreak
+    ''',
+    'toolbar1': '''
+        fullscreen preview bold italic underline | fontselect,
+        fontsizeselect | forecolor backcolor | alignleft alignright |
+        aligncenter alignjustify | indent outdent | bullist numlist table |
+        | link image media | codesample |
+    ''',
+    'toolbar2': '''
+        visualblocks visualchars |
+        charmap hr pagebreak nonbreaking anchor | code |
+    ''',
+    'contextmenu': 'formats | link image',
+    'menubar': True,
+    'statusbar': True,
+}
+
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field
 

smartsoltech/smartsoltech/urls.py

@@ -1,8 +1,16 @@
 # smartsoltech/urls.py
 from django.contrib import admin
 from django.urls import path, include
+from django.conf import settings
+from django.conf.urls.static import static
 
 urlpatterns = [
     path('admin/', admin.site.urls),
+    path('tinymce/', include('tinymce.urls')),
     path('', include('web.urls')),  # Включаем маршруты приложения web
 ]
+
+# Serve media files in development
+if settings.DEBUG:
+    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
+    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

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;
+}

smartsoltech/static/assets/js/modern-scripts.js

@@ -21,46 +21,6 @@ document.addEventListener('DOMContentLoaded', function() {
         console.log('SmartSolTech: Loading screen not found');
     }
     
-    // Theme Toggle Functionality
-    const themeToggle = document.getElementById('theme-toggle');
-    const html = document.documentElement;
-    
-    if (themeToggle) {
-        // Check for saved theme preference
-        const currentTheme = localStorage.getItem('theme') || 'light';
-        html.setAttribute('data-theme', currentTheme);
-        updateThemeIcon(currentTheme);
-        
-        themeToggle.addEventListener('click', function() {
-            const currentTheme = html.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            
-            html.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            updateThemeIcon(newTheme);
-            
-            // Add animation
-            this.style.transform = 'scale(0.8)';
-            setTimeout(() => {
-                this.style.transform = 'scale(1)';
-            }, 150);
-        });
-    }
-    
-    function updateThemeIcon(theme) {
-        if (!themeToggle) return;
-        const icon = themeToggle.querySelector('i');
-        if (icon) {
-            if (theme === 'dark') {
-                icon.className = 'fas fa-sun';
-                themeToggle.setAttribute('aria-label', 'Переключить на светлую тему');
-            } else {
-                icon.className = 'fas fa-moon';
-                themeToggle.setAttribute('aria-label', 'Переключить на темную тему');
-            }
-        }
-    }
-    
     // Navbar scroll behavior
     const navbar = document.querySelector('.navbar-modern');
     if (navbar) {

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);

smartsoltech/staticfiles/assets/js/modern-scripts.js

@@ -1,109 +1,45 @@
 // Modern Scripts for SmartSolTech Website
 document.addEventListener('DOMContentLoaded', function() {
+    console.log('SmartSolTech: DOM loaded, initializing...');
     
     // Hide loading screen
     const loadingScreen = document.getElementById('loading-screen');
     if (loadingScreen) {
+        console.log('SmartSolTech: Loading screen found, hiding...');
         setTimeout(() => {
             loadingScreen.style.opacity = '0';
+            loadingScreen.style.pointerEvents = 'none';
             setTimeout(() => {
-                loadingScreen.style.display = 'none';
+                // Полностью удаляем элемент из DOM
+                if (loadingScreen.parentNode) {
+                    loadingScreen.parentNode.removeChild(loadingScreen);
+                    console.log('SmartSolTech: Loading screen completely removed from DOM');
+                }
             }, 300);
-        }, 1000);
+        }, 200); // Уменьшили время ожидания до 200ms
-    }
+    } else {
-    
+        console.log('SmartSolTech: Loading screen not found');
-    // Theme Toggle Functionality
-    const themeToggle = document.getElementById('theme-toggle');
-    const html = document.documentElement;
-    
-    // Check for saved theme preference
-    const currentTheme = localStorage.getItem('theme') || 'light';
-    html.setAttribute('data-theme', currentTheme);
-    updateThemeIcon(currentTheme);
-    
-    themeToggle.addEventListener('click', function() {
-        const currentTheme = html.getAttribute('data-theme');
-        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-        
-        html.setAttribute('data-theme', newTheme);
-        localStorage.setItem('theme', newTheme);
-        updateThemeIcon(newTheme);
-        
-        // Add animation
-        this.style.transform = 'scale(0.8)';
-        setTimeout(() => {
-            this.style.transform = 'scale(1)';
-        }, 150);
-    });
-    
-    function updateThemeIcon(theme) {
-        const icon = themeToggle.querySelector('i');
-        if (theme === 'dark') {
-            icon.className = 'fas fa-sun';
-            themeToggle.setAttribute('aria-label', 'Переключить на светлую тему');
-        } else {
-            icon.className = 'fas fa-moon';
-            themeToggle.setAttribute('aria-label', 'Переключить на темную тему');
-        }
     }
     
     // Navbar scroll behavior
     const navbar = document.querySelector('.navbar-modern');
-    let lastScrollTop = 0;
+    if (navbar) {
-    
+        window.addEventListener('scroll', function() {
-    window.addEventListener('scroll', function() {
+            if (window.scrollY > 50) {
-        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+                navbar.classList.add('scrolled');
-        
+            } else {
-        // Add/remove scrolled class
+                navbar.classList.remove('scrolled');
-        if (scrollTop > 50) {
+            }
-            navbar.classList.add('scrolled');
-        } else {
-            navbar.classList.remove('scrolled');
-        }
-        
-        // Hide/show navbar on scroll
-        if (scrollTop > lastScrollTop && scrollTop > 100) {
-            navbar.style.transform = 'translateY(-100%)';
-        } else {
-            navbar.style.transform = 'translateY(0)';
-        }
-        
-        lastScrollTop = scrollTop;
-    });
-    
-    // Scroll to top button
-    const scrollToTopBtn = document.getElementById('scroll-to-top');
-    
-    window.addEventListener('scroll', function() {
-        if (window.pageYOffset > 300) {
-            scrollToTopBtn.style.display = 'block';
-            scrollToTopBtn.style.opacity = '1';
-        } else {
-            scrollToTopBtn.style.opacity = '0';
-            setTimeout(() => {
-                if (window.pageYOffset <= 300) {
-                    scrollToTopBtn.style.display = 'none';
-                }
-            }, 300);
-        }
-    });
-    
-    scrollToTopBtn.addEventListener('click', function() {
-        window.scrollTo({
-            top: 0,
-            behavior: 'smooth'
         });
-    });
+    }
     
     // Smooth scrolling for anchor links
     document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-        anchor.addEventListener('click', function(e) {
+        anchor.addEventListener('click', function (e) {
-            e.preventDefault();
             const target = document.querySelector(this.getAttribute('href'));
             if (target) {
-                const offsetTop = target.offsetTop - 80; // Account for fixed navbar
+                e.preventDefault();
-                window.scrollTo({
+                target.scrollIntoView({
-                    top: offsetTop,
                     behavior: 'smooth'
                 });
             }
@@ -116,211 +52,19 @@ document.addEventListener('DOMContentLoaded', function() {
         rootMargin: '0px 0px -50px 0px'
     };
     
-    const observer = new IntersectionObserver(function(entries) {
+    const observer = new IntersectionObserver((entries) => {
         entries.forEach(entry => {
             if (entry.isIntersecting) {
-                entry.target.classList.add('animate-fade-in-up');
+                entry.target.style.opacity = '1';
-                // Add stagger delay for child elements
+                entry.target.style.transform = 'translateY(0)';
-                const children = entry.target.querySelectorAll('.service-card, .feature-list > *, .step-card');
-                children.forEach((child, index) => {
-                    setTimeout(() => {
-                        child.classList.add('animate-fade-in-up');
-                    }, index * 100);
-                });
             }
         });
     }, observerOptions);
     
-    // Observe elements for animation
+    // Observe cards and service items
-    document.querySelectorAll('.service-card, .card-modern, .step-card').forEach(el => {
+    document.querySelectorAll('.card-modern, .service-card, .step-card').forEach(card => {
-        observer.observe(el);
+        observer.observe(card);
     });
     
-    // Form enhancements
+    console.log('SmartSolTech: All scripts loaded successfully');
-    const forms = document.querySelectorAll('form');
-    forms.forEach(form => {
-        form.addEventListener('submit', function(e) {
-            const submitBtn = form.querySelector('button[type="submit"]');
-            if (submitBtn) {
-                const originalContent = submitBtn.innerHTML;
-                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Отправляем...';
-                submitBtn.disabled = true;
-                
-                // Re-enable after 3 seconds (in case of slow response)
-                setTimeout(() => {
-                    submitBtn.innerHTML = originalContent;
-                    submitBtn.disabled = false;
-                }, 3000);
-            }
-        });
-    });
-    
-    // Parallax effect for hero section
-    window.addEventListener('scroll', function() {
-        const scrolled = window.pageYOffset;
-        const parallaxElements = document.querySelectorAll('.animate-float');
-        
-        parallaxElements.forEach(element => {
-            const speed = 0.5;
-            element.style.transform = `translateY(${scrolled * speed}px)`;
-        });
-    });
-    
-    // Service cards hover effect
-    document.querySelectorAll('.service-card').forEach(card => {
-        card.addEventListener('mouseenter', function() {
-            this.style.transform = 'translateY(-10px) scale(1.02)';
-        });
-        
-        card.addEventListener('mouseleave', function() {
-            this.style.transform = 'translateY(0) scale(1)';
-        });
-    });
-    
-    // Card modern hover effects
-    document.querySelectorAll('.card-modern').forEach(card => {
-        card.addEventListener('mouseenter', function() {
-            this.style.boxShadow = '0 25px 50px -12px rgba(0, 0, 0, 0.25)';
-        });
-        
-        card.addEventListener('mouseleave', function() {
-            this.style.boxShadow = 'var(--shadow)';
-        });
-    });
-    
-    // Add loading animation to buttons
-    document.querySelectorAll('.btn-primary-modern, .btn-secondary-modern').forEach(btn => {
-        btn.addEventListener('click', function(e) {
-            // Create ripple effect
-            const ripple = document.createElement('span');
-            const rect = this.getBoundingClientRect();
-            const size = Math.max(rect.width, rect.height);
-            const x = e.clientX - rect.left - size / 2;
-            const y = e.clientY - rect.top - size / 2;
-            
-            ripple.style.cssText = `
-                position: absolute;
-                border-radius: 50%;
-                background: rgba(255, 255, 255, 0.4);
-                transform: scale(0);
-                animation: ripple 0.6s linear;
-                width: ${size}px;
-                height: ${size}px;
-                left: ${x}px;
-                top: ${y}px;
-            `;
-            
-            this.style.position = 'relative';
-            this.style.overflow = 'hidden';
-            this.appendChild(ripple);
-            
-            setTimeout(() => {
-                ripple.remove();
-            }, 600);
-        });
-    });
-    
-    // Typing animation for hero text (optional)
-    const typingText = document.querySelector('.typing-text');
-    if (typingText) {
-        const text = typingText.textContent;
-        typingText.textContent = '';
-        let i = 0;
-        
-        function typeWriter() {
-            if (i < text.length) {
-                typingText.textContent += text.charAt(i);
-                i++;
-                setTimeout(typeWriter, 100);
-            }
-        }
-        
-        setTimeout(typeWriter, 1000);
-    }
-    
-    // Mobile menu enhancements
-    const navbarToggler = document.querySelector('.navbar-toggler');
-    const navbarCollapse = document.querySelector('.navbar-collapse');
-    
-    if (navbarToggler && navbarCollapse) {
-        navbarToggler.addEventListener('click', function() {
-            const isExpanded = this.getAttribute('aria-expanded') === 'true';
-            
-            // Animate the toggler icon
-            this.style.transform = 'rotate(180deg)';
-            setTimeout(() => {
-                this.style.transform = 'rotate(0deg)';
-            }, 300);
-        });
-        
-        // Close menu when clicking on a link
-        document.querySelectorAll('.navbar-nav .nav-link').forEach(link => {
-            link.addEventListener('click', () => {
-                const bsCollapse = new bootstrap.Collapse(navbarCollapse, {
-                    hide: true
-                });
-            });
-        });
-    }
-    
-    // Newsletter form
-    const newsletterForm = document.querySelector('footer form');
-    if (newsletterForm) {
-        newsletterForm.addEventListener('submit', function(e) {
-            e.preventDefault();
-            const email = this.querySelector('input[type="email"]').value;
-            
-            if (email) {
-                // Show success message
-                const button = this.querySelector('button');
-                const originalContent = button.innerHTML;
-                button.innerHTML = '<i class="fas fa-check"></i>';
-                button.style.background = '#10b981';
-                
-                setTimeout(() => {
-                    button.innerHTML = originalContent;
-                    button.style.background = '';
-                    this.reset();
-                }, 2000);
-            }
-        });
-    }
 });
-
-// Add CSS for ripple animation
-const style = document.createElement('style');
-style.textContent = `
-    @keyframes ripple {
-        to {
-            transform: scale(2);
-            opacity: 0;
-        }
-    }
-    
-    .animate-fade-in-up {
-        opacity: 1 !important;
-        transform: translateY(0) !important;
-    }
-    
-    /* Smooth transitions */
-    .navbar-modern {
-        transition: transform 0.3s ease, background-color 0.3s ease;
-    }
-    
-    .service-card, .card-modern {
-        opacity: 0;
-        transform: translateY(30px);
-        transition: all 0.6s ease;
-    }
-    
-    .step-card {
-        opacity: 0;
-        transform: translateX(-30px);
-        transition: all 0.6s ease;
-    }
-    
-    .step-card:nth-child(even) {
-        transform: translateX(30px);
-    }
-`;
-document.head.appendChild(style);

smartsoltech/staticfiles/manifest.json

@@ -3,12 +3,12 @@
     "name": "Smartsoltech",
     "icons": [
       {
-        "src": "/static/img/photo_2024-10-06_10-06-08.jpg",
+        "src": "/static/img/logo.jpg",
         "type": "image/jpeg",
         "sizes": "1011x702"
       },
       {
-        "src": "/static/img/photo_2024-10-06_10-06-08.jpg",
+        "src": "/static/img/logo.jpg",
         "type": "image/jpeg",
         "sizes": "1011x702"
       }

smartsoltech/web/admin.py

@@ -1,5 +1,9 @@
 from django.contrib import admin
-from .models import Service, Project, Client, Order, Review, BlogPost, Category, ServiceRequest, HeroBanner, ContactInfo, Team, Career
+from .models import (
+    Service, Project, Client, Order, Review, BlogPost, Category, ServiceRequest, 
+    HeroBanner, ContactInfo, Team, Career,
+    ProjectMedia
+)
 from .forms import ProjectForm
 
 @admin.register(ContactInfo)
@@ -30,20 +34,6 @@ class ServiceAdmin(admin.ModelAdmin):
     has_video.boolean = True
     has_video.short_description = 'Есть видео'
 
-@admin.register(Project)
-class ProjectAdmin(admin.ModelAdmin):
-    form = ProjectForm
-    list_display = ('name', 'client','service', 'status', 'order', 'has_video')
-    list_filter = ('name', 'client','service', 'status', 'order')
-    search_fields = ('name', 'client','service', 'status', 'order', 'client__first_name', 'client__last_name')
-    fields = ('name', 'description', 'completion_date', 'client', 'service', 'order', 
-              'category', 'image', 'video', 'video_poster', 'status')
-    
-    def has_video(self, obj):
-        return bool(obj.video)
-    has_video.boolean = True
-    has_video.short_description = 'Есть видео'
-
 @admin.register(Client)
 class ClientAdmin(admin.ModelAdmin):
     list_display = ('first_name', 'last_name', 'email', 'phone_number')
@@ -80,8 +70,28 @@ class BlogPostAdmin(admin.ModelAdmin):
     
 @admin.register(Category)
 class CategoryAdmin(admin.ModelAdmin):
-    list_display = ('name','description')
+    list_display = ('name', 'slug', 'order', 'is_active', 'services_count', 'projects_count')
-    search_fields = ('name',)
+    list_filter = ('is_active',)
+    search_fields = ('name', 'description')
+    prepopulated_fields = {'slug': ('name',)}
+    list_editable = ('order', 'is_active')
+    ordering = ('order', 'name')
+    fieldsets = (
+        ('Основная информация', {
+            'fields': ('name', 'slug', 'description', 'icon')
+        }),
+        ('Настройки отображения', {
+            'fields': ('order', 'is_active')
+        }),
+    )
+    
+    def services_count(self, obj):
+        return obj.services.count()
+    services_count.short_description = 'Услуг'
+    
+    def projects_count(self, obj):
+        return obj.projects.count()
+    projects_count.short_description = 'Проектов'
     
 @admin.register(ServiceRequest)
 class ServiceRequestAdmin(admin.ModelAdmin):
@@ -180,3 +190,104 @@ class CareerAdmin(admin.ModelAdmin):
         updated = queryset.update(status='closed')
         self.message_user(request, f'{updated} вакансий закрыты.')
     mark_as_closed.short_description = "Закрыть"
+
+
+# ============================================
+# ПРОЕКТЫ - АДМИНКИ
+# ============================================
+
+class ProjectMediaInline(admin.TabularInline):
+    """Inline для медиа-файлов проекта"""
+    model = ProjectMedia
+    extra = 1
+    fields = ('media_type', 'image', 'video', 'video_poster', 'embed_code', 'caption', 'order')
+    ordering = ('order',)
+
+
+@admin.register(Project)
+class ProjectAdmin(admin.ModelAdmin):
+    """Админка для проектов"""
+    list_display = ('name', 'status', 'is_featured', 'display_order', 'categories_display', 
+                   'views_count', 'likes_count', 'media_count', 'completion_date')
+    list_filter = ('status', 'is_featured', 'categories', 'completion_date')
+    search_fields = ('name', 'description', 'client__first_name', 'client__last_name', 'technologies')
+    filter_horizontal = ('categories',)
+    list_editable = ('is_featured', 'display_order', 'status')
+    ordering = ('-is_featured', '-display_order', '-completion_date')
+    date_hierarchy = 'completion_date'
+    
+    inlines = [ProjectMediaInline]
+    
+    fieldsets = (
+        ('📋 Основная информация', {
+            'fields': ('name', 'categories', 'status', 'is_featured', 'display_order')
+        }),
+        ('📝 Описание', {
+            'fields': ('short_description', 'description', 'image')
+        }),
+        ('🏢 Детали проекта', {
+            'fields': ('client', 'service', 'order', 'category', 'project_url', 'github_url', 
+                      'technologies', 'duration', 'team_size', 'completion_date')
+        }),
+        ('🎬 Видео', {
+            'fields': ('video', 'video_poster'),
+            'classes': ('collapse',)
+        }),
+        ('🔍 SEO', {
+            'fields': ('meta_title', 'meta_description', 'meta_keywords'),
+            'classes': ('collapse',)
+        }),
+        ('📊 Статистика', {
+            'fields': ('views_count', 'likes_count'),
+            'classes': ('collapse',)
+        }),
+    )
+    
+    readonly_fields = ('views_count', 'likes_count')
+    
+    def categories_display(self, obj):
+        return ', '.join([cat.name for cat in obj.categories.all()[:3]])
+    categories_display.short_description = 'Категории'
+    
+    def media_count(self, obj):
+        return obj.media_files.count()
+    media_count.short_description = 'Медиа'
+    
+    actions = ['mark_as_completed', 'mark_as_featured']
+    
+    def mark_as_completed(self, request, queryset):
+        updated = queryset.update(status='completed')
+        self.message_user(request, f'{updated} проектов отмечены как завершённые.')
+    mark_as_completed.short_description = "Отметить как завершённые"
+    
+    def mark_as_featured(self, request, queryset):
+        updated = queryset.update(is_featured=True)
+        self.message_user(request, f'{updated} проектов отмечены как избранные.')
+    mark_as_featured.short_description = "Отметить как избранные"
+
+
+@admin.register(ProjectMedia)
+class ProjectMediaAdmin(admin.ModelAdmin):
+    """Админка для медиа-файлов проектов"""
+    list_display = ('id', 'project', 'media_type', 'caption', 'order', 'uploaded_at')
+    list_filter = ('media_type', 'uploaded_at')
+    search_fields = ('project__name', 'caption', 'alt_text')
+    list_editable = ('order',)
+    ordering = ('project', 'order', '-uploaded_at')
+    
+    fieldsets = (
+        ('Проект', {
+            'fields': ('project', 'media_type', 'order')
+        }),
+        ('Изображение', {
+            'fields': ('image', 'alt_text'),
+            'classes': ('collapse',)
+        }),
+        ('Видео', {
+            'fields': ('video', 'video_poster', 'embed_code'),
+            'classes': ('collapse',)
+        }),
+        ('Описание', {
+            'fields': ('caption',)
+        }),
+    )

smartsoltech/web/migrations/0014_portfoliocategory_alter_blogpost_content_newspost_and_more.py

@@ -0,0 +1,116 @@
+# Generated by Django 5.1.1 on 2025-11-25 23:21
+
+# Modified to remove ckeditor dependency
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('web', '0013_career_team'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='PortfolioCategory',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=100, verbose_name='Название')),
+                ('slug', models.SlugField(max_length=100, unique=True, verbose_name='URL')),
+                ('description', models.TextField(blank=True, verbose_name='Описание')),
+                ('icon', models.CharField(blank=True, help_text='Класс иконки (например: fa-code)', max_length=50, verbose_name='Иконка')),
+                ('order', models.PositiveIntegerField(default=0, verbose_name='Порядок')),
+                ('is_active', models.BooleanField(default=True, verbose_name='Активна')),
+            ],
+            options={
+                'verbose_name': 'Категория портфолио',
+                'verbose_name_plural': 'Категории портфолио',
+                'ordering': ['order', 'name'],
+            },
+        ),
+        migrations.AlterField(
+            model_name='blogpost',
+            name='content',
+            field=models.TextField(verbose_name='Содержание'),
+        ),
+        migrations.CreateModel(
+            name='NewsPost',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('title', models.CharField(max_length=200, verbose_name='Заголовок')),
+                ('slug', models.SlugField(max_length=200, unique=True, verbose_name='URL')),
+                ('excerpt', models.TextField(max_length=300, verbose_name='Краткое описание')),
+                ('content', models.TextField(verbose_name='Содержание')),
+                ('featured_image', models.ImageField(upload_to='news/', verbose_name='Главное изображение')),
+                ('tags', models.CharField(blank=True, help_text='Разделите запятыми', max_length=200, verbose_name='Теги')),
+                ('is_published', models.BooleanField(default=False, verbose_name='Опубликовано')),
+                ('is_featured', models.BooleanField(default=False, verbose_name='Избранная новость')),
+                ('views_count', models.PositiveIntegerField(default=0, verbose_name='Просмотры')),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+                ('published_at', models.DateTimeField(blank=True, null=True, verbose_name='Дата публикации')),
+                ('category', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, to='web.category', verbose_name='Категория')),
+            ],
+            options={
+                'verbose_name': 'Новость',
+                'verbose_name_plural': 'Новости',
+                'ordering': ['-published_at', '-created_at'],
+            },
+        ),
+        migrations.CreateModel(
+            name='PortfolioItem',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('title', models.CharField(max_length=200, verbose_name='Название проекта')),
+                ('slug', models.SlugField(max_length=200, unique=True, verbose_name='URL')),
+                ('short_description', models.TextField(max_length=300, verbose_name='Краткое описание')),
+                ('description', models.TextField(blank=True, verbose_name='Полное описание')),
+                ('thumbnail', models.ImageField(upload_to='portfolio/thumbnails/', verbose_name='Превью изображение')),
+                ('client', models.CharField(blank=True, max_length=200, verbose_name='Клиент')),
+                ('project_url', models.URLField(blank=True, verbose_name='Ссылка на проект')),
+                ('github_url', models.URLField(blank=True, verbose_name='GitHub репозиторий')),
+                ('technologies', models.TextField(help_text='Разделите запятыми', verbose_name='Технологии')),
+                ('duration', models.CharField(blank=True, max_length=100, verbose_name='Длительность')),
+                ('team_size', models.PositiveIntegerField(blank=True, null=True, verbose_name='Размер команды')),
+                ('status', models.CharField(choices=[('draft', 'Черновик'), ('published', 'Опубликовано'), ('featured', 'Избранное')], default='draft', max_length=20, verbose_name='Статус')),
+                ('completion_date', models.DateField(blank=True, null=True, verbose_name='Дата завершения')),
+                ('meta_title', models.CharField(blank=True, max_length=200, verbose_name='SEO заголовок')),
+                ('meta_description', models.TextField(blank=True, max_length=300, verbose_name='SEO описание')),
+                ('views_count', models.PositiveIntegerField(default=0, verbose_name='Просмотры')),
+                ('likes_count', models.PositiveIntegerField(default=0, verbose_name='Лайки')),
+                ('is_featured', models.BooleanField(default=False, verbose_name='Избранный проект')),
+                ('display_order', models.PositiveIntegerField(default=0, verbose_name='Порядок отображения')),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+                ('published_at', models.DateTimeField(blank=True, null=True, verbose_name='Дата публикации')),
+                ('categories', models.ManyToManyField(related_name='portfolio_items', to='web.portfoliocategory', verbose_name='Категории')),
+            ],
+            options={
+                'verbose_name': 'Проект портфолио',
+                'verbose_name_plural': 'Портфолио',
+                'ordering': ['-is_featured', '-display_order', '-published_at'],
+            },
+        ),
+        migrations.CreateModel(
+            name='PortfolioMedia',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('media_type', models.CharField(choices=[('image', 'Изображение'), ('video', 'Видео'), ('embed', 'Встроенное видео (YouTube, Vimeo)')], default='image', max_length=10, verbose_name='Тип медиа')),
+                ('image', models.ImageField(blank=True, null=True, upload_to='portfolio/gallery/', verbose_name='Изображение')),
+                ('video', models.FileField(blank=True, null=True, upload_to='portfolio/videos/', verbose_name='Видео файл')),
+                ('video_poster', models.ImageField(blank=True, null=True, upload_to='portfolio/posters/', verbose_name='Превью видео')),
+                ('embed_url', models.URLField(blank=True, verbose_name='URL видео (YouTube, Vimeo)')),
+                ('caption', models.CharField(blank=True, max_length=200, verbose_name='Подпись')),
+                ('alt_text', models.CharField(blank=True, max_length=200, verbose_name='Alt текст')),
+                ('order', models.PositiveIntegerField(default=0, verbose_name='Порядок')),
+                ('uploaded_at', models.DateTimeField(auto_now_add=True)),
+                ('portfolio_item', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='media_files', to='web.portfolioitem', verbose_name='Проект')),
+            ],
+            options={
+                'verbose_name': 'Медиа файл портфолио',
+                'verbose_name_plural': 'Медиа файлы портфолио',
+                'ordering': ['order', 'uploaded_at'],
+            },
+        ),
+    ]

smartsoltech/web/migrations/0015_projectcategory_remove_portfolioitem_categories_and_more.py

@@ -0,0 +1,217 @@
+# Generated by Django 5.1.1 on 2025-11-26 00:02
+
+import django.db.models.deletion
+import tinymce.models
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('web', '0014_portfoliocategory_alter_blogpost_content_newspost_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='ProjectCategory',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=100, verbose_name='Название')),
+                ('slug', models.SlugField(max_length=100, unique=True, verbose_name='URL')),
+                ('description', models.TextField(blank=True, verbose_name='Описание')),
+                ('icon', models.CharField(blank=True, help_text='Класс иконки (например: fa-code)', max_length=50, verbose_name='Иконка')),
+                ('order', models.PositiveIntegerField(default=0, verbose_name='Порядок')),
+                ('is_active', models.BooleanField(default=True, verbose_name='Активна')),
+            ],
+            options={
+                'verbose_name': 'Категория проекта',
+                'verbose_name_plural': 'Категории проектов',
+                'ordering': ['order', 'name'],
+            },
+        ),
+        migrations.RemoveField(
+            model_name='portfolioitem',
+            name='categories',
+        ),
+        migrations.RemoveField(
+            model_name='portfoliomedia',
+            name='portfolio_item',
+        ),
+        migrations.AlterModelOptions(
+            name='project',
+            options={'ordering': ['-is_featured', '-display_order', '-completion_date'], 'verbose_name': 'Проект', 'verbose_name_plural': 'Проекты'},
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='created_at',
+            field=models.DateTimeField(auto_now_add=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='display_order',
+            field=models.PositiveIntegerField(default=0, verbose_name='Порядок отображения'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='duration',
+            field=models.CharField(blank=True, max_length=100, verbose_name='Длительность'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='github_url',
+            field=models.URLField(blank=True, verbose_name='GitHub репозиторий'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='is_featured',
+            field=models.BooleanField(default=False, verbose_name='Избранный проект'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='likes_count',
+            field=models.PositiveIntegerField(default=0, verbose_name='Количество лайков'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='meta_description',
+            field=models.TextField(blank=True, max_length=300, verbose_name='SEO описание'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='meta_keywords',
+            field=models.CharField(blank=True, max_length=200, verbose_name='Ключевые слова'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='meta_title',
+            field=models.CharField(blank=True, max_length=200, verbose_name='SEO заголовок'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='project_url',
+            field=models.URLField(blank=True, verbose_name='Ссылка на проект'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='short_description',
+            field=models.TextField(default='Описание проекта', max_length=300, verbose_name='Краткое описание'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='slug',
+            field=models.SlugField(blank=True, max_length=200, unique=True, verbose_name='URL'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='team_size',
+            field=models.PositiveIntegerField(blank=True, null=True, verbose_name='Размер команды'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='technologies',
+            field=models.TextField(blank=True, help_text='Разделите запятыми', verbose_name='Технологии'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='thumbnail',
+            field=models.ImageField(blank=True, null=True, upload_to='static/img/project/thumbnails/', verbose_name='Миниатюра'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='updated_at',
+            field=models.DateTimeField(auto_now=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='views_count',
+            field=models.PositiveIntegerField(default=0, verbose_name='Количество просмотров'),
+        ),
+        migrations.AlterField(
+            model_name='blogpost',
+            name='content',
+            field=tinymce.models.HTMLField(verbose_name='Содержание'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='category',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to='web.category', verbose_name='Категория (старая)'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='client',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='projects', to='web.client', verbose_name='Клиент'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='completion_date',
+            field=models.DateField(blank=True, null=True, verbose_name='Дата завершения'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='description',
+            field=tinymce.models.HTMLField(verbose_name='Полное описание'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='image',
+            field=models.ImageField(blank=True, null=True, upload_to='static/img/project/', verbose_name='Главное изображение'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='name',
+            field=models.CharField(max_length=200, verbose_name='Название проекта'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='order',
+            field=models.OneToOneField(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='project', to='web.order', verbose_name='Заказ'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='service',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='projects', to='web.service', verbose_name='Услуга'),
+        ),
+        migrations.AlterField(
+            model_name='project',
+            name='status',
+            field=models.CharField(choices=[('in_progress', 'В процессе'), ('completed', 'Завершен'), ('archived', 'В архиве')], default='in_progress', max_length=50, verbose_name='Статус'),
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='categories',
+            field=models.ManyToManyField(blank=True, related_name='projects', to='web.category', verbose_name='Категории'),
+        ),
+        migrations.CreateModel(
+            name='ProjectMedia',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('media_type', models.CharField(choices=[('image', 'Изображение'), ('video', 'Видео'), ('embed_video', 'Встроенное видео (YouTube, Vimeo)')], default='image', max_length=20, verbose_name='Тип медиа')),
+                ('image', models.ImageField(blank=True, null=True, upload_to='static/img/project/gallery/', verbose_name='Изображение')),
+                ('video', models.FileField(blank=True, null=True, upload_to='static/video/project/gallery/', verbose_name='Видео файл')),
+                ('video_poster', models.ImageField(blank=True, null=True, upload_to='static/img/project/gallery/posters/', verbose_name='Превью видео')),
+                ('embed_code', models.TextField(blank=True, help_text='Вставьте iframe код от YouTube или Vimeo', verbose_name='Код встраивания (iframe)')),
+                ('caption', models.CharField(blank=True, max_length=200, verbose_name='Подпись')),
+                ('alt_text', models.CharField(blank=True, max_length=200, verbose_name='Alt текст')),
+                ('order', models.PositiveIntegerField(default=0, verbose_name='Порядок')),
+                ('uploaded_at', models.DateTimeField(auto_now_add=True)),
+                ('project', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='media_items', to='web.project', verbose_name='Проект')),
+            ],
+            options={
+                'verbose_name': 'Медиа файл проекта',
+                'verbose_name_plural': 'Медиа файлы проектов',
+                'ordering': ['order', 'uploaded_at'],
+            },
+        ),
+        migrations.DeleteModel(
+            name='NewsPost',
+        ),
+        migrations.DeleteModel(
+            name='PortfolioCategory',
+        ),
+        migrations.DeleteModel(
+            name='PortfolioItem',
+        ),
+        migrations.DeleteModel(
+            name='PortfolioMedia',
+        ),
+    ]

smartsoltech/web/migrations/0016_delete_projectcategory_alter_category_options_and_more.py

@@ -0,0 +1,48 @@
+# Generated by Django 5.1.1 on 2025-11-26 00:14
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('web', '0015_projectcategory_remove_portfolioitem_categories_and_more'),
+    ]
+
+    operations = [
+        migrations.DeleteModel(
+            name='ProjectCategory',
+        ),
+        migrations.AlterModelOptions(
+            name='category',
+            options={'ordering': ['order', 'name'], 'verbose_name': 'Категория', 'verbose_name_plural': 'Категории'},
+        ),
+        migrations.AddField(
+            model_name='category',
+            name='icon',
+            field=models.CharField(blank=True, help_text='Класс FontAwesome (например: fa-code)', max_length=50, verbose_name='Иконка'),
+        ),
+        migrations.AddField(
+            model_name='category',
+            name='is_active',
+            field=models.BooleanField(default=True, verbose_name='Активна'),
+        ),
+        migrations.AddField(
+            model_name='category',
+            name='order',
+            field=models.PositiveIntegerField(default=0, verbose_name='Порядок'),
+        ),
+        migrations.AddField(
+            model_name='category',
+            name='slug',
+            field=models.SlugField(blank=True, max_length=100, null=True, unique=True, verbose_name='URL'),
+        ),
+        # Удаляем проблемную операцию изменения ManyToManyField
+        # Поле уже существует с нужными параметрами
+        migrations.AlterField(
+            model_name='projectmedia',
+            name='project',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='media_files', to='web.project', verbose_name='Проект'),
+        ),
+    ]

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 = [
+    ]

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;
+            """
+        ),
+    ]

smartsoltech/web/migrations/0019_add_project_slug.py

@@ -0,0 +1,13 @@
+# Generated by Django 5.1.1 on 2025-11-26 10:03
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('web', '0018_fix_project_categories_column'),
+    ]
+
+    operations = [
+    ]

smartsoltech/web/migrations/0020_recreate_project_table.py

@@ -0,0 +1,13 @@
+# Generated by Django 5.1.1 on 2025-11-26 10:16
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('web', '0019_add_project_slug'),
+    ]
+
+    operations = [
+    ]

smartsoltech/web/migrations/0021_sync_production_database.py

@@ -0,0 +1,13 @@
+# Generated by Django 5.1.1 on 2025-11-26 10:46
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('web', '0020_recreate_project_table'),
+    ]
+
+    operations = [
+    ]

smartsoltech/web/models.py

@@ -1,5 +1,6 @@
 from django.db import models
 from django.contrib.auth.models import AbstractUser, User
+from tinymce.models import HTMLField
 import uuid
 from django.urls import reverse
 
@@ -54,16 +55,26 @@ class HeroBanner(models.Model):
 
 class Category(models.Model):
     name = models.CharField(max_length=100)
+    slug = models.SlugField(max_length=100, unique=True, blank=True, null=True, verbose_name="URL")
     description = models.TextField(default='Описание категории')
+    icon = models.CharField(max_length=50, blank=True, verbose_name="Иконка", help_text="Класс FontAwesome (например: fa-code)")
+    order = models.PositiveIntegerField(default=0, verbose_name="Порядок")
+    is_active = models.BooleanField(default=True, verbose_name="Активна")
 
     class Meta:
         verbose_name = 'Категория'
         verbose_name_plural = 'Категории'
-        ordering = ['name']
+        ordering = ['order', 'name']
 
     def __str__(self):
         return self.name
     
+    def save(self, *args, **kwargs):
+        if not self.slug:
+            from django.utils.text import slugify
+            self.slug = slugify(self.name)
+        super().save(*args, **kwargs)
+
 class Service(models.Model):
     name = models.CharField(max_length=200)
     description = models.TextField(default='Описание услуги')
@@ -111,7 +122,7 @@ class Client(models.Model):
 
 class BlogPost(models.Model):
     title = models.CharField(max_length=200)
-    content = models.TextField()
+    content = HTMLField(verbose_name="Содержание")
     published_date = models.DateTimeField(auto_now_add=True)
     image = models.ImageField(upload_to='static/img/blog/', blank=True, null=True)
     video = models.FileField(upload_to='static/video/blog/', blank=True, null=True, help_text='Видео файл для блог поста')
@@ -172,27 +183,200 @@ class Order(models.Model):
     def get_absolute_url(self):
         return reverse('order_detail', kwargs={'pk': self.pk})
 
+
+# ПРОЕКТЫ
+# ============================================
+
 class Project(models.Model):
-    name = models.CharField(max_length=200)
+    """Расширенная модель проекта с множественными категориями и медиа"""
-    description = models.TextField(default='Описание проекта')
+    
-    completion_date = models.DateField(blank=True, null=True)
+    STATUS_CHOICES = [
-    client = models.ForeignKey(Client, on_delete=models.CASCADE, related_name='projects')
+        ('in_progress', 'В процессе'),
-    service = models.ForeignKey(Service, on_delete=models.CASCADE, related_name='projects')
+        ('completed', 'Завершен'),
-    order = models.OneToOneField(Order, on_delete=models.CASCADE, related_name='project', null=True, blank=True)
+        ('archived', 'В архиве'),
-    category = models.ForeignKey(Category, on_delete=models.SET_NULL, null=True, blank=True)
+    ]
-    image = models.ImageField(upload_to='static/img/project/', blank=True, null=True)
+    
+    # Основная информация
+    name = models.CharField(max_length=200, verbose_name="Название проекта")
+    slug = models.SlugField(max_length=200, unique=True, verbose_name="URL", blank=True)
+    
+    # Краткое описание для списка
+    short_description = models.TextField(max_length=300, verbose_name="Краткое описание", default='Описание проекта')
+    
+    # Полное описание с WYSIWYG редактором
+    description = HTMLField(verbose_name="Полное описание")
+    
+    # Связи с существующими моделями
+    client = models.ForeignKey(Client, on_delete=models.CASCADE, related_name='projects', verbose_name="Клиент")
+    service = models.ForeignKey(Service, on_delete=models.CASCADE, related_name='projects', verbose_name="Услуга")
+    order = models.OneToOneField(Order, on_delete=models.CASCADE, related_name='project', null=True, blank=True, verbose_name="Заказ")
+    category = models.ForeignKey(Category, on_delete=models.SET_NULL, null=True, blank=True, verbose_name="Категория (старая)")
+    
+    # Множественные категории проектов = категории услуг
+    categories = models.ManyToManyField(Category, related_name='projects', verbose_name="Категории", blank=True)
+    
+    # Главное изображение (для обратной совместимости и превью)
+    image = models.ImageField(upload_to='static/img/project/', blank=True, null=True, verbose_name="Главное изображение")
+    thumbnail = models.ImageField(upload_to='static/img/project/thumbnails/', blank=True, null=True, verbose_name="Миниатюра")
+    
+    # Видео (для обратной совместимости)
     video = models.FileField(upload_to='static/video/project/', blank=True, null=True, help_text='Видео презентация проекта')
     video_poster = models.ImageField(upload_to='static/img/project/posters/', blank=True, null=True, help_text='Превью изображение для видео проекта')
-    status = models.CharField(max_length=50, choices=[('in_progress', 'В процессе'), ('completed', 'Завершен')], default='in_progress')
+    
+    # Дополнительная информация о проекте
+    project_url = models.URLField(blank=True, verbose_name="Ссылка на проект")
+    github_url = models.URLField(blank=True, verbose_name="GitHub репозиторий")
+    
+    # Технологии и инструменты
+    technologies = models.TextField(blank=True, verbose_name="Технологии", help_text="Разделите запятыми")
+    
+    # Метрики проекта
+    duration = models.CharField(max_length=100, blank=True, verbose_name="Длительность")
+    team_size = models.PositiveIntegerField(blank=True, null=True, verbose_name="Размер команды")
+    
+    # Даты и статус
+    completion_date = models.DateField(blank=True, null=True, verbose_name="Дата завершения")
+    status = models.CharField(max_length=50, choices=STATUS_CHOICES, default='in_progress', verbose_name="Статус")
+    
+    # Счетчики и метрики
+    views_count = models.PositiveIntegerField(default=0, verbose_name='Количество просмотров')
+    likes_count = models.PositiveIntegerField(default=0, verbose_name='Количество лайков')
+    
+    # Настройки отображения
+    is_featured = models.BooleanField(default=False, verbose_name="Избранный проект")
+    display_order = models.PositiveIntegerField(default=0, verbose_name="Порядок отображения")
+    
+    # SEO
+    meta_title = models.CharField(max_length=200, blank=True, verbose_name="SEO заголовок")
+    meta_description = models.TextField(max_length=300, blank=True, verbose_name="SEO описание")
+    meta_keywords = models.CharField(max_length=200, blank=True, verbose_name="Ключевые слова")
+    
+    # Timestamps
+    created_at = models.DateTimeField(auto_now_add=True, null=True, blank=True)
+    updated_at = models.DateTimeField(auto_now=True, null=True, blank=True)
 
     class Meta:
         verbose_name = 'Проект'
         verbose_name_plural = 'Проекты'
-        ordering = ['-completion_date']
+        ordering = ['-is_featured', '-display_order', '-completion_date']
 
     def __str__(self):
         return self.name
     
+    def get_absolute_url(self):
+        return reverse('project_detail', kwargs={'pk': self.pk})
+    
+    @property
+    def technologies_list(self):
+        """Возвращает список технологий"""
+        if self.technologies:
+            return [tech.strip() for tech in self.technologies.split(',') if tech.strip()]
+        return []
+    
+    def save(self, *args, **kwargs):
+        if not self.slug:
+            from django.utils.text import slugify
+            self.slug = slugify(self.name)
+        
+        # Автоматически создаем thumbnail из главного изображения
+        if self.image and not self.thumbnail:
+            self.thumbnail = self.image
+        
+        super().save(*args, **kwargs)
+        
+        # Ресайз thumbnail после сохранения
+        if self.thumbnail:
+            self._resize_thumbnail()
+    
+    def _resize_thumbnail(self):
+        """Автоматический ресайз thumbnail до 600x400px"""
+        from PIL import Image
+        from io import BytesIO
+        from django.core.files.base import ContentFile
+        import os
+        
+        if not self.thumbnail:
+            return
+        
+        try:
+            # Открываем изображение
+            img = Image.open(self.thumbnail.path)
+            
+            # Конвертируем в RGB если нужно
+            if img.mode not in ('RGB', 'RGBA'):
+                img = img.convert('RGB')
+            
+            # Целевой размер
+            target_width = 600
+            target_height = 400
+            
+            # Вычисляем соотношение сторон
+            img_ratio = img.width / img.height
+            target_ratio = target_width / target_height
+            
+            # Обрезаем изображение по центру
+            if img_ratio > target_ratio:
+                # Изображение шире, обрезаем по ширине
+                new_width = int(img.height * target_ratio)
+                left = (img.width - new_width) // 2
+                img = img.crop((left, 0, left + new_width, img.height))
+            else:
+                # Изображение выше, обрезаем по высоте
+                new_height = int(img.width / target_ratio)
+                top = (img.height - new_height) // 2
+                img = img.crop((0, top, img.width, top + new_height))
+            
+            # Ресайз до целевого размера
+            img = img.resize((target_width, target_height), Image.Resampling.LANCZOS)
+            
+            # Сохраняем оптимизированное изображение
+            img.save(self.thumbnail.path, quality=85, optimize=True)
+            
+        except Exception as e:
+            print(f"Ошибка при ресайзе thumbnail для проекта {self.name}: {e}")
+
+
+class ProjectMedia(models.Model):
+    """Медиа-файлы для проектов (множественные фото и видео)"""
+    
+    MEDIA_TYPE_CHOICES = [
+        ('image', 'Изображение'),
+        ('video', 'Видео'),
+        ('embed_video', 'Встроенное видео (YouTube, Vimeo)'),
+    ]
+    
+    project = models.ForeignKey(Project, on_delete=models.CASCADE, related_name='media_files', verbose_name="Проект")
+    
+    media_type = models.CharField(max_length=20, choices=MEDIA_TYPE_CHOICES, default='image', verbose_name="Тип медиа")
+    
+    # Для изображений
+    image = models.ImageField(upload_to='static/img/project/gallery/', blank=True, null=True, verbose_name="Изображение")
+    
+    # Для видео
+    video = models.FileField(upload_to='static/video/project/gallery/', blank=True, null=True, verbose_name="Видео файл")
+    video_poster = models.ImageField(upload_to='static/img/project/gallery/posters/', blank=True, null=True, verbose_name="Превью видео")
+    
+    # Для встроенных видео
+    embed_code = models.TextField(blank=True, verbose_name="Код встраивания (iframe)", help_text="Вставьте iframe код от YouTube или Vimeo")
+    
+    # Описание и метаданные
+    caption = models.CharField(max_length=200, blank=True, verbose_name="Подпись")
+    alt_text = models.CharField(max_length=200, blank=True, verbose_name="Alt текст")
+    
+    # Порядок отображения
+    order = models.PositiveIntegerField(default=0, verbose_name="Порядок")
+    
+    # Timestamps
+    uploaded_at = models.DateTimeField(auto_now_add=True)
+    
+    class Meta:
+        verbose_name = 'Медиа файл проекта'
+        verbose_name_plural = 'Медиа файлы проектов'
+        ordering = ['order', 'uploaded_at']
+    
+    def __str__(self):
+        return f"{self.get_media_type_display()} для {self.project.name}"
+
 class Review(models.Model):
     client = models.ForeignKey(Client, on_delete=models.CASCADE, related_name='reviews')
     service = models.ForeignKey(Service, on_delete=models.CASCADE, related_name='reviews')
@@ -382,4 +566,3 @@ class Career(models.Model):
         if self.application_deadline and self.application_deadline < timezone.now().date():
             return False
         return True
-

smartsoltech/web/templates/web/base_modern.html

@@ -72,11 +72,6 @@
     <!-- Footer -->
     {% include 'web/footer_modern.html' %}
     
-    <!-- Theme Toggle Button -->
-    <button id="theme-toggle" class="theme-toggle" aria-label="Переключить тему">
-        <i class="fas fa-moon"></i>
-    </button>
-    
     <!-- Scroll to Top Button -->
     <button id="scroll-to-top" class="position-fixed bottom-0 end-0 m-4 btn btn-primary-modern rounded-circle" style="width: 50px; height: 50px; display: none; z-index: 999;">
         <i class="fas fa-arrow-up"></i>

smartsoltech/web/templates/web/blog.html

@@ -0,0 +1,322 @@
+{% extends 'web/base_modern.html' %}
+{% load static %}
+{% block title %}Блог - SmartSolTech{% endblock %}
+
+{% block content %}
+<!-- Hero Section -->
+<section class="hero-modern">
+    <div class="container-modern">
+        <div class="row justify-content-center text-center">
+            <div class="col-lg-8">
+                <div class="hero-content">
+                    <h1 class="display-4 fw-bold mb-4">
+                        <span class="text-gradient">Блог</span> SmartSolTech
+                    </h1>
+                    <p class="lead text-muted mb-5">
+                        Новости, статьи и инсайты из мира IT и технологий
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Blog Posts Section -->
+<section class="section-padding">
+    <div class="container-modern">
+        {% if blog_posts %}
+        <div class="row g-4">
+            {% for post in blog_posts %}
+            <div class="col-lg-4 col-md-6">
+                <article class="card-modern h-100 hover-lift">
+                    <!-- Post Image/Video -->
+                    {% if post.video %}
+                    <div style="height: 250px; overflow: hidden; border-radius: 15px 15px 0 0; position: relative;">
+                        <video class="w-100 h-100" 
+                               style="object-fit: cover;" 
+                               muted 
+                               {% if post.video_poster %}poster="{{ post.video_poster.url }}"{% endif %}>
+                            <source src="{{ post.video.url }}" type="video/mp4">
+                            {% if post.image %}
+                                <img src="{{ post.image.url }}" class="w-100 h-100" style="object-fit: cover;" alt="{{ post.title }}">
+                            {% endif %}
+                        </video>
+                        <div class="position-absolute top-0 end-0 p-3">
+                            <span class="badge bg-primary">
+                                <i class="fas fa-play"></i> Видео
+                            </span>
+                        </div>
+                        <div class="position-absolute bottom-0 start-0 end-0 p-3" style="background: linear-gradient(transparent, rgba(0,0,0,0.7));">
+                            <button class="btn btn-light btn-sm" onclick="this.closest('div').previousElementSibling.play()">
+                                <i class="fas fa-play me-1"></i> Воспроизвести
+                            </button>
+                        </div>
+                    </div>
+                    {% elif post.image %}
+                    <div style="height: 250px; overflow: hidden; border-radius: 15px 15px 0 0;">
+                        <img src="{{ post.image.url }}" alt="{{ post.title }}" 
+                             class="w-100 h-100"
+                             style="object-fit: cover;"
+                             loading="lazy">
+                    </div>
+                    {% else %}
+                    <div class="w-100 bg-gradient d-flex align-items-center justify-content-center" 
+                         style="height: 250px; border-radius: 15px 15px 0 0;">
+                        <i class="fas fa-newspaper text-white" style="font-size: 3rem; opacity: 0.7;"></i>
+                    </div>
+                    {% endif %}
+                    
+                    <!-- Post Content -->
+                    <div class="card-body d-flex flex-column">
+                        <div class="mb-3">
+                            <span class="badge bg-primary-modern">
+                                <i class="fas fa-newspaper me-1"></i>
+                                Блог
+                            </span>
+                        </div>
+                        
+                        <h3 class="h5 mb-3 text-dark">
+                            <a href="{% url 'blog_post_detail' post.pk %}" 
+                               class="text-decoration-none text-dark hover-primary">
+                                {{ post.title }}
+                            </a>
+                        </h3>
+                        
+                        <div class="text-muted mb-3 flex-grow-1">
+                            {% if post.content %}
+                                <p>{{ post.content|striptags|truncatewords:20 }}</p>
+                            {% else %}
+                                <p>Нет описания...</p>
+                            {% endif %}
+                        </div>
+                        
+                        <!-- Post Meta -->
+                        <div class="d-flex justify-content-between align-items-center mt-auto pt-3 border-top">
+                            <small class="text-muted">
+                                <i class="fas fa-calendar-alt me-1"></i>
+                                {{ post.published_date|date:"d.m.Y" }}
+                            </small>
+                            <a href="{% url 'blog_post_detail' post.pk %}" 
+                               class="btn btn-sm btn-outline-primary">
+                                Читать далее
+                                <i class="fas fa-arrow-right ms-1"></i>
+                            </a>
+                        </div>
+                    </div>
+                </article>
+            </div>
+            {% endfor %}
+        </div>
+        
+        <!-- Pagination (если планируется) -->
+        <div class="text-center mt-5">
+            <div class="d-inline-flex align-items-center gap-3">
+                <span class="text-muted">Показано {{ blog_posts.count }} из {{ blog_posts.count }} постов</span>
+            </div>
+        </div>
+        
+        {% else %}
+        <!-- Empty State -->
+        <div class="text-center py-5">
+            <div class="empty-state">
+                <div class="mb-4">
+                    <i class="fas fa-newspaper text-muted" style="font-size: 4rem;"></i>
+                </div>
+                <h3 class="h4 mb-3">Пока нет постов в блоге</h3>
+                <p class="text-muted mb-4">
+                    Мы работаем над созданием интересного контента для вас
+                </p>
+                <a href="{% url 'home' %}" class="btn btn-primary-modern">
+                    <i class="fas fa-home me-2"></i>
+                    На главную
+                </a>
+            </div>
+        </div>
+        {% endif %}
+    </div>
+</section>
+
+<!-- Newsletter Section -->
+<section class="section-padding bg-light">
+    <div class="container-modern">
+        <div class="row justify-content-center">
+            <div class="col-lg-6 text-center">
+                <div class="newsletter-cta">
+                    <div class="mb-4">
+                        <i class="fas fa-envelope text-primary" style="font-size: 3rem;"></i>
+                    </div>
+                    <h2 class="h3 mb-3">Следите за новостями</h2>
+                    <p class="text-muted mb-4">
+                        Подпишитесь на наши обновления, чтобы получать последние новости и статьи
+                    </p>
+                    <div class="d-flex justify-content-center gap-3 flex-wrap">
+                        <a href="mailto:info@smartsoltech.kr" class="btn btn-primary-modern">
+                            <i class="fas fa-envelope me-2"></i>
+                            Связаться с нами
+                        </a>
+                        <a href="{% url 'services' %}" class="btn btn-outline-primary">
+                            <i class="fas fa-cogs me-2"></i>
+                            Наши услуги
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Smooth scrolling for blog navigation
+document.addEventListener('DOMContentLoaded', function() {
+    // Video play on hover
+    const videoCards = document.querySelectorAll('video');
+    videoCards.forEach(video => {
+        video.addEventListener('mouseenter', function() {
+            this.currentTime = 0;
+            this.play().catch(e => console.log('Video autoplay prevented'));
+        });
+        
+        video.addEventListener('mouseleave', function() {
+            this.pause();
+        });
+    });
+    
+    // Enhanced card hover effects
+    const cards = document.querySelectorAll('.hover-lift');
+    cards.forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            this.style.transform = 'translateY(-10px)';
+        });
+        
+        card.addEventListener('mouseleave', function() {
+            this.style.transform = 'translateY(0)';
+        });
+    });
+});
+
+// Search functionality (if needed later)
+function searchBlogPosts(query) {
+    // Future implementation for blog search
+    console.log('Searching for:', query);
+}
+</script>
+
+<style>
+.hover-lift {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.hover-lift:hover {
+    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
+}
+
+.hover-primary:hover {
+    color: var(--primary-color) !important;
+}
+
+.card-modern article {
+    border: none;
+}
+
+.empty-state {
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+.newsletter-cta {
+    background: white;
+    padding: 2rem;
+    border-radius: 20px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+/* Blog post content styling */
+.text-muted p {
+    line-height: 1.6;
+}
+
+/* Video overlay improvements */
+video {
+    transition: transform 0.3s ease;
+}
+
+video:hover {
+    transform: scale(1.05);
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+    .hero-modern .display-4 {
+        font-size: 2rem;
+    }
+    
+    .newsletter-cta {
+        margin: 0 1rem;
+    }
+    
+    .d-flex.justify-content-center.gap-3 {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .d-flex.justify-content-center.gap-3 .btn {
+        width: 100%;
+        max-width: 250px;
+    }
+}
+
+/* Print styles */
+@media print {
+    .newsletter-cta,
+    .btn {
+        display: none;
+    }
+}
+
+/* Enhanced accessibility */
+@media (prefers-reduced-motion: reduce) {
+    .hover-lift,
+    video {
+        transition: none;
+    }
+    
+    video:hover {
+        transform: none;
+    }
+    
+    .hover-lift:hover {
+        transform: none;
+    }
+}
+
+/* Focus styles for better accessibility */
+.hover-primary:focus {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+/* Loading states */
+.card-modern img {
+    transition: opacity 0.3s ease;
+}
+
+.card-modern img:not([src]) {
+    opacity: 0;
+}
+
+/* Enhanced video controls */
+.position-absolute .btn:hover {
+    transform: scale(1.1);
+}
+
+/* Custom scrollbar for mobile */
+@media (max-width: 768px) {
+    .container-modern {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+}
+</style>
+{% endblock %}

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 %}
+<!-- Hero Section -->
+<section class="hero-modern">
+    <div class="container-modern">
+        <div class="row gy-4 align-items-center">
+            <div class="col-lg-8 mx-auto text-center">
+                <div class="blog-header">
+                    <div class="mb-3">
+                        <span class="badge bg-primary-modern">
+                            <i class="fas fa-newspaper me-1"></i>
+                            Блог
+                        </span>
+                    </div>
+                    <h1 class="display-5 fw-bold mb-4">{{ blog_post.title }}</h1>
+                    <div class="blog-meta d-flex justify-content-center align-items-center flex-wrap gap-3 text-muted">
+                        <div class="d-flex align-items-center">
+                            <i class="fas fa-calendar-alt me-2"></i>
+                            <span>{{ blog_post.published_date|date:"d.m.Y" }}</span>
+                        </div>
+                        <div class="d-flex align-items-center">
+                            <i class="fas fa-clock me-2"></i>
+                            <span>{{ blog_post.published_date|date:"H:i" }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Blog Content -->
+<section class="section-padding">
+    <div class="container-modern">
+        <div class="row justify-content-center">
+            <div class="col-lg-8">
+                <!-- Featured Image/Video -->
+                {% if blog_post.video %}
+                <div class="mb-5">
+                    <video class="w-100 rounded-4 shadow-lg" 
+                           style="max-height: 500px; object-fit: cover;" 
+                           controls
+                           {% if blog_post.video_poster %}poster="{{ blog_post.video_poster.url }}"{% endif %}>
+                        <source src="{{ blog_post.video.url }}" type="video/mp4">
+                        {% if blog_post.image %}
+                            <!-- Fallback image if video not supported -->
+                            <img src="{{ blog_post.image.url }}" class="w-100 rounded-4 shadow-lg" style="max-height: 500px; object-fit: cover;" alt="{{ blog_post.title }}">
+                        {% endif %}
+                        Ваш браузер не поддерживает видео.
+                    </video>
+                </div>
+                {% elif blog_post.image %}
+                <div class="mb-5">
+                    <img class="w-100 rounded-4 shadow-lg" 
+                         style="max-height: 500px; object-fit: cover;" 
+                         src="{{ blog_post.image.url }}" 
+                         alt="{{ blog_post.title }}" />
+                </div>
+                {% endif %}
+                
+                <!-- Blog Content -->
+                <div class="blog-content">
+                    <div class="content-wrapper">
+                        {{ blog_post.content|safe }}
+                    </div>
+                </div>
+                
+                <!-- Blog Navigation -->
+                <div class="blog-navigation mt-5 pt-4 border-top">
+                    <div class="row align-items-center">
+                        <div class="col-auto">
+                            <a href="{% url 'home' %}#blog" class="btn btn-outline-primary">
+                                <i class="fas fa-arrow-left me-2"></i>
+                                Вернуться к блогу
+                            </a>
+                        </div>
+                        <div class="col text-end">
+                            <!-- Social Share Buttons -->
+                            <div class="share-buttons">
+                                <span class="text-muted me-3">Поделиться:</span>
+                                <a href="javascript:void(0)" 
+                                   onclick="shareToSocial('telegram')" 
+                                   class="btn btn-sm btn-outline-primary me-2" 
+                                   title="Поделиться в Telegram">
+                                    <i class="fab fa-telegram"></i>
+                                </a>
+                                <a href="javascript:void(0)" 
+                                   onclick="shareToSocial('whatsapp')" 
+                                   class="btn btn-sm btn-outline-success me-2" 
+                                   title="Поделиться в WhatsApp">
+                                    <i class="fab fa-whatsapp"></i>
+                                </a>
+                                <a href="javascript:void(0)" 
+                                   onclick="shareToSocial('copy')" 
+                                   class="btn btn-sm btn-outline-secondary" 
+                                   title="Скопировать ссылку">
+                                    <i class="fas fa-copy"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Sidebar -->
+            <div class="col-lg-4">
+                <div class="blog-sidebar">
+                    <!-- Contact CTA -->
+                    <div class="card-modern mb-4">
+                        <div class="card-body text-center">
+                            <div class="mb-3">
+                                <i class="fas fa-comments text-primary" style="font-size: 2rem;"></i>
+                            </div>
+                            <h5 class="mb-3">Есть вопросы?</h5>
+                            <p class="text-muted mb-4">
+                                Свяжитесь с нами для бесплатной консультации
+                            </p>
+                            <a href="mailto:info@smartsoltech.kr" class="btn btn-primary-modern">
+                                <i class="fas fa-envelope me-2"></i>
+                                Написать нам
+                            </a>
+                        </div>
+                    </div>
+                    
+                    <!-- Services CTA -->
+                    <div class="card-modern">
+                        <div class="card-body">
+                            <h6 class="mb-3">
+                                <i class="fas fa-cogs text-primary me-2"></i>
+                                Наши услуги
+                            </h6>
+                            <div class="d-grid gap-2">
+                                <a href="{% url 'services' %}" class="btn btn-outline-primary btn-sm">
+                                    <i class="fas fa-laptop-code me-2"></i>
+                                    Веб-разработка
+                                </a>
+                                <a href="{% url 'services' %}" class="btn btn-outline-primary btn-sm">
+                                    <i class="fas fa-mobile-alt me-2"></i>
+                                    Мобильные приложения
+                                </a>
+                                <a href="{% url 'services' %}" class="btn btn-outline-primary btn-sm">
+                                    <i class="fas fa-chart-line me-2"></i>
+                                    IT консалтинг
+                                </a>
+                                <a href="{% url 'services' %}" class="btn btn-outline-primary btn-sm">
+                                    <i class="fas fa-cloud me-2"></i>
+                                    Облачные решения
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- CTA Section -->
+<section class="section-padding bg-gradient text-white">
+    <div class="container-modern text-center">
+        <div class="row justify-content-center">
+            <div class="col-lg-8">
+                <h2 class="display-6 fw-bold mb-4">
+                    Готовы обсудить ваш проект?
+                </h2>
+                <p class="lead mb-5 opacity-90">
+                    Получите бесплатную консультацию от наших экспертов
+                </p>
+                <div class="d-flex flex-wrap gap-3 justify-content-center">
+                    <a href="mailto:info@smartsoltech.kr" class="btn btn-light btn-lg text-primary">
+                        <i class="fas fa-envelope me-2"></i>
+                        Связаться с нами
+                    </a>
+                    <a href="{% url 'services' %}" class="btn btn-outline-light btn-lg">
+                        <i class="fas fa-th-large me-2"></i>
+                        Наши услуги
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+// Social sharing functionality
+function shareToSocial(platform) {
+    const url = encodeURIComponent(window.location.href);
+    const title = encodeURIComponent('{{ blog_post.title|addslashes }}');
+    const text = encodeURIComponent('{{ blog_post.title|addslashes }} - SmartSolTech');
+    
+    let shareUrl = '';
+    
+    switch(platform) {
+        case 'telegram':
+            shareUrl = `https://t.me/share/url?url=${url}&text=${text}`;
+            break;
+        case 'whatsapp':
+            shareUrl = `https://wa.me/?text=${text}%20${url}`;
+            break;
+        case 'copy':
+            navigator.clipboard.writeText(window.location.href).then(() => {
+                // Show success message
+                const btn = event.target.closest('a');
+                const originalIcon = btn.innerHTML;
+                btn.innerHTML = '<i class="fas fa-check"></i>';
+                btn.classList.add('btn-success');
+                btn.classList.remove('btn-outline-secondary');
+                
+                setTimeout(() => {
+                    btn.innerHTML = originalIcon;
+                    btn.classList.remove('btn-success');
+                    btn.classList.add('btn-outline-secondary');
+                }, 2000);
+            }).catch(err => {
+                console.error('Failed to copy: ', err);
+            });
+            return;
+    }
+    
+    if (shareUrl) {
+        window.open(shareUrl, '_blank', 'width=550,height=420');
+    }
+}
+
+// Smooth scrolling for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+            target.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+    });
+});
+</script>
+
+<style>
+.blog-header {
+    margin-bottom: 2rem;
+}
+
+.blog-meta {
+    font-size: 0.9rem;
+}
+
+.blog-content {
+    line-height: 1.8;
+    font-size: 1.1rem;
+}
+
+.blog-content h1,
+.blog-content h2,
+.blog-content h3,
+.blog-content h4,
+.blog-content h5,
+.blog-content h6 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+}
+
+.blog-content p {
+    margin-bottom: 1.5rem;
+    color: var(--text-secondary);
+}
+
+.blog-content img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin: 1.5rem 0;
+}
+
+.blog-content blockquote {
+    border-left: 4px solid var(--primary-color);
+    background: var(--bg-light);
+    padding: 1rem 1.5rem;
+    margin: 1.5rem 0;
+    border-radius: 0 8px 8px 0;
+    font-style: italic;
+}
+
+.blog-content ul,
+.blog-content ol {
+    margin-bottom: 1.5rem;
+    padding-left: 2rem;
+}
+
+.blog-content li {
+    margin-bottom: 0.5rem;
+}
+
+.blog-content pre {
+    background: var(--bg-dark);
+    color: var(--text-light);
+    padding: 1.5rem;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin: 1.5rem 0;
+}
+
+.blog-content code {
+    background: var(--bg-light);
+    color: var(--primary-color);
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-family: 'Courier New', monospace;
+}
+
+.blog-content pre code {
+    background: none;
+    color: inherit;
+    padding: 0;
+}
+
+.blog-sidebar {
+    position: sticky;
+    top: 2rem;
+}
+
+.share-buttons a {
+    transition: transform 0.2s ease;
+}
+
+.share-buttons a:hover {
+    transform: translateY(-2px);
+}
+
+.blog-navigation {
+    background: var(--bg-light);
+    padding: 1.5rem;
+    border-radius: 12px;
+}
+
+/* Content typography improvements */
+.content-wrapper {
+    font-family: 'Georgia', serif;
+}
+
+.content-wrapper h1 { font-size: 2.5rem; }
+.content-wrapper h2 { font-size: 2rem; }
+.content-wrapper h3 { font-size: 1.5rem; }
+.content-wrapper h4 { font-size: 1.25rem; }
+.content-wrapper h5 { font-size: 1.1rem; }
+.content-wrapper h6 { font-size: 1rem; }
+
+/* Responsive improvements */
+@media (max-width: 768px) {
+    .blog-header h1 {
+        font-size: 2rem;
+    }
+    
+    .blog-meta {
+        font-size: 0.8rem;
+    }
+    
+    .share-buttons {
+        margin-top: 1rem;
+    }
+    
+    .share-buttons span {
+        display: block;
+        margin-bottom: 0.5rem;
+    }
+    
+    .blog-sidebar {
+        position: relative;
+        top: auto;
+        margin-top: 2rem;
+    }
+    
+    .content-wrapper h1 { font-size: 1.8rem; }
+    .content-wrapper h2 { font-size: 1.5rem; }
+    .content-wrapper h3 { font-size: 1.3rem; }
+}
+
+/* Print styles */
+@media print {
+    .blog-navigation,
+    .blog-sidebar,
+    .share-buttons {
+        display: none;
+    }
+    
+    .blog-content {
+        font-size: 12pt;
+        line-height: 1.5;
+    }
+}
+</style>
+{% endblock %}

smartsoltech/web/templates/web/footer.html

@@ -65,11 +65,6 @@
                             О нас
                         </a>
                     </li>
-                    <li class="mb-2">
-                        <a href="#" class="text-light opacity-75 text-decoration-none hover-primary">
-                            Портфолио
-                        </a>
-                    </li>
                     <li class="mb-2">
                         <a href="#" class="text-light opacity-75 text-decoration-none hover-primary">
                             Команда

smartsoltech/web/templates/web/footer_modern.html

@@ -65,11 +65,6 @@
                             О нас
                         </a>
                     </li>
-                    <li class="mb-2">
-                        <a href="#" class="text-light opacity-75 text-decoration-none hover-primary">
-                            Портфолио
-                        </a>
-                    </li>
                     <li class="mb-2">
                         <a href="#" class="text-light opacity-75 text-decoration-none hover-primary">
                             Команда

smartsoltech/web/templates/web/gallery_preview.html

@@ -0,0 +1,371 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Предпросмотр современной галереи</title>
+    
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    
+    <!-- Lightbox2 CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
+    
+    <!-- Наши стили -->
+    <link href="../../static/assets/css/compact-gallery.css" rel="stylesheet">
+    
+    <style>
+        body {
+            background: #f8fafc;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            padding: 2rem 0;
+        }
+        
+        .container {
+            max-width: 1200px;
+        }
+        
+        .preview-header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+        
+        .preview-header h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: #1e293b;
+            margin-bottom: 1rem;
+        }
+        
+        .preview-header p {
+            font-size: 1.2rem;
+            color: #64748b;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="preview-header">
+            <h1>Современная медиа-галерея</h1>
+            <p>Интерактивная галерея с навигацией, миниатюрами и полноэкранным просмотром</p>
+        </div>
+        
+        <!-- Современная медиа-галерея -->
+        <div class="modern-media-gallery">
+            <!-- Основное медиа -->
+            <div class="main-media-container">
+                <div class="main-media-wrapper">
+                    <!-- Медиа элементы -->
+                    <div class="main-media-item active" data-index="0">
+                        <img src="https://via.placeholder.com/800x500/4f46e5/ffffff?text=Главное+изображение+1" 
+                             alt="Изображение 1" class="main-media-img">
+                        <div class="media-overlay">
+                            <div class="media-info">
+                                <div class="media-title">Название изображения</div>
+                                <div class="media-meta">Фото • 1920x1080 • 2.3 MB</div>
+                            </div>
+                            <button class="media-action-btn" onclick="openLightbox(0)">
+                                <i class="fas fa-expand"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="main-media-item" data-index="1">
+                        <img src="https://via.placeholder.com/800x500/7c3aed/ffffff?text=Главное+изображение+2" 
+                             alt="Изображение 2" class="main-media-img">
+                        <div class="media-overlay">
+                            <div class="media-info">
+                                <div class="media-title">Второе изображение</div>
+                                <div class="media-meta">Фото • 1920x1080 • 1.8 MB</div>
+                            </div>
+                            <button class="media-action-btn" onclick="openLightbox(1)">
+                                <i class="fas fa-expand"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="main-media-item" data-index="2">
+                        <video class="main-media-video" controls>
+                            <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
+                        </video>
+                        <div class="media-overlay">
+                            <div class="media-info">
+                                <div class="media-title">Демо видео</div>
+                                <div class="media-meta">Видео • MP4 • 1:32</div>
+                            </div>
+                            <button class="media-action-btn" onclick="toggleVideo(2)">
+                                <i class="fas fa-play"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="main-media-item" data-index="3">
+                        <div class="embed-container">
+                            <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
+                                    class="main-media-embed" 
+                                    allowfullscreen></iframe>
+                        </div>
+                        <div class="media-overlay">
+                            <div class="media-info">
+                                <div class="media-title">YouTube видео</div>
+                                <div class="media-meta">Встраивание • YouTube</div>
+                            </div>
+                            <button class="media-action-btn" onclick="openFullscreen(3)">
+                                <i class="fas fa-external-link-alt"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="main-media-item" data-index="4">
+                        <img src="https://via.placeholder.com/800x500/06b6d4/ffffff?text=Главное+изображение+3" 
+                             alt="Изображение 3" class="main-media-img">
+                        <div class="media-overlay">
+                            <div class="media-info">
+                                <div class="media-title">Третье изображение</div>
+                                <div class="media-meta">Фото • 1920x1080 • 3.1 MB</div>
+                            </div>
+                            <button class="media-action-btn" onclick="openLightbox(4)">
+                                <i class="fas fa-expand"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <!-- Навигационные кнопки -->
+                    <button class="media-nav-btn prev-btn" onclick="gallery.previousMedia()">
+                        <i class="fas fa-chevron-left"></i>
+                    </button>
+                    
+                    <button class="media-nav-btn next-btn" onclick="gallery.nextMedia()">
+                        <i class="fas fa-chevron-right"></i>
+                    </button>
+                </div>
+            </div>
+            
+            <!-- Индикатор прогресса -->
+            <div class="gallery-progress">
+                <div class="progress-bar" style="width: 20%"></div>
+            </div>
+            
+            <!-- Миниатюры -->
+            <div class="thumbnails-container">
+                <div class="thumbnails-wrapper">
+                    <div class="thumbnail-item active" data-index="0" onclick="gallery.switchToMedia(0)">
+                        <img src="https://via.placeholder.com/80x60/4f46e5/ffffff?text=1" alt="Thumb 1" class="thumbnail-img">
+                        <div class="thumbnail-overlay">
+                            <span class="thumbnail-number">1</span>
+                        </div>
+                    </div>
+                    
+                    <div class="thumbnail-item" data-index="1" onclick="gallery.switchToMedia(1)">
+                        <img src="https://via.placeholder.com/80x60/7c3aed/ffffff?text=2" alt="Thumb 2" class="thumbnail-img">
+                        <div class="thumbnail-overlay">
+                            <span class="thumbnail-number">2</span>
+                        </div>
+                    </div>
+                    
+                    <div class="thumbnail-item" data-index="2" onclick="gallery.switchToMedia(2)">
+                        <div class="video-thumbnail-placeholder">
+                            <i class="fas fa-play"></i>
+                        </div>
+                        <div class="media-type-badge video">
+                            <i class="fas fa-play"></i>
+                        </div>
+                        <div class="thumbnail-overlay">
+                            <span class="thumbnail-number">3</span>
+                        </div>
+                    </div>
+                    
+                    <div class="thumbnail-item" data-index="3" onclick="gallery.switchToMedia(3)">
+                        <div class="embed-thumbnail-placeholder">
+                            <i class="fab fa-youtube"></i>
+                        </div>
+                        <div class="media-type-badge embed">
+                            <i class="fas fa-link"></i>
+                        </div>
+                        <div class="thumbnail-overlay">
+                            <span class="thumbnail-number">4</span>
+                        </div>
+                    </div>
+                    
+                    <div class="thumbnail-item" data-index="4" onclick="gallery.switchToMedia(4)">
+                        <img src="https://via.placeholder.com/80x60/06b6d4/ffffff?text=3" alt="Thumb 3" class="thumbnail-img">
+                        <div class="thumbnail-overlay">
+                            <span class="thumbnail-number">5</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- jQuery -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Lightbox2 JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
+
+    <script>
+        // Класс для управления современной галереей
+        class ModernMediaGallery {
+            constructor(container) {
+                this.container = container;
+                this.mediaItems = container.querySelectorAll('.main-media-item');
+                this.thumbnails = container.querySelectorAll('.thumbnail-item');
+                this.progressBar = container.querySelector('.progress-bar');
+                this.currentIndex = 0;
+                
+                this.initGallery();
+                this.bindEvents();
+            }
+            
+            initGallery() {
+                this.updateProgress();
+                this.preloadMedia();
+            }
+            
+            bindEvents() {
+                // Клавиатурные события
+                document.addEventListener('keydown', (e) => {
+                    if (e.key === 'ArrowLeft') {
+                        e.preventDefault();
+                        this.previousMedia();
+                    } else if (e.key === 'ArrowRight') {
+                        e.preventDefault();
+                        this.nextMedia();
+                    }
+                });
+                
+                // Touch события для свайпа
+                let startX = 0;
+                let startY = 0;
+                
+                this.container.addEventListener('touchstart', (e) => {
+                    startX = e.touches[0].clientX;
+                    startY = e.touches[0].clientY;
+                }, { passive: true });
+                
+                this.container.addEventListener('touchend', (e) => {
+                    const endX = e.changedTouches[0].clientX;
+                    const endY = e.changedTouches[0].clientY;
+                    
+                    const deltaX = endX - startX;
+                    const deltaY = endY - startY;
+                    
+                    // Проверяем, что это горизонтальный свайп
+                    if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
+                        if (deltaX > 0) {
+                            this.previousMedia();
+                        } else {
+                            this.nextMedia();
+                        }
+                    }
+                }, { passive: true });
+            }
+            
+            switchToMedia(index) {
+                if (index === this.currentIndex) return;
+                
+                // Останавливаем текущее видео
+                this.stopCurrentVideo();
+                
+                // Обновляем активные элементы
+                this.mediaItems[this.currentIndex].classList.remove('active');
+                this.thumbnails[this.currentIndex].classList.remove('active');
+                
+                this.currentIndex = index;
+                
+                this.mediaItems[this.currentIndex].classList.add('active');
+                this.thumbnails[this.currentIndex].classList.add('active');
+                
+                this.updateProgress();
+                this.scrollToActiveThumbnail();
+            }
+            
+            nextMedia() {
+                const nextIndex = (this.currentIndex + 1) % this.mediaItems.length;
+                this.switchToMedia(nextIndex);
+            }
+            
+            previousMedia() {
+                const prevIndex = (this.currentIndex - 1 + this.mediaItems.length) % this.mediaItems.length;
+                this.switchToMedia(prevIndex);
+            }
+            
+            updateProgress() {
+                const progress = ((this.currentIndex + 1) / this.mediaItems.length) * 100;
+                this.progressBar.style.width = `${progress}%`;
+            }
+            
+            scrollToActiveThumbnail() {
+                const activeThumbnail = this.thumbnails[this.currentIndex];
+                const container = activeThumbnail.parentElement;
+                
+                const thumbnailOffsetLeft = activeThumbnail.offsetLeft;
+                const thumbnailWidth = activeThumbnail.offsetWidth;
+                const containerWidth = container.offsetWidth;
+                
+                const scrollLeft = thumbnailOffsetLeft - (containerWidth / 2) + (thumbnailWidth / 2);
+                container.scrollTo({
+                    left: scrollLeft,
+                    behavior: 'smooth'
+                });
+            }
+            
+            stopCurrentVideo() {
+                const currentItem = this.mediaItems[this.currentIndex];
+                const video = currentItem.querySelector('video');
+                if (video) {
+                    video.pause();
+                }
+            }
+            
+            preloadMedia() {
+                this.mediaItems.forEach((item, index) => {
+                    if (index <= 2) { // Предзагружаем первые 3 элемента
+                        const img = item.querySelector('img');
+                        if (img && !img.complete) {
+                            // Изображение уже загружается
+                        }
+                    }
+                });
+            }
+        }
+        
+        // Инициализация галереи
+        let gallery;
+        
+        document.addEventListener('DOMContentLoaded', function() {
+            const galleryContainer = document.querySelector('.modern-media-gallery');
+            if (galleryContainer) {
+                gallery = new ModernMediaGallery(galleryContainer);
+            }
+        });
+        
+        // Глобальные функции для интерактивности
+        function openLightbox(index) {
+            // Функция для открытия изображения в лайтбоксе
+            console.log('Открытие лайтбокса для изображения', index);
+        }
+        
+        function toggleVideo(index) {
+            const video = gallery.mediaItems[index].querySelector('video');
+            if (video.paused) {
+                video.play();
+            } else {
+                video.pause();
+            }
+        }
+        
+        function openFullscreen(index) {
+            // Функция для открытия встраиваемого контента в полном экране
+            console.log('Открытие в полном экране', index);
+        }
+    </script>
+</body>
+</html>

smartsoltech/web/templates/web/home_modern.html

@@ -392,7 +392,7 @@
                     {% endif %}
                     <div class="p-4">
                         <h5 class="mb-3">{{ project.name }}</h5>
-                        <p class="text-muted mb-3">{{ project.description|truncatewords:15 }}</p>
+                        <p class="text-muted mb-3">{{ project.short_description|default:project.description|striptags|truncatewords:15 }}</p>
                         <a href="{% url 'project_detail' project.pk %}" class="text-primary fw-semibold">
                             Подробнее <i class="fas fa-arrow-right ms-1"></i>
                         </a>
@@ -404,7 +404,7 @@
         {% endif %}
         
         <div class="text-center mt-5">
-            <a href="{% url 'portfolio' %}" class="btn btn-primary-modern btn-lg">
+            <a href="{% url 'projects_list' %}" class="btn btn-primary-modern btn-lg">
                 <i class="fas fa-th-large me-2"></i>
                 Смотреть все проекты
             </a>
@@ -455,105 +455,6 @@
         </div>
     </div>
 </section>
-
-<!-- News Section -->
-<section class="section-padding bg-light" id="news">
-    <div class="container-modern">
-        <div class="text-center mb-5">
-
-            <h2 class="display-6 fw-bold mb-3">
-                Последние <span class="text-gradient">новости</span>
-            </h2>
-        </div>
-        
-        <div class="row g-4">
-            <div class="col-lg-12">
-                <div class="news-card bg-white rounded-4 p-4 shadow">
-                    <div class="d-flex align-items-center mb-3">
-                        <span class="badge bg-primary rounded-pill px-3 py-1 me-3">24.11.2025</span>
-                        <h5 class="mb-0">Новый сайт</h5>
-                    </div>
-                    <p class="text-muted mb-3">
-                        Поздравляем всех наших клиентов с этой знаменательной датой! 
-                        Мы переписали свой сайт! теперь у нас современный дизайн и улучшенная функциональность...
-                    </p>
-                    <a href="{% url 'news' %}" class="text-primary fw-semibold">
-                        Узнать больше <i class="fas fa-arrow-right ms-1"></i>
-                    </a>
-                </div>
-            </div>
-        </div>
-        
-        <div class="text-center mt-4">
-            <a href="{% url 'news' %}" class="btn btn-primary-modern btn-lg">
-                <i class="fas fa-newspaper me-2"></i>
-                Все новости
-            </a>
-        </div>
-    </div>
-</section>
-
-<!-- Career Section -->
-<section class="section-padding" id="career">
-    <div class="container-modern">
-        <div class="text-center mb-5">
-            <h2 class="display-6 fw-bold mb-3">
-                Присоединяйтесь к нашей <span class="text-gradient">команде</span>
-            </h2>
-            <p class="lead text-muted max-width-600 mx-auto">
-                Мы ищем талантливых специалистов, которые разделяют нашу страсть к технологиям и инновациям.
-            </p>
-        </div>
-        
-        <div class="row g-4 mb-5">
-            <div class="col-lg-4">
-                <div class="career-feature text-center p-4">
-                    <div class="career-icon bg-primary rounded-3 p-3 mx-auto mb-3 text-white" style="width: fit-content;">
-                        <i class="fas fa-chart-line fa-2x"></i>
-                    </div>
-                    <h6 class="mb-2">Профессиональный рост</h6>
-                    <p class="text-muted small mb-0">Возможности для развития и обучения</p>
-                </div>
-            </div>
-            
-            <div class="col-lg-4">
-                <div class="career-feature text-center p-4">
-                    <div class="career-icon bg-success rounded-3 p-3 mx-auto mb-3 text-white" style="width: fit-content;">
-                        <i class="fas fa-users fa-2x"></i>
-                    </div>
-                    <h6 class="mb-2">Команда профессионалов</h6>
-                    <p class="text-muted small mb-0">Работайте с лучшими специалистами</p>
-                </div>
-            </div>
-            
-            <div class="col-lg-4">
-                <div class="career-feature text-center p-4">
-                    <div class="career-icon bg-warning rounded-3 p-3 mx-auto mb-3 text-white" style="width: fit-content;">
-                        <i class="fas fa-clock fa-2x"></i>
-                    </div>
-                    <h6 class="mb-2">Гибкий график</h6>
-                    <p class="text-muted small mb-0">Удаленная работа и гибкое расписание</p>
-                </div>
-            </div>
-        </div>
-        
-        <div class="text-center">
-            <div class="career-stats bg-gradient rounded-4 p-4 text-white mb-4" style="max-width: 300px; margin: 0 auto;">
-                <h3 class="display-4 fw-bold mb-2">0</h3>
-                <h6 class="mb-2">Открыто вакансий</h6>
-                <p class="small mb-0 opacity-75">Найдите свою идеальную позицию</p>
-            </div>
-            
-            <a href="{% url 'career' %}" class="btn btn-primary-modern btn-lg me-3">
-                <i class="fas fa-briefcase me-2"></i>
-                Смотреть вакансии
-            </a>
-            <a href="{% url 'career' %}" class="btn btn-outline-primary btn-lg">
-                Посмотреть все
-            </a>
-        </div>
-    </div>
-</section>
 {% endblock %}
 
 {% block extra_styles %}
@@ -901,60 +802,64 @@ document.addEventListener('DOMContentLoaded', function() {
                 // Показываем текст активного индикатора
                 const title = indicator.querySelector('.pill-indicator-title');
                 if (title) {
-                    indicator.style.color = '#333';
+                    // Убираем inline стили, чтобы CSS правила работали корректно
-                    title.style.opacity = '1';
+                    indicator.style.color = '';
-                    title.style.transform = 'scale(1)';
+                    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';
+                    indicator.style.color = '';
-                    title.style.opacity = '0';
+                    title.style.opacity = '';
-                    title.style.transform = 'scale(0.8)';
+                    title.style.transform = '';
+                    // Убираем любые hover эффекты
+                    indicator.style.transform = '';
+                    indicator.style.background = '';
                 }
             }
         });
         
-        // Обновляем ширину внешней пилюли
+        // Динамический расчет ширины внешнего контейнера
         setTimeout(() => {
-            if (outerPill) {
+            if (outerPill && indicators.length > 0) {
-                const activeIndicator = indicators[index];
+                let totalWidth = 0;
                 
-                if (activeIndicator) {
+                // Проходим по всем маркерам и суммируем их ширины
-                    // Даем время для применения стилей активного элемента
+                indicators.forEach((indicator, i) => {
-                    setTimeout(() => {
+                    if (i === index && indicator.classList.contains('active')) {
-                        // Вычисляем ширину активной пилюли на основе текста
+                        // Активный маркер - измеряем его реальную ширину
-                        const titleElement = activeIndicator.querySelector('.pill-indicator-title');
+                        const rect = indicator.getBoundingClientRect();
-                        let activePillWidth = 80; // минимальная ширина активного элемента
+                        totalWidth += rect.width || 60; // fallback к минимальной ширине
+                    } else {
+                        // Неактивный маркер - фиксированная ширина 36px
+                        totalWidth += 36;
+                    }
                     
-                        if (titleElement && titleElement.textContent) {
+                    // Добавляем gap между маркерами (16px), кроме последнего
-                            // Формула: длина текста * 8px + padding (32px) + min-width
+                    if (i < indicators.length - 1) {
-                            const textLength = titleElement.textContent.length;
+                        totalWidth += 16;
-                            activePillWidth = Math.max(textLength * 8 + 32, 80);
+                    }
-                        }
+                });
                 
-                        // Количество неактивных маркеров
+                // Добавляем padding контейнера: 10px слева + 10px справа
-                        const inactiveCount = indicators.length - 1;
+                totalWidth += 20;
                 
-                        // Ширина неактивных элементов: 32px каждый + margin 4px между ними
+                // Применяем новую ширину
-                        const inactiveWidth = inactiveCount * 32 + (inactiveCount > 0 ? inactiveCount * 4 : 0);
+                outerPill.style.width = totalWidth + 'px';
                 
-                        // Margin активного элемента: 16px (8px с каждой стороны)
+                console.log('Pill state update:');
-                        const activeMargin = inactiveCount > 0 ? 16 : 0;
+                console.log('- Active index:', index);
-                        
+                console.log('- Total width:', totalWidth + 'px');
-                        // Общая ширина: активный + неактивные + margin + padding контейнера
+                console.log('- Active element width:', 
-                        const totalWidth = activePillWidth + inactiveWidth + activeMargin + 32;
+                    indicators[index] ? indicators[index].getBoundingClientRect().width + 'px' : 'N/A');
-                        
+                console.log('- Inactive elements count:', indicators.length - 1);
-                        console.log('Active pill width:', activePillWidth, 'Inactive width:', inactiveWidth, 'Total:', totalWidth);
+                console.log('- Gaps total:', (indicators.length - 1) * 16 + 'px');
-                        
+                console.log('- Padding total: 20px');
-                        outerPill.style.width = totalWidth + 'px';
-                        outerPill.style.transition = 'all 0.4s cubic-bezier(0.23, 1, 0.32, 1)';
-                    }, 50);
-                }
             }
-        }, 10);
+        }, 50);
         
         currentActiveIndex = index;
     }
@@ -981,19 +886,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 +916,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];
+            let totalWidth = 0;
-                if (activeIndicator && activeIndicator.classList.contains('active')) {
+            
-                    updatePillState(currentActiveIndex);
+            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 => {

smartsoltech/web/templates/web/navbar_modern.html

@@ -25,6 +25,12 @@
                         <i class="fas fa-cog me-2"></i>Услуги
                     </a>
                 </li>
+                <li class="nav-item">
+                    <a class="nav-link-modern {% if 'project' in request.resolver_match.url_name %}active{% endif %}" 
+                       href="{% url 'projects_list' %}">
+                        <i class="fas fa-briefcase me-2"></i>Проекты
+                    </a>
+                </li>
                 <li class="nav-item">
                     <a class="nav-link-modern {% if request.resolver_match.url_name == 'about' %}active{% endif %}" 
                        href="{% url 'about' %}">
@@ -40,7 +46,7 @@
                 <li class="nav-item">
                     <a class="nav-link-modern {% if request.resolver_match.url_name == 'career' %}active{% endif %}" 
                        href="{% url 'career' %}">
-                        <i class="fas fa-briefcase me-2"></i>Карьера
+                        <i class="fas fa-user-tie me-2"></i>Карьера
                     </a>
                 </li>
                 <li class="nav-item">

smartsoltech/web/templates/web/portfolio_detail.html

@@ -0,0 +1,305 @@
+{% extends 'web/base_modern.html' %}
+{% load static %}
+
+{% block title %}{{ portfolio.title }} - Портфолио - SmartSolTech{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
+<style>
+.portfolio-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 100px 0 60px;
+    color: white;
+}
+
+.portfolio-gallery {
+    margin: 3rem 0;
+}
+
+.swiper {
+    width: 100%;
+    height: 500px;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+}
+
+.swiper-slide img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.portfolio-info {
+    background: white;
+    border-radius: 20px;
+    padding: 2rem;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+    margin-bottom: 2rem;
+}
+
+.info-item {
+    padding: 1rem 0;
+    border-bottom: 1px solid #eee;
+}
+
+.info-item:last-child {
+    border-bottom: none;
+}
+
+.info-label {
+    font-weight: 600;
+    color: #667eea;
+    margin-bottom: 0.5rem;
+}
+
+.portfolio-content {
+    background: white;
+    border-radius: 20px;
+    padding: 2rem;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+    line-height: 1.8;
+}
+
+.portfolio-content img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px;
+    margin: 1rem 0;
+}
+
+.tech-badge {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 20px;
+    margin: 0.25rem;
+    font-size: 0.9rem;
+}
+
+.similar-project {
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+    transition: transform 0.3s ease;
+    background: white;
+    margin-bottom: 1.5rem;
+}
+
+.similar-project:hover {
+    transform: translateY(-5px);
+}
+
+.similar-thumb {
+    height: 200px;
+    overflow: hidden;
+}
+
+.similar-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.similar-content {
+    padding: 1.5rem;
+}
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="portfolio-header">
+    <div class="container">
+        <div class="row align-items-center">
+            <div class="col-lg-8">
+                <h1 class="display-4 fw-bold mb-3">{{ portfolio.title }}</h1>
+                <p class="lead mb-3">{{ portfolio.short_description }}</p>
+                <div class="d-flex gap-3 flex-wrap">
+                    {% for category in portfolio.categories.all %}
+                    <span class="badge bg-light text-dark px-3 py-2">
+                        <i class="{{ category.icon }} me-2"></i>{{ category.name }}
+                    </span>
+                    {% endfor %}
+                </div>
+            </div>
+            <div class="col-lg-4 text-lg-end mt-4 mt-lg-0">
+                <div class="d-flex justify-content-lg-end gap-3">
+                    {% if portfolio.project_url %}
+                    <a href="{{ portfolio.project_url }}" target="_blank" class="btn btn-light btn-lg">
+                        <i class="fas fa-external-link-alt me-2"></i>Посетить сайт
+                    </a>
+                    {% endif %}
+                    {% if portfolio.github_url %}
+                    <a href="{{ portfolio.github_url }}" target="_blank" class="btn btn-outline-light btn-lg">
+                        <i class="fab fa-github me-2"></i>GitHub
+                    </a>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="container py-5">
+    <div class="row">
+        <div class="col-lg-8">
+            {% if media_items %}
+            <div class="portfolio-gallery">
+                <div class="swiper portfolioSwiper">
+                    <div class="swiper-wrapper">
+                        {% for media in media_items %}
+                        {% if media.media_type == 'image' %}
+                        <div class="swiper-slide">
+                            <a href="{{ media.image.url }}" data-lightbox="portfolio-{{ portfolio.id }}" data-title="{{ media.caption }}">
+                                <img src="{{ media.image.url }}" alt="{{ media.alt_text }}">
+                            </a>
+                        </div>
+                        {% elif media.media_type == 'video' %}
+                        <div class="swiper-slide">
+                            <video controls style="width:100%; height:100%; object-fit:cover;">
+                                <source src="{{ media.video.url }}" type="video/mp4">
+                            </video>
+                        </div>
+                        {% elif media.media_type == 'embed_video' %}
+                        <div class="swiper-slide">
+                            <div style="width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
+                                {{ media.embed_code|safe }}
+                            </div>
+                        </div>
+                        {% endif %}
+                        {% endfor %}
+                    </div>
+                    <div class="swiper-button-next"></div>
+                    <div class="swiper-button-prev"></div>
+                    <div class="swiper-pagination"></div>
+                </div>
+            </div>
+            {% endif %}
+
+            <div class="portfolio-content">
+                <h2 class="mb-4">Описание проекта</h2>
+                {{ portfolio.description|safe }}
+            </div>
+        </div>
+
+        <div class="col-lg-4">
+            <div class="portfolio-info">
+                <h3 class="mb-4">Информация о проекте</h3>
+                
+                {% if portfolio.client_name %}
+                <div class="info-item">
+                    <div class="info-label">
+                        <i class="fas fa-user me-2"></i>Клиент
+                    </div>
+                    <div>{{ portfolio.client_name }}</div>
+                </div>
+                {% endif %}
+
+                {% if portfolio.completion_date %}
+                <div class="info-item">
+                    <div class="info-label">
+                        <i class="fas fa-calendar me-2"></i>Дата завершения
+                    </div>
+                    <div>{{ portfolio.completion_date|date:"d.m.Y" }}</div>
+                </div>
+                {% endif %}
+
+                {% if portfolio.duration %}
+                <div class="info-item">
+                    <div class="info-label">
+                        <i class="fas fa-clock me-2"></i>Длительность
+                    </div>
+                    <div>{{ portfolio.duration }}</div>
+                </div>
+                {% endif %}
+
+                {% if portfolio.team_size %}
+                <div class="info-item">
+                    <div class="info-label">
+                        <i class="fas fa-users me-2"></i>Размер команды
+                    </div>
+                    <div>{{ portfolio.team_size }} человек</div>
+                </div>
+                {% endif %}
+
+                <div class="info-item">
+                    <div class="info-label">
+                        <i class="fas fa-chart-line me-2"></i>Статистика
+                    </div>
+                    <div>
+                        <i class="fas fa-eye me-1"></i> {{ portfolio.views_count }} просмотров<br>
+                        <i class="fas fa-heart me-1"></i> {{ portfolio.likes_count }} лайков
+                    </div>
+                </div>
+            </div>
+
+            {% if portfolio.technologies %}
+            <div class="portfolio-info">
+                <h3 class="mb-3">Технологии</h3>
+                <div>
+                    {% for tech in portfolio.technologies.split %}
+                    <span class="tech-badge">{{ tech }}</span>
+                    {% endfor %}
+                </div>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+
+    {% if similar_projects %}
+    <div class="mt-5">
+        <h2 class="mb-4">Похожие проекты</h2>
+        <div class="row">
+            {% for item in similar_projects %}
+            <div class="col-md-4">
+                <div class="similar-project">
+                    <div class="similar-thumb">
+                        {% if item.thumbnail %}
+                        <img src="{{ item.thumbnail.url }}" alt="{{ item.title }}">
+                        {% else %}
+                        <img src="{% static 'img/default-portfolio.jpg' %}" alt="{{ item.title }}">
+                        {% endif %}
+                    </div>
+                    <div class="similar-content">
+                        <h4 class="h6 mb-2">{{ item.title }}</h4>
+                        <p class="text-muted small mb-3">{{ item.short_description|truncatewords:10 }}</p>
+                        <a href="{% url 'portfolio_detail' item.slug %}" class="btn btn-sm btn-primary">
+                            Подробнее
+                        </a>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+    {% endif %}
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
+<script>
+const swiper = new Swiper('.portfolioSwiper', {
+    loop: true,
+    navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+    },
+    pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+    },
+    autoplay: {
+        delay: 5000,
+        disableOnInteraction: false,
+    },
+    effect: 'fade',
+    fadeEffect: {
+        crossFade: true
+    }
+});
+</script>
+{% endblock %}

smartsoltech/web/templates/web/portfolio_list.html

@@ -0,0 +1,262 @@
+{% extends 'web/base_modern.html' %}
+{% load static %}
+
+{% block title %}Портфолио - SmartSolTech{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
+<style>
+.portfolio-hero {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 100px 0 60px;
+    color: white;
+}
+
+.category-filter {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+    margin: 2rem 0;
+    justify-content: center;
+    padding: 0 1rem;
+}
+
+.category-pill {
+    padding: 0.7rem 1.4rem;
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    color: #495057;
+    border: 2px solid transparent;
+    border-radius: 50px;
+    transition: all 0.3s ease;
+    font-weight: 500;
+    text-decoration: none;
+    font-size: 0.9rem;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    position: relative;
+    overflow: hidden;
+}
+
+.category-pill:hover {
+    background: rgba(102, 126, 234, 0.1);
+    color: #667eea;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
+    border-color: rgba(102, 126, 234, 0.3);
+    text-decoration: none;
+}
+
+.category-pill.active {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
+    border-color: transparent;
+}
+
+.portfolio-card {
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
+    background: white;
+    margin-bottom: 2rem;
+}
+
+.portfolio-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
+}
+
+.portfolio-thumb {
+    height: 250px;
+    overflow: hidden;
+    position: relative;
+}
+
+.portfolio-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s ease;
+}
+
+.portfolio-card:hover .portfolio-thumb img {
+    transform: scale(1.1);
+}
+
+.portfolio-content {
+    padding: 2rem;
+}
+
+.portfolio-categories {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+}
+
+.portfolio-badge {
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.portfolio-stats {
+    display: flex;
+    gap: 1.5rem;
+    color: #6c757d;
+    font-size: 0.9rem;
+}
+
+.featured-badge {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    font-weight: 600;
+    z-index: 10;
+}
+
+/* Адаптивность для мобильных устройств */
+@media (max-width: 768px) {
+    .portfolio-hero {
+        padding: 80px 0 40px;
+    }
+    
+    .portfolio-hero h1 {
+        font-size: 2rem;
+    }
+    
+    .portfolio-hero .lead {
+        font-size: 1rem;
+    }
+    
+    .category-filter {
+        gap: 0.5rem;
+        padding: 0 0.5rem;
+    }
+    
+    .category-pill {
+        font-size: 0.85rem;
+        padding: 0.6rem 1rem;
+    }
+    
+    .portfolio-card {
+        margin-bottom: 1.5rem;
+    }
+    
+    .featured-badge {
+        font-size: 0.8rem;
+        padding: 0.4rem 0.8rem;
+    }
+}
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="portfolio-hero">
+    <div class="container text-center">
+        <h1 class="display-4 fw-bold mb-3">Наше Портфолио</h1>
+        <p class="lead">Проекты, которыми мы гордимся</p>
+    </div>
+</div>
+
+<div class="container py-5">
+    <div class="category-filter">
+        <a href="{% url 'portfolio_list' %}" class="category-pill {% if not request.GET.category %}active{% endif %}">
+            <i class="fas fa-th me-2"></i>Все проекты
+        </a>
+        {% for category in categories %}
+        <a href="?category={{ category.slug }}" class="category-pill {% if request.GET.category == category.slug %}active{% endif %}">
+            <i class="{{ category.icon }} me-2"></i>{{ category.name }}
+        </a>
+        {% endfor %}
+    </div>
+
+    {% if featured %}
+    <div class="mb-5">
+        <h2 class="mb-4"><i class="fas fa-star text-warning me-2"></i>Избранные проекты</h2>
+        <div class="row">
+            {% for item in featured %}
+            <div class="col-md-6 col-lg-4">
+                <div class="portfolio-card">
+                    <div class="portfolio-thumb">
+                        <span class="featured-badge"><i class="fas fa-star me-1"></i>Избранное</span>
+                        {% if item.thumbnail %}
+                        <img src="{{ item.thumbnail.url }}" alt="{{ item.title }}">
+                        {% else %}
+                        <img src="{% static 'img/default-portfolio.jpg' %}" alt="{{ item.title }}">
+                        {% endif %}
+                    </div>
+                    <div class="portfolio-content">
+                        <div class="portfolio-categories">
+                            {% for cat in item.categories.all %}
+                            <span class="portfolio-badge">{{ cat.name }}</span>
+                            {% endfor %}
+                        </div>
+                        <h3 class="h5 mb-2">{{ item.title }}</h3>
+                        <p class="text-muted mb-3">{{ item.short_description|truncatewords:20 }}</p>
+                        <div class="portfolio-stats mb-3">
+                            <span><i class="fas fa-eye me-1"></i>{{ item.views_count }}</span>
+                            <span><i class="fas fa-heart me-1"></i>{{ item.likes_count }}</span>
+                            <span><i class="fas fa-calendar me-1"></i>{{ item.completion_date|date:"Y" }}</span>
+                        </div>
+                        <a href="{% url 'portfolio_detail' item.slug %}" class="btn btn-primary">
+                            Подробнее <i class="fas fa-arrow-right ms-2"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+    {% endif %}
+
+    <h2 class="mb-4">Все проекты</h2>
+    <div class="row">
+        {% for item in portfolios %}
+        <div class="col-md-6 col-lg-4">
+            <div class="portfolio-card">
+                <div class="portfolio-thumb">
+                    {% if item.thumbnail %}
+                    <img src="{{ item.thumbnail.url }}" alt="{{ item.title }}">
+                    {% else %}
+                    <img src="{% static 'img/default-portfolio.jpg' %}" alt="{{ item.title }}">
+                    {% endif %}
+                </div>
+                <div class="portfolio-content">
+                    <div class="portfolio-categories">
+                        {% for cat in item.categories.all %}
+                        <span class="portfolio-badge">{{ cat.name }}</span>
+                        {% endfor %}
+                    </div>
+                    <h3 class="h5 mb-2">{{ item.title }}</h3>
+                    <p class="text-muted mb-3">{{ item.short_description|truncatewords:20 }}</p>
+                    <div class="portfolio-stats mb-3">
+                        <span><i class="fas fa-eye me-1"></i>{{ item.views_count }}</span>
+                        <span><i class="fas fa-heart me-1"></i>{{ item.likes_count }}</span>
+                        <span><i class="fas fa-calendar me-1"></i>{{ item.completion_date|date:"Y" }}</span>
+                    </div>
+                    <a href="{% url 'portfolio_detail' item.slug %}" class="btn btn-primary">
+                        Подробнее <i class="fas fa-arrow-right ms-2"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+        {% empty %}
+        <div class="col-12 text-center py-5">
+            <i class="fas fa-folder-open fa-4x text-muted mb-3"></i>
+            <h3 class="text-muted">Проектов пока нет</h3>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+{% endblock %}

smartsoltech/web/templates/web/projects_list.html

@@ -0,0 +1,753 @@
+{% extends 'web/base_modern.html' %}
+{% load static %}
+
+{% block title %}Наши проекты - SmartSolTech{% endblock %}
+
+{% block extra_css %}
+<style>
+/* Projects Page v2.0 - Force Update */
+.projects-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 100px 0 60px;
+    color: white;
+    margin-bottom: 3rem;
+}
+
+/* Category Filter - Овальные пилюли */
+.category-filter {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.75rem;
+    margin-bottom: 3rem;
+    padding: 0 1rem;
+}
+
+.category-pill {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.75rem 1.25rem;
+    background: white;
+    border: 2px solid #e2e8f0;
+    border-radius: 50px; /* Овальная форма */
+    color: #64748b;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 0.9rem;
+    white-space: nowrap;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.category-pill:hover {
+    color: #667eea;
+    border-color: #667eea;
+    background: rgba(102, 126, 234, 0.05);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+    text-decoration: none;
+}
+
+.category-pill.active {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-color: transparent;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+    transform: translateY(-1px);
+}
+
+.category-pill.active:hover {
+    background: linear-gradient(135deg, #5a6fd8 0%, #6b4190 100%);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+    color: white;
+}
+
+.category-pill i {
+    font-size: 0.85rem;
+    margin-right: 0.5rem;
+}
+
+.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 video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+/* Заглушка для проектов без изображения */
+.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'; /* FontAwesome folder icon */
+    font-family: 'Font Awesome 5 Free';
+    font-weight: 900;
+    font-size: 2.5rem;
+    opacity: 0.7;
+}
+
+.project-media::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 40%;
+    background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
+    pointer-events: none;
+}
+
+/* Медиа плеер для видео */
+.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);
+}
+
+.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-progress {
+    background: rgba(59, 130, 246, 0.1);
+    color: #2563eb;
+    border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.no-projects {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: #718096;
+}
+
+.no-projects i {
+    font-size: 4rem;
+    color: #e2e8f0;
+    margin-bottom: 1rem;
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+    .projects-header {
+        padding: 80px 0 40px;
+    }
+    
+    .projects-header h1 {
+        font-size: 2rem;
+    }
+    
+    .projects-header .lead {
+        font-size: 1rem;
+    }
+    
+    .category-filter {
+        gap: 0.5rem;
+        padding: 0 0.5rem;
+    }
+    
+    .category-pill {
+        font-size: 0.85rem;
+        padding: 0.6rem 1rem;
+    }
+    
+    .projects-grid {
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 1.5rem;
+    }
+    
+    .project-card {
+        max-width: 350px;
+    }
+    
+    .project-media {
+        height: 160px;
+    }
+    
+    .project-title {
+        font-size: 1rem;
+        min-height: 2.2rem;
+    }
+    
+    .project-content {
+        padding: 0.85rem;
+    }
+    
+    .project-footer {
+        padding: 0 0.85rem 0.85rem;
+    }
+    
+    .stats-left {
+        gap: 0.75rem;
+    }
+    
+    .project-meta {
+        font-size: 0.75rem;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.35rem;
+    }
+}
+
+@media (max-width: 576px) {
+    .projects-grid {
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 1.5rem;
+    }
+    
+    .project-card {
+        max-width: 320px;
+    }
+    
+    .project-media {
+        height: 140px;
+    }
+    
+    .category-btn {
+        font-size: 0.85rem;
+        padding: 0.6rem 1.2rem;
+    }
+    
+    .project-content {
+        padding: 0.75rem;
+    }
+    
+    .project-footer {
+        padding: 0 0.75rem 0.75rem;
+    }
+    
+    .project-title {
+        font-size: 0.95rem;
+        min-height: 2rem;
+    }
+    
+    .project-description {
+        min-height: 2rem;
+        font-size: 0.8rem;
+    }
+    
+    .project-stats-section {
+        padding: 0.4rem 0.6rem;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.35rem;
+        font-size: 0.75rem;
+    }
+    
+    .stats-left {
+        gap: 1rem;
+    }
+    
+    .project-info {
+        gap: 0.75rem;
+        font-size: 0.7rem;
+    }
+    
+    .category-tag {
+        font-size: 0.65rem;
+        padding: 0.2rem 0.4rem;
+    }
+}
+
+/* Скелетон загрузка */
+.skeleton {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: loading 1.5s infinite;
+}
+
+@keyframes loading {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="projects-header">
+    <div class="container">
+        <div class="text-center">
+            <h1 class="display-4 fw-bold mb-3">Наши проекты</h1>
+            <p class="lead mb-0">Портфолио завершённых работ и успешных внедрений</p>
+        </div>
+    </div>
+</div>
+
+<div class="container">
+    {% if categories %}
+    <div class="category-filter">
+        <a href="{% url 'projects_list' %}" class="category-pill {% if not selected_category %}active{% endif %}">
+            <i class="fas fa-th me-2"></i>Все проекты
+        </a>
+        {% for category in categories %}
+        <a href="{% url 'projects_list' %}?category={{ category.id }}" 
+           class="category-pill {% if selected_category == category.id|stringformat:'s' %}active{% endif %}">
+            <i class="{{ category.icon }} me-2"></i>{{ category.name }}
+        </a>
+        {% endfor %}
+    </div>
+    {% endif %}
+
+    {% if projects %}
+    <div class="projects-grid">
+        {% for project in projects %}
+        <a href="{% url 'project_detail' project.pk %}" class="text-decoration-none">
+            <div class="project-card">
+                <!-- Верхняя часть - медиа контент -->
+                <div class="project-media{% if not project.video and not project.thumbnail and not project.image %} no-image{% endif %}">
+                    {% if project.video %}
+                        <div class="media-player">
+                            <video poster="{% if project.video_poster %}{{ project.video_poster.url }}{% elif project.thumbnail %}{{ project.thumbnail.url }}{% endif %}" 
+                                   preload="metadata" muted>
+                                <source src="{{ project.video.url }}" type="video/mp4">
+                            </video>
+                            <button class="play-btn" type="button" aria-label="Воспроизвести видео">
+                                <i class="fas fa-play"></i>
+                            </button>
+                        </div>
+                    {% elif project.thumbnail %}
+                        <img src="{{ project.thumbnail.url }}" alt="{{ project.name }}" loading="lazy" decoding="async">
+                    {% elif project.image %}
+                        <img src="{{ project.image.url }}" alt="{{ project.name }}" loading="lazy" decoding="async">
+                    {% endif %}
+                    
+                    {% if project.is_featured %}
+                    <div class="project-badge">
+                        <i class="fas fa-star me-1"></i>Избранное
+                    </div>
+                    {% endif %}
+                </div>
+                
+                <!-- Основной контент карточки -->
+                <div class="project-content">
+                    <h3 class="project-title">{{ project.name }}</h3>
+                    
+                    {% if project.short_description %}
+                    <p class="project-description">{{ project.short_description|striptags|truncatewords:25 }}</p>
+                    {% endif %}
+                    
+                    <!-- Статистика проекта -->
+                    <div class="project-stats-section">
+                        <div class="stats-left">
+                            <div class="stat-item">
+                                <i class="fas fa-eye"></i>
+                                <span>{{ project.views_count }}</span>
+                            </div>
+                            <div class="stat-item">
+                                <i class="fas fa-heart"></i>
+                                <span>{{ project.likes_count }}</span>
+                            </div>
+                        </div>
+                        {% if project.completion_date %}
+                        <div class="project-year">{{ project.completion_date|date:"Y" }}</div>
+                        {% endif %}
+                    </div>
+                </div>
+                
+                <!-- Футер карточки -->
+                <div class="project-footer">
+                    {% if project.categories.exists %}
+                    <div class="project-categories">
+                        {% for category in project.categories.all %}
+                        <span class="category-tag">
+                            <i class="{{ category.icon }}"></i>{{ category.name }}
+                        </span>
+                        {% endfor %}
+                    </div>
+                    {% endif %}
+                    
+                    <div class="project-meta">
+                        <div class="project-info">
+                            {% if project.duration %}
+                            <span><i class="fas fa-clock"></i>{{ project.duration }}</span>
+                            {% endif %}
+                            {% if project.team_size %}
+                            <span><i class="fas fa-users"></i>{{ project.team_size }}</span>
+                            {% endif %}
+                        </div>
+                        <div class="project-status status-{{ project.status }}">
+                            {% if project.status == 'completed' %}
+                                <i class="fas fa-check-circle"></i>Завершен
+                            {% elif project.status == 'in_progress' %}
+                                <i class="fas fa-spinner"></i>В процессе
+                            {% else %}
+                                <i class="fas fa-archive"></i>В архиве
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </a>
+        {% endfor %}
+    </div>
+    {% else %}
+    <div class="no-projects">
+        <i class="fas fa-folder-open"></i>
+        <h3>Проектов не найдено</h3>
+        <p>В данной категории пока нет завершённых проектов</p>
+        <a href="{% url 'projects_list' %}" class="btn btn-primary-modern mt-3">
+            <i class="fas fa-th me-2"></i>Посмотреть все проекты
+        </a>
+    </div>
+    {% endif %}
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Обработчик для видео плеера
+    const playBtns = document.querySelectorAll('.play-btn');
+    
+    playBtns.forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            const mediaPlayer = this.closest('.media-player');
+            const video = mediaPlayer.querySelector('video');
+            
+            if (video) {
+                if (video.paused) {
+                    video.play();
+                    this.style.opacity = '0';
+                } else {
+                    video.pause();
+                    this.style.opacity = '1';
+                }
+            }
+        });
+    });
+    
+    // Обработчики событий видео
+    const videos = document.querySelectorAll('.media-player video');
+    
+    videos.forEach(video => {
+        const playBtn = video.closest('.media-player').querySelector('.play-btn');
+        
+        video.addEventListener('play', () => {
+            if (playBtn) playBtn.style.opacity = '0';
+        });
+        
+        video.addEventListener('pause', () => {
+            if (playBtn) playBtn.style.opacity = '1';
+        });
+        
+        video.addEventListener('ended', () => {
+            if (playBtn) playBtn.style.opacity = '1';
+        });
+    });
+    
+    // Анимация появления карточек при загрузке
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+    
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.style.opacity = '1';
+                entry.target.style.transform = 'translateY(0)';
+            }
+        });
+    }, observerOptions);
+    
+    // Применяем анимацию к карточкам
+    const cards = document.querySelectorAll('.project-card');
+    cards.forEach((card, index) => {
+        card.style.opacity = '0';
+        card.style.transform = 'translateY(30px)';
+        card.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
+        observer.observe(card);
+    });
+    
+    // Lazy loading для изображений
+    const images = document.querySelectorAll('img[loading="lazy"]');
+    
+    if ('IntersectionObserver' in window) {
+        const imageObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const img = entry.target;
+                    img.classList.add('loaded');
+                    imageObserver.unobserve(img);
+                }
+            });
+        });
+        
+        images.forEach(img => {
+            imageObserver.observe(img);
+        });
+    }
+});
+</script>
+
+<style>
+/* Анимации для загруженных изображений */
+.project-media img {
+    transition: opacity 0.3s ease;
+    opacity: 0.8;
+}
+
+.project-media img.loaded {
+    opacity: 1;
+}
+
+/* Плавная анимация при hover */
+.project-card {
+    will-change: transform, box-shadow;
+}
+
+.project-card:hover .project-media img {
+    will-change: transform;
+}
+
+/* Улучшенные переходы для статуса */
+.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);
+}
+</style>
+{% endblock %}

smartsoltech/web/templates/web/service_detail.html

@@ -47,7 +47,7 @@
                         <span class="badge bg-primary-modern">{{ service.category.name }}</span>
                     </div>
                     <h1 class="display-5 fw-bold mb-4">{{ service.name }}</h1>
-                    <p class="lead text-muted mb-4">{{ service.description }}</p>
+                    <p class="lead text-muted mb-4">{{ service.description|striptags }}</p>
                     
                     <!-- Service Features -->
                     <div class="mb-4">
@@ -224,32 +224,58 @@
         <div class="row g-4">
             {% for project in service.projects.all %}
             <div class="col-lg-4 col-md-6">
-                <div class="card-modern h-100">
+                <a href="{% url 'project_detail' project.pk %}" class="text-decoration-none">
-                    <div class="card-body">
+                    <div class="card-modern h-100 hover-lift">
-                        <div class="mb-3">
+                        {% if project.thumbnail %}
-                            <span class="badge bg-primary">{{ project.get_status_display }}</span>
+                        <div style="height: 200px; overflow: hidden; border-radius: 15px 15px 0 0;">
+                            <img src="{{ project.thumbnail.url }}" alt="{{ project.name }}" 
+                                 style="width: 100%; height: 100%; object-fit: cover; object-position: center;"
+                                 loading="lazy" decoding="async">
                         </div>
-                        <h5 class="mb-3">{{ project.name }}</h5>
+                        {% elif project.image %}
-                        <p class="text-muted mb-3">{{ project.description|truncatewords:15 }}</p>
+                        <div style="height: 200px; overflow: hidden; border-radius: 15px 15px 0 0;">
-                        
+                            <img src="{{ project.image.url }}" alt="{{ project.name }}" 
-                        <div class="mb-3">
+                                 style="width: 100%; height: 100%; object-fit: cover; object-position: center;"
-                            <strong>Требования заказчика:</strong>
+                                 loading="lazy" decoding="async">
-                            <p class="text-muted small">{{ project.order.message|truncatewords:10 }}</p>
                         </div>
+                        {% endif %}
                         
-                        <div class="d-flex justify-content-between align-items-center">
+                        <div class="card-body">
-                            <small class="text-muted">
+                            <div class="mb-3">
-                                <i class="fas fa-calendar-check me-1"></i>
+                                <span class="badge bg-primary">{{ project.get_status_display }}</span>
-                                {{ project.completion_date|date:"d.m.Y" }}
+                                {% if project.media_files.count > 0 %}
-                            </small>
+                                <span class="badge bg-info ms-2">
-                            <div class="project-rating">
+                                    <i class="fas fa-images me-1"></i>{{ project.media_files.count }} фото
-                                {% for i in "12345" %}
+                                </span>
-                                    <i class="fas fa-star text-warning"></i>
+                                {% endif %}
-                                {% endfor %}
+                            </div>
+                            <h5 class="mb-3 text-dark">{{ project.name }}</h5>
+                            
+                            {% if project.short_description %}
+                            <p class="text-muted mb-3">{{ project.short_description|striptags|truncatewords:15 }}</p>
+                            {% else %}
+                            <p class="text-muted mb-3">{{ project.description|striptags|truncatewords:15 }}</p>
+                            {% endif %}
+                            
+                            <div class="d-flex justify-content-between align-items-center">
+                                <small class="text-muted">
+                                    <i class="fas fa-calendar-check me-1"></i>
+                                    {% if project.completion_date %}
+                                    {{ project.completion_date|date:"d.m.Y" }}
+                                    {% else %}
+                                    Не указано
+                                    {% endif %}
+                                </small>
+                                <div class="project-stats">
+                                    <small class="text-muted">
+                                        <i class="fas fa-eye me-1"></i>{{ project.views_count }}
+                                        <i class="fas fa-heart ms-2 me-1"></i>{{ project.likes_count }}
+                                    </small>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
+                </a>
             </div>
             {% endfor %}
         </div>
@@ -391,21 +417,16 @@ document.addEventListener('DOMContentLoaded', function() {
             // Get CSRF token
             const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
             
-            // Prepare data for submission
+            // Prepare data for QR code generation
             const serviceId = document.getElementById('serviceId').value;
             const clientData = {
-                service_id: serviceId,
+                client_name: formData.get('name'),
-                first_name: formData.get('first_name'),
+                client_email: formData.get('email'),
-                last_name: formData.get('last_name'),
+                client_phone: formData.get('phone')
-                email: formData.get('email'),
-                phone: formData.get('phone'),
-                description: formData.get('description'),
-                budget: formData.get('budget'),
-                timeline: formData.get('timeline')
             };
             
-            // Submit to server
+            // Submit to QR code generation endpoint
-            fetch(`/service/request/${serviceId}/`, {
+            fetch(`/service/generate_qr_code/${serviceId}/`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -415,24 +436,41 @@ document.addEventListener('DOMContentLoaded', function() {
             })
             .then(response => response.json())
             .then(data => {
-                if (data.success) {
+                if (data.registration_link) {
-                    // Show success animation
+                    // Hide form and show QR code
                     document.querySelector('.modal-body form').style.display = 'none';
-                    document.getElementById('successSection').style.display = 'block';
+                    document.getElementById('successSection').style.display = 'none';
                     
-                    // Close modal after delay
+                    // Create QR code section
-                    setTimeout(() => {
+                    const qrSection = document.createElement('div');
-                        const modal = bootstrap.Modal.getInstance(document.getElementById('serviceModal'));
+                    qrSection.id = 'qrSection';
-                        if (modal) {
+                    qrSection.className = 'text-center py-4';
-                            modal.hide();
+                    qrSection.innerHTML = `
-                        }
+                        <h4 class="text-primary mb-3">Завершите заявку в Telegram</h4>
-                        // Reset form
+                        <p class="text-muted mb-4">Отсканируйте QR-код или перейдите по ссылке для завершения регистрации заявки</p>
-                        form.reset();
+                        <div class="qr-code-container mb-4">
-                        document.querySelector('.modal-body form').style.display = 'block';
+                            <img src="${data.qr_code_url}" alt="QR Code" class="img-fluid" style="max-width: 250px; border: 2px solid #dee2e6; border-radius: 8px;">
-                        document.getElementById('successSection').style.display = 'none';
+                        </div>
-                    }, 3000);
+                        <div class="d-grid gap-2">
+                            <a href="${data.registration_link}" target="_blank" class="btn btn-primary btn-lg">
+                                <i class="fab fa-telegram-plane me-2"></i>
+                                Открыть в Telegram
+                            </a>
+                            <button type="button" class="btn btn-outline-secondary" onclick="resetModal()" data-bs-dismiss="modal">
+                                Закрыть
+                            </button>
+                        </div>
+                    `;
+                    
+                    document.querySelector('.modal-body').appendChild(qrSection);
+                    
+                    // Hide footer buttons
+                    document.querySelector('.modal-footer').style.display = 'none';
+                    
+                } else if (data.status === 'existing_request') {
+                    alert('У вас уже есть активная заявка на данную услугу. Проверьте ваш Telegram.');
                 } else {
-                    alert('Ошибка при отправке заявки: ' + (data.message || 'Попробуйте позже'));
+                    alert('Ошибка при создании заявки: ' + (data.error || 'Попробуйте позже'));
                 }
             })
             .catch(error => {
@@ -447,6 +485,33 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 });
+
+// Function to reset modal to initial state
+function resetModal() {
+    const modal = document.getElementById('serviceModal');
+    const form = document.getElementById('serviceRequestForm');
+    const qrSection = document.getElementById('qrSection');
+    
+    // Remove QR section if exists
+    if (qrSection) {
+        qrSection.remove();
+    }
+    
+    // Show form and hide success section
+    document.querySelector('.modal-body form').style.display = 'block';
+    document.getElementById('successSection').style.display = 'none';
+    
+    // Show footer
+    document.querySelector('.modal-footer').style.display = 'flex';
+    
+    // Reset form
+    form.reset();
+}
+
+// Reset modal when it's closed
+document.getElementById('serviceModal').addEventListener('hidden.bs.modal', function () {
+    resetModal();
+});
 </script>
 
 <style>
@@ -510,6 +575,16 @@ document.addEventListener('DOMContentLoaded', function() {
     text-align: center;
 }
 
+/* Hover lift effect for project cards */
+.hover-lift {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.hover-lift:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
+}
+
 /* Success Animation Styles */
 .success-checkmark {
     width: 80px;
@@ -653,5 +728,102 @@ document.addEventListener('DOMContentLoaded', function() {
         font-size: 1rem;
     }
 }
+
+/* Исправление кликабельности кнопок */
+.service-info {
+    position: relative;
+    z-index: 100;
+}
+
+.service-info .btn,
+.service-info .d-flex {
+    position: relative;
+    z-index: 101;
+    pointer-events: auto;
+}
+
+.btn:hover {
+    pointer-events: auto !important;
+    cursor: pointer !important;
+}
+
+/* Убираем возможные перекрывающие псевдоэлементы */
+*::before,
+*::after {
+    pointer-events: none;
+}
+
+/* Обеспечиваем кликабельность всех интерактивных элементов */
+button,
+a,
+input,
+select,
+textarea {
+    pointer-events: auto !important;
+    position: relative;
+    z-index: 10;
+}
 </style>
+
+<!-- Service Request Modal -->
+<div class="modal fade" id="serviceModal" tabindex="-1" aria-labelledby="serviceModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="serviceModalLabel">Заказать услугу</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form id="serviceRequestForm">
+                    {% csrf_token %}
+                    <input type="hidden" id="serviceId" name="service_id">
+                    
+                    <div class="row g-3">
+                        <div class="col-md-6">
+                            <label for="clientName" class="form-label">Имя *</label>
+                            <input type="text" class="form-control" id="clientName" name="name" required>
+                        </div>
+                        <div class="col-md-6">
+                            <label for="clientEmail" class="form-label">Email *</label>
+                            <input type="email" class="form-control" id="clientEmail" name="email" required>
+                        </div>
+                        <div class="col-md-6">
+                            <label for="clientPhone" class="form-label">Телефон *</label>
+                            <input type="tel" class="form-control" id="clientPhone" name="phone" required>
+                        </div>
+                        <div class="col-md-6">
+                            <label for="clientCompany" class="form-label">Компания</label>
+                            <input type="text" class="form-control" id="clientCompany" name="company">
+                        </div>
+                        <div class="col-12">
+                            <label for="projectDescription" class="form-label">Описание проекта</label>
+                            <textarea class="form-control" id="projectDescription" name="description" rows="4" 
+                                      placeholder="Расскажите подробнее о вашем проекте..."></textarea>
+                        </div>
+                    </div>
+                </form>
+                
+                <!-- Success Section -->
+                <div id="successSection" style="display: none;" class="text-center py-4">
+                    <div class="success-checkmark">
+                        <div class="check-icon">
+                            <span class="icon-line line-tip"></span>
+                            <span class="icon-line line-long"></span>
+                            <div class="icon-circle"></div>
+                            <div class="icon-fix"></div>
+                        </div>
+                    </div>
+                    <h4 class="text-success mt-3">Заявка отправлена!</h4>
+                    <p class="text-muted">Мы свяжемся с вами в ближайшее время</p>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
+                <button type="submit" form="serviceRequestForm" class="btn btn-primary">
+                    <i class="fas fa-paper-plane me-2"></i>Отправить заявку
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
 {% endblock %}

smartsoltech/web/urls.py

@@ -8,10 +8,10 @@ urlpatterns = [
     path('', views.home, name='home'),
     path('service/<int:pk>/', views.service_detail, name='service_detail'),
     path('project/<int:pk>/', views.project_detail, name='project_detail'),
+    path('projects/', views.projects_list, name='projects_list'),
     path('client/<int:pk>/', views.client_detail, name='client_detail'),
     path('blog/<int:pk>/', views.blog_post_detail, name='blog_post_detail'),
     path('services/', views.services_view, name='services'),
-    path('portfolio/', views.portfolio_view, name='portfolio'),
     path('blog/', views.blog_view, name='blog'),
     path('news/', views.news_view, name='news'),
     path('career/', views.career_view, name='career'),

smartsoltech/web/views.py

@@ -1,5 +1,9 @@
 from django.shortcuts import render, get_object_or_404, redirect
-from .models import Service, Project, Client, BlogPost, Review, Order, ServiceRequest, HeroBanner, Category, ContactInfo, Team, Career
+from .models import (
+    Service, Project, Client, BlogPost, Review, Order, ServiceRequest, 
+    HeroBanner, Category, ContactInfo, Team, Career,
+    ProjectMedia
+)
 from django.db.models import Avg
 from comunication.models import TelegramSettings
 import qrcode
@@ -45,6 +49,9 @@ def home(request):
     team_members = Team.objects.filter(is_active=True, show_on_about=True).order_by('display_order')[:4]  # Показываем топ-4 участников команды
     featured_careers = Career.objects.filter(status='active', is_featured=True).order_by('-created_at')[:3]  # Топ-3 рекомендуемые вакансии
     
+    # Подсчет открытых вакансий
+    total_open_positions = Career.objects.filter(status='active').count()
+    
     return render(request, 'web/home_modern.html', {
         'services': services,
         'hero_banners': hero_banners,
@@ -53,6 +60,7 @@ def home(request):
         'reviews': reviews,
         'team_members': team_members,
         'featured_careers': featured_careers,
+        'total_open_positions': total_open_positions,
     })
 
 def service_detail(request, pk):
@@ -71,7 +79,45 @@ def service_detail(request, pk):
 
 def project_detail(request, pk):
     project = get_object_or_404(Project, pk=pk)
-    return render(request, 'web/project_detail.html', {'project': project})
+    
+    # Увеличиваем счётчик просмотров
+    project.views_count += 1
+    project.save(update_fields=['views_count'])
+    
+    # Получаем похожие проекты (той же категории или сервиса)
+    similar_projects = Project.objects.filter(
+        status='completed'
+    ).exclude(pk=project.pk)
+    
+    if project.category:
+        similar_projects = similar_projects.filter(category=project.category)
+    elif project.service:
+        similar_projects = similar_projects.filter(service=project.service)
+    
+    similar_projects = similar_projects[:3]
+    
+    return render(request, 'web/project_detail.html', {
+        'project': project,
+        'similar_projects': similar_projects
+    })
+
+def projects_list(request):
+    """Список всех завершённых проектов"""
+    projects = Project.objects.filter(status='completed').order_by('-is_featured', '-display_order', '-completion_date')
+    
+    # Фильтр по категории
+    category_id = request.GET.get('category')
+    if category_id:
+        projects = projects.filter(categories__id=category_id)
+    
+    # Получаем все категории с проектами
+    categories = Category.objects.filter(projects__status='completed').distinct().order_by('order', 'name')
+    
+    return render(request, 'web/projects_list.html', {
+        'projects': projects,
+        'categories': categories,
+        'selected_category': category_id
+    })
 
 def client_detail(request, pk):
     client = get_object_or_404(Client, pk=pk)
@@ -104,12 +150,9 @@ def about_view(request):
     contact_info = ContactInfo.get_active()
     return render(request, 'web/about.html', {'contact_info': contact_info})
 
-def portfolio_view(request):
-    projects = Project.objects.all()
-    return render(request, 'web/portfolio.html', {'projects': projects})
 
 def blog_view(request):
-    blog_posts = BlogPost.objects.all().order_by('-created_at')
+    blog_posts = BlogPost.objects.all().order_by('-published_date')
     return render(request, 'web/blog.html', {'blog_posts': blog_posts})
 
 def news_view(request):
@@ -186,10 +229,18 @@ def create_service_request(request, service_id):
                 service=service,
                 client=client,
                 token=token,
-                message=full_description,
                 is_verified=False
             )
 
+            # Create associated Order with message
+            Order.objects.create(
+                service_request=service_request,
+                client=client,
+                service=service,
+                message=full_description,
+                status='pending'
+            )
+
             return JsonResponse({
                 'success': True,
                 'message': 'Заявка успешно отправлена! Мы свяжемся с вами в ближайшее время.',
@@ -213,9 +264,9 @@ def generate_qr_code(request, service_id):
             client_phone = data.get('client_phone')
             client_name = data.get('client_name')
 
-            if not all([client_email, client_phone, client_name]):
+            if not all([client_email, client_name, client_phone]):
-                logger.error("Все поля должны быть заполнены")
+                logger.error("Все обязательные поля должны быть заполнены")
-                return JsonResponse({'error': 'Все поля должны быть заполнены'}, status=400)
+                return JsonResponse({'error': 'Все обязательные поля должны быть заполнены'}, status=400)
 
             # Используем транзакцию для предотвращения конкурентного создания дубликатов
             with transaction.atomic():

utils/README.md

@@ -0,0 +1,40 @@
+# 🛠️ Utils
+
+Папка содержит утилиты и вспомогательные инструменты для управления проектом.
+
+## Файлы:
+
+- `start` - Запуск проекта в режиме разработки
+- `stop` - Остановка всех сервисов проекта  
+- `update` - Обновление и перезапуск проекта
+- `cli` - Интерфейс командной строки
+- `logs` - Просмотр логов системы
+- `drone` - Бинарный файл CI/CD системы Drone
+
+## Использование:
+
+Все утилиты должны запускаться из корневой директории проекта:
+
+```bash
+# Запуск проекта
+./utils/start
+
+# Остановка проекта  
+./utils/stop
+
+# Обновление проекта
+./utils/update
+
+# Просмотр логов
+./utils/logs
+
+# CLI интерфейс
+./utils/cli
+```
+
+## Важно:
+
+Убедитесь что файлы имеют права на выполнение:
+```bash
+chmod +x utils/*
+```