Добавил отображение кол-ва символов

.gitignore

@@ -495,3 +495,5 @@ FodyWeavers.xsd
 src/Otchinslator/wwwroot/css/styles.css
 
 src/Otchinslator/appsettings.Development.json
+
+*.pdf

src/Otchinslator/Components/Pages/Statement.razor

@@ -7,7 +7,7 @@
 
 <PageTitle>Заявление | Отчислятор 3000</PageTitle>
 
-<PageScript Src="./Components/Pages/Statement.razor.js" />
+<PageScript Src="./Components/Pages/Statement.razor.js"/>
 
 <dialog id="info_modal" class="modal modal-bottom sm:modal-middle">
     <div class="modal-box">
@@ -27,8 +27,10 @@
         <p id="loadingAnim" class="py-4"><span class="loading w-[15rem] loading-ring sm:w-[20rem]"></span></p>
         <div id="failBlock" class="hidden justify-center">
             <div class="flex justify-center items-center">
-                <svg class="w-[15rem] h-[15rem]" fill="red" stroke="red" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <svg class="w-[15rem] h-[15rem]" fill="red" stroke="red" viewBox="0 0 24 24"
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                     xmlns="http://www.w3.org/2000/svg">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M6 18L18 6M6 6l12 12"></path>
                 </svg>
             </div>
             <p class="text-red-500">Ошибка при генерации</p>
@@ -43,11 +45,19 @@
 </dialog>
 
 <div class="relative">
-    <div class="text-center font-bold text-4xl md:text-5xl w-max absolute left-1/2 -top-1/3 transform -translate-x-1/2 italic"><br>Укажите причину</div>
+    <div
-    <div class="flex flex-col space-y-4 w-96">
+        class="text-center font-bold text-4xl md:text-5xl w-max absolute left-1/2 -top-1/3 transform -translate-x-1/2 italic">
-        <textarea class="textarea textarea-bordered w-full h-96 resize-none" placeholder="Введите причину отчисления..." name="statement">Прошу отчислить меня по собственному желанию в связи с </textarea>
+        <br>Укажите причину
     </div>
-    <div class="join w-full mt-4 flex gap-2">
+    <div class="flex flex-col space-y-4 w-96">
+        <textarea class="textarea textarea-bordered w-full h-96 resize-none" placeholder="Введите причину отчисления..."
+                  name="statement">Прошу отчислить меня по собственному желанию в связи с </textarea>
+    </div>
+    <div class="flex justify-between mt-1 text-sm">
+        <p id="needMoreText" class="text-gray-500 hidden">Нужно ещё немного дописать</p>
+        <p id="symCounter" class="text-gray-500 ml-auto">x/max</p>
+    </div>
+    <div class="join w-full mt-3 flex gap-2">
         <a href="/" class="relative btn btn-primary rounded-full flex-grow-0 w-[3rem] h-[3rem]">
             <img class="absolute p-3" src="img/exit.svg" alt=""/>
         </a>

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

@@ -1,6 +1,9 @@
 export function onLoad() {
     const statementField = document.querySelector('textarea[name="statement"]');
     const generateButton = document.querySelector('button[id="gen"]');
+    const symCounter = document.querySelector('p[id="symCounter"]');
+    const needMoreText = document.querySelector('p[id="needMoreText"]');
+    const maxSym = 600;
 
     const optionMapping = {
         "Баклан": 1,
@@ -80,8 +83,30 @@ export function onLoad() {
         statementField.value = statementField.value.replace(/\s{2,}/g, ' ');
 
         localStorage.setItem('statement', statementField.value);
+        
+        if (statementField.value.length <= 100)
+            needMoreText.classList.remove('hidden');
+        else 
+            needMoreText.classList.add('hidden');
+        
+        let percentage = Math.floor(statementField.value.length / maxSym * 100);
+        if (percentage > 99) {
+            symCounter.classList.add('text-red-500');
+            symCounter.classList.remove('text-gray-500');
+            symCounter.classList.remove('text-yellow-500');
+        } else if (percentage > 85) {
+            symCounter.classList.add('text-yellow-500');
+            symCounter.classList.remove('text-gray-500');
+            symCounter.classList.remove('text-red-500');
+        }
+        else {
+            symCounter.classList.add('text-gray-500');
+            symCounter.classList.remove('text-red-500');
+            symCounter.classList.remove('text-yellow-500');
+        }
+        symCounter.innerText = statementField.value.length + '/' + maxSym;
 
-        if (statementField.value.length > 100) {
+        if (statementField.value.length > 100 && statementField.value.length < maxSym) {
             generateButton.classList.remove('btn-disabled');
         } else
             generateButton.classList.add('btn-disabled');