Good-Production/Fakel-Gym
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

переработал систему модалок и добавил блоки

Browse Source
This commit is contained in:
GP_DEV
2025-06-07 23:28:58 +03:00
parent 9aa5906efa
commit 5e346cfa36
10 changed files with 348 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
css/app.css
View File

@@ -8,12 +8,10 @@
"Courier New", monospace; "Courier New", monospace;
--color-blue-50: oklch(0.97 0.014 254.604); --color-blue-50: oklch(0.97 0.014 254.604);
--color-blue-500: oklch(0.623 0.214 259.815); --color-blue-500: oklch(0.623 0.214 259.815);
--color-blue-600: oklch(0.546 0.245 262.881);
--color-blue-800: oklch(0.424 0.199 265.638); --color-blue-800: oklch(0.424 0.199 265.638);
--color-blue-900: oklch(0.379 0.146 265.522); --color-blue-900: oklch(0.379 0.146 265.522);
--color-gray-100: oklch(0.967 0.003 264.542); --color-gray-100: oklch(0.967 0.003 264.542);
--color-gray-200: oklch(0.928 0.006 264.531); --color-gray-200: oklch(0.928 0.006 264.531);
--color-gray-300: oklch(0.872 0.01 258.338);
--color-gray-500: oklch(0.551 0.027 264.364); --color-gray-500: oklch(0.551 0.027 264.364);
--color-gray-600: oklch(0.446 0.03 256.802); --color-gray-600: oklch(0.446 0.03 256.802);
--color-gray-700: oklch(0.373 0.034 259.733); --color-gray-700: oklch(0.373 0.034 259.733);
@@ -38,7 +36,6 @@
--text-5xl: var(--wp--preset--font-size--5xl, 3rem); --text-5xl: var(--wp--preset--font-size--5xl, 3rem);
--text-5xl--line-height: 1; --text-5xl--line-height: 1;
--font-weight-light: 300; --font-weight-light: 300;
--font-weight-medium: 500;
--font-weight-semibold: 600; --font-weight-semibold: 600;
--font-weight-bold: 700; --font-weight-bold: 700;
--font-weight-extrabold: 800; --font-weight-extrabold: 800;
@@ -47,7 +44,6 @@
--radius-md: 0.375rem; --radius-md: 0.375rem;
--radius-lg: 0.5rem; --radius-lg: 0.5rem;
--blur-sm: 8px; --blur-sm: 8px;
--aspect-video: 16 / 9;
--default-transition-duration: 150ms; --default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans); --default-font-family: var(--font-sans);
@@ -327,6 +323,9 @@
.mt-\[20px\] { .mt-\[20px\] {
margin-top: 20px; margin-top: 20px;
} }
.mt-\[22px\] {
margin-top: 22px;
}
.mt-\[24px\] { .mt-\[24px\] {
margin-top: 24px; margin-top: 24px;
} }
@@ -342,8 +341,8 @@
.mt-\[50px\] { .mt-\[50px\] {
margin-top: 50px; margin-top: 50px;
} }
.mr-\[8px\] { .mt-auto {
margin-right: 8px; margin-top: auto;
} }
.mb-1 { .mb-1 {
margin-bottom: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 1);
@@ -369,11 +368,14 @@
.mb-\[20px\] { .mb-\[20px\] {
margin-bottom: 20px; margin-bottom: 20px;
} }
.mb-\[24px\] {
margin-bottom: 24px;
}
.mb-\[30px\] { .mb-\[30px\] {
margin-bottom: 30px; margin-bottom: 30px;
} }
.mb-\[60px\] { .mb-\[40px\] {
margin-bottom: 60px; margin-bottom: 40px;
} }
.block { .block {
display: block; display: block;
@@ -390,9 +392,6 @@
.inline-block { .inline-block {
display: inline-block; display: inline-block;
} }
.aspect-video {
aspect-ratio: var(--aspect-video);
}
.h-1 { .h-1 {
height: calc(var(--spacing) * 1); height: calc(var(--spacing) * 1);
} }
@@ -408,12 +407,12 @@
.h-\[8px\] { .h-\[8px\] {
height: 8px; height: 8px;
} }
.h-\[16px\] {
height: 16px;
}
.h-\[24px\] { .h-\[24px\] {
height: 24px; height: 24px;
} }
.h-\[32px\] {
height: 32px;
}
.h-\[44px\] { .h-\[44px\] {
height: 44px; height: 44px;
} }
@@ -423,6 +422,9 @@
.h-\[60px\] { .h-\[60px\] {
height: 60px; height: 60px;
} }
.h-\[64px\] {
height: 64px;
}
.h-\[75px\] { .h-\[75px\] {
height: 75px; height: 75px;
} }
@@ -444,6 +446,9 @@
.h-full { .h-full {
height: 100%; height: 100%;
} }
.max-h-\[60px\] {
max-height: 60px;
}
.max-h-\[90vh\] { .max-h-\[90vh\] {
max-height: 90vh; max-height: 90vh;
} }
@@ -465,15 +470,18 @@
.w-\[8px\] { .w-\[8px\] {
width: 8px; width: 8px;
} }
.w-\[16px\] {
width: 16px;
}
.w-\[24px\] { .w-\[24px\] {
width: 24px; width: 24px;
} }
.w-\[32px\] {
width: 32px;
}
.w-\[60px\] { .w-\[60px\] {
width: 60px; width: 60px;
} }
.w-\[64px\] {
width: 64px;
}
.w-\[80px\] { .w-\[80px\] {
width: 80px; width: 80px;
} }
@@ -491,12 +499,18 @@
.max-w-2xl { .max-w-2xl {
max-width: var(--container-2xl); max-width: var(--container-2xl);
} }
.max-w-\[60px\] {
max-width: 60px;
}
.max-w-\[210px\] { .max-w-\[210px\] {
max-width: 210px; max-width: 210px;
} }
.max-w-\[281px\] { .max-w-\[281px\] {
max-width: 281px; max-width: 281px;
} }
.max-w-\[300px\] {
max-width: 300px;
}
.max-w-\[380px\] { .max-w-\[380px\] {
max-width: 380px; max-width: 380px;
} }
@@ -556,9 +570,6 @@
.resize { .resize {
resize: both; resize: both;
} }
.resize-none {
resize: none;
}
.grid-cols-1 { .grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr));
} }
@@ -617,11 +628,6 @@
margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
} }
:where(.space-y-\[16px\] > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(16px * var(--tw-space-y-reverse));
margin-block-end: calc(16px * calc(1 - var(--tw-space-y-reverse)));
}
.overflow-hidden { .overflow-hidden {
overflow: hidden; overflow: hidden;
} }
@@ -637,9 +643,6 @@
.rounded-\[5px\] { .rounded-\[5px\] {
border-radius: 5px; border-radius: 5px;
} }
.rounded-\[6px\] {
border-radius: 6px;
}
.rounded-\[8px\] { .rounded-\[8px\] {
border-radius: 8px; border-radius: 8px;
} }
@@ -704,15 +707,18 @@
.border-\[\#e5e7eb\] { .border-\[\#e5e7eb\] {
border-color: #e5e7eb; border-color: #e5e7eb;
} }
.border-gray-300 {
border-color: var(--color-gray-300);
}
.border-primary { .border-primary {
border-color: var(--color-primary); border-color: var(--color-primary);
} }
.border-transparent { .border-transparent {
border-color: transparent; border-color: transparent;
} }
.bg-\[\#3b82f6\] {
background-color: #3b82f6;
}
.bg-\[\#10b981\] {
background-color: #10b981;
}
.bg-\[\#222\] { .bg-\[\#222\] {
background-color: #222; background-color: #222;
} }
@@ -740,18 +746,12 @@
.bg-blue-50 { .bg-blue-50 {
background-color: var(--color-blue-50); background-color: var(--color-blue-50);
} }
.bg-blue-500 {
background-color: var(--color-blue-500);
}
.bg-gray-100 { .bg-gray-100 {
background-color: var(--color-gray-100); background-color: var(--color-gray-100);
} }
.bg-gray-200 { .bg-gray-200 {
background-color: var(--color-gray-200); background-color: var(--color-gray-200);
} }
.bg-gray-500 {
background-color: var(--color-gray-500);
}
.bg-primary { .bg-primary {
background-color: var(--color-primary); background-color: var(--color-primary);
} }
@@ -775,9 +775,6 @@
.p-\[10px\] { .p-\[10px\] {
padding: 10px; padding: 10px;
} }
.p-\[24px\] {
padding: 24px;
}
.p-\[30px\] { .p-\[30px\] {
padding: 30px; padding: 30px;
} }
@@ -790,9 +787,6 @@
.px-6 { .px-6 {
padding-inline: calc(var(--spacing) * 6); padding-inline: calc(var(--spacing) * 6);
} }
.px-\[12px\] {
padding-inline: 12px;
}
.px-\[16px\] { .px-\[16px\] {
padding-inline: 16px; padding-inline: 16px;
} }
@@ -808,9 +802,6 @@
.py-2 { .py-2 {
padding-block: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 2);
} }
.py-\[8px\] {
padding-block: 8px;
}
.py-\[12px\] { .py-\[12px\] {
padding-block: 12px; padding-block: 12px;
} }
@@ -880,6 +871,10 @@
--tw-leading: 110%; --tw-leading: 110%;
line-height: 110%; line-height: 110%;
} }
.leading-\[120\%\] {
--tw-leading: 120%;
line-height: 120%;
}
.leading-\[125\%\] { .leading-\[125\%\] {
--tw-leading: 125%; --tw-leading: 125%;
line-height: 125%; line-height: 125%;
@@ -920,10 +915,6 @@
--tw-font-weight: var(--font-weight-light); --tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light); font-weight: var(--font-weight-light);
} }
.font-medium {
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
}
.font-semibold { .font-semibold {
--tw-font-weight: var(--font-weight-semibold); --tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
@@ -937,11 +928,14 @@
.text-\[\#222\] { .text-\[\#222\] {
color: #222; color: #222;
} }
.text-\[\#374151\] {
color: #374151;
}
.text-\[\#f8f8f8\] { .text-\[\#f8f8f8\] {
color: #f8f8f8; color: #f8f8f8;
} }
.text-blue-600 { .text-\[\#ffffff\] {
color: var(--color-blue-600); color: #ffffff;
} }
.text-blue-800 { .text-blue-800 {
color: var(--color-blue-800); color: var(--color-blue-800);
@@ -1043,10 +1037,6 @@
--tw-duration: 300ms; --tw-duration: 300ms;
transition-duration: 300ms; transition-duration: 300ms;
} }
.duration-\[300ms\] {
--tw-duration: 300ms;
transition-duration: 300ms;
}
@media (hover: hover) { @media (hover: hover) {
.hover\:translate-y-\[-1px\]:hover { .hover\:translate-y-\[-1px\]:hover {
--tw-translate-y: -1px; --tw-translate-y: -1px;
@@ -1054,8 +1044,8 @@
} }
} }
@media (hover: hover) { @media (hover: hover) {
.hover\:bg-blue-600:hover { .hover\:bg-\[\#2563eb\]:hover {
background-color: var(--color-blue-600); background-color: #2563eb;
} }
} }
@media (hover: hover) { @media (hover: hover) {
@@ -1063,11 +1053,6 @@
background-color: var(--color-gray-100); background-color: var(--color-gray-100);
} }
} }
@media (hover: hover) {
.hover\:bg-gray-600:hover {
background-color: var(--color-gray-600);
}
}
@media (hover: hover) { @media (hover: hover) {
.hover\:text-gray-700:hover { .hover\:text-gray-700:hover {
color: var(--color-gray-700); color: var(--color-gray-700);
@@ -1088,18 +1073,17 @@
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor); --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
} }
.focus\:ring-blue-500:focus { .focus\:ring-\[\#3b82f6\]:focus {
--tw-ring-color: var(--color-blue-500); --tw-ring-color: #3b82f6;
}
.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
} }
.focus\:outline-none:focus { .focus\:outline-none:focus {
--tw-outline-style: none; --tw-outline-style: none;
outline-style: none; outline-style: none;
} }
@media (width < 768px) {
.max-\[768px\]\:mb-\[40px\] {
margin-bottom: 40px;
}
}
@media (width < 768px) { @media (width < 768px) {
.max-\[768px\]\:gap-\[20px\] { .max-\[768px\]\:gap-\[20px\] {
gap: 20px; gap: 20px;
@@ -1140,6 +1124,11 @@
font-size: 28px; font-size: 28px;
} }
} }
@media (width < 768px) {
.max-\[768px\]\:text-\[34px\] {
font-size: 34px;
}
}
@media (width < 768px) { @media (width < 768px) {
.max-\[768px\]\:text-\[36px\] { .max-\[768px\]\:text-\[36px\] {
font-size: 36px; font-size: 36px;

129
css/editor-style.css
View File

@@ -8,12 +8,10 @@
"Courier New", monospace; "Courier New", monospace;
--color-blue-50: oklch(0.97 0.014 254.604); --color-blue-50: oklch(0.97 0.014 254.604);
--color-blue-500: oklch(0.623 0.214 259.815); --color-blue-500: oklch(0.623 0.214 259.815);
--color-blue-600: oklch(0.546 0.245 262.881);
--color-blue-800: oklch(0.424 0.199 265.638); --color-blue-800: oklch(0.424 0.199 265.638);
--color-blue-900: oklch(0.379 0.146 265.522); --color-blue-900: oklch(0.379 0.146 265.522);
--color-gray-100: oklch(0.967 0.003 264.542); --color-gray-100: oklch(0.967 0.003 264.542);
--color-gray-200: oklch(0.928 0.006 264.531); --color-gray-200: oklch(0.928 0.006 264.531);
--color-gray-300: oklch(0.872 0.01 258.338);
--color-gray-500: oklch(0.551 0.027 264.364); --color-gray-500: oklch(0.551 0.027 264.364);
--color-gray-600: oklch(0.446 0.03 256.802); --color-gray-600: oklch(0.446 0.03 256.802);
--color-gray-700: oklch(0.373 0.034 259.733); --color-gray-700: oklch(0.373 0.034 259.733);
@@ -38,7 +36,6 @@
--text-5xl: var(--wp--preset--font-size--5xl, 3rem); --text-5xl: var(--wp--preset--font-size--5xl, 3rem);
--text-5xl--line-height: 1; --text-5xl--line-height: 1;
--font-weight-light: 300; --font-weight-light: 300;
--font-weight-medium: 500;
--font-weight-semibold: 600; --font-weight-semibold: 600;
--font-weight-bold: 700; --font-weight-bold: 700;
--font-weight-extrabold: 800; --font-weight-extrabold: 800;
@@ -47,7 +44,6 @@
--radius-md: 0.375rem; --radius-md: 0.375rem;
--radius-lg: 0.5rem; --radius-lg: 0.5rem;
--blur-sm: 8px; --blur-sm: 8px;
--aspect-video: 16 / 9;
--default-transition-duration: 150ms; --default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans); --default-font-family: var(--font-sans);
@@ -327,6 +323,9 @@
.mt-\[20px\] { .mt-\[20px\] {
margin-top: 20px; margin-top: 20px;
} }
.mt-\[22px\] {
margin-top: 22px;
}
.mt-\[24px\] { .mt-\[24px\] {
margin-top: 24px; margin-top: 24px;
} }
@@ -342,8 +341,8 @@
.mt-\[50px\] { .mt-\[50px\] {
margin-top: 50px; margin-top: 50px;
} }
.mr-\[8px\] { .mt-auto {
margin-right: 8px; margin-top: auto;
} }
.mb-1 { .mb-1 {
margin-bottom: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 1);
@@ -369,11 +368,14 @@
.mb-\[20px\] { .mb-\[20px\] {
margin-bottom: 20px; margin-bottom: 20px;
} }
.mb-\[24px\] {
margin-bottom: 24px;
}
.mb-\[30px\] { .mb-\[30px\] {
margin-bottom: 30px; margin-bottom: 30px;
} }
.mb-\[60px\] { .mb-\[40px\] {
margin-bottom: 60px; margin-bottom: 40px;
} }
.block { .block {
display: block; display: block;
@@ -390,9 +392,6 @@
.inline-block { .inline-block {
display: inline-block; display: inline-block;
} }
.aspect-video {
aspect-ratio: var(--aspect-video);
}
.h-1 { .h-1 {
height: calc(var(--spacing) * 1); height: calc(var(--spacing) * 1);
} }
@@ -408,12 +407,12 @@
.h-\[8px\] { .h-\[8px\] {
height: 8px; height: 8px;
} }
.h-\[16px\] {
height: 16px;
}
.h-\[24px\] { .h-\[24px\] {
height: 24px; height: 24px;
} }
.h-\[32px\] {
height: 32px;
}
.h-\[44px\] { .h-\[44px\] {
height: 44px; height: 44px;
} }
@@ -423,6 +422,9 @@
.h-\[60px\] { .h-\[60px\] {
height: 60px; height: 60px;
} }
.h-\[64px\] {
height: 64px;
}
.h-\[75px\] { .h-\[75px\] {
height: 75px; height: 75px;
} }
@@ -444,6 +446,9 @@
.h-full { .h-full {
height: 100%; height: 100%;
} }
.max-h-\[60px\] {
max-height: 60px;
}
.max-h-\[90vh\] { .max-h-\[90vh\] {
max-height: 90vh; max-height: 90vh;
} }
@@ -465,15 +470,18 @@
.w-\[8px\] { .w-\[8px\] {
width: 8px; width: 8px;
} }
.w-\[16px\] {
width: 16px;
}
.w-\[24px\] { .w-\[24px\] {
width: 24px; width: 24px;
} }
.w-\[32px\] {
width: 32px;
}
.w-\[60px\] { .w-\[60px\] {
width: 60px; width: 60px;
} }
.w-\[64px\] {
width: 64px;
}
.w-\[80px\] { .w-\[80px\] {
width: 80px; width: 80px;
} }
@@ -486,12 +494,18 @@
.max-w-2xl { .max-w-2xl {
max-width: var(--container-2xl); max-width: var(--container-2xl);
} }
.max-w-\[60px\] {
max-width: 60px;
}
.max-w-\[210px\] { .max-w-\[210px\] {
max-width: 210px; max-width: 210px;
} }
.max-w-\[281px\] { .max-w-\[281px\] {
max-width: 281px; max-width: 281px;
} }
.max-w-\[300px\] {
max-width: 300px;
}
.max-w-\[380px\] { .max-w-\[380px\] {
max-width: 380px; max-width: 380px;
} }
@@ -551,9 +565,6 @@
.resize { .resize {
resize: both; resize: both;
} }
.resize-none {
resize: none;
}
.grid-cols-1 { .grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr));
} }
@@ -612,11 +623,6 @@
margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
} }
:where(.space-y-\[16px\] > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(16px * var(--tw-space-y-reverse));
margin-block-end: calc(16px * calc(1 - var(--tw-space-y-reverse)));
}
.overflow-hidden { .overflow-hidden {
overflow: hidden; overflow: hidden;
} }
@@ -632,9 +638,6 @@
.rounded-\[5px\] { .rounded-\[5px\] {
border-radius: 5px; border-radius: 5px;
} }
.rounded-\[6px\] {
border-radius: 6px;
}
.rounded-\[8px\] { .rounded-\[8px\] {
border-radius: 8px; border-radius: 8px;
} }
@@ -699,15 +702,18 @@
.border-\[\#e5e7eb\] { .border-\[\#e5e7eb\] {
border-color: #e5e7eb; border-color: #e5e7eb;
} }
.border-gray-300 {
border-color: var(--color-gray-300);
}
.border-primary { .border-primary {
border-color: var(--color-primary); border-color: var(--color-primary);
} }
.border-transparent { .border-transparent {
border-color: transparent; border-color: transparent;
} }
.bg-\[\#3b82f6\] {
background-color: #3b82f6;
}
.bg-\[\#10b981\] {
background-color: #10b981;
}
.bg-\[\#222\] { .bg-\[\#222\] {
background-color: #222; background-color: #222;
} }
@@ -735,18 +741,12 @@
.bg-blue-50 { .bg-blue-50 {
background-color: var(--color-blue-50); background-color: var(--color-blue-50);
} }
.bg-blue-500 {
background-color: var(--color-blue-500);
}
.bg-gray-100 { .bg-gray-100 {
background-color: var(--color-gray-100); background-color: var(--color-gray-100);
} }
.bg-gray-200 { .bg-gray-200 {
background-color: var(--color-gray-200); background-color: var(--color-gray-200);
} }
.bg-gray-500 {
background-color: var(--color-gray-500);
}
.bg-primary { .bg-primary {
background-color: var(--color-primary); background-color: var(--color-primary);
} }
@@ -770,9 +770,6 @@
.p-\[10px\] { .p-\[10px\] {
padding: 10px; padding: 10px;
} }
.p-\[24px\] {
padding: 24px;
}
.p-\[30px\] { .p-\[30px\] {
padding: 30px; padding: 30px;
} }
@@ -785,9 +782,6 @@
.px-6 { .px-6 {
padding-inline: calc(var(--spacing) * 6); padding-inline: calc(var(--spacing) * 6);
} }
.px-\[12px\] {
padding-inline: 12px;
}
.px-\[16px\] { .px-\[16px\] {
padding-inline: 16px; padding-inline: 16px;
} }
@@ -803,9 +797,6 @@
.py-2 { .py-2 {
padding-block: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 2);
} }
.py-\[8px\] {
padding-block: 8px;
}
.py-\[12px\] { .py-\[12px\] {
padding-block: 12px; padding-block: 12px;
} }
@@ -875,6 +866,10 @@
--tw-leading: 110%; --tw-leading: 110%;
line-height: 110%; line-height: 110%;
} }
.leading-\[120\%\] {
--tw-leading: 120%;
line-height: 120%;
}
.leading-\[125\%\] { .leading-\[125\%\] {
--tw-leading: 125%; --tw-leading: 125%;
line-height: 125%; line-height: 125%;
@@ -915,10 +910,6 @@
--tw-font-weight: var(--font-weight-light); --tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light); font-weight: var(--font-weight-light);
} }
.font-medium {
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
}
.font-semibold { .font-semibold {
--tw-font-weight: var(--font-weight-semibold); --tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
@@ -932,11 +923,14 @@
.text-\[\#222\] { .text-\[\#222\] {
color: #222; color: #222;
} }
.text-\[\#374151\] {
color: #374151;
}
.text-\[\#f8f8f8\] { .text-\[\#f8f8f8\] {
color: #f8f8f8; color: #f8f8f8;
} }
.text-blue-600 { .text-\[\#ffffff\] {
color: var(--color-blue-600); color: #ffffff;
} }
.text-blue-800 { .text-blue-800 {
color: var(--color-blue-800); color: var(--color-blue-800);
@@ -1038,10 +1032,6 @@
--tw-duration: 300ms; --tw-duration: 300ms;
transition-duration: 300ms; transition-duration: 300ms;
} }
.duration-\[300ms\] {
--tw-duration: 300ms;
transition-duration: 300ms;
}
@media (hover: hover) { @media (hover: hover) {
.hover\:translate-y-\[-1px\]:hover { .hover\:translate-y-\[-1px\]:hover {
--tw-translate-y: -1px; --tw-translate-y: -1px;
@@ -1049,8 +1039,8 @@
} }
} }
@media (hover: hover) { @media (hover: hover) {
.hover\:bg-blue-600:hover { .hover\:bg-\[\#2563eb\]:hover {
background-color: var(--color-blue-600); background-color: #2563eb;
} }
} }
@media (hover: hover) { @media (hover: hover) {
@@ -1058,11 +1048,6 @@
background-color: var(--color-gray-100); background-color: var(--color-gray-100);
} }
} }
@media (hover: hover) {
.hover\:bg-gray-600:hover {
background-color: var(--color-gray-600);
}
}
@media (hover: hover) { @media (hover: hover) {
.hover\:text-gray-700:hover { .hover\:text-gray-700:hover {
color: var(--color-gray-700); color: var(--color-gray-700);
@@ -1083,18 +1068,17 @@
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor); --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
} }
.focus\:ring-blue-500:focus { .focus\:ring-\[\#3b82f6\]:focus {
--tw-ring-color: var(--color-blue-500); --tw-ring-color: #3b82f6;
}
.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
} }
.focus\:outline-none:focus { .focus\:outline-none:focus {
--tw-outline-style: none; --tw-outline-style: none;
outline-style: none; outline-style: none;
} }
@media (width < 768px) {
.max-\[768px\]\:mb-\[40px\] {
margin-bottom: 40px;
}
}
@media (width < 768px) { @media (width < 768px) {
.max-\[768px\]\:gap-\[20px\] { .max-\[768px\]\:gap-\[20px\] {
gap: 20px; gap: 20px;
@@ -1135,6 +1119,11 @@
font-size: 28px; font-size: 28px;
} }
} }
@media (width < 768px) {
.max-\[768px\]\:text-\[34px\] {
font-size: 34px;
}
}
@media (width < 768px) { @media (width < 768px) {
.max-\[768px\]\:text-\[36px\] { .max-\[768px\]\:text-\[36px\] {
font-size: 36px; font-size: 36px;

5
functions.php
View File

@@ -117,7 +117,7 @@ function get_current_room() {
$modal_file = get_template_directory() . '/template-parts/la-components/functions/modals.php'; $modal_file = get_template_directory() . '/template-parts/la-components/functions/modals.php';
$block_file = get_template_directory() . '/template-parts/la-components/functions/blocks.php'; $block_file = get_template_directory() . '/template-parts/la-components/functions/blocks.php';
$forms_file = get_template_directory() . '/template-parts/la-components/functions/forms.php';
if (file_exists($block_file)) { if (file_exists($block_file)) {
require_once $block_file; require_once $block_file;
} }
@@ -125,6 +125,9 @@ if (file_exists($modal_file)) {
require_once $modal_file; require_once $modal_file;
} }
if (file_exists($forms_file)) {
require_once $forms_file;
}
function enqueue_swiper_assets() { function enqueue_swiper_assets() {
wp_enqueue_style( wp_enqueue_style(
'swiper-css', 'swiper-css',

4
mix-manifest.json
View File

@@ -1,5 +1,5 @@
{ {
"/js/app.js": "/js/app.js?id=37f0a4a3aee430ac7ba337b53d7bdc4b", "/js/app.js": "/js/app.js?id=37f0a4a3aee430ac7ba337b53d7bdc4b",
"/css/editor-style.css": "/css/editor-style.css?id=516c8e57ec0a4cf555760c6db2cbf719", "/css/editor-style.css": "/css/editor-style.css?id=b2b6dc9c2f83963566f9d157921f4d2e",
"/css/app.css": "/css/app.css?id=7fe830b2a1b256d9bf28f7962a82ca5a" "/css/app.css": "/css/app.css?id=387c86ed6537155e6b0a08c0d9151235"
} }

52
template-parts/la-components/blocks/club-cards-block/club-cards-block.php
View File

@@ -29,36 +29,57 @@ if (!function_exists('get_club_cards_for_current_language')) {
} }
$cards = get_club_cards_for_current_language(); $cards = get_club_cards_for_current_language();
$heading = get_field('heading', $block['id']);
?> ?>
<div id="<?php echo esc_attr($block_id); ?>" class="container mx-auto mt-[24px] <?php echo esc_attr($class_name); ?>"> <section id="<?php echo esc_attr($block_id); ?>" class="<?php echo esc_attr($class_name); ?>">
<div class="container mx-auto mt-[24px]">
<?php if ($heading) : ?>
<h2 class="text-[32px] font-bold mt-[24px]"><?php echo esc_html($heading); ?></h2>
<?php endif; ?>
<?php if ($cards): ?> <?php if ($cards): ?>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[24px]"> <div class="mt-[24px] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[30px] max-[768px]:gap-[20px]">
<?php foreach ($cards as $card): ?> <?php foreach ($cards as $card): ?>
<div class="club-card rounded-[8px] overflow-hidden border transition-shadow "> <div class="bg-[#ffffff] border-[1px] border-[#e5e7eb] rounded-[16px] overflow-hidden shadow-lg hover:shadow-xl transition-shadow ">
<?php if (has_post_thumbnail($card->ID)): ?> <?php
<div class="aspect-video overflow-hidden"> $card_image = get_field('image', $card->ID);
<?php echo get_the_post_thumbnail($card->ID, 'medium', ['class' => 'w-full h-full object-cover']); ?> if ($card_image): ?>
<div class="overflow-hidden max-w-[60px] max-h-[60px] mx-auto mt-[22px] rounded-full">
<img src="<?php echo esc_url($card_image['url']); ?>"
alt="<?php echo esc_attr($card_image['alt']); ?>"
class="w-full h-full object-cover" />
</div> </div>
<?php endif; ?> <?php endif; ?>
<div class="p-[24px]"> <div class="p-[30px] max-[768px]:p-[20px]">
<h3 class="text-[20px] font-semibold mb-[12px]"> <?php $card_heading = get_field('heading', $card->ID); ?>
<?php echo get_the_title($card->ID); ?> <?php if ($card_heading): ?>
<h3 class="text-[24px] max-[768px]:text-[20px] font-semibold text-[#1f2937] mb-[16px] text-center">
<?php echo esc_html($card_heading); ?>
</h3> </h3>
<?php endif; ?>
<?php if (get_the_excerpt($card->ID)): ?> <?php $card_description = get_field('description', $card->ID); ?>
<div class="text-gray-600 mb-[16px]"> <?php if ($card_description): ?>
<?php echo get_the_excerpt($card->ID); ?> <div class="text-[16px] max-[768px]:text-[14px] text-[#6b7280] leading-[150%] text-center mb-[16px]">
<?php echo wp_kses_post($card_description); ?>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php $card_price = get_field('price', $card->ID); ?>
<?php if ($card_price): ?>
<div class="text-[20px] max-[768px]:text-[18px] font-bold text-[#1f2937] text-center mb-[24px]">
<span>От</span> <?php echo esc_html($card_price); ?> Р.
</div>
<div class="text-center"> <?php endif; ?>
<div class="text-center mt-auto">
<?php $popup_button = get_field('popup_button', $card->ID); ?>
<button data-modal="club-card" <button data-modal="club-card"
data-card-id="<?php echo $card->ID; ?>" data-card-id="<?php echo $card->ID; ?>"
class="inline-block px-[24px] py-[12px] bg-blue-500 text-white rounded-[6px] hover:bg-blue-600 transition-colors "> class="inline-block cursor-pointer px-[24px] py-[12px] bg-[#3b82f6] text-white rounded-[8px] hover:bg-[#2563eb] transition-colors ">
Подробнее <?php echo $popup_button ? esc_html($popup_button) : 'Подробнее'; ?>
</button> </button>
</div> </div>
</div> </div>
@@ -67,3 +88,4 @@ $cards = get_club_cards_for_current_language();
</div> </div>
<?php endif; ?> <?php endif; ?>
</div> </div>
</section>

2
template-parts/la-components/blocks/tiles-block/tiles-block.php
View File

@@ -31,7 +31,7 @@ $tiles_repeater = get_field('tiles_repeater');
<?php if ($tiles_repeater) : ?> <?php if ($tiles_repeater) : ?>
<div class="mt-[24px] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[30px] max-[768px]:gap-[20px]"> <div class="mt-[24px] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[30px] max-[768px]:gap-[20px]">
<?php foreach ($tiles_repeater as $tile) : ?> <?php foreach ($tiles_repeater as $tile) : ?>
<div class="bg-[#ffffff] border-[1px] border-[#e5e7eb] rounded-[16px] p-[30px] max-[768px]:p-[20px] shadow-lg hover:shadow-xl transition-shadow duration-300"> <div class="bg-[#ffffff] border-[1px] border-[#e5e7eb] rounded-[16px] p-[30px] max-[768px]:p-[20px] shadow-lg hover:shadow-xl transition-shadow ">
<?php if (!empty($tile['image'])) : ?> <?php if (!empty($tile['image'])) : ?>
<div class="w-[80px] h-[80px] rounded-full overflow-hidden mb-[20px] mx-auto bg-[#f3f4f6] flex items-center justify-center"> <div class="w-[80px] h-[80px] rounded-full overflow-hidden mb-[20px] mx-auto bg-[#f3f4f6] flex items-center justify-center">

39
template-parts/la-components/functions/blocks.php
View File

@@ -73,6 +73,29 @@ function register_acf_blocks() {
), ),
)); ));
acf_register_block_type(array(
'name' => 'form-block',
'title' => __('Блок формы'),
'description' => __('Блок формы обратной связи'),
'render_template' => 'template-parts/la-components/blocks/form-block/form-block.php',
'category' => 'theme-blocks',
'icon' => 'id-alt',
'keywords' => array('форма', 'форма записи', 'имя', 'телефон'),
'supports' => array(
'align' => array('wide', 'full'),
'anchor' => true,
'customClassName' => true,
),
'enqueue_assets' => function() {
wp_enqueue_style(
'form-block-css',
get_template_directory_uri() . '/template-parts/la-components/blocks/form-block/form-block.css',
[],
'1.0.0'
);
}
));
acf_register_block_type(array( acf_register_block_type(array(
'name' => 'tiles-block', 'name' => 'tiles-block',
'title' => __('Блок с плитками'), 'title' => __('Блок с плитками'),
@@ -88,6 +111,22 @@ function register_acf_blocks() {
), ),
)); ));
acf_register_block_type(array(
'name' => 'advantages-block',
'title' => __('Блок преимуществ'),
'description' => __('Блок с преимуществами'),
'render_template' => 'template-parts/la-components/blocks/advantages-block/advantages-block.php',
'category' => 'theme-blocks',
'icon' => 'grid-view',
'keywords' => array('преимущества', 'карточки', 'advantages', 'преимущество'),
'supports' => array(
'align' => array('wide', 'full'),
'anchor' => true,
'customClassName' => true,
),
));
acf_register_block_type(array( acf_register_block_type(array(
'name' => 'reviews-block', 'name' => 'reviews-block',
'title' => __('Блок с отзывами'), 'title' => __('Блок с отзывами'),

13
template-parts/la-components/functions/modals.php
View File

@@ -5,15 +5,13 @@ function enqueue_theme_scripts() {
'modals-js', 'modals-js',
get_template_directory_uri() . '/template-parts/la-components/js/modals.js', get_template_directory_uri() . '/template-parts/la-components/js/modals.js',
array('jquery'), array('jquery'),
'1.0.0', '2.0.0',
true true
); );
} }
add_action('wp_enqueue_scripts', 'enqueue_theme_scripts'); add_action('wp_enqueue_scripts', 'enqueue_theme_scripts');
// Вывод всех модалок в футере
function modal_system_container() { function modal_system_container() {
// Получаем список всех модалок
$modals_dir = get_template_directory() . '/template-parts/la-components/modals/'; $modals_dir = get_template_directory() . '/template-parts/la-components/modals/';
$modals = array(); $modals = array();
@@ -26,24 +24,17 @@ function modal_system_container() {
} }
} }
// общий контейнер
?> ?>
<div id="modal-overlay" class="fixed inset-0 bg-[rgba(0,0,0,0.5)] backdrop-blur-sm z-50 flex items-center justify-center p-4 opacity-0 invisible transition-all duration-300"> <div id="modal-overlay" class="fixed inset-0 bg-[rgba(0,0,0,0.5)] backdrop-blur-sm z-50 flex items-center justify-center p-4 opacity-0 invisible transition-all duration-300">
<div class="bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] relative transform scale-90 transition-transform duration-300 overflow-hidden"> <div class="bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] relative transform scale-90 transition-transform duration-300 overflow-hidden">
<button id="modal-close" class="absolute top-4 right-4 z-10 w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors text-gray-500 hover:text-gray-700"> <button id="modal-close" class="absolute top-4 right-4 z-10 w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors text-gray-500 hover:text-gray-700">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg> </svg>
</button> </button>
<div id="modal-content" class="overflow-y-auto max-h-[90vh]"></div>
<!-- Контейнер для контента модалок -->
<div id="modal-content" class="overflow-y-auto max-h-[90vh]">
</div> </div>
</div> </div>
</div>
<div id="modal-templates" class="hidden"> <div id="modal-templates" class="hidden">
<?php foreach ($modals as $modal_name): ?> <?php foreach ($modals as $modal_name): ?>

157
template-parts/la-components/js/modals.js
View File

@@ -1,13 +1,13 @@
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
window.ModalSystem = {
const ModalSystem = {
overlay: null, overlay: null,
content: null, content: null,
container: null, container: null,
closeBtn: null, closeBtn: null,
isOpen: false, modalStack: [],
currentModal: null,
init: function() { init() {
this.overlay = document.getElementById('modal-overlay'); this.overlay = document.getElementById('modal-overlay');
if (!this.overlay) return; if (!this.overlay) return;
@@ -16,21 +16,20 @@ document.addEventListener('DOMContentLoaded', function() {
this.closeBtn = document.getElementById('modal-close'); this.closeBtn = document.getElementById('modal-close');
this.bindEvents(); this.bindEvents();
this.initFormHandling();
}, },
bindEvents: function() {
bindEvents() {
if (this.closeBtn) { if (this.closeBtn) {
this.closeBtn.addEventListener('click', () => this.close()); this.closeBtn.addEventListener('click', () => this.close());
} }
this.overlay.addEventListener('click', (e) => { this.overlay.addEventListener('click', (e) => {
if (e.target === this.overlay) { if (e.target === this.overlay) this.close();
this.close();
}
}); });
document.addEventListener('keydown', (e) => { document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && this.isOpen) { if (e.key === 'Escape' && this.isOpen()) this.close();
this.close();
}
}); });
document.addEventListener('click', (e) => { document.addEventListener('click', (e) => {
@@ -38,7 +37,8 @@ document.addEventListener('DOMContentLoaded', function() {
if (modalTrigger) { if (modalTrigger) {
e.preventDefault(); e.preventDefault();
const modalName = modalTrigger.getAttribute('data-modal'); const modalName = modalTrigger.getAttribute('data-modal');
this.open(modalName); const cardId = modalTrigger.getAttribute('data-card-id');
this.open(modalName, { cardId });
} }
}); });
@@ -50,71 +50,140 @@ document.addEventListener('DOMContentLoaded', function() {
}); });
}, },
initFormHandling() {
console.log('Form handling initialized');
open: function(modalName) { document.addEventListener('fluentform_submission_success', (e) => {
if (this.isOpen) { const form = e.target.closest('.ff-el-form-wrapper form');
this.close(); if (form) {
setTimeout(() => {
if (this.isOpen()) {
this.replace('form-success');
} else {
this.open('form-success');
}
}, 300);
}
}, true);
if (typeof jQuery !== 'undefined') {
jQuery(document).ajaxSuccess((event, xhr, settings) => {
if (settings.url && settings.url.includes('admin-ajax.php') &&
settings.data && settings.data.includes('fluentform_submit')) {
try {
const response = JSON.parse(xhr.responseText);
console.log('Response:', response);
if (response.success && response.data && response.data.insert_id) {
setTimeout(() => {
if (this.isOpen()) {
this.replace('form-success');
} else {
this.open('form-success');
}
}, 300);
}
} catch (e) {
}
}
});
} else {
}
},
open(modalName, params = {}) {
const template = document.getElementById(`modal-template-${modalName}`);
if (!template) return;
this.modalStack.push({
name: modalName,
params: params,
content: template.innerHTML
});
this.content.innerHTML = template.innerHTML;
if (this.modalStack.length === 1) {
this.show();
} }
const template = document.getElementById(`modal-template-${modalName}`); this.injectParams(params);
if (!template) { },
console.error(`модальное окно ${modalName} не найдено`);
replace(modalName, params = {}) {
if (this.modalStack.length === 0) {
this.open(modalName, params);
return; return;
} }
this.currentModal = modalName; const template = document.getElementById(`modal-template-${modalName}`);
if (!template) return;
this.modalStack[this.modalStack.length - 1] = {
name: modalName,
params: params,
content: template.innerHTML
};
this.content.innerHTML = template.innerHTML; this.content.innerHTML = template.innerHTML;
this.show(); this.injectParams(params);
}, },
show: function() { injectParams(params) {
if (params.cardId) {
setTimeout(() => {
const hiddenInput = this.content.querySelector('input[name="hidden"]');
if (hiddenInput && !hiddenInput.dataset.cardInjected) {
const currentValue = hiddenInput.value || '';
hiddenInput.value = currentValue + ` | Карта ID: ${params.cardId}`;
hiddenInput.dataset.cardInjected = 'true';
}
}, 100);
}
},
show() {
this.overlay.classList.remove('opacity-0', 'invisible'); this.overlay.classList.remove('opacity-0', 'invisible');
this.overlay.classList.add('opacity-100', 'visible'); this.overlay.classList.add('opacity-100', 'visible');
setTimeout(() => { setTimeout(() => {
this.container.classList.remove('scale-90'); this.container.classList.remove('scale-90');
this.container.classList.add('scale-100'); this.container.classList.add('scale-100');
}, 10); }, 10);
this.isOpen = true;
setTimeout(() => { setTimeout(() => {
this.closeBtn.focus(); if (this.closeBtn) this.closeBtn.focus();
}, 350); }, 350);
}, },
close: function() { close() {
if (!this.isOpen) return; if (this.modalStack.length === 0) return;
this.modalStack.pop();
if (this.modalStack.length > 0) {
const prevModal = this.modalStack[this.modalStack.length - 1];
this.content.innerHTML = prevModal.content;
this.injectParams(prevModal.params);
} else {
this.hide();
}
},
hide() {
this.container.classList.remove('scale-100'); this.container.classList.remove('scale-100');
this.container.classList.add('scale-90'); this.container.classList.add('scale-90');
this.overlay.classList.remove('opacity-100', 'visible'); this.overlay.classList.remove('opacity-100', 'visible');
this.overlay.classList.add('opacity-0', 'invisible'); this.overlay.classList.add('opacity-0', 'invisible');
this.isOpen = false; this.modalStack = [];
this.currentModal = null;
}, },
isOpen() {
getState: function() { return this.modalStack.length > 0;
return {
isOpen: this.isOpen,
currentModal: this.currentModal
};
} }
}; };
ModalSystem.init(); ModalSystem.init();
window.openModal = function(modalName) {
ModalSystem.open(modalName);
};
window.closeModal = function() {
ModalSystem.close();
};
}); });

98
template-parts/la-components/modals/modal-club-card.php
View File

@@ -1,90 +1,22 @@
<?php
<div class="bg-white max-w-lg w-full rounded-[8px]"> $form_id = '4';
<div class="p-[24px]"> $form_title = 'Заявка на клубную карту';
<h2 class="text-[24px] font-bold text-gray-900 mb-[16px]">
Заказать клубную карту
</h2>
<form class="space-y-[16px]"> $current_url = home_url($_SERVER['REQUEST_URI']);
<div> $page_title = get_the_title() ?: 'Главная страница';
<label for="name" class="block text-[14px] font-medium text-gray-700 mb-[8px]">
Имя *
</label>
<input type="text"
id="name"
name="name"
required
class="w-full px-[12px] py-[8px] border border-gray-300 rounded-[6px] focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div> $hidden_value = "Форма: {$form_title} | Страница: {$page_title} | URL: {$current_url}";
<label for="email" class="block text-[14px] font-medium text-gray-700 mb-[8px]"> ?>
Email *
</label>
<input type="email"
id="email"
name="email"
required
class="w-full px-[12px] py-[8px] border border-gray-300 rounded-[6px] focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div> <div class="p-[30px] max-[768px]:p-[20px]">
<label for="phone" class="block text-[14px] font-medium text-gray-700 mb-[8px]"> <h3 class="text-[24px] max-[768px]:text-[20px] font-bold text-[#1f2937] mb-[24px] text-center">
Телефон * <?php echo esc_html($form_title); ?>
</label> </h3>
<input type="tel"
id="phone"
name="phone"
required
class="w-full px-[12px] py-[8px] border border-gray-300 rounded-[6px] focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div> <div class="form-block-wrapper"
<label for="card-type" class="block text-[14px] font-medium text-gray-700 mb-[8px]"> data-form-id="<?php echo esc_attr($form_id); ?>"
Тип карты data-hidden-value="<?php echo esc_attr($hidden_value); ?>">
</label> <?php echo do_shortcode('[fluentform id="' . esc_attr($form_id) . '"]'); ?>
<select id="card-type"
name="card-type"
class="w-full px-[12px] py-[8px] border border-gray-300 rounded-[6px] focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="">Выберите тип карты</option>
<option value="basic">Базовая</option>
<option value="premium">Премиум</option>
<option value="vip">VIP</option>
</select>
</div>
<div>
<label for="message" class="block text-[14px] font-medium text-gray-700 mb-[8px]">
Комментарий
</label>
<textarea id="message"
name="message"
rows="3"
class="w-full px-[12px] py-[8px] border border-gray-300 rounded-[6px] focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"></textarea>
</div>
<div class="flex items-center">
<input type="checkbox"
id="agreement"
name="agreement"
required
class="mr-[8px] w-[16px] h-[16px] text-blue-600 border-gray-300 rounded focus:ring-blue-500">
<label for="agreement" class="text-[14px] text-gray-700">
Я согласен с обработкой персональных данных *
</label>
</div>
</form>
<div class="flex justify-end gap-[12px] mt-[24px]">
<button data-modal-close
type="button"
class="px-[24px] py-[12px] bg-gray-500 text-white rounded-[6px] hover:bg-gray-600 transition-colors duration-[300ms]">
Отмена
</button>
<button type="submit"
class="px-[24px] py-[12px] bg-blue-500 text-white rounded-[6px] hover:bg-blue-600 transition-colors duration-[300ms]">
Отправить заявку
</button>
</div>
</div> </div>
</div> </div>