Добавил заочников

src/Otchinslator/Components/Pages/Questionnaire.razor

@@ -56,12 +56,33 @@
         transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
     }
     
+    #button-custom-2 .knobs:before {
+        content: '';
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        width: 2.1rem;
+        height: 2.1rem;
+        color: #fff;
+        text-align: center;
+        font-size: 22px;
+        padding: 0 0 1px 1px;
+        background-color: var(--fallback-p, oklch(var(--p)/var(--tw-bg-opacity)));
+        border-radius: 50%;
+        transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
+    }
+
     #button-custom-1 .checkbox-custom:checked + .knobs:before {
         content: '$';
         left: 42px;
         background-color: #89E592;
     }
     
+    #button-custom-2 .checkbox-custom:checked + .knobs:before {
+        content: '🏠︎';
+        left: 40px;
+        background-color: pink;
+    }
 </style>
 
 <dialog id="exit_modal" class="modal modal-bottom sm:modal-middle">
@@ -112,7 +133,13 @@
             </div>
             <h2 class="text-center text-2xl justify-center my-4">Платник?</h2>
             <div class="button-custom r" id="button-custom-1">
-                <input type="checkbox" class="checkbox-custom"/>
+                <input type="checkbox" id="paidCheckbox" class="checkbox-custom"/>
+                <div class="knobs"></div>
+                <div class="layer rounded-full" style="background-color: white;"></div>
+            </div>
+            <h2 class="text-center text-2xl justify-center my-4">Заочник?</h2>
+            <div class="button-custom r" id="button-custom-2">
+                <input type="checkbox" id="ochnoCheckbox" class="checkbox-custom"/>
                 <div class="knobs"></div>
                 <div class="layer rounded-full" style="background-color: white;"></div>
             </div>

src/Otchinslator/Components/Pages/Questionnaire.razor.js

@@ -16,6 +16,8 @@ export function onLoad() {
     const options = document.querySelectorAll('input[name="options"]');
     const kursElements = document.querySelectorAll('input[name="kurs"]');
     const phoneNumberInput = document.getElementById('phoneNumberInput');
+    const checkboxPaid = document.getElementById('paidCheckbox');
+    const checkboxOchno = document.getElementById('ochnoCheckbox');
 
     const kursElement2 = Array.from(kursElements).find(k => k.getAttribute('aria-label') === '2');
     const kursElement3 = Array.from(kursElements).find(k => k.getAttribute('aria-label') === '3');
@@ -26,16 +28,20 @@ export function onLoad() {
     function loadFromLocalStorage() {
         const phoneNumber = localStorage.getItem('phoneNumber');
         const paid = localStorage.getItem('paid');
+        const ochno = localStorage.getItem('ochno');
         const option = localStorage.getItem('option');
         const kurs = localStorage.getItem('kurs');
 
-
         if (phoneNumber) {
             phoneNumberInput.value = phoneNumber;
         }
 
         if (paid) {
-            document.querySelector('.checkbox-custom').checked = paid;
+            checkboxPaid.checked = paid === "true";
+        }
+        
+        if (ochno) {
+            checkboxOchno.checked = ochno === "false";
         }
 
         if (option) {
@@ -87,9 +93,11 @@ export function onLoad() {
         }
 
         if (isOptionSelected && isKursSelected && isPhoneNumberValid) {
+            
             continueButton.classList.remove('btn-disabled');
             localStorage.setItem('phoneNumber', phoneNumberInput.value);
-            localStorage.setItem('paid', document.querySelector('.checkbox-custom').checked);
+            localStorage.setItem('paid', checkboxPaid.checked);
+            localStorage.setItem('ochno', !checkboxOchno.checked);
             localStorage.setItem('option', tupeOfEducation);
             localStorage.setItem('kurs', Array.from(kursElements).find(k => k.checked).getAttribute('aria-label'));
         } else {
@@ -100,6 +108,8 @@ export function onLoad() {
     options.forEach(option => option.addEventListener('change', validateForm));
     kursElements.forEach(k => k.addEventListener('change', validateForm));
     phoneNumberInput.addEventListener('input', validateForm);
+    checkboxPaid.addEventListener('change', validateForm);
+    checkboxOchno.addEventListener('change', validateForm);
 
     loadFromLocalStorage();
     validateForm();

src/Otchinslator/Components/Pages/Statement.razor.js

@@ -25,7 +25,7 @@ export function onLoad() {
             "phone": "+7 " + localStorage.getItem('phoneNumber'),
             "kurs": localStorage.getItem('kurs'),
             "isFreeEducation": localStorage.getItem('paid') === "false",
-            "isOchno": true,
+            "isOchno": localStorage.getItem('ochno') === true,
             "speciality": optionMapping[localStorage.getItem('option')],
             "reason": localStorage.getItem('statement')
         }