feat: added fontawesome icons

1 files changed, 50 insertions, 16 deletions

diff --git a/index.html b/index.html
index 3061e68..e315a99 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="main.js"></script>
-    <link rel="stylesheet" href="bulma.min.css">
-    <link rel="stylesheet" href="bulma-slider.css">
+    <link rel="stylesheet" href="lib/bulma.min.css">
+    <link rel="stylesheet" href="lib/bulma-slider.css">
+    <link rel="stylesheet" href="lib/fontawesome/css/fontawesome.min.css">
+    <link rel="stylesheet" href="lib/fontawesome/css/solid.min.css">
     <link rel="stylesheet" href="style.css">
     <title>Imagine - Image Editor</title>
   </head>
@@ -19,14 +21,22 @@
               <div id="imports" class="columns is-mobile">
                 <div class="column">
                   <button id="take-picture" 
-                     class="button is-large is-responsive is-fullwidth">
+                      class="button is-large is-responsive is-fullwidth py-6"
+                      style="display: flex; flex-direction: column; align-items: center;"
+                     >
+                    <i class="fa-solid fa-6x fa-camera mb-4"></i> 
                     Take a Picture
                   </button>
                 </div>
                 <div class="column">
                   <label for="upload-image"
-                     class="button is-large is-responsive is-fullwidth">
-                    Upload an Image
+                     class="button is-large is-responsive is-fullwidth py-6"
+                      style="display: flex; flex-direction: column; align-items: center;"
+                     >
+                     <i class="fa-solid fa-6x fa-upload mb-4"></i> 
+                     <span>
+                       Upload an Image
+                     </span>
                   </label>
                   <input type="file" id="upload-image" accept="image/*" style="display: none">
                 </div>
@@ -34,7 +44,7 @@
             </div><br>
             <a href="#settings" class="button is-hidden-desktop" style="position: absolute; right: 30px;
                      bottom: 30px">
-              Settings
+                <i class="fa-solid fa-sliders mr-2"></i> Settings
             </a>
           </div>
         </div>
@@ -48,6 +58,7 @@
             Save Image
           </button>
           <button id="share" class="button is-secondary">
+            <i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
             Share
           </button>
 
@@ -56,7 +67,10 @@
           </p>
 
           <div class="field">
-            <label class="label">Brightness</label>
+            <label class="label">
+              <i class="fa-solid fa-sun fa-fw"></i>
+              Brightness
+            </label>
             <div class="control">
               <input type="range"
                      id="brightness" 
@@ -65,7 +79,10 @@
             </div>
           </div>
           <div class="field">
-            <label class="label">Saturation</label>
+            <label class="label">
+              <i class="fa-solid fa-leaf fa-fw"></i>
+              Saturation
+            </label>
             <div class="control">
               <input type="range"
                      id="saturate" 
@@ -74,7 +91,10 @@
             </div>
           </div>
           <div class="field">
-            <label class="label">Contrast</label>
+            <label class="label">
+              <i class="fa-solid fa-circle-half-stroke fa-fw"></i>
+              Contrast
+            </label>
             <div class="control">
               <input type="range"
                      id="contrast" 
@@ -90,7 +110,10 @@
             Blur and Sharpen
           </p>
           <div class="field">
-            <label class="label">Blur</label>
+            <label class="label">
+              <i class="fa-solid fa-water fa-fw"></i>
+              Blur
+            </label>
             <div class="control">
               <input type="range"
                      id="blur" 
@@ -102,12 +125,11 @@
       </div>
     </div>
     <div class="notification is-fullwidth is-hidden-desktop" style="z-index: 200">
-      <span id="settings"></span>
-      <a href="#top" class="delete"></a>
       <button id="save" class="button is-primary">
         Save Image
       </button>
       <button id="share" class="button is-secondary">
+        <i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
         Share
       </button>
 
@@ -116,7 +138,10 @@
       </p>
 
       <div class="field">
-        <label class="label">Brightness</label>
+        <label class="label">
+          <i class="fa-solid fa-sun fa-fw"></i>
+          Brightness
+        </label>
         <div class="control">
           <input type="range"
                  id="brightness" 
@@ -125,7 +150,10 @@
         </div>
       </div>
       <div class="field">
-        <label class="label">Saturation</label>
+        <label class="label">
+          <i class="fa-solid fa-leaf fa-fw"></i>
+          Saturation
+        </label>
         <div class="control">
           <input type="range"
                  id="saturate" 
@@ -134,7 +162,10 @@
         </div>
       </div>
       <div class="field">
-        <label class="label">Contrast</label>
+        <label class="label">
+          <i class="fa-solid fa-circle-half-stroke fa-fw"></i>
+          Contrast
+        </label>
         <div class="control">
           <input type="range"
                  id="contrast" 
@@ -150,7 +181,10 @@
       Blur and Sharpen
       </p>
       <div class="field">
-        <label class="label">Blur</label>
+        <label class="label">
+          <i class="fa-solid fa-water fa-fw"></i>
+          Blur
+        </label>
         <div class="control">
           <input type="range"
                  id="blur"