full

2025-07-08 14:21:19 +03:00
parent a6bb81cbe1
commit 21562852ca
65 changed files with 7464 additions and 1073 deletions
--- a/template-parts/la-components/blocks/form-block/form-block.css
+++ b/template-parts/la-components/blocks/form-block/form-block.css
@@ -1,91 +1,89 @@

-.form-block-wrapper .ff-el-group {
-    margin-bottom: 24px;
+#fluentform_3 {
+
 }

-.form-block-wrapper .ff-el-input--label label {
-    display: block;
-    margin-bottom: 8px;
-    font-weight: 600;
-    color: #374151;
-    font-size: 14px;
-}
-
-.form-block-wrapper .ff-el-form-control {
-    width: 100%;
-    padding: 12px 16px;
-    border: 2px solid #e5e7eb;
-    border-radius: 8px;
-    font-size: 16px;
-    transition: all 0.2s ease;
-    background: #ffffff;
-    box-sizing: border-box;
-}
-
-.form-block-wrapper .ff-el-form-control:focus {
-    outline: none;
-    border-color: #3b82f6;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.form-block-wrapper .ff-btn-submit {
-    width: 100%;
-    padding: 14px 24px;
-    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
-    color: white;
+#fluentform_3 .ff-el-form-control {
    border: none;
-    border-radius: 8px;
+    box-shadow: 0 2px 32px 0 rgba(16, 15, 15, 0.03);
+    background: #fff;
+    border-radius: 90px;
+    height: 77px;
+    padding-left: 32px;
+    padding-right: 32px;
+    outline: 1px solid transparent;
+
+    font-weight: 500;
    font-size: 16px;
+    line-height: 130%;
+    color: #6c6b6b;
+}
+
+#fluentform_3 .ff-btn-submit {
+    height: 75px;
+    background: linear-gradient(90deg, #e21e24 39.42%, #ff2f35 92.9%);
+    border-radius: 90px;
    font-weight: 600;
+    font-size: 18px;
+    line-height: 195%;
+    color: #f8f8f8;
+    display: grid;
+    place-content: center;
+    width: 100%;
    cursor: pointer;
-    transition: all 0.3s ease;
-    text-transform: none;
+    transition: 180ms ease-in;
 }

-.form-block-wrapper .ff-btn-submit:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
+#fluentform_3 .ff-btn-submit:hover {
+    font-weight: 700;
+    transition: 180ms ease-in;
 }

-.form-block-wrapper .ff-btn-submit:active {
-    transform: translateY(0);
+#fluentform_3 .ff_submit_btn_wrapper {
+    margin-bottom: 0!important;
 }

-.form-block-wrapper .asterisk-right label::after {
-    content: ' *';
-    color: #ef4444;
-    font-weight: bold;
+#fluentform_3 .error.text-danger {
+    position: absolute;
+    margin-top: 0;
+    bottom: -18px;
+    left: 0;
+    width: 100%;
+    text-align: center;
 }

-.form-block-wrapper .ff-message-success,
-.form-block-wrapper .ff-message-container {
-    display: none !important;
+#fluentform_3 .ff-el-group {
+    position: relative;
+    margin-bottom: 18px;
 }

-.form-block-wrapper.form-loading .ff-btn-submit {
-    opacity: 0.7;
+#fluentform_3_success {
+    display: none!important;
+}
+
+
+
+#fluentform_3 .ff-el-input--label {
+    position: absolute;
+    top: 50%;
+    left: 32px;
+    transform: translateY(-50%);
    pointer-events: none;
+    z-index: 2;
+    margin: 0;
+    transition: 180ms ease-in-out;
+
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 130%;
+    color: #6c6b6b;
 }

-@media (max-width: 768px) {
-    .form-block-wrapper {
-        margin: 20px;
-        padding: 20px;
-    }

-    .form-block-wrapper .ff-el-form-control {
-        font-size: 16px;
-        padding: 10px 14px;
-    }
-
-    .form-block-wrapper .ff-btn-submit {
-        font-size: 16px;
-        padding: 12px 20px;
-    }
-}
-
-@media (max-width: 1024px) and (min-width: 769px) {
-    .form-block-wrapper {
-        padding: 25px;
-    }
+#fluentform_3 .ff-el-group.focused .ff-el-input--label,
+#fluentform_3 .ff-el-group.has-value .ff-el-input--label {
+    top: 6px;
+    transform: translateY(0);
+    transition: 180ms ease-in-out;
+    font-size: 14px;
 }
