add apply filter lens js

index.html

@@ -27,7 +27,21 @@
         <video id="stream" muted autoplay></video>
         <div class="controls" role="button" tabindex="0">
             <div class="filters">
-                <p></p>
+                <input type="checkbox" name="" id="filter-toggle">
+                <label for="filter-toggle"></label>
+
+                <input type="radio" id="none" name="filters" value="none" checked>
+                <label for="none"></label>
+                <input type="radio" id="monochrome" name="filters" value="monochrome">
+                <label for="monochrome"></label>
+                <input type="radio" id="gradient1" name="filters" value="gradient">
+                <label for="gradient1"></label>
+                <input type="radio" id="gradient2" name="filters" value="gradient2">
+                <label for="gradient2"></label>
+                <input type="radio" id="gradient3" name="filters" value="gradient3">
+                <label for="gradient3"></label>
+                <input type="radio" id="gradient4" name="filters" value="gradient4">
+                <label for="gradient4"></label>
             </div>
             <div class="capture-button" role="button" tabindex="0">
                 <svg width="72" height="72" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">

js/apply-filters.mjs

@@ -0,0 +1,11 @@
+export const applyFilters = () => {
+  let filterControls = document.querySelector(".filters");
+  let checkbox = document.getElementById("filter-toggle");
+  document.body.addEventListener("click", (e) => {
+    if (checkbox.checked === true) checkbox.checked = false;
+  });
+  filterControls.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (checkbox.checked === false) checkbox.checked = true;
+  });
+};

main.js

@@ -2,8 +2,10 @@ import { streamWebCamVideo } from "./js/stream.mjs";
 import { changeFacingMode } from "./js/camera-facing-mode.mjs";
 import { capturePhoto } from "./js/photo-capture-and-save.mjs";
 import { captureVideo } from "./js/video-capture-and-save.mjs";
+import { applyFilters } from "./js/apply-filters.mjs";
 
 streamWebCamVideo();
 changeFacingMode();
 capturePhoto();
 captureVideo();
+applyFilters();

style.css

@@ -59,23 +59,85 @@ video.flip {
 /* Video filters */
 
 .filters {
-    inline-size: 48px;
-    block-size: 48px;
+    position: relative;
+    inline-size: 50px;
+    block-size: 50px;
     display: flex;
     align-items: center;
+    padding-block-start: 0;
+    gap: 10px;
     justify-content: center;
-    border: 1px solid white;
-    border-radius: 50%;
+    flex-direction: column;
+    border: 1.5px solid transparent;
+    background-color: black;
+    border-radius: 48px;
     overflow: hidden;
     cursor: pointer;
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+}
+
+.filters #filter-toggle:not(:checked)~input:not(:checked)+label {
+    display: none;
+}
+
+.filters #filter-toggle:not(:checked)~label {
+    pointer-events: none;
+}
+
+.filters #filter-toggle:not(:checked)+label {
+    display: none;
+}
+
+.filters:has(#filter-toggle:checked) {
+    block-size: 200px;
+    padding-block-start: 80px;
+    border: 1.5px solid white;
+    overflow: scroll;
+}
+
+
+.filters::-webkit-scrollbar {
+    display: none;
 }
 
-.filters p {
+.filters input {
+    display: none;
+}
+
+.filters label {
     inline-size: 48px;
-    block-size: 48px;
+    min-block-size: 48px;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.filters label[for="none"] {
+    background-image: linear-gradient(45deg, #111 48%, white 48%, white 52%, #111 52%, #111);
+    border: 1.5px solid white;
+}
+
+.filters label[for="monochrome"] {
     background-image: linear-gradient(black 50%, white);
 }
 
+.filters label[for="gradient1"] {
+    background-image: linear-gradient(pink 50%, blue);
+}
+
+.filters label[for="gradient2"] {
+    background-image: linear-gradient(purple 50%, blue);
+}
+
+.filters label[for="gradient3"] {
+    background-image: linear-gradient(lightgreen, royalblue);
+}
+
+
+.filters label[for="gradient4"] {
+    background-image: linear-gradient(yellow, white);
+}
+
 /* Switch between video and photo capture modes */
 .switch-camera-video-photo-mode input[type="checkbox"] {
     display: none;