From 25344d1d5cf0ddfe7797d3641abf24c4cff915de Mon Sep 17 00:00:00 2001
From: ck <21735205+cyperdark@users.noreply.github.com>
Date: Wed, 25 Sep 2024 13:49:14 +0300
Subject: [PATCH] feat: New counter setting `Textarea`

---
 packages/server/assets/homepage.js      | 15 ++++++++++-----
 packages/server/assets/homepage.min.css |  2 +-
 packages/server/utils/counters.ts       | 21 +++++++++++++++++++++
 packages/server/utils/counters.types.ts |  3 ++-
 packages/server/utils/htmls.ts          |  2 +-
 5 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/packages/server/assets/homepage.js b/packages/server/assets/homepage.js
index e7849355..9ff37600 100644
--- a/packages/server/assets/homepage.js
+++ b/packages/server/assets/homepage.js
@@ -696,6 +696,7 @@ const optionHTML = `
     </div>
     <select class="{class}" id="{ID}___type">
       <option {text_SELECTED} value="text">Text</option>
+      <option {textarea_SELECTED} value="textarea">Text area</option>
       <option {number_SELECTED} value="number">Number</option>
       <option {color_SELECTED} value="color">Color</option>
       <option {checkbox_SELECTED} value="checkbox">Toggle</option>
@@ -768,9 +769,11 @@ async function startBuilderModal(element) {
     .replace("{ADDON}", `onchange="sanitize(this);"`)
     .replace(/{text_SELECTED}/gm, '')
     .replace(/{number_SELECTED}/gm, '')
-    .replace(/{password_SELECTED}/gm, '')
+    .replace(/{color_SELECTED}/gm, '')
     .replace(/{checkbox_SELECTED}/gm, '')
-    .replace(/{options_SELECTED}/gm, '');
+    .replace(/{options_SELECTED}/gm, '')
+    .replace(/{password_SELECTED}/gm, '')
+    .replace(/{textarea_SELECTED}/gm, '');
 
   if (json.error == null) {
     for (let i = 0; i < json.length; i++) {
@@ -794,9 +797,10 @@ async function startBuilderModal(element) {
         .replace(/{text_SELECTED}/gm, option.type == 'text' ? `selected="selected"` : '')
         .replace(/{number_SELECTED}/gm, option.type == 'number' ? `selected="selected"` : '')
         .replace(/{color_SELECTED}/gm, option.type == 'color' ? `selected="selected"` : '')
-        .replace(/{password_SELECTED}/gm, option.type == 'password' ? `selected="selected"` : '')
         .replace(/{checkbox_SELECTED}/gm, option.type == 'checkbox' ? `selected="selected"` : '')
-        .replace(/{options_SELECTED}/gm, option.type == 'options' ? `selected="selected"` : '');
+        .replace(/{options_SELECTED}/gm, option.type == 'options' ? `selected="selected"` : '')
+        .replace(/{password_SELECTED}/gm, option.type == 'password' ? `selected="selected"` : '')
+        .replace(/{textarea_SELECTED}/gm, option.type == 'textarea' ? `selected="selected"` : '');
 
       // if (i != json.length - 1)
       //   html += '\n<hr class="modal-space">\n'
@@ -865,7 +869,7 @@ async function builderNewOption(element) {
       return;
     };
 
-    if (payload.value == '' && payload.setting.type != 'password') {
+    if (payload.value == '' && (payload.setting.type != 'password' && payload.setting.type != 'textarea')) {
       displayNotification({
         element: element,
         text: `Specify default value`,
@@ -923,6 +927,7 @@ async function builderNewOption(element) {
       .replace(/{password_SELECTED}/gm, payload.setting.type == 'password' ? `selected="selected"` : '')
       .replace(/{checkbox_SELECTED}/gm, payload.setting.type == 'checkbox' ? `selected="selected"` : '')
       .replace(/{options_SELECTED}/gm, payload.setting.type == 'options' ? `selected="selected"` : '')
+      .replace(/{textarea_SELECTED}/gm, payload.setting.type == 'textarea' ? `selected="selected"` : '')
 
     displayNotification({
       element: element,
diff --git a/packages/server/assets/homepage.min.css b/packages/server/assets/homepage.min.css
index bbcd30b1..b1b88ebf 100644
--- a/packages/server/assets/homepage.min.css
+++ b/packages/server/assets/homepage.min.css
@@ -1 +1 @@
-:root{--text-1: #647a91;--text-2: #8ca0b5;--text-links: #6593c5;--background-1: #191e25;--block-1: #242d37;--block-2: #333f4c;--block-on-block: 211.25deg, 75.28%, 68.43%;--block-color-1: #97a7b9;--button-update: #76c757;--button-download: #568cc7;--button-delete: #d57397;--button-open: #73a6d5;--button-open-folder: #b7a375;--button-save: #73a6d5;--button-cancel: #d57381;--button-builder: #d5b873;--button-add-option: #9cd573;--button-update-settings: #73a6d5;--submit-delete: #56c763;--notification-block-green: #56c763;--notification-color-green: #191e25;--notification-block-yellow: #d5ce73;--notification-color-yellow: #252419;--notification-block-red: #d57397;--notification-color-red: #191e25;--search-color-2: #707f8d;--search-color-1: #cbd8e5;--search-block: #3f4e5d;--header-color: #939393;--header-background: #14171c}*{position:relative;padding:0;margin:0;box-sizing:border-box;min-width:0}::-moz-selection{color:var(--background-1);background-color:var(--text-links)}::selection{color:var(--background-1);background-color:var(--text-links)}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-thumb{background-color:var(--text-links);border-radius:.2em}button{font-size:1em;font-family:inherit;font-weight:inherit;font-style:inherit;border:0;outline:0}img{display:flex}body{font-size:20px;font-family:"Roboto",sans-serif;font-weight:400;font-style:normal;justify-content:center;flex-direction:column;display:flex;max-width:min(1280px,100vw - 2em);min-height:100vh !important;color:var(--text-1);margin:0 auto;background:var(--background-1);overflow-x:hidden}iframe{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}select{font-size:1em;color:var(--search-color-1);padding:.3em .4em;background:var(--search-block);border-radius:.2em;outline:0;border:0}header{position:sticky;font-size:.9em;color:var(--header-color);top:0;gap:1.2em;margin:0 1em;height:2em;z-index:3}header::before{content:"";position:absolute;top:0;left:-1000px;right:-1000px;bottom:0;background:var(--header-background)}header a:not(.button){-webkit-user-select:none;-moz-user-select:none;user-select:none;text-decoration:none;color:var(--header-color) !important;gap:.7em;transition:filter .2s ease}header a:not(.button) img{width:1.2em;height:1.2em}header a:not(.button):hover{filter:brightness(1.2)}.imglink{font-size:.9em}main{display:grid;min-height:0;margin-top:2em;margin-bottom:3em}footer{font-weight:600;text-align:center;font-size:.8em;position:sticky;bottom:0;padding:.6em 0;margin-top:auto}footer::before{content:"";pointer-events:none;-webkit-mask-image:linear-gradient(0deg, black 0%, transparent 100%);mask-image:linear-gradient(0deg, black 0%, transparent 100%);position:absolute;height:7em;left:0;right:0;bottom:0;background:var(--background-1);z-index:0}footer>*{z-index:1}a{color:var(--text-links)}.flexer{justify-content:flex-start;align-items:center;display:flex;flex-wrap:wrap}.links{gap:1em;padding:0 1em;margin-bottom:2em;z-index:2}.links .button{gap:.5em}.links .button.active{color:var(--button-open);background:var(--background-1)}.tabs{justify-content:center;position:sticky;top:2em;width:calc(100% - 1em);margin:0 auto;gap:1em;z-index:1}.tabs .tab-item{justify-content:center;align-items:center;display:flex;gap:.5em;line-height:1em;cursor:pointer;color:var(--text-1);padding:.6em;text-decoration:none;transition:.1s ease;transition-property:color,text-decoration-color}.tabs .tab-item.active{color:var(--text-links);text-decoration-color:var(--text-links)}.tabs .tab-item.active::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--text-links);border-radius:10em}.tabs::before{content:"";position:absolute;top:-2em;left:-3em;right:-3em;bottom:0;background:var(--background-1)}.indent-left{margin-left:auto}.indent-right{margin-right:auto}.results{display:grid;gap:.5em}.no-results{text-align:center;width:100%;margin:2em 0}.result-item{display:grid;gap:.8em;color:var(--block-color-1);padding:1em;background:var(--block-1);border-radius:.3em}.result-item hr{border-color:var(--background-1)}.result-item .ri-gallery{gap:.4em}.result-item .ri-gallery img{height:7.5em;border-radius:.4em}.result-item .ri-links{font-size:.9em;gap:.4em;margin-top:.4em}.result-item .ri-links img{height:1.2em;border-radius:.2em}.result-item .ri-footer{font-size:.9em;gap:1em}.result-item.downloaded::before,.result-item.updatable::before{position:absolute;pointer-events:none;top:0;left:0;right:0;bottom:0;opacity:1;z-index:1;display:flex;justify-content:flex-end;align-items:flex-end;font-size:1.4em;padding:.5em;color:#fff;text-shadow:0 0 .2em #000,0 .1em .1em #000,0 .1em .7em #000,0 .1em .2em #000}.result-item.downloaded{outline:2px solid}.result-item.downloaded::before{content:"already downloaded";background:rgba(151,167,185,.2)}.result-item.updatable{outline:2px solid #a7d395}.result-item.updatable::before{content:"update available";color:#a7d395;background:rgba(161,185,151,.2)}.copyable{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;padding:.1em .2em;background:hsl(var(--block-on-block), 0.2);transition:.5s ease;transition-property:background,filter;border-radius:.2em}.copyable:active{filter:brightness(2);background:hsl(var(--block-on-block), 0.4);transition:.1s ease}.notification{font-size:.8em;font-weight:bold;position:absolute;left:50%;bottom:2em;padding:.5em 1.6em;translate:0 0;box-shadow:0 .7em 1.2em rgba(0,0,0,.7);transition:.3s ease;transition-property:translate,opacity;border-radius:.3em;z-index:15}.notification.hidden{opacity:0;translate:0 1em}.notification.red{color:var(--notification-color-red);background:var(--notification-block-red)}.notification.yellow{color:var(--notification-color-yellow);background:var(--notification-block-yellow)}.notification.green{color:var(--notification-color-green);background:var(--notification-block-green)}@keyframes spin{0%{rotate:0}100%{rotate:360deg}}.button{white-space:nowrap;text-decoration:none;font-size:.9em;font-weight:700;cursor:pointer;padding:.4em 1em;border-radius:.4em;transition:.1s ease;transition-property:translate,filter}.button>*{pointer-events:none}.button span{display:block;pointer-events:none;transition:.3s ease;transition-property:opacity,width}.button img{width:1em;height:1em;-o-object-fit:cover;object-fit:cover;transition:.3s ease;transition-property:opacity,width,height;animation:spin 1s infinite forwards linear}.button:hover{filter:brightness(1.1);translate:0 -0.05em}.button:active{filter:brightness(0.9);translate:0 .1em}.button.disable{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1)}.button.small{padding:.1em .5em}.buttons-group{font-size:.9em;gap:10px;height:1.8em}.buttons-group>*{height:100%}.dl-button{color:var(--background-1);background:var(--button-download)}.update-button{color:var(--background-1);background:var(--button-update)}.delete-button{color:var(--background-1);background:var(--button-delete)}.open-button{color:var(--background-1);background:var(--button-open)}.open-folder-button{color:var(--background-1);background:var(--button-open-folder)}.settings-builder-button{display:none;color:var(--background-1);background:var(--button-builder)}.settings-builder-button.active{display:unset}.add-option-button{color:var(--background-1);background:var(--button-add-option)}.save-button{color:var(--background-1);background:var(--button-save)}.submit-button{display:block;color:var(--background-1);padding:.2em 1em;background:var(--submit-delete)}.remove-option-button,.cancel-button{color:var(--background-1);background:var(--button-cancel)}.update-settings-button,.update-x2-settings-button{color:var(--background-1);background:var(--button-update-settings)}.search-bar{font-size:.9em;font-family:inherit;color:var(--search-color-1);background:var(--search-block);padding:.2em .6em;border-radius:.2em;outline:0;border:0;transition:.2s ease;transition-property:filter,opacity}.search-bar::-moz-placeholder{color:var(--search-color-2)}.search-bar::placeholder{color:var(--search-color-2)}.search-bar.disable{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);opacity:.5}.settings{display:grid;gap:.8em;color:var(--block-color-1);padding:1em;background:var(--block-1);border-radius:.3em}.settings .si-btn{margin-top:1em}.si:not(.-s) div:nth-child(1){width:20em}.si p,.si .settings-note{filter:brightness(0.8);font-size:.8em;max-width:20em}.si .settings-note{margin-top:.5em;font-style:italic}.si input[type=text],.si input[type=number],.si input[type=password]{font-size:.9em;font-family:inherit;color:var(--search-color-1);width:20em;padding:.2em .6em;background:var(--search-block);outline:0;border-radius:.2em;border:0;transition:.2s ease;transition-property:filter,opacity}.si input[type=text]::-moz-placeholder, .si input[type=number]::-moz-placeholder, .si input[type=password]::-moz-placeholder{color:var(--search-color-2)}.si input[type=text]::placeholder,.si input[type=number]::placeholder,.si input[type=password]::placeholder{color:var(--search-color-2)}.si-checkbox{justify-content:center;align-items:center;cursor:pointer;display:flex;gap:.4em;height:1em}.si-checkbox input{display:none}.si-checkbox input:checked~.checkmark::before{scale:.7;background:var(--search-color-1)}.si-checkbox input:checked~.status::before{content:"Enabled"}.si-checkbox .checkmark{background:#637a91;width:1em;height:1em;border-radius:.2em;overflow:hidden;display:block}.si-checkbox .checkmark::before{content:"";display:block;width:1em;height:1em;scale:1;background:#637a91;transition:background .1s ease,scale .3s ease;border-radius:.2em}.si-checkbox .status::before{content:"Disabled"}.si-btn{gap:1em}.modal{position:fixed;top:0;left:0;right:0;bottom:0;transition:background .5s ease,transform .15s ease,-webkit-backdrop-filter .6s ease;transition:background .5s ease,backdrop-filter .6s ease,transform .15s ease;transition:background .5s ease,backdrop-filter .6s ease,transform .15s ease,-webkit-backdrop-filter .6s ease;z-index:10}.modal:not(.hidden){background:rgba(0,0,0,.5);-webkit-backdrop-filter:opacity(0.5) blur(50px);backdrop-filter:opacity(0.5) blur(50px)}.modal:not(.hidden) .m-content{opacity:1;transform:translate(-50%, -50%) translateY(0em)}.modal .m-content{width:min(45em,100vw - 2em);top:50%;left:50%;padding:1em;opacity:0;background:var(--block-1);border-radius:.4em;box-shadow:0 1em 2em rgba(0,0,0,.5),0 1em 4em rgba(0,0,0,.5);transform:translate(-50%, -50%) translateY(2em);transition:opacity .3s ease,transform .3s ease;z-index:1}.modal .ms-title{justify-content:space-between;align-items:center;flex-wrap:wrap;display:flex;padding-bottom:.1em;margin-bottom:.8em;border-bottom:1px solid}.modal .ms-title span:nth-child(2){font-size:.7em}.modal .ms-btns{font-size:.9em;margin-top:1.5em}.modal .m-scroll{display:grid;gap:.8em;max-height:min(35em,100vh - 11em);overflow:auto}.modal .m-scroll::-webkit-scrollbar{width:10px}.modal.-expand{transform:scale(1.02)}.update-available{font-weight:600;font-size:.9em;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;color:var(--background-1);height:3em;padding:.4em 0;transition:padding .4s ease,height .4s ease}.update-available::before{content:"";position:absolute;top:0;left:-30vw;right:-30vw;bottom:0;background:#56c763}.update-available ::-moz-selection{color:#56c763;background-color:var(--background-1)}.update-available ::selection{color:#56c763;background-color:var(--background-1)}.update-available div:nth-child(2){font-size:.8em}.update-available.hidden{display:none}.update-available>*{pointer-events:none}.update-available.loadong{animation:update 2s infinite forwards ease}.update-available.fold{padding:0 0;height:0}@keyframes update{0%{opacity:1}70%{opacity:.6}100%{opacity:1}}.new-item{display:grid;gap:.5em;color:var(--text-1);padding:1em;background:var(--background-1);border-radius:.6em}.new-item select{margin-right:1em}hr.modal-space{margin:1em 0;border:1px solid}.sbi{display:grid;gap:.5em}.m-scroll>.sbi:not(:nth-child(2)){padding-top:1em;border-top:2px solid;margin-top:.5em}.oab{font-size:.8em}.devmode{justify-content:flex-end;font-size:.9em;width:10.5em}.devmode>*{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.external-exists{-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:.7em;color:var(--background-1);gap:.5em;padding:.2em .6em;margin-left:1.4em;background:var(--button-builder);border-radius:.2em}.submit-counter{text-decoration:none;font-weight:600;font-size:.9em;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;color:var(--text-2);gap:1em;padding:.4em .8em;background:var(--block-2);border-radius:.3em;transition:padding .4s ease,height .4s ease}.submit-counter i{color:var(--color-1)}.submit-counter>*{pointer-events:none}
\ No newline at end of file
+:root{--text-1: #647a91;--text-2: #8ca0b5;--text-links: #6593c5;--background-1: #191e25;--block-1: #242d37;--block-2: #333f4c;--block-on-block: 211.25deg, 75.28%, 68.43%;--block-color-1: #97a7b9;--button-update: #76c757;--button-download: #568cc7;--button-delete: #d57397;--button-open: #73a6d5;--button-open-folder: #b7a375;--button-save: #73a6d5;--button-cancel: #d57381;--button-builder: #d5b873;--button-add-option: #9cd573;--button-update-settings: #73a6d5;--submit-delete: #56c763;--notification-block-green: #56c763;--notification-color-green: #191e25;--notification-block-yellow: #d5ce73;--notification-color-yellow: #252419;--notification-block-red: #d57397;--notification-color-red: #191e25;--search-color-2: #707f8d;--search-color-1: #cbd8e5;--search-block: #3f4e5d;--header-color: #939393;--header-background: #14171c}*{position:relative;padding:0;margin:0;box-sizing:border-box;min-width:0}::-moz-selection{color:var(--background-1);background-color:var(--text-links)}::selection{color:var(--background-1);background-color:var(--text-links)}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-thumb{background-color:var(--text-links);border-radius:.2em}button{font-size:1em;font-family:inherit;font-weight:inherit;font-style:inherit;border:0;outline:0}img{display:flex}body{font-size:20px;font-family:"Roboto",sans-serif;font-weight:400;font-style:normal;justify-content:center;flex-direction:column;display:flex;max-width:min(1280px,100vw - 2em);min-height:100vh !important;color:var(--text-1);margin:0 auto;background:var(--background-1);overflow-x:hidden}iframe{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}select{font-size:1em;color:var(--search-color-1);padding:.3em .4em;background:var(--search-block);border-radius:.2em;outline:0;border:0}header{position:sticky;font-size:.9em;color:var(--header-color);top:0;gap:1.2em;margin:0 1em;height:2em;z-index:3}header::before{content:"";position:absolute;top:0;left:-1000px;right:-1000px;bottom:0;background:var(--header-background)}header a:not(.button){-webkit-user-select:none;-moz-user-select:none;user-select:none;text-decoration:none;color:var(--header-color) !important;gap:.7em;transition:filter .2s ease}header a:not(.button) img{width:1.2em;height:1.2em}header a:not(.button):hover{filter:brightness(1.2)}.imglink{font-size:.9em}main{display:grid;min-height:0;margin-top:2em;margin-bottom:3em}footer{font-weight:600;text-align:center;font-size:.8em;position:sticky;bottom:0;padding:.6em 0;margin-top:auto}footer::before{content:"";pointer-events:none;-webkit-mask-image:linear-gradient(0deg, black 0%, transparent 100%);mask-image:linear-gradient(0deg, black 0%, transparent 100%);position:absolute;height:7em;left:0;right:0;bottom:0;background:var(--background-1);z-index:0}footer>*{z-index:1}a{color:var(--text-links)}.flexer{justify-content:flex-start;align-items:center;display:flex;flex-wrap:wrap}.links{gap:1em;padding:0 1em;margin-bottom:2em;z-index:2}.links .button{gap:.5em}.links .button.active{color:var(--button-open);background:var(--background-1)}.tabs{justify-content:center;position:sticky;top:2em;width:calc(100% - 1em);margin:0 auto;gap:1em;z-index:1}.tabs .tab-item{justify-content:center;align-items:center;display:flex;gap:.5em;line-height:1em;cursor:pointer;color:var(--text-1);padding:.6em;text-decoration:none;transition:.1s ease;transition-property:color,text-decoration-color}.tabs .tab-item.active{color:var(--text-links);text-decoration-color:var(--text-links)}.tabs .tab-item.active::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--text-links);border-radius:10em}.tabs::before{content:"";position:absolute;top:-2em;left:-3em;right:-3em;bottom:0;background:var(--background-1)}.indent-left{margin-left:auto}.indent-right{margin-right:auto}.results{display:grid;gap:.5em}.no-results{text-align:center;width:100%;margin:2em 0}.result-item{display:grid;gap:.8em;color:var(--block-color-1);padding:1em;background:var(--block-1);border-radius:.3em}.result-item hr{border-color:var(--background-1)}.result-item .ri-gallery{gap:.4em}.result-item .ri-gallery img{height:7.5em;border-radius:.4em}.result-item .ri-links{font-size:.9em;gap:.4em;margin-top:.4em}.result-item .ri-links img{height:1.2em;border-radius:.2em}.result-item .ri-footer{font-size:.9em;gap:1em}.result-item.downloaded::before,.result-item.updatable::before{position:absolute;pointer-events:none;top:0;left:0;right:0;bottom:0;opacity:1;z-index:1;display:flex;justify-content:flex-end;align-items:flex-end;font-size:1.4em;padding:.5em;color:#fff;text-shadow:0 0 .2em #000,0 .1em .1em #000,0 .1em .7em #000,0 .1em .2em #000}.result-item.downloaded{outline:2px solid}.result-item.downloaded::before{content:"already downloaded";background:rgba(151,167,185,.2)}.result-item.updatable{outline:2px solid #a7d395}.result-item.updatable::before{content:"update available";color:#a7d395;background:rgba(161,185,151,.2)}.copyable{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;padding:.1em .2em;background:hsl(var(--block-on-block), 0.2);transition:.5s ease;transition-property:background,filter;border-radius:.2em}.copyable:active{filter:brightness(2);background:hsl(var(--block-on-block), 0.4);transition:.1s ease}.notification{font-size:.8em;font-weight:bold;position:absolute;left:50%;bottom:2em;padding:.5em 1.6em;translate:0 0;box-shadow:0 .7em 1.2em rgba(0,0,0,.7);transition:.3s ease;transition-property:translate,opacity;border-radius:.3em;z-index:15}.notification.hidden{opacity:0;translate:0 1em}.notification.red{color:var(--notification-color-red);background:var(--notification-block-red)}.notification.yellow{color:var(--notification-color-yellow);background:var(--notification-block-yellow)}.notification.green{color:var(--notification-color-green);background:var(--notification-block-green)}@keyframes spin{0%{rotate:0}100%{rotate:360deg}}.button{white-space:nowrap;text-decoration:none;font-size:.9em;font-weight:700;cursor:pointer;padding:.4em 1em;border-radius:.4em;transition:.1s ease;transition-property:translate,filter}.button>*{pointer-events:none}.button span{display:block;pointer-events:none;transition:.3s ease;transition-property:opacity,width}.button img{width:1em;height:1em;-o-object-fit:cover;object-fit:cover;transition:.3s ease;transition-property:opacity,width,height;animation:spin 1s infinite forwards linear}.button:hover{filter:brightness(1.1);translate:0 -0.05em}.button:active{filter:brightness(0.9);translate:0 .1em}.button.disable{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1)}.button.small{padding:.1em .5em}.buttons-group{font-size:.9em;gap:10px;height:1.8em}.buttons-group>*{height:100%}.dl-button{color:var(--background-1);background:var(--button-download)}.update-button{color:var(--background-1);background:var(--button-update)}.delete-button{color:var(--background-1);background:var(--button-delete)}.open-button{color:var(--background-1);background:var(--button-open)}.open-folder-button{color:var(--background-1);background:var(--button-open-folder)}.settings-builder-button{display:none;color:var(--background-1);background:var(--button-builder)}.settings-builder-button.active{display:unset}.add-option-button{color:var(--background-1);background:var(--button-add-option)}.save-button{color:var(--background-1);background:var(--button-save)}.submit-button{display:block;color:var(--background-1);padding:.2em 1em;background:var(--submit-delete)}.remove-option-button,.cancel-button{color:var(--background-1);background:var(--button-cancel)}.update-settings-button,.update-x2-settings-button{color:var(--background-1);background:var(--button-update-settings)}.search-bar{font-size:.9em;font-family:inherit;color:var(--search-color-1);background:var(--search-block);padding:.2em .6em;border-radius:.2em;outline:0;border:0;transition:.2s ease;transition-property:filter,opacity}.search-bar::-moz-placeholder{color:var(--search-color-2)}.search-bar::placeholder{color:var(--search-color-2)}.search-bar.disable{-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;filter:grayscale(1);opacity:.5}.settings{display:grid;gap:.8em;color:var(--block-color-1);padding:1em;background:var(--block-1);border-radius:.3em}.settings .si-btn{margin-top:1em}.si:not(.-s) div:nth-child(1){width:20em}.si p,.si .settings-note{filter:brightness(0.8);font-size:.8em;max-width:20em}.si .settings-note{margin-top:.5em;font-style:italic}.si input[type=text],.si input[type=number],.si input[type=password],.si textarea{font-size:.9em;font-family:inherit;color:var(--search-color-1);width:20em;padding:.2em .6em;background:var(--search-block);outline:0;border-radius:.2em;border:0;transition:.2s ease;transition-property:filter,opacity}.si input[type=text]::-moz-placeholder, .si input[type=number]::-moz-placeholder, .si input[type=password]::-moz-placeholder, .si textarea::-moz-placeholder{color:var(--search-color-2)}.si input[type=text]::placeholder,.si input[type=number]::placeholder,.si input[type=password]::placeholder,.si textarea::placeholder{color:var(--search-color-2)}.si-checkbox{justify-content:center;align-items:center;cursor:pointer;display:flex;gap:.4em;height:1em}.si-checkbox input{display:none}.si-checkbox input:checked~.checkmark::before{scale:.7;background:var(--search-color-1)}.si-checkbox input:checked~.status::before{content:"Enabled"}.si-checkbox .checkmark{background:#637a91;width:1em;height:1em;border-radius:.2em;overflow:hidden;display:block}.si-checkbox .checkmark::before{content:"";display:block;width:1em;height:1em;scale:1;background:#637a91;transition:background .1s ease,scale .3s ease;border-radius:.2em}.si-checkbox .status::before{content:"Disabled"}.si-btn{gap:1em}.modal{position:fixed;top:0;left:0;right:0;bottom:0;transition:background .5s ease,transform .15s ease,-webkit-backdrop-filter .6s ease;transition:background .5s ease,backdrop-filter .6s ease,transform .15s ease;transition:background .5s ease,backdrop-filter .6s ease,transform .15s ease,-webkit-backdrop-filter .6s ease;z-index:10}.modal:not(.hidden){background:rgba(0,0,0,.5);-webkit-backdrop-filter:opacity(0.5) blur(50px);backdrop-filter:opacity(0.5) blur(50px)}.modal:not(.hidden) .m-content{opacity:1;transform:translate(-50%, -50%) translateY(0em)}.modal .m-content{width:min(45em,100vw - 2em);top:50%;left:50%;padding:1em;opacity:0;background:var(--block-1);border-radius:.4em;box-shadow:0 1em 2em rgba(0,0,0,.5),0 1em 4em rgba(0,0,0,.5);transform:translate(-50%, -50%) translateY(2em);transition:opacity .3s ease,transform .3s ease;z-index:1}.modal .ms-title{justify-content:space-between;align-items:center;flex-wrap:wrap;display:flex;padding-bottom:.1em;margin-bottom:.8em;border-bottom:1px solid}.modal .ms-title span:nth-child(2){font-size:.7em}.modal .ms-btns{font-size:.9em;margin-top:1.5em}.modal .m-scroll{display:grid;gap:.8em;max-height:min(35em,100vh - 11em);overflow:auto}.modal .m-scroll::-webkit-scrollbar{width:10px}.modal.-expand{transform:scale(1.02)}.update-available{font-weight:600;font-size:.9em;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;color:var(--background-1);height:3em;padding:.4em 0;transition:padding .4s ease,height .4s ease}.update-available::before{content:"";position:absolute;top:0;left:-30vw;right:-30vw;bottom:0;background:#56c763}.update-available ::-moz-selection{color:#56c763;background-color:var(--background-1)}.update-available ::selection{color:#56c763;background-color:var(--background-1)}.update-available div:nth-child(2){font-size:.8em}.update-available.hidden{display:none}.update-available>*{pointer-events:none}.update-available.loadong{animation:update 2s infinite forwards ease}.update-available.fold{padding:0 0;height:0}@keyframes update{0%{opacity:1}70%{opacity:.6}100%{opacity:1}}.new-item{display:grid;gap:.5em;color:var(--text-1);padding:1em;background:var(--background-1);border-radius:.6em}.new-item select{margin-right:1em}hr.modal-space{margin:1em 0;border:1px solid}.sbi{display:grid;gap:.5em}.m-scroll>.sbi:not(:nth-child(2)){padding-top:1em;border-top:2px solid;margin-top:.5em}.oab{font-size:.8em}.devmode{justify-content:flex-end;font-size:.9em;width:10.5em}.devmode>*{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.external-exists{-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:.7em;color:var(--background-1);gap:.5em;padding:.2em .6em;margin-left:1.4em;background:var(--button-builder);border-radius:.2em}.submit-counter{text-decoration:none;font-weight:600;font-size:.9em;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;color:var(--text-2);gap:1em;padding:.4em .8em;background:var(--block-2);border-radius:.3em;transition:padding .4s ease,height .4s ease}.submit-counter i{color:var(--color-1)}.submit-counter>*{pointer-events:none}.txt-area{align-items:flex-start;flex-direction:column}.txt-area textarea{field-sizing:content;font-size:1em;width:100%}
\ No newline at end of file
diff --git a/packages/server/utils/counters.ts b/packages/server/utils/counters.ts
index 6e9b0e8b..5374bdbf 100644
--- a/packages/server/utils/counters.ts
+++ b/packages/server/utils/counters.ts
@@ -122,6 +122,7 @@ export function createSetting(setting: ISettings, value: any) {
     switch (setting.type) {
         case 'text': {
             return settingsItemHTML
+                .replace('{CLASSES}', '')
                 .replace('{NAME}', title)
                 .replace('{DESCRIPTION}', description)
                 .replace(
@@ -136,6 +137,7 @@ export function createSetting(setting: ISettings, value: any) {
 
         case 'number': {
             return settingsItemHTML
+                .replace('{CLASSES}', '')
                 .replace('{NAME}', title)
                 .replace('{DESCRIPTION}', description)
                 .replace(
@@ -150,6 +152,7 @@ export function createSetting(setting: ISettings, value: any) {
 
         case 'password': {
             return settingsItemHTML
+                .replace('{CLASSES}', '')
                 .replace('{NAME}', title)
                 .replace('{DESCRIPTION}', description)
                 .replace(
@@ -164,6 +167,7 @@ export function createSetting(setting: ISettings, value: any) {
 
         case 'checkbox': {
             return settingsItemHTML
+                .replace('{CLASSES}', '')
                 .replace('{NAME}', title)
                 .replace('{DESCRIPTION}', description)
                 .replace(
@@ -183,6 +187,7 @@ export function createSetting(setting: ISettings, value: any) {
 
         case 'color': {
             return settingsItemHTML
+                .replace('{CLASSES}', '')
                 .replace('{NAME}', title)
                 .replace('{DESCRIPTION}', description)
                 .replace(
@@ -206,6 +211,7 @@ export function createSetting(setting: ISettings, value: any) {
                       .join('\n')
                 : '';
             return settingsItemHTML
+                .replace('{CLASSES}', '')
                 .replace('{NAME}', title)
                 .replace('{DESCRIPTION}', description)
                 .replace(
@@ -216,6 +222,21 @@ export function createSetting(setting: ISettings, value: any) {
                         .replace('{OPTIONS}', options)
                 );
         }
+
+        case 'textarea': {
+            return settingsItemHTML
+                .replace('{CLASSES}', 'txt-area')
+                .replace('{NAME}', title)
+                .replace('{DESCRIPTION}', description)
+                .replace(
+                    '{INPUT}',
+                    textareaHTML
+                        .replace('{TYPE}', 'text')
+                        .replace(/{ID}/gm, setting.uniqueID)
+                        .replace('{ADDON}', `ucs t="${setting.type}"`)
+                        .replace('{VALUE}', value)
+                );
+        }
     }
 
     return '';
diff --git a/packages/server/utils/counters.types.ts b/packages/server/utils/counters.types.ts
index 2a380342..d8a41ca8 100644
--- a/packages/server/utils/counters.types.ts
+++ b/packages/server/utils/counters.types.ts
@@ -16,7 +16,8 @@ export type ISettingsType =
     | 'checkbox'
     | 'options'
     | 'color'
-    | 'note';
+    | 'note'
+    | 'textarea';
 
 export interface ICounter {
     _downloaded?: boolean;
diff --git a/packages/server/utils/htmls.ts b/packages/server/utils/htmls.ts
index a66b0dd3..d7a8919f 100644
--- a/packages/server/utils/htmls.ts
+++ b/packages/server/utils/htmls.ts
@@ -42,7 +42,7 @@ export const resultItemHTML = `
 </div>`;
 
 export const settingsItemHTML = `
-<div class="si flexer">
+<div class="si flexer {CLASSES}">
   <div>
     <h4>{NAME}</h4>
     <p>{DESCRIPTION}</p>