Переделал кнопку отпаравки заявки

OneCprogsite/settings.py

@@ -93,6 +93,7 @@ INSTALLED_APPS = [
     'taggit',
     'django_ckeditor_5',
     'captcha',
+    'turnstile',
 ]
 
 MIDDLEWARE = [
@@ -285,4 +286,5 @@ CAPTCHA_LENGTH = 6
 CAPTCHA_FONT_SIZE = 30
 CAPTCHA_IMAGE_SIZE = (150, 50)
 
-
+TURNSTILE_SITEKEY = '0x4AAAAAAC12NGPpc4TutFWA'
+TURNSTILE_SECRET = '0x4AAAAAAC12NCpzKHKE09JaXRDv0smrSAU'

programmer/forms.py

@@ -1,7 +1,8 @@
-from captcha.fields import CaptchaField
+# from captcha.fields import CaptchaField
 from django import forms
 from django.contrib.auth import get_user_model
 from django.contrib.auth.forms import UserCreationForm
+from turnstile.fields import TurnstileField
 
 from .models import CallbackRequest, Profile
 
@@ -9,7 +10,8 @@ from .models import CallbackRequest, Profile
 User = get_user_model()
 
 class CallbackForm(forms.ModelForm):
-    captcha = CaptchaField(label='Введите текст с картинки', required=True)
+    # captcha = CaptchaField(label='Введите текст с картинки', required=True)
+    captcha = TurnstileField(label='', theme='light', size='normal')   
      
     class Meta:
         model = CallbackRequest

programmer/static/programmer/css/styles.css

@@ -1696,3 +1696,60 @@ body {
     font-size: 1rem;
     border-radius: 8px;
 }
+
+.floating-btn {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    z-index: 10000;
+    animation: fadeInUp 0.5s ease;
+}
+
+.floating-btn .btn {
+    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+    border-radius: 50px;
+    padding: 12px 24px;
+    font-size: 1.1rem;
+    background: #ff7300;
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+
+.floating-btn .btn:hover {
+    transform: scale(1.05);
+    background: #0056b3;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Пульсация для кнопки */
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.7);
+    }
+    70% {
+        transform: scale(1.1);
+        box-shadow: 0 0 0 15px rgba(255, 107, 0, 0);
+    }
+    100% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(255, 107, 0, 0);
+    }
+}
+
+.floating-btn .btn.pulse {
+    animation: pulse 1.5s infinite;
+    will-change: transform;
+}

programmer/static/programmer/js/floating-button.js

@@ -0,0 +1,63 @@
+// static/programmer/js/floating-button.js
+const CallbackModal = {
+    shown: false,
+    modalId: 'callbackModal',
+    floatingBtnId: 'floatingButton',
+
+    init() {
+        setTimeout(() => {
+            const btn = document.getElementById(this.floatingBtnId);
+            if (btn) {
+                btn.style.display = 'block';
+                this.shown = true;
+                const button = btn.querySelector('.btn');
+                if (button) button.classList.add('pulse');
+            }
+        }, 5000);
+    },
+
+    open() {
+        const modal = document.getElementById(this.modalId);
+        if (modal) {
+            modal.style.display = 'block';
+            const floatingBtn = document.getElementById(this.floatingBtnId);
+            if (floatingBtn && this.shown) {
+                floatingBtn.style.display = 'none';
+            }
+        }
+    },
+
+    close() {
+        const modal = document.getElementById(this.modalId);
+        if (modal) {
+            modal.style.display = 'none';
+            const floatingBtn = document.getElementById(this.floatingBtnId);
+            if (floatingBtn && this.shown) {
+                floatingBtn.style.display = 'block';
+                const button = floatingBtn.querySelector('.btn.pulse');
+                if (button) {
+                    button.style.animation = 'none';
+                    setTimeout(() => button.style.animation = '', 10);
+                }
+            }
+        }
+    }
+};
+
+// Инициализация и глобальные обработчики
+document.addEventListener('DOMContentLoaded', () => {
+    CallbackModal.init();
+
+    // Закрытие по клику вне модального окна
+    const modal = document.getElementById(CallbackModal.modalId);
+    if (modal) {
+        modal.addEventListener('click', (event) => {
+            if (event.target === modal) CallbackModal.close();
+        });
+    }
+
+    // Закрытие по ESC
+    document.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape') CallbackModal.close();
+    });
+});

