diff options
| author | Orangerot <purple@orangerot.dev> | 2024-12-08 02:59:45 +0100 |
|---|---|---|
| committer | Orangerot <purple@orangerot.dev> | 2024-12-08 02:59:45 +0100 |
| commit | 9fdb7856ed4cd72235ba6642bbcc20055c05176c (patch) | |
| tree | a8461d2372d9f68e5dd8399e330450b90a9d9840 /index.html | |
| parent | 4ec96e68d137614172c86d162adfa6f676b0eef9 (diff) | |
feat: apply image filters
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 56 |
1 files changed, 37 insertions, 19 deletions
@@ -60,17 +60,17 @@ <div class="control"> <input type="range" id="brightness" - class="slider is-fullwidth is-primary" - min="0" max="100" value="50" step="1"> + class="brightness slider is-fullwidth is-primary" + min="0" max="2" value="1" step="0.1"> </div> </div> <div class="field"> <label class="label">Saturation</label> <div class="control"> <input type="range" - id="saturation" - class="slider is-fullwidth is-primary" - min="0" max="100" value="50" step="1"> + id="saturate" + class="saturate slider is-fullwidth is-primary" + min="0" max="2" value="1" step="0.1"> </div> </div> <div class="field"> @@ -78,8 +78,8 @@ <div class="control"> <input type="range" id="contrast" - class="slider is-fullwidth is-primary" - min="0" max="100" value="50" step="1"> + class="contrast slider is-fullwidth is-primary" + min="0" max="2" value="1" step="0.1"> </div> </div> @@ -89,6 +89,15 @@ <p class="menu-label"> Blur and Sharpen </p> + <div class="field"> + <label class="label">Blur</label> + <div class="control"> + <input type="range" + id="blur" + class="blur slider is-fullwidth is-primary" + min="0" max="20" value="0" step="1"> + </div> + </div> </aside> </div> </div> @@ -103,43 +112,52 @@ </button> <p class="menu-label"> - Color Correction + Color Correction </p> <div class="field"> <label class="label">Brightness</label> <div class="control"> <input type="range" - id="slider0" - class="slider is-fullwidth is-primary" - min="0" max="100" value="50" step="1"> + id="brightness" + class="brightness slider is-fullwidth is-primary" + min="0" max="2" value="1" step="0.1"> </div> </div> <div class="field"> <label class="label">Saturation</label> <div class="control"> <input type="range" - id="slider0" - class="slider is-fullwidth is-primary" - min="0" max="100" value="50" step="1"> + id="saturate" + class="saturate slider is-fullwidth is-primary" + min="0" max="2" value="1" step="0.1"> </div> </div> <div class="field"> <label class="label">Contrast</label> <div class="control"> <input type="range" - id="slider0" - class="slider is-fullwidth is-primary" - min="0" max="100" value="50" step="1"> + id="contrast" + class="contrast slider is-fullwidth is-primary" + min="0" max="2" value="1" step="0.1"> </div> </div> <p class="menu-label"> - Distortion + Distortion </p> <p class="menu-label"> - Blur and Sharpen + Blur and Sharpen </p> + <div class="field"> + <label class="label">Blur</label> + <div class="control"> + <input type="range" + id="blur" + class="blur slider is-fullwidth is-primary" + min="0" max="20" value="0" step="1"> + </div> + </div> </div> </body> </html> |