{"id":6710,"date":"2026-01-07T11:48:23","date_gmt":"2026-01-07T11:48:23","guid":{"rendered":"https:\/\/fixlife.net\/?page_id=6710"},"modified":"2026-02-18T12:51:06","modified_gmt":"2026-02-18T12:51:06","slug":"nutritionform","status":"publish","type":"page","link":"https:\/\/fixlife.net\/index.php\/nutritionform\/","title":{"rendered":"\u0627\u0633\u062a\u0645\u0627\u0631\u0629 \u0628\u064a\u0627\u0646\u0627\u062a"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\u0627\u0633\u062a\u0645\u0627\u0631\u0629 \u0627\u0644\u0628\u062f\u0627\u064a\u0629 \u2013 Fix Life<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700;900&family=Tajawal:wght@400;500;700&display=swap\" rel=\"stylesheet\" \/>\r\n<style>\r\n \/* ====== RESET & BASE ====== *\/\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n \/* \u0623\u0644\u0648\u0627\u0646 \u0647\u0648\u064a\u0629 Fix Life *\/\r\n --clr-bg-gradient: linear-gradient(135deg, #0099a8 0%, #005f73 100%); \/* \u062e\u0644\u0641\u064a\u0629 \u062a\u0631\u0643\u0648\u0627\u0632 \u063a\u0627\u0645\u0642 *\/\r\n \r\n --clr-surface: #ffffff; \/* \u0643\u0627\u0631\u062a \u0623\u0628\u064a\u0636 \u0644\u0644\u0646\u0638\u0627\u0641\u0629 *\/\r\n --clr-card: #ffffff;\r\n \r\n --clr-primary: #0099a8; \/* \u0627\u0644\u062a\u0631\u0643\u0648\u0627\u0632 \u0627\u0644\u0623\u0633\u0627\u0633\u064a *\/\r\n --clr-accent: #8cc63f; \/* \u0627\u0644\u0623\u062e\u0636\u0631 \u0627\u0644\u0641\u0627\u062a\u062d (\u0648\u0631\u0642\u0629 \u0627\u0644\u0634\u062c\u0631) *\/\r\n --clr-dark-teal:#005f73; \/* \u0644\u0648\u0646 \u0627\u0644\u0646\u0635\u0648\u0635 \u0627\u0644\u0639\u0646\u0627\u0648\u064a\u0646 *\/\r\n \r\n --clr-text: #334155; \/* \u0644\u0648\u0646 \u0627\u0644\u0646\u0635 \u0627\u0644\u0631\u0645\u0627\u062f\u064a \u0627\u0644\u063a\u0627\u0645\u0642 \u0644\u0644\u0642\u0631\u0627\u0621\u0629 *\/\r\n --clr-muted: #94a3b8; \/* \u0631\u0645\u0627\u062f\u064a \u0641\u0627\u062a\u062d \u0644\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a *\/\r\n \r\n --clr-error: #ef4444;\r\n --clr-input-bg: #f8fafc; \/* \u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u062d\u0642\u0648\u0644 \u0641\u0627\u062a\u062d\u0629 \u062c\u062f\u0627\u064b *\/\r\n --clr-border: #e2e8f0; \/* \u062d\u062f\u0648\u062f \u0627\u0644\u062d\u0642\u0648\u0644 *\/\r\n \r\n --radius: 16px;\r\n --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n --shadow: 0 10px 40px -10px rgba(0, 95, 115, 0.15);\r\n }\r\n\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n background: var(--clr-bg-gradient);\r\n color: var(--clr-text);\r\n font-family: 'Cairo', sans-serif;\r\n min-height: 100vh;\r\n overflow-x: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n \/* ====== BACKGROUND TEXTURE (Bubbles effect) ====== *\/\r\n body::before {\r\n content: '';\r\n position: fixed; inset: 0;\r\n background: \r\n radial-gradient(circle at 10% 20%, rgba(255,255,255,0.1) 0%, transparent 20%),\r\n radial-gradient(circle at 90% 80%, rgba(140, 198, 63, 0.15) 0%, transparent 25%);\r\n pointer-events: none; z-index: 0;\r\n }\r\n\r\n \/* ====== WRAPPER ====== *\/\r\n .form-wrapper {\r\n position: relative; z-index: 1;\r\n max-width: 800px;\r\n width: 100%;\r\n margin: 0 auto;\r\n padding: 40px 20px 80px;\r\n }\r\n\r\n \/* ====== HEADER ====== *\/\r\n .form-header {\r\n text-align: center;\r\n margin-bottom: 30px;\r\n color: #fff; \/* \u0627\u0644\u0646\u0635 \u0623\u0628\u064a\u0636 \u0639\u0634\u0627\u0646 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u063a\u0627\u0645\u0642\u0629 *\/\r\n }\r\n .form-header .badge {\r\n display: inline-block;\r\n background: rgba(255,255,255,0.2);\r\n backdrop-filter: blur(5px);\r\n color: #fff;\r\n font-weight: 700;\r\n font-size: 0.85rem;\r\n padding: 6px 20px;\r\n border-radius: 50px;\r\n letter-spacing: 0.5px;\r\n margin-bottom: 12px;\r\n border: 1px solid rgba(255,255,255,0.3);\r\n }\r\n .form-header h1 {\r\n font-size: clamp(2rem, 5vw, 3rem);\r\n font-weight: 900;\r\n line-height: 1.2;\r\n margin-bottom: 8px;\r\n text-shadow: 0 4px 10px rgba(0,0,0,0.1);\r\n }\r\n .form-header p {\r\n color: rgba(255,255,255,0.9);\r\n font-size: 1.1rem;\r\n font-family: 'Tajawal', sans-serif;\r\n }\r\n\r\n \/* ====== PROGRESS BAR ====== *\/\r\n .progress-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0;\r\n margin-bottom: 30px;\r\n position: relative;\r\n padding: 0 10px;\r\n }\r\n .progress-track {\r\n position: absolute;\r\n top: 50%; transform: translateY(-50%);\r\n right: 20px; left: 20px;\r\n height: 4px;\r\n background: rgba(255,255,255,0.3);\r\n border-radius: 10px;\r\n z-index: 0;\r\n }\r\n .progress-track-fill {\r\n height: 100%;\r\n background: var(--clr-accent); \/* \u0627\u0644\u0623\u062e\u0636\u0631 *\/\r\n transition: width var(--transition);\r\n width: 0%;\r\n border-radius: 10px;\r\n box-shadow: 0 0 10px rgba(140, 198, 63, 0.5);\r\n }\r\n .progress-step-item {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n flex: 1;\r\n position: relative; z-index: 1;\r\n }\r\n .progress-circle {\r\n width: 40px; height: 40px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.9);\r\n border: 3px solid transparent;\r\n display: flex; align-items: center; justify-content: center;\r\n font-weight: 700; font-size: 1rem;\r\n color: var(--clr-primary);\r\n transition: var(--transition);\r\n box-shadow: 0 4px 10px rgba(0,0,0,0.1);\r\n }\r\n .progress-step-item.active .progress-circle {\r\n background: var(--clr-accent);\r\n color: #fff;\r\n transform: scale(1.2);\r\n box-shadow: 0 0 15px rgba(140, 198, 63, 0.6);\r\n }\r\n .progress-step-item.done .progress-circle {\r\n background: var(--clr-primary);\r\n color: #fff;\r\n }\r\n .progress-step-item.done .progress-circle::after {\r\n content: '\u2713';\r\n }\r\n .progress-step-item.done .progress-circle span { display: none; }\r\n \r\n .progress-label {\r\n font-size: 0.8rem;\r\n color: rgba(255,255,255,0.8);\r\n font-weight: 600;\r\n margin-top: 5px;\r\n transition: var(--transition);\r\n }\r\n .progress-step-item.active .progress-label { \r\n color: #fff; \r\n font-weight: 800;\r\n }\r\n\r\n \/* ====== CARD ====== *\/\r\n .form-card {\r\n background: var(--clr-card);\r\n border-radius: 24px;\r\n padding: clamp(24px, 5vw, 48px);\r\n box-shadow: 0 20px 50px rgba(0,0,0,0.15);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \/* \u0627\u0644\u0634\u0631\u064a\u0637 \u0627\u0644\u0645\u0644\u0648\u0646 \u0623\u0639\u0644\u0649 \u0627\u0644\u0643\u0627\u0631\u062a *\/\r\n .form-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 0; right: 0;\r\n height: 6px;\r\n background: linear-gradient(90deg, var(--clr-primary), var(--clr-accent));\r\n }\r\n\r\n \/* ====== STEP ====== *\/\r\n .form-step { display: none; animation: slideUp 0.4s ease forwards; }\r\n .form-step.active { display: block; }\r\n\r\n @keyframes slideUp {\r\n from { opacity: 0; transform: translateY(20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .step-title {\r\n display: flex; align-items: center; gap: 15px;\r\n margin-bottom: 30px;\r\n padding-bottom: 20px;\r\n border-bottom: 2px solid var(--clr-input-bg);\r\n }\r\n .step-icon {\r\n width: 48px; height: 48px;\r\n background: #e0f7fa; \/* \u0633\u0645\u0627\u0648\u064a \u0641\u0627\u062a\u062d \u062c\u062f\u0627\u064b *\/\r\n color: var(--clr-primary);\r\n border-radius: 12px;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 1.5rem;\r\n flex-shrink: 0;\r\n }\r\n .step-title h2 {\r\n font-size: 1.5rem;\r\n font-weight: 800;\r\n color: var(--clr-dark-teal);\r\n }\r\n .step-title p {\r\n font-size: 0.9rem;\r\n color: var(--clr-muted);\r\n font-family: 'Tajawal', sans-serif;\r\n }\r\n\r\n \/* ====== FIELD GROUP ====== *\/\r\n .field-group {\r\n margin-bottom: 24px;\r\n }\r\n .field-grid { display: grid; gap: 20px; }\r\n .field-grid.cols-2 { grid-template-columns: 1fr 1fr; }\r\n .field-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }\r\n\r\n @media (max-width: 600px) {\r\n .field-grid.cols-2,\r\n .field-grid.cols-3 { grid-template-columns: 1fr; }\r\n }\r\n\r\n label {\r\n display: block;\r\n font-size: 0.95rem;\r\n font-weight: 700;\r\n color: var(--clr-text);\r\n margin-bottom: 8px;\r\n }\r\n label .req { color: var(--clr-error); margin-right: 3px; }\r\n label .hint {\r\n display: block;\r\n font-size: 0.8rem;\r\n color: var(--clr-muted);\r\n font-weight: 500;\r\n margin-top: 4px;\r\n }\r\n\r\n \/* ====== INPUTS ====== *\/\r\n input[type=\"text\"],\r\n input[type=\"number\"],\r\n input[type=\"tel\"],\r\n input[type=\"email\"],\r\n select,\r\n textarea {\r\n width: 100%;\r\n background: var(--clr-input-bg);\r\n border: 2px solid transparent;\r\n border-radius: var(--radius);\r\n padding: 14px 18px;\r\n color: var(--clr-dark-teal);\r\n font-family: 'Cairo', sans-serif;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n transition: var(--transition);\r\n outline: none;\r\n -webkit-appearance: none;\r\n }\r\n \r\n \/* Hover & Focus Effects *\/\r\n input:hover, select:hover, textarea:hover {\r\n background: #f1f5f9;\r\n }\r\n input:focus, select:focus, textarea:focus {\r\n background: #fff;\r\n border-color: var(--clr-primary);\r\n box-shadow: 0 0 0 4px rgba(0, 153, 168, 0.1);\r\n }\r\n \r\n \/* Placeholder Styling *\/\r\n ::placeholder {\r\n color: #cbd5e1;\r\n font-weight: 400;\r\n }\r\n\r\n \/* Error State *\/\r\n input.error, select.error, textarea.error {\r\n background: #fef2f2;\r\n border-color: var(--clr-error);\r\n box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);\r\n animation: shake 0.3s ease;\r\n }\r\n @keyframes shake {\r\n 0%,100% { transform: translateX(0); }\r\n 25% { transform: translateX(-6px); }\r\n 75% { transform: translateX(6px); }\r\n }\r\n\r\n textarea { resize: vertical; min-height: 100px; line-height: 1.6; }\r\n select { cursor: pointer; background-image: url(\"data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%230099a8%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E\"); background-repeat: no-repeat; background-position: left 15px center; background-size: 12px; }\r\n\r\n .error-msg {\r\n display: none;\r\n color: var(--clr-error);\r\n font-size: 0.85rem;\r\n margin-top: 6px;\r\n align-items: center;\r\n gap: 6px;\r\n font-weight: 600;\r\n }\r\n .error-msg.show { display: flex; }\r\n\r\n \/* ====== BUTTONS ====== *\/\r\n .btn-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-top: 40px;\r\n gap: 15px;\r\n }\r\n .btn {\r\n padding: 14px 36px;\r\n border-radius: 50px;\r\n font-family: 'Cairo', sans-serif;\r\n font-size: 1rem;\r\n font-weight: 700;\r\n cursor: pointer;\r\n border: none;\r\n transition: var(--transition);\r\n display: inline-flex; align-items: center; gap: 8px;\r\n justify-content: center;\r\n }\r\n .btn-next {\r\n background: var(--clr-primary); \/* \u062a\u0631\u0643\u0648\u0627\u0632 *\/\r\n color: #fff;\r\n box-shadow: 0 10px 20px -5px rgba(0, 153, 168, 0.4);\r\n flex: 1; \/* \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 \u064a\u0628\u0642\u0649 \u0639\u0631\u064a\u0636 *\/\r\n max-width: 200px;\r\n }\r\n .btn-next:hover {\r\n transform: translateY(-3px);\r\n background: #008896;\r\n box-shadow: 0 15px 25px -5px rgba(0, 153, 168, 0.5);\r\n }\r\n .btn-prev {\r\n background: #fff;\r\n color: var(--clr-muted);\r\n border: 2px solid var(--clr-border);\r\n }\r\n .btn-prev:hover { \r\n border-color: var(--clr-text); \r\n color: var(--clr-text); \r\n }\r\n .btn-submit {\r\n background: linear-gradient(135deg, var(--clr-accent), #7ab82d); \/* \u0623\u062e\u0636\u0631 \u0641\u0631\u064a\u0634 *\/\r\n color: #fff;\r\n box-shadow: 0 10px 20px -5px rgba(140, 198, 63, 0.4);\r\n width: 100%;\r\n max-width: none;\r\n }\r\n .btn-submit:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 15px 30px -5px rgba(140, 198, 63, 0.6);\r\n }\r\n .btn-spacer { flex: 1; }\r\n\r\n \/* ====== SUCCESS SCREEN ====== *\/\r\n .success-screen {\r\n display: none;\r\n text-align: center;\r\n padding: 60px 20px;\r\n animation: slideUp 0.5s ease forwards;\r\n }\r\n .success-screen.show { display: block; }\r\n .success-icon {\r\n width: 100px; height: 100px;\r\n border-radius: 50%;\r\n background: var(--clr-accent);\r\n color: white;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 3rem;\r\n margin: 0 auto 24px;\r\n box-shadow: 0 0 0 10px rgba(140, 198, 63, 0.2);\r\n animation: pulse 2s infinite;\r\n }\r\n @keyframes pulse {\r\n 0% { box-shadow: 0 0 0 0 rgba(140, 198, 63, 0.4); }\r\n 70% { box-shadow: 0 0 0 20px rgba(140, 198, 63, 0); }\r\n 100% { box-shadow: 0 0 0 0 rgba(140, 198, 63, 0); }\r\n }\r\n .success-screen h2 { \r\n font-size: 2rem; \r\n font-weight: 900; \r\n margin-bottom: 12px; \r\n color: var(--clr-dark-teal);\r\n }\r\n .success-screen p { \r\n color: var(--clr-text); \r\n font-size: 1.1rem; \r\n }\r\n\r\n \/* ====== MISC ====== *\/\r\n .info-box {\r\n background: #ecfdf5; \/* \u062e\u0644\u0641\u064a\u0629 \u062e\u0636\u0631\u0627\u0621 \u0641\u0627\u062a\u062d\u0629 \u062c\u062f\u0627\u064b *\/\r\n border: 1px solid #d1fae5;\r\n border-radius: 12px;\r\n padding: 16px;\r\n font-size: 0.9rem;\r\n color: #065f46;\r\n margin-bottom: 25px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n .info-box::before { content: '\ud83d\udca1'; font-size: 1.2rem; }\r\n .info-box span { font-weight: 700; }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"form-wrapper\">\r\n\r\n <div class=\"form-header\">\r\n <div class=\"badge\">Fix Life • \u0628\u062f\u0627\u064a\u0629 \u062c\u062f\u064a\u062f\u0629<\/div>\r\n <h1>\u0623\u0648\u0644 \u062e\u0637\u0648\u0629 \u0641\u064a \u0631\u062d\u0644\u062a\u0643<\/h1>\r\n <p>\u0635\u062d\u062a\u0643 \u062a\u0633\u062a\u0627\u0647\u0644\u060c \u062e\u0644\u0651\u064a\u0646\u0627 \u0646\u0628\u062f\u0623 \u0635\u062d \ud83d\udcaa<\/p>\r\n <\/div>\r\n\r\n <div class=\"progress-container\">\r\n <div class=\"progress-track\">\r\n <div class=\"progress-track-fill\" id=\"trackFill\"><\/div>\r\n <\/div>\r\n <div class=\"progress-step-item active\" id=\"ps0\">\r\n <div class=\"progress-circle\"><span>1<\/span><\/div>\r\n <div class=\"progress-label\">\u0628\u064a\u0627\u0646\u0627\u062a\u0643<\/div>\r\n <\/div>\r\n <div class=\"progress-step-item\" id=\"ps1\">\r\n <div class=\"progress-circle\"><span>2<\/span><\/div>\r\n <div class=\"progress-label\">\u0623\u0647\u062f\u0627\u0641\u0643<\/div>\r\n <\/div>\r\n <div class=\"progress-step-item\" id=\"ps2\">\r\n <div class=\"progress-circle\"><span>3<\/span><\/div>\r\n <div class=\"progress-label\">\u0646\u0641\u0633\u064a\u062a\u0643<\/div>\r\n <\/div>\r\n <div class=\"progress-step-item\" id=\"ps3\">\r\n <div class=\"progress-circle\"><span>4<\/span><\/div>\r\n <div class=\"progress-label\">\u0627\u0644\u062a\u0632\u0627\u0645\u0643<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-card\">\r\n <form id=\"mainForm\" novalidate>\r\n \r\n <input type=\"hidden\" name=\"_subject\" id=\"emailSubject\" value=\"\u0627\u0633\u062a\u0645\u0627\u0631\u0629 \u062c\u062f\u064a\u062f\u0629\">\r\n\r\n <div class=\"form-step active\" id=\"step0\">\r\n <div class=\"step-title\">\r\n <div class=\"step-icon\">\ud83d\udc64<\/div>\r\n <div>\r\n <h2>\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0639\u0645\u064a\u0644<\/h2>\r\n <p>\u0628\u064a\u0627\u0646\u0627\u062a\u0643 \u0633\u0631\u064a\u0629 \u0648\u062a\u0633\u0627\u0639\u062f\u0646\u0627 \u0646\u0635\u0645\u0645 \u062e\u0637\u062a\u0643<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 <span class=\"req\">*<\/span><\/label>\r\n <input type=\"text\" name=\"name\" id=\"userNameInput\" required placeholder=\"\u0627\u0643\u062a\u0628 \u0627\u0633\u0645\u0643 \u0647\u0646\u0627...\" \/>\r\n <div class=\"error-msg\">\u26a0 \u0645\u0646 \u0641\u0636\u0644\u0643 \u0627\u0643\u062a\u0628 \u0627\u0633\u0645\u0643<\/div>\r\n <\/div>\r\n\r\n <div class=\"field-grid cols-2\">\r\n <div class=\"field-group\">\r\n <label>\u0627\u0644\u0633\u0646 <span class=\"req\">*<\/span><\/label>\r\n <input type=\"number\" name=\"age\" required min=\"10\" max=\"90\" placeholder=\"\u0645\u062b\u0627\u0644: 30\" \/>\r\n <div class=\"error-msg\">\u26a0 \u0623\u062f\u062e\u0644 \u0633\u0646\u0643 \u0628\u0634\u0643\u0644 \u0635\u062d\u064a\u062d<\/div>\r\n <\/div>\r\n <div class=\"field-group\">\r\n <label>\u0631\u0642\u0645 \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628 <span class=\"req\">*<\/span><\/label>\r\n <input type=\"tel\" name=\"whatsapp\" required placeholder=\"+20 10x xxxx xxxx\" \/>\r\n <div class=\"error-msg\">\u26a0 \u0623\u062f\u062e\u0644 \u0631\u0642\u0645 \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"field-grid cols-3\">\r\n <div class=\"field-group\">\r\n <label>\u0627\u0644\u0637\u0648\u0644 (\u0633\u0645) <span class=\"req\">*<\/span><\/label>\r\n <input type=\"number\" name=\"height\" required min=\"100\" max=\"250\" placeholder=\"170\" \/>\r\n <div class=\"error-msg\">\u26a0 \u0623\u062f\u062e\u0644 \u0637\u0648\u0644\u0643<\/div>\r\n <\/div>\r\n <div class=\"field-group\">\r\n <label>\u0627\u0644\u0648\u0632\u0646 (\u0643\u062c\u0645) <span class=\"req\">*<\/span><\/label>\r\n <input type=\"number\" name=\"weight\" required min=\"30\" max=\"300\" placeholder=\"80\" \/>\r\n <div class=\"error-msg\">\u26a0 \u0623\u062f\u062e\u0644 \u0648\u0632\u0646\u0643<\/div>\r\n <\/div>\r\n <div class=\"field-group\">\r\n <label>\u0645\u062d\u064a\u0637 \u0627\u0644\u0628\u0637\u0646 (\u0633\u0645)\r\n <span class=\"hint\">\u0639\u0646\u062f \u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u0633\u0631\u0629<\/span>\r\n <\/label>\r\n <input type=\"number\" name=\"waist\" min=\"40\" max=\"200\" placeholder=\"90\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0627\u0644\u0645\u062f\u064a\u0646\u0629 \/ \u0627\u0644\u0645\u0646\u0637\u0642\u0629 <span class=\"req\">*<\/span><\/label>\r\n <input type=\"text\" name=\"city\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0627\u0644\u0642\u0627\u0647\u0631\u0629 \u2013 \u0645\u062f\u064a\u0646\u0629 \u0646\u0635\u0631\" \/>\r\n <div class=\"error-msg\">\u26a0 \u0623\u062f\u062e\u0644 \u0645\u062f\u064a\u0646\u062a\u0643<\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u062a\u0641\u0636\u064a\u0644\u0627\u062a \u0627\u0644\u0645\u064a\u0632\u0627\u0646\u064a\u0629 \u0644\u0644\u062f\u0627\u064a\u062a <span class=\"req\">*<\/span><\/label>\r\n <textarea name=\"budget\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0646\u0639\u0645 \u0645\u062a\u0627\u062d \u0645\u064a\u0632\u0627\u0646\u064a\u0629\u060c \u0623\u0648 \u0644\u0627 \u0623\u0643\u0644 \u0628\u064a\u062a \u0641\u0642\u0637\u060c \u0623\u0648 \u0645\u064a\u0632\u0627\u0646\u064a\u0629 \u0645\u062d\u062f\u0648\u062f\u0629...\"><\/textarea>\r\n <div class=\"error-msg\">\u26a0 \u0648\u0636\u062d \u0645\u064a\u0632\u0627\u0646\u064a\u062a\u0643<\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0647\u0644 \u062a\u0639\u0627\u0646\u064a \u0645\u0646 \u0623\u064a \u0623\u0645\u0631\u0627\u0636 \u0645\u0632\u0645\u0646\u0629 \u0623\u0648 \u0625\u0635\u0627\u0628\u0627\u062a\u061f <span class=\"req\">*<\/span><\/label>\r\n <textarea name=\"illness\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0644\u0627 \u0627\u0644\u062d\u0645\u062f \u0644\u0644\u0647\u060c \u0623\u0648 \u0646\u0639\u0645 \u0639\u0646\u062f\u064a \u0636\u063a\u0637\/\u0633\u0643\u0631\/\u0625\u0635\u0627\u0628\u0629 \u0641\u064a \u0627\u0644\u0631\u0643\u0628\u0629...\"><\/textarea>\r\n <div class=\"error-msg\">\u26a0 \u0627\u0643\u062a\u0628 \u062d\u0627\u0644\u062a\u0643 \u0627\u0644\u0635\u062d\u064a\u0629<\/div>\r\n <\/div>\r\n\r\n <div class=\"btn-row\">\r\n <div class=\"btn-spacer\"><\/div>\r\n <button type=\"button\" class=\"btn btn-next\">\u0627\u0644\u062a\u0627\u0644\u064a \u2190<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-step\" id=\"step1\">\r\n <div class=\"step-title\">\r\n <div class=\"step-icon\">\ud83c\udfaf<\/div>\r\n <div>\r\n <h2>\u0623\u0647\u062f\u0627\u0641\u0643 \u0648\u0639\u0627\u062f\u0627\u062a\u0643<\/h2>\r\n <p>\u0641\u0647\u0645 \u0631\u062d\u0644\u062a\u0643 \u0627\u0644\u0633\u0627\u0628\u0642\u0629 \u0647\u0648 \u0646\u0635 \u0627\u0644\u0637\u0631\u064a\u0642<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0625\u064a\u0647 \u0627\u0644\u062f\u0627\u064a\u062a \u0627\u0644\u0644\u064a \u062c\u0631\u0628\u062a\u0647 \u0642\u0628\u0644 \u0643\u062f\u0647 \u0648\u0646\u062c\u062d \u0645\u0639\u0627\u0643\u061f<\/label>\r\n <textarea name=\"prev_diet\" placeholder=\"\u0645\u062b\u0627\u0644: \u062c\u0631\u0628\u062a \u0643\u064a\u062a\u0648 \u0644\u0645\u062f\u0629 \u0634\u0647\u0631\u060c \u0646\u062c\u062d \u0645\u0639\u0627\u064a\u0627 \u0641\u064a \u0627\u0644\u0628\u062f\u0627\u064a\u0629 \u0628\u0633 \u0648\u0642\u0641\u062a \u0644\u0623\u0646...\"><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0625\u064a\u0647 \u0647\u062f\u0641\u0643 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u061f <span class=\"req\">*<\/span><\/label>\r\n <textarea name=\"goal\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0639\u0627\u064a\u0632 \u0623\u062e\u0633 \u0639\u0634\u0627\u0646 \u0634\u0643\u0644\u064a\u060c \u0623\u0648 \u0639\u0627\u064a\u0632 \u0637\u0627\u0642\u0629 \u0623\u0639\u0644\u0649\u060c \u0623\u0648 \u0639\u0634\u0627\u0646 \u0627\u0644\u0635\u062d\u0629...\"><\/textarea>\r\n <div class=\"error-msg\">\u26a0 \u0627\u0643\u062a\u0628 \u0647\u062f\u0641\u0643<\/div>\r\n <\/div>\r\n\r\n <div class=\"field-grid cols-2\">\r\n <div class=\"field-group\">\r\n <label>\u0643\u0645 \u0648\u062c\u0628\u0629 \u0631\u0626\u064a\u0633\u064a\u0629 \u0641\u064a \u0627\u0644\u064a\u0648\u0645\u061f <span class=\"req\">*<\/span><\/label>\r\n <select name=\"meals\" required>\r\n <option value=\"\" disabled selected>\u0627\u062e\u062a\u0627\u0631<\/option>\r\n <option value=\"1\">1 \u0648\u062c\u0628\u0629<\/option>\r\n <option value=\"2\">2 \u0648\u062c\u0628\u0627\u062a<\/option>\r\n <option value=\"3\">3 \u0648\u062c\u0628\u0627\u062a<\/option>\r\n <option value=\"4+\">\u0623\u0643\u062b\u0631 \u0645\u0646 3<\/option>\r\n <\/select>\r\n <div class=\"error-msg\">\u26a0 \u0627\u062e\u062a\u0627\u0631 \u0639\u062f\u062f \u0627\u0644\u0648\u062c\u0628\u0627\u062a<\/div>\r\n <\/div>\r\n <div class=\"field-group\">\r\n <label>\u0627\u0644\u0633\u0646\u0627\u0643\u0633 \u0623\u0648 \u0627\u0644\u0645\u0634\u0631\u0648\u0628\u0627\u062a \u0627\u0644\u0633\u0643\u0631\u064a\u0629 \u064a\u0648\u0645\u064a\u0627\u064b\u061f <span class=\"req\">*<\/span><\/label>\r\n <select name=\"snacks\" required>\r\n <option value=\"\" disabled selected>\u0627\u062e\u062a\u0627\u0631<\/option>\r\n <option value=\"0\">\u0644\u0627 \u064a\u0648\u062c\u062f<\/option>\r\n <option value=\"1-2\">1-2 \u0645\u0631\u0627\u062a<\/option>\r\n <option value=\"3-4\">3-4 \u0645\u0631\u0627\u062a<\/option>\r\n <option value=\"5+\">\u0623\u0643\u062b\u0631 \u0645\u0646 4<\/option>\r\n <\/select>\r\n <div class=\"error-msg\">\u26a0 \u0627\u062e\u062a\u0627\u0631<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0643\u0645 \u0643\u0648\u0628\u0627\u064a\u0629 \u0645\u064a\u0629 \u0641\u064a \u0627\u0644\u064a\u0648\u0645\u061f (\u062a\u0642\u0631\u064a\u0628\u0627\u064b) <span class=\"req\">*<\/span><\/label>\r\n <input type=\"number\" name=\"water\" required placeholder=\"\u0645\u062b\u0627\u0644: 4\" \/>\r\n <div class=\"error-msg\">\u26a0 \u0627\u0643\u062a\u0628 \u0639\u062f\u062f \u0627\u0644\u0623\u0643\u0648\u0627\u0628<\/div>\r\n <\/div>\r\n\r\n <div class=\"field-grid cols-2\">\r\n <div class=\"field-group\">\r\n <label>\u0633\u0627\u0639\u0627\u062a \u0627\u0644\u0646\u0648\u0645 \u0641\u064a \u0627\u0644\u064a\u0648\u0645\u061f <span class=\"req\">*<\/span><\/label>\r\n <select name=\"sleep_hours\" required>\r\n <option value=\"\" disabled selected>\u0627\u062e\u062a\u0627\u0631<\/option>\r\n <option value=\"\u0623\u0642\u0644 \u0645\u0646 5\">\u0623\u0642\u0644 \u0645\u0646 5 \u0633\u0627\u0639\u0627\u062a<\/option>\r\n <option value=\"5-6\">5 \u2013 6 \u0633\u0627\u0639\u0627\u062a<\/option>\r\n <option value=\"7-8\">7 \u2013 8 \u0633\u0627\u0639\u0627\u062a<\/option>\r\n <option value=\"\u0623\u0643\u062b\u0631 \u0645\u0646 8\">\u0623\u0643\u062b\u0631 \u0645\u0646 8<\/option>\r\n <\/select>\r\n <div class=\"error-msg\">\u26a0 \u0627\u062e\u062a\u0627\u0631<\/div>\r\n <\/div>\r\n <div class=\"field-group\">\r\n <label>\u0627\u0644\u0646\u0648\u0645 \u0645\u0646\u062a\u0638\u0645 \u0648\u0644\u0627 \u0645\u0636\u0637\u0631\u0628\u061f <span class=\"req\">*<\/span><\/label>\r\n <select name=\"sleep_quality\" required>\r\n <option value=\"\" disabled selected>\u0627\u062e\u062a\u0627\u0631<\/option>\r\n <option value=\"\u0645\u0646\u062a\u0638\u0645 \u062c\u062f\u0627\u064b\">\u0645\u0646\u062a\u0638\u0645 \u062c\u062f\u0627\u064b<\/option>\r\n <option value=\"\u0645\u0646\u062a\u0638\u0645 \u0646\u0633\u0628\u064a\u0627\u064b\">\u0645\u0646\u062a\u0638\u0645 \u0646\u0633\u0628\u064a\u0627\u064b<\/option>\r\n <option value=\"\u0645\u0636\u0637\u0631\u0628 \u0623\u062d\u064a\u0627\u0646\u0627\u064b\">\u0645\u0636\u0637\u0631\u0628 \u0623\u062d\u064a\u0627\u0646\u0627\u064b<\/option>\r\n <option value=\"\u0645\u0636\u0637\u0631\u0628 \u062f\u0627\u064a\u0645\u0627\u064b\">\u0645\u0636\u0637\u0631\u0628 \u062f\u0627\u064a\u0645\u0627\u064b<\/option>\r\n <\/select>\r\n <div class=\"error-msg\">\u26a0 \u0627\u062e\u062a\u0627\u0631<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0644\u0645\u0627 \u0628\u062a\u0635\u062d\u0649 \u0627\u0644\u0635\u0628\u062d\u060c \u0628\u062a\u062d\u0633 \u0625\u0632\u0627\u064a\u061f <span class=\"req\">*<\/span><\/label>\r\n <textarea name=\"morning_feel\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0628\u0643\u0648\u0646 \u0641\u0627\u064a\u0642\u060c \u0623\u0648 \u0628\u0643\u0648\u0646 \u062c\u0633\u0645\u064a \u0645\u0643\u0633\u0631 \u0648\u0645\u062d\u062a\u0627\u062c \u0642\u0647\u0648\u0629...\"><\/textarea>\r\n <div class=\"error-msg\">\u26a0 \u0623\u0648\u0635\u0641 \u0625\u062d\u0633\u0627\u0633\u0643<\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0645\u0633\u062a\u0648\u0649 \u0646\u0634\u0627\u0637\u0643 \u0627\u0644\u064a\u0648\u0645\u064a\u061f <span class=\"req\">*<\/span><\/label>\r\n <textarea name=\"activity\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0634\u063a\u0644\u064a \u0645\u0643\u062a\u0628\u064a \u0637\u0648\u0644 \u0627\u0644\u064a\u0648\u0645\u060c \u0623\u0648 \u0628\u062a\u0645\u0634\u0649 \u0643\u062a\u064a\u0631\u060c \u0623\u0648 \u0634\u063a\u0644\u064a \u0641\u064a\u0647 \u0645\u062c\u0647\u0648\u062f \u0628\u062f\u0646\u064a...\"><\/textarea>\r\n <div class=\"error-msg\">\u26a0 \u0623\u0648\u0635\u0641 \u0646\u0634\u0627\u0637\u0643<\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0627\u0644\u0623\u0643\u0644 \u0627\u0644\u0644\u064a \u0628\u062a\u062d\u0628\u0647<\/label>\r\n <textarea name=\"liked_food\" placeholder=\"\u0645\u062b\u0627\u0644: \u0627\u0644\u062f\u062c\u0627\u062c\u060c \u0627\u0644\u0628\u064a\u0636\u060c \u0627\u0644\u062e\u0636\u0627\u0631\u060c \u0627\u0644\u0645\u0639\u0643\u0631\u0648\u0646\u0629...\" rows=\"2\"><\/textarea>\r\n <\/div>\r\n <div class=\"field-group\">\r\n <label>\u0627\u0644\u0623\u0643\u0644 \u0627\u0644\u0644\u064a \u0645\u0634 \u0628\u062a\u062d\u0628\u0647 \u0623\u0648 \u0628\u062a\u062a\u062c\u0646\u0628\u0647<\/label>\r\n <textarea name=\"disliked_food\" placeholder=\"\u0645\u062b\u0627\u0644: \u0627\u0644\u0643\u0628\u062f\u0629\u060c \u0627\u0644\u0641\u0648\u0644\u060c \u0627\u0644\u062e\u064a\u0627\u0631...\" rows=\"2\"><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0628\u062a\u062a\u0645\u0631\u0646 \u062d\u0627\u0644\u064a\u0627\u064b\u061f (\u0646\u0648\u0639 \u0627\u0644\u0631\u064a\u0627\u0636\u0629 \u0648\u0639\u062f\u062f \u0627\u0644\u0645\u0631\u0627\u062a) <span class=\"req\">*<\/span><\/label>\r\n <textarea name=\"exercise\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0644\u0627 \u0645\u0634 \u0628\u062a\u0645\u0631\u0646\u060c \u0623\u0648 \u0628\u0631\u0648\u062d \u0627\u0644\u062c\u064a\u0645 3 \u0623\u064a\u0627\u0645 \u0641\u064a \u0627\u0644\u0623\u0633\u0628\u0648\u0639...\"><\/textarea>\r\n <div class=\"error-msg\">\u26a0 \u0627\u0643\u062a\u0628 \u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0631\u064a\u0627\u0636\u0629<\/div>\r\n <\/div>\r\n\r\n <div class=\"btn-row\">\r\n <button type=\"button\" class=\"btn btn-prev\">\u2192 \u0631\u062c\u0648\u0639<\/button>\r\n <button type=\"button\" class=\"btn btn-next\">\u0627\u0644\u062a\u0627\u0644\u064a \u2190<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-step\" id=\"step2\">\r\n <div class=\"step-title\">\r\n <div class=\"step-icon\">\ud83e\udde0<\/div>\r\n <div>\r\n <h2>\u0627\u0644\u0646\u0641\u0633\u064a\u0629 \u0648\u0627\u0644\u0627\u062c\u062a\u0645\u0627\u0639\u064a\u0629<\/h2>\r\n <p>\u0627\u0644\u062c\u0627\u0646\u0628 \u062f\u0647 \u0628\u064a\u0641\u0631\u0642 \u0643\u062a\u064a\u0631 \u0641\u064a \u0627\u0633\u062a\u0645\u0631\u0627\u0631\u064a\u062a\u0643<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0645\u064a\u0646 \u0627\u0644\u0644\u064a \u0628\u064a\u0634\u062a\u0631\u064a \u0627\u0644\u0637\u0644\u0628\u0627\u062a \u0648\u0628\u064a\u0637\u0628\u062e \u0641\u064a \u0627\u0644\u0628\u064a\u062a\u061f <span class=\"req\">*<\/span><\/label>\r\n <textarea name=\"who_cooks\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0623\u0646\u0627\u060c \u0623\u0648 \u0627\u0644\u0632\u0648\u062c\u0629\u060c \u0623\u0648 \u0628\u0646\u0637\u0644\u0628 \u062f\u0644\u064a\u0641\u0631\u064a...\"><\/textarea>\r\n <div class=\"error-msg\">\u26a0 \u0645\u064a\u0646 \u0628\u064a\u0637\u0628\u062e\u061f<\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0625\u0645\u062a\u0649 \u0628\u062a\u062d\u0633 \u0625\u0646 \u0637\u0627\u0642\u062a\u0643 \u062e\u0644\u0635\u062a \u0648\u062a\u062d\u062a\u0627\u062c \u0642\u0647\u0648\u0629 \u0623\u0648 \u0633\u0643\u0631\u061f <span class=\"req\">*<\/span><\/label>\r\n <textarea name=\"energy_crash\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0628\u0639\u062f \u0627\u0644\u063a\u062f\u0627\u060c \u0623\u0648 \u0627\u0644\u0645\u063a\u0631\u0628\u060c \u0623\u0648 \u0623\u0648\u0644 \u0645\u0627 \u0623\u0635\u062d\u0649...\"><\/textarea>\r\n <div class=\"error-msg\">\u26a0 \u0627\u0645\u062a\u0649 \u0637\u0627\u0642\u062a\u0643 \u0628\u062a\u0642\u0639\u061f<\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0644\u0645\u0627 \u0628\u062a\u0643\u0648\u0646 \u0645\u0636\u063a\u0648\u0637\u060c \u0634\u0647\u064a\u062a\u0643 \u0628\u062a\u0639\u0645\u0644 \u0625\u064a\u0647\u061f <span class=\"req\">*<\/span><\/label>\r\n <textarea name=\"stress_eating\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0634\u0647\u064a\u062a\u064a \u0628\u062a\u0642\u0641\u0644 \u062e\u0627\u0644\u0635\u060c \u0623\u0648 \u0628\u0627\u0643\u0644 \u0627\u0644\u0623\u062e\u0636\u0631 \u0648\u0627\u0644\u064a\u0627\u0628\u0633...\"><\/textarea>\r\n <div class=\"error-msg\">\u26a0 \u062c\u0627\u0648\u0628 \u0647\u0646\u0627<\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0648\u0625\u064a\u0647 \u0623\u0648\u0644 \u0623\u0643\u0644\u0629 \u0628\u062a\u064a\u062c\u064a \u0641\u064a \u0628\u0627\u0644\u0643 \u0648\u0642\u062a \u0627\u0644\u0636\u063a\u0637\u061f<\/label>\r\n <input type=\"text\" name=\"stress_food\" placeholder=\"\u0645\u062b\u0627\u0644: \u0634\u064a\u0628\u0633\u064a\u060c \u0634\u0648\u0643\u0648\u0644\u0627\u062a\u0629\u060c \u0623\u064a \u062d\u0627\u062c\u0629 \u062d\u0644\u0648\u0629...\" \/>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0625\u064a\u0647 \u0627\u0644\u062d\u0627\u062c\u0629 \u0627\u0644\u0645\u0648\u062c\u0648\u062f\u0629 \u0641\u064a \u0627\u0644\u0628\u064a\u062a \u0627\u0644\u0644\u064a \u0628\u062a\u0639\u0631\u0641 \u0625\u0646\u0647\u0627 \u0628\u062a\u0628\u0648\u0638 \u0627\u0644\u062f\u0627\u064a\u062a\u061f <span class=\"req\">*<\/span><\/label>\r\n <input type=\"text\" name=\"temptation\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0634\u064a\u0628\u0633\u064a\u060c \u0628\u064a\u0628\u0633\u064a\u060c \u062d\u0644\u0648\u064a\u0627\u062a...\" \/>\r\n <div class=\"error-msg\">\u26a0 \u0627\u0643\u062a\u0628 \u0648\u0644\u0648 \u062d\u0627\u062c\u0629 \u0648\u0627\u062d\u062f\u0629<\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0641\u064a \u062d\u062f \u0642\u0631\u064a\u0628 \u0628\u064a\u0636\u063a\u0637 \u0639\u0644\u064a\u0643 \u062a\u0627\u0643\u0644 \u0648\u0645\u0634 \u0628\u064a\u062f\u0639\u0645\u0643\u061f<\/label>\r\n <textarea name=\"social_pressure\" placeholder=\"\u0645\u062b\u0627\u0644: \u0635\u062d\u0627\u0628\u064a \u0641\u064a \u0627\u0644\u0634\u063a\u0644\u060c \u0623\u0648 \u0623\u0647\u0644\u064a \u0628\u064a\u0636\u063a\u0637\u0648\u0627 \u0639\u0644\u064a\u0627...\"><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0639\u0646\u062f\u0643 \u062d\u062f \u0642\u0631\u064a\u0628 \u0628\u064a\u0634\u0627\u0631\u0643\u0643 \u0646\u0641\u0633 \u0627\u0644\u0647\u062f\u0641\u061f <span class=\"req\">*<\/span><\/label>\r\n <textarea name=\"partner\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0644\u0627 \u0645\u0639\u0646\u062f\u064a\u0634\u060c \u0623\u0648 \u0623\u064a\u0648\u0629 \u0635\u0627\u062d\u0628\u064a \u0628\u064a\u0634\u062c\u0639\u0646\u064a...\"><\/textarea>\r\n <div class=\"error-msg\">\u26a0 \u062c\u0627\u0648\u0628 \u0647\u0646\u0627<\/div>\r\n <\/div>\r\n\r\n <div class=\"btn-row\">\r\n <button type=\"button\" class=\"btn btn-prev\">\u2192 \u0631\u062c\u0648\u0639<\/button>\r\n <button type=\"button\" class=\"btn btn-next\">\u0627\u0644\u062a\u0627\u0644\u064a \u2190<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-step\" id=\"step3\">\r\n <div class=\"step-title\">\r\n <div class=\"step-icon\">\ud83d\udcaa<\/div>\r\n <div>\r\n <h2>\u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062a\u0632\u0627\u0645\u0643<\/h2>\r\n <p>\u0635\u0631\u0627\u062d\u062a\u0643 \u0647\u0646\u0627 \u0628\u062a\u0633\u0627\u0639\u062f\u0646\u0627 \u0646\u0628\u0646\u064a \u062e\u0637\u0629 \u0648\u0627\u0642\u0639\u064a\u0629 \u0644\u064a\u0643<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"info-box\">\r\n <span>\u0645\u0641\u064a\u0634 \u0625\u062c\u0627\u0628\u0629 \u063a\u0644\u0637 \u0647\u0646\u0627!<\/span> \u0643\u0644\u0645\u0627 \u0643\u0646\u062a \u0635\u0631\u064a\u062d\u060c \u0643\u0644\u0645\u0627 \u0627\u0644\u062e\u0637\u0629 \u0627\u0644\u0644\u064a \u0647\u0646\u0628\u0646\u064a\u0647\u0627 \u062a\u0646\u0627\u0633\u0628\u0643 \u0623\u0643\u062a\u0631 \ud83c\udfaf\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0625\u064a\u0647 \u0627\u0644\u0639\u0627\u062f\u0629 \u0627\u0644\u0648\u062d\u064a\u062f\u0629 \u0627\u0644\u0644\u064a \u0645\u0633\u062a\u062d\u064a\u0644 \u062a\u062a\u062e\u0644\u0649 \u0639\u0646\u0647\u0627 \u0645\u0647\u0645\u0627 \u062d\u0635\u0644\u061f <span class=\"req\">*<\/span><\/label>\r\n <input type=\"text\" name=\"non_negotiable\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0627\u0644\u0642\u0647\u0648\u0629 \u0627\u0644\u0635\u0628\u062d \u0628\u0633\u0643\u0631\u060c \u0627\u0644\u0623\u0643\u0644 \u0623\u0645\u0627\u0645 \u0627\u0644\u062a\u0644\u0641\u0632\u064a\u0648\u0646...\" \/>\r\n <div class=\"error-msg\">\u26a0 \u0627\u0643\u062a\u0628 \u0627\u0644\u0639\u0627\u062f\u0629 \u062f\u064a<\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0625\u064a\u0647 \u0627\u0644\u062d\u0627\u062c\u0629 \u0627\u0644\u0644\u064a \u0647\u062a\u0648\u062d\u0634\u0643 \u0644\u0648 \u0628\u062f\u0623\u062a \u0627\u0644\u062f\u0627\u064a\u062a\u061f<\/label>\r\n <input type=\"text\" name=\"will_miss\" placeholder=\"\u0645\u062b\u0627\u0644: \u0627\u0644\u062d\u0644\u0648\u064a\u0627\u062a\u060c \u0627\u0644\u0623\u0643\u0644 \u0645\u0639 \u0627\u0644\u0623\u0635\u062d\u0627\u0628 \u0645\u0646 \u063a\u064a\u0631 \u0642\u064a\u0648\u062f...\" \/>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0625\u064a\u0647 \u0623\u0643\u062a\u0631 \u062d\u0627\u062c\u0629 \u0628\u062a\u062e\u0644\u064a\u0643 \u062a\u0645\u0644 \u0648\u062a\u0631\u062c\u0639 \u0644\u0639\u0627\u062f\u0627\u062a\u0643 \u0627\u0644\u0642\u062f\u064a\u0645\u0629\u061f <span class=\"req\">*<\/span><\/label>\r\n <textarea name=\"boredom_reason\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0627\u0644\u0623\u0643\u0644 \u0627\u0644\u0645\u0643\u0631\u0631\u060c \u0623\u0648 \u0628\u0637\u0621 \u0627\u0644\u0646\u062a\u0627\u064a\u062c\u060c \u0623\u0648 \u0627\u0644\u0636\u063a\u0637 \u0627\u0644\u0646\u0641\u0633\u064a...\"><\/textarea>\r\n <div class=\"error-msg\">\u26a0 \u0627\u0643\u062a\u0628 \u0627\u0644\u0633\u0628\u0628<\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0625\u064a\u0647 \u0627\u0644\u0639\u0627\u062f\u0629 \u0627\u0644\u0644\u064a \u0644\u0648 \u0628\u0637\u0644\u062a\u0647\u0627 \u0627\u0644\u0646\u0647\u0627\u0631\u062f\u0647 \u0647\u062a\u0641\u0631\u0642 \u062c\u062f\u0627\u064b\u061f <span class=\"req\">*<\/span><\/label>\r\n <input type=\"text\" name=\"quit_habit\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0627\u0644\u0633\u0643\u0631 \u0627\u0644\u0643\u062a\u064a\u0631 \u0641\u064a \u0627\u0644\u0634\u0627\u064a\u060c \u0627\u0644\u0634\u064a\u0628\u0633\u064a \u0643\u0644 \u064a\u0648\u0645\u060c \u0627\u0644\u0635\u0648\u062f\u0627...\" \/>\r\n <div class=\"error-msg\">\u26a0 \u0627\u0643\u062a\u0628 \u0627\u0644\u0639\u0627\u062f\u0629 \u062f\u064a<\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0625\u064a\u0647 \u0627\u0644\u062d\u0627\u062c\u0629 \u0627\u0644\u0644\u064a \u0645\u0642\u062a\u0646\u0639 \u0625\u0646\u0647\u0627 \u0628\u062a\u062c\u064a\u0628 \u0646\u062a\u064a\u062c\u0629 \u0633\u0631\u064a\u0639\u0629\u061f<\/label>\r\n <textarea name=\"quick_results_belief\" rows=\"2\" \r\n placeholder=\"\u0645\u062b\u0627\u0644: \u0644\u0645\u0627 \u0628\u0642\u0637\u0639 \u0627\u0644\u0639\u064a\u0634\u060c \u0644\u0645\u0627 \u0628\u0634\u0631\u0628 \u0645\u064a\u0647 \u0628\u0644\u064a\u0645\u0648\u0646 \u0627\u0644\u0635\u0628\u062d...\"><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0623\u0643\u0644\u0643 \u0641\u064a \u0627\u0644\u0628\u064a\u062a\u060c \u0634\u0627\u064a\u0641\u0647 \u0625\u0632\u0627\u064a\u061f <span class=\"req\">*<\/span><\/label>\r\n <textarea name=\"home_food_rating\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0635\u062d\u064a \u0648\u0645\u0641\u064a\u062f\u060c \u0623\u0648 \u0641\u064a\u0647 \u0632\u064a\u0648\u062a \u0643\u062a\u064a\u0631\u060c \u0623\u0648 \u0643\u0645\u064a\u0627\u062a \u0643\u0628\u064a\u0631\u0629...\"><\/textarea>\r\n <div class=\"error-msg\">\u26a0 \u0642\u064a\u0645 \u0623\u0643\u0644\u0643<\/div>\r\n <\/div>\r\n\r\n <div class=\"field-group\">\r\n <label>\u0623\u064a \u062a\u0639\u0644\u064a\u0642 \u0625\u0636\u0627\u0641\u064a \u0623\u0648 \u062d\u0627\u062c\u0629 \u062a\u062d\u0628 \u062a\u0642\u0648\u0644\u0647\u0627\u061f<\/label>\r\n <textarea name=\"extra_notes\" rows=\"3\" placeholder=\"\u0623\u064a \u062d\u0627\u062c\u0629 \u062a\u0627\u0646\u064a\u0629 \u0645\u0647\u0645\u0629 \u0639\u0627\u064a\u0632\u0646\u0627 \u0646\u0639\u0631\u0641\u0647\u0627 \u0639\u0646\u0643...\"><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"btn-row\">\r\n <button type=\"button\" class=\"btn btn-prev\">\u2192 \u0631\u062c\u0648\u0639<\/button>\r\n <button type=\"submit\" class=\"btn btn-next btn-submit\" id=\"finalSubmitBtn\">\ud83d\ude80 \u0625\u0628\u0639\u062a \u0627\u0644\u0627\u0633\u062a\u0645\u0627\u0631\u0629<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/form>\r\n\r\n <div class=\"success-screen\" id=\"successScreen\">\r\n <div class=\"success-icon\">\u2713<\/div>\r\n <h2>\u062a\u0645 \u0627\u0633\u062a\u0644\u0627\u0645 \u0627\u0633\u062a\u0645\u0627\u0631\u062a\u0643!<\/h2>\r\n <p style=\"margin-top:8px\">\u0634\u0643\u0631\u0627\u064b \u0644\u064a\u0643 \u0639\u0644\u0649 \u0635\u0631\u0627\u062d\u062a\u0643 \ud83d\ude4c<br\/>\u0647\u064a\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0627\u0643 \u0627\u0644\u0643\u0648\u062a\u0634 \u062e\u0644\u0627\u0644 24 \u0633\u0627\u0639\u0629 \u0639\u0644\u0649 \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n \/* ============================================================\r\n JAVASCRIPT LOGIC (Stable Version)\r\n ============================================================ *\/\r\n\r\n const formStepsEls = document.querySelectorAll('.form-step');\r\n const progressItems = document.querySelectorAll('.progress-step-item');\r\n const trackFill = document.getElementById('trackFill');\r\n const mainForm = document.getElementById('mainForm');\r\n const successScreen = document.getElementById('successScreen');\r\n const finalSubmitBtn = document.getElementById('finalSubmitBtn');\r\n \r\n \/\/ Elements for Dynamic Subject\r\n const nameInput = document.getElementById('userNameInput');\r\n const emailSubject = document.getElementById('emailSubject');\r\n\r\n let currentStep = 0;\r\n const totalSteps = formStepsEls.length;\r\n\r\n \/\/ --- NAVIGATION ---\r\n document.querySelectorAll('.btn-next').forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n \/\/ If submit, allow form event to handle it\r\n if (btn.type === 'submit') return; \r\n\r\n e.preventDefault(); \r\n if (!validateStep(currentStep)) return; \/\/ Check valid\r\n goToStep(currentStep + 1);\r\n });\r\n });\r\n\r\n document.querySelectorAll('.btn-prev').forEach(btn => {\r\n btn.addEventListener('click', () => goToStep(currentStep - 1));\r\n });\r\n\r\n function goToStep(n) {\r\n if (n < 0 || n >= totalSteps) return;\r\n \r\n formStepsEls[currentStep].classList.remove('active');\r\n progressItems[currentStep].classList.remove('active');\r\n progressItems[currentStep].classList.add('done');\r\n \r\n \/\/ If going back\r\n if (n < currentStep) {\r\n progressItems[currentStep].classList.remove('done');\r\n }\r\n\r\n currentStep = n;\r\n formStepsEls[currentStep].classList.add('active');\r\n updateProgress();\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n }\r\n\r\n function updateProgress() {\r\n progressItems.forEach((item, i) => {\r\n item.classList.toggle('active', i === currentStep);\r\n item.classList.toggle('done', i < currentStep);\r\n });\r\n const pct = (currentStep \/ (totalSteps - 1)) * 100;\r\n trackFill.style.width = pct + '%';\r\n }\r\n\r\n \/\/ --- SIMPLE VALIDATION (TEXT ONLY) ---\r\n function validateStep(index) {\r\n const step = formStepsEls[index];\r\n let valid = true;\r\n\r\n \/\/ Reset old errors\r\n step.querySelectorAll('.error').forEach(el => el.classList.remove('error'));\r\n step.querySelectorAll('.error-msg.show').forEach(el => el.classList.remove('show'));\r\n\r\n \/\/ Check all required inputs\/selects\/textareas\r\n const inputs = step.querySelectorAll('input[required], select[required], textarea[required]');\r\n \r\n inputs.forEach(input => {\r\n if (!input.value.trim()) {\r\n valid = false;\r\n showError(input);\r\n }\r\n });\r\n\r\n return valid;\r\n }\r\n\r\n function showError(input) {\r\n input.classList.add('error');\r\n \/\/ Show error message if exists next to it\r\n const group = input.closest('.field-group');\r\n if (group) {\r\n const msg = group.querySelector('.error-msg');\r\n if (msg) msg.classList.add('show');\r\n }\r\n\r\n \/\/ Clear on typing\r\n input.addEventListener('input', () => {\r\n input.classList.remove('error');\r\n if (group) {\r\n const msg = group.querySelector('.error-msg');\r\n if (msg) msg.classList.remove('show');\r\n }\r\n }, { once: true });\r\n }\r\n\r\n \/\/ --- DYNAMIC SUBJECT LOGIC ---\r\n if(nameInput) {\r\n nameInput.addEventListener('input', function(e) {\r\n const val = e.target.value.trim();\r\n if(val) {\r\n emailSubject.value = \"\u0627\u0633\u062a\u0645\u0627\u0631\u0629 \u062c\u062f\u064a\u062f\u0629 \u0645\u0646: \" + val;\r\n } else {\r\n emailSubject.value = \"\u0627\u0633\u062a\u0645\u0627\u0631\u0629 \u062c\u062f\u064a\u062f\u0629\";\r\n }\r\n });\r\n }\r\n\r\n \/\/ --- FORM SUBMIT ---\r\n mainForm.addEventListener('submit', (e) => {\r\n e.preventDefault();\r\n \r\n if(!validateStep(currentStep)) return;\r\n\r\n \/\/ UI Loading\r\n const oldText = finalSubmitBtn.innerText;\r\n finalSubmitBtn.innerText = \"\u062c\u0627\u0631\u064a \u0627\u0644\u0625\u0631\u0633\u0627\u0644...\";\r\n finalSubmitBtn.disabled = true;\r\n\r\n const formData = new FormData(mainForm);\r\n\r\n fetch(\"https:\/\/formspree.io\/f\/xpqwvpbw\", {\r\n method: \"POST\",\r\n body: formData,\r\n headers: { 'Accept': 'application\/json' }\r\n })\r\n .then(response => {\r\n if(response.ok) {\r\n mainForm.style.display = 'none';\r\n successScreen.classList.add('show');\r\n \/\/ Finish bar\r\n progressItems.forEach(p => { \r\n p.classList.remove('active'); \r\n p.classList.add('done'); \r\n });\r\n trackFill.style.width = '100%';\r\n window.scrollTo(0,0);\r\n } else {\r\n alert(\"\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u0625\u0631\u0633\u0627\u0644.\");\r\n finalSubmitBtn.innerText = oldText;\r\n finalSubmitBtn.disabled = false;\r\n }\r\n })\r\n .catch(err => {\r\n alert(\"\u0641\u0634\u0644 \u0627\u0644\u0627\u062a\u0635\u0627\u0644 \u0628\u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a.\");\r\n finalSubmitBtn.innerText = oldText;\r\n finalSubmitBtn.disabled = false;\r\n });\r\n });\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0627\u0633\u062a\u0645\u0627\u0631\u0629 \u0627\u0644\u0628\u062f\u0627\u064a\u0629 \u2013 Fix Life Fix Life • \u0628\u062f\u0627\u064a\u0629 \u062c\u062f\u064a\u062f\u0629 \u0623\u0648\u0644 \u062e\u0637\u0648\u0629 \u0641\u064a \u0631\u062d\u0644\u062a\u0643 \u0635\u062d\u062a\u0643 \u062a\u0633\u062a\u0627\u0647\u0644\u060c \u062e\u0644\u0651\u064a\u0646\u0627 \u0646\u0628\u062f\u0623 \u0635\u062d \ud83d\udcaa 1 \u0628\u064a\u0627\u0646\u0627\u062a\u0643 2 \u0623\u0647\u062f\u0627\u0641\u0643 3 \u0646\u0641\u0633\u064a\u062a\u0643 4 \u0627\u0644\u062a\u0632\u0627\u0645\u0643 \ud83d\udc64 \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0639\u0645\u064a\u0644 \u0628\u064a\u0627\u0646\u0627\u062a\u0643 \u0633\u0631\u064a\u0629 \u0648\u062a\u0633\u0627\u0639\u062f\u0646\u0627 \u0646\u0635\u0645\u0645 \u062e\u0637\u062a\u0643 \u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 * \u26a0 \u0645\u0646 \u0641\u0636\u0644\u0643 \u0627\u0643\u062a\u0628 \u0627\u0633\u0645\u0643 \u0627\u0644\u0633\u0646 * \u26a0 \u0623\u062f\u062e\u0644 \u0633\u0646\u0643 \u0628\u0634\u0643\u0644 \u0635\u062d\u064a\u062d \u0631\u0642\u0645 \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628 * \u26a0 […]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6710","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fixlife.net\/index.php\/wp-json\/wp\/v2\/pages\/6710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fixlife.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fixlife.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fixlife.net\/index.php\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/fixlife.net\/index.php\/wp-json\/wp\/v2\/comments?post=6710"}],"version-history":[{"count":50,"href":"https:\/\/fixlife.net\/index.php\/wp-json\/wp\/v2\/pages\/6710\/revisions"}],"predecessor-version":[{"id":7005,"href":"https:\/\/fixlife.net\/index.php\/wp-json\/wp\/v2\/pages\/6710\/revisions\/7005"}],"wp:attachment":[{"href":"https:\/\/fixlife.net\/index.php\/wp-json\/wp\/v2\/media?parent=6710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}