programmer/static/programmer/js/recall.js

@@ -1,74 +1,41 @@
-// recall.js - Скрипты для страницы отзывов
+// static/programmer/js/recall.js
-function openModal(imageUrl, title) {
+const ImageModal = {
-    console.log('Opening modal with:', imageUrl);
+    modalId: 'imageModal',
-    const modal = document.getElementById('imageModal');
+    imageId: 'modalImage',
-    const modalImg = document.getElementById('modalImage');
+    titleId: 'modalTitle',
-    const modalTitle = document.getElementById('modalTitle');
 
-    if (modal && modalImg) {
+    open(imageUrl, title) {
-        modal.style.display = "block";
+        const modal = document.getElementById(this.modalId);
-        modalImg.src = imageUrl;
+        const img = document.getElementById(this.imageId);
-        if (title && modalTitle) {
+        const titleEl = document.getElementById(this.titleId);
-            modalTitle.textContent = title;
+        if (modal && img && titleEl) {
+            img.src = imageUrl;
+            img.alt = title || 'Просмотр изображения';
+            titleEl.textContent = title || 'Просмотр изображения';
+            modal.style.display = 'block';
         }
+    },
 
-        // Добавляем класс для анимации
+    close() {
-        setTimeout(() => {
+        const modal = document.getElementById(this.modalId);
-            modal.classList.add('active');
-        }, 10);
-
-        // Подстраиваем размер изображения
-        adjustModalImageSize();
-    }
-}
-
-function closeModal() {
-    const modal = document.getElementById('imageModal');
         if (modal) {
-        modal.classList.remove('active');
+            modal.style.display = 'none';
-        setTimeout(() => {
+            const img = document.getElementById(this.imageId);
-            modal.style.display = "none";
+            if (img) img.src = '';
-        }, 300);
         }
-}
-
-function adjustModalImageSize() {
-    const modalImg = document.getElementById('modalImage');
-    const modalContent = document.querySelector('.modal-content');
-
-    if (modalImg && modalContent) {
-        const maxWidth = window.innerWidth * 0.9;
-        const maxHeight = window.innerHeight * 0.8;
-
-        modalImg.style.maxWidth = `${maxWidth}px`;
-        modalImg.style.maxHeight = `${maxHeight}px`;
     }
-}
+};
 
-// Инициализация после загрузки DOM
+// Обработчики для модального окна изображений
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', () => {
-    // Закрытие модального окна при клике вне изображения
+    const modal = document.getElementById(ImageModal.modalId);
-    document.addEventListener('click', function(event) {
+    if (modal) {
-        const modal = document.getElementById('imageModal');
+        modal.addEventListener('click', (event) => {
-        if (event.target === modal) {
+            if (event.target === modal) ImageModal.close();
-            closeModal();
-        }
         });
-
-    // Закрытие по ESC
-    document.addEventListener('keydown', function(event) {
-        if (event.key === 'Escape') {
-            closeModal();
     }
-    });
 
-    // Адаптация размера изображения при изменении размера окна
+    document.addEventListener('keydown', (event) => {
-    window.addEventListener('resize', function() {
+        if (event.key === 'Escape') ImageModal.close();
-        const modalImg = document.getElementById('modalImage');
-        if (modalImg && modalImg.src) {
-            adjustModalImageSize();
-        }
     });
-
-    console.log('Recall page scripts initialized');
 });

programmer/templates/programmer/about.html

@@ -1,4 +1,5 @@
 {% extends 'programmer/base.html' %}
+{% load static %}
 {% load django_bootstrap5 %}
 
 {% block content %}
@@ -151,4 +152,7 @@
 }
 </script>
 
+<script src="{% static 'programmer/js/floating-button.js' %}"></script>
+
 {% endblock %}
+

programmer/templates/programmer/base.html

@@ -322,6 +322,59 @@
         </div>
     </footer>
 
+    <!-- Модальное окно формы -->
+    <div id="callbackModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>📞 Заявка на консультацию</h3>
+                <button class="modal-close" onclick="CallbackModal.close()">&times;</button>
+            </div>
+            <div class="modal-body">
+            <form method="post" action="{% url 'callback' %}" id="callbackForm">
+                    {% csrf_token %}
+
+                    <div class="form-group">
+                        <label for="id_name">Имя *</label>
+                        {{ form.name }}
+                    </div>
+
+                    <div class="form-group">
+                        <label for="id_phone">Телефон *</label>
+                        {{ form.phone }}
+                    </div>
+
+                    <div class="form-group">
+                        <label for="id_email">Электронная почта</label>
+                        {{ form.email }}
+                    </div>
+
+                    <div class="form-group">
+                        <label for="id_question">Ваш вопрос</label>
+                        {{ form.question }}
+                    </div>
+
+                    {% if form.captcha %}
+                    <div class="form-group">
+                        <label for="id_captcha">Защитный код *</label>
+                        {{ form.captcha }}
+                    </div>
+                {% endif %}
+
+                    <div class="form-actions">
+                        <button type="submit" class="btn btn-primary" style="width: 100%;">
+                            📨 Отправить заявку
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <!-- Плавающая кнопка -->
+    <div id="floatingButton" class="floating-btn" style="position: fixed; bottom: 30px; right: 30px; z-index: 10000; display: none;">
+        <button onclick="CallbackModal.open()" class="btn btn-primary pulse">🎯 Получить консультацию</button>
+    </div>
+    
     {% bootstrap_javascript %}
     <script src="{% static 'programmer/js/theme-switcher.js' %}"></script>
     <script src="{% static 'programmer/js/mobile-menu.js' %}"></script>

programmer/templates/programmer/index.html

@@ -1,4 +1,5 @@
 {% extends 'programmer/base.html' %}
+{% load static %}
 {% load django_bootstrap5 %}
 
 {% block content %}
@@ -17,94 +18,28 @@
         <div class="card-content">
             {{p.content}}
         </div>
-        <div class="card-actions">
+        <!-- <div class="card-actions">
             <button onclick="openModal()" class="btn btn-primary">🎯 Получить консультацию</button>
-        </div>
+        </div> -->
     </div>
     {% endfor %}
     {% endautoescape %}
 </div>
 
-<!-- Модальное окно формы -->
-<div id="callbackModal" class="modal">
-    <div class="modal-content">
-        <div class="modal-header">
-            <h3>📞 Заявка на консультацию</h3>
-            <button class="modal-close" onclick="closeModal()">&times;</button>
-        </div>
-        <div class="modal-body">
-           <form method="post" action="{% url 'callback' %}" id="callbackForm">
-                {% csrf_token %}
-
-                <div class="form-group">
-                    <label for="id_name">Имя *</label>
-                    {{ form.name }}
-                </div>
-
-                <div class="form-group">
-                    <label for="id_phone">Телефон *</label>
-                    {{ form.phone }}
-                </div>
-
-                <div class="form-group">
-                    <label for="id_email">Электронная почта</label>
-                    {{ form.email }}
-                </div>
-
-                <div class="form-group">
-                    <label for="id_question">Ваш вопрос</label>
-                    {{ form.question }}
-                </div>
-
-                {% if form.captcha %}
-                <div class="form-group">
-                    <label for="id_captcha">Защитный код *</label>
-                    {{ form.captcha }}
-                </div>
-               {% endif %}
-
-                <div class="form-actions">
-                    <button type="submit" class="btn btn-primary" style="width: 100%;">
-                        📨 Отправить заявку
-                    </button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
-
 {% if not posts %}
 <div class="modern-card text-center fade-in">
     <h3>🚀 Контент скоро появится</h3>
     <p class="card-subtitle">Мы готовим для вас интересные материалы и кейсы</p>
-    <div class="card-actions justify-center">
+    <!-- <div class="card-actions justify-center">
         <button onclick="openModal()" class="btn btn-primary">🎯 Получить консультацию</button>
-    </div>
+    </div> -->
 </div>
 {% endif %}
 
-<script>
+<script src="{% static 'programmer/js/floating-button.js' %}"></script>
-function openModal() {
-    document.getElementById('callbackModal').style.display = 'block';
-}
 
-function closeModal() {
+{% block extra_js %}
-    document.getElementById('callbackModal').style.display = 'none';
+
-}
+{% endblock %}
 
-// Закрытие модального окна при клике вне его
-window.onclick = function(event) {
-    const modal = document.getElementById('callbackModal');
-    if (event.target === modal) {
-        closeModal();
-    }
-}
-
-// Закрытие по ESC
-document.addEventListener('keydown', function(event) {
-    if (event.key === 'Escape') {
-        closeModal();
-    }
-});
-</script>
 {% endblock %}

programmer/templates/programmer/recall.html

@@ -2,6 +2,7 @@
 {% load django_bootstrap5 %}
 {% load static %}
 {% load seo_tags %}
+{% load programmer_tags %}
 
 {% block extra_css %}
 <link rel="stylesheet" href="{% static 'programmer/css/recall.css' %}">
@@ -59,7 +60,7 @@
                         <img src="{{ p.scan.url }}"
                              alt="Отзыв от {{ p.title }}"
                              class="recall-scan"
-                             onclick="openModal('{{ p.scan.url }}', '{{ p.title }}')">
+                             onclick="ImageModal.open('{{ p.scan.url }}', '{{ p.title }}')">
                         <div class="scan-hint">
                             <span class="scan-zoom-icon">🔍</span>
                             <span class="scan-text">Нажмите для увеличения</span>
@@ -88,15 +89,12 @@
 </div>
 {% endif %}
 
-<!-- Скрипт для модального окна -->
-<script src="{% static 'programmer/js/recall.js' %}"></script>
-
 <!-- Модальное окно для увеличения изображений -->
 <div id="imageModal" class="modal">
     <div class="modal-content">
         <div class="modal-header">
             <h3 id="modalTitle">Просмотр изображения</h3>
-            <button class="modal-close" onclick="closeModal()">&times;</button>
+            <button class="modal-close" onclick="ImageModal.close()">&times;</button>
         </div>
         <div class="modal-body">
             <img class="modal-image" id="modalImage" alt="">
@@ -104,4 +102,12 @@
     </div>
 </div>
 
+<script src="{% static 'programmer/js/floating-button.js' %}"></script>
+<script src="{% static 'programmer/js/recall.js' %}"></script>
+
+{% block extra_js %}
+
+{% endblock %}
+
+
 {% endblock %}

programmer/templates/programmer/solution.html

@@ -46,9 +46,10 @@
     window.totalPages = {{ paginator.num_pages }};
 </script>
 
-<script src="{% static 'programmer/js/solution-accordion.js' %}"></script>
 {% endblock %}
 
 {% block extra_js %}
-<script src="{% static 'programmer/js/infinite_scroll.js' %}"></script>
+    <script src="{% static 'programmer/js/solution-accordion.js' %}"></script>
+    <script src="{% static 'programmer/js/infinite_scroll.js' %}"></script>
+    <script src="{% static 'programmer/js/floating-button.js' %}"></script>
 {% endblock %}

programmer/views.py

@@ -102,8 +102,10 @@ class AboutPageView(BasePageView, BreadcrumbMixin):
 
     def get_context_data(self, **kwargs: Any) -> Dict[str, Any]:
         context = super().get_context_data(**kwargs)
+        form = CallbackForm()
 
         context.update({
+            'form': form,
             'title': "Программист 1С Николай Сердюк - 10+ лет опыта | Услуги 1С",
             'meta_description': (
                 "Николай Сердюк - сертифицированный программист 1С с 10+ лет опыта. "
@@ -135,8 +137,10 @@ class SolutionListView(BaseListView, BreadcrumbMixin):
 
     def get_context_data(self, **kwargs: Any) -> Dict[str, Any]:
         context = super().get_context_data(**kwargs)
+        form = CallbackForm()
 
         context.update({
+            'form': form,
             'title': "Проекты автоматизации 1С | Реализованные кейсы и решения",
             'meta_description': (
                 "Реализованные проекты по автоматизации 1С: складской учет с ТСД, "
@@ -167,8 +171,10 @@ class RecallListView(BaseListView, BreadcrumbMixin):
 
     def get_context_data(self, **kwargs: Any) -> Dict[str, Any]:
         context = super().get_context_data(**kwargs)
+        form = CallbackForm()
 
         context.update({
+            'form': form,
             'title': "Отзывы клиентов о работе программиста 1С | Реальные кейсы",
             'meta_description': (
                 "Реальные отзывы клиентов о работе программиста 1С Николая Сердюка. "

requirements.txt

@@ -10,3 +10,4 @@ django-taggit
 django_ckeditor_5
 django-allauth
 django-simple-captcha
+django-turnstile

static/programmer/css/styles.css

@@ -1696,3 +1696,60 @@ body {
     font-size: 1rem;
     border-radius: 8px;
 }
+
+.floating-btn {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    z-index: 10000;
+    animation: fadeInUp 0.5s ease;
+}
+
+.floating-btn .btn {
+    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+    border-radius: 50px;
+    padding: 12px 24px;
+    font-size: 1.1rem;
+    background: #ff7300;
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+
+.floating-btn .btn:hover {
+    transform: scale(1.05);
+    background: #0056b3;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Пульсация для кнопки */
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.7);
+    }
+    70% {
+        transform: scale(1.1);
+        box-shadow: 0 0 0 15px rgba(255, 107, 0, 0);
+    }
+    100% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(255, 107, 0, 0);
+    }
+}
+
+.floating-btn .btn.pulse {
+    animation: pulse 1.5s infinite;
+    will-change: transform;
+}

static/programmer/js/floating-button.js

@@ -0,0 +1,63 @@
+// static/programmer/js/floating-button.js
+const CallbackModal = {
+    shown: false,
+    modalId: 'callbackModal',
+    floatingBtnId: 'floatingButton',
+
+    init() {
+        setTimeout(() => {
+            const btn = document.getElementById(this.floatingBtnId);
+            if (btn) {
+                btn.style.display = 'block';
+                this.shown = true;
+                const button = btn.querySelector('.btn');
+                if (button) button.classList.add('pulse');
+            }
+        }, 5000);
+    },
+
+    open() {
+        const modal = document.getElementById(this.modalId);
+        if (modal) {
+            modal.style.display = 'block';
+            const floatingBtn = document.getElementById(this.floatingBtnId);
+            if (floatingBtn && this.shown) {
+                floatingBtn.style.display = 'none';
+            }
+        }
+    },
+
+    close() {
+        const modal = document.getElementById(this.modalId);
+        if (modal) {
+            modal.style.display = 'none';
+            const floatingBtn = document.getElementById(this.floatingBtnId);
+            if (floatingBtn && this.shown) {
+                floatingBtn.style.display = 'block';
+                const button = floatingBtn.querySelector('.btn.pulse');
+                if (button) {
+                    button.style.animation = 'none';
+                    setTimeout(() => button.style.animation = '', 10);
+                }
+            }
+        }
+    }
+};
+
+// Инициализация и глобальные обработчики
+document.addEventListener('DOMContentLoaded', () => {
+    CallbackModal.init();
+
+    // Закрытие по клику вне модального окна
+    const modal = document.getElementById(CallbackModal.modalId);
+    if (modal) {
+        modal.addEventListener('click', (event) => {
+            if (event.target === modal) CallbackModal.close();
+        });
+    }
+
+    // Закрытие по ESC
+    document.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape') CallbackModal.close();
+    });
+});

static/programmer/js/recall.js

@@ -1,74 +1,41 @@
-// recall.js - Скрипты для страницы отзывов
+// static/programmer/js/recall.js
-function openModal(imageUrl, title) {
+const ImageModal = {
-    console.log('Opening modal with:', imageUrl);
+    modalId: 'imageModal',
-    const modal = document.getElementById('imageModal');
+    imageId: 'modalImage',
-    const modalImg = document.getElementById('modalImage');
+    titleId: 'modalTitle',
-    const modalTitle = document.getElementById('modalTitle');
 
-    if (modal && modalImg) {
+    open(imageUrl, title) {
-        modal.style.display = "block";
+        const modal = document.getElementById(this.modalId);
-        modalImg.src = imageUrl;
+        const img = document.getElementById(this.imageId);
-        if (title && modalTitle) {
+        const titleEl = document.getElementById(this.titleId);
-            modalTitle.textContent = title;
+        if (modal && img && titleEl) {
+            img.src = imageUrl;
+            img.alt = title || 'Просмотр изображения';
+            titleEl.textContent = title || 'Просмотр изображения';
+            modal.style.display = 'block';
         }
+    },
 
-        // Добавляем класс для анимации
+    close() {
-        setTimeout(() => {
+        const modal = document.getElementById(this.modalId);
-            modal.classList.add('active');
-        }, 10);
-
-        // Подстраиваем размер изображения
-        adjustModalImageSize();
-    }
-}
-
-function closeModal() {
-    const modal = document.getElementById('imageModal');
         if (modal) {
-        modal.classList.remove('active');
+            modal.style.display = 'none';
-        setTimeout(() => {
+            const img = document.getElementById(this.imageId);
-            modal.style.display = "none";
+            if (img) img.src = '';
-        }, 300);
         }
-}
-
-function adjustModalImageSize() {
-    const modalImg = document.getElementById('modalImage');
-    const modalContent = document.querySelector('.modal-content');
-
-    if (modalImg && modalContent) {
-        const maxWidth = window.innerWidth * 0.9;
-        const maxHeight = window.innerHeight * 0.8;
-
-        modalImg.style.maxWidth = `${maxWidth}px`;
-        modalImg.style.maxHeight = `${maxHeight}px`;
     }
-}
+};
 
-// Инициализация после загрузки DOM
+// Обработчики для модального окна изображений
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', () => {
-    // Закрытие модального окна при клике вне изображения
+    const modal = document.getElementById(ImageModal.modalId);
-    document.addEventListener('click', function(event) {
+    if (modal) {
-        const modal = document.getElementById('imageModal');
+        modal.addEventListener('click', (event) => {
-        if (event.target === modal) {
+            if (event.target === modal) ImageModal.close();
-            closeModal();
-        }
         });
-
-    // Закрытие по ESC
-    document.addEventListener('keydown', function(event) {
-        if (event.key === 'Escape') {
-            closeModal();
     }
-    });
 
-    // Адаптация размера изображения при изменении размера окна
+    document.addEventListener('keydown', (event) => {
-    window.addEventListener('resize', function() {
+        if (event.key === 'Escape') ImageModal.close();
-        const modalImg = document.getElementById('modalImage');
-        if (modalImg && modalImg.src) {
-            adjustModalImageSize();
-        }
     });
-
-    console.log('Recall page scripts initialized');
 });