Add slider for analytics

views/dashboardPage/dashboard.css

@@ -439,6 +439,60 @@ Recipe Book Strand
 /*
 Analytics Strand
 */
+.switch{
+    position: relative;
+    display: inline-block;
+    width: 239px;
+    height: 34px;
+    border: 3px solid rgb(0, 27, 45);
+    color: white;
+}
+
+    .switch input{
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+        .switch input:focus + .slider{
+            box-shadow: 0 0 1px #2196F3;
+        }
+
+        .switch input:checked + .slider:before {
+            -webkit-transform: translateX(105px);
+            -ms-transform: translateX(92px);
+            transform: translateX(125px);
+        }
+
+    .slider{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        padding: 0 24px 0 5px;
+        background: rgb(255, 99, 107);
+        transition: 0.2s;
+    }
+
+        .slider:before{
+            position: absolute;
+            content: "";
+            height: 30px;
+            width: 110px;
+            left: 1px;
+            bottom: 1px;
+            background: rgba(255, 255, 255, 0.6);
+            border: 1px solid rgb(0, 27, 45);
+            transition: 0.2s;
+        }
+
+    
+
 .analContent{
     display: flex;
     justify-content: space-around;

views/dashboardPage/dashboard.ejs

@@ -253,6 +253,11 @@
                 <div class="strandHead">
                     <h1 class="strandTitle">ANALYTICS</h1>
 
+                    <label class="switch">
+                        <input type="checkbox">
+                        <span class="slider"><p>INGREDIENTS</p><p>RECIPES</p></span>
+                    </label>
+
                     <div>
                         <label>FROM:
                             <input id="analStartDate" type="date">