diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 126 |
1 files changed, 123 insertions, 3 deletions
@@ -95,7 +95,7 @@ <input type="range" id="brightness" class="brightness slider is-fullwidth is-primary" - min="0" max="2" value="1" step="0.05"> + min="0" max="2" value="1" step="0.01"> </div> </div> <div class="field"> @@ -128,10 +128,70 @@ min="0" max="2" value="1" step="0.01"> </div> </div> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-palette fa-fw"></i> + Color + <span class="icon is-pulled-right hue-rotate-reset"> + <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> + </span> + </label> + <div class="control"> + <input type="range" + id="hue-rotate" + class="hue-rotate slider is-fullwidth is-primary" + min="-180" max="180" value="0" step="1"> + </div> + </div> <p class="menu-label"> - Distortion + Filters </p> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-radio fa-fw"></i> + Grayscale + <span class="icon is-pulled-right grayscale-reset"> + <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> + </span> + </label> + <div class="control"> + <input type="range" + id="grayscale" + class="grayscale slider is-fullwidth is-primary" + min="0" max="1" value="0" step="0.01"> + </div> + </div> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-hat-cowboy-side fa-fw"></i> + Sepia + <span class="icon is-pulled-right sepia-reset"> + <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> + </span> + </label> + <div class="control"> + <input type="range" + id="sepia" + class="sepia slider is-fullwidth is-primary" + min="0" max="1" value="0" step="0.01"> + </div> + </div> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-circle-half-stroke fa-fw"></i> + Invert + <span class="icon is-pulled-right invert-reset"> + <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> + </span> + </label> + <div class="control"> + <input type="range" + id="invert" + class="invert slider is-fullwidth is-primary" + min="0" max="1" value="0" step="0.01"> + </div> + </div> <p class="menu-label"> Blur and Sharpen </p> @@ -219,10 +279,70 @@ min="0" max="2" value="1" step="0.01"> </div> </div> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-palette fa-fw"></i> + Color + <span class="icon is-pulled-right hue-rotate-reset"> + <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> + </span> + </label> + <div class="control"> + <input type="range" + id="hue-rotate" + class="hue-rotate slider is-fullwidth is-primary" + min="-180" max="180" value="0" step="1"> + </div> + </div> <p class="menu-label"> - Distortion + Filters </p> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-radio fa-fw"></i> + Grayscale + <span class="icon is-pulled-right grayscale-reset"> + <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> + </span> + </label> + <div class="control"> + <input type="range" + id="grayscale" + class="grayscale slider is-fullwidth is-primary" + min="0" max="1" value="0" step="0.01"> + </div> + </div> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-hat-cowboy-side fa-fw"></i> + Sepia + <span class="icon is-pulled-right sepia-reset"> + <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> + </span> + </label> + <div class="control"> + <input type="range" + id="sepia" + class="sepia slider is-fullwidth is-primary" + min="0" max="1" value="0" step="0.01"> + </div> + </div> + <div class="field"> + <label class="label"> + <i class="fa-solid fa-circle-half-stroke fa-fw"></i> + Invert + <span class="icon is-pulled-right invert-reset"> + <i class="fa-solid fa-arrow-rotate-left fa-fw"></i> + </span> + </label> + <div class="control"> + <input type="range" + id="invert" + class="invert slider is-fullwidth is-primary" + min="0" max="1" value="0" step="0.01"> + </div> + </div> <p class="menu-label"> Blur and Sharpen </p> |