Compare commits
4 Commits
996e74a100
...
2e0dc90220
| Author | SHA1 | Date | |
|---|---|---|---|
| 2e0dc90220 | |||
| 1d193a9eab | |||
|
67aeac2238 | ||
| b1759eac10 |
157
SCRIPTS_README.md
Normal file
157
SCRIPTS_README.md
Normal file
@@ -0,0 +1,157 @@
|
||||
# SmartSolTech - Скрипты управления проектом
|
||||
|
||||
Этот набор скриптов предназначен для автоматизации процессов разработки и развертывания проекта SmartSolTech.
|
||||
|
||||
## Доступные скрипты
|
||||
|
||||
### 🚀 `./update.sh` - Полное обновление проекта
|
||||
Выполняет полный цикл обновления:
|
||||
- Создание бэкапа в удаленном репозитории
|
||||
- Обновление кода из Git
|
||||
- Остановка текущих контейнеров
|
||||
- Пересборка Docker образов
|
||||
- Запуск новых контейнеров
|
||||
- Выполнение миграций Django
|
||||
- Сбор статических файлов
|
||||
- Проверка здоровья сервисов
|
||||
|
||||
**Использование:**
|
||||
```bash
|
||||
./update.sh # Полное обновление
|
||||
./update.sh --help # Показать справку
|
||||
./update.sh --logs # Показать логи без обновления
|
||||
./update.sh --status # Показать статус сервисов
|
||||
```
|
||||
|
||||
### ▶️ `./start.sh` - Быстрый запуск
|
||||
Быстро запускает все сервисы проекта:
|
||||
- Запуск Docker контейнеров
|
||||
- Проверка статуса сервисов
|
||||
- Отображение доступных ресурсов
|
||||
|
||||
**Использование:**
|
||||
```bash
|
||||
./start.sh
|
||||
```
|
||||
|
||||
### ⏹️ `./stop.sh` - Остановка сервисов
|
||||
Останавливает сервисы с различными опциями:
|
||||
- Простая остановка контейнеров
|
||||
- Остановка с удалением контейнеров и волюмов
|
||||
- Полная очистка (включая образы)
|
||||
|
||||
**Использование:**
|
||||
```bash
|
||||
./stop.sh # Простая остановка
|
||||
./stop.sh --remove # Остановка + удаление контейнеров и волюмов
|
||||
./stop.sh --clean # Полная очистка (контейнеры + образы + волюмы)
|
||||
./stop.sh --help # Показать справку
|
||||
```
|
||||
|
||||
### 📋 `./logs.sh` - Просмотр логов
|
||||
Показывает логи сервисов в реальном времени:
|
||||
- Все логи или конкретного сервиса
|
||||
- Последние N строк логов
|
||||
- Интерактивный режим
|
||||
|
||||
**Использование:**
|
||||
```bash
|
||||
./logs.sh # Все логи в реальном времени
|
||||
./logs.sh web # Логи только веб-сервера
|
||||
./logs.sh db # Логи базы данных
|
||||
./logs.sh pgadmin # Логи PgAdmin
|
||||
./logs.sh --tail 50 # Последние 50 строк
|
||||
./logs.sh --help # Показать справку
|
||||
```
|
||||
|
||||
## Доступные сервисы
|
||||
|
||||
После запуска будут доступны:
|
||||
- **Веб-сайт**: http://localhost:8000
|
||||
- **Админка Django**: http://localhost:8000/admin
|
||||
- **PgAdmin**: http://localhost:8080
|
||||
|
||||
## Требования
|
||||
|
||||
Убедитесь что установлены:
|
||||
- Git
|
||||
- Docker
|
||||
- Docker Compose
|
||||
- curl (для проверки здоровья)
|
||||
|
||||
## Безопасность
|
||||
|
||||
- Скрипт автоматически создает бэкапы перед обновлением
|
||||
- Локальные изменения сохраняются в Git stash
|
||||
- Staticfiles автоматически очищаются для избежания конфликтов
|
||||
- Проверка статуса сервисов после запуска
|
||||
|
||||
## Примеры использования
|
||||
|
||||
### Ежедневное обновление
|
||||
```bash
|
||||
# Полное обновление с проверкой
|
||||
./update.sh
|
||||
|
||||
# Если что-то пошло не так - смотрим логи
|
||||
./logs.sh --tail 100
|
||||
```
|
||||
|
||||
### Разработка
|
||||
```bash
|
||||
# Запуск для разработки
|
||||
./start.sh
|
||||
|
||||
# Просмотр логов во время разработки
|
||||
./logs.sh web
|
||||
|
||||
# Остановка после работы
|
||||
./stop.sh
|
||||
```
|
||||
|
||||
### Полная перезагрузка
|
||||
```bash
|
||||
# Полная очистка и пересборка
|
||||
./stop.sh --clean
|
||||
./update.sh
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Проблемы с контейнерами
|
||||
```bash
|
||||
# Проверить статус
|
||||
./logs.sh --help
|
||||
docker-compose ps
|
||||
|
||||
# Перезапустить проблемный сервис
|
||||
docker-compose restart web
|
||||
```
|
||||
|
||||
### Проблемы с базой данных
|
||||
```bash
|
||||
# Проверить логи БД
|
||||
./logs.sh db
|
||||
|
||||
# Принудительная пересборка
|
||||
./stop.sh --remove
|
||||
./update.sh
|
||||
```
|
||||
|
||||
### Проблемы с Git
|
||||
```bash
|
||||
# Проверить статус
|
||||
git status
|
||||
|
||||
# Восстановить из stash если нужно
|
||||
git stash list
|
||||
git stash apply
|
||||
```
|
||||
|
||||
## Настройка автоматического обновления
|
||||
|
||||
Добавьте в crontab для автоматического обновления:
|
||||
```bash
|
||||
# Обновление каждый день в 3:00 утра
|
||||
0 3 * * * cd /path/to/project && ./update.sh >> /var/log/smartsoltech-update.log 2>&1
|
||||
```
|
||||
62
loading_screen_fixed.html
Normal file
62
loading_screen_fixed.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Тест исправленного сайта SmartSolTech</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; }
|
||||
.success { background: #d4edda; padding: 15px; border-radius: 5px; margin: 10px 0; }
|
||||
.info { background: #d1ecf1; padding: 15px; border-radius: 5px; margin: 10px 0; }
|
||||
.test-link { display: inline-block; margin: 10px; padding: 10px 15px; background: #007bff; color: white; text-decoration: none; border-radius: 5px; }
|
||||
.test-link:hover { background: #0056b3; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>🎉 Проблема с загрузочным экраном исправлена!</h1>
|
||||
|
||||
<div class="success">
|
||||
<h2>✅ Что было исправлено:</h2>
|
||||
<ul>
|
||||
<li><strong>Синтаксические ошибки JavaScript:</strong> Исправлены проблемы с закрывающими скобками</li>
|
||||
<li><strong>Загрузочный экран:</strong> Теперь корректно скрывается через 0.5 секунды</li>
|
||||
<li><strong>Основная функциональность:</strong> Восстановлена работа тем, навигации и анимаций</li>
|
||||
<li><strong>Отладочный код:</strong> Удален лишний код, который вызывал проблемы</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<h2>🧪 Тестирование:</h2>
|
||||
<p>Теперь сайт должен нормально загружаться. Проверьте следующие страницы:</p>
|
||||
|
||||
<a href="http://localhost:8000/" target="_blank" class="test-link">🏠 Главная страница</a>
|
||||
<a href="http://localhost:8000/services/" target="_blank" class="test-link">🛠️ Страница услуг</a>
|
||||
<a href="http://localhost:8000/about/" target="_blank" class="test-link">ℹ️ О нас</a>
|
||||
|
||||
<h3>Что проверить:</h3>
|
||||
<ul>
|
||||
<li>✅ Загрузочный экран исчезает через полсекунды</li>
|
||||
<li>✅ Навигационные ссылки работают</li>
|
||||
<li>✅ Кнопки и интерактивные элементы кликабельны</li>
|
||||
<li>✅ Переключатель темы работает (если есть)</li>
|
||||
<li>✅ Модальное окно услуг открывается</li>
|
||||
<li>✅ QR-код генерация работает в модальном окне</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<h2>🛠️ Техническая информация:</h2>
|
||||
<ul>
|
||||
<li><strong>Проблема:</strong> Синтаксические ошибки в modern-scripts.js блокировали загрузку</li>
|
||||
<li><strong>Решение:</strong> Пересоздан упрощенный и стабильный JavaScript файл</li>
|
||||
<li><strong>Сохранена функциональность:</strong> Скрытие загрузочного экрана, переключение тем, плавная прокрутка, анимации</li>
|
||||
<li><strong>Удалено:</strong> Отладочный код, который вызывал конфликты</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="success">
|
||||
<h2>🚀 Сайт готов к использованию!</h2>
|
||||
<p>Все основные функции восстановлены, включая механизм QR-кода для заявок через Telegram бота.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
110
qr_success_animation_demo.html
Normal file
110
qr_success_animation_demo.html
Normal file
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>✨ Новая анимация успеха для заявок</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; }
|
||||
.improvement { background: #e8f5e8; padding: 20px; border-radius: 10px; margin: 15px 0; border-left: 5px solid #28a745; }
|
||||
.feature { background: #e7f3ff; padding: 15px; border-radius: 8px; margin: 10px 0; }
|
||||
.workflow { background: #fff9e6; padding: 15px; border-radius: 8px; margin: 10px 0; }
|
||||
.test-btn { display: inline-block; padding: 12px 20px; background: #007bff; color: white; text-decoration: none; border-radius: 5px; margin: 10px 5px; }
|
||||
.test-btn:hover { background: #0056b3; text-decoration: none; color: white; }
|
||||
h2 { color: #333; border-bottom: 2px solid #28a745; padding-bottom: 5px; }
|
||||
.emoji { font-size: 1.2em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1><span class="emoji">✨</span> Улучшенная анимация подачи заявок</h1>
|
||||
|
||||
<div class="improvement">
|
||||
<h2><span class="emoji">🎯</span> Что улучшено:</h2>
|
||||
|
||||
<div class="feature">
|
||||
<h3><span class="emoji">📐</span> QR-код отцентрирован</h3>
|
||||
<ul>
|
||||
<li>QR-код теперь идеально выровнен по центру поля</li>
|
||||
<li>Фиксированный размер 200x200px для консистентности</li>
|
||||
<li>Красивая рамка и отступы</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3><span class="emoji">🎬</span> Анимированная галочка успеха</h3>
|
||||
<ul>
|
||||
<li>После создания заявки появляется анимированная галочка ✓</li>
|
||||
<li>Плавная анимация рисования круга и галочки</li>
|
||||
<li>Профессиональный зеленый дизайн</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h3><span class="emoji">⏱️</span> Автоматическое закрытие</h3>
|
||||
<ul>
|
||||
<li>Модальное окно автоматически закрывается через 6 секунд</li>
|
||||
<li>3 сек на QR-код → 3 сек на анимацию успеха → закрытие</li>
|
||||
<li>Уведомление о успешной подаче заявки</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="workflow">
|
||||
<h2><span class="emoji">🔄</span> Новый процесс подачи заявки:</h2>
|
||||
|
||||
<ol>
|
||||
<li><strong>Пользователь заполняет форму</strong> и нажимает "Отправить заявку"</li>
|
||||
<li><strong>Показывается индикатор загрузки</strong> "Отправляем..."</li>
|
||||
<li><strong>Появляется центрированный QR-код</strong> с кнопкой "Открыть в Telegram"</li>
|
||||
<li><strong>Через 3 секунды</strong> QR-код скрывается</li>
|
||||
<li><strong>Появляется анимированная галочка</strong> с сообщением "Заявка подана успешно!"</li>
|
||||
<li><strong>Через 3 секунды</strong> модальное окно автоматически закрывается</li>
|
||||
<li><strong>Показывается уведомление</strong> "Ожидайте подтверждения в Telegram"</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="improvement">
|
||||
<h2><span class="emoji">🧪</span> Тестирование:</h2>
|
||||
|
||||
<p>Перейдите на страницу услуг и попробуйте подать заявку:</p>
|
||||
|
||||
<a href="http://localhost:8000/services/" target="_blank" class="test-btn">
|
||||
<span class="emoji">🛠️</span> Тестировать на странице услуг
|
||||
</a>
|
||||
|
||||
<h3>Что тестировать:</h3>
|
||||
<ul>
|
||||
<li>✅ Заполните форму и отправьте заявку</li>
|
||||
<li>✅ Убедитесь, что QR-код отцентрирован</li>
|
||||
<li>✅ Подождите 3 секунды - должна появиться анимированная галочка</li>
|
||||
<li>✅ Подождите еще 3 секунды - окно должно закрыться автоматически</li>
|
||||
<li>✅ Должно появиться уведомление о успешной подаче</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h2><span class="emoji">💻</span> Технические детали:</h2>
|
||||
|
||||
<h3>Добавленные компоненты:</h3>
|
||||
<ul>
|
||||
<li><strong>CSS анимации:</strong> Keyframes для рисования галочки и круга</li>
|
||||
<li><strong>JavaScript таймеры:</strong> Координация показа QR → анимации → закрытия</li>
|
||||
<li><strong>Центрирование:</strong> Flexbox для идеального выравнивания</li>
|
||||
<li><strong>Сброс состояния:</strong> Очистка всех секций при закрытии модального окна</li>
|
||||
</ul>
|
||||
|
||||
<h3>Файлы изменены:</h3>
|
||||
<ul>
|
||||
<li><code>services_modern.html</code> - обновлена структура модального окна</li>
|
||||
<li><code>modern-styles.css</code> - добавлены анимации галочки</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="improvement">
|
||||
<h2><span class="emoji">🎉</span> Результат:</h2>
|
||||
<p><strong>Теперь процесс подачи заявки стал более интуитивным, визуально привлекательным и автоматизированным!</strong></p>
|
||||
|
||||
<p>Пользователи получают четкую обратную связь на каждом этапе, а модальное окно автоматически закрывается, предотвращая накопление открытых окон.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
358
smartsoltech/static/assets/js/modern-scripts-broken.js
Normal file
358
smartsoltech/static/assets/js/modern-scripts-broken.js
Normal file
@@ -0,0 +1,358 @@
|
||||
// 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';
|
||||
loadingScreen.remove(); // Полностью удаляем элемент
|
||||
console.log('SmartSolTech: Loading screen removed');
|
||||
}, 300);
|
||||
}, 500); // Уменьшили время ожидания
|
||||
} 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;
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
// Add/remove scrolled class
|
||||
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) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
const offsetTop = target.offsetTop - 80; // Account for fixed navbar
|
||||
window.scrollTo({
|
||||
top: offsetTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Intersection Observer for animations
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-fade-in-up');
|
||||
// Add stagger delay for child elements
|
||||
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
|
||||
document.querySelectorAll('.service-card, .card-modern, .step-card').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Form enhancements
|
||||
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);
|
||||
|
||||
// Отладка кликов
|
||||
document.addEventListener('click', function(event) {
|
||||
console.log('SmartSolTech: Click detected on:', event.target);
|
||||
|
||||
// Проверяем, не блокируются ли клики
|
||||
const computedStyle = getComputedStyle(event.target);
|
||||
if (computedStyle.pointerEvents === 'none') {
|
||||
console.warn('SmartSolTech: Element has pointer-events: none');
|
||||
}
|
||||
|
||||
// Проверяем z-index элементов
|
||||
let element = event.target;
|
||||
while (element && element !== document.body) {
|
||||
const style = getComputedStyle(element);
|
||||
if (style.zIndex && style.zIndex !== 'auto') {
|
||||
console.log('SmartSolTech: Element z-index:', element.tagName, style.zIndex);
|
||||
}
|
||||
element = element.parentElement;
|
||||
}
|
||||
});
|
||||
|
||||
console.log('SmartSolTech: All scripts loaded successfully');
|
||||
});
|
||||
});
|
||||
BIN
smartsoltech/static/qr_codes/request_10.png
Normal file
BIN
smartsoltech/static/qr_codes/request_10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
smartsoltech/static/qr_codes/request_11.png
Normal file
BIN
smartsoltech/static/qr_codes/request_11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
smartsoltech/static/qr_codes/request_7.png
Normal file
BIN
smartsoltech/static/qr_codes/request_7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
smartsoltech/static/qr_codes/request_8.png
Normal file
BIN
smartsoltech/static/qr_codes/request_8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
smartsoltech/static/qr_codes/request_9.png
Normal file
BIN
smartsoltech/static/qr_codes/request_9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
35
test_links.html
Normal file
35
test_links.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Тест ссылок SmartSolTech</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Тестирование ссылок SmartSolTech</h1>
|
||||
<div>
|
||||
<h3>Основные страницы:</h3>
|
||||
<ul>
|
||||
<li><a href="http://localhost:8000/" target="_blank">Главная</a></li>
|
||||
<li><a href="http://localhost:8000/services/" target="_blank">Услуги</a></li>
|
||||
<li><a href="http://localhost:8000/about/" target="_blank">О нас</a></li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Инструкция:</strong></p>
|
||||
<ol>
|
||||
<li>Откройте каждую ссылку в новой вкладке</li>
|
||||
<li>Проверьте, загружается ли страница</li>
|
||||
<li>Попробуйте нажать на ссылки в навигации на каждой странице</li>
|
||||
<li>Проверьте кнопки и интерактивные элементы</li>
|
||||
</ol>
|
||||
|
||||
<p><strong>Что проверить на каждой странице:</strong></p>
|
||||
<ul>
|
||||
<li>Работают ли ссылки в навигационном меню</li>
|
||||
<li>Работают ли кнопки (например, "Оставить заявку")</li>
|
||||
<li>Исчезает ли загрузочный экран через несколько секунд</li>
|
||||
<li>Работает ли переключатель темы</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
127
test_qr_functionality.html
Normal file
127
test_qr_functionality.html
Normal file
@@ -0,0 +1,127 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Тестирование QR-кода для заявок</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; padding: 20px; line-height: 1.6; }
|
||||
.section { margin-bottom: 30px; padding: 20px; border: 1px solid #ddd; border-radius: 8px; }
|
||||
.instructions { background: #f8f9fa; }
|
||||
.test-case { background: #e7f3ff; }
|
||||
.success { background: #d4edda; }
|
||||
.warning { background: #fff3cd; }
|
||||
h2 { color: #333; border-bottom: 2px solid #007bff; padding-bottom: 5px; }
|
||||
h3 { color: #666; }
|
||||
.step { margin: 10px 0; padding: 10px; background: white; border-radius: 4px; }
|
||||
.link { color: #007bff; text-decoration: none; font-weight: bold; }
|
||||
.link:hover { text-decoration: underline; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>🤖 Тестирование QR-кода и Telegram бота SmartSolTech</h1>
|
||||
|
||||
<div class="section instructions">
|
||||
<h2>📋 Инструкции для тестирования</h2>
|
||||
<p><strong>Что мы добавили:</strong></p>
|
||||
<ul>
|
||||
<li>✅ QR-код генерацию в модальном окне заявок</li>
|
||||
<li>✅ Интеграция с Telegram ботом</li>
|
||||
<li>✅ Автоматическое создание заявки через форму</li>
|
||||
<li>✅ Подтверждение регистрации через Telegram</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="section test-case">
|
||||
<h2>🔍 Тест-кейс 1: Создание заявки через модальное окно</h2>
|
||||
<div class="step">
|
||||
<h3>Шаг 1:</h3>
|
||||
<p>Перейдите на страницу услуг: <a href="http://localhost:8000/services/" class="link" target="_blank">http://localhost:8000/services/</a></p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<h3>Шаг 2:</h3>
|
||||
<p>Нажмите кнопку <strong>"Заказать услугу"</strong> под любой услугой</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<h3>Шаг 3:</h3>
|
||||
<p>Заполните форму в модальном окне:</p>
|
||||
<ul>
|
||||
<li>Имя: Тест</li>
|
||||
<li>Фамилия: Пользователь</li>
|
||||
<li>Email: test@example.com</li>
|
||||
<li>Телефон: +7-123-456-7890</li>
|
||||
<li>Описание: Тестовая заявка на услугу</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="step">
|
||||
<h3>Шаг 4:</h3>
|
||||
<p>Поставьте галочку согласия и нажмите <strong>"Отправить заявку"</strong></p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<h3>Ожидаемый результат:</h3>
|
||||
<p>✅ Должен появиться QR-код для Telegram</p>
|
||||
<p>✅ Кнопка "Открыть в Telegram" должна работать</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section test-case">
|
||||
<h2>🤖 Тест-кейс 2: Подтверждение через Telegram бота</h2>
|
||||
<div class="step">
|
||||
<h3>Шаг 1:</h3>
|
||||
<p>Отсканируйте QR-код телефоном или нажмите кнопку "Открыть в Telegram"</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<h3>Шаг 2:</h3>
|
||||
<p>Бот должен отправить команду /start с параметрами заявки</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<h3>Шаг 3:</h3>
|
||||
<p>Нажмите "Start" в Telegram</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<h3>Ожидаемый результат:</h3>
|
||||
<p>✅ Бот приветствует и подтверждает регистрацию</p>
|
||||
<p>✅ Заявка получает статус "подтверждена"</p>
|
||||
<p>✅ Клиент связывается с chat_id пользователя</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section warning">
|
||||
<h2>⚠️ Возможные проблемы</h2>
|
||||
<ul>
|
||||
<li><strong>QR-код не генерируется:</strong> Проверьте настройки Telegram бота в админке</li>
|
||||
<li><strong>Telegram бот не отвечает:</strong> Проверьте токен бота и что сервис telegram_bot запущен</li>
|
||||
<li><strong>Ошибка 500:</strong> Проверьте логи Django в консоли Docker</li>
|
||||
<li><strong>Ссылки не работают:</strong> Убедитесь, что JavaScript загружается корректно</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="section success">
|
||||
<h2>📱 Быстрые ссылки для тестирования</h2>
|
||||
<p><a href="http://localhost:8000/" class="link" target="_blank">🏠 Главная страница</a></p>
|
||||
<p><a href="http://localhost:8000/services/" class="link" target="_blank">🛠️ Страница услуг (тестируем здесь)</a></p>
|
||||
<p><a href="http://localhost:8000/about/" class="link" target="_blank">ℹ️ О нас</a></p>
|
||||
<p><a href="http://localhost:8080" class="link" target="_blank">🗄️ PgAdmin (admin:admin)</a></p>
|
||||
</div>
|
||||
|
||||
<div class="section instructions">
|
||||
<h2>🔧 Техническая информация</h2>
|
||||
<h3>Новые компоненты:</h3>
|
||||
<ul>
|
||||
<li><strong>QR-код секция:</strong> Добавлена в модальное окно services_modern.html</li>
|
||||
<li><strong>JavaScript:</strong> Обновлен для работы с generate_qr_code API</li>
|
||||
<li><strong>Backend:</strong> generate_qr_code view создает QR-код и заявку</li>
|
||||
<li><strong>Telegram интеграция:</strong> Обрабатывает /start команды с параметрами</li>
|
||||
</ul>
|
||||
|
||||
<h3>Workflow:</h3>
|
||||
<ol>
|
||||
<li>Пользователь заполняет форму → JavaScript отправляет POST на /service/generate_qr_code/</li>
|
||||
<li>Django создает Client, ServiceRequest и генерирует QR-код</li>
|
||||
<li>Возвращается ссылка на Telegram бота с токеном</li>
|
||||
<li>Пользователь сканирует QR или переходит по ссылке</li>
|
||||
<li>Telegram бот обрабатывает /start команду и подтверждает заявку</li>
|
||||
</ol>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user