--- a/template-parts/la-components/blocks/form-block/form-block.js
+++ b/template-parts/la-components/blocks/form-block/form-block.js
@@ -0,0 +1,82 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const inputs = document.querySelectorAll('#fluentform_3 .ff-el-form-control');
+    const phoneInput = document.querySelector('#fluentform_3 .ff-el-phone');
+
+    inputs.forEach(input => {
+        // Добавляем класс при фокусе
+        input.addEventListener('focus', function() {
+            this.closest('.ff-el-group').classList.add('focused');
+        });
+
+        // Убираем класс при потере фокуса
+        input.addEventListener('blur', function() {
+            this.closest('.ff-el-group').classList.remove('focused');
+        });
+
+        // Добавляем/убираем класс при вводе
+        input.addEventListener('input', function() {
+            const group = this.closest('.ff-el-group');
+            if (this.value.trim() !== '') {
+                group.classList.add('has-value');
+            } else {
+                group.classList.remove('has-value');
+            }
+        });
+    });
+
+    // Маска для телефона +7 (___) ___-__-__
+    if (phoneInput) {
+        phoneInput.addEventListener('input', function(e) {
+            let value = e.target.value.replace(/\D/g, ''); // Убираем все кроме цифр
+
+            // Если начинается с 8, заменяем на 7
+            if (value.startsWith('8')) {
+                value = '7' + value.slice(1);
+            }
+
+            // Если не начинается с 7, добавляем 7
+            if (!value.startsWith('7') && value.length > 0) {
+                value = '7' + value;
+            }
+
+            let formattedValue = '';
+
+            if (value.length > 0) {
+                formattedValue = '+7';
+
+                if (value.length > 1) {
+                    formattedValue += ' (' + value.slice(1, 4);
+
+                    if (value.length > 4) {
+                        formattedValue += ') ' + value.slice(4, 7);
+
+                        if (value.length > 7) {
+                            formattedValue += '-' + value.slice(7, 9);
+
+                            if (value.length > 9) {
+                                formattedValue += '-' + value.slice(9, 11);
+                            }
+                        }
+                    }
+                }
+            }
+
+            e.target.value = formattedValue;
+        });
+
+        // Обработка клавиш для корректного удаления
+        phoneInput.addEventListener('keydown', function(e) {
+            if (e.key === 'Backspace' || e.key === 'Delete') {
+                const cursorPos = e.target.selectionStart;
+                const value = e.target.value;
+
+                // Если курсор на служебном символе, сдвигаем его
+                if (cursorPos > 0 && [' ', '(', ')', '-'].includes(value[cursorPos - 1])) {
+                    setTimeout(() => {
+                        e.target.setSelectionRange(cursorPos - 1, cursorPos - 1);
+                    }, 0);
+                }
+            }
+        });
+    }
+});
--- a/template-parts/la-components/blocks/form-block/form-block.php
+++ b/template-parts/la-components/blocks/form-block/form-block.php
@@ -10,24 +10,44 @@ $current_url = home_url($_SERVER['REQUEST_URI']);
 $page_title = get_the_title() ?: 'Главная страница';
 $form_name = $form_title;

+$room = get_current_room();
+if ($room === 'gym') {
+    $section_classes = 'bg-cover bg-center bg-no-repeat';
+    $bg_image = get_template_directory_uri() . '/assets/images/form-bg-dark.png';
+    $style_attr = 'style="background-image: url(' . esc_url($bg_image) . ')"';
+} else {
+    $section_classes = 'bg-cover bg-center bg-no-repeat';
+    $bg_image = get_template_directory_uri() . '/assets/images/form-bg-light.png';
+    $style_attr = 'style="background-image: url(' . esc_url($bg_image) . ')"';
+}
+
 $hidden_value = "Форма: {$form_name} | Страница: {$page_title} | URL: {$current_url}";
 ?>

-<section class="container mx-auto mt-[22px]" id="<?php echo esc_attr($unique_id); ?>">
-    <div class="text-[24px] font-[700] mb-[20px] text-[#374151]">
-        <?php echo esc_html($form_title); ?>
-    </div>
+<section class="mt-[22px] bg-[linear-gradient(180deg,_#f2f2f2_69.59%,_#ededed_100%)] bg-cover" id="<?php echo esc_attr($unique_id); ?> "
+    <?php echo $style_attr; ?>
+>

-    <div class="form-block-wrapper bg-white p-[30px] rounded-[12px] max-w-[300px]"
-         data-form-id="<?php echo esc_attr($form_id); ?>"
-         data-submit-text="<?php echo esc_attr($submit_button_text); ?>"
-         data-hidden-value="<?php echo esc_attr($hidden_value); ?>">
-        <?php echo do_shortcode('[fluentform id="' . esc_attr($form_id) . '"]'); ?>
+    <div class="container mx-auto py-[48px] flex relative">
+        <img class="absolute right-0 bottom-0 pointer-events-none z-0" src="<?php echo esc_url(get_template_directory_uri() . '/assets/images/form-image-trainer.png'); ?>" alt="Изображение тренера">
+        <div class="form-block-wrapper relative z-[1] border border-[2px] border-[#fff] p-[48px] bg-[#f8f8f8] rounded-[32px] w-full max-w-[590px]"
+             data-form-id="<?php echo esc_attr($form_id); ?>"
+             data-submit-text="<?php echo esc_attr($submit_button_text); ?>"
+             data-hidden-value="<?php echo esc_attr($hidden_value); ?>">
+            <h3 class="font-[500] text-[40px] leading-[120%] text-[#222]">Пробная <strong class="font-[700]">персональная
+                    тренировка</strong>
+                <span class="bg-[linear-gradient(90deg,_#9d9994_39.42%,_#ccc9c4_92.9%)] rounded-[32px] h-[43px] inline-flex items-center pr-[16px] pl-[16px] font-[600] text-[32px] leading-[115%] text-[#fff]">за 1200 ₽</span>
+            </h3>
+            <p class="mt-[16px] mb-[24px] font-[500] text-[20px] leading-[140%] text-[#222]">Познакомимся, покажем зал и
+                <strong class="font-[600]">подберём
+                    оптимальные для вас тренировки!</strong></p>
+            <?php echo do_shortcode('[fluentform id="' . esc_attr($form_id) . '"]'); ?>
+        </div>
    </div>
 </section>

 <script>
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
        const section = document.getElementById('<?php echo esc_js($unique_id); ?>');
        if (!section) return;

@@ -68,6 +88,6 @@ $hidden_value = "Форма: {$form_name} | Страница: {$page_title} | UR
            }, 150);
        }

-        block.addEventListener('focusin', updateForm, { once: true });
+        block.addEventListener('focusin', updateForm, {once: true});
    });
 </script>