full

resources/css/editor-style.css

@@ -1,4 +1,5 @@
 @import 'tailwindcss';
+@custom-variant dark (&:where(.dark, .dark *));
 @import './theme.css';
 
 /*

resources/css/theme.css

@@ -96,4 +96,116 @@ html, body {
     transition: background-position 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
 }
 
+.radial-gradient {
+    background: linear-gradient(180deg, #f2f2f2 69.59%, #ededed 100%);
+}
 
+.header-gradient{
+    background: linear-gradient(180deg, #f9f9f9 69.59%, #ededed 100%);
+}
+
+.small-shadow{
+    box-shadow: 0 2px 32px 0 rgba(16, 15, 15, 0.03);
+}
+.dark-gradient{
+    background: linear-gradient(90deg, #2b2c35 53.4%, #4f5870 100%);
+}
+
+
+
+#fluentform_4 {
+
+}
+
+#fluentform_4 .ff-el-form-control {
+    border: none;
+    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_4 .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: 180ms ease-in;
+}
+
+#fluentform_4 .ff-btn-submit:hover {
+    font-weight: 700;
+    transition: 180ms ease-in;
+}
+
+#fluentform_4 .ff_submit_btn_wrapper {
+    margin-bottom: 0!important;
+}
+
+#fluentform_4 .error.text-danger {
+    position: absolute;
+    margin-top: 0;
+    bottom: -18px;
+    left: 0;
+    width: 100%;
+    text-align: center;
+}
+
+#fluentform_4 .ff-el-group {
+    position: relative;
+    margin-bottom: 18px;
+}
+
+#fluentform_4_success {
+    display: none!important;
+}
+
+
+
+#fluentform_4 .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;
+}
+
+
+#fluentform_4 .ff-el-group.focused .ff-el-input--label,
+#fluentform_4 .ff-el-group.has-value .ff-el-input--label {
+    top: 6px;
+    transform: translateY(0);
+    transition: 180ms ease-in-out;
+    font-size: 14px;
+}
+#fluentform_4 .ff-el-tc{
+    margin-top: 32px!important;
+    font-weight: 500!important;
+    font-size: 16px!important;
+    line-height: 145%!important;
+    color: #6c6b6b!important;
+    margin-bottom: 0!important;
+}

resources/js/app.js

@@ -14,3 +14,103 @@ document.addEventListener('DOMContentLoaded', function() {
       updateMainPadding();
       window.addEventListener('resize', updateMainPadding);
 });*/
+
+// Используем делегирование событий для динамически загружаемых форм
+document.addEventListener('DOMContentLoaded', function() {
+
+    // Делегирование для focus события
+    document.addEventListener('focus', function(e) {
+        if (e.target.matches('#fluentform_4 .ff-el-form-control')) {
+            const group = e.target.closest('.ff-el-group');
+            if (group) group.classList.add('focused');
+        }
+    }, true); // используем capture phase
+
+    // Делегирование для blur события
+    document.addEventListener('blur', function(e) {
+        if (e.target.matches('#fluentform_4 .ff-el-form-control')) {
+            const group = e.target.closest('.ff-el-group');
+            if (group) group.classList.remove('focused');
+        }
+    }, true);
+
+    // Делегирование для input события
+    document.addEventListener('input', function(e) {
+        // Обычные поля формы
+        if (e.target.matches('#fluentform_4 .ff-el-form-control')) {
+            const group = e.target.closest('.ff-el-group');
+            if (group) {
+                if (e.target.value.trim() !== '') {
+                    group.classList.add('has-value');
+                } else {
+                    group.classList.remove('has-value');
+                }
+            }
+        }
+
+        // Форматирование телефона
+        if (e.target.matches('#fluentform_4 .ff-el-phone')) {
+            formatPhoneNumber(e);
+        }
+    });
+
+    // Делегирование для keydown события (для телефона)
+    document.addEventListener('keydown', function(e) {
+        if (e.target.matches('#fluentform_4 .ff-el-phone')) {
+            handlePhoneKeydown(e);
+        }
+    });
+
+    // Функция форматирования телефона
+    function formatPhoneNumber(e) {
+        let value = e.target.value.replace(/\D/g, '');
+
+        // Заменяем 8 на 7
+        if (value.startsWith('8')) {
+            value = '7' + value.slice(1);
+        }
+
+        // Добавляем 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;
+    }
+
+    // Функция обработки клавиш для телефона
+    function handlePhoneKeydown(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);
+            }
+        }
+    }
+});