diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/layouts/tool.layout.vue | 18 | ||||
| -rw-r--r-- | src/tools/base64-converter/base64-converter.vue | 3 | ||||
| -rw-r--r-- | src/tools/bcrypt/bcrypt.vue | 1 | ||||
| -rw-r--r-- | src/tools/crontab-generator/crontab-generator.vue | 1 | ||||
| -rw-r--r-- | src/tools/device-information/device-information.vue | 2 | ||||
| -rw-r--r-- | src/tools/encryption/encryption.vue | 129 | ||||
| -rw-r--r-- | src/tools/html-entities/html-entities.vue | 1 | ||||
| -rw-r--r-- | src/tools/url-encoder/url-encoder.vue | 107 |
8 files changed, 134 insertions, 128 deletions
diff --git a/src/layouts/tool.layout.vue b/src/layouts/tool.layout.vue index 188aa78..58e8fb8 100644 --- a/src/layouts/tool.layout.vue +++ b/src/layouts/tool.layout.vue @@ -33,20 +33,36 @@ useHead(head); {{ route.meta.description }} </div> </div> + </div> + <div class="tool-content"> <slot /> </div> </base-layout> </template> <style lang="less" scoped> +.tool-content { + display: flex; + flex-direction: row; + justify-content: center; + align-items: flex-start; + flex-wrap: wrap; + gap: 16px; + + ::v-deep(& > *) { + flex: 0 1 600px; + } +} + .tool-layout { - max-width: 700px; + max-width: 600px; margin: 0 auto; box-sizing: border-box; .tool-header { padding: 40px 0; + width: 100%; .n-h1 { opacity: 0.9; diff --git a/src/tools/base64-converter/base64-converter.vue b/src/tools/base64-converter/base64-converter.vue index 05b15e4..307ea2f 100644 --- a/src/tools/base64-converter/base64-converter.vue +++ b/src/tools/base64-converter/base64-converter.vue @@ -50,8 +50,7 @@ async function onUpload({ file: { file } }: { file: UploadFileInfo }) { <style lang="less" scoped> .n-input, -.n-upload, -.n-card { +.n-upload { margin-bottom: 15px; } diff --git a/src/tools/bcrypt/bcrypt.vue b/src/tools/bcrypt/bcrypt.vue index 1770112..32f56ac 100644 --- a/src/tools/bcrypt/bcrypt.vue +++ b/src/tools/bcrypt/bcrypt.vue @@ -22,7 +22,6 @@ </n-space> </n-card> - <br /> <n-card title="Compare string with hash"> <n-form label-width="120"> <n-form-item label="Your string: " label-placement="left"> diff --git a/src/tools/crontab-generator/crontab-generator.vue b/src/tools/crontab-generator/crontab-generator.vue index 1c8be02..5028204 100644 --- a/src/tools/crontab-generator/crontab-generator.vue +++ b/src/tools/crontab-generator/crontab-generator.vue @@ -28,7 +28,6 @@ </n-form> </n-space> </n-card> - <br /> <n-card> <pre> ┌──────────── [optional] seconds (0 - 59) diff --git a/src/tools/device-information/device-information.vue b/src/tools/device-information/device-information.vue index dfa42fe..77fe5d7 100644 --- a/src/tools/device-information/device-information.vue +++ b/src/tools/device-information/device-information.vue @@ -1,5 +1,5 @@ <template> - <n-card v-for="{ name, information } in sections" :key="name" :title="name" style="margin-bottom: 15px"> + <n-card v-for="{ name, information } in sections" :key="name" :title="name"> <n-grid cols="1 400:2" x-gap="12" y-gap="12"> <n-gi v-for="{ label, value } in information" :key="label" class="information"> <n-card :bordered="false" embedded> diff --git a/src/tools/encryption/encryption.vue b/src/tools/encryption/encryption.vue index 0de5903..154ad52 100644 --- a/src/tools/encryption/encryption.vue +++ b/src/tools/encryption/encryption.vue @@ -1,81 +1,78 @@ <template> - <div> - <n-card title="Encrypt"> - <n-space item-style="flex: 1 1 0"> - <n-form-item label="Your text:" :show-feedback="false"> - <n-input - v-model:value="cypherInput" - type="textarea" - placeholder="The string to cypher" - :autosize="{ minRows: 4 }" - /> - </n-form-item> - <n-space vertical> - <n-form-item label="Your secret key:" :show-feedback="false"> - <n-input v-model:value="cypherSecret" /> - </n-form-item> - <n-form-item label="Encryption algorithm:" :show-feedback="false"> - <n-select - v-model:value="cypherAlgo" - :options="Object.keys(algos).map((label) => ({ label, value: label }))" - /> - </n-form-item> - </n-space> - </n-space> - <br /> - <n-form-item label="Yout text encrypted:" :show-feedback="false"> + <n-card title="Encrypt"> + <n-space item-style="flex: 1 1 0"> + <n-form-item label="Your text:" :show-feedback="false"> <n-input - :value="cypherOutput" + v-model:value="cypherInput" type="textarea" - placeholder="Your string hash" - :autosize="{ minRows: 2 }" - readonly - autocomplete="off" - autocorrect="off" - autocapitalize="off" - spellcheck="false" + placeholder="The string to cypher" + :autosize="{ minRows: 4 }" /> </n-form-item> - </n-card> - <br /> - <n-card title="Decrypt"> - <n-space item-style="flex: 1 1 0"> - <n-form-item label="Your encrypted text:" :show-feedback="false"> - <n-input - v-model:value="decryptInput" - type="textarea" - placeholder="The string to cypher" - :autosize="{ minRows: 4 }" + <n-space vertical> + <n-form-item label="Your secret key:" :show-feedback="false"> + <n-input v-model:value="cypherSecret" /> + </n-form-item> + <n-form-item label="Encryption algorithm:" :show-feedback="false"> + <n-select + v-model:value="cypherAlgo" + :options="Object.keys(algos).map((label) => ({ label, value: label }))" /> </n-form-item> - <n-space vertical> - <n-form-item label="Your secret key:" :show-feedback="false"> - <n-input v-model:value="decryptSecret" /> - </n-form-item> - <n-form-item label="Encryption algorithm:" :show-feedback="false"> - <n-select - v-model:value="decryptAlgo" - :options="Object.keys(algos).map((label) => ({ label, value: label }))" - /> - </n-form-item> - </n-space> </n-space> - <br /> - <n-form-item label="Yout decrypted text:" :show-feedback="false"> + </n-space> + <br /> + <n-form-item label="Yout text encrypted:" :show-feedback="false"> + <n-input + :value="cypherOutput" + type="textarea" + placeholder="Your string hash" + :autosize="{ minRows: 2 }" + readonly + autocomplete="off" + autocorrect="off" + autocapitalize="off" + spellcheck="false" + /> + </n-form-item> + </n-card> + <n-card title="Decrypt"> + <n-space item-style="flex: 1 1 0"> + <n-form-item label="Your encrypted text:" :show-feedback="false"> <n-input - :value="decryptOutput" + v-model:value="decryptInput" type="textarea" - placeholder="Your string hash" - :autosize="{ minRows: 2 }" - readonly - autocomplete="off" - autocorrect="off" - autocapitalize="off" - spellcheck="false" + placeholder="The string to cypher" + :autosize="{ minRows: 4 }" /> </n-form-item> - </n-card> - </div> + <n-space vertical> + <n-form-item label="Your secret key:" :show-feedback="false"> + <n-input v-model:value="decryptSecret" /> + </n-form-item> + <n-form-item label="Encryption algorithm:" :show-feedback="false"> + <n-select + v-model:value="decryptAlgo" + :options="Object.keys(algos).map((label) => ({ label, value: label }))" + /> + </n-form-item> + </n-space> + </n-space> + <br /> + <n-form-item label="Yout decrypted text:" :show-feedback="false"> + <n-input + :value="decryptOutput" + type="textarea" + placeholder="Your string hash" + :autosize="{ minRows: 2 }" + readonly + autocomplete="off" + autocorrect="off" + autocapitalize="off" + spellcheck="false" + /> + </n-form-item> + </n-card> </template> <script setup lang="ts"> diff --git a/src/tools/html-entities/html-entities.vue b/src/tools/html-entities/html-entities.vue index 13d5b6e..7481259 100644 --- a/src/tools/html-entities/html-entities.vue +++ b/src/tools/html-entities/html-entities.vue @@ -23,7 +23,6 @@ <n-button secondary @click="copyEscaped"> Copy </n-button> </n-space> </n-card> - <br /> <n-card title="Unescape html entities"> <n-form-item label="Your escaped string :"> <n-input diff --git a/src/tools/url-encoder/url-encoder.vue b/src/tools/url-encoder/url-encoder.vue index e178353..5615791 100644 --- a/src/tools/url-encoder/url-encoder.vue +++ b/src/tools/url-encoder/url-encoder.vue @@ -1,63 +1,60 @@ <template> - <div> - <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: 2 }" - /> - </n-form-item> + <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: 2 }" + /> + </n-form-item> - <n-form-item label="Your string encoded :"> - <n-input - :value="encodeOutput" - type="textarea" - readonly - placeholder="Your string encoded" - :autosize="{ minRows: 2 }" - /> - </n-form-item> + <n-form-item label="Your string encoded :"> + <n-input + :value="encodeOutput" + type="textarea" + readonly + placeholder="Your string encoded" + :autosize="{ minRows: 2 }" + /> + </n-form-item> - <n-space justify="center"> - <n-button secondary @click="copyEncoded"> Copy </n-button> - </n-space> - </n-card> - <br /> - <n-card title="Decode"> - <n-form-item - label="Your encoded string :" - :feedback="decodeValidation.message" - :validation-status="decodeValidation.status" - > - <n-input - v-model:value="decodeInput" - type="textarea" - placeholder="The string to decode" - :autosize="{ minRows: 2 }" - /> - </n-form-item> + <n-space justify="center"> + <n-button secondary @click="copyEncoded"> Copy </n-button> + </n-space> + </n-card> + <n-card title="Decode"> + <n-form-item + label="Your encoded string :" + :feedback="decodeValidation.message" + :validation-status="decodeValidation.status" + > + <n-input + v-model:value="decodeInput" + type="textarea" + placeholder="The string to decode" + :autosize="{ minRows: 2 }" + /> + </n-form-item> - <n-form-item label="Your string decoded :"> - <n-input - :value="decodeOutput" - type="textarea" - readonly - placeholder="Your string decoded" - :autosize="{ minRows: 2 }" - /> - </n-form-item> + <n-form-item label="Your string decoded :"> + <n-input + :value="decodeOutput" + type="textarea" + readonly + placeholder="Your string decoded" + :autosize="{ minRows: 2 }" + /> + </n-form-item> - <n-space justify="center"> - <n-button secondary @click="copyDecoded"> Copy </n-button> - </n-space> - </n-card> - </div> + <n-space justify="center"> + <n-button secondary @click="copyDecoded"> Copy </n-button> + </n-space> + </n-card> </template> <script setup lang="ts"> |