1 files changed, 68 insertions, 34 deletions
diff --git a/src/tools/url-encoder/url-encoder.vue b/src/tools/url-encoder/url-encoder.vue
index 45bddc8..c3ed6ba 100644
--- a/src/tools/url-encoder/url-encoder.vue
+++ b/src/tools/url-encoder/url-encoder.vue
@@ -1,38 +1,72 @@
 <template>
-    <n-space item-style="flex:1">
-        <n-card title="Encode">
-            <n-form-item label="Your string :" :feedback="encodedValidation.message"
-                :validation-status="encodedValidation.status">
-                <n-input v-model:value="encodeInput" type="textarea" placeholder="The string to encode"
-                    :autosize="{ minRows: 3 }" />
-            </n-form-item>
-
-            <n-form-item label="Your string encoded :">
-                <n-input :value="encodeOutput" type="textarea" readonly placeholder="Your string encoded"
-                    :autosize="{ minRows: 3 }" />
-            </n-form-item>
-
-            <n-space justify="center">
-                <n-button @click="copyEncoded" secondary>Copy</n-button>
-            </n-space>
-        </n-card>
-        <n-card title="Encode">
-            <n-form-item label="Your encode string :" :feedback="decodeValidation.message"
-                :validation-status="decodeValidation.status">
-                <n-input v-model:value="decodeInput" type="textarea" placeholder="The string to decode"
-                    :autosize="{ minRows: 3 }" />
-            </n-form-item>
-
-            <n-form-item label="Your string decoded :">
-                <n-input :value="decodeOutput" type="textarea" readonly placeholder="Your string decoded"
-                    :autosize="{ minRows: 3 }" />
-            </n-form-item>
-
-            <n-space justify="center">
-                <n-button @click="copyDecoded" secondary>Copy</n-button>
-            </n-space>
-        </n-card>
-    </n-space>
+  <n-space item-style="flex:1">
+    <n-card title="Encode">
+      <n-form-item
+        label="Your string :"
+        :feedback="encodedValidation.message"
+        :validation-status="encodedValidation.status"
+      >
+        <n-input
+          v-model:value="encodeInput"
+          type="textarea"
+          placeholder="The string to encode"
+          :autosize="{ minRows: 3 }"
+        />
+      </n-form-item>
+
+      <n-form-item label="Your string encoded :">
+        <n-input
+          :value="encodeOutput"
+          type="textarea"
+          readonly
+          placeholder="Your string encoded"
+          :autosize="{ minRows: 3 }"
+        />
+      </n-form-item>
+
+      <n-space justify="center">
+        <n-button
+          secondary
+          @click="copyEncoded"
+        >
+          Copy
+        </n-button>
+      </n-space>
+    </n-card>
+    <n-card title="Encode">
+      <n-form-item
+        label="Your encode string :"
+        :feedback="decodeValidation.message"
+        :validation-status="decodeValidation.status"
+      >
+        <n-input
+          v-model:value="decodeInput"
+          type="textarea"
+          placeholder="The string to decode"
+          :autosize="{ minRows: 3 }"
+        />
+      </n-form-item>
+
+      <n-form-item label="Your string decoded :">
+        <n-input
+          :value="decodeOutput"
+          type="textarea"
+          readonly
+          placeholder="Your string decoded"
+          :autosize="{ minRows: 3 }"
+        />
+      </n-form-item>
+
+      <n-space justify="center">
+        <n-button
+          secondary
+          @click="copyDecoded"
+        >
+          Copy
+        </n-button>
+      </n-space>
+    </n-card>
+  </n-space>
 </template>
 
 <script setup lang="ts">