Created
September 25, 2023 19:35
-
-
Save MoeRayo/c041e35a92e1e6047ec3d006a468e5f1 to your computer and use it in GitHub Desktop.
Mechanism that allows users to add the transformation option values
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="flex flex-column flex-row-ns pa3 calisto bg-black-05"> | |
<div class="w-50-ns w-100 ph3"> | |
<!-- upload image --> | |
... | |
</div> | |
<section class="w-40-l w-50-m w-100 ph3 tl"> | |
<h2>Transform Image</h2> | |
<form class="ba b--black bw2 bg-white br2 mw6 center pv2 ph4 shadow-5 f6"> | |
<div> | |
<label for="height" class="dib mb2 mr2 black-70 f5 w-30" | |
>Height</label | |
> | |
<input | |
type="number" | |
name="height" | |
id="height" | |
class="dib mb3 br2 pa2 ba bw1 b--black" | |
v-model="height" /> | |
</div> | |
<div> | |
<label class="dib mb2 mr2 black-70 f5 w-30" for="width">Width</label> | |
<input | |
type="number" | |
name="width" | |
id="width" | |
class="dib mb3 br2 pa2 ba bw1 b--black" | |
v-model="width" /> | |
</div> | |
<div> | |
<label class="dib mb2 mr2 black-70 f5 w-30" for="sharpen" | |
>Sharpen</label | |
> | |
<input | |
type="number" | |
name="sharpen" | |
id="sharpen" | |
class="dib mb3 br2 pa2 ba bw1 b--black" | |
v-model="sharpen" | |
min="1" | |
max="10" /> | |
</div> | |
<div> | |
<label class="dib mb2 mr2 black-70 f5 w-30" for="blur">Blur</label> | |
<input | |
type="number" | |
name="blur" | |
id="blur" | |
class="dib mb3 br2 pa2 ba bw1 b--black" | |
v-model="blur" | |
min="1" | |
max="250" /> | |
</div> | |
<button | |
class="center db pv2 ph3 mb3 tracked bg-black ba br3 white hover-black hover-bg-black-30 bg-animate pointer f7"> | |
Download | |
</button> | |
</form> | |
</section> | |
</div> | |
</template> | |
<script> | |
export default { | |
data() { | |
return { | |
height: 100, | |
sharpen: 0, | |
blur: 0, | |
width: 100, | |
}; | |
}, | |
}; | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment