From 9fdb7856ed4cd72235ba6642bbcc20055c05176c Mon Sep 17 00:00:00 2001
From: Orangerot <purple@orangerot.dev>
Date: Sun, 8 Dec 2024 02:59:45 +0100
Subject: feat: apply image filters

---
 index.html | 56 +++++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 37 insertions(+), 19 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index a3ada32..048f3fb 100644
--- a/index.html
+++ b/index.html
@@ -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>
-- 
cgit v1.2.3